@koumoul/vjsf 3.0.0-beta.5 → 3.0.0-beta.51

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

@@ -1,9 +1,12 @@
 <script setup>
 import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VDatePicker } from 'vuetify/components/VDatePicker'
-import { useDate } from 'vuetify'
-import { computed } from 'vue'
-import { getCompProps, getDateTimeParts } from '../../utils/index.js'
+import { useDate, useDefaults } from 'vuetify'
+import { computed, ref, toRef } from 'vue'
+import { getDateTimeParts, getDateTimeWithOffset } from '../../utils/dates.js'
+import useNode from '../../composables/use-node.js'
+
+useDefaults({}, 'VjsfDatePicker')
 
 const props = defineProps({
   modelValue: {
@@ -20,25 +23,39 @@ const props = defineProps({
 
 const vDate = useDate()
 
+const menuOpened = ref(false)
+
+const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
 const datePickerProps = computed(() => {
-  const datePickerProps = getCompProps(props.modelValue, 'datePicker', true)
+  const datePickerProps = { ...compProps.value }
   datePickerProps.hideActions = true
-  if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
+  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
+  }
   return datePickerProps
 })
+
+const formattedValue = computed(() => {
+  return localData.value ? vDate.format(/** @type {string} */(localData.value), 'fullDateWithWeekday') : null
+})
+
 </script>
 
 <template>
   <text-field-menu
-    :model-value="modelValue"
+    v-model:menu-opened="menuOpened"
+    :model-value="props.modelValue"
     :stateful-layout="statefulLayout"
-    :formatted-value="modelValue.data && vDate.format(modelValue.data, 'fullDateWithWeekday')"
+    :formatted-value="formattedValue"
   >
-    <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,8 +1,20 @@
 <script setup>
+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, toRef } from 'vue'
+import { getDateTimeParts, getDateTimeWithOffset, getShortTime } from '../../utils/dates.js'
+import useNode from '../../composables/use-node.js'
 
-defineProps({
+useDefaults({}, 'VjsfDatePicker')
+
+const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfDateTimePickerNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfDatePickerNode> */
     type: Object,
     required: true
   },
@@ -13,8 +25,76 @@ defineProps({
   }
 })
 
+const vDate = useDate()
+
+const tab = ref('date')
+const menuOpened = ref(false)
+watch(menuOpened, () => { tab.value = 'date' })
+
+const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
+const datePickerProps = computed(() => {
+  const datePickerProps = { ...compProps.value }
+  datePickerProps.hideActions = true
+  if (localData.value) datePickerProps.modelValue = new Date(localData.value)
+  datePickerProps['onUpdate:modelValue'] = (/** @type {Date} */value) => {
+    if (!value) return
+
+    if (localData.value) {
+      // replace date part of current value
+      const datePart = value && getDateTimeParts(/** @type Date */(/** @type unknown */(value)))[0]
+      props.statefulLayout.input(props.modelValue, datePart + localData.value.slice(10))
+    } else {
+      props.statefulLayout.input(props.modelValue, getDateTimeWithOffset(value))
+    }
+    tab.value = 'time'
+  }
+  return datePickerProps
+})
+
+const timePickerProps = computed(() => {
+  const timePickerProps = { ...compProps.value }
+  timePickerProps['ampm-in-title'] = true
+  if (localData.value) timePickerProps.modelValue = getShortTime(localData.value.slice(11))
+  timePickerProps['onUpdate:modelValue'] = (/** @type {string} */value) => {
+    if (!localData.value) return
+    console.log('set time', value, localData.value.slice(0, 10), localData.value.slice(15))
+    props.statefulLayout.input(props.modelValue, localData.value.slice(0, 11) + value + localData.value.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 :icon="statefulLayout.options.icons.calendar" />
+        </v-tab>
+        <v-tab
+          value="time"
+          :disabled="!modelValue.data"
+        >
+          <v-icon :icon="statefulLayout.options.icons.clock" />
+        </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/expansion-panels.vue

@@ -1,10 +1,18 @@
 <script setup>
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer, VRow, VIcon } from 'vuetify/components'
+import { toRef } from 'vue'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText } from 'vuetify/components/VExpansionPanel'
+import { VContainer, VRow } from 'vuetify/components/VGrid'
+import { VIcon } from 'vuetify/components/VIcon'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import ChildSubtitle from '../fragments/child-subtitle.vue'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
 
-defineProps({
+useDefaults({}, 'VjsfExpansionPanels')
+
+const props = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../../types.js').VjsfExpansionPanelsNode> */
     type: Object,
@@ -17,11 +25,13 @@ defineProps({
   }
 })
 
+const { compProps } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
 </script>
 
 <template>
   <section-header :node="modelValue" />
-  <v-expansion-panels>
+  <v-expansion-panels v-bind="compProps">
     <v-expansion-panel
       v-for="(child, i) of modelValue.children"
       :key="child.key"
@@ -32,21 +42,29 @@ defineProps({
           v-if="child.validated && (child.error || child.childError)"
           color="error"
           class="mr-2"
-        >
-          mdi-alert
-        </v-icon>
+          :icon="statefulLayout.options.icons.alert"
+        />
         {{ child.layout.title ?? child.layout.label }}
       </v-expansion-panel-title>
-      <v-container fluid>
-        <v-row>
-          <node
-            v-for="grandChild of isSection(child) ? child.children : [child]"
-            :key="grandChild.fullKey"
-            :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
-            :stateful-layout="statefulLayout"
-          />
-        </v-row>
-      </v-container>
+      <v-expansion-panel-text>
+        <v-container fluid>
+          <child-subtitle :model-value="child" />
+          <v-row :dense="modelValue.options?.density === 'compact' || modelValue.options?.density === 'comfortable'">
+            <node
+              v-for="grandChild of isSection(child) ? child.children : [child]"
+              :key="grandChild.fullKey"
+              :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
+              :stateful-layout="statefulLayout"
+            />
+          </v-row>
+        </v-container>
+      </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
 </template>
+
+<style>
+.vjsf-node-expansion-panels .v-expansion-panel-text__wrapper {
+  padding: 0;
+}
+</style>

package/src/components/nodes/file-input.vue

@@ -1,7 +1,8 @@
 <script>
-import { defineComponent, h, computed } from 'vue'
-import { VFileInput } from 'vuetify/components'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { defineComponent, h, computed, toRef } from 'vue'
+import { VFileInput } from 'vuetify/components/VFileInput'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
@@ -17,20 +18,23 @@ export default defineComponent({
     }
   },
   setup (props) {
+    useDefaults({}, 'VjsfFileInput')
+
+    const { inputProps, localData, compSlots } = useNode(
+      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['placeholder', 'accept', 'multiple'] }
+    )
+
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['placeholder', 'accept'])
-      if (props.modelValue.layout.multiple) {
-        fieldProps.multiple = true
-      } else {
-        fieldProps.modelValue = props.modelValue.data ? [props.modelValue.data] : props.modelValue.data
-        fieldProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, Array.isArray(value) ? value[0] : value)
+      const fieldProps = { ...inputProps.value }
+      if (fieldProps.multiple) console.error('File input doesn\'t support multiple inputs yet')
+      fieldProps['onUpdate:modelValue'] = (/** @type {File} */value) => {
+        props.statefulLayout.input(props.modelValue, value)
       }
       return fieldProps
     })
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 
     // @ts-ignore
-    return () => h(VFileInput, fieldProps.value, fieldSlots.value)
+    return () => h(VFileInput, { ...fieldProps.value, modelValue: localData.value }, compSlots.value)
   }
 })