@ditojs/admin 2.3.1 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "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",
@@ -33,7 +33,7 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.3.1",
+    "@ditojs/ui": "^2.3.2",
     "@ditojs/utils": "^2.3.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -83,7 +83,7 @@
     "vite": "^4.3.1"
   },
   "types": "types",
-  "gitHead": "1b5f5121a2e8e6d3741f0bb2b81d38c2343810d6",
+  "gitHead": "e8034d836e783c606746b8a51b20d8969f1472fc",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoDialog.vue

@@ -179,6 +179,7 @@ export default DitoComponent.component('DitoDialog', {
   background: rgba(0, 0, 0, 0.2);
 
   &__focus-trap {
+    display: flex;
     max-height: 100%;
   }
 

package/src/components/DitoHeader.vue

@@ -20,7 +20,7 @@ nav.dito-header
       v-if="isLoading"
     )
   //- Teleport target for `.dito-schema-header`:
-  .dito-menu
+  .dito-header__menu
   slot
 </template>
 
@@ -78,14 +78,14 @@ export default DitoComponent.component('DitoHeader', {
 
 .dito-header {
   background: $color-black;
-  font-size: $menu-font-size;
-  line-height: $menu-line-height;
-  z-index: $menu-z-index;
+  font-size: $header-font-size;
+  line-height: $header-line-height;
+  z-index: $header-z-index;
   @include user-select(none);
 
   span {
     display: inline-block;
-    padding: $menu-padding;
+    padding: $header-padding;
     color: $color-white;
   }
 

package/src/components/DitoMenu.vue

@@ -0,0 +1,172 @@
+<template lang="pug">
+ul.dito-menu(
+  v-resize="onResize"
+  :style="{ '--width': width ? `${width}px` : null }"
+)
+  li(
+    v-for="item in items"
+  )
+    template(
+      v-if="shouldRenderSchema(item)"
+    )
+      a.dito-link(
+        :href="getItemHref(item)"
+        :class="getItemClass(item, 'dito-sub-menu-link')"
+        @click.prevent.stop="onClickItem(item)"
+      ) {{ getLabel(item) }}
+      DitoMenu(
+        v-if="item.items"
+        :class="getItemClass(item, 'dito-sub-menu')"
+        :items="item.items"
+      )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoMenu', {
+  props: {
+    items: {
+      type: [Object, Array],
+      default: () => []
+    }
+  },
+
+  data() {
+    return {
+      width: 0
+    }
+  },
+
+  methods: {
+    onResize({ contentRect: { width } }) {
+      if (width) {
+        this.width = width
+      }
+    },
+
+    getItemClass(item, subMenuClass) {
+      return {
+        [subMenuClass]: !!item.items,
+        'dito-active': this.isActiveItem(item)
+      }
+    },
+
+    getItemHref(item) {
+      return item?.path
+        ? `/${item.path}`
+        : item.items
+          ? this.getItemHref(Object.values(item.items)[0])
+          : null
+    },
+
+    isActiveItem(item) {
+      return (
+        this.$route.path.startsWith(this.getItemHref(item)) ||
+        item.items && Object.values(item.items).some(this.isActiveItem)
+      )
+    },
+
+    onClickItem(item) {
+      const path = this.getItemHref(item)
+      if (path) {
+        this.$router.push({ path, force: true })
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@use 'sass:color';
+@import '../styles/_imports';
+
+.dito-menu {
+  $item-height: $menu-font-size + 2 * $menu-padding-ver;
+
+  border-right: $border-style;
+  padding: 0 $menu-spacing;
+
+  li {
+    &:has(.dito-sub-menu:not(.dito-active)) {
+      // Pop-out sub-menus on hover:
+      &:hover {
+        .dito-sub-menu-link {
+          background: $color-lightest;
+        }
+
+        .dito-sub-menu {
+          display: block;
+          position: absolute;
+          width: var(--width);
+          z-index: $header-z-index;
+          transform: translateX(calc(var(--width) + 2 * $menu-spacing))
+            translateY(-$item-height);
+
+          li:first-child {
+            .dito-link {
+              margin-top: 0;
+            }
+          }
+
+          &::before {
+            // Fill the gap to not loose the hover when moving over it.
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -2 * $menu-spacing;
+            width: 2 * $menu-spacing;
+            height: $item-height;
+            opacity: 0;
+          }
+        }
+
+        // .dito-sub-menu-link,
+        .dito-sub-menu {
+          box-shadow: $shadow-window;
+        }
+      }
+    }
+  }
+
+  .dito-link {
+    display: block;
+    padding: $menu-padding;
+    line-height: $menu-line-height;
+    border-radius: $border-radius;
+    margin-top: $menu-spacing;
+
+    &:focus:not(:active, .dito-active) {
+      box-shadow: $shadow-focus;
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.5);
+    }
+
+    &.dito-active {
+      color: $color-white;
+      background: $color-active;
+    }
+  }
+
+  .dito-sub-menu-link {
+    &.dito-active {
+      background: color.adjust($color-active, $alpha: -0.3);
+    }
+  }
+
+  .dito-sub-menu {
+    display: none;
+    border-right: 0;
+    padding: 0;
+    border-radius: $border-radius;
+    background: $color-lightest;
+
+    &.dito-active {
+      display: block;
+    }
+  }
+}
+</style>

package/src/components/DitoRoot.vue

@@ -16,7 +16,7 @@
       :settings="dialog.settings"
       @remove="removeDialog(key)"
     )
-  DitoMenu
+  DitoSidebar
   main.dito-page.dito-scroll-parent
     DitoHeader(
       :spinner="options.spinner"
@@ -43,7 +43,7 @@ import DitoDialog from './DitoDialog.vue'
 import DomMixin from '../mixins/DomMixin.js'
 import {
   processView,
-  resolveSchemas,
+  resolveViews,
   processSchemaComponents
 } from '../utils/schema.js'
 
@@ -328,7 +328,7 @@ export default DitoComponent.component('DitoRoot', {
 
     async resolveViews() {
       try {
-        this.resolvedViews = await resolveSchemas(this.unresolvedViews)
+        this.resolvedViews = await resolveViews(this.unresolvedViews)
       } catch (error) {
         if (!error.request) {
           console.error(error)
@@ -350,7 +350,7 @@ export default DitoComponent.component('DitoRoot', {
           path: '/',
           components: {}
         },
-        ...routes
+        ...routes.flat()
       ])
       this.$router.replace(fullPath)
     }

package/src/components/DitoSchema.vue

@@ -5,7 +5,7 @@ slot(name="before")
 )
   .dito-schema-content(:class="{ 'dito-scroll': scrollable }")
     Teleport(
-      to=".dito-menu"
+      to=".dito-header__menu"
       :disabled="!headerInMenu"
     )
       .dito-schema-header(
@@ -118,6 +118,7 @@ import { getStoreAccessor } from '../utils/accessor.js'
 export default DitoComponent.component('DitoSchema', {
   mixins: [ItemMixin],
   components: { TransitionHeight },
+  inheritAttrs: false,
 
   provide() {
     return {
@@ -787,13 +788,13 @@ export default DitoComponent.component('DitoSchema', {
   &--menu {
     // Align the tabs on top of to the header menu.
     position: absolute;
-    height: $menu-height;
-    padding: 0 $menu-padding-hor;
+    height: $header-height;
+    padding: 0 $header-padding-hor;
     max-width: $content-width;
     top: 0;
     left: 0;
     right: 0;
-    z-index: $menu-z-index;
+    z-index: $header-z-index;
     // Turn off pointer events so that DitoTrail keeps receiving events...
     pointer-events: none;
     // ...but allow interaction with the tabs and buttons (e.g. clipboard)
@@ -801,8 +802,8 @@ export default DitoComponent.component('DitoSchema', {
     .dito-tabs,
     .dito-buttons {
       pointer-events: auto;
-      line-height: $menu-line-height;
-      font-size: $menu-font-size;
+      line-height: $header-line-height;
+      font-size: $header-font-size;
     }
   }
 }

package/src/components/DitoSidebar.vue

@@ -1,78 +1,40 @@
 <template lang="pug">
 nav.dito-sidebar.dito-scroll-parent
-  h1 {{ appState.title }}
-  ul.dito-scroll
-    li(
-      v-for="view in views"
-    )
-      RouterLink(
-        v-if="shouldRenderSchema(view)"
-        v-slot="{ isActive, href, route }"
-        custom
-        :to="`/${view.path}`"
-      )
-        a.dito-link(
-          :href="href"
-          :class="{ 'dito-active': isActive }"
-          @click.prevent="onClickLink(route)"
-        ) {{ getLabel(view) }}
+  h1
+    RouterLink.dito-link(to="/") {{ appState.title }}
+  DitoMenu.dito-scroll(:items="views")
 </template>
 
 <script>
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('DitoMenu', {
-  methods: {
-    onClickLink(route) {
-      this.$router.push({ ...route, force: true })
-    }
-  }
-})
+export default DitoComponent.component('DitoSidebar', {})
 </script>
 
 <style lang="scss">
 @import '../styles/_imports';
 
 .dito-sidebar {
+  @include user-select(none);
+
   flex: initial;
   font-size: $menu-font-size;
   white-space: nowrap;
-  @include user-select(none);
-
-  ul {
-    background: $color-lighter;
-    border-right: $border-style;
-  }
+  background: $color-lighter;
 
-  a,
   h1 {
     display: block;
-  }
-
-  h1 {
-    padding: $menu-padding;
-    line-height: $menu-line-height;
+    line-height: $header-line-height;
     font-weight: bold;
     background: $color-darker;
     border-right: $border-width solid $color-darkest;
     color: $color-white;
-  }
-
-  .dito-link {
-    padding: $menu-padding;
-    line-height: $menu-line-height;
 
-    &.dito-active {
-      color: $color-white;
-      background: $color-active;
+    .dito-link {
+      display: block;
+      padding: $header-padding;
     }
   }
 }
-
-.dito-link {
-  &:focus:not(:active, .dito-active) {
-    box-shadow: $shadow-focus;
-  }
-}
 </style>

package/src/components/index.js

@@ -4,6 +4,7 @@
 // convention is in order of encountered hierarchy in the DOM.
 
 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 DitoAccount } from './DitoAccount.vue'

package/src/styles/_button.scss

@@ -115,7 +115,7 @@
   &.dito-buttons-large {
     --button-margin: 3px;
 
-    font-size: $menu-font-size;
+    font-size: $header-font-size;
     flex-flow: row wrap;
     justify-content: center;
     padding-bottom: $content-padding;

package/src/styles/_scroll.scss

@@ -9,7 +9,6 @@
   // To make vertical scrolling in .dito-scroll work:
   flex: 1;
   display: flex;
-  position: relative;
   flex-flow: column;
   overflow: hidden;
 }

package/src/styles/_settings.scss

@@ -43,21 +43,28 @@ $content-color-background: $color-lightest;
 $form-spacing: $input-padding-hor;
 $form-spacing-half: calc($form-spacing / 2);
 
-// Menu
-$menu-font-size: 14px;
-$menu-line-height: 1;
-$menu-z-index: 1000;
-$menu-padding-ver: $menu-font-size;
-$menu-padding-hor: $content-padding;
-$menu-padding: $menu-padding-ver $menu-padding-hor;
-$menu-height: $menu-font-size + 2 * $menu-padding-ver;
+// Header
+$header-font-size: 14px;
+$header-line-height: 1;
+$header-z-index: 1000;
+$header-padding-ver: $header-font-size;
+$header-padding-hor: $content-padding;
+$header-padding: $header-padding-ver $header-padding-hor;
+$header-height: $header-font-size + 2 * $header-padding-ver;
 
 // Tabs
 $tab-margin: 6px;
 $tab-padding-hor: 12px;
-$tab-padding-ver: calc(($menu-padding-ver * 2 - $tab-margin) / 2);
+$tab-padding-ver: calc(($header-padding-ver * 2 - $tab-margin) / 2);
 $tab-radius: 4px;
-// $border-radius
+
+// Menu
+$menu-font-size: $header-font-size;
+$menu-line-height: $header-line-height;
+$menu-spacing: 4px;
+$menu-padding-ver: $header-padding-ver - $menu-spacing;
+$menu-padding-hor: $header-padding-hor - $menu-spacing;
+$menu-padding: $menu-padding-ver $menu-padding-hor;
 
 // Patterns
 $pattern-transparency-size: ($font-size - $border-width) * $input-height-factor;

package/src/utils/schema.js

@@ -113,6 +113,10 @@ export function isPanel(schema) {
   return isSchema(schema) && schema.type === 'panel'
 }
 
+export function isMenu(schema) {
+  return isSchema(schema) && schema.type === 'menu'
+}
+
 export function getSchemaIdentifier(schema) {
   return JSON.stringify(schema)
 }
@@ -176,6 +180,19 @@ export async function resolveSchemas(
   return schemas
 }
 
+export async function resolveViews(unresolvedViews) {
+  return resolveSchemas(unresolvedViews, async (schema, unwrapModule) => {
+    schema = await resolveSchema(schema, unwrapModule)
+    if (!schema.name && isMenu(schema)) {
+      // Generate a name for sub-menus from their label if it's missing.
+      // 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)
+    }
+    return schema
+  })
+}
+
 export async function resolveSchemaComponent(schema) {
   // Resolves async schema components and adds DitoMixin and TypeMixin to them.
   let { component } = schema
@@ -250,22 +267,31 @@ export async function processSchemaComponent(
 }
 
 export async function processView(component, api, schema, name) {
-  if (!isView(schema)) {
-    throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
-  }
-  processRouteSchema(api, schema, name)
   processSchemaDefaults(api, schema)
-  await processNestedSchemas(api, schema)
-  const children = []
-  await processSchemaComponents(api, schema, children, 0)
-  return {
-    path: `/${schema.path}`,
-    children,
-    component,
-    meta: {
-      api,
-      schema
+  if (isView(schema)) {
+    processRouteSchema(api, schema, name)
+    await processNestedSchemas(api, schema)
+    const children = []
+    await processSchemaComponents(api, schema, children, 0)
+    return {
+      path: `/${schema.path}`,
+      children,
+      component,
+      meta: {
+        api,
+        schema
+      }
     }
+  } 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)
+      )
+    )
+    //
+  } else {
+    throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
   }
 }
 
@@ -303,8 +329,8 @@ export function processNestedSchemaDefaults(api, schema) {
 
 export function processRouteSchema(api, schema, name) {
   // Used for view and source schemas, see SourceMixin.
-  schema.name = name
-  schema.path ||= api.normalizePath(name)
+  schema.name ??= name
+  schema.path ??= api.normalizePath(name)
 }
 
 export async function processForms(api, schema, level) {