@ditojs/admin 2.9.1 → 2.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.9.1",
+  "version": "2.9.3",
   "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/master/packages/admin",
@@ -33,9 +33,9 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.9.0",
+    "@ditojs/ui": "^2.9.3",
     "@ditojs/utils": "^2.9.0",
-    "@kyvg/vue3-notification": "^2.9.0",
+    "@kyvg/vue3-notification": "^2.9.1",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-blockquote": "^2.0.3",
@@ -62,28 +62,28 @@
     "codeflask": "^1.4.1",
     "filesize": "^10.0.7",
     "filesize-parser": "^1.5.0",
-    "focus-trap": "^7.4.0",
+    "focus-trap": "^7.4.1",
     "nanoid": "^4.0.2",
     "sortablejs": "^1.15.0",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
     "type-fest": "^3.10.0",
-    "vue": "^3.2.47",
-    "vue-multiselect": "^3.0.0-beta.1",
-    "vue-router": "^4.1.6",
+    "vue": "^3.3.2",
+    "vue-multiselect": "^3.0.0-beta.2",
+    "vue-router": "^4.2.0",
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
     "@ditojs/build": "^2.9.0",
-    "@vitejs/plugin-vue": "^4.2.1",
-    "@vue/compiler-sfc": "^3.2.47",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.2",
     "pug": "^3.0.2",
     "sass": "1.62.1",
     "typescript": "^5.0.4",
-    "vite": "^4.3.5"
+    "vite": "^4.3.7"
   },
   "types": "types",
-  "gitHead": "002f3c713f9d3b10e348d2e9fd07d3a5bea426e6",
+  "gitHead": "8855fb3de01a12a456a622cc17c0c03ffdbf7eab",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoAdmin.js

