@ditojs/admin 2.2.16 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.16",
+  "version": "2.3.0",
   "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.2.14",
-    "@ditojs/utils": "^2.2.0",
+    "@ditojs/ui": "^2.3.0",
+    "@ditojs/utils": "^2.3.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.2.3",
+    "@ditojs/build": "^2.3.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.47",
     "pug": "^3.0.2",
@@ -83,7 +83,7 @@
     "vite": "^4.3.1"
   },
   "types": "types",
-  "gitHead": "722b79d58335e249802d250fca9d250bad511b8c",
+  "gitHead": "81398b333e755f30b2c3c1998c8879a3e87f7873",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoContainer.vue

@@ -131,6 +131,32 @@ export default DitoComponent.component('DitoContainer', {
       }
     }),
 
+    flexGrow() {
+      // Interpret '>50%' as '50%, flex-grow: 1`
+      return (
+        this.widthOperator === '>' ||
+        this.width === 'fill'
+      )
+    },
+
+    flexShrink() {
+      // Interpret '<50%' as '50%, flex-shrink: 1`
+      return this.widthOperator === '<'
+    },
+
+    flexBasis() {
+      const width = this.width
+      // 'auto' = no fitting:
+      const basis = [null, 'auto', 'fill'].includes(width)
+        ? 'auto'
+        : /%$/.test(width)
+          ? parseFloat(width) // percentage
+          : /[a-z]/.test(width)
+            ? width // native units
+            : parseFraction(width) * 100 // fraction
+      return isNumber(basis) ? `${basis}%` : basis
+    },
+
     containerClass() {
       const { class: containerClass } = this.schema
       const prefix = 'dito-container'
@@ -150,39 +176,27 @@ export default DitoComponent.component('DitoContainer', {
       }
     },
 
-    componentBasis() {
-      const width = this.width
-      // 'auto' = no fitting:
-      const basis = [null, 'auto', 'fill'].includes(width)
-        ? 'auto'
-        : /%$/.test(width)
-          ? parseFloat(width) // percentage
-          : /[a-z]/.test(width)
-            ? width // native units
-            : parseFraction(width) * 100 // fraction
-      return isNumber(basis) ? `${basis}%` : basis
-    },
-
     containerStyle() {
-      // Interpret '>50%' as '50%, flex-grow: 1`
-      const grow = (
-        this.widthOperator === '>' ||
-        this.width === 'fill'
-      )
-      // Interpret '<50%' as '50%, flex-shrink: 1`
-      const shrink = this.widthOperator === '<'
       return {
-        flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} ${this.componentBasis}`
+        flex: `${
+          this.flexGrow ? 1 : 0
+        } ${
+          this.flexShrink ? 1 : 0
+        } ${
+          this.flexBasis
+        }`
       }
     },
 
     componentClass() {
-      const basisIsAuto = this.componentBasis === 'auto'
+      const basisIsAuto = this.flexBasis === 'auto'
       return {
         // TODO: BEM?
         'dito-single': this.single,
         'dito-disabled': this.componentDisabled,
         'dito-width-fill': !basisIsAuto || this.width === 'fill',
+        'dito-width-grow': this.flexGrow,
+        'dito-width-shrink': this.flexShrink,
         'dito-has-errors': !!this.errors
       }
     }

package/src/components/DitoLabel.vue

@@ -28,8 +28,7 @@ component.dito-label(
     )
     .dito-info(
       v-if="info"
-      :data-tippy-content="info"
-      data-tippy-theme="info"
+      :data-info="info"
     )
   slot(name="edit-buttons")
 </template>
@@ -118,8 +117,11 @@ export default DitoComponent.component('DitoLabel', {
   .dito-label-suffix {
     @include user-select(none);
     @include ellipsis;
+  }
 
-    &::after {
+  .dito-label-prefix + label,
+  label + .dito-label-suffix {
+    &::before {
       content: '\a0'; // &nbsp;
     }
   }

package/src/components/DitoRoot.vue

@@ -92,7 +92,16 @@ export default DitoComponent.component('DitoRoot', {
 
   async mounted() {
     tippyDelegate(this.$el, {
-      target: '[data-tippy-content]'
+      target: '.dito-info',
+      onCreate(instance) {
+        instance.setContent(instance.reference.dataset.info)
+        instance.setProps({
+          theme: 'info',
+          interactive: true,
+          animation: 'shift-away-subtle',
+          delay: 250
+        })
+      }
     })
     // Clear the label marked as active on all mouse and keyboard events, except
     // the ones that DitoLabel itself intercepts.

package/src/mixins/OptionsMixin.js

@@ -227,7 +227,7 @@ export default {
       return isString(optionValue)
         ? option?.[optionValue]
         : isFunction(optionValue)
-          ? optionValue.call(this, new DitoContext(this, { option }))
+          ? optionValue(new DitoContext(this, { option }))
           : option
     },
 
@@ -236,7 +236,7 @@ export default {
       return isString(optionLabel)
         ? option?.[optionLabel]
         : isFunction(optionLabel)
-          ? optionLabel.call(this, new DitoContext(this, { option }))
+          ? optionLabel(new DitoContext(this, { option }))
           : labelize(`${option}`)
     }
   },

package/src/mixins/TypeMixin.js

@@ -55,19 +55,15 @@ export default {
           { component: this }
         )
         const { format } = this.schema
-        // `schema.format` is only ever called in the life-cycle
-        // of the component and thus it's ok to bind it to `this`
         return format
-          ? format.call(this, new DitoContext(this, { value }))
+          ? format(new DitoContext(this, { value }))
           : value
       },
 
       set(value) {
         const { parse } = this.schema
-        // `schema.parse` is only ever called in the life-cycle
-        // of the component and thus it's ok to bind it to `this`
         this.parsedValue = parse
-          ? parse.call(this, new DitoContext(this, { value }))
+          ? parse(new DitoContext(this, { value }))
           : value
         // eslint-disable-next-line vue/no-mutating-props
         this.data[this.name] = this.parsedValue

package/src/styles/_info.scss

@@ -1,3 +1,5 @@
+@import 'tippy.js/animations/shift-away-subtle.css';
+
 .dito-info {
   --size: calc(1em * var(--line-height));
 
@@ -21,6 +23,7 @@
 .tippy-box[data-theme~='info'] {
   background-color: $color-active;
   color: $color-white;
+  filter: drop-shadow(0 2px 4px $color-shadow);
 
   > .tippy-arrow::before {
     color: $color-active;

package/src/types/DitoTypeButton.vue

@@ -14,8 +14,7 @@ button.dito-button(
       span {{ text }}
     .dito-info(
       v-if="!label && info"
-      :data-tippy-content="info"
-      data-tippy-theme="info"
+      :data-info="info"
     )
   template(
     v-else
@@ -97,19 +96,26 @@ export default DitoTypeComponent.register(
 @import '../styles/_imports';
 
 .dito-button {
+  $self: &;
+
   display: flex;
+  align-items: center;
+  justify-content: center;
 
   &__text {
     position: relative;
-    width: 100%;
     min-width: min-content;
     height: calc(1em * var(--line-height));
 
     span {
       @include ellipsis;
 
-      position: absolute;
-      inset: 0;
+      #{$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;
+      }
     }
   }
 }