@nuxt/ui 2.19.0 → 2.19.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.19.0",
+  "version": "2.19.1",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.10.0"

package/dist/module.mjs

@@ -14,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.19.0";
+const version = "2.19.1";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({

package/dist/runtime/components/elements/ButtonGroup.d.ts

@@ -145,8 +145,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{}>, {
-    orientation: "horizontal" | "vertical";
     size: ButtonSize;
+    orientation: "horizontal" | "vertical";
     ui: Partial<{
         wrapper: {
             horizontal: string;

package/dist/runtime/components/elements/MeterGroup.d.ts

@@ -173,8 +173,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }> & {
         strategy?: Strategy;
     };
-    class: any;
     icon: string;
+    class: any;
     max: number;
     min: number;
     indicator: boolean;

package/dist/runtime/components/forms/InputMenu.vue

@@ -373,407 +373,7 @@ export default defineComponent({
       lazy: props.searchLazy
     });
     function escapeRegExp(string) {
-      return string.replace(/[.*+?^${}()|[\]\\]/g, "\\<script lang="ts">
-import { ref, computed, toRef, watch, defineComponent, toRaw } from 'vue'
-import type { PropType } from 'vue'
-import {
-  Combobox as HCombobox,
-  ComboboxButton as HComboboxButton,
-  ComboboxOptions as HComboboxOptions,
-  ComboboxOption as HComboboxOption,
-  ComboboxInput as HComboboxInput,
-  provideUseId
-} from '@headlessui/vue'
-import { computedAsync, useDebounceFn } from '@vueuse/core'
-import { defu } from 'defu'
-import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
-import { useUI } from '../../composables/useUI'
-import { usePopper } from '../../composables/usePopper'
-import { useFormGroup } from '../../composables/useFormGroup'
-import { get, mergeConfig } from '../../utils'
-import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
-// @ts-expect-error
-import appConfig from '#build/app.config'
-import { input, inputMenu } from '#ui/ui.config'
-import { useId } from '#imports'
-
-const config = mergeConfig<typeof input>(appConfig.ui.strategy, appConfig.ui.input, input)
-
-const configMenu = mergeConfig<typeof inputMenu>(appConfig.ui.strategy, appConfig.ui.inputMenu, inputMenu)
-
-export default defineComponent({
-  components: {
-    HCombobox,
-    HComboboxButton,
-    HComboboxOptions,
-    HComboboxOption,
-    HComboboxInput,
-    UIcon,
-    UAvatar
-  },
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number, Object, Array] as PropType<string | number | object | Array<any> | null>,
-      default: ''
-    },
-    query: {
-      type: String,
-      default: null
-    },
-    by: {
-      type: String,
-      default: undefined
-    },
-    options: {
-      type: Array as PropType<{ [key: string]: any, disabled?: boolean }[] | string[]>,
-      default: () => []
-    },
-    id: {
-      type: String,
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    loadingIcon: {
-      type: String,
-      default: () => config.default.loadingIcon
-    },
-    leadingIcon: {
-      type: String,
-      default: null
-    },
-    trailingIcon: {
-      type: String,
-      default: () => configMenu.default.trailingIcon
-    },
-    trailing: {
-      type: Boolean,
-      default: false
-    },
-    leading: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    selectedIcon: {
-      type: String,
-      default: () => configMenu.default.selectedIcon
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    nullable: {
-      type: Boolean,
-      default: false
-    },
-    placeholder: {
-      type: String,
-      default: null
-    },
-    padded: {
-      type: Boolean,
-      default: true
-    },
-    size: {
-      type: String as PropType<InputSize>,
-      default: null,
-      validator(value: string) {
-        return Object.keys(config.size).includes(value)
-      }
-    },
-    color: {
-      type: String as PropType<InputColor>,
-      default: () => config.default.color,
-      validator(value: string) {
-        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
-      }
-    },
-    variant: {
-      type: String as PropType<InputVariant>,
-      default: () => config.default.variant,
-      validator(value: string) {
-        return [
-          ...Object.keys(config.variant),
-          ...Object.values(config.color).flatMap(value => Object.keys(value))
-        ].includes(value)
-      }
-    },
-    optionAttribute: {
-      type: String,
-      default: 'label'
-    },
-    valueAttribute: {
-      type: String,
-      default: null
-    },
-    search: {
-      type: Function as PropType<((query: string) => Promise<any[]> | any[])>,
-      default: undefined
-    },
-    searchAttributes: {
-      type: Array,
-      default: null
-    },
-    searchLazy: {
-      type: Boolean,
-      default: false
-    },
-    debounce: {
-      type: Number,
-      default: 200
-    },
-    popper: {
-      type: Object as PropType<PopperOptions>,
-      default: () => ({})
-    },
-    inputClass: {
-      type: String,
-      default: null
-    },
-    class: {
-      type: [String, Object, Array] as PropType<any>,
-      default: () => ''
-    },
-    ui: {
-      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
-      default: () => ({})
-    },
-    uiMenu: {
-      type: Object as PropType<DeepPartial<typeof configMenu> & { strategy?: Strategy }>,
-      default: () => ({})
-    }
-  },
-  emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
-  setup(props, { emit, slots }) {
-    const { ui, attrs } = useUI('input', toRef(props, 'ui'), config, toRef(props, 'class'))
-    const { ui: uiMenu } = useUI('inputMenu', toRef(props, 'uiMenu'), configMenu)
-
-    const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))
-
-    const [trigger, container] = usePopper(popper.value)
-
-    const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
-    const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config)
-
-    const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value)
-
-    const internalQuery = ref('')
-    const query = computed({
-      get() {
-        return props.query ?? internalQuery.value
-      },
-      set(value) {
-        internalQuery.value = value
-        emit('update:query', value)
-      }
-    })
-
-    const label = computed(() => {
-      if (!props.modelValue) {
-        return
-      }
-
-      if (props.valueAttribute) {
-        const option = options.value.find(option => option[props.valueAttribute] === props.modelValue)
-        return option ? accessor(option, props.optionAttribute) : null
-      } else {
-        return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue as Record<string, any>, props.optionAttribute)
-      }
-    })
-
-    const inputClass = computed(() => {
-      const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
-
-      return twMerge(twJoin(
-        ui.value.base,
-        ui.value.form,
-        rounded.value,
-        ui.value.placeholder,
-        ui.value.size[size.value],
-        props.padded ? ui.value.padding[size.value] : 'p-0',
-        variant?.replaceAll('{color}', color.value),
-        (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
-        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.inputClass)
-    })
-
-    const isLeading = computed(() => {
-      return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
-    })
-
-    const isTrailing = computed(() => {
-      return (props.icon && props.trailing) || (props.loading && props.trailing) || props.trailingIcon
-    })
-
-    const leadingIconName = computed(() => {
-      if (props.loading) {
-        return props.loadingIcon
-      }
-
-      return props.leadingIcon || props.icon
-    })
-
-    const trailingIconName = computed(() => {
-      if (props.loading && !isLeading.value) {
-        return props.loadingIcon
-      }
-
-      return props.trailingIcon || props.icon
-    })
-
-    const leadingWrapperIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.leading.wrapper,
-        ui.value.icon.leading.pointer,
-        ui.value.icon.leading.padding[size.value]
-      )
-    })
-
-    const leadingIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.base,
-        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
-        ui.value.icon.size[size.value],
-        props.loading && ui.value.icon.loading
-      )
-    })
-
-    const trailingWrapperIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.trailing.wrapper,
-        ui.value.icon.trailing.padding[size.value]
-      )
-    })
-
-    const trailingIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.base,
-        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
-        ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && ui.value.icon.loading
-      )
-    })
-
-    const debouncedSearch = props.search && typeof props.search === 'function' ? useDebounceFn(props.search, props.debounce) : undefined
-
-    const options = computedAsync(async () => {
-      if (debouncedSearch) {
-        return await debouncedSearch(query.value)
-      }
-
-      return props.options || []
-    }, [], {
-      lazy: props.searchLazy
-    })
-
-    function escapeRegExp(string: string) {
-      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-    }
-
-    const filteredOptions = computed(() => {
-      if (!query.value || debouncedSearch) {
-        return options.value
-      }
-
-      const escapedQuery = escapeRegExp(query.value)
-
-      return options.value.filter((option: any) => {
-        return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute: any) => {
-          if (['string', 'number'].includes(typeof option)) {
-            return String(option).search(new RegExp(escapedQuery, 'i')) !== -1
-          }
-
-          const child = get(option, searchAttribute)
-
-          return child !== null && child !== undefined && String(child).search(new RegExp(escapedQuery, 'i')) !== -1
-        })
-      })
-    })
-
-    watch(container, (value) => {
-      if (value) {
-        emit('open')
-      } else {
-        emit('close')
-        emitFormBlur()
-      }
-    })
-
-    function onUpdate(value: any) {
-      query.value = ''
-
-      if (toRaw(props.modelValue) === toRaw(value)) {
-        return
-      }
-
-      emit('update:modelValue', value)
-      emit('change', value)
-
-      emitFormChange()
-    }
-
-    function accessor<T extends Record<string, any>>(obj: T, key: string) {
-      return get(obj, key)
-    }
-
-    function onQueryChange(event: any) {
-      query.value = event.target.value
-    }
-
-    provideUseId(() => useId())
-
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      // eslint-disable-next-line vue/no-dupe-keys
-      uiMenu,
-      attrs,
-      // eslint-disable-next-line vue/no-dupe-keys
-      name,
-      inputId,
-      // eslint-disable-next-line vue/no-dupe-keys
-      popper,
-      trigger,
-      container,
-      label,
-      isLeading,
-      isTrailing,
-      // eslint-disable-next-line vue/no-dupe-keys
-      inputClass,
-      leadingIconName,
-      leadingIconClass,
-      leadingWrapperIconClass,
-      trailingIconName,
-      trailingIconClass,
-      trailingWrapperIconClass,
-      filteredOptions,
-      // eslint-disable-next-line vue/no-dupe-keys
-      query,
-      accessor,
-      onUpdate,
-      onQueryChange
-    }
-  }
-})
-</script>");
+      return string.replace(/[.*+?^${}()|[\]\\]/g, (match) => `\\${match}`);
     }
     const filteredOptions = computed(() => {
       if (!query.value || debouncedSearch) {

package/dist/runtime/components/forms/SelectMenu.vue

@@ -453,486 +453,7 @@ export default defineComponent({
       lazy: props.searchableLazy
     });
     function escapeRegExp(string) {
-      return string.replace(/[.*+?^${}()|[\]\\]/g, "\\<script lang="ts">
-import { ref, computed, toRef, watch, defineComponent, toRaw } from 'vue'
-import type { PropType } from 'vue'
-import {
-  Combobox as HCombobox,
-  ComboboxButton as HComboboxButton,
-  ComboboxOptions as HComboboxOptions,
-  ComboboxOption as HComboboxOption,
-  ComboboxInput as HComboboxInput,
-  Listbox as HListbox,
-  ListboxButton as HListboxButton,
-  ListboxOptions as HListboxOptions,
-  ListboxOption as HListboxOption,
-  provideUseId
-} from '@headlessui/vue'
-import { computedAsync, useDebounceFn } from '@vueuse/core'
-import { defu } from 'defu'
-import { twMerge, twJoin } from 'tailwind-merge'
-import UIcon from '../elements/Icon.vue'
-import UAvatar from '../elements/Avatar.vue'
-import { useUI } from '../../composables/useUI'
-import { usePopper } from '../../composables/usePopper'
-import { useFormGroup } from '../../composables/useFormGroup'
-import { get, mergeConfig } from '../../utils'
-import { useInjectButtonGroup } from '../../composables/useButtonGroup'
-import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
-// @ts-expect-error
-import appConfig from '#build/app.config'
-import { select, selectMenu } from '#ui/ui.config'
-import { useId } from '#imports'
-
-const config = mergeConfig<typeof select>(appConfig.ui.strategy, appConfig.ui.select, select)
-
-const configMenu = mergeConfig<typeof selectMenu>(appConfig.ui.strategy, appConfig.ui.selectMenu, selectMenu)
-
-export default defineComponent({
-  components: {
-    HCombobox,
-    HComboboxButton,
-    HComboboxOptions,
-    HComboboxOption,
-    HComboboxInput,
-    HListbox,
-    HListboxButton,
-    HListboxOptions,
-    HListboxOption,
-    UIcon,
-    UAvatar
-  },
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number, Object, Array, Boolean] as PropType<string | number | object | Array<any> | boolean | null>,
-      default: ''
-    },
-    query: {
-      type: String,
-      default: null
-    },
-    by: {
-      type: String,
-      default: undefined
-    },
-    options: {
-      type: Array as PropType<{ [key: string]: any, disabled?: boolean }[] | string[]>,
-      default: () => []
-    },
-    id: {
-      type: String,
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    loadingIcon: {
-      type: String,
-      default: () => config.default.loadingIcon
-    },
-    leadingIcon: {
-      type: String,
-      default: null
-    },
-    trailingIcon: {
-      type: String,
-      default: () => config.default.trailingIcon
-    },
-    trailing: {
-      type: Boolean,
-      default: false
-    },
-    leading: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    selectedIcon: {
-      type: String,
-      default: () => configMenu.default.selectedIcon
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    searchable: {
-      type: [Boolean, Function] as PropType<boolean | ((query: string) => Promise<any[]> | any[])>,
-      default: false
-    },
-    searchablePlaceholder: {
-      type: String,
-      default: () => configMenu.default.searchablePlaceholder.label
-    },
-    searchableLazy: {
-      type: Boolean,
-      default: false
-    },
-    clearSearchOnClose: {
-      type: Boolean,
-      default: () => configMenu.default.clearSearchOnClose
-    },
-    debounce: {
-      type: Number,
-      default: 200
-    },
-    creatable: {
-      type: Boolean,
-      default: false
-    },
-    showCreateOptionWhen: {
-      type: [String, Function] as PropType<'always' | 'empty' | ((query: string, results: any[]) => boolean)>,
-      default: () => configMenu.default.showCreateOptionWhen
-    },
-    placeholder: {
-      type: String,
-      default: null
-    },
-    padded: {
-      type: Boolean,
-      default: true
-    },
-    size: {
-      type: String as PropType<SelectSize>,
-      default: null,
-      validator(value: string) {
-        return Object.keys(config.size).includes(value)
-      }
-    },
-    color: {
-      type: String as PropType<SelectColor>,
-      default: () => config.default.color,
-      validator(value: string) {
-        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
-      }
-    },
-    variant: {
-      type: String as PropType<SelectVariant>,
-      default: () => config.default.variant,
-      validator(value: string) {
-        return [
-          ...Object.keys(config.variant),
-          ...Object.values(config.color).flatMap(value => Object.keys(value))
-        ].includes(value)
-      }
-    },
-    optionAttribute: {
-      type: String,
-      default: 'label'
-    },
-    valueAttribute: {
-      type: String,
-      default: null
-    },
-    searchAttributes: {
-      type: Array,
-      default: null
-    },
-    popper: {
-      type: Object as PropType<PopperOptions>,
-      default: () => ({})
-    },
-    selectClass: {
-      type: String,
-      default: null
-    },
-    class: {
-      type: [String, Object, Array] as PropType<any>,
-      default: () => ''
-    },
-    ui: {
-      type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
-      default: () => ({})
-    },
-    uiMenu: {
-      type: Object as PropType<DeepPartial<typeof configMenu> & { strategy?: Strategy }>,
-      default: () => ({})
-    }
-  },
-  emits: ['update:modelValue', 'update:query', 'open', 'close', 'change'],
-  setup(props, { emit, slots }) {
-    if (import.meta.dev && props.multiple && !Array.isArray(props.modelValue)) {
-      console.warn(`[@nuxt/ui] The USelectMenu components needs to have a modelValue of type Array when using the multiple prop. Got '${typeof props.modelValue}' instead.`, props.modelValue)
-    }
-
-    const { ui, attrs } = useUI('select', toRef(props, 'ui'), config, toRef(props, 'class'))
-    const { ui: uiMenu } = useUI('selectMenu', toRef(props, 'uiMenu'), configMenu)
-
-    const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))
-
-    const [trigger, container] = usePopper(popper.value)
-
-    const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
-    const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config)
-
-    const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value)
-
-    const internalQuery = ref('')
-    const query = computed({
-      get() {
-        return props.query ?? internalQuery.value
-      },
-      set(value) {
-        internalQuery.value = value
-        emit('update:query', value)
-      }
-    })
-
-    const selected = computed(() => {
-      if (props.multiple) {
-        if (!Array.isArray(props.modelValue) || !props.modelValue.length) {
-          return []
-        }
-
-        if (props.valueAttribute) {
-          return options.value.filter(option => (props.modelValue as any[]).includes(option[props.valueAttribute]))
-        }
-        return options.value.filter(option => (props.modelValue as any[]).includes(option))
-      }
-
-      if (props.valueAttribute) {
-        return options.value.find(option => option[props.valueAttribute] === props.modelValue)
-      }
-      return options.value.find(option => option === props.modelValue)
-    })
-
-    const label = computed(() => {
-      if (props.multiple) {
-        if (Array.isArray(props.modelValue) && props.modelValue.length) {
-          return `${selected.value.length} selected`
-        } else {
-          return null
-        }
-      } else if (props.modelValue !== undefined && props.modelValue !== null) {
-        if (props.valueAttribute) {
-          return accessor(selected.value, props.optionAttribute) ?? null
-        } else {
-          return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue as Record<string, any>, props.optionAttribute)
-        }
-      }
-
-      return null
-    })
-
-    const selectClass = computed(() => {
-      const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
-
-      return twMerge(twJoin(
-        ui.value.base,
-        uiMenu.value.select,
-        rounded.value,
-        ui.value.size[size.value],
-        ui.value.gap[size.value],
-        props.padded ? ui.value.padding[size.value] : 'p-0',
-        variant?.replaceAll('{color}', color.value),
-        (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
-        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.placeholder && (!props.modelValue || (Array.isArray(props.modelValue) && !props.modelValue.length)) && ui.value.placeholder, props.selectClass)
-    })
-
-    const isLeading = computed(() => {
-      return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
-    })
-
-    const isTrailing = computed(() => {
-      return (props.icon && props.trailing) || (props.loading && props.trailing) || props.trailingIcon
-    })
-
-    const leadingIconName = computed(() => {
-      if (props.loading) {
-        return props.loadingIcon
-      }
-
-      return props.leadingIcon || props.icon
-    })
-
-    const trailingIconName = computed(() => {
-      if (props.loading && !isLeading.value) {
-        return props.loadingIcon
-      }
-
-      return props.trailingIcon || props.icon
-    })
-
-    const leadingWrapperIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.leading.wrapper,
-        ui.value.icon.leading.pointer,
-        ui.value.icon.leading.padding[size.value]
-      )
-    })
-
-    const leadingIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.base,
-        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
-        ui.value.icon.size[size.value],
-        props.loading && ui.value.icon.loading
-      )
-    })
-
-    const trailingWrapperIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.trailing.wrapper,
-        ui.value.icon.trailing.pointer,
-        ui.value.icon.trailing.padding[size.value]
-      )
-    })
-
-    const trailingIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.base,
-        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
-        ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && ui.value.icon.loading
-      )
-    })
-
-    const debouncedSearch = props.searchable && typeof props.searchable === 'function' ? useDebounceFn(props.searchable, props.debounce) : undefined
-
-    const options = computedAsync(async () => {
-      if (debouncedSearch) {
-        return await debouncedSearch(query.value)
-      }
-
-      return props.options || []
-    }, [], {
-      lazy: props.searchableLazy
-    })
-
-    function escapeRegExp(string: string) {
-      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-    }
-
-    function accessor<T extends Record<string, any>>(obj: T, key: string) {
-      return get(obj, key)
-    }
-
-    const filteredOptions = computed(() => {
-      if (!query.value || debouncedSearch) {
-        return options.value
-      }
-
-      const escapedQuery = escapeRegExp(query.value)
-
-      return options.value.filter((option: any) => {
-        return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute: any) => {
-          if (['string', 'number'].includes(typeof option)) {
-            return String(option).search(new RegExp(escapedQuery, 'i')) !== -1
-          }
-
-          const child = get(option, searchAttribute)
-
-          return child !== null && child !== undefined && String(child).search(new RegExp(escapedQuery, 'i')) !== -1
-        })
-      })
-    })
-
-    const createOption = computed(() => {
-      if (query.value === '') {
-        return null
-      }
-      if (props.showCreateOptionWhen === 'empty' && filteredOptions.value.length) {
-        return null
-      }
-      if (props.showCreateOptionWhen === 'always') {
-        const existingOption = filteredOptions.value.find(option => ['string', 'number'].includes(typeof option) ? option === query.value : accessor(option, props.optionAttribute) === query.value)
-        if (existingOption) {
-          return null
-        }
-      }
-      if (typeof props.showCreateOptionWhen === 'function') {
-        if (!props.showCreateOptionWhen(query.value, filteredOptions.value)) {
-          return null
-        }
-      }
-      return ['string', 'number'].includes(typeof props.modelValue) ? query.value : { [props.optionAttribute]: query.value }
-    })
-
-    function clearOnClose() {
-      if (props.clearSearchOnClose) {
-        query.value = ''
-      }
-    }
-
-    watch(container, (value) => {
-      if (value) {
-        emit('open')
-      } else {
-        clearOnClose()
-        emit('close')
-        emitFormBlur()
-      }
-    })
-
-    function onUpdate(value: any) {
-      if (toRaw(props.modelValue) === value) {
-        return
-      }
-
-      emit('update:modelValue', value)
-      emit('change', value)
-      emitFormChange()
-    }
-
-    function onQueryChange(event: any) {
-      query.value = event.target.value
-    }
-
-    provideUseId(() => useId())
-
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      // eslint-disable-next-line vue/no-dupe-keys
-      uiMenu,
-      attrs,
-      // eslint-disable-next-line vue/no-dupe-keys
-      name,
-      inputId,
-      // eslint-disable-next-line vue/no-dupe-keys
-      popper,
-      trigger,
-      container,
-      selected,
-      label,
-      accessor,
-      isLeading,
-      isTrailing,
-      // eslint-disable-next-line vue/no-dupe-keys
-      selectClass,
-      leadingIconName,
-      leadingIconClass,
-      leadingWrapperIconClass,
-      trailingIconName,
-      trailingIconClass,
-      trailingWrapperIconClass,
-      filteredOptions,
-      createOption,
-      // eslint-disable-next-line vue/no-dupe-keys
-      query,
-      onUpdate,
-      onQueryChange
-    }
-  }
-})
-</script>");
+      return string.replace(/[.*+?^${}()|[\]\\]/g, (match) => `\\${match}`);
     }
     function accessor(obj, key) {
       return get(obj, key);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "2.19.0",
+  "version": "2.19.1",
   "packageManager": "pnpm@9.12.3",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",