design-system-next 2.11.8 → 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.8",
+  "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.8",
+  "version": "2.11.9",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {

package/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <spr-button tone="success" @click="isSidepanelOpen = true">Open Sidepanel</spr-button>
+  <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>
@@ -17,6 +17,8 @@
       </div>
     </template>
   </spr-sidepanel>
+
+  <spr-date-picker id="datepicker" v-model="datePickerModel" label="Date Picker" display-helper />
 </template>
 <script setup>
 import { ref } from 'vue';
@@ -24,8 +26,9 @@ 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(true);
+const isSidepanelOpen = ref(false);
 
 const wew = ref();
 
@@ -43,4 +46,6 @@ const menuList = ref([
     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,