@ditojs/admin 2.10.1 → 2.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.10.1",
+  "version": "2.10.3",
   "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",
@@ -33,7 +33,7 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.10.0",
+    "@ditojs/ui": "^2.10.2",
     "@ditojs/utils": "^2.10.0",
     "@kyvg/vue3-notification": "^2.9.1",
     "@lk77/vue3-color": "^3.0.6",
@@ -78,12 +78,12 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/compiler-sfc": "^3.3.4",
     "pug": "^3.0.2",
-    "sass": "1.62.1",
+    "sass": "1.63.2",
     "typescript": "^5.1.3",
     "vite": "^4.3.9"
   },
   "types": "types",
-  "gitHead": "add6bbbdd21d0980af235994b96c4641ace5eeda",
+  "gitHead": "64c92430531216d8f463835bc07c4ac8e2370bf0",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoContext.js

@@ -22,7 +22,7 @@ const contexts = new WeakMap()
 
 function get(context, key, defaultValue) {
   const object = contexts.get(toRaw(context))
-  const value = object[key]
+  const value = key in object ? object[key] : undefined
   // If `object` explicitly sets the key to `undefined`, return it.
   return value !== undefined || hasOwnProperty.call(object, key)
     ? value

package/src/components/DitoCreateButton.vue

@@ -1,7 +1,14 @@
 <template lang="pug">
 .dito-create-button
+  button.dito-button(
+    v-if="creatableForm"
+    :type="isInlined ? 'button' : 'submit'"
+    :disabled="disabled"
+    v-bind="getButtonAttributes(verb)"
+    @click="createItem(creatableForm)"
+  ) {{ text }}
   template(
-    v-if="showPulldown"
+    v-else-if="creatableForms"
   )
     button.dito-button(
       type="button"
@@ -11,22 +18,14 @@
     ) {{ text }}
     ul.dito-pulldown(:class="{ 'dito-open': pulldown.open }")
       li(
-        v-for="(form, type) in forms"
+        v-for="(form, type) in creatableForms"
       )
         a(
-          v-if="isFormCreatable(form)"
           v-show="shouldShowSchema(form)"
           :class="getFormClass(form, type)"
           @mousedown.stop="onPulldownMouseDown(type)"
           @mouseup="onPulldownMouseUp(type)"
         ) {{ getLabel(form) }}
-  button.dito-button(
-    v-else-if="isFormCreatable(forms.default)"
-    :type="isInlined ? 'button' : 'submit'"
-    :disabled="disabled"
-    v-bind="getButtonAttributes(verb)"
-    @click="createItem(forms.default)"
-  ) {{ text }}
 </template>
 
 <script>
@@ -64,16 +63,22 @@ export default DitoComponent.component('DitoCreateButton', {
       return getFormSchemas(this.schema, this.context)
     },
 
-    isInlined() {
-      return isInlined(this.schema)
+    creatableForms() {
+      const entries = Object.entries(this.forms).filter(
+        (type, form) => this.isFormCreatable(form)
+      )
+      return entries.length > 0
+        ? Object.fromEntries(entries)
+        : null
     },
 
-    showPulldown() {
-      const forms = Object.values(this.forms)
-      return (
-        (forms.length > 1 || !this.forms.default) &&
-        forms.some(this.isFormCreatable)
-      )
+    creatableForm() {
+      const forms = this.creatableForms
+      return forms && Object.keys(forms).length === 1 && forms.default || null
+    },
+
+    isInlined() {
+      return isInlined(this.schema)
     }
   },
 
@@ -92,7 +97,7 @@ export default DitoComponent.component('DitoCreateButton', {
     },
 
     createItem(form, type = null) {
-      if (this.isFormCreatable(form) && !this.shouldDisableSchema(form)) {
+      if (!this.shouldDisableSchema(form)) {
         if (this.isInlined) {
           this.sourceComponent.createItem(form, type)
         } else {

package/src/components/DitoPanel.vue

@@ -90,10 +90,6 @@ export default DitoComponent.component('DitoPanel', {
       return getButtonSchemas(this.schema.panelButtons)
     },
 
-    target() {
-      return this.schema.target || this.dataPath
-    },
-
     hasOwnData() {
       return !!this.ownData
     },

package/src/mixins/PulldownMixin.js

@@ -17,7 +17,7 @@ export default {
           },
 
           mouseup: () => {
-            if (this.onPulldownMouseUp(null)) {
+            if (this.onPulldownMouseUp()) {
               this.pulldown.handlers.remove()
             }
           }
@@ -28,8 +28,8 @@ export default {
   },
 
   methods: {
-    onPulldownMouseDown(value) {
-      if (!value) {
+    onPulldownMouseDown(value = null) {
+      if (value === null) {
         this.setPulldownOpen(true)
         this.checkTime = true
       } else {
@@ -37,11 +37,11 @@ export default {
       }
     },
 
-    onPulldownMouseUp(value) {
+    onPulldownMouseUp(value = null) {
       const { startTime } = this.pulldown
       if (!this.checkTime || startTime && (Date.now() - startTime > 250)) {
         this.setPulldownOpen(false)
-        if (value) {
+        if (value !== null) {
           this.onPulldownSelect(value)
         }
         return true

package/src/utils/filter.js

@@ -69,7 +69,6 @@ export function createFiltersPanel(api, filters, dataPath, query) {
     type: 'panel',
     label: 'Filters',
     name: '$filters',
-    target: dataPath,
     // Override the default value
     disabled: false,
     sticky,
@@ -152,6 +151,15 @@ function createFiltersButtons(small) {
   }
 }
 
+function getDataName(filterName) {
+  // Prefix filter data keys with '$' to avoid conflicts with other data keys:
+  return `$${filterName}`
+}
+
+function getFilterName(dataName) {
+  return dataName.startsWith('$') ? dataName.slice(1) : null
+}
+
 function createFiltersComponents(filters) {
   const comps = {}
   for (const filter of Object.values(getNamedSchemas(filters) || {})) {
@@ -177,8 +185,8 @@ function createFiltersComponents(filters) {
           }
         }
       }
-      comps[filter.name] = {
-        label: form.label,
+      comps[getDataName(filter.name)] = {
+        label: form.label ?? labelize(filter.name),
         type: 'object',
         width,
         default: () => ({}),
@@ -194,23 +202,31 @@ function createFiltersComponents(filters) {
   return comps
 }
 
-function getComponentsForFilter(schema, name) {
-  const component = schema.components[name]
+function getComponentsForFilter(schema, dataName) {
+  const component = schema.components[dataName]
   return component?.form?.components
 }
 
 function formatFiltersData(schema, data) {
   const filters = []
-  for (const name in data) {
-    const entry = data[name]
+  for (const dataName in data) {
+    const entry = data[dataName]
     if (entry) {
       // Map components sequence to arguments:
-      const args = Object.keys(getComponentsForFilter(schema, name)).map(
+      const args = Object.keys(
+        getComponentsForFilter(schema, dataName)
+      ).map(
         key => entry[key] ?? null
       )
       // Only apply filter if there are some arguments that aren't null:
       if (args.some(value => value !== null)) {
-        filters.push(`${name}:${args.map(JSON.stringify).join(',')}`)
+        filters.push(
+          `${
+            getFilterName(dataName)
+          }:${
+            args.map(JSON.stringify).join(',')
+          }`
+        )
       }
     }
   }
@@ -223,20 +239,20 @@ function parseFiltersData(schema, query) {
   // from $route.query back to param lists per filter:
   if (query) {
     for (const filter of asArray(query.filter)) {
-      const [, name, json] = filter.match(/^(\w+):(.*)$/)
+      const [, filterName, json] = filter.match(/^(\w+):(.*)$/)
       try {
-        filters[name] = asArray(JSON.parse(`[${json}]`))
+        filters[filterName] = asArray(JSON.parse(`[${json}]`))
       } catch (error) {}
     }
   }
   const filtersData = {}
-  for (const name in schema.components) {
+  for (const dataName in schema.components) {
     const data = {}
     // If we have retrieved params from the query, fetch the associated
     // form components so we can map the values back to object keys:
-    const args = filters[name]
+    const args = filters[getFilterName(dataName)]
     if (args) {
-      const components = getComponentsForFilter(schema, name)
+      const components = getComponentsForFilter(schema, dataName)
       if (components) {
         let index = 0
         for (const key in components) {
@@ -244,7 +260,7 @@ function parseFiltersData(schema, query) {
         }
       }
     }
-    filtersData[name] = data
+    filtersData[dataName] = data
   }
   return filtersData
 }

package/src/utils/schema.js

@@ -847,10 +847,9 @@ export function processSchemaData(
                 : componentDataPath
             const context = new DitoContext(options.component, {
               schema: componentSchema,
-              data: item,
-              value: item,
-              dataPath: itemDataPath,
-              index,
+              data,
+              dataPath: componentDataPath,
+              name,
               rootData: options.rootData
             })
             const getForms = (