@koumoul/vjsf 3.0.0-alpha.0 → 3.0.0-alpha.10

package/src/components/nodes/stepper.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowItem, VStepperActions, VContainer, VRow, VSpacer, VBtn, VDivider } from 'vuetify/components'
+import { isSection } from '@json-layout/core'
+import Node from '../node.vue'
+import SectionHeader from '../fragments/section-header.vue'
+
+const props = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStepperNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const step = ref(0)
+
+const firstErrorIndex = computed(() => {
+  const index = props.modelValue.children.findIndex(child => child.validated && !!(child.error || child.childError))
+  return index === -1 ? props.modelValue.children.length : index
+})
+
+const goNext = () => {
+  const child = props.modelValue.children[step.value]
+  props.statefulLayout.validateNodeRecurse(child)
+  if (!(child.error || child.childError)) step.value++
+}
+</script>
+
+<template>
+  <section-header :node="modelValue" />
+  <v-stepper v-model="step">
+    <v-stepper-header>
+      <template
+        v-for="(child, i) of modelValue.children"
+        :key="child.key"
+      >
+        <v-stepper-item
+          :value="i"
+          :title="/** @type {string | undefined} */(child.layout.title ?? child.layout.label)"
+          :error="child.validated && !!(child.error || child.childError)"
+          :complete="child.validated && !(child.error || child.childError)"
+          :editable="i <= firstErrorIndex"
+        />
+        <v-divider />
+      </template>
+    </v-stepper-header>
+    <v-stepper-window>
+      <v-stepper-window-item
+        v-for="(child) of modelValue.children"
+        :key="child.key"
+      >
+        <v-container
+          fluid
+          class="pa-0"
+        >
+          <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-stepper-window-item>
+    </v-stepper-window>
+    <v-stepper-actions>
+      <template #prev>
+        <v-btn
+          v-if="step > 0"
+          variant="text"
+          @click="step--"
+        >
+          Back
+        </v-btn>
+      </template>
+      <template #next>
+        <v-spacer />
+        <v-btn
+          v-if="step < modelValue.children.length - 1"
+          variant="flat"
+          color="primary"
+          @click="goNext"
+        >
+          Next
+        </v-btn>
+      </template>
+    </v-stepper-actions>
+  </v-stepper>
+</template>

package/src/components/nodes/switch.vue

@@ -1,16 +1,16 @@
 <script setup>
 import { VSwitch } from 'vuetify/components'
 import { computed } from 'vue'
-import { getInputProps } from '../../utils/props.js'
+import { getInputProps } from '../../utils/index.js'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfSwitchNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfSwitchNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }

package/src/components/nodes/tabs.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { VTabs, VTab, VContainer } from 'vuetify/components'
+import { VTabs, VTab, VContainer, VSheet, VWindow, VWindowItem, VRow, VIcon } from 'vuetify/components'
 import { ref } from 'vue'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
@@ -7,12 +7,12 @@ import SectionHeader from '../fragments/section-header.vue'
 
 defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfTabsNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfTabsNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }
@@ -52,7 +52,7 @@ const tab = ref(0)
             <node
               v-for="grandChild of isSection(child) ? child.children : [child]"
               :key="grandChild.fullKey"
-              :model-value="/** @type import('../types.js').VjsfNode */(grandChild)"
+              :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
               :stateful-layout="statefulLayout"
             />
           </v-row>

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

@@ -1,24 +1,23 @@
 <script>
 import { defineComponent, h, computed } from 'vue'
 import { VTextField } from 'vuetify/components'
