@ditojs/admin 2.8.1 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.8.1",
+  "version": "2.9.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/master/packages/admin",
@@ -33,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.8.0",
-    "@ditojs/utils": "^2.8.0",
+    "@ditojs/ui": "^2.9.0",
+    "@ditojs/utils": "^2.9.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
@@ -74,7 +74,7 @@
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.8.0",
+    "@ditojs/build": "^2.9.0",
     "@vitejs/plugin-vue": "^4.2.1",
     "@vue/compiler-sfc": "^3.2.47",
     "pug": "^3.0.2",
@@ -83,7 +83,7 @@
     "vite": "^4.3.5"
   },
   "types": "types",
-  "gitHead": "26db3d0a7ebbed92b052bd7cffa078e9cdae7497",
+  "gitHead": "d2a43cca595a94a317a96c4c2f2cd492a2401b26",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/appState.js

@@ -1,9 +1,11 @@
 import { reactive } from 'vue'
+import { parseUserAgent } from './utils/agent'
 
 export default reactive({
   title: '',
   routeComponents: [],
   user: null,
+  agent: parseUserAgent(navigator.userAgent || ''),
   loadCache: {}, // See TypeMixin.load()
   activeLabel: null,
   clipboardData: null

package/src/components/DitoClipboard.vue

@@ -20,15 +20,16 @@
 <script>
 import { isObject, clone, deindent } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
-import DitoContext from '../DitoContext.js'
 import DomMixin from '../mixins/DomMixin.js'
+import DitoContext from '../DitoContext.js'
 
 // @vue/component
 export default DitoComponent.component('DitoClipboard', {
   mixins: [DomMixin],
 
   props: {
-    clipboard: { type: [Boolean, Object], default: false },
+    clipboard: { type: [Boolean, Object], required: true },
+    schema: { type: Object, required: true },
     dataPath: { type: String, required: true },
     data: { type: [Object, Array], default: null }
   },
@@ -36,8 +37,7 @@ export default DitoComponent.component('DitoClipboard', {
   data() {
     return {
       copyEnabled: false,
-      pasteEnabled: false,
-      fixClipboard: true
+      pasteEnabled: false
     }
   },
 
@@ -50,12 +50,7 @@ export default DitoComponent.component('DitoClipboard', {
       const { copy } = this.clipboardOptions
       return copy
         ? clipboardData =>
-            copy.call(
-              this,
-              new DitoContext(this, {
-                clipboardData
-              })
-            )
+            copy.call(this, new DitoContext(this, { clipboardData }))
         : clipboardData => clone(clipboardData)
     },
 
@@ -63,34 +58,27 @@ export default DitoComponent.component('DitoClipboard', {
       const { paste } = this.clipboardOptions
       return paste
         ? clipboardData =>
-            paste.call(
-              this,
-              new DitoContext(this, {
-                clipboardData
-              })
-            )
+            paste.call(this, new DitoContext(this, { clipboardData }))
         : clipboardData => clipboardData
     }
   },
 
-  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.checkClipboard
-    })
-    this.domOn(window, {
-      focus: this.checkClipboard
-    })
-    this.$watch('data', {
+  watch: {
+    'parentComponent.hasData': {
       // Check right away also in case there's already data (e.g. create form).
       immediate: true,
-      handler: (to, from) => {
-        if (to !== from) {
-          this.checkClipboard()
-        }
+      handler(hasData) {
+        this.copyEnabled = hasData
       }
-    })
+    },
+    'appState.clipboardData': 'updatePaste'
+  },
+
+  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 })
   },
 
   methods: {
@@ -99,12 +87,6 @@ export default DitoComponent.component('DitoClipboard', {
       let { clipboardData } = this.appState
       try {
         const json = await navigator.clipboard?.readText?.()
-        if (this.fixClipboard && json) {
-          // This appears to be needed on Safari to prevent a strange "Paste"
-          // button from appearing when the clipboard is accessed (why?!).
-          await navigator.clipboard?.writeText?.(json)
-          this.fixClipboard = false
-        }
         if (json) {
           clipboardData = JSON.parse(json)
         }
@@ -120,27 +102,34 @@ export default DitoComponent.component('DitoClipboard', {
         }
       }
       const { $schema, ...data } = clipboardData || {}
-      return $schema === this.schemaComponent?.schema.name ? data : null
+      return $schema === this.schema.name ? data : null
     },
 
-    async checkClipboard() {
-      this.copyEnabled = !!this.data
-      // See if the clipboard content is valid JSON data that is compatible
-      // with the current target schema, and only then activate the pasting:
-      this.pasteEnabled = !!(await this.getClipboardData(false)) // don't report
+    async updatePaste() {
+      this.pasteEnabled = !!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
+      }
     },
 
     async onCopy() {
-      let data = this.schemaComponent?.clipboardData
+      let data = this.parentComponent.clipboardData
       try {
-        data = data && this.copyData(data)
+        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)
-          // See if we can activate the paste button, depending on browsers:
-          await this.checkClipboard()
         } catch (err) {
           console.error(err, err.name, err.message)
         }
@@ -151,15 +140,10 @@ export default DitoComponent.component('DitoClipboard', {
     },
 
     async onPaste() {
-      let data = await this.getClipboardData(true) // report
-      try {
-        data = data && this.pasteData(data)
-        if (data) {
-          this.schemaComponent.setData(data)
-        }
-      } catch (error) {
-        console.error(error)
-        alert(error.message)
+      let data = await this.getClipboardData(true) // Report
+      data = data && this.pasteData(data)
+      if (data) {
+        this.parentComponent.clipboardData = data
       }
     }
   }

package/src/components/DitoContainer.vue

@@ -255,26 +255,24 @@ export default DitoComponent.component('DitoContainer', {
   // percentages in flex-basis to work.
   padding: $form-spacing-half;
 
-  .dito-page .dito-pane > & {
-    @container (width < #{calc($content-width * 0.8)}) {
+  .dito-pane > & {
+    .dito-page--width-80 & {
       flex-grow: 1;
       flex-basis: var(--basis-mobile, var(--basis));
       // DEBUG: background: yellow;
     }
 
-    @container (width < #{calc($content-width * 0.6)}) {
+    .dito-page--width-60 & {
       flex-basis: calc(2 * var(--basis));
       // DEBUG: background: orange;
     }
-  }
 
-  .dito-sidebar .dito-pane > & {
-    @container (width < #{$sidebar-max-width}) {
+    .dito-sidebar--width-99 & {
       flex-grow: 1;
       // DEBUG: background: yellow;
     }
 
-    @container (width < #{calc($sidebar-max-width * 0.6)}) {
+    .dito-sidebar--width-60 & {
       flex-basis: calc(2 * var(--basis));
       // DEBUG: background: orange;
     }

package/src/components/DitoDialog.vue

@@ -31,13 +31,14 @@
 
 <script>
 import { clone } from '@ditojs/utils'
-import { addEvents } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
+import DomMixin from '../mixins/DomMixin.js'
 import { getButtonSchemas } from '../utils/schema.js'
 import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
 
 // @vue/component
 export default DitoComponent.component('DitoDialog', {
+  mixins: [DomMixin],
   components: { UseFocusTrap },
   emits: ['remove'],
 
@@ -70,7 +71,6 @@ export default DitoComponent.component('DitoDialog', {
       }
     }
     return {
-      windowEvents: null,
       dialogData
     }
   },
@@ -125,7 +125,7 @@ export default DitoComponent.component('DitoDialog', {
   },
 
   mounted() {
-    this.windowEvents = addEvents(window, {
+    this.domOn(window, {
       keyup: event => {
         if ((this.hasCancel || !this.hasButtons) && event.keyCode === 27) {
           this.cancel()
@@ -134,10 +134,6 @@ export default DitoComponent.component('DitoDialog', {
     })
   },
 
-  unmounted() {
-    this.windowEvents.remove()
-  },
-
   methods: {
     remove() {
       this.$emit('remove')

package/src/components/DitoDraggable.vue

@@ -1,9 +1,10 @@
 <template lang="pug">
-UseSortable(
+UseSortable.dito-draggable(
   v-if="draggable"
+  :class="{ 'dito-draggable--dragging': isDragging }"
   :tag="tag"
   :modelValue="modelValue"
-  :options="options"
+  :options="{ ...options, onStart, onEnd }"
   @update:modelValue="$emit('update:modelValue', $event)"
 )
   slot
@@ -16,10 +17,12 @@ component(
 
 <script>
 import DitoComponent from '../DitoComponent'
+import DomMixin from '../mixins/DomMixin.js'
 import { UseSortable } from '@vueuse/integrations/useSortable/component'
 
 // @vue/component
 export default DitoComponent.component('DitoDraggable', {
+  mixins: [DomMixin],
   components: { UseSortable },
   emits: ['update:modelValue'],
 
@@ -40,6 +43,75 @@ export default DitoComponent.component('DitoDraggable', {
       type: Boolean,
       default: true
     }
+  },
+
+  data() {
+    return {
+      mouseEvents: null,
+      isDragging: false
+    }
+  },
+
+  methods: {
+    onStart(event) {
+      this.isDragging = true
+      this.options.onStart?.(event)
+      this.mouseEvents?.remove()
+    },
+
+    onEnd(event) {
+      this.options.onEnd?.(event)
+      // Keep `isDragging` true until the next mouse interaction so that
+      // confused hover states are cleared before removing the hover catcher.
+      this.mouseEvents = this.domOn(this.$el, {
+        mousedown: this.onMouse,
+        mousemove: this.onMouse,
+        mouseleave: this.onMouse
+      })
+    },
+
+    onMouse() {
+      this.isDragging = false
+      this.mouseEvents.remove()
+      this.mouseEvents = null
+    }
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-draggable {
+  // Overlay a hover catcher while we're dragging to prevent hover states from
+  // getting stuck / confused. Safari struggles with this, so disable it there.
+  @include browser-query(('chrome', 'firefox')) {
+    &:has(&__chosen),
+    &--dragging {
+      > * {
+        position: relative;
+
+        > :first-child::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+        }
+      }
+    }
+  }
+
+  &__fallback {
+    filter: drop-shadow(0 2px 4px $color-shadow);
+
+    // Nested <td> need to also switch to `display: flex` style during dragging.
+    &,
+    td {
+      display: flex;
+
+      > * {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>

package/src/components/DitoEditButtons.vue

@@ -78,19 +78,19 @@ export default DitoComponent.component('DitoEditButtons', {
       return this.disabled || !this.hasSchemaOption('deletable')
     },
 
-    isCreatableDisabled() {
+    isEditableDisabled() {
       return (
         this.disabled ||
-        !this.createPath ||
-        !this.hasSchemaOption('creatable')
+        !this.editPath ||
+        !this.hasSchemaOption('editable')
       )
     },
 
-    isEditableDisabled() {
+    isCreatableDisabled() {
       return (
         this.disabled ||
-        !this.editPath ||
-        !this.hasSchemaOption('editable')
+        !this.createPath ||
+        !this.hasSchemaOption('creatable')
       )
     },
 

package/src/components/DitoLabel.vue

@@ -115,8 +115,9 @@ export default DitoComponent.component('DitoLabel', {
   }
 
   &__inner {
-    display: flex;
     flex: 1 0 0%;
+    display: flex;
+    align-items: center;
     overflow: hidden;
   }
 

package/src/components/DitoPane.vue

@@ -2,6 +2,7 @@
 <template lang="pug">
 .dito-pane(
   v-if="isPopulated && componentSchemas.length > 0"
+  v-resize="onResizePane"
   :class=`{
     'dito-pane--single': isSingleComponent
   }`
@@ -22,8 +23,9 @@
     )
     DitoContainer(
       v-if="shouldRenderSchema(schema)"
+      ref="containers"
       :key="nestedDataPath"
-      v-resize="event => onResizeContainer(index, event)"
+      :data-index="index"
       :schema="schema"
       :dataPath="dataPath"
       :data="data"
@@ -196,15 +198,26 @@ export default DitoComponent.component('DitoPane', {
       }
     },
 
-    onResizeContainer(index, { target, contentRect: { width, height } }) {
-      this.positions[index] =
-        width > 0 && height > 0
-          ? {
-              top: target.getBoundingClientRect().y,
-              height: height / parseFloat(getComputedStyle(target).fontSize),
-              node: target
-            }
-          : null
+    onResizePane() {
+      this.$nextTick(() => {
+        for (const container of this.$refs.containers) {
+          const node = container.$el
+          const index = +node.dataset.index
+          const bounds = node.getBoundingClientRect()
+          const style = getComputedStyle(node)
+          const padding = parseFloat(style.padding)
+          const fontSize = parseFloat(style.fontSize)
+          const height = bounds.height - 2 * padding
+          this.positions[index] =
+            height <= 0
+              ? null
+              : {
+                  top: bounds.y,
+                  height: height / fontSize,
+                  node
+                }
+        }
+      })
     },
 
     isInLabeledRow(index) {

package/src/components/DitoRoot.vue

@@ -1,5 +1,9 @@
 <template lang="pug">
-.dito-root
+.dito-root(
+  :data-agent-browser="appState.agent.browser"
+  :data-agent-platform="appState.agent.platform"
+  :data-agent-version="appState.agent.versionNumber"
+)
   VueNotifications.dito-notifications(
     ref="notifications"
     position="top right"
@@ -21,7 +25,10 @@
       @remove="removeDialog(key)"
     )
   DitoNavigation
-  main.dito-page.dito-scroll-parent(:class="appState.pageClass")
+  main.dito-page.dito-scroll-parent(
+    v-resize="onResizePage"
+    :class="pageClasses"
+  )
     DitoHeader(
       :spinner="options.spinner"
       :isLoading="isLoading"
@@ -43,10 +50,10 @@
 import { delegate as tippyDelegate } from 'tippy.js'
 import { asArray, mapConcurrently, stripTags } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
+import DomMixin from '../mixins/DomMixin.js'
 import DitoUser from '../DitoUser.js'
 import DitoView from '../components/DitoView.vue'
 import DitoDialog from './DitoDialog.vue'
-import DomMixin from '../mixins/DomMixin.js'
 import {
   processView,
   resolveViews,
@@ -74,8 +81,9 @@ export default DitoComponent.component('DitoRoot', {
       resolvedViews: {},
       removeRoutes: null,
       dialogs: {},
-      allowLogin: false,
+      pageWidth: 0,
       loadingCount: 0,
+      allowLogin: false,
       isDraggingFiles: false
     }
   },
@@ -87,6 +95,19 @@ export default DitoComponent.component('DitoRoot', {
 
     isLoading() {
       return this.loadingCount > 0
+    },
+
+    pageClasses() {
+      const prefix = 'dito-page'
+      // NOTE: Keep synced with $content-width in SCSS:
+      const contentWidth = 900
+      return [
+        this.appState.pageClass,
+        {
+          [`${prefix}--width-80`]: this.pageWidth <= contentWidth * 0.8,
+          [`${prefix}--width-60`]: this.pageWidth <= contentWidth * 0.6
+        }
+      ]
     }
   },
 
@@ -103,7 +124,7 @@ export default DitoComponent.component('DitoRoot', {
     tippyDelegate(this.$el, {
       target: '.dito-info',
       theme: 'info',
-      appendTo: 'parent',
+      appendTo: node => node.closest('.dito-pane'),
       animation: 'shift-away-subtle',
       interactive: true,
       delay: 250,
@@ -438,6 +459,10 @@ export default DitoComponent.component('DitoRoot', {
         ...routes.flat()
       ])
       this.$router.replace(fullPath)
+    },
+
+    onResizePage({ contentRect: { width } }) {
+      this.pageWidth = width
     }
   }
 })
@@ -475,10 +500,9 @@ function addRoutes(router, routes) {
 
   flex: 0 1 var(--max-page-width);
   background: $content-color-background;
+  min-width: 0%;
   max-width: var(--max-page-width);
   overflow: visible; // For .dito-header full-width background.
-  // For the `@container` rule in `.dito-container` to work:
-  container-type: inline-size;
 
   &--wide {
     --max-content-width: #{$content-width-wide};
@@ -505,9 +529,9 @@ function addRoutes(router, routes) {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: $z-index-drag-overlay;
   width: 100%;
   height: 100%;
+  z-index: $z-index-drag-overlay;
   background: rgba(0, 0, 0, 0.25);
   pointer-events: none;
   backdrop-filter: blur(8px);

package/src/components/DitoSchema.vue

@@ -39,7 +39,9 @@ slot(name="before")
           :tabs="tabs"
         )
       DitoClipboard(
+        v-if="clipboard"
         :clipboard="clipboard"
+        :schema="schema"
         :dataPath="dataPath"
         :data="data"
       )
@@ -214,7 +216,7 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     clipboard() {
-      return this.schema?.clipboard
+      return this.schema?.clipboard ?? null
     },
 
     hasHeader() {
@@ -236,10 +238,13 @@ export default DitoComponent.component('DitoSchema', {
       return this.processData({ target: 'server', schemaOnly: true })
     },
 
-    clipboardData() {
-      return {
-        $schema: this.schema.name,
-        ...this.processData({ target: 'clipboard', schemaOnly: true })
+    clipboardData: {
+      get() {
+        return this.processData({ target: 'clipboard', schemaOnly: true })
+      },
+
+      set(data) {
+        this.setData(data)
       }
     },
 
@@ -676,6 +681,7 @@ export default DitoComponent.component('DitoSchema', {
         {
           // Needed for DitoContext handling inside `processData` and
           // `processSchemaData()`:
+          rootData: this.rootData,
           component: this,
           schemaOnly,
           target
@@ -772,7 +778,7 @@ export default DitoComponent.component('DitoSchema', {
     grid-template-rows: min-content;
     grid-template-columns: 100%;
 
-    > *:only-child {
+    > :only-child {
       grid-row-end: none;
     }
   }

package/src/components/DitoSchemaInlined.vue

@@ -82,17 +82,10 @@ export default DitoComponent.component('DitoSchemaInlined', {
   grid-template-rows: min-content;
   grid-template-columns: 100%;
 
-  > .dito-schema-content {
+  &:not(:hover, .dito-schema--open) {
     > .dito-schema-header {
-      justify-content: space-between;
-      position: relative;
-
-      .dito-label {
-        width: 100%;
-        margin: 0;
-        // Prevent collapsing to min-height when alone in
-        // .dito-schema-content, due to grid-template-rows: min-content
-        min-height: $input-height;
+      > .dito-clipboard {
+        display: none;
       }
     }
   }