@ditojs/admin 2.0.5 → 2.1.0

package/src/components/DitoPanel.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
 //- Only show panels in tabs when the tabs are also visible.
 component.dito-panel(
-  :is="panelTag"
   v-show="visible && (!panelTabComponent || panelTabComponent.visible)"
+  :is="panelTag"
   @submit.prevent
 )
   label.dito-panel-title {{ getLabel(schema) }}
-  dito-schema.dito-panel-schema(
+  DitoSchema.dito-panel-schema(
     :schema="panelSchema"
     :dataPath="panelDataPath"
     :data="panelData"
@@ -16,7 +16,7 @@ component.dito-panel(
     :hasOwnData="hasOwnData"
   )
     template(#buttons)
-      dito-buttons(
+      DitoButtons(
         :buttons="buttonSchemas"
         :dataPath="panelDataPath"
         :data="panelData"
@@ -26,44 +26,6 @@ component.dito-panel(
       )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-panel
-    margin-bottom: $content-padding
-    .dito-panel-title
-      display: block
-      box-sizing: border-box
-      padding: $input-padding
-      background: $button-color
-      border: $border-style
-      border-top-left-radius: $border-radius
-      border-top-right-radius: $border-radius
-    .dito-panel-schema
-      font-size: $font-size-small
-      background: $content-color-background
-      border: $border-style
-      border-top: 0
-      border-bottom-left-radius: $border-radius
-      border-bottom-right-radius: $border-radius
-      > .dito-schema-content
-        padding: $form-spacing-half $form-spacing
-        > .dito-buttons
-          --button-margin: #{$form-spacing}
-          padding: $form-spacing-half 0
-      .dito-object
-        border: 0
-        padding: 0
-      .dito-label
-        margin: 0
-        label
-          font-weight: normal
-      .dito-pane
-        margin: 0 (-$form-spacing-half)
-      .dito-container
-        padding: $form-spacing-half
-</style>
-
 <script>
 import { isFunction } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
@@ -72,7 +34,7 @@ import { getButtonSchemas } from '../utils/schema.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
 // @vue/component
-export default DitoComponent.component('dito-panel', {
+export default DitoComponent.component('DitoPanel', {
   mixins: [ValidatorMixin],
 
   provide() {
@@ -177,3 +139,61 @@ export default DitoComponent.component('dito-panel', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-panel {
+  margin-bottom: $content-padding;
+
+  .dito-panel-title {
+    display: block;
+    box-sizing: border-box;
+    padding: $input-padding;
+    background: $button-color;
+    border: $border-style;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+  }
+
+  .dito-panel-schema {
+    font-size: $font-size-small;
+    background: $content-color-background;
+    border: $border-style;
+    border-top: 0;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+
+    > .dito-schema-content {
+      padding: $form-spacing-half $form-spacing;
+
+      > .dito-buttons {
+        --button-margin: #{$form-spacing};
+
+        padding: $form-spacing-half 0;
+      }
+    }
+
+    .dito-object {
+      border: 0;
+      padding: 0;
+    }
+
+    .dito-label {
+      margin: 0;
+
+      label {
+        font-weight: normal;
+      }
+    }
+
+    .dito-pane {
+      margin: 0 (-$form-spacing-half);
+    }
+
+    .dito-container {
+      padding: $form-spacing-half;
+    }
+  }
+}
+</style>

package/src/components/DitoPanels.vue

@@ -5,7 +5,7 @@
   template(
     v-for="{ schema, dataPath, tabComponent } in panels"
   )
-    dito-panel(
+    DitoPanel(
       v-if="shouldRender(schema)"
       :key="getPanelKey(dataPath, tabComponent)"
       :schema="schema"
@@ -18,19 +18,11 @@
     )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-panels
-    max-width: $content-sidebar-width
-    min-width: calc($content-sidebar-width / 2)
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('dito-panels', {
+export default DitoComponent.component('DitoPanels', {
   props: {
     panels: { type: Array, default: null },
     data: { type: Object, required: true },
@@ -48,3 +40,12 @@ export default DitoComponent.component('dito-panels', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-panels {
+  max-width: $content-sidebar-width;
+  min-width: calc($content-sidebar-width / 2);
+}
+</style>

package/src/components/DitoRoot.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
 .dito-root
-  vue-notifications.dito-notifications(
+  VueNotifications.dito-notifications(
     ref="notifications"
     position="top right"
     classes="dito-notification"
   )
-  transition-group(name="dito-dialog")
-    dito-dialog(
+  TransitionGroup(name="dito-dialog")
+    DitoDialog(
       v-for="(dialog, key) in dialogs"
       :key="key"
       :components="dialog.components"
@@ -16,13 +16,13 @@
       :settings="dialog.settings"
       @remove="removeDialog(key)"
     )
-  dito-menu
+  DitoMenu
   main.dito-page.dito-scroll-parent
-    dito-header(
+    DitoHeader(
       :spinner="options.spinner"
       :isLoading="isLoading"
     )
-      dito-account(
+      DitoAccount(
         v-if="user"
       )
       a.dito-login(
@@ -30,31 +30,9 @@
         @click="rootComponent.login()"
       )
         span Login
-    router-view
+    RouterView
 </template>
 
-<style lang="sass">
-  @import '../styles/style'
-
-  .dito-app,
-  .dito-root
-    width: 100%
-    height: 100%
-    display: flex
-
-  .dito-root
-    .dito-page
-      background: $content-color-background
-      // The root-level views and forms may have a `.dito-schema-header` that
-      // should appear layered over `.dito-menu`, while having `overlay: hidden`
-      // set by `.dito-scroll-parent` to delegate scrolling to `.dito-scroll`.
-      // In order to not have the header clipped, adjust the top here:
-      > .dito-form,
-      > .dito-view
-        margin-top: -$menu-height
-        padding-top: $menu-height
-</style>
-
 <script>
 import { asArray, mapConcurrently, stripTags } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
@@ -63,13 +41,15 @@ import DitoView from '../components/DitoView.vue'
 import DitoDialog from './DitoDialog.vue'
 import DomMixin from '../mixins/DomMixin.js'
 import {
-  processView, resolveSchemas, processSchemaComponents
+  processView,
+  resolveSchemas,
+  processSchemaComponents
 } from '../utils/schema.js'
 
 // @vue/component
-export default DitoComponent.component('dito-root', {
-  components: { DitoDialog },
+export default DitoComponent.component('DitoRoot', {
   mixins: [DomMixin],
+  components: { DitoDialog },
 
   provide() {
     return {
@@ -140,21 +120,27 @@ export default DitoComponent.component('dito-root', {
 
   methods: {
     notify({ type = 'info', title, text } = {}) {
-      title ||= {
-        warning: 'Warning',
-        error: 'Error',
-        info: 'Information',
-        success: 'Success'
-      }[type] || 'Notification'
+      title ||= (
+        {
+          warning: 'Warning',
+          error: 'Error',
+          info: 'Information',
+          success: 'Success'
+        }[type] ||
+        'Notification'
+      )
       text = `<p>${
         asArray(text).join('</p> <p>')
       }</p>`.replace(/\n|\r\n|\r/g, '<br>')
-      const log = {
-        warning: 'warn',
-        error: 'error',
-        info: 'log',
-        success: 'log'
-      }[type] || 'error'
+      const log = (
+        {
+          warning: 'warn',
+          error: 'error',
+          info: 'log',
+          success: 'log'
+        }[type] ||
+        'error'
+      )
       // eslint-disable-next-line no-console
       console[log](stripTags(text))
       const { notifications = true } = this.api
@@ -189,7 +175,7 @@ export default DitoComponent.component('dito-root', {
           await processSchemaComponents(this.api, { components }, routes, 0)
           if (routes.length > 0) {
             throw new Error(
-              `Dialog components cannot contain routes, only components with schemas.`
+              'Dialogs do not support components that produce routes'
             )
           }
           const key = `dialog-${++dialogId}`
@@ -343,7 +329,6 @@ export default DitoComponent.component('dito-root', {
       this.$router.replace(fullPath)
     }
   }
-
 })
 
 let dialogId = 0
@@ -362,3 +347,29 @@ function addRoutes(router, routes) {
   }
 }
 </script>
+
+<style lang="scss">
+@import '../styles/style';
+
+.dito-app,
+.dito-root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.dito-root {
+  .dito-page {
+    background: $content-color-background;
+    // The root-level views and forms may have a `.dito-schema-header` that
+    // should appear layered over `.dito-menu`, while having `overlay: hidden`
+    // set by `.dito-scroll-parent` to delegate scrolling to `.dito-scroll`.
+    // In order to not have the header clipped, adjust the top here:
+    > .dito-form,
+    > .dito-view {
+      margin-top: -$menu-height;
+      padding-top: $menu-height;
+    }
+  }
+}
+</style>