@koumoul/vjsf 3.0.0-beta.4 → 3.0.0-beta.40

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,9 @@
 <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 } from 'vue'
+import { getSelectProps, getSelectSlots } from '../../utils/index.js'
+import useGetItems from '../../composables/use-get-items.js'
 
 export default defineComponent({
   props: {
@@ -13,75 +13,29 @@ 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 = useGetItems(props)
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
-      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
+      const fieldProps = getSelectProps(props.modelValue, props.statefulLayout)
       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
       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, getSelectSlots(props.modelValue, props.statefulLayout, getItems))
   }
 })
 

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,7 +1,10 @@
 <script setup>
-import { VCheckbox } from 'vuetify/components'
+import { VCheckbox } from 'vuetify/components/VCheckbox'
 import { computed } from 'vue'
 import { getInputProps } from '../../utils/index.js'
+import { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfCheckbox')
 
 const props = defineProps({
   modelValue: {

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 { VColorPicker } from 'vuetify/components/VColorPicker'
 import { computed } from 'vue'
 import { getCompProps } from '../../utils/index.js'
+import { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfColorPicker')
 
 const props = defineProps({
   modelValue: {
@@ -18,7 +21,8 @@ const props = defineProps({
 })
 
 const colorPickerProps = computed(() => {
-  const colorPickerProps = getCompProps(props.modelValue, 'colorPicker', true)
+  const colorPickerProps = getCompProps(props.modelValue, true)
+  colorPickerProps.modelValue = props.modelValue.data
   return colorPickerProps
 })
 </script>

package/src/components/nodes/combobox.vue

@@ -1,7 +1,8 @@
 <script>
 import { defineComponent, h, computed, shallowRef, ref } from 'vue'
-import { VCombobox } from 'vuetify/components'
+import { VCombobox } from 'vuetify/components/VCombobox'
 import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
@@ -17,6 +18,8 @@ export default defineComponent({
     }
   },
   setup (props) {
+    useDefaults({}, 'VjsfCombobox')
+
     /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
     const items = shallowRef(props.modelValue.layout.items ?? [])
     /** @type import('vue').Ref<boolean> */

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

@@ -1,9 +1,11 @@
 <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 } from 'vue'
+import { getCompProps, getDateTimeParts, getDateTimeWithOffset } from '../../utils/index.js'
+
+useDefaults({}, 'VjsfDatePicker')
 
 const props = defineProps({
   modelValue: {
@@ -20,25 +22,32 @@ const props = defineProps({
 
 const vDate = useDate()
 
+const menuOpened = ref(false)
+
 const datePickerProps = computed(() => {
-  const datePickerProps = getCompProps(props.modelValue, 'datePicker', true)
+  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,8 +1,19 @@
 <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 } from 'vue'
+import { getCompProps, getDateTimeParts, getDateTimeWithOffset, getShortTime } from '../../utils/index.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 +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/expansion-panels.vue

@@ -1,8 +1,15 @@
 <script setup>
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer, VRow, VIcon } from 'vuetify/components'
+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 { getCompProps } from '../../utils/index.js'
+import { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfExpansionPanels')
 
 defineProps({
   modelValue: {
@@ -21,7 +28,7 @@ defineProps({
 
 <template>
   <section-header :node="modelValue" />
-  <v-expansion-panels>
+  <v-expansion-panels v-bind="getCompProps(modelValue, true)">
     <v-expansion-panel
       v-for="(child, i) of modelValue.children"
       :key="child.key"
@@ -37,16 +44,25 @@ defineProps({
         </v-icon>
         {{ 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 { VFileInput } from 'vuetify/components/VFileInput'
 import { getInputProps, getCompSlots } from '../../utils/index.js'
+import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
@@ -17,6 +18,8 @@ export default defineComponent({
     }
   },
   setup (props) {
+    useDefaults({}, 'VjsfFileInput')
+
     const fieldProps = computed(() => {
       const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['placeholder', 'accept'])
       if (props.modelValue.layout.multiple) {