@ditojs/admin 3.2.7 → 3.3.1

package/src/components/DitoErrors.vue

@@ -1,6 +1,9 @@
 <template lang="pug">
+//- The input of the container refers to the errors by `id` through
+//- `aria-describedby`, see `TypeMixin.attributes`.
 .dito-errors(
   v-if="errors"
+  :id="id"
   role="alert"
 )
   ul
@@ -10,62 +13,13 @@
 </template>
 
 <script>
-import tippy from 'tippy.js'
 import DitoComponent from '../DitoComponent.js'
-import { markRaw } from 'vue'
 
 // @vue/component
 export default DitoComponent.component('DitoErrors', {
   props: {
+    id: { type: String, default: null },
     errors: { type: Array, default: null }
-  },
-
-  data() {
-    return {
-      tip: null
-    }
-  },
-
-  watch: {
-    errors() {
-      this.$nextTick(this.updateErrors)
-    }
-  },
-
-  unmounted() {
-    this.tip?.destroy()
-  },
-
-  methods: {
-    updateErrors() {
-      let { tip } = this
-      tip?.hide()
-      if (this.errors) {
-        tip = this.tip ??= markRaw(tippy(this.$el.closest('.dito-container')))
-        tip.setProps({
-          content: this.errors.join('\n'),
-          theme: 'error',
-          trigger: 'manual',
-          appendTo: 'parent',
-          placement: 'bottom-start',
-          animation: 'shift-away-subtle',
-          popperOptions: {
-            modifiers: [
-              {
-                name: 'flip',
-                enabled: false
-              }
-            ]
-          },
-          interactive: true,
-          hideOnClick: false,
-          offset: [3, 3], // 1/2 form-spacing
-          zIndex: 1
-        })
-        tip.popper.addEventListener('mousedown', () => tip.hide())
-        tip.show()
-      }
-    }
   }
 })
 </script>
