sprintify-ui 0.2.26 → 0.2.28

package/src/components/BaseRichText.vue

@@ -101,27 +101,33 @@ function updateChange(value: string | null): string | null {
   .ql-toolbar.ql-snow {
     @apply rounded-t border-slate-300 font-sans;
   }
+
   .ql-container.ql-snow {
     @apply rounded-b border-slate-300 font-sans;
   }
+
   .ql-container {
     @apply font-sans;
   }
+
   &.error {
+
     & .ql-toolbar.ql-snow,
     & .ql-container.ql-snow {
       @apply border-red-500;
     }
   }
+
   .ql-tooltip {
     @apply z-menu;
   }
+
   .ql-container {
     @apply text-slate-900;
   }
 
   .ql-editor.ql-blank::before {
-    @apply text-base text-slate-400;
+    @apply text-base text-slate-400 font-light not-italic;
   }
 
   /** Style Prose */
@@ -129,24 +135,31 @@ function updateChange(value: string | null): string | null {
     h1 {
       @apply mt-0 mb-8 text-4xl font-bold leading-snug tracking-normal;
     }
+
     h2 {
       @apply mt-6 mb-4 text-3xl font-bold leading-snug tracking-normal;
     }
+
     h3 {
       @apply mt-5 mb-3 text-2xl font-bold leading-snug tracking-normal;
     }
+
     h4 {
       @apply mt-4 mb-2 text-xl font-bold leading-snug tracking-normal;
     }
+
     p {
       @apply my-5 text-base leading-relaxed;
+
       &:first-child {
         @apply mt-0;
       }
     }
+
     ol,
     ul {
       padding-left: 2rem;
+
       li {
         @apply my-2 text-base leading-relaxed;
         padding-left: 0.5rem;
@@ -160,13 +173,16 @@ function updateChange(value: string | null): string | null {
         }
       }
     }
+
     blockquote {
       @apply my-5 text-base;
     }
+
     pre {
       @apply my-5 p-4 text-sm;
     }
   }
+
   h1,
   h2,
   h3,

package/src/components/BaseShortcut.vue

@@ -25,7 +25,7 @@
         <!-- Description -->
         <div
           v-if="description"
-          class="mt-1 mb-3 whitespace-pre-line text-sm text-slate-500 line-clamp-2"
+          class="mt-1 mb-3 whitespace-pre-line text-sm font-light text-slate-500 line-clamp-2"
         >
           {{ description }}
         </div>

package/src/components/BaseSideNavigation.stories.js

@@ -32,7 +32,12 @@ const Template = (args) => ({
             <BaseSideNavigationItem to="/"  v-slot="{active}">
               <div class="flex items-center">
                 <span class="mr-1">Home</span>
-                <BaseCounter :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" :color="active ? 'primary' : 'light'" :count="1"></BaseCounter>  
+                <BaseCounter 
+                  class="shrink-0"
+                  :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" 
+                  :color="active ? 'primary' : 'light'"
+                  :count="1">
+                </BaseCounter>  
                 </div>
             </BaseSideNavigationItem>
             <BaseSideNavigationItem to="/setup">

package/src/components/BaseSideNavigationItem.vue

@@ -83,7 +83,7 @@ const sizeClassOuter = computed(() => {
 const sizeClassInner = computed(() => {
   switch (size.value) {
     case 'xs':
-      return 'text-xs px-3 py-0.5 font-normal';
+      return 'text-xs px-3 py-0.5 font-light';
     case 'sm':
       return 'text-sm px-4 py-0.5 font-normal';
     case 'md':

package/src/components/BaseStatistic.vue

@@ -5,7 +5,7 @@
   >
     <section>
       <!-- Label -->
-      <header class="mb-0.5 text-base font-medium">
+      <header class="mb-1 text-base font-medium">
         {{ label }}
       </header>
       <!-- Content -->
@@ -13,29 +13,29 @@
         class="flex"
         :class="[centerClass]"
       >
-        <div class="text-3xl font-bold leading-tight">
+        <div class="text-3xl font-semibold leading-tight">
           {{ primaryValue }}
         </div>
 
         <div
           v-if="secondaryValue"
-          class="ml-1 flex rounded-md px-1 text-lg font-bold"
+          class="ml-2 flex rounded-full px-1.5"
           :class="[backgroundClass, textClass, centerClass]"
         >
           <!-- Icon trend -->
           <div v-if="trend">
             <BaseIcon
               :icon="icon"
-              :class="iconClass"
+              class="w-4 h-4"
             />
           </div>
-          <div class="text-lg">
+          <div class="text-sm font-medium">
             {{ secondaryValue }}
           </div>
         </div>
       </div>
       <!-- Caption -->
-      <footer class="text-base text-slate-500">
+      <footer class="text-sm text-slate-500 font-light">
         {{ caption }}
       </footer>
     </section>
@@ -73,24 +73,21 @@ export default defineComponent({
   computed: {
     backgroundClass(): string {
       if (this.trend == 'up') {
-        return 'bg-green-50';
+        return 'bg-green-100 border border-green-300';
       }
       if (this.trend == 'down') {
-        return 'bg-red-50';
+        return 'bg-red-100 border border-red-300';
       }
       return '';
     },
     textClass(): string {
       if (this.trend == 'up') {
-        return 'text-green-700';
+        return 'text-green-800';
       }
       if (this.trend == 'down') {
-        return 'text-red-700';
+        return 'text-red-800';
       }
-      return 'text-slate-400';
-    },
-    iconClass(): string {
-      return 'w-5 h-5';
+      return 'text-slate-900';
     },
     icon(): string {
       if (this.trend == 'up') {

package/src/components/BaseTabItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <li class="[&:first-child_a]:pl-0 [&:last-child_a]:pr-0">
     <RouterLink
       v-slot="{ href, navigate, isActive, isExactActive }"
       :to="to"
@@ -18,19 +18,20 @@
         ]"
         @click.prevent="onClick(navigate)"
       >
-        <div
-          class="relative flex"
-          :class="sizeClassInner"
-        >
+        <div class="relative flex py-1">
           <div
-            class="absolute left-0 bottom-0 w-full"
+            v-if="isActiveInternal(isActive, isExactActive)"
+            class="absolute left-0 bottom-0 w-full h-[2px] bg-primary-600"
+          />
+          <div
+            class="whitespace-nowrap rounded-md"
             :class="[
               isActiveInternal(isActive, isExactActive)
-                ? 'h-[2px] bg-primary-600'
-                : 'group-hover:h-px group-hover:bg-slate-700',
+                ? 'group-hover:bg-primary-100'
+                : 'group-hover:bg-slate-200',
+              sizeClassInner
             ]"
-          />
-          <div class="whitespace-nowrap">
+          >
             <slot :active="isActiveInternal(isActive, isExactActive)" />
           </div>
         </div>
@@ -73,24 +74,24 @@ const sizeClassOuter = computed(() => {
     case 'xs':
       return 'px-1';
     case 'sm':
-      return 'px-2';
+      return 'px-1.5';
     case 'md':
-      return 'px-2.5';
+      return 'px-2';
     case 'lg':
-      return 'px-3';
+      return 'px-2';
   }
 });
 
 const sizeClassInner = computed(() => {
   switch (size.value) {
     case 'xs':
-      return 'text-xs py-2 px-1 font-normal';
+      return 'text-xs py-1 px-1 font-light';
     case 'sm':
-      return 'text-sm py-2.5 px-1 font-normal';
+      return 'text-sm py-1 px-2 font-normal';
     case 'md':
-      return 'text-sm py-4 px-1 font-normal';
+      return 'text-sm py-1.5 px-2 font-normal';
     case 'lg':
-      return 'text-base py-4 px-1 font-normal';
+      return 'text-base py-1.5 px-3 font-normal';
   }
 });
 </script>

package/src/components/BaseTable.vue

@@ -88,23 +88,19 @@
                         ]"
                       >
                         <svg
-                          viewBox="0 0 24 24"
+                          viewBox="0 0 20 20"
                           class="absolute top-1/2 h-5 w-5 -translate-y-1/2"
                         >
-                          <g transform="translate(0 -3)">
-                            <path
-                              :opacity="!isAsc ? '0.5' : '1'"
-                              fill="currentColor"
-                              d="M8.71 12.29L11.3 9.7a.996.996 0 0 1 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71z"
-                            ></path>
-                          </g>
-                          <g transform="translate(0 3)">
-                            <path
-                              :opacity="isAsc ? '0.5' : '1'"
-                              fill="currentColor"
-                              d="m8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z"
-                            ></path>
-                          </g>
+                          <path
+                            :opacity="!isAsc ? '0.5' : '1'"
+                            fill="currentColor"
+                            d="M9.116 4.823a1.25 1.25 0 0 1 1.768 0l2.646 2.647a.75.75 0 0 1-1.06 1.06l-2.47-2.47-2.47 2.47a.75.75 0 1 1-1.06-1.06l2.646-2.647Z"
+                          ></path>
+                          <path
+                            :opacity="isAsc ? '0.5' : '1'"
+                            fill="currentColor"
+                            d="M9.116 15.177a1.25 1.25 0 0 0 1.768 0l2.646-2.647a.75.75 0 0 0-1.06-1.06l-2.47 2.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l2.646 2.647Z"
+                          ></path>
                         </svg>
                       </div>
                     </button>
@@ -180,7 +176,7 @@
                       scoped
                       name="default"
                       tag="td"
-                      class="bg-white text-sm"
+                      class="bg-white text-sm font-light"
                       :class="[
                         borderBottomClasses(index, row),
                         column.clickable ? 'cursor-pointer' : '',
@@ -831,7 +827,7 @@ function zIndex(th: boolean) {
 function detailsStyles(th: boolean): any {
   if (props.detailed) {
     return {
-      zIndex: zIndex(th),
+      zIndex: zIndex(th) + 1,
       position: 'sticky',
       left: 0,
       width: DETAIL_ROW_WIDTH + 'px',
@@ -845,7 +841,7 @@ function detailsStyles(th: boolean): any {
 function checkStyles(th: boolean): any {
   if (props.checkable) {
     return {
-      zIndex: zIndex(th),
+      zIndex: zIndex(th) + 1,
       position: 'sticky',
       left: props.detailed ? DETAIL_ROW_WIDTH + 'px' : 0,
       width: CHECK_ROW_WIDTH + 'px',

package/src/components/BaseTextareaAutoresize.vue

@@ -40,7 +40,7 @@ import { twMerge } from 'tailwind-merge';
 import { PropType } from 'vue';
 
 const BASE_TEXTAREA_CLASSES =
-  'py-2 px-3 font-normal text-base disabled:cursor-not-allowed disabled:text-slate-300 font-sans rounded leading-normal tracking-normal border';
+  'py-2 px-3 font-normal text-base disabled:cursor-not-allowed disabled:text-slate-300 font-sans rounded leading-normal tracking-normal border placeholder:text-slate-400 placeholder:font-light';
 
 const BASE_GRID_AREA = '1 / 1 / 2 / 2';
 

package/src/components/BaseTimeline.vue

@@ -11,7 +11,7 @@
         <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-slate-200"
+            class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-300"
             aria-hidden="true"
           />
           <BaseTimelineItem :item="item" />

package/src/components/BaseTimelineItem.vue

@@ -3,12 +3,12 @@
     <div>
       <span
         :class="[
-          iconBackgroundClass,
-          'flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-white',
+          'flex h-8 w-8 items-center justify-center rounded-full',
         ]"
+        :style="colorStyle"
       >
         <BaseIcon
-          class="h-5 w-5 text-white"
+          class="h-5 w-5"
           aria-hidden="true"
           :icon="item.icon"
         />
@@ -19,19 +19,19 @@
       :class="{ 'pt-1.5': !item.description }"
     >
       <div>
-        <p class="text-sm leading-tight text-slate-600">
+        <p class="text-sm leading-tight text-slate-900">
           {{ item.title }}
         </p>
         <p
           v-if="item.description"
-          class="mt-1 text-xs leading-tight text-slate-500"
+          class="mt-1 text-xs leading-tight text-slate-500 font-light"
         >
           {{ item.description }}
         </p>
       </div>
       <div
         v-if="item.date"
-        class="whitespace-nowrap text-right text-sm text-slate-500"
+        class="whitespace-nowrap text-right text-xs text-slate-500 font-light"
       >
         <time :datetime="item.date">{{ item.date }}</time>
       </div>
@@ -41,9 +41,9 @@
 
 <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';
+import { getColorConfig } from '@/utils/colors';
 
 const props = defineProps({
   item: {
@@ -52,28 +52,18 @@ const props = defineProps({
   },
 });
 
-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';
+const colorStyle = computed((): Record<string, string> => {
+  const config = getColorConfig(props.item.color ?? 'gray', false);
+
+  const styles: Record<string, string> = {
+    backgroundColor: config.backgroundColor,
+    color: config.textColor,
+    borderColor: config.borderColor,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+  };
+
+  return styles;
 });
+
 </script>

package/src/components/BaseToast.stories.js

@@ -0,0 +1,50 @@
+import BaseToast from './BaseToast.vue';
+
+export default {
+  title: 'Components/BaseToast',
+  component: BaseToast,
+  args: {
+    text: 'Successfully saved',
+  },
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['success', 'info', 'warning', 'danger'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseToast,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseToast v-bind="args" @close="onClose"></BaseToast>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+const colors = ['info', 'success', 'warning', 'danger'];
+
+const Colors = (args) => ({
+  components: {
+    BaseToast,
+  },
+  setup() {
+    return { args, colors };
+  },
+  template: `
+  <div v-for="color in colors" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+    <BaseToast v-bind="args" :color="color"></BaseToast>
+  </div>
+  `,
+});
+
+export const AllColors = Colors.bind({});
+AllColors.args = {};

package/src/components/BaseToast.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex justify-center">
+    <div class="inline-flex items-center max-w-sm overflow-hidden rounded bg-slate-700 shadow-xl py-3 px-3">
+      <BaseIcon
+        :icon="icon" 
+        class="w-5 h-5 mr-2.5 shrink-0"
+        :class="colorClass"
+      />
+      
+      <p class="text-sm leading-snug text-white font-light line-clamp-4">
+        {{ text }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  text: string;
+  color: string;
+}>();
+
+const colorClass = computed(() => {
+  if (props.color == 'warning') {
+    return 'text-yellow-500';
+  } else if (props.color == 'danger') {
+    return 'text-red-500';
+  } else if (props.color == 'success') {
+    return 'text-green-500';
+  }
+  return 'text-blue-500';
+});
+
+const icon = computed(() => {
+  if (props.color == 'warning') {
+    return 'heroicons-solid:exclamation';
+  } else if (props.color == 'danger') {
+    return 'heroicons-solid:exclamation-circle';
+  } else if (props.color == 'success') {
+    return 'heroicons-solid:check-circle';
+  }
+  return 'heroicons-solid:information-circle';
+});
+</script>

package/src/stories/List.stories.js

@@ -0,0 +1,132 @@
+import BaseHeader from '../components/BaseHeader.vue';
+import BaseTabs from '../components/BaseTabs.vue';
+import BaseTabItem from '../components/BaseTabItem.vue';
+import BaseDataTable from '../components/BaseDataTable.vue';
+import BaseTableColumn from '../components/BaseTableColumn.vue';
+import BaseBoolean from '../components/BaseBoolean.vue';
+import BaseSelect from '../components/BaseSelect.vue';
+import BaseBadge from '../components/BaseBadge.vue';
+import BaseCounter from '../components/BaseCounter.vue';
+import BaseAppNotifications from '../components/BaseAppNotifications.vue';
+import BaseAppDialogs from '../components/BaseAppDialogs.vue';
+import BaseContainer from '../components/BaseContainer.vue';
+import { DateTime } from 'luxon';
+import { templateDataTable } from '../../.storybook/utils';
+
+export default {
+    title: 'Pages/List',
+    component: BaseDataTable,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        layout: {
+            control: { type: 'select' },
+            options: ['default', 'compact'],
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md'],
+        }
+    },
+    args: {
+        url: 'https://effettandem.com/api/content/articles',
+        urlQuery: {
+            per_page: 10,
+        },
+        historyMode: false,
+        detailed: true,
+        searchable: true,
+        checkable: true,
+        layout: 'compact',
+        size: 'sm',
+        showUrl() {
+            return '/';
+        },
+        editUrl() {
+            return '/';
+        },
+        deleteUrl() {
+            return '/';
+        },
+        actions: [
+            {
+                label: 'Export',
+                icon: 'heroicons:arrow-down-tray',
+                action: () => alert('export!'),
+            },
+            { line: true },
+            {
+                label: 'Delete all',
+                icon: 'heroicons:trash',
+                action: () => alert('Delete All!'),
+                color: 'danger',
+            },
+        ],
+        checkableActions: [
+            {
+                label: 'Delete all',
+                action: () => {
+                    alert('delete!');
+                },
+            },
+        ],
+    },
+};
+
+const templateComponents = {
+    BaseHeader,
+    BaseTabs,
+    BaseTabItem,
+    BaseDataTable,
+    BaseTableColumn,
+    BaseBoolean,
+    BaseSelect,
+    BaseBadge,
+    BaseAppNotifications,
+    BaseAppDialogs,
+    BaseCounter,
+    BaseContainer,
+};
+
+const template = `
+<div class="bg-slate-100 py-6">
+<BaseContainer>
+    <BaseHeader
+        title="Articles"
+        :actions="[
+            {label: 'New article', icon: 'heroicons:plus', action: () => alert('new article!'), color: 'primary'},
+            {label: 'Export', icon: 'heroicons:arrow-down-tray', action: () => alert('export!')},
+            {label: 'Import', icon: 'heroicons:arrow-up-tray', action: () => alert('import!')},
+        ]"
+        :breadcrumbs="[{label: 'Home', to: '/'}, {label: 'Articles', to: '/articles'}]"
+        class="mb-1"
+    ></BaseHeader>
+
+    <BaseTabs class="mb-4" size="sm">
+        <BaseTabItem to="/">All</BaseTabItem>
+        <BaseTabItem to="/settings">Videos <BaseCounter :count="4"></BaseCounter></BaseTabItem>
+        <BaseTabItem to="/setup">Articles</BaseTabItem>
+    </BaseTabs>
+
+    ${templateDataTable}
+
+    <BaseAppNotifications></BaseAppNotifications>
+    <BaseAppDialogs></BaseAppDialogs>
+</BaseContainer>
+</div>
+`;
+
+const Template = (args) => ({
+    components: templateComponents,
+    template: template,
+    setup() {
+        function onCellClick(row) {
+            alert('Cell click: ' + row.id);
+        }
+
+        return { args, onCellClick, DateTime };
+    },
+});
+
+export const Demo = Template.bind({});