sprintify-ui 0.11.29 → 0.11.31

package/dist/sprintify-ui.es.js

@@ -11429,9 +11429,21 @@ const FM = ["src"], _M = ["fill"], VM = ["font-size"], jM = { class: "truncate"
   __name: "BaseAvatar",
   props: {
     user: {
-      required: !0,
+      default: void 0,
       type: Object
     },
+    name: {
+      default: void 0,
+      type: String
+    },
+    email: {
+      default: void 0,
+      type: String
+    },
+    src: {
+      default: void 0,
+      type: String
+    },
     size: {
       default: "base",
       type: String
@@ -11459,28 +11471,31 @@ const FM = ["src"], _M = ["fill"], VM = ["font-size"], jM = { class: "truncate"
   },
   setup(n) {
     const t = n, e = S(() => {
-      var u;
-      return zM(((u = t.user) == null ? void 0 : u.full_name) || "");
+      var f, p, h, m;
+      return ((m = [t.name, (f = t.user) == null ? void 0 : f.name, (p = t.user) == null ? void 0 : p.full_name, (h = t.user) == null ? void 0 : h.label].find((v) => !!(v && v.trim()))) == null ? void 0 : m.trim()) || "";
     }), r = S(() => {
-      var u, c;
-      return PM(((u = t.user) == null ? void 0 : u.full_name) || "", (c = t.user) == null ? void 0 : c.email);
-    }), o = S(() => Ze(
+      var f;
+      return (t.email || ((f = t.user) == null ? void 0 : f.email) || "").trim();
+    }), o = S(() => {
+      var f;
+      return (t.src || ((f = t.user) == null ? void 0 : f.avatar_url) || "").trim();
+    }), i = S(() => zM(e.value)), s = S(() => PM(e.value, r.value)), l = S(() => Ze(
       "inline-flex",
       "shrink-0",
       "items-center",
       t.class
-    )), i = S(() => t.tooltip ? `<p class="font-medium leading-tight">
-  ${t.user.full_name}
+    )), a = S(() => !t.tooltip || !e.value && !r.value ? null : `<p class="font-medium leading-tight">
+  ${e.value}
 </p>
 <p class="text-slate-500 leading-tight">
-  ${t.user.email}
-</p>` : null), s = 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;
-    }), l = S(() => {
-      const u = "text-sm";
-      return t.size == "xs" ? "text-[11px]" : t.size == "sm" ? "text-xs" : t.size == "base" ? u : t.size == "lg" ? "text-sm" : t.size == "xl" ? "text-base" : u;
-    }), a = S(() => {
+  ${r.value}
+</p>`), u = S(() => {
+      const f = "h-9 w-9";
+      return t.size == "xs" ? "h-6 w-6" : t.size == "sm" ? "h-8 w-8" : t.size == "base" ? f : t.size == "lg" ? "h-12 w-12" : t.size == "xl" ? "h-14 w-14" : f;
+    }), c = S(() => {
+      const f = "text-sm";
+      return t.size == "xs" ? "text-[11px]" : t.size == "sm" ? "text-xs" : t.size == "base" ? f : t.size == "lg" ? "text-sm" : t.size == "xl" ? "text-base" : f;
+    }), d = S(() => {
       switch (t.size) {
         case "xl":
           return "0.95rem";
@@ -11496,11 +11511,10 @@ const FM = ["src"], _M = ["fill"], VM = ["font-size"], jM = { class: "truncate"
           return "1rem";
       }
     });
-    return (u, c) => n.user ? (k(), re(Qi, {
-      key: 0,
+    return (f, p) => (k(), re(Qi, {
       visible: n.tooltip,
-      text: g(i),
-      class: j(g(o))
+      text: g(a),
+      class: j(g(l))
     }, {
       default: Q(() => [
         (k(), re($n(n.to ? "RouterLink" : "div"), {
@@ -11508,20 +11522,20 @@ const FM = ["src"], _M = ["fill"], VM = ["font-size"], jM = { class: "truncate"
           class: "flex items-center"
         }, {
           default: Q(() => [
-            n.user.avatar_url ? (k(), $("img", {
+            g(o) ? (k(), $("img", {
               key: 0,
-              src: n.user.avatar_url,
-              class: j([[g(s), n.detailsPosition == "left" ? "order-2" : "order-1"], "shrink-0 block overflow-hidden rounded-full object-cover object-center"])
+              src: g(o),
+              class: j([[g(u), n.detailsPosition == "left" ? "order-2" : "order-1"], "shrink-0 block overflow-hidden rounded-full object-cover object-center"])
             }, null, 10, FM)) : (k(), $("svg", {
               key: 1,
               viewBox: "0 0 100 100",
-              class: j([[g(s), n.detailsPosition == "left" ? "order-2" : "order-1"], "shrink-0 block overflow-hidden rounded-full"])
+              class: j([[g(u), n.detailsPosition == "left" ? "order-2" : "order-1"], "shrink-0 block overflow-hidden rounded-full"])
             }, [
               A("circle", {
                 cx: "50",
                 cy: "50",
                 r: "50",
-                fill: g(r)
+                fill: g(s)
               }, null, 8, _M),
               A("text", {
                 x: "50",
@@ -11529,31 +11543,31 @@ const FM = ["src"], _M = ["fill"], VM = ["font-size"], jM = { class: "truncate"
                 "text-anchor": "middle",
                 "dominant-baseline": "central",
                 fill: "white",
-                "font-size": g(e).length === 1 ? "45" : "40",
+                "font-size": g(i).length === 1 ? "45" : "40",
                 "font-weight": "600",
                 "font-family": "system-ui, -apple-system, sans-serif"
-              }, ie(g(e)), 9, VM)
+              }, ie(g(i)), 9, VM)
             ], 2)),
             n.showDetails ? (k(), $("div", {
               key: 2,
               class: j(["max-w-[120px] grow leading-tight", [
-                g(l),
+                g(c),
                 n.detailsPosition == "left" ? "order-1 text-right" : "order-2 text-left"
               ]]),
               style: Fe({
-                marginLeft: n.detailsPosition == "right" ? g(a) : "0",
-                marginRight: n.detailsPosition == "left" ? g(a) : "0"
+                marginLeft: n.detailsPosition == "right" ? g(d) : "0",
+                marginRight: n.detailsPosition == "left" ? g(d) : "0"
               })
             }, [
-              A("div", jM, ie(n.user.full_name), 1),
-              A("div", HM, ie(n.user.email), 1)
+              A("div", jM, ie(g(e)), 1),
+              A("div", HM, ie(g(r)), 1)
             ], 6)) : Z("", !0)
           ]),
           _: 1
         }, 8, ["to"]))
       ]),
       _: 1
-    }, 8, ["visible", "text", "class"])) : Z("", !0);
+    }, 8, ["visible", "text", "class"]));
   }
 }), WM = { class: "flex items-center -space-x-4" }, qM = { class: "rounded-full border-[3px] border-white" }, UM = { class: "rounded-full border-[3px] border-white bg-slate-300" }, KM = { key: 0 }, YM = { key: 1 }, GM = /* @__PURE__ */ te({
   __name: "BaseAvatarGroup",

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

@@ -1,10 +1,26 @@
 import { PropType } from 'vue';
 import { User } 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: {
-        required: true;
-        type: PropType<User>;
+        default: undefined;
+        type: PropType<AvatarUserInput>;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    email: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    src: {
+        default: undefined;
+        type: StringConstructor;
     };
     size: {
         default: string;
@@ -32,8 +48,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     user: {
-        required: true;
-        type: PropType<User>;
+        default: undefined;
+        type: PropType<AvatarUserInput>;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    email: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    src: {
+        default: undefined;
+        type: StringConstructor;
     };
     size: {
         default: string;
@@ -61,9 +89,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     class: string;
+    email: string;
     to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
     size: string;
+    name: string;
     tooltip: boolean;
+    user: AvatarUserInput;
+    src: string;
     showDetails: boolean;
     detailsPosition: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/package.json

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

package/src/components/BaseAvatar.vue

@@ -1,6 +1,5 @@
 <template>
   <BaseTooltip
-    v-if="user"
     :visible="tooltip"
     :text="tooltipText"
     :class="classInternal"
@@ -11,8 +10,8 @@
       class="flex items-center"
     >
       <img
-        v-if="user.avatar_url"
-        :src="user.avatar_url"
+        v-if="resolvedUrl"
+        :src="resolvedUrl"
         :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
         class="shrink-0 block overflow-hidden rounded-full object-cover object-center"
       >
@@ -54,10 +53,10 @@
         }"
       >
         <div class="truncate">
-          {{ user.full_name }}
+          {{ resolvedName }}
         </div>
         <div class="truncate opacity-50">
-          {{ user.email }}
+          {{ resolvedEmail }}
         </div>
       </div>
     </component>
@@ -76,10 +75,27 @@ defineOptions({
   inheritAttrs: false,
 })
 
+type AvatarUserInput = Partial<User> & {
+  name?: string;
+  label?: string;
+};
+
 const props = defineProps({
   user: {
-    required: true,
-    type: Object as PropType<User>,
+    default: undefined,
+    type: Object as PropType<AvatarUserInput>,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  email: {
+    default: undefined,
+    type: String,
+  },
+  src: {
+    default: undefined,
+    type: String,
   },
   size: {
     default: 'base',
@@ -107,8 +123,23 @@ const props = defineProps({
   },
 });
 
-const initials = computed(() => getInitials(props.user?.full_name || ''));
-const avatarColor = computed(() => getAvatarColor(props.user?.full_name || '', props.user?.email));
+const resolvedName = computed(() => {
+  return (
+    [props.name, props.user?.name, props.user?.full_name, props.user?.label]
+      .find((value) => Boolean(value && value.trim()))?.trim() || ''
+  );
+});
+
+const resolvedEmail = computed(() => {
+  return (props.email || props.user?.email || '').trim();
+});
+
+const resolvedUrl = computed(() => {
+  return (props.src || props.user?.avatar_url || '').trim();
+});
+
+const initials = computed(() => getInitials(resolvedName.value));
+const avatarColor = computed(() => getAvatarColor(resolvedName.value, resolvedEmail.value));
 
 const classInternal = computed(() => {
   return twMerge(
@@ -125,11 +156,15 @@ const tooltipText = computed(() => {
     return null;
   }
 
+  if (!resolvedName.value && !resolvedEmail.value) {
+    return null;
+  }
+
   return `<p class="font-medium leading-tight">
-  ${props.user.full_name}
+  ${resolvedName.value}
 </p>
 <p class="text-slate-500 leading-tight">
-  ${props.user.email}
+  ${resolvedEmail.value}
 </p>`;
 })
 

package/src/components/BaseButton.vue

@@ -23,6 +23,7 @@
       />
 
       <slot />
+      
       <BaseIcon
         v-if="icon && iconPosition == 'end'"
         :icon="icon"