@ditojs/admin 2.0.4 → 2.1.0

package/src/components/DitoHeader.vue

@@ -5,87 +5,29 @@ nav.dito-header
       li(
         v-for="(component, index) in trail"
       )
-        template(v-if="index === trail.length - 1")
+        template(
+          v-if="index === trail.length - 1"
+        )
           span(:class="getBreadcrumbClass(component)")
             | {{ component.breadcrumb }}
-        router-link.dito-breadcrumb(v-else, :to="component.path")
+        RouterLink.dito-breadcrumb(
+          v-else
+          :to="component.path"
+        )
           span(:class="getBreadcrumbClass(component)")
             | {{ component.breadcrumb }}
-    dito-spinner(v-if="isLoading")
+    DitoSpinner(
+      v-if="isLoading"
+    )
   slot
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-header
-    background: $color-black
-    font-size: $menu-font-size
-    line-height: $menu-line-height
-    z-index: $menu-z-index
-    +user-select(none)
-    span
-      display: inline-block
-      padding: $menu-padding
-      color: $color-white
-    .dito-trail
-      display: flex
-      box-sizing: border-box
-      height: 3em
-      width: 100%
-      max-width: $content-width + $content-padding
-      ul
-        display: flex
-      a
-        position: relative
-        display: block
-        padding-right: 0.4em
-        $angle: 33deg
-        &:hover
-          color: #999
-        &::before,
-        &::after
-          position: absolute
-          content: ''
-          width: 1px
-          height: 1.2em
-          right: -1px
-          background: $color-dark
-        &::before
-          top: 50%
-          transform: rotate($angle)
-          transform-origin: top
-        &::after
-          bottom: 50%
-          transform: rotate(-$angle)
-          transform-origin: bottom
-    .dito-spinner
-      margin-top: $menu-padding-ver
-    .dito-dirty
-      &:after
-        content: ''
-        display: inline-block
-        background-color: $color-white
-        width: 8px
-        height: 8px
-        margin: 2px
-        margin-left: 0.5em
-        border-radius: 100%
-    .dito-account,
-    .dito-login
-      position: absolute
-      top: 0
-      cursor: pointer
-    .dito-account
-      left: $content-width + $content-padding * 2
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 import DitoSpinner from './DitoSpinner.vue'
 
 // @vue/component