@@ -74,11 +28,10 @@ export default DitoComponent.component('DitoErrors', {
 @import '../styles/_imports';
 
 .dito-errors {
-  position: absolute;
-  visibility: hidden;
-
-  ul {
-    color: $color-error;
-  }
+  // Take a line of its own also in compact containers with wrapping rows.
+  width: 100%;
+  margin-top: $form-spacing-half;
+  color: $color-error;
+  white-space: pre-line;
 }
 </style>

package/src/components/DitoForm.vue

@@ -16,7 +16,7 @@
   DitoFormInner(
     v-show="isActiveRoute"
     :nested="isNestedRoute"
-    :label="itemLabel"
+    :label="itemLabelText"
   )
     //- Prevent implicit submission of the form, for example when typing enter
     //- in an input field.
@@ -52,7 +52,13 @@
 
 <script>
 import { markRaw } from 'vue'
-import { clone, capitalize, parseDataPath, assignDeeply } from '@ditojs/utils'
+import {
+  clone,
+  capitalize,
+  parseDataPath,
+  assignDeeply,
+  escapeHtml
+} from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
 import ResourceMixin from '../mixins/ResourceMixin.js'
@@ -61,7 +67,11 @@ import { isObjectSource } from '../utils/schema/structure.js'
 import { getButtonSchemas } from '../utils/schema/lookup.js'
 import { getComponentPathByDataPath } from '../utils/schema/data.js'
 import { resolvePath } from '../utils/path.js'
+import { isPathWithin } from '../utils/route.js'
+import { transferUids } from '../utils/uid.js'
 import { DataModel } from '../utils/DataModel.js'
+import { transientNote } from '../utils/dialogs.js'
+import { getTextFromHtml } from '../utils/html.js'
 
 // @vue/component
 export default DitoComponent.component('DitoForm', {
@@ -298,6 +308,11 @@ export default DitoComponent.component('DitoForm', {
 
     itemLabel() {
       return this.getItemLabel(this.sourceSchema, this.data, { extended: true })
+    },
+
+    // `itemLabel` is HTML, while the `aria-label` of the form is text:
+    itemLabelText() {
+      return getTextFromHtml(this.itemLabel)
     }
   },
 
@@ -326,8 +341,11 @@ export default DitoComponent.component('DitoForm', {
           if (!this.isMutating) {
             // Edit a copy of the inherited item, so that changes are only
             // applied through setSourceData(). Copy it again whenever the item
-            // itself is replaced, e.g. after applying the changes.
-            this.clonedData = clone(item)
+            // itself is replaced, e.g. after applying the changes. The copy
+            // keeps the uids of the new items, see `transferUids()`.
+            const clonedData = clone(item)
+            transferUids(item, clonedData)
+            this.clonedData = clonedData
           }
           if (
             item === null &&
@@ -399,11 +417,31 @@ export default DitoComponent.component('DitoForm', {
       }
     },
 
+    // Returns the source component that loads the form's item through its
+    // resource in the parent route component, e.g. a list in a parent form, or
+    // `null` if it isn't rendered, e.g. the list of a view, which renders the
+    // form instead. The form's path is within the path of the source.
+    getParentSourceComponent() {
+      return (
+        this.parentRouteComponent?.mainSchemaComponent?.components.find(
+          component => (
+            component.sourceComponent === component &&
+            component.providesData &&
+            isPathWithin(this.path, component.path)
+          )
+        ) ?? null
+      )
+    },
+
     setSourceData(data) {
       if (this.sourceData && this.sourceKey !== null) {
         const { mainSchemaComponent } = this
-        this.sourceData[this.sourceKey] =
-          mainSchemaComponent.filterData(data).localData
+        const { localData } = mainSchemaComponent.filterData(data)
+        // Keep the uids of new items, which key their components and stores,
+        // see `transferUids()`. The applied data is processed from the form's
+        // data, which holds them since cloning the item.
+        transferUids(this.data, localData)
+        this.sourceData[this.sourceKey] = localData
         mainSchemaComponent.onChange()
         return true
       }
@@ -469,6 +507,28 @@ export default DitoComponent.component('DitoForm', {
       }
 
       const getVerb = present => this.verbs[this.getSubmitVerb(present)]
+      // NOTE: The notifications pass `html`, as `itemLabel` is HTML with
+      // escaped item values, see `getItemLabel()`. Other values that they
+      // include need to be escaped too.
+      const notifySubmitError = (error, message = null) => {
+        const verb = getVerb(true)
+        const { itemLabel } = this
+        this.notify({
+          type: 'error',
+          error,
+          title: 'Request Error',
+          html: message
+            ? [`Unable to ${verb} ${itemLabel}:`, escapeHtml(message)]
+            : `Unable to ${verb} ${itemLabel}.`
+        })
+      }
+      const callbacks = {
+        onSuccess: () => this.emitSchemaEvent(this.getSubmitVerb()),
+        onError: error =>
+          this.emitSchemaEvent('error', {
+            context: { error }
+          })
+      }
 
       // Allow buttons to override both method and resource path to submit to:
       let { method } = this
@@ -482,65 +542,45 @@ export default DitoComponent.component('DitoForm', {
       let success
       if (!buttonResource && this.isTransient) {
         success = await this.submitTransient(button, resource, method, data, {
-          onSuccess: () => this.emitSchemaEvent(this.getSubmitVerb()),
-          onError: error =>
-            this.emitSchemaEvent('error', {
-              context: { error }
-            }),
+          ...callbacks,
           notifySuccess: () => {
             const verb = getVerb(false)
+            const { itemLabel } = this
             this.notify({
               type: 'info',
               title: this.isCreating
                 ? `Item ${capitalize(verb)}`
                 : `Change ${capitalize(verb)}`,
-              text: [
+              html: [
                 this.isCreating
-                  ? `${this.itemLabel} was ${verb}.`
-                  : `Changes to ${this.itemLabel} were ${verb}.`,
-                this.transientNote
+                  ? `${itemLabel} was ${verb}.`
+                  : `Changes to ${itemLabel} were ${verb}.`,
+                transientNote
               ]
             })
           },
-          notifyError: error => {
-            const verb = getVerb(true)
-            this.notify({
-              type: 'error',
-              error,
-              title: 'Request Error',
-              text: `Unable to ${verb} ${this.itemLabel}.`
-            })
-          }
+          notifyError: error => notifySubmitError(error)
         })
       } else {
         success = await this.submitResource(button, resource, method, data, {
+          ...callbacks,
           setData: true,
-          onSuccess: () => this.emitSchemaEvent(this.getSubmitVerb()),
-          onError: error =>
-            this.emitSchemaEvent('error', {
-              context: { error }
-            }),
           notifySuccess: () => {
             const verb = getVerb(false)
             this.notify({
               type: 'success',
               title: `Successfully ${capitalize(verb)}`,
-              text: `${this.itemLabel} was ${verb}.`
+              html: `${this.itemLabel} was ${verb}.`
             })
           },
-          notifyError: error => {
-            const verb = getVerb(true)
-            this.notify({
-              type: 'error',
-              error,
-              title: 'Request Error',
-              text: [
-                `Unable to ${verb} ${this.itemLabel}${error ? ':' : ''}`,
-                error?.message || error
-              ]
-            })
-          }
+          notifyError: error =>
+            notifySubmitError(error, error?.message || error)
         })
+        if (success) {
+          // The item changed on the server, so the source that lists it needs
+          // to load it again.
+          this.getParentSourceComponent()?.reloadData()
+        }
       }
       if (success) {
         this.resetValidation()

package/src/components/DitoInputAffixes.vue

@@ -0,0 +1,50 @@
+<template lang="pug">
+//- The prefix or suffix of the input of a type component, see `schema.prefix`
+//- and `schema.suffix`, and `getInputAffixesProps()` for their props. The
+//- suffix also holds the clear button of clearable components, and their info
+//- when they have no label to show it.
+DitoAffixes(
+  :items="items"
+  :position="position"
+  mode="input"
+  :absolute="absolute"
+  :clearable="clearable"
+  :hasValue="hasValue"
+  :disabled="disabled"
+  :inlineInfo="inlineInfo"
+  :parentContext="parentContext"
+  @clear="$emit('clear')"
+)
+  template(
+    v-if="$slots.append"
+    #append
+  )
+    slot(name="append")
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import DitoAffixes from './DitoAffixes.vue'
+
+// @vue/component
+export default DitoComponent.component('DitoInputAffixes', {
+  components: { DitoAffixes },
+  emits: ['clear'],
+
+  props: {
+    position: {
+      type: String,
+      required: true,
+      validator: position => ['prefix', 'suffix'].includes(position)
+    },
+    items: { type: [String, Object, Array], default: null },
+    absolute: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    hasValue: { type: Boolean, default: false },
+    inlineInfo: { type: String, default: null },
+    // The context of the type component, for the callbacks of the items.
+    parentContext: { type: Object, required: true }
+  }
+})
+</script>

package/src/components/DitoLabel.vue

@@ -4,7 +4,6 @@ component.dito-label(
   :is="collapsible ? 'button' : 'div'"
   :type="collapsible ? 'button' : null"
   v-bind="attributes"
-  :class="{ 'dito-label--active': isActive }"
 )
   .dito-chevron(
     v-if="collapsible"
@@ -76,16 +75,11 @@ export default DitoComponent.component('DitoLabel', {
             'aria-expanded': !this.collapsed
           }
         : {}
-    },
-
-    isActive() {
-      return this.appState.activeLabel === this
     }
   },
 
   methods: {
     onClick() {
-      this.appState.activeLabel = this
       this.$emit('open', this.collapsed)
     }
   }
@@ -108,14 +102,6 @@ export default DitoComponent.component('DitoLabel', {
   min-height: $input-height;
   margin-right: $form-spacing-half; // When inlined.
 
-  &:has(.dito-schema-header) {
-    // The container's label is used as teleport for a nested section or object
-    // label. Hide `&__inner`, as it is be duplicated inside the nested label.
-    > #{$self}__inner {
-      display: none;
-    }
-  }
-
   &:not(:has(+ .dito-tabs)) {
     // Take full width but only if there aren't also tabs to be centered.
     flex: 1;
@@ -199,7 +185,7 @@ export default DitoComponent.component('DitoLabel', {
       }
     }
 
-    &:focus:not(:active, &--active) {
+    &:focus-visible {
       .dito-chevron {
         -webkit-text-stroke: $border-width $color-active;
       }

package/src/components/DitoMenu.vue

@@ -1,29 +1,33 @@
 <template lang="pug">
-ul.dito-menu(
-  v-resize="onResize"
-  :style="{ '--width': width ? `${width}px` : null }"
-)
+ul.dito-menu
   li.dito-menu__item(
     v-for="item in items"
   )
     template(
       v-if="shouldShowItem(item)"
     )
-      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) }}
+      RouterLink(
+        v-slot="{ href, navigate }"
+        :to="getItemRoute(item)"
+        custom
+      )
+        a.dito-menu__link(
+          :href="href"
+          :class="{ 'dito-menu__link--active': isActiveItem(item) }"
+          :aria-current="isActiveItem(item) ? 'page' : null"
+          @click="navigate"
+        ) {{ getLabel(item) }}
       DitoMenu.dito-menu__sub(
         v-if="item.items"
         :items="item.items"
-        :path="getItemPath(item, false)"
+        :path="getItemPath(item)"
       )
 </template>
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import { isPathWithin } from '../utils/route.js'
+import { getViewLinkPath } from '../utils/schema/lookup.js'
 
 // @vue/component
 export default DitoComponent.component('DitoMenu', {
@@ -38,12 +42,6 @@ export default DitoComponent.component('DitoMenu', {
     }
   },
 
-  data() {
-    return {
-      width: 0
-    }
-  },
-
   methods: {
     shouldShowItem(item) {
       return (
@@ -54,36 +52,25 @@ export default DitoComponent.component('DitoMenu', {
       )
     },
 
-    onResize({ contentRect: { width } }) {
-      if (width) {
-        this.width = width
-      }
+    getItemPath(item) {
+      return `${this.path}/${item.path}`
     },
 
-    getItemPath(item, firstChild) {
-      const path = item.path ? `${this.path}/${item.path}` : null
-      return firstChild && path && item.items
-        ? `${path}${this.getItemPath(Object.values(item.items)[0], false)}`
-        : path
-    },
-
-    getItemHref(item) {
-      const path = this.getItemPath(item, true)
-      return path ? this.$router.resolve(path).href : null
+    getItemRoute(item) {
+      // `DitoRoot` only provides the views once their paths are set up.
+      // `force` reloads the view even if it is already the current route.
+      return {
+        path: getViewLinkPath(item, this.getItemPath(item)),
+        force: true
+      }
     },
 
     isActiveItem(item) {
+      const path = this.getItemPath(item)
       return (
-        this.$route.path.startsWith(this.getItemPath(item, false)) ||
+        isPathWithin(this.$route.path, path) ||
         item.items && Object.values(item.items).some(this.isActiveItem)
       )
-    },
-
-    onClickItem(item) {
-      const path = this.getItemPath(item, true)
-      if (path) {
-        this.$router.push({ path, force: true })
-      }
     }
   }
 })
@@ -104,23 +91,33 @@ export default DitoComponent.component('DitoMenu', {
   padding: 0 $menu-spacing;
 
   &__item {
+    // Scope the anchor of the open sub-menu to its item, see below.
+    anchor-scope: --dito-menu-item;
+
     &:has(#{$self}__sub):not(:has(#{$self}__link--active)) {
-      // Pop-out sub-menus on hover:
-      &:hover {
+      // Pop-out sub-menus on hover and keyboard focus. They are anchored to
+      // their item instead of positioned relative to it, as the menu scrolls
+      // and would clip them.
+      &:hover,
+      &:focus-within {
+        anchor-name: --dito-menu-item;
+
         > #{$self}__link {
           background: $color-lightest;
         }
 
-        #{$self}__sub {
+        > #{$self}__sub {
           display: block;
           position: absolute;
-          width: var(--width);
+          position-anchor: --dito-menu-item;
+          top: anchor(top);
+          left: calc(anchor(right) + 2 * $menu-spacing);
+          width: anchor-size(width);
           z-index: $z-index-header;
-          transform: translateX(calc(var(--width) + 2 * $menu-spacing))
-            translateY(-$item-height);
+          box-shadow: $shadow-window;
 
-          #{$self}__item:first-child {
-            #{$self}__link {
+          > #{$self}__item:first-child {
+            > #{$self}__link {
               margin-top: 0;
             }
           }
@@ -136,10 +133,6 @@ export default DitoComponent.component('DitoMenu', {
             opacity: 0;
           }
         }
-
-        #{$self}__sub {
-          box-shadow: $shadow-window;
-        }
       }
     }
   }
@@ -151,7 +144,7 @@ export default DitoComponent.component('DitoMenu', {
     border-radius: $border-radius;
     margin-top: $menu-spacing;
 
-    &:focus:not(:active, &--active) {
+    &:focus-visible {
       box-shadow: $shadow-focus;
     }
 

package/src/components/DitoNotifications.vue

@@ -4,7 +4,6 @@
     span
   .dito-notifications__inner
     VueNotifications(
-      ref="notifications"
       classes="dito-notification"
       :dangerouslySetInnerHtml="true"
       position=""
@@ -14,16 +13,24 @@
 
 <script>
 import DitoComponent from '../DitoComponent.js'
-import { asArray, stripHtml } from '@ditojs/utils'
+import { asArray, isString, escapeHtml, stripHtml } from '@ditojs/utils'
+
+// Detects opening tags like `<a href="…">` or `<b>`, which callers that still
+// pass formatted text through the escaped `text` option would include:
+function isLikelyMarkup(paragraph) {
+  return (
+    isString(paragraph) &&
+    /<[a-z][a-z0-9-]*(\s[^>]*)?\/?>/i.test(paragraph)
+  )
+}
 
 // @vue/component
 export default DitoComponent.component('DitoNotifications', {
-  notifications() {
-    return this.isMounted && this.$refs.notifications
-  },
-
   methods: {
-    notify({ type = 'info', title, text, error, duration } = {}) {
+    // Shows a notification with the paragraphs of `text`, which are escaped,
+    // or else of `html`, which is rendered as it is, so it must only contain
+    // HTML from trusted sources, and escape all values that it includes.
+    notify({ type = 'info', title, text, html, error, duration } = {}) {
       title ||= (
         {
           warning: 'Warning',
@@ -33,8 +40,23 @@ export default DitoComponent.component('DitoNotifications', {
         }[type] ||
         'Notification'
       )
-      text = `<p>${
-        asArray(text).join('</p> <p>')
+      const isHtml = html != null
+      // Skip empty paragraphs, e.g. `transientNote` when it's `false`:
+      const paragraphs = asArray(isHtml ? html : text).filter(
+        paragraph => paragraph != null && paragraph !== false
+      )
+      if (!isHtml && paragraphs.some(isLikelyMarkup)) {
+        console.warn(
+          'notify(): `text` is escaped and seems to contain HTML markup. Use ' +
+          'the `html` option for formatted text, and escape all values that ' +
+          'it includes.'
+        )
+      }
+      const htmlParagraphs = isHtml
+        ? paragraphs
+        : paragraphs.map(paragraph => escapeHtml(paragraph))
+      const content = `<p>${
+        htmlParagraphs.join('</p> <p>')
       }</p>`.replace(/\n|\r\n|\r/g, '<br>')
       const log = (
         {
@@ -48,7 +70,7 @@ export default DitoComponent.component('DitoNotifications', {
       // eslint-disable-next-line no-console
       console[log](
         ...[
-          stripHtml(text),
+          isHtml ? stripHtml(content) : paragraphs.join('\n'),
           ...(type === 'error' && error ? [error] : [])
         ]
       )
@@ -59,18 +81,20 @@ export default DitoComponent.component('DitoNotifications', {
         // amount of milliseconds multiplied with the amount of characters
         // displayed in the notification, plus 40 (40 + title + message):
         const { durationFactor = 20 } = notifications
-        duration ??= (40 + text.length + title.length) * durationFactor
+        duration ??= (40 + content.length + title.length) * durationFactor
         this.$notify({
           type,
-          title,
-          text,
+          title: escapeHtml(title),
+          text: content,
           duration: duration === 0 ? -1 : duration // < 0 -> <= 0 = sticky
         })
       }
     },
 
     destroyAll() {
-      this.notifications.destroyAll()
+      // `VueNotifications` doesn't expose methods, but closes all its
+      // notifications when notified with `clean`:
+      this.$notify({ clean: true })
     }
   }
 })