@koumoul/vjsf 3.0.0-beta.9 → 3.0.1

package/src/components/node.vue

@@ -1,10 +1,13 @@
 <script setup>
 import { computed } from 'vue'
-import { useTheme } from 'vuetify'
-import { VCol } from 'vuetify/components'
+import { useTheme, useDefaults } from 'vuetify'
+import { VCol } from 'vuetify/components/VGrid'
+import { VDefaultsProvider } from 'vuetify/components/VDefaultsProvider'
 import NodeSlot from './fragments/node-slot.vue'
 import HelpMessage from './fragments/help-message.vue'
 
+useDefaults({}, 'VjsfNode')
+
 const props = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../types.js').VjsfNode> */
@@ -27,11 +30,23 @@ const beforeAfterClasses = {
 
 const theme = useTheme()
 
+const indent = computed(() => {
+  if (props.modelValue.parentFullKey === null) return 0
+  if (!props.modelValue.options.indent) return 0
+  if (props.modelValue.layout.comp !== 'section') return 0
+  if (!props.modelValue.layout.title) return 0
+  if (typeof props.modelValue.options.indent === 'number') return props.modelValue.options.indent
+  if (props.modelValue.options.density === 'compact') return 2
+  if (props.modelValue.options.density === 'comfortable') return 4
+  return 6
+})
+
 const nodeClasses = computed(() => {
   let classes = `vjsf-node vjsf-node-${props.modelValue.layout.comp} vjsf-density-${props.modelValue.options.density}`
   if (props.modelValue.options.readOnly) classes += ' vjsf-readonly'
   if (props.modelValue.options.summary) classes += ' vjsf-summary'
   if (theme.current.value.dark) classes += ' vjsf-dark'
+  if (indent.value) classes += ' ml-' + indent.value
   return classes
 })
 
@@ -42,45 +57,47 @@ if (props.modelValue.layout.comp !== 'none' && !props.statefulLayout.options.nod
 </script>
 
 <template>
-  <v-col
-    :cols="modelValue.cols"
-    :class="nodeClasses"
-  >
-    <node-slot
-      v-if="modelValue.layout.slots?.before"
-      key="before"
-      :layout-slot="modelValue.layout.slots?.before"
-      :node="modelValue"
-      :stateful-layout="statefulLayout"
-      :class="beforeAfterClasses[modelValue.options.density]"
-    />
+  <v-defaults-provider :defaults="{global: { density: props.modelValue.options.density }}">
+    <v-col
+      v-if="modelValue.layout.comp !== 'none'"
+      :cols="modelValue.cols"
+      :class="nodeClasses"
+    >
+      <node-slot
+        v-if="modelValue.layout.slots?.before"
+        key="before"
+        :layout-slot="modelValue.layout.slots?.before"
+        :node="modelValue"
+        :stateful-layout="statefulLayout"
+        :class="beforeAfterClasses[modelValue.options.density]"
+      />
 
-    <help-message
-      v-if="modelValue.layout.help"
-      :node="modelValue"
-      :class="beforeAfterClasses[modelValue.options.density]"
-    />
-    <node-slot
-      v-if="modelValue.layout.slots?.component"
-      key="component"
-      :layout-slot="modelValue.layout.slots?.component"
-      :node="modelValue"
-      :stateful-layout="statefulLayout"
-    />
-    <component
-      :is="props.statefulLayout.options.nodeComponents[modelValue.layout.comp]"
-      v-else-if="modelValue.layout.comp !== 'none' "
-      :model-value="modelValue"
-      :stateful-layout="statefulLayout"
-    />
+      <help-message
+        v-if="modelValue.layout.help && !modelValue.options.summary"
+        :node="modelValue"
+      />
+      <node-slot
+        v-if="modelValue.layout.slots?.component"
+        key="component"
+        :layout-slot="modelValue.layout.slots?.component"
+        :node="modelValue"
+        :stateful-layout="statefulLayout"
+      />
+      <component
+        :is="props.statefulLayout.options.nodeComponents[modelValue.layout.comp]"
+        v-else
+        :model-value="modelValue"
+        :stateful-layout="statefulLayout"
+      />
 
-    <node-slot
-      v-if="modelValue.layout.slots?.after"
-      key="after"
-      :layout-slot="modelValue.layout.slots?.after"
-      :node="modelValue"
-      :stateful-layout="statefulLayout"
-      :class="beforeAfterClasses[modelValue.options.density]"
-    />
-  </v-col>
+      <node-slot
+        v-if="modelValue.layout.slots?.after"
+        key="after"
+        :layout-slot="modelValue.layout.slots?.after"
+        :node="modelValue"
+        :stateful-layout="statefulLayout"
+        :class="beforeAfterClasses[modelValue.options.density]"
+      />
+    </v-col>
+  </v-defaults-provider>
 </template>

package/src/components/nodes/autocomplete.vue

@@ -1,9 +1,8 @@
 <script>
-import { VAutocomplete } from 'vuetify/components'
-import { defineComponent, computed, ref, shallowRef, h } from 'vue'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
-import SelectItem from '../fragments/select-item.vue'
-import SelectSelection from '../fragments/select-selection.vue'
+import { VAutocomplete } from 'vuetify/components/VAutocomplete'
+import { useDefaults } from 'vuetify'
+import { defineComponent, computed, h, toRef } from 'vue'
+import useSelectNode from '../../composables/use-select-node.js'
 
 export default defineComponent({
   props: {
@@ -13,75 +12,30 @@ export default defineComponent({
       required: true
     },
     statefulLayout: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
       type: Object,
       required: true
     }
   },
   setup (props) {
-    /** @type import('vue').ShallowRef<import('@json-layout/vocabulary').SelectItems> */
-    const items = shallowRef([])
-    /** @type import('vue').Ref<boolean> */
-    const loading = ref(false)
-    /** @type import('vue').Ref<string> */
-    const search = ref('')
+    useDefaults({}, 'VjsfAutocomplete')
+
+    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout)
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
-      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
+      const fieldProps = { ...selectProps.value }
       fieldProps.noFilter = true
       fieldProps['onUpdate:search'] = (/** @type string */searchValue) => {
-        search.value = searchValue
-        refresh()
+        getItems.search.value = searchValue
       }
-      fieldProps['onUpdate:menu'] = refresh
-      fieldProps.items = items.value
-      fieldProps.loading = loading.value
+      fieldProps.items = getItems.items.value
+      fieldProps.loading = getItems.loading.value
+      fieldProps.modelValue = localData.value
       return fieldProps
     })
 
-    /** @type import('@json-layout/core').StateTree | null */
-    let lastStateTree = null
-    /** @type Record<string, any> | null */
-    let lastContext = null
-    /** @type string */
-    let lastSearch = ''
-
-    const refresh = async () => {
-      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext && search.value === lastSearch) return
-      loading.value = true
-      items.value = await props.statefulLayout.getItems(props.modelValue, search.value)
-      lastStateTree = props.statefulLayout.stateTree
-      lastContext = props.statefulLayout.options.context ?? null
-      lastSearch = search.value
-      loading.value = false
-    }
-
-    if (!props.modelValue.layout.items) {
-      refresh()
-    }
-
-    const fieldSlots = computed(() => {
-      const slots = getCompSlots(props.modelValue, props.statefulLayout)
-      if (!slots.item) {
-        slots.item = (/** @type {any} */ context) => h(SelectItem, {
-          multiple: props.modelValue.layout.multiple,
-          itemProps: context.props,
-          item: context.item.raw
-        })
-      }
-      if (!slots.selection) {
-        slots.selection = (/** @type {any} */ context) => h(SelectSelection, {
-          multiple: props.modelValue.layout.multiple,
-          last: props.modelValue.layout.multiple && context.index === props.modelValue.data.length - 1,
-          item: context.item.raw
-        })
-      }
-      return slots
-    })
-
     // @ts-ignore
-    return () => h(VAutocomplete, fieldProps.value, fieldSlots.value)
+    return () => h(VAutocomplete, fieldProps.value, selectSlots.value)
   }
 })
 

