@ditojs/admin 1.30.0 → 2.0.0

package/src/components/DitoCreateButton.vue

@@ -1,29 +1,29 @@
 <template lang="pug">
-  .dito-create-button
-    template(v-if="showPulldown")
-      button.dito-button(
-        type="button"
-        @mousedown.stop="onPulldownMouseDown()"
-        :class="`dito-button-${verb}`"
-        :title="labelize(verb)"
-      ) {{ text }}
-      ul.dito-pulldown(
-        :class="{ 'dito-open': pulldown.open }"
-      )
-        li(v-for="(form, type) in forms")
-          a(
-            v-if="isCreatable(form)"
-            :class="`dito-type-${type}`"
-            @mousedown.stop="onPulldownMouseDown(type)"
-            @mouseup="onPulldownMouseUp(type)"
-          ) {{ getLabel(form) }}
+.dito-create-button
+  template(v-if="showPulldown")
     button.dito-button(
-      v-else
-      :type="isInlined ? 'button' : 'submit'"
-      @click="createItem(forms.default)"
+      type="button"
+      @mousedown.stop="onPulldownMouseDown()"
       :class="`dito-button-${verb}`"
       :title="labelize(verb)"
     ) {{ text }}
+    ul.dito-pulldown(
+      :class="{ 'dito-open': pulldown.open }"
+    )
+      li(v-for="(form, type) in forms")
+        a(
+          v-if="isCreatable(form)"
+          :class="`dito-type-${type}`"
+          @mousedown.stop="onPulldownMouseDown(type)"
+          @mouseup="onPulldownMouseUp(type)"
+        ) {{ getLabel(form) }}
+  button.dito-button(
+    v-else
+    :type="isInlined ? 'button' : 'submit'"
+    @click="createItem(forms.default)"
+    :class="`dito-button-${verb}`"
+    :title="labelize(verb)"
+  ) {{ text }}
 </template>
 
 <style lang="sass">
