@ditojs/admin 3.2.7 → 3.3.0

package/src/mixins/SourceMixin.js

@@ -4,7 +4,8 @@ import ResourceMixin from './ResourceMixin.js'
 import SchemaParentMixin from '../mixins/SchemaParentMixin.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 import { getMemberResource } from '../utils/resource.js'
-import { replaceRoute } from '../utils/route.js'
+import { ListQuery } from '../utils/ListQuery.js'
+import { ItemStores } from '../utils/ItemStores.js'
 import {
   isCompact,
   isInlined,
@@ -21,6 +22,7 @@ import {
   getViewPath
 } from '../utils/schema/lookup.js'
 import { updateOrder } from '../utils/schema/data.js'
+import { confirmAndRemove } from '../utils/dialogs.js'
 import {
   isObject,
   isString,
@@ -30,6 +32,7 @@ import {
   parseDataPath,
   normalizeDataPath
 } from '@ditojs/utils'
+import { markRaw } from 'vue'
 
 // @vue/component
 export default {
@@ -47,7 +50,16 @@ export default {
 
   data() {
     return {
-      wrappedPrimitives: null
+      wrappedPrimitives: null,
+      listQuery: markRaw(
+        new ListQuery({
+          router: this.$router,
+          getRoute: () => this.$route,
+          getSourceStore: () => this.store,
+          getDefaultQuery: () => this.defaultQuery
+        })
+      ),
+      itemStores: ItemStores.getFromStore(this.store)
     }
   },
 
@@ -157,45 +169,28 @@ export default {
       return this.routeComponent.getChildPath(this.schema.path)
     },
 
+    // The defaults of the query, see `ListQuery`.
     defaultQuery() {
-      const { defaultOrder: order } = this
-      return order ? { order } : {}
+      return {
+        scope: this.defaultScope?.name,
+        page: this.schema.page,
+        order: this.defaultOrder
+      }
     },
 
-    query: getStoreAccessor('query', {
-      get(query) {
-        return {
-          ...this.defaultQuery,
-          ...query
-        }
+    query: {
+      get() {
+        return this.listQuery.query
       },
 
+      // Navigates to the query asynchronously, see `ListQuery.update()`. The
+      // stored query and thus the getter only change once the route did, when
+      // the `$route` watcher loads the list. Loads requested meanwhile wait
+      // for the navigation, see `requestData()`.
       set(query) {
-        // Always keep the displayed query parameters in sync with the stored
-        // ones. Use scope and page from the list schema as defaults, but allow
-        // the route query parameters to override them.
-        const {
-          scope = this.defaultScope?.name,
-          page = this.schema.page,
-          type
-        } = this.query
-        // 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)) {
-          // Change the route query parameters, but don't trigger a route
-          // change, as that would cause the list to reload.
-          replaceRoute({ query })
-        }
-        return query // Let getStoreAccessor() do the actual setting
+        this.listQuery.update(query)
       }
-    }),
+    },
 
     total: getStoreAccessor('total'),
 
@@ -355,25 +350,14 @@ export default {
       // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
       flush: 'post',
       handler(to, from) {
-        if (this.providesData) {
-          if (
-            from.path === to.path &&
-            from.hash === to.hash
-          ) {
-            // Paths and hashes remain the same, so only queries have changed.
-            // Update filter and reload data without clearing.
-            this.query = to.query
-            this.loadData(false)
-          } else if (
-            this.meta.reload &&
-            from.path !== to.path &&
-            from.path.startsWith(to.path)
-          ) {
-            // Reload the source when navigating back to a parent-route after
-            // changing data in a child-route.
-            this.meta.reload = false
-            this.loadData(false)
-          }
+        if (
+          this.providesData &&
+          // Only the query changed, see `ListQuery`:
+          from.path === to.path &&
+          from.hash === to.hash &&
+          this.listQuery.setFromRoute(to.query)
+        ) {
+          this.loadData(false)
         }
       }
     },
@@ -417,10 +401,26 @@ export default {
 
   methods: {
     setupData() {
-      this.query = this.$route.query
+      this.listQuery.syncWithRoute()
       this.ensureData()
     },
 
+    // @override ResourceMixin.requestData()
+    requestData() {
+      // While a navigation to a changed query is pending, the stored query is
+      // stale, and the `$route` watcher loads the list with the new query once
+      // the route changed. Wait for it instead of loading the stale query, and
+      // only load if the navigation failed or was superseded.
+      const navigated = this.listQuery.whenNavigated()
+      return navigated
+        ? navigated.then(hasNavigated => {
+            if (!hasNavigated && !this.$.isUnmounted) {
+              return this.requestData()
+            }
+          })
+        : ResourceMixin.methods.requestData.call(this)
+    },
+
     // @override ResourceMixin.clearData()
     clearData() {
       this.total = 0
@@ -450,6 +450,10 @@ export default {
       return this.value
     },
 
+    getItemStore(item) {
+      return this.itemStores.getStore(this.getItemUid(this.schema, item))
+    },
+
     isListResults(data) {
       // Lists can also be loaded as `{ results, total }`, see `setData()`.
       return (
@@ -536,57 +540,71 @@ export default {
         }
       }
       if (removed) {
-        this.removeItemStore(this.schema, item, index)
-        this.onChange()
+        this.itemStores.removeStore(this.getItemUid(this.schema, item))
+        // Items of lists with a resource are deleted through it, see
+        // `deleteItem()`, leaving no changes to save behind, but still
+        // changing the list.
+        if (this.isTransient) {
+          this.onChange()
+        } else {
+          this.emitChangeEvent()
+        }
       }
     },
 
-    deleteItem(item, index) {
-      const label = (
-        item &&
-        this.getItemLabel(this.schema, item, {
-          index,
-          extended: true
-        })
-      )
-
-      const notify = () =>
-        this.notify({
-          type: this.isTransient ? 'info' : 'success',
-          title: 'Successfully Removed',
-          text: [
-            `${label} was ${this.verbs.deleted}.`,
-            this.transientNote
-          ]
-        })
-
-      if (
-        item &&
-        window.confirm(
-          `Do you really want to ${this.verbs.delete} ${label}?`
-        )
-      ) {
-        if (this.isTransient) {
-          this.removeItem(item, index)
-          notify()
-        } else {
-          const itemId = this.getItemId(this.schema, item, index)
+    async deleteItem(item, index) {
+      if (!item) return
+      const label = this.getItemLabel(this.schema, item, {
+        index,
+        extended: true
+      })
+      // Look up the item by identity whenever it's removed, as the data may
+      // have changed while the dialog was open or the request was pending.
+      // Object sources have no index, see `removeItem()`.
+      const getCurrentIndex = () => {
+        if (this.isObjectSource) {
+          return this.objectData === item ? null : -1
+        }
+        return this.listData.indexOf(item)
+      }
+      const removeIfPresent = () => {
+        const currentIndex = getCurrentIndex()
+        const isPresent = currentIndex !== -1
+        if (isPresent) {
+          this.removeItem(item, currentIndex)
+        }
+        return isPresent
+      }
+      await confirmAndRemove(this, {
+        label,
+        isTransient: this.isTransient,
+        remove: async () => {
+          if (this.isTransient) {
+            return removeIfPresent()
+          }
+          const currentIndex = getCurrentIndex()
+          if (currentIndex === -1) {
+            return false
+          }
           const method = 'delete'
           const resource = getMemberResource(
-            itemId,
+            this.getItemId(this.schema, item, currentIndex),
             this.getResource({ method })
           )
-          if (resource) {
-            this.handleRequest({ method, resource }, err => {
-              if (!err) {
-                this.removeItem(item, index)
-                notify()
-              }
-              this.reloadData()
-            })
+          if (!resource) {
+            return false
           }
+          let isDeleted = false
+          await this.handleRequest({ method, resource }, err => {
+            if (!err) {
+              removeIfPresent()
+              isDeleted = true
+            }
+            this.reloadData()
+          })
+          return isDeleted
         }
-      }
+      })
     },
 
     getSchemaComponent(index) {
@@ -646,10 +664,10 @@ export default {
     navigateToRouteComponent(dataPath, onComplete) {
       return new Promise((resolve, reject) => {
         const callOnComplete = () => {
-          // Retrieve the last route component, which will be the component that
-          // we just navigated to, and pass it on to `onComplete()`
-          const { routeComponents } = this.appState
-          const routeComponent = routeComponents[routeComponents.length - 1]
+          // Retrieve the route component of the last route level, which is the
+          // component that we just navigated to, and pass it to `onComplete()`
+          const level = this.$route.matched.length - 1
+          const routeComponent = this.appState.routeComponents[level]
           resolve(onComplete?.([routeComponent]) ?? true)
         }
 

package/src/mixins/TypeMixin.js

@@ -1,7 +1,9 @@
 import ValueMixin from './ValueMixin.js'
 import ContextMixin from './ContextMixin.js'
 import ValidationMixin from './ValidationMixin.js'
+import { getSchemaEventEntries } from '../utils/schema/events.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
+import { trackRegistration } from '../utils/registration.js'
 import { getValidations } from '../utils/schema/validation.js'
 import { asArray, camelize, equals } from '@ditojs/utils'
 
@@ -22,7 +24,8 @@ export default {
     label: { type: String, default: null },
     single: { type: Boolean, default: false },
     nested: { type: Boolean, default: true },
-    accumulatedBasis: { type: Number, default: null }
+    // The id of the element that displays the errors, see `DitoContainer`.
+    errorsElementId: { type: String, default: null }
   },
 
   data() {
@@ -41,11 +44,6 @@ export default {
       return this.schema.type
     },
 
-    labelNode() {
-      const node = this.isMounted ? this.$el.previousElementSibling : null
-      return node?.matches('.dito-label') ? node : null
-    },
-
     visible: getSchemaAccessor('visible', {
       type: Boolean,
       default() {
@@ -107,19 +105,12 @@ export default {
       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,
-      // 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 || {})) {
+      // Register callbacks for all events that the schema handles and that the
+      // component doesn't handle itself, assuming they are native events, in
+      // both forms, `events: { mouseenter }` and `onMouseenter`.
+      for (const { event } of getSchemaEventEntries(this.schema)) {
         events[`on${camelize(event, true)}`] ??= () => {
           this.emitEvent(event)
         }
@@ -133,7 +124,10 @@ export default {
       const attributes = {
         ...this.events,
         // Only text fields support `readonly`, disable all other components.
-        disabled: this.disabled || (this.readonly && !textField)
+        'disabled': this.disabled || (this.readonly && !textField),
+        // Link the displayed errors for assistive technology:
+        'aria-invalid': this.hasErrors || null,
+        'aria-describedby': this.hasErrors ? this.errorsElementId : null
       }
 
       if (nativeField) {
@@ -155,10 +149,6 @@ export default {
 
     validations() {
       return getValidations(this.schema, this.context)
-    },
-
-    showClearButton() {
-      return this.clearable && this.value != null
     }
   },
 
@@ -172,23 +162,23 @@ export default {
       if (this.hasErrors && !equals(value, this.valueWithErrors)) {
         this.clearErrors()
       }
-    },
-
-    componentPath(componentPath, oldComponentPath) {
-      // Component paths change when list items move, see `_registerEntry()`.
-      this._registerWithSchemaComponent(false, oldComponentPath)
-      this._registerWithSchemaComponent(true, componentPath)
     }
   },
 
   created() {
-    this._register(true)
+    // Provide component to container for schema accessor evaluation.
+    this.$emit('update:component', this)
+    this._unregister = trackRegistration(
+      this,
+      this._registerWithSchemaComponent
+    )
     this.setupSchemaFields()
     this.warnAboutUncomputedValue()
   },
 
   unmounted() {
-    this._register(false)
+    this.$emit('update:component', null)
+    this._unregister()
   },
 
   methods: {
@@ -198,7 +188,10 @@ export default {
     warnAboutUncomputedValue() {
       if (
         this.schema.compute &&
-        !this.dataModel.hasComputedValueEntry(this.componentPath)
+        !this.dataModel.hasComputedValueEntry({
+          data: this.data,
+          name: this.name
+        })
       ) {
         console.warn(
           `The value of the component at '${this.componentPath}' isn't ` +
@@ -207,12 +200,6 @@ export default {
       }
     },
 
-    _register(add) {
-      // Provide component to container for schema accessor evaluation.
-      this.$emit('update:component', add ? this : null)
-      this._registerWithSchemaComponent(add, this.componentPath)
-    },
-
     _registerWithSchemaComponent(add, componentPath) {
       // Register unnested type components separately, to prevent them from
       // overriding parent data paths.
@@ -244,12 +231,20 @@ export default {
 
     // @overridable
     focusElement() {
-      this.getFocusElement()?.focus?.()
+      this._getFocusTarget('focus')?.focus?.()
     },
 
     // @overridable
     blurElement() {
-      this.getFocusElement()?.blur?.()
+      this._getFocusTarget('blur')?.blur?.()
+    },
+
+    _getFocusTarget(method) {
+      // Prefer the `focus()` and `blur()` of components, e.g. `DitoInput`
+      // targets its input rather than its root element that
+      // `getFocusElement()` returns.
+      const element = asArray(this.$refs.element)[0]
+      return element?.[method] ? element : this.getFocusElement()
     },
 
     getFocusElement() {
@@ -298,7 +293,14 @@ export default {
 
     onChange() {
       this.markDirty()
-      this.emitEvent('change', {
+      this.emitChangeEvent()
+    },
+
+    // Emits the `change` event without marking the component dirty, e.g. for
+    // changes that are already persisted through a resource, see
+    // `SourceMixin.removeItem()`.
+    emitChangeEvent() {
+      return this.emitEvent('change', {
         context: {
           // Prevent endless parse recursion:
           value: this.parsedValue !== undefined ? this.parsedValue : this.value

package/src/mixins/ValidationMixin.js

@@ -50,9 +50,9 @@ export default {
     },
 
     markTouched() {
+      // Displayed errors remain while the input is focused, e.g. after
+      // `showValidationErrors()` focused it, until new input clears them.
       this.isTouched = true
-      // Clear currently displayed errors when focusing input.
-      this.clearErrors()
     },
 
     markDirty() {
@@ -74,9 +74,21 @@ export default {
       this.$emit('errors', this.errors)
     },
 
+    // Removes the last occurrence of the error that `addError()` added.
+    removeError(error) {
+      const index = this.errors?.lastIndexOf(error) ?? -1
+      if (index >= 0) {
+        this.errors.splice(index, 1)
+        if (this.errors.length === 0) {
+          this.errors = null
+        }
+        this.$emit('errors', this.errors)
+      }
+    },
+
     showValidationErrors(errors, focus) {
       // Convert from AJV errors objects to an array of error messages
-      this.errors = []
+      this.clearErrors()
       if (errors.length === 0) {
         return false
       }
@@ -84,7 +96,7 @@ export default {
         this.addError(message, true)
       }
       if (focus) {
-        this.scrollIntoView()
+        this.focus()
       }
       return true
     },

package/src/mixins/ValidatorMixin.js

@@ -22,7 +22,7 @@ export default {
     },
 
     isValidated() {
-      return this.schemaComponents.every(it => it.isValid)
+      return this.schemaComponents.every(it => it.isValidated)
     }
   },
 

package/src/styles/_settings.scss

@@ -29,6 +29,7 @@ $line-height: rounded(
 $button-order-arrow-size: 4px;
 
 // Pulldown
+// Deprecated, remove in 4.0
 $pulldown-radius: 0.5em;
 $pulldown-padding-ver: 0.5em;
 $pulldown-padding-hor: 1em;
@@ -79,6 +80,9 @@ $z-index-header: 2000;
 $z-index-tippy: 750;
 $z-index-main-buttons: 500;
 
+// Drag overlay, see `DitoRoot` and `DitoTypeUpload`
+$drag-overlay-duration: 0.15s;
+
 // Patterns
 $pattern-transparency-size: ($font-size - $border-width) * $input-height-factor;
 $pattern-transparency: repeating-conic-gradient(

package/src/styles/_tippy.scss

@@ -31,15 +31,4 @@
   &[data-theme~='info'] {
     --color: #{color.adjust($color-active, $lightness: 5%)};
   }
-
-  &[data-theme~='error'] {
-    --color: #{color.adjust($color-error, $lightness: 5%)};
-
-    cursor: pointer;
-
-    > .tippy-arrow {
-      transform: unset !important;
-      left: 16px !important;
-    }
-  }
 }

package/src/styles/style.scss

@@ -1,7 +1,6 @@
 @import '_imports';
 @import '_base';
 @import '_button';
-@import '_pulldown';
 @import '_layout';
 @import '_scroll';
 @import '_table';

package/src/types/DitoTypeButton.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
-DitoButton.dito-button(
+DitoButton(
   :id="componentPath"
   ref="element"
   :type="type"
+  :verb="verb"
   :text="text"
-  :title="title"
-  :disabled="disabled"
-  :class="buttonClass"
+  :title="text"
+  :aria-busy="isRunning"
   v-bind="attributes"
 )
   template(#prefix)
@@ -37,7 +37,7 @@ import DitoAffixes from '../components/DitoAffixes.vue'
 import { DitoButton } from '@ditojs/ui/src'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { hasResource } from '../utils/resource.js'
-import { labelize, asArray } from '@ditojs/utils'
+import { asArray } from '@ditojs/utils'
 
 export default DitoTypeComponent.register(
   ['button', 'submit'],
@@ -60,18 +60,10 @@ export default DitoTypeComponent.register(
         return this.verbs[this.name]
       },
 
-      buttonClass() {
-        return this.verb ? `dito-button--${this.verb}` : null
-      },
-
       text: getSchemaAccessor('text', {
         type: String
       }),
 
-      title() {
-        return this.text || labelize(this.verb)
-      },
-
       prefixes() {
         return asArray(this.schema.prefix)
       },
@@ -98,6 +90,11 @@ export default DitoTypeComponent.register(
       },
 
       async onClick() {
+        // Prevent running the action again while it's running, e.g. submits.
+        // The button isn't disabled meanwhile, as `disabled` reflects the
+        // state of the schema, e.g. of forms that can't be submitted when
+        // they're clean, which a running action doesn't change:
+        if (this.isRunning) return
         this.isRunning = true
         try {
           const res = await this.emitEvent('click', {
@@ -111,7 +108,7 @@ export default DitoTypeComponent.register(
             await this.submit()
           }
         } catch (error) {
-          const res = await this.emitEvent('error', { error })
+          const res = await this.emitEvent('error', { context: { error } })
           if (res === undefined) {
             if (error instanceof AggregateError) {
               for (const err of error.errors) {