package/src/components/nodes/card.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { VCard } from 'vuetify/components/VCard'
+import { VContainer, VRow } from 'vuetify/components/VGrid'
+import Node from '../node.vue'
+import SectionHeader from '../fragments/section-header.vue'
+import { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfCard')
+
+defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfCardNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <v-card :title="modelValue.layout.title ?? ''">
+    <v-container fluid>
+      <section-header :node="modelValue" hide-title />
+      <v-row :dense="modelValue.options?.density === 'compact' || modelValue.options?.density === 'comfortable'">
+        <node
+          v-for="child of modelValue.children"
+          :key="child.fullKey"
+          :model-value="/** @type import('../../types.js').VjsfNode */(child)"
+          :stateful-layout="statefulLayout"
+        />
+      </v-row>
+    </v-container>
+  </v-card>
+</template>

package/src/components/nodes/checkbox-group.vue

@@ -0,0 +1,39 @@
+<script>
+import { useDefaults } from 'vuetify'
+import SelectionGroup from '../fragments/selection-group.vue'
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    useDefaults({}, 'VjsfCheckboxGroup')
+
+    // @ts-ignore
+    return () => {
+      return h(SelectionGroup, {
+        modelValue: props.modelValue,
+        statefulLayout: props.statefulLayout,
+        type: 'checkbox'
+      })
+    }
+  }
+})
+
+</script>
+
+<style>
+.vjsf-node-checkbox-group .v-selection-control-group .v-checkbox .v-selection-control {
+  min-height: auto;
+}
+</style>

