@ditojs/admin 2.7.5 → 2.8.0

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

@@ -67,7 +67,6 @@ export default DitoTypeComponent.register('multiselect', {
 
   data() {
     return {
-      isMounted: false,
       searchedOptions: null,
       populate: false
     }
@@ -145,7 +144,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/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'
 }