@ditojs/admin 2.4.3 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.4.3",
+  "version": "2.5.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.4.1",
-    "@ditojs/utils": "^2.4.1",
+    "@ditojs/ui": "^2.5.1",
+    "@ditojs/utils": "^2.5.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
@@ -58,7 +58,7 @@
     "@tiptap/extension-underline": "^2.0.3",
     "@tiptap/pm": "^2.0.3",
     "@tiptap/vue-3": "^2.0.3",
-    "@vueuse/integrations": "^10.0.2",
+    "@vueuse/integrations": "^10.1.2",
     "codeflask": "^1.4.1",
     "filesize": "^10.0.7",
     "filesize-parser": "^1.5.0",
@@ -67,23 +67,23 @@
     "sortablejs": "^1.15.0",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
-    "type-fest": "^3.8.0",
+    "type-fest": "^3.9.0",
     "vue": "^3.2.47",
     "vue-multiselect": "^3.0.0-beta.1",
     "vue-router": "^4.1.6",
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.4.1",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@ditojs/build": "^2.5.0",
+    "@vitejs/plugin-vue": "^4.2.1",
     "@vue/compiler-sfc": "^3.2.47",
     "pug": "^3.0.2",
-    "sass": "1.62.0",
+    "sass": "1.62.1",
     "typescript": "^5.0.4",
-    "vite": "^4.3.1"
+    "vite": "^4.3.4"
   },
   "types": "types",
-  "gitHead": "fa8525e80d6cce3844fb8c62d665c60761a564b1",
+  "gitHead": "18658b99dbb5f508c9d76811194831fb243f66ad",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoButtons.vue

@@ -29,7 +29,7 @@
 <script>
 import DitoComponent from '../DitoComponent.js'
 import { appendDataPath } from '../utils/data.js'
