@ditojs/admin 2.2.13 → 2.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.13",
+  "version": "2.2.14",
   "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.2.10",
+    "@ditojs/ui": "^2.2.14",
     "@ditojs/utils": "^2.2.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -66,6 +66,7 @@
     "nanoid": "^4.0.2",
     "sortablejs": "^1.15.0",
     "tinycolor2": "^1.6.0",
+    "tippy.js": "^6.3.7",
     "type-fest": "^3.8.0",
     "vue": "^3.2.47",
     "vue-multiselect": "^3.0.0-beta.1",
@@ -82,7 +83,7 @@
     "vite": "^4.3.1"
   },
   "types": "types",
-  "gitHead": "cb2613f69dcb1837db22d95c736ea2d414326f5c",
+  "gitHead": "71b48376ab32cc6ef6cd77bc565501ac264683d7",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoContainer.vue

@@ -6,21 +6,24 @@
 )
   DitoLabel(
     v-if="hasLabel"
+    :class="componentClass"
     :label="label"
     :dataPath="labelDataPath"
-    :class="componentClass"
+    :info="info"
   )
   component.dito-component(
     :is="typeComponent"
+    :class="componentClass"
     :schema="schema"
     :dataPath="dataPath"
     :data="data"
     :meta="meta"
     :store="store"
+    :width="width"
+    :label="label"
     :single="single"
     :nested="nested"
     :disabled="componentDisabled"
-    :class="componentClass"
     @errors="onErrors"
   )
   DitoErrors(:errors="errors")
