sprintify-ui 0.4.5 → 0.4.7

package/src/components/BaseAvatar.vue

@@ -1,120 +1,120 @@
-<template>
-  <component
-    :is="to ? 'RouterLink' : 'div'"
-    :to="to"
-    class="flex shrink-0 items-center"
-  >
-    <img
-      :src="user.avatar_url"
-      :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
-      class="shrink-0 overflow-hidden rounded-full object-cover object-center"
-    >
-    <div
-      v-if="showDetails"
-      class="max-w-[120px] grow leading-tight"
-      :class="[
-        textSizeClass,
-        detailsPosition == 'left' ? 'order-1 text-right' : 'order-2 text-left',
-      ]"
-      :style="{
-        marginLeft: detailsPosition == 'right' ? spacing : '0',
-        marginRight: detailsPosition == 'left' ? spacing : '0',
-      }"
-    >
-      <div class="truncate">
-        {{ user.full_name }}
-      </div>
-      <div class="truncate font-light opacity-50">
-        {{ user.email }}
-      </div>
-    </div>
-  </component>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { User } from '@/types/User';
-import { RouteLocationRaw } from 'vue-router';
-
-const props = defineProps({
-  user: {
-    required: true,
-    type: Object as PropType<User>,
-  },
-  size: {
-    default: 'base',
-    type: String,
-  },
-  showDetails: {
-    default: false,
-    type: Boolean,
-  },
-  detailsPosition: {
-    default: 'right',
-    type: String as PropType<'left' | 'right'>,
-  },
-  to: {
-    default: undefined,
-    type: [String, Object] as PropType<RouteLocationRaw>,
-  },
-});
-
-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 textSizeClass = computed((): string => {
-  const base = 'text-sm';
-
-  if (props.size == 'xs') {
-    return 'text-[11px]';
-  }
-  if (props.size == 'sm') {
-    return 'text-xs';
-  }
-  if (props.size == 'base') {
-    return base;
-  }
-  if (props.size == 'lg') {
-    return 'text-sm';
-  }
-  if (props.size == 'xl') {
-    return 'text-base';
-  }
-  return base;
-});
-
-const spacing = computed(() => {
-  switch (props.size) {
-    case 'xl':
-      return '0.95rem';
-    case 'lg':
-      return '0.85rem';
-    case 'base':
-      return '0.75rem';
-    case 'sm':
-      return '0.65rem';
-    case 'xs':
-      return '0.5rem';
-    default:
-      return '1rem';
-  }
-});
-</script>
+<template>
+  <component
+    :is="to ? 'RouterLink' : 'div'"
+    :to="to"
+    class="flex shrink-0 items-center"
+  >
+    <img
+      :src="user.avatar_url"
+      :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
+      class="shrink-0 overflow-hidden rounded-full object-cover object-center"
+    >
+    <div
+      v-if="showDetails"
+      class="max-w-[120px] grow leading-tight"
+      :class="[
+        textSizeClass,
+        detailsPosition == 'left' ? 'order-1 text-right' : 'order-2 text-left',
+      ]"
+      :style="{
+        marginLeft: detailsPosition == 'right' ? spacing : '0',
+        marginRight: detailsPosition == 'left' ? spacing : '0',
+      }"
+    >
+      <div class="truncate">
+        {{ user.full_name }}
+      </div>
+      <div class="truncate font-light opacity-50">
+        {{ user.email }}
+      </div>
+    </div>
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { User } from '@/types/User';
+import { RouteLocationRaw } from 'vue-router';
+
+const props = defineProps({
+  user: {
+    required: true,
+    type: Object as PropType<User>,
+  },
+  size: {
+    default: 'base',
+    type: String,
+  },
+  showDetails: {
+    default: false,
+    type: Boolean,
+  },
+  detailsPosition: {
+    default: 'right',
+    type: String as PropType<'left' | 'right'>,
+  },
+  to: {
+    default: undefined,
+    type: [String, Object] as PropType<RouteLocationRaw>,
+  },
+});
+
+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 textSizeClass = computed((): string => {
+  const base = 'text-sm';
+
+  if (props.size == 'xs') {
+    return 'text-[11px]';
+  }
+  if (props.size == 'sm') {
+    return 'text-xs';
+  }
+  if (props.size == 'base') {
+    return base;
+  }
+  if (props.size == 'lg') {
+    return 'text-sm';
+  }
+  if (props.size == 'xl') {
+    return 'text-base';
+  }
+  return base;
+});
+
+const spacing = computed(() => {
+  switch (props.size) {
+    case 'xl':
+      return '0.95rem';
+    case 'lg':
+      return '0.85rem';
+    case 'base':
+      return '0.75rem';
+    case 'sm':
+      return '0.65rem';
+    case 'xs':
+      return '0.5rem';
+    default:
+      return '1rem';
+  }
+});
+</script>

