@nuxt/ui 2.9.0 → 2.10.0

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

@@ -0,0 +1,118 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    legend: {
+        type: StringConstructor;
+        default: null;
+    };
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    optionAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): any;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+    uiRadio: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    uiRadio: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    normalizedOptions: import("vue").ComputedRef<any[]>;
+    onUpdate: (value: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    legend: {
+        type: StringConstructor;
+        default: null;
+    };
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    optionAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): any;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+    uiRadio: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    color: any;
+    ui: Partial<any>;
+    options: unknown[];
+    name: string;
+    class: any;
+    legend: string;
+    modelValue: string | number | Record<string, any>;
+    disabled: boolean;
+    optionAttribute: string;
+    valueAttribute: string;
+    uiRadio: Partial<any>;
+}, {}>;
+export default _default;

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

@@ -55,8 +55,8 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: import("vue").ComputedRef<any>;
-    inputId: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
     value: import("vue").WritableComputedRef<number>;
     wrapperClass: import("vue").ComputedRef<string>;
     inputClass: import("vue").ComputedRef<string>;
@@ -131,8 +131,8 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     size: string | number | symbol;
     max: number;
-    inputClass: string;
     min: number;
+    inputClass: string;
     step: number;
 }, {}>;
 export default _default;

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

@@ -100,8 +100,8 @@ declare const _default: import("vue").DefineComponent<{
     attrs: ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: ComputedRef<any>;
-    inputId: ComputedRef<any>;
+    name: ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
     normalizedOptionsWithPlaceholder: ComputedRef<{
         disabled?: boolean | undefined;
         children: {

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

@@ -52,64 +52,67 @@
 
     <div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]">
       <Transition appear v-bind="uiMenu.transition">
-        <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.divide, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
-          <HComboboxInput
-            v-if="searchable"
-            ref="searchInput"
-            :display-value="() => query"
-            name="q"
-            :placeholder="searchablePlaceholder"
-            autofocus
-            autocomplete="off"
-            :class="uiMenu.input"
-            @change="query = $event.target.value"
-          />
-          <component
-            :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
-            v-for="(option, index) in filteredOptions"
-            v-slot="{ active, selected, disabled: optionDisabled }"
-            :key="index"
-            as="template"
-            :value="valueAttribute ? option[valueAttribute] : option"
-            :disabled="option.disabled"
-          >
-            <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
-              <div :class="uiMenu.option.container">
-                <slot name="option" :option="option" :active="active" :selected="selected">
-                  <UIcon v-if="option.icon" :name="option.icon" :class="[uiMenu.option.icon.base, active ? uiMenu.option.icon.active : uiMenu.option.icon.inactive, option.iconClass]" aria-hidden="true" />
-                  <UAvatar
-                    v-else-if="option.avatar"
-                    v-bind="{ size: uiMenu.option.avatar.size, ...option.avatar }"
-                    :class="uiMenu.option.avatar.base"
-                    aria-hidden="true"
-                  />
-                  <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>
-                </slot>
-              </div>
-
-              <span v-if="selected" :class="[uiMenu.option.selectedIcon.wrapper, uiMenu.option.selectedIcon.padding]">
-                <UIcon :name="selectedIcon" :class="uiMenu.option.selectedIcon.base" aria-hidden="true" />
-              </span>
-            </li>
-          </component>
-
-          <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
-            <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="queryOption" :active="active" :selected="selected">
-                  <span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
-                </slot>
-              </div>
-            </li>
+        <div>
+          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(uiMenu.arrow)]" />
+          <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.divide, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
+            <HComboboxInput
+              v-if="searchable"
+              ref="searchInput"
+              :display-value="() => query"
+              name="q"
+              :placeholder="searchablePlaceholder"
+              autofocus
+              autocomplete="off"
+              :class="uiMenu.input"
+              @change="query = $event.target.value"
+            />
+            <component
+              :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
+              v-for="(option, index) in filteredOptions"
+              v-slot="{ active, selected, disabled: optionDisabled }"
+              :key="index"
+              as="template"
+              :value="valueAttribute ? option[valueAttribute] : option"
+              :disabled="option.disabled"
+            >
+              <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
+                <div :class="uiMenu.option.container">
+                  <slot name="option" :option="option" :active="active" :selected="selected">
+                    <UIcon v-if="option.icon" :name="option.icon" :class="[uiMenu.option.icon.base, active ? uiMenu.option.icon.active : uiMenu.option.icon.inactive, option.iconClass]" aria-hidden="true" />
+                    <UAvatar
+                      v-else-if="option.avatar"
+                      v-bind="{ size: uiMenu.option.avatar.size, ...option.avatar }"
+                      :class="uiMenu.option.avatar.base"
+                      aria-hidden="true"
+                    />
+                    <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>
+                  </slot>
+                </div>
+  
+                <span v-if="selected" :class="[uiMenu.option.selectedIcon.wrapper, uiMenu.option.selectedIcon.padding]">
+                  <UIcon :name="selectedIcon" :class="uiMenu.option.selectedIcon.base" aria-hidden="true" />
+                </span>
+              </li>
+            </component>
+  
+            <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
+              <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="queryOption" :active="active" :selected="selected">
+                    <span class="block truncate">Create "{{ queryOption[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 }}".
+              </slot>
+            </p>
           </component>
-          <p v-else-if="searchable && query && !filteredOptions.length" :class="uiMenu.option.empty">
-            <slot name="option-empty" :query="query">
-              No results for "{{ query }}".
-            </slot>
-          </p>
-        </component>
+        </div>
       </Transition>
     </div>
   </component>
@@ -417,6 +420,8 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       name,
       inputId,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       isLeading,

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

@@ -145,8 +145,9 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: import("vue").ComputedRef<any>;
-    inputId: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     isLeading: import("vue").ComputedRef<string | true>;
@@ -164,7 +165,7 @@ declare const _default: import("vue").DefineComponent<{
     } | null>;
     query: import("vue").Ref<string>;
     onUpdate: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "open" | "update:modelValue")[], "change" | "close" | "open" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open")[], "change" | "close" | "update:modelValue" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
         default: string;
