@ditojs/admin 2.0.4 → 2.1.0

package/src/components/DitoTableCell.vue

@@ -28,7 +28,7 @@ import { appendDataPath } from '../utils/data.js'
 import { escapeHtml } from '@ditojs/utils'
 
 // @vue/component
-export default DitoComponent.component('dito-table-cell', {
+export default DitoComponent.component('DitoTableCell', {
   props: {
     cell: { type: Object, required: true },
     schema: { type: Object, required: true },
@@ -46,14 +46,14 @@ export default DitoComponent.component('dito-table-cell', {
       const value = item[name]
       return render
         ? render.call(
-          this,
-          new DitoContext(this, {
-            name,
-            value,
-            data: item,
-            dataPath: appendDataPath(this.dataPath, name)
-          })
-        )
+            this,
+            new DitoContext(this, {
+              name,
+              value,
+              data: item,
+              dataPath: appendDataPath(this.dataPath, name)
+            })
+          )
         : escapeHtml(value)
     }
   }

package/src/components/DitoTableHead.vue

@@ -2,17 +2,17 @@
 thead.dito-table-head
   tr
     template(
-      v-for="(column, index) in columns"
+      v-for="column in columns"
     )
       th(
         v-if="shouldRender(column)"
         :class="getColumnClass(column)"
       )
-        router-link(
+        RouterLink(
           v-if="column.sortable"
+          v-slot="{ navigate }"
           :to="getSortLink(column)"
           custom
-          v-slot="{ navigate }"
         )
           button.dito-button(
             type="button"
@@ -24,45 +24,19 @@ thead.dito-table-head
         span(
           v-else
         ) {{ getLabel(column) }}
-    th(v-if="hasEditButtons")
-      //- Empty <span> is needed for styling, see _table.sass
+    th(
+      v-if="hasEditButtons"
+    )
+      //- Empty <span> is needed for styling, see _table.scss
       span
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-table-head
-    +user-select(none)
-    tr
-      th
-        padding: 0
-        font-weight: normal
-        text-align: left
-        white-space: nowrap
-        .dito-button
-          // Convention: Nested spans handle padding, see below
-          padding: 0
-          width: 100%
-          text-align: inherit
-          border-radius: 0
-        span
-          display: inline-block
-          // Convention: Nested spans handle padding
-          padding: $input-padding
-          &:empty::after
-            // Prevent empty <th> from collapsing
-            content: '\200b' // zero-width space
-        > span
-          display: block
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 import { hyphenate } from '@ditojs/utils'
 
 // @vue/component
-export default DitoComponent.component('dito-table-head', {
+export default DitoComponent.component('DitoTableHead', {
   props: {
     query: { type: Object, required: true },
     columns: { type: Object, required: true },
@@ -92,9 +66,10 @@ export default DitoComponent.component('dito-table-head', {
 
     getSortLink(column) {
       // Toggle order if the same column is clicked again.
-      const order = this.sort.name === column.name && this.sort.order === 'asc'
-        ? 'desc'
-        : 'asc'
+      const order =
+        this.sort.name === column.name && this.sort.order === 'asc'
+          ? 'desc'
+          : 'asc'
       return this.getQueryLink({
         ...this.query,
         order: `${column.name} ${order}`
@@ -103,3 +78,43 @@ export default DitoComponent.component('dito-table-head', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-table-head {
+  @include user-select(none);
+
+  tr {
+    th {
+      padding: 0;
+      font-weight: normal;
+      text-align: left;
+      white-space: nowrap;
+
+      .dito-button {
+        // Convention: Nested spans handle padding, see below
+        padding: 0;
+        width: 100%;
+        text-align: inherit;
+        border-radius: 0;
+      }
+
+      span {
+        display: inline-block;
+        // Convention: Nested spans handle padding
+        padding: $input-padding;
+
+        &:empty::after {
+          // Prevent empty <th> from collapsing
+          content: '\200b'; // zero-width space;
+        }
+      }
+
+      > span {
+        display: block;
+      }
+    }
+  }
+}
+</style>

package/src/components/DitoTabs.vue

@@ -3,7 +3,7 @@
   template(
     v-for="(tabSchema, key) in tabs"
   )
-    router-link.dito-link(
+    RouterLink.dito-link(
       v-if="shouldRender(tabSchema)"
       :key="key"
       :to="{ hash: `#${key}` }"
@@ -11,41 +11,51 @@
     ) {{ getLabel(tabSchema, key) }}
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  $tab-color-background: $color-lightest
-  $tab-color-inactive: $color-light
-  $tab-color-active: $color-lightest
-  $tab-color-hover: $color-white
-
-  .dito-tabs
-    // See: https://codepen.io/tholex/pen/hveBx/
-    margin-left: auto
-    a
-      display: block
-      +user-select(none)
-      background: $tab-color-inactive
-      padding: $tab-padding-ver $tab-padding-hor
-      margin-left: $tab-margin
-      border-top-left-radius: $tab-radius
-      border-top-right-radius: $tab-radius
-      &:hover
-        background: $tab-color-hover
-      &:active
-        background: $tab-color-active
-      &.dito-active
-        background: $tab-color-background
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('dito-tabs', {
+export default DitoComponent.component('DitoTabs', {
   props: {
     tabs: { type: Object, default: null },
     selectedTab: { type: String, default: null }
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+$tab-color-background: $color-lightest;
+$tab-color-inactive: $color-light;
+$tab-color-active: $color-lightest;
+$tab-color-hover: $color-white;
+
+.dito-tabs {
+  // See: https://codepen.io/tholex/pen/hveBx/
+  margin-left: auto;
+
+  a {
+    display: block;
+    @include user-select(none);
+
+    background: $tab-color-inactive;
+    padding: $tab-padding-ver $tab-padding-hor;
+    margin-left: $tab-margin;
+    border-top-left-radius: $tab-radius;
+    border-top-right-radius: $tab-radius;
+
+    &:hover {
+      background: $tab-color-hover;
+    }
+
+    &:active {
+      background: $tab-color-active;
+    }
+
+    &.dito-active {
+      background: $tab-color-background;
+    }
+  }
+}
+</style>

package/src/components/DitoTreeItem.vue

@@ -7,7 +7,9 @@
   }`
   :style="level > 0 && { '--level': level }"
 )
-  .dito-tree-header(v-if="label")
+  .dito-tree-header(
+    v-if="label"
+  )
     .dito-tree-branch(
       v-if="numEntries"
       @click.stop="opened = !opened"
@@ -16,11 +18,21 @@
         v-if="numEntries"
         :class="{ 'dito-opened': opened }"
       )
-      .dito-tree-label(v-html="label")
-      .dito-tree-info(v-if="details") {{ details }}
-    .dito-tree-leaf(v-else)
-      .dito-tree-label(v-html="label")
-    .dito-buttons.dito-buttons-small(v-if="hasEditButtons")
+      .dito-tree-label(
+        v-html="label"
+      )
+      .dito-tree-info(
+        v-if="details"
+      ) {{ details }}
+    .dito-tree-leaf(
+      v-else
+    )
+      .dito-tree-label(
+        v-html="label"
+      )
+    .dito-buttons.dito-buttons-small(
+      v-if="hasEditButtons"
+    )
       //- Firefox doesn't like <button> here, so use <a> instead:
       a.dito-button(
         v-if="draggable"
@@ -29,14 +41,14 @@
       button.dito-button(
         v-if="editable"
         type="button"
-        @click="onEdit"
         v-bind="getButtonAttributes(verbs.edit)"
+        @click="onEdit"
       )
       button.dito-button(
         v-if="deletable"
         type="button"
-        @click="onDelete"
         v-bind="getButtonAttributes(verbs.delete)"
+        @click="onDelete"
       )
   table.dito-properties(
     v-if="properties"
@@ -46,12 +58,12 @@
       v-for="property in properties"
     )
       td
-        dito-label(
+        DitoLabel(
           v-if="property.label !== false"
           :dataPath="getPropertyDataPath(property)"
           :label="getLabel(property)"
         )
-      dito-table-cell(
+      DitoTableCell(
         :cell="property"
         :schema="property"
         :dataPath="getPropertyDataPath(property)"
@@ -60,14 +72,14 @@
         :store="store"
         :disabled="disabled"
       )
-  use-sortable(
+  UseSortable(
     v-if="childrenSchema"
     v-show="opened"
     :modelValue="updateOrder(childrenSchema, childrenList)"
-    @update:modelValue="value => childrenList = value"
     :options="getSortableOptions(childrenDraggable, true)"
+    @update:modelValue="value => (childrenList = value)"
   )
-    dito-tree-item(
+    DitoTreeItem(
       v-for="(item, index) in childrenItems"
       :key="getItemUid(childrenSchema, item.data)"
       :schema="childrenSchema"
@@ -84,71 +96,6 @@
     //- pass `asObject: true` in the `getItemLabel()` call above.
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-tree-item
-    --chevron-indent: #{$chevron-indent}
-    > .dito-tree-header
-      > .dito-tree-branch,
-      > .dito-tree-leaf
-        // Use `--level` CSS variable to calculated the accumulated indent
-        // padding directly instead of having it accumulate in nested CSS.
-        // This way, we can keep the .dito-active area cover the full width:
-        padding-left: calc(var(--chevron-indent) * (var(--level, 1) - 1))
-    .dito-tree-branch
-      cursor: pointer
-    .dito-tree-header
-      display: flex
-      justify-content: space-between
-    .dito-tree-branch,
-    .dito-tree-leaf
-      display: flex
-      flex: auto
-      position: relative
-      margin: 1px 0
-      +user-select(none)
-    .dito-tree-label,
-    .dito-tree-info
-      white-space: nowrap
-    .dito-tree-info
-      padding-left: 0.35em
-      color: rgba($color-black, .2)
-    .dito-buttons
-      display: flex
-      visibility: hidden
-      height: 100%
-      margin-left: 1em
-      margin: 1px 0 1px 1em
-    .dito-tree-header:hover
-      > .dito-buttons
-        visibility: visible
-    // Hide buttons during dragging
-    &.dito-dragging
-      .dito-tree-header
-        > .dito-buttons
-          visibility: hidden
-    &.dito-active
-      > .dito-tree-header
-        background: $color-active
-        padding: 0 $input-padding-hor
-        margin: 0 (-$input-padding-hor)
-        > .dito-tree-branch
-          > .dito-chevron::before
-              color: $color-white
-        > * > .dito-tree-label
-          color: $color-white
-    .dito-properties
-      display: block
-      margin-left: $chevron-indent
-      > tr
-        vertical-align: baseline
-      .dito-label
-        margin: 0
-        &::after
-          content: ': '
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 import SortableMixin from '../mixins/SortableMixin.js'
@@ -157,7 +104,7 @@ import { getSchemaAccessor } from '../utils/accessor.js'
 import { getNamedSchemas, hasFormSchema } from '../utils/schema.js'
 
 // @vue/component
-export default DitoComponent.component('dito-tree-item', {
+export default DitoComponent.component('DitoTreeItem', {
   mixins: [SortableMixin],
   inject: ['container'],
 
@@ -247,11 +194,13 @@ export default DitoComponent.component('dito-tree-item', {
           childrenList.map((data, index) => {
             const path = (
               childrenSchema.path &&
-            `${this.path}/${childrenSchema.path}/${index}`
+              `${this.path}/${childrenSchema.path}/${index}`
+            )
+            const open = (
+              childrenOpen ||
+              // Only count as "in edit path" when it's not the full edit path.
+              editPath.startsWith(path) && path.length < editPath.length
             )
-            const open = childrenOpen ||
-            // Only count as "in edit path" when it's not the full edit path.
-            editPath.startsWith(path) && path.length < editPath.length
             const active = editPath === path
             return {
               data,
@@ -267,9 +216,12 @@ export default DitoComponent.component('dito-tree-item', {
 
     details() {
       const { numChildren } = this
-      return numChildren && `${numChildren} ${
-        numChildren === 1 ? 'item' : 'items'
-      }`
+      return (
+        numChildren &&
+        `${numChildren} ${
+          numChildren === 1 ? 'item' : 'items'
+        }`
+      )
     },
 
     hasEditButtons() {
@@ -327,3 +279,105 @@ export default DitoComponent.component('dito-tree-item', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-tree-item {
+  --chevron-indent: #{$chevron-indent};
+
+  > .dito-tree-header {
+    > .dito-tree-branch,
+    > .dito-tree-leaf {
+      // Use `--level` CSS variable to calculated the accumulated indent
+      // padding directly instead of having it accumulate in nested CSS.
+      // This way, we can keep the .dito-active area cover the full width:
+      padding-left: calc(var(--chevron-indent) * (var(--level, 1) - 1));
+    }
+  }
+
+  .dito-tree-branch {
+    cursor: pointer;
+  }
+
+  .dito-tree-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .dito-tree-branch,
+  .dito-tree-leaf {
+    display: flex;
+    flex: auto;
+    position: relative;
+    margin: 1px 0;
+    @include user-select(none);
+  }
+
+  .dito-tree-label,
+  .dito-tree-info {
+    white-space: nowrap;
+  }
+
+  .dito-tree-info {
+    padding-left: 0.35em;
+    color: rgba($color-black, 0.2);
+  }
+
+  .dito-buttons {
+    display: flex;
+    visibility: hidden;
+    height: 100%;
+    margin: 1px 0 1px 1em;
+  }
+
+  .dito-tree-header:hover {
+    > .dito-buttons {
+      visibility: visible;
+    } // Hide buttons during dragging
+  }
+
+  &.dito-dragging {
+    .dito-tree-header {
+      > .dito-buttons {
+        visibility: hidden;
+      }
+    }
+  }
+
+  &.dito-active {
+    > .dito-tree-header {
+      background: $color-active;
+      padding: 0 $input-padding-hor;
+      margin: 0 (-$input-padding-hor);
+
+      > .dito-tree-branch {
+        > .dito-chevron::before {
+          color: $color-white;
+        }
+      }
+
+      > * > .dito-tree-label {
+        color: $color-white;
+      }
+    }
+  }
+
+  .dito-properties {
+    display: block;
+    margin-left: $chevron-indent;
+
+    > tr {
+      vertical-align: baseline;
+    }
+
+    .dito-label {
+      margin: 0;
+
+      &::after {
+        content: ': ';
+      }
+    }
+  }
+}
+</style>

package/src/components/DitoVNode.vue

@@ -10,5 +10,5 @@ DitoVNode.props = {
   vnode: { type: Object, required: true }
 }
 
-export default DitoComponent.component('dito-vnode', DitoVNode)
+export default DitoComponent.component('DitoVnode', DitoVNode)
 </script>

package/src/components/DitoView.vue

@@ -1,10 +1,12 @@
 <template lang="pug">
-template(v-if="user")
+template(
+  v-if="user"
+)
   //- Only render DitoView when it is active, otherwise a normal router-view
   //- instead, to nest further route components.
   //- NOTE: This is different from the handling in DitoForm, where `v-show` is
   //- used to always render forms even when other nested forms are present.
-  router-view(
+  RouterView(
     v-if="!isLastRoute"
     :key="name"
   )
@@ -12,7 +14,7 @@ template(v-if="user")
     v-else-if="shouldRender(viewSchema)"
     :data-resource="sourceSchema.path"
   )
-    dito-schema.dito-scroll(
+    DitoSchema.dito-scroll(
       :schema="viewSchema"
       :data="data"
       :meta="meta"
@@ -30,7 +32,7 @@ import { someSchemaComponent, isSingleComponentView } from '../utils/schema.js'
 import { hasResource } from '../utils/resource.js'
 
 // @vue/component
-export default DitoComponent.component('dito-view', {
+export default DitoComponent.component('DitoView', {
   mixins: [RouteMixin],
 
   provide() {
@@ -78,15 +80,15 @@ export default DitoComponent.component('dito-view', {
       // so they can be rendered directly through DitoSchema also:
       return this.isSingleComponentView
         ? {
-          ...schema,
-          components: {
-            [schema.name]: {
-              name: schema.name,
-              label: false,
-              ...component
+            ...schema,
+            components: {
+              [schema.name]: {
+                name: schema.name,
+                label: false,
+                ...component
+              }
             }
           }
-        }
         : schema
     },
 

package/src/mixins/DataMixin.js

@@ -1,5 +1,9 @@
 import {
-  isObject, isFunction, isPromise, normalizeDataPath, getValueAtDataPath
+  isObject,
+  isFunction,
+  isPromise,
+  normalizeDataPath,
+  getValueAtDataPath
 } from '@ditojs/utils'
 import { reactive } from 'vue'
 import LoadingMixin from './LoadingMixin.js'
@@ -25,14 +29,12 @@ export default {
       }
       let { data = undefined, dataPath = null } = schema
       // See if there is async data loading already in process.
-      const asyncEntry = (
-        this.asyncDataEntries[name] ||= reactive({
-          dependencyFunction: null,
-          resolveCounter: 0,
-          resolvedData: null,
-          resolving: false
-        })
-      )
+      const asyncEntry = (this.asyncDataEntries[name] ||= reactive({
+        dependencyFunction: null,
+        resolveCounter: 0,
+        resolvedData: null,
+        resolving: false
+      }))
       // If the data callback provided a dependency function when it was called,
       // cal it in every call of `handleDataSchema()` to force Vue to keep track
       // of the async dependencies.