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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.4",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -52,7 +52,7 @@
     "vuetify": "^3.4.2"
   },
   "dependencies": {
-    "@json-layout/core": "0.4.0",
+    "@json-layout/core": "0.5.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "easymde": "^2.18.0",

package/src/components/fragments/help-message.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { VAlert, VBtn } from 'vuetify/components'
+import { VAlert, VBtn, VSlideXReverseTransition } from 'vuetify/components'
 import { ref } from 'vue'
 
 defineProps({

package/src/components/node.vue

@@ -1,9 +1,11 @@
 <script setup>
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
 import { VCol } from 'vuetify/components'
 import NodeSlot from './fragments/node-slot.vue'
 import HelpMessage from './fragments/help-message.vue'
 
-defineProps({
+const props = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('./types.js').VjsfNode> */
     type: Object,
@@ -22,12 +24,23 @@ const beforeAfterClasses = {
   comfortable: 'my-2',
   default: 'my-3'
 }
+
+const theme = useTheme()
+
+const nodeClasses = computed(() => {
+  let classes = `vjsf-node vjsf-node-${props.modelValue.layout.comp} vjsf-density-${props.modelValue.options.density}`
+  if (props.modelValue.options.readOnly) classes += ' vjsf-readonly'
+  if (props.modelValue.options.summary) classes += ' vjsf-summary'
+  if (theme.current.value.dark) classes += ' vjsf-dark'
+  return classes
+})
+
 </script>
 
 <template>
   <v-col
     :cols="modelValue.cols"
-    :class="`vjsf-node vjsf-node-${modelValue.layout.comp}`"
+    :class="nodeClasses"
   >
     <node-slot
       v-if="modelValue.layout.slots?.before"

package/src/components/nodes/autocomplete.vue

@@ -87,9 +87,3 @@ export default defineComponent({
 })
 
 </script>
-
-<template>
-  <v-select
-    v-bind="fieldProps"
-  />
-</template>

package/src/components/nodes/expansion-panels.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer } from 'vuetify/components'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer, VRow, VIcon } from 'vuetify/components'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'

package/src/components/nodes/list.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { watch, computed, ref } from 'vue'
-import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon } from 'vuetify/components'
+import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon, VSheet, VSpacer, VDivider, VRow, VListSubheader } from 'vuetify/components'
 import { isSection, clone } from '@json-layout/core'
 import Node from '../node.vue'
 import { moveArrayItem } from '../../utils/arrays.js'
@@ -20,7 +20,7 @@ const props = defineProps({
 })
 
 /* use composable for drag and drop */
-const { activeDnd, sortableArray, draggable, itemBind, handleBind } = useDnd(props.modelValue.children, () => {
+const { activeDnd, sortableArray, draggable, hovered, dragging, itemBind, handleBind } = useDnd(props.modelValue.children, () => {
   props.statefulLayout.input(props.modelValue, sortableArray.value.map((child) => child.data))
 })
 watch(() => props.modelValue.children, (array) => { sortableArray.value = array })
@@ -29,7 +29,7 @@ watch(() => props.modelValue.children, (array) => { sortableArray.value = array
 const editedItem = computed(() => {
   return props.statefulLayout.activeItems[props.modelValue.fullKey]
 })
-const hoveredItem = ref(1)
+const menuOpened = ref(-1)
 const activeItem = computed(() => {
   if (
     props.modelValue.layout.listActions.includes('edit') &&
@@ -38,7 +38,9 @@ const activeItem = computed(() => {
   ) {
     return editedItem.value
   }
-  return hoveredItem.value
+  if (dragging.value !== -1) return -1
+  if (menuOpened.value !== -1) return menuOpened.value
+  return hovered.value
 })
 
 const buttonDensity = computed(() => {
@@ -64,8 +66,6 @@ const buttonDensity = computed(() => {
           :draggable="draggable === childIndex"
           :variant="editedItem === childIndex ? 'outlined' : 'flat'"
           class="pa-1 vjsf-list-item"
-          @mouseenter="hoveredItem = childIndex"
-          @mouseleave="hoveredItem = -1"
         >
           <v-row class="ma-0">
             <node
@@ -116,7 +116,10 @@ const buttonDensity = computed(() => {
               <v-list-item-action
                 v-if="editedItem === undefined && (modelValue.layout.listActions.includes('delete') || modelValue.layout.listActions.includes('duplicate') || modelValue.layout.listActions.includes('sort'))"
               >
-                <v-menu location="bottom end">
+                <v-menu
+                  location="bottom end"
+                  @update:model-value="value => {menuOpened = value ? childIndex : -1}"
+                >
                   <template #activator="{props: activatorProps}">
                     <v-btn
                       v-bind="activatorProps"

package/src/components/nodes/markdown.vue

@@ -1,6 +1,8 @@
 <script>
 import { defineComponent, h, computed, onMounted, ref, onUnmounted, watch } from 'vue'
+import { useTheme } from 'vuetify'
 import { VInput, VLabel } from 'vuetify/components'
+import { marked } from 'marked'
 import { getInputProps } from '../../utils/props.js'
 import { getCompSlots } from '../../utils/slots.js'
 import 'easymde/dist/easymde.min.css'
@@ -18,26 +20,42 @@ export default defineComponent({
       required: true
     }
   },
-  setup (props) {
+  setup (props, { expose }) {
     /** @type {import('vue').Ref<null | HTMLElement>} */
     const element = ref(null)
 
+    const renderedValue = computed(() => {
+      return props.modelValue.data && marked.parse(props.modelValue.data)
+    })
+
     const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
     const fieldSlots = computed(() => {
       const fieldSlots = getCompSlots(props.modelValue, props.statefulLayout)
-      fieldSlots.default = () => [
-        h('div', { style: 'width:100%' }, [
+      fieldSlots.default = () => {
+        const children = [
           h(VLabel, { text: fieldProps.value.label }),
-          h('textarea', { ref: element, style: 'display:none' })
-        ])
-      ]
+          h('textarea', { ref: element })
+        ]
+        if (props.modelValue.options.summary) {
+          children.push(h('div', { innerHTML: renderedValue.value }))
+        }
+        return h('div', { class: 'vjsf-node-markdown-content' }, children)
+      }
       return fieldSlots
     })
 
+    /** @type {ReturnType<typeof setTimeout> | null} */
+    let blurTimeout = null
+
     /** @type {EasyMDE | null} */
     let easymde = null
 
     const initEasyMDE = async () => {
+      if (easymde) {
+        easymde.toTextArea()
+        easymde = null
+      }
+      if (props.modelValue.options.readOnly) return
       if (!element.value) throw new Error('component was not mounted for markdown editor')
 
       const EasyMDE = (await import('easymde')).default
@@ -158,12 +176,9 @@ export default defineComponent({
           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)
 
@@ -172,9 +187,8 @@ export default defineComponent({
         changed = true
         if (easymde) props.statefulLayout.input(props.modelValue, easymde.value())
       })
-      /** @type {ReturnType<typeof setTimeout> | null} */
-      let blurTimeout = null
       easymde.codemirror.on('blur', () => {
+        console.log('onblur')
         // timeout to prevent triggering save when clicking on a menu button
         blurTimeout = setTimeout(() => {
           if (changed) props.statefulLayout.blur(props.modelValue)
@@ -204,32 +218,103 @@ export default defineComponent({
     })
 
     // update easymde config from outside
-    watch(() => [props.modelValue.messages, props.modelValue.options.easyMDEOptions], (newValues, oldValues) => {
-      if (newValues[0] !== oldValues[0] || newValues[1] !== oldValues[1]) {
+    watch(() => [props.modelValue.options.readOnly, props.modelValue.messages, props.modelValue.options.easyMDEOptions], (newValues, oldValues) => {
+      if (newValues[0] !== oldValues[0] || newValues[1] !== oldValues[1] || newValues[2] !== oldValues[2]) {
         initEasyMDE()
       }
     })
 
     props.statefulLayout.events.on('autofocus', () => {
+      console.log('focus code mirror ?')
       if (props.modelValue.autofocus && easymde) {
         easymde.codemirror.focus()
       }
     })
 
-    return () => h(VInput, fieldProps.value, fieldSlots.value)
+    const theme = useTheme()
+    const darkStyle = computed(() => getDarkStyle(theme))
+
+    return () => [
+      h('style', { innerHTML: darkStyle.value }),
+      h(VInput, fieldProps.value, fieldSlots.value)
+    ]
   }
 })
 
+const getDarkStyle = (/** @type {import('vuetify').ThemeInstance} */theme) => {
+  // Inspired by https://github.com/Ionaru/easy-markdown-editor/issues/131#issuecomment-1738202589
+  return `
+.vjsf-node-markdown.vjsf-dark .EasyMDEContainer .CodeMirror {
+    color: white;
+    border-color: ${theme.current.value.variables['border-color']};
+    background-color: ${theme.current.value.colors.surface};
+}
+.vjsf-node-markdown.vjsf-dark .EasyMDEContainer .cm-s-easymde .CodeMirror-cursor {
+    border-color: white;
+}
+.vjsf-node-markdown.vjsf-dark .CodeMirror-cursor {
+    border-left:1px solid white;
+    border-right:none;width:0;
+}
+.vjsf-node-markdown.vjsf-dark .EasyMDEContainer .editor-toolbar > * {
+    border-color: ${theme.current.value.colors.surface};
+}
+.vjsf-node-markdown.vjsf-dark .editor-toolbar {
+    border-top: 1px solid ${theme.current.value.variables['border-color']};
+    border-left: 1px solid ${theme.current.value.variables['border-color']};
+    border-right: 1px solid ${theme.current.value.variables['border-color']};
+}
+.vjsf-node-markdown.vjsf-dark .editor-toolbar i.separator {
+    border-left: 1px solid ${theme.current.value.variables['border-color']};
+    border-right: 1px solid ${theme.current.value.variables['border-color']};
+}
+.vjsf-node-markdown.vjsf-dark .EasyMDEContainer .editor-toolbar > .active, .editor-toolbar > button:hover, .editor-preview pre, .cm-s-easymde .cm-comment {
+    background-color: ${theme.current.value.colors.surface};
+}
+.vjsf-node-markdown.vjsf-dark .EasyMDEContainer .CodeMirror-fullscreen {
+    background: ${theme.current.value.colors.surface};
+}
+.vjsf-node-markdown.vjsf-dark .editor-toolbar.fullscreen {
+    background: ${theme.current.value.colors.surface};
+}
+.vjsf-node-markdown.vjsf-dark .editor-preview {
+    background: ${theme.current.value.colors.surface};
+}
+.vjsf-node-markdown.vjsf-dark .editor-preview-side {
+    border-color: ${theme.current.value.variables['border-color']};
+}
+.vjsf-node-markdown.vjsf-dark .CodeMirror-selected {
+    background: ${theme.current.value.colors.secondary};
+}
+.vjsf-node-markdown.vjsf-dark .CodeMirror-focused .CodeMirror-selected {
+    background: ${theme.current.value.colors.secondary};
+}
+.vjsf-node-markdown.vjsf-dark .CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection {
+    background:${theme.current.value.colors.secondary}
+}
+.vjsf-node-markdown.vjsf-dark .CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection {
+    background:${theme.current.value.colors.secondary}
+}
+.vjsf-node-markdown.vjsf-dark .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
+    background: ${theme.current.value.colors.secondary}
+}
+  `
+}
+
 </script>
 
 <style>
+.vjsf-node-markdown .vjsf-node-markdown-content {
+  width: 100%;
+}
+
+/* adjust to density */
 .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;
@@ -239,4 +324,18 @@ export default defineComponent({
   padding-bottom: 6px;
 }
 
+/* adjust to readOnly/summary mode */
+.vjsf-node-markdown.vjsf-readonly .EasyMDEContainer .CodeMirror  {
+  border-width: 0;
+  padding: 0;
+}
+.vjsf-node-markdown.vjsf-summary .vjsf-node-markdown-content  {
+  height: 96px;
+  overflow: hidden;
+  mask-image: linear-gradient(180deg, #000 66%, transparent 90%);
+}
+.vjsf-node-markdown.vjsf-readonly .vjsf-node-markdown-content textarea {
+  display: none;
+}
+
 </style>

package/src/components/nodes/one-of-select.vue

@@ -1,5 +1,5 @@
 <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'

package/src/components/nodes/section.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { VRow } from 'vuetify/components'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
 

package/src/components/nodes/stepper.vue

@@ -1,6 +1,6 @@
 <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'

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'

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

@@ -27,3 +27,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,5 +1,5 @@
 <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'
@@ -18,12 +18,33 @@ export default defineComponent({
     }
   },
   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,6 +1,6 @@
 <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'

package/src/composables/use-dnd.js

@@ -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

@@ -84,6 +84,7 @@ export const useVjsf = (schema, modelValue, options, emit, compile, precompiledL
     })
     emit('update:state', _statefulLayout)
     _statefulLayout.events.on('autofocus', () => {
+      console.log('autofocus ?')
       if (!el.value) return
       // @ts-ignore
       const autofocusNodeElement = el.value.querySelector('.vjsf-input--autofocus')
@@ -96,7 +97,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 +114,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 }
 }