@@ -304,10 +305,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
-    onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
 }, {
     id: string;
     icon: string;

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

@@ -66,6 +66,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    autofocusDelay: {
+      type: Number,
+      default: 100
+    },
     resize: {
       type: Boolean,
       default: false
@@ -151,7 +155,7 @@ export default defineComponent({
     onMounted(() => {
       setTimeout(() => {
         autoFocus();
-      }, 100);
+      }, props.autofocusDelay);
     });
     watch(() => props.modelValue, () => {
       nextTick(autoResize);

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

@@ -36,6 +36,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     resize: {
         type: BooleanConstructor;
         default: boolean;
@@ -76,8 +80,8 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: import("vue").ComputedRef<any>;
-    inputId: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
     textarea: import("vue").Ref<HTMLTextAreaElement | null>;
     textareaClass: import("vue").ComputedRef<string>;
     onInput: (event: InputEvent) => void;
@@ -119,6 +123,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     resize: {
         type: BooleanConstructor;
         default: boolean;
@@ -173,6 +181,7 @@ declare const _default: import("vue").DefineComponent<{
     placeholder: string;
     padded: boolean;
     autofocus: boolean;
+    autofocusDelay: number;
     autoresize: boolean;
     textareaClass: string;
 }, {}>;

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

@@ -42,8 +42,8 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: import("vue").ComputedRef<any>;
-    inputId: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
     active: import("vue").WritableComputedRef<boolean>;
     switchClass: import("vue").ComputedRef<string>;
     onIconClass: import("vue").ComputedRef<string>;

package/dist/runtime/components/layout/Divider.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :class="wrapperClass" v-bind="attrs">
+    <div :class="borderClass" />
+
+    <template v-if="label || icon || avatar || $slots.default">
+      <div :class="containerClass">
+        <slot>
+          <span v-if="label" :class="ui.label">
+            {{ label }}
+          </span>
+          <UIcon v-else-if="icon" :name="icon" :class="ui.icon.base" />
+          <UAvatar v-else-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+        </slot>
+      </div>
+
+      <div :class="borderClass" />
+    </template>
+  </div>
+</template>
+
+<script>
+import { toRef, computed, defineComponent } from "vue";
+import { twMerge, twJoin } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import UAvatar from "../elements/Avatar.vue";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { divider } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.divider, divider);
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar
+  },
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    avatar: {
+      type: Object,
+      default: null
+    },
+    orientation: {
+      type: String,
+      default: "horizontal",
+      validator: (value) => ["horizontal", "vertical"].includes(value)
+    },
+    type: {
+      type: String,
+      default: "solid",
+      validator: (value) => ["solid", "dotted", "dashed"].includes(value)
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("divider", toRef(props, "ui"), config);
+    const isHorizontal = computed(() => props.orientation === "horizontal");
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.wrapper.base,
+        isHorizontal.value ? ui.value.wrapper.horizontal : ui.value.wrapper.vertical
+      ), props.class);
+    });
+    const containerClass = computed(() => {
+      return twJoin(
+        ui.value.container.base,
+        isHorizontal.value ? ui.value.container.horizontal : ui.value.container.vertical
+      );
+    });
+    const borderClass = computed(() => {
+      const typeClass = {
+        solid: "border-solid",
+        dotted: "border-dotted",
+        dashed: "border-dashed"
+      }[props.type];
+      return twJoin(
+        ui.value.border.base,
+        isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
+        isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
+        typeClass
+      );
+    });
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      wrapperClass,
+      containerClass,
+      borderClass
+    };
+  }
+});
+</script>

