@ditojs/admin 2.5.0 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "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,7 +33,7 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.5.0",
+    "@ditojs/ui": "^2.5.2",
     "@ditojs/utils": "^2.5.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -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,7 +67,7 @@
     "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",
@@ -75,15 +75,15 @@
   },
   "devDependencies": {
     "@ditojs/build": "^2.5.0",
-    "@vitejs/plugin-vue": "^4.1.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": "1339a92f8adbfabee89d516ccfca84e13b48833b",
+  "gitHead": "8c5737b77ba43617cd95ba65fbabcdc2941542a8",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

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

@@ -249,22 +249,16 @@ export default {
 
     // @overridable
     focusElement() {
-      const { element = this } = this.$refs
-      if (element.focus) {
-        element.focus()
-      } else {
-        element.$el?.focus?.()
-      }
+      let { element = this } = this.$refs
+      element = element.focus ? element : element.$el
+      element?.focus?.()
     },
 
     // @overridable
     blurElement() {
-      const { element = this } = this.$refs
-      if (element.blur) {
-        element.blur()
-      } else {
-        element.$el?.blur?.()
-      }
+      let { element = this } = this.$refs
+      element = element.blur ? element : element.$el
+      element?.blur?.()
     },
 
     async focusSchema() {

package/src/styles/_button.scss

@@ -191,17 +191,13 @@
   cursor: pointer;
 
   &.dito-button-clear {
-    $self: &;
-
     width: 2em;
     z-index: 1;
     background: $color-white;
     display: none;
 
-    @at-root .dito-component:hover {
-      & :not(.dito-component) #{$self} {
-        display: block;
-      }
+    @at-root .dito-component:hover:not(:has(.dito-component)) & {
+      display: block;
     }
 
     &::before {

package/src/types/DitoTypeColor.vue

@@ -143,19 +143,6 @@ export default DitoTypeComponent.register('color', {
         '#00000000'
       ]
     })
-  },
-
-  watch: {
-    focused(focused) {
-      if (!focused && this.convertedHexValue) {
-        const color = tinycolor(`#${this.convertedHexValue}`)
-        if (color?.isValid()) {
-          this.value = color.toString(this.colorFormat)
-          // TODO: Emit 'input' here instead, and 'change' in blur, like others.
-          this.onChange()
-        }
-      }
-    }
   }
 })
 </script>

package/src/types/DitoTypeDate.vue

@@ -22,7 +22,7 @@
 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'],
@@ -53,16 +53,11 @@ export default DitoTypeComponent.register(
         type: Object,
         default: null,
         get(formats) {
-          return formats
-            ? {
-                date: ['date', 'datetime'].includes(this.type)
-                  ? formats.date
-                  : null,
-                time: ['time', 'datetime'].includes(this.type)
-                  ? formats.time
-                  : null
-              }
-            : undefined
+          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/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
     }
   }
 }