sprintify-ui 0.1.15 → 0.1.17

package/src/components/BaseSkeleton.stories.js

@@ -1,36 +1,36 @@
-import BaseSkeleton from './BaseSkeleton.vue';
-import BaseContainer from './BaseContainer.vue';
-
-export default {
-  title: 'Components/BaseSkeleton',
-  component: BaseSkeleton,
-  args: {},
-};
-
-const Template = (args) => ({
-  components: {
-    BaseSkeleton,
-    BaseContainer,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-  <BaseContainer size="xl">
-    <div class="flex space-x-5">
-      <div class="shrink-0">
-        <BaseSkeleton class="h-16 rounded-full w-16" v-bind="args"></BaseSkeleton>
-      </div>
-      <div class="grow">
-        <BaseSkeleton class="w-52 h-8 mb-3" v-bind="args"></BaseSkeleton>
-        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
-        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
-        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
-      </div>
-    </div>
-  </BaseContainer>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseSkeleton from './BaseSkeleton.vue';
+import BaseContainer from './BaseContainer.vue';
+
+export default {
+  title: 'Components/BaseSkeleton',
+  component: BaseSkeleton,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSkeleton,
+    BaseContainer,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseContainer size="xl">
+    <div class="flex space-x-5">
+      <div class="shrink-0">
+        <BaseSkeleton class="h-16 rounded-full w-16" v-bind="args"></BaseSkeleton>
+      </div>
+      <div class="grow">
+        <BaseSkeleton class="w-52 h-8 mb-3" v-bind="args"></BaseSkeleton>
+        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
+        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
+        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
+      </div>
+    </div>
+  </BaseContainer>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseSkeleton.vue

@@ -1,24 +1,24 @@
-<template>
-  <div class="relative isolate overflow-hidden rounded" :class="[background]">
-    <div
-      class="absolute inset-0 -translate-x-full animate-shimmer border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
-      :style="{
-        animationDelay: delay,
-      }"
-    ></div>
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-  delay: {
-    default: '0s',
-    type: String,
-  },
-  background: {
-    default: 'bg-slate-200',
-    type: String,
-  },
-});
-</script>
+<template>
+  <div class="relative isolate overflow-hidden rounded" :class="[background]">
+    <div
+      class="absolute inset-0 -translate-x-full animate-shimmer border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
+      :style="{
+        animationDelay: delay,
+      }"
+    ></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  delay: {
+    default: '0s',
+    type: String,
+  },
+  background: {
+    default: 'bg-slate-200',
+    type: String,
+  },
+});
+</script>

package/src/components/BaseStatistic.stories.js

