@ditojs/admin 1.30.0 → 2.0.0

package/src/components/DitoSpinner.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+.dito-spinner(
+  v-show="loading"
+)
+  //- TODO: Convert to BEM
+  .v-pulse.v-pulse1(
+    :style="[spinnerStyle,spinnerDelay1]"
+  )
+  .v-pulse.v-pulse2(
+    :style="[spinnerStyle,spinnerDelay2]"
+  )
+  .v-pulse.v-pulse3(
+    :style="[spinnerStyle,spinnerDelay3]"
+  )
+</template>
+
+<style lang="scss">
+@-webkit-keyframes v-pulseStretchDelay {
+  0%,
+  80%
+  {
+    transform: scale(1);
+    opacity: 1;
+  }
+  45%
+  {
+    transform: scale(0.1);
+    opacity: 0.7;
+  }
+}
+
+@keyframes v-pulseStretchDelay {
+  0%,
+  80%
+  {
+    transform: scale(1);
+    opacity: 1;
+  }
+  45%
+  {
+    transform: scale(0.1);
+    opacity: 0.7;
+  }
+}
+</style>
+
+<script>
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      default: true
+    },
+    color: {
+      type: String,
+      default: '#5dc596'
+    },
+    size: {
+      type: String,
+      default: '15px'
+    },
+    margin: {
+      type: String,
+      default: '2px'
+    },
+    radius: {
+      type: String,
+      default: '100%'
+    }
+  },
+
+  data() {
+    // TODO: Convert to using only classes
+    return {
+      spinnerStyle: {
+        backgroundColor: this.color,
+        width: this.size,
+        height: this.size,
+        margin: this.margin,
+        borderRadius: this.radius,
+        display: 'inline-block',
+        animationName: 'v-pulseStretchDelay',
+        animationDuration: '0.75s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'cubic-bezier(.2,.68,.18,1.08)',
+        animationFillMode: 'both'
+      },
+      spinnerDelay1: {
+        animationDelay: '0.12s'
+      },
+      spinnerDelay2: {
+        animationDelay: '0.24s'
+      },
+      spinnerDelay3: {
+        animationDelay: '0.36s'
+      }
+    }
+  }
+
+}
+</script>

package/src/components/DitoTableCell.vue

@@ -1,24 +1,24 @@
 <template lang="pug">
