design-system-next 2.5.0 → 2.7.0

package/src/components/sidenav/sidenav.vue

@@ -161,9 +161,23 @@
                     'active:spr-background-color-single-active active:spr-scale-90': true,
                   }"
                 >
-                  <Icon v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
-                  <Icon v-else-if="props.activeNav.parentNav === parentLink.title" :icon="`${parentLink.icon}-fill`" class="spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]" />
-                  <Icon v-else icon="ph:globe" />
+                  <template v-if="parentLink.icon && parentLink.icon.includes('https://')">
+                    <img
+                      v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
+                      :src="parentLink.icon"
+                      :alt="`${parentLink.title} icon`"
+                      class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]" />
+                    <img
+                      v-else-if="props.activeNav.parentNav === parentLink.title"
+                      :src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
+                      :alt="`${parentLink.title} icon`"
+                      class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]" />
+                  </template>
+                  <template v-else>
+                    <Icon v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
+                    <Icon v-else-if="props.activeNav.parentNav === parentLink.title" :icon="`${parentLink.icon}-fill`" class="spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]" />
+                    <Icon v-else icon="ph:globe" />
+                  </template>
                 </div>
 
                 <template #popper>
@@ -317,9 +331,23 @@
                   }"
                   @click="handleRedirect(parentLink, parentLink.title, '', '')"
                 >
-                  <Icon v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
-                  <Icon v-else-if="props.activeNav.parentNav === parentLink.title" :icon="`${parentLink.icon}-fill`" class="spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]" />
-                  <Icon v-else icon="ph:globe" />
+                  <template v-if="parentLink.icon && parentLink.icon.includes('https://')">
+                    <img
+                      v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
+                      :src="parentLink.icon"
+                      :alt="`${parentLink.title} icon`"
+                      class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]" />
+                    <img
+                      v-else-if="props.activeNav.parentNav === parentLink.title"
+                      :src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
+                      :alt="`${parentLink.title} icon`"
+                      class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]" />
+                  </template>
+                  <template v-else>
+                    <Icon v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
+                    <Icon v-else-if="props.activeNav.parentNav === parentLink.title" :icon="`${parentLink.icon}-fill`" class="spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]" />
+                    <Icon v-else icon="ph:globe" />
+                  </template>
                 </div>
               </Tooltip>
             </template>
@@ -358,9 +386,23 @@
                     'active:spr-background-color-single-active active:spr-scale-90': true,
                   }"
                 >
-                  <Icon v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
-                  <Icon v-else-if="props.activeNav.parentNav === parentLink.title" :icon="`${parentLink.icon}-fill`" class="spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]" />
-                  <Icon v-else icon="ph:globe" />
+                  <template v-if="parentLink.icon && parentLink.icon.includes('https://')">
+                    <img
+                      v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
+                      :src="parentLink.icon"
+                      :alt="`${parentLink.title} icon`"
+                      class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]" />
+                    <img
+                      v-else-if="props.activeNav.parentNav === parentLink.title"
+                      :src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
+                      :alt="`${parentLink.title} icon`"
+                      class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]" />
+                  </template>
+                  <template v-else>
+                    <Icon v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
+                    <Icon v-else-if="props.activeNav.parentNav === parentLink.title" :icon="`${parentLink.icon}-fill`" class="spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]" />
+                    <Icon v-else icon="ph:globe" />
+                  </template>
                 </div>
 
                 <template #popper>
@@ -510,9 +552,23 @@
                   }"
                   @click="handleRedirect(parentLink, parentLink.title, '', '')"
                 >
-                  <Icon v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
-                  <Icon v-else-if="props.activeNav.parentNav === parentLink.title" :icon="`${parentLink.icon}-fill`" class="spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]" />
-                  <Icon v-else icon="ph:globe" />
+                  <template v-if="parentLink.icon && parentLink.icon.includes('https://')">
+                    <img
+                      v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title"
+                      :src="parentLink.icon"
+                      :alt="`${parentLink.title} icon`"
+                      class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]" />
+                    <img
+                      v-else-if="props.activeNav.parentNav === parentLink.title"
+                      :src="parentLink.icon.replace(/\.(svg|png|jpg)$/, '-fill.$1')"
+                      :alt="`${parentLink.title} icon`"
+                      class="spr-h-[1.25em] spr-w-[1.25em] spr-max-w-[1.25em]" />
+                  </template>
+                  <template v-else>
+                    <Icon v-if="parentLink.icon && props.activeNav.parentNav !== parentLink.title" :icon="parentLink.icon" class="spr-h-[1.25em] spr-w-[1.25em]" />
+                    <Icon v-else-if="props.activeNav.parentNav === parentLink.title" :icon="`${parentLink.icon}-fill`" class="spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]" />
+                    <Icon v-else icon="ph:globe" />
+                  </template>
                 </div>
               </Tooltip>
             </template>
