sprintify-ui 0.10.65 → 0.10.66

package/src/components/BaseBreadcrumbs.vue

@@ -1,109 +1,109 @@
-<template>
-  <div>
-    <nav
-      v-if="breadcrumbs.length > 0"
-      class="hidden sm:flex"
-      aria-label="Breadcrumb"
-    >
-      <ol
-        role="list"
-        class="flex items-center space-x-2"
-      >
-        <li
-          v-for="(breadcrumb, index) in breadcrumbs"
-          :key="index"
-        >
-          <div class="flex items-center">
-            <div
-              v-if="index > 0"
-              class="text-gray-300"
-              :class="{ 'text-xs': size == 'md', 'text-[10px]': size == 'sm' }"
-            >
-              /
-            </div>
-
-            <RouterLink
-              v-slot="{ href, navigate, isExactActive }"
-              :to="breadcrumb.to"
-              custom
-            >
-              <a
-                :href="href"
-                class="text-sm"
-                :class="[
-                  { 'ml-2': index > 0 },
-                  isExactActive
-                    ? 'text-primary-600'
-                    : 'text-slate-600 hover:text-slate-700',
-                ]"
-                @click.prevent="navigate()"
-              >
-                <span v-if="breadcrumb.icon">
-                  <BaseIcon
-                    :icon="breadcrumb.icon"
-                    :class="{ 'h-4 w-4': size == 'md', 'h-3 w-3': size == 'sm' }"
-                  />
-                </span>
-                <span
-                  v-else
-                  :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }"
-                >
-                  {{ truncate(breadcrumb.label) }}
-                </span>
-              </a>
-            </RouterLink>
-          </div>
-        </li>
-      </ol>
-    </nav>
-
-    <RouterLink
-      v-if="mobileBreadcrumb"
-      :to="mobileBreadcrumb.to"
-      class="block text-slate-600 sm:hidden"
-    >
-      <div class="flex items-center">
-        <svg
-          class="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-slate-500"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
-        <span :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }">
-          {{ mobileBreadcrumb.label }}
-        </span>
-      </div>
-    </RouterLink>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { Breadcrumb } from '@/types';
-import { truncate } from 'lodash';
-import { BaseIcon } from '..';
-
-const props = defineProps({
-  breadcrumbs: {
-    required: true,
-    type: Array as PropType<Breadcrumb[]>,
-  },
-  size: {
-    type: String as PropType<'sm' | 'md'>,
-    default: 'md',
-  },
-});
-
-const mobileBreadcrumb = computed((): Breadcrumb | undefined => {
-  if (props.breadcrumbs.length >= 2) {
-    return props.breadcrumbs[props.breadcrumbs.length - 2];
-  }
-  return undefined;
-});
-</script>
+<template>
+  <div>
+    <nav
+      v-if="breadcrumbs.length > 0"
+      class="hidden sm:flex"
+      aria-label="Breadcrumb"
+    >
+      <ol
+        role="list"
+        class="flex items-center space-x-2"
+      >
+        <li
+          v-for="(breadcrumb, index) in breadcrumbs"
+          :key="index"
+        >
+          <div class="flex items-center">
+            <div
+              v-if="index > 0"
+              class="text-gray-300"
+              :class="{ 'text-xs': size == 'md', 'text-[10px]': size == 'sm' }"
+            >
+              /
+            </div>
+
+            <RouterLink
+              v-slot="{ href, navigate, isExactActive }"
+              :to="breadcrumb.to"
+              custom
+            >
+              <a
+                :href="href"
+                class="text-sm"
+                :class="[
+                  { 'ml-2': index > 0 },
+                  isExactActive
+                    ? 'text-primary-600'
+                    : 'text-slate-600 hover:text-slate-700',
+                ]"
+                @click.prevent="navigate()"
+              >
+                <span v-if="breadcrumb.icon">
+                  <BaseIcon
+                    :icon="breadcrumb.icon"
+                    :class="{ 'h-4 w-4': size == 'md', 'h-3 w-3': size == 'sm' }"
+                  />
+                </span>
+                <span
+                  v-else
+                  :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }"
+                >
+                  {{ truncate(breadcrumb.label) }}
+                </span>
+              </a>
+            </RouterLink>
+          </div>
+        </li>
+      </ol>
+    </nav>
+
+    <RouterLink
+      v-if="mobileBreadcrumb"
+      :to="mobileBreadcrumb.to"
+      class="block text-slate-600 sm:hidden"
+    >
+      <div class="flex items-center">
+        <svg
+          class="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-slate-500"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+        <span :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }">
+          {{ mobileBreadcrumb.label }}
+        </span>
+      </div>
+    </RouterLink>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Breadcrumb } from '@/types';
+import { truncate } from 'lodash';
+import { BaseIcon } from '..';
+
+const props = defineProps({
+  breadcrumbs: {
+    required: true,
+    type: Array as PropType<Breadcrumb[]>,
+  },
+  size: {
+    type: String as PropType<'sm' | 'md'>,
+    default: 'md',
+  },
+});
+
+const mobileBreadcrumb = computed((): Breadcrumb | undefined => {
+  if (props.breadcrumbs.length >= 2) {
+    return props.breadcrumbs[props.breadcrumbs.length - 2];
+  }
+  return undefined;
+});
+</script>

