@ditojs/admin 2.9.0 → 2.9.2

package/src/components/DitoTrail.vue

@@ -0,0 +1,119 @@
+<template lang="pug">
+.dito-trail
+  ul
+    li(
+      v-for="component in trail"
+    )
+      a.dito-link(
+        :class="getLinkClass(component)"
+        :href="getComponentHref(component)"
+        @click.prevent.stop="onClickComponent(component)"
+      )
+        span(:class="getSpanClass(component)")
+          | {{ component.breadcrumb }}
+  slot
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoTrail', {
+  computed: {
+    trail() {
+      return this.appState.routeComponents.filter(
+        component => !!component.routeRecord
+      )
+    }
+  },
+
+  methods: {
+    getComponentPath(component) {
+      // Do the same as in `DitoMenu`: Link menu items to the first children.
+      const { schema } = component
+      return schema.type === 'menu'
+        ? Object.values(schema.items)[0].fullPath
+        : component.path
+    },
+
+    getComponentHref(component) {
+      return this.$router.resolve(this.getComponentPath(component)).href
+    },
+
+    onClickComponent(component) {
+      this.$router.push({
+        path: this.getComponentPath(component),
+        force: true
+      })
+    },
+
+    getLinkClass(component) {
+      return {
+        'dito-active': component.path === this.$route.path
+      }
+    },
+
+    getSpanClass(component) {
+      return {
+        'dito-dirty': component.isDirty
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-trail {
+  display: flex;
+  box-sizing: border-box;
+  height: 3em;
+
+  ul {
+    display: flex;
+  }
+
+  li {
+    white-space: nowrap;
+  }
+
+  a {
+    position: relative;
+    display: block;
+
+    &:hover {
+      span {
+        color: $color-light;
+      }
+    }
+  }
+
+  li:not(:last-child) a {
+    $angle: 33deg;
+
+    &::before,
+    &::after {
+      position: absolute;
+      content: '';
+      width: 1px;
+      height: 0.75em;
+      right: -0.25em;
+      background: $color-white;
+      opacity: 0.5;
+    }
+
+    &::before {
+      top: 50%;
+      transform: rotate($angle);
+      transform-origin: top;
+    }
+
+    &::after {
+      bottom: 50%;
+      transform: rotate(-$angle);
+      transform-origin: bottom;
+    }
+  }
+}
+</style>

package/src/components/DitoView.vue

@@ -101,11 +101,15 @@ export default DitoComponent.component('DitoView', {
   },
 
   watch: {
-    $route(to, from) {
-      // See if the route changes completely, and clear the data if it does.
-      if (this.isFullRouteChange(to, from)) {
-        this.isLoading = false
-        this.data = {}
+    $route: {
+      // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
+      flush: 'post',
+      handler(to, from) {
+        // See if the route changes completely, and clear the data if it does.
+        if (this.isFullRouteChange(to, from)) {
+          this.isLoading = false
+          this.data = {}
+        }
       }
     }
   },

package/src/components/index.js

@@ -5,8 +5,10 @@
 
 export { default as DitoRoot } from './DitoRoot.vue'
 export { default as DitoMenu } from './DitoMenu.vue'
+export { default as DitoTrail } from './DitoTrail.vue'
 export { default as DitoHeader } from './DitoHeader.vue'
 export { default as DitoNavigation } from './DitoNavigation.vue'
+export { default as DitoNotifications } from './DitoNotifications.vue'
 export { default as DitoSidebar } from './DitoSidebar.vue'
 export { default as DitoAccount } from './DitoAccount.vue'
 export { default as DitoDialog } from './DitoDialog.vue'
@@ -34,4 +36,5 @@ export { default as DitoTableHead } from './DitoTableHead.vue'
 export { default as DitoTableCell } from './DitoTableCell.vue'
 export { default as DitoUploadFile } from './DitoUploadFile.vue'
 export { default as DitoDraggable } from './DitoDraggable.vue'
+export { default as DitoSpinner } from './DitoSpinner.vue'
 export { default as DitoVNode } from './DitoVNode.vue'

package/src/mixins/RouteMixin.js

@@ -164,15 +164,15 @@ export default {
       next(ok)
     },
 
-    getRoutePath(templatePath) {
+    getRoutePath(recordPath) {
       // Maps the route's actual path to the matched routes by counting its
       // parts separated by '/', splitting the path into the mapped parts
       // containing actual parameters.
       const { path } = this.$route
-      return templatePath
+      return recordPath
         ? path
             .split('/')
-            .slice(0, templatePath.split('/').length)
+            .slice(0, recordPath.split('/').length)
             .join('/')
         : path
     },

package/src/mixins/SourceMixin.js

@@ -314,12 +314,20 @@ export default {
   },
 
   watch: {
-    $route(to, from) {
-      if (this.providesData && from.path === to.path && from.hash === to.hash) {
-        // Paths and hashes remain the same, so only queries have changed.
-        // Update filter and reload data without clearing.
-        this.query = to.query
-        this.loadData(false)
+    $route: {
+      // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
+      flush: 'post',
+      handler(to, from) {
+        if (
+          this.providesData &&
+          from.path === to.path &&
+          from.hash === to.hash
+        ) {
+          // Paths and hashes remain the same, so only queries have changed.
+          // Update filter and reload data without clearing.
+          this.query = to.query
+          this.loadData(false)
+        }
       }
     },
 

package/src/styles/style.scss

@@ -7,4 +7,3 @@
 @import '_table';
 @import '_info';
 @import '_tippy';
-@import '_notifications';

package/src/styles/_notifications.scss

@@ -1,54 +0,0 @@
-@use 'sass:color';
-
-@mixin type($background) {
-  background: color.adjust($background, $lightness: 5%);
-  color: $color-white;
-  border-left: 12px solid color.adjust($background, $lightness: -10%);
-}
-
-.dito-notifications {
-  .dito-notification {
-    padding: 8px;
-    margin: 12px 12px 0;
-    font-size: inherit;
-    color: $color-white;
-    border-radius: $border-radius;
-    box-shadow: $shadow-window;
-
-    .notification-title {
-      font-weight: bold;
-      padding-bottom: 8px;
-    }
-
-    .notification-content {
-      p {
-        margin: 0;
-
-        & + p {
-          margin-top: 8px;
-        }
-      }
-    }
-
-    &,
-    &.info {
-      @include type($color-active);
-    }
-
-    &.success {
-      @include type($color-success);
-    }
-
-    &.warning {
-      @include type($color-warning);
-    }
-
-    &.error {
-      @include type($color-error);
-    }
-  }
-
-  .vue-notification-wrapper {
-    overflow: visible;
-  }
-}