sprintify-ui 0.0.178 → 0.0.180

package/src/components/BaseTable.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="relative w-full overflow-hidden">
+  <div
+    class="relative w-full overflow-hidden"
+    :class="maxHeight ? 'base-table--has-max-height' : ''"
+  >
     <div ref="slot" style="display: none">
       <slot />
     </div>
 
     <div class="flex flex-col">
       <div
+        ref="scrollable"
         class="overflow-x-auto overflow-y-auto"
         data-scroll-lock-scrollable
         :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
@@ -15,11 +19,17 @@
             <table class="min-w-full border-separate border-spacing-0">
               <thead v-if="newColumns.length" ref="thead">
                 <tr>
-                  <th v-if="showDetailRowIcon" class="th" />
+                  <th
+                    v-if="showDetailRowIcon"
+                    class="th"
+                    :style="detailsStyles(true)"
+                  />
                   <th
                     v-if="checkable && checkboxPosition === 'left'"
-                    class="th py-0 pl-3"
+                    class="th group cursor-pointer py-0 pl-3"
                     align="left"
+                    :style="checkStyles(true)"
+                    @click="checkAll"
                   >
                     <div class="flex items-center">
                       <input
@@ -28,7 +38,6 @@
                         :checked="isAllChecked"
                         :disabled="isAllUncheckable"
                         :class="checkboxStyle"
-                        @change="checkAll"
                       />
                     </div>
                   </th>
@@ -36,39 +45,63 @@
                     v-for="(column, index) in visibleColumns"
                     :key="column.newKey + ':' + index + 'header'"
                     v-bind="column.thAttrs && column.thAttrs(column)"
-                    :style="column.style"
-                    class="th py-2 pl-3 pr-3 text-left"
+                    :style="[
+                      column.style,
+                      index == 0 ? firstColStyles(true) : {},
+                    ]"
+                    class="th group py-2 pl-3 pr-3 text-left"
+                    :class="{
+                      'cursor-pointer': column.sortable,
+                    }"
                     @click.stop="sort(column, undefined, $event as any)"
                   >
                     <button
                       type="button"
                       class="flex w-full items-center bg-transparent text-left text-sm font-medium leading-tight text-slate-900"
                       :class="{
-                        'cursor-default': !column.sortable,
                         'text-blue-600':
                           column.sortable && currentSortColumn === column,
                       }"
                     >
-                      <span class="mr-1 whitespace-nowrap">{{
-                        column.label
-                      }}</span>
-                      <span
-                        v-show="column.sortable && currentSortColumn === column"
-                      >
-                        <BaseIcon
-                          icon="mdi:chevron-down"
-                          class="h-5 w-5 duration-300"
-                          :class="{
-                            'rotate-180': isAsc,
-                          }"
-                        />
+                      <span class="whitespace-nowrap text-xs text-slate-500">
+                        {{ column.label }}
                       </span>
+                      <div
+                        v-if="column.sortable"
+                        class="w-3"
+                        :class="[
+                          currentSortColumn === column
+                            ? ''
+                            : 'opacity-0 duration-200 group-hover:opacity-100',
+                        ]"
+                      >
+                        <svg
+                          viewBox="0 0 24 24"
+                          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>
+                        </svg>
+                      </div>
                     </button>
                   </th>
                   <th
                     v-if="checkable && checkboxPosition === 'right'"
-                    class="th pr-3"
+                    class="th group cursor-pointer pr-3"
                     align="right"
+                    @click="checkAll"
                   >
                     <input
                       autocomplete="off"
@@ -76,101 +109,45 @@
                       :checked="isAllChecked"
                       :disabled="isAllUncheckable"
                       :class="checkboxStyle"
-                      @change="checkAll"
                     />
                   </th>
                 </tr>
               </thead>
 
               <tbody class="bg-white">
-                <tr v-if="newCheckedRows.length">
-                  <td
-                    :colspan="columnCount"
-                    class="sticky z-[1] p-0"
-                    :style="{
-                      top: theadHeight + 'px',
-                    }"
-                    :class="[borderClasses]"
-                  >
-                    <slot
-                      name="checkedHeader"
-                      :uncheck-all="uncheckAll"
-                      :count="newCheckedRows.length"
-                      :check-rows="newCheckedRows"
-                    >
-                      <div
-                        class="flex items-center justify-between bg-slate-100 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>
-                    </slot>
-                  </td>
-                </tr>
-
                 <template
                   v-for="(row, index) in data"
                   :key="getRowIndex(row, index)"
                 >
