@ditojs/admin 3.2.7 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.2.7",
+  "version": "3.3.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",
@@ -24,7 +24,9 @@
     "dist/",
     "types/",
     "!src/**/*.test.js",
-    "!src/**/__snapshots__/"
+    "!src/**/__snapshots__/",
+    "!src/test/",
+    "!src/**/node_modules/"
   ],
   "scripts": {
     "build": "vite build",
@@ -41,10 +43,12 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^3.2.6",
-    "@ditojs/utils": "^3.2.6"
+    "@ditojs/ui": "^3.3.0",
+    "@ditojs/utils": "^3.3.0",
+    "type-fest": "^5.10.0"
   },
   "peerDependencies": {
+    "@floating-ui/dom": "^1.8.0",
     "@kyvg/vue3-notification": "^3.4.2",
     "@tiptap/core": "^3.31.4",
     "@tiptap/extension-blockquote": "^3.31.4",
@@ -67,27 +71,26 @@
     "@tiptap/extension-subscript": "^3.31.4",
     "@tiptap/extension-superscript": "^3.31.4",
     "@tiptap/extension-text": "^3.31.4",
-    "@tiptap/extension-text-style": "^3.31.4",
     "@tiptap/extension-underline": "^3.31.4",
     "@tiptap/extensions": "^3.31.4",
     "@tiptap/pm": "^3.31.4",
     "@tiptap/vue-3": "^3.31.4",
     "@vueuse/integrations": "^15.0.0",
     "codeflask": "^1.4.1",
-    "focus-trap": "^8.2.2",
-    "nanoid": "^6.0.1",
+    "focus-trap": "^8.2.3",
+    "nanoid": "^6.0.2",
     "sortablejs": "^1.15.7",
     "tippy.js": "^6.3.7",
     "tiptap-footnotes": "^3.0.1",
-    "type-fest": "^5.10.0",
     "vue": "^3.5.43",
     "vue-color": "^3.3.3",
     "vue-multiselect": "^3.5.0",
-    "vue-router": "^5.3.1",
+    "vue-router": "^5.4.0",
     "vue-upload-component": "^3.2.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^3.2.6",
+    "@ditojs/build": "^3.3.0",
+    "@floating-ui/dom": "^1.8.0",
     "@kyvg/vue3-notification": "^3.4.2",
     "@tiptap/core": "^3.31.4",
     "@tiptap/extension-blockquote": "^3.31.4",
@@ -110,26 +113,24 @@
     "@tiptap/extension-subscript": "^3.31.4",
     "@tiptap/extension-superscript": "^3.31.4",
     "@tiptap/extension-text": "^3.31.4",
-    "@tiptap/extension-text-style": "^3.31.4",
     "@tiptap/extension-underline": "^3.31.4",
     "@tiptap/extensions": "^3.31.4",
     "@tiptap/pm": "^3.31.4",
     "@tiptap/vue-3": "^3.31.4",
     "@vueuse/integrations": "^15.0.0",
     "codeflask": "^1.4.1",
-    "focus-trap": "^8.2.2",
-    "nanoid": "^6.0.1",
+    "focus-trap": "^8.2.3",
+    "nanoid": "^6.0.2",
     "sortablejs": "^1.15.7",
     "tippy.js": "^6.3.7",
     "tiptap-footnotes": "^3.0.1",
-    "type-fest": "^5.10.0",
     "typescript": "^6.0.3",
-    "vite": "^8.3.2",
+    "vite": "^8.3.4",
     "vue": "^3.5.43",
     "vue-color": "^3.3.3",
     "vue-multiselect": "^3.5.0",
-    "vue-router": "^5.3.1",
+    "vue-router": "^5.4.0",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "88a3df9bbd036594e886ea6169cef3dfd4b10fe7"
+  "gitHead": "1ba6ba0a6642294959966a3488b0944c7c321b39"
 }

package/src/DitoAdmin.js

