@nuxt/ui 2.18.4 → 3.0.0-alpha.0

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

@@ -0,0 +1,384 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { AvatarFallbackProps } from 'radix-vue';
+declare const avatar: import("tailwind-variants").TVReturnType<{
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    icon: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}, {
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}>, {
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    icon: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}, {
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}>, {
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    icon: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}, {
+    size: {
+        "3xs": {
+            root: string;
+        };
+        "2xs": {
+            root: string;
+        };
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        "2xl": {
+            root: string;
+        };
+        "3xl": {
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>>;
+type AvatarVariants = VariantProps<typeof avatar>;
+export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'img'
+     */
+    as?: string | object;
+    src?: string;
+    alt?: string;
+    icon?: string;
+    text?: string;
+    size?: AvatarVariants['size'];
+    class?: any;
+    ui?: Partial<typeof avatar.slots>;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<AvatarProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<AvatarProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/runtime/components/AvatarGroup.vue

@@ -0,0 +1,74 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/avatar-group";
+const appConfig = _appConfig;
+const avatarGroup = tv({ extend: tv(theme), ...appConfig.ui?.avatarGroup || {} });
+</script>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { Primitive } from 'radix-vue'
+import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
+import UAvatar from './Avatar.vue'
+
+const props = defineProps<AvatarGroupProps>()
+const slots = defineSlots<AvatarGroupSlots>()
+
+const ui = computed(() => avatarGroup({
+  size: props.size
+}))
+
+const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
+
+const children = computed(() => {
+  let children = slots.default?.()
+  if (children?.length) {
+    children = children.flatMap((child: any) => {
+      if (typeof child.type === 'symbol') {
+        // `v-if="false"` or commented node
+        if (typeof child.children === 'string') {
+          return
+        }
+
+        return child.children
+      }
+
+      return child
+    }).filter(Boolean)
+  }
+
+  return children || []
+})
+
+const visibleAvatars = computed(() => {
+  if (!children.value.length) {
+    return []
+  }
+
+  if (!max.value || max.value <= 0) {
+    return [...children.value].reverse()
+  }
+
+  return [...children.value].slice(0, max.value).reverse()
+})
+
+const hiddenCount = computed(() => {
+  if (!children.value.length) {
+    return 0
+  }
+
+  return children.value.length - visibleAvatars.value.length
+})
+
+provide(avatarGroupInjectionKey, computed(() => ({
+  size: props.size
+})))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
+  </Primitive>
+</template>