@ditojs/admin 2.93.0 → 2.95.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.93.0",
+  "version": "2.95.0",
   "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/main/packages/admin",
@@ -40,8 +40,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.93.0",
-    "@ditojs/utils": "^2.93.0"
+    "@ditojs/ui": "^2.95.0",
+    "@ditojs/utils": "^2.95.0"
   },
   "peerDependencies": {
     "@kyvg/vue3-notification": "^3.4.2",
@@ -89,9 +89,9 @@
     "vue-upload-component": "^3.1.17"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.93.0",
+    "@ditojs/build": "^2.95.0",
     "typescript": "^6.0.2",
-    "vite": "^8.0.3"
+    "vite": "^8.0.8"
   },
-  "gitHead": "360bd6a84c617b7f9b3750c50865380be3dbde8e"
+  "gitHead": "0cd76446659c5d30c18df8091bedb20cd84fb330"
 }

package/src/components/DitoAccount.vue

@@ -1,14 +1,20 @@
 <template lang="pug">
 .dito-account
   a(
+    role="button"
+    v-bind="pulldownTriggerAttributes"
     @mousedown.stop="onPulldownMouseDown()"
   )
     span {{ user.username }}
-  ul.dito-pulldown(:class="{ 'dito-pulldown--open': pulldown.open }")
+  ul.dito-pulldown(
+    role="menu"
+    :class="{ 'dito-pulldown--open': pulldown.open }"
+  )
     li(
       v-for="(label, value) of items"
     )
       a.dito-pulldown__item(
+        role="menuitem"
         @mousedown.stop="onPulldownMouseDown(value)"
         @mouseup="onPulldownMouseUp(value)"
       ) {{ label }}

package/src/components/DitoCreateButton.vue

@@ -13,15 +13,19 @@
     button.dito-button(
       type="button"
       :disabled="disabled"
-      v-bind="getButtonAttributes(verb)"
+      v-bind="{ ...pulldownTriggerAttributes, ...getButtonAttributes(verb) }"
       @mousedown.stop="onPulldownMouseDown()"
     ) {{ text }}