-                  <tr>
+                  <tr class="item-row">
                     <td
                       v-if="showDetailRowIcon"
-                      class="pl-3"
+                      class="group cursor-pointer bg-white pl-3"
                       :class="borderBottomClasses(index, row)"
-                      style="width: 36px"
+                      :style="detailsStyles(false)"
+                      @click.stop="toggleDetails(row)"
                     >
                       <button
                         type="button"
-                        class="mr-0 flex h-8 w-8 appearance-none items-center justify-center rounded-full border-0 bg-white text-slate-400 duration-300 hover:bg-slate-100 hover:text-slate-700"
-                        :class="{
-                          'rotate-180': isVisibleDetailRow(row),
-                        }"
-                        @click.stop="toggleDetails(row)"
+                        class="mr-0 flex h-5 w-5 appearance-none items-center justify-center rounded-full border border-slate-300 bg-white text-slate-400 shadow duration-100 group-hover:text-slate-600 group-hover:shadow-md"
                       >
                         <BaseIcon
                           v-if="hasDetailedVisible(row)"
                           icon="mdi:chevron-down"
-                          class="h-5 w-5"
+                          class="h-5 w-5 duration-300"
+                          :class="{
+                            'rotate-180': isVisibleDetailRow(row),
+                          }"
                         />
                       </button>
                     </td>
 
                     <td
                       v-if="checkable && checkboxPosition === 'left'"
-                      class="pl-3"
+                      class="group z-[1] cursor-pointer bg-white pl-3"
+                      :style="checkStyles(false)"
                       :class="borderBottomClasses(index, row)"
+                      @click="checkRow(row, index, $event as MouseEvent)"
                     >
                       <div class="flex items-center">
                         <input
@@ -179,7 +156,6 @@
                           :disabled="!isRowCheckable(row)"
                           :checked="isRowChecked(row)"
                           :class="checkboxStyle"
-                          @click="checkRow(row, index, $event as MouseEvent)"
                         />
                       </div>
                     </td>
@@ -192,8 +168,15 @@
                       scoped
                       name="default"
                       tag="td"
-                      class="py-3 pl-3 pr-3 text-sm"
-                      :class="borderBottomClasses(index, row)"
+                      class="bg-white py-3 pl-3 pr-3 text-sm"
+                      :style="[
+                        column.style,
+                        colindex === 0 ? firstColStyles(false) : {},
+                      ]"
+                      :class="[
+                        borderBottomClasses(index, row),
+                        column.clickable ? 'cursor-pointer' : '',
+                      ]"
                       :data-label="column.label"
                       :props="{ row, column, index, colindex, toggleDetails }"
                       @click="
@@ -203,9 +186,10 @@
 
                     <td
                       v-if="checkable && checkboxPosition === 'right'"
-                      class="pr-3"
+                      class="group cursor-pointer pr-3"
                       :class="borderBottomClasses(index, row)"
                       align="right"
+                      @click="checkRow(row, index, $event as MouseEvent)"
                     >
                       <input
                         type="checkbox"
@@ -213,7 +197,6 @@
                         :disabled="!isRowCheckable(row)"
                         :checked="isRowChecked(row)"
                         :class="checkboxStyle"
-                        @click="checkRow(row, index, $event as MouseEvent)"
                       />
                     </td>
                   </tr>
@@ -253,7 +236,7 @@
               >
                 <div
                   v-if="loading"
-                  class="absolute inset-0 flex h-full w-full items-start justify-center"
+                  class="absolute inset-0 z-[1] flex h-full w-full items-start justify-center"
                 >
                   <div class="absolute h-full w-full bg-white bg-opacity-60" />
 
