@nuxt/ui 2.9.0 → 2.10.0

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.d.ts

@@ -63,8 +63,8 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     toggle: import("vue").WritableComputedRef<boolean | unknown[]>;
-    inputId: import("vue").ComputedRef<any>;
-    name: import("vue").ComputedRef<any>;
+    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<{

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

@@ -8,6 +8,13 @@
 import { provide, ref, defineComponent } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { uid } from "../../utils/uid";
+class FormException extends Error {
+  constructor(message) {
+    super(message);
+    this.message = message;
+    Object.setPrototypeOf(this, FormException.prototype);
+  }
+}
 export default defineComponent({
   props: {
     schema: {
@@ -27,7 +34,7 @@ export default defineComponent({
       default: () => ["blur", "input", "change", "submit"]
     }
   },
-  emits: ["submit"],
+  emits: ["submit", "error"],
   setup(props, { expose, emit }) {
     const bus = useEventBus(`form-${uid()}`);
     bus.on(async (event) => {
@@ -38,6 +45,8 @@ export default defineComponent({
     const errors = ref([]);
     provide("form-errors", errors);
     provide("form-events", bus);
+    const inputs = ref({});
+    provide("form-inputs", inputs);
     async function getErrors() {
       let errs = await props.validate(props.state);
       if (props.schema) {
@@ -68,19 +77,35 @@ export default defineComponent({
         errors.value = await getErrors();
       }
       if (!opts.silent && errors.value.length > 0) {
-        throw new Error(
+        throw new FormException(
           `Form validation failed: ${JSON.stringify(errors.value, null, 2)}`
         );
       }
       return props.state;
     }
     async function onSubmit(event) {
-      if (props.validateOn?.includes("submit")) {
-        await validate();
+      try {
+        if (props.validateOn?.includes("submit")) {
+          await validate();
+        }
+        const submitEvent = {
+          ...event,
+          data: props.state
+        };
+        emit("submit", submitEvent);
+      } catch (error) {
+        if (!(error instanceof FormException)) {
+          throw error;
+        }
+        const errorEvent = {
+          ...event,
+          errors: errors.value.map((err) => ({
+            ...err,
+            id: inputs.value[err.path]
+          }))
+        };
+        emit("error", errorEvent);
       }
-      const submitEvent = event;
-      submitEvent.data = props.state;
-      emit("submit", event);
     }
     expose({
       validate,

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

@@ -23,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     onSubmit: (event: SubmitEvent) => Promise<void>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "submit"[], "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "submit")[], "error" | "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     schema: {
         type: PropType<ZodSchema<any, import("zod").ZodTypeDef, any>> | PropType<YupObjectSchema<any, import("yup").AnyObject, any, "">> | PropType<JoiSchema> | PropType<ValibotObjectSchema<any>>;
         default: undefined;
@@ -41,6 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string[];
     };
 }>> & {
+    onError?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
 }, {
     schema: ZodSchema<any, import("zod").ZodTypeDef, any> | YupObjectSchema<any, import("yup").AnyObject, any, ""> | import("joi").AnySchema<any> | ValibotObjectSchema<any>;

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

@@ -79,6 +79,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    autofocusDelay: {
+      type: Number,
+      default: 100
+    },
     icon: {
       type: String,
       default: null
@@ -169,7 +173,7 @@ export default defineComponent({
     onMounted(() => {
       setTimeout(() => {
         autoFocus();
-      }, 100);
+      }, props.autofocusDelay);
     });
     const inputClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];

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

@@ -32,6 +32,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     icon: {
         type: StringConstructor;
         default: null;
@@ -96,8 +100,8 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: import("vue").ComputedRef<any>;
-    inputId: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
     input: import("vue").Ref<HTMLInputElement | null>;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true>;
@@ -143,6 +147,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    autofocusDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     icon: {
         type: StringConstructor;
         default: null;
@@ -212,9 +220,9 @@ declare const _default: import("vue").DefineComponent<{
     ui: Partial<any>;
     name: string;
     class: any;
-    type: string;
     modelValue: string | number;
     loading: boolean;
+    type: string;
     disabled: boolean;
     variant: any;
     required: boolean;
@@ -228,5 +236,6 @@ declare const _default: import("vue").DefineComponent<{
     leading: boolean;
     autofocus: boolean;
     inputClass: string;
+    autofocusDelay: number;
 }, {}>;
 export default _default;

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

@@ -2,7 +2,7 @@
   <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
-        :id="inputId"
+        :id="id"
         v-model="pick"
         :name="name"
         :required="required"
@@ -14,8 +14,8 @@
         v-bind="attrs"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 text-sm">
-      <label :for="inputId" :class="ui.label">
+    <div v-if="label || $slots.label" class="ms-3 inline-flex items-center">
+      <label :for="id" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
@@ -27,14 +27,14 @@
 </template>
 
 <script>
-import { computed, toRef, defineComponent } from "vue";
+import { computed, defineComponent, inject, toRef } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
-import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { radio } from "#ui/ui.config";
 import { uid } from "../../utils/uid";
+import { useFormGroup } from "../../composables/useFormGroup";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio);
 export default defineComponent({
   inheritAttrs: false,
@@ -92,17 +92,19 @@ export default defineComponent({
       default: void 0
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("radio", toRef(props, "ui"), config, toRef(props, "class"));
-    const { emitFormChange, color, name, inputId } = useFormGroup(props);
+    const radioGroup = inject("radio-group", null);
+    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config);
     const pick = computed({
       get() {
         return props.modelValue;
       },
       set(value) {
         emit("update:modelValue", value);
-        if (value) {
+        emit("change", value);
+        if (!radioGroup) {
           emitFormChange();
         }
       }
@@ -119,7 +121,6 @@ export default defineComponent({
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      inputId,
       attrs,
       pick,
       // eslint-disable-next-line vue/no-dupe-keys

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

@@ -51,14 +51,13 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     ui: import("vue").ComputedRef<any>;
-    inputId: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
     pick: import("vue").WritableComputedRef<string | number | boolean | Record<string, any>>;
-    name: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, 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;
@@ -110,6 +109,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     id: string;
     color: any;

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

@@ -0,0 +1,136 @@
+<template>
+  <div :class="ui.wrapper">
+    <fieldset v-bind="attrs">
+      <legend v-if="legend || $slots.legend" :class="ui.legend">
+        <slot name="legend">
+          {{ legend }}
+        </slot>
+      </legend>
+      <URadio
+        v-for="option in normalizedOptions"
+        :key="option.value"
+        :label="option.label"
+        :model-value="modelValue"
+        :value="option.value"
+        :disabled="disabled"
+        :ui="uiRadio"
+        @change="onUpdate(option.value)"
+      >
+        <template #label>
+          <slot name="label" v-bind="{ option }" />
+        </template>
+      </URadio>
+    </fieldset>
+  </div>
+</template>
+
+<script>
+import URadio from "./Radio.vue";
+import { computed, defineComponent, provide, toRef } from "vue";
+import { useUI } from "../../composables/useUI";
+import { useFormGroup } from "../../composables/useFormGroup";
+import { mergeConfig, get } from "../../utils";
+import appConfig from "#build/app.config";
+import { radioGroup, radio } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radioGroup, radioGroup);
+const configRadio = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio);
+export default defineComponent({
+  components: {
+    URadio
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [String, Number, Object],
+      default: ""
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    legend: {
+      type: String,
+      default: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    optionAttribute: {
+      type: String,
+      default: "label"
+    },
+    valueAttribute: {
+      type: String,
+      default: "value"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    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
+    },
+    uiRadio: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("radioGroup", toRef(props, "ui"), config, toRef(props, "class"));
+    const { ui: uiRadio } = useUI("radio", toRef(props, "uiRadio"), configRadio);
+    const { emitFormChange, color, name } = useFormGroup(props, config);
+    provide("radio-group", { color, name });
+    const onUpdate = (value) => {
+      emit("update:modelValue", value);
+      emit("change", value);
+      emitFormChange();
+    };
+    const guessOptionValue = (option) => {
+      return get(option, props.valueAttribute, get(option, props.optionAttribute));
+    };
+    const guessOptionText = (option) => {
+      return get(option, props.optionAttribute, get(option, props.valueAttribute));
+    };
+    const normalizeOption = (option) => {
+      if (["string", "number", "boolean"].includes(typeof option)) {
+        return {
+          value: option,
+          label: option
+        };
+      }
+      return {
+        ...option,
+        value: guessOptionValue(option),
+        label: guessOptionText(option)
+      };
+    };
+    const normalizedOptions = computed(() => {
+      return props.options.map((option) => normalizeOption(option));
+    });
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      // eslint-disable-next-line vue/no-dupe-keys
+      uiRadio,
+      attrs,
+      normalizedOptions,
+      // eslint-disable-next-line vue/no-dupe-keys
+      onUpdate
+    };
+  }
+});
+</script>