sprintify-ui 0.1.15 → 0.1.17

package/src/components/BaseStepper.vue

@@ -1,69 +1,69 @@
-<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: 'Components/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: 'Components/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,
+};

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>