@ditojs/admin 2.0.4 → 2.1.0

package/src/components/DitoCreateButton.vue

@@ -1,16 +1,18 @@
 <template lang="pug">
 .dito-create-button
-  template(v-if="showPulldown")
+  template(
+    v-if="showPulldown"
+  )
     button.dito-button(
       type="button"
-      @mousedown.stop="onPulldownMouseDown()"
       :class="`dito-button-${verb}`"
       :title="labelize(verb)"
+      @mousedown.stop="onPulldownMouseDown()"
     ) {{ text }}
-    ul.dito-pulldown(
-      :class="{ 'dito-open': pulldown.open }"
-    )
-      li(v-for="(form, type) in forms")
+    ul.dito-pulldown(:class="{ 'dito-open': pulldown.open }")
+      li(
+        v-for="(form, type) in forms"
+      )
         a(
           v-if="isCreatable(form)"
           :class="`dito-type-${type}`"
@@ -20,26 +22,19 @@
   button.dito-button(
     v-else
     :type="isInlined ? 'button' : 'submit'"
-    @click="createItem(forms.default)"
     :class="`dito-button-${verb}`"
     :title="labelize(verb)"
+    @click="createItem(forms.default)"
   ) {{ text }}
 </template>
 
-<style lang="sass">
-  .dito-create-button
-    position: relative
-    .dito-pulldown
-      right: 0
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 import PulldownMixin from '../mixins/PulldownMixin.js'
 import { getFormSchemas, isInlined } from '../utils/schema.js'
 
 // @vue/component
-export default DitoComponent.component('dito-create-button', {
+export default DitoComponent.component('DitoCreateButton', {
   mixins: [PulldownMixin],
 
   props: {
@@ -91,3 +86,13 @@ export default DitoComponent.component('dito-create-button', {
   }
 })
 </script>
+
+<style lang="scss">
+.dito-create-button {
+  position: relative;
+
+  .dito-pulldown {
+    right: 0;
+  }
+}
+</style>

package/src/components/DitoDialog.vue

@@ -1,73 +1,41 @@
 <template lang="pug">
 .dito-dialog(
+  ref="dialog"
   role="dialog"
   aria-expanded="true"
   aria-modal="true"
   :style="{ '--width': `${settings.width}px` }"
-  @click="settings.clickToClose && close()"
+  @mouseup="onMouseUp"
 )
-  form.dito-scroll-parent(@submit.prevent="submit")
-    dito-schema.dito-scroll(
-      :schema="schema"
-      :data="dialogData"
+  UseFocusTrap.dito-dialog__focus-trap(
+    :options="{ immediate: true, fallbackFocus: () => $refs.dialog }"
+  )
+    form.dito-scroll-parent(
+      @submit.prevent="submit"
     )
-      template(#buttons)
-        dito-buttons.dito-buttons-large(
-          :buttons="buttonSchemas"
-          :data="dialogData"
-        )
+      DitoSchema.dito-scroll(
+        :schema="schema"
+        :data="dialogData"
+      )
+        template(#buttons)
+          DitoButtons.dito-buttons-large(
+            :buttons="buttonSchemas"
+            :data="dialogData"
+          )
 </template>
 
-<style lang="sass">
-  @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>
 import { clone } from '@ditojs/utils'
 import { addEvents } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
 import { getButtonSchemas } from '../utils/schema.js'
+import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
 
 // @vue/component
-export default DitoComponent.component('dito-dialog', {
+export default DitoComponent.component('DitoDialog', {
+  components: { UseFocusTrap },
+  emits: ['remove'],
+
   provide() {
     return {
       $dialogComponent: () => this
@@ -181,7 +149,64 @@ export default DitoComponent.component('dito-dialog', {
 
     close() {
       this.cancel()
+    },
+
+    onMouseUp() {
+      if (this.settings.clickToClose) {
+        this.close()
+      }
     }
   }
 })
 </script>
+
+<style lang="scss">
+@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);
+
+  &__focus-trap {
+    height: 100%;
+  }
+
+  // TODO: `&__inner`
+  form {
+    position: relative;
+    display: flex;
+    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>

package/src/components/DitoEditButtons.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-dito-buttons.dito-edit-buttons.dito-buttons-round(
+//- Set `@click.stop` to prevent click events from bubbling to dito-label.
+DitoButtons.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:
@@ -13,12 +13,12 @@ dito-buttons.dito-edit-buttons.dito-buttons-round(
     v-if="isDraggable"
     v-bind="getButtonAttributes(verbs.drag)"
   )
-  router-link.dito-button(
+  RouterLink.dito-button(
     v-if="isEditable"
     :to="{ path: editPath }"
     v-bind="getButtonAttributes(verbs.edit)"
   )
-  dito-create-button(
+  DitoCreateButton(
     v-if="isCreatable"
     :schema="schema"
     :path="createPath"
@@ -33,19 +33,14 @@ dito-buttons.dito-edit-buttons.dito-buttons-round(
   )
 </template>
 
-<style lang="sass">
-  .dito-edit-buttons
-    // Override cursor from collapsible dito-label:
-    cursor: default
-    flex: none
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 import { capitalize } from '@ditojs/utils'
 
 // @vue/component
-export default DitoComponent.component('dito-edit-buttons', {
+export default DitoComponent.component('DitoEditButtons', {
+  emits: ['delete'],
+
   props: {
     draggable: { type: Boolean, default: false },
     editable: { type: Boolean, default: false },
@@ -85,8 +80,7 @@ export default DitoComponent.component('dito-edit-buttons', {
     createButtonText() {
       return (
         // Allow schema to override create button through creatable object:
-        this.schema.creatable?.label ||
-        (
+        this.schema.creatable?.label || (
           // Auto-generate create button labels from from labels for list
           // sources with only one form:
           this.formLabel &&
@@ -107,3 +101,11 @@ export default DitoComponent.component('dito-edit-buttons', {
   }
 })
 </script>
+
+<style lang="scss">
+.dito-edit-buttons {
+  // Override cursor from collapsible dito-label:
+  cursor: default;
+  flex: none;
+}
+</style>

package/src/components/DitoElement.vue

@@ -12,10 +12,10 @@ import DitoComponent from '../DitoComponent.js'
 import { isObject, isString, asArray } from '@ditojs/utils'
 
 // @vue/component
-export default DitoComponent.component('dito-element', {
+export default DitoComponent.component('DitoElement', {
   props: {
     tag: { type: String, default: 'span' },
-    content: { type: [String, Object] }
+    content: { type: [String, Object], default: null }
   },
 
   computed: {
@@ -50,5 +50,4 @@ function asObject(value) {
     return object
   }, {})
 }
-
 </script>

package/src/components/DitoErrors.vue

@@ -3,28 +3,33 @@
   v-if="errors"
 )
   ul
-    li(v-for="error of errors")
+    li(
+      v-for="error of errors"
+    )
       | {{ error }}
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-errors
-    position: absolute
-    z-index: 1
-    ul
-      margin-top: 1px
-      color: $color-error
-</style>
-
 <script>
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('dito-errors', {
+export default DitoComponent.component('DitoErrors', {
   props: {
     errors: { type: Array, default: null }
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-errors {
+  position: absolute;
+  z-index: 1;
+
+  ul {
+    margin-top: 1px;
+    color: $color-error;
+  }
+}
+</style>

package/src/components/DitoForm.vue

@@ -7,7 +7,7 @@
   //- `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(
+  RouterView(
     v-if="!(isLastUnnestedRoute || isNestedRoute)"
     v-show="!isActive"
   )
@@ -17,7 +17,7 @@
     :is="isNestedRoute ? 'div' : 'form'"
     @submit.prevent
   )
-    dito-schema(
+    DitoSchema(
       :schema="schema"
       :dataPath="dataPath"
       :data="data"
@@ -27,7 +27,7 @@
       :menuHeader="true"
     )
       template(#buttons)
-        dito-buttons.dito-buttons-round.dito-buttons-main.dito-buttons-large(
+        DitoButtons.dito-buttons-round.dito-buttons-main.dito-buttons-large(
           :buttons="buttonSchemas"
           :dataPath="dataPath"
           :data="data"
@@ -55,7 +55,7 @@ import { getButtonSchemas, isObjectSource } from '../utils/schema.js'
 import { resolvePath } from '../utils/path.js'
 
 // @vue/component
-export default DitoComponent.component('dito-form', {
+export default DitoComponent.component('DitoForm', {
   mixins: [RouteMixin, ResourceMixin],
 
   data() {
@@ -84,13 +84,15 @@ export default DitoComponent.component('dito-form', {
     },
 
     schema() {
-      return this.getItemFormSchema(
-        this.sourceSchema,
-        // If there is no data yet, provide an empty object with just the right
-        // type set, so the form can always be determined.
-        this.data || { type: this.type },
-        this.context
-      ) || {} // Always return a schema object so we don't need to check for it.
+      return (
+        this.getItemFormSchema(
+          this.sourceSchema,
+          // If there is no data yet, provide an empty object with just the
+          // right type set, so the form can always be determined.
+          this.data || { type: this.type },
+          this.context
+        ) || {}
+      ) // Always return a schema object so we don't need to check for it.
     },
 
     buttonSchemas() {
@@ -154,7 +156,7 @@ export default DitoComponent.component('dito-form', {
     itemId() {
       return this.isCreating
         ? null
-        : (this.param ?? null)
+        : this.param ?? null
     },
 
     method() {
@@ -203,6 +205,8 @@ export default DitoComponent.component('dito-form', {
         // parts that need to be treated like ids and mapped to indices in data.
         const pathParts = this.routeRecord.path.split('/')
         const routeParts = pathParts.slice(pathParts.length - dataParts.length)
+        // TODO: Fix side-effects
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.sourceKey = null
         const lastDataPart = dataParts[dataParts.length - 1]
         if (isObjectSource(this.sourceSchema) && lastDataPart === 'create') {
@@ -222,6 +226,8 @@ export default DitoComponent.component('dito-form', {
           // Skip the final lookup but remember `sourceKey`, as we want the
           // parent data so we can replace the entry at `sourceKey` on it.
           if (i === l - 1) {
+            // TODO: Fix side-effects
+            // eslint-disable-next-line
             this.sourceKey = key
           } else {
             data = data[key]
@@ -245,6 +251,8 @@ export default DitoComponent.component('dito-form', {
         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.
+          // TODO: Fix side-effects
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
           this.clonedData = data = clone(data)
         }
         if (
@@ -253,7 +261,8 @@ export default DitoComponent.component('dito-form', {
           isObjectSource(this.sourceSchema)
         ) {
           // If data of an object source is null, redirect to its create route.
-          // TODO: This is a hack, move to a watcher!
+          // TODO: Fix side-effects
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
           this.$router.push({ path: `${this.path}/create` })
         }
         return data
@@ -284,9 +293,11 @@ export default DitoComponent.component('dito-form', {
 
     getDataPathFrom(route) {
       // Get the data path by denormalizePath the relative route path
-      return this.api.denormalizePath(this.path
-        // DitoViews have nested routes, so don't remove their path.
-        .slice((route.isView ? 0 : route.path.length) + 1))
+      return this.api.denormalizePath(
+        this.path
+          // DitoViews have nested routes, so don't remove their path.
+          .slice((route.isView ? 0 : route.path.length) + 1)
+      )
     },
 
     // @override ResourceMixin.setupData()
@@ -348,8 +359,12 @@ export default DitoComponent.component('dito-form', {
 
     getSubmitVerb(present = true) {
       return this.isCreating
-        ? present ? 'create' : 'created'
-        : present ? 'submit' : 'submitted'
+        ? present
+          ? 'create'
+          : 'created'
+        : present
+          ? 'submit'
+          : 'submitted'
     },
 
     async submit(button, { validate = true, closeForm = false } = {}) {
@@ -370,9 +385,10 @@ export default DitoComponent.component('dito-form', {
       if (!buttonResource && this.isTransient) {
         success = await this.submitTransient(button, resource, method, data, {
           onSuccess: () => this.emitSchemaEvent(this.getSubmitVerb()),
-          onError: error => this.emitSchemaEvent('error', {
-            context: { error }
-          }),
+          onError: error =>
+            this.emitSchemaEvent('error', {
+              context: { error }
+            }),
           notifySuccess: () => {
             const verb = getVerb(false)
             this.notify({
@@ -401,9 +417,10 @@ export default DitoComponent.component('dito-form', {
         success = await this.submitResource(button, resource, method, data, {
           setData: true,
           onSuccess: () => this.emitSchemaEvent(this.getSubmitVerb()),
-          onError: error => this.emitSchemaEvent('error', {
-            context: { error }
-          }),
+          onError: error =>
+            this.emitSchemaEvent('error', {
+              context: { error }
+            }),
           notifySuccess: () => {
             const verb = getVerb(false)
             this.notify({

package/src/components/DitoFormNested.vue

@@ -1,18 +1,20 @@
-<style lang="sass">
-  .dito-form-nested
-    &,
-    .dito-scroll
-      //- 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'
 
 // @vue/component
-export default DitoComponent.component('dito-form-nested', {
+export default DitoComponent.component('DitoFormNested', {
   extends: DitoForm
 })
 </script>
+
+<style lang="scss">
+.dito-form-nested {
+  &,
+  .dito-scroll {
+    // No scrolling inside nested forms, and prevent open .multiselect from
+    // being cropped.
+    overflow: visible;
+  }
+}
+</style>