@nuxt/ui 2.9.0 → 2.11.0

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;
+    };
+}>>, {
+    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    ui: Partial<any>;
+    value: number;
+    icon: string;
+    color: any;
+    class: any;
+    label: string;
+    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;
+    };
+}>>, {
+    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    ui: Partial<any>;
+    icon: string;
+    class: any;
+    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);
+  }
+});

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

@@ -0,0 +1,284 @@
+<template>
+  <div :class="ui.wrapper" v-bind="attrs">
+    <slot v-if="indicator || $slots.indicator" name="indicator" v-bind="{ percent }">
+      <div v-if="!isSteps" :class="indicatorContainerClass" :style="{ width: `${percent}%` }">
+        <div :class="indicatorClass">
+          {{ Math.round(percent) }}%
+        </div>
+      </div>
+    </slot>
+
+    <progress :class="progressClass" v-bind="{ value, max: realMax }">
+      {{ Math.round(percent) }}%
+    </progress>
+
+    <div v-if="isSteps" :class="stepsClass">
+      <div v-for="(step, index) in max" :key="index" :class="stepClasses(index)">
+        <slot :name="`step-${index}`" v-bind="{ step }">
+          {{ step }}
+        </slot>
+      </div>
+    </div>
+  </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 { progress } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.progress, progress);
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [Number, null, void 0],
+      default: null
+    },
+    max: {
+      type: [Number, Array],
+      default: 100
+    },
+    indicator: {
+      type: Boolean,
+      default: false
+    },
+    animation: {
+      type: String,
+      default: () => config.default.animation,
+      validator(value) {
+        return Object.keys(config.animation).includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: () => config.default.size,
+      validator(value) {
+        return Object.keys(config.progress.size).includes(value);
+      }
+    },
+    color: {
+      type: String,
+      default: () => config.default.color,
+      validator(value) {
+        return appConfig.ui.colors.includes(value);
+      }
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("progress", toRef(props, "ui"), config, toRef(props, "class"));
+    const indicatorContainerClass = computed(() => {
+      return twJoin(
+        ui.value.indicator.container.base,
+        ui.value.indicator.container.width,
+        ui.value.indicator.container.transition
+      );
+    });
+    const indicatorClass = computed(() => {
+      return twJoin(
+        ui.value.indicator.align,
+        ui.value.indicator.width,
+        ui.value.indicator.color,
+        ui.value.indicator.size[props.size]
+      );
+    });
+    const progressClass = computed(() => {
+      const classes = [
+        ui.value.progress.base,
+        ui.value.progress.width,
+        ui.value.progress.size[props.size],
+        ui.value.progress.rounded,
+        ui.value.progress.track,
+        ui.value.progress.bar,
+        // Intermediate class to allow thumb ring or background color (set to `current`) as it's impossible to safelist with arbitrary values
+        ui.value.progress.color?.replaceAll("{color}", props.color),
+        ui.value.progress.background,
+        ui.value.progress.indeterminate.base,
+        ui.value.progress.indeterminate.rounded
+      ];
+      if (isIndeterminate.value) {
+        classes.push(ui.value.animation[props.animation]);
+      }
+      return twJoin(...classes);
+    });
+    const stepsClass = computed(() => {
+      return twJoin(
+        ui.value.steps.base,
+        ui.value.steps.color?.replaceAll("{color}", props.color),
+        ui.value.steps.size[props.size]
+      );
+    });
+    const stepClass = computed(() => {
+      return twJoin(
+        ui.value.step.base,
+        ui.value.step.align
+      );
+    });
+    const stepActiveClass = computed(() => {
+      return twJoin(
+        ui.value.step.active
+      );
+    });
+    const stepFirstClass = computed(() => {
+      return twJoin(
+        ui.value.step.first
+      );
+    });
+    function isActive(index) {
+      return index === Number(props.value);
+    }
+    function isFirst(index) {
+      return index === 0;
+    }
+    function stepClasses(index) {
+      index = Number(index);
+      const classes = [stepClass.value];
+      if (isFirst(index)) {
+        classes.push(stepFirstClass.value);
+      }
+      if (isActive(index)) {
+        classes.push(stepActiveClass.value);
+      }
+      return classes.join(" ");
+    }
+    const isIndeterminate = computed(() => [void 0, null].includes(props.value));
+    const isSteps = computed(() => Array.isArray(props.max));
+    const realMax = computed(() => {
+      if (isIndeterminate.value) {
+        return null;
+      }
+      if (Array.isArray(props.max)) {
+        return props.max.length - 1;
+      }
+      return Number(props.max);
+    });
+    const percent = computed(() => {
+      switch (true) {
+        case props.value < 0:
+          return 0;
+        case props.value > realMax.value:
+          return 100;
+        default:
+          return props.value / realMax.value * 100;
+      }
+    });
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      indicatorContainerClass,
+      indicatorClass,
+      progressClass,
+      stepsClass,
+      stepClasses,
+      isIndeterminate,
+      isSteps,
+      realMax,
+      percent
+    };
+  }
+});
+</script>
+
+<style scoped>
+/** These styles are required to animate the bar */
+progress:indeterminate {
+  @apply relative;
+
+  &:after {
+    @apply content-[''];
+    @apply absolute inset-0;
+    @apply bg-current;
+  }
+
+  &::-webkit-progress-value {
+    @apply bg-current;
+  }
+
+  &::-moz-progress-bar {
+    @apply bg-current;
+  }
+
+  &.bar-animation-carousel {
+    &:after {
+      animation: carousel 2s ease-in-out infinite;
+    }
+    &::-webkit-progress-value {
+      animation: carousel 2s ease-in-out infinite;
+    }
+    &::-moz-progress-bar {
+      animation: carousel 2s ease-in-out infinite;
+    }
+  }
+
+  &.bar-animation-carousel-inverse {
+    &:after {
+      animation: carousel-inverse 2s ease-in-out infinite;
+    }
+    &::-webkit-progress-value {
+      animation: carousel-inverse 2s ease-in-out infinite;
+    }
+    &::-moz-progress-bar {
+      animation: carousel-inverse 2s ease-in-out infinite;
+    }
+  }
+
+  &.bar-animation-swing {
+    &:after {
+      animation: swing 3s ease-in-out infinite;
+    }
+    &::-webkit-progress-value {
+      animation: swing 3s ease-in-out infinite;
+    }
+    &::-moz-progress-bar {
+      animation: swing 3s ease-in-out infinite;
+    }
+  }
+
+  &.bar-animation-elastic {
+    &::after {
+      animation: elastic 3s ease-in-out infinite;
+    }
+    &::-webkit-progress-value {
+      animation: elastic 3s ease-in-out infinite;
+    }
+    &::-moz-progress-bar {
+      animation: elastic 3s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes carousel {
+  0%, 100% { width: 50% }
+  0% { transform: translateX(-100%) }
+  100% { transform: translateX(200%) }
+}
+
+@keyframes carousel-inverse {
+  0%, 100% { width: 50% }
+  0% { transform: translateX(200%) }
+  100% { transform: translateX(-100%) }
+}
+
+@keyframes swing {
+  0%, 100% { width: 50% }
+  0%, 100% { transform: translateX(-25%) }
+  50% { transform: translateX(125%) }
+}
+
+@keyframes elastic {
+  /* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
+  0%, 100% { width: 50%; margin-left: 25%; }
+  50% { width: 90%; margin-left: 5% }
+}
+</style>

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

@@ -0,0 +1,2 @@
+declare const _default: (props: Record<string, any> & {}) => any;
+export default _default;

package/dist/runtime/components/forms/Checkbox.vue

@@ -17,7 +17,7 @@
         @change="onChange"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 text-sm">
+    <div v-if="label || $slots.label" class="ms-3 flex flex-col">
       <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
@@ -35,7 +35,6 @@ import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig } from "../../utils";
-import { uid } from "../../utils/uid";
 import appConfig from "#build/app.config";
 import { checkbox } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox);
@@ -44,8 +43,7 @@ export default defineComponent({
   props: {
     id: {
       type: String,
-      // A default value is needed here to bind the label
-      default: () => uid()
+      default: () => null
     },
     value: {
       type: [String, Number, Boolean, Object],