@ditojs/admin 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.0.2",
+  "version": "2.0.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,31 +33,31 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.0.1",
+    "@ditojs/ui": "^2.0.3",
     "@ditojs/utils": "^2.0.1",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
-    "@tiptap/core": "^2.0.1",
-    "@tiptap/extension-blockquote": "^2.0.1",
-    "@tiptap/extension-bold": "^2.0.1",
-    "@tiptap/extension-bullet-list": "^2.0.1",
-    "@tiptap/extension-code": "^2.0.1",
-    "@tiptap/extension-code-block": "^2.0.1",
-    "@tiptap/extension-document": "^2.0.1",
-    "@tiptap/extension-hard-break": "^2.0.1",
-    "@tiptap/extension-heading": "^2.0.1",
-    "@tiptap/extension-history": "^2.0.1",
-    "@tiptap/extension-horizontal-rule": "^2.0.1",
-    "@tiptap/extension-italic": "^2.0.1",
-    "@tiptap/extension-link": "^2.0.1",
-    "@tiptap/extension-list-item": "^2.0.1",
-    "@tiptap/extension-ordered-list": "^2.0.1",
-    "@tiptap/extension-paragraph": "^2.0.1",
-    "@tiptap/extension-strike": "^2.0.1",
-    "@tiptap/extension-text": "^2.0.1",
-    "@tiptap/extension-underline": "^2.0.1",
-    "@tiptap/pm": "^2.0.1",
-    "@tiptap/vue-3": "^2.0.1",
+    "@tiptap/core": "^2.0.2",
+    "@tiptap/extension-blockquote": "^2.0.2",
+    "@tiptap/extension-bold": "^2.0.2",
+    "@tiptap/extension-bullet-list": "^2.0.2",
+    "@tiptap/extension-code": "^2.0.2",
+    "@tiptap/extension-code-block": "^2.0.2",
+    "@tiptap/extension-document": "^2.0.2",
+    "@tiptap/extension-hard-break": "^2.0.2",
+    "@tiptap/extension-heading": "^2.0.2",
+    "@tiptap/extension-history": "^2.0.2",
+    "@tiptap/extension-horizontal-rule": "^2.0.2",
+    "@tiptap/extension-italic": "^2.0.2",
+    "@tiptap/extension-link": "^2.0.2",
+    "@tiptap/extension-list-item": "^2.0.2",
+    "@tiptap/extension-ordered-list": "^2.0.2",
+    "@tiptap/extension-paragraph": "^2.0.2",
+    "@tiptap/extension-strike": "^2.0.2",
+    "@tiptap/extension-text": "^2.0.2",
+    "@tiptap/extension-underline": "^2.0.2",
+    "@tiptap/pm": "^2.0.2",
+    "@tiptap/vue-3": "^2.0.2",
     "codeflask": "^1.4.1",
     "filesize": "^10.0.7",
     "filesize-parser": "^1.5.0",
@@ -80,7 +80,7 @@
     "vite": "^4.2.1"
   },
   "types": "types",
-  "gitHead": "3e7213fbe25c5697f4f11dada830037934e396c8",
+  "gitHead": "5ca73cc4cf410fbaa95a8e7079cb5c264cc67b7c",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoLabel.vue

