sprintify-ui 0.10.65 → 0.10.66

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"
-      class="shrink-0"
-      :style="{
-        marginLeft: index === 0 ? '0' : '-' + spacing,
-      }"
-    >
-      <div class="rounded-full border-[3px] border-white">
-        <BaseAvatar
-          class="flex"
-          tooltip
-          :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"
+      class="shrink-0"
+      :style="{
+        marginLeft: index === 0 ? '0' : '-' + spacing,
+      }"
+    >
+      <div class="rounded-full border-[3px] border-white">
+        <BaseAvatar
+          class="flex"
+          tooltip
+          :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>

package/src/components/BaseBadge.stories.js

@@ -1,130 +1,130 @@
-import { sizes } from "../../.storybook/utils";
-import BaseBadge from "./BaseBadge.vue";
-
-import { palette } from "@/utils/colors";
-
-const colors = [...Object.keys(palette), "#ff0000", "#dbeafe"];
-
-export default {
-  title: "Components/BaseBadge",
-  component: BaseBadge,
-  argTypes: {
-    color: {
-      control: { type: "select" },
-      options: colors,
-    },
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-    contrast: {
-      control: { type: "select" },
-      options: ["low", "high"],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseBadge },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseBadge v-bind="args">
-      Urgent
-    </BaseBadge>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  color: "red",
-  icon: "heroicons:exclamation-triangle-20-solid",
-  contrast: "high",
-};
-
-export const Colors = (args) => ({
-  components: { BaseBadge },
-  setup() {
-    return { args, colors, sizes };
-  },
-  template: `
-  <div v-for="color in colors" :key="color" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
-    <BaseBadge v-bind="args" :color="color">
-      Administrator
-    </BaseBadge>
-  </div>
-  `,
-});
-
-Colors.args = {
-  contrast: "high",
-  icon: "heroicons:beaker-20-solid",
-};
-
-export const Contrast = (args) => ({
-  components: { BaseBadge },
-  setup() {
-    return { args, colors, sizes };
-  },
-  template: `
-  <div v-for="color in colors" :key="color" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
-    <BaseBadge v-bind="args" :color="color">
-      Administrator
-    </BaseBadge>
-  </div>
-  `,
-});
-
-Contrast.args = {
-  contrast: "low",
-  icon: "heroicons:beaker-20-solid",
-};
-
-export const Sizes = (args) => ({
-  components: { BaseBadge },
-  setup() {
-    return { args, colors, sizes };
-  },
-  template: `
-  <div v-for="size in sizes" :key="size" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
-    <BaseBadge v-bind="args" :size="size">
-      Administrator
-    </BaseBadge>
-  </div>
-  `,
-});
-
-Sizes.args = {
-  contrast: "high",
-  icon: "heroicons:beaker-20-solid",
-};
-
-export const Wrap = (args) => ({
-  components: { BaseBadge },
-  setup() {
-    return { args, colors, sizes };
-  },
-  template: `
-  <div style="width: 200px; background-color: #eee; padding: 10px;">
-
-    <p class="text-xs text-slate-600 leading-tight mb-1">No Wrap</p>
-    
-    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
-      Administrator And More And More And More
-    </BaseBadge>
-
-    <br />
-    <br />
-
-    <p class="text-xs text-slate-600 leading-tight mb-1">Wrap</p>
-
-    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
-      Administrator And More And More And More
-    </BaseBadge>
-  </div>
-  `,
-});
+import { sizes } from "../../.storybook/utils";
+import BaseBadge from "./BaseBadge.vue";
+
+import { palette } from "@/utils/colors";
+
+const colors = [...Object.keys(palette), "#ff0000", "#dbeafe"];
+
+export default {
+  title: "Components/BaseBadge",
+  component: BaseBadge,
+  argTypes: {
+    color: {
+      control: { type: "select" },
+      options: colors,
+    },
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+    contrast: {
+      control: { type: "select" },
+      options: ["low", "high"],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseBadge v-bind="args">
+      Urgent
+    </BaseBadge>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  color: "red",
+  icon: "heroicons:exclamation-triangle-20-solid",
+  contrast: "high",
+};
+
+export const Colors = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
+    <BaseBadge v-bind="args" :color="color">
+      Administrator
+    </BaseBadge>
+  </div>
+  `,
+});
+
+Colors.args = {
+  contrast: "high",
+  icon: "heroicons:beaker-20-solid",
+};
+
+export const Contrast = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
+    <BaseBadge v-bind="args" :color="color">
+      Administrator
+    </BaseBadge>
+  </div>
+  `,
+});
+
+Contrast.args = {
+  contrast: "low",
+  icon: "heroicons:beaker-20-solid",
+};
+
+export const Sizes = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" :key="size" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseBadge v-bind="args" :size="size">
+      Administrator
+    </BaseBadge>
+  </div>
+  `,
+});
+
+Sizes.args = {
+  contrast: "high",
+  icon: "heroicons:beaker-20-solid",
+};
+
+export const Wrap = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div style="width: 200px; background-color: #eee; padding: 10px;">
+
+    <p class="text-xs text-slate-600 leading-tight mb-1">No Wrap</p>
+    
+    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
+      Administrator And More And More And More
+    </BaseBadge>
+
+    <br />
+    <br />
+
+    <p class="text-xs text-slate-600 leading-tight mb-1">Wrap</p>
+
+    <BaseBadge v-bind="args" :color="color" icon="heroicons:beaker-20-solid">
+      Administrator And More And More And More
+    </BaseBadge>
+  </div>
+  `,
+});