@ditojs/admin 2.6.3 → 2.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "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.4"
   },
   "types": "types",
-  "gitHead": "b231e1ff2a5152e9f8cf6742b115ae2892e2abb9",
+  "gitHead": "a454a0b0c8c4f674abdec235b535c59fa7abd18c",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoContainer.vue

@@ -167,13 +167,9 @@ export default DitoComponent.component('DitoContainer', {
 
     containerStyle() {
       return {
-        flex: `${
-          this.flexGrow ? 1 : 0
-        } ${
-          this.flexShrink ? 1 : 0
-        } ${
-          this.flexBasis
-        }`
+        '--grow': this.flexGrow ? 1 : 0,
+        '--shrink': this.flexShrink ? 1 : 0,
+        '--basis': this.flexBasis
       }
     },
 
@@ -202,8 +198,13 @@ export default DitoComponent.component('DitoContainer', {
 @import '../styles/_imports';
 
 .dito-container {
+  --grow: 0;
+  --shrink: 1;
+  --basis: auto;
+
   position: relative;
   display: flex;
+  flex: var(--grow) var(--shrink) var(--basis);
   flex-flow: column;
   align-items: flex-start;
   // Needed for better vertical alignment:
@@ -215,9 +216,19 @@ export default DitoComponent.component('DitoContainer', {
   // percentages in flex-basis to work.
   padding: $form-spacing $form-spacing-half;
 
+  .dito-page & {
+    @container (width < #{$content-width}) {
+      flex-grow: 1;
+    }
+  }
+
   .dito-sidebar & {
-    @container (width < #{$sidebar-max-width - 2 * $content-padding}) {
-      flex-grow: 1 !important;
+    @container (width < #{$sidebar-max-width}) {
+      flex-grow: 1;
+    }
+
+    @container (width < #{calc($sidebar-max-width / 2)}) {
+      flex-basis: calc(var(--basis) * 2);
     }
   }
 

package/src/components/DitoPane.vue

@@ -228,6 +228,8 @@ export default DitoComponent.component('DitoPane', {
 @import '../styles/_imports';
 
 .dito-pane {
+  $self: &;
+
   display: flex;
   position: relative;
   flex-flow: row wrap;
@@ -246,13 +248,20 @@ export default DitoComponent.component('DitoPane', {
     margin: 0;
   }
 
-  .dito-scroll > &:not(&--single) {
-    // Root-level panes inside scroll views need to move the negative margin
-    // used to remove the padding added by `.dito-container` inside
-    // `.dito-pane` to the padding:
-    padding: ($content-padding - $form-spacing)
-      ($content-padding - $form-spacing-half);
-    margin: 0;
+  .dito-scroll > & {
+    &,
+    .dito-container {
+      min-width: min-content;
+    }
+
+    &:not(#{$self}--single) {
+      // Root-level panes inside scroll views need to move the negative margin
+      // used to remove the padding added by `.dito-container` inside
+      // `.dito-pane` to the padding:
+      padding: ($content-padding - $form-spacing)
+        ($content-padding - $form-spacing-half);
+      margin: 0;
+    }
   }
 
   &.dito-pane-main {

package/src/components/DitoPanels.vue

@@ -47,7 +47,5 @@ export default DitoComponent.component('DitoPanels', {
 .dito-panels {
   padding: $content-padding;
   padding-left: $form-spacing;
-  // For the `@container` rule in `.dito-container` to work:
-  container-type: inline-size;
 }
 </style>

package/src/components/DitoRoot.vue

@@ -477,6 +477,8 @@ function addRoutes(router, routes) {
   flex: 1 1 var(--max-content-width);
   background: $content-color-background;
   max-width: calc(var(--max-content-width) + 2 * #{$content-padding});
+  // For the `@container` rule in `.dito-container` to work:
+  container-type: inline-size;
 
   &--wide {
     --max-content-width: #{$content-width-wide};

package/src/components/DitoSidebar.vue

@@ -18,5 +18,7 @@ export default DitoComponent.component('DitoSidebar', {})
   flex: 0 4 $sidebar-max-width;
   max-width: $sidebar-max-width;
   min-width: $sidebar-min-width;
+  // For the `@container` rule in `.dito-container` to work:
+  container-type: inline-size;
 }
 </style>

package/src/types/DitoTypeButton.vue

@@ -95,8 +95,6 @@ export default DitoTypeComponent.register(
 
   &__text {
     @include ellipsis;
-
-    height: calc(1em * var(--line-height));
   }
 }
 </style>

package/src/types/DitoTypeMultiselect.vue

@@ -343,6 +343,7 @@ $tag-line-height: 1em;
     &__input {
       font-size: inherit;
       line-height: inherit;
+      white-space: nowrap;
       min-height: 0;
       margin: 0 0 1px 0;
       // Sadly, vue-select sets style="padding: ...;" in addition to using
@@ -360,8 +361,6 @@ $tag-line-height: 1em;
     }
 
     &__placeholder {
-      white-space: nowrap;
-
       &::after {
         // Enforce actual line-height for positioning.
         content: '\200b';

package/src/types/DitoTypeObject.vue

@@ -118,6 +118,7 @@ export default DitoTypeComponent.register('object', {
   margin: 0;
   padding: $form-spacing;
   box-sizing: border-box;
+  min-width: min-content;
 
   .dito-object-content {
     flex: 0 1 100%;

package/src/types/DitoTypeUpload.vue

@@ -4,7 +4,7 @@
   //- on whether they handle single or multiple uploads, render the upload
   //- component invisibly at the root, and delegate the click events to it from
   //- the buttons rendered further below. Luckily this works surprisingly well.
-  VueUpload.dito-upload-input(
+  VueUpload.dito-upload__input(
     ref="upload"
     v-model="uploads"
     :inputId="dataPath"
@@ -71,8 +71,8 @@
               :thumbnail="thumbnails"
               :thumbnailUrl="thumbnailUrls[index]"
             )
-          td {{ formatFileSize(file.size) }}
-          td
+          td.dito-upload__size {{ formatFileSize(file.size) }}
+          td.dito-upload__status
             template(
               v-if="file.upload"
             )
@@ -476,13 +476,18 @@ function asFiles(value) {
     }
   }
 
-  .dito-upload-input {
+  &__size,
+  &__status {
+    white-space: nowrap;
+  }
+
+  &__input {
     // See `onClickUpload()` method for details.
     position: absolute;
     pointer-events: none;
   }
 
-  .dito-upload-footer {
+  &__footer {
     display: flex;
     justify-content: flex-end;
     align-items: center;