package/src/components/BaseButton.stories.js

@@ -1,126 +1,126 @@
-import { sizes } from "../../.storybook/utils";
-import BaseButton from "./BaseButton.vue";
-
-const colors = [
-  "#6fc3fc",
-  "#ff00ff",
-  "#111111",
-  "#f1f1f1",
-  "primary",
-  "secondary",
-  "secondary-outline",
-  "success",
-  "success-outline",
-  "danger",
-  "danger-outline",
-  "warning",
-  "warning-outline",
-  "info",
-  "info-outline",
-  "white",
-  "black",
-  "slate-100",
-  "slate-100-outline",
-  "slate-200",
-  "slate-200-outline",
-];
-
-export default {
-  title: "Components/BaseButton",
-  component: BaseButton,
-  argTypes: {
-    class: {
-      type: "string",
-    },
-    icon: {
-      type: "string",
-    },
-    iconPosition: {
-      control: { type: "select" },
-      options: ["start", "end"],
-    },
-    color: {
-      control: { type: "select" },
-      options: colors,
-    },
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseButton v-bind="args">
-      Click me
-    </BaseButton>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  class: "",
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  loading: true,
-};
-
-export const Colors = (args) => ({
-  components: { BaseButton },
-  setup() {
-    return { args, colors };
-  },
-  template: `
-    <div v-for="color in colors" :key="color" class="mb-4">
-      <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
-      <BaseButton v-bind="args" :color="color">
-        Click here
-      </BaseButton>
-    </div>
-  `,
-});
-
-export const Sizes = (args) => ({
-  components: { BaseButton },
-  setup() {
-    return { args, sizes };
-  },
-  template: `
-    <div v-for="size in sizes" :key="size" class="mb-4">
-      <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ size }}</p>
-      <BaseButton v-bind="args" :size="size">
-      Click here
-      </BaseButton>
-    </div>
-  `,
-});
-
-const IconTemplate = (args) => ({
-  components: { BaseButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseButton v-bind="args">
-    </BaseButton>
-  `,
-});
-
-export const Icon = IconTemplate.bind({});
-Icon.args = {
-  icon: "mdi:plus",
-  color: "primary",
-};
-
-export const Tooltip = Template.bind({});
-Tooltip.args = {
-  color: "primary",
-  tooltip: "This is a tooltip",
-};
+import { sizes } from "../../.storybook/utils";
+import BaseButton from "./BaseButton.vue";
+
+const colors = [
+  "#6fc3fc",
+  "#ff00ff",
+  "#111111",
+  "#f1f1f1",
+  "primary",
+  "secondary",
+  "secondary-outline",
+  "success",
+  "success-outline",
+  "danger",
+  "danger-outline",
+  "warning",
+  "warning-outline",
+  "info",
+  "info-outline",
+  "white",
+  "black",
+  "slate-100",
+  "slate-100-outline",
+  "slate-200",
+  "slate-200-outline",
+];
+
+export default {
+  title: "Components/BaseButton",
+  component: BaseButton,
+  argTypes: {
+    class: {
+      type: "string",
+    },
+    icon: {
+      type: "string",
+    },
+    iconPosition: {
+      control: { type: "select" },
+      options: ["start", "end"],
+    },
+    color: {
+      control: { type: "select" },
+      options: colors,
+    },
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseButton v-bind="args">
+      Click me
+    </BaseButton>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  class: "",
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};
+
+export const Colors = (args) => ({
+  components: { BaseButton },
+  setup() {
+    return { args, colors };
+  },
+  template: `
+    <div v-for="color in colors" :key="color" class="mb-4">
+      <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+      <BaseButton v-bind="args" :color="color">
+        Click here
+      </BaseButton>
+    </div>
+  `,
+});
+
+export const Sizes = (args) => ({
+  components: { BaseButton },
+  setup() {
+    return { args, sizes };
+  },
+  template: `
+    <div v-for="size in sizes" :key="size" class="mb-4">
+      <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ size }}</p>
+      <BaseButton v-bind="args" :size="size">
+      Click here
+      </BaseButton>
+    </div>
+  `,
+});
+
+const IconTemplate = (args) => ({
+  components: { BaseButton },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseButton v-bind="args">
+    </BaseButton>
+  `,
+});
+
+export const Icon = IconTemplate.bind({});
+Icon.args = {
+  icon: "mdi:plus",
+  color: "primary",
+};
+
+export const Tooltip = Template.bind({});
+Tooltip.args = {
+  color: "primary",
+  tooltip: "This is a tooltip",
+};