@@ -52,7 +52,7 @@ component.dito-label(
         // so that buttons always appear right-aligned:
         flex: 1 1 auto
       &::after
-        content: '\a0' // &nbps;
+        content: '\a0' //  
 
     .dito-label-prefix,
     .dito-label-suffix
@@ -94,8 +94,9 @@ component.dito-label(
     > .dito-schema-content
       > .dito-pane
         > .dito-container
-          > .dito-label:not(.dito-label-component)
-            display: inline-block
+          display: flex
+          flex-flow: row wrap
+          align-items: baseline
 </style>
 
 <script>
@@ -130,11 +131,7 @@ export default DitoComponent.component('dito-label', {
     },
 
     attributes() {
-      return {
-        ...(this.collapsible && {
-          onClick: this.onClick
-        })
-      }
+      return this.collapsible ? { onClick: this.onClick } : {}
     },
 
     isActive() {

package/src/mixins/TypeMixin.js

@@ -3,7 +3,7 @@ import ValidationMixin from './ValidationMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { computeValue } from '../utils/schema.js'
 import { getItem, getParentItem } from '../utils/data.js'
-import { isString, asArray, camelize } from '@ditojs/utils'
+import { isString, asArray } from '@ditojs/utils'
 
 // @vue/component
 export default {
@@ -156,10 +156,17 @@ export default {
       type: String
     }),
 
+    // @overridable
+    events() {
+      const { onFocus, onBlur, onInput, onChange } = this
+      return { onFocus, onBlur, onInput, onChange }
+    },
+
     attributes() {
       const { nativeField, textField } = this.$options
 
       const attributes = {
+        ...this.events,
         disabled: this.disabled
       }
 
@@ -176,25 +183,7 @@ export default {
         }
       }
 
-      return {
-        ...Object.fromEntries(
-          Object.entries(this.$attrs).filter(([key]) => key.startsWith('on'))
-        ),
-        ...this.events,
-        ...attributes
-      }
-    },
-
-    events() {
-      const events = this.getEvents()
-      // Register callbacks for all provides non-recognized events,
-      // assuming they are native events.
-      // TODO: Move to vue3-style `on[A-Z]` event handlers naming that aren't
-      // namespaced in `schema.events` once the transition is complete.
-      for (const event of Object.keys(this.schema.events || {})) {
-        events[`on${camelize(event, true)}`] ||= () => this.emitEvent(event)
-      }
-      return events
+      return attributes
     },
 
     validations() {
@@ -235,12 +224,6 @@ export default {
       }
     },
 
-    // @overridable
-    getEvents() {
-      const { onFocus, onBlur, onInput, onChange } = this
-      return { onFocus, onBlur, onInput, onChange }
-    },
-
     // @overridable
     getValidations() {
       return null

package/src/types/TypeButton.vue

@@ -41,16 +41,17 @@ export default TypeComponent.register([
     closeForm: getSchemaAccessor('closeForm', {
       type: Boolean,
       default: false
-    })
-  },
+    }),
 
-  methods: {
     // @override
-    getEvents() {
+    events() {
       const { onFocus, onBlur, onClick } = this
       return { onFocus, onBlur, onClick }
-    },
+    }
+
+  },
 
+  methods: {
     async submit(options) {
       return this.resourceComponent?.submit(this, options)
     },

package/src/types/TypeMultiselect.vue

@@ -7,8 +7,6 @@
 )
   vue-multiselect(
     ref="element"
-    v-model="selectedOptions"
-    v-bind="attributes"
     :show-labels="false"
     :placeholder="placeholder"
     tag-placeholder="Press enter to add new tag",
@@ -25,9 +23,12 @@
     :clear-on-select="!searchFilter"
     :close-on-select="!stayOpen"
     :loading="isLoading"
-    @open="populate = true"
+    @open="onOpen"
+    @close="onClose"
     @tag="onAddTag"
     @search-change="onSearchChange"
+    v-model="selectedOptions"
+    v-bind="attributes"
   )
   button.dito-button-clear.dito-button-overlay(
     type="button"
@@ -224,6 +225,7 @@
 <script>
 import TypeComponent from '../TypeComponent.js'
 import DitoContext from '../DitoContext.js'
+import TypeMixin from '../mixins/TypeMixin.js'
 import OptionsMixin from '../mixins/OptionsMixin.js'
 import VueMultiselect from 'vue-multiselect'
 import { getSchemaAccessor } from '../utils/accessor.js'
@@ -329,6 +331,24 @@ export default TypeComponent.register('multiselect', {
       this.$refs.element.activate()
     },
 
+    onOpen() {
+      this.populate = true
+    },
+
+    onClose() {
+      // Since we don't fire blur events while the multiselect is open (see
+      // below), we need to do it here, when it's actually closed.
+      if (this.focused) {
+        this.onBlur()
+      }
+    },
+
+    onBlur() {
+      if (!this.$refs.element.isOpen) {
+        TypeMixin.methods.onBlur.call(this)
+      }
+    },
+
     onAddTag(tag) {
       const option = this.addTagOption(tag)
       if (option) {

package/src/types/TypeSwitch.vue

@@ -2,7 +2,6 @@
 switch-button.dito-switch(
   ref="element"
   :id="dataPath"
-  :sync="true"
   :labels="labels"
   v-model="value"
   v-bind="attributes"