sprintify-ui 0.1.15 → 0.1.17

package/src/components/BaseTimelineItem.stories.js

@@ -1,78 +1,78 @@
-import BaseTimelineItem from './BaseTimelineItem.vue';
-
-const colors = [
-  'primary',
-  'success',
-  'danger',
-  'warning',
-  'info',
-  'grey',
-  'black',
-];
-
-export default {
-  title: 'Components/BaseTimelineItem',
-  component: BaseTimelineItem,
-};
-
-const Template = (args) => ({
-  components: { BaseTimelineItem },
-  setup() {
-    return { args };
-  },
-  template: `<div class="max-w-md"><BaseTimelineItem v-bind="args"/></div>`,
-});
-
-const ColorsTemplate = (args) => ({
-  components: { BaseTimelineItem },
-  setup() {
-    const items = colors.map((color) => {
-      return {
-        title: 'Advanced to phone screening by Bethany Blake',
-        icon: 'heroicons:shield-check-20-solid',
-        description:
-          'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
-        color: color,
-        date: '15 Jan',
-      };
-    });
-    return { args, items };
-  },
-  template: `
-  <div class="max-w-md">
-  <ul role="list" class="-mb-8">
-  <li v-for="(item, index) in items" :key="index">
-  <p class="text-xs text-slate-600 leading-tight mb-4">{{ item.color }}</p>
-        <div class="relative pb-8">
-          <BaseTimelineItem :item="item" />
-        </div>
-      </li>
-      </ul>
-      </div>
-  `,
-});
-
-export const Simple = Template.bind({});
-Simple.args = {
-  item: {
-    title: 'Advanced to phone screening by Bethany Blake',
-    icon: 'heroicons:shield-check-20-solid',
-    description: '',
-    color: 'warning',
-    date: '15 Jan',
-  },
-};
-
-export const WithDescription = Template.bind({});
-WithDescription.args = {
-  item: {
-    title: 'Advanced to phone screening by Bethany Blake',
-    icon: 'heroicons:shield-check-20-solid',
-    description:
-      'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
-    color: 'primary',
-    date: '15 Jan',
-  },
-};
-
-export const Colors = ColorsTemplate.bind({});
+import BaseTimelineItem from './BaseTimelineItem.vue';
+
+const colors = [
+  'primary',
+  'success',
+  'danger',
+  'warning',
+  'info',
+  'grey',
+  'black',
+];
+
+export default {
+  title: 'Components/BaseTimelineItem',
+  component: BaseTimelineItem,
+};
+
+const Template = (args) => ({
+  components: { BaseTimelineItem },
+  setup() {
+    return { args };
+  },
+  template: `<div class="max-w-md"><BaseTimelineItem v-bind="args"/></div>`,
+});
+
+const ColorsTemplate = (args) => ({
+  components: { BaseTimelineItem },
+  setup() {
+    const items = colors.map((color) => {
+      return {
+        title: 'Advanced to phone screening by Bethany Blake',
+        icon: 'heroicons:shield-check-20-solid',
+        description:
+          'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
+        color: color,
+        date: '15 Jan',
+      };
+    });
+    return { args, items };
+  },
+  template: `
+  <div class="max-w-md">
+  <ul role="list" class="-mb-8">
+  <li v-for="(item, index) in items" :key="index">
+  <p class="text-xs text-slate-600 leading-tight mb-4">{{ item.color }}</p>
+        <div class="relative pb-8">
+          <BaseTimelineItem :item="item" />
+        </div>
+      </li>
+      </ul>
+      </div>
+  `,
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  item: {
+    title: 'Advanced to phone screening by Bethany Blake',
+    icon: 'heroicons:shield-check-20-solid',
+    description: '',
+    color: 'warning',
+    date: '15 Jan',
+  },
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  item: {
+    title: 'Advanced to phone screening by Bethany Blake',
+    icon: 'heroicons:shield-check-20-solid',
+    description:
+      'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
+    color: 'primary',
+    date: '15 Jan',
+  },
+};
+
+export const Colors = ColorsTemplate.bind({});

package/src/components/BaseTimelineItem.vue

@@ -1,79 +1,79 @@
-<template>
-  <div class="relative flex space-x-3">
-    <div>
-      <span
-        :class="[
-          iconBackgroundClass,
-          'flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-white',
-        ]"
-      >
-        <BaseIcon
-          class="h-5 w-5 text-white"
-          aria-hidden="true"
-          :icon="item.icon"
-        />
-      </span>
-    </div>
-    <div
-      class="flex min-w-0 flex-1 justify-between space-x-4"
-      :class="{ 'pt-1.5': !item.description }"
-    >
-      <div>
-        <p class="text-sm leading-tight text-slate-600">
-          {{ item.title }}
-        </p>
-        <p
-          v-if="item.description"
-          class="mt-1 text-xs leading-tight text-slate-500"
-        >
-          {{ item.description }}
-        </p>
-      </div>
-      <div
-        v-if="item.date"
-        class="whitespace-nowrap text-right text-sm text-slate-500"
-      >
-        <time :datetime="item.date">{{ item.date }}</time>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { TimelineItem } from '../types/TimelineItem';
-import { Color } from '../types/Color';
-import { PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-
-const props = defineProps({
-  item: {
-    required: true,
-    type: Object as PropType<TimelineItem>,
-  },
-});
-
-const iconBackgroundClass = computed((): string => {
-  if (props.item.color == Color.primary) {
-    return 'bg-primary-600';
-  }
-  if (props.item.color == Color.danger) {
-    return 'bg-red-600';
-  }
-  if (props.item.color == Color.warning) {
-    return 'bg-yellow-600';
-  }
-  if (props.item.color == Color.info) {
-    return 'bg-blue-500';
-  }
-  if (props.item.color == Color.grey) {
-    return 'bg-slate-500';
-  }
-  if (props.item.color == Color.black) {
-    return 'bg-slate-900';
-  }
-  if (props.item.color == Color.success) {
-    return 'bg-green-500';
-  }
-  return 'bg-slate-500';
-});
-</script>
+<template>
+  <div class="relative flex space-x-3">
+    <div>
+      <span
+        :class="[
+          iconBackgroundClass,
+          'flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-white',
+        ]"
+      >
+        <BaseIcon
+          class="h-5 w-5 text-white"
+          aria-hidden="true"
+          :icon="item.icon"
+        />
+      </span>
+    </div>
+    <div
+      class="flex min-w-0 flex-1 justify-between space-x-4"
+      :class="{ 'pt-1.5': !item.description }"
+    >
+      <div>
+        <p class="text-sm leading-tight text-slate-600">
+          {{ item.title }}
+        </p>
+        <p
+          v-if="item.description"
+          class="mt-1 text-xs leading-tight text-slate-500"
+        >
+          {{ item.description }}
+        </p>
+      </div>
+      <div
+        v-if="item.date"
+        class="whitespace-nowrap text-right text-sm text-slate-500"
+      >
+        <time :datetime="item.date">{{ item.date }}</time>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TimelineItem } from '../types/TimelineItem';
+import { Color } from '../types/Color';
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<TimelineItem>,
+  },
+});
+
+const iconBackgroundClass = computed((): string => {
+  if (props.item.color == Color.primary) {
+    return 'bg-primary-600';
+  }
+  if (props.item.color == Color.danger) {
+    return 'bg-red-600';
+  }
+  if (props.item.color == Color.warning) {
+    return 'bg-yellow-600';
+  }
+  if (props.item.color == Color.info) {
+    return 'bg-blue-500';
+  }
+  if (props.item.color == Color.grey) {
+    return 'bg-slate-500';
+  }
+  if (props.item.color == Color.black) {
+    return 'bg-slate-900';
+  }
+  if (props.item.color == Color.success) {
+    return 'bg-green-500';
+  }
+  return 'bg-slate-500';
+});
+</script>

