@nuxt/ui 2.8.1 → 2.10.0

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

@@ -1,6 +1,9 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -22,24 +25,34 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
-    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>>;
+    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>;
     offIconClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     name: {
         type: StringConstructor;
         default: null;
@@ -61,20 +74,26 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    color: string;
-    ui: any;
+    id: string;
+    color: any;
+    ui: Partial<any>;
     name: string;
+    class: any;
     modelValue: boolean;
     disabled: boolean;
     onIcon: string;

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/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/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;