@ditojs/admin 1.29.0 → 2.0.0

package/src/components/DitoPane.vue

@@ -1,36 +1,36 @@
 <template lang="pug">
-  .dito-pane(
-    v-if="isPopulated && componentSchemas.length > 0"
-    v-show="visible"
+.dito-pane(
+  v-if="isPopulated && componentSchemas.length > 0"
+  v-show="visible"
+)
+  template(
+    v-for=`{
+      schema,
+      dataPath,
+      nestedDataPath,
+      nested,
+      store
+    } in componentSchemas`
   )
-    template(
-      v-for=`{
-        schema,
-        dataPath,
-        nestedDataPath,
-        nested,
-        store
-      } in componentSchemas`
+    .dito-break(
+      v-if="schema.break === 'before'"
+    )
+    dito-container(
+      v-if="shouldRender(schema)"
+      :key="nestedDataPath"
+      :schema="schema"
+      :dataPath="dataPath"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :single="isSingleComponent"
+      :nested="nested"
+      :disabled="disabled"
+      :generateLabels="generateLabels"
+    )
+    .dito-break(
+      v-if="schema.break === 'after'"
     )
-      .dito-break(
-        v-if="schema.break === 'before'"
-      )
-      dito-container(
-        v-if="shouldRender(schema)"
-        :key="nestedDataPath"
-        :schema="schema"
-        :dataPath="dataPath"
-        :data="data"
-        :meta="meta"
-        :store="store"
-        :single="isSingleComponent"
-        :nested="nested"
-        :disabled="disabled"
-        :generateLabels="generateLabels"
-      )
-      .dito-break(
-        v-if="schema.break === 'after'"
-      )
 </template>
 
 <style lang="sass">
@@ -149,7 +149,7 @@ export default DitoComponent.component('dito-pane', {
     this._register(true)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this._register(false)
   },
 
@@ -160,7 +160,7 @@ export default DitoComponent.component('dito-pane', {
 
     focus() {
       if (this.tab) {
-        this.$router.push({ hash: this.tab })
+        this.$router.push({ hash: `#${this.tab}` })
       }
     }
   }

package/src/components/DitoPanel.vue

@@ -1,22 +1,22 @@
 <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)"
-    @submit.prevent
+//- Only show panels in tabs when the tabs are also visible.
+component.dito-panel(
+  :is="panelTag"
+  v-show="visible && (!panelTabComponent || panelTabComponent.visible)"
+  @submit.prevent
+)
+  label.dito-panel-title {{ getLabel(schema) }}
+  dito-schema.dito-panel-schema(
+    :schema="panelSchema"
+    :dataPath="panelDataPath"
+    :data="panelData"
+    :meta="meta"
+    :store="store"
+    :disabled="disabled"
+    :hasOwnData="hasOwnData"
   )
-    label.dito-panel-title {{ getLabel(schema) }}
-    dito-schema.dito-panel-schema(
-      :schema="panelSchema"
-      :dataPath="panelDataPath"
-      :data="panelData"
-      :meta="meta"
-      :store="store"
-      :disabled="disabled"
-      :hasOwnData="hasOwnData"
-    )
+    template(#buttons)
       dito-buttons(
-        slot="buttons"
         :buttons="buttonSchemas"
         :dataPath="panelDataPath"
         :data="panelData"
@@ -89,7 +89,7 @@ export default DitoComponent.component('dito-panel', {
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
     disabled: { type: Boolean, required: true },
-    panelTabComponent: { type: DitoComponent, default: null }
+    panelTabComponent: { type: Object, default: null }
   },
 
   data() {
@@ -164,7 +164,7 @@ export default DitoComponent.component('dito-panel', {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this._register(false)
   },
 

package/src/components/DitoPanels.vue

@@ -1,9 +1,11 @@
 <template lang="pug">
-  .dito-panels(
-    v-if="panels.length > 0"
+.dito-panels(
+  v-if="panels.length > 0"
+)
+  template(
+    v-for="{ schema, dataPath, tabComponent } in panels"
   )
     dito-panel(
-      v-for="{ schema, dataPath, tabComponent } in panels"
       v-if="shouldRender(schema)"
       :key="getPanelKey(dataPath, tabComponent)"
       :schema="schema"

package/src/components/DitoRoot.vue

@@ -1,33 +1,48 @@
 <template lang="pug">
-  .dito-root
-    notifications.dito-notifications(
-      ref="notifications"
-      position="top right"
-      classes="dito-notification"
+.dito-root
+  vue-notifications.dito-notifications(
+    ref="notifications"
+    position="top right"
+    classes="dito-notification"
+  )
+  transition-group(name="dito-dialog")
+    dito-dialog(
+      v-for="(dialog, key) in dialogs"
+      :key="key"
+      :components="dialog.components"
+      :buttons="dialog.buttons"
+      :promise="dialog.promise"
+      :data="dialog.data"
+      :settings="dialog.settings"
+      @remove="removeDialog(key)"
+    )
+  dito-menu
+  main.dito-page.dito-scroll-parent
+    dito-header(
+      :spinner="options.spinner"
+      :isLoading="isLoading"
     )
-    dito-menu
-    main.dito-page.dito-scroll-parent
-      dito-header(
-        :spinner="options.spinner"
-        :isLoading="isLoading"
+      dito-account(
+        v-if="user"
+      )
+      a.dito-login(
+        v-else-if="allowLogin"
+        @click="rootComponent.login()"
       )
-        dito-account(
-          v-if="user"
-        )
-        a.dito-login(
-          v-else-if="allowLogin"
-          @click="rootComponent.login()"
-        )
-          span Login
-      router-view
+        span Login
+    router-view
 </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
@@ -41,15 +56,19 @@
 </style>
 
 <script>
-import { asArray, stripTags } from '@ditojs/utils'
+import { asArray, mapConcurrently, stripTags } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DitoUser from '../DitoUser.js'
 import DitoView from '../components/DitoView.vue'
+import DitoDialog from './DitoDialog.vue'
 import DomMixin from '../mixins/DomMixin.js'
-import { processView, resolveSchemas } from '../utils/schema.js'
+import {
+  processView, resolveSchemas, processSchemaComponents
+} from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('dito-root', {
+  components: { DitoDialog },
   mixins: [DomMixin],
 
   provide() {
@@ -66,6 +85,8 @@ export default DitoComponent.component('dito-root', {
   data() {
     return {
       resolvedViews: {},
+      removeRoutes: null,
+      dialogs: {},
       allowLogin: false,
       loadingCount: 0
     }
@@ -156,6 +177,37 @@ export default DitoComponent.component('dito-root', {
       this.loadingCount += isLoading ? 1 : -1
     },
 
+    showDialog({ components, buttons, data, settings }) {
+      // Shows a dito-dialog component and wraps it in a promise so that the
+      // buttons in the dialog can use `dialog.resolve()` and `dialog.reject()`
+      // to close the modal dialog and resolve / reject the promise at once.
+      return new Promise(
+        // eslint-disable-next-line no-async-promise-executor
+        async (resolve, reject) => {
+          // Process components to resolve async schemas.
+          const routes = []
+          await processSchemaComponents(this.api, { components }, routes, 0)
+          if (routes.length > 0) {
+            throw new Error(
+              `Dialog components cannot contain routes, only components with schemas.`
+            )
+          }
+          const key = `dialog-${++dialogId}`
+          this.dialogs[key] = {
+            components,
+            buttons,
+            data,
+            settings,
+            promise: { resolve, reject }
+          }
+        }
+      )
+    },
+
+    removeDialog(key) {
+      delete this.dialogs[key]
+    },
+
     async login() {
       this.allowLogin = true
       const {
@@ -272,16 +324,41 @@ export default DitoComponent.component('dito-root', {
         return this.login()
       }
       // Collect all routes from the root schema components
-      const routes = []
-      const promises = []
-      for (const [name, schema] of Object.entries(this.resolvedViews)) {
-        promises.push(processView(DitoView, this.api, schema, name, routes))
-      }
-      await Promise.all(promises)
-      for (const route of routes) {
-        this.$router.addRoute(route)
-      }
+      const routes = await mapConcurrently(
+        Object.entries(this.resolvedViews),
+        ([name, schema]) => processView(DitoView, this.api, schema, name)
+      )
+      // Now that the routes are loaded, replace all existing routes with the
+      // new routes, and restore the current path.
+      const { fullPath } = this.$route
+      this.removeRoutes?.()
+      this.removeRoutes = addRoutes(this.$router, [
+        {
+          name: 'root',
+          path: '/',
+          components: {}
+        },
+        ...routes
+      ])
+      this.$router.replace(fullPath)
     }
   }
+
 })
+
+let dialogId = 0
+
+function addRoutes(router, routes) {
+  const removers = []
+  for (const route of routes) {
+    const removeRoute = router.addRoute(route)
+    removers.push(removeRoute)
+  }
+
+  return () => {
+    for (const remove of removers) {
+      remove()
+    }
+  }
+}
 </script>

package/src/components/DitoSchema.vue

@@ -1,82 +1,82 @@
 <template lang="pug">
-  .dito-schema
-    .dito-schema-content
-      .dito-schema-header(
-        v-if="hasLabel || hasTabs || clipboard"
-        :class="{ 'dito-schema-menu-header': menuHeader }"
-      )
-        dito-label(
-          v-if="hasLabel"
-          :label="label"
-          :dataPath="dataPath"
-          :collapsible="collapsible"
-          :collapsed="!opened"
-          @expand="onExpand"
-        )
-          // Pass edit-buttons through to dito-label's own edit-buttons slot:
-          template(
-            #edit-buttons
-            v-if="inlined"
-          )
-            slot(name="edit-buttons")
-        dito-tabs(
-          v-if="tabs"
-          :tabs="tabs"
-          :selectedTab="selectedTab"
-        )
-        dito-clipboard(
-          :clipboard="clipboard"
-          :dataPath="dataPath"
-          :data="data"
-        )
-      dito-pane.dito-pane-tab(
-        v-if="hasTabs"
-        v-for="(schema, tab) in tabs"
-        ref="tabs"
-        :key="tab"
-        :visible="selectedTab === tab"
-        :tab="tab"
-        :schema="schema"
+.dito-schema
+  .dito-schema-content
+    .dito-schema-header(
+      v-if="hasLabel || hasTabs || clipboard"
+      :class="{ 'dito-schema-menu-header': menuHeader }"
+    )
+      dito-label(
+        v-if="hasLabel"
+        :label="label"
         :dataPath="dataPath"
-        :data="data"
-        :meta="meta"
-        :store="store"
-        :single="!inlined && !hasMainPane"
-        :disabled="disabled"
-        :generateLabels="generateLabels"
+        :collapsible="collapsible"
+        :collapsed="!opened"
+        @expand="onExpand"
       )
-      transition-height(
-        :enabled="inlined"
-      )
-        dito-pane.dito-pane-main(
-          v-if="hasMainPane && opened"
-          ref="components"
-          :schema="schema"
-          :dataPath="dataPath"
-          :data="data"
-          :meta="meta"
-          :store="store"
-          :single="!inlined && !hasTabs"
-          :disabled="disabled"
-          :generateLabels="generateLabels"
+        //- Pass edit-buttons through to dito-label's own edit-buttons slot:
+        template(
+          #edit-buttons
+          v-if="inlined"
         )
-      slot(
-        name="buttons"
-        v-if="!inlined && isPopulated"
+          slot(name="edit-buttons")
+      dito-tabs(
+        v-if="tabs"
+        :tabs="tabs"
+        :selectedTab="selectedTab"
       )
-    template(v-if="inlined")
-      slot(
-        v-if="!hasLabel"
-        name="edit-buttons"
+      dito-clipboard(
+        :clipboard="clipboard"
+        :dataPath="dataPath"
+        :data="data"
       )
-    template(v-else-if="isPopulated")
-      dito-panels(
-        :panels="panelSchemas"
+    dito-pane.dito-pane-tab(
+      v-if="hasTabs"
+      v-for="(schema, tab) in tabs"
+      ref="tabs"
+      :key="tab"
+      :visible="selectedTab === tab"
+      :tab="tab"
+      :schema="schema"
+      :dataPath="dataPath"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :single="!inlined && !hasMainPane"
+      :disabled="disabled"
+      :generateLabels="generateLabels"
+    )
+    transition-height(
+      :enabled="inlined"
+    )
+      dito-pane.dito-pane-main(
+        v-if="hasMainPane && opened"
+        ref="components"
+        :schema="schema"
+        :dataPath="dataPath"
         :data="data"
         :meta="meta"
         :store="store"
+        :single="!inlined && !hasTabs"
         :disabled="disabled"
+        :generateLabels="generateLabels"
       )
+    slot(
+      v-if="!inlined && isPopulated"
+      name="buttons"
+    )
+  template(v-if="inlined")
+    slot(
+      v-if="!hasLabel"
+      name="edit-buttons"
+    )
+  template(v-else-if="isPopulated")
+    dito-panels(
+      :panels="panelSchemas"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :disabled="disabled"
+    )
 </template>
 
 <style lang="sass">
@@ -220,7 +220,7 @@ export default DitoComponent.component('dito-schema', {
       // Don't return the actual parent schema is this schema handles its own
       // data. This prevents delegating events to the parent, and registering
       // components with the parent that would cause it to set isDirty flags.
-      return this.hasOwnData ? null : this.$parent.schemaComponent
+      return this.hasOwnData ? null : this.parentComponent.schemaComponent
     },
 
     panelSchemas() {
@@ -241,8 +241,9 @@ export default DitoComponent.component('dito-schema', {
         ? currentTab
         : this.defaultTab?.name || null
       if (tab !== currentTab) {
+        // TODO: Move this watcher!
         // Any tab change needs to be reflected in the router also.
-        this.$router.replace({ hash: tab })
+        this.$router.replace({ hash: `#${tab}` })
       }
       return tab
     },
@@ -385,7 +386,7 @@ export default DitoComponent.component('dito-schema', {
     this.emitEvent('initialize') // Not `'create'`, since that's for data.
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.emitEvent('destroy')
     this._register(false)
   },
@@ -616,7 +617,8 @@ export default DitoComponent.component('dito-schema', {
     setData(data) {
       for (const name in data) {
         if (name in this.data) {
-          this.$set(this.data, name, data[name])
+          // eslint-disable-next-line vue/no-mutating-props
+          this.data[name] = data[name]
           for (const component of this.getComponentsByName(name)) {
             component.markDirty()
           }
@@ -679,9 +681,9 @@ export default DitoComponent.component('dito-schema', {
     _registerEntry(registry, entry, add) {
       const uid = entry.$uid
       if (add) {
-        this.$set(registry, uid, entry)
+        registry[uid] = entry
       } else {
-        this.$delete(registry, uid)
+        delete registry[uid]
       }
     },
 

package/src/components/DitoSchemaInlined.vue

@@ -1,33 +1,33 @@
 <template lang="pug">
-  dito-schema.dito-schema-inlined(
-    :schema="schema"
-    :dataPath="dataPath"
-    :data="data"
-    :meta="meta"
-    :store="store"
-    :label="isCompact ? null : label"
-    :inlined="true"
-    :disabled="disabled"
-    :collapsed="collapsed"
-    :collapsible="collapsible"
-    :class="{ 'dito-schema-compact': isCompact }"
-  )
-    // Render dito-edit-buttons for inlined schemas separately from all
-    // others in `TypeList` as a scope, for better handling of layout.
-    template(#edit-buttons)
-      dito-edit-buttons(
-        v-if="deletable || draggable || editable"
-        :deletable="deletable"
-        :draggable="draggable"
-        :editable="editable"
-        :editPath="editPath"
-        :schema="schema"
-        :dataPath="dataPath"
-        :data="data"
-        :meta="meta"
-        :store="store"
-        @delete="$emit('delete')"
-      )
+dito-schema.dito-schema-inlined(
+  :schema="schema"
+  :dataPath="dataPath"
+  :data="data"
+  :meta="meta"
+  :store="store"
+  :label="isCompact ? null : label"
+  :inlined="true"
+  :disabled="disabled"
+  :collapsed="collapsed"
+  :collapsible="collapsible"
+  :class="{ 'dito-schema-compact': isCompact }"
+)
+  //- Render dito-edit-buttons for inlined schemas separately from all
+  //- others in `TypeList` as a scope, for better handling of layout.
+  template(#edit-buttons)
+    dito-edit-buttons(
+      v-if="deletable || draggable || editable"
+      :deletable="deletable"
+      :draggable="draggable"
+      :editable="editable"
+      :editPath="editPath"
+      :schema="schema"
+      :dataPath="dataPath"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      @delete="$emit('delete')"
+    )
 </template>
 
 <style lang="sass">
@@ -44,9 +44,12 @@
           --label-padding: #{$form-spacing}
           margin: 0
           width: 100%
-          box-sizing: border-box
+          box-sizing: content-box
           // Because tables have a funny way of allowing too much width growth:
           max-width: $content-width
+          // Prevent collapsing to min-height when alone in
+          // .dito-schema-content, due to grid-template-rows: min-content
+          min-height: 2em
         & +.dito-pane
           // Needed for transition-height in DitoSchema:
           min-height: $form-spacing

package/src/components/DitoScopes.vue

@@ -1,17 +1,18 @@
 <template lang="pug">
-  .dito-scopes
-    router-link(
-      v-for="(scope, key) in scopes"
-      :key="key"
-      :to="getScopeLink(scope)"
-      custom v-slot="{ navigate }"
-    )
-      button.dito-button(
-        type="button"
-        :class="{ 'dito-selected': scope.name === query.scope }"
-        :title="scope.hint || getLabel(scope)"
-        @click="navigate"
-      ) {{ getLabel(scope) }}
+.dito-scopes
+  router-link(
+    v-for="(scope, key) in scopes"
+    :key="key"
+    :to="getScopeLink(scope)"
+    custom
+    v-slot="{ navigate }"
+  )
+    button.dito-button(
+      type="button"
+      :class="{ 'dito-selected': scope.name === query.scope }"
+      :title="scope.hint || getLabel(scope)"
+      @click="navigate"
+    ) {{ getLabel(scope) }}
 </template>
 
 <style lang="sass">