@nuxt/ui 2.8.1 → 2.10.0

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 > 100:
+          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

@@ -1,8 +1,8 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
-        :id="name"
+        :id="inputId"
         v-model="toggle"
         :name="name"
         :required="required"
@@ -18,7 +18,7 @@
       >
     </div>
     <div v-if="label || $slots.label" class="ms-3 text-sm">
-      <label :for="name" :class="ui.label">
+      <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
@@ -30,16 +30,23 @@
 </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 { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
-import { useAppConfig } from "#imports";
+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);
 export default defineComponent({
   inheritAttrs: false,
   props: {
+    id: {
+      type: String,
+      // A default value is needed here to bind the label
+      default: () => uid()
+    },
     value: {
       type: [String, Number, Boolean, Object],
       default: null
@@ -78,7 +85,7 @@ export default defineComponent({
     },
     color: {
       type: String,
-      default: () => appConfig.ui.checkbox.default.color,
+      default: () => config.default.color,
       validator(value) {
         return appConfig.ui.colors.includes(value);
       }
@@ -87,17 +94,19 @@ export default defineComponent({
       type: String,
       default: ""
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(props, { emit, attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.checkbox));
-    const { emitFormChange, formGroup } = useFormGroup();
-    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("checkbox", toRef(props, "ui"), config, toRef(props, "class"));
+    const { emitFormChange, color, name, inputId } = useFormGroup(props);
     const toggle = computed({
       get() {
         return props.modelValue;
@@ -110,7 +119,6 @@ export default defineComponent({
       emit("change", event);
       emitFormChange();
     };
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const inputClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
@@ -122,11 +130,13 @@ export default defineComponent({
       ), props.inputClass);
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       toggle,
-      wrapperClass,
+      inputId,
+      // eslint-disable-next-line vue/no-dupe-keys
+      name,
       // eslint-disable-next-line vue/no-dupe-keys
       inputClass,
       onChange

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

@@ -1,8 +1,11 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
     value: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
         default: null;
     };
     modelValue: {
@@ -38,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
@@ -46,22 +49,31 @@ declare const _default: import("vue").DefineComponent<{
         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>>;
     toggle: import("vue").WritableComputedRef<boolean | unknown[]>;
-    wrapperClass: import("vue").ComputedRef<string>;
+    inputId: import("vue").Ref<string | undefined>;
+    name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
     onChange: (event: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
     value: {
-        type: (ObjectConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
         default: null;
     };
     modelValue: {
@@ -97,7 +109,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): any;
     };
@@ -105,17 +117,23 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    color: string;
-    ui: any;
+    id: string;
+    color: any;
+    ui: Partial<any>;
     name: string;
+    class: any;
     value: string | number | boolean | Record<string, any>;
     label: string;
     modelValue: boolean | unknown[];