"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const Field = require("../field/Field.js");
const useId = require("../composables/use-id.js");
const useExpose = require("../composables/use-expose.js");
const index = require("../field/index.js");
const basic = require("../utils/basic.js");
const create = require("../utils/create.js");
const props = require("../utils/props.js");
const dom = require("../utils/dom.js");
const [name, bem, t] = create.createNamespace("search");
const searchProps = basic.extend({}, Field.fieldSharedProps, {
  label: String,
  shape: props.makeStringProp("square"),
  leftIcon: props.makeStringProp("search"),
  clearable: props.truthProp,
  actionText: String,
  background: String,
  showAction: Boolean
});
var stdin_default = Vue.defineComponent({
  name,
  props: searchProps,
  emits: ["blur", "focus", "clear", "search", "cancel", "clickInput", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
  setup(props2, {
    emit,
    slots,
    attrs
  }) {
    const id = useId.useId();
    const fieldRef = Vue.ref();
    const onCancel = () => {
      if (!slots.action) {
        emit("update:modelValue", "");
        emit("cancel");
      }
    };
    const onKeypress = (event) => {
      const ENTER_CODE = 13;
      if (event.keyCode === ENTER_CODE) {
        dom.preventDefault(event);
        emit("search", props2.modelValue);
      }
    };
    const getInputId = () => props2.id || `${id}-input`;
    const renderLabel = () => {
      if (slots.label || props2.label) {
        return Vue.createVNode("label", {
          "class": bem("label"),
          "for": getInputId(),
          "data-allow-mismatch": "attribute"
        }, [slots.label ? slots.label() : props2.label]);
      }
    };
    const renderAction = () => {
      if (props2.showAction) {
        const text = props2.actionText || t("cancel");
        return Vue.createVNode("div", {
          "class": bem("action"),
          "role": "button",
          "tabindex": 0,
          "onClick": onCancel
        }, [slots.action ? slots.action() : text]);
      }
    };
    const blur = () => {
      var _a;
      return (_a = fieldRef.value) == null ? void 0 : _a.blur();
    };
    const focus = () => {
      var _a;
      return (_a = fieldRef.value) == null ? void 0 : _a.focus();
    };
    const onBlur = (event) => emit("blur", event);
    const onFocus = (event) => emit("focus", event);
    const onClear = (event) => emit("clear", event);
    const onClickInput = (event) => emit("clickInput", event);
    const onClickLeftIcon = (event) => emit("clickLeftIcon", event);
    const onClickRightIcon = (event) => emit("clickRightIcon", event);
    const fieldPropNames = Object.keys(Field.fieldSharedProps);
    const renderField = () => {
      const fieldAttrs = basic.extend({}, attrs, basic.pick(props2, fieldPropNames), {
        id: getInputId()
      });
      const onInput = (value) => emit("update:modelValue", value);
      return Vue.createVNode(index.Field, Vue.mergeProps({
        "ref": fieldRef,
        "type": "search",
        "class": bem("field", {
          "with-message": fieldAttrs.errorMessage
        }),
        "border": false,
        "labelAlign": "left",
        "onBlur": onBlur,
        "onFocus": onFocus,
        "onClear": onClear,
        "onKeypress": onKeypress,
        "onClickInput": onClickInput,
        "onClickLeftIcon": onClickLeftIcon,
        "onClickRightIcon": onClickRightIcon,
        "onUpdate:modelValue": onInput
      }, fieldAttrs), basic.pick(slots, ["left-icon", "right-icon"]));
    };
    useExpose.useExpose({
      focus,
      blur
    });
    return () => {
      var _a;
      return Vue.createVNode("div", {
        "class": bem({
          "show-action": props2.showAction
        }),
        "style": {
          background: props2.background
        }
      }, [(_a = slots.left) == null ? void 0 : _a.call(slots), Vue.createVNode("div", {
        "class": bem("content", props2.shape)
      }, [renderLabel(), renderField()]), renderAction()]);
    };
  }
});
exports.default = stdin_default;
exports.searchProps = searchProps;
