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

package/src/components/nodes/markdown.vue

@@ -1,8 +1,9 @@
 <script>
-import { defineComponent, h, computed } from 'vue'
-import { VTextarea } from 'vuetify/components'
+import { defineComponent, h, computed, onMounted, ref, onUnmounted, watch } from 'vue'
+import { VInput, VLabel } from 'vuetify/components'
 import { getInputProps } from '../../utils/props.js'
 import { getCompSlots } from '../../utils/slots.js'
+import 'easymde/dist/easymde.min.css'
 
 export default defineComponent({
   props: {
@@ -18,12 +19,224 @@ export default defineComponent({
     }
   },
   setup (props) {
+    /** @type {import('vue').Ref<null | HTMLElement>} */
+    const element = ref(null)
+
     const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
-    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+    const fieldSlots = computed(() => {
+      const fieldSlots = getCompSlots(props.modelValue, props.statefulLayout)
+      fieldSlots.default = () => [
+        h('div', { style: 'width:100%' }, [
+          h(VLabel, { text: fieldProps.value.label }),
+          h('textarea', { ref: element, style: 'display:none' })
+        ])
+      ]
+      return fieldSlots
+    })
+
+    /** @type {EasyMDE | null} */
+    let easymde = null
+
+    const initEasyMDE = async () => {
+      if (!element.value) throw new Error('component was not mounted for markdown editor')
+
+      const EasyMDE = (await import('easymde')).default
+
+      const messages = props.modelValue.messages
+
+      const config = {
+        element: element.value,
+        initialValue: props.modelValue.data ?? '',
+        renderingConfig: {},
+        status: false,
+        autoDownloadFontAwesome: false,
+        spellChecker: false,
+        minHeight: '300px',
+        insertTexts: {
+          link: [messages.mdeLink1, messages.mdeLink2],
+          image: [messages.mdeImg1, messages.mdeImg2],
+          table: [messages.mdeTable1, messages.mdeTable2],
+          horizontalRule: ['', '\n\n-----\n\n']
+        },
+        // cf https://github.com/Ionaru/easy-markdown-editor/blob/master/src/js/easymde.js#L1380
+        toolbar: [{
+          name: 'bold',
+          action: EasyMDE.toggleBold,
+          className: 'mdi mdi-format-bold',
+          title: messages.bold
+        }, {
+          name: 'italic',
+          action: EasyMDE.toggleItalic,
+          className: 'mdi mdi-format-italic',
+          title: messages.italic
+        }, {
+          name: 'heading',
+          action: EasyMDE.toggleHeadingSmaller,
+          className: 'mdi mdi-format-title',
+          title: messages.heading
+        }, /* {
+    name: 'heading-1',
+    action: EasyMDE.toggleHeading1,
+    className: 'mdi mdi-format-title',
+    title: 'Titre 1'
+  }, {
+    name: 'heading-2',
+    action: EasyMDE.toggleHeading2,
+    className: 'mdi mdi-format-title',
+    title: 'Titre 2'
+  }, {
+    name: 'heading-3',
+    action: EasyMDE.toggleHeading3,
+    className: 'mdi mdi-format-title',
+    title: 'Titre 3'
+  }, */
+        '|',
+        {
+          name: 'quote',
+          action: EasyMDE.toggleBlockquote,
+          className: 'mdi mdi-format-quote-open',
+          title: messages.quote
+        },
+        {
+          name: 'unordered-list',
+          action: EasyMDE.toggleUnorderedList,
+          className: 'mdi mdi-format-list-bulleted',
+          title: messages.unorderedList
+        },
+        {
+          name: 'ordered-list',
+          action: EasyMDE.toggleOrderedList,
+          className: 'mdi mdi-format-list-numbered',
+          title: messages.orderedList
+        },
+        '|',
+        {
+          name: 'link',
+          action: EasyMDE.drawLink,
+          className: 'mdi mdi-link',
+          title: messages.createLink
+        },
+        {
+          name: 'image',
+          action: EasyMDE.drawImage,
+          className: 'mdi mdi-image',
+          title: messages.insertImage
+        },
+        {
+          name: 'table',
+          action: EasyMDE.drawTable,
+          className: 'mdi mdi-table',
+          title: messages.createTable
+        },
+        '|',
+        {
+          name: 'preview',
+          action: EasyMDE.togglePreview,
+          className: 'mdi mdi-eye text-accent',
+          title: messages.preview,
+          noDisable: true
+        },
+        '|',
+        {
+          name: 'undo',
+          action: EasyMDE.undo,
+          className: 'mdi mdi-undo',
+          title: messages.undo,
+          noDisable: true
+        },
+        {
+          name: 'redo',
+          action: EasyMDE.redo,
+          className: 'mdi mdi-redo',
+          title: messages.redo,
+          noDisable: true
+        },
+        '|',
+        {
+          name: 'guide',
+          action: 'https://simplemde.com/markdown-guide',
+          className: 'mdi mdi-help-circle text-success',
+          title: messages.mdeGuide,
+          noDisable: true
+        }
+        ],
+        ...props.modelValue.options.easyMDEOptions
+      }
+
+      if (easymde) easymde.toTextArea()
+      // @ts-ignore
+      easymde = new EasyMDE(config)
+
+      let changed = false
+      easymde.codemirror.on('change', () => {
+        changed = true
+        if (easymde) props.statefulLayout.input(props.modelValue, easymde.value())
+      })
+      /** @type {ReturnType<typeof setTimeout> | null} */
+      let blurTimeout = null
+      easymde.codemirror.on('blur', () => {
+        // timeout to prevent triggering save when clicking on a menu button
+        blurTimeout = setTimeout(() => {
+          if (changed) props.statefulLayout.blur(props.modelValue)
+          changed = false
+        }, 500)
+      })
+      easymde.codemirror.on('focus', () => {
+        if (blurTimeout) clearTimeout(blurTimeout)
+      })
+
+      if (props.modelValue.autofocus) {
+        easymde.codemirror.focus()
+      }
+    }
+
+    onMounted(initEasyMDE)
+
+    onUnmounted(() => {
+      if (easymde) easymde.toTextArea()
+    })
+
+    // update data from outside
+    watch(() => props.modelValue, () => {
+      if (easymde && (easymde.value() !== props.modelValue.data ?? '')) {
+        easymde.value(props.modelValue.data ?? '')
+      }
+    })
+
+    // update easymde config from outside
+    watch(() => [props.modelValue.messages, props.modelValue.options.easyMDEOptions], (newValues, oldValues) => {
+      if (newValues[0] !== oldValues[0] || newValues[1] !== oldValues[1]) {
+        initEasyMDE()
+      }
+    })
 
-    // @ts-ignore
-    return () => h(VTextarea, fieldProps.value, fieldSlots.value)
+    props.statefulLayout.events.on('autofocus', () => {
+      if (props.modelValue.autofocus && easymde) {
+        easymde.codemirror.focus()
+      }
+    })
+
+    return () => h(VInput, fieldProps.value, fieldSlots.value)
   }
 })
 
 </script>
+
+<style>
+.vjsf-node-markdown .v-input--density-compact .editor-toolbar {
+  padding: 0;
+}
+.vjsf-node-markdown .v-input--density-comfortable .editor-toolbar {
+  padding: 4px;
+}
+
+.vjsf-node-markdown .v-input--density-compact .CodeMirror-wrap {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.vjsf-node-markdown .v-input--density-comfortable .CodeMirror-wrap {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+</style>

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

@@ -19,7 +19,7 @@ export default defineComponent({
   },
   setup (props) {
     const fieldProps = computed(() => {
-      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['step', 'min', 'max'])
+      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['step', 'min', 'max', 'placeholder'])
       fieldProps.type = 'number'
       fieldProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, value && Number(value))
       return fieldProps

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

@@ -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/types.ts

@@ -17,6 +17,7 @@ import {
   TextFieldNode,
   TextareaNode,
   VerticalTabsNode,
+  StepperNode,
   ComboboxNode,
   CompileOptions
 } from '@json-layout/core'
@@ -39,6 +40,7 @@ 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'>>
@@ -60,4 +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, toRaw } 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'
@@ -22,8 +24,9 @@ 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,
@@ -42,9 +45,11 @@ const comps = {
   tabs: NodeTabs,
   'vertical-tabs': NodeVerticalTabs,
   'expansion-panels': NodeExpansionPanels,
+  stepper: NodeStepper,
   list: NodeList,
   combobox: NodeCombobox,
-  'number-combobox': NodeNumberCombobox
+  'number-combobox': NodeNumberCombobox,
+  markdown: NodeMarkdown
 }
 
 const instance = getCurrentInstance()
@@ -65,7 +70,7 @@ const props = defineProps({
     default: null
   },
   modelValue: {
-    type: [Object, String, Number, Boolean],
+    type: null,
     default: null
   },
   options: {
@@ -75,95 +80,16 @@ const props = defineProps({
   }
 })
 
-// const emit = defineEmits(['update:modelValue', 'update:state'])
-const emit = defineEmits({
-  /**
-   * @arg {any} data
-  */
-  'update:modelValue': (data) => true,
-  /**
-   * @arg {StatefulLayout} state
-  */
-  'update:state': (state) => true
-})
-
-/** @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()
-
-const fullOptions = computed(() => {
-  const options = {
-    ...defaultOptions,
-    readOnly: !!(form && (form.isDisabled.value || form.isReadonly.value)),
-    ...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(() => {
-  if (props.precompiledLayout) return props.precompiledLayout
-  return 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(toRaw(compiledLayout.value), toRaw(compiledLayout.value.skeletonTree), toRaw(fullOptions.value), toRaw(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
-})
+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),
+  emit,
+  compile,
+  computed(() => props.precompiledLayout)
+)
 
 </script>
 
@@ -182,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
+  }
+}