@@ -11,16 +11,20 @@ import {
 import * as components from './components/index.js'
 import * as types from './types/index.js'
 import DitoRoot from './components/DitoRoot.vue'
+import DitoView from './components/DitoView.vue'
 import DitoTypeComponent from './DitoTypeComponent.js'
 import ResizeDirective from './directives/resize.js'
 import { getResource } from './utils/resource.js'
 import { request, getApiUrl, isApiUrl } from './utils/request.js'
+import { Session } from './utils/Session.js'
+import { ViewRegistry } from './utils/ViewRegistry.js'
 import verbs from './verbs.js'
 
 export default class DitoAdmin {
   constructor(el, {
-    // `dito` contains the base and api settings passed from `AdminController`
-    dito = {},
+    // `dito` contains the base, api and settings passed from `AdminController`
+    // as `window.dito`, which is also the default:
+    dito: ditoObject = globalThis.dito ?? {},
     api,
     views = {},
     ...options
@@ -29,7 +33,7 @@ export default class DitoAdmin {
     // Merge in `api` settings as passed from `config.admin` and through the
     // `AdminController` with `api` values from from 'admin/index.js'
     // NOTE: `AdminController` provides `dito.api.base`
-    this.api = api = assignDeeply({ base: '/' }, dito.api, api)
+    this.api = api = assignDeeply({ base: '/' }, ditoObject.api, api)
     this.options = options
 
     // Setup default api settings:
@@ -146,6 +150,35 @@ export default class DitoAdmin {
       el = document.querySelector(el)
     }
 
+    const router = createRouter({
+      // Start with a catch-all route, to be replaced by the actual routes once
+      // the schemas are loaded, to prevent vue-router from complaining, see
+      // `ViewRegistry.resolve()` for the actual route setup.
+      routes: [
+        {
+          name: 'catch-all',
+          path: '/:_(.*)',
+          components: {}
+        }
+      ],
+      history: createWebHistory(ditoObject.base),
+      linkActiveClass: '',
+      linkExactActiveClass: ''
+    })
+
+    const viewRegistry = new ViewRegistry({
+      api,
+      router,
+      unresolvedViews: views,
+      viewComponent: DitoView
+    })
+
+    const session = new Session({
+      api,
+      viewRegistry,
+      redirectAfterLogin: options.login?.redirectAfterLogin
+    })
+
     const app = (this.app = createApp({
       components: {
         DitoRoot,
@@ -163,12 +196,15 @@ export default class DitoAdmin {
       // https://github.com/vuejs/vue/issues/7017#issuecomment-480906691
       provide: {
         api,
+        session,
+        viewRegistry,
         // A default list of verbs are provided by $verbs() and can be
         // overridden at any point in the component hierarchy.
         $verbs: () => verbs,
+        // The views, once resolved for the logged in user, see `Session`:
+        $views: () => viewRegistry.views,
         // Provide defaults so DitoMixin can inject them for all components:
         //   inject: [  '$isPopulated', '$schemaComponent', '$routeComponent' ]
-        $views: () => {},
         $isPopulated: () => true,
         $parentComponent: () => null,
         $schemaComponent: () => null,
@@ -180,14 +216,14 @@ export default class DitoAdmin {
         $dialogComponent: () => null,
         $dataModel: () => null,
         $panelComponent: () => null,
-        $tabComponent: () => null
+        $tabComponent: () => null,
+        $loadingTracker: () => null
       },
 
       render: () =>
         createElement(DitoRoot, {
           ref: 'root',
-          class: dito.settings.rootClass,
-          unresolvedViews: views,
+          class: ditoObject.settings?.rootClass,
           options
         })
     }))
@@ -203,23 +239,7 @@ export default class DitoAdmin {
 
     app.directive('resize', ResizeDirective)
 
-    app.use(
-      createRouter({
-        // Start with a catch-all route, to be replaced by the actual routes
-        // once the schemas are loaded, to prevent vue-router from complaining,
-        // see: `resolveViews()` in `DitoRoot` for the actual route setup.
-        routes: [
-          {
-            name: 'catch-all',
-            path: '/:_(.*)',
-            components: {}
-          }
-        ],
-        history: createWebHistory(dito.base),
-        linkActiveClass: '',
-        linkExactActiveClass: ''
-      })
-    )
+    app.use(router)
 
     el.classList.add('dito-app')
     app.mount(el)

package/src/DitoContext.js

@@ -10,6 +10,7 @@ import {
   getLastDataPathIndex
 } from './utils/data.js'
 import { isNested } from './utils/schema/structure.js'
+import { getTextFromHtml } from './utils/html.js'
 
 const { hasOwnProperty } = Object.prototype
 
@@ -54,7 +55,15 @@ function get(context, key, defaultValue) {
 }
 
 function set(context, key, value) {
-  toObject(context)[key] = value
+  // Define the value on the context object itself: An assignment would be
+  // passed on to the component that the object inherits from, see
+  // `DitoContext` constructor, and change its state for all its contexts.
+  Object.defineProperty(toObject(context), key, {
+    value,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  })
 }
 
 export default class DitoContext {
@@ -245,10 +254,18 @@ export default class DitoContext {
     return get(this, 'flattenedViews', null)
   }
 
+  // The label of the item as HTML, with escaped item values, see
+  // `getItemLabel()`.
   get itemLabel() {
     return get(this, 'itemLabel', null)
   }
 
+  // The text of `itemLabel`, with its escaped item values unescaped, e.g. for
+  // places that don't display HTML.
+  get itemLabelText() {
+    return getTextFromHtml(this.itemLabel)
+  }
+
   get formLabel() {
     return get(this, 'formLabel', null)
   }
@@ -326,12 +343,21 @@ export default class DitoContext {
     return get(this, 'wasNotified', false)
   }
 
+  // Whether the action of the component is running, e.g. the click handler of
+  // a button, which disables it. Handlers can set it to `false` to end it
+  // early, e.g. before opening a dialog. This changes the state of the
+  // component, which resets it when the action ends.
   get isRunning() {
     return get(this, 'isRunning', false)
   }
 
   set isRunning(value) {
-    set(this, 'isRunning', value)
+    const { component } = this
+    if (component && 'isRunning' in component) {
+      component.isRunning = value
+    } else {
+      set(this, 'isRunning', value)
+    }
   }
 
   get query() {

package/src/DitoTypeComponent.js

@@ -23,6 +23,7 @@ export default {
   defaultVisible: true,
   defaultMultiple: false,
   generateLabel: true,
+  rendersOwnLabel: null,
   excludeValue: false,
   ignoreMissingValue: null,
   treatNullAsMissing: null,

package/src/appState.js

@@ -3,10 +3,13 @@ import { parseUserAgent } from './utils/agent'
 
 export default reactive({
   title: '',
+  // The route components by route level, see `RouteMixin`:
   routeComponents: [],
   user: null,
   agent: parseUserAgent(navigator.userAgent || ''),
-  loadCache: {}, // See TypeMixin.load()
-  activeLabel: null,
-  clipboardData: null
+  // The responses loaded with `cache: 'global'`, see `DitoMixin.load()`. Only
+  // `Session` replaces it, when the user changes:
+  loadCache: {},
+  // The modifier class of the page, e.g. for wide schemas, see `DitoSchema`:
+  pageClass: null
 })

package/src/components/DitoAccount.vue

@@ -1,47 +1,36 @@
 <template lang="pug">
 .dito-account
-  a(
-    role="button"
-    v-bind="pulldownTriggerAttributes"
-    @mousedown.stop="onPulldownMouseDown()"
+  DitoMenuButton.dito-account__button(
+    :items="items"
+    placement="bottom-left"
+    offset
+    @select="onSelectMenuItem"
   )
     span {{ user.username }}
-  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 }}
 </template>
 
 <script>
+import { DitoMenuButton } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
-import PulldownMixin from '../mixins/PulldownMixin.js'
 
 // @vue/component
 export default DitoComponent.component('DitoAccount', {
-  mixins: [PulldownMixin],
+  components: { DitoMenuButton },
 
   data() {
     return {
-      items: {
-        settings: 'Settings',
-        logout: 'Logout'
-      }
+      items: [
+        { value: 'settings', label: 'Settings' },
+        { value: 'logout', label: 'Logout' }
+      ]
     }
   },
 
   methods: {
-    onPulldownSelect(value) {
+    onSelectMenuItem({ value }) {
       switch (value) {
         case 'logout':
-          this.rootComponent.logout()
+          this.session.logout()
           break
         case 'settings':
           console.info('TODO: Implement Settings')
@@ -56,11 +45,30 @@ export default DitoComponent.component('DitoAccount', {
 @import '../styles/_imports';
 
 .dito-account {
-  position: relative;
   display: inline-block;
 
-  .dito-pulldown {
-    top: $pulldown-padding-ver;
+  // The menu button is a `DitoButton`, but shows the user name as plain text,
+  // so reset the button styles, including the ones of its states:
+  & &__button {
+    cursor: pointer;
+
+    &,
+    &:hover,
+    &:active,
+    &:focus {
+      min-width: 0;
+      min-height: 0;
+      padding: 0;
+      border: 0;
+      font: inherit;
+      color: inherit;
+      background: none;
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      box-shadow: $shadow-focus;
+    }
   }
 }
 </style>

package/src/components/DitoAffixes.vue

@@ -13,7 +13,7 @@
     :parentContext="parentContext"
   )
   button.dito-affixes__clear(
-    v-if="clearable"
+    v-if="shouldShowClearButton"
     type="button"
     title="Clear"
     :disabled="disabled"
@@ -43,7 +43,10 @@ export default DitoComponent.component('DitoAffixes', {
     mode: { type: String, default: null },
     position: { type: String, default: null },
     absolute: { type: Boolean, default: false },
+    // Whether the value can be cleared, and whether there's one to clear: The
+    // clear button only shows when both are true.
     clearable: { type: Boolean, default: false },
+    hasValue: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     inlineInfo: { type: String, default: null },
     parentContext: { type: Object, required: true }
@@ -86,10 +89,14 @@ export default DitoComponent.component('DitoAffixes', {
       }
     },
 
+    shouldShowClearButton() {
+      return this.clearable && this.hasValue
+    },
+
     hasContent() {
       return (
         this.visibleItems.length > 0 ||
-        this.clearable ||
+        this.shouldShowClearButton ||
         this.inlineInfo ||
         hasSlotContent(this.$slots.prepend) ||
         hasSlotContent(this.$slots.append)

package/src/components/DitoClipboard.vue

@@ -2,41 +2,45 @@
 .dito-clipboard.dito-buttons.dito-buttons--round(
   v-if="clipboard"
 )
-  button.dito-button.dito-button--copy(
-    ref="copyData"
-    type="button"
+  DitoButton.dito-button--copy(
     title="Copy Data"
-    :disabled="!copyEnabled"
+    :disabled="!hasData"
     @click="onCopy"
   )
-  button.dito-button.dito-button--paste(
-    type="button"
+  DitoButton.dito-button--paste(
     title="Paste Data"
-    :disabled="!pasteEnabled"
+    :disabled="!isPasteEnabled"
     @click="onPaste"
   )
 </template>
 
 <script>
-import { isObject, clone, deindent } from '@ditojs/utils'
+import { isObject, clone } from '@ditojs/utils'
+import { DitoButton } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
 import DomMixin from '../mixins/DomMixin.js'
 import DitoContext from '../DitoContext.js'
+import {
+  getClipboardData,
+  hasClipboardData,
+  copyClipboardData,
+  readClipboardData
+} from '../utils/clipboard.js'
 
 // @vue/component
 export default DitoComponent.component('DitoClipboard', {
   mixins: [DomMixin],
+  components: { DitoButton },
+
+  emits: ['paste'],
 
   props: {
     clipboard: { type: [Boolean, Object], required: true },
-    schema: { type: Object, required: true }
-  },
-
-  data() {
-    return {
-      copyEnabled: false,
-      pasteEnabled: false
-    }
+    schema: { type: Object, required: true },
+    hasData: { type: Boolean, required: true },
+    // Returns the data to copy. A function rather than the data itself, so
+    // that it's only processed when copying.
+    getData: { type: Function, required: true }
   },
 
   computed: {
@@ -58,106 +62,68 @@ export default DitoComponent.component('DitoClipboard', {
         ? clipboardData =>
             paste.call(this, new DitoContext(this, { clipboardData }))
         : clipboardData => clipboardData
-    }
-  },
-
-  watch: {
-    // Check right away also in case there's already data (e.g. create form):
-    'parentComponent.hasData': {
-      immediate: true,
-      handler: 'updateCopy'
     },
 
-    'appState.clipboardData': {
-      immediate: true,
-      handler: 'updatePaste'
+    isPasteEnabled() {
+      return hasClipboardData(this.schema.name)
     }
   },
 
   mounted() {
-    // Check clipboard content whenever something gets copied or the window gets
-    // (re)activated, as those are the moments when the clipboard can change:
-    this.domOn(document, { copy: this.updatePaste })
-    this.domOn(window, { focus: this.updatePaste })
+    // Read the clipboard right away, and whenever something gets copied or the
+    // window gets (re)activated, as those are the moments when it can change:
+    this.updateClipboardData()
+    this.domOn(document, { copy: this.updateClipboardData })
+    this.domOn(window, { focus: this.updateClipboardData })
   },
 
   methods: {
-    checkClipboardData(clipboardData) {
-      const { $schema, ...data } = clipboardData || {}
-      return $schema === this.schema.name ? data : null
-    },
-
-    async getClipboardData(report) {
-      // Use the internal clipboard as fallback.
-      let { clipboardData } = this.appState
-      try {
-        const json = await navigator.clipboard?.readText?.()
-        if (json) {
-          clipboardData = JSON.parse(json)
-        }
-      } catch (err) {
-        if (report) {
-          console.error(err, err.name, err.message)
-          if (err.name === 'SyntaxError') {
-            alert(deindent`
-              The data in the clipboard appears to be malformed:
-              ${err.message}
-            `)
-          }
-        }
-      }
-      return this.checkClipboardData(clipboardData)
-    },
-
-    updateCopy() {
-      this.copyEnabled = this.parentComponent.hasData
-    },
-
-    async updatePaste() {
-      this.pasteEnabled = !!this.checkClipboardData(this.appState.clipboardData)
-      if (!this.pasteEnabled && this.appState.agent.chrome) {
-        // See if the clipboard content is valid JSON data that is compatible
-        // with the current target schema, and only then activate the pasting:
-        const data = await this.getClipboardData(false) // Don't report
-        this.pasteEnabled = !!data
+    updateClipboardData() {
+      // Only Chrome reads the clipboard without asking for permission, so
+      // other browsers only read it when pasting.
+      if (this.appState.agent.chrome) {
+        // Errors are only reported when pasting.
+        readClipboardData().catch(() => {})
       }
     },
 
     async onCopy() {
-      let data = this.parentComponent.clipboardData
       try {
-        if (data) {
-          data = {
-            $schema: this.schema.name,
-            ...this.copyData(data)
-          }
-        }
-        // Keep an internal clipboard as fallback.
-        this.appState.clipboardData = data
-        this.pasteEnabled = true
-        try {
-          const json = JSON.stringify(data, null, 2)
-          await navigator.clipboard?.writeText?.(json)
-        } catch (err) {
-          console.error(err, err.name, err.message)
-        }
+        const data = this.getData()
+        await copyClipboardData(this.schema.name, data && this.copyData(data))
       } catch (error) {
-        console.error(error)
-        alert(error.message)
+        this.notifyClipboardError(error)
       }
     },
 
     async onPaste() {
-      let data = await this.getClipboardData(true) // Report
       try {
-        data = data && this.pasteData(data)
-        if (data) {
-          this.parentComponent.clipboardData = data
+        await readClipboardData()
+      } catch (error) {
+        if (error.name === 'SyntaxError') {
+          this.notifyClipboardError(error, [
+            'The data in the clipboard appears to be malformed:',
+            error.message
+          ])
+          return
+        }
+        // Fall back to the data copied inside the admin.
+        console.error(error, error.name, error.message)
+      }
+      try {
+        const data = getClipboardData(this.schema.name)
+        const pastedData = data && this.pasteData(data)
+        if (pastedData) {
+          this.$emit('paste', pastedData)
         }
       } catch (error) {
-        console.error(error)
-        alert(error.message)
+        this.notifyClipboardError(error)
       }
+    },
+
+    notifyClipboardError(error, text = error.message) {
+      // Notifications log their error too.
+      this.notify({ type: 'error', error, title: 'Clipboard Error', text })
     }
   }
 })

package/src/components/DitoConfirmMessage.vue

@@ -0,0 +1,18 @@
+<template lang="pug">
+p.dito-confirm-message(
+  v-html="value"
+)
+</template>
+
+<script>
+// Displays the HTML message of the dialogs that `confirm()` shows, see
+// `utils/dialogs.js`, as a `{ type: 'component' }` schema, which adds
+// `DitoMixin` and `TypeMixin` to provide `value`.
+export default {}
+</script>
+
+<style lang="scss">
+.dito-confirm-message {
+  margin: 0;
+}
+</style>