@koumoul/vjsf 3.0.0-beta.37 → 3.0.0-beta.38

package/package.json

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

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

@@ -40,7 +40,7 @@ const menuProps = computed(() => {
 })
 
 const textField = ref(null)
-const menuOpened = ref(false)
+const menuOpened = defineModel('menuOpened', { type: Boolean, default: false })
 
 </script>
 

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

@@ -2,8 +2,8 @@
 import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VDatePicker } from 'vuetify/components/VDatePicker'
 import { useDate, useDefaults } from 'vuetify'
-import { computed } from 'vue'
-import { getCompProps, getDateTimeParts } from '../../utils/index.js'
+import { computed, ref } from 'vue'
+import { getCompProps, getDateTimeParts, getDateTimeWithOffset } from '../../utils/index.js'
 
 useDefaults({}, 'VjsfDatePicker')
 
@@ -22,25 +22,32 @@ const props = defineProps({
 
 const vDate = useDate()
 
+const menuOpened = ref(false)
+
 const datePickerProps = computed(() => {
   const datePickerProps = getCompProps(props.modelValue, true)
   datePickerProps.hideActions = true
   if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
+  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
+  }
   return datePickerProps
 })
 </script>
 
 <template>
   <text-field-menu
+    v-model:menu-opened="menuOpened"
     :model-value="modelValue"
     :stateful-layout="statefulLayout"
     :formatted-value="modelValue.data && vDate.format(modelValue.data, 'fullDateWithWeekday')"
   >
-    <template #default="{close}">
-      <v-date-picker
-        v-bind="datePickerProps"
-        @update:model-value="value => {statefulLayout.input(modelValue, value && getDateTimeParts(/** @type Date */(/** @type unknown */(value)))[0]); close()}"
-      />
-    </template>
+    <v-date-picker v-bind="datePickerProps" />
   </text-field-menu>
 </template>

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

@@ -1,11 +1,19 @@
 <script setup>
-import { useDefaults } from 'vuetify'
+import TextFieldMenu from '../fragments/text-field-menu.vue'
+import { VDatePicker } from 'vuetify/components/VDatePicker'
+import { VTimePicker } from 'vuetify/labs/VTimePicker'
+import { VTabs, VTab, VTabsWindow, VTabsWindowItem } from 'vuetify/components/VTabs'
+import { VIcon } from 'vuetify/components/VIcon'
+import { VSheet } from 'vuetify/components/VSheet'
+import { useDate, useDefaults } from 'vuetify'
+import { computed, ref, watch } from 'vue'
+import { getCompProps, getDateTimeParts, getLongTime, getDateTimeWithOffset, getShortTime } from '../../utils/index.js'
 
-useDefaults({}, 'VjsfDateTimePicker')
+useDefaults({}, 'VjsfDatePicker')
 
-defineProps({
+const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfDateTimePickerNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfDatePickerNode> */
     type: Object,
     required: true
   },
@@ -16,8 +24,74 @@ defineProps({
   }
 })
 
+const vDate = useDate()
+
+const tab = ref('date')
+const menuOpened = ref(false)
+watch(menuOpened, () => { tab.value = 'date' })
+
+const datePickerProps = computed(() => {
+  const datePickerProps = getCompProps(props.modelValue, false)
+  datePickerProps.hideActions = true
+  if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
+  datePickerProps['onUpdate:modelValue'] = (/** @type {Date} */value) => {
+    if (!value) return
+
+    if (props.modelValue.data) {
+      // replace date part of current value
+      const datePart = value && getDateTimeParts(/** @type Date */(/** @type unknown */(value)))[0]
+      props.statefulLayout.input(props.modelValue, datePart + props.modelValue.data.slice(10))
+    } else {
+      props.statefulLayout.input(props.modelValue, getDateTimeWithOffset(value))
+    }
+    tab.value = 'time'
+  }
+  return datePickerProps
+})
+
+const timePickerProps = computed(() => {
+  const timePickerProps = getCompProps(props.modelValue, false)
+  timePickerProps['ampm-in-title'] = true
+  if (props.modelValue.data) timePickerProps.modelValue = getShortTime(props.modelValue.data.slice(11))
+  timePickerProps['onUpdate:modelValue'] = (/** @type {string} */value) => {
+    if (!props.modelValue.data) return
+    console.log('set time', value, props.modelValue.data.slice(0, 10), props.modelValue.data.slice(15))
+    props.statefulLayout.input(props.modelValue, props.modelValue.data.slice(0, 11) + value + props.modelValue.data.slice(16))
+  }
+  return timePickerProps
+})
 </script>
 
 <template>
-  TODO date-time
+  <text-field-menu
+    v-model:menu-opened="menuOpened"
+    :model-value="modelValue"
+    :stateful-layout="statefulLayout"
+    :formatted-value="modelValue.data && vDate.format(modelValue.data, 'fullDateTime')"
+  >
+    <v-sheet style="width: 328px">
+      <v-tabs
+        v-model="tab"
+        align-tabs="center"
+      >
+        <v-tab value="date">
+          <v-icon>mdi-calendar</v-icon>
+        </v-tab>
+        <v-tab
+          value="time"
+          :disabled="!modelValue.data"
+        >
+          <v-icon>mdi-clock</v-icon>
+        </v-tab>
+      </v-tabs>
+      <v-tabs-window v-model="tab">
+        <v-tabs-window-item value="date">
+          <v-date-picker v-bind="datePickerProps" />
+        </v-tabs-window-item>
+        <v-tabs-window-item value="time">
+          <v-time-picker v-bind="timePickerProps" />
+        </v-tabs-window-item>
+      </v-tabs-window>
+    </v-sheet>
+  </text-field-menu>
 </template>

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

@@ -1,7 +1,44 @@
 <script setup>
+import TextFieldMenu from '../fragments/text-field-menu.vue'
+import { VTimePicker } from 'vuetify/labs/VTimePicker'
+import { useDate, useDefaults } from 'vuetify'
+import { computed } from 'vue'
+import { getCompProps, getShortTime, getLongTime } from '../../utils/index.js'
 
+useDefaults({}, 'VjsfDatePicker')
+
+const props = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfDatePickerNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const vDate = useDate()
+
+const timePickerProps = computed(() => {
+  const timePickerProps = getCompProps(props.modelValue, true)
+  timePickerProps['ampm-in-title'] = true
+  if (props.modelValue.data) timePickerProps.modelValue = getShortTime(props.modelValue.data)
+  return timePickerProps
+})
 </script>
 
 <template>
-  TODO time
+  <text-field-menu
+    :model-value="modelValue"
+    :stateful-layout="statefulLayout"
+    :formatted-value="timePickerProps.modelValue && vDate.format('2010-04-13T' + timePickerProps.modelValue, 'fullTime')"
+  >
+    <v-time-picker
+      v-bind="timePickerProps"
+      @update:model-value="value => {statefulLayout.input(modelValue, value && getLongTime(value))}"
+    />
+  </text-field-menu>
 </template>

package/src/components/vjsf.vue

@@ -14,6 +14,7 @@ import NodeSwitch from './nodes/switch.vue'
 import NodeNumberField from './nodes/number-field.vue'
 import NodeSlider from './nodes/slider.vue'
 import NodeDatePicker from './nodes/date-picker.vue'
+import NodeTimePicker from './nodes/time-picker.vue'
 import NodeDateTimePicker from './nodes/date-time-picker.vue'
 import NodeColorPicker from './nodes/color-picker.vue'
 import NodeSelect from './nodes/select.vue'
@@ -42,6 +43,7 @@ const nodeComponents = {
   'number-field': NodeNumberField,
   slider: NodeSlider,
   'date-picker': NodeDatePicker,
+  'time-picker': NodeTimePicker,
   'date-time-picker': NodeDateTimePicker,
   'color-picker': NodeColorPicker,
   select: NodeSelect,

package/types/components/fragments/select-item.vue.d.ts

@@ -1,11 +1,11 @@
 declare const _default: import("vue").DefineComponent<{}, {
     multiple: boolean;
-    item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
     itemProps: Record<string, any>;
+    item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
     $props: {
         readonly multiple?: boolean | undefined;
-        readonly item?: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
         readonly itemProps?: Record<string, any> | undefined;
+        readonly item?: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

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

@@ -1,10 +1,10 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
-    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     modelValue: import("../../types.js").VjsfNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     formattedValue: string | null;
     $props: {
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly modelValue?: import("../../types.js").VjsfNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly formattedValue?: string | null | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {

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":";;;;;;;;;;6BAuIsC,GAAG;;;QACX,GAAG"}
+{"version":3,"file":"text-field-menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/text-field-menu.vue.js"],"names":[],"mappings":";;;;;;;;;;6BA0IsC,GAAG;;;QACX,GAAG"}

package/types/components/nodes/checkbox.vue.d.ts

@@ -1,9 +1,9 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     modelValue: import("../../types.js").VjsfCheckboxNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly modelValue?: import("../../types.js").VjsfCheckboxNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/types/components/nodes/color-picker.vue.d.ts

@@ -1,9 +1,9 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     modelValue: import("../../types.js").VjsfColorPickerNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly modelValue?: import("../../types.js").VjsfColorPickerNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/types/components/nodes/date-picker.vue.d.ts

@@ -1,9 +1,9 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     modelValue: import("../../types.js").VjsfDatePickerNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly modelValue?: import("../../types.js").VjsfDatePickerNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/types/components/nodes/date-time-picker.vue.d.ts

@@ -1,8 +1,8 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    modelValue: import("../../types.js").VjsfDateTimePickerNode;
+    modelValue: import("../../types.js").VjsfDatePickerNode;
     statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly modelValue?: import("../../types.js").VjsfDateTimePickerNode | undefined;
+        readonly modelValue?: import("../../types.js").VjsfDatePickerNode | undefined;
         readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

package/types/components/nodes/expansion-panels.vue.d.ts

@@ -1,9 +1,9 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     modelValue: import("../../types.js").VjsfExpansionPanelsNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly modelValue?: import("../../types.js").VjsfExpansionPanelsNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/types/components/nodes/list.vue.d.ts

@@ -1,9 +1,9 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     modelValue: import("../../types.js").VjsfListNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly modelValue?: import("../../types.js").VjsfListNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/types/components/nodes/one-of-select.vue.d.ts

@@ -1,9 +1,9 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     modelValue: import("../../types.js").VjsfOneOfSelectNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly modelValue?: import("../../types.js").VjsfOneOfSelectNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/types/components/nodes/slider.vue.d.ts

@@ -1,9 +1,9 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     modelValue: import("../../types.js").VjsfSliderNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly modelValue?: import("../../types.js").VjsfSliderNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/types/components/nodes/switch.vue.d.ts

@@ -1,9 +1,9 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     modelValue: import("../../types.js").VjsfSwitchNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
     $props: {
-        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
         readonly modelValue?: import("../../types.js").VjsfSwitchNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/types/components/nodes/time-picker.vue.d.ts

@@ -1,3 +1,10 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {
+    modelValue: import("../../types.js").VjsfDatePickerNode;
+    statefulLayout: import("../../types.js").VjsfStatefulLayout;
+    $props: {
+        readonly modelValue?: import("../../types.js").VjsfDatePickerNode | undefined;
+        readonly statefulLayout?: import("../../types.js").VjsfStatefulLayout | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;
 //# sourceMappingURL=time-picker.vue.d.ts.map

package/types/components/vjsf.vue.d.ts

@@ -1,12 +1,12 @@
 declare const _default: import("vue").DefineComponent<{}, {
     $emit: ((event: "update:modelValue", data: any) => void) & ((event: "update:state", state: import("../types.js").VjsfStatefulLayout) => void);
-    options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "onData" | "onUpdate" | "onAutofocus" | "vjsfSlots">> | null;
     modelValue: any;
+    options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "onData" | "onUpdate" | "onAutofocus" | "vjsfSlots">> | null;
     schema: Record<string, any>;
     precompiledLayout: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout;
     $props: {
-        readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "width" | "onData" | "onUpdate" | "onAutofocus" | "vjsfSlots">> | null | undefined;
         readonly modelValue?: any;
+        readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "width" | "onData" | "onUpdate" | "onAutofocus" | "vjsfSlots">> | null | undefined;
         readonly schema?: Record<string, any> | undefined;
         readonly precompiledLayout?: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout | undefined;
     };