design-system-next 2.11.7 → 2.11.9

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "design-system-next",
   "private": false,
-  "version": "2.11.7",
+  "version": "2.11.9",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.11.7",
+  "version": "2.11.9",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {

package/src/App.vue

@@ -1,3 +1,51 @@
 <template>
-  <div>Test Component Here</div>
+  <spr-button tone="success" @click="datePickerModel = '09-11-1997'">Open Sidepanel</spr-button>
+  <spr-sidepanel :is-open="isSidepanelOpen" header-title="Sidepanel Example" @close="isSidepanelOpen = false">
+    <div class="p-4">Sidepanel Content</div>
+    <template #footer>
+      <div class="spr-flex spr-justify-end spr-gap-2 spr-px-2">
+        <spr-button>Cancel</spr-button>
+        <spr-button-dropdown
+          v-model="wew"
+          dropdown-id="example1"
+          :menu-list="menuList"
+          placement="top-end"
+          popper-inner-width="200px"
+        >
+          Button Dropdown
+        </spr-button-dropdown>
+      </div>
+    </template>
+  </spr-sidepanel>
+
+  <spr-date-picker id="datepicker" v-model="datePickerModel" label="Date Picker" display-helper />
 </template>
+<script setup>
+import { ref } from 'vue';
+
+import SprButton from './components/button/button.vue';
+import SprButtonDropdown from './components/button/button-dropdown/button-dropdown.vue';
+import SprSidepanel from './components/sidepanel/sidepanel.vue';
+import SprDatePicker from './components/date-picker/date-picker.vue';
+
+const isSidepanelOpen = ref(false);
+
+const wew = ref();
+
+const menuList = ref([
+  {
+    text: 'Option 1',
+    value: 'option1',
+    icon: 'ph:check',
+    iconColor: 'spr-text-color-brand-base',
+  },
+  {
+    text: 'Option 2',
+    value: 'option2',
+    icon: 'ph:check',
+    iconColor: 'spr-text-color-brand-base',
+  },
+]);
+
+const datePickerModel = ref('');
+</script>

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

@@ -34,6 +34,7 @@
               maxlength="3"
               :disabled="props.disabled"
               :readonly="props.readonly"
+              autocomplete="off"
               @input="handleMonthInput"
               @keyup="handleMonthInput"
               @keydown="handleBackspace('month', $event)"
@@ -49,6 +50,7 @@
               maxlength="2"
               :disabled="props.disabled"
               :readonly="props.readonly"
+              autocomplete="off"
               @input="handleDateInput"
               @keyup="handleDateInput"
               @keydown="handleBackspace('date', $event)"
@@ -64,6 +66,7 @@
               maxlength="4"
               :disabled="props.disabled"
               :readonly="props.readonly"
+              autocomplete="off"
               @input="handleYearInput"
               @keyup="handleYearInput"
               @keydown="handleBackspace('year', $event)"

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

@@ -684,6 +684,8 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
   };
 
   const handleMonthInput = () => {
+    datePopperState.value = false;
+
     monthInput.value = monthInput.value.replace(/[^A-Za-z0-9\s]/g, '').toLocaleUpperCase();
 
     datePickerErrors.value = [];
@@ -694,10 +696,19 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
 
     handleValidateDate();
 
-    emitInputValue();
+    // Do not set yearInput when typing monthInput
+    if (!monthInput.value && !dateInput.value && !yearInput.value) {
+      emit('getInputValue', null);
+    }
+
+    if (monthInput.value && dateInput.value && yearInput.value) {
+      emitInputValue();
+    }
   };
 
   const handleDateInput = () => {
+    datePopperState.value = false;
+
     dateInput.value = dateInput.value.replace(/[^0-9]/g, '');
 
     datePickerErrors.value = [];
@@ -706,19 +717,39 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
 
     handleValidateDate();
 
-    emitInputValue();
+    // Do not set yearInput when typing dateInput
+    if (!monthInput.value && !dateInput.value && !yearInput.value) {
+      emit('getInputValue', null);
+    }
+
+    if (monthInput.value && dateInput.value && yearInput.value) {
+      emitInputValue();
+    }
   };
 
   const handleYearInput = () => {
+    datePopperState.value = false;
+
     yearInput.value = yearInput.value.replace(/[^0-9]/g, '');
 
     datePickerErrors.value = [];
 
     emit('getDateErrors', datePickerErrors.value);
 
-    handleValidateDate();
+    // Only validate year, do not set monthInput or dateInput
+    // Only emit year-related changes
+    // Only validate if yearInput is 4 digits (full year)
+    if (yearInput.value.length === 4) {
+      handleValidateDate();
 
-    emitInputValue();
+      if (!monthInput.value && !dateInput.value && !yearInput.value) {
+        emit('getInputValue', null);
+      }
+
+      if (monthInput.value && dateInput.value && yearInput.value) {
+        emitInputValue();
+      }
+    }
   };
 
   const handleConvertMonthIfValid = () => {
@@ -884,8 +915,6 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     const dateObj = dayjs(`${emittedMonth}-${dateInput.value}-${yearInput.value}`, 'MM-DD-YYYY');
 
     // Use the specified format for the input value
-    if (!emittedMonth && !dateInput.value && !yearInput.value) return;
-
     emit('getInputValue', (modelValue.value = dateObj.format(format.value)));
   };
 
@@ -954,6 +983,10 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     emitYearList();
   });
 
+  watch(modelValue, () => {
+    setModelValue();
+  });
+
   return {
     datePickerClasses,
     datePickerRef,

package/src/components/sidenav/sidenav.vue

@@ -234,20 +234,20 @@
                               v-for="(submenuLink, submenuLinkIndex) in menuLinkItem.submenuLinks"
                               :key="submenuLinkIndex"
                             >
-                              <h5
-                                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,
-                                }"
-                              >
-                                {{ submenuLink.subMenuHeading }}
-                              </h5>
                               <template
                                 v-for="(submenuLinkItem, submenuLinkItemIndex) in submenuLink.items"
                                 :key="submenuLinkItemIndex"
                               >
                                 <Menu aria-id="sidenav-sub-submenu-wrapper" :triggers="['click', 'hover']" instant-move>
+                                  <h5
+                                    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,
+                                    }"
+                                  >
+                                    {{ submenuLink.subMenuHeading }}
+                                  </h5>
                                   <div
                                     v-if="!submenuLinkItem.hidden"
                                     :id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"
@@ -459,20 +459,20 @@
                               v-for="(submenuLink, submenuLinkIndex) in menuLinkItem.submenuLinks"
                               :key="submenuLinkIndex"
                             >
-                              <h5
-                                v-if="submenuLink.subMenuHeading"
-                                :class="{
-                                  'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
-                                  'spr-mt-3': submenuLinkIndex !== 0,
-                                }"
-                              >
-                                {{ submenuLink.subMenuHeading }}
-                              </h5>
                               <template
                                 v-for="(submenuLinkItem, submenuLinkItemIndex) in submenuLink.items"
                                 :key="submenuLinkItemIndex"
                               >
                                 <Menu aria-id="sidenav-sub-submenu-wrapper" :triggers="['click', 'hover']" instant-move>
+                                  <h5
+                                    v-if="submenuLink.subMenuHeading"
+                                    :class="{
+                                      'spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2': true,
+                                      'spr-mt-3': submenuLinkIndex !== 0,
+                                    }"
+                                  >
+                                    {{ submenuLink.subMenuHeading }}
+                                  </h5>
                                   <div
                                     v-if="!submenuLinkItem.hidden"
                                     :id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"