design-system-next 2.23.0 → 2.24.2

package/src/components/sidepanel/sidepanel.ts

@@ -104,6 +104,10 @@ export const sidepanelPropTypes = {
   isActivePanel: {
     type: Boolean,
     default: false
+  },
+  footerNoTopBorder: {
+    type: Boolean,
+    default: false,
   }
 };
 

package/src/components/sidepanel/sidepanel.vue

@@ -17,6 +17,7 @@
       aria-labelledby="sidepanel-title"
       aria-describedby="sidepanel-content"
       :class="sidepanelClasses.sidepanelBaseClasses"
+      data-testid="sidepanel-dialog"
       :style="{ height: typeof height === 'number' ? `${height}px` : height }"
     >
       <template v-if="!props.hideHeader">
@@ -29,9 +30,10 @@
               v-if="props.isExpandable"
               :class="sidepanelClasses.sidepanelHeaderIconClasses"
               :icon="isExpanded ? 'ph:arrows-in-simple' : 'ph:arrows-out-simple'"
+              data-testid="expand-icon"
               @click="handlePanelExpansion"
             />
-            <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" @click="handleClose" />
+            <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" data-testid="x-icon" @click="handleClose" />
           </div>
         </div>
         <div v-else>

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

@@ -19,7 +19,7 @@ interface SidepanelClasses {
 }
 
 export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<SidepanelEmitTypes>['emit']) => {
-  const { size, position, isStacking, footerNoPadding, isExpanded, isActivePanel } = toRefs(props);
+  const { size, position, isStacking, footerNoPadding, isExpanded, isActivePanel, footerNoTopBorder } = toRefs(props);
 
   const sidepanelClasses: ComputedRef<SidepanelClasses> = computed(() => {
     const sidepanelBaseClasses = classNames(
@@ -48,9 +48,10 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
     const sidepanelContentClasses = classNames('spr-h-full spr-overflow-y-auto');
 
     const sidepanelFooterClasses = classNames(
-      'spr-bottom-0 spr-left-0 spr-w-full spr-rounded-b-border-radius-xl spr-border-0 spr-border-t spr-border-solid spr-border-mushroom-200 spr-bg-white-50 ',
+      'spr-bottom-0 spr-left-0 spr-w-full spr-rounded-b-border-radius-xl spr-border-0 spr-border-solid spr-border-mushroom-200 spr-bg-white-50 ',
       {
         'spr-py-3': !footerNoPadding.value,
+        'spr-border-t': !footerNoTopBorder.value
       },
     );
 

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

@@ -0,0 +1,48 @@
+import type { MenuListType } from '@/components/list/list';
+import { type PropType, type ExtractPropTypes, ref } from 'vue';
+import type { Header } from '../table';
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const defaultSortOptions = ref([
+  { text: 'Sort Ascending', value: 'asc', icon: 'ph:sort-ascending', iconColor: 'spr-text-color-supporting' },
+  { text: 'Sort Descending', value: 'desc', icon: 'ph:sort-descending', iconColor: 'spr-text-color-supporting' },
+]);
+
+export const tableHeaderDropdownPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  header: {
+    type: Object as PropType<Header>,
+    default: () => ({}),
+  },
+  isSortable: {
+    type: Boolean,
+    default: true,
+  },
+  headerClasses: {
+    type: String,
+    default: '',
+  },
+  sortOptions: {
+    type: Array as PropType<MenuListType[]>,
+    default: () => defaultSortOptions.value,
+  },
+};
+
+export interface TableHeaderFilterType {
+  headerField: string;
+  sortBy: 'asc' | 'desc' | null;
+  appliedFilters: Record<string, string>;
+};
+
+export const tableHeaderDropdownEmitTypes = {
+  onApplyFilter: (filter: TableHeaderFilterType) => !!filter,
+  onSelectAll: () => true,
+  'update:selectedSort': (selectedSort: MenuListType[]) => Array.isArray(selectedSort),
+  'update:selectedFilters': (selectedFilters: MenuListType[]) => Array.isArray(selectedFilters),
+};
+
+export type TableHeaderDropdownPropTypes = ExtractPropTypes<typeof tableHeaderDropdownPropTypes>;
+export type TableHeaderDropdownEmitTypes = typeof tableHeaderDropdownEmitTypes;

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,
       );