{"version":3,"file":"select-trigger.vue.mjs","sources":["../../../../../packages/components/common/select-trigger.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { defineComponent, ref, watch, computed, onUnmounted, onMounted, nextTick } from 'vue'\n  import { getNamespace } from '../../utils/global-config'\n  import { isElement } from '../../utils/is'\n  import { definePropType } from '../../utils/vue-utils'\n\n  import BnInput from '../input'\n  import { BnIconCaret, BnIconClose } from '../icon'\n\n  import type { InputInstance } from '../input'\n\n  export default defineComponent({\n    name: 'SelectTrigger',\n    components: {\n      BnInput,\n      BnIconCaret,\n      BnIconClose\n    },\n    props: {\n      inputValue: {\n        type: String,\n        default: ''\n      },\n      disabled: Boolean,\n      size: {\n        type: definePropType<'small' | 'default' | 'large'>(String),\n        default: 'default'\n      },\n      placeholder: {\n        type: String,\n        default: undefined\n      },\n      clearable: Boolean,\n      popupVisible: Boolean,\n      multiple: Boolean,\n      multipleTags: {\n        type: definePropType<{ label: any; key: any }[]>(Array),\n        default: () => []\n      },\n      filterable: {\n        type: Boolean,\n        default: false\n      },\n      popupRef: {\n        type: Object,\n        default: undefined\n      },\n      card: {\n        type: Boolean,\n        default: false\n      },\n      maxTag: {\n        type: Number,\n        default: undefined\n      }\n    },\n    emits: ['show', 'clear', 'tagClose', 'filter'],\n    setup(props, { emit }) {\n      const ns = getNamespace('select-trigger')\n\n      const selectTriggerDomRef = ref<HTMLElement>()\n      const inputComponentRef = ref<InputInstance>()\n      const multipleInputRef = ref<HTMLElement>()\n\n      const readonly = computed(() => !props.filterable || props.multiple || !props.popupVisible)\n      const multipleInputReadonly = computed(() => props.filterable && !props.popupVisible)\n      const query = ref('')\n      const multipleQuery = ref('')\n      const placeholder = ref<string | undefined>()\n\n      const setBnInputHeight = () => {\n        const height = multipleTagsRef.value?.clientHeight + 'px'\n        const inputElement = inputComponentRef.value?.inputRef\n        if (inputElement) {\n          inputElement.style.transition = 'height 0.05s'\n          if (props.multipleTags.length) {\n            inputElement.style.height = height\n          } else {\n            inputElement.style.height = ''\n          }\n        }\n      }\n\n      const multipleTagsRef = ref<HTMLElement>()\n\n      const computedInputValue = computed({\n        get() {\n          if (props.multiple) {\n            if (props.multipleTags.length) {\n              return ' '\n            }\n          }\n          if (props.filterable) return query.value\n          return props.inputValue\n        },\n        set(val) {\n          query.value = val\n        }\n      })\n\n      const computedPlaceholder = computed(() => {\n        if (props.multiple) {\n          if (multipleQuery.value.length) return ''\n          if (props.multipleTags.length === 0) return props.placeholder\n          return ''\n        }\n        if (props.filterable) return placeholder.value || props.placeholder\n        return props.placeholder\n      })\n\n      const handleSelectTrigger = () => {\n        if (!props.filterable) return\n        if (props.multiple) {\n          multipleQuery.value = ''\n          multipleInputRef.value?.focus()\n          inputComponentRef.value?.setFocus(true)\n        } else {\n          query.value = ''\n          placeholder.value = props.inputValue || props.placeholder\n        }\n        if (!props.popupVisible) {\n          emit('filter', '')\n        } else {\n          resetQuery()\n        }\n      }\n\n      const resetQuery = () => {\n        if (!props.filterable) return\n        if (props.multiple) {\n          multipleQuery.value = ''\n        } else {\n          query.value = props.inputValue\n        }\n      }\n\n      const handleClear = () => {\n        if (props.multiple) {\n          multipleQuery.value = ''\n        } else {\n          query.value = ''\n          placeholder.value = props.placeholder\n        }\n        emit('clear')\n      }\n\n      const onInputEvent = async () => {\n        if (!props.filterable) return\n        await nextTick()\n        if (props.multiple) {\n          emit('filter', multipleQuery.value)\n        } else {\n          emit('filter', query.value)\n        }\n      }\n\n      watch(\n        () => props.inputValue,\n        (val) => {\n          query.value = val\n        },\n        {\n          immediate: true\n        }\n      )\n\n      watch(\n        () => props.multipleTags,\n        () => {\n          if (props.multiple) {\n            nextTick(setBnInputHeight)\n          }\n        }\n      )\n\n      const popupTargetElement = computed(() => {\n        if (isElement(props.popupRef)) return props.popupRef\n        if (isElement(props.popupRef?.$el)) return props.popupRef?.$el\n        return null\n      })\n\n      const clickOutside = (e: MouseEvent) => {\n        const el = e.target as HTMLElement\n        const deps: HTMLElement[] = [popupTargetElement.value, selectTriggerDomRef.value]\n        const inner = deps.some((container) => container?.contains(el))\n        requestAnimationFrame(() => {\n          inputComponentRef.value?.setFocus(inner)\n          !inner && resetQuery()\n        })\n      }\n\n      const handleMultipleInput = () => {\n        resetQuery()\n        emit('filter', '')\n        if (!props.popupVisible) {\n          emit('show')\n        }\n      }\n\n      onMounted(() => {\n        document.documentElement.addEventListener('mousedown', clickOutside, true)\n      })\n\n      onUnmounted(() => {\n        document.documentElement.removeEventListener('mousedown', clickOutside, true)\n      })\n\n      const transitionEvent = {\n        beforeEnter() {},\n        enter() {\n          setTimeout(setBnInputHeight)\n        },\n        afterEnter() {},\n        beforeLeave() {},\n        leave() {},\n        afterLeave() {\n          setTimeout(setBnInputHeight)\n        }\n      }\n\n      const multipleTagsView = computed(() => {\n        if (!props.maxTag) return props.multipleTags\n        return props.multipleTags.slice(0, props.maxTag)\n      })\n\n      return {\n        ns,\n        inputComponentRef,\n        multipleTagsRef,\n        readonly,\n        multipleInputReadonly,\n        computedPlaceholder,\n        computedInputValue,\n        multipleInputRef,\n        multipleQuery,\n        selectTriggerDomRef,\n        transitionEvent,\n        multipleTagsView,\n        handleSelectTrigger,\n        handleClear,\n        onInputEvent,\n        resetQuery,\n        handleMultipleInput\n      }\n    }\n  })\n</script>\n\n<template>\n  <div ref=\"selectTriggerDomRef\" :class=\"[ns]\" @click.stop=\"handleSelectTrigger\">\n    <BnInput\n      ref=\"inputComponentRef\"\n      v-model=\"computedInputValue\"\n      :validate-event=\"false\"\n      :disabled=\"disabled\"\n      :size=\"size\"\n      :readonly=\"readonly\"\n      :placeholder=\"computedPlaceholder\"\n      :clearable=\"clearable\"\n      :card=\"card\"\n      @clear=\"handleClear\"\n      @input=\"onInputEvent\"\n      @focus=\"onInputEvent\"\n    >\n      <template #suffix-icon>\n        <BnIconCaret :class=\"[{ 'is-rotate': popupVisible }, `${ns}__icon-caret`]\" />\n      </template>\n    </BnInput>\n    <div v-if=\"multiple\" ref=\"multipleTagsRef\" :class=\"[`${ns}__multiple`, `is-${size}`]\">\n      <transition-group v-on=\"transitionEvent\">\n        <div\n          v-for=\"tag in multipleTagsView\"\n          :key=\"`${tag.key}`\"\n          :class=\"[`${ns}__tag`, `is-${size}`]\"\n        >\n          <span :class=\"[`${ns}__tag-text`]\">{{ tag.label }}</span>\n          <BnIconClose @click.stop=\"$emit('tagClose', tag)\" />\n        </div>\n      </transition-group>\n      <div v-if=\"maxTag && multipleTags.length > maxTag\" :class=\"[`${ns}__tag-max`]\"\n        >+{{ multipleTags.length - maxTag }}</div\n      >\n      <input\n        v-if=\"multiple && filterable\"\n        ref=\"multipleInputRef\"\n        v-model=\"multipleQuery\"\n        :readonly=\"multipleInputReadonly\"\n        :class=\"[`${ns}__input`, `is-${size}`]\"\n        autocomplete=\"false\"\n        type=\"text\"\n        @input=\"onInputEvent\"\n        @click.stop=\"handleMultipleInput\"\n      />\n    </div>\n  </div>\n</template>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_withModifiers","computedInputValue","readonly","clearable","card","handleClear","onInputEvent","_withCtx","_createVNode","multiple","transitionEvent","_toHandlers","_Fragment","_renderList","_toDisplayString","maxTag","ns","filterable","_createCommentVNode","_withDirectives","multipleQuery"],"mappings":"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"}