@ditojs/admin 2.5.1 → 2.6.0

package/src/mixins/TypeMixin.js

@@ -249,22 +249,16 @@ export default {
 
     // @overridable
     focusElement() {
-      const { element = this } = this.$refs
-      if (element.focus) {
-        element.focus()
-      } else {
-        element.$el?.focus?.()
-      }
+      let { element = this } = this.$refs
+      element = element.focus ? element : element.$el
+      element?.focus?.()
     },
 
     // @overridable
     blurElement() {
-      const { element = this } = this.$refs
-      if (element.blur) {
-        element.blur()
-      } else {
-        element.$el?.blur?.()
-      }
+      let { element = this } = this.$refs
+      element = element.blur ? element : element.$el
+      element?.blur?.()
     },
 
     async focusSchema() {

package/src/styles/_layout.scss

@@ -1,22 +1,19 @@
-// TODO: Convert to flexbox
-
-.dito-layout-vertical {
-  display: table;
+.dito-layout-vertical,
+.dito-layout-horizontal {
+  display: flex;
 
   > * {
-    display: table-row;
+    flex: 1;
+    display: flex;
   }
 }
 
-.dito-layout-horizontal {
-  display: table-row;
-
-  > * {
-    display: table-cell;
+.dito-layout-vertical {
+  flex-direction: column;
+}
 
-    /* stylelint-disable-next-line selector-max-universal */
-    & + * {
-      padding-left: $form-spacing;
-    }
+.dito-layout-horizontal {
+  > *:not(:first-child) {
+    padding-left: $form-spacing;
   }
 }

package/src/styles/_scroll.scss

@@ -1,8 +1,7 @@
 .dito-scroll {
   flex: 1;
   max-height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: auto;
 }
 
 .dito-scroll-parent {

package/src/styles/_settings.scss

@@ -34,11 +34,15 @@ $pulldown-padding: $pulldown-padding-ver $pulldown-padding-hor;
 
 // Content
 $content-width: 900px;
-$content-sidebar-width: 360px;
+$content-width-wide: 1400px;
 $content-padding: 16px;
 $content-padding-half: calc($content-padding / 2);
 $content-color-background: $color-lightest;
 
+// Sidebar
+$sidebar-max-width: 360px;
+$sidebar-min-width: 200px;
+
 // Form
 $form-spacing: $input-padding-hor;
 $form-spacing-half: calc($form-spacing / 2);

package/src/styles/_tippy.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@import 'tippy.js/dist/tippy.css';
 @import 'tippy.js/animations/shift-away-subtle.css';
 
 .tippy-box {

package/src/types/DitoTypeButton.vue

@@ -7,18 +7,13 @@ button.dito-button(
   :class="buttonClass"
   v-bind="attributes"
 )
-  template(
-    v-if="info || width === 'fill'"
-  )
-    .dito-button__text
-      span {{ text }}
-    .dito-info(
-      v-if="!label && info"
-      :data-info="info"
-    )
-  template(
-    v-else
+  .dito-button__text(
+    v-if="text"
   ) {{ text }}
+  .dito-info(
+    v-if="!label && info"
+    :data-info="info"
+  )
 </template>
 
 <script>
@@ -99,13 +94,9 @@ export default DitoTypeComponent.register(
   $self: &;
 
   &__text {
-    position: relative;
-    min-width: min-content;
-    height: calc(1em * var(--line-height));
+    @include ellipsis;
 
-    span {
-      @include ellipsis;
-    }
+    height: calc(1em * var(--line-height));
   }
 }
 </style>

package/src/types/DitoTypeCode.vue

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

package/src/types/DitoTypeColor.vue

@@ -143,19 +143,6 @@ export default DitoTypeComponent.register('color', {
         '#00000000'
       ]
     })
-  },
-
-  watch: {
-    focused(focused) {
-      if (!focused && this.convertedHexValue) {
-        const color = tinycolor(`#${this.convertedHexValue}`)
-        if (color?.isValid()) {
-          this.value = color.toString(this.colorFormat)
-          // TODO: Emit 'input' here instead, and 'change' in blur, like others.
-          this.onChange()
-        }
-      }
-    }
   }
 })
 </script>

package/src/types/DitoTypeComponent.vue

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

package/src/types/DitoTypeList.vue

@@ -167,7 +167,6 @@ 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

@@ -1,19 +1,18 @@
 <template lang="pug">
 .dito-markup(:id="dataPath")
-  .dito-markup-toolbar
-    .dito-buttons.dito-buttons-toolbar(
-      v-if="groupedButtons.length > 0"
+  .dito-buttons.dito-buttons-toolbar(
+    v-if="groupedButtons.length > 0"
+  )
+    .dito-button-group(
+      v-for="buttons in groupedButtons"
     )
-      .dito-button-group(
-        v-for="buttons in groupedButtons"
+      button.dito-button(
+        v-for="{ name, icon, isActive, onClick } in buttons"
+        :key="name"
+        :class="{ 'dito-active': isActive }"
+        @click="onClick"
       )
-        button.dito-button(
-          v-for="{ name, icon, isActive, onClick } in buttons"
-          :key="name"
-          :class="{ 'dito-active': isActive }"
-          @click="onClick"
-        )
-          Icon(:name="icon")
+        Icon(:name="icon")
   EditorContent.dito-markup-editor(
     ref="editor"
     :editor="editor"
@@ -76,8 +75,6 @@ export default DitoTypeComponent.register('markup', {
     Icon
   },
 
-  keepAligned: false,
-
   data() {
     return {
       editor: null,
@@ -317,7 +314,7 @@ export default DitoTypeComponent.register('markup', {
           }
         }
         editor.commands.setLink({ href, title })
-      } else {
+      } else if (attributes === null) {
         editor.commands.unsetLink()
       }
     },
@@ -522,13 +519,14 @@ const LinkWithTitle = Link.extend({
 
   .dito-markup-editor {
     overflow-y: scroll;
+    margin-top: $input-padding-ver;
     // Move padding "inside" editor to correctly position scrollbar
     margin-right: -$input-padding-hor;
     padding-right: $input-padding-hor;
   }
 
   .dito-buttons-toolbar {
-    margin: $input-padding-ver 0;
+    margin: 0;
   }
 
   h1,

package/src/types/DitoTypeMultiselect.vue

@@ -360,6 +360,8 @@ $tag-line-height: 1em;
     }
 
     &__placeholder {
+      white-space: nowrap;
+
       &::after {
         // Enforce actual line-height for positioning.
         content: '\200b';

package/src/types/DitoTypeObject.vue

@@ -63,8 +63,6 @@ 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,7 +6,6 @@ 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,7 +20,6 @@ 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,7 +19,6 @@ export default DitoTypeComponent.register('textarea', {
   mixins: [TextMixin],
   nativeField: true,
   textField: true,
-  keepAligned: false,
 
   computed: {
     lines() {

package/src/types/DitoTypeTreeList.vue

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

package/src/types/DitoTypeUpload.vue

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

package/src/utils/options.js

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

package/src/utils/schema.js

@@ -510,12 +510,18 @@ export function isNested(schema) {
   return !!(schema.nested || getTypeOptions(schema)?.defaultNested === true)
 }
 
-export function omitPadding(schema) {
-  return !!getTypeOptions(schema)?.omitPadding
+export function hasLabel(schema, generateLabels) {
+  const { label } = schema
+  return (
+    label !== false && (
+      !!label ||
+      generateLabels && getTypeOptions(schema)?.generateLabel
+    )
+  )
 }
 
-export function keepAligned(schema) {
-  return !!getTypeOptions(schema)?.keepAligned
+export function omitPadding(schema) {
+  return !!getTypeOptions(schema)?.omitPadding
 }
 
 export function getSchemaValue(