@nuxt/ui 2.18.4 → 3.0.0-alpha.1

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

@@ -1,108 +0,0 @@
-<template>
-  <div :class="wrapperClass" v-bind="attrs">
-    <div :class="borderClass" />
-
-    <template v-if="label || icon || avatar || $slots.default">
-      <div :class="containerClass">
-        <slot>
-          <span v-if="label" :class="ui.label">
-            {{ label }}
-          </span>
-          <UIcon v-else-if="icon" :name="icon" :class="ui.icon.base" />
-          <UAvatar v-else-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
-        </slot>
-      </div>
-
-      <div :class="borderClass" />
-    </template>
-  </div>
-</template>
-
-<script>
-import { toRef, computed, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import UAvatar from "../elements/Avatar.vue";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { divider } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.divider, divider);
-export default defineComponent({
-  components: {
-    UIcon,
-    UAvatar
-  },
-  inheritAttrs: false,
-  props: {
-    label: {
-      type: String,
-      default: null
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    avatar: {
-      type: Object,
-      default: null
-    },
-    size: {
-      type: String,
-      default: () => config.default.size,
-      validator(value) {
-        return Object.keys(config.border.size.horizontal).includes(value) || Object.keys(config.border.size.vertical).includes(value);
-      }
-    },
-    orientation: {
-      type: String,
-      default: "horizontal",
-      validator: (value) => ["horizontal", "vertical"].includes(value)
-    },
-    type: {
-      type: String,
-      default: "solid",
-      validator: (value) => ["solid", "dotted", "dashed"].includes(value)
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("divider", toRef(props, "ui"), config);
-    const wrapperClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.wrapper.base,
-        ui.value.wrapper[props.orientation]
-      ), props.class);
-    });
-    const containerClass = computed(() => {
-      return twJoin(
-        ui.value.container.base,
-        ui.value.container[props.orientation]
-      );
-    });
-    const borderClass = computed(() => {
-      return twJoin(
-        ui.value.border.base,
-        ui.value.border[props.orientation],
-        ui.value.border.size[props.orientation][props.size],
-        ui.value.border.type[props.type]
-      );
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      wrapperClass,
-      containerClass,
-      borderClass
-    };
-  }
-});
-</script>

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

@@ -1,198 +0,0 @@
-import type { PropType } from 'vue';
-import type { Avatar, DividerSize, Strategy } from '../../types/index.js';
-declare const config: {
-    wrapper: {
-        base: string;
-        horizontal: string;
-        vertical: string;
-    };
-    container: {
-        base: string;
-        horizontal: string;
-        vertical: string;
-    };
-    border: {
-        base: string;
-        horizontal: string;
-        vertical: string;
-        size: {
-            horizontal: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-            vertical: {
-                '2xs': string;
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-            };
-        };
-        type: {
-            solid: string;
-            dotted: string;
-            dashed: string;
-        };
-    };
-    icon: {
-        base: string;
-    };
-    avatar: {
-        base: string;
-        size: "2xs";
-    };
-    label: string;
-    default: {
-        size: "2xs";
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    label: {
-        type: StringConstructor;
-        default: any;
-    };
-    icon: {
-        type: StringConstructor;
-        default: any;
-    };
-    avatar: {
-        type: PropType<Avatar>;
-        default: any;
-    };
-    size: {
-        type: PropType<DividerSize>;
-        default: () => "2xs";
-        validator(value: string): boolean;
-    };
-    orientation: {
-        type: PropType<"horizontal" | "vertical">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    type: {
-        type: PropType<"solid" | "dotted" | "dashed">;
-        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: {
-            base: string;
-            horizontal: string;
-            vertical: string;
-        };
-        container: {
-            base: string;
-            horizontal: string;
-            vertical: string;
-        };
-        border: {
-            base: string;
-            horizontal: string;
-            vertical: string;
-            size: {
-                horizontal: {
-                    '2xs': string;
-                    xs: string;
-                    sm: string;
-                    md: string;
-                    lg: string;
-                    xl: string;
-                };
-                vertical: {
-                    '2xs': string;
-                    xs: string;
-                    sm: string;
-                    md: string;
-                    lg: string;
-                    xl: string;
-                };
-            };
-            type: {
-                solid: string;
-                dotted: string;
-                dashed: string;
-            };
-        };
-        icon: {
-            base: string;
-        };
-        avatar: {
-            base: string;
-            size: "2xs";
-        };
-        label: string;
-        default: {
-            size: "2xs";
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    wrapperClass: import("vue").ComputedRef<string>;
-    containerClass: import("vue").ComputedRef<string>;
-    borderClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    label: {
-        type: StringConstructor;
-        default: any;
-    };
-    icon: {
-        type: StringConstructor;
-        default: any;
-    };
-    avatar: {
-        type: PropType<Avatar>;
-        default: any;
-    };
-    size: {
-        type: PropType<DividerSize>;
-        default: () => "2xs";
-        validator(value: string): boolean;
-    };
-    orientation: {
-        type: PropType<"horizontal" | "vertical">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    type: {
-        type: PropType<"solid" | "dotted" | "dashed">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>>, {
-    size: DividerSize;
-    type: "solid" | "dotted" | "dashed";
-    class: any;
-    avatar: any;
-    label: string;
-    orientation: "horizontal" | "vertical";
-    ui: {};
-    icon: string;
-}, {}>;
-export default _default;

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

@@ -1,46 +0,0 @@
-<template>
-  <component :is="as" :class="skeletonClass" v-bind="attrs" />
-</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 { skeleton } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.skeleton, skeleton);
-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("skeleton", toRef(props, "ui"), config);
-    const skeletonClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.base,
-        ui.value.background,
-        ui.value.rounded
-      ), props.class);
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      skeletonClass
-    };
-  }
-});
-</script>

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

