sprintify-ui 0.4.5 → 0.4.7

package/src/components/BaseStepperItem.vue

@@ -1,149 +1,149 @@
-<template>
-  <button
-    v-if="status === 'completed'"
-    type="button"
-    class="group"
-    @click="$emit('click')"
-  >
-    <span
-      class="absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-slate-200 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
-      aria-hidden="true"
-    />
-    <span
-      :class="[
-        index !== 0 ? 'lg:pl-9' : '',
-        'flex items-start px-6 py-5 text-sm font-medium',
-      ]"
-    >
-      <span class="flex-shrink-0">
-        <span
-          class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600"
-        >
-          <BaseIcon
-            :icon="'mdi-check'"
-            class="h-6 w-6 text-white"
-            aria-hidden="true"
-          />
-        </span>
-      </span>
-      <span class="mt-0.5 ml-4 flex min-w-0 flex-col items-start">
-        <span class="mb-0.5 text-left text-sm font-medium leading-tight">{{
-          title
-        }}</span>
-        <span
-          v-if="description"
-          class="text-left text-sm font-normal leading-snug text-slate-500"
-        >
-          {{ description }}
-        </span>
-      </span>
-    </span>
-  </button>
-  <button
-    v-else-if="status === 'current'"
-    aria-current="step"
-    type="button"
-    @click="$emit('click')"
-  >
-    <span
-      class="absolute top-0 left-0 h-full w-1 bg-indigo-600 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
-      aria-hidden="true"
-    />
-    <span
-      :class="[
-        index !== 0 ? 'lg:pl-9' : '',
-        'flex items-start px-6 py-5 text-sm font-medium',
-      ]"
-    >
-      <span class="flex-shrink-0">
-        <span
-          class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-indigo-600"
-        >
-          <span class="text-indigo-600">{{ stepNumber }}</span>
-        </span>
-      </span>
-      <span class="mt-0.5 ml-4 flex min-w-0 flex-col items-start">
-        <span
-          class="mb-0.5 text-left text-sm font-medium leading-tight text-indigo-600"
-        >
-          {{ title }}
-        </span>
-        <span
-          v-if="description"
-          class="text-left text-sm font-normal leading-snug text-slate-500"
-        >
-          {{ description }}
-        </span>
-      </span>
-    </span>
-  </button>
-  <button
-    v-else-if="status == 'pending'"
-    type="button"
-    class="group"
-    @click="$emit('click')"
-  >
-    <span
-      class="absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-slate-200 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
-      aria-hidden="true"
-    />
-    <span
-      :class="[
-        index !== 0 ? 'lg:pl-9' : '',
-        'flex items-start px-6 py-5 text-sm font-medium',
-      ]"
-    >
-      <span class="flex-shrink-0">
-        <span
-          class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-slate-300"
-        >
-          <span class="text-slate-500">{{ stepNumber }}</span>
-        </span>
-      </span>
-      <span class="mt-0.5 ml-4 flex min-w-0 flex-col items-start">
-        <span
-          class="mb-0.5 text-left text-sm font-medium leading-tight text-slate-600"
-        >
-          {{ title }}
-        </span>
-        <span
-          v-if="description"
-          class="text-left text-sm font-normal leading-snug text-slate-500"
-        >
-          {{ description }}
-        </span>
-      </span>
-    </span>
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-
-defineProps({
-  stepNumber: {
-    required: true,
-    type: Number,
-  },
-  title: {
-    required: true,
-    type: String,
-  },
-  description: {
-    required: false,
-    default: null,
-    type: String as PropType<string | null>,
-  },
-  status: {
-    required: true,
-    type: String,
-  },
-  index: {
-    required: true,
-    type: Number,
-  },
-});
-
-defineEmits(['click']);
-</script>
+<template>
+  <button
+    v-if="status === 'completed'"
+    type="button"
+    class="group"
+    @click="$emit('click')"
+  >
+    <span
+      class="absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-slate-200 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
+      aria-hidden="true"
+    />
+    <span
+      :class="[
+        index !== 0 ? 'lg:pl-9' : '',
+        'flex items-start px-6 py-5 text-sm font-medium',
+      ]"
+    >
+      <span class="flex-shrink-0">
+        <span
+          class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600"
+        >
+          <BaseIcon
+            :icon="'mdi-check'"
+            class="h-6 w-6 text-white"
+            aria-hidden="true"
+          />
+        </span>
+      </span>
+      <span class="mt-0.5 ml-4 flex min-w-0 flex-col items-start">
+        <span class="mb-0.5 text-left text-sm font-medium leading-tight">{{
+          title
+        }}</span>
+        <span
+          v-if="description"
+          class="text-left text-sm font-normal leading-snug text-slate-500"
+        >
+          {{ description }}
+        </span>
+      </span>
+    </span>
+  </button>
+  <button
+    v-else-if="status === 'current'"
+    aria-current="step"
+    type="button"
+    @click="$emit('click')"
+  >
+    <span
+      class="absolute top-0 left-0 h-full w-1 bg-indigo-600 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
+      aria-hidden="true"
+    />
+    <span
+      :class="[
+        index !== 0 ? 'lg:pl-9' : '',
+        'flex items-start px-6 py-5 text-sm font-medium',
+      ]"
+    >
+      <span class="flex-shrink-0">
+        <span
+          class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-indigo-600"
+        >
+          <span class="text-indigo-600">{{ stepNumber }}</span>
+        </span>
+      </span>
+      <span class="mt-0.5 ml-4 flex min-w-0 flex-col items-start">
+        <span
+          class="mb-0.5 text-left text-sm font-medium leading-tight text-indigo-600"
+        >
+          {{ title }}
+        </span>
+        <span
+          v-if="description"
+          class="text-left text-sm font-normal leading-snug text-slate-500"
+        >
+          {{ description }}
+        </span>
+      </span>
+    </span>
+  </button>
+  <button
+    v-else-if="status == 'pending'"
+    type="button"
+    class="group"
+    @click="$emit('click')"
+  >
+    <span
+      class="absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-slate-200 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
+      aria-hidden="true"
+    />
+    <span
+      :class="[
+        index !== 0 ? 'lg:pl-9' : '',
+        'flex items-start px-6 py-5 text-sm font-medium',
+      ]"
+    >
+      <span class="flex-shrink-0">
+        <span
+          class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-slate-300"
+        >
+          <span class="text-slate-500">{{ stepNumber }}</span>
+        </span>
+      </span>
+      <span class="mt-0.5 ml-4 flex min-w-0 flex-col items-start">
+        <span
+          class="mb-0.5 text-left text-sm font-medium leading-tight text-slate-600"
+        >
+          {{ title }}
+        </span>
+        <span
+          v-if="description"
+          class="text-left text-sm font-normal leading-snug text-slate-500"
+        >
+          {{ description }}
+        </span>
+      </span>
+    </span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+defineProps({
+  stepNumber: {
+    required: true,
+    type: Number,
+  },
+  title: {
+    required: true,
+    type: String,
+  },
+  description: {
+    required: false,
+    default: null,
+    type: String as PropType<string | null>,
+  },
+  status: {
+    required: true,
+    type: String,
+  },
+  index: {
+    required: true,
+    type: Number,
+  },
+});
+
+defineEmits(['click']);
+</script>

