sprintify-ui 0.0.178 → 0.0.180

package/src/components/BaseDataTable.vue

@@ -7,6 +7,8 @@
     :searchable="searchable"
     :actions="actions"
     :history-mode="historyMode"
+    :layout="layout"
+    :sections="sectionsInternal"
   >
     <template
       #default="{
@@ -20,25 +22,61 @@
       }"
     >
       <BaseCard clipped class="w-full overflow-hidden">
+        <div v-if="newCheckedRows.length">
+          <div
+            class="flex items-center justify-between border-b border-slate-200 bg-slate-50 py-2 pl-3 pr-2 text-sm"
+          >
+            <div>
+              <span class="mr-3 text-slate-500"
+                >{{
+                  $t('sui.x_rows_selected', {
+                    count: newCheckedRows.length,
+                  })
+                }}.</span
+              >
+              <button
+                type="button"
+                class="mr-3 inline text-slate-700 underline"
+                @click="uncheckAll()"
+              >
+                {{ $t('sui.deselect_all') }}
+              </button>
+            </div>
+            <BaseMenu
+              v-if="checkableActions?.length"
+              menu-class="w-52"
+              :items="checkableActions"
+            >
+              <template #button="{ open }">
+                <div
+                  class="flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white duration-150 hover:bg-slate-50"
+                  :class="[
+                    open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
+                  ]"
+                >
+                  <BaseIcon icon="heroicons-solid:dots-vertical" />
+                </div>
+              </template>
+            </BaseMenu>
+          </div>
+        </div>
+
         <BaseTable
           ref="table"
+          :checked-rows="newCheckedRows"
           :data="items"
           :loading="loading"
           :detailed="detailed"
           :has-detailed-visible="hasDetailedVisible"
           :checkable="checkable"
-          :checkable-actions="checkableActions"
-          :checked-rows="checkedRows"
           :is-row-checkable="isRowCheckable"
           checkbox-position="left"
           :sort-field="sortField"
           :sort-direction="sortDirection"
           :max-height="maxHeight"
           :visible-columns="visibleColumns"
+          @update:checked-rows="onCheckedRowsUpdate"
           @sort="onSortChange"
-          @check="$emit('check', $event)"
-          @update:checked-rows="$emit('update:checked-rows', $event)"
-          @check-all="$emit('checkAll', $event)"
           @cell-click="onCellClick"
         >
           <template #default>
@@ -50,35 +88,40 @@
               :toggle="false"
               :clickable="false"
               custom-key="actions"
+              class="overflow-hidden"
             >
-              <div class="flex justify-end text-right">
+              <div class="flex justify-end gap-1 pr-2 text-right">
                 <slot name="rowActions" :row="row" />
 
-                <router-link
-                  v-if="editButton && editUrl"
-                  :to="editUrl(row)"
-                  :disabled="!canUpdate(row)"
-                >
-                  <button class="btn btn-white bg-transparent p-2">
-                    <BaseIcon
-                      icon="heroicons:cog-6-tooth-solid"
-                      class="text-slate-500"
-                    />
-                  </button>
-                </router-link>
-
-                <button
-                  v-if="deleteButton && deleteUrl"
-                  type="button"
-                  class="btn btn-white bg-transparent p-2"
-                  :disabled="!canDelete(row)"
-                  @click="onDeleteClick(row)"
-                >
-                  <BaseIcon
-                    icon="heroicons:trash-solid"
-                    class="text-slate-500"
-                  />
-                </button>
+                <div class="btn-group">
+                  <template
+                    v-for="rowAction in visibleRowActions"
+                    :key="rowAction.icon"
+                  >
+                    <BaseDataTableRowAction
+                      :row="row"
+                      :row-action="rowAction"
+                    ></BaseDataTableRowAction>
+                  </template>
+                  <BaseMenu
+                    v-if="showRowActionMenu"
+                    :items="rowActionMenuItems(row)"
+                    size="sm"
+                  >
+                    <template #button="{ open }">
+                      <div
+                        class="flex h-8 w-8 items-center justify-center rounded-r border border-l-0 border-slate-300 bg-white duration-150 hover:bg-slate-50"
+                        :class="[
+                          open
+                            ? 'ring-2 ring-primary-500 ring-offset-2'
+                            : false,
+                        ]"
+                      >
+                        <BaseIcon icon="heroicons-solid:dots-vertical" />
+                      </div>
+                    </template>
+                  </BaseMenu>
+                </div>
               </div>
             </BaseTableColumn>
           </template>
