design-system-next 2.13.6 → 2.14.3

package/src/App.vue

@@ -1,85 +1,3 @@
 <template>
-  <div class="spr-h-[75vh]">
-    <spr-table :headers="headers" :data-table="data" :full-height="true" :sticky-column="1">
-      <template #footer>
-        <spr-table-pagination
-          v-model:selected-row-count="selectedRowCount"
-          v-model:current-page="currentPage"
-          :total-items="totalItems"
-          :dropdown-selection="dropdownSelection"
-          :version="'backend'"
-          :editable-current-page="true"
-          @previous="handlePrevious"
-          @next="handleNext"
-        />
-      </template>
-    </spr-table>
-  </div>
-  <label class="spr-font-main spr-text-[14px] spr-non-italic spr-font-medium" style="">
-    10 Rows
-  </label>
-  <input class="spr-font-main spr-text-[14px] spr-non-italic spr-font-medium" />
+  <div>Test Component Here</div>
 </template>
-
-<script setup lang="ts">
-import SprTable from "@/components/table/table.vue";
-import SprTablePagination from "@/components/table/table-pagination/table-pagination.vue"
-import { ref, watch } from 'vue';
-import tableData from "@/mock/tableData";
-
-const headers = ref([
-  { field: 'name', name: 'Role Name', sort: true, hasAvatar: true, hasSubtext: true },
-  { field: 'lastUpdate', name: 'Date', sort: true, hasAvatar: false, hasSubtext: false },
-  { field: 'test', name: 'Test', sort: true, hasAvatar: false, hasSubtext: false },
-  { field: 'test', name: 'Test', sort: true, hasAvatar: false, hasSubtext: false },
-  { field: 'test', name: 'Test', sort: true, hasAvatar: false, hasSubtext: false },
-  { field: 'test', name: 'Test', sort: true, hasAvatar: false, hasSubtext: false },
-  { field: 'test', name: 'Test', sort: true, hasAvatar: false, hasSubtext: false },
-  { field: 'test', name: 'Test', sort: true, hasAvatar: false, hasSubtext: false },
-  { field: 'status', name: 'Status', sort: true, hasAvatar: false, hasSubtext: false },
-]);
-
-
-const totalItems = ref(tableData.value.length);
-const currentPage = ref(1);
-const dropdownSelection = [
-  { text: '10', value: '10' },
-  { text: '20', value: '20' },
-  { text: '30', value: '30' },
-  { text: '100', value: '100' },
-  { text: '1000', value: '1000' },
-];
-
-const selectedRowCount = ref(10);
-const data = ref(tableData.value.slice(0, selectedRowCount.value));
-const updateDataTable = () => {
-  data.value = tableData.value.slice((currentPage.value - 1) * selectedRowCount.value, currentPage.value * selectedRowCount.value);
-}
-watch(selectedRowCount, () => {
-  currentPage.value = 1; // Reset to first page when row count changes
-  updateDataTable();
-});
-
-watch(currentPage, (newValue) => {
-  console.log('Current Page:', newValue);
-  if(!currentPage.value) return;
-  else if (currentPage.value > Math.ceil(totalItems.value / selectedRowCount.value)) {
-    currentPage.value = Math.ceil(totalItems.value / selectedRowCount.value);
-  }
-  updateDataTable();
-});
-
-const handlePrevious = () => {
-  if (currentPage.value > 1) {
-    currentPage.value--;
-    updateDataTable();
-  }
-};
-
-const handleNext = () => {
-  if (currentPage.value * selectedRowCount.value < totalItems.value) {
-    currentPage.value++;
-    updateDataTable();
-  }
-};
-</script>

package/src/assets/styles/tailwind.css

@@ -68,7 +68,7 @@
 
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-overflow-hidden spr-rounded-none spr-border-none spr-bg-transparent spr-shadow-none;
+        @apply spr-overflow-hidden spr-rounded-none spr-border-none spr-bg-transparent spr-shadow-drop;
 
         .slide-fade-enter-active {
           @apply spr-duration-300 spr-ease-out;
@@ -89,7 +89,6 @@
       }
     }
   }
-
   /* #endregion - Sidenav */
 
   /* #region - Tooltips */