package/src/components/BaseAvatarGroup.stories.js

@@ -1,71 +1,71 @@
-import BaseAvatarGroup from './BaseAvatarGroup.vue';
-
-export default {
-  title: 'Data/BaseAvatarGroup',
-  component: BaseAvatarGroup,
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: ['xs', 'sm', 'base', 'lg', 'xl'],
-    },
-  },
-};
-
-const user = {
-  email: 'jane@witify.io',
-  full_name: 'Jane Doe',
-  avatar_url:
-    'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
-};
-
-const n = 40;
-
-const users = [];
-
-for (let i = 0; i < n; i++) {
-  users.push(user);
-}
-
-const Template = (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 Demo = Template.bind({});
-Demo.args = {
-  users: users,
-  to(user) {
-    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;
-  },
-};
+import BaseAvatarGroup from './BaseAvatarGroup.vue';
+
+export default {
+  title: 'Data/BaseAvatarGroup',
+  component: BaseAvatarGroup,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'base', 'lg', 'xl'],
+    },
+  },
+};
+
+const user = {
+  email: 'jane@witify.io',
+  full_name: 'Jane Doe',
+  avatar_url:
+    'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+};
+
+const n = 40;
+
+const users = [];
+
+for (let i = 0; i < n; i++) {
+  users.push(user);
+}
+
+const Template = (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 Demo = Template.bind({});
+Demo.args = {
+  users: users,
+  to(user) {
+    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

@@ -1,148 +1,148 @@
-<template>
-  <div class="flex items-center -space-x-4">
-    <div
-      v-for="(user, index) in users"
-      :key="user.email + '-' + index"
-      role="tooltip"
-      class="shrink-0"
-      :aria-label="user.full_name + '\n' + user.email"
-      :style="{
-        marginLeft: index === 0 ? '0' : '-' + spacing,
-      }"
-    >
-      <div class="rounded-full border-[3px] border-white">
-        <BaseAvatar
-          :user="user"
-          :size="size"
-          :show-details="false"
-          :to="to ? to(user) : undefined"
-        />
-      </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>
-
-<script lang="ts" setup>
-import { User } from '@/types/User';
-import { PropType } from 'vue';
-import { RouteLocationRaw } from 'vue-router';
-import BaseAvatar from './BaseAvatar.vue';
-
-const props = defineProps({
-  users: {
-    required: true,
-    type: Array as PropType<User[]>,
-  },
-  size: {
-    default: 'base',
-    type: String,
-  },
-  to: {
-    default: undefined,
-    type: Function as PropType<(user: User) => RouteLocationRaw>,
-  },
-  max: {
-    default: 10,
-    type: Number,
-  },
-});
-
-const spacing = computed(() => {
-  switch (props.size) {
-    case 'xl':
-      return '1.4rem';
-    case 'lg':
-      return '1.25rem';
-    case 'base':
-      return '1rem';
-    case 'sm':
-      return '0.875rem';
-    case 'xs':
-      return '0.8rem';
-    default:
-      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>
+<template>
+  <div class="flex items-center -space-x-4">
+    <div
+      v-for="(user, index) in users"
+      :key="user.email + '-' + index"
+      role="tooltip"
+      class="shrink-0"
+      :aria-label="user.full_name + '\n' + user.email"
+      :style="{
+        marginLeft: index === 0 ? '0' : '-' + spacing,
+      }"
+    >
+      <div class="rounded-full border-[3px] border-white">
+        <BaseAvatar
+          :user="user"
+          :size="size"
+          :show-details="false"
+          :to="to ? to(user) : undefined"
+        />
+      </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>
+
+<script lang="ts" setup>
+import { User } from '@/types/User';
+import { PropType } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+import BaseAvatar from './BaseAvatar.vue';
+
+const props = defineProps({
+  users: {
+    required: true,
+    type: Array as PropType<User[]>,
+  },
+  size: {
+    default: 'base',
+    type: String,
+  },
+  to: {
+    default: undefined,
+    type: Function as PropType<(user: User) => RouteLocationRaw>,
+  },
+  max: {
+    default: 10,
+    type: Number,
+  },
+});
+
+const spacing = computed(() => {
+  switch (props.size) {
+    case 'xl':
+      return '1.4rem';
+    case 'lg':
+      return '1.25rem';
+    case 'base':
+      return '1rem';
+    case 'sm':
+      return '0.875rem';
+    case 'xs':
+      return '0.8rem';
+    default:
+      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>