package/dist/runtime/components/layout/Divider.vue.d.ts

@@ -0,0 +1,82 @@
+import type { PropType } from 'vue';
+import type { Avatar } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    avatar: {
+        type: PropType<Avatar>;
+        default: null;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    type: {
+        type: PropType<"solid" | "dotted" | "dashed">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    containerClass: import("vue").ComputedRef<string>;
+    borderClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    avatar: {
+        type: PropType<Avatar>;
+        default: null;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    type: {
+        type: PropType<"solid" | "dotted" | "dashed">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>>, {
+    icon: string;
+    avatar: Avatar;
+    ui: Partial<any>;
+    class: any;
+    label: string;
+    type: "solid" | "dotted" | "dashed";
+    orientation: "horizontal" | "vertical";
+}, {}>;
+export default _default;

package/dist/runtime/components/navigation/CommandPalette.vue

@@ -221,18 +221,25 @@ export default defineComponent({
       }
       for (const key in groupedCommands) {
         const group = props.groups.find((group2) => group2.key === key);
-        const commands2 = groupedCommands[key].slice(0, options.value.resultLimit).map((result) => {
+        let commands2 = groupedCommands[key].map((result) => {
           const { item, ...data } = result;
           return {
             ...item,
             ...data
           };
         });
-        groups2.push({ ...group, commands: commands2 });
+        if (group.filter && typeof group.filter === "function") {
+          commands2 = group.filter(query.value, commands2);
+        }
+        groups2.push({ ...group, commands: commands2.slice(0, options.value.resultLimit) });
       }
       for (const group of props.groups) {
         if (group.search && searchResults.value[group.key]?.length) {
-          groups2.push({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) });
+          let commands2 = searchResults.value[group.key] || [];
+          if (group.filter && typeof group.filter === "function") {
+            commands2 = group.filter(query.value, commands2);
+          }
+          groups2.push({ ...group, commands: commands2.slice(0, options.value.resultLimit) });
         }
       }
       return groups2;

package/dist/runtime/components/navigation/CommandPalette.vue.d.ts

@@ -193,8 +193,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
     icon: string;
     closeButton: Button;