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

package/src/components/nodes/select.vue

@@ -1,9 +1,10 @@
 <script>
-import { VSelect } from 'vuetify/components'
-import { defineComponent, h, computed, ref, shallowRef } from 'vue'
-import { getInputProps, getCompSlots } from '../../utils/index.js'
-import SelectItem from '../fragments/select-item.vue'
-import SelectSelection from '../fragments/select-selection.vue'
+import { VSelect } from 'vuetify/components/VSelect'
+import { defineComponent, h, computed } from 'vue'
+import { getSelectProps, getSelectSlots } from '../../utils/index.js'
+import useGetItems from '../../composables/use-get-items.js'
+
+import { useDefaults } from 'vuetify'
 
 export default defineComponent({
   props: {
@@ -19,59 +20,19 @@ export default defineComponent({
     }
   },
   setup (props) {
-    /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
-    const items = shallowRef([])
-    /** @type import('vue').Ref<boolean> */
-    const loading = ref(false)
+    useDefaults({}, 'VjsfSelect')
+
+    const getItems = useGetItems(props)
 
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
-      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
-      fieldProps.loading = loading.value
-      fieldProps.items = items.value
-      fieldProps['onUpdate:menu'] = refresh
+      const fieldProps = getSelectProps(props.modelValue, props.statefulLayout)
+      fieldProps.loading = getItems.loading.value
+      fieldProps.items = getItems.items.value
       return fieldProps
     })
 
-    /** @type import('@json-layout/core').StateTree | null */
-    let lastStateTree = null
-    /** @type Record<string, any> | null */
-    let lastContext = null
-
-    const refresh = async () => {
-      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
-      lastStateTree = props.statefulLayout.stateTree
-      lastContext = props.statefulLayout.options.context ?? null
-      loading.value = true
-      items.value = await props.statefulLayout.getItems(props.modelValue)
-      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(VSelect, fieldProps.value, fieldSlots.value)
+    return () => h(VSelect, fieldProps.value, getSelectSlots(props.modelValue, props.statefulLayout, getItems))
   }
 })
 

package/src/components/nodes/slider.vue

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

package/src/components/nodes/stepper.vue

@@ -1,9 +1,16 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowItem, VStepperActions, VContainer, VRow, VSpacer, VBtn, VDivider } from 'vuetify/components'
+import { VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowItem, VStepperActions } from 'vuetify/components/VStepper'
+import { VContainer, VRow, VSpacer } from 'vuetify/components/VGrid'
+import { VBtn } from 'vuetify/components/VBtn'
+import { VDivider } from 'vuetify/components/VDivider'
 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 { useDefaults } from 'vuetify'
