@nuxt/ui 2.18.4 → 3.0.0-alpha.1

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

@@ -1,171 +0,0 @@
-<template>
-  <HSwitch
-    :id="inputId"
-    v-model="active"
-    :name="name"
-    :disabled="disabled || loading"
-    :class="switchClass"
-    v-bind="attrs"
-  >
-    <span :class="containerClass">
-      <span v-if="loading" :class="[ui.icon.active, ui.icon.base]" aria-hidden="true">
-        <UIcon :name="loadingIcon" :class="loadingIconClass" />
-      </span>
-      <span
-        v-if="!loading && onIcon"
-        :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]"
-        aria-hidden="true"
-      >
-        <UIcon :name="onIcon" :class="onIconClass" />
-      </span>
-      <span
-        v-if="!loading && offIcon"
-        :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]"
-        aria-hidden="true"
-      >
-        <UIcon :name="offIcon" :class="offIconClass" />
-      </span>
-    </span>
-  </HSwitch>
-</template>
-
-<script>
-import { computed, toRef, defineComponent } from "vue";
-import { Switch as HSwitch, provideUseId } from "@headlessui/vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import { useUI } from "../../composables/useUI";
-import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { toggle } from "#ui/ui.config";
-import { useId } from "#imports";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.toggle, toggle);
-export default defineComponent({
-  components: {
-    HSwitch,
-    UIcon
-  },
-  inheritAttrs: false,
-  props: {
-    id: {
-      type: String,
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    onIcon: {
-      type: String,
-      default: () => config.default.onIcon
-    },
-    offIcon: {
-      type: String,
-      default: () => config.default.offIcon
-    },
-    loadingIcon: {
-      type: String,
-      default: () => config.default.loadingIcon
-    },
-    color: {
-      type: String,
-      default: () => config.default.color,
-      validator(value) {
-        return appConfig.ui.colors.includes(value);
-      }
-    },
-    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: () => ({})
-    }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("toggle", toRef(props, "ui"), config);
-    const { emitFormChange, color, inputId, name } = useFormGroup(props);
-    const active = computed({
-      get() {
-        return props.modelValue;
-      },
-      set(value) {
-        emit("update:modelValue", value);
-        emit("change", value);
-        emitFormChange();
-      }
-    });
-    const switchClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.base,
-        ui.value.size[props.size],
-        ui.value.rounded,
-        color.value && ui.value.ring.replaceAll("{color}", color.value),
-        color.value && (active.value ? ui.value.active : ui.value.inactive).replaceAll("{color}", color.value)
-      ), props.class);
-    });
-    const containerClass = computed(() => {
-      return twJoin(
-        ui.value.container.base,
-        ui.value.container.size[props.size],
-        active.value ? ui.value.container.active[props.size] : ui.value.container.inactive
-      );
-    });
-    const onIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.size[props.size],
-        color.value && ui.value.icon.on.replaceAll("{color}", color.value)
-      );
-    });
-    const offIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.size[props.size],
-        color.value && ui.value.icon.off.replaceAll("{color}", color.value)
-      );
-    });
-    const loadingIconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.size[props.size],
-        color.value && ui.value.icon.loading.replaceAll("{color}", color.value)
-      );
-    });
-    provideUseId(() => useId());
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      // eslint-disable-next-line vue/no-dupe-keys
-      name,
-      inputId,
-      active,
-      switchClass,
-      containerClass,
-      onIconClass,
-      offIconClass,
-      loadingIconClass
-    };
-  }
-});
-</script>

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