package/src/components/SlotComponent.ts

@@ -1,37 +1,37 @@
-import { DefineComponent, defineComponent, h } from 'vue';
-
-/**
- * Base component to manually render the slot of component
- */
-export default defineComponent({
-  name: 'SlotComponent',
-  props: {
-    component: {
-      type: Object,
-      required: true,
-    },
-    name: {
-      type: String,
-      default: 'default',
-    },
-    props: {
-      required: true,
-      type: Object,
-    },
-    tag: {
-      type: String,
-      default: 'div',
-    },
-  },
-  render() {
-    let slots = (this.component as DefineComponent).$slots;
-
-    if (slots == undefined) {
-      slots = (this.component as DefineComponent).slots;
-    }
-
-    const slot = slots[this.name](this.props);
-
-    return h(this.tag, {}, slot);
-  },
-});
+import { DefineComponent, defineComponent, h } from 'vue';
+
+/**
+ * Base component to manually render the slot of component
+ */
+export default defineComponent({
+  name: 'SlotComponent',
+  props: {
+    component: {
+      type: Object,
+      required: true,
+    },
+    name: {
+      type: String,
+      default: 'default',
+    },
+    props: {
+      required: true,
+      type: Object,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  render() {
+    let slots = (this.component as DefineComponent).$slots;
+
+    if (slots == undefined) {
+      slots = (this.component as DefineComponent).slots;
+    }
+
+    const slot = slots[this.name](this.props);
+
+    return h(this.tag, {}, slot);
+  },
+});