sprintify-ui 0.0.142 → 0.0.143

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

@@ -14,6 +14,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
         type: PropType<(user: User) => RouteLocationRaw>;
     };
+    max: {
+        default: number;
+        type: NumberConstructor;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     users: {
         required: true;
@@ -27,8 +31,13 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
         type: PropType<(user: User) => RouteLocationRaw>;
     };
+    max: {
+        default: number;
+        type: NumberConstructor;
+    };
 }>>, {
     to: (user: User) => RouteLocationRaw;
     size: string;
+    max: number;
 }>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.142",
+  "version": "0.0.143",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAvatarGroup.stories.js

@@ -18,23 +18,13 @@ const user = {
     'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
 };
 
-const users = [
-  user,
-  user,
-  user,
-  user,
-  user,
-  user,
-  user,
-  user,
-  user,
-  user,
-  user,
-  user,
-  user,
-  user,
-  user,
-];
+const n = 40;
+
+const users = [];
+
+for (let i = 0; i < n; i++) {
+  users.push(user);
+}
 
 const Template = (args) => ({
   components: { BaseAvatarGroup },
@@ -57,3 +47,25 @@ Demo.args = {
     return '/' + user.email;
   },
 };
+
+const TemplateWithMaxItems = (args) => ({
+  components: { BaseAvatarGroup },
+  setup() {
+    return { args };
+  },
+  template: `
+    <p class="text-sm mt-2">Demo</p>
+    <BaseAvatarGroup v-bind="args"></BaseAvatarGroup>
+
+    <p class="text-sm mt-2">With small container</p>
+    <div style="max-width: 200px; overflow: hidden;"><BaseAvatarGroup v-bind="args"></BaseAvatarGroup></div>
+  `,
+});
+
+export const MaxItems = TemplateWithMaxItems.bind({});
+MaxItems.args = {
+  users: users,
+  to(user) {
+    return '/' + user.email;
+  },
+};

package/src/components/BaseAvatarGroup.vue

@@ -19,6 +19,23 @@
         />
       </div>
     </div>
+    <div
+      v-if="isLimitReached"
+      class="z-10 shrink-0"
+      :style="{
+        marginLeft: '-' + spacing,
+      }"
+    >
+      <div class="rounded-full border-[3px] border-white bg-slate-300">
+        <div
+          :class="[sizeClass, fontSizeClass]"
+          class="flex items-center justify-center rounded-full font-semibold text-slate-700"
+        >
+          <span v-if="hiddenItemsCount > 99"> ... </span>
+          <span v-else> +{{ hiddenItemsCount }} </span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -41,6 +58,10 @@ const props = defineProps({
     default: undefined,
     type: Function as PropType<(user: User) => RouteLocationRaw>,
   },
+  max: {
+    default: 10,
+    type: Number,
+  },
 });
 
 const spacing = computed(() => {
@@ -59,4 +80,69 @@ const spacing = computed(() => {
       return '1rem';
   }
 });
+
+const maxInternal = computed(() => {
+  return props.max > 3 ? props.max : 3;
+});
+
+const users = computed(() => {
+  return props.users.length > maxInternal.value
+    ? props.users.slice(0, maxInternal.value)
+    : props.users;
+});
+
+const hiddenItemsCount = computed(() => {
+  return Array.isArray(props.users) && props.users.length > maxInternal.value
+    ? props.users.length - maxInternal.value
+    : 0;
+});
+
+const isLimitReached = computed(() => {
+  return (
+    (Array.isArray(props.users) && props.users.length > maxInternal.value) ??
+    false
+  );
+});
+
+const sizeClass = computed((): string => {
+  const base = 'h-9 w-9';
+
+  if (props.size == 'xs') {
+    return 'h-6 w-6';
+  }
+  if (props.size == 'sm') {
+    return 'h-8 w-8';
+  }
+  if (props.size == 'base') {
+    return base;
+  }
+  if (props.size == 'lg') {
+    return 'h-12 w-12';
+  }
+  if (props.size == 'xl') {
+    return 'h-14 w-14';
+  }
+  return base;
+});
+
+const fontSizeClass = computed((): string => {
+  const base = 'text-xs';
+
+  if (props.size == 'xs') {
+    return 'text-[8px]';
+  }
+  if (props.size == 'sm') {
+    return 'text-[10px]';
+  }
+  if (props.size == 'base') {
+    return 'text-xs';
+  }
+  if (props.size == 'lg') {
+    return 'text-sm';
+  }
+  if (props.size == 'xl') {
+    return 'text-sm';
+  }
+  return base;
+});
 </script>