@ditojs/admin 2.94.1 → 2.96.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.94.1",
+  "version": "2.96.0",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/main/packages/admin",
@@ -24,6 +24,12 @@
     "dist/",
     "types/"
   ],
+  "scripts": {
+    "build": "vite build",
+    "watch": "pnpm run build --mode 'development' --watch",
+    "prepare": "pnpm run build",
+    "types": "tsc --noEmit types/index.d.ts"
+  },
   "engines": {
     "node": ">= 24.0.0"
   },
@@ -34,8 +40,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.94.0",
-    "@ditojs/utils": "^2.94.0"
+    "@ditojs/ui": "^2.96.0",
+    "@ditojs/utils": "^2.96.0"
   },
   "peerDependencies": {
     "@kyvg/vue3-notification": "^3.4.2",
@@ -83,14 +89,9 @@
     "vue-upload-component": "^3.1.17"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.94.0",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.3"
+    "@ditojs/build": "^2.96.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10"
   },
-  "gitHead": "7bb40e9e490632e20ceaf92907b4ff7b27484e26",
-  "scripts": {
-    "build": "vite build",
-    "watch": "pnpm run build --mode 'development' --watch",
-    "types": "tsc --noEmit types/index.d.ts"
-  }
-}
+  "gitHead": "689f4d061088500884114c5ced79d68209717bc5"
+}

package/src/components/DitoCreateButton.vue

