@ditojs/admin 2.3.0 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.3.0",
+  "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.0",
+    "@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": "81398b333e755f30b2c3c1998c8879a3e87f7873",
+  "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/DitoEditButtons.vue

@@ -10,23 +10,25 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
 )
   //- Firefox doesn't like <button> here, so use <a> instead:
   a.dito-button(
-    v-if="isDraggable"
+    v-if="hasDraggable"
     v-bind="getButtonAttributes(verbs.drag)"
   )
   RouterLink.dito-button(
-    v-if="isEditable"
-    :to="{ path: editPath }"
+    v-if="hasEditable"
+    :class="{ 'dito-disabled': !editPath }"
+    :to="editPath ? { path: editPath } : {}"
     v-bind="getButtonAttributes(verbs.edit)"
   )
   DitoCreateButton(
-    v-if="isCreatable"
+    v-if="hasCreatable"
+    :class="{ 'dito-disabled': !createPath }"
     :schema="schema"
     :path="createPath"
     :verb="verbs.create"
     :text="createButtonText"
   )
   button.dito-button(
-    v-if="isDeletable"
+    v-if="hasDeletable"
     type="button"
     v-bind="getButtonAttributes(verbs.delete)"
     @click="$emit('delete')"
@@ -61,19 +63,19 @@ export default DitoComponent.component('DitoEditButtons', {
       return this.getLabel(this.schema.form)
     },
 
-    isDraggable() {
+    hasDraggable() {
       return this.hasOption('draggable')
     },
 
-    isEditable() {
-      return this.hasOption('editable') && !!this.editPath
+    hasEditable() {
+      return this.hasOption('editable')
     },
 
-    isCreatable() {
-      return this.hasOption('creatable') && !!this.createPath
+    hasCreatable() {
+      return this.hasOption('creatable')
     },
 
-    isDeletable() {
+    hasDeletable() {
       return this.hasOption('deletable')
     },
 

package/src/components/DitoForm.vue

@@ -289,8 +289,9 @@ export default DitoComponent.component('DitoForm', {
       if (
         param &&
         this.providesData &&
-        from.params[param] !== 'create' &&
-        to.params[param] !== from.params[param]
+        from.matched[0].path === to.matched[0].path && // Staying on same form?
+        from.params[param] !== 'create' && // But haven't been creating?
+        to.params[param] !== from.params[param] // Going to a different entity?
       ) {
         this.loadData(true)
       }

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/DitoPanel.vue

@@ -224,10 +224,10 @@ export default DitoComponent.component('DitoPanel', {
     > .dito-schema-content {
       > .dito-pane {
         padding: $form-spacing-half $form-spacing;
-      }
 
-      .dito-container {
-        padding: $form-spacing-half;
+        > .dito-container {
+          padding: $form-spacing-half;
+        }
       }
 
       .dito-object {

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/mixins/OptionsMixin.js

@@ -1,5 +1,6 @@
 import DitoContext from '../DitoContext.js'
 import DataMixin from './DataMixin.js'
+import { hasViewSchema, getViewEditPath } from '../utils/schema.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { setTemporaryId, isReference } from '../utils/data.js'
 import {
@@ -145,6 +146,23 @@ export default {
       }
     }),
 
+    editable: getSchemaAccessor('editable', {
+      type: Boolean,
+      default: false,
+      get(editable) {
+        return (
+          editable &&
+          hasViewSchema(this.schema, this.context)
+        )
+      }
+    }),
+
+    editPath() {
+      return this.editable && this.selectedValue
+        ? getViewEditPath(this.schema, this.selectedValue, this.context)
+        : null
+    },
+
     groupByLabel() {
       return this.groupBy ? 'label' : null
     },

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;
@@ -191,18 +191,18 @@
   cursor: pointer;
 
   &.dito-button-clear {
+    $self: &;
+
     width: $input-height;
     z-index: 1;
     background: $color-white;
     display: none;
 
-    $button-clear: &;
-
     @at-root .dito-component:hover {
       // Support two levels of nesting inside .dito-component, used by TypeColor
-      & > #{$button-clear},
-      & > * > #{$button-clear},
-      & > * > * > #{$button-clear} {
+      & > #{$self},
+      & > * > #{$self},
+      & > * > * > #{$self} {
         display: block;
       }
     }

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/types/DitoTypeButton.vue

@@ -98,10 +98,6 @@ export default DitoTypeComponent.register(
 .dito-button {
   $self: &;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
   &__text {
     position: relative;
     min-width: min-content;

package/src/types/DitoTypeList.vue

@@ -251,9 +251,11 @@ export default DitoTypeComponent.register('list', {
 
     getEditPath(item, index) {
       if (this.editable) {
-        const path = getViewEditPath(this.schema, this.context) || this.path
         const id = this.getItemId(this.schema, item, index)
-        return `${path}/${id}`
+        return (
+          getViewEditPath(this.schema, id, this.context) ||
+          `${this.path}/${id}`
+        )
       }
       return null
     },