@ditojs/admin 2.1.3 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "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,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.1.2",
-    "@ditojs/utils": "^2.1.1",
+    "@ditojs/ui": "^2.2.0",
+    "@ditojs/utils": "^2.2.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
@@ -73,7 +73,7 @@
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.1.1",
+    "@ditojs/build": "^2.2.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.47",
     "pug": "^3.0.2",
@@ -82,7 +82,7 @@
     "vite": "^4.2.1"
   },
   "types": "types",
-  "gitHead": "39cbb715f40b8c3c657ca8d6790def22f170b31b",
+  "gitHead": "306d4d9ef2a0c989b026f1d1cd77f6d4fd60430b",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoContext.js

@@ -103,27 +103,27 @@ export default class DitoContext {
     return getLastDataPathIndex(this.parentItemDataPath)
   }
 
+  // NOTE: While internally, we speak of `data`, in the API surface the
+  // term `item` is used for the data that relates to editing objects:
+  // If `data` isn't provided, we can determine it from rootData & dataPath:
   get item() {
-    // NOTE: While internally, we speak of `data`, in the API surface the
-    // term `item` is used for the data that relates to editing objects:
-    // If `data` isn't provided, we can determine it from rootData & dataPath:
     return get(this, 'data', () =>
       getItem(this.rootItem, this.dataPath, this.nested)
     )
   }
 
   // NOTE: `parentItem` isn't the closest data parent to `item`, it's the
