@ditojs/admin 2.9.3 → 2.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.9.3",
+  "version": "2.9.5",
   "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",
@@ -83,7 +83,7 @@
     "vite": "^4.3.7"
   },
   "types": "types",
-  "gitHead": "8855fb3de01a12a456a622cc17c0c03ffdbf7eab",
+  "gitHead": "e3e70442d05a10fd6a82c4ed58f9580b3643d4ab",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoClipboard.vue

@@ -64,14 +64,16 @@ export default DitoComponent.component('DitoClipboard', {
   },
 
   watch: {
+    // Check right away also in case there's already data (e.g. create form):
     'parentComponent.hasData': {
-      // Check right away also in case there's already data (e.g. create form).
       immediate: true,
-      handler(hasData) {
-        this.copyEnabled = hasData
-      }
+      handler: 'updateCopy'
     },
-    'appState.clipboardData': 'updatePaste'
+
+    'appState.clipboardData': {
+      immediate: true,
+      handler: 'updatePaste'
+    }
   },
 
   mounted() {
@@ -109,6 +111,10 @@ export default DitoComponent.component('DitoClipboard', {
       return this.checkClipboardData(clipboardData)
     },
 
+    updateCopy() {
+      this.copyEnabled = this.parentComponent.hasData
+    },
+
     async updatePaste() {
       this.pasteEnabled = !!this.checkClipboardData(this.appState.clipboardData)
       if (!this.pasteEnabled && this.appState.agent.chrome) {

package/src/components/DitoCreateButton.vue

@@ -127,6 +127,13 @@ export default DitoComponent.component('DitoCreateButton', {
 
   .dito-pulldown {
     right: 0;
+
+    .dito-buttons-sticky & {
+      top: unset;
+      right: unset;
+      bottom: 0;
+      left: 0;
+    }
   }
 }
 </style>

package/src/components/DitoDialog.vue

@@ -4,7 +4,7 @@
   role="dialog"
   aria-expanded="true"
   aria-modal="true"
-  :style="{ '--width': `${settings.width}px` }"
+  :style="{ '--width': settings.width ? `${settings.width}px` : null }"
   @mouseup="onMouseUp"
 )
   UseFocusTrap.dito-dialog__focus-trap(:options="focusTrapOptions")
@@ -19,6 +19,7 @@
       DitoSchema(
         :schema="schema"
         :data="dialogData"
+        padding="root"
         scrollable
         generateLabels
       )

package/src/components/DitoForm.vue

@@ -32,6 +32,7 @@
       :data="data"
       :meta="meta"
       :store="store"
+      :padding="isNestedRoute ? 'nested' : 'root'"
       :disabled="isLoading"
       :scrollable="isRootForm"
       generateLabels

package/src/components/DitoFormNested.vue

@@ -10,11 +10,8 @@ export default DitoComponent.component('DitoFormNested', {
 
 <style lang="scss">
 .dito-form-nested {
-  &,
-  .dito-scroll {
-    // No scrolling inside nested forms, and prevent open .multiselect from
-    // being cropped.
-    overflow: visible;
-  }
+  // No scrolling inside nested forms, and prevent open .multiselect from
+  // being cropped.
+  overflow: visible;
 }
 </style>

package/src/components/DitoPane.vue

@@ -3,9 +3,7 @@
 .dito-pane(
   v-if="isPopulated && componentSchemas.length > 0"
   v-resize="onResizePane"
-  :class=`{
-    'dito-pane--single': isSingleComponent
-  }`
+  :class="classes"
 )
   template(
     v-for=`{
@@ -63,6 +61,7 @@ export default DitoComponent.component('DitoPane', {
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
     tab: { type: String, default: null },
+    padding: { type: String, default: null },
     single: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     generateLabels: { type: Boolean, default: false },
@@ -76,6 +75,13 @@ export default DitoComponent.component('DitoPane', {
   },
 
   computed: {
+    classes() {
+      return {
+        'dito-pane--single': this.isSingleComponent,
+        [`dito-pane--padding-${this.padding}`]: !!this.padding
+      }
+    },
+
     tabComponent() {
       return this.tab ? this : this.$tabComponent()
     },
@@ -249,7 +255,7 @@ export default DitoComponent.component('DitoPane', {
     flex: 100%;
   }
 
-  .dito-scroll > & {
+  &--padding-root {
     // A root-level pane inside a scroll view. Clear negative margin from above.
     margin: 0;
     // Move the negative margin used to remove the padding added by
@@ -264,26 +270,34 @@ export default DitoComponent.component('DitoPane', {
       // Reduce top spacing when the first row has labels.
       margin-top: -$form-spacing-half;
     }
-  }
 
-  // Display a ruler between tabbed components and towards the .dito-buttons
-  &__tab + &__main {
-    &::before {
-      // Use a pseudo element to display a ruler with proper margins
-      display: block;
-      content: '';
-      width: 100%;
-      border-bottom: $border-style;
-      // Shift ruler up by $root-padding to exclude removed $form-spacing-half.
-      margin: (-$root-padding) $form-spacing-half $root-padding;
-      padding: $form-spacing-half;
+    // Display a ruler between tabbed components and towards the .dito-buttons
+    &__tab + &__main {
+      &::before {
+        // Use a pseudo element to display a ruler with proper margins
+        display: block;
+        content: '';
+        width: 100%;
+        border-bottom: $border-style;
+        // Shift ruler up by $root-padding to exclude removed $form-spacing-half
+        margin: (-$root-padding) $form-spacing-half $root-padding;
+        padding: $form-spacing-half;
+      }
     }
+
+    &__main + .dito-buttons-main {
+      // Needed forms with sticky main buttons.
+      margin: $content-padding;
+      margin-bottom: 0;
+    }
+  }
+
+  &--padding-nested {
+    padding: $form-spacing;
   }
 
-  &__main + .dito-buttons-main {
-    // Needed forms with sticky main buttons.
-    margin: $content-padding;
-    margin-bottom: 0;
+  &--padding-panel {
+    padding: $form-spacing;
   }
 
   .dito-break {

package/src/components/DitoPanel.vue

@@ -12,6 +12,7 @@ component.dito-panel(
     :data="panelData"
     :meta="meta"
     :store="store"
+    padding="panel"
     :disabled="disabled"
     :hasOwnData="hasOwnData"
     generateLabels
@@ -222,22 +223,6 @@ export default DitoComponent.component('DitoPanel', {
     border-bottom-right-radius: $border-radius;
 
     > .dito-schema-content {
-      > .dito-pane {
-        padding: $form-spacing;
-      }
-
-      .dito-pane {
-        margin: -$form-spacing-half;
-
-        &.dito-pane--single {
-          margin: 0;
-        }
-
-        > .dito-container:not(.dito-container--single) {
-          padding: $form-spacing-half;
-        }
-      }
-
       .dito-object {
         border: none;
         padding: 0;

package/src/components/DitoPanels.vue

@@ -13,7 +13,7 @@
       :data="data"
       :meta="meta"
       :store="getChildStore(schema.name)"
-      :disabled="schema.disabled != null ? schema.disabled : disabled"
+      :disabled="schema.disabled ?? disabled"
       :panelTabComponent="tabComponent"
     )
 </template>

package/src/components/DitoSchema.vue

@@ -68,6 +68,7 @@ slot(name="before")
             :data="data"
             :meta="meta"
             :store="store"
+            :padding="padding"
             :single="!inlined && !hasMainPane"
             :disabled="disabled"
             :generateLabels="generateLabels"
@@ -81,6 +82,7 @@ slot(name="before")
         :data="data"
         :meta="meta"
         :store="store"
+        :padding="padding"
         :single="!inlined && !hasTabs"
         :disabled="disabled"
         :generateLabels="generateLabels"
@@ -143,6 +145,7 @@ export default DitoComponent.component('DitoSchema', {
     meta: { type: Object, default: () => ({}) },
     store: { type: Object, default: () => ({}) },
     label: { type: [String, Object], default: null },
+    padding: { type: String, default: null },
     inlined: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     collapsed: { type: Boolean, default: false },

package/src/components/DitoView.vue

@@ -20,6 +20,7 @@ template(
       :data="data"
       :meta="meta"
       :store="getChildStore(name)"
+      padding="root"
       :disabled="isLoading"
       scrollable
     )

package/src/utils/options.js

@@ -37,8 +37,6 @@ const ditoOptionKeys = [
   'excludeValue',
   'ignoreMissingValue',
   'omitSpacing',
-  'formatValue',
-  'parseValue',
   'processValue',
   'processSchema',
   'getPanelSchema',