@@ -63,12 +63,20 @@ export default DitoComponent.component('DitoCreateButton', {
     path: { type: String, required: true },
     verb: { type: String, required: true },
     text: { type: String, default: null },
-    disabled: { type: Boolean, required: true }
+    disabled: { type: Boolean, required: true },
+    insertIndex: { type: Number, default: null }
   },
 
   computed: {
     forms() {
-      return getFormSchemas(this.schema, this.context)
+      // When inserting per-item, `this.schema` is the item's form, not the
+      // list schema. Fall back to `sourceSchema` (the parent list's schema via
+      // `meta.schema`) so all creatable forms are discoverable in the pulldown.
+      const schema =
+        this.insertIndex != null
+          ? this.sourceSchema || this.schema
+          : this.schema
+      return getFormSchemas(schema, this.context)
     },
 
     creatableForms() {
@@ -107,7 +115,7 @@ export default DitoComponent.component('DitoCreateButton', {
     createItem(form, type = null) {
       if (!this.shouldDisableSchema(form)) {
         if (this.isInlined) {
-          this.sourceComponent.createItem(form, type)
+          this.sourceComponent.createItem(form, type, this.insertIndex)
         } else {
           const { creatable } = this.schema
           const query = {

package/src/components/DitoEditButtons.vue

@@ -31,8 +31,9 @@ DitoButtons.dito-edit-buttons.dito-buttons--round(
     :nested="nested"
     :path="createPath"
     :verb="verbs.create"
-    :text="createButtonText"
+    :text="insertIndex != null ? null : createButtonText"
     :disabled="isCreatableDisabled"
+    :insertIndex="insertIndex"
   )
   button.dito-button(
     v-if="deletable"
@@ -67,7 +68,8 @@ export default DitoComponent.component('DitoEditButtons', {
     creatable: { type: Boolean, default: false },
     deletable: { type: Boolean, default: false },
     editPath: { type: String, default: null },
-    createPath: { type: String, default: null }
+    createPath: { type: String, default: null },
+    insertIndex: { type: Number, default: null }
   },
 
   computed: {

package/src/components/DitoLabel.vue

@@ -102,6 +102,8 @@ export default DitoComponent.component('DitoLabel', {
   position: relative;
   // Vertically center all items in the label, e.g. chevron, edit-buttons.
   align-items: center;
+  // Let nested labels with ellipsis shrink below their content width.
+  min-width: 0;
   min-height: $input-height;
   margin-right: $form-spacing-half; // When inlined.
 

package/src/components/DitoSchema.vue

@@ -825,6 +825,8 @@ export default DitoComponent.component('DitoSchema', {
 .dito-schema-header {
   display: flex;
   justify-content: space-between;
+  // Let nested labels with ellipsis shrink below their content width.
+  min-width: 0;
 
   .dito-header & {
     // When teleported into main header.

package/src/components/DitoSchemaInlined.vue

@@ -21,7 +21,7 @@ DitoSchema.dito-schema-inlined(
   //- others in `TypeList` as a scope, for better handling of layout.
   template(#edit-buttons)
     DitoEditButtons(
-      v-if="deletable || draggable || editable"
+      v-if="deletable || draggable || editable || insertIndex != null"
       :schema="schema"
       :dataPath="dataPath"
       :data="data"
@@ -32,6 +32,9 @@ DitoSchema.dito-schema-inlined(
       :draggable="draggable"
       :editable="editable"
       :editPath="editPath"
+      :creatable="insertIndex != null"
+      :createPath="createPath"
+      :insertIndex="insertIndex"
       @delete="$emit('delete')"
     )
 </template>
@@ -59,6 +62,8 @@ export default DitoComponent.component('DitoSchemaInlined', {
     editable: { type: Boolean, default: false },
     deletable: { type: Boolean, default: false },
     editPath: { type: String, default: null },
+    createPath: { type: String, default: null },
+    insertIndex: { type: Number, default: null },
     labelNode: { type: HTMLElement, default: null },
     accumulatedBasis: { type: Number, default: null }
   },
@@ -87,10 +92,9 @@ export default DitoComponent.component('DitoSchemaInlined', {
   grid-template-columns: 100%;
 
   &:not(:hover, .dito-schema--open) {
-    > .dito-schema-header {
-      > .dito-clipboard {
-        display: none;
-      }
+    > .dito-schema-header
+      .dito-button:not(.dito-button--edit, .dito-button--remove) {
+      display: none;
     }
   }
 }

package/src/components/DitoTreeItem.vue

@@ -321,8 +321,14 @@ export default DitoComponent.component('DitoTreeItem', {
   --chevron-indent: #{$chevron-indent};
 
   overflow: hidden;
+  padding: 0 $input-padding-hor;
+  margin: 0 (-$input-padding-hor);
 
   > .dito-tree-header {
+    // Extend header into item padding so active background reaches the edge:
+    margin: 0 (-$input-padding-hor);
+    padding: 0 $input-padding-hor;
+
     > .dito-tree-branch,
     > .dito-tree-leaf {
       // Use `--level` CSS variable to calculated the accumulated indent
@@ -356,8 +362,13 @@ export default DitoComponent.component('DitoTreeItem', {
     display: flex;
     align-items: baseline;
     gap: 0.25em;
-    overflow: hidden;
+    min-width: 0;
     white-space: nowrap;
+
+    > :first-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .dito-tree-info {
@@ -395,8 +406,6 @@ export default DitoComponent.component('DitoTreeItem', {
   &--active {
     > .dito-tree-header {
       background: $color-active;
-      padding: 0 $input-padding-hor;
-      margin: 0 (-$input-padding-hor);
 
       > .dito-tree-branch {
         > .dito-chevron::before {

package/src/mixins/SourceMixin.js

@@ -318,7 +318,7 @@ export default {
       type: Boolean,
       default: false,
       get(draggable) {
-        return this.isListSource && this.listData.length > 1 && draggable
+        return this.isListSource && draggable
       }
     }),
 
@@ -450,15 +450,17 @@ export default {
       }
     },
 
-    createItem(schema, type) {
+    createItem(schema, type, index = null) {
       const item = this.createData(schema, type)
       if (this.isObjectSource) {
         this.objectData = item
+      } else if (index != null) {
+        this.listData.splice(index, 0, item)
       } else {
         this.listData.push(item)
       }
       if (this.collapsible) {
-        this.$nextTick(() => this.openSchemaComponent(-1))
+        this.$nextTick(() => this.openSchemaComponent(index ?? -1))
       }
       this.onChange()
       return item
@@ -531,9 +533,20 @@ export default {
     },
 
     getSchemaComponent(index) {
-      const { schemaComponents } = this
-      const { length } = schemaComponents
-      return schemaComponents[((index % length) + length) % length]
+      const { listData, schemaComponents } = this
+      const candidate = schemaComponents.at(index)
+      if (listData?.length) {
+        // Fast path: registration order usually matches `listData`. Fall back
+        // to a search by reference when it doesn't (non-tail inserts, drag
+        // reorders), since `schemaComponents` is filled by mount-order pushes.
+        const item = listData.at(index)
+        return item == null
+          ? null
+          : candidate?.data === item
+            ? candidate
+            : schemaComponents.find(c => c.data === item)
+      }
+      return candidate
     },
 
     openSchemaComponent(index) {

package/src/styles/_button.scss

@@ -155,9 +155,12 @@
 
   &--round,
   &--small {
-    // For now, nothing for these:
-    // .dito-button--create:empty::before,
-    // .dito-button--add:empty::before
+    // For now, nothing for create:
+    // .dito-button--create:empty::before
+
+    .dito-button--add:empty::before {
+      @extend %icon-add;
+    }
 
     .dito-button--upload:empty::before {
       @extend %icon-upload;

package/src/types/DitoTypeList.vue

@@ -85,9 +85,11 @@
               :collapsed="collapsed"
               :collapsible="collapsible"
               :deletable="deletable"
-              :draggable="draggable"
+              :draggable="draggable && listData.length > 1"
               :editable="editable"
               :editPath="getEditPath(item, index)"
+              :createPath="createPath"
+              :insertIndex="creatable && draggable ? index : null"
               @delete="deleteItem(item, index)"
             )
             component(