@nuxt/ui 0.4.0 → 2.8.0

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

@@ -0,0 +1,120 @@
+<template>
+  <div :class="alertClass" v-bind="attrs">
+    <div class="flex gap-3" :class="{ 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }">
+      <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
+      <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+
+      <div class="w-0 flex-1">
+        <p :class="ui.title">
+          <slot name="title" :title="title">
+            {{ title }}
+          </slot>
+        </p>
+        <p v-if="description || $slots.description" :class="ui.description">
+          <slot name="description" :description="description">
+            {{ description }}
+          </slot>
+        </p>
+
+        <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
+        </div>
+      </div>
+      <div class="flex-shrink-0 flex items-center gap-3">
+        <div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
+        </div>
+
+        <UButton v-if="closeButton" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, 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 { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+import { omit } from "lodash-es";
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar,
+    UButton
+  },
+  inheritAttrs: false,
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: () => appConfig.ui.alert.default.icon
+    },
+    avatar: {
+      type: Object,
+      default: null
+    },
+    closeButton: {
+      type: Object,
+      default: () => appConfig.ui.alert.default.closeButton
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: String,
+      default: () => appConfig.ui.alert.default.color,
+      validator(value) {
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.alert.color)].includes(value);
+      }
+    },
+    variant: {
+      type: String,
+      default: () => appConfig.ui.alert.default.variant,
+      validator(value) {
+        return [
+          ...Object.keys(appConfig.ui.alert.variant),
+          ...Object.values(appConfig.ui.alert.color).flatMap((value2) => Object.keys(value2))
+        ].includes(value);
+      }
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["close"],
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.alert));
+    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)
+      ), attrs.class);
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      alertClass
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,107 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { Avatar } from '../../types/avatar';
+import type { Button } from '../../types/button';
+declare const _default: import("vue").DefineComponent<{
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        default: null;
+    };
+    icon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    avatar: {
+        type: PropType<Avatar>;
+        default: null;
+    };
+    closeButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    actions: {
+        type: PropType<(Button & {
+            click?: Function | undefined;
+        })[]>;
+        default: () => never[];
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    variant: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    alertClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        default: null;
+    };
+    icon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    avatar: {
+        type: PropType<Avatar>;
+        default: null;
+    };
+    closeButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    actions: {
+        type: PropType<(Button & {
+            click?: Function | undefined;
+        })[]>;
+        default: () => never[];
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    variant: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    description: string;
+    icon: string;
+    avatar: Avatar;
+    closeButton: Button;
+    actions: (Button & {
+        click?: Function | undefined;
+    })[];
+    color: string;
+    ui: any;
+    variant: string;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,149 @@
+<template>
+  <span :class="wrapperClass">
+    <img
+      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, watch } from "vue";
+import { twMerge, twJoin } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+import { omit } from "lodash-es";
+export default defineComponent({
+  components: {
+    UIcon
+  },
+  inheritAttrs: false,
+  props: {
+    src: {
+      type: [String, Boolean],
+      default: null
+    },
+    alt: {
+      type: String,
+      default: null
+    },
+    text: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: () => appConfig.ui.avatar.default.icon
+    },
+    size: {
+      type: String,
+      default: () => appConfig.ui.avatar.default.size,
+      validator(value) {
+        return Object.keys(appConfig.ui.avatar.size).includes(value);
+      }
+    },
+    chipColor: {
+      type: String,
+      default: () => appConfig.ui.avatar.default.chipColor,
+      validator(value) {
+        return ["gray", ...appConfig.ui.colors].includes(value);
+      }
+    },
+    chipPosition: {
+      type: String,
+      default: () => appConfig.ui.avatar.default.chipPosition,
+      validator(value) {
+        return Object.keys(appConfig.ui.avatar.chip.position).includes(value);
+      }
+    },
+    chipText: {
+      type: [String, Number],
+      default: null
+    },
+    imgClass: {
+      type: String,
+      default: ""
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.avatar));
+    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]
+      ), attrs.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 {
+      attrs: omit(attrs, ["class"]),
+      wrapperClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      imgClass,
+      iconClass,
+      chipClass,
+      url,
+      placeholder,
+      error,
+      onError
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,115 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    src: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: null;
+    };
+    alt: {
+        type: StringConstructor;
+        default: null;
+    };
+    text: {
+        type: StringConstructor;
+        default: null;
+    };
+    icon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    size: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    chipColor: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    chipPosition: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    chipText: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    imgClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    wrapperClass: import("vue").ComputedRef<string>;
+    imgClass: import("vue").ComputedRef<string>;
+    iconClass: import("vue").ComputedRef<string>;
+    chipClass: import("vue").ComputedRef<string>;
+    url: import("vue").ComputedRef<string | null>;
+    placeholder: import("vue").ComputedRef<string>;
+    error: import("vue").Ref<boolean>;
+    onError: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    src: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: null;
+    };
+    alt: {
+        type: StringConstructor;
+        default: null;
+    };
+    text: {
+        type: StringConstructor;
+        default: null;
+    };
+    icon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    size: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    chipColor: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    chipPosition: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    chipText: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    imgClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    alt: string;
+    icon: string;
+    ui: any;
+    src: string | boolean;
+    text: string;
+    size: string;
+    chipColor: string;
+    chipPosition: string;
+    chipText: string | number;
+    imgClass: string;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,37 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: StringConstructor;
+        default: null;
+        validator(value: string): boolean;
+    };
+    max: {
+        type: NumberConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: StringConstructor;
+        default: null;
+        validator(value: string): boolean;
+    };
+    max: {
+        type: NumberConstructor;
+        default: null;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    size: string;
+    max: number;
+}, {}>;
+export default _default;