-import { getInputProps } from '../../utils/props.js'
-import { getCompSlots } from '../../utils/slots.js'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
 
 export default defineComponent({
   props: {
     modelValue: {
-      /** @type import('vue').PropType<import('../types.js').VjsfTextFieldNode> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfTextFieldNode> */
       type: Object,
       required: true
     },
     statefulLayout: {
-      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
       type: Object,
       required: true
     }
   },
   setup (props) {
-    const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
+    const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout, ['placeholder']))
     const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 
     // @ts-ignore
@@ -27,3 +26,9 @@ export default defineComponent({
 })
 
 </script>
+
+<style>
+.vjsf-node-text-field.vjsf-readonly.vjsf-summary input {
+  text-overflow: ellipsis;
+}
+</style>

package/src/components/nodes/textarea.vue

@@ -1,29 +1,49 @@
 <script>
-import { defineComponent, h, computed } from 'vue'
+import { defineComponent, h, computed, ref, watch } from 'vue'
 import { VTextarea } from 'vuetify/components'
-import { getInputProps } from '../../utils/props.js'
-import { getCompSlots } from '../../utils/slots.js'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
 
 export default defineComponent({
   props: {
     modelValue: {
-      /** @type import('vue').PropType<import('../types.js').VjsfTextareaNode> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfTextareaNode> */
       type: Object,
       required: true
     },
     statefulLayout: {
-      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
       type: Object,
       required: true
     }
   },
   setup (props) {
-    const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
+    /** @type {import('vue').Ref<null | HTMLElement>} */
+    const textarea = ref(null)
+
+    const fieldProps = computed(() => {
+      const inputProps = getInputProps(props.modelValue, props.statefulLayout, ['placeholder'])
+      inputProps.ref = textarea
+      if (props.modelValue.options.readOnly && props.modelValue.options.summary) inputProps.rows = 3
+      return inputProps
+    })
     const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
 
+    watch(() => props.modelValue.options.readOnly, (readOnly) => {
+      if (readOnly && textarea.value) {
+        textarea.value.scrollTop = 0
+      }
+    })
+
     // @ts-ignore
     return () => h(VTextarea, fieldProps.value, fieldSlots.value)
   }
 })
 
 </script>
+
+<style>
+.vjsf-node-textarea.vjsf-readonly.vjsf-summary textarea {
+  overflow: hidden;
+  mask-image: linear-gradient(180deg, #000 66%, transparent 90%);
+}
+</style>

package/src/components/nodes/vertical-tabs.vue

@@ -1,18 +1,18 @@
 <script setup>
 import { isSection } from '@json-layout/core'
-import { VTabs, VTab, VContainer } from 'vuetify/components'
+import { VTabs, VTab, VContainer, VSheet, VWindow, VWindowItem, VRow, VIcon } from 'vuetify/components'
 import { ref } from 'vue'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
 
 defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfVerticalTabsNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfVerticalTabsNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }
@@ -58,7 +58,7 @@ const tab = ref(0)
               <node
                 v-for="grandChild of isSection(child) ? child.children : [child]"
                 :key="grandChild.fullKey"
-                :model-value="/** @type import('../types.js').VjsfNode */(grandChild)"
+                :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
                 :stateful-layout="statefulLayout"
               />
             </v-row>

package/src/components/options.js

@@ -1,4 +1,4 @@
-/** @type Partial<import("./types.js").VjsfOptions> */
+/** @type import("../types.js").PartialVjsfOptions */
 export const defaultOptions = {
   // matches the density prop found in many vuetify components
   density: 'default',
@@ -12,6 +12,7 @@ export const defaultOptions = {
     density: 'comfortable'
   },
   fieldPropsReadOnly: { hideDetails: 'auto', variant: 'plain' },
+  fieldPropsSummary: { hideDetails: true },
   textfieldProps: {},
   textfieldPropsReadOnly: {},
   textareaProps: {},
@@ -21,5 +22,29 @@ export const defaultOptions = {
   checkboxPropsReadOnly: {},
   switchProps: { hideDetails: 'auto' },
   switchPropsReadOnly: {},
-  errorAlertProps: { type: 'error', variant: 'tonal' }
+  errorAlertProps: { type: 'error', variant: 'tonal' },
+  easyMDEOptions: {},
+  nodeComponents: {}
+}
+
+/**
+ *
+ * @param {Partial<import("../types.js").VjsfOptions> | null} options
+ * @param {any} form
+ * @param {number} width
+ * @param {import("vue").Slots} slots
+ * @param {Record<string, import('vue').Component>} nodeComponents
+ * @returns
+ */
+export const getFullOptions = (options, form, width, slots, nodeComponents) => {
+  const fullOptions = {
+    ...defaultOptions,
+    readOnly: !!(form && (form.isDisabled.value || form.isReadonly.value)),
+    ...options,
+    context: options?.context ? JSON.parse(JSON.stringify(options.context)) : {},
+    width: Math.round(width ?? 0),
+    vjsfSlots: { ...slots },
+    nodeComponents: { ...nodeComponents, ...options?.nodeComponents }
+  }
+  return /** @type import('../types.js').VjsfOptions */ (fullOptions)
 }

package/src/components/tree.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { VRow } from 'vuetify/components'
 import Node from './node.vue'
 
 defineProps({
@@ -8,7 +9,7 @@ defineProps({
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }
@@ -16,10 +17,10 @@ defineProps({
 </script>
 
 <template>
-  <v-row>
+  <v-row class="vjsf-tree">
     <node
       :stateful-layout="statefulLayout"
-      :model-value="/** @type import('./types.js').VjsfNode */(modelValue.root)"
+      :model-value="/** @type import('../types.js').VjsfNode */(modelValue.root)"
     />
   </v-row>
 </template>

package/src/components/vjsf.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { ref, shallowRef, computed, getCurrentInstance, watch, useSlots, inject } from 'vue'
-import { useElementSize } from '@vueuse/core'
-import { StatefulLayout, compile } from '@json-layout/core'
+import { computed } from 'vue'
+
+import { compile } from '@json-layout/core'
 import Tree from './tree.vue'
+import { useVjsf, emits } from '../composables/use-vjsf.js'
+import '../styles/vjsf.css'
 
 import NodeSection from './nodes/section.vue'
 import NodeTextField from './nodes/text-field.vue'
@@ -15,14 +17,19 @@ import NodeDatePicker from './nodes/date-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 NodeOneOfSelect from './nodes/one-of-select.vue'
 import NodeTabs from './nodes/tabs.vue'
 import NodeVerticalTabs from './nodes/vertical-tabs.vue'
+import NodeCombobox from './nodes/combobox.vue'
+import NodeNumberCombobox from './nodes/number-combobox.vue'
 import NodeExpansionPanels from './nodes/expansion-panels.vue'
+import NodeStepper from './nodes/stepper.vue'
 import NodeList from './nodes/list.vue'
-import { defaultOptions } from './options.js'
+import NodeFileInput from './nodes/file-input.vue'
 
-const comps = {
+/** @type {Record<string, import('vue').Component>} */
+const nodeComponents = {
   section: NodeSection,
   'text-field': NodeTextField,
   textarea: NodeTextarea,
@@ -34,18 +41,16 @@ const comps = {
   'date-time-picker': NodeDateTimePicker,
   'color-picker': NodeColorPicker,
   select: NodeSelect,
+  autocomplete: NodeAutocomplete,
   'one-of-select': NodeOneOfSelect,
   tabs: NodeTabs,
   'vertical-tabs': NodeVerticalTabs,
   'expansion-panels': NodeExpansionPanels,
-  list: NodeList
-}
-
-const instance = getCurrentInstance()
-for (const [name, comp] of Object.entries(comps)) {
-  if (!instance?.appContext.app.component(`vjsf-node-${name}`)) {
-    instance?.appContext.app.component(`vjsf-node-${name}`, comp)
-  }
+  stepper: NodeStepper,
+  list: NodeList,
+  combobox: NodeCombobox,
+  'number-combobox': NodeNumberCombobox,
+  'file-input': NodeFileInput
 }
 
 const props = defineProps({
@@ -53,99 +58,41 @@ const props = defineProps({
     type: Object,
     required: true
   },
+  precompiledLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').CompiledLayout> */
+    type: Object,
+    default: null
+  },
   modelValue: {
-    type: [Object, String, Number, Boolean],
+    type: null,
     default: null
   },
   options: {
-    /** @type import('vue').PropType<Partial<Omit<import('./types.js').VjsfOptions, 'width'>>> */
+    /** @type import('vue').PropType<import('../types.js').PartialVjsfOptions | null> */
     type: Object,
-    required: true
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'update:state'])
-
-/** @type import('vue').ShallowRef<StatefulLayout | null> */
-const statefulLayout = shallowRef(null)
-/** @type import('vue').ShallowRef<import('@json-layout/core').StateTree | null> */
-const stateTree = shallowRef(null)
-
-// cf https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/form.ts
-const form = inject(Symbol.for('vuetify:form'))
-if (form) {
-  form.register({
-    id: 'vjsf', // TODO: a unique random id ?
-    validate: () => statefulLayout.value?.validate(),
-    reset: () => statefulLayout.value?.resetValidation(), // TODO: also empty the data ?
-    resetValidation: () => statefulLayout.value?.resetValidation()
-  })
-}
-
-const el = ref(null)
-const { width } = useElementSize(el)
-
-const slots = useSlots()
-
-/** @type import('vue').ComputedRef<import('./types.js').VjsfOptions> */
-const fullOptions = computed(() => {
-  const options = {
-    ...defaultOptions,
-    readOnly: form.isDisabled || form.isReadOnly,
-    ...props.options,
-    context: props.options.context ? JSON.parse(JSON.stringify(props.options.context)) : {},
-    width: Math.round(width.value ?? 0),
-    vjsfSlots: { ...slots }
-  }
-  return /** @type import('./types.js').VjsfOptions */ (options)
-})
-
-const compiledLayout = computed(() => compile(props.schema, fullOptions.value))
-
-const onStatefulLayoutUpdate = () => {
-  if (!statefulLayout.value) return
-  stateTree.value = statefulLayout.value.stateTree
-  emit('update:modelValue', statefulLayout.value.data)
-  emit('update:state', statefulLayout.value)
-  if (form) {
-    // cf https://vuetifyjs.com/en/components/forms/#validation-state
-    if (statefulLayout.value.valid) form.update('vjsf', true, [])
-    else if (statefulLayout.value.hasHiddenError) form.update('vjsf', null, [])
-    else form.update('vjsf', false, [])
-  }
-}
-
-const initStatefulLayout = () => {
-  if (!width.value) return
-  const _statefulLayout = new StatefulLayout(compiledLayout.value, compiledLayout.value.skeletonTree, fullOptions.value, props.modelValue)
-  statefulLayout.value = _statefulLayout
-  onStatefulLayoutUpdate()
-  _statefulLayout.events.on('update', () => {
-    onStatefulLayoutUpdate()
-  })
-  emit('update:state', _statefulLayout)
-}
-
-watch(fullOptions, (newOptions) => {
-  if (statefulLayout.value) {
-    statefulLayout.value.options = newOptions
-  } else {
-    initStatefulLayout()
+    default: null
   }
 })
 
-// case where data is updated from outside
-watch(() => props.modelValue, (newData) => {
-  if (statefulLayout.value && statefulLayout.value.data !== newData) statefulLayout.value.data = newData
-})
+const emit = defineEmits(emits)
 
-// case where schema is updated from outside
-watch(compiledLayout, (newCompiledLayout) => initStatefulLayout())
+const { el, statefulLayout, stateTree } = useVjsf(
+  computed(() => props.schema),
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  nodeComponents,
+  emit,
+  compile,
+  computed(() => props.precompiledLayout)
+)
 
 </script>
 
 <template>
-  <div ref="el">
+  <div
+    ref="el"
+    class="vjsf"
+  >
     <tree
       v-if="statefulLayout && stateTree"
       :model-value="stateTree"
@@ -155,14 +102,5 @@ watch(compiledLayout, (newCompiledLayout) => initStatefulLayout())
 </template>
 
 <style lang="css">
-/* override vuetify styles to manage readOnly fields more usable than the default disabled fields */
-.vjsf-input--readonly.v-input--disabled.v-text-field  .v-field--disabled input {
-  pointer-events: auto;
-}
-.vjsf-input--readonly.v-input--disabled .v-field--disabled,
-.vjsf-input--readonly.v-input--disabled .v-input__details,
-.vjsf-input--readonly.v-input--disabled .v-input__append,
-.vjsf-input--readonly.v-input--disabled .v-input__prepend {
-  opacity: inherit;
-}
+/* nothing here, use ../styles/vjsf.css */
 </style>

package/src/composables/use-dnd.js

@@ -0,0 +1,69 @@
+import { shallowRef, ref, computed } from 'vue'
+import { moveArrayItem } from '../utils/index.js'
+
+/**
+ * @template T
+ * @param {T[]} array
+ * @param {() => void} callback
+ * @returns
+ */
+export default function useDnd (array, callback) {
+  const activeDnd = computed(() => {
+    // cf https://ultimatecourses.com/blog/feature-detect-javascript-drag-drop-api
+    if (!('draggable' in document.createElement('div'))) return false
+    // cf https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript
+    if (window.matchMedia('(pointer: coarse)').matches) return false
+    return true
+  })
+
+  const sortableArray = shallowRef(array)
+
+  const hovered = ref(-1)
+  const draggable = ref(-1)
+  const dragging = ref(-1)
+
+  hovered.value = 1
+
+  const itemBind = (/** @type {number} */itemIndex) => ({
+    // hover the item
+    onMouseenter: () => {
+      hovered.value = itemIndex
+    },
+    onMouseleave: () => {
+      hovered.value = -1
+    },
+
+    // drag the item
+    onDragstart: () => {
+      dragging.value = itemIndex
+    },
+    onDragover: () => {
+      sortableArray.value = moveArrayItem(sortableArray.value, dragging.value, itemIndex)
+      dragging.value = itemIndex
+    },
+    onDragend: () => {
+      dragging.value = -1
+      callback()
+    }
+  })
+
+  const handleBind = (/** @type {number} */itemIndex) => ({
+    // hover the handle
+    onMouseover () {
+      draggable.value = itemIndex
+    },
+    onMouseout () {
+      draggable.value = -1
+    }
+  })
+
+  return {
+    activeDnd,
+    sortableArray,
+    hovered,
+    draggable,
+    dragging,
+    itemBind,
+    handleBind
+  }
+}