sprintify-ui 0.10.65 → 0.10.66

package/src/components/BaseTimeline.stories.js

@@ -1,55 +1,55 @@
-import BaseTimeline from "./BaseTimeline.vue";
-
-export default {
-  title: "Data/BaseTimeline",
-  component: BaseTimeline,
-};
-
-const Template = (args) => ({
-  components: { BaseTimeline },
-  setup() {
-    return { args };
-  },
-  template: `<div class="max-w-md"><BaseTimeline v-bind="args"/></div>`,
-});
-
-const items = [
-  {
-    title: "Advanced to phone screening by Bethany Blake",
-    icon: "heroicons:shield-check-20-solid",
-    description:
-      "Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.",
-    color: null,
-    date: "15 Jan",
-  },
-  {
-    title: "Advanced to phone screening by Bethany Blake",
-    icon: "heroicons:shield-check-20-solid",
-    description:
-      "Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.",
-    color: "danger",
-    date: null,
-    onEdit: () => alert("edit"),
-    onDelete: () => alert("delete"),
-  },
-  {
-    title: "Advanced to phone screening by Bethany Blake",
-    icon: "heroicons:shield-check-20-solid",
-    description:
-      "Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.",
-    color: "success",
-    date: "15 Jan",
-  },
-  {
-    title: "Advanced to phone screening by Bethany Blake",
-    icon: "heroicons:shield-check-20-solid",
-    description: "",
-    color: "info",
-    date: "15 Jan",
-  },
-];
-
-export const Demo = Template.bind({});
-Demo.args = {
-  items: items,
-};
+import BaseTimeline from "./BaseTimeline.vue";
+
+export default {
+  title: "Data/BaseTimeline",
+  component: BaseTimeline,
+};
+
+const Template = (args) => ({
+  components: { BaseTimeline },
+  setup() {
+    return { args };
+  },
+  template: `<div class="max-w-md"><BaseTimeline v-bind="args"/></div>`,
+});
+
+const items = [
+  {
+    title: "Advanced to phone screening by Bethany Blake",
+    icon: "heroicons:shield-check-20-solid",
+    description:
+      "Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.",
+    color: null,
+    date: "15 Jan",
+  },
+  {
+    title: "Advanced to phone screening by Bethany Blake",
+    icon: "heroicons:shield-check-20-solid",
+    description:
+      "Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.",
+    color: "danger",
+    date: null,
+    onEdit: () => alert("edit"),
+    onDelete: () => alert("delete"),
+  },
+  {
+    title: "Advanced to phone screening by Bethany Blake",
+    icon: "heroicons:shield-check-20-solid",
+    description:
+      "Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.",
+    color: "success",
+    date: "15 Jan",
+  },
+  {
+    title: "Advanced to phone screening by Bethany Blake",
+    icon: "heroicons:shield-check-20-solid",
+    description: "",
+    color: "info",
+    date: "15 Jan",
+  },
+];
+
+export const Demo = Template.bind({});
+Demo.args = {
+  items: items,
+};

package/src/components/BaseTimeline.vue

@@ -1,38 +1,38 @@
-<template>
-  <div class="flow-root">
-    <ul
-      role="list"
-      class="-mb-8"
-    >
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-      >
-        <div
-          class="relative"
-          :class="[!item.onEdit && !item.onDelete ? 'pb-8' : 'pb-3']"
-        >
-          <span
-            v-if="index != items.length - 1"
-            class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-300"
-            aria-hidden="true"
-          />
-          <BaseTimelineItem :item="item" />
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { TimelineItem } from '../types';
-import { PropType } from 'vue';
-import BaseTimelineItem from './BaseTimelineItem.vue';
-
-defineProps({
-  items: {
-    required: true,
-    type: Array as PropType<TimelineItem[]>,
-  },
-});
-</script>
+<template>
+  <div class="flow-root">
+    <ul
+      role="list"
+      class="-mb-8"
+    >
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+      >
+        <div
+          class="relative"
+          :class="[!item.onEdit && !item.onDelete ? 'pb-8' : 'pb-3']"
+        >
+          <span
+            v-if="index != items.length - 1"
+            class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-300"
+            aria-hidden="true"
+          />
+          <BaseTimelineItem :item="item" />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TimelineItem } from '../types';
+import { PropType } from 'vue';
+import BaseTimelineItem from './BaseTimelineItem.vue';
+
+defineProps({
+  items: {
+    required: true,
+    type: Array as PropType<TimelineItem[]>,
+  },
+});
+</script>

package/src/components/BaseTimelineItem.stories.js

