@nuxt/ui 2.9.0 → 2.10.0

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

@@ -17,41 +17,44 @@
 
     <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
-        <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">
-              <ULink
-                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" />
+        <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)]" />
+          <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" />
 
-                  <span class="truncate">{{ item.label }}</span>
+                    <span class="truncate">{{ 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>
-              </ULink>
-            </HMenuItem>
-          </div>
-        </HMenuItems>
+                    <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>
+            </div>
+          </HMenuItems>
+        </div>
       </Transition>
     </div>
   </HMenu>
 </template>
 
 <script>
-import { defineComponent, ref, computed, toRef, onMounted } from "vue";
+import { defineComponent, ref, computed, toRef, onMounted, resolveComponent } from "vue";
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from "@headlessui/vue";
 import { defu } from "defu";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import UKbd from "../elements/Kbd.vue";
-import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
 import { mergeConfig, omit } from "../../utils";
@@ -66,8 +69,7 @@ export default defineComponent({
     HMenuItem,
     UIcon,
     UAvatar,
-    UKbd,
-    ULink
+    UKbd
   },
   inheritAttrs: false,
   props: {
@@ -158,16 +160,20 @@ export default defineComponent({
         closeTimeout = null;
       }, props.closeDelay);
     }
+    const NuxtLink = resolveComponent("NuxtLink");
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       containerStyle,
       onMouseOver,
       onMouseLeave,
-      omit
+      omit,
+      NuxtLink
     };
   }
 });

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

