@ditojs/admin 2.2.12 → 2.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.12",
+  "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": "062d8d229de60f7c81677b927c5c66ce9f2d2337",
+  "gitHead": "71b48376ab32cc6ef6cd77bc565501ac264683d7",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoButtons.vue

@@ -6,7 +6,7 @@
     v-for="(buttonSchema, buttonDataPath) in buttonSchemas"
   )
     DitoContainer(
-      v-if="shouldRender(buttonSchema)"
+      v-if="shouldRenderSchema(buttonSchema)"
       :key="buttonDataPath"
       :schema="buttonSchema"
       :dataPath="buttonDataPath"

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
       }
     }
@@ -226,13 +234,15 @@ export default DitoComponent.component('DitoContainer', {
       --justify: flex-end;
     }
 
-    // Now only apply alignment if there are neighbouring components no the same
-    // row that also align.
-    // Look ahead:
-    &:not(#{$self}--last-in-row) + #{&}:not(#{$self}--first-in-row),
-    // Look behind:
-    &:not(#{$self}--last-in-row):has(+ #{&}:not(#{$self}--first-in-row)) {
-      justify-content: var(--justify);
+    &:not(#{$self}--only-in-row) {
+      // Now only apply alignment if there are neighbouring components no the
+      // same row that also align.
+      // Look ahead:
+      &:not(#{$self}--last-in-row) + #{&}:not(#{$self}--first-in-row),
+      // Look behind:
+      &:not(#{$self}--last-in-row):has(+ #{&}:not(#{$self}--first-in-row)) {
+        justify-content: var(--justify);
+      }
     }
   }
 

package/src/components/DitoCreateButton.vue

@@ -14,7 +14,7 @@
         v-for="(form, type) in forms"
       )
         a(
-          v-if="shouldRender(form)"
+          v-if="shouldRenderSchema(form)"
           v-show="shouldShow(form)"
           :class="getFormClass(form, type)"
           @mousedown.stop="onPulldownMouseDown(type)"
@@ -61,7 +61,7 @@ export default DitoComponent.component('DitoCreateButton', {
 
   methods: {
     createItem(form, type = null) {
-      if (this.shouldRender(form) && !this.shouldDisable(form)) {
+      if (this.shouldRenderSchema(form) && !this.shouldDisable(form)) {
         if (this.isInlined) {
           this.sourceComponent.createItem(form, type)
         } else {

package/src/components/DitoDialog.vue

@@ -79,6 +79,7 @@ export default DitoComponent.component('DitoDialog', {
 
     schema() {
       return {
+        type: 'dialog',
         components: this.components
       }
     },

package/src/components/DitoForm.vue

@@ -283,6 +283,16 @@ export default DitoComponent.component('DitoForm', {
   },
 
   watch: {
+    $route(to, from) {
+      // Reload form data when navigating to a different entity in same form.
+      if (this.providesData) {
+        const { param } = this.meta
+        if (param && to.params[param] !== from.params[param]) {
+          this.loadData(true)
+        }
+      }
+    },
+
     sourceData: 'clearClonedData',
     // Needed for the 'create' redirect in `inheritedData()` to work:
     create: 'setupData'

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/DitoPane.vue

@@ -20,7 +20,7 @@
       v-if="schema.break === 'before'"
     )
     DitoContainer(
-      v-if="shouldRender(schema)"
+      v-if="shouldRenderSchema(schema)"
       :key="nestedDataPath"
       v-resize="event => onResize(index, event)"
       :schema="schema"

package/src/components/DitoPanel.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 //- Only show panels in tabs when the tabs are also visible.
 component.dito-panel(
+  v-if="shouldRenderSchema(panelSchema)"
   v-show="visible && (!panelTabComponent || panelTabComponent.visible)"
   :is="panelTag"
   @submit.prevent

package/src/components/DitoPanels.vue

@@ -6,7 +6,7 @@
     v-for="{ schema, dataPath, tabComponent } in panels"
   )
     DitoPanel(
-      v-if="shouldRender(schema)"
+      v-if="shouldRenderSchema(schema)"
       :key="getPanelKey(dataPath, tabComponent)"
       :schema="schema"
       :dataPath="dataPath"

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, {
@@ -172,7 +176,12 @@ export default DitoComponent.component('DitoRoot', {
         async (resolve, reject) => {
           // Process components to resolve async schemas.
           const routes = []
-          await processSchemaComponents(this.api, { components }, routes, 0)
+          await processSchemaComponents(
+            this.api,
+            { type: 'dialog', components },
+            routes,
+            0
+          )
           if (routes.length > 0) {
             throw new Error(
               'Dialogs do not support components that produce routes'

package/src/components/DitoSchema.vue

@@ -155,6 +155,7 @@ export default DitoComponent.component('DitoSchema', {
           ? data(this.context)
           : data
       ),
+      currentTab: null,
       componentsRegistry: {},
       panesRegistry: {},
       panelsRegistry: {}
@@ -187,17 +188,7 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     selectedTab() {
-      const currentTab = this.$route.hash?.slice(1) || null
-      const tab =
-        currentTab && this.shouldRender(this.tabs[currentTab])
-          ? currentTab
-          : this.defaultTab?.name || null
-      if (tab !== currentTab) {
-        // TODO: Move this watcher!
-        // Any tab change needs to be reflected in the router also.
-        this.$router.replace({ hash: `#${tab}` })
-      }
-      return tab
+      return this.currentTab || this.defaultTab?.name || null
     },
 
     defaultTab() {
@@ -336,6 +327,32 @@ export default DitoComponent.component('DitoSchema', {
     }
   },
 
+  watch: {
+    '$route.hash': {
+      immediate: true,
+      handler(hash) {
+        if (this.hasTabs) {
+          this.currentTab = hash?.slice(1) || null
+        }
+      }
+    },
+
+    'selectedTab'(selectedTab) {
+      if (this.hasTabs) {
+        let tab = null
+        if (selectedTab !== this.currentTab) {
+          // Any tab change needs to be reflected in the router also.
+          tab = selectedTab
+        } else if (!this.shouldRenderSchema(this.tabs[selectedTab])) {
+          tab = this.defaultTab?.name
+        }
+        if (tab) {
+          this.$router.replace({ hash: `#${tab}` })
+        }
+      }
+    }
+  },
+
   created() {
     this._register(true)
     this.setupSchemaFields()

package/src/components/DitoSidebar.vue

@@ -6,7 +6,7 @@ nav.dito-sidebar.dito-scroll-parent
       v-for="view in views"
     )
       RouterLink(
-        v-if="shouldRender(view)"
+        v-if="shouldRenderSchema(view)"
         v-slot="{ isActive, href, route }"
         custom
         :to="`/${view.path}`"

package/src/components/DitoTableHead.vue

@@ -5,7 +5,7 @@ thead.dito-table-head
       v-for="column in columns"
     )
       th(
-        v-if="shouldRender(column)"
+        v-if="shouldRenderSchema(column)"
         :class="getColumnClass(column)"
       )
         RouterLink(

package/src/components/DitoTabs.vue

@@ -4,7 +4,7 @@
     v-for="(tabSchema, key) in tabs"
   )
     RouterLink.dito-link(
-      v-if="shouldRender(tabSchema)"
+      v-if="shouldRenderSchema(tabSchema)"
       :key="key"
       :to="{ hash: `#${key}` }"
       :class="{ 'dito-active': selectedTab === key }"

package/src/components/DitoView.vue

@@ -11,7 +11,7 @@ template(
     :key="name"
   )
   .dito-view.dito-scroll-parent(
-    v-else-if="shouldRender(viewSchema)"
+    v-else-if="shouldRenderSchema(viewSchema)"
     :data-resource="sourceSchema.path"
   )
     DitoSchema(
@@ -28,7 +28,10 @@ template(
 <script>
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
-import { someSchemaComponent, isSingleComponentView } from '../utils/schema.js'
+import {
+  isSingleComponentView,
+  someNestedSchemaComponent
+} from '../utils/schema.js'
 import { hasResource } from '../utils/resource.js'
 
 // @vue/component
@@ -93,7 +96,7 @@ export default DitoComponent.component('DitoView', {
     },
 
     providesData() {
-      return someSchemaComponent(this.viewSchema, hasResource)
+      return someNestedSchemaComponent(this.viewSchema, hasResource)
     }
   },
 

package/src/mixins/DitoMixin.js

@@ -1,11 +1,8 @@
 import {
   isObject,
-  isArray,
   isString,
   isFunction,
-  asArray,
   equals,
-  getValueAtDataPath,
   labelize,
   hyphenate,
   format
@@ -13,7 +10,7 @@ import {
 import appState from '../appState.js'
 import DitoContext from '../DitoContext.js'
 import EmitterMixin from './EmitterMixin.js'
-import { isMatchingType, convertType } from '../utils/type.js'
+import { getSchemaValue, shouldRenderSchema } from '../utils/schema.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
 import { computed, reactive } from 'vue'
 
@@ -201,43 +198,15 @@ export default {
 
     getSchemaValue(
       keyOrDataPath,
-      { type, default: def, schema = this.schema, callback = true } = {}
+      { type, schema = this.schema, callback = true, default: def } = {}
     ) {
-      const types = type && asArray(type)
-      // For performance reasons, data-paths in `keyOrDataPath` can only be
-      // provided in in array format here:
-      let value = schema
-        ? isArray(keyOrDataPath)
-          ? getValueAtDataPath(schema, keyOrDataPath, () => undefined)
-          : schema[keyOrDataPath]
-        : undefined
-
-      if (value === undefined && def !== undefined) {
-        if (callback && isFunction(def) && !isMatchingType(types, def)) {
-          // Support `default()` functions for any type except `Function`:
-          def = def.call(this)
-        }
-        return def
-      }
-
-      if (isMatchingType(types, value)) {
-        return value
-      }
-      // Any schema value handled through `getSchemaValue()` can provide
-      // a function that's resolved when the value is evaluated:
-      if (callback && isFunction(value)) {
-        value = value(this.context)
-      }
-      // Now finally see if we can convert to the expect types.
-      if (types && value != null && !isMatchingType(types, value)) {
-        for (const type of types) {
-          const converted = convertType(type, value)
-          if (converted !== value) {
-            return converted
-          }
-        }
-      }
-      return value
+      return getSchemaValue(keyOrDataPath, {
+        type,
+        schema,
+        callback,
+        context: this.context,
+        default: isFunction(def) ? () => def.call(this) : def
+      })
     },
 
     getLabel(schema, name) {
@@ -263,12 +232,8 @@ export default {
       }
     },
 
-    shouldRender(schema = null) {
-      return this.getSchemaValue('if', {
-        type: Boolean,
-        default: true,
-        schema
-      })
+    shouldRenderSchema(schema = null) {
+      return shouldRenderSchema(schema, this.context)
     },
 
     shouldShow(schema = null) {

package/src/mixins/SourceMixin.js

@@ -314,7 +314,7 @@ export default {
 
   watch: {
     $route(to, from) {
-      if (from.path === to.path && from.hash === to.hash) {
+      if (this.providesData && from.path === to.path && from.hash === to.hash) {
         // Paths and hashes remain the same, so only queries have changed.
         // Update filter and reload data without clearing.
         this.query = to.query

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;
+  }
+}