sprintify-ui 0.4.3 → 0.4.5

package/src/components/BaseStepper.stories.js

@@ -1,94 +1,94 @@
-import BaseStepper from './BaseStepper.vue';
-
-export default {
-  title: 'Layout/BaseStepper',
-  component: BaseStepper,
-};
-
-const Template = (args) => ({
-  components: { BaseStepper },
-  setup() {
-    return { args };
-  },
-  template: `<BaseStepper v-bind="args"/>`,
-});
-
-const threeItems = [
-  {
-    title: 'Job details',
-    description: 'Vitae sed mi luctus laoreet.',
-    stepNumber: 1,
-    status: 'completed',
-    index: 0,
-  },
-  {
-    title: 'Application form',
-    description: 'Cursus semper viverra.',
-    stepNumber: 2,
-    status: 'current',
-    index: 1,
-  },
-  {
-    title: 'Preview',
-    description: 'Penatibus eu quis ante.',
-    stepNumber: 3,
-    status: 'pending',
-    index: 2,
-  },
-];
-
-export const Demo = Template.bind({});
-
-Demo.args = {
-  items: threeItems,
-};
-
-const sixItems = [
-  {
-    title: 'Job details',
-    description: 'Vitae sed mi luctus laoreet.',
-    stepNumber: 1,
-    status: 'completed',
-    index: 0,
-  },
-  {
-    title: 'Application form',
-    description: 'Cursus semper viverra.',
-    stepNumber: 2,
-    status: 'completed',
-    index: 1,
-  },
-  {
-    title: 'Preview',
-    description: 'Penatibus eu quis ante.',
-    stepNumber: 3,
-    status: 'completed',
-    index: 2,
-  },
-  {
-    title: 'HR interview',
-    description: 'Penatibus eu quis ante.',
-    stepNumber: 4,
-    status: 'completed',
-    index: 3,
-  },
-  {
-    title: 'Technical interview',
-    description: 'Penatibus eu quis ante.',
-    stepNumber: 5,
-    status: 'current',
-    index: 4,
-  },
-  {
-    title: 'Hiring',
-    description: 'Penatibus eu quis ante.',
-    stepNumber: 6,
-    status: 'pending',
-    index: 5,
-  },
-];
-
-export const ManyItems = Template.bind({});
-ManyItems.args = {
-  items: sixItems,
-};
+import BaseStepper from './BaseStepper.vue';
+
+export default {
+  title: 'Layout/BaseStepper',
+  component: BaseStepper,
+};
+
+const Template = (args) => ({
+  components: { BaseStepper },
+  setup() {
+    return { args };
+  },
+  template: `<BaseStepper v-bind="args"/>`,
+});
+
+const threeItems = [
+  {
+    title: 'Job details',
+    description: 'Vitae sed mi luctus laoreet.',
+    stepNumber: 1,
+    status: 'completed',
+    index: 0,
+  },
+  {
+    title: 'Application form',
+    description: 'Cursus semper viverra.',
+    stepNumber: 2,
+    status: 'current',
+    index: 1,
+  },
+  {
+    title: 'Preview',
+    description: 'Penatibus eu quis ante.',
+    stepNumber: 3,
+    status: 'pending',
+    index: 2,
+  },
+];
+
+export const Demo = Template.bind({});
+
+Demo.args = {
+  items: threeItems,
+};
+
+const sixItems = [
+  {
+    title: 'Job details',
+    description: 'Vitae sed mi luctus laoreet.',
+    stepNumber: 1,
+    status: 'completed',
+    index: 0,
+  },
+  {
+    title: 'Application form',
+    description: 'Cursus semper viverra.',
+    stepNumber: 2,
+    status: 'completed',
+    index: 1,
+  },
+  {
+    title: 'Preview',
+    description: 'Penatibus eu quis ante.',
+    stepNumber: 3,
+    status: 'completed',
+    index: 2,
+  },
+  {
+    title: 'HR interview',
+    description: 'Penatibus eu quis ante.',
+    stepNumber: 4,
+    status: 'completed',
+    index: 3,
+  },
+  {
+    title: 'Technical interview',
+    description: 'Penatibus eu quis ante.',
+    stepNumber: 5,
+    status: 'current',
+    index: 4,
+  },
+  {
+    title: 'Hiring',
+    description: 'Penatibus eu quis ante.',
+    stepNumber: 6,
+    status: 'pending',
+    index: 5,
+  },
+];
+
+export const ManyItems = Template.bind({});
+ManyItems.args = {
+  items: sixItems,
+};

package/src/components/BaseStepper.vue

