@nuxt/ui 2.10.0 → 2.11.1

package/dist/runtime/components/elements/Button.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ButtonVariant } from '../../types';
+import type { ButtonSize, ButtonVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     type: {
         type: StringConstructor;
@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -74,13 +74,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
+    ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
@@ -118,7 +119,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -166,24 +167,24 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
+    size: ButtonSize;
+    ui: any;
     truncate: boolean;
     icon: string;
     color: any;
-    ui: Partial<any>;
+    type: string;
     class: any;
     label: string;
     loading: boolean;
-    type: string;
     disabled: boolean;
     variant: ButtonVariant;
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl";
     block: boolean;
     padded: boolean;
     loadingIcon: string;

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

@@ -1,7 +1,8 @@
 import type { PropType } from 'vue';
+import type { ButtonSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -12,17 +13,17 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -33,16 +34,16 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
-    class: any;
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl";
     orientation: "horizontal" | "vertical";
+    size: ButtonSize;
+    ui: any;
+    class: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/ButtonGroup.mjs

@@ -1,12 +1,14 @@
-import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
+import { h, computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI.mjs";
 import { mergeConfig, getSlotsChildren } from "../../utils/index.mjs";
+import { useProvideButtonGroup } from "../../composables/useButtonGroup.mjs";
 import appConfig from "#build/app.config";
 import { button, buttonGroup } from "#ui/ui.config";
 const buttonConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
 const buttonGroupConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.buttonGroup, buttonGroup);
 export default defineComponent({
+  name: "ButtonGroup",
   inheritAttrs: false,
   props: {
     size: {
@@ -25,46 +27,16 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props, { slots }) {
     const { ui, attrs } = useUI("buttonGroup", toRef(props, "ui"), buttonGroupConfig);
     const children = computed(() => getSlotsChildren(slots));
-    const rounded = computed(() => {
-      const roundedMap = {
-        "rounded-none": { horizontal: { left: "rounded-s-none", right: "rounded-e-none" }, vertical: { top: "rounded-t-none", bottom: "rounded-b-none" } },
-        "rounded-sm": { horizontal: { left: "rounded-s-sm", right: "rounded-e-sm" }, vertical: { top: "rounded-t-sm", bottom: "rounded-b-sm" } },
-        rounded: { horizontal: { left: "rounded-s", right: "rounded-e" }, vertical: { top: "rounded-t", bottom: "rounded-b" } },
-        "rounded-md": { horizontal: { left: "rounded-s-md", right: "rounded-e-md" }, vertical: { top: "rounded-t-md", bottom: "rounded-b-md" } },
-        "rounded-lg": { horizontal: { left: "rounded-s-lg", right: "rounded-e-lg" }, vertical: { top: "rounded-t-lg", bottom: "rounded-b-lg" } },
-        "rounded-xl": { horizontal: { left: "rounded-s-xl", right: "rounded-e-xl" }, vertical: { top: "rounded-t-xl", bottom: "rounded-b-xl" } },
-        "rounded-2xl": { horizontal: { left: "rounded-s-2xl", right: "rounded-e-2xl" }, vertical: { top: "rounded-t-2xl", bottom: "rounded-b-2xl" } },
-        "rounded-3xl": { horizontal: { left: "rounded-s-3xl", right: "rounded-e-3xl" }, vertical: { top: "rounded-t-3xl", bottom: "rounded-b-3xl" } },
-        "rounded-full": { horizontal: { left: "rounded-s-full", right: "rounded-e-full" }, vertical: { top: "rounded-t-full", bottom: "rounded-b-full" } }
-      };
-      return roundedMap[ui.value.rounded][props.orientation];
-    });
-    const clones = computed(() => children.value.map((node, index) => {
-      const vProps = {};
-      if (props.size) {
-        vProps.size = props.size;
-      }
-      vProps.ui = node.props?.ui || {};
-      vProps.ui.rounded = "rounded-none";
-      vProps.ui.base = "!shadow-none";
-      if (index === 0) {
-        vProps.ui.rounded += ` ${rounded.value.left || rounded.value.top}`;
-      }
-      if (index === children.value.length - 1) {
-        vProps.ui.rounded += ` ${rounded.value.right || rounded.value.bottom}`;
-      }
-      return cloneVNode(node, vProps);
-    }));
     const wrapperClass = computed(() => {
       return twMerge(twJoin(
         ui.value.wrapper[props.orientation],
@@ -72,6 +44,8 @@ export default defineComponent({
         ui.value.shadow
       ), props.class);
     });
-    return () => h("div", { class: wrapperClass.value, ...attrs.value }, clones.value);
+    const rounded = computed(() => ui.value.orientation[ui.value.rounded][props.orientation]);
+    useProvideButtonGroup({ orientation: toRef(props, "orientation"), size: toRef(props, "size"), ui, rounded });
+    return () => h("div", { class: wrapperClass.value, ...attrs.value }, children.value);
   }
 });

package/dist/runtime/components/elements/Chip.vue

@@ -0,0 +1,85 @@
+<template>
+  <div :class="ui.wrapper" v-bind="attrs">
+    <slot />
+
+    <span v-if="show" :class="chipClass">
+      <slot name="content">
+        {{ text }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed, toRef } from "vue";
+import { twJoin } from "tailwind-merge";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { chip } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.chip, chip);
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: () => config.default.size,
+      validator(value) {
+        return Object.keys(config.size).includes(value);
+      }
+    },
+    color: {
+      type: String,
+      default: () => config.default.color,
+      validator(value) {
+        return ["gray", ...appConfig.ui.colors].includes(value);
+      }
+    },
+    position: {
+      type: String,
+      default: () => config.default.position,
+      validator(value) {
+        return Object.keys(config.position).includes(value);
+      }
+    },
+    text: {
+      type: [String, Number],
+      default: null
+    },
+    inset: {
+      type: Boolean,
+      default: () => config.default.inset
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    class: {
+      type: [String, Object, Array],
+      default: () => ""
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("chip", toRef(props, "ui"), config, toRef(props, "class"));
+    const chipClass = computed(() => {
+      return twJoin(
+        ui.value.base,
+        ui.value.size[props.size],
+        ui.value.position[props.position],
+        props.inset ? null : ui.value.translate[props.position],
+        ui.value.background.replaceAll("{color}", props.color)
+      );
+    });
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      chipClass
+    };
+  }
+});
+</script>

package/dist/runtime/components/elements/Chip.vue.d.ts

@@ -0,0 +1,90 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    position: {
+        type: PropType<"top-right" | "bottom-right" | "top-left" | "bottom-left">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    text: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inset: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<any>;
+        default: () => "";
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    chipClass: 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<{
+    size: {
+        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    position: {
+        type: PropType<"top-right" | "bottom-right" | "top-left" | "bottom-left">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    text: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inset: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<any>;
+        default: () => "";
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
+    ui: any;
+    color: any;
+    class: any;
+    text: string | number;
+    position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
+    inset: boolean;
+    show: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/components/elements/Dropdown.vue

@@ -4,7 +4,7 @@
       ref="trigger"
       as="div"
       :disabled="disabled"
-      class="inline-flex w-full"
+      :class="ui.trigger"
       role="button"
       @mouseover="onMouseOver"
     >
@@ -18,28 +18,32 @@
     <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
           <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
             <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
-              <HMenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
-                <component
-                  :is="!!item.to ? NuxtLink : 'button'"
-                  v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])"
-                  :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
-                  @click="item.click"
-                >
-                  <slot :name="item.slot || 'item'" :item="item">
-                    <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
-                    <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
+              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
+                <HMenuItem v-slot="{ active, disabled: itemDisabled, close }" :disabled="item.disabled">
+                  <component
+                    :is="!!href ? 'a' : 'button'"
+                    :href="!itemDisabled ? href : undefined"
+                    :rel="rel"
+                    :target="target"
+                    :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
+                    @click="onClick($event, item, { href, navigate, close, isExternal })"
+                  >
+                    <slot :name="item.slot || 'item'" :item="item">
+                      <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
+                      <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
-                    <span class="truncate">{{ item.label }}</span>
+                      <span :class="ui.item.label">{{ item.label }}</span>
 
-                    <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
-                      <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
-                    </span>
-                  </slot>
-                </component>
-              </HMenuItem>
+                      <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
+                        <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
+                      </span>
+                    </slot>
+                  </component>
+                </HMenuItem>
+              </NuxtLink>
             </div>
           </HMenuItems>
         </div>
@@ -100,11 +104,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {
@@ -160,6 +164,15 @@ export default defineComponent({
         closeTimeout = null;
       }, props.closeDelay);
     }
+    function onClick(e, item, { href, navigate, close, isExternal }) {
+      if (item.click) {
+        item.click(e);
+      }
+      if (href && !isExternal) {
+        navigate(e);
+        close();
+      }
+    }
     const NuxtLink = resolveComponent("NuxtLink");
     return {
       // eslint-disable-next-line vue/no-dupe-keys
@@ -172,6 +185,7 @@ export default defineComponent({
       containerStyle,
       onMouseOver,
       onMouseLeave,
+      onClick,
       omit,
       NuxtLink
     };

package/dist/runtime/components/elements/Dropdown.vue.d.ts

@@ -29,11 +29,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -52,6 +52,12 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
+    onClick: (e: any, item: any, { href, navigate, close, isExternal }: {
+        href: any;
+        navigate: any;
+        close: any;
+        isExternal: any;
+    }) => void;
     omit: typeof omit;
     NuxtLink: string | import("vue").ConcreteComponent<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -82,14 +88,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     popper: PopperOptions;
     class: any;
     disabled: boolean;

package/dist/runtime/components/elements/Icon.vue

@@ -1,15 +1,29 @@
 <template>
-  <span :class="name" />
+  <Icon v-if="dynamic" :name="name" />
+  <span v-else :class="name" />
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
+import { useAppConfig } from "#imports";
 export default defineComponent({
   props: {
     name: {
       type: String,
       required: true
+    },
+    dynamic: {
+      type: Boolean,
+      default: false
     }
+  },
+  setup(props) {
+    const appConfig = useAppConfig();
+    const dynamic = computed(() => props.dynamic || appConfig.ui?.icons?.dynamic);
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      dynamic
+    };
   }
 });
 </script>

package/dist/runtime/components/elements/Icon.vue.d.ts

@@ -3,10 +3,22 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dynamic: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    dynamic: import("vue").ComputedRef<any>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}, {}>;
+    dynamic: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    dynamic: boolean;
+}, {}>;
 export default _default;

package/dist/runtime/components/elements/Kbd.vue

@@ -28,11 +28,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

package/dist/runtime/components/elements/Kbd.vue.d.ts

@@ -1,21 +1,22 @@
 import type { PropType } from 'vue';
+import type { KbdSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     value: {
         type: StringConstructor;
         default: null;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<KbdSize>;
         default: () => any;
         validator(value: string): boolean;
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -29,22 +30,22 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<KbdSize>;
         default: () => any;
         validator(value: string): boolean;
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
-    class: any;
+    size: KbdSize;
+    ui: any;
     value: string;
-    size: string | number | symbol;
+    class: any;
 }, {}>;
 export default _default;