@una-ui/nuxt 0.49.1 → 0.49.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.49.1",
+  "version": "0.49.3",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -8,7 +8,7 @@ import 'unocss';
 import 'unocss-preset-animations';
 
 const name = "@una-ui/nuxt";
-const version = "0.49.1";
+const version = "0.49.3";
 
 const module = defineNuxtModule({
   meta: {

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

@@ -1,23 +1,116 @@
 <script setup lang="ts">
 import type { NAvatarGroupProps } from '../../types'
-import NAvatarGroupDefaultSlot from '../slots/AvatarGroupDefault'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { computed, h } from 'vue'
+import { cn } from '../../utils'
+import Avatar from './avatar/Avatar.vue'
 
 const props = withDefaults(defineProps<NAvatarGroupProps>(), {
   max: 3,
+  as: 'div',
 })
+
+const slots = defineSlots()
+
+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 null
+        }
+
+        return child.children
+      }
+
+      return child
+    }).filter(Boolean)
+  }
+
+  return children || []
+})
+
+// Calculate visible and hidden avatars without circular dependencies
+const maxVisibleCount = computed(() => {
+  if (!max.value || max.value <= 0) {
+    return children.value.length
+  }
+  return Math.min(max.value, children.value.length)
+})
+
+const hiddenCount = computed(() => {
+  if (!children.value.length) {
+    return 0
+  }
+  return Math.max(0, children.value.length - maxVisibleCount.value)
+})
+
+const visibleAvatars = computed(() => {
+  if (!children.value.length) {
+    return []
+  }
+
+  // Take only the visible portion without modifying the original array
+  return [...children.value].slice(0, maxVisibleCount.value).reverse()
+})
+
+const displayAvatars = computed(() => {
+  const result = [...visibleAvatars.value]
+
+  if (hiddenCount.value > 0) {
+    const avatarProps = children.value.length > 0
+      ? reactiveOmit(children.value[0].props || {}, ['src', 'alt', 'label', 'icon'])
+      : {}
+
+    result.unshift(
+      h(Avatar, {
+        label: `+${hiddenCount.value}`,
+        class: cn(
+          props.una?.avatarGroupCount,
+        ),
+        una: {
+          avatarFallback: cn(
+            'avatar-group-count',
+            props.una?.avatarGroupCount,
+            avatarProps.una?.avatarFallback,
+          ),
+          ...avatarProps.una,
+        },
+        ...avatarProps,
+      }),
+    )
+  }
+
+  return result
+})
+
+const rootProps = reactiveOmit(props, ['max', 'as', 'asChild'])
 </script>
 
 <template>
-  <div
-    avatar-group
+  <Primitive
+    :as="as"
     :size
-    :class="una?.avatarGroup"
+    :class="cn(
+      'avatar-group',
+      una?.avatarGroup,
+    )"
+    :as-child
   >
-    <NAvatarGroupDefaultSlot
-      :max
-      :avatar="props"
-    >
-      <slot />
-    </NAvatarGroupDefaultSlot>
-  </div>
+    <component
+      :is="avatar"
+      v-for="(avatar, count) in displayAvatars"
+      v-bind="{ ...rootProps, ...avatar.props }"
+      :key="count"
+      :class="cn(
+        'avatar-group-item',
+        props.class,
+      )"
+    />
+  </Primitive>
 </template>

package/dist/runtime/components/slots/FormFieldDefault.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
     };
     modelValue: {
-        type: (NumberConstructor | BooleanConstructor | StringConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor)[];
         required: false;
     };
     id: {
@@ -38,7 +38,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
     };
     modelValue: {
-        type: (NumberConstructor | BooleanConstructor | StringConstructor)[];
+        type: (NumberConstructor | StringConstructor | BooleanConstructor)[];
         required: false;
     };
     id: {

package/dist/runtime/types/avatar-group.d.ts

@@ -1,10 +1,11 @@
+import type { PrimitiveProps } from 'reka-ui';
 import type { NAvatarProps } from './avatar.js';
 /**
  * This extends the `NAvatarProps` interface.
  *
  * @see https://github.com/una-ui/una-ui/blob/main/packages/nuxt/src/runtime/types/avatar.ts
  */
-export interface NAvatarGroupProps extends Omit<NAvatarProps, 'una'> {
+export interface NAvatarGroupProps extends Omit<NAvatarProps, 'src' | 'alt' | 'label' | 'una'>, PrimitiveProps {
     /**
      * Set the maximum number of avatars to show.
      *
@@ -19,8 +20,6 @@ export interface NAvatarGroupProps extends Omit<NAvatarProps, 'una'> {
      */
     una?: {
         avatarGroup?: string;
-        avatarGroupChild?: string;
-        avatarGroupMargin?: string;
-        avatarGroupLabel?: string;
+        avatarGroupCount?: string;
     } & NAvatarProps['una'];
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.49.1",
+  "version": "0.49.3",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -59,8 +59,8 @@
     "typescript": "5.6.3",
     "unocss": "^66.0.0",
     "unocss-preset-animations": "^1.1.1",
-    "@una-ui/extractor-vue-script": "^0.49.1",
-    "@una-ui/preset": "^0.49.1"
+    "@una-ui/extractor-vue-script": "^0.49.3",
+    "@una-ui/preset": "^0.49.3"
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.34",

package/dist/runtime/components/slots/AvatarGroupDefault.d.ts

@@ -1,22 +0,0 @@
-import type { PropType, VNode } from 'vue';
-import type { NAvatarGroupProps } from '../../types/index.js';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    max: {
-        type: NumberConstructor;
-        required: true;
-    };
-    avatar: {
-        type: PropType<NAvatarGroupProps>;
-    };
-}>, (() => null) | (() => (VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> | null)[]), {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    max: {
-        type: NumberConstructor;
-        required: true;
-    };
-    avatar: {
-        type: PropType<NAvatarGroupProps>;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/slots/AvatarGroupDefault.js

@@ -1,45 +0,0 @@
-import { cloneVNode, computed, defineComponent, h } from "vue";
-import Avatar from "../elements/avatar/Avatar.vue";
-export default defineComponent({
-  props: {
-    max: {
-      type: Number,
-      required: true
-    },
-    avatar: {
-      type: Object
-    }
-  },
-  setup(props, { slots }) {
-    const children = computed(() => slots.default?.()[0].children);
-    if (!children.value)
-      return () => null;
-    const countChildren = computed(() => children.value?.length);
-    const filterChildren = computed(() => {
-      if (countChildren.value <= props.max)
-        return children.value;
-      const childrenCopy = [...children.value];
-      childrenCopy.splice(props.max, countChildren.value - props.max);
-      return childrenCopy;
-    });
-    const clones = computed(() => filterChildren.value?.map((node) => {
-      const mergeProps = { ...props.avatar, ...node.props };
-      return cloneVNode(node, { ...mergeProps, class: "avatar-group-(child margin)" });
-    }).reverse());
-    const label = computed(() => {
-      if (countChildren.value <= props.max)
-        return null;
-      return h(Avatar, {
-        // TODO: add `more` configuration
-        class: "avatar-(soft group-margin)",
-        size: props.avatar?.size,
-        label: `+${countChildren.value - props.max}`,
-        una: { avatarLabel: `${props.avatar?.una?.avatarGroupLabel ?? ""} avatar-group-label` }
-      });
-    });
-    return () => [
-      label.value,
-      ...clones.value
-    ];
-  }
-});