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

package/src/components/nodes/select.vue

@@ -1,59 +1,79 @@
-<script setup>
+<script>
 import { VSelect } from 'vuetify/components'
-import { computed, ref } from 'vue'
+import { defineComponent, h, computed, ref, shallowRef } from 'vue'
 import { getInputProps } from '../../utils/props.js'
+import { getCompSlots } from '../../utils/slots.js'
+import SelectItem from '../fragments/select-item.vue'
+import SelectSelection from '../fragments/select-selection.vue'
 
-const props = defineProps({
-  modelValue: {
+export default defineComponent({
+  props: {
+    modelValue: {
     /** @type import('vue').PropType<import('../types.js').VjsfSelectNode> */
-    type: Object,
-    required: true
-  },
-  statefulLayout: {
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
     /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
-    type: Object,
-    required: true
-  }
-})
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
+    const items = shallowRef([])
+    /** @type import('vue').Ref<boolean> */
+    const loading = ref(false)
 
-const fieldProps = computed(() => {
-  const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
-  if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
-  return fieldProps
-})
+    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
+      return fieldProps
+    })
 
-/** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
-const items = ref(props.modelValue.layout.items ?? [])
-/** @type import('vue').Ref<boolean> */
-const loading = ref(false)
-
-/** @type import('@json-layout/core').StateTree | null */
-let lastStateTree = null
-/** @type Record<string, any> | null */
-let lastContext = null
-
-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
-  loading.value = true
-  items.value = await props.statefulLayout.getSelectItems(props.modelValue)
-  loading.value = false
-}
-
-if (!props.modelValue.layout.items) {
-  refresh()
-}
+    /** @type import('@json-layout/core').StateTree | null */
+    let lastStateTree = null
+    /** @type Record<string, any> | null */
+    let lastContext = null
 
-</script>
+    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
+    }
 
-<template>
-  <v-select
-    v-bind="fieldProps"
-    :loading="loading"
-    :items="items"
-    @update:model-value="value => statefulLayout.input(modelValue, value)"
-    @update:menu="refresh"
-  />
-</template>
+    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)
+  }
+})
+
+</script>

package/src/components/nodes/stepper.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { VStepper, VStepperHeader, VStepperItem, VContainer } 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('@json-layout/core').StatefulLayout> */
+    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 = () => {
+  console.log(props.statefulLayout.validationState)
+  const child = props.modelValue.children[step.value]
+  props.statefulLayout.validateNodeRecurse(child)
+  console.log(props.statefulLayout.validationState)
+  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/text-field.vue

@@ -18,7 +18,7 @@ export default defineComponent({
     }
   },
   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

package/src/components/nodes/textarea.vue

@@ -18,7 +18,7 @@ export default defineComponent({
     }
   },
   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

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',
@@ -21,5 +21,26 @@ export const defaultOptions = {
   checkboxPropsReadOnly: {},
   switchProps: { hideDetails: 'auto' },
   switchPropsReadOnly: {},
-  errorAlertProps: { type: 'error', variant: 'tonal' }
+  errorAlertProps: { type: 'error', variant: 'tonal' },
+  easyMDEOptions: {}
+}
+
+/**
+ *
+ * @param {Partial<import("./types.js").VjsfOptions>} options
+ * @param {any} form
+ * @param {number} width
+ * @param {import("vue").Slots} slots
+ * @returns
+ */
+export const getFullOptions = (options, form, width, slots) => {
+  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 }
+  }
+  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({
@@ -16,7 +17,7 @@ defineProps({
 </script>
 
 <template>
-  <v-row>
+  <v-row class="vjsf-tree">
     <node
       :stateful-layout="statefulLayout"
       :model-value="/** @type import('./types.js').VjsfNode */(modelValue.root)"

package/src/components/types.ts

@@ -17,6 +17,8 @@ import {
   TextFieldNode,
   TextareaNode,
   VerticalTabsNode,
+  StepperNode,
+  ComboboxNode,
   CompileOptions
 } from '@json-layout/core'
 
@@ -38,8 +40,11 @@ export type VjsfOptions = StatefulLayoutOptions & CompileOptions & {
   switchPropsReadOnly: Record<string, unknown>,
   errorAlertProps: Record<string, unknown>,
   vjsfSlots: Record<string, () => unknown>,
+  easyMDEOptions: Record<string, unknown>,
 }
 
+export type PartialVjsfOptions = Partial<Omit<VjsfOptions, 'width'>>
+
 export type VjsfNode = Omit<StateNode, 'options'> & {options: VjsfOptions}
 export type VjsfTabsNode = Omit<TabsNode, 'options'> & {options: VjsfOptions}
 export type VjsfCheckboxNode = Omit<CheckboxNode, 'options'> & {options: VjsfOptions}
@@ -57,3 +62,6 @@ export type VjsfSwitchNode = Omit<SwitchNode, 'options'> & {options: VjsfOptions
 export type VjsfTextFieldNode = Omit<TextFieldNode, 'options'> & {options: VjsfOptions}
 export type VjsfTextareaNode = Omit<TextareaNode, 'options'> & {options: VjsfOptions}
 export type VjsfVerticalTabsNode = Omit<VerticalTabsNode, 'options'> & {options: VjsfOptions}
+export type VjsfStepperNode = Omit<StepperNode, 'options'> & {options: VjsfOptions}
+
+export type VjsfComboboxNode = Omit<ComboboxNode, 'options'> & {options: VjsfOptions}

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, getCurrentInstance } 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,12 +17,16 @@ 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 NodeMarkdown from './nodes/markdown.vue'
 
 const comps = {
   section: NodeSection,
@@ -34,11 +40,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
+  stepper: NodeStepper,
+  list: NodeList,
+  combobox: NodeCombobox,
+  'number-combobox': NodeNumberCombobox,
+  markdown: NodeMarkdown
 }
 
 const instance = getCurrentInstance()
@@ -53,101 +64,43 @@ 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> */
     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 emit = defineEmits(emits)
 
-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()
-  }
-})
-
-// case where data is updated from outside
-watch(() => props.modelValue, (newData) => {
-  if (statefulLayout.value && statefulLayout.value.data !== newData) statefulLayout.value.data = newData
-})
-
-// 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),
+  emit,
+  compile,
+  props.precompiledLayout
+)
 
 </script>
 
 <template>
