@nuxt/ui 2.18.4 → 3.0.0-alpha.1

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

@@ -1,279 +0,0 @@
-import type { SlotsType, PropType } from 'vue';
-import type { Strategy, MeterColor, MeterSize } from '../../types/index.js';
-declare const config: {
-    wrapper: string;
-    indicator: {
-        container: string;
-        text: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-        };
-    };
-    meter: {
-        base: string;
-        background: string;
-        color: string;
-        ring: string;
-        rounded: string;
-        shadow: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-        };
-        appearance: {
-            inner: string;
-            meter: string;
-            bar: string;
-            value: string;
-        };
-        bar: {
-            transition: string;
-            ring: string;
-            rounded: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                '2xl': string;
-            };
-        };
-    };
-    label: {
-        base: string;
-        text: string;
-        color: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-        };
-    };
-    color: {
-        white: string;
-        black: string;
-        gray: string;
-    };
-    default: {
-        size: string;
-        color: string;
-    };
-};
-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: any;
-    };
-    size: {
-        type: PropType<MeterSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    color: {
-        type: PropType<MeterColor>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    icon: {
-        type: StringConstructor;
-        default: any;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        indicator: {
-            container: string;
-            text: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                '2xl': string;
-            };
-        };
-        meter: {
-            base: string;
-            background: string;
-            color: string;
-            ring: string;
-            rounded: string;
-            shadow: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                '2xl': string;
-            };
-            appearance: {
-                inner: string;
-                meter: string;
-                bar: string;
-                value: string;
-            };
-            bar: {
-                transition: string;
-                ring: string;
-                rounded: string;
-                size: {
-                    '2xs': string;
-                    xs: string;
-                    sm: string;
-                    md: string;
-                    lg: string;
-                    xl: string;
-                    '2xl': string;
-                };
-            };
-        };
-        label: {
-            base: string;
-            text: string;
-            color: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                '2xl': string;
-            };
-        };
-        color: {
-            white: string;
-            black: string;
-            gray: string;
-        };
-        default: {
-            size: string;
-            color: string;
-        };
-    }>;
-    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").PublicProps, 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: any;
-    };
-    size: {
-        type: PropType<MeterSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    color: {
-        type: PropType<MeterColor>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    icon: {
-        type: StringConstructor;
-        default: 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: MeterColor;
-    label: string;
-    ui: {};
-    icon: string;
-    indicator: boolean;
-    value: number;
-    max: number;
-    min: number;
-}, SlotsType<{
-    indicator?: {
-        percent: number;
-        value: number;
-    };
-    label?: {
-        percent: number;
-        value: number;
-    };
-}>>;
-export default _default;

package/dist/runtime/components/elements/MeterGroup.d.ts

@@ -1,135 +0,0 @@
-import type { VNode, SlotsType, PropType } from 'vue';
-import Meter from './Meter.vue.js';
-import type { Strategy, MeterSize } from '../../types/index.js';
-declare const meterGroupConfig: {
-    wrapper: string;
-    base: string;
-    background: string;
-    transition: string;
-    rounded: string;
-    shadow: string;
-    list: string;
-    orientation: {
-        'rounded-none': {
-            left: string;
-            right: string;
-        };
-        'rounded-sm': {
-            left: string;
-            right: string;
-        };
-        rounded: {
-            left: string;
-            right: string;
-        };
-        'rounded-md': {
-            left: string;
-            right: string;
-        };
-        'rounded-lg': {
-            left: string;
-            right: string;
-        };
-        'rounded-xl': {
-            left: string;
-            right: string;
-        };
-        'rounded-2xl': {
-            left: string;
-            right: string;
-        };
-        'rounded-3xl': {
-            left: string;
-            right: string;
-        };
-        'rounded-full': {
-            left: string;
-            right: string;
-        };
-    };
-    default: {
-        size: string;
-        icon: string;
-    };
-};
-declare const _default: import("@vue/runtime-core").DefineComponent<{
-    min: {
-        type: NumberConstructor;
-        default: number;
-    };
-    max: {
-        type: NumberConstructor;
-        default: number;
-    };
-    size: {
-        type: PropType<MeterSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    indicator: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    icon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof meterGroupConfig> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, () => VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
-    min: {
-        type: NumberConstructor;
-        default: number;
-    };
-    max: {
-        type: NumberConstructor;
-        default: number;
-    };
-    size: {
-        type: PropType<MeterSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    indicator: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    icon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof meterGroupConfig> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>>, {
-    size: "xs" | "sm" | "2xs" | "md" | "lg" | "xl" | "2xl";
-    ui: {};
-    class: any;
-    icon: string;
-    max: number;
-    min: number;
-    indicator: boolean;
-}, SlotsType<{
-    default?: (typeof Meter)[];
-    indicator?: {
-        percent: number;
-    };
-}>>;
-export default _default;

package/dist/runtime/components/elements/MeterGroup.js

@@ -1,159 +0,0 @@
-import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
-import { twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import { useUI } from "../../composables/useUI.js";
-import { mergeConfig, getSlotsChildren } from "../../utils/index.js";
-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: () => meterGroupConfig.default.icon
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  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(() => ui.value.orientation[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,
-        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: ui.value.list }, 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);
-  }
-});