@@ -279,15 +262,16 @@ export default {
 
 <script lang="ts" setup>
 import { PropType, ref } from 'vue';
-import { BaseTableColumn, MenuItemInterface, Row } from '@/types';
+import { BaseTableColumn, Row } from '@/types';
 import SlotComponent from './SlotComponent';
-import { useResizeObserver } from '@vueuse/core';
+import { useResizeObserver, useScroll } from '@vueuse/core';
 import { debounce, isArray } from 'lodash';
-import BaseMenu from './BaseMenu.vue';
 import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 
 const checkboxStyle =
-  'disabled:bg-slate-100 disabled:border-slate-300 disabled:cursor-not-allowed border-slate-400 rounded';
+  'disabled:bg-slate-100 group-hover:shadow-md  disabled:border-slate-300 disabled:cursor-not-allowed duration-300 cursor-pointer focus:ring-blue-300 border border-slate-300 shadow h-[18px] w-[18px] rounded';
+const DETAIL_ROW_WIDTH = 36;
+const CHECK_ROW_WIDTH = 36;
 
 provide('table', getCurrentInstance());
 
@@ -316,11 +300,6 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  /** Define checkable actions */
-  checkableActions: {
-    default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
-  },
   /**
    * Position of the checkbox (if checkable is true)
    * @values left, right
@@ -550,13 +529,17 @@ const isAllChecked = computed(() => {
   return !missingChecked;
 });
 
+function getCheckedRowIndex(row: Row) {
+  return newCheckedRows.value.findIndex(
+    (r) => r[props.rowKey] == row[props.rowKey]
+  );
+}
+
 /**
  * Remove a checked row from the array.
  */
 function removeCheckedRow(row: Row) {
-  const index = newCheckedRows.value.findIndex(
-    (r) => r[props.rowKey] == row[props.rowKey]
-  );
+  const index = getCheckedRowIndex(row);
   if (index >= 0) {
     newCheckedRows.value.splice(index, 1);
   }
@@ -571,7 +554,7 @@ function checkAll() {
     newCheckedRows.value = [];
   } else {
     props.data.forEach((currentRow) => {
-      if (props.isRowCheckable(currentRow)) {
+      if (props.isRowCheckable(currentRow) && !isRowChecked(currentRow)) {
         newCheckedRows.value.push(currentRow);
       }
     });
@@ -749,7 +732,7 @@ function removeColumn(column: BaseTableColumn) {
   );
 }
 
-const borderClasses = 'border-b border-slate-300';
+const borderClasses = 'border-b border-slate-200';
 
 function borderBottomClasses(index: number, row: Record<string, any>): string {
   if (index < props.data.length - 1) {
@@ -800,22 +783,92 @@ function getRowIndex(row: Row, index: number): string {
   return index + '';
 }
 
+// Sticky styles
+
+const horizontalScrolling = ref(false);
+const scrollable = ref<null | HTMLElement>(null);
+
+const { x } = useScroll(scrollable);
+watch(x, (value) => {
+  horizontalScrolling.value = value > 0;
+});
+
+function zIndex(th: boolean) {
+  if (th) {
+    return props.maxHeight ? 3 : 2;
+  }
+  return 1;
+}
+
+function detailsStyles(th: boolean): any {
+  if (props.detailed) {
+    return {
+      zIndex: zIndex(th),
+      position: 'sticky',
+      left: 0,
+      width: DETAIL_ROW_WIDTH + 'px',
+      minWidth: DETAIL_ROW_WIDTH + 'px',
+      maxWidth: DETAIL_ROW_WIDTH + 'px',
+    };
+  }
+  return {};
+}
+
+function checkStyles(th: boolean): any {
+  if (props.checkable) {
+    return {
+      zIndex: zIndex(th),
+      position: 'sticky',
+      left: props.detailed ? DETAIL_ROW_WIDTH + 'px' : 0,
+      width: CHECK_ROW_WIDTH + 'px',
+      minWidth: CHECK_ROW_WIDTH + 'px',
+      maxWidth: CHECK_ROW_WIDTH + 'px',
+    };
+  }
+  return {};
+}
+
+function firstColStyles(th: boolean): any {
+  let left = 0;
+  if (props.checkable) {
+    left += CHECK_ROW_WIDTH;
+  }
+  if (props.detailed) {
+    left += DETAIL_ROW_WIDTH;
+  }
+  return {
+    zIndex: zIndex(th),
+    position: 'sticky',
+    left: left + 'px',
+    borderRight: horizontalScrolling.value ? '1px solid #e2e8f0' : 'none',
+  };
+}
+
 provide('addColumn', addColumn);
 provide('removeColumn', removeColumn);
 provide('nextSequence', nextSequence);
 
 defineExpose({
   newColumns,
+  uncheckAll,
 });
 </script>
 
-<style scoped>
+<style lang="postcss" scoped>
 .th {
+  @apply relative;
   @apply bg-slate-50;
+  @apply border-b border-slate-300;
+}
+
+.base-table--has-max-height .th {
   @apply sticky;
   @apply top-0;
-  @apply z-[1];
-  @apply border-b border-slate-300;
+  @apply z-[2];
   @apply bg-opacity-75 backdrop-blur backdrop-filter;
 }
+
+tbody tr.item-row:hover td {
+  @apply bg-slate-50;
+}
 </style>

package/src/components/BaseTableColumn.vue

@@ -24,6 +24,10 @@ export default defineComponent({
       default: undefined,
       type: Number,
     },
+    padding: {
+      default: undefined,
+      type: String,
+    },
     numeric: {
       default: false,
       type: Boolean,
@@ -95,6 +99,7 @@ export default defineComponent({
     style() {
       return {
         width: this.width ? this.width + 'px' : undefined,
+        padding: this.padding ? this.padding : '0.5rem 0.75rem',
       };
     },
   },

package/src/lang/en.json

@@ -4,6 +4,7 @@
     "address_1_placeholder": "Postal address",
     "address_2_description": "Apartment, suite, unit, building",
     "and": "and",
+    "apply": "Apply",
     "apply_filters": "Apply filters",
     "autocomplete_placeholder": "Type to start your search",
     "cancel": "Cancel",
@@ -17,10 +18,12 @@
     "country": "Country",
     "create_new": "Create new",
     "day": "Day",
+    "delete": "Delete",
     "delete_record": "Delete the record",
     "delete_record_description": "Are you sure to delete this record? This action is irreversible.",
     "deselect_all": "Deselect all",
     "drop_or_click_to_upload": "Drop or click to upload",
+    "edit": "Edit",
     "error": "Error",
     "file_must_be_of_type": "The file must be of type",
     "filters": "Filters",

package/src/lang/fr.json

@@ -4,6 +4,7 @@
     "address_1_placeholder": "Adresse postale",
     "address_2_description": "Appartement, suite, unité, immeuble",
     "and": "et",
+    "apply": "Appliquer",
     "apply_filters": "Appliquer les filtres",
     "autocomplete_placeholder": "Tapez pour lancer votre recherche",
     "cancel": "Annuler",
@@ -17,10 +18,12 @@
     "country": "Pays",
     "create_new": "Créer un nouveau",
     "day": "Jour",
+    "delete": "Supprimer",
     "delete_record": "Supprimer l'item",
     "delete_record_description": "Voulez-vous vraiment supprimer cet item ? \nCette action est irréversible.",
     "deselect_all": "Tout déselectionner",
     "drop_or_click_to_upload": "Déposez ou cliquez pour télécharger",
+    "edit": "Modifier",
     "error": "Erreur",
     "file_must_be_of_type": "Le fichier doit être de type",
     "filters": "Filtres",

package/src/types/index.ts

@@ -84,6 +84,7 @@ export interface ActionItem {
   action?: () => Promise<void> | void;
   icon?: string;
   count?: number;
+  disabled?: boolean;
   meta?: Record<string, any>;
   actions?: ActionItem[];
 }
@@ -209,3 +210,19 @@ export interface SelectConfiguration {
   options: SelectConfigurationOption[];
   onChange?: (option: SelectConfigurationOption | null) => void;
 }
+
+export interface DataIteratorSection {
+  name: string;
+  title: string;
+  closeText: string;
+  icon: string;
+  opened?: boolean;
+}
+
+export interface RowAction {
+  label: string;
+  icon: string;
+  action?: (row: CollectionItem) => Promise<void> | void;
+  to?: (row: CollectionItem) => RouteLocationRaw;
+  disabled?: (row: CollectionItem) => boolean;
+}