sprintify-ui 0.0.35 → 0.0.36

package/dist/types/src/components/BaseShortcut.vue.d.ts

@@ -0,0 +1,67 @@
+import { PropType } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+declare const _default: import("vue").DefineComponent<{
+    to: {
+        required: true;
+        type: PropType<RouteLocationRaw>;
+    };
+    title: {
+        required: true;
+        type: StringConstructor;
+    };
+    description: {
+        default: null;
+        type: StringConstructor;
+    };
+    linkText: {
+        default: null;
+        type: StringConstructor;
+    };
+    color: {
+        default: string;
+        type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+    };
+    icon: {
+        required: true;
+        type: StringConstructor;
+    };
+    contrast: {
+        default: string;
+        type: PropType<"high" | "low">;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        required: true;
+        type: PropType<RouteLocationRaw>;
+    };
+    title: {
+        required: true;
+        type: StringConstructor;
+    };
+    description: {
+        default: null;
+        type: StringConstructor;
+    };
+    linkText: {
+        default: null;
+        type: StringConstructor;
+    };
+    color: {
+        default: string;
+        type: PropType<"gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink">;
+    };
+    icon: {
+        required: true;
+        type: StringConstructor;
+    };
+    contrast: {
+        default: string;
+        type: PropType<"high" | "low">;
+    };
+}>>, {
+    color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
+    description: string;
+    contrast: "high" | "low";
+    linkText: string;
+}>;
+export default _default;

package/dist/types/src/components/BaseStatistic.vue.d.ts

@@ -0,0 +1,56 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        default: null;
+        type: PropType<string | null>;
+    };
+    primaryValue: {
+        required: true;
+        type: StringConstructor;
+    };
+    secondaryValue: {
+        default: null;
+        type: PropType<string | null>;
+    };
+    trend: {
+        default: null;
+        type: PropType<"up" | "down" | null>;
+    };
+    caption: {
+        default: null;
+        type: PropType<string | null>;
+    };
+}, unknown, unknown, {
+    backgroundClass(): string;
+    textClass(): string;
+    iconClass(): string;
+    icon(): string;
+    centerClass(): string;
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        default: null;
+        type: PropType<string | null>;
+    };
+    primaryValue: {
+        required: true;
+        type: StringConstructor;
+    };
+    secondaryValue: {
+        default: null;
+        type: PropType<string | null>;
+    };
+    trend: {
+        default: null;
+        type: PropType<"up" | "down" | null>;
+    };
+    caption: {
+        default: null;
+        type: PropType<string | null>;
+    };
+}>>, {
+    caption: string | null;
+    label: string | null;
+    secondaryValue: string | null;
+    trend: "up" | "down" | null;
+}>;
+export default _default;

package/dist/types/src/components/BaseTimeline.vue.d.ts

@@ -0,0 +1,14 @@
+import { TimelineItem } from '../types/TimelineItem';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        required: true;
+        type: PropType<TimelineItem[]>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        required: true;
+        type: PropType<TimelineItem[]>;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/src/components/BaseTimelineItem.vue.d.ts

