design-system-next 2.1.0 → 2.2.0

package/src/components/table/table.vue

@@ -22,6 +22,11 @@
       <table aria-describedby="describe" class="spr-w-full spr-table-fixed" cellspacing="0" cellpadding="0">
         <thead>
           <tr v-if="!(props.removeHeaderOnEmpty && sortedData.length <= 0)">
+            <th v-if="props.isMultiSelect" :class="[getTableClasses.multiselectClass, getTableClasses.headerClasses]">
+              <div class="spr-flex spr-justify-center spr-items-center">
+                <spr-checkbox label="" :checked="isAllSelected" @update:model-value="handleSelectAll"/>
+              </div>
+            </th>
             <th v-for="(header, keyHeader) in headers" :key="keyHeader" :class="[getTableClasses.headerClasses]">
               <div :class="getTableClasses.headerNameClass">
                 <span :class="[{ 'spr-cursor-pointer': header.sort }]" @click="header.sort && sortData(header.field)">
@@ -56,61 +61,69 @@
             @mouseover="$emit('onHover', { active: true, data: item })"
             @mouseleave="$emit('onHover', { active: false, data: item })"
           >
+            <td v-if="props.isMultiSelect" :class="[getTableClasses.multiselectClass, getTableClasses.multiselectRowClass]">
+              <div class="spr-flex spr-justify-center spr-items-center">
+                <spr-checkbox label="" :checked="isRowSelected(item)" @update:modelValue="handleSelect(item)"/>
+              </div>
+            </td>
             <td v-for="(column, headerKey) in headers" :key="headerKey" :class="getTableClasses.tableDataClasses">
-              <div v-if="sortedData[keyIndex][column.field]" class="spr-flex spr-flex-row spr-items-center spr-gap-2">
-                <spr-avatar
-                  v-if="column.hasAvatar"
-                  size="lg"
-                  :src="sortedData[keyIndex][column.field].image"
-                  alt="User Avatar"
-                  :variant="column.avatarVariant ? column.avatarVariant : 'initial'"
-                  :initial="sortedData[keyIndex][column.field].title as string"
-                />
-                <div
-                  v-if="column.hasIcon"
-                  class="spr-flex spr-items-center spr-rounded-full spr-bg-mushroom-200 spr-p-1"
-                >
-                  <Icon :icon="sortedData[keyIndex][column.field].icon || ''" />
-                </div>
-                <div>
-                  <!-- Array Title -->
+              <slot v-if="slots[column.field]" :name="column.field" :row="item[column.field]" />
+              <template v-else>
+                <div v-if="sortedData[keyIndex][column.field]" class="spr-flex spr-flex-row spr-items-center spr-gap-2">
+                  <spr-avatar
+                    v-if="column.hasAvatar"
+                    size="lg"
+                    :src="sortedData[keyIndex][column.field].image"
+                    alt="User Avatar"
+                    :variant="column.avatarVariant ? column.avatarVariant : 'initial'"
+                    :initial="sortedData[keyIndex][column.field].title as string"
+                  />
                   <div
-                    v-if="Array.isArray(sortedData[keyIndex][column.field].title)"
-                    class="spr-flex spr-flex-wrap spr-gap-2"
+                    v-if="column.hasIcon"
+                    class="spr-flex spr-items-center spr-rounded-full spr-bg-mushroom-200 spr-p-1"
                   >
-                    <div v-for="(cell, index) in sortedData[keyIndex][column.field].title" :key="index">
+                    <Icon :icon="sortedData[keyIndex][column.field].icon || ''" />
+                  </div>
+                  <div>
+                    <!-- Array Title -->
+                    <div
+                      v-if="Array.isArray(sortedData[keyIndex][column.field].title)"
+                      class="spr-flex spr-flex-wrap spr-gap-2"
+                    >
+                      <div v-for="(cell, index) in sortedData[keyIndex][column.field].title" :key="index">
+                        <div v-if="column.hasLozengeTitle" class="spr-mt-1">
+                          <spr-table-lozenge-title :cell="cell as LozengeTitle" />
+                        </div>
+                        <div v-else-if="column.hasChipTitle" class="spr-mt-1">
+                          <spr-table-chips-title :cell="cell as ChipTitle" />
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Single Title Handling -->
+                    <div v-else>
                       <div v-if="column.hasLozengeTitle" class="spr-mt-1">
