@nuxt/ui 2.18.4 → 3.0.0-alpha.1

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

@@ -1,47 +0,0 @@
-import type { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-    mode: {
-        type: PropType<"svg" | "css">;
-        required: false;
-        default: any;
-    };
-    size: {
-        type: (StringConstructor | NumberConstructor)[];
-        required: false;
-        default: any;
-    };
-    customize: {
-        type: FunctionConstructor;
-        required: false;
-        default: any;
-    };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-    mode: {
-        type: PropType<"svg" | "css">;
-        required: false;
-        default: any;
-    };
-    size: {
-        type: (StringConstructor | NumberConstructor)[];
-        required: false;
-        default: any;
-    };
-    customize: {
-        type: FunctionConstructor;
-        required: false;
-        default: any;
-    };
-}>>, {
-    mode: "svg" | "css";
-    size: string | number;
-    customize: Function;
-}, {}>;
-export default _default;

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

@@ -1,59 +0,0 @@
-<template>
-  <kbd :class="kbdClass" v-bind="attrs">
-    <slot>{{ value }}</slot>
-  </kbd>
-</template>
-
-<script>
-import { toRef, defineComponent, computed } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { kbd } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.kbd, kbd);
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    value: {
-      type: String,
-      default: null
-    },
-    size: {
-      type: String,
-      default: () => config.default.size,
-      validator(value) {
-        return Object.keys(config.size).includes(value);
-      }
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("kbd", toRef(props, "ui"), config);
-    const kbdClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.base,
-        ui.value.size[props.size],
-        ui.value.padding,
-        ui.value.rounded,
-        ui.value.font,
-        ui.value.background,
-        ui.value.ring
-      ), props.class);
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      kbdClass
-    };
-  }
-});
-</script>

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

@@ -1,86 +0,0 @@
-import type { PropType } from 'vue';
-import type { KbdSize, Strategy } from '../../types/index.js';
-declare const config: {
-    base: string;
-    padding: string;
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-    };
-    rounded: string;
-    font: string;
-    background: string;
-    ring: string;
-    default: {
-        size: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    value: {
-        type: StringConstructor;
-        default: any;
-    };
-    size: {
-        type: PropType<KbdSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        base: string;
-        padding: string;
-        size: {
-            xs: string;
-            sm: string;
-            md: string;
-        };
-        rounded: string;
-        font: string;
-        background: string;
-        ring: string;
-        default: {
-            size: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    kbdClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: StringConstructor;
-        default: any;
-    };
-    size: {
-        type: PropType<KbdSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>>, {
-    size: KbdSize;
-    class: any;
-    ui: {};
-    value: string;
-}, {}>;
-export default _default;

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

@@ -1,95 +0,0 @@
-<template>
-  <component
-    :is="as"
-    v-if="!to"
-    :type="type"
-    :disabled="disabled"
-    v-bind="$attrs"
-    :class="active ? activeClass : inactiveClass"
-  >
-    <slot v-bind="{ isActive: active }" />
-  </component>
-  <NuxtLink
-    v-else
-    v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }"
-    v-bind="$props"
-    custom
-  >
-    <a
-      v-bind="$attrs"
-      :href="!disabled ? href : undefined"
-      :aria-disabled="disabled ? 'true' : undefined"
-      :role="disabled ? 'link' : undefined"
-      :rel="rel"
-      :target="target"
-      :class="active !== undefined ? (active ? activeClass : inactiveClass) : resolveLinkClass(route, $route, { isActive, isExactActive })"
-      @click="(e) => (!isExternal && !disabled) && navigate(e)"
-    >
-      <slot v-bind="{ isActive: active !== undefined ? active : (exact ? isExactActive : isActive) }" />
-    </a>
-  </NuxtLink>
-</template>
-
-<script>
-import { isEqual } from "ohash";
-import { defineComponent } from "vue";
-import { nuxtLinkProps } from "../../utils";
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    ...nuxtLinkProps,
-    as: {
-      type: String,
-      default: "button"
-    },
-    type: {
-      type: String,
-      default: "button"
-    },
-    disabled: {
-      type: Boolean,
-      default: null
-    },
-    active: {
-      type: Boolean,
-      default: void 0
-    },
-    exact: {
-      type: Boolean,
-      default: false
-    },
-    exactQuery: {
-      type: Boolean,
-      default: false
-    },
-    exactHash: {
-      type: Boolean,
-      default: false
-    },
-    inactiveClass: {
-      type: String,
-      default: void 0
-    }
-  },
-  setup(props) {
-    function resolveLinkClass(route, $route, { isActive, isExactActive }) {
-      if (props.exactQuery && !isEqual(route.query, $route.query)) {
-        return props.inactiveClass;
-      }
-      if (props.exactHash && route.hash !== $route.hash) {
-        return props.inactiveClass;
-      }
-      if (props.exact && isExactActive) {
-        return props.activeClass;
-      }
-      if (!props.exact && isActive) {
-        return props.activeClass;
-      }
-      return props.inactiveClass;
-    }
-    return {
-      resolveLinkClass
-    };
-  }
-});
-</script>

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

