{"version":3,"file":"Div1Nv9Q.js","sources":["../../../../skeleton/components/form/input/dropdown.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"drop\"\n    v-click-outside=\"handleClickOutside\"\n    class=\"dropdown\"\n    :class=\"classes\"\n    :tabindex=\"props.tabindex\"\n    @blur=\"onBlur\"\n  >\n    <span v-if=\"props.label\" class=\"label\">\n      {{ props.label }}\n      <span v-if=\"props.isRequired\" class=\"required\">*</span>\n    </span>\n\n    <div class=\"selected\" @click=\"open\">\n      <atomic-image v-if=\"valueObject?.mask\" class=\"mask\" :src=\"valueObject?.mask\" />\n      <span v-if=\"valueObject\">{{ valueObject?.value }}</span>\n      <span v-else-if=\"props.placeholder\" class=\"placeholder\">\n        {{ props.placeholder }}\n      </span>\n      <span class=\"selected__icon\">\n        <atomic-icon id=\"arrow_expand-close\" />\n      </span>\n    </div>\n\n    <!-- bottom sheet for mobile -->\n    <client-only v-if=\"isMobile\">\n      <layout-bottom-sheet ref=\"dropdownBottomSheet\">\n        <template #header>\n          <div class=\"title\">\n            {{ props.label }}\n          </div>\n          <div class=\"header\">\n            <form-input-search\n              v-if=\"isShowSearch\"\n              ref=\"inputSearch\"\n              v-model:value=\"searchValue\"\n              :placeholder=\"searchPlaceholder\"\n              @focus=\"isOpen = true\"\n            />\n          </div>\n        </template>\n\n        <div\n          v-for=\"option in filteredItems\"\n          :key=\"option.name\"\n          class=\"dropdown__item\"\n          :class=\"[\n            { dropdown__item_selected: option.code === valueObject?.code },\n            { 'dropdown__item_disabled-option': option.disabled },\n          ]\"\n          @click=\"select(option)\"\n        >\n          <atomic-image v-if=\"option.mask\" class=\"dropdown__img\" :src=\"option.mask\" />\n          <span class=\"dropdown__text\"\n            >{{ option.value }}{{ option.name && isShowName ? ` (${option.name})` : '' }}</span\n          >\n        </div>\n\n        <template #footer>\n          <button-base type=\"gray\" @click=\"toggleDropdownBottomSheet('close')\">\n            {{ getContent(layoutData, defaultLocaleLayoutData, 'buttons.close') }}\n          </button-base>\n        </template>\n      </layout-bottom-sheet>\n    </client-only>\n\n    <div v-if=\"options.length && !isMobile\" ref=\"dropItems\" class=\"items\">\n      <div class=\"dropdown-search\">\n        <form-input-search\n          v-if=\"isShowSearch\"\n          ref=\"inputSearch\"\n          v-model:value=\"searchValue\"\n          :placeholder=\"searchPlaceholder\"\n          @focus=\"isOpen = true\"\n        />\n      </div>\n\n      <div\n        v-for=\"option in filteredItems\"\n        :key=\"option.name\"\n        class=\"item\"\n        :class=\"[{ 'is-selected': option.code === valueObject?.code }, { 'disabled-option': option.disabled }]\"\n        @click=\"select(option)\"\n      >\n        <atomic-image v-if=\"option.mask\" class=\"mask\" :src=\"option.mask\" />\n        <slot :option=\"option\">\n          <span>{{ option.value }}{{ option.name && isShowName ? ` (${option.name})` : '' }}</span>\n        </slot>\n      </div>\n    </div>\n\n    <atomic-hint v-if=\"props.hint\" v-bind=\"props.hint\" />\n    <input type=\"hidden\" :name=\"props.name\" :value=\"props.value\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import type { IFieldHint, IOption } from '@skeleton/types';\n  const { layoutData, defaultLocaleLayoutData } = storeToRefs(useGlobalStore());\n  const deviceStore = useDeviceStore();\n  const { isMobile } = storeToRefs(deviceStore);\n\n  const { getContent } = useProjectMethods();\n\n  const dropdownBottomSheet = ref();\n  const toggleDropdownBottomSheet = (methodName: 'open' | 'close') => {\n    if (!isMobile.value) return;\n    dropdownBottomSheet.value?.[methodName]();\n  };\n\n  interface IProps {\n    options: IOption[];\n    value: object | string | number;\n    isShowSearch?: boolean;\n    searchPlaceholder?: string;\n    isRequired?: boolean;\n    label?: string;\n    placeholder?: string;\n    tabindex?: number;\n    name?: string;\n    size?: 'xs' | 'sm' | 'md' | 'lg' | '';\n    isDisabled?: boolean;\n    hint?: IFieldHint;\n    isFitContent?: boolean;\n    isShowName?: boolean;\n  }\n\n  const props = withDefaults(defineProps<IProps>(), {\n    options: () => [],\n    isRequired: false,\n    label: '',\n    placeholder: 'Dropdown placeholder',\n    tabindex: 0,\n    size: '',\n    isDisabled: false,\n    isFitContent: false,\n    isShowName: false,\n    isShowSearch: true,\n    searchPlaceholder: 'Search',\n  });\n\n  const valueObject = computed(() => {\n    return props.options.find((option: any) => option.code === props.value) || null;\n  });\n\n  const searchValue = ref<string>('');\n  const inputSearch = ref(null);\n\n  const emit = defineEmits(['input', 'focus', 'update:value', 'selectOption']);\n\n  const isOpen = ref<boolean>(false);\n  const drop = ref<HTMLElement>();\n  const dropItems = ref<HTMLElement>();\n  const selectedItem = ref<Maybe<IOption>>(null);\n\n  const classes = computed(() => [\n    props.size ? `size-${props.size}` : null,\n    { 'is-open': isOpen.value },\n    { 'has-error': props.hint?.variant === 'error' },\n    { 'is-disabled': props.isDisabled },\n    { 'is-fit-content': props.isFitContent },\n  ]);\n\n  const select = (option: IOption) => {\n    emit('update:value', option.code);\n    emit('input', option.code);\n    emit('selectOption', option);\n\n    selectedItem.value = option;\n\n    isOpen.value = false;\n\n    toggleDropdownBottomSheet('close');\n  };\n\n  const handleClickOutside = () => {\n    if (isOpen.value) {\n      isOpen.value = false;\n    }\n  };\n\n  const open = async (): Promise<void> => {\n    if (props.isDisabled) return;\n\n    toggleDropdownBottomSheet('open');\n\n    searchValue.value = '';\n    isOpen.value = !isOpen.value;\n\n    if (isOpen.value) {\n      setTimeout(() => inputSearch.value?.focus(), 100);\n    }\n\n    emit('focus');\n  };\n\n  const onBlur = (): void => {\n    isOpen.value = false;\n  };\n\n  const filteredItems = computed(() => {\n    const searchQuery = searchValue.value.toLowerCase().trim();\n\n    if (!searchQuery) {\n      return props.options;\n    }\n\n    return props.options.filter((item: IOption) => {\n      return (\n        item.value?.toString().toLowerCase().includes(searchQuery) ||\n        item.name?.toString().toLowerCase().includes(searchQuery)\n      );\n    });\n  });\n\n  onMounted(() => {\n    if (props.isFitContent && drop.value && dropItems.value) {\n      const width = dropItems.value?.offsetWidth;\n      drop.value.style.width = `${width}px`;\n      dropItems.value.style.width = `${width}px`;\n    }\n  });\n</script>\n\n<style src=\"~/assets/styles/components/form/input/dropdown.scss\" lang=\"scss\" />\n"],"names":["layoutData","defaultLocaleLayoutData","storeToRefs","useGlobalStore","deviceStore","useDeviceStore","isMobile","getContent","useProjectMethods","dropdownBottomSheet","ref","toggleDropdownBottomSheet","methodName","_a","props","__props","valueObject","computed","option","searchValue","inputSearch","emit","__emit","isOpen","drop","dropItems","selectedItem","classes","select","handleClickOutside","open","onBlur","filteredItems","searchQuery","item","_b","onMounted","width"],"mappings":"uqCAmGE,KAAM,CAAE,WAAAA,EAAY,wBAAAC,CAA4B,EAAAC,EAAYC,IAAgB,EACtEC,EAAcC,GAAe,EAC7B,CAAE,SAAAC,CAAA,EAAaJ,EAAYE,CAAW,EAEtC,CAAE,WAAAG,CAAW,EAAIC,GAAkB,EAEnCC,EAAsBC,EAAI,EAC1BC,EAA6BC,GAAiC,OAC7DN,EAAS,SACMO,EAAAJ,EAAA,QAAA,MAAAI,EAAQD,KAC9B,EAmBME,EAAQC,EAcRC,EAAcC,EAAS,IACpBH,EAAM,QAAQ,KAAMI,GAAgBA,EAAO,OAASJ,EAAM,KAAK,GAAK,IAC5E,EAEKK,EAAcT,EAAY,EAAE,EAC5BU,EAAcV,EAAI,IAAI,EAEtBW,EAAOC,EAEPC,EAASb,EAAa,EAAK,EAC3Bc,EAAOd,EAAiB,EACxBe,EAAYf,EAAiB,EAC7BgB,EAAehB,EAAoB,IAAI,EAEvCiB,EAAUV,EAAS,IAAM,OAAA,OAC7BH,EAAM,KAAO,QAAQA,EAAM,IAAI,GAAK,KACpC,CAAE,UAAWS,EAAO,KAAM,EAC1B,CAAE,cAAaV,EAAAC,EAAM,OAAN,YAAAD,EAAY,WAAY,OAAQ,EAC/C,CAAE,cAAeC,EAAM,UAAW,EAClC,CAAE,iBAAkBA,EAAM,YAAa,CAAA,EACxC,EAEKc,EAAUV,GAAoB,CAC7BG,EAAA,eAAgBH,EAAO,IAAI,EAC3BG,EAAA,QAASH,EAAO,IAAI,EACzBG,EAAK,eAAgBH,CAAM,EAE3BQ,EAAa,MAAQR,EAErBK,EAAO,MAAQ,GAEfZ,EAA0B,OAAO,CACnC,EAEMkB,EAAqB,IAAM,CAC3BN,EAAO,QACTA,EAAO,MAAQ,GAEnB,EAEMO,EAAO,SAA2B,CAClChB,EAAM,aAEVH,EAA0B,MAAM,EAEhCQ,EAAY,MAAQ,GACbI,EAAA,MAAQ,CAACA,EAAO,MAEnBA,EAAO,OACT,WAAW,IAAA,OAAM,OAAAV,EAAAO,EAAY,QAAZ,YAAAP,EAAmB,SAAS,GAAG,EAGlDQ,EAAK,OAAO,EACd,EAEMU,EAAS,IAAY,CACzBR,EAAO,MAAQ,EACjB,EAEMS,EAAgBf,EAAS,IAAM,CACnC,MAAMgB,EAAcd,EAAY,MAAM,YAAA,EAAc,KAAK,EAEzD,OAAKc,EAIEnB,EAAM,QAAQ,OAAQoB,GAAkB,SAC7C,QACErB,EAAAqB,EAAK,QAAL,YAAArB,EAAY,WAAW,cAAc,SAASoB,OAC9CE,EAAAD,EAAK,OAAL,YAAAC,EAAW,WAAW,cAAc,SAASF,GAAW,CAE3D,EARQnB,EAAM,OAQd,CACF,EAED,OAAAsB,GAAU,IAAM,OACd,GAAItB,EAAM,cAAgBU,EAAK,OAASC,EAAU,MAAO,CACjD,MAAAY,GAAQxB,EAAAY,EAAU,QAAV,YAAAZ,EAAiB,YAC/BW,EAAK,MAAM,MAAM,MAAQ,GAAGa,CAAK,KACjCZ,EAAU,MAAM,MAAM,MAAQ,GAAGY,CAAK,IAAA,CACxC,CACD"}