@@ -616,6 +672,7 @@
         instant-move
       >
         <div
+          id="sidenav_user_menu"
           :class="[
             'spr-background-color spr-flex spr-h-[36px] spr-w-[36px] spr-cursor-pointer spr-items-center spr-justify-center spr-rounded-full',
             'spr-border-color-weak spr-border spr-border-solid',
@@ -671,6 +728,7 @@
             <template v-for="(userMenuItem, userMenuItemIndex) in props.userMenu.items" :key="userMenuItemIndex">
               <div
                 v-if="!userMenuItem.hidden"
+                :id="`usermenu_${generateId(userMenuItem.title)}`"
                 :class="[
                   'spr-flex spr-cursor-pointer spr-gap-2 spr-p-2 spr-align-middle spr-duration-150 spr-ease-in-out',
                   'hover:spr-background-color-hover',

package/src/components/snackbar/snack/snack.vue

@@ -6,13 +6,13 @@
     @click="handleClick"
   >
     <div class="spr-flex spr-flex-auto spr-items-center">
-      <Icon
-        v-if="showIcon"
-        :icon="snackIcon"
-        :width="iconSize"
-        :height="iconSize"
-        :class="[snackToneCssClass, 'spr-mr-size-spacing-3xs']"
-      />
+        <Icon
+          v-if="showIcon"
+          :icon="snackIcon"
+          :width="iconSize"
+          :height="iconSize"
+          :class="[snackToneCssClass, 'spr-mr-size-spacing-3xs spr-flex-shrink-0']"
+        />
       <label>{{ text }}</label>
     </div>
     <template v-if="showAction">
@@ -27,7 +27,7 @@
           <spr-button
             v-if="actionIconProps"
             icon-only
-            :class="['!spr-p-size-spacing-4xs hover:spr-cursor-pointer', {  'spr-mr-2': actionText !== ''}]"
+            :class="['!spr-p-size-spacing-4xs hover:spr-cursor-pointer', { 'spr-mr-2': actionText !== '' }]"
             size="small"
             variant="secondary"
             :tone="actionIconProps.tone"

package/src/components/table/table.vue

@@ -17,14 +17,13 @@
         </template>
       </spr-table-actions>
     </div>
-
     <div :class="getTableClasses.tableBackgroundClasses">
       <table aria-describedby="describe" class="spr-w-full spr-table-fixed" cellspacing="0" cellpadding="0">
         <thead>
           <tr v-if="!(props.removeHeaderOnEmpty && sortedData.length <= 0)">
             <th v-if="props.isMultiSelect" :class="[getTableClasses.multiselectClass, getTableClasses.headerClasses]">
               <div class="spr-flex spr-justify-center spr-items-center">
-                <spr-checkbox label="" :checked="isAllSelected" @update:model-value="handleSelectAll"/>
+                <spr-checkbox label="" :checked="isAllSelected || isIndeterminate" :indeterminate="isIndeterminate" @update:model-value="handleSelectAll"/>
               </div>
             </th>
             <th v-for="(header, keyHeader) in headers" :key="keyHeader" :class="[getTableClasses.headerClasses]">
@@ -184,6 +183,7 @@ const {
   getTableClasses,
   getEmptyStateSize,
   isAllSelected,
+  isIndeterminate,
   
   isRowSelected,
   sortData,

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

@@ -19,6 +19,11 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     return selectedData.value.length === sortedData.value.length;
   });
 
+  const isIndeterminate = computed(() => {
+    if (selectedData.value.length === 0) return false;
+    return selectedData.value.length > 0 && selectedData.value.length < sortedData.value.length;
+  });
+
   const sortedData = computed(() => {
     if (!sortField.value || sortOrder.value) return dataTable.value;
 
@@ -170,10 +175,10 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
   };
 
   const handleSelectAll = () => {
-    if (isAllSelected.value) {
+    if (isAllSelected.value || isIndeterminate.value) {
       selectedData.value = [];
     } else {
-      selectedData.value = sortedData.value;
+      selectedData.value = [...sortedData.value];
     }
   };
 
@@ -210,5 +215,6 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     selectedData,
     isAllSelected,
     isRowSelected,
+    isIndeterminate,
   };
 };

package/src/components/time-picker/time-picker.ts

@@ -51,6 +51,10 @@ export const timePickerPropTypes = {
     type: String,
     default: '',
   },
+  placeholder: {
+    type: String,
+    default: '',
+  },
 };
 export const timePickerEmitTypes = {
   'update:modelValue': (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,

package/src/components/time-picker/use-time-picker.ts

@@ -75,6 +75,8 @@ export const useTimePicker = (props: TimePickerPropTypes, emit: SetupContext<Tim
   };
 
   const getPlaceHolder: ComputedRef<string> = computed(() => {
+    if (props.placeholder) return props.placeholder;
+
     return format.value === '12' ? 'HH : MM AM/PM' : 'HH : MM';
   });