@nuxt/ui 2.8.0 → 2.9.0

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

@@ -17,11 +17,13 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { card } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.card, card);
 export default defineComponent({
   inheritAttrs: false,
   props: {
@@ -29,14 +31,17 @@ export default defineComponent({
       type: String,
       default: "div"
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.card));
+  setup(props) {
+    const { ui, attrs } = useUI("card", toRef(props, "ui"), config);
     const cardClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
@@ -45,12 +50,12 @@ export default defineComponent({
         ui.value.ring,
         ui.value.shadow,
         ui.value.background
-      ), attrs.class);
+      ), props.class);
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       cardClass
     };
   }

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

@@ -1,31 +1,39 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     as: {
         type: StringConstructor;
         default: string;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     cardClass: 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<{
     as: {
         type: StringConstructor;
         default: string;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     as: string;
 }, {}>;
 export default _default;

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

@@ -5,11 +5,13 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { container } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.container, container);
 export default defineComponent({
   inheritAttrs: false,
   props: {
@@ -17,25 +19,28 @@ export default defineComponent({
       type: String,
       default: "div"
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.container));
+  setup(props) {
+    const { ui, attrs } = useUI("container", toRef(props, "ui"), config);
     const containerClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
         ui.value.padding,
         ui.value.constrained
-      ), attrs.class);
+      ), props.class);
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       containerClass
     };
   }

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

@@ -1,31 +1,39 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     as: {
         type: StringConstructor;
         default: string;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     containerClass: 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<{
     as: {
         type: StringConstructor;
         default: string;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     as: string;
 }, {}>;
 export default _default;

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

@@ -3,33 +3,38 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { skeleton } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.skeleton, skeleton);
 export default defineComponent({
   inheritAttrs: false,
   props: {
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.skeleton));
+  setup(props) {
+    const { ui, attrs } = useUI("skeleton", toRef(props, "ui"), config);
     const skeletonClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
         ui.value.background,
         ui.value.rounded
-      ), attrs.class);
+      ), props.class);
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       skeletonClass
     };
   }

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

@@ -1,22 +1,30 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     skeletonClass: 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<{
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
 }, {}>;
 export default _default;

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

@@ -4,7 +4,7 @@
     :model-value="modelValue"
     :multiple="multiple"
     :nullable="nullable"
-    :class="wrapperClass"
+    :class="ui.wrapper"
     v-bind="attrs"
     as="div"
     @update:model-value="onSelect"
@@ -16,17 +16,12 @@
         :value="query"
         :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
         :placeholder="placeholder"
+        :aria-label="placeholder"
         autocomplete="off"
         @change="query = $event.target.value"
       />
 
-      <UButton
-        v-if="closeButton"
-        v-bind="{ ...ui.default.closeButton, ...closeButton }"
-        :class="ui.input.closeButton"
-        aria-label="Close"
-        @click="onClear"
-      />
+      <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" :class="ui.input.closeButton" @click="onClear" />
     </div>
 
     <HComboboxOptions
@@ -67,19 +62,20 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted, defineComponent } from "vue";
+import { ref, computed, watch, toRef, onMounted, defineComponent } from "vue";
 import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions as HComboboxOptions } from "@headlessui/vue";
 import { useDebounceFn } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
-import { twMerge, twJoin } from "tailwind-merge";
-import { groupBy, map, omit } from "lodash-es";
+import { twJoin } from "tailwind-merge";
 import { defu } from "defu";
 import UIcon from "../elements/Icon.vue";
 import UButton from "../elements/Button.vue";
 import CommandPaletteGroup from "./CommandPaletteGroup.vue";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
