{"version":3,"file":"BRT9lmFN.js","sources":["../../../../components/TokenPicker.vue"],"sourcesContent":["<script setup>\nimport { ref } from 'vue';\nimport { CheckIcon, ChevronDownIcon } from '@heroicons/vue/solid';\nimport { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/vue';\nimport { useInfiniteScroll } from '~/composables/infinite-scroll';\nimport { getApiRoot } from '~/utilities/api';\n\nconst props = defineProps({\n  modelValue: { type: String, required: true },\n  collectionId: { type: String, default: undefined },\n  onlyCats: { type: Boolean, default: false },\n});\nconst { modelValue, collectionId, onlyCats } = toRefs(props);\nconst emit = defineEmits(['update:modelValue']);\n\nlet token = onlyCats.value ? null : { id: 'xch', name: 'Chia', code: 'XCH' };\nif (modelValue.value) {\n  token = await $fetch(`${getApiRoot()}/tokens/${modelValue.value}`);\n}\n\nconst query = ref('');\nconst selectedToken = ref(token);\nconst target = ref();\nconst { items: tokens } = useInfiniteScroll(\n  target,\n  () =>\n    `${getApiRoot()}/tokens?query=${query.value}${collectionId.value ? `&collection_id=${collectionId.value}` : ''}`,\n  [query, collectionId],\n  20\n);\nconst filteredTokens = computed(() => tokens.value.filter((token) => (onlyCats.value ? token.id !== 'xch' : true)));\n\nconst onUpdate = () => {\n  emit('update:modelValue', selectedToken.value.id);\n  query.value = '';\n};\n</script>\n\n<template>\n  <Combobox v-model=\"selectedToken\" as=\"div\" @update:model-value=\"onUpdate()\">\n    <div class=\"relative w-32\">\n      <ComboboxButton\n        v-if=\"selectedToken\"\n        class=\"absolute inset-y-0 left-0 flex items-center rounded-r-md px-2 focus:outline-none\"\n      >\n        <img\n          :src=\"`https://icons.dexie.space/${selectedToken.id}.webp`\"\n          alt=\"\"\n          class=\"h-6 w-6 flex-shrink-0 rounded-full\"\n        />\n      </ComboboxButton>\n      <ComboboxInput\n        class=\"w-full rounded-md border border-neutral-300 bg-white py-2 pl-10 pr-8 text-neutral-900 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white sm:text-sm\"\n        :display-value=\"(inputToken) => inputToken?.code\"\n        @change=\"query = $event.target.value\"\n      />\n      <ComboboxButton class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\n        <ChevronDownIcon class=\"h-5 w-5 text-neutral-400 dark:text-neutral-500\" aria-hidden=\"true\" />\n      </ComboboxButton>\n\n      <ComboboxOptions\n        v-show=\"tokens.length > 0\"\n        class=\"absolute z-50 mt-2 max-h-56 w-72 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-neutral-300 focus:outline-none dark:bg-neutral-800 dark:ring-white/5 sm:text-sm\"\n      >\n        <ComboboxOption\n          v-for=\"listTokens in filteredTokens\"\n          :key=\"listTokens.id\"\n          v-slot=\"{ active, selected }\"\n          :value=\"listTokens\"\n          as=\"template\"\n        >\n          <li\n            :class=\"[\n              'relative cursor-default select-none py-2 pl-3 pr-9',\n              active ? 'bg-neutral-100 dark:bg-neutral-700' : 'text-neutral-900 dark:text-neutral-100',\n            ]\"\n          >\n            <div class=\"flex items-center\">\n              <img\n                :src=\"`https://icons.dexie.space/${listTokens.id}.webp`\"\n                alt=\"\"\n                class=\"h-6 w-6 flex-shrink-0 rounded-full\"\n              />\n              <span :class=\"['ml-3 truncate', selected && 'font-semibold']\">\n                {{ listTokens.name }}\n              </span>\n            </div>\n\n            <span\n              v-if=\"selected\"\n              :class=\"[\n                'absolute inset-y-0 right-0 flex items-center pr-4',\n                active ? 'text-white dark:text-black' : 'text-black dark:text-white',\n              ]\"\n            >\n              <CheckIcon class=\"h-5 w-5\" aria-hidden=\"true\" />\n            </span>\n          </li>\n        </ComboboxOption>\n        <div ref=\"target\" />\n      </ComboboxOptions>\n    </div>\n  </Combobox>\n</template>\n"],"names":["props","__props","modelValue","collectionId","onlyCats","toRefs","emit","__emit","token","__temp","__restore","_withAsyncContext","getApiRoot","query","ref","selectedToken","target","tokens","useInfiniteScroll","filteredTokens","computed","onUpdate"],"mappings":"gmBAOA,MAAMA,EAAQC,EAKR,CAAE,WAAAC,EAAY,aAAAC,EAAc,SAAAC,CAAU,EAAGC,EAAOL,CAAK,EACrDM,EAAOC,EAEb,IAAIC,EAAQJ,EAAS,MAAQ,KAAO,CAAE,GAAI,MAAO,KAAM,OAAQ,KAAM,KAAK,EACtEF,EAAW,QACbM,GAAc,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAA,OAAO,GAAGC,EAAY,CAAA,WAAWV,EAAW,KAAK,EAAE,CAAA,oBAGnE,MAAMW,EAAQC,EAAI,EAAE,EACdC,EAAgBD,EAAIN,CAAK,EACzBQ,EAASF,EAAG,EACZ,CAAE,MAAOG,CAAM,EAAKC,EACxBF,EACA,IACE,GAAGJ,EAAY,CAAA,iBAAiBC,EAAM,KAAK,GAAGV,EAAa,MAAQ,kBAAkBA,EAAa,KAAK,GAAK,EAAE,GAChH,CAACU,EAAOV,CAAY,EACpB,EACF,EACMgB,EAAiBC,EAAS,IAAMH,EAAO,MAAM,OAAQT,GAAWJ,EAAS,MAAQI,EAAM,KAAO,MAAQ,EAAK,CAAC,EAE5Ga,EAAW,IAAM,CACrBf,EAAK,oBAAqBS,EAAc,MAAM,EAAE,EAChDF,EAAM,MAAQ,EAChB"}