sprintify-ui 0.4.5 → 0.4.7

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',
+});