design-system-next 2.10.2 → 2.11.0

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

@@ -17,7 +17,7 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
 
   const buttonClassses: ComputedRef<string> = computed(() => {
     const defaultClasses = classNames(
-      'spr-background-color spr-flex spr-items-center spr-gap-1.5 spr-w-fit  spr-min-w-[24px] spr-items-center spr-justify-center spr-rounded-md spr-outline-2 spr-outline-offset-4',
+      'spr-background-color spr-flex spr-items-center spr-gap-1.5 spr-w-fit spr-min-w-[24px] spr-items-center spr-justify-center spr-rounded-md spr-outline-2 spr-outline-offset-4',
       {
         'spr-w-full': fullwidth.value,
       },
@@ -55,21 +55,21 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
         return classNames(
           defaultClasses,
           sizeClasses,
-          'spr-text-color-disabled spr-background-color-disabled !spr-border-0 !spr-shadow-none !spr-cursor-not-allowed',
+          'spr-text-color-disabled spr-background-color-disabled !spr-shadow-none !spr-cursor-not-allowed spr-border-none',
         );
 
       if (variant.value === 'secondary')
         return classNames(
           defaultClasses,
           sizeClasses,
-          'spr-text-color-disabled spr-border-solid !spr-border !spr-border-color-disabled !spr-shadow-none !spr-cursor-not-allowed',
+          'spr-text-color-disabled !spr-shadow-none !spr-cursor-not-allowed spr-border spr-border-solid spr-border-color-disabled',
         );
 
       if (variant.value === 'tertiary')
         return classNames(
           defaultClasses,
           sizeClasses,
-          'spr-text-color-disabled !spr-border-0 !spr-shadow-none !spr-cursor-not-allowed',
+          'spr-text-color-disabled !spr-shadow-none !spr-cursor-not-allowed spr-border-none',
         );
     }
 
@@ -162,19 +162,16 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
   // #endregion - Background Css Class
 
   const buttonBorderCssClass: ComputedRef<string> = computed(() => {
-    if (variant.value === 'primary' || variant.value === 'tertiary') {
-      if (focused.value) {
-        return 'spr-border-solid !spr-border !spr-border-white-50';
+    return classNames(
+      'spr-border spr-border-solid',
+      {
+        'spr-border-transparent': variant.value === 'primary' || variant.value === 'tertiary',
+        'spr-border-white-50': focused.value && variant.value === 'primary' || variant.value === 'tertiary',
+        'spr-border-color-base': variant.value === 'secondary' && tone.value === 'neutral',
+        'spr-border-color-brand-base': variant.value === 'secondary' && tone.value === 'success',
+        'spr-border-color-danger-base': variant.value === 'secondary' && tone.value === 'danger',
       }
-
-      return 'spr-border-solid !spr-border !spr-border-transparent';
-    }
-
-    return classNames({
-      'spr-border-solid !spr-border !spr-border-color-base': tone.value === 'neutral',
-      'spr-border-solid !spr-border !spr-border-color-brand-base': tone.value === 'success',
-      'spr-border-solid !spr-border !spr-border-color-danger-base': tone.value === 'danger',
-    });
+    );
   });
 
   const buttonProps: ComputedRef<Record<string, unknown>> = computed(() => {

package/src/components/dropdown/dropdown.ts

@@ -5,7 +5,7 @@ export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<
 
 const GROUPED_ITEMS_BY_TYPES = ['A-Z', 'Z-A'] as const;
 
-const PLACEMENTS_TYPES = [
+export const PLACEMENTS_TYPES = [
   'auto',
   'auto-start',
   'auto-end',
@@ -96,6 +96,10 @@ export const dropdownPropTypes = {
   removeCurrentLevelInBackLabel: {
     type: Boolean,
     default: false,
+  },
+  noCheckInList: {
+    type: Boolean,
+    default: false,
   }
 };
 

package/src/components/dropdown/dropdown.vue

@@ -45,6 +45,7 @@
             :group-items-by="props.groupItemsBy"
             :multi-select="props.multiSelect"
             :pre-selected-items="dropdownValue"
+            :no-check="props.noCheckInList"
             @update:model-value="handleSelectedItem"
           />
           <spr-ladderized-list

package/src/components/list/list.ts

@@ -13,6 +13,10 @@ export type MenuListType = {
   group?: string;
   disabled?: boolean;
   _originalObject?: Record<string, unknown>; // Store original object reference when mapping complex objects
+  icon?: string, // String value for Iconify
+  iconColor?: string,
+  textColor?: string,
+  onClickFn?: () => void,
 };
 
 export type GroupedMenuListType = {
@@ -60,6 +64,10 @@ export const listPropTypes = {
     type: Boolean,
     default: false,
   },
+  noCheck: {
+    type: Boolean,
+    default: false,
+  }
 };
 
 export const listEmitTypes = {

package/src/components/list/list.vue

@@ -29,11 +29,14 @@
             @click="handleSelectedItem(item)"
           >
             <spr-checkbox v-if="props.multiSelect" :checked="isItemSelected(item)" />
-            <div class="spr-flex spr-flex-auto spr-flex-col spr-justify-start">
-              <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
-              <span v-if="item.subtext" class="spr-body-xs-regular spr-text-color-base spr-text-left">{{
-                item.subtext
-              }}</span>
+            <div :class="[item.textColor, 'spr-flex spr-flex-row spr-gap-size-spacing-3xs spr-items-center']">
+              <span v-if="item.icon" :class="[item.iconColor, 'spr-mt-[2px]']"><icon :icon="item.icon" width="20px" height="20px" /></span>
+              <div class="spr-flex spr-flex-auto spr-flex-col spr-justify-start">
+                <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
+                <span v-if="item.subtext" class="spr-body-xs-regular spr-text-color-base spr-text-left">
+                  {{ item.subtext }}
+                </span>
+              </div>
             </div>
             <Icon
               v-if="isItemSelected(item) && !props.multiSelect"
@@ -57,24 +60,27 @@
         @click="handleSelectedItem(item)"
       >
         <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
-        <div
-          :class="[
-            'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
-            { 'spr-text-color-disabled': item.disabled },
-          ]"
-        >
-          <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
-          <span
-            v-if="item.subtext"
+        <div :class="[item.textColor, 'spr-flex spr-flex-row spr-gap-size-spacing-3xs spr-items-center']">
+          <span v-if="item.icon" :class="[item.iconColor, 'spr-mt-[2px]']"><icon :icon="item.icon" width="20px" height="20px" /></span>
+          <div
             :class="[
-              'spr-body-xs-regular spr-text-color-base spr-text-left',
+              'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
               { 'spr-text-color-disabled': item.disabled },
             ]"
-            >{{ item.subtext }}</span
           >
+            <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
+            <span
+              v-if="item.subtext"
+              :class="[
+                'spr-body-xs-regular spr-text-color-base spr-text-left',
+                { 'spr-text-color-disabled': item.disabled },
+              ]"
+              >{{ item.subtext }}</span
+            >
+          </div>
         </div>
         <Icon
-          v-if="isItemSelected(item) && !props.multiSelect"
+          v-if="isItemSelected(item) && !props.multiSelect && !props.noCheck"
           class="spr-text-color-brand-base spr-w-[1.39em]"
           icon="ph:check"
         />

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

@@ -13,7 +13,7 @@ interface ListClasses {
 export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>['emit']) => {
   const selectedItems = useVModel(props, 'modelValue', emit);
 
-  const { menuList, menuLevel, groupItemsBy, multiSelect, preSelectedItems } = toRefs(props);
+  const { menuList, menuLevel, groupItemsBy, multiSelect, preSelectedItems, noCheck } = toRefs(props);
 
   const listClasses: ComputedRef<ListClasses> = computed(() => {
     const listItemClasses = classNames(
@@ -232,7 +232,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
 
   const getListItemClasses = (item: MenuListType) => ({
     [listClasses.value.listItemClasses]: !item.disabled,
-    'spr-background-color-single-active': isItemSelected(item) && !item.disabled,
+    'spr-background-color-single-active': isItemSelected(item) && !item.disabled && !noCheck.value,
     'hover:spr-cursor-not-allowed spr-flex spr-cursor-pointer spr-items-center spr-gap-1.5 spr-rounded-lg spr-p-2':
       item.disabled,
   });
@@ -354,6 +354,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     } else {
       // For single-select, simply replace the selection
       selectedItems.value = [item];
+      if (item.onClickFn) item.onClickFn();
     }
   };
   // #endregion - Helper Methods

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

@@ -1,9 +1,14 @@
 <template>
   <div v-if="activePanels.length > 0" :class="stackingSidepanelClasses.sidepanelStackBackdropClasses"></div>
-  <div ref="stacking-sidepanel-base" :class="[stackingSidepanelClasses.sidepanelStackBaseClasses]" :style="stackingSidepanelBaseTransform">
-    <transition-group 
+  <div
+    ref="stacking-sidepanel-base"
+    :class="[stackingSidepanelClasses.sidepanelStackBaseClasses]"
+    :style="stackingSidepanelBaseTransform"
+  >
+    <transition-group
       :enter-active-class="stackingSidepanelClasses.sidepanelStackTransitionEnterActiveClasses"
       :leave-active-class="stackingSidepanelClasses.sidepanelStackTransitionLeaveActiveClasses"
+      :move-class="stackingSidepanelClasses.sidepanelStackMoveClasses"
       :enter-from-class="stackingSidepanelClasses.sidepanelStackEnterFromClasses"
       :leave-to-class="stackingSidepanelClasses.sidepanelStackLeaveToClasses"
       appear
@@ -24,13 +29,8 @@ const stackingSidepanelBase = useTemplateRef('stacking-sidepanel-base');
 const props = defineProps(stackingSidePanelProps);
 const emits = defineEmits(stackingSidePanelEmits);
 
-const {
-  showPanel,
-  hidePanel,
-  stackingSidepanelClasses,
-  stackingSidepanelBaseTransform,
-  activePanels,
-} = useStackingSidepanel(props, emits, stackingSidepanelBase);
+const { showPanel, hidePanel, stackingSidepanelClasses, stackingSidepanelBaseTransform, activePanels } =
+  useStackingSidepanel(props, emits, stackingSidepanelBase);
 
 defineExpose({
   showPanel,

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

@@ -1,9 +1,13 @@
 import classNames from 'classnames';
-import { computed, ref, type SetupContext, type ShallowRef } from 'vue';
+import { computed, ref, watch, type SetupContext, type ShallowRef } from 'vue';
 import { useRefHistory, useResizeObserver, useVModel, watchDeep } from '@vueuse/core';
 import type { StackingSidePanelEmitTypes, StackingSidePanelPropTypes } from './stacking-sidepanel';
 
-export const useStackingSidepanel = (props: StackingSidePanelPropTypes, emits:SetupContext<StackingSidePanelEmitTypes>['emit'], stackingSidepanelBase: Readonly<ShallowRef<HTMLDivElement | null>>) => {
+export const useStackingSidepanel = (
+  props: StackingSidePanelPropTypes,
+  emits: SetupContext<StackingSidePanelEmitTypes>['emit'],
+  stackingSidepanelBase: Readonly<ShallowRef<HTMLDivElement | null>>,
+) => {
   const activePanels = useVModel(props, 'stack', emits, { deep: true });
 
   // Ensure activePanels is an array
@@ -15,6 +19,8 @@ export const useStackingSidepanel = (props: StackingSidePanelPropTypes, emits:Se
   const showPanel = (name: string) => {
     if (!activePanels.value.includes(name)) {
       activePanels.value.push(name);
+      // Update transform immediately
+      updateTransform();
     }
   };
 
@@ -25,69 +31,81 @@ export const useStackingSidepanel = (props: StackingSidePanelPropTypes, emits:Se
       // Undo resize tracker two times of history
       undoResizeTracker();
       undoResizeTracker();
+      // Update transform immediately
+      updateTransform();
     }
   };
 
   // Styling for the stacking sidepanel
-  const stackingSidepanelBaseTransform = ref("transform: translateX()");
+  const stackingSidepanelBaseTransform = ref('transform: translateX()');
   // Track the width of the stacking sidepanel base
   const resizeTracker = ref(0);
   const { history, undo: undoResizeTracker } = useRefHistory(resizeTracker);
 
   // Watch for changes in the active panels to update the transform
   useResizeObserver(stackingSidepanelBase, (entries) => {
-    const entry = entries[0]
+    const entry = entries[0];
     const { width } = entry.contentRect;
     resizeTracker.value = resizeTracker.value !== width ? width : resizeTracker.value;
+    updateTransform();
+  });
 
+  // Function to update transform based on current state
+  const updateTransform = () => {
     // If there is only one panel, reset the transform to default
     if (activePanels.value.length <= 1) {
-      stackingSidepanelBaseTransform.value = "transform: translateX()";
+      stackingSidepanelBaseTransform.value = 'transform: translateX()';
       return;
     }
 
     stackingSidepanelBaseTransform.value = `transform: translateX(${history.value[0].snapshot}px);`;
-  })
+  };
+
+  // Watch for changes in active panels and update transform immediately
+  watch(
+    activePanels,
+    () => {
+      updateTransform();
+    },
+    { flush: 'post' },
+  );
 
-  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';
+  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';
 
     const sidepanelStackBaseClasses = classNames(
       'spr-fixed spr-right-4 spr-top-1/2 spr-z-[1015] spr-flex spr-flex-row-reverse spr-gap-size-spacing-xs spr-transition-all spr-ease-[ease-in-out] spr-duration-[300ms]',
     );
 
     const sidepanelStackTransitionEnterActiveClasses = classNames(
-      'spr-transition-all spr-ease-[ease-in-out] spr-duration-[300ms]'
+      'spr-transition-all spr-ease-[ease-in-out] spr-duration-[150ms]',
     );
 
     const sidepanelStackTransitionLeaveActiveClasses = classNames(
-      'spr-transition-all spr-ease-[ease-in-out] spr-duration-[150ms]'
+      'spr-transition-all spr-ease-[ease-in-out] spr-duration-[150ms]',
     );
-    
 
-    const sidepanelStackEnterFromClasses = classNames(
-      'spr-opacity-0',
-      {
-        'spr-translate-x-1/2': activePanels.value.length <= 1,
-      }
-    );
+    const sidepanelStackMoveClasses = classNames('spr-transition-all spr-ease-[ease-in-out] spr-duration-[300ms]');
 
-    const sidepanelStackLeaveToClasses = classNames(
-      'spr-opacity-0',
-      {
-        'spr-translate-x-1/2': activePanels.value.length <= 0,
-        '-spr-translate-x-1/2': activePanels.value.length > 0,
-      }
-    );
+    const sidepanelStackEnterFromClasses = classNames('spr-opacity-0', {
+      'spr-translate-x-1/2': activePanels.value.length <= 1,
+    });
+
+    const sidepanelStackLeaveToClasses = classNames('spr-opacity-0', {
+      'spr-translate-x-1/2': activePanels.value.length <= 0,
+      '-spr-translate-x-1/2': activePanels.value.length > 0,
+    });
 
     return {
       sidepanelStackBackdropClasses,
       sidepanelStackBaseClasses,
       sidepanelStackTransitionEnterActiveClasses,
       sidepanelStackTransitionLeaveActiveClasses,
+      sidepanelStackMoveClasses,
       sidepanelStackEnterFromClasses,
       sidepanelStackLeaveToClasses,
-    }
+    };
   });
 
   return {

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

@@ -47,10 +47,10 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
     );
 
     const sidepanelTransitionActiveClasses = classNames(
-      { 'spr-transition-transform spr-duration-[150ms] spr-ease-[ease-in-out]': !isStacking.value },
+      { 'spr-transition-all spr-duration-[150ms] spr-ease-[ease-in-out]': !isStacking.value },
     );
 
-    const sidepanelTransitionHiddenClasses = classNames({
+    const sidepanelTransitionHiddenClasses = classNames('spr-opacity-0', {
       'spr-translate-x-full -spr-translate-y-2/4': !isStacking.value && position.value === 'right',
     });