sprintify-ui 0.0.188 → 0.0.190

package/src/components/BaseDataTable.stories.js

@@ -5,6 +5,7 @@ import BaseSelect from './BaseSelect.vue';
 import BaseBadge from './BaseBadge.vue';
 import BaseAppNotifications from './BaseAppNotifications.vue';
 import BaseAppDialogs from './BaseAppDialogs.vue';
+import { onBeforeUnmount } from 'vue';
 
 export default {
   title: 'Data/BaseDataTable',
@@ -26,6 +27,16 @@ export default {
   },
 };
 
+const templateComponents = {
+  BaseDataTable,
+  BaseTableColumn,
+  BaseBoolean,
+  BaseSelect,
+  BaseBadge,
+  BaseAppNotifications,
+  BaseAppDialogs,
+};
+
 const template = `
 <BaseDataTable v-bind="args" @cell-click="onCellClick">
   <BaseTableColumn
@@ -59,6 +70,9 @@ const template = `
     label="Vote"
     field="votes_avg_score"
     sortable
+    custom-key="votes_avg_score"
+    :toggle="true"
+    :toggle-default="false"
   >
     <div class="whitespace-pre">
       {{ Math.round(row.votes_avg_score) }} / 5
@@ -67,8 +81,11 @@ const template = `
 
   <BaseTableColumn
     v-slot="{ row }"
-    label="Vote"
-    field="votes_avg_score"
+    v-if="ownerIsVisible"
+    label="Owner"
+    custom-key="owner"
+    field="owner_id"
+    :toggle="true"
     sortable
   >
     <BaseBadge>
@@ -92,7 +109,6 @@ const template = `
     label="Access level"
     field="access_level"
     sortable
-    optional
   >
     <BaseBadge>
       {{ row.access_level }}
@@ -160,22 +176,18 @@ const template = `
 <BaseAppDialogs></BaseAppDialogs>
 `;
 
+const templateSetup = (args) => {
+  function onCellClick() {
+    alert('cell click!');
+  }
+
+  return { args, onCellClick, ownerIsVisible: true };
+};
+
 const Template = (args) => ({
-  components: {
-    BaseDataTable,
-    BaseTableColumn,
-    BaseBoolean,
-    BaseSelect,
-    BaseBadge,
-    BaseAppNotifications,
-    BaseAppDialogs,
-  },
+  components: templateComponents,
   setup() {
-    function onCellClick() {
-      alert('cell click!');
-    }
-
-    return { args, onCellClick };
+    return templateSetup(args);
   },
   template: template,
 });
@@ -242,6 +254,26 @@ Demo.args = {
   ],
 };
 