-    ul.dito-pulldown(:class="{ 'dito-pulldown--open': pulldown.open }")
+    ul.dito-pulldown(
+      role="menu"
+      :class="{ 'dito-pulldown--open': pulldown.open }"
+    )
       li(
         v-for="(form, type) in creatableForms"
         v-show="shouldShowSchema(form)"
       )
         a.dito-pulldown__item(
+          role="menuitem"
           :class=`{
             'dito-pulldown__item--disabled': shouldDisableSchema(form)
           }`

package/src/components/DitoDialog.vue

@@ -2,7 +2,7 @@
 .dito-dialog(
   ref="dialog"
   role="dialog"
-  aria-expanded="true"
+  :aria-label="schema.label || 'Dialog'"
   aria-modal="true"
   :style="{ '--width': settings.width ? `${settings.width}px` : null }"
   @mouseup="onMouseUp"

package/src/components/DitoErrors.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 .dito-errors(
   v-if="errors"
+  role="alert"
 )
   ul
     li(

package/src/components/DitoForm.vue

@@ -15,6 +15,7 @@
   DitoFormInner(
     v-show="isActiveRoute"
     :nested="isNestedRoute"
+    :label="itemLabel"
   )
     //- Prevent implicit submission of the form, for example when typing enter
     //- in an input field.

package/src/components/DitoFormInner.vue

@@ -6,6 +6,7 @@ div(
   slot
 form.dito-scroll-parent(
   v-else
+  :aria-label="label"
   @submit.prevent
 )
   slot
@@ -20,6 +21,10 @@ export default DitoComponent.component('DitoFormInner', {
     nested: {
       type: Boolean,
       default: false
+    },
+    label: {
+      type: String,
+      default: null
     }
   }
 })

package/src/components/DitoHeader.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-nav.dito-header
+nav.dito-header(:aria-busy="isLoading")
   DitoTrail
     DitoSpinner(
       v-if="isLoading"

package/src/components/DitoLabel.vue

@@ -69,7 +69,12 @@ export default DitoComponent.component('DitoLabel', {
     },
 
     attributes() {
-      return this.collapsible ? { onClick: this.onClick } : {}
+      return this.collapsible
+        ? {
+            'onClick': this.onClick,
+            'aria-expanded': !this.collapsed
+          }
+        : {}
     },
 
     isActive() {

package/src/components/DitoMenu.vue

@@ -12,6 +12,7 @@ ul.dito-menu(
       a.dito-menu__link(
         :href="getItemHref(item)"
         :class="{ 'dito-menu__link--active': isActiveItem(item) }"
+        :aria-current="isActiveItem(item) ? 'page' : null"
         @click.prevent.stop="onClickItem(item)"
       ) {{ getLabel(item) }}
       DitoMenu.dito-menu__sub(

package/src/components/DitoNavigation.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-nav.dito-navigation.dito-scroll-parent
+nav.dito-navigation.dito-scroll-parent(aria-label="Main navigation")
   h1
     RouterLink.dito-link(to="/") {{ appState.title }}
   DitoMenu.dito-scroll(:items="views")

package/src/components/DitoNotifications.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.dito-notifications
+.dito-notifications(aria-live="polite")
   .dito-header
     span
   .dito-notifications__inner

package/src/components/DitoPane.vue

@@ -2,7 +2,10 @@
 <template lang="pug">
 .dito-pane(
   v-if="isPopulated && componentSchemas.length > 0"
+  :id="tab ? `${dataPath}-tabpanel-${tab}` : null"
   v-resize="onResizePane"
+  :role="tab ? 'tabpanel' : null"
+  :aria-labelledby="tab ? `${dataPath}-tab-${tab}` : null"
   :class="classes"
 )
   template(

package/src/components/DitoPanel.vue

@@ -4,6 +4,8 @@ component.dito-panel(
   v-if="shouldRenderSchema(panelSchema)"
   v-show="visible && (!panelTabComponent || panelTabComponent.visible)"
   :is="panelTag"
+  role="region"
+  :aria-label="getLabel(schema)"
   @submit.prevent
 )
   DitoSchema.dito-panel__schema(

package/src/components/DitoSchema.vue

@@ -41,6 +41,7 @@ slot(name="prepend")
           v-if="opened"
           v-model="selectedTab"
           :tabs="tabs"
+          :dataPath="dataPath"
         )
       DitoClipboard(
         v-if="clipboard"

package/src/components/DitoScopes.vue

@@ -10,6 +10,7 @@
     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) }}

package/src/components/DitoSpinner.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
 .dito-spinner(
   v-show="loading"
+  role="status"
+  aria-label="Loading"
   :style="{ '--color': color, '--size': size, '--margin': margin }"
 )
   .dito-spinner__pulse.dito-spinner__pulse1

package/src/components/DitoTableHead.vue

@@ -6,6 +6,7 @@ thead.dito-table-head
     )
       th(
         v-if="shouldRenderSchema(column)"
+        scope="col"
         :class="getColumnClass(column)"
       )
         RouterLink(
@@ -17,6 +18,7 @@ thead.dito-table-head
           button.dito-button(
             type="button"
             :class="getSortClass(column)"
+            :aria-sort="getSortState(column)"
             @click="navigate"
           )
             .dito-button__order-arrows
@@ -64,6 +66,14 @@ export default DitoComponent.component('DitoTableHead', {
         : null
     },
 
+    getSortState(column) {
+      const states = { asc: 'ascending', desc: 'descending' }
+      return (
+        states[this.sort.name === column.name && this.sort.order] ||
+        'none'
+      )
+    },
+
     getSortLink(column) {
       // Toggle order if the same column is clicked again.
       const order =

package/src/components/DitoTabs.vue

@@ -1,11 +1,16 @@
 <template lang="pug">
-.dito-tabs
+.dito-tabs(role="tablist")
   template(
     v-for="(tabSchema, key) in tabs"
   )
     a.dito-tabs__link(
       v-if="shouldRenderSchema(tabSchema)"
+      :id="getTabId(key)"
       :key="key"
+      role="tab"
+      :aria-selected="modelValue === key"
+      :aria-controls="getPanelId(key)"
+      :tabindex="modelValue === key ? 0 : -1"
       :class="{ 'dito-tabs__link--active': modelValue === key }"
       @click="$emit('update:modelValue', key)"
     ) {{ getLabel(tabSchema, key) }}
@@ -19,7 +24,18 @@ export default DitoComponent.component('DitoTabs', {
   emits: ['update:modelValue'],
   props: {
     tabs: { type: Object, default: null },
-    modelValue: { type: String, default: null }
+    modelValue: { type: String, default: null },
+    dataPath: { type: String, default: '' }
+  },
+
+  methods: {
+    getTabId(key) {
+      return `${this.dataPath}-tab-${key}`
+    },
+
+    getPanelId(key) {
+      return `${this.dataPath}-tabpanel-${key}`
+    }
   }
 })
 </script>

package/src/components/DitoTrail.vue

@@ -1,11 +1,12 @@
 <template lang="pug">
-.dito-trail
+.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)"
       )

package/src/components/DitoTreeItem.vue

@@ -13,7 +13,12 @@
   )
     .dito-tree-branch(
       v-if="numEntries"
+      role="button"
+      tabindex="0"
+      :aria-label="ariaLabel"
+      :aria-expanded="opened"
       @click.stop="opened = !opened"
+      @keydown.enter.space.prevent="opened = !opened"
     )
       .dito-chevron(
         v-if="numEntries"
@@ -105,6 +110,7 @@ import SortableMixin from '../mixins/SortableMixin.js'
 import { appendDataPath } from '../utils/data.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { getNamedSchemas, hasFormSchema } from '../utils/schema.js'
+import { stripHtml } from '@ditojs/utils'
 
 // @vue/component
 export default DitoComponent.component('DitoTreeItem', {
@@ -222,6 +228,10 @@ export default DitoComponent.component('DitoTreeItem', {
       return []
     },
 
+    ariaLabel() {
+      return this.label ? stripHtml(this.label) : null
+    },
+
     details() {
       const { numChildren } = this
       return (
@@ -311,8 +321,14 @@ export default DitoComponent.component('DitoTreeItem', {
   --chevron-indent: #{$chevron-indent};
 
   overflow: hidden;
+  padding: 0 $input-padding-hor;
+  margin: 0 (-$input-padding-hor);
 
   > .dito-tree-header {
+    // Extend header into item padding so active background reaches the edge:
+    margin: 0 (-$input-padding-hor);
+    padding: 0 $input-padding-hor;
+
     > .dito-tree-branch,
     > .dito-tree-leaf {
       // Use `--level` CSS variable to calculated the accumulated indent
@@ -346,8 +362,13 @@ export default DitoComponent.component('DitoTreeItem', {
     display: flex;
     align-items: baseline;
     gap: 0.25em;
-    overflow: hidden;
+    min-width: 0;
     white-space: nowrap;
+
+    > :first-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .dito-tree-info {
@@ -385,8 +406,6 @@ export default DitoComponent.component('DitoTreeItem', {
   &--active {
     > .dito-tree-header {
       background: $color-active;
-      padding: 0 $input-padding-hor;
-      margin: 0 (-$input-padding-hor);
 
       > .dito-tree-branch {
         > .dito-chevron::before {

package/src/mixins/DitoMixin.js

@@ -277,9 +277,11 @@ export default {
     },
 
     getButtonAttributes(verb) {
+      const label = labelize(verb)
       return {
-        class: `dito-button--${verb}`,
-        title: labelize(verb)
+        'class': `dito-button--${verb}`,
+        'title': label,
+        'aria-label': label
       }
     },
 

package/src/mixins/PulldownMixin.js

@@ -27,6 +27,15 @@ export default {
     }
   },
 
+  computed: {
+    pulldownTriggerAttributes() {
+      return {
+        'aria-haspopup': 'menu',
+        'aria-expanded': this.pulldown.open
+      }
+    }
+  },
+
   methods: {
     onPulldownMouseDown(value = null) {
       if (value === null) {

package/src/types/DitoTypeCheckboxes.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
 ul.dito-checkboxes(
   :id="dataPath"
+  role="group"
+  :aria-label="label"
   :class="`dito-layout--${schema.layout || 'vertical'}`"
 )
   li(

package/src/types/DitoTypeList.vue

@@ -2,6 +2,8 @@
 .dito-list(
   v-if="isReady"
   :id="dataPath"
+  role="region"
+  :aria-label="label || labelize(schema.name)"
 )
   .dito-list__header(
     v-if="scopes || hasPagination"

package/src/types/DitoTypeMultiselect.vue

@@ -10,8 +10,10 @@
       :parentContext="context"
     )
     VueMultiselect(
+      :id="dataPath"
       ref="element"
       v-model="selectedOptions"
+      :aria-label="label"
       :class="multiselectClasses"
       :showLabels="false"
       :placeholder="placeholder"

package/src/types/DitoTypeRadio.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
 ul.dito-radio-buttons(
   :id="dataPath"
+  role="radiogroup"
+  :aria-label="label"
   :class="`dito-layout--${schema.layout || 'vertical'}`"
 )
   li(

package/src/types/DitoTypeUpload.vue

@@ -24,13 +24,13 @@
     //- Styling comes from `DitoTableHead`
     thead.dito-table-head
       tr
-        th
+        th(scope="col")
           span File
-        th
+        th(scope="col")
           span Size
-        th
+        th(scope="col")
           span Status
-        th
+        th(scope="col")
           span
     DitoDraggable(
       v-model="files"

package/types/index.d.ts

@@ -8,7 +8,7 @@ import {
   TimeFormat
 } from '@ditojs/utils'
 import { RequireAtLeastOne, SetOptional } from 'type-fest'
-import { Component as VueComponent } from 'vue'
+import { Component as VueComponent, ComponentPublicInstance } from 'vue'
 import { Router as VueRouter } from 'vue-router'
 
 declare global {
@@ -695,7 +695,19 @@ export interface SchemaSourceMixin<$Item> {
    *
    * @defaultValue `false`
    */
-  creatable?: OrItemAccessor<$Item, {}, boolean | { label: string }>
+  creatable?: OrItemAccessor<
+    $Item,
+    {},
+    | boolean
+    | {
+        label?: string
+        /**
+         * Returns additional query parameters to include in the
+         * URL when navigating to the create form.
+         */
+        query?: (context: DitoContext) => Record<string, any>
+      }
+  >
   /**
    * Whether to add edit buttons next to the list items.
    *
@@ -788,11 +800,14 @@ export type SchemaOptions<$Item, $Option = any> =
        */
       groupBy?: keyof $Option
       /**
-       * Custom equality function for comparing options.
+       * Custom equality function for matching a value to an
+       * option. Receives a context with `value` and `option`.
        */
       equals?: (
-        a: $Option,
-        b: $Option
+        context: DitoContext & {
+          value: any
+          option: $Option
+        }
       ) => boolean
       /**
        * Relative path to resolve options from data
@@ -1640,6 +1655,12 @@ export interface CheckboxesSchema<$Item = any>
    * The type of the component.
    */
   type: 'checkboxes'
+  /**
+   * Whether multiple values can be selected.
+   *
+   * @defaultValue `true`
+   */
+  multiple?: boolean
   /**
    * @defaultValue `'vertical'`
    */
@@ -1918,7 +1939,7 @@ export type DitoContext<$Item = any> = {
   /**
    * The current search term in select components.
    */
-  searchTerm: string | undefined
+  searchTerm: string
   /**
    * Whether a button request is currently running.
    */
@@ -1976,9 +1997,22 @@ export type DitoContext<$Item = any> = {
   getResourceUrl(resource: Resource): string
   /** Displays a notification to the user. */
   notify(options: {
+    /** Notification style. @defaultValue `'info'` */
     type?: LiteralUnion<'warning' | 'error' | 'info' | 'success'>
+    /** Heading text. Defaults to a label matching `type`. */
     title?: string
+    /** Body text, rendered as HTML paragraphs. */
     text: OrArrayOf<string>
+    /**
+     * The original error object. When `type` is `'error'`,
+     * this is logged to the console alongside the message.
+     */
+    error?: unknown
+    /**
+     * Display duration in milliseconds. When omitted, calculated
+     * automatically from content length. Use `0` for sticky.
+     */
+    duration?: number
   }): void
 }
 
@@ -1997,7 +2031,9 @@ export type DitoComponentInstance<
   $Members extends Record<string, any> = {}
 > = DitoComponentInstanceBase<$Item> & $Members
 
-export interface DitoComponentInstanceBase<$Item = any> extends EmitterMixin {
+export interface DitoComponentInstanceBase<$Item = any>
+  extends ComponentPublicInstance,
+    EmitterMixin {
   // -- Data access (ValueMixin, ContextMixin, TypeMixin) --
 
   /** The current value of the component (getter/setter). */
@@ -2968,6 +3004,31 @@ export type SourceComponent<$Item = any> =
   | TreeListSchema<$Item>
   | TreeObjectSchema<$Item>
 
+/**
+ * Field components that don't have an options mixin (excludes
+ * select, multiselect, and source components like list/object/tree).
+ */
+type NonOptionFieldComponent<$Item = any> = Exclude<
+  NonSectionComponent<$Item>,
+  SelectSchema<$Item> | MultiselectSchema<$Item> | SourceComponent<$Item>
+>
+
+/**
+ * Select/multiselect with a typed `$Option` for option callbacks.
+ *
+ * Note: This is intentionally an intersection type rather than
+ * `SelectSchema<$Item, $Option> | MultiselectSchema<$Item, $Option>`,
+ * because using the full interfaces in a union breaks TypeScript's
+ * contextual typing for callbacks in the `Components` mapped type.
+ */
+type OptionComponent<$Item, $Option> = BaseSchema<$Item> &
+  SchemaOptionsMixin<$Item, $Option> &
+  SchemaAffixMixin<$Item> &
+  Pick<
+    MultiselectSchema,
+    'multiple' | 'searchable' | 'stayOpen' | 'taggable'
+  > & { type: 'select' | 'multiselect' }
+
 /**
  * Strips properties with `never` values from a type.
  */
@@ -3047,14 +3108,16 @@ export type Components<$Item = any> = 0 extends 1 & $Item
   : {
       [K in keyof $Item]?: [$Item[K]] extends [never]
         ? NonSectionComponent<$Item> | SectionSchema<$Item>
-        : $Item[K] extends (infer E)[]
+        : NonNullable<$Item[K]> extends (infer E)[]
           ? E extends Record<string, any>
             ? NonSectionComponent<E>
             : NonSectionComponent<$Item>
-          : $Item[K] extends Record<string, any>
+          : NonNullable<$Item[K]> extends Record<string, any>
             ?
-                | NonSectionComponent<$Item>
-                | SectionSchema<$Item, $Item[K]>
+                | NonOptionFieldComponent<$Item>
+                | OptionComponent<$Item, NonNullable<$Item[K]>>
+                | SourceComponent<NonNullable<$Item[K]>>
+                | SectionSchema<$Item, NonNullable<$Item[K]>>
             :
                 | NonSectionComponent<$Item>
                 | SectionSchema<$Item>

package/types/tests/admin.test-d.ts

@@ -1,27 +0,0 @@
-import { assertType, describe, it } from 'vitest'
-import type { default as DitoAdmin, View } from '../index.d.ts'
-import type { Entry } from './fixtures.ts'
-
-describe('DitoAdmin', () => {
-  it('constructor accepts element and views option', () => {
-    assertType<ConstructorParameters<typeof DitoAdmin>>([
-      document.body,
-      {
-        views: {
-          entries: {
-            type: 'view',
-            component: {
-              type: 'list',
-              form: {
-                type: 'form',
-                components: {
-                  title: { type: 'text' }
-                }
-              }
-            }
-          } satisfies View<Entry>
-        }
-      }
-    ])
-  })
-})