@koumoul/vjsf 3.0.0-alpha.3 → 3.0.0-alpha.5

package/src/components/nodes/number-combobox.vue

@@ -1,18 +1,17 @@
 <script>
 import { defineComponent, h, computed, shallowRef, ref } from 'vue'
 import { VCombobox } 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').VjsfComboboxNode> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfComboboxNode> */
       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/number-field.vue

@@ -1,18 +1,17 @@
 <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').VjsfNumberFieldNode> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfNumberFieldNode> */
       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/one-of-select.vue

@@ -1,17 +1,17 @@
 <script setup>
-import { VSelect } from 'vuetify/components'
+import { VSelect, VRow } from 'vuetify/components'
 import { shallowRef, watch } from 'vue'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfOneOfSelectNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfOneOfSelectNode> */
     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
   }
@@ -49,7 +49,7 @@ const onChange = (/** @type import('@json-layout/core').SkeletonTree */childTree
     <node
       v-for="grandChild of isSection(modelValue.children?.[0]) ? modelValue.children?.[0].children : modelValue.children"
       :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/section.vue

@@ -1,15 +1,16 @@
 <script setup>
+import { VRow } from 'vuetify/components'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
 
 defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfSectionNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfSectionNode> */
     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
   }
@@ -23,7 +24,7 @@ defineProps({
     <node
       v-for="child of modelValue.children"
       :key="child.fullKey"
-      :model-value="/** @type import('../types.js').VjsfNode */(child)"
+      :model-value="/** @type import('../../types.js').VjsfNode */(child)"
       :stateful-layout="statefulLayout"
     />
   </v-row>

package/src/components/nodes/select.vue

@@ -1,20 +1,19 @@
 <script>
 import { VSelect } from 'vuetify/components'
 import { defineComponent, h, computed, ref, shallowRef } from 'vue'
-import { getInputProps } from '../../utils/props.js'
-import { getCompSlots } from '../../utils/slots.js'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
 import SelectItem from '../fragments/select-item.vue'
 import SelectSelection from '../fragments/select-selection.vue'
 
 export default defineComponent({
   props: {
     modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfSelectNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfSelectNode> */
       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/slider.vue

@@ -1,16 +1,16 @@
 <script setup>
 import { VSlider } 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').VjsfSliderNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfSliderNode> */
     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/stepper.vue

@@ -1,18 +1,18 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { VStepper, VStepperHeader, VStepperItem, VContainer } from 'vuetify/components'
+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 import('vue').PropType<import('../../types.js').VjsfStepperNode> */
     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
   }
@@ -26,10 +26,8 @@ const firstErrorIndex = computed(() => {
 })
 
 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>
@@ -65,7 +63,7 @@ const goNext = () => {
             <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/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,18 +1,17 @@
 <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
     }
@@ -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, ['placeholder']))
+    /** @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 import("./types.js").PartialVjsfOptions */
+/** @type import("../types.js").PartialVjsfOptions */
 export const defaultOptions = {
   // matches the density prop found in many vuetify components
   density: 'default',
@@ -22,25 +22,28 @@ export const defaultOptions = {
   switchProps: { hideDetails: 'auto' },
   switchPropsReadOnly: {},
   errorAlertProps: { type: 'error', variant: 'tonal' },
-  easyMDEOptions: {}
+  easyMDEOptions: {},
+  nodeComponents: {}
 }
 
 /**
  *
- * @param {Partial<import("./types.js").VjsfOptions>} options
+ * @param {Partial<import("../types.js").VjsfOptions>} 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) => {
+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 }
+    vjsfSlots: { ...slots },
+    nodeComponents: { ...nodeComponents, ...options.nodeComponents }
   }
-  return /** @type import('./types.js').VjsfOptions */ (fullOptions)
+  return /** @type import('../types.js').VjsfOptions */ (fullOptions)
 }

package/src/components/tree.vue

@@ -9,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
   }
@@ -20,7 +20,7 @@ defineProps({
   <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,10 +1,11 @@
 <script setup>
-import { computed, getCurrentInstance } from 'vue'
+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 { registeredNodeComponents } from '../utils/index.js'
 
 import NodeSection from './nodes/section.vue'
 import NodeTextField from './nodes/text-field.vue'
@@ -26,9 +27,10 @@ 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 NodeMarkdown from './nodes/markdown.vue'
+import NodeFileInput from './nodes/file-input.vue'
 
-const comps = {
+/** @type {Record<string, import('vue').Component>} */
+const nodeComponents = {
   section: NodeSection,
   'text-field': NodeTextField,
   textarea: NodeTextarea,
@@ -49,14 +51,8 @@ const comps = {
   list: NodeList,
   combobox: NodeCombobox,
   'number-combobox': NodeNumberCombobox,
-  markdown: NodeMarkdown
-}
-
-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)
-  }
+  'file-input': NodeFileInput,
+  ...registeredNodeComponents
 }
 
 const props = defineProps({
@@ -74,7 +70,7 @@ const props = defineProps({
     default: null
   },
   options: {
-    /** @type import('vue').PropType<import('./types.js').PartialVjsfOptions> */
+    /** @type import('vue').PropType<import('../types.js').PartialVjsfOptions> */
     type: Object,
     required: true
   }
@@ -86,6 +82,7 @@ const { el, statefulLayout, stateTree } = useVjsf(
   computed(() => props.schema),
   computed(() => props.modelValue),
   computed(() => props.options),
+  nodeComponents,
   emit,
   compile,
   computed(() => props.precompiledLayout)
@@ -100,7 +97,6 @@ const { el, statefulLayout, stateTree } = useVjsf(
   >
     <tree
       v-if="statefulLayout && stateTree"
-      ref="tree"
       :model-value="stateTree"
       :stateful-layout="statefulLayout"
     />

package/src/composables/use-dnd.js

@@ -1,5 +1,5 @@
 import { shallowRef, ref, computed } from 'vue'
-import { moveArrayItem } from '../utils/arrays.js'
+import { moveArrayItem } from '../utils/index.js'
 
 /**
  * @template T
@@ -18,10 +18,22 @@ export default function useDnd (array, callback) {
 
   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
     },
@@ -36,6 +48,7 @@ export default function useDnd (array, callback) {
   })
 
   const handleBind = (/** @type {number} */itemIndex) => ({
+    // hover the handle
     onMouseover () {
       draggable.value = itemIndex
     },
@@ -47,7 +60,9 @@ export default function useDnd (array, callback) {
   return {
     activeDnd,
     sortableArray,
+    hovered,
     draggable,
+    dragging,
     itemBind,
     handleBind
   }

package/src/composables/use-vjsf.js

@@ -9,7 +9,7 @@ export const emits = {
   */
   'update:modelValue': (data) => true,
   /**
-   * @arg {StatefulLayout} state
+   * @arg {import('../types.js').VjsfStatefulLayout} state
   */
   'update:state': (state) => true
 }
@@ -17,16 +17,17 @@ export const emits = {
 /**
  * @param {import('vue').Ref<Object>} schema
  * @param {import('vue').Ref<any>} modelValue
- * @param {import('vue').Ref<import("../components/types.js").PartialVjsfOptions>} options
+ * @param {import('vue').Ref<import("../types.js").PartialVjsfOptions>} options
+ * @param {Record<string, import('vue').Component>} nodeComponents
  * @param {any} emit
  * @param {typeof import('@json-layout/core').compile} [compile]
  * @param {import('vue').Ref<import('@json-layout/core').CompiledLayout>} [precompiledLayout]
  */
-export const useVjsf = (schema, modelValue, options, emit, compile, precompiledLayout) => {
+export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compile, precompiledLayout) => {
   const el = ref(null)
   const { width } = useElementSize(el)
 
-  /** @type import('vue').ShallowRef<StatefulLayout | null> */
+  /** @type import('vue').ShallowRef<import('../types.js').VjsfStatefulLayout | null> */
   const statefulLayout = shallowRef(null)
   /** @type import('vue').ShallowRef<import('@json-layout/core').StateTree | null> */
   const stateTree = shallowRef(null)
@@ -47,7 +48,7 @@ export const useVjsf = (schema, modelValue, options, emit, compile, precompiledL
 
   const slots = useSlots()
 
-  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots))
+  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots, nodeComponents))
 
   const compiledLayout = computed(() => {
     if (precompiledLayout?.value) return precompiledLayout?.value
@@ -71,12 +72,13 @@ export const useVjsf = (schema, modelValue, options, emit, compile, precompiledL
 
   const initStatefulLayout = () => {
     if (!width.value) return
-    const _statefulLayout = new StatefulLayout(
+    // @ts-ignore
+    const _statefulLayout = /** @type {import('../types.js').VjsfStatefulLayout} */(new StatefulLayout(
       toRaw(compiledLayout.value),
       toRaw(compiledLayout.value.skeletonTree),
       toRaw(fullOptions.value),
       toRaw(modelValue.value)
-    )
+    ))
     statefulLayout.value = _statefulLayout
     onStatefulLayoutUpdate()
     _statefulLayout.events.on('update', () => {
@@ -96,7 +98,7 @@ export const useVjsf = (schema, modelValue, options, emit, compile, precompiledL
 
   watch(fullOptions, (newOptions) => {
     // in case of runtime compilation the watch on compiledLayout will be triggered
-    if (!precompiledLayout) return
+    if (!precompiledLayout?.value) return
 
     if (statefulLayout.value) {
       statefulLayout.value.options = newOptions
@@ -113,7 +115,7 @@ export const useVjsf = (schema, modelValue, options, emit, compile, precompiledL
   // case where schema is updated from outside
   watch(compiledLayout, (newCompiledLayout) => {
     initStatefulLayout()
-  }, { immediate: true })
+  })
 
   return { el, statefulLayout, stateTree }
 }

package/src/index.js

@@ -1,3 +1,4 @@
 import Vjsf from './components/vjsf.vue'
 import { defaultOptions } from './components/options.js'
 export { Vjsf, defaultOptions }
+export default Vjsf