{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "smart-search-input",
  "title": "Smart Search Input",
  "description": "An advanced search input component with filter tree, multi-select, and various input types.",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "command",
    "button",
    "badge",
    "checkbox",
    "popover",
    "scroll-area",
    "dialog",
    "https://raw.githubusercontent.com/smoosex/inovue-ui/refs/heads/main/public/r/date-time-range-picker.json"
  ],
  "files": [
    {
      "path": "src/components/smart-search-input/ActiveFilterTags.vue",
      "content": "<script setup lang=\"ts\">\nimport { X } from \"@lucide/vue\";\nimport type { ActiveFilterItem } from \"./types\";\nimport { GetI18nText, type Locale } from \"./locales\";\n\nconst props = withDefaults(\n  defineProps<{\n    locale?: Locale;\n  }>(),\n  {\n    locale: \"en\",\n  },\n);\n\nconst filters = defineModel<ActiveFilterItem[]>(\"filters\", { required: true });\n\nconst emit = defineEmits<{\n  (e: \"remove\", key: string): void;\n  (e: \"clear-all\"): void;\n}>();\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale);\n\nconst handleRemove = (key: string) => {\n  filters.value = filters.value.filter((f) => f.key !== key);\n  emit(\"remove\", key);\n};\n\nconst handleClearAll = () => {\n  filters.value = [];\n  emit(\"clear-all\");\n};\n</script>\n\n<template>\n  <div v-if=\"filters.length\" class=\"flex flex-wrap gap-2 items-center\">\n    <span class=\"text-sm text-muted-foreground\">{{ $t(\"filterTag\") }}</span>\n    <div\n      v-for=\"item in filters\"\n      :key=\"item.key\"\n      class=\"flex items-center gap-1 px-2 py-1 text-sm bg-muted rounded-md\"\n    >\n      <span class=\"truncate max-w-40\"\n        >{{ item.label }}: {{ item.displayValue }}</span\n      >\n      <button\n        class=\"hover:bg-muted-foreground/20 rounded p-0.5\"\n        @click=\"handleRemove(item.key)\"\n      >\n        <X class=\"h-3 w-3\" />\n      </button>\n    </div>\n    <button\n      class=\"text-xs text-muted-foreground hover:text-foreground\"\n      @click=\"handleClearAll\"\n    >\n      {{ $t(\"clearAll\") }}\n    </button>\n  </div>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/SmartSearchInput.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { Search } from \"@lucide/vue\";\nimport type {\n  FilterOption,\n  FilterValue,\n  FilterInputType,\n  AnyFilterValue,\n  ActiveFilterItem,\n  SelectOption,\n} from \"./types\";\nimport { GetI18nText, type Locale } from \"./locales\";\nimport { cn } from \"@/lib/utils\";\nimport FilterInput from \"./FilterInput.vue\";\nimport FilterSelect from \"./FilterSelect.vue\";\nimport FilterMultiSelect from \"./FilterMultiSelect.vue\";\nimport FilterTreeSelect from \"./FilterTreeSelect.vue\";\nimport FilterCascadeSelect from \"./FilterCascadeSelect.vue\";\nimport FilterClearButton from \"./FilterClearButton.vue\";\nimport {\n  DatePicker,\n  DateRangePicker,\n  DateTimeRangePicker,\n} from \"@/components/date-time-range-picker\";\nimport type {\n  DateRange,\n  DateTimeRange,\n} from \"@/components/date-time-range-picker\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\n\nconst props = withDefaults(\n  defineProps<{\n    options: FilterOption[];\n    locale?: Locale;\n  }>(),\n  {\n    locale: \"en\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"search\", value: FilterValue): void;\n  (e: \"loadMore\", filterKey: string): void;\n  (e: \"loadChildren\", parentId: string): void;\n}>();\n\nconst activeFilters = defineModel<ActiveFilterItem[]>(\"activeFilters\", {\n  default: () => [],\n});\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale);\n\nconst dateFormatterLocale = computed(() =>\n  props.locale === \"zhHans\" ? \"zh-CN\" : \"en-US\",\n);\n\nconst selectedKey = ref(props.options[0]?.value || \"\");\nconst currentOption = computed(() =>\n  props.options.find((o) => o.value === selectedKey.value),\n);\n\nconst resolveComponent = (type?: FilterInputType) => {\n  switch (type) {\n    case \"select\":\n      return FilterSelect;\n    case \"multi-select\":\n      return FilterMultiSelect;\n    case \"tree-multi-select\":\n      return FilterTreeSelect;\n    case \"date\":\n      return DatePicker;\n    case \"date-range\":\n      return DateRangePicker;\n    case \"date-time-range\":\n      return DateTimeRangePicker;\n    case \"cascade-select\":\n      return FilterCascadeSelect;\n    default:\n      return FilterInput;\n  }\n};\n\nconst flattenOptions = (options?: SelectOption[]) => {\n  const result: SelectOption[] = [];\n  const walk = (opts?: SelectOption[]) => {\n    if (!opts) return;\n    opts.forEach((opt) => {\n      result.push(opt);\n      if (opt.children?.length) {\n        walk(opt.children);\n      }\n    });\n  };\n  walk(options);\n  return result;\n};\n\nconst getOptionLabelMap = (options?: SelectOption[]) => {\n  const map = new Map<string, string>();\n  flattenOptions(options).forEach((opt) => {\n    map.set(String(opt.value), opt.label);\n  });\n  return map;\n};\n\n// Default value factories using Strategy Pattern\nconst defaultValueFactories: Record<FilterInputType, () => AnyFilterValue> = {\n  text: () => \"\",\n  select: () => \"\",\n  \"multi-select\": () => [],\n  \"tree-multi-select\": () => [],\n  date: () => undefined,\n  \"date-range\": () => ({ from: undefined, to: undefined }),\n  \"date-time-range\": () => ({ from: undefined, to: undefined }),\n  \"cascade-select\": () => ({ level1: undefined, level2: undefined }),\n};\n\nconst getDefaultValue = (type?: FilterInputType): AnyFilterValue => {\n  const factory = defaultValueFactories[type || \"text\"];\n  return factory ? factory() : \"\";\n};\n\nconst currentValue = ref<AnyFilterValue>(\n  getDefaultValue(props.options[0]?.type),\n);\n\nconst loadOptionsState = ref({\n  key: \"\",\n  seq: 0,\n  inFlight: false,\n});\n\n// Reset value and lazy load options when key changes\nwatch(\n  selectedKey,\n  async () => {\n    // Reset value based on type FIRST\n    currentValue.value = getDefaultValue(currentOption.value?.type);\n\n    // Lazy load options if available\n    if (currentOption.value?.loadOptions) {\n      const key = selectedKey.value;\n      if (loadOptionsState.value.inFlight && loadOptionsState.value.key === key) {\n        return;\n      }\n      const seq = (loadOptionsState.value.seq += 1);\n      loadOptionsState.value.key = key;\n      loadOptionsState.value.inFlight = true;\n      try {\n        await currentOption.value.loadOptions();\n      } finally {\n        if (loadOptionsState.value.seq === seq) {\n          loadOptionsState.value.inFlight = false;\n        }\n      }\n    }\n  },\n  { immediate: true },\n);\n\n// Update selectedKey if options change and current key is invalid\nwatch(\n  () => props.options,\n  (newOptions) => {\n    if (\n      newOptions.length > 0 &&\n      !newOptions.find((o) => o.value === selectedKey.value)\n    ) {\n      selectedKey.value = newOptions[0]?.value || \"\";\n    }\n  },\n  { immediate: true },\n);\n\nconst formatFilterValue = (\n  value: AnyFilterValue,\n  type?: FilterInputType,\n): string => {\n  const formatDateValue = (\n    date: Date | undefined,\n    withTime = false,\n  ): string => {\n    if (!(date instanceof Date) || Number.isNaN(date.getTime())) {\n      return \"\";\n    }\n\n    return new Intl.DateTimeFormat(dateFormatterLocale.value, {\n      year: \"numeric\",\n      month: \"2-digit\",\n      day: \"2-digit\",\n      ...(withTime\n        ? {\n            hour: \"2-digit\",\n            minute: \"2-digit\",\n          }\n        : {}),\n    }).format(date);\n  };\n\n  switch (type) {\n    case \"multi-select\":\n    case \"tree-multi-select\": {\n      if (!Array.isArray(value) || value.length === 0) return \"\";\n      const map = getOptionLabelMap(currentOption.value?.options);\n      const labels = value.map((val) => map.get(String(val)) || String(val));\n      return labels.join(\", \");\n    }\n    case \"select\": {\n      const label = currentOption.value?.options?.find(\n        (opt) => opt.value === value,\n      )?.label;\n      return label || String(value ?? \"\");\n    }\n    case \"date\":\n      return formatDateValue(value as Date | undefined);\n    case \"date-range\": {\n      const range = value as DateRange;\n      const from = formatDateValue(range?.from);\n      const to = formatDateValue(range?.to);\n      return [from, to].filter(Boolean).join(\" - \");\n    }\n    case \"date-time-range\": {\n      const range = value as DateTimeRange;\n      const from = formatDateValue(range?.from, true);\n      const to = formatDateValue(range?.to, true);\n      return [from, to].filter(Boolean).join(\" - \");\n    }\n    case \"cascade-select\": {\n      const casc = value as { level1?: string; level2?: string };\n      return [casc.level1, casc.level2].filter(Boolean).join(\" / \");\n    }\n    default:\n      return String(value ?? \"\");\n  }\n};\n\nconst isEmptyFilterValue = (\n  value: AnyFilterValue,\n  type?: FilterInputType,\n): boolean => {\n  switch (type) {\n    case \"multi-select\":\n    case \"tree-multi-select\":\n      return !Array.isArray(value) || value.length === 0;\n    case \"date\":\n      return !(value instanceof Date) || Number.isNaN(value.getTime());\n    case \"date-range\": {\n      const range = value as DateRange;\n      return !(range?.from instanceof Date) || Number.isNaN(range.from.getTime());\n    }\n    case \"date-time-range\": {\n      const range = value as DateTimeRange;\n      return !range?.from && !range?.to;\n    }\n    case \"cascade-select\": {\n      const cascade = value as { level1?: string; level2?: string };\n      return !cascade?.level1 && !cascade?.level2;\n    }\n    case \"select\":\n      return value == null || String(value) === \"\";\n    case \"text\":\n    default:\n      return String(value ?? \"\").trim() === \"\";\n  }\n};\n\nconst hasCurrentValue = computed(\n  () => !isEmptyFilterValue(currentValue.value, currentOption.value?.type),\n);\n\nconst isDateLikeFilter = computed(() =>\n  [\"date\", \"date-range\", \"date-time-range\"].includes(\n    currentOption.value?.type || \"\",\n  ),\n);\n\nconst currentInputClass = computed(() =>\n  cn(\"w-full min-w-0 rounded-none border\", isDateLikeFilter.value && \"pr-10\"),\n);\n\nconst currentInputWrapperClass = computed(() =>\n  cn(\"group relative min-w-0 w-full max-w-full\"),\n);\n\nconst resetCurrentValue = () => {\n  currentValue.value = getDefaultValue(currentOption.value?.type);\n};\n\nconst removeActiveFilter = (key: string) => {\n  activeFilters.value = activeFilters.value.filter((filter) => filter.key !== key);\n};\n\nconst handleSearch = () => {\n  const formatFn = currentOption.value?.formatValue;\n  const formattedValue = formatFn\n    ? formatFn(currentValue.value)\n    : currentValue.value;\n\n  if (isEmptyFilterValue(currentValue.value, currentOption.value?.type)) {\n    removeActiveFilter(selectedKey.value);\n    emit(\"search\", { key: selectedKey.value, value: formattedValue });\n    return;\n  }\n\n  const newItem: ActiveFilterItem = {\n    key: selectedKey.value,\n    label: currentOption.value?.label || \"\",\n    value: formattedValue,\n    displayValue: formatFilterValue(\n      currentValue.value,\n      currentOption.value?.type,\n    ),\n  };\n\n  const existingIndex = activeFilters.value.findIndex(\n    (f) => f.key === selectedKey.value,\n  );\n  if (existingIndex >= 0) {\n    activeFilters.value[existingIndex] = newItem;\n  } else {\n    activeFilters.value.push(newItem);\n  }\n\n  emit(\"search\", { key: selectedKey.value, value: formattedValue });\n};\n\nconst handleClearCurrentValue = () => {\n  const hadActiveFilter = activeFilters.value.some(\n    (filter) => filter.key === selectedKey.value,\n  );\n  resetCurrentValue();\n  removeActiveFilter(selectedKey.value);\n\n  if (hadActiveFilter) {\n    const formatFn = currentOption.value?.formatValue;\n    const formattedValue = formatFn\n      ? formatFn(currentValue.value)\n      : currentValue.value;\n    emit(\"search\", { key: selectedKey.value, value: formattedValue });\n  }\n};\n\nconst clearValueByKey = (key: string) => {\n  if (key !== selectedKey.value) return;\n  resetCurrentValue();\n};\n\ndefineExpose({\n  clearCurrentValue: resetCurrentValue,\n  clearValueByKey,\n});\n</script>\n\n<template>\n  <div\n    class=\"inline-grid w-[19.5rem] min-w-0 max-w-full grid-cols-[7.5rem_minmax(0,1fr)_2.25rem] gap-0\"\n  >\n    <Select v-model=\"selectedKey\">\n      <SelectTrigger\n        class=\"h-9 w-full min-w-0 rounded-r-none border-r-0 focus:ring-0\"\n      >\n        <SelectValue :placeholder=\"$t('selectColumn')\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectItem\n          v-for=\"option in options\"\n          :key=\"option.value\"\n          :value=\"option.value\"\n        >\n          {{ option.label }}\n        </SelectItem>\n      </SelectContent>\n    </Select>\n\n    <div :class=\"currentInputWrapperClass\">\n      <component\n        :is=\"resolveComponent(currentOption?.type)\"\n        :model-value=\"currentValue as any\"\n        @update:model-value=\"(val: any) => (currentValue = val)\"\n        :options=\"currentOption?.options\"\n        :level1-options=\"currentOption?.options\"\n        :placeholder=\"currentOption?.placeholder\"\n        :total=\"currentOption?.total\"\n        :current-page=\"currentOption?.currentPage\"\n        :page-size=\"currentOption?.pageSize\"\n        :loading=\"currentOption?.loading\"\n        :level1-label=\"currentOption?.level1Label\"\n        :level2-label=\"currentOption?.level2Label\"\n        :load-children=\"currentOption?.loadChildren\"\n        :locale=\"props.locale\"\n        :class=\"currentInputClass\"\n        @search=\"handleSearch\"\n        @load-more=\"currentOption?.loadMore?.()\"\n        @load-children=\"emit('loadChildren', $event)\"\n        :id=\"currentOption?.label\"\n      />\n      <FilterClearButton\n        :visible=\"hasCurrentValue\"\n        @click=\"handleClearCurrentValue\"\n      />\n    </div>\n\n    <Button\n      size=\"icon\"\n      variant=\"outline\"\n      class=\"h-9 w-9 shrink-0 rounded-l-none border-l-0 bg-transparent\"\n      @click=\"handleSearch\"\n    >\n      <Search class=\"h-4 w-4\" />\n    </Button>\n  </div>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/types.ts",
      "content": "import type {\n  DateRange,\n  DateTimeRange,\n} from \"@/components/date-time-range-picker\";\n\nexport type SelectOption = {\n  label: string;\n  value: string | number;\n  id?: string; // province id\n  children?: SelectOption[];\n  childrenSize?: number;\n};\n\nexport type FilterInputType =\n  | \"text\"\n  | \"select\"\n  | \"multi-select\"\n  | \"tree-multi-select\"\n  | \"date\"\n  | \"date-range\"\n  | \"date-time-range\"\n  | \"cascade-select\";\n\nexport type CascadeValue = {\n  level1?: string;\n  level2?: string;\n};\n\nexport type FilterInputValueMap = {\n  text: string;\n  select: string | number;\n  \"multi-select\": (string | number)[];\n  \"tree-multi-select\": (string | number)[];\n  date: Date | undefined;\n  \"date-range\": DateRange;\n  \"date-time-range\": DateTimeRange;\n  \"cascade-select\": CascadeValue;\n};\n\nexport type AnyFilterValue = FilterInputValueMap[keyof FilterInputValueMap];\n\nexport type FilterOption = {\n  label: string;\n  value: string;\n  type?: FilterInputType;\n  options?: SelectOption[];\n  placeholder?: string;\n  total?: number;\n  currentPage?: number;\n  pageSize?: number;\n  loading?: boolean;\n  formatValue?: (value: any) => any;\n  // For advanced filter in advancedSearch\n  formatValueAdvanced?: (value: any) => any;\n  // For cascade-select\n  level1Label?: string;\n  level2Label?: string;\n  // Lazy loading callback - called when field is selected/mounted\n  loadOptions?: () => Promise<void>;\n  // Pagination callback\n  loadMore?: () => Promise<void>;\n  // Cascade select children loader\n  loadChildren?: (parentId: string) => Promise<SelectOption[]>;\n};\n\nexport type FilterValue<T = AnyFilterValue> = {\n  key: string;\n  value: T;\n};\n\nexport type ActiveFilterItem = {\n  key: string;\n  label: string;\n  value: unknown;\n  displayValue: string;\n};\n\nexport type ActiveFilterRemoveEvent = {\n  key: string;\n  item: ActiveFilterItem;\n};\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/locales.ts",
      "content": "export type Locale = \"en\" | \"zhHans\";\n\nconst translations = {\n  en: {\n    selectColumn: \"Select column\",\n    filterTag: \"Filter Condition:\",\n    clearAll: \"Clear All\",\n    select: \"Select\",\n    search: \"Search\",\n    loading: \"Loading...\",\n    loadMore: \"Load more\",\n    noResults: \"No results\",\n    clearFilters: \"Clear filters\",\n    selected: \"selected\",\n    noData: \"No data\",\n    selectLevel1First: \"Select level 1 first\",\n  },\n  zhHans: {\n    selectColumn: \"选择字段\",\n    filterTag: \"筛选条件：\",\n    clearAll: \"清空\",\n    select: \"请选择\",\n    search: \"搜索\",\n    loading: \"加载中...\",\n    loadMore: \"加载更多\",\n    noResults: \"无结果\",\n    clearFilters: \"清空筛选\",\n    selected: \"项已选\",\n    noData: \"暂无数据\",\n    selectLevel1First: \"请先选择一级\",\n  },\n} as const;\n\nexport function GetI18nText(key: keyof typeof translations.en, locale: Locale) {\n  return translations[locale][key] || translations.en[key];\n}\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/index.ts",
      "content": "export { default as SmartSearchInput } from \"./SmartSearchInput.vue\";\nexport { default as ActiveFilterTags } from \"./ActiveFilterTags.vue\";\nexport * from \"./types\";\nexport type { Locale } from \"@/components/date-time-range-picker/locales\";\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/FilterInput.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\nimport { GetI18nText, type Locale } from \"./locales\";\n\nconst attrs = useAttrs();\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<{\n  placeholder?: string;\n  id?: string;\n  locale?: Locale;\n}>();\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale || \"en\");\n\nconst inputId =\n  props.id || `filter-input-${Math.random().toString(36).slice(2)}`;\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst emit = defineEmits<{\n  (e: \"search\"): void;\n}>();\n\nconst inputClass = computed(() =>\n  cn(\n    \"w-full min-w-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0\",\n    attrs.class as string\n  )\n);\n</script>\n\n<template>\n  <div class=\"relative flex w-full min-w-0 items-center\">\n    <Input\n      :id=\"inputId\"\n      v-model=\"modelValue\"\n      :placeholder=\"placeholder || $t('search')\"\n      :class=\"inputClass\"\n      @keyup.enter=\"emit('search')\"\n    />\n  </div>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/FilterSelect.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, useAttrs, ref } from \"vue\";\nimport { useIntersectionObserver, useVirtualList } from \"@vueuse/core\";\nimport { Loader2 } from \"@lucide/vue\";\nimport type { SelectOption } from \"./types\";\nimport {\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectContent,\n  SelectItem,\n} from \"@/components/ui/select\";\nimport { cn } from \"@/lib/utils\";\nimport { GetI18nText, type Locale } from \"./locales\";\n\nconst attrs = useAttrs();\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    options?: SelectOption[];\n    placeholder?: string;\n    loading?: boolean;\n    total?: number;\n    currentPage?: number;\n    pageSize?: number;\n    locale?: Locale;\n  }>(),\n  {\n    currentPage: 1,\n    pageSize: 20,\n  }\n);\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale || \"en\");\n\nconst modelValue = defineModel<string | number>();\n\nconst emit = defineEmits<{\n  (e: \"search\"): void;\n  (e: \"load-more\"): void;\n}>();\n\n// Auto-trigger search on change\nconst handleChange = (val: any) => {\n  modelValue.value = val ?? \"\";\n  emit(\"search\");\n};\n\nconst triggerClass = computed(() =>\n  cn(\"w-full min-w-0 rounded-none border focus:ring-0\", attrs.class as string)\n);\n\nconst hasMore = computed(() => {\n  return props.currentPage * props.pageSize < (props.total || 0);\n});\n\nconst VIRTUAL_THRESHOLD = 50;\n\nconst shouldUseVirtual = computed(\n  () => (props.options?.length || 0) > VIRTUAL_THRESHOLD\n);\n\nconst { list, containerProps, wrapperProps } = useVirtualList(\n  computed(() => props.options || []),\n  {\n    itemHeight: 32,\n    overscan: 5,\n  }\n);\n\nconst sentinel = ref<HTMLElement | null>(null);\n\nuseIntersectionObserver(\n  sentinel,\n  ([entry]) => {\n    if (entry?.isIntersecting && hasMore.value && !props.loading) {\n      emit(\"load-more\");\n    }\n  },\n  {\n    threshold: 0.1,\n  }\n);\n</script>\n\n<template>\n  <Select\n    :model-value=\"String(modelValue ?? '')\"\n    @update:model-value=\"handleChange\"\n  >\n    <SelectTrigger :class=\"triggerClass\">\n      <SelectValue :placeholder=\"placeholder || $t('select')\" />\n    </SelectTrigger>\n    <SelectContent>\n      <template v-if=\"options && options.length > 0\">\n        <div v-if=\"shouldUseVirtual\" v-bind=\"containerProps\" class=\"max-h-64 overflow-auto\">\n          <div v-bind=\"wrapperProps\">\n            <SelectItem\n              v-for=\"{ data } in list\"\n              :key=\"data.value\"\n              :value=\"String(data.value)\"\n              :style=\"{ height: '32px' }\"\n            >\n              {{ data.label }}\n            </SelectItem>\n          </div>\n        </div>\n        <template v-else>\n          <SelectItem\n            v-for=\"option in options\"\n            :key=\"option.value\"\n            :value=\"String(option.value)\"\n          >\n            {{ option.label }}\n          </SelectItem>\n        </template>\n      </template>\n\n      <div\n        v-if=\"hasMore || loading\"\n        ref=\"sentinel\"\n        class=\"flex items-center justify-center py-2 text-xs text-muted-foreground\"\n      >\n        <Loader2 v-if=\"loading\" class=\"h-3 w-3 animate-spin mr-2\" />\n        <span>{{ loading ? $t(\"loading\") : $t(\"loadMore\") }}</span>\n      </div>\n    </SelectContent>\n  </Select>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/FilterMultiSelect.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from \"vue\";\nimport { Check, ChevronsUpDown, Loader2 } from \"@lucide/vue\";\nimport type { SelectOption } from \"./types\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { useVirtualList, useIntersectionObserver } from \"@vueuse/core\";\nimport { GetI18nText, type Locale } from \"./locales\";\n\nconst attrs = useAttrs();\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    options?: SelectOption[];\n    placeholder?: string;\n    id?: string;\n    loading?: boolean;\n    total?: number;\n    currentPage?: number;\n    pageSize?: number;\n    locale?: Locale;\n  }>(),\n  {\n    currentPage: 1,\n    pageSize: 20,\n  }\n);\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale || \"en\");\n\nconst modelValue = defineModel<(string | number)[]>(\"modelValue\", {\n  default: () => [],\n});\n\nconst emit = defineEmits<{\n  (e: \"search\"): void;\n  (e: \"load-more\"): void;\n}>();\n\nconst open = ref(false);\n\nconst VIRTUAL_THRESHOLD = 50;\n\nconst shouldUseVirtual = computed(\n  () => (props.options?.length || 0) > VIRTUAL_THRESHOLD\n);\n\nconst { list, containerProps, wrapperProps } = useVirtualList(\n  computed(() => props.options || []),\n  {\n    itemHeight: 36,\n    overscan: 5,\n  }\n);\n\nconst selectedLabels = computed(() => {\n  if (!modelValue.value || modelValue.value.length === 0) return [];\n  const map = new Map(props.options?.map((o) => [String(o.value), o.label]));\n  return modelValue.value.map((v) => map.get(String(v)) || String(v));\n});\n\nconst toggleSelection = (val: string | number) => {\n  const strVal = String(val);\n  const current = modelValue.value.map(String);\n  const idx = current.indexOf(strVal);\n  let newValue: (string | number)[];\n\n  if (idx > -1) {\n    newValue = [...modelValue.value];\n    newValue.splice(idx, 1);\n  } else {\n    newValue = [...modelValue.value, val];\n  }\n\n  modelValue.value = newValue;\n};\n\nconst handleClear = () => {\n  modelValue.value = [];\n  emit(\"search\");\n};\n\nconst hasMore = computed(() => {\n  return props.currentPage * props.pageSize < (props.total || 0);\n});\n\nconst sentinel = ref<HTMLElement | null>(null);\n\nuseIntersectionObserver(\n  sentinel,\n  ([entry]) => {\n    if (entry?.isIntersecting && hasMore.value && !props.loading) {\n      emit(\"load-more\");\n    }\n  },\n  {\n    threshold: 0.1,\n  }\n);\n\nconst triggerClass = computed(() =>\n  cn(\"w-50 justify-between rounded-none\", attrs.class as string)\n);\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        :class=\"triggerClass\"\n        :id=\"id\"\n      >\n        <span v-if=\"modelValue.length === 0\" class=\"text-muted-foreground\">\n          {{ placeholder || $t(\"select\") }}\n        </span>\n        <div\n          v-else-if=\"selectedLabels.length <= 3\"\n          class=\"flex gap-1 overflow-hidden\"\n        >\n          <Badge\n            v-for=\"(label, idx) in selectedLabels\"\n            :key=\"idx\"\n            variant=\"secondary\"\n            class=\"rounded-sm px-1.5 py-0 text-xs font-normal shrink-0\"\n          >\n            {{ label }}\n          </Badge>\n        </div>\n        <Badge\n          v-else\n          variant=\"secondary\"\n          class=\"rounded-sm px-1.5 py-0 text-xs font-normal\"\n        >\n          {{ selectedLabels.length }} {{ $t(\"selected\") }}\n        </Badge>\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"p-0\" align=\"start\" style=\"width: var(--reka-popper-anchor-width)\">\n      <Command v-if=\"open\">\n        <CommandInput :placeholder=\"placeholder\" :id=\"id\" />\n        <CommandList>\n          <CommandEmpty>{{ $t(\"noResults\") }}</CommandEmpty>\n          <CommandGroup>\n            <template v-if=\"options && options.length > 0\">\n              <div v-if=\"shouldUseVirtual\" v-bind=\"containerProps\" class=\"h-64 overflow-auto\">\n                <div v-bind=\"wrapperProps\">\n                  <CommandItem\n                    v-for=\"{ data } in list\"\n                    :key=\"data.value\"\n                    :value=\"data.label\"\n                    @select=\"toggleSelection(data.value)\"\n                    :style=\"{ height: '36px' }\"\n                    class=\"!flex-1 !w-full flex items-center\"\n                  >\n                    <div\n                      class=\"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary shrink-0\"\n                      :class=\"\n                        modelValue.map(String).includes(String(data.value))\n                          ? 'bg-primary text-primary-foreground'\n                          : 'opacity-50 [&_svg]:invisible'\n                      \"\n                    >\n                      <Check class=\"h-4 w-4\" />\n                    </div>\n                    <span>{{ data.label }}</span>\n                  </CommandItem>\n                </div>\n              </div>\n              <template v-else>\n                <CommandItem\n                  v-for=\"option in options\"\n                  :key=\"option.value\"\n                  :value=\"option.label\"\n                  @select=\"toggleSelection(option.value)\"\n                >\n                  <div\n                    class=\"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary shrink-0\"\n                    :class=\"\n                      modelValue.map(String).includes(String(option.value))\n                        ? 'bg-primary text-primary-foreground'\n                        : 'opacity-50 [&_svg]:invisible'\n                    \"\n                  >\n                    <Check class=\"h-4 w-4\" />\n                  </div>\n                  <span>{{ option.label }}</span>\n                </CommandItem>\n              </template>\n            </template>\n            <div\n              v-if=\"hasMore || loading\"\n              ref=\"sentinel\"\n              class=\"flex items-center justify-center py-2 text-xs text-muted-foreground\"\n            >\n              <Loader2 v-if=\"loading\" class=\"h-3 w-3 animate-spin mr-2\" />\n              <span>{{ loading ? $t(\"loading\") : $t(\"loadMore\") }}</span>\n            </div>\n          </CommandGroup>\n          <template v-if=\"modelValue.length > 0\">\n            <CommandSeparator />\n            <CommandGroup>\n              <CommandItem\n                :value=\"'{clear}'\"\n                class=\"justify-center text-center\"\n                @select=\"handleClear\"\n              >\n                {{ $t(\"clearFilters\") }}\n              </CommandItem>\n            </CommandGroup>\n          </template>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/FilterTreeSelect.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from \"vue\";\nimport { ChevronsUpDown } from \"@lucide/vue\";\nimport type { SelectOption } from \"./types\";\nimport FilterTreeSelectOption from \"./FilterTreeSelectOption.vue\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandList,\n  CommandSeparator,\n  CommandItem,\n} from \"@/components/ui/command\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport { GetI18nText, type Locale } from \"./locales\";\n\nconst attrs = useAttrs();\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<{\n  options?: SelectOption[];\n  placeholder?: string;\n  id?: string;\n  locale?: Locale;\n}>();\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale || \"en\");\n\nconst modelValue = defineModel<(string | number)[]>(\"modelValue\", {\n  default: () => [],\n});\n\nconst emit = defineEmits<{\n  (e: \"search\"): void;\n}>();\n\nconst open = ref(false);\n\nconst itemMap = computed(() => {\n  const map = new Map<string, SelectOption>();\n  const parentMap = new Map<string, SelectOption | null>();\n\n  const traverse = (opts: SelectOption[], parent: SelectOption | null) => {\n    opts.forEach((opt) => {\n      map.set(String(opt.value), opt);\n      parentMap.set(String(opt.value), parent);\n      if (opt.children) {\n        traverse(opt.children, opt);\n      }\n    });\n  };\n  traverse(props.options || [], null);\n  return { map, parentMap };\n});\n\nconst selectedLabels = computed(() => {\n  if (!modelValue.value || modelValue.value.length === 0) return [];\n  return modelValue.value.map(\n    (v) => itemMap.value.map.get(String(v))?.label || String(v),\n  );\n});\n\nconst handleToggle = (val: string | number) => {\n  const strVal = String(val);\n  const currentSet = new Set(modelValue.value.map(String));\n  const isSelecting = !currentSet.has(strVal);\n\n  const { map, parentMap } = itemMap.value;\n  const targetNode = map.get(strVal);\n  if (!targetNode) return;\n\n  const updateDescendants = (node: SelectOption, select: boolean) => {\n    const nodeStrVal = String(node.value);\n    if (select) currentSet.add(nodeStrVal);\n    else currentSet.delete(nodeStrVal);\n\n    if (node.children) {\n      node.children.forEach((child) => void updateDescendants(child, select));\n    }\n  };\n  updateDescendants(targetNode, isSelecting);\n\n  let currentNode = targetNode;\n  while (true) {\n    const parent = parentMap.get(String(currentNode.value));\n    if (!parent) break;\n\n    const parentStrVal = String(parent.value);\n    const siblings = parent.children || [];\n    const allSiblingsSelected = siblings.every((sib) =>\n      currentSet.has(String(sib.value)),\n    );\n\n    if (allSiblingsSelected) {\n      currentSet.add(parentStrVal);\n    } else {\n      currentSet.delete(parentStrVal);\n    }\n\n    currentNode = parent;\n  }\n\n  modelValue.value = Array.from(currentSet);\n};\n\nconst handleClear = () => {\n  modelValue.value = [];\n  emit(\"search\");\n};\n\nconst triggerClass = computed(() =>\n  cn(\"w-50 justify-between rounded-none\", attrs.class as string),\n);\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        :class=\"triggerClass\"\n      >\n        <div class=\"flex gap-1 text-left font-normal overflow-hidden flex-1\">\n          <span\n            v-if=\"modelValue.length === 0\"\n            class=\"text-muted-foreground truncate\"\n            >{{ placeholder || $t(\"select\") }}</span\n          >\n          <template v-else-if=\"modelValue.length <= 3\">\n            <Badge\n              v-for=\"(label, idx) in selectedLabels\"\n              :key=\"idx\"\n              variant=\"secondary\"\n              class=\"rounded-sm px-1.5 py-0 text-xs font-normal shrink-0\"\n            >\n              {{ label }}\n            </Badge>\n          </template>\n          <Badge\n            v-else\n            variant=\"secondary\"\n            class=\"rounded-sm px-1.5 py-0 text-xs font-normal\"\n          >\n            {{ modelValue.length }} {{ $t(\"selected\") }}\n          </Badge>\n        </div>\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent\n      class=\"p-0\"\n      style=\"width: var(--reka-popper-anchor-width)\"\n      align=\"start\"\n    >\n      <Command>\n        <CommandInput :id=\"id\" :placeholder=\"placeholder\" />\n        <CommandList>\n          <CommandEmpty>{{ $t(\"noResults\") }}</CommandEmpty>\n          <CommandGroup>\n            <ScrollArea class=\"h-64\">\n              <FilterTreeSelectOption\n                v-for=\"option in options\"\n                :key=\"option.value\"\n                :option=\"option\"\n                :selected-values=\"modelValue\"\n                @toggle=\"handleToggle\"\n              />\n            </ScrollArea>\n          </CommandGroup>\n          <template v-if=\"modelValue.length > 0\">\n            <CommandSeparator />\n            <CommandGroup>\n              <CommandItem\n                :value=\"'{clear}'\"\n                class=\"justify-center text-center\"\n                @select=\"handleClear\"\n              >\n                {{ $t(\"clearFilters\") }}\n              </CommandItem>\n            </CommandGroup>\n          </template>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/FilterTreeSelectOption.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { ChevronRight, ChevronDown } from \"@lucide/vue\";\nimport type { SelectOption } from \"./types\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\n\nconst props = defineProps<{\n  option: SelectOption;\n  selectedValues: (string | number)[];\n  level?: number;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"toggle\", value: string | number): void;\n}>();\n\nconst isExpanded = ref(false);\nconst currentLevel = props.level || 0;\n\nconst isSelected = computed(() =>\n  props.selectedValues.includes(props.option.value)\n);\n\nconst hasChildren = computed(\n  () => props.option.children && props.option.children.length > 0\n);\n\nconst handleToggleExpand = () => {\n  if (hasChildren.value) {\n    isExpanded.value = !isExpanded.value;\n  }\n};\n\nconst handleCheckboxChange = () => {\n  emit(\"toggle\", props.option.value);\n};\n\nconst handleChildToggle = (val: string | number) => {\n  emit(\"toggle\", val);\n};\n</script>\n\n<template>\n  <div>\n    <div\n      class=\"flex items-center py-1 px-2 hover:bg-accent hover:text-accent-foreground cursor-pointer\"\n      :style=\"{ paddingLeft: `${currentLevel * 16 + 8}px` }\"\n      @click.stop=\"handleToggleExpand\"\n    >\n      <button\n        v-if=\"hasChildren\"\n        class=\"mr-1 h-4 w-4 shrink-0 rounded-sm hover:bg-muted flex items-center justify-center p-0\"\n        @click.stop=\"handleToggleExpand\"\n      >\n        <ChevronDown v-if=\"isExpanded\" class=\"h-3 w-3\" />\n        <ChevronRight v-else class=\"h-3 w-3\" />\n      </button>\n      <span v-else class=\"mr-1 w-4\"></span>\n\n      <Checkbox\n        :id=\"`tree-node-${option.value}`\"\n        :model-value=\"isSelected\"\n        class=\"mr-2\"\n        @update:model-value=\"handleCheckboxChange\"\n      />\n\n      <span class=\"text-sm select-none truncate\">\n        {{ option.label }}\n      </span>\n    </div>\n\n    <div v-if=\"isExpanded && hasChildren\">\n      <FilterTreeSelectOption\n        v-for=\"child in option.children\"\n        :key=\"child.value\"\n        :option=\"child\"\n        :selected-values=\"selectedValues\"\n        :level=\"currentLevel + 1\"\n        @toggle=\"handleChildToggle\"\n      />\n    </div>\n  </div>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/FilterCascadeSelect.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from \"vue\";\nimport { ChevronRight, ChevronsUpDown } from \"@lucide/vue\";\nimport type { CascadeValue, SelectOption } from \"./types\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { GetI18nText, type Locale } from \"./locales\";\n\nconst attrs = useAttrs();\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<{\n  level1Options?: SelectOption[];\n  placeholder?: string;\n  id?: string;\n  level1Label?: string;\n  level2Label?: string;\n  loadChildren?: (parentId: string) => Promise<SelectOption[]>;\n  locale?: Locale;\n}>();\n\nconst modelValue = defineModel<CascadeValue>(\"modelValue\", {\n  default: () => ({}),\n});\n\nconst emit = defineEmits<{\n  (e: \"loadChildren\", parentId: string): void;\n}>();\n\nconst open = ref(false);\nconst activeLevel1 = ref<SelectOption | null>(null);\nconst level2Options = ref<SelectOption[]>([]);\nconst loadingLevel2 = ref(false);\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale || \"en\");\n\n// Display text for trigger\nconst displayText = computed(() => {\n  if (!modelValue.value.level1) return \"\";\n\n  const level1Item = props.level1Options?.find(\n    (o) => String(o.value) === modelValue.value.level1\n  );\n  const level1Label = level1Item?.label || modelValue.value.level1;\n\n  if (!modelValue.value.level2) return level1Label;\n\n  const level2Item = level2Options.value.find(\n    (o) => String(o.value) === modelValue.value.level2\n  );\n  const level2Label = level2Item?.label || modelValue.value.level2;\n\n  return `${level1Label} / ${level2Label}`;\n});\n\nconst handleLevel1Click = async (option: SelectOption) => {\n  // Skip if same option clicked\n  if (activeLevel1.value?.value === option.value) return;\n\n  activeLevel1.value = option;\n  level2Options.value = [];\n\n  // Update model value\n  modelValue.value = {\n    level1: String(option.value),\n    level2: undefined,\n  };\n\n  // Check if has children\n  const hasChildren =\n    (option.children && option.children.length > 0) ||\n    option.childrenSize! > 0;\n\n  if (!hasChildren) {\n    // No children, close popover\n    open.value = false;\n  } else if (option.children && option.children.length > 0) {\n    // Children already loaded\n    level2Options.value = option.children;\n  } else {\n    // Load children\n    const parentId = String(option.id ?? option.value);\n    loadingLevel2.value = true;\n\n    if (props.loadChildren) {\n      // Use helper function\n      try {\n        const options = await props.loadChildren(parentId);\n        level2Options.value = options;\n      } catch (error) {\n        console.error(\"Failed to load children\", error);\n      }\n    } else {\n      // Fallback to emit\n      emit(\"loadChildren\", parentId);\n    }\n\n    loadingLevel2.value = false;\n  }\n};\n\nconst handleLevel2Click = (option: SelectOption) => {\n  modelValue.value = {\n    level1: String(activeLevel1.value?.value),\n    level2: String(option.value),\n  };\n  open.value = false;\n};\n\n// Method to set level2 options externally (deprecated buy kept for backward compatibility if needed)\nconst setLevel2Options = (options: SelectOption[]) => {\n  level2Options.value = options;\n  loadingLevel2.value = false;\n};\n\ndefineExpose({\n  setLevel2Options,\n});\n\nconst triggerClass = computed(() =>\n  cn(\"w-50 justify-between rounded-none\", attrs.class as string)\n);\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        :class=\"triggerClass\"\n        :id=\"id\"\n      >\n        <span v-if=\"!displayText\" class=\"text-muted-foreground truncate\">\n          {{ placeholder || $t(\"select\") }}\n        </span>\n        <Badge\n          v-else\n          variant=\"secondary\"\n          class=\"rounded-sm px-1.5 py-0 text-xs font-normal truncate max-w-full\"\n        >\n          {{ displayText }}\n        </Badge>\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 text-muted-foreground\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80 p-0\" align=\"start\">\n      <div class=\"flex\">\n        <!-- Level 1 Column -->\n        <div class=\"w-1/2 border-r\">\n          <div\n            class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground border-b\"\n          >\n            {{ level1Label }}\n          </div>\n          <ScrollArea class=\"h-64\">\n            <div\n              v-for=\"option in level1Options\"\n              :key=\"option.value\"\n              class=\"flex items-center justify-between px-2 py-1.5 cursor-pointer hover:bg-muted/50 transition-colors\"\n              :class=\"{\n                'bg-muted': activeLevel1?.value === option.value,\n                'text-primary': modelValue.level1 === String(option.value),\n              }\"\n              @click=\"handleLevel1Click(option)\"\n            >\n              <span class=\"text-sm truncate\">{{ option.label }}</span>\n              <ChevronRight\n                v-if=\"(option as any).childrenSize > 0 || option.children?.length\"\n                class=\"h-4 w-4 shrink-0 opacity-50\"\n              />\n            </div>\n          </ScrollArea>\n        </div>\n\n        <!-- Level 2 Column -->\n        <div class=\"w-1/2\">\n          <div\n            class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground border-b\"\n          >\n            {{ level2Label }}\n          </div>\n          <ScrollArea class=\"h-64\">\n            <div\n              v-if=\"loadingLevel2\"\n              class=\"flex items-center justify-center h-20\"\n            >\n              <span class=\"text-sm text-muted-foreground\">{{ $t(\"loading\") }}</span>\n            </div>\n            <template v-else-if=\"level2Options.length > 0\">\n              <div\n                v-for=\"option in level2Options\"\n                :key=\"option.value\"\n                class=\"px-2 py-1.5 cursor-pointer hover:bg-muted/50 transition-colors\"\n                :class=\"{\n                  'text-primary': modelValue.level2 === String(option.value),\n                }\"\n                @click=\"handleLevel2Click(option)\"\n              >\n                <span class=\"text-sm\">{{ option.label }}</span>\n              </div>\n            </template>\n            <div v-else class=\"flex items-center justify-center p-2\">\n              <span class=\"text-sm text-muted-foreground\">\n                {{\n                  activeLevel1\n                    ? $t(\"noData\")\n                    : $t(\"selectLevel1First\")\n                }}\n              </span>\n            </div>\n          </ScrollArea>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/smart-search-input/FilterClearButton.vue",
      "content": "<script setup lang=\"ts\">\nimport { X } from \"@lucide/vue\";\n\ndefineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"click\", event: MouseEvent): void;\n}>();\n\nconst handleClick = (event: MouseEvent) => {\n  event.preventDefault();\n  event.stopPropagation();\n  emit(\"click\", event);\n};\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"pointer-events-none absolute inset-y-px right-px z-10 w-10 overflow-hidden rounded-r-[calc(var(--radius)-1px)] opacity-0 transition group-hover:opacity-100 group-focus-within:opacity-100\"\n  >\n    <div class=\"absolute inset-0 bg-gradient-to-r from-transparent via-background/35 to-background/75 backdrop-blur-md\" />\n    <button\n      type=\"button\"\n      class=\"pointer-events-auto absolute top-1/2 right-1.5 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-sm text-muted-foreground transition hover:bg-muted/70 hover:text-foreground\"\n      @click=\"handleClick\"\n    >\n      <X class=\"h-3.5 w-3.5\" />\n    </button>\n  </div>\n</template>\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}