@@ -1,262 +0,0 @@
-import type { PropType } from 'vue';
-import type { ToggleSize, ToggleColor, Strategy } from '../../types/index.js';
-declare const config: {
-    base: string;
-    rounded: string;
-    ring: string;
-    active: string;
-    inactive: string;
-    size: {
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-    };
-    container: {
-        base: string;
-        active: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-        };
-        inactive: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-        };
-    };
-    icon: {
-        base: string;
-        active: string;
-        inactive: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-        };
-        on: string;
-        off: string;
-        loading: string;
-    };
-    default: {
-        onIcon: any;
-        offIcon: any;
-        loadingIcon: string;
-        color: string;
-        size: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    id: {
-        type: StringConstructor;
-        default: any;
-    };
-    name: {
-        type: StringConstructor;
-        default: any;
-    };
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onIcon: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    offIcon: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    loadingIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    color: {
-        type: PropType<ToggleColor>;
-        default: () => string;
-        validator(value: string): any;
-    };
-    size: {
-        type: PropType<ToggleSize>;
-        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;
-        rounded: string;
-        ring: string;
-        active: string;
-        inactive: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            '2xl': string;
-        };
-        container: {
-            base: string;
-            active: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                '2xl': string;
-            };
-            inactive: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                '2xl': string;
-            };
-        };
-        icon: {
-            base: string;
-            active: string;
-            inactive: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                '2xl': string;
-            };
-            on: string;
-            off: string;
-            loading: string;
-        };
-        default: {
-            onIcon: any;
-            offIcon: any;
-            loadingIcon: string;
-            color: string;
-            size: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    name: import("vue").ComputedRef<string>;
-    inputId: import("vue").ComputedRef<string>;
-    active: import("vue").WritableComputedRef<boolean>;
-    switchClass: import("vue").ComputedRef<string>;
-    containerClass: import("vue").ComputedRef<string>;
-    onIconClass: import("vue").ComputedRef<string>;
-    offIconClass: import("vue").ComputedRef<string>;
-    loadingIconClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: StringConstructor;
-        default: any;
-    };
-    name: {
-        type: StringConstructor;
-        default: any;
-    };
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onIcon: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    offIcon: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    loadingIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    color: {
-        type: PropType<ToggleColor>;
-        default: () => string;
-        validator(value: string): any;
-    };
-    size: {
-        type: PropType<ToggleSize>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-}, {
-    name: string;
-    size: ToggleSize;
-    class: any;
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    disabled: boolean;
-    ui: {};
-    id: string;
-    modelValue: boolean;
-    loading: boolean;
-    loadingIcon: string;
-    onIcon: string;
-    offIcon: string;
-}, {}>;
-export default _default;

package/dist/runtime/components/layout/Card.vue

@@ -1,63 +0,0 @@
-<template>
-  <component
-    :is="$attrs.onSubmit ? 'form' : as"
-    :class="cardClass"
-    v-bind="attrs"
-  >
-    <div v-if="$slots.header" :class="[ui.header.base, ui.header.padding, ui.header.background]">
-      <slot name="header" />
-    </div>
-    <div v-if="$slots.default" :class="[ui.body.base, ui.body.padding, ui.body.background]">
-      <slot />
-    </div>
-    <div v-if="$slots.footer" :class="[ui.footer.base, ui.footer.padding, ui.footer.background]">
-      <slot name="footer" />
-    </div>
-  </component>
-</template>
-
-<script>
-import { computed, toRef, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { card } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.card, card);
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    as: {
-      type: String,
-      default: "div"
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("card", toRef(props, "ui"), config);
-    const cardClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.base,
-        ui.value.rounded,
-        ui.value.divide,
-        ui.value.ring,
-        ui.value.shadow,
-        ui.value.background
-      ), props.class);
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      cardClass
-    };
-  }
-});
-</script>

package/dist/runtime/components/layout/Card.vue.d.ts

@@ -1,89 +0,0 @@
-import type { PropType } from 'vue';
-import type { Strategy } from '../../types/index.js';
-declare const config: {
-    base: string;
-    background: string;
-    divide: string;
-    ring: string;
-    rounded: string;
-    shadow: string;
-    body: {
-        base: string;
-        background: string;
-        padding: string;
-    };
-    header: {
-        base: string;
-        background: string;
-        padding: string;
-    };
-    footer: {
-        base: string;
-        background: string;
-        padding: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    as: {
-        type: StringConstructor;
-        default: string;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        base: string;
-        background: string;
-        divide: string;
-        ring: string;
-        rounded: string;
-        shadow: string;
-        body: {
-            base: string;
-            background: string;
-            padding: string;
-        };
-        header: {
-            base: string;
-            background: string;
-            padding: string;
-        };
-        footer: {
-            base: string;
-            background: string;
-            padding: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    cardClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    as: {
-        type: StringConstructor;
-        default: string;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>>, {
-    class: any;
-    as: string;
-    ui: {};
-}, {}>;
-export default _default;

package/dist/runtime/components/layout/Container.vue

@@ -1,48 +0,0 @@
-<template>
-  <component :is="as" :class="containerClass" v-bind="attrs">
-    <slot />
-  </component>
-</template>
-
-<script>
-import { computed, toRef, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { container } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.container, container);
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    as: {
-      type: String,
-      default: "div"
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("container", toRef(props, "ui"), config);
-    const containerClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.base,
-        ui.value.padding,
-        ui.value.constrained
-      ), props.class);
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      containerClass
-    };
-  }
-});
-</script>

package/dist/runtime/components/layout/Container.vue.d.ts

@@ -1,53 +0,0 @@
-import type { PropType } from 'vue';
-import type { Strategy } from '../../types/index.js';
-declare const config: {
-    base: string;
-    padding: string;
-    constrained: string;
-};
-declare const _default: import("vue").DefineComponent<{
-    as: {
-        type: StringConstructor;
-        default: string;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        base: string;
-        padding: string;
-        constrained: string;
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    containerClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    as: {
-        type: StringConstructor;
-        default: string;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>>, {
-    class: any;
-    as: string;
-    ui: {};
-}, {}>;
-export default _default;