@nuxt/ui 2.18.6 → 2.19.0

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

@@ -86,7 +86,7 @@
                     />
                     <span v-else-if="option.chip" :class="uiMenu.option.chip.base" :style="{ background: `#${option.chip}` }" />
 
-                    <span class="truncate">{{ ['string', 'number'].includes(typeof option) ? option : option[optionAttribute] }}</span>
+                    <span class="truncate">{{ ['string', 'number'].includes(typeof option) ? option : accessor(option, optionAttribute) }}</span>
                   </slot>
                 </div>
 
@@ -100,19 +100,19 @@
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
                 <div :class="uiMenu.option.container">
                   <slot name="option-create" :option="createOption" :active="active" :selected="optionSelected">
-                    <span :class="uiMenu.option.create">Create "{{ createOption[optionAttribute] }}"</span>
+                    <span :class="uiMenu.option.create">Create "{{ typeof createOption === 'string' ? createOption : accessor(createOption, optionAttribute) }}"</span>
                   </slot>
                 </div>
               </li>
             </component>
             <p v-else-if="searchable && query && !filteredOptions?.length" :class="uiMenu.option.empty">
               <slot name="option-empty" :query="query">
-                No results for "{{ query }}".
+                {{ uiMenu.default.optionEmpty.label.replace('{query}', query) }}
               </slot>
             </p>
             <p v-else-if="!filteredOptions?.length" :class="uiMenu.empty">
               <slot name="empty" :query="query">
-                No options.
+                {{ uiMenu.default.empty.label }}
               </slot>
             </p>
           </component>
@@ -123,7 +123,7 @@
 </template>
 
 <script>
-import { ref, computed, toRef, watch, defineComponent } from "vue";
+import { ref, computed, toRef, watch, defineComponent, toRaw } from "vue";
 import {
   Combobox as HCombobox,
   ComboboxButton as HComboboxButton,
@@ -241,7 +241,7 @@ export default defineComponent({
     },
     searchablePlaceholder: {
       type: String,
-      default: "Search..."
+      default: () => configMenu.default.searchablePlaceholder.label
     },
     searchableLazy: {
       type: Boolean,
@@ -374,9 +374,9 @@ export default defineComponent({
         }
       } else if (props.modelValue !== void 0 && props.modelValue !== null) {
         if (props.valueAttribute) {
-          return selected.value?.[props.optionAttribute] ?? null;
+          return accessor(selected.value, props.optionAttribute) ?? null;
         } else {
-          return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute];
+          return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue, props.optionAttribute);
         }
       }
       return null;
@@ -452,17 +452,503 @@ 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>");
+    }
+    function accessor(obj, key) {
+      return get(obj, key);
+    }
     const filteredOptions = computed(() => {
       if (!query.value || debouncedSearch) {
         return options.value;
       }
+      const escapedQuery = escapeRegExp(query.value);
       return options.value.filter((option) => {
         return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute) => {
           if (["string", "number"].includes(typeof option)) {
-            return String(option).search(new RegExp(query.value, "i")) !== -1;
+            return String(option).search(new RegExp(escapedQuery, "i")) !== -1;
           }
           const child = get(option, searchAttribute);
-          return child !== null && child !== void 0 && String(child).search(new RegExp(query.value, "i")) !== -1;
+          return child !== null && child !== void 0 && String(child).search(new RegExp(escapedQuery, "i")) !== -1;
         });
       });
     });
@@ -474,7 +960,7 @@ export default defineComponent({
         return null;
       }
       if (props.showCreateOptionWhen === "always") {
-        const existingOption = filteredOptions.value.find((option) => ["string", "number"].includes(typeof option) ? option === query.value : option[props.optionAttribute] === query.value);
+        const existingOption = filteredOptions.value.find((option) => ["string", "number"].includes(typeof option) ? option === query.value : accessor(option, props.optionAttribute) === query.value);
         if (existingOption) {
           return null;
         }
@@ -501,6 +987,9 @@ export default defineComponent({
       }
     });
     function onUpdate(value) {
+      if (toRaw(props.modelValue) === value) {
+        return;
+      }
       emit("update:modelValue", value);
       emit("change", value);
       emitFormChange();
@@ -524,6 +1013,7 @@ export default defineComponent({
       container,
       selected,
       label,
+      accessor,
       isLeading,
       isTrailing,
       // eslint-disable-next-line vue/no-dupe-keys

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

@@ -158,6 +158,15 @@ declare const configMenu: {
         selectedIcon: string;
         clearSearchOnClose: boolean;
         showCreateOptionWhen: string;
+        searchablePlaceholder: {
+            label: string;
+        };
+        empty: {
+            label: string;
+        };
+        optionEmpty: {
+            label: string;
+        };
     };
     arrow: {
         ring: string;
@@ -181,7 +190,7 @@ declare const configMenu: {
 };
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: PropType<string | number | object | Array<any> | boolean | null>;
         default: string;
     };
     query: {
@@ -257,7 +266,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     searchablePlaceholder: {
         type: StringConstructor;
-        default: string;
+        default: () => string;
     };
     searchableLazy: {
         type: BooleanConstructor;
@@ -497,6 +506,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             selectedIcon: string;
             clearSearchOnClose: boolean;
             showCreateOptionWhen: string;
+            searchablePlaceholder: {
+                label: string;
+            };
+            empty: {
+                label: string;
+            };
+            optionEmpty: {
+                label: string;
+            };
         };
         arrow: {
             ring: string;
@@ -528,6 +546,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     container: import("vue").Ref<import("@vueuse/core").MaybeElement, import("@vueuse/core").MaybeElement>;
     selected: import("vue").ComputedRef<any>;
     label: import("vue").ComputedRef<any>;
+    accessor: <T extends Record<string, any>>(obj: T, key: string) => any;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true>;
     selectClass: import("vue").ComputedRef<string>;
@@ -546,7 +565,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onQueryChange: (event: any) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
+        type: PropType<string | number | object | Array<any> | boolean | null>;
         default: string;
     };
     query: {
@@ -622,7 +641,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     searchablePlaceholder: {
         type: StringConstructor;
-        default: string;
+        default: () => string;
     };
     searchableLazy: {
         type: BooleanConstructor;
@@ -840,7 +859,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         [key: string]: any;
         disabled?: boolean;
     }[];
-    modelValue: string | number | boolean | Record<string, any> | unknown[];
+    modelValue: string | number | boolean | object | any[];
     loading: boolean;
     padded: boolean;
     loadingIcon: string;
@@ -903,6 +922,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             selectedIcon: string;
             clearSearchOnClose: boolean;
             showCreateOptionWhen: string;
+            searchablePlaceholder: {
+                label: string;
+            };
+            empty: {
+                label: string;
+            };
+            optionEmpty: {
+                label: string;
+            };
         }, any>;
         arrow?: DeepPartial<{
             ring: string;