package/src/components/nodes/checkbox.vue

@@ -1,32 +1,37 @@
-<script setup>
-import { VCheckbox } from 'vuetify/components'
-import { computed } from 'vue'
-import { getInputProps } from '../../utils/index.js'
+<script>
+import { defineComponent, h, computed, toRef } from 'vue'
+import { VCheckbox } from 'vuetify/components/VCheckbox'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
 
-const props = defineProps({
-  modelValue: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxNode> */
-    type: Object,
-    required: true
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
   },
-  statefulLayout: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
-    type: Object,
-    required: true
+  setup (props) {
+    useDefaults({}, 'VjsfCheckbox')
+
+    const { inputProps, localData, compSlots } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
+    const fullProps = computed(() => {
+      const fullProps = { ...inputProps.value }
+      // it is not very common to show an error below checkboxes and switches and without hide-details=auto they take a lot of space
+      if (!('hideDetails' in inputProps)) fullProps.hideDetails = 'auto'
+      fullProps.modelValue = localData.value
+      return fullProps
+    })
+
+    return () => h(VCheckbox, fullProps.value, compSlots.value)
   }
 })
 
-const fieldProps = computed(() => {
-  const inputProps = getInputProps(props.modelValue, props.statefulLayout)
-  // it is not very common to show an error below checkboxes and switches and without hide-details=auto they take a lot of space
-  if (!('hideDetails' in inputProps)) inputProps.hideDetails = 'auto'
-  return inputProps
-})
 </script>
-
-<template>
-  <v-checkbox
-    v-bind="fieldProps"
-    @update:model-value="value => statefulLayout.input(modelValue, value)"
-  />
-</template>

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

@@ -1,8 +1,11 @@
 <script setup>
 import TextFieldMenu from '../fragments/text-field-menu.vue'