@@ -0,0 +1,14 @@
+import { TimelineItem } from '../types/TimelineItem';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    item: {
+        required: true;
+        type: PropType<TimelineItem>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        required: true;
+        type: PropType<TimelineItem>;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/src/components/index.d.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,8 +64,10 @@ 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';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/dist/types/src/types/Colors.d.ts

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

package/dist/types/src/types/TimelineItem.d.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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseShortcut.stories.js

@@ -0,0 +1,92 @@
+import BaseShortcut from './BaseShortcut.vue';
+
+const colors = [
+  'gray',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'indigo',
+  'purple',
+  'pink',
+];
+
+const sizes = ['base', 'lg'];
+
+export default {
+  title: 'Components/BaseShortcut',
+  component: BaseShortcut,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: colors,
+    },
+    contrast: {
+      control: { type: 'select' },
+      options: ['low', 'high'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseShortcut },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseShortcut v-bind="args">
+    </BaseShortcut>
+  `,
+});
+
+export const Basic = Template.bind({});
+Basic.args = {
+  to: '/restaurants',
+  title: 'Basic shortcut',
+  icon: 'heroicons:user',
+};
+
+export const Colors = (args) => ({
+  components: { BaseShortcut },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color">
+    <p class="text-xs text-slate-600 leading-tight my-2">{{ color }}</p>
+    <BaseShortcut v-bind="args" :color="color" icon="heroicons:beaker-20-solid"></BaseShortcut>
+  </div>
+  `,
+});
+
+Colors.args = {
+  contrast: 'high',
+  to: '/restaurants',
+  title: 'Contrast example',
+  description:
+    'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
+  linkText: 'Open app',
+};
+
+export const Contrast = (args) => ({
+  components: { BaseShortcut },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color">
+    <p class="text-xs text-slate-600 leading-tight my-2">{{ color }}</p>
+    <BaseShortcut v-bind="args" :color="color" icon="heroicons:beaker-20-solid"></BaseShortcut>
+  </div>
+  `,
+});
+
+Contrast.args = {
+  contrast: 'low',
+  to: '/restaurants',
+  title: 'Contrast example',
+  description:
+    'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
+  linkText: 'Open app',
+};

package/src/components/BaseShortcut.vue

@@ -0,0 +1,153 @@
+<template>
+  <BaseCard class="inline-flex max-w-sm duration-200 hover:bg-slate-50">
+    <router-link :to="to">
+      <section class="whitespace-pre-line p-4">
+        <!-- Icon -->
+        <div
+          class="mb-2.5 inline-flex items-center rounded p-2"
+          :class="[colorClasses]"
+        >
+          <BaseIcon
+            v-if="icon"
+            :icon="icon"
+            :class="iconSizeClasses"
+          ></BaseIcon>
+        </div>
+        <!-- Title -->
+        <div class="text-md font-semibold">
+          {{ title }}
+        </div>
+        <!-- Description -->
+        <div
+          v-if="description"
+          class="mt-1 mb-3 whitespace-pre-line text-sm text-slate-500 line-clamp-2"
+        >
+          {{ description }}
+        </div>
+        <!-- Text link -->
+        <div
+          v-if="linkText"
+          class="flex items-center justify-start text-sm font-medium"
+        >
+          <div class="mr-1 leading-none">{{ linkText }}</div>
+          <div>
+            <BaseIcon
+              icon="heroicons:arrow-right-20-solid"
+              class="mt-px h-4 w-4"
+            ></BaseIcon>
+          </div>
+        </div>
+      </section>
+    </router-link>
+  </BaseCard>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { BaseIcon } from '.';
+import BaseCard from './BaseCard.vue';
+import { RouteLocationRaw } from 'vue-router';
+
+const props = defineProps({
+  to: {
+    required: true,
+    type: [String, Object] as PropType<RouteLocationRaw>,
+  },
+  title: {
+    required: true,
+    type: String,
+  },
+  description: {
+    default: null,
+    type: String,
+  },
+  linkText: {
+    default: null,
+    type: String,
+  },
+  color: {
+    default: 'gray',
+    type: String as PropType<
+      | 'gray'
+      | 'red'
+      | 'orange'
+      | 'yellow'
+      | 'green'
+      | 'blue'
+      | 'indigo'
+      | 'purple'
+      | 'pink'
+    >,
+  },
+  icon: {
+    required: true,
+    type: String,
+  },
+  contrast: {
+    default: 'low',
+    type: String as PropType<'low' | 'high'>,
+  },
+});
+
+const colorClasses = computed(() => {
+  if (props.color == 'gray') {
+    if (props.contrast == 'high') {
+      return 'bg-slate-600 text-white';
+    }
+    return 'bg-slate-100 text-slate-800 border border-slate-300';
+  }
+  if (props.color == 'red') {
+    if (props.contrast == 'high') {
+      return 'bg-red-600 text-white';
+    }
+    return 'bg-red-100 text-red-700 border border-red-300';
+  }
+  if (props.color == 'orange') {
+    if (props.contrast == 'high') {
+      return 'bg-orange-500 text-white';
+    }
+    return 'bg-orange-100 text-yellow-700 border border-orange-300';
+  }
+  if (props.color == 'yellow') {
+    if (props.contrast == 'high') {
+      return 'bg-yellow-500 text-white';
+    }
+    return 'bg-yellow-100 text-yellow-700 border border-yellow-300';
+  }
+  if (props.color == 'green') {
+    if (props.contrast == 'high') {
+      return 'bg-green-600 text-white';
+    }
+    return 'bg-green-100 text-green-700 border border-green-300';
+  }
+  if (props.color == 'blue') {
+    if (props.contrast == 'high') {
+      return 'bg-blue-600 text-white';
+    }
+    return 'bg-blue-100 text-blue-700 border border-blue-300';
+  }
+  if (props.color == 'indigo') {
+    if (props.contrast == 'high') {
+      return 'bg-indigo-600 text-white';
+    }
+    return 'bg-indigo-100 text-indigo-700 border border-indigo-300';
+  }
+  if (props.color == 'purple') {
+    if (props.contrast == 'high') {
+      return 'bg-purple-600 text-white';
+    }
+    return 'bg-purple-100 text-purple-700 border border-purple-300';
+  }
+  if (props.color == 'pink') {
+    if (props.contrast == 'high') {
+      return 'bg-pink-600 text-white';
+    }
+    return 'bg-pink-100 text-pink-700 border border-pink-300';
+  }
+  return 'bg-slate-100 text-slate-700 border border-slate-300';
+});
+
+const iconSizeClasses = computed(() => {
+  return 'h-4 w-4';
+});
+</script>

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>