-                        <spr-table-lozenge-title :cell="cell as LozengeTitle" />
+                        <!-- Defining lozenge title in the title so it wont confuse the consumer; hence the title.title-->
+                        <!-- Also this structure allows multiple instances -->
+                        <spr-table-lozenge-title :cell="sortedData[keyIndex][column.field].title as LozengeTitle" />
                       </div>
+                      <!-- Defining the chip title so it wont confuse the consumer; hence the title.title -->
+                      <!-- Also this structure allows multiple instances -->
                       <div v-else-if="column.hasChipTitle" class="spr-mt-1">
-                        <spr-table-chips-title :cell="cell as ChipTitle" />
+                        <spr-table-chips-title :cell="sortedData[keyIndex][column.field].title as ChipTitle" />
+                      </div>
+                      <div v-else class="spr-text-color-strong spr-font-size-200 spr-font-normal">
+                        {{ sortedData[keyIndex][column.field].title }}
                       </div>
                     </div>
-                  </div>
 
-                  <!-- Single Title Handling -->
-                  <div v-else>
-                    <div v-if="column.hasLozengeTitle" class="spr-mt-1">
-                      <!-- Defining lozenge title in the title so it wont confuse the consumer; hence the title.title-->
-                      <!-- Also this structure allows multiple instances -->
-                      <spr-table-lozenge-title :cell="sortedData[keyIndex][column.field].title as LozengeTitle" />
-                    </div>
-                    <!-- Defining the chip title so it wont confuse the consumer; hence the title.title -->
-                    <!-- Also this structure allows multiple instances -->
-                    <div v-else-if="column.hasChipTitle" class="spr-mt-1">
-                      <spr-table-chips-title :cell="sortedData[keyIndex][column.field].title as ChipTitle" />
+                    <!-- Subtitle -->
+                    <div v-if="column.hasSubtext" class="spr-text-color-base spr-text-xs spr-font-normal">
+                      {{ sortedData[keyIndex][column.field].subtext }}
                     </div>
-                    <div v-else class="spr-text-color-strong spr-font-size-200 spr-font-normal">
-                      {{ sortedData[keyIndex][column.field].title }}
-                    </div>
-                  </div>
-
-                  <!-- Subtitle -->
-                  <div v-if="column.hasSubtext" class="spr-text-color-base spr-text-xs spr-font-normal">
-                    {{ sortedData[keyIndex][column.field].subtext }}
                   </div>
                 </div>
-              </div>
+              </template>
             </td>
             <td v-if="action" :class="getTableClasses.tableRowActionClasses">
               <div class="spr-flex spr-items-center">
@@ -137,7 +150,7 @@
         </tbody>
       </table>
     </div>
-    <div v-if="$slots.footer" :class="getTableClasses.tableFooterClasses">  
+    <div v-if="$slots.footer" :class="getTableClasses.tableFooterClasses">
       <slot name="footer" />
     </div>
   </div>
@@ -152,6 +165,7 @@ import SprBadge from '@/components/badge/badge.vue';
 import SprTableActions from '@/components/table/table-actions/table-actions.vue';
 import SprTableLozengeTitle from '@/components/table/table-lozenge-title/table-lozenge-title.vue';
 import SprTableChipsTitle from '@/components/table/table-chips-title/table-chips-title.vue';
+import SprCheckbox from '@/components/checkbox/checkbox.vue';
 
 import { tablePropTypes, tableEmitTypes } from './table';
 import type { ChipTitle } from '@/components/table/table-chips-title/table-chips-title';
@@ -169,9 +183,13 @@ const {
   searchField,
   getTableClasses,
   getEmptyStateSize,
-
+  isAllSelected,
+  
+  isRowSelected,
   sortData,
   updateSearchField,
   handleRowClick,
+  handleSelect,
+  handleSelectAll
 } = useTable(props, emit, slots);
 </script>

package/src/components/table/use-table.ts