package/src/components/BaseSwitch.stories.js

@@ -1,130 +1,130 @@
-import BaseSwitch from './BaseSwitch.vue';
-import BaseContainer from './BaseContainer.vue';
-import { createFieldStory } from '../../.storybook/utils';
-
-export default {
-  title: 'Form/BaseSwitch',
-  component: BaseSwitch,
-  args: {},
-  argTypes: {
-    color: {
-      control: { type: 'select' },
-      options: [
-        'primary',
-        'success',
-        'info',
-        'warning',
-        'danger',
-        'light',
-        'dark',
-      ],
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['xs', 'sm', 'base', 'lg', 'xl'],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseSwitch,
-    BaseContainer,
-  },
-  setup() {
-    const value = ref(true);
-    return { args, value };
-  },
-  template: `
-    <BaseSwitch v-model="value" v-bind="args">
-      <span class="text-slate-600">Label</span>
-    </BaseSwitch>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-const colors = [
-  'primary',
-  'info',
-  'success',
-  'warning',
-  'danger',
-  'light',
-  'dark',
-];
-
-const Colors = (args) => ({
-  components: {
-    BaseSwitch,
-    BaseContainer,
-  },
-  setup() {
-    const value = ref(true);
-    return { args, value, colors };
-  },
-  template: `
-  <div v-for="color in colors" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
-    <BaseSwitch v-model="value" :color="color">
-      <span class="text-slate-600">Label</span>
-    </BaseSwitch>
-  </div>
-  `,
-});
-
-export const AllColors = Colors.bind({});
-AllColors.args = {};
-
-const sizes = ['xs', 'sm', 'base', 'lg', 'xl'];
-
-const Sizes = (args) => ({
-  components: {
-    BaseSwitch,
-    BaseContainer,
-  },
-  setup() {
-    const value = ref(true);
-    return { args, value, sizes };
-  },
-  template: `
-  <div v-for="size in sizes" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
-    <BaseSwitch v-model="value" :size="size">
-      <span class="text-slate-600">Label</span>
-    </BaseSwitch>
-  </div>
-  `,
-});
-
-export const AllSizes = Sizes.bind({});
-AllSizes.args = {};
-
-export const Field = createFieldStory({
-  component: BaseSwitch,
-  componentName: 'BaseSwitch',
-  label: 'Activate',
-});
-
-const Icons = (args) => ({
-  components: {
-    BaseSwitch,
-    BaseContainer,
-  },
-  setup() {
-    const value = ref(true);
-    return { args, value };
-  },
-  template: `
-    <BaseSwitch v-model="value" v-bind="args">
-      <span class="text-slate-600">Label</span>
-    </BaseSwitch>
-  `,
-});
-
-export const WithIcons = Icons.bind({});
-WithIcons.args = {
-  checkedIcon: 'heroicons-solid:check',
-  unCheckedIcon: 'heroicons-solid:x',
-};
+import BaseSwitch from './BaseSwitch.vue';
+import BaseContainer from './BaseContainer.vue';
+import { createFieldStory } from '../../.storybook/utils';
+
+export default {
+  title: 'Form/BaseSwitch',
+  component: BaseSwitch,
+  args: {},
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: [
+        'primary',
+        'success',
+        'info',
+        'warning',
+        'danger',
+        'light',
+        'dark',
+      ],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'base', 'lg', 'xl'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSwitch,
+    BaseContainer,
+  },
+  setup() {
+    const value = ref(true);
+    return { args, value };
+  },
+  template: `
+    <BaseSwitch v-model="value" v-bind="args">
+      <span class="text-slate-600">Label</span>
+    </BaseSwitch>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+const colors = [
+  'primary',
+  'info',
+  'success',
+  'warning',
+  'danger',
+  'light',
+  'dark',
+];
+
+const Colors = (args) => ({
+  components: {
+    BaseSwitch,
+    BaseContainer,
+  },
+  setup() {
+    const value = ref(true);
+    return { args, value, colors };
+  },
+  template: `
+  <div v-for="color in colors" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+    <BaseSwitch v-model="value" :color="color">
+      <span class="text-slate-600">Label</span>
+    </BaseSwitch>
+  </div>
+  `,
+});
+
+export const AllColors = Colors.bind({});
+AllColors.args = {};
+
+const sizes = ['xs', 'sm', 'base', 'lg', 'xl'];
+
+const Sizes = (args) => ({
+  components: {
+    BaseSwitch,
+    BaseContainer,
+  },
+  setup() {
+    const value = ref(true);
+    return { args, value, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+    <BaseSwitch v-model="value" :size="size">
+      <span class="text-slate-600">Label</span>
+    </BaseSwitch>
+  </div>
+  `,
+});
+
+export const AllSizes = Sizes.bind({});
+AllSizes.args = {};
+
+export const Field = createFieldStory({
+  component: BaseSwitch,
+  componentName: 'BaseSwitch',
+  label: 'Activate',
+});
+
+const Icons = (args) => ({
+  components: {
+    BaseSwitch,
+    BaseContainer,
+  },
+  setup() {
+    const value = ref(true);
+    return { args, value };
+  },
+  template: `
+    <BaseSwitch v-model="value" v-bind="args">
+      <span class="text-slate-600">Label</span>
+    </BaseSwitch>
+  `,
+});
+
+export const WithIcons = Icons.bind({});
+WithIcons.args = {
+  checkedIcon: 'heroicons-solid:check',
+  unCheckedIcon: 'heroicons-solid:x',
+};