@koumoul/vjsf 3.14.0 → 3.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.14.0",
+  "version": "3.15.1",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest run",
@@ -71,7 +71,7 @@
     "vuetify": "^3.6.13"
   },
   "dependencies": {
-    "@json-layout/core": "~1.10.0",
+    "@json-layout/core": "~1.10.1",
     "@json-layout/vocabulary": "~2.3.0",
     "@vueuse/core": "^12.5.0",
     "debug": "^4.3.4"

package/src/components/fragments/text-field-menu.vue

@@ -15,24 +15,32 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  formattedValue: {
+  readonly: {
+    /** @type import('vue').PropType<boolean> */
+    type: Boolean,
+    default: true
+  },
+  placeholder: {
     /** @type import('vue').PropType<string | null> */
     type: String,
     default: null
   }
 })
 
+const emits = defineEmits(['blur'])
+
 const { inputProps, skeleton, compProps, data } = useField(
   toRef(props, 'modelValue'), props.statefulLayout, { isMainComp: false, bindData: false }
 )
 
 const fieldProps = computed(() => {
   const fieldProps = { ...inputProps.value }
-  fieldProps.readonly = true
   fieldProps.clearable = fieldProps.clearable ?? !skeleton.value.required
+  if (props.placeholder) fieldProps.placeholder = props.placeholder
   fieldProps['onClick:clear'] = () => {
     props.statefulLayout.input(props.modelValue, null)
   }
+  fieldProps.readonly = props.readonly
   return fieldProps
 })
 
@@ -47,6 +55,7 @@ const menuProps = computed(() => {
 
 const textField = ref(null)
 const menuOpened = defineModel('menuOpened', { type: Boolean, default: false })
+const formattedValue = defineModel('formattedValue', { type: String, default: null })
 
 </script>
 
@@ -56,6 +65,8 @@ const menuOpened = defineModel('menuOpened', { type: Boolean, default: false })
     v-bind="fieldProps"
     :model-value="formattedValue ?? data"
     @click:control="e => {menuOpened = !menuOpened; e.stopPropagation()}"
+    @update:model-value="v => formattedValue = v"
+    @blur="emits('blur')"
   >
     <template #prepend-inner>
       <slot name="prepend-inner" />

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

@@ -2,11 +2,14 @@
 import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VIcon } from 'vuetify/components/VIcon'
 import { VDatePicker } from 'vuetify/components/VDatePicker'
-import { useDate, useDefaults } from 'vuetify'
-import { computed, ref, toRef } from 'vue'
-import { getDateTimeParts, getDateTimeWithOffset } from '../../utils/dates.js'
+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({
@@ -22,40 +25,60 @@ const props = defineProps({
   }
 })
 
-const vDate = useDate()
-
 const menuOpened = ref(false)
 
 const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
 
+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
+  }
+}
+
 const datePickerProps = computed(() => {
+  /** @type Record<String, any> */
   const datePickerProps = { ...compProps.value }
   datePickerProps.hideActions = true
   if (localData.value) datePickerProps.modelValue = new Date(/** @type {string} */(localData.value))
   datePickerProps['onUpdate:modelValue'] = (/** @type {Date} */value) => {
-    if (!value) return
-    if (props.modelValue.layout.format === 'date-time') {
-      props.statefulLayout.input(props.modelValue, getDateTimeWithOffset(value))
-    } else {
-      props.statefulLayout.input(props.modelValue, getDateTimeParts(/** @type Date */(/** @type unknown */(value)))[0])
-    }
-    menuOpened.value = false
+    updateValue(value)
   }
   return datePickerProps
 })
 
-const formattedValue = computed(() => {
-  return localData.value ? vDate.format(/** @type {string} */(localData.value), 'fullDateWithWeekday') : null
-})
+/** @type {import('vue').Ref<string | null>} */
+const formattedValue = ref('')
+const setFormattedValue = () => {
+  formattedValue.value = localData.value ? localeKeyboardFormat(props.modelValue.options.locale).format(new Date(localData.value)) : null
+}
+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)
+  }
+}
 
 </script>
 
 <template>
   <text-field-menu
     v-model:menu-opened="menuOpened"
+    v-model:formatted-value="formattedValue"
     :model-value="props.modelValue"
     :stateful-layout="statefulLayout"
-    :formatted-value="formattedValue"
+    :readonly="false"
+    :placeholder="props.modelValue.messages.keyboardDate"
+    @blur="updateFormattedValue"
   >
     <template #prepend-inner>
       <v-icon :icon="statefulLayout.options.icons.calendar" />

package/src/components/nodes/number-combobox.vue