-  <div ref="el">
+  <div
+    ref="el"
+    class="vjsf"
+  >
     <tree
       v-if="statefulLayout && stateTree"
+      ref="tree"
       :model-value="stateTree"
       :stateful-layout="statefulLayout"
     />
@@ -155,14 +108,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,54 @@
+import { shallowRef, ref, computed } from 'vue'
+import { moveArrayItem } from '../utils/arrays.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 draggable = ref(-1)
+  const dragging = ref(-1)
+
+  const itemBind = (/** @type {number} */itemIndex) => ({
+    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) => ({
+    onMouseover () {
+      draggable.value = itemIndex
+    },
+    onMouseout () {
+      draggable.value = -1
+    }
+  })
+
+  return {
+    activeDnd,
+    sortableArray,
+    draggable,
+    itemBind,
+    handleBind
+  }
+}

package/src/composables/use-vjsf.js

@@ -0,0 +1,115 @@
+import { StatefulLayout } from '@json-layout/core'
+import { inject, toRaw, shallowRef, computed, ref, watch, useSlots } from 'vue'
+import { useElementSize } from '@vueuse/core'
+import { getFullOptions } from '../components/options.js'
+
+export const emits = {
+  /**
+   * @arg {any} data
+  */
+  'update:modelValue': (data) => true,
+  /**
+   * @arg {StatefulLayout} state
+  */
+  'update:state': (state) => true
+}
+
+/**
+ * @param {import('vue').Ref<Object>} schema
+ * @param {import('vue').Ref<any>} modelValue
+ * @param {import('vue').Ref<import("../components/types.js").PartialVjsfOptions>} options
+ * @param {any} emit
+ * @param {typeof import('@json-layout/core').compile} compile
+ * @param {import('@json-layout/core').CompiledLayout} [precompiledLayout]
+ */
+export const useVjsf = (schema, modelValue, options, emit, compile, precompiledLayout) => {
+  const el = ref(null)
+  const { width } = useElementSize(el)
+
+  /** @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()
+        return statefulLayout.value?.errors
+      },
+      reset: () => statefulLayout.value?.resetValidation(), // TODO: also empty the data ?
+      resetValidation: () => statefulLayout.value?.resetValidation()
+    })
+  }
+
+  const slots = useSlots()
+
+  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots))
+
+  const compiledLayout = computed(() => {
+    if (precompiledLayout) return precompiledLayout
+    const compiledLayout = compile(schema.value, fullOptions.value)
+    return compiledLayout
+  })
+
+  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(
+      toRaw(compiledLayout.value),
+      toRaw(compiledLayout.value.skeletonTree),
+      toRaw(fullOptions.value),
+      toRaw(modelValue.value)
+    )
+    statefulLayout.value = _statefulLayout
+    onStatefulLayoutUpdate()
+    _statefulLayout.events.on('update', () => {
+      onStatefulLayoutUpdate()
+    })
+    emit('update:state', _statefulLayout)
+    _statefulLayout.events.on('autofocus', () => {
+      if (!el.value) return
+      // @ts-ignore
+      const autofocusNodeElement = el.value.querySelector('.vjsf-input--autofocus')
+      if (autofocusNodeElement) {
+        const autofocusInputElement = autofocusNodeElement.querySelector('input')
+        if (autofocusInputElement) autofocusInputElement.focus()
+      }
+    })
+  }
+
+  watch(fullOptions, (newOptions) => {
+    if (statefulLayout.value) {
+      statefulLayout.value.options = newOptions
+    } else {
+      initStatefulLayout()
+    }
+  })
+
+  // case where data is updated from outside
+  watch(modelValue, (newData) => {
+    if (statefulLayout.value && statefulLayout.value.data !== newData) statefulLayout.value.data = toRaw(newData)
+  })
+
+  // case where schema is updated from outside
+  watch(compiledLayout, (newCompiledLayout) => {
+    initStatefulLayout()
+  }, { immediate: true })
+
+  return { el, statefulLayout, stateTree }
+}