@koumoul/vjsf 3.15.0 → 3.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.15.0",
+  "version": "3.15.1",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest run",

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

@@ -4,9 +4,12 @@ import { VIcon } from 'vuetify/components/VIcon'
 import { VDatePicker } from 'vuetify/components/VDatePicker'
 import { useDefaults } from 'vuetify'
 import { computed, ref, toRef, watch } from 'vue'
+import Debug from 'debug'
 import { getDateTimeParts, getDateTimeWithOffset, localeKeyboardFormat } from '../../utils/dates.js'
 import useNode from '../../composables/use-node.js'
 
+const debug = Debug('vjsf:date-picker')
+
 useDefaults({}, 'VjsfDatePicker')
 
 const props = defineProps({
@@ -28,10 +31,12 @@ const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.state
 
 const updateValue = (/** @type {Date | null} */value) => {
   if (!value) return
+
   const isoValue = props.modelValue.layout.format === 'date-time'
     ? getDateTimeWithOffset(value)
     : getDateTimeParts(/** @type Date */(/** @type unknown */(value)))[0]
   if (isoValue !== localData.value) {
+    debug(`apply normalized iso value ${value.toLocaleString()} -> ${isoValue}`)
     props.statefulLayout.input(props.modelValue, isoValue)
     menuOpened.value = false
   }
@@ -57,6 +62,7 @@ watch(localData, setFormattedValue, { immediate: true })
 const updateFormattedValue = () => {
   if (formattedValue.value) {
     const newValue = localeKeyboardFormat(props.modelValue.options.locale).parse(formattedValue.value)
+    debug(`parsed user input as date ${formattedValue.value} -> ${newValue?.toLocaleString()}`)
     if (!newValue) setFormattedValue()
     else updateValue(newValue)
   }

package/src/utils/dates.js

@@ -1,9 +1,9 @@
 // TODO: parts of this can probably be replaced by https://vuetifyjs.com/en/features/dates/
 
 // 1 => 01, 12 => 12
-export const padTimeComponent = (/** @type number */val) => {
+export const padNumber = (/** @type number */val, size = 2) => {
   const s = '' + val
-  return s.length === 1 ? '0' + s : s
+  return s.padStart(size, '0')
 }
 
 // storing ISO times with the user's timezone offset is more dense in information that always storing the base ISO date
@@ -12,18 +12,18 @@ export const padTimeComponent = (/** @type number */val) => {
 // 2020-04-03T19:07:43.152Z => 2020-04-03T21:07:43+02:00
 export const getDateTimeWithOffset = (/** @type Date */date) => {
   const offsetMinutes = date.getTimezoneOffset()
-  const offsetAbs = `${padTimeComponent(Math.abs(offsetMinutes / 60))}:${padTimeComponent(Math.abs(offsetMinutes % 60))}`
+  const offsetAbs = `${padNumber(Math.abs(offsetMinutes / 60))}:${padNumber(Math.abs(offsetMinutes % 60))}`
   let offset
   if (offsetMinutes < 0) offset = `+${offsetAbs}`
   else if (offsetMinutes > 0) offset = `-${offsetAbs}`
   else offset = 'Z'
-  return `${date.getFullYear()}-${padTimeComponent(date.getMonth() + 1)}-${padTimeComponent(date.getDate())}T${padTimeComponent(date.getHours())}:${padTimeComponent(date.getMinutes())}:${padTimeComponent(date.getSeconds())}${offset}`
+  return `${padNumber(date.getFullYear(), 4)}-${padNumber(date.getMonth() + 1)}-${padNumber(date.getDate())}T${padNumber(date.getHours())}:${padNumber(date.getMinutes())}:${padNumber(date.getSeconds())}${offset}`
 }
 
 // get the the date and short time components expected by date-time picker from a full date
 // 2020-04-03T21:07:43+02:00 => ['2020-04-03', '21:07']
 export const getDateTimeParts = (/** @type Date */date) => {
-  return [`${date.getFullYear()}-${padTimeComponent(date.getMonth() + 1)}-${padTimeComponent(date.getDate())}`, `${padTimeComponent(date.getHours())}:${padTimeComponent(date.getMinutes())}`]
+  return [`${padNumber(date.getFullYear(), 4)}-${padNumber(date.getMonth() + 1)}-${padNumber(date.getDate())}`, `${padNumber(date.getHours())}:${padNumber(date.getMinutes())}`]
 }
 
 // get a full date-time from the date and time parts edited by date-time picker

package/types/utils/dates.d.ts

@@ -1,4 +1,4 @@
-export function padTimeComponent(val: number): string;
+export function padNumber(val: number, size?: number): string;
 export function getDateTimeWithOffset(date: Date): string;
 export function getDateTimeParts(date: Date): string[];
 export function getDateTime(parts: [string, string]): string;

package/types/utils/dates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../src/utils/dates.js"],"names":[],"mappings":"AAGO,sCAAoC,MAAM,UAGhD;AAMM,4CAAyC,IAAI,UAQnD;AAIM,uCAAoC,IAAI,YAE9C;AAIM,mCAA+B,CAAC,MAAM,EAAE,MAAM,CAAC,UAWrD;AAGM,mCAAgC,MAAM,GAAG,SAAS,UAGxD;AAEM,kCAA+B,MAAM,UAE3C;AA2BM,6CAAwC,MAAM;mBAK9B,IAAI;2BACL,MAAM;EAkC3B"}
+{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../src/utils/dates.js"],"names":[],"mappings":"AAGO,+BAA6B,MAAM,yBAGzC;AAMM,4CAAyC,IAAI,UAQnD;AAIM,uCAAoC,IAAI,YAE9C;AAIM,mCAA+B,CAAC,MAAM,EAAE,MAAM,CAAC,UAWrD;AAGM,mCAAgC,MAAM,GAAG,SAAS,UAGxD;AAEM,kCAA+B,MAAM,UAE3C;AA2BM,6CAAwC,MAAM;mBAK9B,IAAI;2BACL,MAAM;EAkC3B"}