@ditojs/admin 2.8.2 → 2.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.8.2",
+  "version": "2.9.1",
   "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": "d9a0905b7c93d509a3710b36c749cc6e651401d3",
+  "gitHead": "002f3c713f9d3b10e348d2e9fd07d3a5bea426e6",
   "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,38 +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
     }
   },
 
   watch: {
-    'appState.clipboardData': 'checkClipboard'
+    'parentComponent.hasData': {
+      // Check right away also in case there's already data (e.g. create form).
+      immediate: true,
+      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.checkClipboard
-    })
-    this.domOn(window, {
-      focus: this.checkClipboard
-    })
-    this.$watch('data', {
-      // Check right away also in case there's already data (e.g. create form).
-      immediate: true,
-      handler: (to, from) => {
-        if (to !== from) {
-          this.checkClipboard()
-        }
-      }
-    })
+    this.domOn(document, { copy: this.updatePaste })
+    this.domOn(window, { focus: this.updatePaste })
   },
 
   methods: {
@@ -103,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)
         }
@@ -124,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)
         }
@@ -155,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

@@ -16,12 +16,13 @@ component(
 </template>
 
 <script>
-import { addEvents } from '@ditojs/ui'
 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'],
 
@@ -53,8 +54,8 @@ export default DitoComponent.component('DitoDraggable', {
 
   methods: {
     onStart(event) {
-      this.isDragging = true
       this.options.onStart?.(event)
+      this.isDragging = true
       this.mouseEvents?.remove()
     },
 
@@ -62,7 +63,7 @@ export default DitoComponent.component('DitoDraggable', {
       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 = addEvents(this.$el, {
+      this.mouseEvents = this.domOn(document, {
         mousedown: this.onMouse,
         mousemove: this.onMouse,
         mouseleave: this.onMouse
@@ -71,7 +72,7 @@ export default DitoComponent.component('DitoDraggable', {
 
     onMouse() {
       this.isDragging = false
-      this.mouseEvents.remove()
+      this.mouseEvents?.remove()
       this.mouseEvents = null
     }
   }
@@ -83,16 +84,18 @@ export default DitoComponent.component('DitoDraggable', {
 
 .dito-draggable {
   // Overlay a hover catcher while we're dragging to prevent hover states from
-  // getting stuck / confused.
-  &:has(&__chosen),
-  &--dragging {
-    > * {
-      position: relative;
+  // 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;
+        > :first-child::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+        }
       }
     }
   }

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"
       )
@@ -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)
       }
     },
 

package/src/components/DitoSidebar.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-aside.dito-sidebar.dito-scroll-parent
+aside.dito-sidebar.dito-scroll-parent(
+  v-resize="onResizeSidebar"
+  :class="classes"
+)
   nav.dito-header
     slot
   .dito-sidebar__teleport.dito-scroll
@@ -9,7 +12,31 @@ aside.dito-sidebar.dito-scroll-parent
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('DitoSidebar', {})
+export default DitoComponent.component('DitoSidebar', {
+  data() {
+    return {
+      sidebarWidth: 0
+    }
+  },
+
+  computed: {
+    classes() {
+      const prefix = 'dito-sidebar'
+      // NOTE: Keep synced with $sidebar-max-width in SCSS:
+      const sidebarWidth = 360
+      return {
+        [`${prefix}--width-99`]: this.sidebarWidth < sidebarWidth,
+        [`${prefix}--width-60`]: this.sidebarWidth <= sidebarWidth * 0.6
+      }
+    }
+  },
+
+  methods: {
+    onResizeSidebar({ contentRect: { width } }) {
+      this.sidebarWidth = width
+    }
+  }
+})
 </script>
 
 <style lang="scss">
@@ -19,7 +46,5 @@ export default DitoComponent.component('DitoSidebar', {})
   flex: 0 1 $sidebar-max-width;
   max-width: $sidebar-max-width;
   min-width: $sidebar-min-width;
-  // For the `@container` rule in `.dito-container` to work:
-  container-type: inline-size;
 }
 </style>

package/src/components/DitoUploadFile.vue

@@ -51,7 +51,7 @@ export default DitoComponent.component('DitoUploadFile', {
     'file.upload.file': {
       immediate: true,
       handler(file) {
-        if (file && this.thumbnail) {
+        if (this.thumbnail && file?.type.startsWith('image/')) {
           const reader = new FileReader()
           reader.onload = () => {
             this.uploadUrl = reader.result

package/src/mixins/DitoMixin.js

@@ -39,13 +39,14 @@ export default {
   ],
 
   provide() {
+    const self = () => this
     return this.providesData
       ? {
-          $parentComponent: () => this,
-          $dataComponent: () => this
+          $parentComponent: self,
+          $dataComponent: self
         }
       : {
-          $parentComponent: () => this
+          $parentComponent: self
         }
   },
 

package/src/types/DitoTypeCheckbox.vue

@@ -1,11 +1,12 @@
 <template lang="pug">
-input.dito-checkbox(
-  :id="dataPath"
-  ref="element"
-  v-model="value"
-  type="checkbox"
-  v-bind="attributes"
-)
+.dito-checkbox
+  input(
+    :id="dataPath"
+    ref="element"
+    v-model="value"
+    type="checkbox"
+    v-bind="attributes"
+  )
 </template>
 
 <script>