@ditojs/admin 2.2.10 → 2.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.10",
+  "version": "2.2.11",
   "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",
@@ -82,7 +82,7 @@
     "vite": "^4.3.1"
   },
   "types": "types",
-  "gitHead": "8c6fffbc52edec642c72859dc280f3bb442b3bf1",
+  "gitHead": "52aada1f67b13f9b30b745777c64649c6c7b171f",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoTypeComponent.js

@@ -21,6 +21,7 @@ export default {
   generateLabel: true,
   excludeValue: false,
   ignoreMissingValue: null,
+  keepAligned: true,
   omitPadding: false,
 
   component: DitoComponent.component,

package/src/components/DitoContainer.vue

@@ -31,7 +31,7 @@ import { isString, isNumber } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DitoContext from '../DitoContext.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { getTypeComponent, omitPadding } from '../utils/schema.js'
+import { getTypeComponent, keepAligned, omitPadding } from '../utils/schema.js'
 import { parseFraction } from '../utils/math.js'
 
 // @vue/component
@@ -68,25 +68,13 @@ export default DitoComponent.component('DitoContainer', {
       return (
         label !== false && (
           !!label ||
-          this.generateLabels && (
-            this.typeComponent?.generateLabel ||
-            // If the component has no label but isn't full width, render an
-            // empty label for alignment with other components:
-            !this.isFullWidth
-          )
+          this.generateLabels && this.typeComponent?.generateLabel
         )
       )
     },
 
     label() {
-      return this.hasLabel
-        ? this.getLabel(
-            this.schema,
-            // Pass an empty string in case we need an empty label, see
-            // `hasLabel()`:
-            this.typeComponent?.generateLabel ? this.schema.name : ''
-          ) || ''
-        : null
+      return this.hasLabel ? this.getLabel(this.schema) : null
     },
 
     labelDataPath() {
@@ -94,13 +82,6 @@ export default DitoComponent.component('DitoContainer', {
       return this.nested ? this.dataPath : null
     },
 
-    isFullWidth() {
-      return (
-        !this.componentBasis.endsWith('%') ||
-        parseFloat(this.componentBasis) === 100
-      )
-    },
-
     componentWidth: getSchemaAccessor('width', {
       type: [String, Number],
       default() {
@@ -146,6 +127,7 @@ export default DitoComponent.component('DitoContainer', {
       return {
         [`${prefix}--single`]: this.single,
         [`${prefix}--has-label`]: this.hasLabel,
+        [`${prefix}--aligned`]: keepAligned(this.schema),
         [`${prefix}--omit-padding`]: omitPadding(this.schema),
         ...(
           isString(containerClass)
@@ -205,6 +187,8 @@ export default DitoComponent.component('DitoContainer', {
 @import '../styles/_imports';
 
 .dito-container {
+  $self: &;
+
   display: flex;
   flex-flow: column;
   align-items: flex-start;
@@ -227,6 +211,23 @@ export default DitoComponent.component('DitoContainer', {
     padding: 0;
   }
 
+  &--aligned {
+    // To align components with and without labels.
+    justify-content: space-between;
+
+    &:has(> :only-child) {
+      justify-content: flex-end;
+    }
+
+    // Don't align if neighbouring components aren't aligned either.
+    // Look ahead:
+    #{$self}:not(#{&}) + &,
+    // Look behind:
+    &:has(+ #{$self}:not(#{&})) {
+      justify-content: flex-start;
+    }
+  }
+
   &--omit-padding {
     padding: 0;
 

package/src/components/DitoLabel.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 component.dito-label(
+  v-if="text || collapsible"
   :is="tag"
   v-bind="attributes"
   :class="{ 'dito-active': isActive }"

package/src/mixins/DitoMixin.js

@@ -243,7 +243,7 @@ export default {
     getLabel(schema, name) {
       return schema
         ? this.getSchemaValue('label', { type: String, schema }) ||
-          labelize(name ?? schema.name)
+          labelize(name || schema.name)
         : labelize(name) || ''
     },
 

package/src/types/DitoTypeCode.vue

@@ -14,6 +14,7 @@ import CodeFlask from 'codeflask'
 // @vue/component
 export default DitoTypeComponent.register('code', {
   mixins: [DomMixin],
+  keepAligned: false,
 
   computed: {
     lines() {

package/src/types/DitoTypeComponent.vue

@@ -22,6 +22,7 @@ export default DitoTypeComponent.register('component', {
   // Override the standard `defaultValue: null` to not set any data for custom
   // components, unless they provide a default value.
   defaultValue: () => undefined, // Callback to override `defaultValue: null`
+  keepAligned: false,
   ignoreMissingValue: schema => !('default' in schema),
 
   async processSchema(api, schema) {

package/src/types/DitoTypeLabel.vue

@@ -11,7 +11,8 @@ import DitoTypeComponent from '../DitoTypeComponent.js'
 // @vue/component
 export default DitoTypeComponent.register('label', {
   excludeValue: true,
-  generateLabel: false
+  generateLabel: false,
+  keepAligned: false
 })
 </script>
 

package/src/types/DitoTypeList.vue

@@ -167,6 +167,7 @@ import { pickBy, equals, hyphenate } from '@ditojs/utils'
 // @vue/component
 export default DitoTypeComponent.register('list', {
   mixins: [SourceMixin, SortableMixin],
+  keepAligned: false,
 
   getSourceType(type) {
     // No need for transformation here. See TypeTreeList for details.

package/src/types/DitoTypeMarkup.vue

@@ -83,6 +83,8 @@ export default DitoTypeComponent.register('markup', {
     Icon
   },
 
+  keepAligned: false,
+
   data() {
     return {
       editor: null,

package/src/types/DitoTypeObject.vue

@@ -63,6 +63,8 @@ import { resolveSchemaComponent } from '../utils/schema.js'
 export default DitoTypeComponent.register('object', {
   mixins: [SourceMixin],
 
+  keepAligned: false,
+
   getSourceType(type) {
     // No need for transformation here. See TypeTreeList for details.
     return type

package/src/types/DitoTypePanel.vue

@@ -6,6 +6,7 @@ export default DitoTypeComponent.register('panel', {
   defaultValue: () => undefined, // Callback to override `defaultValue: null`
   excludeValue: true,
   generateLabel: false,
+  keepAligned: false,
   omitPadding: true,
 
   getPanelSchema(api, schema) {

package/src/types/DitoTypeSection.vue

@@ -20,6 +20,7 @@ export default DitoTypeComponent.register('section', {
   ignoreMissingValue: schema => !schema.nested && !('default' in schema),
   defaultNested: false,
   generateLabel: false,
+  keepAligned: false,
 
   computed: {
     item() {

package/src/types/DitoTypeTextarea.vue

@@ -19,6 +19,7 @@ export default DitoTypeComponent.register('textarea', {
   mixins: [TextMixin],
   nativeField: true,
   textField: true,
+  keepAligned: false,
 
   computed: {
     lines() {

package/src/types/DitoTypeTreeList.vue

@@ -35,6 +35,8 @@ export default DitoTypeComponent.register(
   {
     mixins: [SourceMixin],
 
+    keepAligned: false,
+
     provide() {
       return { container: this }
     },

package/src/types/DitoTypeUpload.vue

@@ -112,6 +112,8 @@ export default DitoTypeComponent.register('upload', {
   mixins: [SortableMixin],
   components: { VueUpload },
 
+  keepAligned: false,
+
   data() {
     return {
       uploads: []

package/src/utils/options.js

@@ -36,6 +36,7 @@ const ditoOptionKeys = [
   'generateLabel',
   'excludeValue',
   'ignoreMissingValue',
+  'keepAligned',
   'omitPadding',
   'processValue',
   'processSchema',

package/src/utils/schema.js

@@ -474,6 +474,10 @@ export function omitPadding(schema) {
   return !!getTypeOptions(schema)?.omitPadding
 }
 
+export function keepAligned(schema) {
+  return !!getTypeOptions(schema)?.keepAligned
+}
+
 export function getDefaultValue(schema) {
   // Support default values both on schema and on component level.
   // NOTE: At the time of creation, components may not be instantiated, (e.g. if