sprintify-ui 0.0.48 → 0.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDatePicker.stories.js

@@ -12,7 +12,7 @@ export default {
 const Template = (args) => ({
   components: { BaseDatePicker, ShowValue },
   setup() {
-    const value = ref(null);
+    const value = ref('2022-11-16T10:00:00Z');
     return { value, args };
   },
   template: `
@@ -41,10 +41,34 @@ MaxDate.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  modelValue: '2022-11-16',
   disabled: true,
 };
 
+export const DateTimeConversion = (args) => {
+  return {
+    components: { BaseDatePicker, ShowValue },
+    setup() {
+      const updatedValue = ref(null);
+      return { args, updatedValue };
+    },
+    template: `
+    <BaseDatePicker v-bind="args" @update:modelValue="(v) => updatedValue = v">
+    </BaseDatePicker>
+
+    <p class="mt-2"></p>
+    <small>Original props</small>
+    <ShowValue class='mt-1' :value="args.modelValue" />
+    
+    <p class="mt-2"></p>
+    <small>Updated value</small>
+    <ShowValue class='mt-1' :value="updatedValue" />
+  `,
+  };
+};
+DateTimeConversion.args = {
+  modelValue: '2022-11-05T10:00:00Z',
+};
+
 export const Field = createFieldStory({
   component: BaseDatePicker,
   componentName: 'BaseDatePicker',

package/src/components/BaseDatePicker.vue

@@ -10,7 +10,7 @@
     </div>
     <input
       ref="datepicker"
-      :value="modelValue"
+      :value="modelValueFormatted"
       type="text"
       readonly
       :disabled="disabled"
@@ -19,7 +19,7 @@
       :placeholder="$t('sui.click_or_select_date')"
     />
     <div
-      v-if="modelValue && !disabled"
+      v-if="modelValueFormatted && !disabled"
       class="absolute top-0 right-0 flex h-full items-center justify-center p-1"
     >
       <button
@@ -105,6 +105,24 @@ const weekdaysShort = arrayRotate(
   true
 );
 
+const modelValueFormatted = computed((): string | null => {
+  if (!props.modelValue) {
+    return null;
+  }
+  return DateTime.fromISO(props.modelValue).toISODate() ?? null;
+});
+
+// Make sure the model value is always formatted on the parent component
+watch(
+  () => modelValueFormatted.value,
+  () => {
+    if (props.modelValue !== modelValueFormatted.value) {
+      emitUpdate(modelValueFormatted.value);
+    }
+  },
+  { immediate: true }
+);
+
 let picker = null as Pikaday | null;
 
 onMounted(() => {