@nuxt/ui 2.8.1 → 2.10.0

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

@@ -5,12 +5,13 @@
 </template>
 
 <script>
-import { defineComponent, computed } from "vue";
-import { omit } from "lodash-es";
+import { toRef, defineComponent, computed } 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 { kbd } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.kbd, kbd);
 export default defineComponent({
   inheritAttrs: false,
   props: {
@@ -20,19 +21,22 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: () => appConfig.ui.kbd.default.size,
+      default: () => config.default.size,
       validator(value) {
-        return Object.keys(appConfig.ui.kbd.size).includes(value);
+        return Object.keys(config.size).includes(value);
       }
     },
+    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.kbd));
+  setup(props) {
+    const { ui, attrs } = useUI("kbd", toRef(props, "ui"), config);
     const kbdClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
@@ -42,12 +46,12 @@ export default defineComponent({
         ui.value.font,
         ui.value.background,
         ui.value.ring
-      ), attrs.class);
+      ), props.class);
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       kbdClass
     };
   }

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

@@ -1,4 +1,3 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     value: {
@@ -6,19 +5,23 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: StringConstructor;
+        type: PropType<string | number | symbol>;
         default: () => any;
         validator(value: string): boolean;
     };
-    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>>;
     kbdClass: 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<{
     value: {
@@ -26,17 +29,22 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: StringConstructor;
+        type: PropType<string | number | symbol>;
         default: () => any;
         validator(value: string): boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     value: string;
-    size: string;
+    size: string | number | symbol;
 }, {}>;
 export default _default;

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

@@ -1,7 +1,13 @@
 <template>
-  <button v-if="!to" :type="type" :disabled="disabled" v-bind="$attrs" :class="inactiveClass">
+  <component
+    :is="as"
+    v-if="!to"
+    :disabled="disabled"
+    v-bind="$attrs"
+    :class="inactiveClass"
+  >
     <slot />
-  </button>
+  </component>
   <NuxtLink
     v-else
     v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }"
@@ -24,21 +30,25 @@
 </template>
 
 <script>
-import { isEqual } from "lodash-es";
+import { isEqual } from "ohash";
 import { defineComponent } from "vue";
 import { NuxtLink } from "#components";
 export default defineComponent({
   inheritAttrs: false,
   props: {
     ...NuxtLink.props,
-    type: {
+    as: {
       type: String,
-      default: null
+      default: "button"
     },
     disabled: {
       type: Boolean,
       default: null
     },
+    active: {
+      type: Boolean,
+      default: false
+    },
     exact: {
       type: Boolean,
       default: false
@@ -58,6 +68,9 @@ export default defineComponent({
   },
   setup(props) {
     function resolveLinkClass(route, $route, { isActive, isExactActive }) {
+      if (props.active) {
+        return props.activeClass;
+      }
       if (props.exactQuery && !isEqual(route.query, $route.query)) {
         return props.inactiveClass;
       }

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;