@@ -97,7 +96,7 @@
   #tooltip-full-width-wrapper {
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-background-color-inverted spr-text-color-inverted-strong spr-body-xs-regular spr-break-all spr-rounded-border-radius-md spr-px-2 spr-py-1.5 spr-font-main spr-opacity-100;
+        @apply spr-background-color-inverted spr-text-color-inverted-strong spr-body-xs-regular spr-break-all spr-rounded-border-radius-md spr-px-2 spr-py-1.5 spr-font-main spr-opacity-100 spr-shadow-drop;
       }
 
       .v-popper__arrow-outer {
@@ -109,7 +108,7 @@
   #tooltip-wrapper {
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-max-w-full;
+        @apply spr-max-w-full spr-shadow-drop;
       }
     }
   }
@@ -117,7 +116,7 @@
   #tooltip-full-width-wrapper {
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-max-w-[280px];
+        @apply spr-max-w-[280px] spr-shadow-drop;
       }
     }
   }
@@ -129,7 +128,7 @@
 
     .v-popper__wrapper {
       .v-popper__inner {
-        @apply spr-border-color-weak spr-w-full spr-rounded-xl spr-border spr-border-solid spr-font-main spr-shadow-none;
+        @apply spr-border-color-weak spr-w-full spr-rounded-xl spr-border spr-border-solid spr-font-main spr-shadow-drop;
 
         &::-webkit-scrollbar-track {
           @apply spr-rounded-br-xl spr-rounded-tr-xl;
@@ -142,15 +141,14 @@
     }
   }
 
-  #contact-number-country-dropdown {
+  #input-contact-number-country-dropdown,
+  #input-currency-dropdown {
     #dropdown-wrapper[data-popper-placement='top-start'] {
-      margin-top: -4px;
-      margin-left: -8px;
+      @apply spr-ml-[-8px] spr-mt-[-4px];
     }
 
     #dropdown-wrapper[data-popper-placement='bottom-start'] {
-      margin-top: 4px;
-      margin-left: -8px;
+      @apply spr-ml-[-8px] spr-mt-[4px];
     }
   }
   /* #endregion - Dropdown */
@@ -199,6 +197,10 @@
     tbody::-webkit-scrollbar {
       @apply spr-h-0 spr-w-0; /* Hides the scrollbar in WebKit browsers */
     }
+
+    .empty-table-dropzone-dragged-class {
+      @apply spr-hidden;
+    }
   }
   /* #endregion - Table */
 

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

@@ -27,7 +27,6 @@ export const datePickerPropTypes = {
   id: {
     type: String,
     required: true,
-    default: 'date-picker',
   },
   modelValue: {
     type: String,

package/src/components/date-picker/date-picker.vue

@@ -266,7 +266,7 @@
     </Menu>
     <div v-if="props.displayHelper" :class="datePickerClasses.datePickerInputHelperClasses">
       <slot name="helperMessage">
-        <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
+        <Icon v-if="props.helperIcon" class="spr-h-5 spr-min-h-5 spr-w-5 spr-min-w-5" :icon="props.helperIcon" />
         <span>{{ props.helperText }}</span>
       </slot>
     </div>
@@ -330,7 +330,7 @@ const {
   handleTabClick,
   handleBackspace,
   clearDate,
-  handleSlotClick
+  handleSlotClick,
 } = useDatePicker(props, emit);
 
 defineExpose({

package/src/components/date-picker/date-range-picker/date-range-picker.vue

@@ -1,42 +1,49 @@
 <template>
   <div>
     <Menu
-       v-model:shown="datePopperState"
-       aria-id="date-range-picker-wrapper"
-       distance="4"
-       :placement="finalPlacement"
-       :triggers="[]"
-       :popper-hide-triggers="[]"
-       :auto-hide="false"
-       :disabled="isDateRangePickerPopperDisabled"
-       :container="`#${props.id}`"
-       :reference="activeInputRef"
-       :strategy="
-         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
-       "
-       :delay="0"
-       :auto-placement="!isUsingCustomSlot"
-       :style="{
-         width: props.width,
-       }"
-     >
+      v-model:shown="datePopperState"
+      aria-id="date-range-picker-wrapper"
+      distance="4"
+      :placement="finalPlacement"
+      :triggers="[]"
+      :popper-hide-triggers="[]"
+      :auto-hide="false"
+      :disabled="isDateRangePickerPopperDisabled"
+      :container="`#${props.id}`"
+      :reference="activeInputRef"
+      :strategy="
+        props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
+      "
+      :delay="0"
+      :auto-placement="!isUsingCustomSlot"
+      :style="{
+        width: props.width,
+      }"
+    >
       <div :id="props.id" class="spr-grid spr-gap-size-spacing-4xs">
         <label v-if="props.label" :for="props.id" :class="dateRangePickerClasses.labelClasses">
           {{ props.label }}
         </label>
-        
+
         <!-- Date Range Input Container -->
-        <div class="spr-flex spr-items-center spr-gap-2 spr-w-full">
+        <div class="spr-flex spr-w-full spr-items-center spr-gap-2">
           <slot :handle-click="handleCustomComponentClick">
             <!-- fallback: original input fields -->
             <!-- Start Date Input -->
-            <div ref="startDateContainerRef" :class="['spr-flex-1', dateRangePickerClasses.dateRangePickerBaseInputClasses]" @click.stop="handleStartDateClick" >
+            <div
+              ref="startDateContainerRef"
+              :class="['spr-flex-1', dateRangePickerClasses.dateRangePickerBaseInputClasses]"
+              @click.stop="handleStartDateClick"
+            >
               <div class="spr-flex spr-h-full spr-items-center spr-gap-1.5">
                 <input
                   :id="`${props.id}-start-month`"
                   ref="startMonthInputRef"
                   v-model="startMonthInput"
-                  :class="['spr-w-[38px] spr-min-w-[38px] spr-uppercase', dateRangePickerClasses.dateRangePickerInputClasses]"
+                  :class="[
+                    'spr-w-[38px] spr-min-w-[38px] spr-uppercase',
+                    dateRangePickerClasses.dateRangePickerInputClasses,
+                  ]"
                   type="text"
                   placeholder="MMM"
                   maxlength="3"
@@ -51,7 +58,10 @@
                   :id="`${props.id}-start-date`"
                   ref="startDateInputRef"
                   v-model="startDateInput"
-                  :class="['spr-w-[24px] spr-min-w-[24px] spr-text-center', dateRangePickerClasses.dateRangePickerInputClasses]"
+                  :class="[
+                    'spr-w-[24px] spr-min-w-[24px] spr-text-center',
+                    dateRangePickerClasses.dateRangePickerInputClasses,
+                  ]"
                   type="text"
                   placeholder="DD"
                   maxlength="2"
