@ditojs/admin 3.2.6 → 3.3.0

package/src/components/DitoSchema.vue

@@ -18,8 +18,8 @@ slot(name="prepend")
     )
   Teleport(
     v-if="hasHeader"
-    :to="headerTeleport"
-    :disabled="!headerTeleport"
+    to=".dito-header__teleport"
+    :disabled="!isTopLevelSchema"
   )
     .dito-schema-header(
       v-if="active"
@@ -38,13 +38,17 @@ slot(name="prepend")
       )
         DitoTabs(
           v-if="opened"
-          v-model="selectedTab"
+          :modelValue="selectedTab"
           :tabs="renderedTabs"
+          @update:modelValue="selectTab"
         )
       DitoClipboard(
         v-if="clipboard"
         :clipboard="clipboard"
         :schema="schema"
+        :hasData="hasData"
+        :getData="getDataForClipboard"
+        @paste="setData"
       )
       slot(name="edit-buttons")
   TransitionHeight(:enabled="inlined")
@@ -65,7 +69,7 @@ slot(name="prepend")
           //- of their components). `navigateToComponent()` then needs to
           //- select the tab that displays the component.
           DitoPane.dito-pane__tab(
-            v-show="selectedTab === tab"
+            v-show="isTabSelected(tab)"
             ref="tabs"
             :tab="tab"
             :schema="tabSchema"
@@ -78,7 +82,6 @@ slot(name="prepend")
             :disabled="disabled"
             :compact="compact"
             :generateLabels="generateLabels"
-            :accumulatedBasis="accumulatedBasis"
           )
       DitoPane.dito-pane__main(
         v-if="hasMainPane"
@@ -93,7 +96,6 @@ slot(name="prepend")
         :disabled="disabled"
         :compact="compact"
         :generateLabels="generateLabels"
-        :accumulatedBasis="accumulatedBasis"
       )
       slot(
         v-if="!inlined && isPopulated"
@@ -118,13 +120,14 @@ import {
 } from '@ditojs/utils'
 import { TransitionHeight } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
+import DitoContext from '../DitoContext.js'
 import ContextMixin from '../mixins/ContextMixin.js'
-import ItemMixin from '../mixins/ItemMixin.js'
 import { appendDataPath } from '../utils/data.js'
 import { isPanel } from '../utils/schema/structure.js'
 import {
   getNamedSchemas,
   getPanelEntries,
+  getItemFormSchema,
   isEmptySchema
 } from '../utils/schema/lookup.js'
 import { initializeData, processData } from '../utils/schema/data.js'
@@ -136,13 +139,17 @@ import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 
 // @vue/component
 export default DitoComponent.component('DitoSchema', {
-  mixins: [ContextMixin, ItemMixin],
+  mixins: [ContextMixin],
   components: { TransitionHeight },
   inheritAttrs: false,
 
   provide() {
     return {
-      $schemaComponent: () => this
+      $schemaComponent: () => this,
+      // Inlined schemas share the width of their container, see
+      // `DitoContainer.combinedBasis`, while all others take the full width,
+      // e.g. panels in the sidebar.
+      ...(!this.inlined && { $accumulatedBasis: () => 1 })
     }
   },
 
@@ -171,21 +178,25 @@ export default DitoComponent.component('DitoSchema', {
     collapsible: { type: Boolean, default: false },
     scrollable: { type: Boolean, default: false },
     hasOwnData: { type: Boolean, default: false },
-    generateLabels: { type: Boolean, default: false },
-    labelNode: { type: HTMLElement, default: null },
-    accumulatedBasis: { type: Number, default: 1 }
+    generateLabels: { type: Boolean, default: false }
   },
 
   data() {
     const { data } = this.schema
     return {
-      // Allow schema to provide more data through `schema.data`, vue-style:
+      // Allow schema to provide more data through `schema.data`, vue-style.
+      // `data()` runs before the computed properties are set up, so create the
+      // context here rather than using the `context` computed property:
       ...(
         data && isFunction(data)
-          ? data(this.context)
+          ? data(new DitoContext(this, { nested: false }))
           : data
       ),
       selectedTab: null,
+      // Whether the selected tab still follows `defaultTab`, until the route
+      // or the user select a tab, or until the data that `defaultTab()` and
+      // the tabs' `if` are evaluated with is there, see `selectDefaultTab()`.
+      shouldFollowDefaultTab: true,
       componentsRegistry: {},
       unnestedComponentsRegistry: {},
       panesRegistry: {},
@@ -213,10 +224,13 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     panelEntries() {
+      // Panels of schemas inlined in tabs are only shown with their tab, as
+      // the panels of components in tabs, see `DitoContainer.panelEntries`.
       return getPanelEntries(
         this.schema.panels,
         this.dataPath,
-        this.componentPath
+        this.componentPath,
+        this.tabComponent?.panelTab ?? null
       )
     },
 
@@ -262,34 +276,14 @@ export default DitoComponent.component('DitoSchema', {
       return this.hasLabel || this.hasTabs || !!this.clipboard
     },
 
-    headerTeleport() {
-      return this.isTopLevelSchema
-        ? '.dito-header__teleport'
-        : this.labelNode
-    },
-
     // @override
     processedData() {
       return this.processData({ target: 'server', schemaOnly: true })
     },
 
-    clipboardData: {
-      get() {
-        return this.processData({ target: 'clipboard', schemaOnly: true })
-      },
-
-      set(data) {
-        this.setData(data)
-      }
-    },
-
-    clipboardItem() {
-      return this.clipboardData
-    },
-
     formLabel() {
       return this.getLabel(
-        this.getItemFormSchema(this.sourceSchema, this.data, this.context)
+        getItemFormSchema(this.sourceSchema, this.data, this.context)
       )
     },
 
@@ -396,15 +390,22 @@ export default DitoComponent.component('DitoSchema', {
       // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
       flush: 'post',
       handler(routeTab) {
-        // Remember the current path to know if tab changes should still be
-        // handled, but remove the trailing `/create` or `/:id` from it so that
-        // tabs informs that stay open after creation still work.
-        if (this.hasTopLevelTabs) {
-          this.selectedTab = routeTab
+        // Changes of the hash to the selected tab are the route following the
+        // selection, see `selectedTab()`, not a selection by the route.
+        if (this.hasTopLevelTabs && routeTab !== this.selectedTab) {
+          this.selectTab(routeTab)
         }
       }
     },
 
+    hasData(hasData) {
+      // `defaultTab()` and the tabs' `if` may depend on data that is only
+      // available after mounting, e.g. the item of a form once it's loaded.
+      if (hasData && this.shouldFollowDefaultTab) {
+        this.selectDefaultTab()
+      }
+    },
+
     selectedTab(newTab, oldTab) {
       if (this.scrollable) {
         const { content } = this.$refs
@@ -424,9 +425,6 @@ export default DitoComponent.component('DitoSchema', {
           hash: tab ? `#${tab}` : null
         })
       }
-      if (this.hasErrors) {
-        this.repositionErrors()
-      }
     }
   },
 
@@ -438,7 +436,11 @@ export default DitoComponent.component('DitoSchema', {
   },
 
   mounted() {
-    this.selectedTab = this.routeTab || this.defaultTab
+    if (this.routeTab) {
+      this.selectTab(this.routeTab)
+    } else {
+      this.selectDefaultTab()
+    }
   },
 
   unmounted() {
@@ -505,6 +507,23 @@ export default DitoComponent.component('DitoSchema', {
       return this.isPopulated && this.components.every(callback)
     },
 
+    // Selects the tab chosen by the route or the user.
+    selectTab(tab) {
+      this.selectedTab = tab
+      this.shouldFollowDefaultTab = false
+    },
+
+    // Selects `defaultTab`, and keeps following it until there is data, but
+    // not after that, so that editing the data doesn't switch the tab.
+    selectDefaultTab() {
+      this.selectedTab = this.defaultTab
+      this.shouldFollowDefaultTab = !this.hasData
+    },
+
+    isTabSelected(tab) {
+      return this.selectedTab === tab
+    },
+
     onOpen(open) {
       this.emitEvent('open', { context: { open } })
       this.opened = open
@@ -526,17 +545,6 @@ export default DitoComponent.component('DitoSchema', {
       }
     },
 
-    repositionErrors() {
-      // Fire a fake scroll event to force the repositioning of error tooltips,
-      // as otherwise they sometimes don't show up in the right place initially
-      // when changing tabs.
-      const scrollContainer = this.$refs.content.closest('.dito-scroll')
-      const dispatch = () => scrollContainer.dispatchEvent(new Event('scroll'))
-      dispatch()
-      // This is required to handle `&--label-vertical` based layout changes.
-      setTimeout(dispatch, 0)
-    },
-
     focus() {
       this.opened = true
       return this.parentSchemaComponent?.focus()
@@ -797,6 +805,12 @@ export default DitoComponent.component('DitoSchema', {
       return { localData, foreignData }
     },
 
+    // Called by `DitoClipboard` only when copying, as processing all data on
+    // each change would be wasteful.
+    getDataForClipboard() {
+      return this.processData({ target: 'clipboard', schemaOnly: true })
+    },
+
     processData({ target = 'clipboard', schemaOnly = true } = {}) {
       return processData(
         this.dataSchema,
@@ -856,8 +870,8 @@ export default DitoComponent.component('DitoSchema', {
 
     // Registries are keyed by component path. Component paths change when list
     // items move, and the entries then register again under their new path,
-    // see `TypeMixin`, `DitoPane` and `DitoPanel`.
-    _registerEntry(registry, entry, add, componentPath = entry.componentPath) {
+    // see `trackRegistration()`.
+    _registerEntry(registry, entry, add, componentPath) {
       if (add) {
         registry[componentPath] = entry
       } else if (registry[componentPath] === entry) {
@@ -966,11 +980,6 @@ function compareByDocumentPosition(component1, component2) {
     align-items: flex-end;
   }
 
-  .dito-label & {
-    // When teleported into container label.
-    flex: 1;
-  }
-
   > .dito-label {
     margin-bottom: 0;
   }

package/src/components/DitoSchemaInlined.vue

@@ -14,15 +14,16 @@ DitoSchema.dito-schema-inlined(
   :collapsed="collapsed"
   :collapsible="collapsible"
   :generateLabels="!isCompact"
-  :labelNode="labelNode"
-  :accumulatedBasis="accumulatedBasis"
 )
   //- Render dito-edit-buttons for inlined schemas separately from all
   //- others in `TypeList` as a scope, for better handling of layout.
+  //- `sourceSchema` is the schema of the list or object that holds the item,
+  //- passed through `meta.schema`, while `schema` is the item's form.
   template(#edit-buttons)
     DitoEditButtons(
       v-if="deletable || draggable || editable || insertIndex != null"
-      :schema="schema"
+      :schema="sourceSchema"
+      :formSchema="schema"
       :dataPath="dataPath"
       :data="data"
       :meta="meta"
@@ -36,6 +37,7 @@ DitoSchema.dito-schema-inlined(
       :createPath="createPath"
       :insertIndex="insertIndex"
       @delete="$emit('delete')"
+      @move="delta => $emit('move', delta)"
     )
 </template>
 
@@ -44,7 +46,7 @@ import DitoComponent from '../DitoComponent.js'
 import { isCompact } from '../utils/schema/structure.js'
 // @vue/component
 export default DitoComponent.component('DitoSchemaInlined', {
-  emits: ['delete'],
+  emits: ['delete', 'move'],
 
   props: {
     schema: { type: Object, required: true },
@@ -63,9 +65,7 @@ export default DitoComponent.component('DitoSchemaInlined', {
     deletable: { type: Boolean, default: false },
     editPath: { type: String, default: null },
     createPath: { type: String, default: null },
-    insertIndex: { type: Number, default: null },
-    labelNode: { type: HTMLElement, default: null },
-    accumulatedBasis: { type: Number, default: null }
+    insertIndex: { type: Number, default: null }
   },
 
   computed: {
@@ -85,8 +85,7 @@ export default DitoComponent.component('DitoSchemaInlined', {
 
 .dito-schema-inlined {
   // Use grid layout for two reasons: For `TransitionHeight` to work smoothly,
-  // and to align the header above the content when the header is not teleported
-  // outside of the schema.
+  // and to align the header above the content.
   display: grid;
   grid-template-rows: min-content;
   grid-template-columns: 100%;

package/src/components/DitoScopes.vue

@@ -1,38 +1,34 @@
 <template lang="pug">
 .dito-scopes
-  RouterLink(
+  DitoButton(
     v-for="(scope, key) in scopes"
     :key="key"
-    v-slot="{ navigate }"
-    :to="getScopeLink(scope)"
-    custom
-  )
-    button.dito-button(
-      type="button"
-      :class="{ 'dito-button--selected': scope.name === query.scope }"
-      :aria-pressed="scope.name === query.scope"
-      :title="scope.hint || getLabel(scope)"
-      @click="navigate"
-    ) {{ getLabel(scope) }}
+    :class="{ 'dito-button--selected': scope.name === query.scope }"
+    :aria-pressed="scope.name === query.scope"
+    :title="scope.hint || getLabel(scope)"
+    @click="selectScope(scope)"
+  ) {{ getLabel(scope) }}
 </template>
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import { DitoButton } from '@ditojs/ui/src'
 
 // @vue/component
 export default DitoComponent.component('DitoScopes', {
+  components: { DitoButton },
+
   props: {
     query: { type: Object, required: true },
     scopes: { type: Object, required: true }
   },
 
   methods: {
-    getScopeLink(scope) {
-      const query = { ...this.query, scope: scope.name }
-      if (query.page) {
-        query.page = 0
-      }
-      return this.getQueryLink(query)
+    selectScope(scope) {
+      this.sourceComponent.listQuery.update(
+        { scope: scope.name },
+        { resetPage: true }
+      )
     }
   }
 })

package/src/components/DitoSidebar.vue

@@ -1,8 +1,5 @@
 <template lang="pug">
-aside.dito-sidebar.dito-scroll-parent(
-  v-resize="onResizeSidebar"
-  :class="classes"
-)
+aside.dito-sidebar.dito-scroll-parent
   nav.dito-header
     slot
   .dito-sidebar__teleport.dito-scroll
@@ -12,37 +9,15 @@ aside.dito-sidebar.dito-scroll-parent(
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('DitoSidebar', {
-  data() {
-    return {
-      sidebarWidth: 0
-    }
-  },
-
-  computed: {
-    classes() {
-      const prefix = 'dito-sidebar'
-      // NOTE: Keep synced with $sidebar-max-width in SCSS:
-      const sidebarWidth = 360
-      return {
-        [`${prefix}--width-99`]: this.sidebarWidth < sidebarWidth,
-        [`${prefix}--width-60`]: this.sidebarWidth <= sidebarWidth * 0.6
-      }
-    }
-  },
-
-  methods: {
-    onResizeSidebar({ contentRect: { width } }) {
-      this.sidebarWidth = width
-    }
-  }
-})
+export default DitoComponent.component('DitoSidebar', {})
 </script>
 
 <style lang="scss">
 @import '../styles/_imports';
 
 .dito-sidebar {
+  // For the layout of `DitoContainer` in narrow sidebars:
+  container: dito-sidebar / inline-size;
   flex: 0 1 $sidebar-max-width;
   max-width: $sidebar-max-width;
   min-width: $sidebar-min-width;

package/src/components/DitoSourceItem.vue

@@ -0,0 +1,114 @@
+<template lang="pug">
+//- Renders an item of a list or object source: Inlined items render their
+//- form, others the source's `component`, `render()` or the item's label.
+DitoSchemaInlined(
+  v-if="isInlined"
+  :label="inlinedLabel"
+  :schema="formSchema"
+  :dataPath="dataPath"
+  :data="data"
+  :meta="meta"
+  :store="store"
+  :disabled="disabled"
+  :collapsed="collapsed"
+  :collapsible="collapsible"
+  :deletable="deletable"
+  :draggable="draggable"
+  :editable="editable"
+  :editPath="editPath"
+  :createPath="createPath"
+  :insertIndex="insertIndex"
+  @delete="$emit('delete')"
+  @move="delta => $emit('move', delta)"
+)
+component(
+  v-else-if="schema.component"
+  :is="schema.component"
+  :dataPath="dataPath"
+  :data="data"
+  :nested="false"
+)
+span(
+  v-else-if="sourceComponent.render"
+  v-html="renderedItem"
+)
+span(
+  v-else
+  v-html="itemLabel"
+)
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import DitoContext from '../DitoContext.js'
+import { isInlined, isListSource } from '../utils/schema/structure.js'
+import { getItemFormSchema } from '../utils/schema/lookup.js'
+
+// @vue/component
+export default DitoComponent.component('DitoSourceItem', {
+  emits: ['delete', 'move'],
+
+  props: {
+    // The schema of the list or object source that holds the item.
+    schema: { type: Object, required: true },
+    dataPath: { type: String, required: true },
+    data: { type: Object, required: true },
+    // The index of the item in a list source, `null` in object sources.
+    index: { type: Number, default: null },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
+    disabled: { type: Boolean, required: true },
+    // The remaining props only apply to inlined items, see `DitoSchemaInlined`:
+    collapsed: { type: Boolean, default: false },
+    collapsible: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: false },
+    editable: { type: Boolean, default: false },
+    deletable: { type: Boolean, default: false },
+    editPath: { type: String, default: null },
+    createPath: { type: String, default: null },
+    insertIndex: { type: Number, default: null }
+  },
+
+  computed: {
+    isInlined() {
+      return isInlined(this.schema)
+    },
+
+    formSchema() {
+      return getItemFormSchema(
+        this.schema,
+        this.data,
+        this.sourceComponent.context
+      )
+    },
+
+    inlinedLabel() {
+      // List items always show their label, objects only when collapsible.
+      return isListSource(this.schema) || this.collapsible
+        ? this.sourceComponent.getItemLabel(this.schema, this.data, {
+            index: this.index,
+            asObject: true
+          })
+        : null
+    },
+
+    itemLabel() {
+      return this.sourceComponent.getItemLabel(this.schema, this.data, {
+        index: this.index
+      })
+    },
+
+    renderedItem() {
+      const { sourceComponent } = this
+      return sourceComponent.render(
+        new DitoContext(sourceComponent, {
+          data: this.data,
+          value: this.data,
+          index: this.index,
+          dataPath: this.dataPath
+        })
+      )
+    }
+  }
+})
+</script>

package/src/components/DitoTableCell.vue

@@ -33,8 +33,12 @@ export default DitoComponent.component('DitoTableCell', {
   mixins: [ContextMixin],
 
   props: {
+    // The schema of the cell, e.g. a column of a list or a property of a tree
+    // item, whose `name` is the key of its value in `data`.
     cell: { type: Object, required: true },
+    // The schema of the list or tree that holds the item.
     schema: { type: Object, required: true },
+    // The data path and data of the item, see `renderCell()`.
     dataPath: { type: String, required: true },
     data: { type: Object, required: true },
     meta: { type: Object, required: true },

package/src/components/DitoTableHead.vue

@@ -8,21 +8,15 @@ thead.dito-table-head
         v-if="shouldRenderSchema(column)"
         scope="col"
         :class="getColumnClass(column)"
+        :aria-sort="column.sortable ? getSortState(column) : null"
       )
-        RouterLink(
+        DitoButton(
           v-if="column.sortable"
-          v-slot="{ navigate }"
-          :to="getSortLink(column)"
-          custom
+          :class="getSortClass(column)"
+          @click="sortByColumn(column)"
         )
-          button.dito-button(
-            type="button"
-            :class="getSortClass(column)"
-            :aria-sort="getSortState(column)"
-            @click="navigate"
-          )
-            .dito-button__order-arrows
-            span {{ getLabel(column) }}
+          .dito-button__order-arrows
+          span {{ getLabel(column) }}
         span(
           v-else
         ) {{ getLabel(column) }}
@@ -35,10 +29,13 @@ thead.dito-table-head
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import { DitoButton } from '@ditojs/ui/src'
 import { hyphenate } from '@ditojs/utils'
 
 // @vue/component
 export default DitoComponent.component('DitoTableHead', {
+  components: { DitoButton },
+
   props: {
     query: { type: Object, required: true },
     columns: { type: Object, required: true },
@@ -74,16 +71,17 @@ export default DitoComponent.component('DitoTableHead', {
       )
     },
 
-    getSortLink(column) {
+    sortByColumn(column) {
       // Toggle order if the same column is clicked again.
       const order =
         this.sort.name === column.name && this.sort.order === 'asc'
           ? 'desc'
           : 'asc'
-      return this.getQueryLink({
-        ...this.query,
-        order: `${column.name} ${order}`
-      })
+      // Sorting resets the page, as the sorted list has other pages.
+      this.sourceComponent.listQuery.update(
+        { order: `${column.name} ${order}` },
+        { resetPage: true }
+      )
     }
   }
 })

package/src/components/DitoTabs.vue

@@ -10,6 +10,7 @@
     :tabindex="modelValue === key ? 0 : -1"
     :class="{ 'dito-tabs__link--active': modelValue === key }"
     @click="$emit('update:modelValue', key)"
+    @keydown="onKeyDown($event, key)"
   ) {{ getLabel(tabSchema, key) }}
 </template>
 
@@ -33,6 +34,30 @@ export default DitoComponent.component('DitoTabs', {
 
     getTabPanelId(key) {
       return `${this.schemaComponent.componentPath}-tabpanel-${key}`
+    },
+
+    // Supports the keyboard interaction of tabs with manual activation: The
+    // arrow keys, Home and End move the focus to other tabs, Enter and Space
+    // select the focused tab, so that moving through the tabs doesn't switch
+    // their panels and the route hash on each key press.
+    onKeyDown(event, key) {
+      const keys = Object.keys(this.tabs)
+      const index = keys.indexOf(key)
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault()
+        this.$emit('update:modelValue', key)
+        return
+      }
+      const focusIndex = {
+        ArrowLeft: (index - 1 + keys.length) % keys.length,
+        ArrowRight: (index + 1) % keys.length,
+        Home: 0,
+        End: keys.length - 1
+      }[event.key]
+      if (focusIndex !== undefined) {
+        event.preventDefault()
+        document.getElementById(this.getTabId(keys[focusIndex]))?.focus()
+      }
     }
   }
 })