@@ -136,60 +179,50 @@
       <slot name="sidebarTop" v-bind="sidebarProps"></slot>
     </template>
 
-    <template v-if="toggleable" #sidebarBottom>
-      <div class="mb-3">
-        <BaseCard>
-          <BaseCardRow size="sm">
-            <button
-              type="button"
-              class="flex w-full items-center justify-between"
-              @click="showColumnsDesktop = !showColumnsDesktop"
-            >
-              <h2 class="font-semibold">
-                {{ $t('sui.columns') }}
-              </h2>
-
-              <BaseIcon
-                :icon="
-                  showColumnsDesktop
-                    ? 'heroicons:chevron-down'
-                    : 'heroicons:chevron-up'
-                "
-              ></BaseIcon>
-            </button>
-
-            <div v-show="showColumnsDesktop" class="mt-4">
-              <BaseDataTableToggleColumns
-                v-model:visibleColumns="visibleColumns"
-                :table="table"
-                @update:visible-columns="onUpdateVisibleColumn"
-              ></BaseDataTableToggleColumns>
-            </div>
-          </BaseCardRow>
-        </BaseCard>
-      </div>
+    <template #sidebarBottom="sidebarProps">
+      <slot name="sidebarBottom" v-bind="sidebarProps"></slot>
+    </template>
+
+    <template v-if="toggleable" #columns>
+      <BaseDataIteratorSectionColumns
+        v-model:visibleColumns="visibleColumns"
+        :table="table"
+        @update:visible-columns="onUpdateVisibleColumn"
+      ></BaseDataIteratorSectionColumns>
+    </template>
+
+    <template v-for="section in sections" :key="section.name" #[section.name]>
+      <slot :name="section.name" />
     </template>
   </BaseDataIterator>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { CollectionItem, DataTableQuery, MenuItemInterface } from '@/types';
+import {
+  CollectionItem,
+  DataIteratorSection,
+  DataTableQuery,
+  MenuItemInterface,
+  RowAction,
+} from '@/types';
 import { useDialogsStore } from '@/stores/dialogs';
 import { useNotificationsStore } from '../stores/notifications';
 import BaseDataIterator from './BaseDataIterator.vue';
-import { isArray } from 'lodash';
+import { cloneDeep, isArray } from 'lodash';
 
 import BaseCard from './BaseCard.vue';
-import BaseCardRow from './BaseCardRow.vue';
 import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
-import BaseDataTableToggleColumns from './BaseDataTableToggleColumns.vue';
-import { config } from '@/index';
+import BaseDataIteratorSectionColumns from './BaseDataIteratorSectionColumns.vue';
+import { BaseIcon, config } from '@/index';
 import BaseEmptyState from '../svg/BaseEmptyState.vue';
 import { RouteLocationRaw } from 'vue-router';
+import BaseMenu from './BaseMenu.vue';
+import BaseDataTableRowAction from './BaseDataTableRowAction.vue';
 
 const i18n = useI18n();
+const router = useRouter();
 
 const http = config.http;
 
@@ -224,6 +257,16 @@ const props = defineProps({
     type: Object as PropType<DataTableQuery>,
   },
 
+  /**
+   * Show url for router link
+   */
+  showUrl: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => RouteLocationRaw) | undefined
+    >,
+  },
+
   /**
    * Show/Hide edit button
    */