@@ -199,8 +199,8 @@ export default class DitoAdmin {
     app.config.errorHandler = console.error
 
     app.use(VueNotifications, {
-      name: 'notify',
-      componentName: 'VueNotifications'
+      componentName: 'VueNotifications',
+      name: 'notify'
     })
 
     app.directive('resize', ResizeDirective)

package/src/components/DitoClipboard.vue

@@ -82,6 +82,11 @@ export default DitoComponent.component('DitoClipboard', {
   },
 
   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
@@ -101,12 +106,11 @@ export default DitoComponent.component('DitoClipboard', {
           }
         }
       }
-      const { $schema, ...data } = clipboardData || {}
-      return $schema === this.schema.name ? data : null
+      return this.checkClipboardData(clipboardData)
     },
 
     async updatePaste() {
-      this.pasteEnabled = !!this.appState.clipboardData
+      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:

package/src/components/DitoHeader.vue

@@ -1,23 +1,10 @@
 <template lang="pug">
 nav.dito-header
-  .dito-trail
-    ul
-      li(
-        v-for="(component, index) in trail"
-      )
-        template(
-          v-if="index === trail.length - 1"
-        )
-          span(:class="getBreadcrumbClass(component)")
-            | {{ component.breadcrumb }}
-        RouterLink.dito-breadcrumb(
-          v-else
-          :to="component.path"
-        )
-          span(:class="getBreadcrumbClass(component)")
-            | {{ component.breadcrumb }}
+  DitoTrail
     DitoSpinner(
       v-if="isLoading"
+      :size="spinner?.size"
+      :color="spinner?.color"
     )
   //- Teleport target for `.dito-schema-header`:
   .dito-header__teleport
@@ -26,12 +13,9 @@ nav.dito-header
 
 <script>
 import DitoComponent from '../DitoComponent.js'
-import DitoSpinner from './DitoSpinner.vue'
 
 // @vue/component
 export default DitoComponent.component('DitoHeader', {
-  components: { DitoSpinner },
-
   props: {
     spinner: {
       type: Object,
@@ -41,34 +25,6 @@ export default DitoComponent.component('DitoHeader', {
       type: Boolean,
       default: false
     }
-  },
-
-  computed: {
-    trail() {
-      return this.appState.routeComponents.filter(
-        component => !!component.routeRecord
-      )
-    }
-  },
-
-  created() {
-    const {
-      size = '8px',
-      color = '#999'
-    } = this.spinner || {}
-    // TODO: This is a hack to set the default props for the DitoSpinner.
-    // Pass them on through the template instead!
-    const { props } = DitoSpinner
-    props.size.default = size
-    props.color.default = color
-  },
-
-  methods: {
-    getBreadcrumbClass(component) {
-      return {
-        'dito-dirty': component.isDirty
-      }
-    }
   }
 })
 </script>
@@ -106,60 +62,6 @@ export default DitoComponent.component('DitoHeader', {
     }
   }
 
-  .dito-trail {
-    display: flex;
-    box-sizing: border-box;
-    height: 3em;
-
-    ul {
-      display: flex;
-    }
-
-    li {
-      white-space: nowrap;
-    }
-
-    a {
-      position: relative;
-      display: block;
-
-      $angle: 33deg;
-
-      &:hover {
-        span {
-          color: $color-light;
-        }
-      }
-
-      &::before,
-      &::after {
-        position: absolute;
-        content: '';
-        width: 1px;
-        height: 0.75em;
-        right: -0.25em;
-        background: $color-white;
-        opacity: 0.5;
-      }
-
-      &::before {
-        top: 50%;
-        transform: rotate($angle);
-        transform-origin: top;
-      }
-
-      &::after {
-        bottom: 50%;
-        transform: rotate(-$angle);
-        transform-origin: bottom;
-      }
-    }
-  }
-
-  .dito-spinner {
-    margin-top: $header-padding-ver;
-  }
-
   .dito-dirty {
     &::after {
       content: '';

package/src/components/DitoNotifications.vue

@@ -0,0 +1,159 @@
+<template lang="pug">
+.dito-notifications
+  .dito-header
+    span
+  .dito-notifications__inner
+    VueNotifications(
+      ref="notifications"
+      classes="dito-notification"
+      position=""
+      width=""
+    )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import { asArray, stripTags } from '@ditojs/utils'
+
+// @vue/component
+export default DitoComponent.component('DitoNotifications', {
+  notifications() {
+    return this.isMounted && this.$refs.notifications
+  },
+
+  methods: {
+    notify({ type = 'info', title, text } = {}) {
+      title ||= (
+        {
+          warning: 'Warning',
+          error: 'Error',
+          info: 'Information',
+          success: 'Success'
+        }[type] ||
+        'Notification'
+      )
+      text = `<p>${
+        asArray(text).join('</p> <p>')
+      }</p>`.replace(/\n|\r\n|\r/g, '<br>')
+      const log = (
+        {
+          warning: 'warn',
+          error: 'error',
+          info: 'log',
+          success: 'log'
+        }[type] ||
+        'error'
+      )
+      // eslint-disable-next-line no-console
+      console[log](stripTags(text))
+      const { notifications = true } = this.api
+      if (notifications) {
+        // Calculate display-duration for the notification based on its content
+        // and the setting of the `durationFactor` configuration. It defines the
+        // amount of milliseconds multiplied with the amount of characters
+        // displayed in the notification, plus 40 (40 + title + message):
+        const { durationFactor = 20 } = notifications
+        const duration = (40 + text.length + title.length) * durationFactor
+        this.$notify({ type, title, text, duration })
+      }
+    },
+
+    destroyAll() {
+      this.notifications.destroyAll()
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@use 'sass:color';
+@import '../styles/_imports';
+
+@mixin type($background) {
+  background: color.adjust($background, $lightness: 5%);
+  color: $color-white;
+  border-left: 12px solid color.adjust($background, $lightness: -10%);
+}
+
+.dito-notifications {
+  $notification-width: 300px;
+
+  flex: 1;
+  z-index: $z-index-notifications;
+  box-sizing: border-box;
+  margin-left: $form-spacing;
+  // For the `@container` rule to work:
+  container-type: inline-size;
+
+  .dito-header {
+    span {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  &__inner {
+    position: relative;
+  }
+
+  .vue-notification-group {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: $notification-width;
+
+    @container (width < #{$notification-width + $content-padding}) {
+      left: unset;
+      right: $content-padding;
+    }
+  }
+
+  .vue-notification-wrapper {
+    overflow: visible;
+  }
+
+  .dito-notification {
+    padding: 8px;
+    margin: $content-padding 0;
+    font-size: inherit;
+    color: $color-white;
+    border-radius: $border-radius;
+    box-shadow: $shadow-window;
+
+    .notification-title {
+      font-weight: bold;
+      padding-bottom: 8px;
+    }
+
+    .notification-content {
+      overflow: hidden;
+      word-break: break-all;
+
+      p {
+        margin: 0;
+
+        & + p {
+          margin-top: 8px;
+        }
+      }
+    }
+
+    &,
+    &.info {
+      @include type($color-active);
+    }
+
+    &.success {
+      @include type($color-success);
+    }
+
+    &.warning {
+      @include type($color-warning);
+    }
+
+    &.error {
+      @include type($color-error);
+    }
+  }
+}
+</style>

package/src/components/DitoRoot.vue

@@ -4,11 +4,6 @@
   :data-agent-platform="appState.agent.platform"
   :data-agent-version="appState.agent.versionNumber"
 )
-  VueNotifications.dito-notifications(
-    ref="notifications"
-    position="top right"
-    classes="dito-notification"
-  )
   Transition(name="dito-drag")
     .dito-drag-overlay(
       v-if="isDraggingFiles"
@@ -43,12 +38,12 @@
       @click="rootComponent.login()"
     )
       span Login
-  .dito-fill
+  DitoNotifications(ref="notifications")
 </template>
 
 <script>
 import { delegate as tippyDelegate } from 'tippy.js'
-import { asArray, mapConcurrently, stripTags } from '@ditojs/utils'
+import { mapConcurrently } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DomMixin from '../mixins/DomMixin.js'
 import DitoUser from '../DitoUser.js'
@@ -90,7 +85,7 @@ export default DitoComponent.component('DitoRoot', {
 
   computed: {
     notifications() {
-      return this.$refs.notifications
+      return this.isMounted && this.$refs.notifications
     },
 
     isLoading() {
@@ -239,39 +234,7 @@ export default DitoComponent.component('DitoRoot', {
     },
 
     notify({ type = 'info', title, text } = {}) {
-      title ||= (
-        {
-          warning: 'Warning',
-          error: 'Error',
-          info: 'Information',
-          success: 'Success'
-        }[type] ||
-        'Notification'
-      )
-      text = `<p>${
-        asArray(text).join('</p> <p>')
-      }</p>`.replace(/\n|\r\n|\r/g, '<br>')
-      const log = (
-        {
-          warning: 'warn',
-          error: 'error',
-          info: 'log',
-          success: 'log'
-        }[type] ||
-        'error'
-      )
-      // eslint-disable-next-line no-console
-      console[log](stripTags(text))
-      const { notifications = true } = this.api
-      if (notifications) {
-        // Calculate display-duration for the notification based on its content
-        // and the setting of the `durationFactor` configuration. It defines the
-        // amount of milliseconds multiplied with the amount of characters
-        // displayed in the notification, plus 40 (40 + title + message):
-        const { durationFactor = 20 } = notifications
-        const duration = (40 + text.length + title.length) * durationFactor
-        this.$notify({ type, title, text, duration })
-      }
+      this.notifications.notify({ type, title, text })
     },
 
     closeNotifications() {
@@ -509,17 +472,6 @@ function addRoutes(router, routes) {
   }
 }
 
-.dito-fill {
-  flex: 1;
-
-  .dito-header {
-    span {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-}
-
 .dito-account,
 .dito-login {
   cursor: pointer;

package/src/components/DitoSchema.vue

@@ -757,7 +757,7 @@ export default DitoComponent.component('DitoSchema', {
   }
 
   &:has(> .dito-schema-content + .dito-edit-buttons) {
-    // Display the edit buttons to the right of the schema:
+    // Display the inlined edit buttons to the right of the schema:
     display: flex;
     flex-direction: row;
     align-items: stretch;

package/src/components/DitoSpinner.vue

@@ -1,15 +1,18 @@
 <template lang="pug">
 .dito-spinner(
   v-show="loading"
+  :style="{ '--color': color, '--size': size, '--margin': margin }"
 )
-  //- TODO: Convert to BEM
-  .v-pulse.v-pulse1(:style="[spinnerStyle, spinnerDelay1]")
-  .v-pulse.v-pulse2(:style="[spinnerStyle, spinnerDelay2]")
-  .v-pulse.v-pulse3(:style="[spinnerStyle, spinnerDelay3]")
+  .dito-spinner__pulse.dito-spinner__pulse1
+  .dito-spinner__pulse.dito-spinner__pulse2
+  .dito-spinner__pulse.dito-spinner__pulse3
 </template>
 
 <script>
-export default {
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoSpinner', {
   props: {
     loading: {
       type: Boolean,
@@ -17,54 +20,54 @@ export default {
     },
     color: {
       type: String,
-      default: '#5dc596'
+      default: null
     },
     size: {
       type: String,
-      default: '15px'
+      default: null
     },
     margin: {
       type: String,
-      default: '2px'
-    },
-    radius: {
-      type: String,
-      default: '100%'
-    }
-  },
-
-  data() {
-    // TODO: Convert to using only classes
-    return {
-      spinnerStyle: {
-        backgroundColor: this.color,
-        width: this.size,
-        height: this.size,
-        margin: this.margin,
-        borderRadius: this.radius,
-        display: 'inline-block',
-        animationName: 'v-pulseStretchDelay',
-        animationDuration: '0.75s',
-        animationIterationCount: 'infinite',
-        animationTimingFunction: 'cubic-bezier(.2,.68,.18,1.08)',
-        animationFillMode: 'both'
-      },
-      spinnerDelay1: {
-        animationDelay: '0.12s'
-      },
-      spinnerDelay2: {
-        animationDelay: '0.24s'
-      },
-      spinnerDelay3: {
-        animationDelay: '0.36s'
-      }
+      default: null
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
-@keyframes v-pulseStretchDelay {
+.dito-spinner {
+  --color: #999999;
+  --size: 8px;
+  --margin: 2px;
+
+  display: flex;
+  align-items: center;
+
+  &__pulse {
+    display: inline-block;
+    background: var(--color);
+    width: var(--size);
+    height: var(--size);
+    margin: var(--margin);
+    border-radius: 100%;
+    animation: dito-spinner-pulse 0.75s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0s
+      infinite both;
+  }
+
+  &__pulse1 {
+    animation-delay: 0.12s;
+  }
+
+  &__pulse2 {
+    animation-delay: 0.24s;
+  }
+
+  &__pulse3 {
+    animation-delay: 0.36s;
+  }
+}
+
+@keyframes dito-spinner-pulse {
   0%,
   80% {
     transform: scale(1);
@@ -77,7 +80,7 @@ export default {
   }
 }
 
-@keyframes v-pulseStretchDelay {
+@keyframes dito-spinner-pulse {
   0%,
   80% {
     transform: scale(1);