sprintify-ui 0.0.34 → 0.0.36

package/src/components/BaseStatistic.stories.js

@@ -0,0 +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',
+};

package/src/components/BaseStatistic.vue

@@ -0,0 +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 { BaseIcon } from '.';
+
+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/BaseTimeline.stories.js

@@ -0,0 +1,53 @@
+import BaseTimeline from './BaseTimeline.vue';
+
+export default {
+  title: 'Components/BaseTimeline',
+  component: BaseTimeline,
+};
+
+const Template = (args) => ({
+  components: { BaseTimeline },
+  setup() {
+    return { args };
+  },
+  template: `<div class="max-w-md"><BaseTimeline v-bind="args"/></div>`,
+});
+
+const items = [
+  {
+    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: null,
+    date: '15 Jan',
+  },
+  {
+    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: 'danger',
+    date: null,
+  },
+  {
+    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: 'success',
+    date: '15 Jan',
+  },
+  {
+    title: 'Advanced to phone screening by Bethany Blake',
+    icon: 'heroicons:shield-check-20-solid',
+    description: '',
+    color: 'info',
+    date: '15 Jan',
+  },
+];
+
+export const Demo = Template.bind({});
+Demo.args = {
+  items: items,
+};

package/src/components/BaseTimeline.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flow-root">
+    <ul role="list" class="-mb-8">
+      <li v-for="(item, index) in items" :key="index">
+        <div class="relative pb-8">
+          <span
+            v-if="index != items.length - 1"
+            class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+            aria-hidden="true"
+          />
+          <BaseTimelineItem :item="item" />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TimelineItem } from '../types/TimelineItem';
+import { PropType } from 'vue';
+import BaseTimelineItem from './BaseTimelineItem.vue';
+
+defineProps({
+  items: {
+    required: true,
+    type: Array as PropType<TimelineItem[]>,
+  },
+});
+</script>

package/src/components/BaseTimelineItem.stories.js

@@ -0,0 +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({});

package/src/components/BaseTimelineItem.vue

@@ -0,0 +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="w-5 h-5 text-white"
+          aria-hidden="true"
+          :icon="item.icon"
+        />
+      </span>
+    </div>
+    <div
+      class="flex justify-between flex-1 min-w-0 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="text-sm text-right text-gray-500 whitespace-nowrap"
+      >
+        <time :datetime="item.date">{{ item.date }}</time>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TimelineItem } from '../types/TimelineItem';
+import { Colors } from '../types/Colors';
+import { PropType } from 'vue';
+import { BaseIcon } from '.';
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<TimelineItem>,
+  },
+});
+
+const iconBackgroundClass = computed((): string => {
+  if (props.item.color == Colors.primary) {
+    return 'bg-primary-600';
+  }
+  if (props.item.color == Colors.danger) {
+    return 'bg-red-600';
+  }
+  if (props.item.color == Colors.warning) {
+    return 'bg-yellow-600';
+  }
+  if (props.item.color == Colors.info) {
+    return 'bg-blue-500';
+  }
+  if (props.item.color == Colors.grey) {
+    return 'bg-slate-500';
+  }
+  if (props.item.color == Colors.black) {
+    return 'bg-slate-900';
+  }
+  if (props.item.color == Colors.success) {
+    return 'bg-green-500';
+  }
+  return 'bg-gray-500';
+});
+</script>

package/src/components/index.ts

@@ -49,9 +49,11 @@ import BaseProgressCircle from './BaseProgressCircle.vue';
 import BaseRadioGroup from './BaseRadioGroup.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseSelect from './BaseSelect.vue';
+import BaseShortcut from './BaseShortcut.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
 import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
 import BaseSkeleton from './BaseSkeleton.vue';
+import BaseStatistic from './BaseStatistic.vue';
 import BaseSwitch from './BaseSwitch.vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
 import BaseTabs from './BaseTabs.vue';
@@ -62,6 +64,8 @@ import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
 import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+import BaseTimeline from './BaseTimeline.vue';
+import BaseTimelineItem from './BaseTimelineItem.vue';
 
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
@@ -120,9 +124,11 @@ export {
   BaseRadioGroup,
   BaseReadMore,
   BaseSelect,
+  BaseShortcut,
   BaseSideNavigation,
   BaseSideNavigationItem,
   BaseSkeleton,
+  BaseStatistic,
   BaseSwitch,
   BaseSystemAlert,
   BaseTabs,
@@ -133,6 +139,8 @@ export {
   BaseTableColumn,
   BaseTextarea,
   BaseTextareaAutoresize,
+  BaseTimeline,
+  BaseTimelineItem,
   BaseLayoutStacked,
   BaseLayoutStackedConfigurable,
   BaseLayoutSidebar,

package/src/index.ts

@@ -8,7 +8,6 @@ import fr from '@/lang/fr.json';
 import { useDialogsStore } from './stores/dialogs';
 import { useNotificationsStore } from './stores/notifications';
 import { useSystemAlertStore } from './stores/systemAlerts';
-import { ActionItem } from './types/types';
 
 const messages = { en, fr };
 
@@ -82,5 +81,3 @@ export { config };
 export { useDialogsStore };
 export { useNotificationsStore };
 export { useSystemAlertStore };
-
-export { type ActionItem };

package/src/types/Colors.ts

@@ -0,0 +1,9 @@
+export enum Colors {
+  primary = 'primary',
+  danger = 'danger',
+  warning = 'warning',
+  info = 'info',
+  grey = 'grey',
+  black = 'black',
+  success = 'success',
+}

package/src/types/TimelineItem.ts

@@ -0,0 +1,8 @@
+import { Colors } from './Colors';
+export interface TimelineItem {
+  title: string;
+  icon: string;
+  description?: null | string;
+  date?: string | null;
+  color?: Colors | null;
+}