sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseAvatar.stories.js

@@ -1,39 +1,39 @@
-import BaseAvatar from "./BaseAvatar.vue";
-
-export default {
-  title: "Data/BaseAvatar",
-  component: BaseAvatar,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["xs", "sm", "base", "lg", "xl"],
-    },
-    detailsPosition: {
-      control: { type: "select" },
-      options: ["left", "right"],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseAvatar },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseAvatar v-bind="args"></BaseAvatar>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  showDetails: true,
-  user: {
-    email: "jane@witify.io",
-    first_name: "Jane",
-    last_name: "Doe",
-    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",
-  },
-};
+import BaseAvatar from "./BaseAvatar.vue";
+
+export default {
+  title: "Data/BaseAvatar",
+  component: BaseAvatar,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "base", "lg", "xl"],
+    },
+    detailsPosition: {
+      control: { type: "select" },
+      options: ["left", "right"],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseAvatar },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseAvatar v-bind="args"></BaseAvatar>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  showDetails: true,
+  user: {
+    email: "jane@witify.io",
+    first_name: "Jane",
+    last_name: "Doe",
+    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",
+  },
+};

package/src/components/BaseAvatar.vue

@@ -1,164 +1,164 @@
-<template>
-  <BaseTooltip
-    v-if="user"
-    :visible="tooltip"
-    :text="tooltipText"
-    :class="classInternal"
-  >
-    <component
-      :is="to ? 'RouterLink' : 'div'"
-      :to="to"
-      class="flex items-center"
-    >
-      <img
-        :src="user.avatar_url"
-        :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
-        class="shrink-0 block 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 opacity-50">
-          {{ user.email }}
-        </div>
-      </div>
-    </component>
-  </BaseTooltip>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { User } from '@/types/User';
-import { RouteLocationRaw } from 'vue-router';
-import { twMerge } from 'tailwind-merge';
-import BaseTooltip from './BaseTooltip.vue';
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-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'>,
-  },
-  class: {
-    default: '',
-    type: String,
-  },
-  tooltip: {
-    default: false,
-    type: Boolean,
-  },
-  to: {
-    default: undefined,
-    type: [String, Object] as PropType<RouteLocationRaw>,
-  },
-});
-
-const classInternal = computed(() => {
-  return twMerge(
-    'inline-flex',
-    'shrink-0',
-    'items-center',
-    props.class,
-  );
-})
-
-const tooltipText = computed(() => {
-
-  if (!props.tooltip) {
-    return null;
-  }
-
-  return `<p class="font-medium leading-tight">
-  ${props.user.full_name}
-</p>
-<p class="text-slate-500 leading-tight">
-  ${props.user.email}
-</p>`;
-})
-
-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>
+  <BaseTooltip
+    v-if="user"
+    :visible="tooltip"
+    :text="tooltipText"
+    :class="classInternal"
+  >
+    <component
+      :is="to ? 'RouterLink' : 'div'"
+      :to="to"
+      class="flex items-center"
+    >
+      <img
+        :src="user.avatar_url"
+        :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
+        class="shrink-0 block 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 opacity-50">
+          {{ user.email }}
+        </div>
+      </div>
+    </component>
+  </BaseTooltip>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { User } from '@/types/User';
+import { RouteLocationRaw } from 'vue-router';
+import { twMerge } from 'tailwind-merge';
+import BaseTooltip from './BaseTooltip.vue';
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+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'>,
+  },
+  class: {
+    default: '',
+    type: String,
+  },
+  tooltip: {
+    default: false,
+    type: Boolean,
+  },
+  to: {
+    default: undefined,
+    type: [String, Object] as PropType<RouteLocationRaw>,
+  },
+});
+
+const classInternal = computed(() => {
+  return twMerge(
+    'inline-flex',
+    'shrink-0',
+    'items-center',
+    props.class,
+  );
+})
+
+const tooltipText = computed(() => {
+
+  if (!props.tooltip) {
+    return null;
+  }
+
+  return `<p class="font-medium leading-tight">
+  ${props.user.full_name}
+</p>
+<p class="text-slate-500 leading-tight">
+  ${props.user.email}
+</p>`;
+})
+
+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 with a very long name",
-  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 with a very long name",
+  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;
+  },
+};