@@ -40,6 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     containerStyle: import("vue").ComputedRef<{
@@ -52,6 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseOver: () => void;
     onMouseLeave: () => 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<{
     items: {
         type: PropType<DropdownItem[][]>;

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

@@ -0,0 +1,166 @@
+<template>
+  <div :class="ui.wrapper" v-bind="attrs">
+    <template v-if="indicator || $slots.indicator">
+      <slot name="indicator" v-bind="{ percent, value }">
+        <div :class="indicatorContainerClass" :style="{ width: `${percent}%` }">
+          <div :class="indicatorClass">
+            {{ Math.round(percent) }}%
+          </div>
+        </div>
+      </slot>
+    </template>
+
+    <meter
+      :value="value"
+      :min="normalizedMin"
+      :max="normalizedMax"
+      :class="[meterClass, meterAppearanceClass, meterBarClass]"
+    />
+
+    <template v-if="label || $slots.label">
+      <slot name="label" v-bind="{ percent, value }">
+        <div :class="labelClass">
+          <UIcon v-if="icon" :name="icon" /> {{ label }}
+        </div>
+      </slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent, toRef } from "vue";
+import { twJoin } from "tailwind-merge";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { meter } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.meter, meter);
+export default defineComponent({
+  inheritAttrs: false,
+  slots: Object,
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    indicator: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: () => config.default.size,
+      validator(value) {
+        return Object.keys(config.meter.size).includes(value);
+      }
+    },
+    color: {
+      type: String,
+      default: () => config.default.color,
+      validator(value) {
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
+      }
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("meter", toRef(props, "ui"), config, toRef(props, "class"));
+    function clampPercent(value, min, max) {
+      if (min == max) {
+        return value < min ? 0 : 100;
+      }
+      if (min > max) {
+        max = [min, min = max][0];
+      }
+      const percent2 = (value - min) / (max - min) * 100;
+      return Math.max(0, Math.min(100, percent2));
+    }
+    const indicatorContainerClass = computed(() => {
+      return twJoin(
+        ui.value.indicator.container
+      );
+    });
+    const indicatorClass = computed(() => {
+      return twJoin(
+        ui.value.indicator.text,
+        ui.value.indicator.size[props.size]
+      );
+    });
+    const meterClass = computed(() => {
+      return twJoin(
+        ui.value.meter.base,
+        ui.value.meter.background,
+        ui.value.meter.ring,
+        ui.value.meter.rounded,
+        ui.value.meter.shadow,
+        ui.value.color[props.color] ?? ui.value.meter.color.replaceAll("{color}", props.color),
+        ui.value.meter.size[props.size]
+      );
+    });
+    const meterAppearanceClass = computed(() => {
+      return twJoin(
+        ui.value.meter.appearance.inner,
+        ui.value.meter.appearance.meter,
+        ui.value.meter.appearance.bar,
+        ui.value.meter.appearance.value
+      );
+    });
+    const meterBarClass = computed(() => {
+      return twJoin(
+        ui.value.meter.bar.transition,
+        ui.value.meter.bar.ring,
+        ui.value.meter.bar.rounded,
+        ui.value.meter.bar.size[props.size]
+      );
+    });
+    const labelClass = computed(() => {
+      return twJoin(
+        ui.value.label.base,
+        ui.value.label.text,
+        ui.value.color[props.color] ?? ui.value.label.color.replaceAll("{color}", props.color),
+        ui.value.label.size[props.size]
+      );
+    });
+    const normalizedMin = computed(() => props.min > props.max ? props.max : props.min);
+    const normalizedMax = computed(() => props.max < props.min ? props.min : props.max);
+    const percent = computed(() => clampPercent(Number(props.value), normalizedMin.value, normalizedMax.value));
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      indicatorContainerClass,
+      indicatorClass,
+      meterClass,
+      meterAppearanceClass,
+      meterBarClass,
+      labelClass,
+      normalizedMin,
+      normalizedMax,
+      percent
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,123 @@
+import type { SlotsType, PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    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>>;
+    indicatorContainerClass: import("vue").ComputedRef<string>;
+    indicatorClass: import("vue").ComputedRef<string>;
+    meterClass: import("vue").ComputedRef<string>;
+    meterAppearanceClass: import("vue").ComputedRef<string>;
+    meterBarClass: import("vue").ComputedRef<string>;
+    labelClass: import("vue").ComputedRef<string>;
+    normalizedMin: import("vue").ComputedRef<number>;
+    normalizedMax: import("vue").ComputedRef<number>;
+    percent: import("vue").ComputedRef<number>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>>, {
+    icon: string;
+    color: any;
+    ui: Partial<any>;
+    class: any;
+    value: number;
+    label: string;
+    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    max: number;
+    min: number;
+    indicator: boolean;
+}, SlotsType<{
+    indicator?: {
+        percent: number;
+        value: number;
+    } | undefined;
+    label?: {
+        percent: number;
+        value: number;
+    } | undefined;
+}>>;
+export default _default;

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

@@ -0,0 +1,78 @@
+import type { VNode, SlotsType, PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, () => 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<{
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    indicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>>, {
+    icon: string;
+    ui: Partial<any>;
+    class: any;
+    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    max: number;
+    min: number;
+    indicator: boolean;
+}, SlotsType<{
+    default?: any[] | undefined;
+    indicator?: {
+        percent: number;
+    } | undefined;
+}>>;
+export default _default;

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

@@ -0,0 +1,172 @@
+import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
+import { twJoin } from "tailwind-merge";
+import UIcon from "./Icon.vue";
+import { useUI } from "../../composables/useUI.mjs";
+import { mergeConfig, getSlotsChildren } from "../../utils/index.mjs";
+import appConfig from "#build/app.config";
+import { meter, meterGroup } from "#ui/ui.config";
+const meterConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.meter, meter);
+const meterGroupConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.meterGroup, meterGroup);
+export default defineComponent({
+  components: {
+    UIcon
+  },
+  inheritAttrs: false,
+  slots: Object,
+  props: {
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    size: {
+      type: String,
+      default: () => meterConfig.default.size,
+      validator(value) {
+        return Object.keys(meterConfig.meter.bar.size).includes(value);
+      }
+    },
+    indicator: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: "i-heroicons-minus"
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const { ui, attrs } = useUI("meterGroup", toRef(props, "ui"), meterGroupConfig);
+    const { ui: uiMeter } = useUI("meter", void 0, meterConfig);
+    if (!slots.default) {
+      throw new Error("Meter Group has no Meter children.");
+    }
+    const normalizedMin = computed(() => props.min > props.max ? props.max : props.min);
+    const normalizedMax = computed(() => props.max < props.min ? props.min : props.max);
+    const children = computed(() => getSlotsChildren(slots));
+    const rounded = computed(() => {
+      const roundedMap = {
+        "rounded-none": { left: "rounded-s-none", right: "rounded-e-none" },
+        "rounded-sm": { left: "rounded-s-sm", right: "rounded-e-sm" },
+        rounded: { left: "rounded-s", right: "rounded-e" },
+        "rounded-md": { left: "rounded-s-md", right: "rounded-e-md" },
+        "rounded-lg": { left: "rounded-s-lg", right: "rounded-e-lg" },
+        "rounded-xl": { left: "rounded-s-xl", right: "rounded-e-xl" },
+        "rounded-2xl": { left: "rounded-s-2xl", right: "rounded-e-2xl" },
+        "rounded-3xl": { left: "rounded-s-3xl", right: "rounded-e-3xl" },
+        "rounded-full": { left: "rounded-s-full", right: "rounded-e-full" }
+      };
+      return roundedMap[ui.value.rounded];
+    });
+    function clampPercent(value, min, max) {
+      if (min == max) {
+        return value < min ? 0 : 100;
+      }
+      if (min > max) {
+        max = [min, min = max][0];
+      }
+      const percent2 = (value - min) / (max - min) * 100;
+      return Math.max(0, Math.min(100, percent2));
+    }
+    const labels = computed(() => {
+      return children.value.map((node) => node.props.label);
+    });
+    const percents = computed(() => {
+      return children.value.map((node) => clampPercent(node.props.value, props.min, props.max));
+    });
+    const percent = computed(() => {
+      return Math.max(0, Math.max(percents.value.reduce((prev, percent2) => prev + percent2, 0)));
+    });
+    const clones = computed(() => children.value.map((node, index) => {
+      const vProps = {};
+      vProps.style = { width: `${percents.value[index]}%` };
+      vProps.size = props.size;
+      vProps.min = normalizedMin.value;
+      vProps.max = normalizedMax.value;
+      vProps.ui = node.props?.ui || {};
+      vProps.ui.wrapper = node.props?.ui?.wrapper || "";
+      vProps.ui.wrapper += [
+        node.props?.ui?.wrapper,
+        props.ui?.meter?.background || ui.value.background,
+        ui.value.transition
+      ].filter(Boolean).join(" ");
+      vProps.ui.meter = node.props?.ui?.meter || {};
+      vProps.ui.meter.background = `bg-${node.props.color}-500 dark:bg-${node.props.color}-400`;
+      vProps.ui.meter.rounded = "rounded-none";
+      vProps.ui.meter.bar = node.props?.ui?.meter?.bar || {};
+      if (index === 0) {
+        vProps.ui.meter.rounded = `${rounded.value.left} rounded-e-none`;
+      }
+      if (index === children.value.length - 1) {
+        vProps.ui.meter.rounded = `${rounded.value.right} rounded-s-none`;
+      }
+      labels.value[index] = node.props.label;
+      const clone = cloneVNode(node, vProps);
+      delete clone.children?.label;
+      delete clone.props.indicator;
+      delete clone.props.label;
+      return clone;
+    }));
+    const baseClass = computed(() => {
+      return twJoin(
+        ui.value.base,
+        ui.value.background,
+        ui.value.rounded,
+        ui.value.shadow,
+        uiMeter.value.meter.size[props.size]
+      );
+    });
+    const indicatorContainerClass = computed(() => {
+      return twJoin(
+        uiMeter.value.indicator.container
+      );
+    });
+    const indicatorClass = computed(() => {
+      return twJoin(
+        uiMeter.value.indicator.text,
+        uiMeter.value.indicator.size[props.size]
+      );
+    });
+    const vNodeChildren = computed(() => {
+      const vNodeSlots = [
+        void 0,
+        h("div", { class: baseClass.value }, clones.value),
+        void 0
+      ];
+      if (props.indicator) {
+        vNodeSlots[0] = h("div", { class: indicatorContainerClass.value }, [
+          h("div", { class: indicatorClass.value, style: { width: `${percent.value}%` } }, Math.round(percent.value) + "%")
+        ]);
+      } else if (slots.indicator) {
+        vNodeSlots[0] = slots.indicator({ percent: percent.value });
+      }
+      vNodeSlots[2] = h("ol", { class: "list-disc list-inside" }, labels.value.map((label, key) => {
+        const labelClass = computed(() => {
+          return twJoin(
+            uiMeter.value.label.base,
+            uiMeter.value.label.text,
+            uiMeter.value.color[clones.value[key]?.props.color] ?? uiMeter.value.label.color.replaceAll("{color}", clones.value[key]?.props.color ?? uiMeter.value.default.color),
+            uiMeter.value.label.size[props.size]
+          );
+        });
+        return h("li", { class: labelClass.value }, [
+          h(UIcon, { name: clones.value[key]?.props.icon ?? props.icon }),
+          `${label} (${Math.round(percents.value[key])}%)`
+        ]);
+      }));
+      return vNodeSlots;
+    });
+    return () => h("div", { class: ui.value.wrapper, ...attrs.value }, vNodeChildren.value);
+  }
+});