-import { hasSlotContent, hasVNodeContent } from '../utils/vue.js'
+import { hasSlotContent, hasVNodeContent } from '@ditojs/ui/src'
 
 // @vue/component
 export default DitoComponent.component('DitoButtons', {

package/src/components/DitoContainer.vue

@@ -273,6 +273,8 @@ export default DitoComponent.component('DitoContainer', {
 // NOTE: This is not nested inside `.dito-container` so that other
 // type components can override `.dito-width-fill` class (filter precedence).
 .dito-component {
+  position: relative;
+
   &.dito-width-fill {
     width: 100%;
 

package/src/components/DitoSchema.vue

@@ -113,7 +113,8 @@ import {
   getNamedSchemas,
   getPanelEntries,
   setDefaultValues,
-  processData
+  processData,
+  isForm
 } from '../utils/schema.js'
 import { getStoreAccessor } from '../utils/accessor.js'
 
@@ -159,6 +160,7 @@ export default DitoComponent.component('DitoSchema', {
           ? data(this.context)
           : data
       ),
+      currentPath: null,
       currentTab: null,
       componentsRegistry: {},
       panesRegistry: {},
@@ -339,7 +341,20 @@ export default DitoComponent.component('DitoSchema', {
     '$route.hash': {
       immediate: true,
       handler(hash) {
-        if (this.hasTabs) {
+        // Remember the current path to know if tab changes should still be
+        // handled, but remove the trailing `/create` or `/:id` from it so that
+        // tabs informs that stay open after creation still work.
+        const getPath = () =>
+          isForm(this.schema)
+            ? this.$route.path.replace(/\/.\w*$/, '')
+            : this.$route.path
+        if (
+          this.hasTabs && (
+            !this.currentPath ||
+            this.currentPath === getPath()
+          )
+        ) {
+          this.currentPath = getPath()
           this.currentTab = hash?.slice(1) || null
           if (this.hasErrors) {
             this.repositionErrors()

package/src/mixins/SourceMixin.js

@@ -559,7 +559,13 @@ export default {
     const inlined = isInlined(schema)
     if (inlined && schema.resource) {
       throw new Error(
-        'Lists with nested forms cannot load data from their own resources'
+        `Nested ${
+          this.isListSource
+            ? 'lists'
+            : this.isObjectSource
+              ? 'objects'
+              : 'schema'
+        } cannot load data from their own resources`
       )
     }
     // Use differently named url parameters on each nested level for id as

package/src/mixins/TypeMixin.js

@@ -248,10 +248,23 @@ export default {
     },
 
     // @overridable
-    async focusElement() {
-      await this.focusSchema()
+    focusElement() {
+      const { element = this } = this.$refs
+      if (element.focus) {
+        element.focus()
+      } else {
+        element.$el?.focus?.()
+      }
+    },
+
+    // @overridable
+    blurElement() {
       const { element = this } = this.$refs
-      ;(element.$el || element).focus?.()
+      if (element.blur) {
+        element.blur()
+      } else {
+        element.$el?.blur?.()
+      }
     },
 
     async focusSchema() {
@@ -260,14 +273,20 @@ export default {
       await this.tabComponent?.focus()
     },
 
-    focus() {
+    async focus() {
+      await this.focusSchema()
       this.scrollIntoView()
       this.focusElement()
     },
 
+    blur() {
+      this.blurElement()
+    },
+
     clear() {
       this.value = null
       this.changedValue = undefined
+      this.blur()
       this.onChange()
     },
 

package/src/styles/_button.scss

@@ -183,28 +183,21 @@
 
 .dito-button-overlay {
   position: absolute;
-  right: $border-width;
-  top: $border-width;
-  bottom: $border-width;
+  inset: $border-width;
+  left: unset;
+  padding: 0;
   border: 0;
   border-radius: $border-radius;
   cursor: pointer;
 
   &.dito-button-clear {
-    $self: &;
-
-    width: $input-height;
+    width: 2em;
     z-index: 1;
     background: $color-white;
     display: none;
 
-    @at-root .dito-component:hover {
-      // Support two levels of nesting inside .dito-component, used by TypeColor
-      & > #{$self},
-      & > * > #{$self},
-      & > * > * > #{$self} {
-        display: block;
-      }
+    @at-root .dito-component:hover:not(:has(.dito-component)) & {
+      display: block;
     }
 
     &::before {

package/src/types/DitoTypeButton.vue

@@ -105,13 +105,6 @@ export default DitoTypeComponent.register(
 
     span {
       @include ellipsis;
-
-      #{$self}:not(.dito-width-grow) & {
-        // Use `position: absolute` to prevent the text from growing over the
-        // button's width, which would cause the button to grow as well.
-        position: absolute;
-        inset: 0;
-      }
     }
   }
 }

package/src/types/DitoTypeCode.vue

@@ -94,6 +94,10 @@ export default DitoTypeComponent.register('code', {
   methods: {
     focusElement() {
       this.$el.querySelector('textarea')?.focus()
+    },
+
+    blurElement() {
+      this.$el.querySelector('textarea')?.focus()
     }
   }
 })

package/src/types/DitoTypeColor.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 Trigger.dito-color(
   v-model:show="showPopup"
-  trigger="click"
+  trigger="focus"
 )
   template(#trigger)
     .dito-input(:class="{ 'dito-focus': showPopup }")
@@ -80,7 +80,10 @@ export default DitoTypeComponent.register('color', {
           // TODO: Fix side-effects
           // eslint-disable-next-line vue/no-side-effects-in-computed-properties
           this.convertedHexValue = null
-        } else if (!this.focused) {
+        } else if (
+          !this.focused ||
+          this.$refs.element.hasAttribute('readonly')
+        ) {
           const color = tinycolor(this.value)
           if (color.isValid()) {
             // TODO: Fix side-effects

package/src/types/DitoTypeDate.vue

@@ -6,16 +6,23 @@
     ref="element"
     v-model="dateValue"
     :locale="locale"
-    :dateFormat="{ ...api.formats.date, ...dateFormat }"
+    :format="formats"
     v-bind="attributes"
   )
+    template(#after)
+      button.dito-button-clear.dito-button-overlay(
+        v-if="showClearButton"
+        :disabled="disabled"
+        @click.stop="clear"
+        @mousedown.stop
+      )
 </template>
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { DatePicker, TimePicker, DateTimePicker } from '@ditojs/ui/src'
-import { isDate } from '@ditojs/utils'
+import { isDate, merge } from '@ditojs/utils'
 
 export default DitoTypeComponent.register(
   ['date', 'datetime', 'time'],
@@ -40,9 +47,18 @@ export default DitoTypeComponent.register(
         }
       },
 
-      dateFormat: getSchemaAccessor('dateFormat', {
+      // TODO: Rename to `format`, once `schema.format()` was removed to
+      // `formatValue()`.
+      formats: getSchemaAccessor('formats', {
         type: Object,
-        default: null
+        default: null,
+        get(formats) {
+          const { date, time } = merge({}, this.api.formats, formats)
+          return {
+            date: ['date', 'datetime'].includes(this.type) ? date : null,
+            time: ['time', 'datetime'].includes(this.type) ? time : null
+          }
+        }
       })
     },
 

package/src/types/DitoTypeMarkup.vue

@@ -66,14 +66,7 @@ import { ListItem } from '@tiptap/extension-list-item'
 import { History } from '@tiptap/extension-history'
 
 import { Icon } from '@ditojs/ui/src'
-import {
-  isArray,
-  isObject,
-  underscore,
-  hyphenate,
-  debounce,
-  camelize
-} from '@ditojs/utils'
+import { isArray, isObject, hyphenate, debounce, camelize } from '@ditojs/utils'
 
 // @vue/component
 export default DitoTypeComponent.register('markup', {
@@ -120,10 +113,7 @@ export default DitoTypeComponent.register('markup', {
     basicNodeButtons() {
       return this.getButtons('nodes', {
         paragraph: {
-          // Do not show the paragraph command as active if any of the block
-          // commands are also active:
-          ignoreActive: () =>
-            this.otherNodeButtons.some(button => button.isActive)
+          command: 'setParagraph'
         },
         heading: {
           attribute: 'level',
@@ -132,7 +122,7 @@ export default DitoTypeComponent.register('markup', {
       })
     },
 
-    otherNodeButtons() {
+    advancedNodeButtons() {
       return this.getButtons('nodes', {
         bulletList: true,
         orderedList: true,
@@ -149,17 +139,11 @@ export default DitoTypeComponent.register('markup', {
     },
 
     groupedButtons() {
-      const {
-        markButtons,
-        basicNodeButtons,
-        otherNodeButtons,
-        toolButtons
-      } = this
       return [
-        markButtons,
-        basicNodeButtons,
-        otherNodeButtons,
-        toolButtons
+        this.markButtons,
+        this.basicNodeButtons,
+        this.advancedNodeButtons,
+        this.toolButtons
       ].filter(buttons => buttons.length > 0)
     },
 
@@ -381,25 +365,22 @@ export default DitoTypeComponent.register('markup', {
       const list = []
       const { commands } = this.editor
 
-      const addButton = ({ name, icon, attributes, ignoreActive, onClick }) => {
+      const addButton = ({ name, icon, command, attributes, onClick }) => {
         list.push({
           name,
           icon,
-          isActive: (
-            this.editor.isActive(name, attributes) &&
-            (ignoreActive == null || !ignoreActive())
-          ),
+          isActive: this.editor.isActive(name, attributes),
           onClick: () => {
-            const key =
+            command ??=
               name in commands
                 ? name
                 : `toggle${camelize(name, true)}`
-            if (key in commands) {
-              const command = attributes =>
-                this.editor.chain()[key](attributes).focus().run()
+            if (command in commands) {
+              const apply = attributes =>
+                this.editor.chain()[command](attributes).focus().run()
               onClick
                 ? onClick(this.editor, attributes)
-                : command(attributes)
+                : apply(attributes)
             }
           }
         })
@@ -407,16 +388,15 @@ export default DitoTypeComponent.register('markup', {
 
       const settings = this.schema[settingsName]
       if (settings) {
-        for (const [key, description] of Object.entries(descriptions)) {
-          const settingName = ['undo', 'redo'].includes(key) ? 'history' : key
+        for (const [name, description] of Object.entries(descriptions)) {
+          const settingName = ['undo', 'redo'].includes(name) ? 'history' : name
           const setting = settings[settingName]
-          const name = underscore(key)
-          const icon = hyphenate(key)
+          const icon = hyphenate(name)
           if (setting) {
             if (description === true) {
               addButton({ name, icon })
             } else if (isObject(description)) {
-              const { attribute, values, ignoreActive, onClick } = description
+              const { command, attribute, values, onClick } = description
               if (attribute) {
                 if (isArray(values) && isArray(setting)) {
                   // Support heading level attrs:
@@ -425,15 +405,15 @@ export default DitoTypeComponent.register('markup', {
                       addButton({
                         name,
                         icon: `${icon}-${value}`,
+                        command,
                         attributes: { [attribute]: value },
-                        ignoreActive,
                         onClick
                       })
                     }
                   }
                 }
               } else {
-                addButton({ name, icon, ignoreActive, onClick })
+                addButton({ name, icon, command, onClick })
               }
             }
           }
@@ -443,7 +423,11 @@ export default DitoTypeComponent.register('markup', {
     },
 
     focusElement() {
-      this.editor.focus()
+      this.editor.commands.focus()
+    },
+
+    blurElement() {
+      this.editor.commands.blur()
     }
   }
 })

package/src/types/DitoTypeMultiselect.vue

@@ -174,6 +174,10 @@ export default DitoTypeComponent.register('multiselect', {
       this.$refs.element.activate()
     },
 
+    blurElement() {
+      this.$refs.element.deactivate()
+    },
+
     onOpen() {
       this.populate = true
     },
@@ -257,10 +261,6 @@ $tag-line-height: 1em;
     margin-left: $form-spacing-half;
   }
 
-  .dito-button-clear {
-    width: $spinner-width;
-  }
-
   .multiselect {
     $self: last-selector(&);
 

package/src/utils/filter.js

@@ -43,25 +43,22 @@ export const filterComponents = {
   },
 
   'date-range'() {
-    // Use shorter date format in date-range filters:
-    const dateFormat = {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric'
+    const datetime = {
+      type: 'datetime',
+      width: '1/2',
+      formats: {
+        // Use shorter date format in date-range filters:
+        date: {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric'
+        }
+      },
+      clearable: true
     }
     return {
-      from: {
-        type: 'datetime',
-        width: '1/2',
-        dateFormat,
-        clearable: true
-      },
-      to: {
-        type: 'datetime',
-        width: '1/2',
-        dateFormat,
-        clearable: true
-      }
+      from: datetime,
+      to: datetime
     }
   }
 }

package/src/verbs.js

@@ -1,10 +1,12 @@
 export default [
   'create', 'created',
   'save', 'saved',
+  'apply', 'applied',
   'submit', 'submitted',
   'delete', 'deleted',
-  'edit', 'edited',
+  'remove', 'removed',
   'clear', 'cleared',
+  'edit', 'edited',
   'close', 'closed',
   'cancel', 'cancelled',
   'drag', 'dragged',

package/src/utils/vue.js

@@ -1,11 +0,0 @@
-import { useSlots, Comment } from 'vue'
-import { isString, asArray } from '@ditojs/utils'
-
-export function hasVNodeContent(vnode) {
-  return vnode && asArray(vnode).some(vnode => vnode.type !== Comment)
-}
-
-export function hasSlotContent(slot, props = {}) {
-  slot = isString(slot) ? useSlots()[slot] : slot
-  return hasVNodeContent(slot?.(props))
-}