design-system-next 2.2.0 → 2.3.1

package/package.json

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

package/src/components/calendar-cell/use-calendar-cell.ts

@@ -80,17 +80,17 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
       'spr-border-solid': !props.status || (props.status !== 'pending' && props.status !== 'error'),
     });
 
-    const titleClasses = classNames('spr-text-color-strong spr-body-xs-regular-medium', {
+    const titleClasses = classNames('spr-text-color-strong spr-body-sm-regular-medium', {
       'spr-text-color-danger-base': props.status === 'error',
     });
 
-    const descriptionClasses = classNames('spr-text-color-strong spr-body-xs-regular', {
+    const descriptionClasses = classNames('spr-text-color-strong spr-body-sm-regular', {
       'spr-text-color-danger-base': props.status === 'error',
     });
 
-    const getTypeLabelClassess = classNames('spr-text-color-strong spr-body-xs-regular', {
+    const getTypeLabelClassess = classNames('spr-text-color-strong spr-body-sm-regular', {
       'spr-text-color-danger-base': props.status === 'error',
-      'spr-text-color-strong spr-body-xs-regular-medium': offlineStatus.includes(props.type),
+      'spr-text-color-strong spr-body-sm-regular-medium': offlineStatus.includes(props.type),
     });
 
     const getMainClasses = classNames(calendarCellWrapper, getCellClasses.value, statusCellClasses);

package/src/components/dropdown/dropdown.vue

@@ -86,6 +86,6 @@ const {
   handleSelectedLadderizedItem,
   dropdownValue,
   removeCurrentLevelInBackLabel,
-  isLadderizedSearch
+  isLadderizedSearch,
 } = useDropdown(props, emit);
 </script>

package/src/components/filter/filter.vue

@@ -4,13 +4,14 @@
     aria-id="filter-option-wrapper"
     distance="4"
     placement="bottom"
-    :triggers="['click']"
+    :triggers="[]"
+    :popper-hide-triggers="[]"
     :container="`#${uniqueId}`"
+    :auto-hide="false"
     :style="{
       width: props.width,
       position: 'relative',
     }"
-    :auto-hide="false"
   >
     <span
       :id="uniqueId"
@@ -18,6 +19,7 @@
         width: props.width,
         position: 'relative',
       }"
+      @click="isFilterOpen = true"
     >
       <slot>
         <spr-input v-model="searchValue" type="text" :placeholder="placeholder" :label="label" :disabled="disabled">
@@ -184,6 +186,7 @@
         >
           <div
             class="spr-flex spr-w-full spr-flex-row spr-items-center spr-justify-items-start spr-gap-size-spacing-3xs"
+            @click="getFiltereredOption[key].isSelected = !getFiltereredOption[key].isSelected"
           >
             <spr-checkbox
               v-model="getFiltereredOption[key].isSelected"

package/src/components/sidenav/sidenav.ts

@@ -93,12 +93,16 @@ export const sidenavPropTypes = {
   },
   notificationCount: {
     type: [String, Number],
-    validator: (value: number) => typeof value === 'number',
+    validator: (value: string | number) => {
+      return typeof value === 'number' || typeof value === 'string';
+    },
     default: '',
   },
   requestCount: {
     type: [String, Number],
-    validator: (value: number) => typeof value === 'number',
+    validator: (value: string | number) => {
+      return typeof value === 'number' || typeof value === 'string';
+    },
     default: '',
   },
   userMenu: {

package/src/components/sidenav/sidenav.vue

@@ -127,6 +127,7 @@
         <!-- Search -->
         <div
           v-if="props.hasSearch"
+          id="sidenav_search"
           :class="[
             'spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out',
             'hover:spr-background-color-hover',
@@ -151,6 +152,7 @@
                 instant-move
               >
                 <div
+                  :id="`${generateId(parentLink.title)}`"
                   :class="{
                     'spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out spr-max-w-9 spr-max-h-9 spr-m-auto spr-box-border': true,
                     'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
@@ -195,6 +197,7 @@
                           instant-move
                         >
                           <div
+                            :id="`${generateId(parentLink.title, menuLinkItem.title)}`"
                             :class="{
                               'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
                               'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
@@ -234,6 +237,7 @@
                                 <Menu aria-id="sidenav-sub-submenu-wrapper" :triggers="['click', 'hover']" instant-move>
                                   <div
                                     v-if="!submenuLinkItem.hidden"
+                                    :id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"
                                     :class="{
                                       'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
                                       'spr-background-color-single-active':
@@ -268,6 +272,7 @@
                       <template v-else>
                         <div
                           v-if="!menuLinkItem.hidden"
+                          :id="`${generateId(parentLink.title, menuLinkItem.title)}`"
                           :class="{
                             'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
                             'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
@@ -276,6 +281,10 @@
                           }"
                           @click="handleRedirect(menuLinkItem, parentLink.title, menuLinkItem.title, '')"
                         >
+                          <div
+                            v-if="props.activeNav.menu === menuLinkItem.title"
+                            class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
+                          ></div>
                           <span>{{ menuLinkItem.title }}</span>
                         </div>
                       </template>
@@ -298,6 +307,7 @@
                   <span class="spr-label-xs-medium spr-uppercase">{{ parentLink.title }}</span>
                 </template>
                 <div
+                  :id="`${generateId(parentLink.title)}`"
                   :class="{
                     'spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out spr-max-w-9 spr-max-h-9 spr-m-auto spr-box-border': true,
                     'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
@@ -339,6 +349,7 @@
                 instant-move
               >
                 <div
+                  :id="`${generateId(parentLink.title)}`"
                   :class="{
                     'spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out spr-max-w-9 spr-max-h-9 spr-m-auto spr-box-border': true,
                     'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
@@ -383,6 +394,7 @@
                           instant-move
                         >
                           <div
+                            :id="`${generateId(parentLink.title, menuLinkItem.title)}`"
                             :class="{
                               'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
                               'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
@@ -422,6 +434,7 @@
                                 <Menu aria-id="sidenav-sub-submenu-wrapper" :triggers="['click', 'hover']" instant-move>
                                   <div
                                     v-if="!submenuLinkItem.hidden"
+                                    :id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"
                                     :class="{
                                       'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
                                       'spr-background-color-single-active':
@@ -456,6 +469,7 @@
                       <template v-else>
                         <div
                           v-if="!menuLinkItem.hidden"
+                          :id="`${generateId(parentLink.title, menuLinkItem.title)}`"
                           :class="[
                             'spr-body-sm-regular spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-300 spr-ease-in-out',
                             'hover:spr-background-color-hover',
@@ -486,6 +500,7 @@
                   <span class="spr-label-xs-medium spr-uppercase">{{ parentLink.title }}</span>
                 </template>
                 <div
+                  :id="`${generateId(parentLink.title)}`"
                   :class="{
                     'spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-border-radius-md spr-p-2 spr-transition spr-duration-150 spr-ease-in-out spr-max-w-9 spr-max-h-9 spr-m-auto spr-box-border': true,
                     'spr-background-color-single-active spr-border-color-brand-base spr-border-[1.5px] spr-border-solid active:spr-scale-90':
@@ -526,6 +541,7 @@
         </template>
         <div
           v-if="props.notificationCount || props.notificationCount === 0"
+          id="sidenav_notification"
           :class="[
             'spr-relative spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-2 spr-rounded-border-radius-md',
             'spr-transition spr-duration-150 spr-ease-in-out spr-w-9 spr-h-9 spr-m-auto',
@@ -559,6 +575,7 @@
         </template>
         <div
           v-if="props.requestCount || props.requestCount === 0"
+          id="sidenav_request"
           :class="[
             'spr-relative spr-flex spr-cursor-pointer spr-items-center spr-justify-center spr-2 spr-rounded-border-radius-md',
             'spr-transition spr-duration-150 spr-ease-in-out spr-w-9 spr-h-9 spr-m-auto',
@@ -693,7 +710,7 @@ import SprBadge from '../badge/badge.vue';
 const props = defineProps(sidenavPropTypes);
 const emit = defineEmits(sidenavEmitTypes);
 
-const { isQuckActionMenuVisible, isUserMenuVisible, userProfileError, getUserInitials, handleRedirect } = useSidenav(
+const { isQuckActionMenuVisible, isUserMenuVisible, userProfileError, getUserInitials, handleRedirect, generateId } = useSidenav(
   props,
   emit,
 );

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

@@ -53,11 +53,27 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
     }
   };
 
+  const transformToCamelCaseId = (str: string) => {
+    return str
+      .toLowerCase()
+      .split(' ')
+      .map((word, index) => {
+        if (index === 0) return word;
+        return word.charAt(0).toUpperCase() + word.slice(1);
+      })
+      .join('');
+  }
+
+  const generateId = (...titles: string[]): string => {
+    return titles.map(transformToCamelCaseId).join('_');
+  }
+
   return {
     isQuckActionMenuVisible,
     isUserMenuVisible,
     userProfileError,
     getUserInitials,
     handleRedirect,
+    generateId
   };
 };

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

@@ -24,17 +24,14 @@ export const useTablePagination = (
   const { selectedRowCount, currentPage, totalItems, bordered } = toRefs(props);
 
   const paginationClasses: ComputedRef<TablePaginationClasses> = computed(() => {
-    const baseClass = classNames(
-      'spr-p-size-spacing-xs spr-flex spr-justify-between spr-bg-white-50 spr-h-max',
-      {
-        'spr-border spr-border-solid spr-border-color-weak': bordered.value,
-        'spr-border-x-0 spr-border-t spr-border-b-0 spr-border-solid spr-border-color-weak': !bordered.value,
-      },
-    );
-    const dropdownInputFieldClass = classNames('spr-w-[120px] spr-font-bold spr-h-full spr-space-x-2');
+    const baseClass = classNames('spr-p-size-spacing-xs spr-flex spr-justify-between spr-bg-white-50 spr-h-max', {
+      'spr-border spr-border-solid spr-border-color-weak': bordered.value,
+      'spr-border-x-0 spr-border-t spr-border-b-0 spr-border-solid spr-border-color-weak': !bordered.value,
+    });
+    const dropdownInputFieldClass = classNames('spr-w-[120px] spr-h-full spr-space-x-2');
     const inputFieldIconClass = classNames('spr-mt-0.5 spr-pl-1 spr-text-mushroom-950');
     const rightSideClass = classNames('spr-flex spr-justify-between spr-items-center spr-space-x-4');
-    const computeRowRangeClass = classNames('spr-font-main spr-text-color-base');
+    const computeRowRangeClass = classNames('spr-text-color-base spr-body-sm-regular');
     const navigationContainerClass = classNames('spr-flex spr-space-x-2');
     const navigationButtonClass = classNames('spr-rounded-border-radius-md');
     const dropdownClass = classNames('!spr-w-max');

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

@@ -76,7 +76,7 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     const tableWrapperClasses = classNames(
       '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-h-max',
     );
-    const tableFooterClasses = classNames('spr-absolute spr-w-full spr-bottom-0 spr-left-0', {
+    const tableFooterClasses = classNames('spr-w-full spr-bottom-0 spr-left-0', {
       'spr-background-color-surface': props.variant === 'surface',
       'spr-background-color': props.variant === 'white',
     });