@@ -1,51 +1,51 @@
-import BaseStatistic from './BaseStatistic.vue';
-
-export default {
-  title: 'Components/BaseStatistic',
-  component: BaseStatistic,
-  argTypes: {
-    trend: {
-      control: { type: 'select' },
-      options: ['up', 'down', null],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseStatistic },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseStatistic v-bind="args">
-    </BaseStatistic>
-  `,
-});
-
-export const Simple = Template.bind({});
-Simple.args = {
-  primaryValue: '$7,552.90',
-};
-
-export const TrendUp = Template.bind({});
-TrendUp.args = {
-  primaryValue: '$15,289.63',
-  secondaryValue: '15%',
-  trend: 'up',
-};
-
-export const TrendDown = Template.bind({});
-TrendDown.args = {
-  primaryValue: '$10,123.25',
-  secondaryValue: '-22%',
-  trend: 'down',
-};
-
-export const Complex = Template.bind({});
-Complex.args = {
-  label: 'Complex example',
-  primaryValue: '$10,123.25',
-  secondaryValue: '-22%',
-  trend: 'down',
-  caption: 'Since last week',
-};
+import BaseStatistic from './BaseStatistic.vue';
+
+export default {
+  title: 'Components/BaseStatistic',
+  component: BaseStatistic,
+  argTypes: {
+    trend: {
+      control: { type: 'select' },
+      options: ['up', 'down', null],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseStatistic },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseStatistic v-bind="args">
+    </BaseStatistic>
+  `,
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  primaryValue: '$7,552.90',
+};
+
+export const TrendUp = Template.bind({});
+TrendUp.args = {
+  primaryValue: '$15,289.63',
+  secondaryValue: '15%',
+  trend: 'up',
+};
+
+export const TrendDown = Template.bind({});
+TrendDown.args = {
+  primaryValue: '$10,123.25',
+  secondaryValue: '-22%',
+  trend: 'down',
+};
+
+export const Complex = Template.bind({});
+Complex.args = {
+  label: 'Complex example',
+  primaryValue: '$10,123.25',
+  secondaryValue: '-22%',
+  trend: 'down',
+  caption: 'Since last week',
+};

package/src/components/BaseStatistic.vue

@@ -1,98 +1,98 @@
-<template>
-  <div class="inline-flex rounded-xl p-4" :class="[centerClass]">
-    <section>
-      <!-- Label -->
-      <header class="mb-0.5 text-base font-medium">
-        {{ label }}
-      </header>
-      <!-- Content -->
-      <div class="flex" :class="[centerClass]">
-        <div class="text-3xl font-bold leading-tight">
-          {{ primaryValue }}
-        </div>
-
-        <div
-          v-if="secondaryValue"
-          class="ml-1 flex rounded-md px-1 text-lg font-bold"
-          :class="[backgroundClass, textClass, centerClass]"
-        >
-          <!-- Icon trend -->
-          <div v-if="trend">
-            <BaseIcon :icon="icon" :class="iconClass" />
-          </div>
-          <div class="text-lg">{{ secondaryValue }}</div>
-        </div>
-      </div>
-      <!-- Caption -->
-      <footer class="text-base text-slate-500">
-        {{ caption }}
-      </footer>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-
-export default defineComponent({
-  components: { BaseIcon },
-  props: {
-    label: {
-      default: null,
-      type: String as PropType<string | null>,
-    },
-    primaryValue: {
-      required: true,
-      type: String,
-    },
-    secondaryValue: {
-      default: null,
-      type: String as PropType<string | null>,
-    },
-    trend: {
-      default: null,
-      type: String as PropType<'up' | 'down' | null>,
-    },
-    caption: {
-      default: null,
-      type: String as PropType<string | null>,
-    },
-  },
-  computed: {
-    backgroundClass(): string {
-      if (this.trend == 'up') {
-        return 'bg-green-50';
-      }
-      if (this.trend == 'down') {
-        return 'bg-red-50';
-      }
-      return '';
-    },
-    textClass(): string {
-      if (this.trend == 'up') {
-        return 'text-green-700';
-      }
-      if (this.trend == 'down') {
-        return 'text-red-700';
-      }
-      return 'text-slate-400';
-    },
-    iconClass(): string {
-      return 'w-5 h-5';
-    },
-    icon(): string {
-      if (this.trend == 'up') {
-        return 'heroicons-solid:chevron-up';
-      }
-      if (this.trend == 'down') {
-        return 'heroicons-solid:chevron-down';
-      }
-      return '';
-    },
-    centerClass(): string {
-      return 'items-center justify-center';
-    },
-  },
-});
-</script>
+<template>
+  <div class="inline-flex rounded-xl p-4" :class="[centerClass]">
+    <section>
+      <!-- Label -->
+      <header class="mb-0.5 text-base font-medium">
+        {{ label }}
+      </header>
+      <!-- Content -->
+      <div class="flex" :class="[centerClass]">
+        <div class="text-3xl font-bold leading-tight">
+          {{ primaryValue }}
+        </div>
+
+        <div
+          v-if="secondaryValue"
+          class="ml-1 flex rounded-md px-1 text-lg font-bold"
+          :class="[backgroundClass, textClass, centerClass]"
+        >
+          <!-- Icon trend -->
+          <div v-if="trend">
+            <BaseIcon :icon="icon" :class="iconClass" />
+          </div>
+          <div class="text-lg">{{ secondaryValue }}</div>
+        </div>
+      </div>
+      <!-- Caption -->
+      <footer class="text-base text-slate-500">
+        {{ caption }}
+      </footer>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default defineComponent({
+  components: { BaseIcon },
+  props: {
+    label: {
+      default: null,
+      type: String as PropType<string | null>,
+    },
+    primaryValue: {
+      required: true,
+      type: String,
+    },
+    secondaryValue: {
+      default: null,
+      type: String as PropType<string | null>,
+    },
+    trend: {
+      default: null,
+      type: String as PropType<'up' | 'down' | null>,
+    },
+    caption: {
+      default: null,
+      type: String as PropType<string | null>,
+    },
+  },
+  computed: {
+    backgroundClass(): string {
+      if (this.trend == 'up') {
+        return 'bg-green-50';
+      }
+      if (this.trend == 'down') {
+        return 'bg-red-50';
+      }
+      return '';
+    },
+    textClass(): string {
+      if (this.trend == 'up') {
+        return 'text-green-700';
+      }
+      if (this.trend == 'down') {
+        return 'text-red-700';
+      }
+      return 'text-slate-400';
+    },
+    iconClass(): string {
+      return 'w-5 h-5';
+    },
+    icon(): string {
+      if (this.trend == 'up') {
+        return 'heroicons-solid:chevron-up';
+      }
+      if (this.trend == 'down') {
+        return 'heroicons-solid:chevron-down';
+      }
+      return '';
+    },
+    centerClass(): string {
+      return 'items-center justify-center';
+    },
+  },
+});
+</script>

package/src/components/BaseStepper.stories.js

@@ -1,94 +1,94 @@
-import BaseStepper from './BaseStepper.vue';
-
-export default {
-  title: 'Components/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: 'Components/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,
+};