@@ -84,7 +87,12 @@ export default DitoComponent.component('DitoContainer', {
       return this.nested ? this.dataPath : null
     },
 
-    componentWidth: getSchemaAccessor('width', {
+    info: getSchemaAccessor('info', {
+      type: String,
+      default: null
+    }),
+
+    width: getSchemaAccessor('width', {
       type: [String, Number],
       default() {
         return this.typeComponent?.defaultWidth
@@ -99,7 +107,7 @@ export default DitoComponent.component('DitoContainer', {
       }
     }),
 
-    componentWidthOperator: getSchemaAccessor('width', {
+    widthOperator: getSchemaAccessor('width', {
       type: String,
       get(width) {
         return isString(width)
@@ -143,7 +151,7 @@ export default DitoComponent.component('DitoContainer', {
     },
 
     componentBasis() {
-      const width = this.componentWidth
+      const width = this.width
       // 'auto' = no fitting:
       const basis = [null, 'auto', 'fill'].includes(width)
         ? 'auto'
@@ -158,11 +166,11 @@ export default DitoComponent.component('DitoContainer', {
     containerStyle() {
       // Interpret '>50%' as '50%, flex-grow: 1`
       const grow = (
-        this.componentWidthOperator === '>' ||
-        this.componentWidth === 'fill'
+        this.widthOperator === '>' ||
+        this.width === 'fill'
       )
       // Interpret '<50%' as '50%, flex-shrink: 1`
-      const shrink = this.componentWidthOperator === '<'
+      const shrink = this.widthOperator === '<'
       return {
         flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} ${this.componentBasis}`
       }
@@ -174,7 +182,7 @@ export default DitoComponent.component('DitoContainer', {
         // TODO: BEM?
         'dito-single': this.single,
         'dito-disabled': this.componentDisabled,
-        'dito-width-fill': !basisIsAuto || this.componentWidth === 'fill',
+        'dito-width-fill': !basisIsAuto || this.width === 'fill',
         'dito-has-errors': !!this.errors
       }
     }

package/src/components/DitoLabel.vue

@@ -9,22 +9,28 @@ component.dito-label(
     v-if="collapsible"
     :class="{ 'dito-opened': !collapsed }"
   )
-  DitoElement.dito-label-prefix(
-    v-for="(prefix, index) of prefixes"
-    :key="`prefix-${index}`"
-    tag="span"
-    :content="prefix"
-  )
-  label(
-    :for="dataPath"
-    v-html="text"
-  )
-  DitoElement.dito-label-suffix(
-    v-for="(suffix, index) of suffixes"
-    :key="`suffix-${index}`"
-    tag="span"
-    :content="suffix"
-  )
+  .dito-label__inner
+    DitoElement.dito-label-prefix(
+      v-for="(prefix, index) of prefixes"
+      :key="`prefix-${index}`"
+      tag="span"
+      :content="prefix"
+    )
+    label(
+      :for="dataPath"
+      v-html="text"
+    )
+    DitoElement.dito-label-suffix(
+      v-for="(suffix, index) of suffixes"
+      :key="`suffix-${index}`"
+      tag="span"
+      :content="suffix"
+    )
+    .dito-info(
+      v-if="info"
+      :data-tippy-content="info"
+      data-tippy-theme="info"
+    )
   slot(name="edit-buttons")
 </template>
 
@@ -40,7 +46,8 @@ export default DitoComponent.component('DitoLabel', {
     label: { type: [String, Object], default: null },
     dataPath: { type: String, default: null },
     collapsed: { type: Boolean, default: false },
-    collapsible: { type: Boolean, default: false }
+    collapsible: { type: Boolean, default: false },
+    info: { type: String, default: null }
   },
 
   computed: {
@@ -83,6 +90,8 @@ export default DitoComponent.component('DitoLabel', {
 @import '../styles/_imports';
 
 .dito-label {
+  $self: &;
+
   --label-padding: 0;
   // For buttons and chevron to align right:
   display: flex;
@@ -92,8 +101,13 @@ export default DitoComponent.component('DitoLabel', {
   padding: var(--label-padding);
   margin: 0 0 $form-spacing-half 0;
 
+  &__inner {
+    display: flex;
+    // Stretch to full available width so that buttons appear right-aligned:
+    flex: 1 1 auto;
+  }
+
   label {
-    display: inline;
     cursor: inherit;
     font-weight: bold;
     white-space: nowrap;
@@ -102,23 +116,14 @@ export default DitoComponent.component('DitoLabel', {
   label,
   .dito-label-prefix,
   .dito-label-suffix {
-    &:nth-last-child(2) {
-      // To stretch either label or .dito-label-suffix to full available width
-      // so that buttons always appear right-aligned:
-      flex: 1 1 auto;
-    }
+    @include user-select(none);
+    @include ellipsis;
 
     &::after {
-      content: '\a0'; // &nbsp;;
+      content: '\a0'; // &nbsp;
     }
   }
 
-  .dito-label-prefix,
-  .dito-label-suffix {
-    @include user-select(none);
-    @include ellipsis;
-  }
-
   .dito-buttons {
     // Move the label padding inside .dito-buttons, so that it captures all
     // near mouse events:
@@ -131,11 +136,9 @@ export default DitoComponent.component('DitoLabel', {
     width: 100%;
     // In order for ellipsis to work on labels without affecting other layout,
     // we need to position it absolutely inside its container.
-    label {
-      @include ellipsis;
-
+    #{$self}__inner {
       position: absolute;
-      max-width: 100%;
+      inset: 0;
     }
 
     &::after {
@@ -144,6 +147,10 @@ export default DitoComponent.component('DitoLabel', {
       content: '\200b'; // zero-width space;
     }
   }
+
+  .dito-info {
+    margin-left: 0.35em;
+  }
 }
 
 a.dito-label {

package/src/components/DitoRoot.vue

@@ -34,6 +34,7 @@
 </template>
 
 <script>
+import { delegate as tippyDelegate } from 'tippy.js'
 import { asArray, mapConcurrently, stripTags } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DitoUser from '../DitoUser.js'
@@ -90,6 +91,9 @@ export default DitoComponent.component('DitoRoot', {
   },
 
   async mounted() {
+    tippyDelegate(this.$el, {
+      target: '[data-tippy-content]'
+    })
     // Clear the label marked as active on all mouse and keyboard events, except
     // the ones that DitoLabel itself intercepts.
     this.domOn(document, {

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 { asArray, camelize } from '@ditojs/utils'
 
 // @vue/component
 export default {
@@ -17,6 +17,8 @@ export default {
     data: { type: [Object, Array], required: true },
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
+    width: { type: [Number, String], default: null },
+    label: { type: String, default: null },
     single: { type: Boolean, default: false },
     nested: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false }
@@ -109,21 +111,6 @@ export default {
       return this.processedData
     },
 
-    label: getSchemaAccessor('label', {
-      type: [String, Boolean],
-      get(label) {
-        return isString(label)
-          ? label
-          : label !== false && this.$options.generateLabel
-            ? this.getLabel(this.schema)
-            : null
-      }
-    }),
-
-    width: getSchemaAccessor('width', {
-      type: [String, Number]
-    }),
-
     visible: getSchemaAccessor('visible', {
       type: Boolean,
       default() {

package/src/styles/_info.scss

@@ -0,0 +1,32 @@
+.dito-info {
+  --size: calc(1em * var(--line-height));
+
+  display: inline-block;
+  position: relative;
+  flex: 0 0 var(--size);
+  width: var(--size);
+  height: var(--size);
+  text-align: center;
+  vertical-align: top;
+  margin-left: 0.35em;
+  color: $color-active;
+
+  &::before {
+    @extend %icon-info;
+
+    width: var(--size);
+  }
+}
+
+.tippy-box[data-theme~='info'] {
+  background-color: $color-active;
+  color: $color-white;
+
+  > .tippy-arrow::before {
+    color: $color-active;
+  }
+
+  .tippy-content {
+    white-space: pre-line;
+  }
+}

package/src/styles/style.scss

@@ -7,3 +7,4 @@
 @import '_sortable';
 @import '_table';
 @import '_notifications';
+@import '_info';

package/src/types/DitoTypeButton.vue

@@ -6,7 +6,20 @@ button.dito-button(
   :title="title"
   :class="buttonClass"
   v-bind="attributes"
-) {{ text }}
+)
+  template(
+    v-if="info || width === 'fill'"
+  )
+    .dito-button__text
+      span {{ text }}
+    .dito-info(
+      v-if="!label && info"
+      :data-tippy-content="info"
+      data-tippy-theme="info"
+    )
+  template(
+    v-else
+  ) {{ text }}
 </template>
 
 <script>
@@ -41,6 +54,11 @@ export default DitoTypeComponent.register(
         return this.text || labelize(this.verb)
       },
 
+      info: getSchemaAccessor('info', {
+        type: String,
+        default: null
+      }),
+
       closeForm: getSchemaAccessor('closeForm', {
         type: Boolean,
         default: false
@@ -74,3 +92,25 @@ export default DitoTypeComponent.register(
   }
 )
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-button {
+  display: flex;
+
+  &__text {
+    position: relative;
+    width: 100%;
+    min-width: min-content;
+    height: calc(1em * var(--line-height));
+
+    span {
+      @include ellipsis;
+
+      position: absolute;
+      inset: 0;
+    }
+  }
+}
+</style>