-export default DitoComponent.component('dito-header', {
+export default DitoComponent.component('DitoHeader', {
   components: { DitoSpinner },
 
   props: {
@@ -128,3 +70,95 @@ export default DitoComponent.component('dito-header', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-header {
+  background: $color-black;
+  font-size: $menu-font-size;
+  line-height: $menu-line-height;
+  z-index: $menu-z-index;
+  @include user-select(none);
+
+  span {
+    display: inline-block;
+    padding: $menu-padding;
+    color: $color-white;
+  }
+
+  .dito-trail {
+    display: flex;
+    box-sizing: border-box;
+    height: 3em;
+    width: 100%;
+    max-width: $content-width + $content-padding;
+
+    ul {
+      display: flex;
+    }
+
+    a {
+      position: relative;
+      display: block;
+      padding-right: 0.4em;
+
+      $angle: 33deg;
+
+      &:hover {
+        color: #999999;
+      }
+
+      &::before,
+      &::after {
+        position: absolute;
+        content: '';
+        width: 1px;
+        height: 1.2em;
+        right: -1px;
+        background: $color-dark;
+      }
+
+      &::before {
+        top: 50%;
+        transform: rotate($angle);
+        transform-origin: top;
+      }
+
+      &::after {
+        bottom: 50%;
+        transform: rotate(-$angle);
+        transform-origin: bottom;
+      }
+    }
+  }
+
+  .dito-spinner {
+    margin-top: $menu-padding-ver;
+  }
+
+  .dito-dirty {
+    &::after {
+      content: '';
+      display: inline-block;
+      background-color: $color-white;
+      width: 8px;
+      height: 8px;
+      margin: 2px;
+      margin-left: 0.5em;
+      border-radius: 100%;
+    }
+  }
+
+  .dito-account,
+  .dito-login {
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+  }
+
+  .dito-account {
+    left: $content-width + $content-padding * 2;
+  }
+}
+</style>

package/src/components/DitoLabel.vue

@@ -9,102 +9,33 @@ component.dito-label(
     v-if="collapsible"
     :class="{ 'dito-opened': !collapsed }"
   )
-  dito-element.dito-label-prefix(
+  DitoElement.dito-label-prefix(
     v-for="(prefix, index) of prefixes"
-    tag="span"
     :key="`prefix-${index}`"
+    tag="span"
     :content="prefix"
   )
-  label(:for="dataPath" v-html="text")
-  dito-element.dito-label-suffix(
+  label(
+    :for="dataPath"
+    v-html="text"
+  )
+  DitoElement.dito-label-suffix(
     v-for="(suffix, index) of suffixes"
-    tag="span"
     :key="`suffix-${index}`"
+    tag="span"
     :content="suffix"
   )
   slot(name="edit-buttons")
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-label
-    --label-padding: 0
-    // For buttons and chevron to align right:
-    display: flex
-    position: relative
-    // Vertically center all items in the label, e.g. chevron, edit-buttons.
-    align-items: center
-    padding: var(--label-padding)
-    margin: 0 0 $form-spacing-half 0
-
-    label
-      display: inline
-      cursor: inherit
-      font-weight: bold
-      white-space: nowrap
-
-    label,
-    .dito-label-prefix,
-    .dito-label-suffix
-      &:nth-last-child(2)
-        // To stretch either label or .dito-label-suffix to full available width
-        // so that buttons always appear right-aligned:
-        flex: 1 1 auto
-      &::after
-        content: '\a0' // &nbsp;
-
-    .dito-label-prefix,
-    .dito-label-suffix
-      +user-select(none)
-      +ellipsis
-
-    .dito-buttons
-      // Move the label padding inside .dito-buttons, so that it captures all
-      // near mouse events:
-      margin: calc(-1 * var(--label-padding))
-      margin-left: 0
-      padding: var(--label-padding)
-
-    &.dito-width-fill
-      width: 100%
-      // In order for ellipsis to work on labels without affecting other layout,
-      // we need to position it absolutely inside its container.
-      label
-        +ellipsis
-        position: absolute
-        max-width: 100%
-      &::after
-        // Since <label> uses `position: absolute`, set content to a zero-width
-        // space on its parent to enforce the right text height in the container
-        content: '\200b' // zero-width space
-
-  a.dito-label
-    &:hover
-      .dito-chevron
-        color: $color-darker
-    &:focus:not(:active):not(.dito-active)
-      .dito-chevron
-        -webkit-text-stroke: $border-width $color-active
-
-  // Display labels in compact schema as inline-blocks, to allow compact layouts
-  // with `width: 'auto'` elements:
-  // TODO: Find a better way to control this behavior.
-  .dito-schema-compact
-    > .dito-schema-content
-      > .dito-pane
-        > .dito-container
-          display: flex
-          flex-flow: row wrap
-          align-items: baseline
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 import { isObject, asArray } from '@ditojs/utils'
 
 // @vue/component
-export default DitoComponent.component('dito-label', {
+export default DitoComponent.component('DitoLabel', {
+  emits: ['expand'],
+
   props: {
     label: { type: [String, Object], default: null },
     dataPath: { type: String, default: null },
@@ -146,5 +77,101 @@ export default DitoComponent.component('dito-label', {
     }
   }
 })
-
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-label {
+  --label-padding: 0;
+  // For buttons and chevron to align right:
+  display: flex;
+  position: relative;
+  // Vertically center all items in the label, e.g. chevron, edit-buttons.
+  align-items: center;
+  padding: var(--label-padding);
+  margin: 0 0 $form-spacing-half 0;
+
+  label {
+    display: inline;
+    cursor: inherit;
+    font-weight: bold;
+    white-space: nowrap;
+  }
+
+  label,
+  .dito-label-prefix,
+  .dito-label-suffix {
+    &:nth-last-child(2) {
+      // To stretch either label or .dito-label-suffix to full available width
+      // so that buttons always appear right-aligned:
+      flex: 1 1 auto;
+    }
+
+    &::after {
+      content: '\a0'; // &nbsp;;
+    }
+  }
+
+  .dito-label-prefix,
+  .dito-label-suffix {
+    @include user-select(none);
+    @include ellipsis;
+  }
+
+  .dito-buttons {
+    // Move the label padding inside .dito-buttons, so that it captures all
+    // near mouse events:
+    margin: calc(-1 * var(--label-padding));
+    margin-left: 0;
+    padding: var(--label-padding);
+  }
+
+  &.dito-width-fill {
+    width: 100%;
+    // In order for ellipsis to work on labels without affecting other layout,
+    // we need to position it absolutely inside its container.
+    label {
+      @include ellipsis;
+
+      position: absolute;
+      max-width: 100%;
+    }
+
+    &::after {
+      // Since <label> uses `position: absolute`, set content to a zero-width
+      // space on its parent to enforce the right text height in the container
+      content: '\200b'; // zero-width space;
+    }
+  }
+}
+
+a.dito-label {
+  &:hover {
+    .dito-chevron {
+      color: $color-darker;
+    }
+  }
+
+  &:focus:not(:active, .dito-active) {
+    .dito-chevron {
+      -webkit-text-stroke: $border-width $color-active;
+    }
+    // Display labels in compact schema as inline-blocks, to allow compact
+    // layouts with `width: 'auto'` elements:
+    // TODO: Find a better way to control this behavior.
+  }
+}
+
+.dito-schema-compact {
+  > .dito-schema-content {
+    > .dito-pane {
+      > .dito-container {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: baseline;
+      }
+    }
+  }
+}
+</style>

package/src/components/DitoMenu.vue

@@ -2,49 +2,65 @@
 nav.dito-menu.dito-scroll-parent
   h1 {{ appState.title }}
   ul.dito-scroll
-    li(v-for="view in views")
-      router-link.dito-link(
+    li(
+      v-for="view in views"
+    )
+      RouterLink.dito-link(
         v-if="shouldRender(view)"
         :to="`/${view.path}`"
-        active-class="dito-active"
+        activeClass="dito-active"
       ) {{ getLabel(view) }}
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-menu
-    flex: initial
-    font-size: $menu-font-size
-    white-space: nowrap
-    +user-select(none)
-    ul
-      background: $color-lighter
-      border-right: $border-style
-    a,
-    h1
-      display: block
-    h1
-      padding: $menu-padding
-      line-height: $menu-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
-    &:focus:not(:active):not(.dito-active)
-      box-shadow: $shadow-focus
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('dito-menu', {})
+export default DitoComponent.component('DitoMenu', {})
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-menu {
+  flex: initial;
+  font-size: $menu-font-size;
+  white-space: nowrap;
+  @include user-select(none);
+
+  ul {
+    background: $color-lighter;
+    border-right: $border-style;
+  }
+
+  a,
+  h1 {
+    display: block;
+  }
+
+  h1 {
+    padding: $menu-padding;
+    line-height: $menu-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 {
+  &:focus:not(:active, .dito-active) {
+    box-shadow: $shadow-focus;
+  }
+}
+</style>

package/src/components/DitoPagination.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
-pagination(
+Pagination(
+  v-model:page="page"
   :pageSize="limit"
   :total="total"
-  v-model:page="page"
 )
 </template>
 
@@ -11,7 +11,7 @@ import { Pagination } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('dito-pagination', {
+export default DitoComponent.component('DitoPagination', {
   components: { Pagination },
 
   props: {
@@ -28,10 +28,12 @@ export default DitoComponent.component('dito-pagination', {
 
       set(page) {
         if (this.page !== page) {
-          this.$router.push(this.getQueryLink({
-            ...this.query,
-            page: (page - 1)
-          }))
+          this.$router.push(
+            this.getQueryLink({
+              ...this.query,
+              page: page - 1
+            })
+          )
         }
       }
     }

package/src/components/DitoPane.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-template-shadow -->
 <template lang="pug">
 .dito-pane(
   v-if="isPopulated && componentSchemas.length > 0"
@@ -15,7 +16,7 @@
     .dito-break(
       v-if="schema.break === 'before'"
     )
-    dito-container(
+    DitoContainer(
       v-if="shouldRender(schema)"
       :key="nestedDataPath"
       :schema="schema"
@@ -33,47 +34,13 @@
     )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-pane
-    display: flex
-    position: relative
-    flex-flow: row wrap
-    align-content: flex-start
-    align-items: baseline
-    // Remove the padding added by `.dito-container` inside `.dito-pane`:
-    margin: (-$form-spacing) (-$form-spacing-half)
-    // Add removed horizontal margin again to max-width:
-    max-width: $content-width + 2 * $form-spacing-half
-    // Use `flex: 0%` for all `.dito-pane` except `.dito-pane-main`,
-    // so that the `.dito-buttons-main` can be moved all the way to the bottom.
-    flex: 0%
-
-    &.dito-pane-main
-      flex: 100%
-
-    .dito-schema-header:not(.dito-schema-menu-header) + &
-      // Clear top-margin if the components are preceded by a schema header.
-      margin-top: 0
-
-    .dito-container.dito-omit-padding > &
-      // Clear margins set above again if parent is omitting padding.
-      margin: 0
-      max-width: unset
-
-    .dito-break
-      flex: 100%
-      height: 0
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 import { appendDataPath } from '../utils/data.js'
 import { getAllPanelSchemas, isNested } from '../utils/schema.js'
 
 // @vue/component
-export default DitoComponent.component('dito-pane', {
+export default DitoComponent.component('DitoPane', {
   provide() {
     return {
       $tabComponent: () => this.tabComponent
@@ -116,9 +83,10 @@ export default DitoComponent.component('dito-pane', {
           const nestedDataPath = appendDataPath(this.dataPath, name)
           return {
             schema,
-            dataPath: nested && !wrapPrimitives
-              ? nestedDataPath
-              : this.dataPath,
+            dataPath:
+              nested && !wrapPrimitives
+                ? nestedDataPath
+                : this.dataPath,
             nestedDataPath,
             nested,
             store: nested ? this.getChildStore(name) : this.store
@@ -131,12 +99,13 @@ export default DitoComponent.component('dito-pane', {
       // Gather all panel schemas from all component schemas, by finding those
       // that want to provide a panel. See `getAllPanelSchemas()` for details.
       return this.componentSchemas.flatMap(
-        ({ schema, nestedDataPath: dataPath }) => getAllPanelSchemas(
-          schema,
-          dataPath,
-          this.schemaComponent,
-          this.tabComponent
-        )
+        ({ schema, nestedDataPath: dataPath }) =>
+          getAllPanelSchemas(
+            schema,
+            dataPath,
+            this.schemaComponent,
+            this.tabComponent
+          )
       )
     },
 
@@ -166,3 +135,42 @@ export default DitoComponent.component('dito-pane', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-pane {
+  display: flex;
+  position: relative;
+  flex-flow: row wrap;
+  align-content: flex-start;
+  align-items: baseline;
+  // Remove the padding added by `.dito-container` inside `.dito-pane`:
+  margin: (-$form-spacing) (-$form-spacing-half);
+  // Add removed horizontal margin again to max-width:
+  max-width: $content-width + 2 * $form-spacing-half;
+  // Use `flex: 0%` for all `.dito-pane` except `.dito-pane-main`,
+  // so that the `.dito-buttons-main` can be moved all the way to the bottom.
+  flex: 0%;
+
+  &.dito-pane-main {
+    flex: 100%;
+  }
+
+  .dito-schema-header:not(.dito-schema-menu-header) + & {
+    // Clear top-margin if the components are preceded by a schema header.
+    margin-top: 0;
+  }
+
+  .dito-container.dito-omit-padding > & {
+    // Clear margins set above again if parent is omitting padding.
+    margin: 0;
+    max-width: unset;
+  }
+
+  .dito-break {
+    flex: 100%;
+    height: 0;
+  }
+}
+</style>