design-system-next 2.21.10 → 2.22.0

package/src/components/list/list-item/list-item.ts

@@ -1,48 +1,48 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { MenuListType } from '../list';
-
-export const listItemPropTypes = {
-  item: {
-    type: Object as PropType<MenuListType>,
-    required: true,
-  },
-  isSelected: {
-    type: Boolean,
-    required: true,
-  },
-  classes: {
-    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
-    required: true,
-  },
-  multiSelect: {
-    type: Boolean,
-    default: false,
-  },
-  lozenge: {
-    type: Boolean,
-    default: false,
-  },
-  ladderized: {
-    type: Boolean,
-    default: false,
-  },
-  noCheck: {
-    type: Boolean,
-    default: false,
-  },
-  itemIcon: {
-    type: String,
-    default: '',
-  },
-  disabledUnselectedItems: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const listItemEmitTypes = {
-  select: () => true,
-};
-
-export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
-export type ListItemEmitTypes = typeof listItemEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '../list';
+
+export const listItemPropTypes = {
+  item: {
+    type: Object as PropType<MenuListType>,
+    required: true,
+  },
+  isSelected: {
+    type: Boolean,
+    required: true,
+  },
+  classes: {
+    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
+    required: true,
+  },
+  multiSelect: {
+    type: Boolean,
+    default: false,
+  },
+  lozenge: {
+    type: Boolean,
+    default: false,
+  },
+  ladderized: {
+    type: Boolean,
+    default: false,
+  },
+  noCheck: {
+    type: Boolean,
+    default: false,
+  },
+  itemIcon: {
+    type: String,
+    default: '',
+  },
+  disabledUnselectedItems: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const listItemEmitTypes = {
+  select: () => true,
+};
+
+export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
+export type ListItemEmitTypes = typeof listItemEmitTypes;

package/src/components/sidepanel/sidepanel.ts

@@ -5,9 +5,9 @@ const SIDEPANEL_POSITION = ['right'] as const;
 
 export const sidepanelPropTypes = {
   /**
-   * @description Controls whether the side panel is open. 
+   * @description Controls whether the side panel is open.
    * Set to `true` to display the side panel or `false` to hide it.
-  */
+   */
   isOpen: {
     type: Boolean,
     default: false,
@@ -15,16 +15,16 @@ export const sidepanelPropTypes = {
   /**
    * @description The title displayed in the side panel's header.
    * If not provided, defaults to 'Sidepanel Header'.
-  */
+   */
   headerTitle: {
     type: String,
-    default: 'Sidepanel Header'
+    default: 'Sidepanel Header',
   },
   /**
    * @description Specifies the size of the side panel.
    * Acceptable values are: `'sm'`, `'md'`, `'lg'`, `'xl'`.
    * Defaults to `'sm'`.
-  */
+   */
   size: {
     type: String as PropType<(typeof SIDEPANEL_SIZE)[number]>,
     validator: (value: (typeof SIDEPANEL_SIZE)[number]) => SIDEPANEL_SIZE.includes(value),
@@ -34,7 +34,7 @@ export const sidepanelPropTypes = {
    * @description Sets the height of the side panel.
    * Accepts a string (e.g., `'500px'`, `'70vh'`) or a number (interpreted as pixels).
    * Defaults to `'calc(100vh - 32px)'`.
-  */
+   */
   height: {
     type: [String, Number],
     default: 'calc(100vh - 32px)',
@@ -43,16 +43,16 @@ export const sidepanelPropTypes = {
    * @description Controls the visibility of the side panel header.
    * Set to `true` to hide the header, or `false` to display it.
    * Defaults to `false`.
-  */
+   */
   hideHeader: {
     type: Boolean,
-    default: false 
+    default: false,
   },
   /**
    * @description Specifies the position of the side panel.
    * Currently, only `'right'` is supported.
    * Defaults to `'right'`.
-  */
+   */
   position: {
     type: String as PropType<(typeof SIDEPANEL_POSITION)[number]>,
     validator: (value: (typeof SIDEPANEL_POSITION)[number]) => SIDEPANEL_POSITION.includes(value),
@@ -62,16 +62,16 @@ export const sidepanelPropTypes = {
    * @description Determines whether a backdrop is displayed behind the side panel.
    * Set to `true` to enable the backdrop, or `false` to disable it.
    * Defaults to `true`.
-  */
+   */
   hasBackdrop: {
     type: Boolean,
-    default: true
+    default: true,
   },
   /**
    * @description Controls whether clicking outside the side panel should close it.
    * Set to `true` to enable closing on outside click, or `false` to disable it.
    * Defaults to `false`.
-  */
+   */
   closeOutside: {
     type: Boolean,
     default: true,
@@ -80,7 +80,7 @@ export const sidepanelPropTypes = {
    * @description Controls whether clicking ESC button should close it.
    * Set to `true` to enable closing on ESC button click, or `false` to disable it.
    * Defaults to `true`.
-  */
+   */
   escapeClose: {
     type: Boolean,
     default: true,
@@ -92,12 +92,22 @@ export const sidepanelPropTypes = {
   footerNoPadding: {
     type: Boolean,
     default: false,
+  },
+  isExpandable: {
+    type: Boolean,
+    default: false
+  },
+  isExpanded: {
+    type: Boolean,
+    default: false
   }
-}
+};
 
 export const sidepanelEmitTypes = {
   close: Function,
   onClose: Function,
+  shrink: Function,
+  expand: Function,
 };
 
 export type SidepanelPropTypes = ExtractPropTypes<typeof sidepanelPropTypes>;

package/src/components/sidepanel/sidepanel.vue

@@ -24,7 +24,15 @@
           <div id="sidepanel-title" :class="sidepanelClasses.sidepanelHeaderTitleClasses">
             {{ headerTitle }}
           </div>
-          <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" @click="handleClose" />
+          <div class="spr-flex spr-items-center spr-gap-size-spacing-3xs">            
+            <Icon
+              v-if="props.isExpandable"
+              :class="sidepanelClasses.sidepanelHeaderIconClasses"
+              :icon="isExpanded ? 'ph:arrows-in-simple' : 'ph:arrows-out-simple'"
+              @click="handlePanelExpansion"
+            />
+            <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" @click="handleClose" />
+          </div>
         </div>
         <div v-else>
           <slot name="header"></slot>
@@ -51,5 +59,5 @@ import { sidepanelPropTypes, sidepanelEmitTypes } from './sidepanel';
 const props = defineProps(sidepanelPropTypes);
 const emit = defineEmits(sidepanelEmitTypes);
 
-const { sidepanelClasses, sidepanelRef, handleClose } = useSidepanel(props, emit);
+const { sidepanelClasses, sidepanelRef, handleClose, isExpanded, handlePanelExpansion } = useSidepanel(props, emit);
 </script>

package/src/components/sidepanel/stacking-sidepanel/stacking-sidepanel.vue

@@ -29,11 +29,13 @@ const stackingSidepanelBase = useTemplateRef('stacking-sidepanel-base');
 const props = defineProps(stackingSidePanelProps);
 const emits = defineEmits(stackingSidePanelEmits);
 
-const { showPanel, hidePanel, stackingSidepanelClasses, stackingSidepanelBaseTransform, activePanels } =
+const { showPanel, hidePanel, stackingSidepanelClasses, stackingSidepanelBaseTransform, activePanels, handleExpandPanel, expandedPanel } =
   useStackingSidepanel(props, emits, stackingSidepanelBase);
 
 defineExpose({
   showPanel,
   hidePanel,
+  handleExpandPanel,
+  expandedPanel
 });
 </script>

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

@@ -9,6 +9,8 @@ export const useStackingSidepanel = (
   stackingSidepanelBase: Readonly<ShallowRef<HTMLDivElement | null>>,
 ) => {
   const activePanels = useVModel(props, 'stack', emits, { deep: true });
+  const expandedPanel = ref('');
+  const isTransitioning = ref(false);  
 
   // Ensure activePanels is an array
   watchDeep(activePanels, (newValue) => {
@@ -17,6 +19,7 @@ export const useStackingSidepanel = (
   });
 
   const showPanel = (name: string) => {
+    expandedPanel.value = '';
     if (!activePanels.value.includes(name)) {
       activePanels.value.push(name);
       // Update transform immediately
@@ -25,17 +28,20 @@ export const useStackingSidepanel = (
   };
 
   const hidePanel = (name: string) => {
+    expandedPanel.value = '';
     const index = activePanels.value.indexOf(name);
     if (index !== -1) {
-      activePanels.value.splice(index, 1);
-      // Undo resize tracker two times of history
-      undoResizeTracker();
+      activePanels.value.splice(index, 1);      
       undoResizeTracker();
       // Update transform immediately
       updateTransform();
     }
   };
 
+  const handleExpandPanel = (action: 'expand' | 'shrink', name: string) => {
+    expandedPanel.value = action === 'expand' ? name : '';
+  };
+
   // Styling for the stacking sidepanel
   const stackingSidepanelBaseTransform = ref('transform: translateX()');
   // Track the width of the stacking sidepanel base
@@ -43,10 +49,13 @@ export const useStackingSidepanel = (
   const { history, undo: undoResizeTracker } = useRefHistory(resizeTracker);
 
   // Watch for changes in the active panels to update the transform
-  useResizeObserver(stackingSidepanelBase, (entries) => {
+  useResizeObserver(stackingSidepanelBase, (entries) => {  
+    //stop observer if panel is expanding to stop population of history of resizeTracker
+    if (!!isTransitioning.value || !!expandedPanel.value) return;
+
     const entry = entries[0];
     const { width } = entry.contentRect;
-    resizeTracker.value = resizeTracker.value !== width ? width : resizeTracker.value;
+    resizeTracker.value = resizeTracker.value !== width ? width : resizeTracker.value;    
     updateTransform();
   });
 
@@ -58,7 +67,14 @@ export const useStackingSidepanel = (
       return;
     }
 
-    stackingSidepanelBaseTransform.value = `transform: translateX(${history.value[0].snapshot}px);`;
+    let snapshot = history.value[0].snapshot;
+
+    const numOfActivePanels = activePanels.value.length - 1;
+    const numOfSnapshotHistory = history.value.length - 1;
+    snapshot = history.value[numOfSnapshotHistory - numOfActivePanels]?.snapshot;
+    if(!snapshot) return    
+
+    stackingSidepanelBaseTransform.value = `transform: translateX(${snapshot}px);`;
   };
 
   // Watch for changes in active panels and update transform immediately
@@ -70,6 +86,17 @@ export const useStackingSidepanel = (
     { flush: 'post' },
   );
 
+  watch(
+    expandedPanel,
+    () => {
+      // transition delay of expanding panel
+      isTransitioning.value = true;
+      setTimeout(() => {
+        isTransitioning.value = false;
+      }, 150);
+    },
+  );
+
   const stackingSidepanelClasses = computed(() => {
     const sidepanelStackBackdropClasses =
       'spr-fixed spr-left-0 spr-top-0 spr-z-[1010] spr-h-full spr-w-full spr-bg-mushroom-700/60';
@@ -114,5 +141,7 @@ export const useStackingSidepanel = (
     stackingSidepanelClasses,
     stackingSidepanelBaseTransform,
     activePanels,
+    expandedPanel,
+    handleExpandPanel,
   };
 };

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

@@ -19,16 +19,20 @@ interface SidepanelClasses {
 }
 
 export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<SidepanelEmitTypes>['emit']) => {
-  const { size, position, isStacking, footerNoPadding } = toRefs(props);
+  const { size, position, isStacking, footerNoPadding, isExpanded } = toRefs(props);
 
   const sidepanelClasses: ComputedRef<SidepanelClasses> = computed(() => {
     const sidepanelBaseClasses = classNames(
-      'spr-right-4 spr-top-1/2 spr-z-[1015] spr-flex spr-h-full spr-min-h-[200px] spr-translate-y-[-50%] spr-flex-col spr-rounded-border-radius-xl spr-bg-white-50 spr-drop-shadow',
+      'spr-right-4 spr-top-1/2 spr-z-[1015] spr-flex spr-h-full spr-min-h-[200px] spr-translate-y-[-50%] spr-flex-col spr-rounded-border-radius-xl spr-bg-white-50 spr-drop-shadow spr-transition-all spr-ease-[ease-in-out] spr-duration-[150ms]',
       {
         'spr-fixed': !isStacking.value,
-        'spr-w-[360px] sm:spr-w-[calc(100%-35px)]': size.value === 'sm',
-        'spr-w-[420px] sm:spr-w-[calc(100%-35px)]': size.value === 'md',
-        'spr-w-[480px] sm:spr-w-[calc(100%-35px)]': size.value === 'lg',
+        'spr-w-[360px]': size.value === 'sm' && !isExpanded.value,
+        'spr-w-[420px]': size.value === 'md' && !isExpanded.value,
+        'spr-w-[480px]': size.value === 'lg' && !isExpanded.value,
+        '[@media(max-width:360px)]:spr-w-[calc(100vw-35px)]': size.value === 'sm' && !isExpanded.value && !isStacking.value,
+        '[@media(max-width:420px)]:spr-w-[calc(100vw-35px)]': size.value === 'md' && !isExpanded.value && !isStacking.value,
+        '[@media(max-width:480px)]:spr-w-[calc(100vw-35px)]': size.value === 'lg' && !isExpanded.value && !isStacking.value,
+        'spr-w-[calc(100vw-50px)]': isExpanded.value,
       },
     );
 
@@ -45,13 +49,13 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
     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-py-3': !footerNoPadding.value
-      }
+        'spr-py-3': !footerNoPadding.value,
+      },
     );
 
-    const sidepanelTransitionActiveClasses = classNames(
-      { 'spr-transition-all spr-duration-[150ms] spr-ease-[ease-in-out]': !isStacking.value },
-    );
+    const sidepanelTransitionActiveClasses = classNames({
+      'spr-transition-all spr-duration-[150ms] spr-ease-[ease-in-out]': !isStacking.value,
+    });
 
     const sidepanelTransitionHiddenClasses = classNames('spr-opacity-0', {
       'spr-translate-x-full -spr-translate-y-2/4': !isStacking.value && position.value === 'right',
@@ -84,6 +88,14 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
     emit('close');
   };
 
+  const handlePanelExpansion = () => {    
+    if (isExpanded.value) {
+      emit('shrink');
+    } else {
+      emit('expand');
+    }
+  };
+
   let ignoreClick = false;
 
   const handleClickOutside = (event: MouseEvent) => {
@@ -111,7 +123,7 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
         emit('onClose');
       }
     },
-  );
+  );  
 
   onMounted(() => {
     document.addEventListener('click', handleClickOutside);
@@ -126,6 +138,8 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
   return {
     sidepanelClasses,
     sidepanelRef,
+    isExpanded,
     handleClose,
+    handlePanelExpansion,
   };
 };