@ditojs/admin 2.29.0 → 2.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.29.0",
+  "version": "2.30.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.29.0",
-    "@ditojs/utils": "^2.29.0",
+    "@ditojs/ui": "^2.30.0",
+    "@ditojs/utils": "^2.30.0",
     "@kyvg/vue3-notification": "^3.2.1",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.3.0",
@@ -67,23 +67,23 @@
     "sortablejs": "^1.15.2",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
-    "type-fest": "^4.15.0",
+    "type-fest": "^4.17.0",
     "vue": "3.4.10",
     "vue-multiselect": "^3.0.0",
     "vue-router": "^4.3.2",
     "vue-upload-component": "^3.1.15"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.29.0",
+    "@ditojs/build": "^2.30.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "3.4.23",
+    "@vue/compiler-sfc": "3.4.25",
     "pug": "^3.0.2",
     "sass": "1.75.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.10"
   },
   "types": "types",
-  "gitHead": "bdf4f66c3d6232f2322dacb088a0611f1e07dc7b",
+  "gitHead": "39fbb6da77e7d90265fce7cd7cd7e92b3b034803",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoContainer.vue

@@ -253,7 +253,7 @@ export default DitoComponent.component('DitoContainer', {
   max-width: 100%;
   // Cannot use margin here as it needs to be part of box-sizing for
   // percentages in flex-basis to work.
-  padding: $form-spacing-half;
+  padding: var(--container-padding);
 
   > .dito-label:only-child {
     // Used e.g. when sources hide themselves due to maxDepth, but the label
@@ -261,6 +261,10 @@ export default DitoComponent.component('DitoContainer', {
     display: none;
   }
 
+  &:empty {
+    padding: 0;
+  }
+
   .dito-pane > & {
     .dito-page--width-80 & {
       flex-grow: 1;
@@ -284,14 +288,8 @@ export default DitoComponent.component('DitoContainer', {
     }
   }
 
-  &:empty {
-    padding: 0;
-  }
-
   &--single {
     height: 100%; // So that list buttons can be sticky at the bottom;
-    // Just like on DitoPane, clear settings from above.
-    padding: 0;
   }
 
   &--label-vertical {

package/src/components/DitoPane.vue

@@ -241,6 +241,7 @@ export default DitoComponent.component('DitoPane', {
   $root-padding: $content-padding - $form-spacing-half;
 
   --pane-padding: 0px;
+  --container-padding: #{$form-spacing-half};
 
   display: flex;
   position: relative;
@@ -267,6 +268,7 @@ export default DitoComponent.component('DitoPane', {
 
     &#{$self}--single {
       --pane-padding: #{$content-padding};
+      --container-padding: 0px;
     }
 
     &:has(> .dito-container--label-vertical:first-of-type) {

package/src/mixins/TypeMixin.js

@@ -185,7 +185,7 @@ export default {
       }
 
       if (nativeField) {
-        attributes.name = this.name
+        attributes.name = this.dataPath
         if (this.label) {
           attributes.title = this.label
         }

package/src/types/DitoTypeColor.vue

@@ -34,8 +34,9 @@ Trigger.dito-color(
 <script>
 import tinycolor from 'tinycolor2'
 import { Sketch as SketchPicker } from '@lk77/vue3-color'
-import DitoTypeComponent from '../DitoTypeComponent.js'
+import { isObject } from '@ditojs/utils'
 import { Trigger } from '@ditojs/ui/src'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
 // @vue/component
@@ -45,61 +46,53 @@ export default DitoTypeComponent.register('color', {
   data() {
     return {
       showPopup: false,
-      convertedHexValue: null
+      convertedValue: null
     }
   },
 
   computed: {
+    canUpdateValue() {
+      return !this.focused || this.readonly
+    },
+
     colorValue: {
       get() {
-        return this.value || {}
+        return (
+          this.convertedValue ||
+          this.value ||
+          (this.colorFormat === 'hex' ? '' : {})
+        )
       },
 
       set(value) {
-        const format = this.colorFormat
-        const key = (
-          {
-            // NOTE: vue3-color calls it 'hex', while tinycolor calls it 'hex6'
-            hex: value?.a < 1 ? 'hex8' : 'hex',
-            rgb: 'rgba'
-          }[format] ||
-          format
-        )
-        if (key) {
-          this.value = value[key]
-        } else {
-          this.value = tinycolor(value).toString(format)
-        }
+        this.value = convertColor(value, this.colorFormat)
         this.onChange()
       }
     },
 
     hexValue: {
       get() {
-        if (this.value == null) {
-          // TODO: Fix side-effects
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.convertedHexValue = null
-        } else if (
-          !this.focused ||
-          this.$refs.element.hasAttribute('readonly')
-        ) {
-          const color = tinycolor(this.value)
-          if (color.isValid()) {
-            // TODO: Fix side-effects
-            // eslint-disable-next-line max-len
-            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-            this.convertedHexValue = color
+        const color = tinycolor(this.value)
+        return color.isValid()
+          ? color
               .toString(color.getAlpha() < 1 ? 'hex8' : 'hex6')
               .slice(1)
               .toUpperCase()
-          }
-        }
-        return this.convertedHexValue
+          : null
       },
 
       set(value) {
-        this.convertedHexValue = value
+        const color = tinycolor(value)
+        if (color.isValid()) {
+          const convertedValue = convertColor(value, this.colorFormat)
+          if (this.canUpdateValue) {
+            this.value = convertedValue
+          } else {
+            // Store to change later, once `canUpdateValue` is true again.
+            // See `watch` below.
+            this.convertedValue = convertedValue
+          }
+        }
       }
     },
 
@@ -144,8 +137,59 @@ export default DitoTypeComponent.register('color', {
         '#00000000'
       ]
     })
-  }
+  },
+
+  watch: {
+    canUpdateValue(canUpdateValue) {
+      if (canUpdateValue && this.convertedValue !== null) {
+        this.value = this.convertedValue
+        this.convertedValue = null
+      }
+    }
+  },
+
+  methods: {}
 })
+
+function convertColor(color, format) {
+  return isObject(color) // a vue3-color color object
+    ? color[
+        {
+          hex: color?.a < 1 ? 'hex8' : 'hex',
+          rgb: 'rgba'
+        }[format] ||
+        format
+      ]
+    : toColorFormat(tinycolor(color), format)
+}
+
+// This should really be in tinycolor, but it only has the string equivalent
+// of it.
+function toColorFormat(color, format) {
+  switch (format) {
+    case 'rgb':
+      return color.toRgb()
+    case 'prgb':
+      return color.toPercentageRgb()
+    case 'hex':
+    case 'hex6':
+      return color.toHex()
+    case 'hex3':
+      return color.toHex(true)
+    case 'hex4':
+      return color.toHex8(true)
+    case 'hex8':
+      return color.toHex8()
+    case 'name':
+      return color.toName()
+    case 'hsl':
+      return color.toHsl()
+    case 'hsv':
+      return color.toHsv()
+    default:
+      return color.toHex()
+  }
+}
 </script>
 
 <style lang="scss">