@ditojs/admin 2.75.1 → 2.77.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.75.1",
+  "version": "2.77.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/master/packages/admin",
@@ -42,8 +42,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.75.0",
-    "@ditojs/utils": "^2.75.0",
+    "@ditojs/ui": "^2.77.0",
+    "@ditojs/utils": "^2.77.0",
     "@kyvg/vue3-notification": "^3.4.2",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^3.15.3",
@@ -89,9 +89,9 @@
     "vue-upload-component": "^3.1.17"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.75.0",
+    "@ditojs/build": "^2.77.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },
-  "gitHead": "d16421580ee018bd1e606570bbf7b41c0f537fc8"
+  "gitHead": "d2cff77924d989aad5ab601cf08433a4e683ac6d"
 }

package/src/DitoContext.js

@@ -260,10 +260,9 @@ export default class DitoContext {
     return get(this, 'open', undefined)
   }
 
-  // TODO: Rename this to `searchTerm` or `searchQuery`, to perhaps free `query`
-  // for the actual `resourceComponent.query` object?
-  get query() {
-    return get(this, 'query', undefined)
+  // For search term in selects:
+  get searchTerm() {
+    return get(this, 'searchTerm', undefined)
   }
 
   // The error field is only populated in the context of buttons that send
@@ -284,6 +283,10 @@ export default class DitoContext {
     set(this, 'isRunning', value)
   }
 
+  get query() {
+    return this.component.$route.query
+  }
+
   // Helper Methods
 
   get request() {

package/src/components/DitoAffixes.vue

@@ -21,6 +21,10 @@
     @mousedown.stop
   )
   slot(name="append")
+  .dito-info(
+    v-if="inlineInfo"
+    :data-info="inlineInfo"
+  )
 </template>
 
 <script>
@@ -41,6 +45,7 @@ export default DitoComponent.component('DitoAffixes', {
     absolute: { type: Boolean, default: false },
     clearable: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    inlineInfo: { type: String, default: null },
     parentContext: { type: Object, required: true }
   },
 
@@ -85,6 +90,7 @@ export default DitoComponent.component('DitoAffixes', {
       return (
         this.visibleItems.length > 0 ||
         this.clearable ||
+        this.inlineInfo ||
         hasSlotContent(this.$slots.prepend) ||
         hasSlotContent(this.$slots.append)
       )

package/src/components/DitoContainer.vue

@@ -210,9 +210,9 @@ export default DitoComponent.component('DitoContainer', {
       const { class: classes } = this.schema
       const prefix = 'dito-container'
       return {
-        [`${prefix}--single`]: this.single,
         [`${prefix}--disabled`]: this.componentDisabled,
         [`${prefix}--has-errors`]: !!this.errors,
+        [`${prefix}--single`]: this.single,
         [`${prefix}--compact`]: this.compact,
         [`${prefix}--label-vertical`]: this.verticalLabels,
         [`${prefix}--omit-spacing`]: omitSpacing(this.schema),

package/src/components/DitoCreateButton.vue

@@ -105,9 +105,14 @@ export default DitoComponent.component('DitoCreateButton', {
         if (this.isInlined) {
           this.sourceComponent.createItem(form, type)
         } else {
+          const { creatable } = this.schema
+          const query = {
+            ...(type && { type }),
+            ...creatable?.query?.(this.context)
+          }
           this.$router.push({
             path: `${this.path}/create`,
-            query: { type }
+            query
           })
         }
       } else {

package/src/components/DitoLabel.vue

@@ -122,6 +122,8 @@ export default DitoComponent.component('DitoLabel', {
   }
 
   label {
+    @include ellipsis;
+
     cursor: inherit;
     font-weight: bold;
     line-height: $input-height;

package/src/components/DitoNotifications.vue

@@ -23,7 +23,7 @@ export default DitoComponent.component('DitoNotifications', {
   },
 
   methods: {
-    notify({ type = 'info', title, text, error } = {}) {
+    notify({ type = 'info', title, text, error, duration } = {}) {
       title ||= (
         {
           warning: 'Warning',
@@ -59,8 +59,13 @@ export default DitoComponent.component('DitoNotifications', {
         // amount of milliseconds multiplied with the amount of characters
         // displayed in the notification, plus 40 (40 + title + message):
         const { durationFactor = 20 } = notifications
-        const duration = (40 + text.length + title.length) * durationFactor
-        this.$notify({ type, title, text, duration })
+        duration ??= (40 + text.length + title.length) * durationFactor
+        this.$notify({
+          type,
+          title,
+          text,
+          duration: duration === 0 ? -1 : duration // < 0 -> <= 0 = sticky
+        })
       }
     },
 

package/src/components/DitoPane.vue

@@ -65,8 +65,8 @@ export default DitoComponent.component('DitoPane', {
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
     tab: { type: String, default: null },
-    padding: { type: String, default: null },
     single: { type: Boolean, default: false },
+    padding: { type: String, default: null },
     disabled: { type: Boolean, default: false },
     compact: { type: Boolean, default: false },
     generateLabels: { type: Boolean, default: false },
@@ -86,9 +86,10 @@ export default DitoComponent.component('DitoPane', {
     },
 
     classes() {
+      const prefix = 'dito-pane'
       return {
-        'dito-pane--single': this.isSingleComponent,
-        [`dito-pane--padding-${this.padding}`]: !!this.padding
+        [`${prefix}--single`]: this.isSingleComponent,
+        [`${prefix}--padding-${this.padding}`]: !!this.padding
       }
     },
 

package/src/components/DitoRoot.vue

@@ -231,8 +231,8 @@ export default DitoComponent.component('DitoRoot', {
       })
     },
 
-    notify({ type = 'info', title, text, error } = {}) {
-      this.notifications.notify({ type, title, text, error })
+    notify({ type = 'info', title, text, error, duration } = {}) {
+      this.notifications.notify({ type, title, text, error, duration })
     },
 
     closeNotifications() {

package/src/components/DitoSchema.vue

@@ -72,7 +72,7 @@ slot(name="prepend")
             :meta="meta"
             :store="store"
             :padding="padding"
-            :single="!inlined && !hasMainPane"
+            :single="single && !inlined && !hasMainPane"
             :disabled="disabled"
             :compact="compact"
             :generateLabels="generateLabels"
@@ -87,7 +87,7 @@ slot(name="prepend")
         :meta="meta"
         :store="store"
         :padding="padding"
-        :single="!inlined && !hasTabs"
+        :single="single && !inlined && !hasTabs"
         :disabled="disabled"
         :compact="compact"
         :generateLabels="generateLabels"
@@ -156,6 +156,7 @@ export default DitoComponent.component('DitoSchema', {
     meta: { type: Object, default: () => ({}) },
     store: { type: Object, default: () => ({}) },
     label: { type: [String, Object], default: null },
+    single: { type: Boolean, default: false },
     padding: { type: String, default: null },
     active: { type: Boolean, default: true },
     inlined: { type: Boolean, default: false },
@@ -395,7 +396,10 @@ export default DitoComponent.component('DitoSchema', {
         const tab = this.shouldRenderSchema(this.tabs[newTab])
           ? newTab
           : this.defaultTab
-        this.$router.replace({ hash: tab ? `#${tab}` : null })
+        this.$router.replace({
+          query: this.$route.query,
+          hash: tab ? `#${tab}` : null
+        })
       }
       if (this.hasErrors) {
         this.repositionErrors()

package/src/components/DitoView.vue

@@ -23,6 +23,7 @@ template(
       padding="root"
       :disabled="isLoading"
       scrollable
+      single
     )
 </template>
 

package/src/mixins/SourceMixin.js

@@ -13,6 +13,7 @@ import {
   hasFormSchema,
   getFormSchemas,
   getViewSchema,
+  getViewPath,
   isCompact,
   isInlined,
   isObjectSource,
@@ -187,13 +188,16 @@ export default {
         // the route query parameters to override them.
         const {
           scope = this.defaultScope?.name,
-          page = this.schema.page
+          page = this.schema.page,
+          type
         } = this.query
-        // Preserve / merge currently stored values.
+        // Preserve / merge currently stored values, including any custom query
+        // parameters added by creatable.query
         query = {
           ...this.query,
           ...(scope != null && { scope }),
           ...(page != null && { page }),
+          ...(type != null && { type }),
           ...query
         }
         if (!equals(query, this.$route.query)) {
@@ -337,7 +341,17 @@ export default {
     maxDepth: getSchemaAccessor('maxDepth', {
       type: Number,
       default: 1
-    })
+    }),
+
+    createPath() {
+      if (this.creatable) {
+        return (
+          getViewPath(this.schema, this.context) ||
+          this.path
+        )
+      }
+      return null
+    }
   },
 
   watch: {

package/src/mixins/TypeMixin.js

@@ -101,6 +101,17 @@ export default {
       type: String
     }),
 
+    info: getSchemaAccessor('info', {
+      type: String,
+      default: null
+    }),
+
+    inlineInfo() {
+      // When a label is present, info is shown in the label component.
+      // Otherwise, we have to show it inline.
+      return !this.label ? this.info : null
+    },
+
     events() {
       const events = this.getEvents()
       // Register callbacks for all provides non-recognized events,

package/src/types/DitoTypeButton.vue

@@ -72,11 +72,6 @@ export default DitoTypeComponent.register(
         return this.text || labelize(this.verb)
       },
 
-      info: getSchemaAccessor('info', {
-        type: String,
-        default: null
-      }),
-
       prefixes() {
         return asArray(this.schema.prefix)
       },

package/src/types/DitoTypeColor.vue

@@ -28,6 +28,7 @@ DitoTrigger.dito-color(
           mode="input"
           :clearable="showClearButton"
           :disabled="disabled"
+          :inlineInfo="inlineInfo"
           :parentContext="context"
           @clear="clear"
         )

package/src/types/DitoTypeDate.vue

@@ -26,6 +26,7 @@
         absolute
         :clearable="showClearButton"
         :disabled="disabled"
+        :inlineInfo="inlineInfo"
         :parentContext="context"
         @clear="clear"
       )

package/src/types/DitoTypeList.vue

@@ -107,6 +107,7 @@
           v-if="hasCellEditButtons"
         )
           DitoEditButtons(
+            nested
             :schema="getItemFormSchema(schema, item, context)"
             :dataPath="getDataPath(index)"
             :data="item"
@@ -132,10 +133,9 @@
             :data="listData"
             :meta="meta"
             :store="store"
-            :nested="nested"
             :disabled="disabled || isLoading"
             :creatable="creatable"
-            :createPath="path"
+            :createPath="createPath"
           )
   //- Render create buttons outside table when in a single component view:
   DitoEditButtons.dito-buttons--large.dito-buttons--main.dito-buttons--sticky(
@@ -148,7 +148,7 @@
     :store="store"
     :disabled="disabled || isLoading"
     :creatable="creatable"
-    :createPath="path"
+    :createPath="createPath"
   )
 </template>
 

package/src/types/DitoTypeMultiselect.vue

@@ -42,6 +42,7 @@
       absolute
       :clearable="showClearButton"
       :disabled="disabled"
+      :inlineInfo="inlineInfo"
       :parentContext="context"
       @clear="clear"
     )
@@ -221,14 +222,14 @@ export default DitoTypeComponent.register('multiselect', {
       }
     },
 
-    async onSearchChange(query) {
+    async onSearchChange(searchTerm) {
       if (this.searchFilter) {
-        if (query) {
+        if (searchTerm) {
           // Set `searchedOptions` to an empty array, before it will be
           // populated asynchronously with the actual results.
           this.searchedOptions = []
           this.searchedOptions = await this.resolveData(
-            () => this.searchFilter(new DitoContext(this, { query }))
+            () => this.searchFilter(new DitoContext(this, { searchTerm }))
           )
         } else {
           // Clear `searchedOptions` when the query is cleared.

package/src/types/DitoTypeNumber.vue

@@ -24,6 +24,7 @@ DitoInput.dito-number(
       mode="input"
       :clearable="showClearButton"
       :disabled="disabled"
+      :inlineInfo="inlineInfo"
       :parentContext="context"
       @clear="clear"
     )

package/src/types/DitoTypeObject.vue

@@ -51,7 +51,7 @@
     :store="store"
     :disabled="disabled || isLoading"
     :creatable="creatable"
-    :createPath="path"
+    :createPath="createPath"
   )
 </template>
 

package/src/types/DitoTypeSelect.vue

@@ -47,6 +47,7 @@
       absolute
       :clearable="showClearButton"
       :disabled="disabled"
+      :inlineInfo="inlineInfo"
       :parentContext="context"
       @clear="clear"
     )

package/src/types/DitoTypeText.vue

@@ -21,6 +21,7 @@ DitoInput.dito-text(
       mode="input"
       :clearable="showClearButton"
       :disabled="disabled"
+      :inlineInfo="inlineInfo"
       :parentContext="context"
       @clear="clear"
     )

package/src/types/DitoTypeTreeList.vue

@@ -15,7 +15,7 @@
       @update:data="data => (value = data)"
     )
     .dito-tree-form-container(
-      v-if="hasEditableForms"
+      v-if="editPath && hasEditableForms"
     )
       //- Include a router-view for the optional DitoFormInlined
       RouterView
@@ -52,7 +52,8 @@ export default DitoTypeComponent.register(
 
       editPath() {
         // Accessed from DitoTreeItem through `container.editPath`:
-        return this.$route.path.slice(this.path?.length)
+        const path = this.$route.path.slice(this.path?.length)
+        return path.startsWith(`/${this.schema.path}`) ? path : ''
       },
 
       treeData() {

package/src/utils/schema.js

@@ -491,17 +491,21 @@ export function hasViewSchema(schema, context) {
   return !!getViewSchema(schema, context)
 }
 
-export function getViewEditPath(schema, id, context) {
+export function getViewPath(schema, context) {
   const view = getViewSchema(schema, context)
   if (view) {
-    const path = isSingleComponentView(view)
+    return isSingleComponentView(view)
       ? view.fullPath
       : `${view.fullPath}/${view.path}`
-    return `${path}/${id}`
   }
   return null
 }
 
+export function getViewEditPath(schema, id, context) {
+  const path = getViewPath(schema, context)
+  return path ? `${path}/${id}` : null
+}
+
 export function getFormSchemas(schema, context, modifyForm) {
   const viewSchema = context && getViewFormSchema(schema, context)
   if (viewSchema) {