@@ -1,225 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    as: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: any;
-    };
-    active: {
-        type: BooleanConstructor;
-        default: any;
-    };
-    exact: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    exactQuery: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    exactHash: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    inactiveClass: {
-        type: StringConstructor;
-        default: any;
-    };
-    to: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
-        readonly default: any;
-        readonly required: false;
-    };
-    href: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
-        readonly default: any;
-        readonly required: false;
-    };
-    target: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["target"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    rel: {
-        readonly type: import("vue").PropType<any>;
-        readonly default: any;
-        readonly required: false;
-    };
-    noRel: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["noRel"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    prefetch: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["prefetch"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    noPrefetch: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["noPrefetch"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    activeClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["activeClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    exactActiveClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["exactActiveClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    prefetchedClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["prefetchedClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    replace: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["replace"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    ariaCurrentValue: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["ariaCurrentValue"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    external: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["external"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-}, {
-    resolveLinkClass: (route: any, $route: any, { isActive, isExactActive }: {
-        isActive: boolean;
-        isExactActive: boolean;
-    }) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    as: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: any;
-    };
-    active: {
-        type: BooleanConstructor;
-        default: any;
-    };
-    exact: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    exactQuery: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    exactHash: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    inactiveClass: {
-        type: StringConstructor;
-        default: any;
-    };
-    to: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
-        readonly default: any;
-        readonly required: false;
-    };
-    href: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
-        readonly default: any;
-        readonly required: false;
-    };
-    target: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["target"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    rel: {
-        readonly type: import("vue").PropType<any>;
-        readonly default: any;
-        readonly required: false;
-    };
-    noRel: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["noRel"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    prefetch: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["prefetch"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    noPrefetch: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["noPrefetch"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    activeClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["activeClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    exactActiveClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["exactActiveClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    prefetchedClass: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["prefetchedClass"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    replace: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["replace"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    ariaCurrentValue: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["ariaCurrentValue"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-    external: {
-        readonly type: import("vue").PropType<import("#app").NuxtLinkProps["external"]>;
-        readonly default: any;
-        readonly required: false;
-    };
-}>>, {
-    type: string;
-    replace: boolean;
-    target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
-    to: any;
-    activeClass: string;
-    exactActiveClass: string;
-    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-    noRel: boolean;
-    prefetch: boolean;
-    noPrefetch: boolean;
-    prefetchedClass: string;
-    external: boolean;
-    as: string;
-    disabled: boolean;
-    active: boolean;
-    exact: boolean;
-    exactQuery: boolean;
-    exactHash: boolean;
-    inactiveClass: string;
-    href: any;
-    rel: any;
-}, {}>;
-export default _default;

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

@@ -1,170 +0,0 @@
-<template>
-  <div :class="ui.wrapper" v-bind="attrs">
-    <template v-if="indicator || $slots.indicator">
-      <slot name="indicator" v-bind="{ percent, value }">
-        <div :class="indicatorContainerClass" :style="{ width: `${percent}%` }">
-          <div :class="indicatorClass">
-            {{ Math.round(percent) }}%
-          </div>
-        </div>
-      </slot>
-    </template>
-
-    <meter
-      :value="value"
-      :min="normalizedMin"
-      :max="normalizedMax"
-      :class="[meterClass, meterAppearanceClass, meterBarClass]"
-    />
-
-    <template v-if="label || $slots.label">
-      <slot name="label" v-bind="{ percent, value }">
-        <div :class="labelClass">
-          <UIcon v-if="icon" :name="icon" /> {{ label }}
-        </div>
-      </slot>
-    </template>
-  </div>
-</template>
-
-<script>
-import { computed, defineComponent, toRef } from "vue";
-import { twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { meter } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.meter, meter);
-export default defineComponent({
-  components: {
-    UIcon
-  },
-  inheritAttrs: false,
-  slots: Object,
-  props: {
-    value: {
-      type: Number,
-      default: 0
-    },
-    min: {
-      type: Number,
-      default: 0
-    },
-    max: {
-      type: Number,
-      default: 100
-    },
-    indicator: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String,
-      default: null
-    },
-    size: {
-      type: String,
-      default: () => config.default.size,
-      validator(value) {
-        return Object.keys(config.meter.size).includes(value);
-      }
-    },
-    color: {
-      type: String,
-      default: () => config.default.color,
-      validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
-      }
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("meter", toRef(props, "ui"), config, toRef(props, "class"));
-    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 indicatorContainerClass = computed(() => {
-      return twJoin(
-        ui.value.indicator.container
-      );
-    });
-    const indicatorClass = computed(() => {
-      return twJoin(
-        ui.value.indicator.text,
-        ui.value.indicator.size[props.size]
-      );
-    });
-    const meterClass = computed(() => {
-      return twJoin(
-        ui.value.meter.base,
-        ui.value.meter.background,
-        ui.value.meter.ring,
-        ui.value.meter.rounded,
-        ui.value.meter.shadow,
-        ui.value.color[props.color] ?? ui.value.meter.color.replaceAll("{color}", props.color),
-        ui.value.meter.size[props.size]
-      );
-    });
-    const meterAppearanceClass = computed(() => {
-      return twJoin(
-        ui.value.meter.appearance.inner,
-        ui.value.meter.appearance.meter,
-        ui.value.meter.appearance.bar,
-        ui.value.meter.appearance.value
-      );
-    });
-    const meterBarClass = computed(() => {
-      return twJoin(
-        ui.value.meter.bar.transition,
-        ui.value.meter.bar.ring,
-        ui.value.meter.bar.rounded,
-        ui.value.meter.bar.size[props.size]
-      );
-    });
-    const labelClass = computed(() => {
-      return twJoin(
-        ui.value.label.base,
-        ui.value.label.text,
-        ui.value.color[props.color] ?? ui.value.label.color.replaceAll("{color}", props.color),
-        ui.value.label.size[props.size]
-      );
-    });
-    const normalizedMin = computed(() => props.min > props.max ? props.max : props.min);
-    const normalizedMax = computed(() => props.max < props.min ? props.min : props.max);
-    const percent = computed(() => clampPercent(Number(props.value), normalizedMin.value, normalizedMax.value));
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      indicatorContainerClass,
-      indicatorClass,
-      meterClass,
-      meterAppearanceClass,
-      meterBarClass,
-      labelClass,
-      normalizedMin,
-      normalizedMax,
-      percent
-    };
-  }
-});
-</script>