sprintify-ui 0.11.31 → 0.11.32

package/dist/sprintify-ui.es.js

@@ -11610,28 +11610,31 @@ const FM = ["src"], _M = ["fill"], VM = ["font-size"], jM = { class: "truncate"
           return "1rem";
       }
     }), r = S(() => t.max > 3 ? t.max : 3), o = S(() => t.users.length > r.value ? t.users.slice(0, r.value) : t.users), i = S(() => Array.isArray(t.users) && t.users.length > r.value ? t.users.length - r.value : 0), s = S(() => (Array.isArray(t.users) && t.users.length > r.value) ?? !1), l = S(() => {
-      const u = "h-9 w-9";
-      return t.size == "xs" ? "h-6 w-6" : t.size == "sm" ? "h-8 w-8" : t.size == "base" ? u : t.size == "lg" ? "h-12 w-12" : t.size == "xl" ? "h-14 w-14" : u;
+      const c = "h-9 w-9";
+      return t.size == "xs" ? "h-6 w-6" : t.size == "sm" ? "h-8 w-8" : t.size == "base" ? c : t.size == "lg" ? "h-12 w-12" : t.size == "xl" ? "h-14 w-14" : c;
     }), a = S(() => {
-      const u = "text-xs";
-      return t.size == "xs" ? "text-[8px]" : t.size == "sm" ? "text-[10px]" : t.size == "base" ? "text-xs" : t.size == "lg" || t.size == "xl" ? "text-sm" : u;
+      const c = "text-xs";
+      return t.size == "xs" ? "text-[8px]" : t.size == "sm" ? "text-[10px]" : t.size == "base" ? "text-xs" : t.size == "lg" || t.size == "xl" ? "text-sm" : c;
     });
-    return (u, c) => (k(), $("div", WM, [
-      (k(!0), $(Re, null, Ge(g(o), (d, f) => (k(), $("div", {
-        key: d.email + "-" + f,
+    function u(c, d) {
+      return `${c.email || c.name || c.full_name || c.label || c.avatar_url || d}-${d}`;
+    }
+    return (c, d) => (k(), $("div", WM, [
+      (k(!0), $(Re, null, Ge(g(o), (f, p) => (k(), $("div", {
+        key: u(f, p),
         class: "shrink-0",
         style: Fe({
-          marginLeft: f === 0 ? "0" : "-" + g(e)
+          marginLeft: p === 0 ? "0" : "-" + g(e)
         })
       }, [
         A("div", qM, [
           ee(Ys, {
             class: "flex",
             tooltip: n.tooltip,
-            user: d,
+            user: f,
             size: n.size,
             "show-details": !1,
-            to: n.to ? n.to(d) : void 0
+            to: n.to ? n.to(f) : void 0
           }, null, 8, ["tooltip", "user", "size", "to"])
         ])
       ], 4))), 128)),

package/dist/types/components/BaseAvatar.vue.d.ts

@@ -1,10 +1,6 @@
 import { PropType } from 'vue';
-import { User } from '@/types/User';
+import { AvatarUserInput } from '@/types/User';
 import { RouteLocationRaw } from 'vue-router';
-type AvatarUserInput = Partial<User> & {
-    name?: string;
-    label?: string;
-};
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     user: {
         default: undefined;

package/dist/types/components/BaseAvatarGroup.vue.d.ts

@@ -1,10 +1,10 @@
-import { User } from '@/types/User';
+import { AvatarUserInput } from '@/types/User';
 import { PropType } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     users: {
         required: true;
-        type: PropType<User[]>;
+        type: PropType<AvatarUserInput[]>;
     };
     size: {
         default: string;
@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     to: {
         default: undefined;
-        type: PropType<(user: User) => RouteLocationRaw>;
+        type: PropType<(user: AvatarUserInput) => RouteLocationRaw>;
     };
     max: {
         default: number;
@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     users: {
         required: true;
-        type: PropType<User[]>;
+        type: PropType<AvatarUserInput[]>;
     };
     size: {
         default: string;
@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     to: {
         default: undefined;
-        type: PropType<(user: User) => RouteLocationRaw>;
+        type: PropType<(user: AvatarUserInput) => RouteLocationRaw>;
     };
     max: {
         default: number;
@@ -44,7 +44,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
     };
 }>> & Readonly<{}>, {
-    to: (user: User) => RouteLocationRaw;
+    to: (user: AvatarUserInput) => RouteLocationRaw;
     size: string;
     max: number;
     tooltip: boolean;

package/dist/types/types/User.d.ts

@@ -3,4 +3,8 @@ interface User {
     email?: string;
     avatar_url?: string;
 }
-export type { User };
+type AvatarUserInput = Partial<User> & {
+    name?: string;
+    label?: string;
+};
+export type { User, AvatarUserInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.31",
+  "version": "0.11.32",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseAvatar.vue

@@ -65,7 +65,7 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { User } from '@/types/User';
+import { AvatarUserInput } from '@/types/User';
 import { RouteLocationRaw } from 'vue-router';
 import { twMerge } from 'tailwind-merge';
 import BaseTooltip from './BaseTooltip.vue';
@@ -75,11 +75,6 @@ defineOptions({
   inheritAttrs: false,
 })
 
-type AvatarUserInput = Partial<User> & {
-  name?: string;
-  label?: string;
-};
-
 const props = defineProps({
   user: {
     default: undefined,

package/src/components/BaseAvatarGroup.vue

@@ -2,7 +2,7 @@
   <div class="flex items-center -space-x-4">
     <div
       v-for="(user, index) in users"
-      :key="user.email + '-' + index"
+      :key="getUserKey(user, index)"
       class="shrink-0"
       :style="{
         marginLeft: index === 0 ? '0' : '-' + spacing,
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { User } from '@/types/User';
+import { AvatarUserInput } from '@/types/User';
 import { PropType } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import BaseAvatar from './BaseAvatar.vue';
@@ -48,7 +48,7 @@ import BaseAvatar from './BaseAvatar.vue';
 const props = defineProps({
   users: {
     required: true,
-    type: Array as PropType<User[]>,
+    type: Array as PropType<AvatarUserInput[]>,
   },
   size: {
     default: 'base',
@@ -56,7 +56,7 @@ const props = defineProps({
   },
   to: {
     default: undefined,
-    type: Function as PropType<(user: User) => RouteLocationRaw>,
+    type: Function as PropType<(user: AvatarUserInput) => RouteLocationRaw>,
   },
   max: {
     default: 10,
@@ -149,4 +149,16 @@ const fontSizeClass = computed((): string => {
   }
   return base;
 });
+
+function getUserKey(user: AvatarUserInput, index: number): string {
+  const key =
+    user.email ||
+    user.name ||
+    user.full_name ||
+    user.label ||
+    user.avatar_url ||
+    index;
+
+  return `${key}-${index}`;
+}
 </script>

package/src/types/User.ts

@@ -4,4 +4,9 @@ interface User {
   avatar_url?: string;
 }
 
-export type { User };
+type AvatarUserInput = Partial<User> & {
+  name?: string;
+  label?: string;
+};
+
+export type { User, AvatarUserInput };