@@ -76,8 +76,7 @@ export default DitoComponent.component('dito-create-button', {
         } else {
           this.$router.push({
             path: `${this.path}/create`,
-            query: { type },
-            append: true
+            query: { type }
           })
         }
       } else {

package/src/components/DitoDialog.vue

@@ -1,19 +1,63 @@
 <template lang="pug">
-  form.dito-dialog(@submit.prevent="submit")
+.dito-dialog(
+  role="dialog"
+  aria-expanded="true"
+  aria-modal="true"
+  :style="{ '--width': `${settings.width}px` }"
+  @click="settings.clickToClose && close()"
+)
+  form.dito-scroll-parent(@submit.prevent="submit")
     dito-schema.dito-scroll(
       :schema="schema"
       :data="dialogData"
     )
-      dito-buttons.dito-buttons-large(
-        slot="buttons"
-        :buttons="buttonSchemas"
-        :data="dialogData"
-      )
+      template(#buttons)
+        dito-buttons.dito-buttons-large(
+          :buttons="buttonSchemas"
+          :data="dialogData"
+        )
 </template>
 
 <style lang="sass">
-  .v--modal-overlay
+  @import '../styles/_imports'
+
+  .dito-dialog
+    position: fixed
+    display: flex
+    inset: 0
     z-index: 2000
+    padding: $content-padding
+    align-items: center
+    justify-content: center
+    // Prevent scrolling of the page behind the dialog:
+    overflow: hidden
+    background: rgba(0, 0, 0, 0.2)
+
+    // TODO: `&__inner`
+    form
+      position: relative
+      display: flex
+      overflow: hidden
+      box-sizing: border-box
+      background: white
+      border-radius: $border-radius
+      max-width: var(--width, 480px)
+      max-height: 100%
+      box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4)
+
+  .dito-dialog-enter-active,
+  .dito-dialog-leave-active
+    transition: opacity 0.15s
+
+    form
+      transition: transform 0.25s
+
+  .dito-dialog-enter-from,
+  .dito-dialog-leave-to
+    opacity: 0
+
+    form
+      transform: translateY(-20px)
 </style>
 
 <script>
@@ -34,7 +78,14 @@ export default DitoComponent.component('dito-dialog', {
     components: { type: Object, required: true },
     buttons: { type: Object, required: true },
     promise: { type: Object, required: true },
-    data: { type: Object, default: () => ({}) }
+    data: { type: Object, default: () => ({}) },
+    settings: {
+      type: Object,
+      default: () => ({
+        width: 480,
+        clickToClose: false
+      })
+    }
   },
 
   data() {
@@ -56,10 +107,6 @@ export default DitoComponent.component('dito-dialog', {
       return this
     },
 
-    name() {
-      return this.$parent.name
-    },
-
     schema() {
       return {
         components: this.components
@@ -86,6 +133,10 @@ export default DitoComponent.component('dito-dialog', {
       )
     },
 
+    hasButtons() {
+      return Object.keys(this.buttonSchemas).length > 0
+    },
+
     hasCancel() {
       return !!this.buttonSchemas.cancel
     }
@@ -94,30 +145,30 @@ export default DitoComponent.component('dito-dialog', {
   mounted() {
     this.windowEvents = addEvents(window, {
       keyup: event => {
-        if (this.hasCancel && event.keyCode === 27) {
+        if ((this.hasCancel || !this.hasButtons) && event.keyCode === 27) {
           this.cancel()
         }
       }
     })
   },
 
-  destroyed() {
+  unmounted() {
     this.windowEvents.remove()
   },
 
   methods: {
-    hide() {
-      this.$modal.hide(this.name)
+    remove() {
+      this.$emit('remove')
     },
 
     resolve(value) {
       this.promise.resolve(value)
-      this.hide()
+      this.remove()
     },
 
     reject(value) {
       this.promise.reject(value)
-      this.hide()
+      this.remove()
     },
 
     submit() {
@@ -126,6 +177,10 @@ export default DitoComponent.component('dito-dialog', {
 
     cancel() {
       this.resolve(null)
+    },
+
+    close() {
+      this.cancel()
     }
   }
 })

package/src/components/DitoEditButtons.vue

@@ -1,36 +1,36 @@
 <template lang="pug">
-  dito-buttons.dito-edit-buttons.dito-buttons-round(
-    :buttons="buttons"
-    :dataPath="dataPath"
-    :data="data"
-    :meta="meta"
-    :store="store"
-    /* Prevent click events from bubbling to dito-label: */
-    @click.stop
+dito-buttons.dito-edit-buttons.dito-buttons-round(
+  :buttons="buttons"
+  :dataPath="dataPath"
+  :data="data"
+  :meta="meta"
+  :store="store"
+  /* Prevent click events from bubbling to dito-label: */
+  @click.stop
+)
+  //- Firefox doesn't like <button> here, so use <a> instead:
+  a.dito-button(
+    v-if="isDraggable"
+    v-bind="getButtonAttributes(verbs.drag)"
+  )
+  router-link.dito-button(
+    v-if="isEditable"
+    :to="{ path: editPath }"
+    v-bind="getButtonAttributes(verbs.edit)"
+  )
+  dito-create-button(
+    v-if="isCreatable"
+    :schema="schema"
+    :path="createPath"
+    :verb="verbs.create"
+    :text="createButtonText"
+  )
+  button.dito-button(
+    v-if="isDeletable"
+    type="button"
+    v-bind="getButtonAttributes(verbs.delete)"
+    @click="$emit('delete')"
   )
-    //- Firefox doesn't like <button> here, so use <a> instead:
-    a.dito-button(
-      v-if="isDraggable"
-      v-bind="getButtonAttributes(verbs.drag)"
-    )
-    router-link.dito-button(
-      v-if="isEditable"
-      :to="{ path: editPath }" append
-      v-bind="getButtonAttributes(verbs.edit)"
-    )
-    dito-create-button(
-      v-if="isCreatable"
-      :schema="schema"
-      :path="createPath"
-      :verb="verbs.create"
-      :text="createButtonText"
-    )
-    button.dito-button(
-      v-if="isDeletable"
-      type="button"
-      v-bind="getButtonAttributes(verbs.delete)"
-      @click="$emit('delete')"
-    )
 </template>
 
 <style lang="sass">

package/src/components/DitoElement.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-  component(
-    v-if="content"
-    :is="options.tag || tag"
-    :class="classes"
-    :style="styles"
-  ) {{ options.text }}
+component(
+  v-if="content"
+  :is="options.tag || tag"
+  :class="classes"
+  :style="styles"
+) {{ options.text }}
 </template>
 
 <script>

package/src/components/DitoErrors.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-  .dito-errors(
-    v-if="errors"
-  )
-    ul
-      li(v-for="error of errors")
-        | {{ error }}
+.dito-errors(
+  v-if="errors"
+)
+  ul
+    li(v-for="error of errors")
+      | {{ error }}
 </template>
 
 <style lang="sass">

package/src/components/DitoForm.vue

@@ -3,29 +3,20 @@
   :class="{ 'dito-form-nested': isNestedRoute }"
   :data-resource="sourceSchema.path"
 )
-  // NOTE: Nested form components are kept alive by using `v-show` instead of
-  // `v-if` here, so event handling and other things still work with nested
-  // editing. Only render a router-view here if this isn't the last data route
-  // and not a nested form route, which will appear elsewhere in its own view.
+  //- NOTE: Nested form components are kept alive by using `v-show` instead of
+  //- `v-if` here, so event handling and other things still work with nested
+  //- editing. Only render a router-view here if this isn't the last data route
+  //- and not a nested form route, which will appear elsewhere in its own view.
   router-view(
     v-if="!(isLastUnnestedRoute || isNestedRoute)"
     v-show="!isActive"
   )
-  // Use a <div> for inlined forms, as we shouldn't nest actual <form> tags.
+  //- Use a <div> for inlined forms, as we shouldn't nest actual <form> tags.
   component.dito-scroll(
     v-show="isActive"
     :is="isNestedRoute ? 'div' : 'form'"
     @submit.prevent
   )
-    // Prevent implicit submission of the form, for example when typing enter
-    // in an input field.
-    // https://stackoverflow.com/a/51507806
-    button(
-      v-show="false"
-      type="submit"
-      disabled="true"
-      aria-hidden="true"
-    )
     dito-schema(
       :schema="schema"
       :dataPath="dataPath"
@@ -35,15 +26,23 @@
       :disabled="isLoading"
       :menuHeader="true"
     )
-      dito-buttons.dito-buttons-round.dito-buttons-main.dito-buttons-large(
-        slot="buttons"
-        :buttons="buttonSchemas"
-        :dataPath="dataPath"
-        :data="data"
-        :meta="meta"
-        :store="store"
-        :disabled="isLoading"
-      )
+      template(#buttons)
+        dito-buttons.dito-buttons-round.dito-buttons-main.dito-buttons-large(
+          :buttons="buttonSchemas"
+          :dataPath="dataPath"
+          :data="data"
+          :meta="meta"
+          :store="store"
+          :disabled="isLoading"
+        )
+    //- Prevent implicit submission of the form, for example when typing enter
+    //- in an input field.
+    //- https://stackoverflow.com/a/51507806
+    button(
+      v-show="false"
+      type="submit"
+      disabled
+    )
 </template>
 
 <script>
@@ -53,6 +52,7 @@ import RouteMixin from '../mixins/RouteMixin.js'
 import ResourceMixin from '../mixins/ResourceMixin.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
 import { getButtonSchemas, isObjectSource } from '../utils/schema.js'
+import { resolvePath } from '../utils/path.js'
 
 // @vue/component
 export default DitoComponent.component('dito-form', {
@@ -104,7 +104,7 @@ export default DitoComponent.component('dito-form', {
               }
             },
 
-            submit: !this.doesMutate && {
+            submit: !this.isMutating && {
               type: 'submit',
               // Submit buttons close the form by default:
               closeForm: true,
@@ -132,18 +132,18 @@ export default DitoComponent.component('dito-form', {
     },
 
     isDirty() {
-      return !this.doesMutate && !!this.mainSchemaComponent?.isDirty
+      return !this.isMutating && !!this.mainSchemaComponent?.isDirty
     },
 
-    selectedTab() {
-      return this.mainSchemaComponent?.selectedTab || null
-    },
-
-    doesMutate() {
+    isMutating() {
       // When `sourceSchema.mutate` is true, the form edits the inherited data
-      // directly instead of making a copy for application upon submit.
+      // directly instead of making a copy for persistence upon submission.
       // See `inheritedData()` computed property for more details.
-      return this.sourceSchema.mutate
+      return !!this.sourceSchema.mutate
+    },
+
+    selectedTab() {
+      return this.mainSchemaComponent?.selectedTab || null
     },
 
     type() {
@@ -190,7 +190,9 @@ export default DitoComponent.component('dito-form', {
       // Possible parents are DitoForm for forms, or DitoView for root lists.
       // Both have a data property which abstracts away loading and inheriting
       // of data.
-      let { data } = this.parentRouteComponent
+      // Forms that are about to be destroyed due to navigation loose their
+      // route-record, but might still trigger this getter. Filter those out.
+      let data = this.routeRecord ? this.parentRouteComponent.data : null
       if (data) {
         // Handle nested data by splitting the dataPath, iterate through the
         // actual data and look nest child-data up.
@@ -240,7 +242,7 @@ export default DitoComponent.component('dito-form', {
         this.sourceKey !== null
       ) {
         let data = this.sourceData[this.sourceKey]
-        if (!this.doesMutate) {
+        if (!this.isMutating) {
           // Use a trick to store cloned inherited data in clonedData, to make
           // it reactive and prevent it from being cloned multiple times.
           this.clonedData = data = clone(data)
@@ -251,7 +253,8 @@ export default DitoComponent.component('dito-form', {
           isObjectSource(this.sourceSchema)
         ) {
           // If data of an object source is null, redirect to its create route.
-          this.$router.push({ path: 'create', append: true })
+          // TODO: This is a hack, move to a watcher!
+          this.$router.push({ path: `${this.path}/create` })
         }
         return data
       }
@@ -298,11 +301,7 @@ export default DitoComponent.component('dito-form', {
     setSourceData(data) {
       if (this.sourceData && this.sourceKey !== null) {
         const { mainSchemaComponent } = this
-        this.$set(
-          this.sourceData,
-          this.sourceKey,
-          mainSchemaComponent.filterData(data)
-        )
+        this.sourceData[this.sourceKey] = mainSchemaComponent.filterData(data)
         mainSchemaComponent.onChange()
         return true
       }
@@ -332,9 +331,9 @@ export default DitoComponent.component('dito-form', {
       }
     },
 
-    clearClonedData(newValue, oldValue) {
+    clearClonedData(to, from) {
       // Only clear if the watched sourceData itself changes in the form.
-      if (newValue !== oldValue) {
+      if (to !== from) {
         this.clonedData = undefined
       }
     },
@@ -433,7 +432,7 @@ export default DitoComponent.component('dito-form', {
         } else if (this.isCreating) {
           // Redirect to the form editing the newly created item:
           const id = this.getItemId(this.schema, this.data)
-          this.$router.replace({ path: `../${id}`, append: true })
+          this.$router.replace({ path: resolvePath(`${this.path}/../${id}`) })
         }
       }
       return success

package/src/components/DitoFormNested.vue

@@ -2,13 +2,17 @@
   .dito-form-nested
     &,
     .dito-scroll
-      // No scrolling inside nested forms, and prevent open .multiselect from
-      // being cropped.
+      //- No scrolling inside nested forms, and prevent open .multiselect from
+      //- being cropped.
       overflow: visible
 </style>
 
 <script>
+import DitoComponent from '../DitoComponent.js'
 import DitoForm from './DitoForm.vue'
 
-export default DitoForm.component('dito-form-nested', {})
+// @vue/component
+export default DitoComponent.component('dito-form-nested', {
+  extends: DitoForm
+})
 </script>

package/src/components/DitoHeader.vue

@@ -1,18 +1,18 @@
 <template lang="pug">
-  nav.dito-header
-    .dito-trail
-      ul
-        li(
-          v-for="(component, index) in trail"
-        )
-          template(v-if="index === trail.length - 1")
-            span(:class="getBreadcrumbClass(component)")
-              | {{ component.breadcrumb }}
-          router-link.dito-breadcrumb(v-else, :to="component.path")
-            span(:class="getBreadcrumbClass(component)")
-              | {{ component.breadcrumb }}
-      spinner.dito-spinner(v-if="isLoading")
-    slot
+nav.dito-header
+  .dito-trail
+    ul
+      li(
+        v-for="(component, index) in trail"
+      )
+        template(v-if="index === trail.length - 1")
+          span(:class="getBreadcrumbClass(component)")
+            | {{ component.breadcrumb }}
+        router-link.dito-breadcrumb(v-else, :to="component.path")
+          span(:class="getBreadcrumbClass(component)")
+            | {{ component.breadcrumb }}
+    dito-spinner(v-if="isLoading")
+  slot
 </template>
 
 <style lang="sass">
@@ -82,13 +82,11 @@
 
 <script>
 import DitoComponent from '../DitoComponent.js'
-import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
-
-const Spinner = DitoComponent.component('spinner', PulseLoader)
+import DitoSpinner from './DitoSpinner.vue'
 
 // @vue/component
 export default DitoComponent.component('dito-header', {
-  components: { Spinner },
+  components: { DitoSpinner },
 
   props: {
     spinner: {
@@ -114,7 +112,9 @@ export default DitoComponent.component('dito-header', {
       size = '8px',
       color = '#999'
     } = this.spinner || {}
-    const { props } = Spinner.options
+    // TODO: This is a hack to set the default props for the DitoSpinner.
+    // Pass them on through the template instead!
+    const { props } = DitoSpinner
     props.size.default = size
     props.color.default = color
   },

package/src/components/DitoLabel.vue

@@ -1,28 +1,28 @@
 <template lang="pug">
-  component.dito-label(
-    v-if="text || collapsible"
-    :is="tag"
-    v-on="listeners"
-    :class="{ 'dito-active': isActive }"
+component.dito-label(
+  v-if="text || collapsible"
+  :is="tag"
+  v-bind="attributes"
+  :class="{ 'dito-active': isActive }"
+)
+  .dito-chevron(
+    v-if="collapsible"
+    :class="{ 'dito-opened': !collapsed }"
   )
-    .dito-chevron(
-      v-if="collapsible"
-      :class="{ 'dito-opened': !collapsed }"
-    )
-    dito-element.dito-label-prefix(
-      v-for="(prefix, index) of prefixes"
-      tag="span"
-      :key="`prefix-${index}`"
-      :content="prefix"
-    )
-    label(:for="dataPath" v-html="text")
-    dito-element.dito-label-suffix(
-      v-for="(suffix, index) of suffixes"
-      tag="span"
-      :key="`suffix-${index}`"
-      :content="suffix"
-    )
-    slot(name="edit-buttons")
+  dito-element.dito-label-prefix(
+    v-for="(prefix, index) of prefixes"
+    tag="span"
+    :key="`prefix-${index}`"
+    :content="prefix"
+  )
+  label(:for="dataPath" v-html="text")
+  dito-element.dito-label-suffix(
+    v-for="(suffix, index) of suffixes"
+    tag="span"
+    :key="`suffix-${index}`"
+    :content="suffix"
+  )
+  slot(name="edit-buttons")
 </template>
 
 <style lang="sass">
@@ -129,10 +129,10 @@ export default DitoComponent.component('dito-label', {
       return asArray(this.label?.suffix)
     },
 
-    listeners() {
+    attributes() {
       return {
         ...(this.collapsible && {
-          click: this.onClick
+          onClick: this.onClick
         })
       }
     },

package/src/components/DitoMenu.vue

@@ -1,13 +1,13 @@
 <template lang="pug">
-  nav.dito-menu.dito-scroll-parent
-    h1 {{ appState.title }}
-    ul.dito-scroll
-      li(v-for="view in views")
-        router-link.dito-link(
-          v-if="shouldRender(view)"
-          :to="`/${view.path}`"
-          active-class="dito-active"
-        ) {{ getLabel(view) }}
+nav.dito-menu.dito-scroll-parent
+  h1 {{ appState.title }}
+  ul.dito-scroll
+    li(v-for="view in views")
+      router-link.dito-link(
+        v-if="shouldRender(view)"
+        :to="`/${view.path}`"
+        active-class="dito-active"
+      ) {{ getLabel(view) }}
 </template>
 
 <style lang="sass">

package/src/components/DitoPagination.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-  pagination(
-    :pageSize="limit"
-    :total="total"
-    :page.sync="page"
-  )
+pagination(
+  :pageSize="limit"
+  :total="total"
+  v-model:page="page"
+)
 </template>
 
 <script>