@ditojs/admin 1.30.0 → 2.0.0

package/src/mixins/DitoMixin.js

@@ -3,11 +3,11 @@ import {
   getValueAtDataPath, labelize, hyphenate, format
 } from '@ditojs/utils'
 import appState from '../appState.js'
-import DitoComponent from '../DitoComponent.js'
 import DitoContext from '../DitoContext.js'
 import EmitterMixin from './EmitterMixin.js'
 import { isMatchingType, convertType } from '../utils/type.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
+import { reactive } from 'vue'
 
 // @vue/component
 export default {
@@ -18,6 +18,7 @@ export default {
     '$verbs',
     '$views',
     '$isPopulated',
+    '$parentComponent',
     '$schemaComponent',
     '$routeComponent',
     '$dataComponent',
@@ -30,8 +31,13 @@ export default {
 
   provide() {
     return this.providesData
-      ? { $dataComponent: () => this }
-      : {}
+      ? {
+        $parentComponent: () => this,
+        $dataComponent: () => this
+      }
+      : {
+        $parentComponent: () => this
+      }
   },
 
   data() {
@@ -42,6 +48,11 @@ export default {
   },
 
   computed: {
+    providesData() {
+      // NOTE: This is overridden in ResourceMixin, used by lists.
+      return false
+    },
+
     sourceSchema() {
       return this.meta?.schema
     },
@@ -74,18 +85,20 @@ export default {
     },
 
     rootComponent() {
-      return this.$root.$children[0]
+      return this.$root.$refs.root
+    },
+
+    // Use computed properties as links to injects, so DitoSchema can
+    // override the property and return `this` instead of the parent.
+    parentComponent() {
+      return this.$parentComponent()
     },
 
     schemaComponent() {
-      // Use computed properties as links to injects, so DitoSchema can
-      // override the property and return `this` instead of the parent.
       return this.$schemaComponent()
     },
 
     routeComponent() {
-      // Use computed properties as links to injects, so RouteMixin can
-      // override the property and return `this` instead of the parent.
       return this.$routeComponent()
     },
 
@@ -127,15 +140,15 @@ export default {
     },
 
     parentSchemaComponent() {
-      return this.schemaComponent?.$parent.schemaComponent
+      return this.schemaComponent?.parentComponent.schemaComponent
     },
 
     parentRouteComponent() {
-      return this.routeComponent?.$parent.routeComponent
+      return this.routeComponent?.parentComponent.routeComponent
     },
 
     parentFormComponent() {
-      return this.formComponent?.$parent.formComponent
+      return this.formComponent?.parentComponent.formComponent
     },
 
     // Returns the data of the first route component in the chain of parents
@@ -146,7 +159,10 @@ export default {
   },
 
   beforeCreate() {
-    this.$uid = ++uid
+    const uid = nextUid++
+    Object.defineProperty(this, '$uid', {
+      get() { return uid }
+    })
   },
 
   methods: {
@@ -163,11 +179,12 @@ export default {
     },
 
     setStore(key, value) {
-      return this.$set(this.store, key, value)
+      this.store[key] = value
+      return value
     },
 
     getChildStore(key) {
-      return this.getStore(key) || this.setStore(key, {})
+      return this.getStore(key) || this.setStore(key, reactive({}))
     },
 
     getSchemaValue(
@@ -241,6 +258,7 @@ export default {
       }
     },
 
+    // TODO: Rename *Link() to *Route().
     getQueryLink(query) {
       return {
         query,
@@ -257,30 +275,6 @@ export default {
       })
     },
 
-    showDialog({
-      components,
-      buttons,
-      data,
-      settings = {
-        width: 480,
-        height: 'auto',
-        clickToClose: false
-      }
-    }) {
-      // Shows a dito-dialog component through vue-js-modal, and wraps it in a
-      // promise so that the buttons in the dialog can use `dialog.resolve()`
-      // and `dialog.reject()` to close the modal dialog and resolve / reject
-      // the promise at once.
-      return new Promise((resolve, reject) => {
-        this.$modal.show(DitoComponent.component('dito-dialog'), {
-          components,
-          buttons,
-          data,
-          promise: { resolve, reject }
-        }, settings)
-      })
-    },
-
     getResourcePath(resource) {
       resource = getResource(resource)
       // Resources without a parent inherit the one from `dataComponent`
@@ -315,6 +309,15 @@ export default {
       return response
     },
 
+    showDialog({ components, buttons, data, settings }) {
+      return this.rootComponent.showDialog({
+        components,
+        buttons,
+        data,
+        settings
+      })
+    },
+
     request({ cache, ...options }) {
       // Allow caching of loaded data on two levels:
       // - 'global': cache globally, for the entire admin session
@@ -367,13 +370,7 @@ export default {
     },
 
     async navigate(location) {
-      return new Promise(resolve => {
-        this.$router.push(
-          location,
-          () => resolve(true),
-          () => resolve(false)
-        )
-      })
+      return this.$router.push(location)
     },
 
     download(options = {}) {
@@ -506,4 +503,4 @@ export default {
   }
 }
 
-let uid = 0
+let nextUid = 0

package/src/mixins/DomMixin.js

@@ -9,7 +9,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     for (const { remove } of this.domHandlers) {
       remove()
     }

package/src/mixins/EmitterMixin.js

@@ -4,14 +4,14 @@ import { isArray, isPlainObject } from '@ditojs/utils'
 export default {
   data() {
     return {
-      $events: null
+      listeners: null
     }
   },
 
   methods: {
-    // Async versions of Vue's $on() and $off() methods that keep track of the
-    // events added / removed, and provide a hasListeners() method that checks
-    // if the component has listeners for a given event.
+    // Async on() and $off() methods that keep track of the events added /
+    // removed, and provide a hasListeners() method that checks if the component
+    // has listeners for a given event.
 
     // Also adds proper handling of async events, including a async emit() that
     // deals with proper event queueing.
@@ -25,8 +25,8 @@ export default {
           this.on(key, event[key])
         }
       } else {
-        const events = this.$events || (this.$events = Object.create(null))
-        const { callbacks } = events[event] || (events[event] = {
+        const listeners = (this.listeners ||= Object.create(null))
+        const { callbacks } = (listeners[event] ||= {
           callbacks: [],
           queue: []
         })
@@ -47,7 +47,7 @@ export default {
     off(event, callback) {
       if (!arguments.length) {
         // Remove all events
-        delete this.$events
+        delete this.listeners
       } else if (isArray(event)) {
         for (const ev of event) {
           this.off(ev, callback)
@@ -58,11 +58,11 @@ export default {
         }
       } else {
         // Remove specific event
-        const entry = this.$events?.[event]
+        const entry = this.listeners?.[event]
         if (entry) {
           if (!callback) {
             // Remove all handlers for this event
-            delete this.$events[event]
+            delete this.listeners[event]
           } else {
             // Remove a specific handler: find the index in callbacks
             const { callbacks } = entry
@@ -81,7 +81,7 @@ export default {
 
     emit(event, ...args) {
       // Only queue event if there actually are listeners for it.
-      const entry = this.$events?.[event]
+      const entry = this.listeners?.[event]
       if (entry) {
         const { queue, callbacks } = entry
         return new Promise(resolve => {
@@ -129,7 +129,7 @@ export default {
         }
         return event.length > 0
       } else {
-        return !!this.$events?.[event]
+        return !!this.listeners?.[event]
       }
     },
 

package/src/mixins/RouteMixin.js

@@ -12,11 +12,11 @@ export default {
   },
 
   beforeRouteUpdate(to, from, next) {
-    this.beforeRouteChange(to, from, next)
+    this?.beforeRouteChange(to, from, next)
   },
 
   beforeRouteLeave(to, from, next) {
-    this.beforeRouteChange(to, from, next)
+    this?.beforeRouteChange(to, from, next)
   },
 
   data() {
@@ -36,11 +36,17 @@ export default {
       return this
     },
 
+    routeLevel() {
+      let level = 0
+      let routeComponent = this
+      while ((routeComponent = routeComponent.parentComponent.routeComponent)) {
+        level++
+      }
+      return level
+    },
+
     routeRecord() {
-      // TODO: Can this.$route.currentRoute be of use somewhere here?
-      // Retrieve the route-record to which this component was mapped to:
-      // https://github.com/vuejs/vue-router/issues/1338#issuecomment-296381459
-      return this.$route.matched[this.$vnode.data.routerViewDepth]
+      return this.$route.matched[this.routeLevel]
     },
 
     isLastRoute() {
@@ -66,8 +72,12 @@ export default {
       return this.meta.nested
     },
 
+    isView() {
+      return false
+    },
+
     meta() {
-      return this.routeRecord?.meta
+      return this.routeRecord.meta
     },
 
     path() {
@@ -95,7 +105,7 @@ export default {
     },
 
     // @overridable, see DitoForm
-    doesMutate() {
+    isMutating() {
       return false
     }
   },
@@ -107,7 +117,7 @@ export default {
     this.appState.routeComponents.push(this)
   },
 
-  destroyed() {
+  unmounted() {
     const { routeComponents } = this.appState
     routeComponents.splice(routeComponents.indexOf(this), 1)
   },
@@ -131,7 +141,7 @@ export default {
         )
       )
       if (isClosing) {
-        if (this.doesMutate) {
+        if (this.isMutating) {
           // For active directly mutating (nested) forms that were not validated
           // yet, validate them once. If the user then still wants to leave
           // them, they can click close / navigate away again.

package/src/mixins/SchemaParentMixin.js

@@ -19,8 +19,8 @@ export default {
   },
 
   methods: {
-    // This method is called by `DitoSchema.created()/destroyed()` on its
-    // $parent, if the parent uses the `SchemaParentMixin`:
+    // This method is called by `DitoSchema.created()/unmounted()` on its
+    // `$schemaParentComponent`, if the parent uses the `SchemaParentMixin`:
     _registerSchemaComponent(schemaComponent, add) {
       const { schemaComponents } = this
       if (add) {

package/src/mixins/SourceMixin.js

@@ -313,16 +313,16 @@ export default {
 
     wrappedPrimitives: {
       deep: true,
-      handler(newValue, oldValue) {
+      handler(to, from) {
         const { wrapPrimitives } = this
         // Skip the initial setting of wrappedPrimitives array
-        if (wrapPrimitives && oldValue !== null) {
+        if (wrapPrimitives && from !== null) {
           // Whenever the wrappedPrimitives change, map their values back to
           // the array of primitives, in a primitive way :)
           // But set `unwrappingPrimitives = true`, so the `listData` computed
           // property knows about it, which sets it to `false` again.
           this.unwrappingPrimitives = true
-          this.value = newValue.map(object => object[wrapPrimitives])
+          this.value = to.map(object => object[wrapPrimitives])
         }
       }
     }
@@ -509,15 +509,13 @@ export default {
               callOnComplete()
             } else {
             // Navigate to the component's path, then call `onComplete()`_:
-              this.$router.push(
-                { path },
+              this.$router.push({ path })
+                .catch(reject)
                 // Wait for the last route component to be mounted in the next
                 // tick before calling `onComplete()`
-                () => {
+                .then(() => {
                   this.$nextTick(callOnComplete)
-                },
-                reject
-              )
+                })
             }
           }
           // Keep removing the last part until we find a match.

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 {
@@ -38,10 +38,6 @@ export default {
       return this.schema.type
     },
 
-    component() {
-      return this.resolveTypeComponent(this.schema.component)
-    },
-
     context() {
       return new DitoContext(this, { nested: this.nested })
     },
@@ -70,7 +66,8 @@ export default {
         this.parsedValue = parse
           ? parse.call(this, new DitoContext(this, { value }))
           : value
-        this.$set(this.data, this.name, this.parsedValue)
+        // eslint-disable-next-line vue/no-mutating-props
+        this.data[this.name] = this.parsedValue
       }
     },
 
@@ -119,7 +116,7 @@ export default {
     visible: getSchemaAccessor('visible', {
       type: Boolean,
       default() {
-        return this.typeOptions.defaultVisible
+        return this.$options.defaultVisible
       }
     }),
 
@@ -178,20 +175,26 @@ export default {
           attributes.autocomplete = this.autocomplete
         }
       }
-      return attributes
+
+      return {
+        ...Object.fromEntries(
+          Object.entries(this.$attrs).filter(([key]) => key.startsWith('on'))
+        ),
+        ...this.events,
+        ...attributes
+      }
     },
 
-    listeners() {
-      const listeners = this.getListeners()
-      const { events = {} } = this.schema
-      if (events) {
-        // Register callbacks for all provides non-recognized events,
-        // assuming they are native events.
-        for (const event of Object.keys(events)) {
-          listeners[event] ||= () => this.emitEvent(event)
-        }
+    events() {
+      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 listeners
+      return events
     },
 
     validations() {
@@ -210,11 +213,6 @@ export default {
       return validations
     },
 
-    providesData() {
-      // NOTE: This is overridden in ResourceMixin, used by lists.
-      return false
-    },
-
     showClearButton() {
       return this.clearable && this.value != null
     }
@@ -225,7 +223,7 @@ export default {
     this.setupSchemaFields()
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this._register(false)
   },
 
@@ -234,20 +232,13 @@ export default {
       // Prevent unnested type components from overriding parent data paths
       if (this.nested) {
         this.schemaComponent._registerComponent(this, add)
-        // Install / remove the field events to watch of changes and handle
-        // validation flags. `events` is provided by `ValidationMixin.events()`
-        this[add ? 'on' : 'off'](this.events)
       }
     },
 
     // @overridable
-    getListeners() {
-      return {
-        focus: this.onFocus,
-        blur: this.onBlur,
-        input: this.onInput,
-        change: this.onChange
-      }
+    getEvents() {
+      const { onFocus, onBlur, onInput, onChange } = this
+      return { onFocus, onBlur, onInput, onChange }
     },
 
     // @overridable
@@ -284,19 +275,23 @@ export default {
 
     onFocus() {
       this.focused = true
+      this.markTouched()
       this.emitEvent('focus')
     },
 
     onBlur() {
       this.focused = false
+      this.validate()
       this.emitEvent('blur')
     },
 
     onInput() {
+      this.markDirty()
       this.emitEvent('input')
     },
 
     onChange() {
+      this.markDirty()
       this.emitEvent('change', {
         context: this.parsedValue !== undefined
           ? { value: this.parsedValue }

package/src/mixins/ValidationMixin.js

@@ -13,25 +13,6 @@ export default {
     }
   },
 
-  computed: {
-    events() {
-      return {
-        focus: () => {
-          this.isTouched = true
-        },
-        blur: () => {
-          this.validate()
-        },
-        change: () => {
-          this.markDirty()
-        },
-        input: () => {
-          this.markDirty()
-        }
-      }
-    }
-  },
-
   methods: {
     resetValidation() {
       this.isTouched = false
@@ -74,6 +55,10 @@ export default {
       return this.validate(false)
     },
 
+    markTouched() {
+      this.isTouched = true
+    },
+
     markDirty() {
       this.isDirty = true
       this.isValidated = false

package/src/types/TypeButton.vue

@@ -1,13 +1,12 @@
 <template lang="pug">
-  button.dito-button(
-    ref="element"
-    :id="dataPath"
-    :type="type"
-    :title="text"
-    :class="`dito-button-${verb}`"
-    v-bind="attributes"
-    v-on="listeners"
-  ) {{ text }}
+button.dito-button(
+  ref="element"
+  :id="dataPath"
+  :type="type"
+  :title="text"
+  :class="`dito-button-${verb}`"
+  v-bind="attributes"
+) {{ text }}
 </template>
 
 <script>
@@ -47,12 +46,9 @@ export default TypeComponent.register([
 
   methods: {
     // @override
-    getListeners() {
-      return {
-        focus: this.onFocus,
-        blur: this.onBlur,
-        click: this.onClick
-      }
+    getEvents() {
+      const { onFocus, onBlur, onClick } = this
+      return { onFocus, onBlur, onClick }
     },
 
     async submit(options) {

package/src/types/TypeCheckbox.vue

@@ -1,12 +1,11 @@
 <template lang="pug">
-  input.dito-checkbox(
-    ref="element"
-    :id="dataPath"
-    type="checkbox"
-    v-model="value"
-    v-bind="attributes"
-    v-on="listeners"
-  )
+input.dito-checkbox(
+  ref="element"
+  :id="dataPath"
+  type="checkbox"
+  v-model="value"
+  v-bind="attributes"
+)
 </template>
 
 <style lang="sass">

package/src/types/TypeCheckboxes.vue

@@ -1,19 +1,18 @@
 <template lang="pug">
-  ul.dito-checkboxes(
-    :id="dataPath"
-    :class="`dito-layout-${schema.layout || 'vertical'}`"
-  )
-    li(v-for="option in options")
-      label
-        input.dito-checkbox(
-          ref="element"
-          type="checkbox"
-          :value="getValueForOption(option)"
-          v-model="selectedOptions"
-          v-bind="attributes"
-          v-on="listeners"
-        )
-        | {{ getLabelForOption(option) }}
+ul.dito-checkboxes(
+  :id="dataPath"
+  :class="`dito-layout-${schema.layout || 'vertical'}`"
+)
+  li(v-for="option in options")
+    label
+      input.dito-checkbox(
+        ref="element"
+        type="checkbox"
+        :value="getValueForOption(option)"
+        v-model="selectedOptions"
+        v-bind="attributes"
+      )
+      | {{ getLabelForOption(option) }}
 </template>
 
 <style lang="sass">

package/src/types/TypeCode.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-  .dito-code(
-    ref="code"
-    :id="dataPath"
-    :style="style"
-  )
+.dito-code(
+  ref="code"
+  :id="dataPath"
+  :style="style"
+)
 </template>
 
 <style lang="sass">