+const VIfOnBaseTableColumn = (args) => ({
+  components: templateComponents,
+  setup() {
+    const ownerIsVisible = ref(true);
+
+    const intervalId = setInterval(() => {
+      ownerIsVisible.value = !ownerIsVisible.value;
+    }, 2000);
+
+    onBeforeUnmount(() => {
+      clearInterval(intervalId);
+    });
+
+    return Object.assign(templateSetup(args), { ownerIsVisible });
+  },
+  template: template,
+});
+
+export const VisibleColumns = VIfOnBaseTableColumn.bind({});
+
 const SimpleTemplate = (args) => ({
   components: {
     BaseDataTable,

package/src/components/BaseDataTable.vue

@@ -533,7 +533,7 @@ if (
   visibleColumns.value = visibleColumnsFromStorage;
 }
 
-// If nothing is found, set visibleColumns to all non optional columns from table
+// If nothing is found, set visibleColumns to all columns from table
 const unWatchTable = watch(
   () => table.value,
   () => {
@@ -543,8 +543,10 @@ const unWatchTable = watch(
       visibleColumns.value.length == 0
     ) {
       visibleColumns.value = table.value.newColumns
-        .filter((c) => !c.optional)
+        .filter((c) => c.toggle)
+        .filter((c) => c.toggleDefault ?? true)
         .map((c) => c.newKey);
+
       unWatchTable();
     }
   }

package/src/components/BaseNavbarItem.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="flex">
     <BaseActionItem
-      :item="item"
+      :to="item.to"
+      :href="item.href"
+      :action="item.action"
       :dark="dark"
-      item-class="flex w-full"
+      class="flex w-full"
       @click="onClick"
     >
       <template #default="{ active }">

package/src/components/BaseNavbarSideItem.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <BaseActionItem
-      :item="item"
+      :to="item.to"
+      :href="item.href"
+      :action="item.action"
       :dark="dark"
-      item-class="flex w-full"
+      class="flex w-full"
       @click="onClick"
     >
       <template #default="{ active }">
@@ -23,9 +25,10 @@
     >
       <div v-for="subItem in item.actions" :key="subItem.label" class="mb-1">
         <BaseActionItem
-          :item="subItem"
-          :dark="dark"
-          :item-class="[
+          :to="subItem.to"
+          :href="subItem.href"
+          :action="subItem.action"
+          :class="[
             'flex w-full',
             dark
               ? 'text-slate-300 hover:text-white'

package/src/components/BaseShortcut.stories.js

@@ -35,7 +35,8 @@ export const Basic = Template.bind({});
 Basic.args = {
   to: '/restaurants',
   title: 'Basic shortcut',
-  icon: 'heroicons:user',
+  icon: 'heroicons:user-solid',
+  color: 'blue',
 };
 
 export const Colors = (args) => ({
@@ -81,3 +82,21 @@ Contrast.args = {
     '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 Href = Template.bind({});
+Href.args = {
+  href: 'https://www.google.com',
+  title: 'Basic shortcut',
+  icon: 'heroicons:user-solid',
+  color: 'blue',
+};
+
+export const Action = Template.bind({});
+Action.args = {
+  action() {
+    alert(1);
+  },
+  title: 'Basic shortcut',
+  icon: 'heroicons:user-solid',
+  color: 'blue',
+};

package/src/components/BaseShortcut.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseCard class="flex duration-200 hover:bg-slate-50">
-    <router-link :to="to">
+    <BaseActionItem :to="to" :href="href" :action="action" class="block w-full">
       <section class="whitespace-pre-line p-4">
         <!-- Icon -->
         <div
@@ -38,7 +38,7 @@
           </div>
         </div>
       </section>
-    </router-link>
+    </BaseActionItem>
   </BaseCard>
 </template>
 
@@ -48,11 +48,20 @@ import { Icon as BaseIcon } from '@iconify/vue';
 import BaseCard from './BaseCard.vue';
 import { RouteLocationRaw } from 'vue-router';
 import { getColorConfig } from '@/utils/colors';
+import BaseActionItem from './BaseActionItem.vue';
 
 const props = defineProps({
   to: {
-    required: true,
-    type: [String, Object] as PropType<RouteLocationRaw>,
+    default: undefined,
+    type: [String, Object, undefined] as PropType<RouteLocationRaw | undefined>,
+  },
+  href: {
+    default: undefined,
+    type: [String, undefined] as PropType<string | undefined>,
+  },
+  action: {
+    default: undefined,
+    type: [Function, undefined] as PropType<() => Promise<void> | undefined>,
   },
   title: {
     required: true,

package/src/components/BaseTable.vue

@@ -399,7 +399,7 @@ const visibleColumns = computed(() => {
 
   return newColumns.value.filter((column: BaseTableColumn) => {
     if (column.toggle === false) {
-      return !!column.visible;
+      return true;
     }
 
     if (!isArray(props.visibleColumns)) {

package/src/components/BaseTableColumn.vue

@@ -44,21 +44,17 @@ export default defineComponent({
       default: false,
       type: Boolean,
     },
-    visible: {
-      default: true,
-      type: Boolean,
-    },
     clickable: {
       default: true,
       type: Boolean,
     },
     toggle: {
       type: Boolean,
-      default: true,
+      default: false,
     },
-    optional: {
+    toggleDefault: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     customSort: {
       default: undefined,
@@ -104,6 +100,12 @@ export default defineComponent({
     },
   },
   created() {
+    if (this.toggle && !this.customKey) {
+      throw new Error(
+        'BaseTableColumn: customKey props is required when toggle props is true'
+      );
+    }
+
     if (this.customKey) {
       this.newKey = this.customKey + '';
     } else {

package/src/types/index.ts

@@ -109,10 +109,9 @@ export interface BaseTableColumn {
   position: 'left' | 'right';
   searchable: boolean;
   sortable: boolean;
-  visible: boolean;
   clickable: boolean;
   toggle: boolean;
-  optional: boolean;
+  toggleDefault: boolean;
   width: number;
   style: {
     width: undefined | number;