@@ -1,77 +1,77 @@
-import BaseTimelineItem from "./BaseTimelineItem.vue";
-
-const colors = [
-  "primary",
-  "success",
-  "danger",
-  "warning",
-  "info",
-  "grey",
-  "black",
-];
-
-export default {
-  title: "Data/BaseTimelineItem",
-  component: BaseTimelineItem,
-};
-
-const Template = (args) => ({
-  components: { BaseTimelineItem },
-  setup() {
-    return { args };
-  },
-  template: `<div class="max-w-md"><BaseTimelineItem v-bind="args"/></div>`,
-});
-
-const ColorsTemplate = (args) => ({
-  components: { BaseTimelineItem },
-  setup() {
-    const items = colors.map((color) => {
-      return {
-        title: "Advanced to phone screening by Bethany Blake",
-        icon: "heroicons:shield-check-20-solid",
-        description:
-          "Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.",
-        color: color,
-        date: "15 Jan",
-      };
-    });
-    return { args, items };
-  },
-  template: `
-  <div class="max-w-md">
-  <ul role="list" class="-mb-8">
-  <li v-for="(item, index) in items" :key="index">
-  <p class="text-xs text-slate-600 leading-tight mb-4">{{ item.color }}</p>
-        <div class="relative pb-8">
-          <BaseTimelineItem :item="item" />
-        </div>
-      </li>
-      </ul>
-      </div>
-  `,
-});
-
-export const Simple = Template.bind({});
-Simple.args = {
-  item: {
-    title: "Advanced to phone screening by Bethany Blake",
-    icon: "heroicons:shield-check-20-solid",
-    description: "",
-    color: "warning",
-    date: "15 Jan",
-  },
-};
-
-export const WithDescription = Template.bind({});
-WithDescription.args = {
-  item: {
-    title: "Advanced to phone screening by Bethany Blake",
-    icon: "heroicons:shield-check-20-solid",
-    description:
-      "Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.",
-    date: "15 Jan",
-  },
-};
-
-export const Colors = ColorsTemplate.bind({});
+import BaseTimelineItem from "./BaseTimelineItem.vue";
+
+const colors = [
+  "primary",
+  "success",
+  "danger",
+  "warning",
+  "info",
+  "grey",
+  "black",
+];
+
+export default {
+  title: "Data/BaseTimelineItem",
+  component: BaseTimelineItem,
+};
+
+const Template = (args) => ({
+  components: { BaseTimelineItem },
+  setup() {
+    return { args };
+  },
+  template: `<div class="max-w-md"><BaseTimelineItem v-bind="args"/></div>`,
+});
+
+const ColorsTemplate = (args) => ({
+  components: { BaseTimelineItem },
+  setup() {
+    const items = colors.map((color) => {
+      return {
+        title: "Advanced to phone screening by Bethany Blake",
+        icon: "heroicons:shield-check-20-solid",
+        description:
+          "Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.",
+        color: color,
+        date: "15 Jan",
+      };
+    });
+    return { args, items };
+  },
+  template: `
+  <div class="max-w-md">
+  <ul role="list" class="-mb-8">
+  <li v-for="(item, index) in items" :key="index">
+  <p class="text-xs text-slate-600 leading-tight mb-4">{{ item.color }}</p>
+        <div class="relative pb-8">
+          <BaseTimelineItem :item="item" />
+        </div>
+      </li>
+      </ul>
+      </div>
+  `,
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  item: {
+    title: "Advanced to phone screening by Bethany Blake",
+    icon: "heroicons:shield-check-20-solid",
+    description: "",
+    color: "warning",
+    date: "15 Jan",
+  },
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  item: {
+    title: "Advanced to phone screening by Bethany Blake",
+    icon: "heroicons:shield-check-20-solid",
+    description:
+      "Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.",
+    date: "15 Jan",
+  },
+};
+
+export const Colors = ColorsTemplate.bind({});

package/src/components/BaseTimelineItem.vue

@@ -1,90 +1,90 @@
-<template>
-  <div class="relative group flex space-x-3">
-    <div>
-      <span
-        :class="[
-          'flex h-8 w-8 items-center justify-center rounded-full',
-        ]"
-        :style="colorStyle"
-      >
-        <BaseIcon
-          class="h-[18px] w-[18px]"
-          aria-hidden="true"
-          :icon="item.icon"
-        />
-      </span>
-    </div>
-    <div
-      class="flex min-w-0 flex-1 justify-between space-x-4"
-      :class="{ 'pt-1.5': !item.description }"
-    >
-      <div>
-        <p class="text-sm leading-tight text-slate-900">
-          {{ item.title }}
-        </p>
-        <p
-          v-if="item.description"
-          class="mt-1 text-xs leading-tight text-slate-500"
-        >
-          {{ item.description }}
-        </p>
-        <p
-          class="empty:hidden"
-        >
-          <button
-            v-if="item.onEdit"
-            type="button"
-            class="text-slate-900 opacity-0 group-hover:opacity-100 transition-opacity duration-50 inline underline text-xs mr-3"
-            @click="item.onEdit"
-          >
-            {{ t('sui.edit') }}
-          </button>
-          <button
-            v-if="item.onDelete"
-            type="button"
-            class="text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity duration-50 inline underline text-xs"
-            @click="item.onDelete"
-          >
-            {{ t('sui.delete') }}
-          </button>
-        </p>
-      </div>
-      <div
-        v-if="item.date"
-        class="whitespace-nowrap text-right text-xs text-slate-500"
-      >
-        <time :datetime="item.date">{{ item.date }}</time>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { TimelineItem } from '../types';
-import { PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import { getColorConfig } from '@/utils/colors';
-import { t } from '@/i18n';
-
-const props = defineProps({
-  item: {
-    required: true,
-    type: Object as PropType<TimelineItem>,
-  },
-});
-
-const colorStyle = computed((): Record<string, string> => {
-  const config = getColorConfig(props.item.color ?? 'gray', false);
-
-  const styles: Record<string, string> = {
-    backgroundColor: config.backgroundColor,
-    color: config.textColor,
-    borderColor: config.borderColor,
-    borderWidth: '1px',
-    borderStyle: 'solid',
-  };
-
-  return styles;
-});
-
-</script>
+<template>
+  <div class="relative group flex space-x-3">
+    <div>
+      <span
+        :class="[
+          'flex h-8 w-8 items-center justify-center rounded-full',
+        ]"
+        :style="colorStyle"
+      >
+        <BaseIcon
+          class="h-[18px] w-[18px]"
+          aria-hidden="true"
+          :icon="item.icon"
+        />
+      </span>
+    </div>
+    <div
+      class="flex min-w-0 flex-1 justify-between space-x-4"
+      :class="{ 'pt-1.5': !item.description }"
+    >
+      <div>
+        <p class="text-sm leading-tight text-slate-900">
+          {{ item.title }}
+        </p>
+        <p
+          v-if="item.description"
+          class="mt-1 text-xs leading-tight text-slate-500"
+        >
+          {{ item.description }}
+        </p>
+        <p
+          class="empty:hidden"
+        >
+          <button
+            v-if="item.onEdit"
+            type="button"
+            class="text-slate-900 opacity-0 group-hover:opacity-100 transition-opacity duration-50 inline underline text-xs mr-3"
+            @click="item.onEdit"
+          >
+            {{ t('sui.edit') }}
+          </button>
+          <button
+            v-if="item.onDelete"
+            type="button"
+            class="text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity duration-50 inline underline text-xs"
+            @click="item.onDelete"
+          >
+            {{ t('sui.delete') }}
+          </button>
+        </p>
+      </div>
+      <div
+        v-if="item.date"
+        class="whitespace-nowrap text-right text-xs text-slate-500"
+      >
+        <time :datetime="item.date">{{ item.date }}</time>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TimelineItem } from '../types';
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import { getColorConfig } from '@/utils/colors';
+import { t } from '@/i18n';
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<TimelineItem>,
+  },
+});
+
+const colorStyle = computed((): Record<string, string> => {
+  const config = getColorConfig(props.item.color ?? 'gray', false);
+
+  const styles: Record<string, string> = {
+    backgroundColor: config.backgroundColor,
+    color: config.textColor,
+    borderColor: config.borderColor,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+  };
+
+  return styles;
+});
+
+</script>

