@nuxt/ui 2.18.4 → 3.0.0-alpha.0

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

@@ -1,223 +0,0 @@
-import type { PropType } from 'vue';
-import type { AccordionItem, Strategy } from '../../types/index.js';
-declare const config: {
-    wrapper: string;
-    container: string;
-    item: {
-        base: string;
-        size: string;
-        color: string;
-        padding: string;
-        icon: string;
-    };
-    transition: {
-        enterActiveClass: string;
-        leaveActiveClass: string;
-    };
-    default: {
-        openIcon: string;
-        closeIcon: string;
-        class: string;
-        variant: "soft";
-        truncate: boolean;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    items: {
-        type: PropType<AccordionItem[]>;
-        default: () => any[];
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    openIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    unmount: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    closeIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        container: string;
-        item: {
-            base: string;
-            size: string;
-            color: string;
-            padding: string;
-            icon: string;
-        };
-        transition: {
-            enterActiveClass: string;
-            leaveActiveClass: string;
-        };
-        default: {
-            openIcon: string;
-            closeIcon: string;
-            class: string;
-            variant: "soft";
-            truncate: boolean;
-        };
-    }>;
-    uiButton: import("vue").ComputedRef<{
-        base: string;
-        font: string;
-        rounded: string;
-        truncate: string;
-        block: string;
-        inline: string;
-        size: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        gap: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        padding: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        square: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
-        color: {
-            white: {
-                solid: string;
-                ghost: string;
-            };
-            gray: {
-                solid: string;
-                ghost: string;
-                link: string;
-            };
-            black: {
-                solid: string;
-                link: string;
-            };
-        };
-        variant: {
-            solid: string;
-            outline: string;
-            soft: string;
-            ghost: string;
-            link: string;
-        };
-        icon: {
-            base: string;
-            loading: string;
-            size: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-        };
-        default: {
-            size: string;
-            variant: string;
-            color: string;
-            loadingIcon: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    buttonRefs: import("vue").Ref<{
-        open: boolean;
-        close: (e: EventTarget) => {};
-    }[]>;
-    closeOthers: (currentIndex: number, e: Event) => void;
-    omit: any;
-    onEnter: (_el: Element, done: () => void) => void;
-    onBeforeLeave: (_el: Element) => void;
-    onAfterEnter: (_el: Element) => void;
-    onLeave: (_el: Element, done: () => void) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "open"[], "open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    items: {
-        type: PropType<AccordionItem[]>;
-        default: () => any[];
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    openIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    unmount: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    closeIcon: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    multiple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onOpen?: (...args: any[]) => any;
-}, {
-    class: any;
-    ui: {};
-    defaultOpen: boolean;
-    unmount: boolean;
-    items: AccordionItem[];
-    openIcon: string;
-    closeIcon: string;
-    multiple: boolean;
-}, {}>;
-export default _default;

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

@@ -1,139 +0,0 @@
-<template>
-  <div :class="alertClass" v-bind="attrs">
-    <div class="flex" :class="[ui.gap, { 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }]">
-      <slot name="icon" :icon="icon">
-        <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
-      </slot>
-      <slot name="avatar" :avatar="avatar">
-        <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
-      </slot>
-
-      <div :class="ui.inner">
-        <p v-if="(title || $slots.title)" :class="ui.title">
-          <slot name="title" :title="title">
-            {{ title }}
-          </slot>
-        </p>
-        <div v-if="description || $slots.description" :class="twMerge(ui.description, !title && !$slots.title && 'mt-0 leading-5')">
-          <slot name="description" :description="description">
-            {{ description }}
-          </slot>
-        </div>
-
-        <div v-if="(description || $slots.description) && (actions.length || $slots.actions)" :class="ui.actions">
-          <slot name="actions">
-            <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
-          </slot>
-        </div>
-      </div>
-      <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
-        <template v-if="!description && !$slots.description && (actions.length || $slots.actions)">
-          <slot name="actions">
-            <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
-          </slot>
-        </template>
-
-        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed, toRef, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import UAvatar from "../elements/Avatar.vue";
-import UButton from "../elements/Button.vue";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { alert } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.alert, alert);
-export default defineComponent({
-  components: {
-    UIcon,
-    UAvatar,
-    UButton
-  },
-  inheritAttrs: false,
-  props: {
-    title: {
-      type: String,
-      default: null
-    },
-    description: {
-      type: String,
-      default: null
-    },
-    icon: {
-      type: String,
-      default: () => config.default.icon
-    },
-    avatar: {
-      type: Object,
-      default: null
-    },
-    closeButton: {
-      type: Object,
-      default: () => config.default.closeButton
-    },
-    actions: {
-      type: Array,
-      default: () => []
-    },
-    color: {
-      type: String,
-      default: () => config.default.color,
-      validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
-      }
-    },
-    variant: {
-      type: String,
-      default: () => config.default.variant,
-      validator(value) {
-        return [
-          ...Object.keys(config.variant),
-          ...Object.values(config.color).flatMap((value2) => Object.keys(value2))
-        ].includes(value);
-      }
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["close"],
-  setup(props) {
-    const { ui, attrs } = useUI("alert", toRef(props, "ui"), config);
-    const alertClass = computed(() => {
-      const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
-      return twMerge(twJoin(
-        ui.value.wrapper,
-        ui.value.rounded,
-        ui.value.shadow,
-        ui.value.padding,
-        variant?.replaceAll("{color}", props.color)
-      ), props.class);
-    });
-    function onAction(action) {
-      if (action.click) {
-        action.click();
-      }
-    }
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      alertClass,
-      onAction,
-      twMerge
-    };
-  }
-});
-</script>

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

@@ -1,194 +0,0 @@
-import type { PropType } from 'vue';
-import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy } from '../../types/index.js';
-declare const config: {
-    wrapper: string;
-    inner: string;
-    title: string;
-    description: string;
-    actions: string;
-    shadow: string;
-    rounded: string;
-    padding: string;
-    gap: string;
-    icon: {
-        base: string;
-    };
-    avatar: {
-        base: string;
-        size: "md";
-    };
-    color: {
-        white: {
-            solid: string;
-        };
-    };
-    variant: {
-        solid: string;
-        outline: string;
-        soft: string;
-        subtle: string;
-    };
-    default: {
-        color: string;
-        variant: string;
-        icon: any;
-        closeButton: any;
-        actionButton: {
-            size: "xs";
-            color: "primary";
-            variant: "link";
-        };
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    title: {
-        type: StringConstructor;
-        default: any;
-    };
-    description: {
-        type: StringConstructor;
-        default: any;
-    };
-    icon: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    avatar: {
-        type: PropType<Avatar>;
-        default: any;
-    };
-    closeButton: {
-        type: PropType<Button>;
-        default: () => Button;
-    };
-    actions: {
-        type: PropType<AlertAction[]>;
-        default: () => any[];
-    };
-    color: {
-        type: PropType<AlertColor>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    variant: {
-        type: PropType<AlertVariant>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        inner: string;
-        title: string;
-        description: string;
-        actions: string;
-        shadow: string;
-        rounded: string;
-        padding: string;
-        gap: string;
-        icon: {
-            base: string;
-        };
-        avatar: {
-            base: string;
-            size: "md";
-        };
-        color: {
-            white: {
-                solid: string;
-            };
-        };
-        variant: {
-            solid: string;
-            outline: string;
-            soft: string;
-            subtle: string;
-        };
-        default: {
-            color: string;
-            variant: string;
-            icon: any;
-            closeButton: any;
-            actionButton: {
-                size: "xs";
-                color: "primary";
-                variant: "link";
-            };
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    alertClass: import("vue").ComputedRef<string>;
-    onAction: (action: AlertAction) => void;
-    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: any;
-    };
-    description: {
-        type: StringConstructor;
-        default: any;
-    };
-    icon: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    avatar: {
-        type: PropType<Avatar>;
-        default: any;
-    };
-    closeButton: {
-        type: PropType<Button>;
-        default: () => Button;
-    };
-    actions: {
-        type: PropType<AlertAction[]>;
-        default: () => any[];
-    };
-    color: {
-        type: PropType<AlertColor>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    variant: {
-        type: PropType<AlertVariant>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onClose?: (...args: any[]) => any;
-}, {
-    class: any;
-    avatar: any;
-    color: AlertColor;
-    variant: AlertVariant;
-    title: string;
-    ui: {};
-    description: string;
-    icon: string;
-    closeButton: Button;
-    actions: AlertAction[];
-}, {}>;
-export default _default;

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

@@ -1,160 +0,0 @@
-<template>
-  <span :class="wrapperClass">
-    <component
-      :is="as"
-      v-if="url && !error"
-      :class="imgClass"
-      :alt="alt"
-      :src="url"
-      v-bind="attrs"
-      @error="onError"
-    />
-    <span v-else-if="text" :class="ui.text">{{ text }}</span>
-    <UIcon v-else-if="icon" :name="icon" :class="iconClass" />
-    <span v-else-if="placeholder" :class="ui.placeholder">{{ placeholder }}</span>
-
-    <span v-if="chipColor" :class="chipClass">
-      {{ chipText }}
-    </span>
-    <slot />
-  </span>
-</template>
-
-<script>
-import { defineComponent, ref, computed, toRef, watch } from "vue";
-import { twMerge, 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 { avatar } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.avatar, avatar);
-export default defineComponent({
-  components: {
-    UIcon
-  },
-  inheritAttrs: false,
-  props: {
-    as: {
-      type: [String, Object],
-      default: "img"
-    },
-    src: {
-      type: [String, Boolean],
-      default: null
-    },
-    alt: {
-      type: String,
-      default: null
-    },
-    text: {
-      type: String,
-      default: null
-    },
-    icon: {
-      type: String,
-      default: () => config.default.icon
-    },
-    size: {
-      type: String,
-      default: () => config.default.size,
-      validator(value) {
-        return Object.keys(config.size).includes(value);
-      }
-    },
-    chipColor: {
-      type: String,
-      default: () => config.default.chipColor,
-      validator(value) {
-        return ["gray", ...appConfig.ui.colors].includes(value);
-      }
-    },
-    chipPosition: {
-      type: String,
-      default: () => config.default.chipPosition,
-      validator(value) {
-        return Object.keys(config.chip.position).includes(value);
-      }
-    },
-    chipText: {
-      type: [String, Number],
-      default: null
-    },
-    imgClass: {
-      type: String,
-      default: ""
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("avatar", toRef(props, "ui"), config);
-    const url = computed(() => {
-      if (typeof props.src === "boolean") {
-        return null;
-      }
-      return props.src;
-    });
-    const placeholder = computed(() => {
-      return (props.alt || "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2);
-    });
-    const wrapperClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.wrapper,
-        (error.value || !url.value) && ui.value.background,
-        ui.value.rounded,
-        ui.value.size[props.size]
-      ), props.class);
-    });
-    const imgClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.rounded,
-        ui.value.size[props.size]
-      ), props.imgClass);
-    });
-    const iconClass = computed(() => {
-      return twJoin(
-        ui.value.icon.base,
-        ui.value.icon.size[props.size]
-      );
-    });
-    const chipClass = computed(() => {
-      return twJoin(
-        ui.value.chip.base,
-        ui.value.chip.size[props.size],
-        ui.value.chip.position[props.chipPosition],
-        ui.value.chip.background.replaceAll("{color}", props.chipColor)
-      );
-    });
-    const error = ref(false);
-    watch(() => props.src, () => {
-      if (error.value) {
-        error.value = false;
-      }
-    });
-    function onError() {
-      error.value = true;
-    }
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      wrapperClass,
-      // eslint-disable-next-line vue/no-dupe-keys
-      imgClass,
-      iconClass,
-      chipClass,
-      url,
-      placeholder,
-      error,
-      onError
-    };
-  }
-});
-</script>