package/dist/runtime/components/elements/AvatarGroup.mjs

@@ -0,0 +1,53 @@
+import { h, cloneVNode, computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import { defuTwMerge, getSlotsChildren } from "../../utils/index.mjs";
+import Avatar from "./Avatar.vue";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: null,
+      validator(value) {
+        return Object.keys(appConfig.ui.avatar.size).includes(value);
+      }
+    },
+    max: {
+      type: Number,
+      default: null
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs, slots }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.avatarGroup));
+    const children = computed(() => getSlotsChildren(slots));
+    const max = computed(() => typeof props.max === "string" ? parseInt(props.max, 10) : props.max);
+    const clones = computed(() => children.value.map((node, index) => {
+      const vProps = {};
+      if (!props.max || max.value && index < max.value) {
+        if (props.size) {
+          vProps.size = props.size;
+        }
+        vProps.class = node.props.class || "";
+        vProps.class = twMerge(twJoin(vProps.class, ui.value.ring, ui.value.margin), vProps.class);
+        return cloneVNode(node, vProps);
+      }
+      if (max.value !== void 0 && index === max.value) {
+        return h(Avatar, {
+          size: props.size || appConfig2.ui.avatar.default.size,
+          text: `+${children.value.length - max.value}`,
+          class: twJoin(ui.value.ring, ui.value.margin)
+        });
+      }
+      return null;
+    }).filter(Boolean).reverse());
+    return () => h("div", { class: twMerge(ui.value.wrapper, attrs.class), ...omit(attrs, ["class"]) }, clones.value);
+  }
+});

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

@@ -0,0 +1,69 @@
+<template>
+  <span :class="badgeClass" v-bind="attrs">
+    <slot>{{ label }}</slot>
+  </span>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: () => appConfig.ui.badge.default.size,
+      validator(value) {
+        return Object.keys(appConfig.ui.badge.size).includes(value);
+      }
+    },
+    color: {
+      type: String,
+      default: () => appConfig.ui.badge.default.color,
+      validator(value) {
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.badge.color)].includes(value);
+      }
+    },
+    variant: {
+      type: String,
+      default: () => appConfig.ui.badge.default.variant,
+      validator(value) {
+        return [
+          ...Object.keys(appConfig.ui.badge.variant),
+          ...Object.values(appConfig.ui.badge.color).flatMap((value2) => Object.keys(value2))
+        ].includes(value);
+      }
+    },
+    label: {
+      type: [String, Number],
+      default: null
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.badge));
+    const badgeClass = computed(() => {
+      const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.font,
+        ui.value.rounded,
+        ui.value.size[props.size],
+        variant?.replaceAll("{color}", props.color)
+      ), attrs.class);
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      badgeClass
+    };
+  }
+});
+</script>