design-system-next 2.23.1 → 2.24.2

package/src/components/table/table-header-dropdown/table-header-dropdown.vue

@@ -0,0 +1,84 @@
+<template>
+  <spr-dropdown
+    :id="props.id"
+    ref="tableHeaderDropdown"
+    width="100%"
+    :triggers="[]"
+    :popper-triggers="['click']"
+    popper-width="448px"
+    no-padding
+  >
+    <div :class="props.headerClasses" @click="showDropdown">
+      <span> {{ props.header.name }} </span>
+      <span>
+        <Icon class="spr-text-[#4B685E] !spr-justify-normal" icon="ph:funnel-simple" height="20px" width="20px" />
+      </span>
+    </div>
+
+    <template #popper>
+      <spr-card class="spr-font-main" border-width="0px" :has-content-padding="false" show-header>
+        <template #header>
+          <div class="spr-w-full spr-border-0 spr-border-b spr-border-solid spr-border-color-weak spr-p-size-spacing-xs spr-flex spr-flex-row spr-justify-between spr-items-center">
+            <span class="spr-subheading-xs spr-capitalize">{{ props.header.name }}</span>
+            <spr-button size="small" variant="secondary" @click="selectAll">Select All</spr-button>
+          </div>
+        </template>
+        <template #content>
+          <div v-if="props.isSortable" class="spr-border-0 spr-border-b spr-border-solid spr-border-color-weak">
+            <spr-list v-model="selectedSort" class="spr-capitalize spr-body-sm-regular spr-text-color-strong [&_svg]:spr-w-[16px] [&_svg]:spr-h-[16px] [&_svg.spr-text-color-brand-base]:spr-hidden" :menu-list="props.sortOptions"/>
+          </div>
+          <div v-if="props.header.filterList && props.header.filterList.length > 0" >
+            <spr-list v-model="selectedFilters" class="spr-capitalize spr-body-sm-regular spr-text-color-strong [&_svg]:spr-w-[16px] [&_svg]:spr-h-[16px]" :menu-list="props.header.filterList" multi-select/>
+          </div>
+        </template>
+        <template #footer>
+          <div class="spr-ms-auto spr-flex spr-items-center spr-py-size-spacing-5xs">
+            <spr-button tone="success" @click="applyFilter">Apply Filter</spr-button>
+          </div>
+        </template>
+      </spr-card>
+    </template>
+  </spr-dropdown>
+</template>
+
+<script setup lang="ts">
+import SprDropdown from '@/components/dropdown/dropdown.vue';
+import SprCard from '@/components/card/card.vue';
+import SprButton from '@/components/button/button.vue';
+import SprList from '@/components/list/list.vue';
+import Icon from '@/components/icon/icon.vue';
+import { 
+  tableHeaderDropdownEmitTypes, 
+  tableHeaderDropdownPropTypes 
+} from './table-header-dropdown';
+import { ref } from 'vue';
+import { MenuListType } from '@/components/list/list';
+
+const tableHeaderDropdown = ref<InstanceType<typeof SprDropdown> | null>(null);
+const showDropdown = () => {
+  tableHeaderDropdown.value?.showDropdown();
+};
+
+const props = defineProps(tableHeaderDropdownPropTypes);
+const emits = defineEmits(tableHeaderDropdownEmitTypes,);
+
+const selectedSort = ref<MenuListType[]>([]);
+const selectedFilters = ref<MenuListType[]>([]);
+
+const applyFilter = () => {
+  emits('onApplyFilter', {
+    headerField: props.header.field,
+    sortBy: selectedSort.value[0] ? selectedSort.value[0].value as 'asc' | 'desc' | null : null,
+    appliedFilters: selectedFilters.value.reduce((acc, filter) => {
+      acc[filter.text] = filter.value as string;
+      return acc;
+    }, {} as Record<string, string>),
+  });
+  tableHeaderDropdown.value?.hideDropdown();
+};
+
+const selectAll = () => {
+  selectedFilters.value = props.header.filterList ? [...props.header.filterList] : [];
+  emits('onSelectAll');
+};
+</script>

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

