{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-auto-complete/index.vue"],"sourcesContent":["<template>\r\n  <ivue-select\r\n    :modelValue=\"data.currentValue\"\r\n    :placeholder=\"placeholder\"\r\n    :disabled=\"disabled\"\r\n    :placement=\"placement\"\r\n    :transferClassName=\"transferClassName\"\r\n    :searchMethod=\"searchMethod\"\r\n    :transfer=\"transfer\"\r\n    :capture=\"capture\"\r\n    :notFindText=\"''\"\r\n    :loading=\"loading\"\r\n    :loadingText=\"loadingText\"\r\n    :id=\"null\"\r\n    filterable\r\n    auto-complete\r\n    ref=\"select\"\r\n    @on-select=\"handleSelect\"\r\n    @on-clickoutside=\"handleClickOutside\"\r\n  >\r\n    <!-- input -->\r\n    <template #input>\r\n      <slot name=\"input\">\r\n        <ivue-input\r\n          v-model=\"data.currentValue\"\r\n          :name=\"name\"\r\n          :id=\"inputId\"\r\n          :placeholder=\"placeholder\"\r\n          :disabled=\"disabled\"\r\n          :clearable=\"clearable\"\r\n          @on-focus=\"handleFocus\"\r\n          @on-blur=\"handleBlur\"\r\n          @on-clear=\"handleClear\"\r\n          ref=\"input\"\r\n        >\r\n          <template #prefix v-if=\"$slots.prefix\">\r\n            <slot name=\"prefix\"></slot>\r\n          </template>\r\n          <template #suffix v-if=\"$slots.suffix\">\r\n            <slot name=\"suffix\"></slot>\r\n          </template>\r\n        </ivue-input>\r\n      </slot>\r\n    </template>\r\n    <!-- option -->\r\n    <slot>\r\n      <ivue-option v-for=\"item in filteredData\" :value=\"item\" :key=\"item\">{{\r\n        item\r\n      }}</ivue-option>\r\n    </slot>\r\n  </ivue-select>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  computed,\r\n  reactive,\r\n  ref,\r\n  watch,\r\n  nextTick,\r\n  getCurrentInstance,\r\n} from 'vue';\r\nimport IvueSelect from '../ivue-select/index.vue';\r\nimport IvueInput from '../ivue-input/index.vue';\r\nimport IvueOption from '../ivue-select/option.vue';\r\n\r\nimport { oneOf } from '../../utils/assist';\r\nimport { debugWarn } from '../../utils/error';\r\nimport { useFormItem, useFormItemInputId } from '../../hooks';\r\n\r\n// type\r\nimport type { Select, Input, Props, Data, Option } from './types/auto-complete';\r\n\r\nconst prefixCls = 'ivue-auto-complete';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: [\r\n    'update:modelValue',\r\n    'on-search',\r\n    'on-change',\r\n    'on-select',\r\n    'on-focus',\r\n    'on-blur',\r\n    'on-clear',\r\n  ],\r\n  props: {\r\n    /**\r\n     * 设置选择的值\r\n     *\r\n     * @type {String}\r\n     */\r\n    modelValue: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 输入提示\r\n     *\r\n     * @type {String}\r\n     */\r\n    placeholder: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 是否禁用\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    disabled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否可以清除选择\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    clearable: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 弹窗的展开方向\r\n     *\r\n     * @type {String}\r\n     */\r\n    placement: {\r\n      type: String,\r\n      validator(value: string) {\r\n        return oneOf(value, [\r\n          'top',\r\n          'bottom',\r\n          'top-start',\r\n          'bottom-start',\r\n          'top-end',\r\n          'bottom-end',\r\n        ]);\r\n      },\r\n      default: 'bottom-start',\r\n    },\r\n    /**\r\n     * 开启 transfer 时，给浮层添加额外的 class 名称\r\n     *\r\n     * @type {String}\r\n     */\r\n    transferClassName: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 是否将弹层放置于 body 内，在 Tabs、\r\n     * 带有 fixed 的 Table 列内使用时，\r\n     * 建议添加此属性，它将不受父级样式影响，\r\n     * 从而达到更好的效果\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    transfer: {\r\n      type: Boolean,\r\n      default() {\r\n        const global = getCurrentInstance().appContext.config.globalProperties;\r\n\r\n        return !global.$IVUE || global.$IVUE.transfer === ''\r\n          ? false\r\n          : global.$IVUE.transfer;\r\n      },\r\n    },\r\n    /**\r\n     * id\r\n     *\r\n     * @type {String}\r\n     */\r\n    id: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 是否开启外部点击的 capture 模式，可通过全局配置\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    capture: {\r\n      type: Boolean,\r\n      default() {\r\n        const global = getCurrentInstance().appContext.config.globalProperties;\r\n        return !global.$IVUE ? true : global.$IVUE.capture;\r\n      },\r\n    },\r\n    /**\r\n     * 输入框name\r\n     *\r\n     * @type {String}\r\n     */\r\n    name: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 自动完成的数据源\r\n     *\r\n     * @type {Array}\r\n     */\r\n    list: {\r\n      type: Array,\r\n      default: () => [],\r\n    },\r\n    /**\r\n     * 外部过滤方法\r\n     *\r\n     * @type {Function, Boolean}\r\n     */\r\n    filterMethod: {\r\n      type: [Function, Boolean],\r\n      default: false,\r\n    },\r\n    /**\r\n     * 远程搜索方法\r\n     *\r\n     * @type {Function}\r\n     */\r\n    remoteMethod: {\r\n      type: Function,\r\n    },\r\n    /**\r\n     * 加载中\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    loading: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 加载中的文字提示\r\n     *\r\n     * @type {String}\r\n     */\r\n    loadingText: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 输入时是否触发表单的校验\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    validateEvent: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n  },\r\n  setup(props: Props, { emit }) {\r\n    // 设置表单对应的输入框id\r\n    const { formItem } = useFormItem();\r\n\r\n    // 输入框id\r\n    const { inputId } = useFormItemInputId(props, {\r\n      formItemContext: formItem,\r\n    });\r\n\r\n    // dom\r\n\r\n    // select\r\n    const select = ref<Select>();\r\n    // input\r\n    const input = ref<Input>();\r\n\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 当前输入值\r\n       *\r\n       * @type {String}\r\n       */\r\n      currentValue: props.modelValue,\r\n      /**\r\n       * 禁用事件改变\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      disableEmitChange: false,\r\n    });\r\n\r\n    // computed\r\n\r\n    // 过滤的数据\r\n    const filteredData = computed(() => {\r\n      // 是否根据输入项进行筛选\r\n      if (props.filterMethod) {\r\n        return props.list.filter((item) => {\r\n          return props.filterMethod(data.currentValue, item);\r\n        });\r\n      } else {\r\n        return props.list;\r\n      }\r\n    });\r\n\r\n    // methods\r\n\r\n    // 搜索方法\r\n    const searchMethod = (query: string) => {\r\n      emit('on-search', query);\r\n\r\n      if (props.remoteMethod) {\r\n        props.remoteMethod(query);\r\n      }\r\n    };\r\n\r\n    // 被选中时调用，参数为选中项的 value 值\r\n    const handleSelect = (option: Option) => {\r\n      const value = option.value;\r\n\r\n      if (value === undefined || value === null) {\r\n        return;\r\n      }\r\n\r\n      data.currentValue = `${value}`;\r\n\r\n      // blur\r\n      input.value.blur();\r\n\r\n      emit('on-select', value);\r\n    };\r\n\r\n    // 点击外部\r\n    const handleClickOutside = () => {\r\n      nextTick(() => {\r\n        // blur\r\n        input.value.blur();\r\n      });\r\n    };\r\n\r\n    // 获取焦点\r\n    const handleFocus = (event: Event) => {\r\n      emit('on-focus', event);\r\n\r\n      // 输入时是否触发表单的校验\r\n      if (props.validateEvent) {\r\n        formItem?.validate?.('focus').catch((err) => debugWarn(err));\r\n      }\r\n    };\r\n\r\n    // 失去焦点\r\n    const handleBlur = (event: Event) => {\r\n      emit('on-blur', event);\r\n\r\n      // 输入时是否触发表单的校验\r\n      if (props.validateEvent) {\r\n        formItem?.validate?.('focus').catch((err) => debugWarn(err));\r\n      }\r\n    };\r\n\r\n    // 清空时触发\r\n    const handleClear = () => {\r\n      emit('on-clear');\r\n    };\r\n\r\n    // watch\r\n\r\n    // 监听设置选择的值\r\n    watch(\r\n      () => props.modelValue,\r\n      (value) => {\r\n        // 当前输入值不相等\r\n        if (data.currentValue !== value) {\r\n          data.disableEmitChange = true;\r\n        }\r\n\r\n        data.currentValue = value;\r\n\r\n        // 输入时是否触发表单的校验\r\n        if (props.validateEvent) {\r\n          formItem?.validate?.('change').catch((err) => debugWarn(err));\r\n        }\r\n      }\r\n    );\r\n\r\n    // 监听当前输入值\r\n    watch(\r\n      () => data.currentValue,\r\n      (value) => {\r\n        select.value.setQuery(value);\r\n\r\n        emit('update:modelValue', value);\r\n\r\n        // 防止触发多次\r\n        if (data.disableEmitChange) {\r\n          data.disableEmitChange = false;\r\n\r\n          return;\r\n        }\r\n\r\n        emit('on-change', value);\r\n      }\r\n    );\r\n\r\n    return {\r\n      // dom\r\n      select,\r\n      input,\r\n\r\n      // data\r\n      data,\r\n      inputId,\r\n\r\n      filteredData,\r\n\r\n      // methods\r\n      searchMethod,\r\n      handleSelect,\r\n      handleClickOutside,\r\n      handleFocus,\r\n      handleBlur,\r\n      handleClear,\r\n    };\r\n  },\r\n  components: {\r\n    IvueSelect,\r\n    IvueInput,\r\n    IvueOption,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_createVNode","_createSlots","_createElementBlock","_Fragment","_renderList"],"mappings":";;;;;;;iCACEA,iBAiDc,aAAA,CAAA,CAAA;AA/CX,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,sBAAA,EAAA;AAAA,IACxB,UAAA,EAAU,KAAA,IAAA,CAAA,YAAA;AAAA,IACV,aAAW,IAAA,CAAA,WAAA;AAAA,IACX,UAAA,IAAA,CAAA,QAAA;AAAA,IACA,WAAc,IAAA,CAAA,SAAA;AAAA,IACd,mBAAU,IAAQ,CAAA,iBAAA;AAAA,IAClB,cAAS,IAAA,CAAA,YAAA;AAAA,IACT,UAAe,IAAA,CAAA,QAAA;AAAA,IACf,SAAS,IAAA,CAAA,OAAA;AAAA,IACT,WAAa,EAAA,EAAA;AAAA,IACb,SAAQ,IAAA,CAAA,OAAA;AAAA,IACT,aAAU,IAAA,CAAA,WAAA;AAAA,IACV,EAAA,EAAA,IAAA;AAAA,IACA,UAAI,EAAA,EAAA;AAAA,IACH,eAAW,EAAA,EAAA;AAAA,IACX,GAAA,EAAA,QAAA;AAAA,IAAA,YAAA,IAAA,CAAA,YAAA;AAAA,IAGU,kBAqBF,IAAA,CAAA,kBAAA;AAAA,GAAA,EAAA;AAAA,WAnBLC,QAkBa,MAAA;AAAA,MAjBFC,WAAA,IAAA,CAAA,MAAA,EAAI,OAAC,EAAA,IAAY,MAAA;AAAA,QAAAC,YAAA,qBAAA,EAAA;AAAA,UACzB,UAAA,EAAM,KAAI,IAAA,CAAA,YAAA;AAAA,UACV,qBAAA,EAAW,OAAA,CAAA,CAAA,KAAA,MAAA,CAAA,KAAA,CAAA,MAAA,KAAA,IAAA,CAAA,IAAA,CAAA,YAAA,GAAA,MAAA,CAAA;AAAA,UACX,MAAW,IAAA,CAAA,IAAA;AAAA,UACX,IAAQ,IAAA,CAAA,OAAA;AAAA,UACR,aAAW,IAAA,CAAA,WAAA;AAAA,UACX,UAAQ,IAAE,CAAA,QAAA;AAAA,UACV,WAAS,IAAA,CAAA,SAAA;AAAA,UACT,WAAU,IAAA,CAAA,WAAA;AAAA,UACX,UAAI,IAAO,CAAA,UAAA;AAAA,UAAA,WAAA,IAAA,CAAA,WAAA;AAAA,UAEa,GAAA,EAAA,OAAA;AAAA,SAAA,EAAAC,WAAA,CAAA,EAAA,CAAA,EAAA,GAAA,EAAA;AAAA,UAAb,IAAA,CAAA,OAAA,MAAA,GAAA;AAAA,YACT,IAAA,EAAA,QAAA;AAAA,YAAA,EAAA,EAAAH,QAAA,MAAA;AAAA;;;WAEsB,GAAA,KAAA,CAAA;AAAA,UAAb,IAAA,CAAA,OAAA,MAAA,GAAA;AAAA,YACT,IAAA,EAAA,QAAA;AAAA,YAAA,EAAA,EAAAA,QAAA,MAAA;AAAA;;;;;;;IAON,OAAA,EAAAA,QAAA,MAAA;AAAA,MAEgBC,WAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,IAAA,MAAA;AAAA,SAAAH,SAAA,CAFkC,IAAI,CAAA,EAAAM,kBAAA,CAAAC,QAAA,EAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,YAAA,EAAA,CAAA,IAAA,KAAA;UAAQ,OAAAR,SAAA,EAAI,EAAAC,WAAA,CAAA,sBAAA,EAAA;AAAA,YAAA,KAAA,EAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;"}