@@ -1,53 +0,0 @@
-import type { PropType } from 'vue';
-import type { Strategy } from '../../types/index.js';
-declare const config: {
-    base: string;
-    background: string;
-    rounded: 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;
-        rounded: string;
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    skeletonClass: 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/navigation/Breadcrumb.vue

@@ -1,82 +0,0 @@
-<template>
-  <nav aria-label="Breadcrumb" :class="ui.wrapper" v-bind="attrs">
-    <ol :class="ui.ol">
-      <li v-for="(link, index) in links" :key="index" :class="ui.li">
-        <ULink
-          as="span"
-          :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
-          :aria-current="index === links.length - 1 ? 'page' : undefined"
-          v-bind="getULinkProps(link)"
-          @click="link.click"
-        >
-          <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
-            <UIcon
-              v-if="link.icon"
-              :name="link.icon"
-              :class="twMerge(twJoin(ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : ''), link.iconClass)"
-            />
-          </slot>
-
-          <slot :link="link" :index="index" :is-active="index === links.length - 1">
-            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">{{ link.label }}</span>
-          </slot>
-        </ULink>
-
-        <slot v-if="index < links.length - 1" name="divider">
-          <template v-if="divider">
-            <UIcon v-if="divider.startsWith('i-')" :name="divider" :class="ui.divider.base" role="presentation" />
-            <span v-else role="presentation">{{ divider }}</span>
-          </template>
-        </slot>
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<script>
-import { defineComponent, toRef } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import ULink from "../elements/Link.vue";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig, getULinkProps } from "../../utils";
-import appConfig from "#build/app.config";
-import { breadcrumb } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.breadcrumb, breadcrumb);
-export default defineComponent({
-  components: {
-    UIcon,
-    ULink
-  },
-  inheritAttrs: false,
-  props: {
-    links: {
-      type: Array,
-      default: () => []
-    },
-    divider: {
-      type: String,
-      default: () => config.default.divider
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("breadcrumb", toRef(props, "ui"), config, toRef(props, "class"));
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      getULinkProps,
-      twMerge,
-      twJoin
-    };
-  }
-});
-</script>

package/dist/runtime/components/navigation/Breadcrumb.vue.d.ts

@@ -1,95 +0,0 @@
-import type { PropType } from 'vue';
-import { twJoin } from 'tailwind-merge';
-import type { BreadcrumbLink, Strategy } from '../../types/index.js';
-declare const config: {
-    wrapper: string;
-    ol: string;
-    li: string;
-    base: string;
-    label: string;
-    icon: {
-        base: string;
-        active: string;
-        inactive: string;
-    };
-    divider: {
-        base: string;
-    };
-    active: string;
-    inactive: string;
-    default: {
-        divider: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    links: {
-        type: PropType<BreadcrumbLink[]>;
-        default: () => any[];
-    };
-    divider: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        ol: string;
-        li: string;
-        base: string;
-        label: string;
-        icon: {
-            base: string;
-            active: string;
-            inactive: string;
-        };
-        divider: {
-            base: string;
-        };
-        active: string;
-        inactive: string;
-        default: {
-            divider: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    getULinkProps: (props: any) => {};
-    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
-    twJoin: typeof twJoin;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    links: {
-        type: PropType<BreadcrumbLink[]>;
-        default: () => any[];
-    };
-    divider: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>>, {
-    class: any;
-    ui: {};
-    divider: string;
-    links: BreadcrumbLink[];
-}, {}>;
-export default _default;