-import { VColorPicker } from 'vuetify/components'
-import { computed } from 'vue'
-import { getCompProps } from '../../utils/index.js'
+import { VColorPicker } from 'vuetify/components/VColorPicker'
+import { computed, toRef } from 'vue'
+import useNode from '../../composables/use-node.js'
+import { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfColorPicker')
 
 const props = defineProps({
   modelValue: {
@@ -17,9 +20,11 @@ const props = defineProps({
   }
 })
 
+const { compProps, localData } = useNode(toRef(props, 'modelValue'), props.statefulLayout)
+
 const colorPickerProps = computed(() => {
-  const colorPickerProps = getCompProps(props.modelValue, true)
-  colorPickerProps.modelValue = props.modelValue.data
+  const colorPickerProps = { ...compProps.value }
+  colorPickerProps.modelValue = localData.value
   return colorPickerProps
 })
 </script>

package/src/components/nodes/combobox.vue

@@ -1,7 +1,9 @@
 <script>
-import { defineComponent, h, computed, shallowRef, ref } from 'vue'
-import { VCombobox } from 'vuetify/components'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { defineComponent, h, computed, toRef } from 'vue'
+import { VCombobox } from 'vuetify/components/VCombobox'
+import useNode from '../../composables/use-node.js'
+import useGetItems from '../../composables/use-get-items.js'
+import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
@@ -17,55 +19,30 @@ export default defineComponent({
     }
   },
   setup (props) {
-    /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
-    const items = shallowRef(props.modelValue.layout.items ?? [])
-    /** @type import('vue').Ref<boolean> */
-    const loading = ref(false)
+    useDefaults({}, 'VjsfCombobox')
 
-    /** @type import('@json-layout/core').StateTree | null */
-    let lastStateTree = null
-    /** @type Record<string, any> | null */
-    let lastContext = null
-
-    const hasItems = computed(() => {
-      return !!(props.modelValue.layout.items || props.modelValue.layout.getItems)
-    })
-
-    const refresh = async () => {
-      if (props.modelValue.layout.items) return
-      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
-      lastStateTree = props.statefulLayout.stateTree
-      lastContext = props.statefulLayout.options.context ?? null
-      if (hasItems.value) {
-        loading.value = true
-        items.value = await props.statefulLayout.getItems(props.modelValue)
-        loading.value = false
-      }
-    }
-
-    if (!props.modelValue.layout.items) {
-      refresh()
-    }
+    const nodeRef = toRef(props, 'modelValue')
+    const getItems = useGetItems(nodeRef, props.statefulLayout)
+    const { inputProps, compSlots, localData, layout, options } = useNode(nodeRef, props.statefulLayout)
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
-      fieldProps.loading = loading.value
+      const fieldProps = { ...inputProps.value }
       fieldProps.returnObject = false
-      if (hasItems.value) fieldProps.items = items.value
-      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
-      if (props.modelValue.layout.multiple) {
+      if (options.value.readOnly) fieldProps.menuProps = { modelValue: false }
+      if (getItems.hasItems.value) {
+        fieldProps.items = getItems.items.value
+        fieldProps.loading = getItems.loading.value
+      }
+      if (layout.value.multiple) {
         fieldProps.multiple = true
         fieldProps.chips = true
         fieldProps.closableChips = true
       }
-      fieldProps['onUpdate:menu'] = () => refresh()
       return fieldProps
     })
 
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
-
     // @ts-ignore
-    return () => h(VCombobox, fieldProps.value, fieldSlots.value)
+    return () => h(VCombobox, { ...fieldProps.value, modelValue: localData.value }, compSlots.value)
   }
 })
 

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

@@ -1,9 +1,13 @@
 <script setup>
 import TextFieldMenu from '../fragments/text-field-menu.vue'
+import { VIcon } from 'vuetify/components/VIcon'
 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 +24,42 @@ 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, 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 #prepend-inner>
+      <v-icon :icon="statefulLayout.options.icons.calendar" />
     </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,79 @@ 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')"
+  >
+    <template #prepend-inner>
+      <v-icon :icon="statefulLayout.options.icons.calendar" />
+    </template>
+    <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>