+
+useDefaults({}, 'VjsfStepper')
 
 const props = defineProps({
   modelValue: {
@@ -59,7 +66,8 @@ const goNext = () => {
           fluid
           class="pa-0"
         >
-          <v-row>
+          <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"

package/src/components/nodes/switch-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({}, 'VjsfSwitchGroup')
+
+    // @ts-ignore
+    return () => {
+      return h(SelectionGroup, {
+        modelValue: props.modelValue,
+        statefulLayout: props.statefulLayout,
+        type: 'switch'
+      })
+    }
+  }
+})
+
+</script>
+
+<style>
+.vjsf-node-checkbox-group .v-selection-control-group .v-checkbox .v-selection-control {
+  min-height: auto;
+}
+</style>

package/src/components/nodes/switch.vue

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

package/src/components/nodes/tabs.vue

@@ -1,9 +1,19 @@
 <script setup>
-import { VTabs, VTab, VContainer, VSheet, VWindow, VWindowItem, VRow, VIcon } from 'vuetify/components'
+import { VTabs, VTab } from 'vuetify/components/VTabs'
+import { VContainer, VRow } from 'vuetify/components/VGrid'
+import { VIcon } from 'vuetify/components/VIcon'
+import { VSheet } from 'vuetify/components/VSheet'
+import { VWindow, VWindowItem } from 'vuetify/components/VWindow'
+import { useDefaults } from 'vuetify'
 import { ref } from 'vue'
 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 useCompDefaults from '../../composables/use-comp-defaults.js'
+
+useDefaults({}, 'VjsfTabs')
+const vSheetProps = useCompDefaults('VjsfTabs-VSheet', { border: true })
 
 defineProps({
   modelValue: {
@@ -23,13 +33,15 @@ const tab = ref(0)
 
 <template>
   <section-header :node="modelValue" />
-  <v-sheet border>
-    <v-tabs v-model="tab">
+  <v-sheet v-bind="vSheetProps">
+    <v-tabs
+      v-model="tab"
+      direction="horizontal"
+    >
       <v-tab
         v-for="(child, i) of modelValue.children"
         :key="child.key"
         :value="i"
-        :density="modelValue.options.density"
         :color="child.validated && (child.error || child.childError) ? 'error' : undefined"
       >
         <v-icon
@@ -48,7 +60,8 @@ const tab = ref(0)
         :value="i"
       >
         <v-container fluid>
-          <v-row>
+          <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"

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

@@ -1,7 +1,8 @@
 <script>
 import { defineComponent, h, computed } from 'vue'
-import { VTextField } from 'vuetify/components'
+import { VTextField } from 'vuetify/components/VTextField'
 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({}, 'VjsfTextField')
+
     const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout, ['placeholder']))
     const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 

package/src/components/nodes/textarea.vue

@@ -1,7 +1,8 @@
 <script>
 import { defineComponent, h, computed, ref, watch } from 'vue'
-import { VTextarea } from 'vuetify/components'
+import { VTextarea } from 'vuetify/components/VTextarea'
 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({}, 'VjsfTextArea')
+
     /** @type {import('vue').Ref<null | HTMLElement>} */
     const textarea = ref(null)
 

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/nodes/vertical-tabs.vue

@@ -1,9 +1,19 @@
 <script setup>
 import { isSection } from '@json-layout/core'
-import { VTabs, VTab, VContainer, VSheet, VWindow, VWindowItem, VRow, VIcon } from 'vuetify/components'
+import { VTabs, VTab} from 'vuetify/components/VTabs'
+import { VContainer, VRow } from 'vuetify/components/VGrid'
+import { VIcon } from 'vuetify/components/VIcon'
+import { VSheet } from 'vuetify/components/VSheet'
+import { VWindow, VWindowItem  } from 'vuetify/components/VWindow'
 import { ref } from 'vue'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import ChildSubtitle from '../fragments/child-subtitle.vue'
+import { useDefaults } from 'vuetify'
+import useCompDefaults from '../../composables/use-comp-defaults.js'
+
+useDefaults({}, 'VjsfVerticalTabs')
+const vSheetProps = useCompDefaults('VjsfVerticalTabs-VSheet', { border: true })
 
 defineProps({
   modelValue: {
@@ -23,7 +33,7 @@ const tab = ref(0)
 
 <template>
   <section-header :node="modelValue" />
-  <v-sheet border>
+  <v-sheet v-bind="vSheetProps">
     <div class="d-flex flex-row">
       <v-tabs
         v-model="tab"
@@ -54,7 +64,8 @@ const tab = ref(0)
           :value="i"
         >
           <v-container fluid>
-            <v-row>
+            <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"

package/src/components/options.js

@@ -1,7 +1,8 @@
 /** @type {import("../types.js").PartialVjsfOptions} */
 export const defaultOptions = {
   nodeComponents: {},
-  plugins: {}
+  plugins: [],
+  pluginsOptions: {}
 }
 
 /**
@@ -10,18 +11,34 @@ export const defaultOptions = {
  * @param {any} form
  * @param {number} width
  * @param {import("vue").Slots} slots
- * @param {Record<string, import('vue').Component>} nodeComponents
+ * @param {Record<string, import('vue').Component>} defaultNodeComponents
+ * @param {(data: any) => void} onData
+ * @param {(statefulLayout: import('@json-layout/core').StatefulLayout) => void} onUpdate
+ * @param {(key: string) => void} onAutofocus
  * @returns
  */
-export const getFullOptions = (options, form, width, slots, nodeComponents) => {
+export const getFullOptions = (options, form, width, slots, defaultNodeComponents, onData, onUpdate, onAutofocus) => {
+  const components = { ...options?.components }
+  const nodeComponents = { ...defaultNodeComponents, ...options?.nodeComponents }
+  if (options?.plugins) {
+    for (const plugin of options.plugins) {
+      components[plugin.info.name] = plugin.info
+      nodeComponents[plugin.info.name] = plugin.nodeComponent
+    }
+  }
+
   const fullOptions = {
     ...defaultOptions,
     readOnly: !!(form && (form.isDisabled.value || form.isReadonly.value)),
     ...options,
+    onData,
+    onUpdate,
+    onAutofocus,
     context: options?.context ? JSON.parse(JSON.stringify(options.context)) : {},
     width: Math.round(width ?? 0),
     vjsfSlots: { ...slots },
-    nodeComponents: { ...nodeComponents, ...options?.nodeComponents }
+    components,
+    nodeComponents
   }
   return /** @type import('../types.js').VjsfOptions */ (fullOptions)
 }

package/src/components/tree.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { VRow } from 'vuetify/components'
+import { VRow } from 'vuetify/components/VGrid'
 import Node from './node.vue'
 
 defineProps({

package/src/components/vjsf.vue

@@ -14,10 +14,14 @@ 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'
 import NodeAutocomplete from './nodes/autocomplete.vue'
+import NodeRadioGroup from './nodes/radio-group.vue'
+import NodeCheckboxGroup from './nodes/checkbox-group.vue'
+import NodeSwitchGroup from './nodes/switch-group.vue'
 import NodeOneOfSelect from './nodes/one-of-select.vue'
 import NodeTabs from './nodes/tabs.vue'
 import NodeVerticalTabs from './nodes/vertical-tabs.vue'
@@ -27,6 +31,7 @@ import NodeExpansionPanels from './nodes/expansion-panels.vue'
 import NodeStepper from './nodes/stepper.vue'
 import NodeList from './nodes/list.vue'
 import NodeFileInput from './nodes/file-input.vue'
+import NodeCard from './nodes/card.vue'
 
 /** @type {Record<string, import('vue').Component>} */
 const nodeComponents = {
@@ -38,10 +43,14 @@ const nodeComponents = {
   'number-field': NodeNumberField,
   slider: NodeSlider,
   'date-picker': NodeDatePicker,
+  'time-picker': NodeTimePicker,
   'date-time-picker': NodeDateTimePicker,
   'color-picker': NodeColorPicker,
   select: NodeSelect,
   autocomplete: NodeAutocomplete,
+  'radio-group': NodeRadioGroup,
+  'checkbox-group': NodeCheckboxGroup,
+  'switch-group': NodeSwitchGroup,
   'one-of-select': NodeOneOfSelect,
   tabs: NodeTabs,
   'vertical-tabs': NodeVerticalTabs,
@@ -50,7 +59,8 @@ const nodeComponents = {
   list: NodeList,
   combobox: NodeCombobox,
   'number-combobox': NodeNumberCombobox,
-  'file-input': NodeFileInput
+  'file-input': NodeFileInput,
+  card: NodeCard
 }
 
 const props = defineProps({

package/src/composables/use-comp-defaults.js

@@ -0,0 +1,19 @@
+import { inject, computed } from 'vue'
+
+// inspired by https://github.com/vuetifyjs/vuetify/blob/27b4b1e52060b6bee13a290a4829f935f1bd9c05/packages/vuetify/src/composables/defaults.ts#L92
+/**
+ *
+ * @param {string} name
+ * @param {Record<string, any> | null} [localDefaults]
+ * @returns {import('vue').ComputedRef<Record<string, any>>}
+ */
+export default function useCompDefaultProps (name, localDefaults = null) {
+  /** @type {import('vue').Ref<import('vuetify').DefaultsInstance> | undefined} */
+  const defaults = inject(Symbol.for('vuetify:defaults'))
+  if (!defaults) throw new Error('[vjsf] Could not find defaults instance')
+  return computed(() => {
+    const componentDefaults = defaults.value?.[name] ?? {}
+    if (!localDefaults) return componentDefaults
+    return { ...componentDefaults, ...localDefaults }
+  })
+}

package/src/composables/use-dnd.js

@@ -42,6 +42,7 @@ export default function useDnd (array, callback) {
       dragging.value = itemIndex
     },
     onDragend: () => {
+      hovered.value = itemIndex
       dragging.value = -1
       callback()
     }

package/src/composables/use-get-items.js

@@ -0,0 +1,48 @@
+import { watch, shallowRef, ref } from 'vue'
+
+/**
+ * @param {{modelValue: import('@json-layout/core').StateNode, statefulLayout: import('../types.js').VjsfStatefulLayout}} props
+ */
+export default function (props) {
+  /** @type import('vue').Ref<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('')
+
+  const fetchItems = async () => {
+    loading.value = true
+    items.value = await props.statefulLayout.getItems(props.modelValue, search.value)
+    loading.value = false
+  }
+
+  watch(() => props.modelValue.itemsCacheKey, (newValue, oldValue) => {
+    if (newValue === oldValue) return
+    fetchItems()
+  }, { immediate: true })
+
+  watch(search, () => {
+    fetchItems()
+  })
+
+  /**
+   * @param {any} selectedItem
+   * @param {any} itemValue
+   */
+  const prepareSelectedItem = (selectedItem, itemValue) => {
+    let item = selectedItem
+    // item and value are the same when the selection is not found in items list
+    if (selectedItem === itemValue) {
+      try {
+        item = props.statefulLayout.prepareSelectItem(props.modelValue, selectedItem)
+        if (item.value === undefined) item.value = itemValue
+      } catch (e) {
+        item = { value: itemValue }
+      }
+    }
+    return item
+  }
+
+  return { items, loading, search, prepareSelectedItem }
+}