@ditojs/admin 2.7.5 → 2.8.1

package/src/components/DitoTabs.vue

@@ -3,11 +3,11 @@
   template(
     v-for="(tabSchema, key) in tabs"
   )
-    RouterLink.dito-link(
+    a.dito-link(
       v-if="shouldRenderSchema(tabSchema)"
       :key="key"
-      :to="{ hash: `#${key}` }"
-      :class="{ 'dito-active': selectedTab === key }"
+      :class="{ 'dito-active': modelValue === key }"
+      @click="$emit('update:modelValue', key)"
     ) {{ getLabel(tabSchema, key) }}
 </template>
 
@@ -16,45 +16,87 @@ import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
 export default DitoComponent.component('DitoTabs', {
+  emits: ['update:modelValue'],
   props: {
     tabs: { type: Object, default: null },
-    selectedTab: { type: String, default: null }
+    modelValue: { type: String, default: null }
   }
 })
 </script>
 
 <style lang="scss">
+@use 'sass:color';
 @import '../styles/_imports';
 
-$tab-color-background: $color-lightest;
-$tab-color-inactive: $color-light;
-$tab-color-active: $color-lightest;
-$tab-color-hover: $color-white;
-
 .dito-tabs {
-  // See: https://codepen.io/tholex/pen/hveBx/
-  margin-left: auto;
+  display: flex;
 
-  a {
-    display: block;
+  .dito-link {
     @include user-select(none);
 
-    background: $tab-color-inactive;
-    padding: $tab-padding-ver $tab-padding-hor;
-    margin-left: $tab-margin;
-    border-top-left-radius: $tab-radius;
-    border-top-right-radius: $tab-radius;
+    display: block;
+    white-space: nowrap;
 
     &:hover {
-      background: $tab-color-hover;
+      background: $color-white;
     }
 
-    &:active {
-      background: $tab-color-active;
+    // When in main header:
+    .dito-header & {
+      background: $color-light;
+      padding: $tab-padding-ver $tab-padding-hor;
+      margin-left: $tab-margin;
+      border-top-left-radius: $tab-radius;
+      border-top-right-radius: $tab-radius;
+
+      &:active {
+        background: $color-lightest;
+      }
+
+      &.dito-active {
+        background: $color-lightest;
+      }
     }
 
-    &.dito-active {
-      background: $tab-color-background;
+    // When inside a inline schema:
+    .dito-schema-inlined &,
+    .dito-label & {
+      background: $color-lighter;
+      border: $border-style;
+      padding: $input-padding;
+      margin-left: -$border-width;
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: $tab-radius;
+        border-bottom-left-radius: $tab-radius;
+      }
+
+      &:last-child {
+        border-top-right-radius: $tab-radius;
+        border-bottom-right-radius: $tab-radius;
+      }
+
+      &:active {
+        background: $color-lighter;
+      }
+
+      &.dito-active {
+        background: $color-active;
+        border-color: color.adjust($color-active, $lightness: -10%);
+        color: $color-white;
+        z-index: 1;
+      }
+    }
+  }
+
+  .dito-schema & {
+    // Push clipboard to the right in the flex layout, see:
+    // https://codepen.io/tholex/pen/hveBx/
+    margin-left: auto;
+
+    &:last-child {
+      margin-right: auto;
     }
   }
 }

package/src/components/DitoTreeItem.vue

@@ -16,7 +16,7 @@
     )
       .dito-chevron(
         v-if="numEntries"
-        :class="{ 'dito-opened': opened }"
+        :class="{ 'dito-open': opened }"
       )
       .dito-tree-label(
         v-html="label"

package/src/components/DitoView.vue

@@ -22,7 +22,6 @@ template(
       :store="getChildStore(name)"
       :disabled="isLoading"
       scrollable
-      headerInMenu
     )
 </template>
 

package/src/mixins/DitoMixin.js

@@ -52,6 +52,7 @@ export default {
   data() {
     return {
       appState,
+      isMounted: false,
       overrides: null // See accessor.js
     }
   },
@@ -171,13 +172,13 @@ export default {
     }
   },
 
+  mounted() {
+    this.isMounted = true
+  },
+
   beforeCreate() {
     const uid = nextUid++
-    Object.defineProperty(this, '$uid', {
-      get() {
-        return uid
-      }
-    })
+    Object.defineProperty(this, '$uid', { get: () => uid })
   },
 
   methods: {

package/src/mixins/ItemMixin.js

@@ -134,7 +134,11 @@ export default {
           text = `${formLabel} ${hadLabel ? `'${text}'` : text}`
         }
       }
-      return asObject ? { text, prefix, suffix } : text
+      return asObject
+        ? text || prefix || suffix
+          ? { text, prefix, suffix }
+          : null
+        : text
     }
   }
 }