@@ -84,13 +94,20 @@
             <!-- Separator -->
             <span class="spr-text-color-strong spr-font-size-200 spr-text-color-weak">{{ props.separator }}</span>
             <!-- End Date Input -->
-            <div ref="endDateContainerRef" :class="['spr-flex-1', dateRangePickerClasses.dateRangePickerBaseInputClasses]" @click.stop="handleEndDateClick">
+            <div
+              ref="endDateContainerRef"
+              :class="['spr-flex-1', dateRangePickerClasses.dateRangePickerBaseInputClasses]"
+              @click.stop="handleEndDateClick"
+            >
               <div class="spr-flex spr-h-full spr-items-center spr-gap-1.5">
                 <input
                   :id="`${props.id}-end-month`"
                   ref="endMonthInputRef"
                   v-model="endMonthInput"
-                  :class="['spr-w-[38px] spr-min-w-[38px] spr-uppercase', dateRangePickerClasses.dateRangePickerInputClasses]"
+                  :class="[
+                    'spr-w-[38px] spr-min-w-[38px] spr-uppercase',
+                    dateRangePickerClasses.dateRangePickerInputClasses,
+                  ]"
                   type="text"
                   placeholder="MMM"
                   maxlength="3"
@@ -105,7 +122,10 @@
                   :id="`${props.id}-end-date`"
                   ref="endDateInputRef"
                   v-model="endDateInput"
-                  :class="['spr-w-[24px] spr-min-w-[24px] spr-text-center', dateRangePickerClasses.dateRangePickerInputClasses]"
+                  :class="[
+                    'spr-w-[24px] spr-min-w-[24px] spr-text-center',
+                    dateRangePickerClasses.dateRangePickerInputClasses,
+                  ]"
                   type="text"
                   placeholder="DD"
                   maxlength="2"
@@ -244,11 +264,11 @@
                       'spr-text-color-disabled': calendarTabIsInactiveMonthDates(day),
 
                       // Selected Date (Start or End) - Use brand color scheme from date picker
-                      'spr-background-color-brand-base active:spr-background-color-brand-pressed spr-text-color-inverted-strong !spr-text-white-50 active:spr-scale-95 spr-font-medium':
+                      'spr-background-color-brand-base active:spr-background-color-brand-pressed spr-text-color-inverted-strong spr-font-medium !spr-text-white-50 active:spr-scale-95':
                         calendarTabIsSelectedDate(day),
 
                       // In Range (between start and end) - Light green background with brand outline, no border, using spr- prefix