package/src/components/BaseToast.stories.js

@@ -1,50 +1,50 @@
-import BaseToast from "./BaseToast.vue";
-
-export default {
-  title: "Components/BaseToast",
-  component: BaseToast,
-  args: {
-    text: "Successfully saved",
-  },
-  argTypes: {
-    color: {
-      control: { type: "select" },
-      options: ["success", "info", "warning", "danger"],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseToast,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseToast v-bind="args" @close="onClose"></BaseToast>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-const colors = ["info", "success", "warning", "danger"];
-
-const Colors = (args) => ({
-  components: {
-    BaseToast,
-  },
-  setup() {
-    return { args, colors };
-  },
-  template: `
-  <div v-for="color in colors" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
-    <BaseToast v-bind="args" :color="color"></BaseToast>
-  </div>
-  `,
-});
-
-export const AllColors = Colors.bind({});
-AllColors.args = {};
+import BaseToast from "./BaseToast.vue";
+
+export default {
+  title: "Components/BaseToast",
+  component: BaseToast,
+  args: {
+    text: "Successfully saved",
+  },
+  argTypes: {
+    color: {
+      control: { type: "select" },
+      options: ["success", "info", "warning", "danger"],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseToast,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseToast v-bind="args" @close="onClose"></BaseToast>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+const colors = ["info", "success", "warning", "danger"];
+
+const Colors = (args) => ({
+  components: {
+    BaseToast,
+  },
+  setup() {
+    return { args, colors };
+  },
+  template: `
+  <div v-for="color in colors" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+    <BaseToast v-bind="args" :color="color"></BaseToast>
+  </div>
+  `,
+});
+
+export const AllColors = Colors.bind({});
+AllColors.args = {};