+import { commandPalette } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.commandPalette, commandPalette);
 export default defineComponent({
   components: {
     HCombobox,
@@ -121,23 +117,23 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.commandPalette.default.icon
+      default: () => config.default.icon
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.commandPalette.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     selectedIcon: {
       type: String,
-      default: () => appConfig.ui.commandPalette.default.selectedIcon
+      default: () => config.default.selectedIcon
     },
     closeButton: {
       type: Object,
-      default: () => appConfig.ui.commandPalette.default.closeButton
+      default: () => config.default.closeButton
     },
     emptyState: {
       type: Object,
-      default: () => appConfig.ui.commandPalette.default.emptyState
+      default: () => config.default.emptyState
     },
     placeholder: {
       type: String,
@@ -167,15 +163,18 @@ export default defineComponent({
       type: Object,
       default: () => ({})
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue", "close"],
-  setup(props, { emit, attrs, expose }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.commandPalette));
+  setup(props, { emit, expose }) {
+    const { ui, attrs } = useUI("commandPalette", toRef(props, "ui"), config, toRef(props, "class"));
     const query = ref("");
     const comboboxInput = ref();
     const comboboxApi = ref(null);
@@ -202,27 +201,42 @@ export default defineComponent({
       resultLimit: 12,
       matchAllWhenSearchEmpty: true
     }));
-    const commands = computed(() => props.groups.filter((group) => !group.search).reduce((acc, group) => {
-      return acc.concat(group.commands.map((command) => ({ ...command, group: group.key })));
-    }, []));
+    const commands = computed(() => {
+      const commands2 = [];
+      for (const group of props.groups) {
+        if (!group.search) {
+          commands2.push(...group.commands.map((command) => ({ ...command, group: group.key })));
+        }
+      }
+      return commands2;
+    });
     const searchResults = ref({});
     const { results } = useFuse(query, commands, options);
-    const groups = computed(() => [
-      ...map(groupBy(results.value, (command) => command.item.group), (results2, key) => {
-        const commands2 = results2.map((result) => {
+    const groups = computed(() => {
+      const groups2 = [];
+      const groupedCommands = {};
+      for (const command of results.value) {
+        groupedCommands[command.item.group] ||= [];
+        groupedCommands[command.item.group].push(command);
+      }
+      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) => {
           const { item, ...data } = result;
           return {
             ...item,
             ...data
           };
         });
-        return {
-          ...props.groups.find((group) => group.key === key),
-          commands: commands2.slice(0, options.value.resultLimit)
-        };
-      }),
-      ...props.groups.filter((group) => !!group.search).map((group) => ({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })).filter((group) => group.commands.length)
-    ]);
+        groups2.push({ ...group, commands: commands2 });
+      }
+      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) });
+        }
+      }
+      return groups2;
+    });
     const debouncedSearch = useDebounceFn(async () => {
       const searchableGroups = props.groups.filter((group) => !!group.search);
       if (!searchableGroups.length) {
@@ -240,7 +254,6 @@ export default defineComponent({
         comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));
       }, 0);
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const iconName = computed(() => {
       if ((props.loading || isLoading.value) && props.loadingIcon) {
         return props.loadingIcon;
@@ -284,14 +297,13 @@ export default defineComponent({
       results
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       // eslint-disable-next-line vue/no-dupe-keys
       groups,
       comboboxInput,
       query,
-      wrapperClass,
       iconName,
       iconClass,
       // eslint-disable-next-line vue/no-dupe-keys

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

@@ -1,11 +1,9 @@
-/// <reference types="lodash" />
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
-import type { Group, Command } from '../../types/command-palette';
-import type { Button } from '../../types/button';
+import type { Group, Command, Button } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
         default: null;
     };
     by: {
@@ -46,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     closeButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     emptyState: {
         type: PropType<{
@@ -84,24 +82,22 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<UseFuseOptions<Command>>;
         default: () => {};
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: ComputedRef<any>;
-    groups: ComputedRef<{
-        commands: any;
-        key: string;
-        active?: string | undefined;
-        inactive?: string | undefined;
-    }[]>;
+    attrs: ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    groups: ComputedRef<Group[]>;
     comboboxInput: import("vue").Ref<ComponentPublicInstance<HTMLInputElement> | undefined>;
     query: import("vue").Ref<string>;
-    wrapperClass: ComputedRef<string>;
     iconName: ComputedRef<string | undefined>;
     iconClass: ComputedRef<string>;
     emptyState: ComputedRef<any>;
@@ -109,7 +105,7 @@ declare const _default: import("vue").DefineComponent<{
     onClear: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
         default: null;
     };
     by: {
@@ -150,7 +146,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     closeButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     emptyState: {
         type: PropType<{
@@ -188,9 +184,13 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<UseFuseOptions<Command>>;
         default: () => {};
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
@@ -198,7 +198,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     icon: string;
     closeButton: Button;
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;

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

@@ -105,7 +105,7 @@ export default defineComponent({
     },
     ui: {
       type: Object,
-      default: () => ({})
+      required: true
     }
   },
   setup(props) {

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Group } from '../../types/command-palette';
+import type { Group } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     group: {
         type: PropType<Group>;
@@ -23,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     ui: {
         type: PropType<any>;
-        default: () => {};
+        required: true;
     };
 }, {
     label: import("vue").ComputedRef<any>;
@@ -54,10 +54,9 @@ declare const _default: import("vue").DefineComponent<{
     };
     ui: {
         type: PropType<any>;
-        default: () => {};
+        required: true;
     };
 }>>, {
-    ui: any;
     query: string;
 }, {}>;
 export default _default;