@@ -1,4 +1,4 @@
-import { ref, computed, toRefs, Slots } from 'vue';
+import { ref, computed, toRefs, Slots, watch } from 'vue';
 
 import type { TablePropTypes, TableEmitTypes, TABLE_SORT, TableData } from './table';
 import type { SetupContext } from 'vue';
@@ -6,10 +6,18 @@ import type { SetupContext } from 'vue';
 import classNames from 'classnames';
 
 export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitTypes>['emit'], slots: Slots) => {
-  const { dataTable, action, headers, sortOrder, fullHeight } = toRefs(props);
+  const { dataTable, action, headers, sortOrder, fullHeight, selectedKeyId, returnCompleteSelectedProperties } =
+    toRefs(props);
   const sortField = ref('');
   const searchField = ref(props.searchModel);
   const tableSortOrder = ref<TABLE_SORT>(sortOrder.value || 'asc');
+  const selectAll = ref(false);
+  const selectedData = ref<TableData[]>([]);
+
+  const isAllSelected = computed(() => {
+    if (selectedData.value.length === 0) return false;
+    return selectedData.value.length === sortedData.value.length;
+  });
 
   const sortedData = computed(() => {
     if (!sortField.value || sortOrder.value) return dataTable.value;
@@ -121,6 +129,12 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       'spr-h-[360px]': !fullHeight.value && !slots.footer,
     });
 
+    const multiselectRowClass = classNames(
+      'spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid',
+    );
+
+    const multiselectClass = classNames('spr-px-size-spacing-2xs spr-py-size-spacing-3xs spr-w-[44px] ');
+
     return {
       headerClasses,
       tableWrapperClasses,
@@ -128,6 +142,8 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       tableHeaderActionsClasses,
       headerNameClass,
       tableCellSlotClasses,
+      multiselectRowClass,
+      multiselectClass,
 
       tableRowClasses,
       tableDataClasses,
@@ -139,15 +155,60 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     };
   });
 
+  const handleSelect = (item: TableData) => {
+    if (!selectedKeyId.value || !(selectedKeyId.value in item)) return;
+
+    const selectedIndex = selectedData.value.findIndex(
+      (data) => data[selectedKeyId.value].title === item[selectedKeyId.value].title,
+    );
+
+    if (selectedIndex !== -1) {
+      selectedData.value.splice(selectedIndex, 1);
+    } else {
+      selectedData.value.push(item);
+    }
+  };
+
+  const handleSelectAll = () => {
+    if (isAllSelected.value) {
+      selectedData.value = [];
+    } else {
+      selectedData.value = sortedData.value;
+    }
+  };
+
+  const isRowSelected = (item: TableData) => {
+    if (!selectedKeyId.value || !(selectedKeyId.value in item)) return false;
+    return selectedData.value.some((data) => data[selectedKeyId.value].title === item[selectedKeyId.value].title);
+  };
+
+  watch(
+    () => selectedData.value.length,
+    () => {
+      if (returnCompleteSelectedProperties.value) {
+        emit('update:selectedData', selectedData.value);
+      } else {
+        const mappedData = selectedData.value.map((item) => ({ ...item[selectedKeyId.value] }));
+        emit('update:selectedData', mappedData);
+      }
+    },
+  );
+
   return {
     sortData,
     updateSearchField,
     handleRowClick,
+    handleSelect,
+    handleSelectAll,
     sortedData,
     getHeaderCount,
     hasTableActions,
     searchField,
     getTableClasses,
     getEmptyStateSize,
+    selectAll,
+    selectedData,
+    isAllSelected,
+    isRowSelected,
   };
 };

package/src/components/tooltip/tooltip.ts

@@ -37,6 +37,10 @@ export const tooltipPropTypes = {
     type: Boolean,
     default: true,
   },
+  fitContent: {
+    type: Boolean,
+    default: true
+  }
 };
 
 export type TooltipPropTypes = ExtractPropTypes<typeof tooltipPropTypes>;

package/src/components/tooltip/tooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-if="props.text || slots['popper-content']">
     <Tooltip
-      class="spr-w-fit"
+      :class="[ props.fitContent ? 'spr-w-fit' : 'spr-w-full' ]"
       :aria-id="props.hasMaxWidth ? 'tooltip-full-width-wrapper' : 'tooltip-wrapper'"
       :placement="placement"
     >