@@ -237,7 +280,9 @@ const props = defineProps({
    */
   editUrl: {
     default: undefined,
-    type: Function as PropType<(row: CollectionItem) => RouteLocationRaw>,
+    type: Function as PropType<
+      ((row: CollectionItem) => RouteLocationRaw) | undefined
+    >,
   },
 
   /**
@@ -253,7 +298,7 @@ const props = defineProps({
    */
   deleteUrl: {
     default: undefined,
-    type: Function as PropType<(row: CollectionItem) => string>,
+    type: Function as PropType<((row: CollectionItem) => string) | undefined>,
   },
 
   /**
@@ -349,15 +394,32 @@ const props = defineProps({
     default: undefined,
     type: Number,
   },
+
+  /**
+   * Layout type
+   */
+  layout: {
+    default: 'default',
+    type: String as PropType<'default' | 'compact'>,
+  },
+
+  sections: {
+    default: undefined,
+    type: Array as PropType<DataIteratorSection[]>,
+  },
+
+  rowActions: {
+    default: undefined,
+    type: Array as PropType<RowAction[]>,
+  },
+
+  numberOfVisibleRowActions: {
+    default: 2,
+    type: Number,
+  },
 });
 
-const emit = defineEmits([
-  'cell-click',
-  'delete',
-  'checkAll',
-  'update:checked-rows',
-  'check',
-]);
+const emit = defineEmits(['cell-click', 'delete', 'update:checked-rows']);
 
 const dataIterator = ref<null | InstanceType<typeof BaseDataIterator>>(null);
 
@@ -368,6 +430,9 @@ const dataIterator = ref<null | InstanceType<typeof BaseDataIterator>>(null);
 */
 
 function onCellClick(payload: CollectionItem) {
+  if (props.showUrl) {
+    router.push(props.showUrl(payload));
+  }
   emit('cell-click', payload);
 }
 
@@ -438,8 +503,6 @@ const onDelete = (row: CollectionItem) => {
 |--------------------------------------------------------------------------
 */
 
-const showColumnsDesktop = ref<boolean>(false);
-
 const visibleColumns = ref<number[]>([]);
 
 // Find visible columns in local storage
@@ -487,6 +550,103 @@ function onUpdateVisibleColumn() {
   );
 }
 
