design-system-next 2.7.10 → 2.7.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.7.10",
+  "version": "2.7.11",
   "main": "./dist/design-system-next.js",
   "module": "./dist/design-system-next.js",
   "repository": {

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

@@ -92,7 +92,7 @@ export const useRadioButton = (
     );
 
     const labelClasses = classNames(
-      'spr-group spr-m-0 spr-inline-flex spr-w-auto spr-items-center spr-space-x-2 spr-p-0 spr-font-main',
+      'spr-group spr-m-0 spr-inline-flex spr-w-auto spr-items-center spr-p-0 spr-font-main',
       'spr-text-color-strong spr-inline-flex spr-items-center spr-p-0',
       {
         'spr-text-color-disabled': disabled.value && !bordered.value,

package/src/components/table/table.ts

@@ -18,7 +18,7 @@ interface Header {
 }
 
 export interface TableData {
-  [key: string]: TableDataProps;
+  [key: string]: TableDataProps | string | number;
 }
 
 export interface TableDataProps {
@@ -132,16 +132,16 @@ export const tablePropTypes = {
   },
   isMultiSelect: {
     type: Boolean,
-    default: false
+    default: false,
   },
   selectedKeyId: {
     type: String,
-    default: ''
+    default: '',
   },
   returnCompleteSelectedProperties: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 };
 
 export const tableEmitTypes = {
@@ -152,8 +152,11 @@ export const tableEmitTypes = {
     typeof rowData === 'object' && typeof rowKey === 'number',
   onHover: (value: { active: boolean; data: TableData }): value is { active: boolean; data: TableData } =>
     typeof value.active === 'boolean' && typeof value.data === 'object',
-  'update:selectedData': (value: TableDataProps[] | TableData[]): value is TableDataProps[] | TableData[] =>
-    Array.isArray(value) && value.every(item => typeof item === 'object' && item !== null),
+  'update:selectedData': (value: (string | number | TableDataProps)[] | TableData[]) =>
+    Array.isArray(value) &&
+    value.every(
+      (item) => (typeof item === 'object' || typeof item === 'string' || typeof item === 'number') && item !== null,
+    ),
 };
 
 export type TablePropTypes = ExtractPropTypes<typeof tablePropTypes>;

package/src/components/table/table.vue

@@ -80,24 +80,24 @@
                   <spr-avatar
                     v-if="column.hasAvatar"
                     size="lg"
-                    :src="sortedData[keyIndex][column.field].image"
+                    :src="sortedDataItem(keyIndex, column.field).image"
                     alt="User Avatar"
                     :variant="column.avatarVariant ? column.avatarVariant : 'initial'"
-                    :initial="sortedData[keyIndex][column.field].title as string"
+                    :initial="sortedDataItem(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 || ''" />
+                    <Icon :icon="sortedDataItem(keyIndex, column.field).icon || ''" />
                   </div>
                   <div>
                     <!-- Array Title -->
                     <div
-                      v-if="Array.isArray(sortedData[keyIndex][column.field].title)"
+                      v-if="Array.isArray(sortedDataItem(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-for="(cell, index) in sortedDataItem(keyIndex, column.field).title" :key="index">
                         <div v-if="column.hasLozengeTitle" class="spr-mt-1">
                           <spr-table-lozenge-title :cell="cell as LozengeTitle" />
                         </div>
@@ -112,21 +112,21 @@
                       <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" />
+                        <spr-table-lozenge-title :cell="sortedDataItem(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" />
+                        <spr-table-chips-title :cell="sortedDataItem(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 }}
+                        {{ sortedDataItem(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 }}
+                      {{ sortedDataItem(keyIndex, column.field).subtext }}
                     </div>
                   </div>
                 </div>
@@ -199,5 +199,6 @@ const {
   handleRowClick,
   handleSelect,
   handleSelectAll,
+  sortedDataItem
 } = useTable(props, emit, slots);
 </script>

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

@@ -1,6 +1,6 @@
 import { ref, computed, toRefs, Slots, watch } from 'vue';
 
-import type { TablePropTypes, TableEmitTypes, TABLE_SORT, TableData } from './table';
+import type { TablePropTypes, TableEmitTypes, TABLE_SORT, TableData, TableDataProps } from './table';
 import type { SetupContext } from 'vue';
 
 import classNames from 'classnames';
@@ -158,12 +158,28 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     };
   });
 
+  //assert type TableDataProps 
+  const sortedDataItem = (rowIndex: number, headerField: string) => {
+    return sortedData.value[rowIndex][headerField] as TableDataProps;
+  }
+
+  const isTableDataObject = (data: TableDataProps) => {
+    return typeof data === 'object' && 'title' in data
+  }
+
   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,
-    );
+    const selectedIndex = selectedData.value.findIndex((data) => {
+      const typedData = data[selectedKeyId.value] as TableDataProps;
+      const typedItemData = item[selectedKeyId.value] as TableDataProps;
+
+      if (isTableDataObject(typedData) && isTableDataObject(typedItemData)) {
+        return typedData.title === typedItemData.title;
+      } else {
+        return data[selectedKeyId.value] === item[selectedKeyId.value];
+      }
+    });
 
     if (selectedIndex !== -1) {
       selectedData.value.splice(selectedIndex, 1);
@@ -182,7 +198,16 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
 
   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);
+
+    return selectedData.value.some((data) => {
+      const typedData = data[selectedKeyId.value] as TableDataProps;
+      const typedItemData = item[selectedKeyId.value] as TableDataProps;
+      if (isTableDataObject(typedData) && isTableDataObject(typedItemData)) {
+        return typedData.title === typedItemData.title;
+      } else {
+        return data[selectedKeyId.value] === item[selectedKeyId.value];
+      }
+    });
   };
 
   watch(
@@ -191,7 +216,14 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       if (returnCompleteSelectedProperties.value) {
         emit('update:selectedData', selectedData.value);
       } else {
-        const mappedData = selectedData.value.map((item) => ({ ...item[selectedKeyId.value] }));
+        const mappedData = selectedData.value.map((item) => {
+          const typedItem = item[selectedKeyId.value] as TableDataProps | string | number;
+          if (typeof typedItem === 'object') {
+            return { ...typedItem };
+          } else {
+            return typedItem;
+          }
+        });
         emit('update:selectedData', mappedData);
       }
     },
@@ -214,5 +246,6 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     isAllSelected,
     isRowSelected,
     isIndeterminate,
+    sortedDataItem
   };
 };