-  // closest parent that isn't an array, e.g. for relations or nested JSON
-  // data.  This is why the term `item` was chosen over `data`, e.g. VS the
-  // use of `parentData` in server-sided validation, which is the closest
-  // parent. If needed, we could expose this data here too, as we can do all
-  // sorts of data processing with `rootData` and `dataPath`.
+  // closest parent that isn't an array, e.g. for relations or nested JSON data.
+  // This is why the term `item` was chosen over `data`, e.g. VS the use of
+  // `parentData` in server-sided validation, which is the closest parent. If
+  // needed, we could expose this data here too, as we can do all sorts of data
+  // processing with `rootData` and `dataPath`.
   get parentItem() {
-    const parentItem = (
+    const item = (
       getParentItem(this.rootItem, this.dataPath, this.nested) ||
       null
     )
-    return parentItem !== this.item ? parentItem : null
+    return item !== this.item ? item : null
   }
 
   get rootItem() {

package/src/DitoTypeComponent.js

@@ -21,6 +21,7 @@ export default {
   generateLabel: true,
   excludeValue: false,
   ignoreMissingValue: null,
+  alignBottom: true,
   omitPadding: false,
 
   component: DitoComponent.component,

package/src/components/DitoContainer.vue

@@ -5,7 +5,7 @@
   :style="containerStyle"
 )
   DitoLabel(
-    v-if="label"
+    v-if="hasLabel"
     :label="label"
     :dataPath="labelDataPath"
     :class="componentClass"
@@ -31,7 +31,7 @@ import { isString, isNumber } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DitoContext from '../DitoContext.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { getTypeComponent, shouldOmitPadding } from '../utils/schema.js'
+import { getTypeComponent, alignBottom, omitPadding } from '../utils/schema.js'
 import { parseFraction } from '../utils/math.js'
 
 // @vue/component
@@ -64,11 +64,12 @@ export default DitoComponent.component('DitoContainer', {
     },
 
     hasLabel() {
-      const { schema } = this
-      const { label } = schema
+      const { label } = this.schema
       return (
-        label !== false &&
-        (!!label || this.typeComponent?.generateLabel && this.generateLabels)
+        label !== false && (
+          !!label ||
+          this.generateLabels && this.typeComponent?.generateLabel
+        )
       )
     },
 
@@ -122,9 +123,12 @@ export default DitoComponent.component('DitoContainer', {
 
     containerClass() {
       const { class: containerClass } = this.schema
+      const prefix = 'dito-container'
       return {
-        'dito-single': this.single,
-        'dito-omit-padding': shouldOmitPadding(this.schema),
+        [`${prefix}--single`]: this.single,
+        [`${prefix}--has-label`]: this.hasLabel,
+        [`${prefix}--align-bottom`]: alignBottom(this.schema),
+        [`${prefix}--omit-padding`]: omitPadding(this.schema),
         ...(
           isString(containerClass)
             ? { [containerClass]: true }
@@ -162,6 +166,7 @@ export default DitoComponent.component('DitoContainer', {
     componentClass() {
       const basisIsAuto = this.componentBasis === 'auto'
       return {
+        // TODO: BEM
         'dito-single': this.single,
         'dito-disabled': this.componentDisabled,
         'dito-width-fill': !basisIsAuto || this.componentWidth === 'fill',
@@ -183,6 +188,9 @@ export default DitoComponent.component('DitoContainer', {
 @import '../styles/_imports';
 
 .dito-container {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
   // Needed for better vertical alignment:
   align-self: stretch;
   box-sizing: border-box;
@@ -196,7 +204,11 @@ export default DitoComponent.component('DitoContainer', {
     padding: 0;
   }
 
-  &.dito-omit-padding {
+  &--align-bottom {
+    justify-content: end; // To align components with and without labels.
+  }
+
+  &--omit-padding {
     padding: 0;
 
     > .dito-label {
@@ -204,7 +216,7 @@ export default DitoComponent.component('DitoContainer', {
     }
   }
 
-  &.dito-single {
+  &--single {
     height: 100%; // So that list buttons can be sticky at the bottom;
   }
 }

package/src/components/DitoCreateButton.vue

@@ -14,8 +14,9 @@
         v-for="(form, type) in forms"
       )
         a(
-          v-if="isCreatable(form)"
-          :class="`dito-type-${type}`"
+          v-if="shouldRender(form)"
+          v-show="shouldShow(form)"
+          :class="getFormClass(form, type)"
           @mousedown.stop="onPulldownMouseDown(type)"
           @mouseup="onPulldownMouseUp(type)"
         ) {{ getLabel(form) }}
@@ -59,13 +60,8 @@ export default DitoComponent.component('DitoCreateButton', {
   },
 
   methods: {
-    isCreatable(form) {
-      // Forms can be excluded from the list by providing `creatable: false`
-      return form.creatable !== false
-    },
-
     createItem(form, type = null) {
-      if (this.isCreatable(form)) {
+      if (this.shouldRender(form) && !this.shouldDisable(form)) {
         if (this.isInlined) {
           this.sourceComponent.createItem(form, type)
         } else {
@@ -79,6 +75,13 @@ export default DitoComponent.component('DitoCreateButton', {
       }
     },
 
+    getFormClass(form, type) {
+      return {
+        [`dito-type-${type}`]: true,
+        'dito-disabled': this.shouldDisable(form)
+      }
+    },
+
     onPulldownSelect(type) {
       this.createItem(this.forms[type], type)
       this.setPulldownOpen(false)

package/src/components/DitoDraggable.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+UseSortable(
+  v-if="draggable"
+  :tag="tag"
+  :modelValue="modelValue"
+  :options="options"
+  @update:modelValue="$emit('update:modelValue', $event)"
+)
+  slot
+component(
+  v-else
+  :is="tag"
+)
+  slot
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent'
+import { UseSortable } from '@vueuse/integrations/useSortable/component'
+
+// @vue/component
+export default DitoComponent.component('DitoDraggable', {
+  components: { UseSortable },
+  emits: ['update:modelValue'],
+
+  props: {
+    modelValue: {
+      type: Array,
+      required: true
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    options: {
+      type: Object,
+      required: true
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    }
+  }
+})
+</script>

package/src/components/DitoPane.vue

@@ -162,7 +162,7 @@ export default DitoComponent.component('DitoPane', {
     margin-top: 0;
   }
 
-  .dito-container.dito-omit-padding > & {
+  .dito-container--omit-padding > & {
     // Clear margins set above again if parent is omitting padding.
     margin: 0;
     max-width: unset;

package/src/components/DitoPanel.vue

@@ -121,7 +121,7 @@ export default DitoComponent.component('DitoPanel', {
     const { data } = this.schema
     if (data) {
       this.ownData = isFunction(data)
-        ? data.call(this, this.context)
+        ? data(this.context)
         : data
     }
   },

package/src/components/DitoSchema.vue

@@ -142,7 +142,7 @@ export default DitoComponent.component('DitoSchema', {
       // Allow schema to provide more data through `schema.data`, vue-style:
       ...(
         data && isFunction(data)
-          ? data.call(this, this.context)
+          ? data(this.context)
           : data
       ),
       componentsRegistry: {},
@@ -197,7 +197,7 @@ export default DitoComponent.component('DitoSchema', {
           const { defaultTab } = tab
           if (
             isFunction(defaultTab)
-              ? defaultTab.call(this, this.context)
+              ? defaultTab(this.context)
               : defaultTab
           ) {
             return tab
@@ -214,6 +214,11 @@ export default DitoComponent.component('DitoSchema', {
       return this.schema?.clipboard
     },
 
+    parentData() {
+      const data = getParentItem(this.rootData, this.dataPath, false)
+      return data !== this.data ? data : null
+    },
+
     processedData() {
       return this.processData({ target: 'server', schemaOnly: true })
     },
@@ -235,6 +240,10 @@ export default DitoComponent.component('DitoSchema', {
       return this.data
     },
 
+    parentItem() {
+      return this.parentData
+    },
+
     rootItem() {
       return this.rootData
     },
@@ -247,10 +256,6 @@ export default DitoComponent.component('DitoSchema', {
       return this.clipboardData
     },
 
-    parentItem() {
-      return getParentItem(this.rootData, this.dataPath, false)
-    },
-
     formLabel() {
       return this.getLabel(
         this.getItemFormSchema(this.sourceSchema, this.data, this.context)

package/src/components/DitoSchemaInlined.vue

@@ -10,6 +10,7 @@ DitoSchema.dito-schema-inlined(
   :disabled="disabled"
   :collapsed="collapsed"
   :collapsible="collapsible"
+  :generateLabels="!isCompact"
   :class="{ 'dito-schema-compact': isCompact }"
 )
   //- Render dito-edit-buttons for inlined schemas separately from all

package/src/components/DitoTreeItem.vue

@@ -72,11 +72,12 @@
         :store="store"
         :disabled="disabled"
       )
-  UseSortable(
+  DitoDraggable(
     v-if="childrenSchema"
     v-show="opened"
     :modelValue="updateOrder(childrenSchema, childrenList)"
-    :options="getSortableOptions(childrenDraggable, true)"
+    :options="getSortableOptions(true)"
+    :draggable="childrenDraggable"
     @update:modelValue="value => (childrenList = value)"
   )
     DitoTreeItem(

package/src/components/index.js

@@ -30,4 +30,5 @@ export { default as DitoPagination } from './DitoPagination.vue'
 export { default as DitoTreeItem } from './DitoTreeItem.vue'
 export { default as DitoTableHead } from './DitoTableHead.vue'
 export { default as DitoTableCell } from './DitoTableCell.vue'
+export { default as DitoDraggable } from './DitoDraggable.vue'
 export { default as DitoVNode } from './DitoVNode.vue'

package/src/mixins/DataMixin.js

@@ -38,7 +38,7 @@ export default {
       // If the data callback provided a dependency function when it was called,
       // cal it in every call of `handleDataSchema()` to force Vue to keep track
       // of the async dependencies.
-      asyncEntry.dependencyFunction?.call(this, this.context)
+      asyncEntry.dependencyFunction?.(this.context)
 
       if (asyncEntry.resolveCounter > 0) {
         // If the data was resolved already, return it and clear the value once
@@ -59,7 +59,7 @@ export default {
         data = null
       } else if (data) {
         if (isFunction(data)) {
-          const result = data.call(this, this.context)
+          const result = data(this.context)
           // If the result of the data function is another function, then the
           // first data function is there to track dependencies and the real
           // data loading happens in the function that it returned. Keep track
@@ -68,7 +68,7 @@ export default {
           // the function that it returned once to get the actual data:
           if (isFunction(result)) {
             asyncEntry.dependencyFunction = data
-            data = result.call(this, this.context)
+            data = result(this.context)
           } else {
             data = result
           }

package/src/mixins/DitoMixin.js

@@ -213,7 +213,7 @@ export default {
       if (value === undefined && def !== undefined) {
         if (callback && isFunction(def) && !isMatchingType(types, def)) {
           // Support `default()` functions for any type except `Function`:
-          def = def.call(this, this.context)
+          def = def.call(this)
         }
         return def
       }
@@ -224,7 +224,7 @@ export default {
       // Any schema value handled through `getSchemaValue()` can provide
       // a function that's resolved when the value is evaluated:
       if (callback && isFunction(value)) {
-        value = value.call(this, this.context)
+        value = value(this.context)
       }
       // Now finally see if we can convert to the expect types.
       if (types && value != null && !isMatchingType(types, value)) {
@@ -265,14 +265,27 @@ export default {
     },
 
     shouldRender(schema = null) {
-      return (
-        !!schema &&
-        this.getSchemaValue('if', {
-          type: Boolean,
-          default: true,
-          schema
-        })
-      )
+      return this.getSchemaValue('if', {
+        type: Boolean,
+        default: true,
+        schema
+      })
+    },
+
+    shouldShow(schema = null) {
+      return this.getSchemaValue('visible', {
+        type: Boolean,
+        default: true,
+        schema
+      })
+    },
+
+    shouldDisable(schema = null) {
+      return this.getSchemaValue('disabled', {
+        type: Boolean,
+        default: false,
+        schema
+      })
     },
 
     getResourcePath(resource) {

package/src/mixins/RouteMixin.js

@@ -69,7 +69,7 @@ export default {
     },
 
     meta() {
-      return this.routeRecord.meta
+      return this.routeRecord?.meta
     },
 
     path() {

package/src/mixins/SortableMixin.js

@@ -1,10 +1,8 @@
 import ItemMixin from './ItemMixin.js'
-import { UseSortable } from '@vueuse/integrations/useSortable/component'
 
 // @vue/component
 export default {
   mixins: [ItemMixin],
-  components: { UseSortable },
 
   data() {
     return {
@@ -13,17 +11,15 @@ export default {
   },
 
   methods: {
-    getSortableOptions(draggable, fallback = false) {
+    getSortableOptions(forceFallback = false) {
       return {
         animation: 150,
-        // TODO: This is broken in VueSortable, always enable it for now.
-        // disabled: !draggable,
         handle: '.dito-button-drag',
         dragClass: 'dito-sortable-active',
         chosenClass: 'dito-sortable-chosen',
         ghostClass: 'dito-sortable-ghost',
         fallbackClass: 'dito-sortable-fallback',
-        forceFallback: fallback,
+        forceFallback,
         onStart: this.onStartDrag,
         onEnd: this.onEndDrag
       }

package/src/mixins/SourceMixin.js

@@ -11,7 +11,6 @@ import {
   hasFormSchema,
   getFormSchemas,
   getViewSchema,
-  hasLabels,
   isCompact,
   isInlined,
   isObjectSource,
@@ -249,10 +248,6 @@ export default {
       return getButtonSchemas(this.schema.buttons)
     },
 
-    hasLabels() {
-      return this.forms.some(hasLabels)
-    },
-
     isCompact() {
       return this.forms.every(isCompact)
     },

package/src/mixins/TypeMixin.js

@@ -3,7 +3,7 @@ import ValidationMixin from './ValidationMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { computeValue } from '../utils/schema.js'
 import { getItem, getParentItem } from '../utils/data.js'
-import { isString, asArray } from '@ditojs/utils'
+import { isString, asArray, camelize } from '@ditojs/utils'
 
 // @vue/component
 export default {
@@ -71,14 +71,32 @@ export default {
       }
     },
 
+    parentData() {
+      const data = getParentItem(this.rootData, this.dataPath, this.nested)
+      return data !== this.data ? data : null
+    },
+
+    processedData() {
+      // We can only get the processed data through the schemaComponent, but
+      // that's not necessarily the item represented by this component.
+      // Solution: Find the relative path and the processed sub-item from there:
+      const { schemaComponent } = this
+      return getItem(
+        schemaComponent.processedData,
+        // Get the dataPath relative to the schemaComponent's data:
+        this.dataPath.slice(schemaComponent.dataPath.length),
+        this.nested
+      )
+    },
+
     // The following computed properties are similar to `DitoContext`
     // properties, so that we can access these on `this` as well:
     item() {
-      return getItem(this.rootItem, this.dataPath, this.nested)
+      return this.data
     },
 
     parentItem() {
-      return getParentItem(this.rootItem, this.dataPath, this.nested)
+      return this.parentData
     },
 
     rootItem() {
@@ -86,16 +104,7 @@ export default {
     },
 
     processedItem() {
-      // We can only get the processed items through the schemaComponent, but
-      // that's not necessarily the item represented by this component.
-      // Solution: Find the relative path and the processed sub-item from there:
-      const { schemaComponent } = this
-      return getItem(
-        schemaComponent.processedItem,
-        // Get the dataPath relative to the schemaComponent's data:
-        this.dataPath.slice(schemaComponent.dataPath.length),
-        this.nested
-      )
+      return this.processedData
     },
 
     label: getSchemaAccessor('label', {
@@ -120,7 +129,7 @@ export default {
       }
     }),
 
-    // TODO: Rename to `excluded` for consistent naming
+    // TODO: Rename to `excluded` for consistent naming?
     exclude: getSchemaAccessor('exclude', {
       type: Boolean,
       default: false
@@ -156,10 +165,18 @@ export default {
       type: String
     }),
 
-    // @overridable
     events() {
-      const { onFocus, onBlur, onInput, onChange } = this
-      return { onFocus, onBlur, onInput, onChange }
+      const events = this.getEvents()
+      // Register callbacks for all provides non-recognized events,
+      // assuming they are native events.
+      // TODO: Move to vue3-style `on[A-Z]` event handlers naming that aren't
+      // namespaced in `schema.events` once the transition is complete.
+      for (const event of Object.keys(this.schema.events || {})) {
+        events[`on${camelize(event, true)}`] ??= () => {
+          this.emitEvent(event)
+        }
+      }
+      return events
     },
 
     attributes() {
@@ -224,6 +241,12 @@ export default {
       }
     },
 
+    // @overridable
+    getEvents() {
+      const { onFocus, onBlur, onInput, onChange } = this
+      return { onFocus, onBlur, onInput, onChange }
+    },
+
     // @overridable
     getValidations() {
       return null

package/src/styles/_pulldown.scss

@@ -1,3 +1,5 @@
+@import '../styles/_imports';
+
 ul.dito-pulldown {
   display: none;
   position: absolute;
@@ -5,6 +7,7 @@ ul.dito-pulldown {
   z-index: 1000;
   border-radius: $pulldown-radius;
   box-shadow: $shadow-window;
+  overflow: hidden;
 
   &.dito-open {
     display: block;
@@ -15,25 +18,19 @@ ul.dito-pulldown {
 
     a {
       display: block;
-      text-align: center;
       padding: $pulldown-padding;
       line-height: 1;
       background: $button-color;
 
-      &:hover {
+      &.dito-disabled {
+        color: $color-disabled;
+        cursor: default;
+      }
+
+      &:not(.dito-disabled):hover {
         background: $color-active;
         color: $color-white;
       }
     }
-
-    &:first-child a {
-      border-top-left-radius: $pulldown-radius;
-      border-top-right-radius: $pulldown-radius;
-    }
-
-    &:last-child a {
-      border-bottom-left-radius: $pulldown-radius;
-      border-bottom-right-radius: $pulldown-radius;
-    }
   }
 }