@@ -44,7 +44,7 @@ export default defineComponent({
         fieldProps.chips = true
         fieldProps.closableChips = true
       }
-      fieldProps['onUpdate:modelValue'] = (/** @type string[] */value) => props.statefulLayout.input(props.modelValue, value && value.map(Number))
+      fieldProps['onUpdate:modelValue'] = (/** @type string[] */value) => props.statefulLayout.input(props.modelValue, value && (Array.isArray(value) ? value.map(Number) : Number(value)))
       return fieldProps
     })
 

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', '19:07']
+// 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
@@ -50,3 +50,70 @@ export const getShortTime = (/** @type string | undefined */time) => {
 export const getLongTime = (/** @type string */time) => {
   return time + ':00Z'
 }
+
+const applyDateParts = (/** @type {string} */year, /** @type {string} */month, /** @type {string} */day) => {
+  if (!year || !month || !day) return null
+  const y = Number(year)
+  if (isNaN(y)) return null
+  const m = Number(month)
+  if (isNaN(m)) return null
+  if (m < 1 || m > 12) return null
+  const d = Number(day)
+  if (isNaN(d)) return null
+  if (d < 1 || d > 31) return null
+
+  const date = new Date()
+  date.setFullYear(y)
+  date.setMonth(m - 1)
+  date.setDate(d)
+  date.setHours(0)
+  date.setMinutes(0)
+  date.setSeconds(0)
+  date.setMilliseconds(0)
+
+  return isNaN(date.getTime()) ? null : date
+}
+
+/** @type {Record<string, {format: (date: Date) => string, parse: (formateDate: string) => Date | null}>} */
+const localeKeyboardFormats = {}
+export const localeKeyboardFormat = (/** @type string */ locale) => {
+  // cf https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/date/adapters/vuetify.ts#L239
+  const format = new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit' })
+  const parts = format.formatToParts(new Date())
+  const fns = {
+    format: (/** @type Date */ date) => format.format(date),
+    parse: (/** @type string */ formattedDate) => {
+      let remainingStr = formattedDate
+      let year = ''
+      let month = ''
+      let day = ''
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i]
+        if (part.type !== 'literal') {
+          const nextSep = parts[i + 1]
+          if (nextSep && nextSep.type !== 'literal') {
+            console.error('failed to work on keyboard date format', parts)
+            throw new Error('failed to work on keyboard date format')
+          }
+          let matchValue = remainingStr
+          if (nextSep?.type === 'literal') {
+            const nextSepPos = remainingStr.indexOf(nextSep.value)
+            matchValue = remainingStr.substring(0, nextSepPos)
+            remainingStr = remainingStr.substring(nextSepPos + nextSep.value.length)
+          }
+          if (part.type === 'year') year = matchValue
+          if (part.type === 'month') month = matchValue
+          if (part.type === 'day') day = matchValue
+        }
+      }
+      const date = applyDateParts(year, month, day)
+      if (date) return date
+
+      // also try iso format
+      const [y, m, d] = formattedDate.split('-')
+      return applyDateParts(y, m, d)
+    }
+  }
+  if (!localeKeyboardFormats[locale]) localeKeyboardFormats[locale] = fns
+  return fns
+}

package/types/components/fragments/text-field-menu.vue.d.ts

@@ -1,11 +1,14 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
+    $emit: (event: "blur", ...args: any[]) => void;
     modelValue: import("../../types.js").VjsfNode;
+    readonly: boolean;
     statefulLayout: import("../../types.js").VjsfStatefulLayout;
-    formattedValue: string | null;
+    placeholder: string | null;
     $props: {
         readonly modelValue?: import("../../types.js").VjsfNode | undefined;
+        readonly readonly?: boolean | undefined;
         readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
-        readonly formattedValue?: string | null | undefined;
+        readonly placeholder?: string | null | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     "prepend-inner"?(_: {}): any;

package/types/components/fragments/text-field-menu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field-menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/text-field-menu.vue.js"],"names":[],"mappings":";;;;;;;;;;6BAgJsC,GAAG;;;QACX,GAAG"}
+{"version":3,"file":"text-field-menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/text-field-menu.vue.js"],"names":[],"mappings":";;;;;;;;;;;;;6BAiKsC,GAAG;;;QACX,GAAG"}

package/types/utils/dates.d.ts

@@ -1,7 +1,11 @@
-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;
 export function getShortTime(time: string | undefined): string;
 export function getLongTime(time: string): string;
+export function localeKeyboardFormat(locale: string): {
+    format: (date: Date) => string;
+    parse: (formattedDate: string) => Date | null;
+};
 //# sourceMappingURL=dates.d.ts.map

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"}
+{"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"}