package/src/mixins/TypeMixin.js

@@ -28,7 +28,6 @@ export default {
   data() {
     return {
       parsedValue: undefined,
-      changedValue: undefined,
       focused: false
     }
   },
@@ -48,37 +47,27 @@ export default {
 
     value: {
       get() {
-        let value = computeValue(
+        const value = computeValue(
           this.schema,
           this.data,
           this.name,
           this.dataPath,
           { component: this }
         )
-        const { formatValue } = this.$options
-        if (formatValue) {
-          value = formatValue(this.schema, value, this.dataPath)
-        }
         const { format } = this.schema
-        if (format) {
-          value = format(new DitoContext(this, { value }))
-        }
-        return value
+        return format
+          ? format(new DitoContext(this, { value }))
+          : value
       },
 
       set(value) {
-        const { parseValue } = this.$options
-        if (parseValue) {
-          value = parseValue(this.schema, value, this.dataPath)
-        }
         const { parse } = this.schema
         if (parse) {
           value = parse(new DitoContext(this, { value }))
         }
+        this.parsedValue = value
         // eslint-disable-next-line vue/no-mutating-props
         this.data[this.name] = value
-        this.parsedValue = value
-        this.changedValue = undefined
       }
     },
 
@@ -118,6 +107,11 @@ export default {
       return this.processedData
     },
 
+    labelNode() {
+      const node = this.isMounted ? this.$el.previousElementSibling : null
+      return node?.matches('.dito-label') ? node : null
+    },
+
     visible: getSchemaAccessor('visible', {
       type: Boolean,
       default() {
@@ -290,7 +284,6 @@ export default {
 
     clear() {
       this.value = null
-      this.changedValue = undefined
       this.blur()
       this.onChange()
     },
@@ -313,21 +306,12 @@ export default {
     },
 
     onChange() {
-      const value =
-        this.parsedValue !== undefined ? this.parsedValue : this.value
-
-      if (this.$options.nativeField) {
-        // For some odd reason, the native change event now sometimes fires
-        // twice on Vue3. Filter out second call.
-        // TODO: Investigate why this happens, and if it's a bug in Vue3.
-        if (value === this.changedValue) return
-        this.changedValue = value
-      }
-
       this.markDirty()
       this.emitEvent('change', {
-        // Prevent endless parse recursion:
-        context: { value },
+        context: {
+          // Prevent endless parse recursion:
+          value: this.parsedValue !== undefined ? this.parsedValue : this.value
+        },
         // Pass `schemaComponent` as parent, so change events can propagate up.
         parent: this.schemaComponent
       })

package/src/styles/_button.scss

@@ -112,6 +112,8 @@
 }
 
 .dito-buttons {
+  // TODO: BEM
+
   &.dito-buttons-large {
     --button-margin: 3px;
 
@@ -133,19 +135,18 @@
 
   &.dito-buttons-main {
     border-top: $border-style;
+  }
 
-    .dito-scroll > &:not(:empty) {
-      position: sticky;
-      bottom: 0;
-      width: 100%;
-      align-self: flex-end;
-      z-index: $z-index-main-buttons;
-      margin-bottom: -$content-padding;
-      margin-top: 2 * $content-padding;
-      box-shadow: 0 (-$content-padding) $content-padding (-$content-padding)
-        $color-shadow;
-      background: $content-color-background;
-    }
+  &.dito-buttons-sticky {
+    align-self: flex-end;
+    position: sticky;
+    bottom: 0;
+    z-index: $z-index-main-buttons;
+    margin-bottom: -$content-padding;
+    margin-top: 2 * $content-padding;
+    box-shadow: 0 (-$content-padding) $content-padding (-$content-padding)
+      $color-shadow;
+    background: $content-color-background;
   }
 
   &.dito-buttons-round,

package/src/styles/_settings.scss

@@ -56,8 +56,8 @@ $header-padding: $header-padding-ver $header-padding-hor;
 $header-height: $header-font-size + 2 * $header-padding-ver;
 
 // Tabs
-$tab-margin: 6px;
-$tab-padding-hor: 12px;
+$tab-margin: $form-spacing;
+$tab-padding-hor: 2 * $tab-margin;
 $tab-padding-ver: calc(($header-padding-ver * 2 - $tab-margin) / 2);
 $tab-radius: 4px;
 

package/src/types/DitoTypeList.vue

@@ -137,7 +137,7 @@
             :createPath="path"
           )
   //- Render create buttons outside table when in a single component view:
-  DitoEditButtons.dito-buttons-main.dito-buttons-large(
+  DitoEditButtons.dito-buttons-large.dito-buttons-main.dito-buttons-sticky(
     v-if="hasListButtons && single"
     :buttons="buttonSchemas"
     :schema="schema"

package/src/types/DitoTypeMultiselect.vue

@@ -38,6 +38,7 @@
       :disabled="disabled"
       @click="clear"
     )
+  //- Edit button is never disabled, even if the field is disabled.
   DitoEditButtons(
     v-if="editable"
     :schema="schema"
@@ -45,7 +46,7 @@
     :data="data"
     :meta="meta"
     :store="store"
-    :disabled="disabled"
+    :disabled="false"
     :editable="editable"
     :editPath="editPath"
   )
@@ -67,7 +68,6 @@ export default DitoTypeComponent.register('multiselect', {
 
   data() {
     return {
-      isMounted: false,
       searchedOptions: null,
       populate: false
     }
@@ -145,7 +145,6 @@ export default DitoTypeComponent.register('multiselect', {
   },
 
   mounted() {
-    this.isMounted = true
     if (this.autofocus) {
       // vue-multiselect doesn't support the autofocus attribute. We need to
       // handle it here.

package/src/types/DitoTypeObject.vue

@@ -18,7 +18,11 @@
       :disabled="disabled || isLoading"
       :collapsed="collapsed"
       :collapsible="collapsible"
+      :deletable="objectData && deletable"
+      :editable="objectData && editable"
+      :editPath="path"
       :accumulatedBasis="accumulatedBasis"
+      @delete="deleteItem(objectData)"
     )
     component(
       v-else-if="schema.component"
@@ -35,6 +39,8 @@
       v-else
       v-html="getItemLabel(schema, objectData)"
     )
+  //- NOTE: `DitoEditButtons` here only handle the create button outside of the
+  //- schema, the edit buttons inside are handled by `DitoSchemaInlined`.
   DitoEditButtons(
     :buttons="buttonSchemas"
     :schema="schema"
@@ -45,11 +51,7 @@
     :store="store"
     :disabled="disabled || isLoading"
     :creatable="creatable"
-    :deletable="objectData && deletable"
-    :editable="objectData && editable"
     :createPath="path"
-    :editPath="path"
-    @delete="deleteItem(objectData)"
   )
 </template>
 

package/src/types/DitoTypePanel.vue

@@ -6,7 +6,7 @@ export default DitoTypeComponent.register('panel', {
   defaultValue: () => undefined, // Callback to override `defaultValue: null`
   excludeValue: true,
   generateLabel: false,
-  omitPadding: true,
+  omitSpacing: true,
 
   getPanelSchema(api, schema) {
     // For a TypePanel, the component schema is also the panel schema, but

package/src/types/DitoTypeSection.vue

@@ -1,17 +1,22 @@
 <template lang="pug">
-.dito-section(:class="{ 'dito-section-labelled': !!schema.label }")
-  DitoPane.dito-section__pane(
+.dito-section(:class="{ 'dito-section--labelled': !!schema.label }")
+  DitoSchemaInlined.dito-section__schema(
+    :label="label"
     :schema="getItemFormSchema(schema, item, context)"
     :dataPath="dataPath"
     :data="item"
     :meta="meta"
     :store="store"
     :disabled="disabled"
+    :collapsed="collapsed"
+    :collapsible="collapsible"
+    :labelNode="labelNode"
   )
 </template>
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
 import { getItemFormSchema, processSchemaComponents } from '../utils/schema.js'
 
 // @vue/component
@@ -24,7 +29,20 @@ export default DitoTypeComponent.register('section', {
   computed: {
     item() {
       return this.nested ? this.value : this.data
-    }
+    },
+
+    collapsible: getSchemaAccessor('collapsible', {
+      type: Boolean,
+      default: null, // so that `??` below can do its thing:
+      get(collapsible) {
+        return !!(collapsible ?? this.collapsed !== null)
+      }
+    }),
+
+    collapsed: getSchemaAccessor('collapsed', {
+      type: Boolean,
+      default: null
+    })
   },
 
   methods: {
@@ -42,15 +60,25 @@ export default DitoTypeComponent.register('section', {
 @import '../styles/_imports';
 
 .dito-section {
-  &.dito-section-labelled {
-    border: $border-style;
+  &--labelled {
+    border: $border-width solid transparent;
     border-radius: $border-radius;
-    padding: $form-spacing;
-    box-sizing: border-box;
-  }
+    transition: border-color 0.2s $ease-out-quart;
+    margin-top: $form-spacing-half;
 
-  .dito-section__pane {
-    padding: 0;
+    &:has(.dito-schema--open) {
+      border-color: $border-color;
+    }
+
+    // For animation purposes, move the padding to the contained panes.
+    .dito-pane {
+      padding: $form-spacing;
+
+      &:has(> .dito-container--label-vertical:first-of-type) {
+        // Reduce top spacing when the first row has labels.
+        padding-top: $form-spacing-half;
+      }
+    }
   }
 }
 </style>

package/src/types/DitoTypeSelect.vue

@@ -37,6 +37,7 @@
       :disabled="disabled"
       @click="clear"
     )
+  //- Edit button is never disabled, even if the field is disabled.
   DitoEditButtons(
     v-if="editable"
     :schema="schema"
@@ -44,7 +45,7 @@
     :data="data"
     :meta="meta"
     :store="store"
-    :disabled="disabled"
+    :disabled="false"
     :editable="editable"
     :editPath="editPath"
   )

package/src/types/DitoTypeUpload.vue

@@ -481,9 +481,9 @@ function asFiles(value) {
     white-space: nowrap;
   }
 
-  &__input {
+  & &__input {
     // See `onClickUpload()` method for details.
-    position: absolute;
+    display: block;
     pointer-events: none;
   }
 

package/src/utils/options.js

@@ -36,7 +36,7 @@ const ditoOptionKeys = [
   'generateLabel',
   'excludeValue',
   'ignoreMissingValue',
-  'omitPadding',
+  'omitSpacing',
   'formatValue',
   'parseValue',
   'processValue',

package/src/utils/schema.js

@@ -483,11 +483,13 @@ export function getFormSchemas(schema, context, modifyForm) {
     throw new Error(`Unknown view: '${schema.view}'`)
   }
 
-  let { form, forms, components, compact } = schema
+  let { form, forms } = schema
   if (!form && !forms) {
-    if (components) {
-      // Convert inlined components to forms, supporting `compact` setting.
-      form = { components, compact }
+    const { components, tabs, compact, clipboard } = schema
+    if (components || tabs) {
+      // Convert inlined components to forms, also supporting `tabs`, `compact`
+      // and `clipboard` settings.
+      form = { components, tabs, compact, clipboard }
     } else {
       // No `forms`, `form` or `components`, return and empty `forms` object.
       return {}
@@ -538,8 +540,8 @@ export function hasLabel(schema, generateLabels) {
   )
 }
 
-export function omitPadding(schema) {
-  return !!getTypeOptions(schema)?.omitPadding
+export function omitSpacing(schema) {
+  return !!getTypeOptions(schema)?.omitSpacing
 }
 
 export function getSchemaValue(

package/types/index.d.ts

@@ -171,7 +171,7 @@ export interface BaseSchema<$Item>
   default?: OrItemAccessor<$Item>
   compute?: ItemAccessor<$Item>
   data?: OrItemAccessor<$Item, {}, Record<string, any>>
-  omitPadding?: boolean
+  omitSpacing?: boolean
   break?: 'before' | 'after'
 }