+/*
+|--------------------------------------------------------------------------
+| Row Actions
+|--------------------------------------------------------------------------
+*/
+
+const rowActionsInternal = computed<RowAction[]>(() => {
+  const actions = cloneDeep(props.rowActions) ?? [];
+
+  if (props.editUrl && props.editButton) {
+    actions.push({
+      label: i18n.t('sui.edit'),
+      icon: 'heroicons:cog-6-tooth-solid',
+      to: (row: CollectionItem) => (props.editUrl ? props.editUrl(row) : ''),
+      disabled: (row: CollectionItem) => !canUpdate(row),
+    });
+  }
+
+  if (props.deleteUrl && props.deleteButton) {
+    actions.push({
+      label: i18n.t('sui.delete'),
+      icon: 'heroicons:trash-20-solid',
+      action: onDeleteClick,
+      disabled: (row: CollectionItem) => !canDelete(row),
+    });
+  }
+
+  return actions;
+});
+
+const visibleRowActions = computed<RowAction[]>(() => {
+  return rowActionsInternal.value.slice(0, props.numberOfVisibleRowActions);
+});
+
+const showRowActionMenu = computed<boolean>(() => {
+  return rowActionsInternal.value.length > props.numberOfVisibleRowActions;
+});
+
+function rowActionMenuItems(row: CollectionItem): MenuItemInterface[] {
+  return rowActionsInternal.value.map((action) => {
+    return {
+      label: action.label,
+      icon: action.icon,
+      disabled: action.disabled && action.disabled(row),
+      action: action.action
+        ? () => {
+            if (action.action) action.action(row);
+          }
+        : undefined,
+      to: action.to ? action.to(row) : undefined,
+    };
+  });
+}
+
+/*
+|--------------------------------------------------------------------------
+| Checkable
+|--------------------------------------------------------------------------
+*/
+
+const newCheckedRows = ref<Record<string, any>[]>([]);
+
+watch(
+  () => props.checkedRows,
+  (checkedRows) => {
+    newCheckedRows.value = checkedRows;
+  }
+);
+
+function uncheckAll() {
+  table.value?.uncheckAll();
+}
+
+const sectionsInternal = computed<DataIteratorSection[]>(() => {
+  const sections = props.sections ?? [];
+
+  if (props.toggleable) {
+    return [
+      ...sections,
+      {
+        name: 'columns',
+        icon: 'heroicons:table-cells-20-solid',
+        title: i18n.t('sui.columns'),
+        closeText: i18n.t('sui.apply'),
+        opened: false,
+      },
+    ];
+  }
+
+  return sections;
+});
+
+function onCheckedRowsUpdate(checkedRows: Record<string, any>[]) {
+  newCheckedRows.value = checkedRows;
+  emit('update:checked-rows', checkedRows);
+}
+
 /*
 |--------------------------------------------------------------------------
 | Exposed functions

package/src/components/BaseDataTableRowAction.vue

@@ -0,0 +1,28 @@
+<template>
+  <button
+    v-if="rowAction.action"
+    type="button"
+    class="btn btn-white border border-slate-300 p-2 shadow-sm"
+    :disabled="rowAction.disabled && rowAction.disabled(row)"
+    @click="rowAction.action ? rowAction.action(row) : null"
+  >
+    <BaseIcon :icon="rowAction.icon" class="text-slate-500" />
+  </button>
+  <router-link
+    v-else-if="rowAction.to"
+    :to="rowAction.to(row)"
+    :disabled="rowAction.disabled && rowAction.disabled(row)"
+    class="btn btn-white border border-slate-300 p-2 shadow-sm hover:bg-slate-100"
+  >
+    <BaseIcon :icon="rowAction.icon" class="text-slate-500" />
+  </router-link>
+</template>
+
+<script lang="ts" setup>
+import { CollectionItem, RowAction } from '@/types';
+
+defineProps<{
+  row: CollectionItem;
+  rowAction: RowAction;
+}>();
+</script>

package/src/components/BaseFieldI18n.stories.js

@@ -9,7 +9,7 @@ export default {
     (story) => ({
       components: { story, BaseForm },
       template: `
-      <BaseForm method="post" url="https://api.com/todos/422" :data="{}">
+      <BaseForm method="post" url="https://faker.witify.io/api/todos/422" :data="{}">
         <story/>
         <button type="submit" class="btn btn-primary mt-5">Submit</button>
       </BaseForm>`,

package/src/components/BaseMediaLibrary.stories.js

@@ -17,7 +17,7 @@ export default {
     max: null,
     min: 2,
     acceptedExtensions: ['jpg', 'png'],
-    uploadUrl: 'https://api.com/upload',
+    uploadUrl: 'https://faker.witify.io/upload',
     maxSize: 500 * 1024,
     currentMedia: [
       mediaModel,

package/src/components/BaseMenu.vue

@@ -46,6 +46,7 @@
                     :icon="item.icon"
                     :color="item.color"
                     :active="active"
+                    :size="size"
                   />
                 </slot>
               </MenuItem>
@@ -64,6 +65,7 @@
                   :icon="item.icon"
                   :color="item.color"
                   :active="active"
+                  :size="size"
                 />
               </slot>
             </MenuItem>
@@ -83,6 +85,7 @@
                   :icon="item.icon"
                   :color="item.color"
                   :active="active"
+                  :size="size"
                 />
               </slot>
             </MenuItem>
@@ -112,6 +115,10 @@ const props = defineProps({
     default: 'bottom-left',
     type: String as PropType<'bottom-left' | 'bottom-right' | 'custom'>,
   },
+  size: {
+    default: 'sm',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 const menuPositionClass = computed(() => {

package/src/components/BaseMenuItem.vue

@@ -2,7 +2,7 @@
   <div :class="buttonClasses">
     <div class="flex items-center">
       <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
-      {{ label }}
+      <span :class="textSize">{{ label }}</span>
     </div>
     <div v-if="count" class="relative -top-px ml-[5px]">
       <BaseCounter
@@ -41,6 +41,10 @@ const props = defineProps({
       'dark' | 'light' | 'danger' | 'success' | 'warning'
     >,
   },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
 });
 
 const textColor = computed((): string => {
@@ -59,6 +63,18 @@ const textColor = computed((): string => {
   return '';
 });
 
+const textSize = computed((): string => {
+  if (props.size == 'xs') {
+    return 'text-xs';
+  } else if (props.size == 'sm') {
+    return 'text-sm';
+  } else if (props.size == 'md') {
+    return 'text-base';
+  }
+
+  return '';
+});
+
 const buttonClasses = computed((): string => {
   let baseClasses =
     'flex items-center justify-between w-full leading-tight py-2 text-sm text-left rounded';