{"version":3,"file":"BwrHNVbV.js","sources":["../../../../components/Autocomplete/Autocomplete.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-col gap-2 w-full\">\n    <label class=\"block\" :class=\"[variants[variant].label]\">{{ label }}</label>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <BaseButton\n          variant=\"outline\"\n          role=\"combobox\"\n          :aria-expanded=\"open\"\n          class=\"w-full flex justify-between items-center\"\n          :class=\"[variants[variant].autocomplete]\"\n          @click=\"emit('click')\"\n        >\n          <span\n            :class=\"{\n              [variants[variant].placeholder]: !model,\n              'dark:text-white text-dark2': model\n            }\"\n          >\n            {{ displayValue }}\n          </span>\n          <slot name=\"arrow\">\n            <svgo-arrow-down\n              class=\"ml-2 text-xl dark:text-primary text-dark4\"\n            />\n          </slot>\n        </BaseButton>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-full p-0\">\n        <Command class=\"w-full\">\n          <CommandInput placeholder=\"Search...\" :data-testId=\"name\" />\n          <CommandEmpty>Nothing found.</CommandEmpty>\n          <CommandList class=\"w-full\">\n            <CommandItem\n              v-for=\"item in items\"\n              :key=\"item.value\"\n              :value=\"item.label\"\n              @select=\"selectItem(item[keyName])\"\n            >\n              {{ item.label }}\n              <Check\n                :class=\"\n                  cn(\n                    'ml-1 h-4 w-4 text-primary',\n                    model === item[keyName] ? 'opacity-100' : 'opacity-0'\n                  )\n                \"\n              />\n            </CommandItem>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n    <span\n      v-if=\"note\"\n      class=\"text-xs dark:text-dark4 text-dark2 text-opacity-50\"\n    >\n      {{ note }}\n    </span>\n    <span v-if=\"error\" class=\"text-red-400\">{{ error }}</span>\n  </div>\n</template>\n<script setup lang=\"ts\">\n  import { cn } from '@/lib/utils';\n  import { Check } from 'lucide-vue-next';\n  import { computed, ref } from 'vue';\n\n  interface Props {\n    id: string;\n    items: Array<any>;\n    label?: string;\n    variant: string;\n    name: string;\n    placeholder: string;\n    error?: string;\n    keyName?: string;\n    note?: string;\n  }\n\n  type Variant = {\n    autocomplete: string;\n    box: string;\n    input: string;\n    list: string;\n    label: string;\n    placeholder: string;\n  };\n\n  type Variants = {\n    [key: string]: Variant;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    error: '',\n    label: '',\n    keyName: 'label',\n    note: ''\n  });\n\n  const open = ref(false);\n  const model = defineModel<string | number>();\n  const emit = defineEmits(['click']);\n\n  const variants: Variants = {\n    solo: {\n      autocomplete: '',\n      box: 'py-2 px-4 bg-dark4 bg-opacity-5 rounded-sm',\n      input: 'placeholder:text-md',\n      label: 'text-white text-xs',\n      placeholder: '',\n      list: 'top-16'\n    },\n    underlined: {\n      autocomplete: 'border-b-[1px] border-dark4 focus-within:border-primary',\n      box: '',\n      input: 'placeholder:text-base',\n      label: 'text-sm font-medium text-primary',\n      placeholder: 'text-dark4 font-base',\n      list: 'top-[70px]'\n    },\n    filled: {\n      autocomplete:\n        'bg-dark4 dark:bg-opacity-5 dark:text-dark4 bg-opacity-30 text-dark2 py-2 px-4 border border-transparent hover:border-dark4 hover:border-opacity-50 duration-150',\n      box: 'py-2 px-4 bg-dark4 dark:bg-opacity-5 bg-opacity-30 rounded-sm',\n      input: 'placeholder:text-md',\n      label: 'dark:text-white text-dark2 text-xs',\n      placeholder: 'text-dark4 text-opacity-50',\n      list: 'top-16'\n    }\n  };\n\n  const selectItem = (item: string | number) => {\n    model.value = model.value === item ? undefined : item;\n    open.value = false;\n  };\n\n  const displayValue = computed(() => {\n    if (props.items.length === 0)\n      return model.value ? model.value : props.placeholder;\n    return model.value\n      ? props.items.find((item) => item.value === model.value)?.label\n      : props.placeholder;\n  });\n</script>\n"],"names":["props","__props","open","ref","model","_useModel","emit","__emit","variants","selectItem","item","displayValue","computed","_a"],"mappings":"ikCA4FE,MAAMA,EAAQC,EAORC,EAAOC,EAAI,EAAK,EAChBC,EAAQC,gBAA6B,EACrCC,EAAOC,EAEPC,EAAqB,CACzB,KAAM,CACJ,aAAc,GACd,IAAK,6CACL,MAAO,sBACP,MAAO,qBACP,YAAa,GACb,KAAM,QACR,EACA,WAAY,CACV,aAAc,0DACd,IAAK,GACL,MAAO,wBACP,MAAO,mCACP,YAAa,uBACb,KAAM,YACR,EACA,OAAQ,CACN,aACE,kKACF,IAAK,gEACL,MAAO,sBACP,MAAO,qCACP,YAAa,6BACb,KAAM,QAAA,CAEV,EAEMC,EAAcC,GAA0B,CAC5CN,EAAM,MAAQA,EAAM,QAAUM,EAAO,OAAYA,EACjDR,EAAK,MAAQ,EACf,EAEMS,EAAeC,EAAS,IAAM,OAC9B,OAAAZ,EAAM,MAAM,SAAW,EAClBI,EAAM,MAAQA,EAAM,MAAQJ,EAAM,YACpCI,EAAM,OACTS,EAAAb,EAAM,MAAM,KAAMU,GAASA,EAAK,QAAUN,EAAM,KAAK,IAArD,YAAAS,EAAwD,MACxDb,EAAM,WAAA,CACX"}