sprintify-ui 0.4.5 → 0.4.6

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,88 +1,88 @@
-import BaseButton from './BaseButton.vue';
-
-const colors = [
-  'btn-primary',
-  'btn-secondary',
-  'btn-secondary-outline',
-  'btn-success',
-  'btn-success-outline',
-  'btn-warning',
-  'btn-warning-outline',
-  'btn-danger',
-  'btn-danger-outline',
-  'btn-white',
-  'btn-slate-100',
-  'btn-slate-100-outline',
-  'btn-slate-200',
-  'btn-slate-200-outline',
-  'btn-black',
-];
-
-const sizes = ['btn-xs', 'btn-sm', 'btn-base', 'btn-lg', 'btn-xl'];
-
-export default {
-  title: 'Components/BaseButton',
-  component: BaseButton,
-  argTypes: {
-    class: {
-      type: 'string',
-    },
-  },
-};
-
-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: `
-    <p class="text-xs text-slate-600 leading-tight mb-1">btn</p>
-    <BaseButton class="btn">
-      Click here
-    </BaseButton>
-    <div class="mb-4"></div>
-    <div v-for="color in colors" :key="color" class="mb-4">
-      <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ color }}</p>
-      <BaseButton :class="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 class="btn-primary" :class="size">
-      Click here
-      </BaseButton>
-    </div>
-  `,
-});
+import BaseButton from './BaseButton.vue';
+
+const colors = [
+  'btn-primary',
+  'btn-secondary',
+  'btn-secondary-outline',
+  'btn-success',
+  'btn-success-outline',
+  'btn-warning',
+  'btn-warning-outline',
+  'btn-danger',
+  'btn-danger-outline',
+  'btn-white',
+  'btn-slate-100',
+  'btn-slate-100-outline',
+  'btn-slate-200',
+  'btn-slate-200-outline',
+  'btn-black',
+];
+
+const sizes = ['btn-xs', 'btn-sm', 'btn-base', 'btn-lg', 'btn-xl'];
+
+export default {
+  title: 'Components/BaseButton',
+  component: BaseButton,
+  argTypes: {
+    class: {
+      type: 'string',
+    },
+  },
+};
+
+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: `
+    <p class="text-xs text-slate-600 leading-tight mb-1">btn</p>
+    <BaseButton class="btn">
+      Click here
+    </BaseButton>
+    <div class="mb-4"></div>
+    <div v-for="color in colors" :key="color" class="mb-4">
+      <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ color }}</p>
+      <BaseButton :class="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 class="btn-primary" :class="size">
+      Click here
+      </BaseButton>
+    </div>
+  `,
+});

package/src/components/BaseButton.vue

@@ -1,46 +1,46 @@
-<template>
-  <component
-    :is="as"
-    ref="button"
-    class="btn"
-  >
-    <div
-      class="flex items-center justify-center"
-      :class="{ 'opacity-0': loading }"
-    >
-      <slot />
-    </div>
-
-    <div
-      v-if="loading"
-      class="absolute inset-0 flex h-full w-full items-center justify-center"
-    >
-      <svg
-        class="h-4 w-4 animate-spin"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill="currentColor"
-          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-        ></path>
-      </svg>
-    </div>
-  </component>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    as: {
-      default: 'button',
-      type: String,
-    },
-  },
-});
-</script>
+<template>
+  <component
+    :is="as"
+    ref="button"
+    class="btn"
+  >
+    <div
+      class="flex items-center justify-center"
+      :class="{ 'opacity-0': loading }"
+    >
+      <slot />
+    </div>
+
+    <div
+      v-if="loading"
+      class="absolute inset-0 flex h-full w-full items-center justify-center"
+    >
+      <svg
+        class="h-4 w-4 animate-spin"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+        ></path>
+      </svg>
+    </div>
+  </component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    as: {
+      default: 'button',
+      type: String,
+    },
+  },
+});
+</script>

package/src/components/BaseButtonGroup.stories.js