-                      'spr-bg-green-100 spr-cursor-pointer spr-outline spr-outline-1 spr-outline-offset-[-0.5px] spr-outline-kangkong-700':
+                      'spr-cursor-pointer spr-bg-green-100 spr-outline spr-outline-1 spr-outline-offset-[-0.5px] spr-outline-kangkong-700':
                         calendarTabIsInRange(day),
 
                       // Unselected Date - Gray border, no hover effects
@@ -264,7 +284,7 @@
                   <span>{{ day.date.date() }}</span>
                   <div
                     v-if="calendarTabIsTodayIndicator(day)"
-                    class="spr-bg-green-600 spr-absolute spr-bottom-1 spr-m-auto spr-h-1 spr-w-1 spr-rounded-full"
+                    class="spr-absolute spr-bottom-1 spr-m-auto spr-h-1 spr-w-1 spr-rounded-full spr-bg-green-600"
                   ></div>
                 </div>
                 <div v-else></div>
@@ -281,9 +301,11 @@
                   {
                     'spr-text-color-brand-base': month.monthValue === currentDate.month(),
                     'spr-border-color-weak hover:spr-background-color-hover active:spr-background-color-pressed':
-                      month.text.toLowerCase() !== startMonthInput.toLowerCase() && month.text.toLowerCase() !== endMonthInput.toLowerCase(),
+                      month.text.toLowerCase() !== startMonthInput.toLowerCase() &&
+                      month.text.toLowerCase() !== endMonthInput.toLowerCase(),
                     'spr-border-color-brand-base spr-background-color-single-active':
-                      month.text.toLowerCase() === startMonthInput.toLowerCase() || month.text.toLowerCase() === endMonthInput.toLowerCase(),
+                      month.text.toLowerCase() === startMonthInput.toLowerCase() ||
+                      month.text.toLowerCase() === endMonthInput.toLowerCase(),
                   },
                 ]"
                 @click="monthTabHandleSelectedMonth(month)"
@@ -308,7 +330,8 @@
                     'spr-text-color-brand-base': year === currentDate.year(),
                     'spr-border-color-weak hover:spr-background-color-hover active:spr-background-color-pressed':
                       year !== Number(startYearInput) && year !== Number(endYearInput),
-                    'spr-border-color-brand-base spr-background-color-single-active': year === Number(startYearInput) || year === Number(endYearInput),
+                    'spr-border-color-brand-base spr-background-color-single-active':
+                      year === Number(startYearInput) || year === Number(endYearInput),
                   },
                 ]"
                 @click="yearTabHandleSelectedYear(String(year))"
@@ -324,10 +347,10 @@
         </div>
       </template>
     </Menu>
-    
+
     <div v-if="props.displayHelper" :class="dateRangePickerClasses.dateRangePickerInputHelperClasses">
       <slot name="helperMessage">
-        <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
+        <Icon v-if="props.helperIcon" class="spr-h-5 spr-min-h-5 spr-w-5 spr-min-w-5" :icon="props.helperIcon" />
         <span>{{ props.helperText }}</span>
       </slot>
     </div>
@@ -409,4 +432,4 @@ const {
   handleEndDateClick,
   handleCustomComponentClick,
 } = useDateRangePicker(props, emit);
-</script> 
+</script>

package/src/components/dropdown/dropdown.ts

@@ -124,7 +124,7 @@ export const dropdownPropTypes = {
     },
     default: () => ['click'],
   },
-  popperTriggers: { 
+  popperTriggers: {
     type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
     validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
       return value.every((val) => TRIGGER_EVENTS.includes(val));
@@ -134,13 +134,14 @@ export const dropdownPropTypes = {
   autoHide: {
     type: Boolean,
     default: true,
-  }
+  },
 };
 
 export const dropdownEmitTypes = {
   'infinite-scroll-trigger': Boolean,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true, // Accept any type of value
+  'popper-state': Boolean,
 };
 
 export type DropdownPropTypes = ExtractPropTypes<typeof dropdownPropTypes>;

package/src/components/dropdown/dropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <Menu
-    :shown="dropdownPopperState"
+    v-model:shown="dropdownPopperState"
     aria-id="dropdown-wrapper"
     distance="4"
     :placement="props.placement"
@@ -33,8 +33,8 @@
       <div
         ref="dropdownRef"
         :class="[
-          (!props.ladderized || isLadderizedSearch) && 'spr-p-2',
           'spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden',
+          !props.ladderized || isLadderizedSearch,
         ]"
         :style="{
           width: props.popperInnerWidth,