@@ -1,72 +1,72 @@
-<template>
-  <div class="lg:border-t lg:border-b lg:border-gray-200">
-    <nav
-      class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"
-      aria-label="Progress"
-    >
-      <ol
-        role="list"
-        class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-l lg:border-r lg:border-gray-200"
-      >
-        <li
-          v-for="(item, index) in items"
-          :key="index"
-          class="relative overflow-hidden lg:flex-1"
-        >
-          <div
-            :class="[
-              index === 0 ? 'rounded-t-md border-b-0' : '',
-              index === items.length - 1 ? 'rounded-b-md border-t-0' : '',
-              'overflow-hidden border border-gray-200 lg:border-0',
-            ]"
-          >
-            <BaseStepperItem
-              :title="item.title"
-              :description="item.description"
-              :step-number="item.stepNumber"
-              :status="item.status"
-              :index="index"
-              @click="$emit('click', index)"
-            />
-
-            <template v-if="index !== 0">
-              <!-- Separator -->
-              <div
-                class="absolute inset-0 top-0 left-0 hidden w-3 lg:block"
-                aria-hidden="true"
-              >
-                <svg
-                  class="w-full h-full text-gray-300"
-                  viewBox="0 0 12 82"
-                  fill="none"
-                  preserveAspectRatio="none"
-                >
-                  <path
-                    d="M0.5 0V31L10.5 41L0.5 51V82"
-                    stroke="currentcolor"
-                    vector-effect="non-scaling-stroke"
-                  />
-                </svg>
-              </div>
-            </template>
-          </div>
-        </li>
-      </ol>
-    </nav>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { StepperItem } from '@/types/StepperItem';
-import BaseStepperItem from './BaseStepperItem.vue';
-
-defineProps({
-  items: {
-    required: true,
-    type: Array as PropType<StepperItem[]>,
-  },
-});
-
-defineEmits(['click']);
-</script>
+<template>
+  <div class="lg:border-t lg:border-b lg:border-gray-200">
+    <nav
+      class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"
+      aria-label="Progress"
+    >
+      <ol
+        role="list"
+        class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-l lg:border-r lg:border-gray-200"
+      >
+        <li
+          v-for="(item, index) in items"
+          :key="index"
+          class="relative overflow-hidden lg:flex-1"
+        >
+          <div
+            :class="[
+              index === 0 ? 'rounded-t-md border-b-0' : '',
+              index === items.length - 1 ? 'rounded-b-md border-t-0' : '',
+              'overflow-hidden border border-gray-200 lg:border-0',
+            ]"
+          >
+            <BaseStepperItem
+              :title="item.title"
+              :description="item.description"
+              :step-number="item.stepNumber"
+              :status="item.status"
+              :index="index"
+              @click="$emit('click', index)"
+            />
+
+            <template v-if="index !== 0">
+              <!-- Separator -->
+              <div
+                class="absolute inset-0 top-0 left-0 hidden w-3 lg:block"
+                aria-hidden="true"
+              >
+                <svg
+                  class="w-full h-full text-gray-300"
+                  viewBox="0 0 12 82"
+                  fill="none"
+                  preserveAspectRatio="none"
+                >
+                  <path
+                    d="M0.5 0V31L10.5 41L0.5 51V82"
+                    stroke="currentcolor"
+                    vector-effect="non-scaling-stroke"
+                  />
+                </svg>
+              </div>
+            </template>
+          </div>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { StepperItem } from '@/types/StepperItem';
+import BaseStepperItem from './BaseStepperItem.vue';
+
+defineProps({
+  items: {
+    required: true,
+    type: Array as PropType<StepperItem[]>,
+  },
+});
+
+defineEmits(['click']);
+</script>

package/src/components/BaseStepperItem.stories.js

@@ -1,65 +1,65 @@
-import BaseStepperItem from './BaseStepperItem.vue';
-
-export default {
-  title: 'Layout/BaseStepperItem',
-  component: BaseStepperItem,
-  argTypes: {
-    status: {
-      control: { type: 'select' },
-      options: ['pending', 'current', 'completed'],
-    },
-    description: {
-      control: { type: 'text' },
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseStepperItem },
-  setup() {
-    return { args };
-  },
-  template: `
-  <div class="lg:border-t lg:border-b lg:border-gray-200">
-    <nav class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8" aria-label="Progress">
-      <ol
-        role="list"
-        class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-l lg:border-r lg:border-gray-200"
-      >
-        <li
-          class="relative overflow-hidden lg:flex-1"
-        >
-          <div
-            :class="[
-              'rounded-t-md border-b-0',
-              'overflow-hidden border border-gray-200 lg:border-0',
-            ]"
-          >
-  <BaseStepperItem v-bind="args"/>
-  </div>
-  </li>
-  </ol>
-  </nav>
-  </div>
-  `,
-});
-
-export const Simple = Template.bind({});
-
-Simple.args = {
-  title: 'Job application',
-  description: '',
-  stepNumber: 1,
-  status: 'pending',
-  index: 0,
-};
-
-export const WithDescription = Template.bind({});
-
-WithDescription.args = {
-  title: 'Job application',
-  description: 'Vitae sed mi luctus laoreet.',
-  stepNumber: 1,
-  status: 'current',
-  index: 0,
-};
+import BaseStepperItem from './BaseStepperItem.vue';
+
+export default {
+  title: 'Layout/BaseStepperItem',
+  component: BaseStepperItem,
+  argTypes: {
+    status: {
+      control: { type: 'select' },
+      options: ['pending', 'current', 'completed'],
+    },
+    description: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseStepperItem },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="lg:border-t lg:border-b lg:border-gray-200">
+    <nav class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8" aria-label="Progress">
+      <ol
+        role="list"
+        class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-l lg:border-r lg:border-gray-200"
+      >
+        <li
+          class="relative overflow-hidden lg:flex-1"
+        >
+          <div
+            :class="[
+              'rounded-t-md border-b-0',
+              'overflow-hidden border border-gray-200 lg:border-0',
+            ]"
+          >
+  <BaseStepperItem v-bind="args"/>
+  </div>
+  </li>
+  </ol>
+  </nav>
+  </div>
+  `,
+});
+
+export const Simple = Template.bind({});
+
+Simple.args = {
+  title: 'Job application',
+  description: '',
+  stepNumber: 1,
+  status: 'pending',
+  index: 0,
+};
+
+export const WithDescription = Template.bind({});
+
+WithDescription.args = {
+  title: 'Job application',
+  description: 'Vitae sed mi luctus laoreet.',
+  stepNumber: 1,
+  status: 'current',
+  index: 0,
+};