@nuxt/ui 2.18.4 → 3.0.0-alpha.0

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

@@ -1,203 +0,0 @@
-<template>
-  <div :class="ui.wrapper" role="progressbar">
-    <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
-      :aria-valuemax="realMax"
-      :aria-valuenow="value"
-      :class="progressClass"
-      v-bind="{ value, max: realMax, ...attrs }"
-    >
-      {{ percent !== undefined ? `${Math.round(percent)}%` : undefined }}
-    </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,
-      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: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  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(() => props.value === void 0 || props.value === null);
-    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(() => {
-      if (isIndeterminate.value) {
-        return void 0;
-      }
-      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>
-progress:indeterminate{@apply relative}progress:indeterminate:after{@apply content-[""];@apply absolute inset-0;@apply bg-current}progress:indeterminate::-webkit-progress-value{@apply bg-current}progress:indeterminate::-moz-progress-bar{@apply bg-current}progress:indeterminate.bar-animation-carousel:after{animation:carousel 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel::-webkit-progress-value{animation:carousel 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel::-moz-progress-bar{animation:carousel 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel-inverse:after{animation:carousel-inverse 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel-inverse::-webkit-progress-value{animation:carousel-inverse 2s ease-in-out infinite}progress:indeterminate.bar-animation-carousel-inverse::-moz-progress-bar{animation:carousel-inverse 2s ease-in-out infinite}progress:indeterminate.bar-animation-swing:after{animation:swing 3s ease-in-out infinite}progress:indeterminate.bar-animation-swing::-webkit-progress-value{animation:swing 3s ease-in-out infinite}progress:indeterminate.bar-animation-swing::-moz-progress-bar{animation:swing 3s ease-in-out infinite}progress:indeterminate.bar-animation-elastic:after{animation:elastic 3s ease-in-out infinite}progress:indeterminate.bar-animation-elastic::-webkit-progress-value{animation:elastic 3s ease-in-out infinite}progress:indeterminate.bar-animation-elastic::-moz-progress-bar{animation:elastic 3s ease-in-out infinite}@keyframes carousel{0%,to{width:50%}0%{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes carousel-inverse{0%,to{width:50%}0%{transform:translateX(200%)}to{transform:translateX(-100%)}}@keyframes swing{0%,to{width:50%}0%,to{transform:translateX(-25%)}50%{transform:translateX(125%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}
-</style>

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

@@ -1,280 +0,0 @@
-import type { PropType } from 'vue';
-import type { Strategy, ProgressSize, ProgressAnimation, ProgressColor } from '../../types/index.js';
-declare const config: {
-    wrapper: string;
-    indicator: {
-        container: {
-            base: string;
-            width: string;
-            transition: string;
-        };
-        align: string;
-        width: string;
-        color: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-        };
-    };
-    progress: {
-        base: string;
-        width: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-        };
-        rounded: string;
-        track: string;
-        bar: string;
-        color: string;
-        background: string;
-        indeterminate: {
-            base: string;
-            rounded: string;
-        };
-    };
-    steps: {
-        base: string;
-        color: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-        };
-    };
-    step: {
-        base: string;
-        align: string;
-        active: string;
-        first: string;
-    };
-    animation: {
-        carousel: string;
-        'carousel-inverse': string;
-        swing: string;
-        elastic: string;
-    };
-    default: {
-        color: string;
-        size: string;
-        animation: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    value: {
-        type: NumberConstructor;
-        default: any;
-    };
-    max: {
-        type: (NumberConstructor | {
-            (arrayLength: number): any[];
-            (...items: any[]): any[];
-            new (arrayLength: number): any[];
-            new (...items: any[]): any[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
-            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>) => U, thisArg?: any): Promise<Awaited<U>[]>;
-            readonly [Symbol.species]: ArrayConstructor;
-        })[];
-        default: number;
-    };
-    indicator: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    animation: {
-        type: PropType<ProgressAnimation>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    size: {
-        type: PropType<ProgressSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    color: {
-        type: PropType<ProgressColor>;
-        default: () => string;
-        validator(value: string): any;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        indicator: {
-            container: {
-                base: string;
-                width: string;
-                transition: string;
-            };
-            align: string;
-            width: string;
-            color: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                '2xl': string;
-            };
-        };
-        progress: {
-            base: string;
-            width: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                '2xl': string;
-            };
-            rounded: string;
-            track: string;
-            bar: string;
-            color: string;
-            background: string;
-            indeterminate: {
-                base: string;
-                rounded: string;
-            };
-        };
-        steps: {
-            base: string;
-            color: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                '2xl': string;
-            };
-        };
-        step: {
-            base: string;
-            align: string;
-            active: string;
-            first: string;
-        };
-        animation: {
-            carousel: string;
-            'carousel-inverse': string;
-            swing: string;
-            elastic: string;
-        };
-        default: {
-            color: string;
-            size: string;
-            animation: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    indicatorContainerClass: import("vue").ComputedRef<string>;
-    indicatorClass: import("vue").ComputedRef<string>;
-    progressClass: import("vue").ComputedRef<string>;
-    stepsClass: import("vue").ComputedRef<string>;
-    stepClasses: (index: string | number) => string;
-    isIndeterminate: import("vue").ComputedRef<boolean>;
-    isSteps: import("vue").ComputedRef<boolean>;
-    realMax: import("vue").ComputedRef<number>;
-    percent: import("vue").ComputedRef<number>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: NumberConstructor;
-        default: any;
-    };
-    max: {
-        type: (NumberConstructor | {
-            (arrayLength: number): any[];
-            (...items: any[]): any[];
-            new (arrayLength: number): any[];
-            new (...items: any[]): any[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
-            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>) => U, thisArg?: any): Promise<Awaited<U>[]>;
-            readonly [Symbol.species]: ArrayConstructor;
-        })[];
-        default: number;
-    };
-    indicator: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    animation: {
-        type: PropType<ProgressAnimation>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    size: {
-        type: PropType<ProgressSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    color: {
-        type: PropType<ProgressColor>;
-        default: () => string;
-        validator(value: string): any;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>>, {
-    size: "xs" | "sm" | "2xs" | "md" | "lg" | "xl" | "2xl";
-    class: any;
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    ui: {};
-    indicator: boolean;
-    animation: "carousel" | "carousel-inverse" | "swing" | "elastic";
-    value: number;
-    max: number | any[];
-}, {}>;
-export default _default;

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

@@ -1,143 +0,0 @@
-<template>
-  <div :class="ui.wrapper" :data-n-ids="attrs['data-n-ids']">
-    <div :class="ui.container">
-      <input
-        :id="inputId"
-        v-model="toggle"
-        :name="name"
-        :required="required"
-        :value="value"
-        :disabled="disabled"
-        :indeterminate="indeterminate"
-        type="checkbox"
-        :class="inputClass"
-        v-bind="attrs"
-        @change="onChange"
-      >
-    </div>
-    <div v-if="label || $slots.label" :class="ui.inner">
-      <label :for="inputId" :class="ui.label">
-        <slot name="label" :label="label">{{ label }}</slot>
-        <span v-if="required" :class="ui.required">*</span>
-      </label>
-      <p v-if="help || $slots.help" :class="ui.help">
-        <slot name="help" :help="help">
-          {{ help }}
-        </slot>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed, toRef, defineComponent } 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 { checkbox } from "#ui/ui.config";
-import { useId } from "#app";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox);
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    id: {
-      type: String,
-      default: () => null
-    },
-    value: {
-      type: [String, Number, Boolean, Object],
-      default: null
-    },
-    modelValue: {
-      type: [Boolean, Array],
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    indeterminate: {
-      type: Boolean,
-      default: void 0
-    },
-    help: {
-      type: String,
-      default: null
-    },
-    label: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    color: {
-      type: String,
-      default: () => config.default.color,
-      validator(value) {
-        return appConfig.ui.colors.includes(value);
-      }
-    },
-    inputClass: {
-      type: String,
-      default: ""
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("checkbox", toRef(props, "ui"), config, toRef(props, "class"));
-    const { emitFormChange, color, name, inputId: _inputId } = useFormGroup(props);
-    const inputId = _inputId.value ?? useId();
-    const toggle = computed({
-      get() {
-        return props.modelValue;
-      },
-      set(value) {
-        emit("update:modelValue", value);
-      }
-    });
-    const onChange = (event) => {
-      emit("change", event.target.checked);
-      emitFormChange();
-    };
-    const inputClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.base,
-        ui.value.form,
-        ui.value.rounded,
-        ui.value.background,
-        ui.value.border,
-        color.value && ui.value.ring.replaceAll("{color}", color.value),
-        color.value && ui.value.color.replaceAll("{color}", color.value)
-      ), props.inputClass);
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      toggle,
-      inputId,
-      // eslint-disable-next-line vue/no-dupe-keys
-      name,
-      // eslint-disable-next-line vue/no-dupe-keys
-      inputClass,
-      onChange
-    };
-  }
-});
-</script>