@koumoul/vjsf 3.15.8 → 3.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.15.8",
+  "version": "3.16.0",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest run",
@@ -68,11 +68,11 @@
   },
   "peerDependencies": {
     "vue": "^3.4.3",
-    "vuetify": "^3.6.13"
+    "vuetify": "^3.8.12"
   },
   "dependencies": {
-    "@json-layout/core": "~1.10.10",
-    "@json-layout/vocabulary": "~2.3.3",
+    "@json-layout/core": "~1.11.0",
+    "@json-layout/vocabulary": "~2.4.0",
     "@vueuse/core": "^12.5.0",
     "debug": "^4.3.4"
   },

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

@@ -7,10 +7,12 @@ 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'
+import useCompDefaults from '../../composables/use-comp-defaults.js'
 
 const debug = Debug('vjsf:date-picker')
 
 useDefaults({}, 'VjsfDatePicker')
+const datePickerDefaults = useCompDefaults('VDatePicker', { hideHeader: true })
 
 const props = defineProps({
   modelValue: {
@@ -44,7 +46,7 @@ const updateValue = (/** @type {Date | null} */value) => {
 
 const datePickerProps = computed(() => {
   /** @type Record<String, any> */
-  const datePickerProps = { ...compProps.value }
+  const datePickerProps = { ...datePickerDefaults.value, ...compProps.value }
   datePickerProps.hideActions = true
   if (localData.value) datePickerProps.modelValue = new Date(/** @type {string} */(localData.value))
   datePickerProps['onUpdate:modelValue'] = (/** @type {Date} */value) => {

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

@@ -1,7 +1,7 @@
 <script setup>
 import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VDatePicker } from 'vuetify/components/VDatePicker'
-import { VTimePicker } from 'vuetify/labs/VTimePicker'
+import { VTimePicker } from 'vuetify/components/VTimePicker'
 import { VDefaultsProvider } from 'vuetify/components/VDefaultsProvider'
 import { VTabs, VTab, VTabsWindow, VTabsWindowItem } from 'vuetify/components/VTabs'
 import { VIcon } from 'vuetify/components/VIcon'
@@ -13,7 +13,8 @@ import useNode from '../../composables/use-node.js'
 import useCompDefaults from '../../composables/use-comp-defaults.js'
 
 useDefaults({}, 'VjsfDatePicker')
-const timePickerDefaults = useCompDefaults('VTimePicker')
+const datePickerDefaults = useCompDefaults('VDatePicker', { hideHeader: true })
+const timePickerDefaults = useCompDefaults('VTimePicker', { title: '' })
 
 const props = defineProps({
   modelValue: {
@@ -37,7 +38,7 @@ watch(menuOpened, () => { tab.value = 'date' })
 const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
 
 const datePickerProps = computed(() => {
-  const datePickerProps = { ...compProps.value }
+  const datePickerProps = { ...datePickerDefaults.value, ...compProps.value }
   datePickerProps.hideActions = true
   if (localData.value) datePickerProps.modelValue = new Date(localData.value)
   datePickerProps['onUpdate:modelValue'] = (/** @type {Date} */value) => {

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

@@ -1,6 +1,6 @@
 <script>
-import { defineComponent, h, computed, toRef } from 'vue'
-import { VTextField } from 'vuetify/components/VTextField'
+import { defineComponent, h, computed, toRef, watch } from 'vue'
+import { VNumberInput } from 'vuetify/components/VNumberInput'
 import useNode from '../../composables/use-node.js'
 import { useDefaults } from 'vuetify'
 
@@ -21,18 +21,19 @@ export default defineComponent({
     useDefaults({}, 'VjsfNumberField')
 
     const { inputProps, localData, compSlots } = useNode(
-      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['step', 'min', 'max', 'placeholder'], bindData: false }
+      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['step', 'min', 'max', 'precision', 'placeholder'] }
     )
 
+    watch(localData, () => console.log('data', localData))
+
     const fullProps = computed(() => {
       const fullProps = { ...inputProps.value }
-      fullProps.type = 'number'
-      fullProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, value ? Number(value) : undefined)
       fullProps.modelValue = localData.value
+      console.log('FULL PROPS', fullProps)
       return fullProps
     })
 
-    return () => h(VTextField, fullProps.value, compSlots.value)
+    return () => h(VNumberInput, fullProps.value, compSlots.value)
   }
 })
 

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

@@ -1,8 +1,9 @@
 <script setup>
 import TextFieldMenu from '../fragments/text-field-menu.vue'
-import { VTimePicker } from 'vuetify/labs/VTimePicker'
+import { VTimePicker } from 'vuetify/components/VTimePicker'
 import { VIcon } from 'vuetify/components/VIcon'
 import { VDefaultsProvider } from 'vuetify/components/VDefaultsProvider'
+import { VSheet } from 'vuetify/components/VSheet'
 import { useDate, useDefaults } from 'vuetify'
 import { computed, toRef } from 'vue'
 import { getShortTime, getLongTime } from '../../utils/dates.js'
@@ -10,7 +11,7 @@ import useNode from '../../composables/use-node.js'
 import useCompDefaults from '../../composables/use-comp-defaults.js'
 
 useDefaults({}, 'VjsfTimePicker')
-const timePickerDefaults = useCompDefaults('VTimePicker')
+const timePickerDefaults = useCompDefaults('VTimePicker', { title: '' })
 
 const props = defineProps({
   modelValue: {
@@ -46,11 +47,13 @@ const timePickerProps = computed(() => {
     <template #prepend-inner>
       <v-icon :icon="statefulLayout.options.icons.clock" />
     </template>
-    <v-defaults-provider :defaults="{global: { density: 'default' }}">
-      <v-time-picker
-        v-bind="timePickerProps"
-        @update:model-value="value => {statefulLayout.input(props.modelValue, value && getLongTime(value))}"
-      />
-    </v-defaults-provider>
+    <v-sheet style="width: 328px">
+      <v-defaults-provider :defaults="{global: { density: 'default' }}">
+        <v-time-picker
+          v-bind="timePickerProps"
+          @update:model-value="value => {statefulLayout.input(props.modelValue, value && getLongTime(value))}"
+        />
+      </v-defaults-provider>
+    </v-sheet>
   </text-field-menu>
 </template>