-  td(
-    :class="cell.class"
-    :style="cell.style"
+td(
+  :class="cell.class"
+  :style="cell.style"
+)
+  //- TODO: Implement inlined components in cell mode!
+  component(
+    v-if="cell.component"
+    :is="cell.component"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
+    :nested="nested"
+    :disabled="disabled"
+  )
+  span(
+    v-else
+    v-html="renderCell(data)"
   )
-    // TODO: Implement inlined components in cell mode!
-    component(
-      v-if="component"
-      :is="component"
-      :schema="schema"
-      :dataPath="dataPath"
-      :data="data"
-      :meta="meta"
-      :store="store"
-      :nested="nested"
-      :disabled="disabled"
-    )
-    span(
-      v-else
-      v-html="renderCell(data)"
-    )
 </template>
 
 <script>
@@ -40,12 +40,6 @@ export default DitoComponent.component('dito-table-cell', {
     disabled: { type: Boolean, default: false }
   },
 
-  computed: {
-    component() {
-      return this.resolveTypeComponent(this.cell.component)
-    }
-  },
-
   methods: {
     renderCell(item) {
       const { name, render } = this.cell

package/src/components/DitoTableHead.vue

@@ -1,15 +1,18 @@
 <template lang="pug">
-  thead.dito-table-head
-    tr
+thead.dito-table-head
+  tr
+    template(
+      v-for="(column, index) in columns"
+    )
       th(
-        v-for="(column, index) in columns"
         v-if="shouldRender(column)"
         :class="getColumnClass(column)"
       )
         router-link(
           v-if="column.sortable"
           :to="getSortLink(column)"
-          custom v-slot="{ navigate }"
+          custom
+          v-slot="{ navigate }"
         )
           button.dito-button(
             type="button"
@@ -21,9 +24,9 @@
         span(
           v-else
         ) {{ getLabel(column) }}
-      th(v-if="hasEditButtons")
-        // Empty <span> is needed for styling, see _table.sass
-        span
+    th(v-if="hasEditButtons")
+      //- Empty <span> is needed for styling, see _table.sass
+      span
 </template>
 
 <style lang="sass">

package/src/components/DitoTabs.vue

@@ -1,13 +1,14 @@
 <template lang="pug">
-  .dito-tabs
+.dito-tabs
+  template(
+    v-for="(tabSchema, key) in tabs"
+  )
     router-link.dito-link(
-      v-for="(tabSchema, key) in tabs"
       v-if="shouldRender(tabSchema)"
       :key="key"
-      :to="{ hash: key }"
-      active-class="dito-active"
-    )
-      | {{ getLabel(tabSchema, key) }}
+      :to="{ hash: `#${key}` }"
+      :class="{ 'dito-active': selectedTab === key }"
+    ) {{ getLabel(tabSchema, key) }}
 </template>
 
 <style lang="sass">

package/src/components/DitoTreeItem.vue

@@ -1,76 +1,76 @@
 <template lang="pug">
-  .dito-tree-item(
-    :id="dataPath"
-    :class=`{
-      'dito-dragging': dragging,
-      'dito-active': active
-    }`
-    :style="level > 0 && { '--level': level }"
-  )
-    .dito-tree-header(v-if="label")
-      .dito-tree-branch(
+.dito-tree-item(
+  :id="dataPath"
+  :class=`{
+    'dito-dragging': dragging,
+    'dito-active': active
+  }`
+  :style="level > 0 && { '--level': level }"
+)
+  .dito-tree-header(v-if="label")
+    .dito-tree-branch(
+      v-if="numEntries"
+      @click.stop="opened = !opened"
+    )
+      .dito-chevron(
         v-if="numEntries"
-        @click.stop="opened = !opened"
+        :class="{ 'dito-opened': opened }"
       )
-        .dito-chevron(
-          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")
-        //- Firefox doesn't like <button> here, so use <a> instead:
-        a.dito-button(
-          v-if="draggable"
-          v-bind="getButtonAttributes(verbs.drag)"
-        )
-        button.dito-button(
-          v-if="editable"
-          type="button"
-          @click="onEdit"
-          v-bind="getButtonAttributes(verbs.edit)"
-        )
-        button.dito-button(
-          v-if="deletable"
-          type="button"
-          @click="onDelete"
-          v-bind="getButtonAttributes(verbs.delete)"
-        )
-    table.dito-properties(
-      v-if="properties"
-      v-show="opened"
-    )
-      tr(
-        v-for="property in properties"
+      .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"
+        v-bind="getButtonAttributes(verbs.drag)"
+      )
+      button.dito-button(
+        v-if="editable"
+        type="button"
+        @click="onEdit"
+        v-bind="getButtonAttributes(verbs.edit)"
       )
-        td
-          dito-label(
-            v-if="property.label !== false"
-            :dataPath="getPropertyDataPath(property)"
-            :label="getLabel(property)"
-          )
-        dito-table-cell(
-          :cell="property"
-          :schema="property"
+      button.dito-button(
+        v-if="deletable"
+        type="button"
+        @click="onDelete"
+        v-bind="getButtonAttributes(verbs.delete)"
+      )
+  table.dito-properties(
+    v-if="properties"
+    v-show="opened"
+  )
+    tr(
+      v-for="property in properties"
+    )
+      td
+        dito-label(
+          v-if="property.label !== false"
           :dataPath="getPropertyDataPath(property)"
-          :data="data"
-          :meta="nestedMeta"
-          :store="store"
-          :disabled="disabled"
+          :label="getLabel(property)"
         )
-    vue-draggable(
-      v-if="childrenSchema"
-      v-show="opened"
-      v-bind="getDragOptions(childrenDraggable, true)"
-      :list="updateOrder(childrenSchema, childrenList)"
-      @start="onStartDrag"
-      @end="onEndDrag($event, childrenSchema)"
-    )
+      dito-table-cell(
+        :cell="property"
+        :schema="property"
+        :dataPath="getPropertyDataPath(property)"
+        :data="data"
+        :meta="nestedMeta"
+        :store="store"
+        :disabled="disabled"
+      )
+  vue-sortable(
+    v-if="childrenSchema"
+    v-show="opened"
+    :list="childrenItems"
+    :options="getDragOptions(childrenDraggable, true)"
+    :itemKey="item => getItemUid(childrenSchema, item.data)"
+    @start="onStartDrag"
+    @end="onEndDrag($event, childrenSchema)"
+  )
+    template(#item="{ element: item, index }")
       dito-tree-item(
-        v-for="(item, index) in childrenItems"
-        :key="getItemUid(childrenSchema, item.data)"
         :schema="childrenSchema"
         :dataPath="getItemDataPath(childrenSchema, index)"
         :data="item.data"
@@ -81,8 +81,8 @@
         :label="getItemLabel(childrenSchema, item.data, { index })"
         :level="level + 1"
       )
-      // TODO: Convert dito-tree-item to use dito-label internally, and then
-      // pass `asObject: true` in the `getItemLabel()` call above.
+      //- TODO: Convert dito-tree-item to use dito-label internally, and then
+      //- pass `asObject: true` in the `getItemLabel()` call above.
 </template>
 
 <style lang="sass">
@@ -151,7 +151,7 @@
 </style>
 
 <script>
-import VueDraggable from 'vuedraggable'
+import { Sortable as VueSortable } from 'sortablejs-vue3'
 import DitoComponent from '../DitoComponent.js'
 import OrderedMixin from '../mixins/OrderedMixin.js'
 import { appendDataPath } from '../utils/data.js'
@@ -160,7 +160,7 @@ import { getNamedSchemas, hasFormSchema } from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('dito-tree-item', {
-  components: { VueDraggable },
+  components: { VueSortable },
   mixins: [OrderedMixin],
   inject: ['container'],
 
@@ -240,28 +240,32 @@ export default DitoComponent.component('dito-tree-item', {
     },
 
     childrenItems() {
-      const { childrenSchema } = this
-      if (childrenSchema) {
+      const { childrenSchema, childrenList } = this
+      if (childrenSchema && childrenList) {
         const { editPath } = this.container
         const childrenOpen = !this.path && childrenSchema.open
         // Build a children list with child meta information for the template.
-        return this.childrenList?.map((data, index) => {
-          const path = (
-            childrenSchema.path &&
+        return this.updateOrder(
+          childrenSchema,
+          childrenList.map((data, index) => {
+            const path = (
+              childrenSchema.path &&
             `${this.path}/${childrenSchema.path}/${index}`
-          )
-          const open = childrenOpen ||
+            )
+            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,
-            path,
-            open,
-            active
-          }
-        }) || []
+            const active = editPath === path
+            return {
+              data,
+              path,
+              open,
+              active
+            }
+          })
+        )
       }
+      return []
     },
 
     details() {

package/src/components/DitoVNode.vue

@@ -1,12 +1,14 @@
 <script>
 import DitoComponent from '../DitoComponent.js'
 
-// A component to simply pass through an existing vue vnode.
-// See: https://forum.vuejs.org/t/28162/4
-
 // @vue/component
-export default DitoComponent.component('dito-vnode', {
-  functional: true,
-  render: (h, context) => context.props.node
-})
+function DitoVNode({ vnode }) {
+  return vnode
+}
+
+DitoVNode.props = {
+  vnode: { type: Object, required: true }
+}
+
+export default DitoComponent.component('dito-vnode', DitoVNode)
 </script>

package/src/components/DitoView.vue

@@ -1,25 +1,26 @@
 <template lang="pug">
-// 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(
-  v-if="!isLastRoute"
-  :key="name"
-)
-.dito-view.dito-scroll-parent(
-  v-else-if="shouldRender(viewSchema)"
-  :data-resource="sourceSchema.path"
-)
-  dito-schema.dito-scroll(
-    :schema="viewSchema"
-    :data="data"
-    :meta="meta"
-    :store="getChildStore(name)"
-    :disabled="isLoading"
-    :generateLabels="false"
-    :menuHeader="true"
+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(
+    v-if="!isLastRoute"
+    :key="name"
   )
+  .dito-view.dito-scroll-parent(
+    v-else-if="shouldRender(viewSchema)"
+    :data-resource="sourceSchema.path"
+  )
+    dito-schema.dito-scroll(
+      :schema="viewSchema"
+      :data="data"
+      :meta="meta"
+      :store="getChildStore(name)"
+      :disabled="isLoading"
+      :generateLabels="false"
+      :menuHeader="true"
+    )
 </template>
 
 <script>
@@ -42,7 +43,6 @@ export default DitoComponent.component('dito-view', {
 
   data() {
     return {
-      isView: true,
       // Updated from LoadingMixin through `setLoading(isLoading)`:
       isLoading: false,
       // NOTE: Data is shared across all views because the router recycles the
@@ -60,6 +60,10 @@ export default DitoComponent.component('dito-view', {
       return this.schema.name
     },
 
+    isView() {
+      return true
+    },
+
     isSingleComponentView() {
       return isSingleComponentView(this.schema)
     },

package/src/mixins/DataMixin.js

@@ -1,6 +1,7 @@
 import {
   isObject, isFunction, isPromise, normalizeDataPath, getValueAtDataPath
 } from '@ditojs/utils'
+import { reactive } from 'vue'
 import LoadingMixin from './LoadingMixin.js'
 
 // @vue/component
@@ -25,8 +26,7 @@ export default {
       let { data = undefined, dataPath = null } = schema
       // See if there is async data loading already in process.
       const asyncEntry = (
-        this.asyncDataEntries[name] ||
-        this.$set(this.asyncDataEntries, name, {
+        this.asyncDataEntries[name] ||= reactive({
           dependencyFunction: null,
           resolveCounter: 0,
           resolvedData: null,