@@ -1,86 +1,86 @@
-import { createFieldStory, options } from '../../.storybook/utils';
-import BaseButtonGroup from './BaseButtonGroup.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-
-export default {
-  title: 'Form/BaseButtonGroup',
-  component: BaseButtonGroup,
-  argTypes: {},
-  args: {
-    labelKey: 'label',
-    valueKey: 'value',
-    options: options,
-  },
-  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
-};
-
-const Template = (args) => ({
-  components: { BaseButtonGroup, ShowValue },
-  setup() {
-    const value = ref(null);
-    return { args, value };
-  },
-  template: `
-    <BaseButtonGroup v-model="value" v-bind="args"></BaseButtonGroup>
-    <ShowValue :value="value"></ShowValue>
-  `,
-});
-
-export const Single = Template.bind({});
-Single.args = {};
-
-export const SingleRequired = Template.bind({});
-SingleRequired.args = {
-  required: true,
-};
-
-export const Multiple = Template.bind({});
-Multiple.args = {
-  multiple: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  modelValue: { label: 'Dark Maul', value: 'darth_maul' },
-};
-
-export const SlotOption = (args) => ({
-  components: { BaseButtonGroup },
-  setup() {
-    const value = ref(null);
-
-    const options = [
-      { label: 'Red', value: 'red' },
-      { label: 'Blue', value: 'blue' },
-      { label: 'Green', value: 'green' },
-      { label: 'Black', value: 'black' },
-      { label: 'Gray', value: 'gray' },
-    ];
-
-    return { value, options, args };
-  },
-  template: `
-  <BaseButtonGroup
-    v-bind="args"
-    v-model="value"
-    :options="options"
-    tw-button="btn btn-xl"
-    tw-button-selected="btn-black"
-    tw-button-unselected="btn-secondary-outline"
-  >
-    <template #option="{ option }">
-      <div class="flex items-center space-x-2 font-semibold">
-        <div class="w-3 h-3 rounded border border-white" :style="{ backgroundColor: option.value }"></div>
-        <div>{{ option.label }}</div>
-      </div>
-    </template>
-  </BaseButtonGroup>
-  `,
-});
-
-export const Field = createFieldStory({
-  component: BaseButtonGroup,
-  componentName: 'BaseButtonGroup',
-  label: 'Choose your Jedi ou Sith',
-});
+import { createFieldStory, options } from '../../.storybook/utils';
+import BaseButtonGroup from './BaseButtonGroup.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseButtonGroup',
+  component: BaseButtonGroup,
+  argTypes: {},
+  args: {
+    labelKey: 'label',
+    valueKey: 'value',
+    options: options,
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseButtonGroup, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseButtonGroup v-model="value" v-bind="args"></BaseButtonGroup>
+    <ShowValue :value="value"></ShowValue>
+  `,
+});
+
+export const Single = Template.bind({});
+Single.args = {};
+
+export const SingleRequired = Template.bind({});
+SingleRequired.args = {
+  required: true,
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  multiple: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  modelValue: { label: 'Dark Maul', value: 'darth_maul' },
+};
+
+export const SlotOption = (args) => ({
+  components: { BaseButtonGroup },
+  setup() {
+    const value = ref(null);
+
+    const options = [
+      { label: 'Red', value: 'red' },
+      { label: 'Blue', value: 'blue' },
+      { label: 'Green', value: 'green' },
+      { label: 'Black', value: 'black' },
+      { label: 'Gray', value: 'gray' },
+    ];
+
+    return { value, options, args };
+  },
+  template: `
+  <BaseButtonGroup
+    v-bind="args"
+    v-model="value"
+    :options="options"
+    tw-button="btn btn-xl"
+    tw-button-selected="btn-black"
+    tw-button-unselected="btn-secondary-outline"
+  >
+    <template #option="{ option }">
+      <div class="flex items-center space-x-2 font-semibold">
+        <div class="w-3 h-3 rounded border border-white" :style="{ backgroundColor: option.value }"></div>
+        <div>{{ option.label }}</div>
+      </div>
+    </template>
+  </BaseButtonGroup>
+  `,
+});
+
+export const Field = createFieldStory({
+  component: BaseButtonGroup,
+  componentName: 'BaseButtonGroup',
+  label: 'Choose your Jedi ou Sith',
+});