sprintify-ui 0.0.179 → 0.0.180

package/src/components/BaseTable.vue

@@ -22,13 +22,13 @@
                   <th
                     v-if="showDetailRowIcon"
                     class="th"
-                    :style="detailsStyles"
+                    :style="detailsStyles(true)"
                   />
                   <th
                     v-if="checkable && checkboxPosition === 'left'"
                     class="th group cursor-pointer py-0 pl-3"
                     align="left"
-                    :style="checkStyles"
+                    :style="checkStyles(true)"
                     @click="checkAll"
                   >
                     <div class="flex items-center">
@@ -47,16 +47,18 @@
                     v-bind="column.thAttrs && column.thAttrs(column)"
                     :style="[
                       column.style,
-                      index == 0 ? firstColStyles : { position: 'relative' },
+                      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,
                       }"
@@ -113,63 +115,6 @@
               </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)"
@@ -179,7 +124,7 @@
                       v-if="showDetailRowIcon"
                       class="group cursor-pointer bg-white pl-3"
                       :class="borderBottomClasses(index, row)"
-                      :style="detailsStyles"
+                      :style="detailsStyles(false)"
                       @click.stop="toggleDetails(row)"
                     >
                       <button
@@ -200,7 +145,7 @@
                     <td
                       v-if="checkable && checkboxPosition === 'left'"
                       class="group z-[1] cursor-pointer bg-white pl-3"
-                      :style="checkStyles"
+                      :style="checkStyles(false)"
                       :class="borderBottomClasses(index, row)"
                       @click="checkRow(row, index, $event as MouseEvent)"
                     >
@@ -226,7 +171,7 @@
                       class="bg-white py-3 pl-3 pr-3 text-sm"
                       :style="[
                         column.style,
-                        colindex === 0 ? firstColStyles : {},
+                        colindex === 0 ? firstColStyles(false) : {},
                       ]"
                       :class="[
                         borderBottomClasses(index, row),
@@ -317,11 +262,10 @@ 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, useScroll } from '@vueuse/core';
 import { debounce, isArray } from 'lodash';
-import BaseMenu from './BaseMenu.vue';
 import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 
 const checkboxStyle =
@@ -356,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
@@ -590,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);
   }
@@ -611,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);
       }
     });
@@ -850,10 +793,17 @@ watch(x, (value) => {
   horizontalScrolling.value = value > 0;
 });
 
-const detailsStyles = computed<any>(() => {
+function zIndex(th: boolean) {
+  if (th) {
+    return props.maxHeight ? 3 : 2;
+  }
+  return 1;
+}
+
+function detailsStyles(th: boolean): any {
   if (props.detailed) {
     return {
-      zIndex: 1,
+      zIndex: zIndex(th),
       position: 'sticky',
       left: 0,
       width: DETAIL_ROW_WIDTH + 'px',
@@ -862,12 +812,12 @@ const detailsStyles = computed<any>(() => {
     };
   }
   return {};
-});
+}
 
-const checkStyles = computed<any>(() => {
+function checkStyles(th: boolean): any {
   if (props.checkable) {
     return {
-      zIndex: 1,
+      zIndex: zIndex(th),
       position: 'sticky',
       left: props.detailed ? DETAIL_ROW_WIDTH + 'px' : 0,
       width: CHECK_ROW_WIDTH + 'px',
@@ -876,9 +826,9 @@ const checkStyles = computed<any>(() => {
     };
   }
   return {};
-});
+}
 
-const firstColStyles = computed<any>(() => {
+function firstColStyles(th: boolean): any {
   let left = 0;
   if (props.checkable) {
     left += CHECK_ROW_WIDTH;
@@ -887,12 +837,12 @@ const firstColStyles = computed<any>(() => {
     left += DETAIL_ROW_WIDTH;
   }
   return {
-    zIndex: 1,
+    zIndex: zIndex(th),
     position: 'sticky',
     left: left + 'px',
     borderRight: horizontalScrolling.value ? '1px solid #e2e8f0' : 'none',
   };
-});
+}
 
 provide('addColumn', addColumn);
 provide('removeColumn', removeColumn);
@@ -900,11 +850,13 @@ provide('nextSequence', nextSequence);
 
 defineExpose({
   newColumns,
+  uncheckAll,
 });
 </script>
 
 <style lang="postcss" scoped>
 .th {
+  @apply relative;
   @apply bg-slate-50;
   @apply border-b border-slate-300;
 }
@@ -912,7 +864,7 @@ defineExpose({
 .base-table--has-max-height .th {
   @apply sticky;
   @apply top-0;
-  @apply z-[1];
+  @apply z-[2];
   @apply bg-opacity-75 backdrop-blur backdrop-filter;
 }
 

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;
+}