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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.3",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -28,6 +28,12 @@
         "types": "./types/components/*.d.ts"
       }
     },
+    "./composables/*": {
+      "import": {
+        "default": "./src/composables/*",
+        "types": "./types/composables/*.d.ts"
+      }
+    },
     "./compile": {
       "import": {
         "default": "./src/compile/index.js",
@@ -46,8 +52,7 @@
     "vuetify": "^3.4.2"
   },
   "dependencies": {
-    "@json-layout/core": "0.2.0",
-    "@json-layout/vocabulary": "0.2.0",
+    "@json-layout/core": "0.4.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "easymde": "^2.18.0",
@@ -57,13 +62,8 @@
   "devDependencies": {
     "@types/debug": "^4.1.8",
     "@types/ejs": "^3.1.2",
-    "relative-deps": "^1.0.7",
     "vitest": "^0.34.5",
     "vue": "^3.3.4",
     "vue-tsc": "^1.8.15"
-  },
-  "relativeDependencies": {
-    "@json-layout/core": "../../json-layout/core/",
-    "@json-layout/vocabulary": "../../json-layout/vocabulary/"
   }
 }

package/src/compat/v2.js

@@ -1,14 +1,11 @@
 import ajvModule from 'ajv'
-import rfdc from 'rfdc'
 import addFormats from 'ajv-formats'
-import { resolveRefs } from '@json-layout/core'
+import { resolveRefs, clone } from '@json-layout/core'
 import { isPartialGetItemsObj } from '@json-layout/vocabulary'
 
 // @ts-ignore
 const Ajv = /** @type {typeof ajvModule.default} */ (ajvModule)
 
-const clone = rfdc()
-
 const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
   if (!schema.layout) {
     /** @type import('@json-layout/vocabulary').PartialCompObject */

package/src/compile/index.js

@@ -37,7 +37,7 @@ function listComps (comps, layout) {
  * @param {string} baseImport
  * @returns {string}
  */
-export function compile (schema, baseImport = '@koumoul/vjsf/components') {
+export function compile (schema, baseImport = '@koumoul/vjsf') {
   const compiledLayout = compileLayout(schema, { code: true })
   const compiledLayoutCode = serializeCompiledLayout(compiledLayout)
   /** @type Set<string> */

package/src/compile/v-jsf-compiled.vue.ejs

@@ -5,10 +5,11 @@ import { StatefulLayout } from '@json-layout/core'
 import { ref, shallowRef, getCurrentInstance, useSlots } from 'vue'
 import { useElementSize } from '@vueuse/core'
 
-import { defaultOptions } from '<%- baseImport %>/options.js'
-import Tree from '<%- baseImport %>/tree.vue'
+import { defaultOptions } from '<%- baseImport %>/components/options.js'
+import Tree from '<%- baseImport %>/components/tree.vue'
+import { useVjsf, emits } from '<%- baseImport %>/composables/use-vjsf.js'
 <% comps.forEach(function(comp){ %>
-import <%= comp.replace(/-/g, '') %>Node from '<%- baseImport %>/nodes/<%= comp %>.vue'
+import <%= comp.replace(/-/g, '') %>Node from '<%- baseImport %>/components/nodes/<%= comp %>.vue'
 <% }); %>
 
 <%- compiledLayoutCode %>
@@ -21,55 +22,16 @@ if (!vueInstance?.appContext.app.component('vjsf-node-<%= comp %>')) {
 <% }); %>
 
 const props = defineProps(['modelValue', 'options'])
-const emit = defineEmits(['update:modelValue', 'update:state'])
-
-const statefulLayout = shallowRef(null)
-const stateTree = shallowRef(null)
-
-const el = ref(null)
-const { width } = useElementSize(el)
-
-const slots = useSlots()
-
-const fullOptions = computed(() => {
-  if (!width.value) return null
-  return {
-    ...defaultOptions,
-    ...props.options,
-    context: props.options.context ? JSON.parse(JSON.stringify(props.options.context)) : {},
-    width: Math.round(width.value),
-    vjsfSlots: { ...slots }
-  }
-})
-
-const initStatefulLayout = () => {
-  if (!fullOptions.value) return
-  const _statefulLayout = new StatefulLayout(compiledLayout, compiledLayout.skeletonTree, fullOptions.value, props.modelValue)
-  statefulLayout.value = _statefulLayout
-  stateTree.value = _statefulLayout.stateTree
-  _statefulLayout.events.on('update', () => {
-    stateTree.value = _statefulLayout.stateTree
-    emit('update:modelValue', _statefulLayout.data)
-    emit('update:state', _statefulLayout)
-  })
-  emit('update:state', _statefulLayout)
-}
-
-watch(fullOptions, (newOptions) => {
-  if (!newOptions) {
-    statefulLayout.value = null
-  } else 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(Object.keys(emits))
+
+const { el, statefulLayout, stateTree } = useVjsf(
+  null,
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  emit,
+  null,
+  computed(() => compiledLayout)
+)
 </script>
 
 <template>

package/src/components/nodes/combobox.vue

@@ -37,7 +37,6 @@ export default defineComponent({
       if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
       lastStateTree = props.statefulLayout.stateTree
       lastContext = props.statefulLayout.options.context ?? null
-      console.log('HAS ITEMS ?', hasItems.value)
       if (hasItems.value) {
         loading.value = true
         items.value = await props.statefulLayout.getItems(props.modelValue)
@@ -52,6 +51,7 @@ export default defineComponent({
     const fieldProps = computed(() => {
       const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
       fieldProps.loading = loading.value
+      fieldProps.returnObject = false
       if (hasItems.value) fieldProps.items = items.value
       if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
       if (props.modelValue.layout.multiple) {

package/src/components/nodes/list.vue

@@ -1,10 +1,12 @@
 <script setup>
+import { watch, computed, ref } from 'vue'
 import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon } from 'vuetify/components'
-import { isSection } from '@json-layout/core'
+import { isSection, clone } from '@json-layout/core'
 import Node from '../node.vue'
-import clone from '../../utils/clone.js'
+import { moveArrayItem } from '../../utils/arrays.js'
+import useDnd from '../../composables/use-dnd.js'
 
-defineProps({
+const props = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../types.js').VjsfListNode> */
     type: Object,
@@ -17,96 +19,177 @@ defineProps({
   }
 })
 
+/* use composable for drag and drop */
+const { activeDnd, sortableArray, draggable, 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 })
+
+/* manage hovered and edited items */
+const editedItem = computed(() => {
+  return props.statefulLayout.activeItems[props.modelValue.fullKey]
+})
+const hoveredItem = ref(1)
+const activeItem = computed(() => {
+  if (
+    props.modelValue.layout.listActions.includes('edit') &&
+    props.modelValue.layout.listEditMode === 'inline-single' &&
+    editedItem.value !== undefined
+  ) {
+    return editedItem.value
+  }
+  return hoveredItem.value
+})
+
+const buttonDensity = computed(() => {
+  if (props.modelValue.options.density === 'default') return 'comfortable'
+  return props.modelValue.options.density
+})
+
 </script>
 
 <template>
-  <v-list :density="modelValue.options.density">
-    <v-list-subheader v-if="modelValue.layout.title">
-      {{ modelValue.layout.title }}
-    </v-list-subheader>
-    <v-list-item
-      v-for="(child, childIndex) of modelValue.children"
-      :key="child.key"
-    >
-      <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>
-      <template #append>
-        <v-list-item-action
-          v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
-          class="ml-1"
-        >
-          <v-btn
-            v-if="child.options.readOnly"
-            :title="modelValue.messages.edit"
-            icon="mdi-pencil"
-            variant="text"
-            color="primary"
-            :density="modelValue.options.density"
-            @click="statefulLayout.activateItem(modelValue, childIndex)"
-          />
-          <v-btn
-            v-else
-            :title="modelValue.messages.edit"
-            icon="mdi-pencil"
-            variant="flat"
-            color="primary"
-            :density="modelValue.options.density"
-            @click="statefulLayout.deactivateItem(modelValue)"
-          />
-        </v-list-item-action>
-        <v-list-item-action
-          v-if="modelValue.layout.listActions.includes('delete') || modelValue.layout.listActions.includes('duplicate')"
-          class="ml-1"
+  <v-sheet :elevation="1">
+    <v-list :density="modelValue.options.density">
+      <v-list-subheader v-if="modelValue.layout.title">
+        {{ modelValue.layout.title }}
+      </v-list-subheader>
+      <template
+        v-for="(child, childIndex) of sortableArray"
+        :key="props.modelValue.children.findIndex(c => c === child)"
+      >
+        <v-list-item
+          v-bind="itemBind(childIndex)"
+          :density="modelValue.options.density"
+          :draggable="draggable === childIndex"
+          :variant="editedItem === childIndex ? 'outlined' : 'flat'"
+          class="pa-1 vjsf-list-item"
+          @mouseenter="hoveredItem = childIndex"
+          @mouseleave="hoveredItem = -1"
         >
-          <v-menu location="bottom end">
-            <template #activator="{props: activatorProps}">
-              <v-btn
-                v-bind="activatorProps"
-                icon="mdi-dots-vertical"
-                variant="plain"
-                :density="modelValue.options.density"
-              />
-            </template>
-            <v-list :density="modelValue.options.density">
-              <v-list-item
-                v-if="modelValue.layout.listActions.includes('delete')"
-                base-color="warning"
-                @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), ...modelValue.data.slice(childIndex + 1)])"
+          <v-row class="ma-0">
+            <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>
+          <template
+            v-if="activeItem === childIndex"
+            #append
+          >
+            <div>
+              <v-list-item-action
+                v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
               >
-                <template #prepend>
-                  <v-icon icon="mdi-delete" />
-                </template>
-                {{ modelValue.messages.delete }}
-              </v-list-item>
-
-              <v-list-item
-                v-if="modelValue.layout.listActions.includes('duplicate')"
-                @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), clone(child.data), ...modelValue.data.slice(childIndex)])"
+                <v-btn
+                  v-if="editedItem !== childIndex"
+                  :title="modelValue.messages.edit"
+                  icon="mdi-pencil"
+                  variant="text"
+                  color="primary"
+                  :density="buttonDensity"
+                  @click="statefulLayout.activateItem(modelValue, childIndex)"
+                />
+                <v-btn
+                  v-else
+                  :title="modelValue.messages.edit"
+                  icon="mdi-pencil"
+                  variant="flat"
+                  color="primary"
+                  :density="buttonDensity"
+                  @click="statefulLayout.deactivateItem(modelValue)"
+                />
+              </v-list-item-action>
+              <v-list-item-action
+                v-if="editedItem === undefined && modelValue.layout.listActions.includes('sort') && activeDnd"
+              >
+                <v-btn
+                  :title="modelValue.messages.sort"
+                  icon="mdi-arrow-up-down"
+                  variant="plain"
+                  :density="buttonDensity"
+                  v-bind="handleBind(childIndex)"
+                />
+              </v-list-item-action>
+              <v-list-item-action
+                v-if="editedItem === undefined && (modelValue.layout.listActions.includes('delete') || modelValue.layout.listActions.includes('duplicate') || modelValue.layout.listActions.includes('sort'))"
               >
-                <template #prepend>
-                  <v-icon icon="mdi-content-duplicate" />
-                </template>
-                {{ modelValue.messages.duplicate }}
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-list-item-action>
+                <v-menu location="bottom end">
+                  <template #activator="{props: activatorProps}">
+                    <v-btn
+                      v-bind="activatorProps"
+                      icon="mdi-dots-vertical"
+                      variant="plain"
+                      slim
+                      :density="buttonDensity"
+                    />
+                  </template>
+                  <v-list :density="modelValue.options.density">
+                    <v-list-item
+                      v-if="modelValue.layout.listActions.includes('delete')"
+                      base-color="warning"
+                      @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), ...modelValue.data.slice(childIndex + 1)])"
+                    >
+                      <template #prepend>
+                        <v-icon icon="mdi-delete" />
+                      </template>
+                      {{ modelValue.messages.delete }}
+                    </v-list-item>
+                    <v-list-item
+                      v-if="modelValue.layout.listActions.includes('duplicate')"
+                      @click="statefulLayout.input(modelValue, [...modelValue.data.slice(0, childIndex), clone(child.data), ...modelValue.data.slice(childIndex)])"
+                    >
+                      <template #prepend>
+                        <v-icon icon="mdi-content-duplicate" />
+                      </template>
+                      {{ modelValue.messages.duplicate }}
+                    </v-list-item>
+                    <v-list-item
+                      v-if="modelValue.layout.listActions.includes('sort')"
+                      @click="statefulLayout.input(modelValue, moveArrayItem(modelValue.data, childIndex, childIndex - 1))"
+                    >
+                      <template #prepend>
+                        <v-icon icon="mdi-arrow-up" />
+                      </template>
+                      {{ modelValue.messages.up }}
+                    </v-list-item>
+                    <v-list-item
+                      v-if="modelValue.layout.listActions.includes('sort')"
+                      @click="statefulLayout.input(modelValue, moveArrayItem(modelValue.data, childIndex, childIndex + 1))"
+                    >
+                      <template #prepend>
+                        <v-icon icon="mdi-arrow-down" />
+                      </template>
+                      {{ modelValue.messages.down }}
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </v-list-item-action>
+            </div>
+          </template>
+        </v-list-item>
+        <v-divider v-if="childIndex < modelValue.children.length - 1" />
       </template>
-    </v-list-item>
-    <v-list-item v-if="!modelValue.options.readOnly && modelValue.layout.listActions.includes('add')">
-      <v-btn
-        color="primary"
-        :density="modelValue.options.density"
-        @click="statefulLayout.input(modelValue, (modelValue.data || []).concat([clone(modelValue.skeleton.childrenTrees?.[0]?.root.defaultData)]), (modelValue.data || []).length)"
-      >
-        {{ modelValue.messages.addItem }}
-      </v-btn>
-    </v-list-item>
-  </v-list>
+      <v-list-item v-if="!modelValue.options.readOnly && modelValue.layout.listActions.includes('add')">
+        <v-spacer />
+        <v-btn
+          color="primary"
+          :density="modelValue.options.density"
+          @click="statefulLayout.input(modelValue, (modelValue.data ?? []).concat([undefined]))"
+        >
+          {{ modelValue.messages.addItem }}
+        </v-btn>
+        <v-spacer />
+      </v-list-item>
+    </v-list>
+  </v-sheet>
 </template>
+
+<style>
+.vjsf-list-item .v-list-item__append {
+  height: 100%;
+  align-items: start;
+}
+</style>