@ditojs/admin 3.2.6 → 3.3.0

package/src/components/DitoTrail.vue

@@ -1,30 +1,37 @@
 <template lang="pug">
-.dito-trail(aria-label="Breadcrumb")
+nav.dito-trail(aria-label="Breadcrumb")
   ul
     li(
       v-for="component in trail"
     )
-      a.dito-trail__link(
-        :class="{ 'dito-trail__link--active': component.path === $route.path }"
-        :aria-current="component.path === $route.path ? 'page' : null"
-        :href="getComponentHref(component)"
-        @click.prevent.stop="onClickComponent(component)"
+      RouterLink(
+        v-slot="{ href, navigate }"
+        :to="getComponentRoute(component)"
+        custom
       )
-        span.dito-trail__text(
-          :class="{ 'dito-trail__text--dirty': component.isDirty }"
+        a.dito-trail__link(
+          :class="{ 'dito-trail__link--active': isCurrentComponent(component) }"
+          :aria-current="isCurrentComponent(component) ? 'page' : null"
+          :href="href"
+          @click="navigate"
         )
-          | {{ component.breadcrumb }}
+          span.dito-trail__text(
+            :class="{ 'dito-trail__text--dirty': component.isDirty }"
+          )
+            | {{ component.breadcrumb }}
   slot
 </template>
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import { getViewLinkPath } from '../utils/schema/lookup.js'
 
 // @vue/component
 export default DitoComponent.component('DitoTrail', {
   computed: {
     trail() {
-      // Leave out the components that are being left, until they're unmounted.
+      // The route components by route level. Leave out the components that are
+      // being left, until they're unmounted.
       return this.appState.routeComponents.filter(
         component => !component.isLeavingRoute
       )
@@ -32,23 +39,16 @@ export default DitoComponent.component('DitoTrail', {
   },
 
   methods: {
-    getComponentRoutePath(component) {
-      // Do the same as in `DitoMenu`: Link menu items to the first children.
-      const { schema } = component
-      return schema.type === 'menu'
-        ? Object.values(schema.items)[0].fullPath
-        : component.path
-    },
-
-    getComponentHref(component) {
-      return this.$router.resolve(this.getComponentRoutePath(component)).href
+    getComponentRoute(component) {
+      // `force` reloads the view even if it is already the current route.
+      return {
+        path: getViewLinkPath(component.schema, component.path),
+        force: true
+      }
     },
 
-    onClickComponent(component) {
-      this.$router.push({
-        path: this.getComponentRoutePath(component),
-        force: true
-      })
+    isCurrentComponent(component) {
+      return component.path === this.$route.path
     }
   }
 })

package/src/components/DitoTreeItem.vue

@@ -6,7 +6,6 @@
     'dito-tree-item--active': active
   }`
   :style="level > 0 && { '--level': level }"
-  :data-path="path"
 )
   .dito-tree-header(
     v-if="label"
@@ -36,26 +35,24 @@
       .dito-tree-label(
         v-html="label"
       )
-    .dito-buttons.dito-buttons--small(
+    DitoEditButtons.dito-buttons--small(
       v-if="hasEditButtons"
+      :round="false"
+      :schema="schema"
+      :formSchema="getItemFormSchema(schema, data, context)"
+      :dataPath="dataPath"
+      :data="data"
+      :meta="nestedMeta"
+      :store="store"
+      :disabled="disabled"
+      :draggable="draggable"
+      :editable="editable"
+      :deletable="deletable"
+      :editPath="editPath"
+      :editQuery="$route.query"
+      @delete="$emit('delete')"
+      @move="delta => $emit('move', delta)"
     )
-      //- Firefox doesn't like <button> here, so use <a> instead:
-      a.dito-button(
-        v-if="draggable"
-        v-bind="getButtonAttributes(verbs.drag)"
-      )
-      button.dito-button(
-        v-if="editable"
-        type="button"
-        v-bind="getButtonAttributes(verbs.edit)"
-        @click="onEdit"
-      )
-      button.dito-button(
-        v-if="deletable"
-        type="button"
-        v-bind="getButtonAttributes(verbs.delete)"
-        @click="onDelete"
-      )
   table.dito-properties(
     v-if="properties"
     v-show="opened"
@@ -70,8 +67,8 @@
         )
       DitoTableCell(
         :cell="property"
-        :schema="property"
-        :dataPath="getPropertyDataPath(property)"
+        :schema="schema"
+        :dataPath="dataPath"
         :data="data"
         :meta="nestedMeta"
         :store="store"
@@ -83,7 +80,7 @@
     :options="getDraggableOptions(true)"
     :draggable="childrenDraggable"
     :modelValue="childrenList"
-    @update:modelValue="value => (childrenList = value)"
+    @update:modelValue="changeChildren"
   )
     DitoTreeItem(
       v-for="(item, index) in childrenItems"
@@ -97,7 +94,9 @@
       :draggable="childrenDraggable"
       :label="getItemLabel(childrenSchema, item.data, { index })"
       :level="level + 1"
-      @delete="deleteChild(index)"
+      @delete="deleteChild(item.data)"
+      @move="delta => moveChild(item.data, delta)"
+      @change-children="change => $emit('changeChildren', change)"
     )
     //- TODO: Convert dito-tree-item to use dito-label internally, and then
     //- pass `asObject: true` in the `getItemLabel()` call above.
@@ -105,19 +104,25 @@
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import DitoEditButtons from './DitoEditButtons.vue'
 import ItemMixin from '../mixins/ItemMixin'
 import SortableMixin from '../mixins/SortableMixin.js'
 import { appendDataPath, getRelativeDataPath } from '../utils/data.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { getNamedSchemas, hasFormSchema } from '../utils/schema/lookup.js'
-import { updateOrder } from '../utils/schema/data.js'
-import { stripHtml } from '@ditojs/utils'
-
+import { getTextFromHtml } from '../utils/html.js'
+import { getListWithMovedItem } from '../utils/list.js'
+import { confirmAndRemove } from '../utils/dialogs.js'
+import { isPathWithin } from '../utils/route.js'
+
+// Renders an item of a tree list or tree object, see `DitoTypeTreeList`, which
+// is the item's `sourceComponent`. Items don't write the tree: They emit the
+// changed children with `changeChildren`, which the tree list applies.
 // @vue/component
 export default DitoComponent.component('DitoTreeItem', {
   mixins: [ItemMixin, SortableMixin],
-  emits: ['update:data', 'delete'],
-  inject: ['container'],
+  components: { DitoEditButtons },
+  emits: ['delete', 'move', 'changeChildren'],
 
   props: {
     schema: { type: Object, required: true },
@@ -142,7 +147,7 @@ export default DitoComponent.component('DitoTreeItem', {
       // Continue the path of the tree list with the item indices and children
       // names of the data path. The root item's data path doesn't contain the
       // list's name, see `DitoTypeTreeList.treeDataPath`.
-      const { componentPath, dataPath } = this.container
+      const { componentPath, dataPath } = this.sourceComponent
       const relativeDataPath = getRelativeDataPath(this.dataPath, dataPath)
       return relativeDataPath
         ? appendDataPath(componentPath, relativeDataPath)
@@ -150,15 +155,15 @@ export default DitoComponent.component('DitoTreeItem', {
     },
 
     meta() {
-      return this.container.meta
+      return this.sourceComponent.meta
     },
 
     store() {
-      return this.container.store
+      return this.sourceComponent.store
     },
 
     disabled() {
-      return this.container.disabled
+      return this.sourceComponent.disabled
     },
 
     nestedMeta() {
@@ -172,26 +177,13 @@ export default DitoComponent.component('DitoTreeItem', {
       return getNamedSchemas(this.schema.properties)
     },
 
-    // TODO: Should this be named `sourceSchema` instead? Use SourceMixin?
     childrenSchema() {
       return this.schema.children
     },
 
-    childrenList: {
-      get() {
-        const name = this.childrenSchema?.name
-        return name && this.data[name]
-      },
-
-      set(value) {
-        const name = this.childrenSchema?.name
-        if (name) {
-          updateOrder(this.childrenSchema, value)
-          // eslint-disable-next-line vue/no-mutating-props
-          this.data[name] = value
-          this.$emit('update:data', value)
-        }
-      }
+    childrenList() {
+      const name = this.childrenSchema?.name
+      return name && this.data[name]
     },
 
     childrenDraggable() {
@@ -220,7 +212,7 @@ export default DitoComponent.component('DitoTreeItem', {
     childrenItems() {
       const { childrenSchema, childrenList } = this
       if (childrenSchema && childrenList) {
-        const { editPath } = this.container
+        const { editPath } = this.sourceComponent
         const childrenOpen = !this.path && childrenSchema.open
         // Build a children list with child meta information for the template.
         return childrenList.map((data, index) => {
@@ -231,7 +223,7 @@ export default DitoComponent.component('DitoTreeItem', {
           const open = (
             childrenOpen ||
             // Only count as "in edit path" when it's not the full edit path.
-            editPath.startsWith(path) && path.length < editPath.length
+            !!path && editPath !== path && isPathWithin(editPath, path)
           )
           const active = editPath === path
           return { data, path, open, active }
@@ -241,7 +233,7 @@ export default DitoComponent.component('DitoTreeItem', {
     },
 
     ariaLabel() {
-      return this.label ? stripHtml(this.label) : null
+      return this.label ? getTextFromHtml(this.label) : null
     },
 
     details() {
@@ -258,17 +250,13 @@ export default DitoComponent.component('DitoTreeItem', {
       return this.draggable || this.editable || this.deletable
     },
 
-    // TODO: Support creatable!
-    // TODO: Add support for creatable, editable and deletable overrides on the
-    // associated forms, just like in `TypeList` and `TypeObject`, through
-    // `DitoEditButtons`. It would be best to use `DitoEditButtons` here too.
-    creatable: getSchemaAccessor('creatable', {
-      type: Boolean,
-      default: false,
-      get(creatable) {
-        return creatable && hasFormSchema(this.schema)
-      }
-    }),
+    editPath() {
+      // The edit routes of the items are handled by the routes of the tree
+      // list, allowing reloads as well, see `DitoTypeTreeList.processSchema()`.
+      return this.editable && this.path
+        ? `${this.sourceComponent.path}${this.path}`
+        : null
+    },
 
     editable: getSchemaAccessor('editable', {
       type: Boolean,
@@ -284,91 +272,60 @@ export default DitoComponent.component('DitoTreeItem', {
     })
   },
 
-  methods: {
-    getPropertyDataPath(property) {
-      return appendDataPath(this.dataPath, property.name)
-    },
-
-    editPath(path) {
-      // All we got to do is push the right edit path to the router, the rest
-      // is handled by our routes, allowing reloads as well.
-      this.$router.push({
-        path: `${this.container.path}${path}`,
-        // Preserve current query
-        query: this.$route.query
-      })
-    },
-
-    onEdit() {
-      this.editPath(this.path)
-    },
-
-    // Items are removed from the children of their parent, see
-    // `deleteChild()`.
-    onDelete() {
-      this.$emit('delete')
-    },
+  watch: {
+    open(open) {
+      // Open the item also when it comes into the edit path later, e.g. when
+      // navigating to the form of one of its children.
+      if (open) {
+        this.opened = true
+      }
+    }
+  },
 
-    // Removes the child after confirming it, like inlined lists do. Open forms
-    // of the child or of its later siblings are closed, as the removal shifts
-    // the indices in their paths. The removal is transient, as the tree is
-    // part of its form's data.
-    deleteChild(index) {
-      const { childrenSchema, container } = this
-      const item = this.childrenList[index]
-      const label = this.getItemLabel(childrenSchema, item, {
-        index,
-        extended: true
+  methods: {
+    changeChildren(children) {
+      this.$emit('changeChildren', {
+        data: this.data,
+        childrenSchema: this.childrenSchema,
+        path: this.path,
+        children
       })
-      if (
-        window.confirm(`Do you really want to ${this.verbs.delete} ${label}?`)
-      ) {
-        if (this.isEditingChildFrom(index)) {
-          this.$router.push({
-            path: container.path,
-            query: this.$route.query
-          })
-        }
-        this.childrenList = this.childrenList.toSpliced(index, 1)
-        this.onChange()
-        this.notify({
-          type: 'info',
-          title: 'Successfully Removed',
-          text: [`${label} was ${this.verbs.deleted}.`, container.transientNote]
-        })
-      }
     },
 
-    // Returns whether the form of a child at the index or after it is open,
-    // or the form of one of their own children.
-    isEditingChildFrom(index) {
-      const childrenPath = this.childrenSchema.path
-      if (!childrenPath) {
-        return false
+    // Moves the child by `delta` positions, see `DitoDragHandle`.
+    moveChild(child, delta) {
+      const children = getListWithMovedItem(this.childrenList, child, delta)
+      if (children) {
+        this.changeChildren(children)
       }
-      const prefix = `${this.path}/${childrenPath}/`
-      const { editPath } = this.container
-      if (!editPath.startsWith(prefix)) {
-        return false
-      }
-      const [childIndex] = editPath.slice(prefix.length).split('/')
-      return Number(childIndex) >= index
     },
 
-    onChange() {
-      this.container.onChange()
+    // Removes the child after confirming it, like inlined lists do. The removal
+    // is transient, as the tree is part of its form's data.
+    async deleteChild(child) {
+      await confirmAndRemove(this, {
+        label: this.getItemLabel(this.childrenSchema, child, {
+          index: this.childrenList.indexOf(child),
+          extended: true
+        }),
+        isTransient: true,
+        remove: () => {
+          // Look up the child by identity once confirmed, as the children may
+          // have changed while the dialog was open.
+          const children = this.childrenList.filter(it => it !== child)
+          if (children.length === this.childrenList.length) {
+            return false
+          }
+          this.changeChildren(children)
+        }
+      })
     },
 
     // @override
-    onEndDrag(event) {
-      SortableMixin.methods.onEndDrag.call(this, event)
-      const { item } = event
-      // Preserve active state of edited sub-items, by editing their new path.
-      if (item.classList.contains('dito-tree-item--active')) {
-        this.$nextTick(() => {
-          this.editPath(event.item.dataset.path)
-        })
-      }
+    onEndDrag() {
+      // The tree list applies the reordered children and notifies of the
+      // change, see `DitoTypeTreeList.changeChildren()`.
+      this.isDragging = false
     }
   }
 })
@@ -444,18 +401,22 @@ export default DitoComponent.component('DitoTreeItem', {
   .dito-buttons {
     flex: auto;
     display: flex;
-    visibility: hidden;
+    // Transparent rather than hidden, so the buttons can be focused with the
+    // keyboard, which shows them, see below.
+    opacity: 0;
     height: 100%;
     margin: 1px;
     margin-right: 0;
   }
 
-  .dito-tree-header:hover {
+  .dito-tree-header:hover,
+  .dito-tree-header:focus-within {
     > .dito-buttons {
-      visibility: visible;
-    } // Hide buttons during dragging
+      opacity: 1;
+    }
   }
 
+  // Hide buttons during dragging
   &--dragging {
     .dito-tree-header {
       > .dito-buttons {

package/src/components/DitoUploadFile.vue

@@ -24,6 +24,9 @@ import DitoComponent from '../DitoComponent.js'
 export default DitoComponent.component('DitoUploadFile', {
   props: {
     file: { type: Object, required: true },
+    // The file object of the upload component while the file is added through
+    // it, see `DitoTypeUpload.getUpload()`.
+    upload: { type: Object, default: null },
     thumbnail: { type: String, default: null },
     thumbnailUrl: { type: String, default: null }
   },
@@ -48,7 +51,7 @@ export default DitoComponent.component('DitoUploadFile', {
   },
 
   watch: {
-    'file.upload.file': {
+    'upload.file': {
       immediate: true,
       handler(file) {
         if (this.thumbnail && file?.type.startsWith('image/')) {
@@ -74,7 +77,7 @@ const TYPES = {
   'image/png': 'PNG',
   'image/gif': 'GIF',
   'image/svg+xml': 'SVG',
-  'movie/mp4': 'MP4',
+  'video/mp4': 'MP4',
   'audio/mpeg': 'MP3',
   'application/json': 'JSON',
   'application/xml': 'XML',

package/src/components/DitoView.vue

@@ -29,6 +29,7 @@ template(
 
 <script>
 import { markRaw } from 'vue'
+import { deprecate } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
 import {
@@ -37,25 +38,31 @@ import {
 } from '../utils/schema/structure.js'
 import { hasResource } from '../utils/resource.js'
 import { DataModel } from '../utils/DataModel.js'
+import { LoadingTracker, LoadingSwitch } from '../utils/LoadingTracker.js'
 
 // @vue/component
 export default DitoComponent.component('DitoView', {
   mixins: [RouteMixin],
 
   provide() {
-    // Redirect $sourceComponent and $resourceComponent to the main component:
     return {
+      // Redirect $sourceComponent and $resourceComponent to the main component:
       $sourceComponent: () => this.mainComponent?.sourceComponent || null,
-      $resourceComponent: () => this.mainComponent?.resourceComponent || null
+      $resourceComponent: () => this.mainComponent?.resourceComponent || null,
+      $loadingTracker: () => this.loadingTracker
     }
   },
 
   data() {
+    // Tracks the requests of all resource components in the view, which is
+    // disabled while any of them is pending, see `isLoading`:
+    const loadingTracker = new LoadingTracker(this.$loadingTracker())
     return {
-      // Updated from LoadingMixin through `setLoading(isLoading)`:
-      isLoading: false,
-      // NOTE: Data is shared across all views because the router recycles the
-      // DitoView component.
+      loadingTracker: markRaw(loadingTracker),
+      // The loading operation of the deprecated `setLoading()`.
+      setLoadingSwitch: markRaw(new LoadingSwitch(loadingTracker)),
+      // NOTE: Each view has its own data, as `DitoRouterView` renders each
+      // route record with its own component instance.
       data: {}
     }
   },
@@ -73,6 +80,10 @@ export default DitoComponent.component('DitoView', {
       return true
     },
 
+    isLoading() {
+      return this.loadingTracker.isLoading
+    },
+
     isSingleComponentView() {
       return isSingleComponentView(this.schema)
     },
@@ -104,20 +115,6 @@ export default DitoComponent.component('DitoView', {
     }
   },
 
-  watch: {
-    $route: {
-      // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
-      flush: 'post',
-      handler(to, from) {
-        // See if the route changes completely, and clear the data if it does.
-        if (this.isFullRouteChange(to, from)) {
-          this.isLoading = false
-          this.data = {}
-        }
-      }
-    }
-  },
-
   created() {
     // Writes defaults and computed values into the view's data and resolves
     // options, see `DataModel`:
@@ -141,9 +138,25 @@ export default DitoComponent.component('DitoView', {
     // Stop the model before the component's own watchers are stopped, as the
     // model's watchers aren't part of the component, see `DataModel`.
     this.ownDataModel.stop()
+    // Don't leave the root loading after the view is gone, see the deprecated
+    // `setLoading()`.
+    this.setLoadingSwitch.set(false)
   },
 
   methods: {
+    /**
+     * @deprecated `isLoading` is tracked by `loadingTracker` now. Use
+     * `loadingTracker.begin()` and call the function that it returns, or
+     * `loadingTracker.track(callback)` instead.
+     */
+    setLoading(isLoading) {
+      deprecate(
+        'DitoView.setLoading() is deprecated, use ' +
+        '`loadingTracker.begin()` or `loadingTracker.track()` instead.'
+      )
+      this.setLoadingSwitch.set(isLoading)
+    },
+
     setData(data) {
       this.data = data
       return this.data
@@ -154,10 +167,6 @@ export default DitoComponent.component('DitoView', {
       return this.isSingleComponentView
         ? this.path
         : `${this.path}/${path}`
-    },
-
-    setLoading(isLoading) {
-      this.isLoading = !!isLoading
     }
   }
 })

package/src/index.js

@@ -1 +1,4 @@
-export { default } from './DitoAdmin.js'
+import DitoAdmin from './DitoAdmin.js'
+
+export { DitoAdmin }
+export default DitoAdmin