@@ -58,6 +58,10 @@ export const tablePaginationPropTypes = {
     type: Boolean as PropType<boolean>,
     default: false,
   },
+  showNumberOfRowsDropdown: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  }
 };
 
 export const tablePaginationEmitTypes = {

package/src/components/table/table-pagination/table-pagination.vue

@@ -1,6 +1,8 @@
 <template>
-  <div :class="paginationClasses.baseClass">
+  <div :class="paginationClasses.baseClass" v-bind="$attrs">
+    
     <spr-dropdown
+      v-if="showNumberOfRowsDropdown"
       :id="dropdownId"
       :menu-list="dropdownSelection"
       dropdown-type="single-select"
@@ -53,6 +55,9 @@
         </spr-button>
       </div>
     </div>
+    <div v-if="slots.actions" id="table_pagination_actions_slot">
+      <slot name="actions" />
+    </div>
   </div>
 </template>
 
@@ -65,8 +70,10 @@ import { useTablePagination } from './use-table-pagination';
 import SprInput from '@/components/input/input.vue';
 import SprButton from '@/components/button/button.vue';
 import SprDropdown from '@/components/dropdown/dropdown.vue';
+import { useSlots } from 'vue';
 
 const emit = defineEmits(tablePaginationEmitTypes);
+const slots = useSlots();
 
 const props = defineProps(tablePaginationPropTypes);
 
@@ -83,6 +90,7 @@ const {
   dropdownId,
   currentPage,
   totalPages,
+  showNumberOfRowsDropdown
 } = useTablePagination(props, emit);
 </script>
 

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

@@ -22,7 +22,7 @@ export const useTablePagination = (
   props: TablePaginationPropTypes,
   emit: SetupContext<TablePaginationEmitTypes>['emit'],
 ) => {
-  const { selectedRowCount, totalItems, bordered, editableCurrentPage } = toRefs(props);
+  const { selectedRowCount, totalItems, bordered, editableCurrentPage, showNumberOfRowsDropdown } = toRefs(props);
 
   const currentPage = useVModel(props, 'currentPage', emit);
 
@@ -67,13 +67,13 @@ export const useTablePagination = (
   });
 
   const dropdownSelection = ref(props.dropdownSelection);
-  const computeRowRange = computed(() => {
+  const computeRowRange = computed(() => {    
     const startRow = (currentPage.value - 1) * selectedRowCount.value + 1;
     const endRow = Math.min(currentPage.value * selectedRowCount.value, totalItems.value);
     return `${startRow} - ${endRow} of ${totalItems.value}`;
   });
 
-  const computeSelectedRowCount = computed(() => {
+  const computeSelectedRowCount = computed(() => {    
     return `${selectedRowCount.value} Rows`;
   });
 
@@ -124,5 +124,6 @@ export const useTablePagination = (
     dropdownId,
     currentPage,
     totalPages,
+    showNumberOfRowsDropdown
   };
 };

package/src/components/table/table.ts

@@ -2,6 +2,8 @@ import type { PropType, ExtractPropTypes } from 'vue';
 import type { ChipTitle } from '@/components/table/table-chips-title/table-chips-title';
 import type { LozengeTitle } from '@/components/table/table-lozenge-title/table-lozenge-title';
 import { type SortableEvent } from 'sortablejs';
+import type { MenuListType } from '../list/list';
+import type { TableHeaderFilterType } from './table-header-dropdown/table-header-dropdown';
 export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
 
 export interface Header {
@@ -18,6 +20,7 @@ export interface Header {
   avatarVariant?: string;
   customTailwindClasses?: string;
   width?: string;
+  filterList?: MenuListType[]; // List of filter options for table header dropdown
 }
 
 export interface TableData {
@@ -183,6 +186,10 @@ export const tablePropTypes = {
   retainSelectionOnDataChange: {
     type: Boolean,
     default: false,
+  },
+  showHeaderFilter: {
+    type: Boolean, 
+    default: false,
   }
 };
 
@@ -202,7 +209,8 @@ export const tableEmitTypes = {
   onDragAdd: (event: DragOnAddEvent): event is DragOnAddEvent =>
     event !== undefined && Array.isArray(event.updatedList),
   onDragRemove: (event: DragOnRemoveEvent): event is DragOnRemoveEvent =>
-    event !== undefined && Array.isArray(event.updatedList),  
+    event !== undefined && Array.isArray(event.updatedList),
+  onApplyFilter: (filter: TableHeaderFilterType) => !!filter,
 };
 
 export type TablePropTypes = ExtractPropTypes<typeof tablePropTypes>;

package/src/components/table/table.vue

@@ -20,7 +20,7 @@
       <table
         :key="tableKey"
         aria-describedby="describe"
-        class="spr-h-full spr-w-full spr-table-fixed"
+        class="spr-h-full spr-w-full"
         cellspacing="0"
         cellpadding="0"
       >
@@ -45,7 +45,18 @@
               :class="[getTableClasses.headerClasses(header)]"
               :style="{ width: header?.width }"
             >
-              <div :class="getTableClasses.headerNameClass">
+              <!-- Header with Dropdown Filter -->
+              <spr-table-header-dropdown
+                v-if="props.showHeaderFilter"
+                :id="`th-dropdown-${keyHeader}`"
+                :header="header"
+                :is-sortable="true"
+                :header-classes="getTableClasses.headerNameClass"
+                :filter-options="header.filterList"
+                @on-apply-filter="(filters) => emit('onApplyFilter', filters)"
+              />
+              <!-- Default Header -->
+              <div v-else :class="getTableClasses.headerNameClass">
                 <span :class="[{ 'spr-cursor-pointer': header.sort }]" @click="header.sort && sortData(header.field)">
                   {{ header.name }}
                 </span>
@@ -69,6 +80,9 @@
                     :class="[{ 'spr-text-kangkong-700': sortField === header.field }]"
                   />
                 </span>
+                <span v-if="props.showHeaderFilter">
+                  <Icon icon="ph:funnel-simple" height="20" width="20" class="spr-ml-size-spacing-5xs spr-text-[#4B685E]" />
+                </span>
               </div>
             </th>
 
@@ -213,6 +227,7 @@ 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 SprTableHeaderDropdown from '@/components/table/table-header-dropdown/table-header-dropdown.vue';
 
 import { tablePropTypes, tableEmitTypes } from './table';
 import type { ChipTitle } from '@/components/table/table-chips-title/table-chips-title';

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

@@ -198,7 +198,11 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
 
   const getTableClasses = computed(() => {
     const tableWrapperClasses = classNames(
-      'spr-flex spr-flex-col spr-h-full spr-border-color-weak spr-w-full spr-overflow-hidden spr-rounded-border-radius-lg spr-border spr-border-solid spr-table-wrapper spr-relative spr-font-main',
+      'spr-flex spr-flex-col spr-h-full spr-border-color-weak spr-w-full spr-overflow-auto spr-rounded-border-radius-lg spr-border spr-border-solid spr-table-wrapper spr-relative spr-font-main',
+      {
+        'spr-overflow-hidden': isDraggable.value,
+        'spr-overflow-auto': !isDraggable.value,
+      }
     );
     const tableFooterClasses = classNames('spr-w-full spr-bottom-0 spr-left-0', {
       'spr-background-color-surface': props.variant === 'surface',
@@ -219,6 +223,7 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
         'spr-border-color-weak spr-border-x-0 spr-border-y spr-border-solid',
         {
           'spr-border-t-0': !slots.default,
+          'spr-cursor-pointer hover:spr-background-color-hover active:spr-background-color-pressed': props.showHeaderFilter,
         },
         headerBackground,
       );