design-system-next 2.13.2 → 2.13.5

package/src/components/dropdown/dropdown.ts

@@ -24,6 +24,7 @@ export const PLACEMENTS_TYPES = [
 ] as const;
 
 const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+const TRIGGER_EVENTS = ['click', 'hover', 'focus', 'touch'] as const;
 
 export const dropdownPropTypes = {
   id: {
@@ -115,6 +116,24 @@ export const dropdownPropTypes = {
   lozenge: {
     type: Boolean,
     default: false,
+  },
+  triggers: {
+    type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
+    validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
+      return value.every((val) => TRIGGER_EVENTS.includes(val));
+    },
+    default: () => ['click'],
+  },
+  popperTriggers: { 
+    type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
+    validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
+      return value.every((val) => TRIGGER_EVENTS.includes(val));
+    },
+    default: () => [],
+  },
+  autoHide: {
+    type: Boolean,
+    default: true,
   }
 };
 

package/src/components/dropdown/dropdown.vue

@@ -4,9 +4,9 @@
     aria-id="dropdown-wrapper"
     distance="4"
     :placement="props.placement"
-    :triggers="[]"
-    :popper-hide-triggers="[]"
-    :auto-hide="false"
+    :triggers="props.triggers"
+    :popper-triggers="props.popperTriggers"
+    :auto-hide="props.autoHide"
     :disabled="isDropdownPopperDisabled"
     :container="`#${props.id}`"
     :strategy="
@@ -18,7 +18,7 @@
       width: props.width,
     }"
   >
-    <div @click="dropdownPopperState = true">
+    <div class="dropdown-slot">
       <slot />
     </div>
 

package/src/components/modal/modal.ts

@@ -2,7 +2,7 @@ import type { PropType, ExtractPropTypes } from 'vue';
 
 export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
 
-const MODAL_SIZE = ['sm', 'md', 'lg', 'xl'] as const;
+const MODAL_SIZE = ['sm', 'md', 'lg', 'xl', 'xxl'] as const;
 
 export const modalPropTypes = {
   modelValue: {

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

@@ -32,6 +32,7 @@ export const useModal = (props: ModalPropTypes, emit: SetupContext<ModalEmitType
         'spr-w-[480px] spr-max-w-[720px]': size.value === 'md',
         'spr-w-[720px] spr-max-w-[960px]': size.value === 'lg',
         'spr-w-[900px] spr-max-w-[1200px]': size.value === 'xl',
+        'spr-w-[1200px] spr-max-w-[1400px]': size.value === 'xxl',
       },
       { 'bounce-animation': staticBackdropClicked.value },
     );

package/src/components/sidenav/sidenav-menu-links.vue

@@ -65,7 +65,7 @@
                 v-if="menuLink.menuHeading"
                 :class="{
                   'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
-                  'spr-mt-2': menuLinkIndex !== 0,
+                  'spr-pt-2': menuLinkIndex !== 0,
                 }"
               >
                 {{ menuLink.menuHeading }}
@@ -138,7 +138,7 @@
                             v-if="submenuLink.subMenuHeading"
                             :class="{
                               'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
-                              'spr-mt-2': submenuLinkIndex !== 0,
+                              'spr-pt-2': submenuLinkIndex !== 0,
                             }"
                           >
                             {{ submenuLink.subMenuHeading }}

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

@@ -10,7 +10,7 @@
     >
       <spr-input v-model="computeSelectedRowCount" :class="paginationClasses.dropdownInputFieldClass" :readonly="true">
         <template #icon>
-          <Icon icon="ph:caret-down-bold" :class="paginationClasses.inputFieldIconClass" />
+          <Icon icon="ph:caret-down-bold" :class="paginationClasses.inputFieldIconClass" width="12px" height="12px"/>
         </template>
       </spr-input>
     </spr-dropdown>

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

@@ -31,8 +31,13 @@ export const useTablePagination = (
       '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 dropdownClass = classNames(
+      '!spr-w-max [&_.dropdown-slot_div_div]:spr-border-color-base [&_.dropdown-slot_div_div]:spr-p-0'
+    );
+    
+    const dropdownInputFieldClass = classNames('spr-max-w-[120px] spr-min-w-[48px] spr-h-full spr-font-semibold [&_input]:spr-py-size-spacing-3xs [&_input]:spr-pr-size-spacing-5xs');
+    const inputFieldIconClass = classNames('spr-text-mushroom-950 spr-pr-size-spacing-3xs spr-box-content');
     const rightSideClass = classNames(
       'spr-flex spr-justify-between spr-items-center',
       {
@@ -49,7 +54,6 @@ export const useTablePagination = (
       }
     );
     const navigationButtonClass = classNames('spr-rounded-border-radius-md');
-    const dropdownClass = classNames('!spr-w-max');
     return {
       baseClass,
       dropdownInputFieldClass,