@koumoul/vjsf 3.0.0-beta.17 → 3.0.0-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.17",
+  "version": "3.0.0-beta.19",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -75,7 +75,7 @@
     "vuetify": "^3.4.9"
   },
   "dependencies": {
-    "@json-layout/core": "0.16.3",
+    "@json-layout/core": "0.16.4",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"

package/src/compat/v2.js

@@ -9,7 +9,7 @@ const Ajv = /** @type {typeof ajvModule.default} */ (ajvModule)
 /**
  *
  * @param {string} expression
- * @returns {{expr: string, pure: boolean}}
+ * @returns {{type: 'js-eval' | undefined, expr: string, pure: boolean}}
  */
 const fiexEvalExpression = (expression) => {
   let expr = expression

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

@@ -4,15 +4,17 @@
       <v-alert
         v-show="show"
         color="info"
+        :density="node.options.density"
       >
         <div v-html="node.layout.help" />
       </v-alert>
     </v-slide-x-reverse-transition>
     <v-btn
       color="info"
-      class="vjsf-help-message-toggle"
+      :class="`vjsf-help-message-toggle vjsf-help-message-toggle-${node.options.density}`"
       :icon="show ? 'mdi-close-circle' : 'mdi-information'"
       density="compact"
+      :size="node.options.density !== 'default' ? 'small' : 'default'"
       :title="show ? '' : node.messages.showHelp"
       @click="show = !show"
     />
@@ -45,5 +47,13 @@ const show = ref(false)
   right: -4px;
   z-index: 1;
 }
+.vjsf-help-message-toggle-comfortable {
+  top: -4px;
+  right: -4px;
+}
+.vjsf-help-message-toggle-compact {
+  top: -4px;
+  right: -4px;
+}
 </style>
 ../../../types.js

package/src/components/node.vue

@@ -56,7 +56,7 @@ if (props.modelValue.layout.comp !== 'none' && !props.statefulLayout.options.nod
     />
 
     <help-message
-      v-if="modelValue.layout.help"
+      v-if="modelValue.layout.help && !modelValue.options.summary"
       :node="modelValue"
       :class="beforeAfterClasses[modelValue.options.density]"
     />

package/src/components/nodes/list.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { watch, computed, ref } from 'vue'
+import { useTheme } from 'vuetify'
 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'
@@ -19,6 +20,8 @@ const props = defineProps({
   }
 })
 
+const theme = useTheme()
+
 /* use composable for drag and drop */
 const { activeDnd, sortableArray, draggable, hovered, dragging, itemBind, handleBind } = useDnd(props.modelValue.children, () => {
   props.statefulLayout.input(props.modelValue, sortableArray.value.map((child) => child.data))
@@ -54,10 +57,39 @@ const pushEmptyItem = () => {
   props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
 }
 
+/**
+ * @param {number} childIndex
+ */
+const deleteItem = (childIndex) => {
+  const newData = [...props.modelValue.data.slice(0, childIndex), ...props.modelValue.data.slice(childIndex + 1)]
+  props.statefulLayout.input(props.modelValue, newData)
+  menuOpened.value = -1
+}
+
+/**
+ * @param {import('@json-layout/core').StateNode} child
+ * @param {number} childIndex
+ */
+const duplicateItem = (child, childIndex) => {
+  const newData = [...props.modelValue.data.slice(0, childIndex), clone(child.data), ...props.modelValue.data.slice(childIndex)]
+  props.statefulLayout.input(props.modelValue, newData)
+  props.statefulLayout.activateItem(props.modelValue, childIndex + 1)
+  menuOpened.value = -1
+}
+
+const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').StateNode} */child, /** @type {number} */childIndex) => {
+  if (editedItem.value === childIndex) return theme.current.value.colors.primary
+  if (child.validated && (child.error || child.childError)) return theme.current.value.colors.error
+  return 'transparent'
+})
+
 </script>
 
 <template>
-  <v-sheet :elevation="1">
+  <v-sheet
+    :elevation="2"
+    rounded
+  >
     <v-list :density="modelValue.options.density">
       <v-list-subheader v-if="modelValue.layout.title">
         {{ modelValue.layout.title }}
@@ -70,7 +102,8 @@ const pushEmptyItem = () => {
           v-bind="itemBind(childIndex)"
           :density="modelValue.options.density"
           :draggable="draggable === childIndex"
-          :variant="editedItem === childIndex ? 'outlined' : 'flat'"
+          variant="flat"
+          :style="`border: 1px solid ${itemBorderColor(child, childIndex)}`"
           class="pa-1 vjsf-list-item"
         >
           <v-row class="ma-0">
@@ -82,100 +115,110 @@ const pushEmptyItem = () => {
             />
           </v-row>
           <template
-            v-if="activeItem === childIndex"
+            v-if="!modelValue.options.readOnly && modelValue.layout.listActions.length"
             #append
           >
             <div>
-              <v-list-item-action
-                v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
-              >
+              <v-list-item-action v-if="activeItem !== childIndex">
                 <v-btn
-                  v-if="editedItem !== childIndex"
-                  :title="modelValue.messages.edit"
-                  icon="mdi-pencil"
+                  style="visibility:hidden"
                   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'))"
-              >
-                <v-menu
-                  location="bottom end"
-                  @update:model-value="value => {menuOpened = value ? childIndex : -1}"
+              <template v-else>
+                <v-list-item-action
+                  v-if="modelValue.layout.listActions.includes('edit') && modelValue.layout.listEditMode === 'inline-single'"
                 >
-                  <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>
+                  <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-close"
+                    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'))"
+                >
+                  <v-menu
+                    location="bottom end"
+                    @update:model-value="value => {menuOpened = value ? childIndex : -1}"
+                  >
+                    <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="deleteItem(childIndex)"
+                      >
+                        <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="duplicateItem(child, 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>
+              </template>
             </div>
           </template>
         </v-list-item>

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

@@ -1,7 +1,8 @@
 <script setup>
 import { VSelect, VRow } from 'vuetify/components'
-import { shallowRef, watch } from 'vue'
+import { shallowRef, watch, computed, h } from 'vue'
 import { isSection } from '@json-layout/core'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
 import Node from '../node.vue'
 
 const props = defineProps({
@@ -33,19 +34,21 @@ const onChange = (/** @type import('@json-layout/core').SkeletonTree */childTree
   props.statefulLayout.activateItem(props.modelValue, props.modelValue.skeleton.childrenTrees.indexOf(childTree))
 }
 
+const fieldProps = computed(() => {
+  const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
+  fieldProps.modelValue = activeChildTree.value
+  fieldProps['onUpdate:modelValue'] = onChange
+  fieldProps.returnObject = true
+  fieldProps.items = props.modelValue.skeleton.childrenTrees
+  fieldProps.itemTitle = 'title'
+  return fieldProps
+})
 </script>
 
 <template>
   <v-select
     v-if="modelValue.skeleton.childrenTrees"
-    v-model="activeChildTree"
-    :items="modelValue.skeleton.childrenTrees"
-    item-title="title"
-    return-object
-    :label="modelValue.layout.label"
-    :error-messages="modelValue.validated ? modelValue.error : null"
-    :density="modelValue.options.density"
-    @update:model-value="onChange"
+    v-bind="fieldProps"
   />
   <v-row v-if="modelValue.children?.[0]">
     <node

package/src/composables/use-dnd.js

@@ -42,6 +42,7 @@ export default function useDnd (array, callback) {
       dragging.value = itemIndex
     },
     onDragend: () => {
+      hovered.value = itemIndex
       dragging.value = -1
       callback()
     }

package/types/compat/v2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AAqHA;;;;;;GAMG;AACH,kCALW,MAAM,+CAEN,MAAM,0BAkBhB;sBA3IqB,KAAK"}
+{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AAwIA;;;;;;GAMG;AACH,kCALW,MAAM,+CAEN,MAAM,0BAkBhB;sBA9JqB,KAAK"}

package/types/components/vjsf.vue.d.ts

@@ -1,12 +1,12 @@
 declare const _default: import("vue").DefineComponent<{}, {
     $emit: ((event: "update:modelValue", data: any) => void) & ((event: "update:state", state: import("../types.js").VjsfStatefulLayout) => void);
-    options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null;
     modelValue: any;
+    options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null;
     schema: Record<string, any>;
     precompiledLayout: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout;
     $props: {
-        readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null | undefined;
         readonly modelValue?: any;
+        readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots">> | null | undefined;
         readonly schema?: Record<string, any> | undefined;
         readonly precompiledLayout?: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout | undefined;
     };

package/types/composables/use-dnd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-dnd.d.ts","sourceRoot":"","sources":["../../src/composables/use-dnd.js"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,wDAHW,MAAM,IAAI;;;;;;0BAoBU,MAAM;;;;;;;4BAuBJ,MAAM;;;;EAmBtC"}
+{"version":3,"file":"use-dnd.d.ts","sourceRoot":"","sources":["../../src/composables/use-dnd.js"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,wDAHW,MAAM,IAAI;;;;;;0BAoBU,MAAM;;;;;;;4BAwBJ,MAAM;;;;EAmBtC"}