@ditojs/admin 2.5.2 → 2.6.1

package/src/components/DitoSchemaInlined.vue

@@ -82,11 +82,9 @@ export default DitoComponent.component('DitoSchemaInlined', {
         margin: 0;
         width: 100%;
         box-sizing: content-box;
-        // Because tables have a funny way of allowing too much width growth:
-        max-width: $content-width;
         // Prevent collapsing to min-height when alone in
         // .dito-schema-content, due to grid-template-rows: min-content
-        min-height: 2em;
+        min-height: $input-height;
       }
     }
 

package/src/components/DitoSidebar.vue

@@ -1,8 +1,7 @@
 <template lang="pug">
-nav.dito-sidebar.dito-scroll-parent
-  h1
-    RouterLink.dito-link(to="/") {{ appState.title }}
-  DitoMenu.dito-scroll(:items="views")
+aside.dito-sidebar.dito-scroll-parent
+  nav.dito-header
+    slot
 </template>
 
 <script>
@@ -16,25 +15,8 @@ export default DitoComponent.component('DitoSidebar', {})
 @import '../styles/_imports';
 
 .dito-sidebar {
-  @include user-select(none);
-
-  flex: initial;
-  font-size: $menu-font-size;
-  white-space: nowrap;
-  background: $color-lighter;
-
-  h1 {
-    display: block;
-    line-height: $header-line-height;
-    font-weight: bold;
-    background: $color-darker;
-    border-right: $border-width solid $color-darkest;
-    color: $color-white;
-
-    .dito-link {
-      display: block;
-      padding: $header-padding;
-    }
-  }
+  flex: 0 4 $sidebar-max-width;
+  max-width: $sidebar-max-width;
+  min-width: $sidebar-min-width;
 }
 </style>

package/src/components/DitoView.vue

@@ -15,6 +15,7 @@ template(
     :data-resource="sourceSchema.path"
   )
     DitoSchema(
+      :key="name"
       :schema="viewSchema"
       :data="data"
       :meta="meta"

package/src/components/index.js

@@ -5,8 +5,9 @@
 
 export { default as DitoRoot } from './DitoRoot.vue'
 export { default as DitoMenu } from './DitoMenu.vue'
-export { default as DitoSidebar } from './DitoSidebar.vue'
 export { default as DitoHeader } from './DitoHeader.vue'
+export { default as DitoNavigation } from './DitoNavigation.vue'
+export { default as DitoSidebar } from './DitoSidebar.vue'
 export { default as DitoAccount } from './DitoAccount.vue'
 export { default as DitoDialog } from './DitoDialog.vue'
 export { default as DitoElement } from './DitoElement.vue'

package/src/mixins/DitoMixin.js

@@ -10,7 +10,11 @@ import {
 import appState from '../appState.js'
 import DitoContext from '../DitoContext.js'
 import EmitterMixin from './EmitterMixin.js'
-import { getSchemaValue, shouldRenderSchema } from '../utils/schema.js'
+import {
+  flattenViews,
+  getSchemaValue,
+  shouldRenderSchema
+} from '../utils/schema.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
 import { computed, reactive } from 'vue'
 
@@ -77,6 +81,10 @@ export default {
       return this.$views()
     },
 
+    flattenedViews() {
+      return flattenViews(this.views)
+    },
+
     isPopulated() {
       return this.$isPopulated()
     },

package/src/mixins/TextMixin.js

@@ -10,6 +10,6 @@ export default {
   },
 
   processValue(schema, value) {
-    return schema.trim ? value?.trim() : value
+    return schema.trim && value != null ? value.trim() : value
   }
 }

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/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

@@ -2,10 +2,8 @@
 .dito-list(
   v-if="isReady"
   :id="dataPath"
-  :class="schema.class"
-  :style="schema.style"
 )
-  .dito-navigation(
+  .dito-list__header(
     v-if="scopes || hasPagination"
   )
     DitoScopes(
@@ -167,7 +165,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.
@@ -315,9 +312,11 @@ export default DitoTypeComponent.register('list', {
 @import '../styles/_imports';
 
 .dito-list {
+  $self: &;
+
   position: relative;
 
-  .dito-navigation {
+  &__header {
     display: flex;
     justify-content: space-between;
     padding-bottom: $content-padding-half;
@@ -343,7 +342,7 @@ export default DitoTypeComponent.register('list', {
 
     // Make single list header, navigation and buttons sticky to the top and
     // bottom:
-    .dito-navigation {
+    #{$self}__header {
       position: sticky;
       top: 0;
       margin-top: -$content-padding;

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

@@ -2,8 +2,6 @@
 .dito-object(
   v-if="isReady"
   :id="dataPath"
-  :class="schema.class"
-  :style="schema.style"
 )
   .dito-object-content(
     v-if="objectData"
@@ -63,8 +61,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
@@ -120,16 +116,18 @@ export default DitoTypeComponent.register('object', {
   border: $border-style;
   border-radius: $border-radius;
   margin: 0;
-  padding: $form-spacing;
+  // Only add what's not already added by the nested '.dito-pane' as padding,
+  // in order to have `$form-spacing` all around.
+  padding: 0 $form-spacing-half;
   box-sizing: border-box;
 
   .dito-object-content {
     flex: 0 1 100%;
   }
 
-  > .dito-buttons {
+  > .dito-edit-buttons {
     flex: 1 0 0%;
-    margin-left: $form-spacing;
+    padding: $form-spacing;
   }
 }
 </style>

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

@@ -188,11 +188,28 @@ export async function resolveViews(unresolvedViews) {
       // NOTE: This is never actually referenced from anywhere, but they need
       // a name by which they're stored in the parent object.
       schema.name = camelize(schema.label)
+      schema.items = await resolveSchemas(schema.items)
     }
     return schema
   })
 }
 
+export function flattenViews(views) {
+  return Object.fromEntries(
+    Object.entries(views).reduce(
+      (entries, [key, schema]) => {
+        if (isMenu(schema)) {
+          entries.push(...Object.entries(schema.items))
+        } else {
+          entries.push([key, schema])
+        }
+        return entries
+      },
+      []
+    )
+  )
+}
+
 export async function resolveSchemaComponent(schema) {
   // Resolves async schema components and adds DitoMixin and TypeMixin to them.
   let { component } = schema
@@ -283,7 +300,6 @@ export async function processView(component, api, schema, name) {
       }
     }
   } else if (isMenu(schema)) {
-    schema.items = await resolveSchemas(schema.items)
     return Promise.all(
       Object.entries(schema.items).map(async ([name, item]) =>
         processView(component, api, item, name)
@@ -428,7 +444,7 @@ export function isSingleComponentView(schema) {
 
 export function getViewFormSchema(schema, context) {
   const { view } = schema
-  const viewSchema = view && context.views[view]
+  const viewSchema = view && context.flattenedViews[view]
   return viewSchema
     ? // NOTE: Views can have tabs, in which case the view component is nested
       // in one of the tabs, go find it.
@@ -438,7 +454,7 @@ export function getViewFormSchema(schema, context) {
 
 export function getViewSchema(schema, context) {
   return getViewFormSchema(schema, context)
-    ? context.views[schema.view]
+    ? context.flattenedViews[schema.view]
     : null
 }
 
@@ -510,12 +526,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(