@radio-garden/ditojs-admin 2.85.2-0.5067ad799

package/src/components/DitoCreateButton.vue

@@ -0,0 +1,146 @@
+<template lang="pug">
+.dito-create-button
+  button.dito-button(
+    v-if="creatableForm"
+    :type="isInlined ? 'button' : 'submit'"
+    :disabled="disabled"
+    v-bind="getButtonAttributes(verb)"
+    @click="createItem(creatableForm)"
+  ) {{ text }}
+  template(
+    v-else-if="creatableForms"
+  )
+    button.dito-button(
+      type="button"
+      :disabled="disabled"
+      v-bind="getButtonAttributes(verb)"
+      @mousedown.stop="onPulldownMouseDown()"
+    ) {{ text }}
+    ul.dito-pulldown(:class="{ 'dito-pulldown--open': pulldown.open }")
+      li(
+        v-for="(form, type) in creatableForms"
+        v-show="shouldShowSchema(form)"
+      )
+        a.dito-pulldown__item(
+          :class=`{
+            'dito-pulldown__item--disabled': shouldDisableSchema(form)
+          }`
+          @mousedown.stop="onPulldownMouseDown(type)"
+          @mouseup="onPulldownMouseUp(type)"
+        ) {{ getLabel(form) }}
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
+import PulldownMixin from '../mixins/PulldownMixin.js'
+import { getFormSchemas, isInlined } from '../utils/schema.js'
+
+// @vue/component
+export default DitoComponent.component('DitoCreateButton', {
+  mixins: [ContextMixin, PulldownMixin],
+
+  props: {
+    schema: { type: Object, required: true },
+    // The next four props are there for `DitoContext` and the `context()`
+    // getter in `DitoMixin`.
+    // TODO: Should they be moved to shared mixin that defines them as required
+    // and also provides the `context()` getter, perhaps `ContextMixin`?
+    // `schema` could be included as well, and `ContextMixin` could be used in
+    // `DitoForm`, `DitoView`, `DitoPanel`, `DitoSchema`, `DitoEditButtons`,
+    // etc? But the problem with the root components is that they don't have
+    // these props. We could add a `contextAttributes()` getter for easy passing
+    // on as `v-bind="contextAttributes"`.
+    dataPath: { type: String, required: true },
+    data: { type: [Object, Array], default: null },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
+    nested: { type: Boolean, default: false },
+    path: { type: String, required: true },
+    verb: { type: String, required: true },
+    text: { type: String, default: null },
+    disabled: { type: Boolean, required: true }
+  },
+
+  computed: {
+    forms() {
+      return getFormSchemas(this.schema, this.context)
+    },
+
+    creatableForms() {
+      const entries = Object.entries(this.forms).filter(
+        ([, form]) => this.isFormCreatable(form)
+      )
+      return entries.length > 0
+        ? Object.fromEntries(entries)
+        : null
+    },
+
+    creatableForm() {
+      const forms = this.creatableForms
+      return forms && Object.keys(forms).length === 1 && forms.default || null
+    },
+
+    isInlined() {
+      return isInlined(this.schema)
+    }
+  },
+
+  methods: {
+    isFormCreatable(form) {
+      // Forms can be excluded from the list by providing `if: false` or
+      // `creatable: false`.
+      return (
+        this.shouldRenderSchema(form) &&
+        this.getSchemaValue('creatable', {
+          type: Boolean,
+          default: true,
+          schema: form
+        })
+      )
+    },
+
+    createItem(form, type = null) {
+      if (!this.shouldDisableSchema(form)) {
+        if (this.isInlined) {
+          this.sourceComponent.createItem(form, type)
+        } else {
+          const { creatable } = this.schema
+          const query = {
+            ...(type && { type }),
+            ...creatable?.query?.(this.context)
+          }
+          this.$router.push({
+            path: `${this.path}/create`,
+            query
+          })
+        }
+      } else {
+        throw new Error('Not allowed to create item for given form')
+      }
+    },
+
+    onPulldownSelect(type) {
+      this.createItem(this.forms[type], type)
+      this.setPulldownOpen(false)
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.dito-create-button {
+  position: relative;
+
+  .dito-pulldown {
+    right: 0;
+
+    .dito-buttons--sticky & {
+      top: unset;
+      right: unset;
+      bottom: 0;
+      left: 0;
+    }
+  }
+}
+</style>

package/src/components/DitoDialog.vue

@@ -0,0 +1,242 @@
+<template lang="pug">
+.dito-dialog(
+  ref="dialog"
+  role="dialog"
+  aria-expanded="true"
+  aria-modal="true"
+  :style="{ '--width': settings.width ? `${settings.width}px` : null }"
+  @mouseup="onMouseUp"
+)
+  UseFocusTrap.dito-dialog__focus-trap(:options="focusTrapOptions")
+    form.dito-scroll-parent(
+      @submit.prevent="submit"
+      @keydown.enter="onEnter"
+    )
+      // Add an invisible button that prevents the clearable buttons from being
+      // pressed when the user presses the Enter key:
+      button(
+        v-show="false"
+      )
+      DitoSchema(
+        :schema="schema"
+        :data="dialogData"
+        padding="root"
+        scrollable
+        generateLabels
+      )
+        template(#buttons)
+          DitoButtons.dito-buttons--large(
+            :buttons="buttonSchemas"
+            :data="dialogData"
+          )
+</template>
+
+<script>
+import { clone } from '@ditojs/utils'
+import DitoComponent from '../DitoComponent.js'
+import DomMixin from '../mixins/DomMixin.js'
+import { getButtonSchemas } from '../utils/schema.js'
+import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
+
+// @vue/component
+export default DitoComponent.component('DitoDialog', {
+  mixins: [DomMixin],
+  components: { UseFocusTrap },
+  emits: ['remove'],
+
+  provide() {
+    return {
+      $dialogComponent: () => this
+    }
+  },
+
+  props: {
+    components: { type: Object, required: true },
+    buttons: { type: Object, required: true },
+    promise: { type: Object, required: true },
+    data: { type: Object, default: () => ({}) },
+    settings: {
+      type: Object,
+      default: () => ({
+        width: 480,
+        clickToClose: false
+      })
+    }
+  },
+
+  data() {
+    // Make sure dialog data contains all the expected keys
+    const dialogData = clone(this.data)
+    for (const key in this.components) {
+      if (!(key in dialogData)) {
+        dialogData[key] = null
+      }
+    }
+    return {
+      dialogData
+    }
+  },
+
+  computed: {
+    dialogComponent() {
+      return this
+    },
+
+    schema() {
+      return {
+        type: 'dialog',
+        components: this.components
+      }
+    },
+
+    buttonSchemas() {
+      return Object.fromEntries(
+        Object.entries(getButtonSchemas(this.buttons)).map(
+          // Process the button schemas to add default click events
+          // for both 'submit' and 'cancel' buttons:
+          ([key, schema]) => {
+            if (key === 'cancel' && !schema.events) {
+              schema = {
+                ...schema,
+                events: {
+                  click: () => this.cancel()
+                }
+              }
+            }
+            return [key, schema]
+          }
+        )
+      )
+    },
+
+    focusTrapOptions() {
+      return {
+        immediate: true,
+        fallbackFocus: () => this.$refs.dialog,
+        onDeactivate: this.cancel
+      }
+    },
+
+    hasButtons() {
+      return Object.keys(this.buttonSchemas).length > 0
+    },
+
+    hasCancel() {
+      return !!this.buttonSchemas.cancel
+    }
+  },
+
+  mounted() {
+    this.domOn(window, {
+      keyup: event => {
+        if ((this.hasCancel || !this.hasButtons) && event.keyCode === 27) {
+          this.cancel()
+        }
+      }
+    })
+  },
+
+  methods: {
+    remove() {
+      this.$emit('remove')
+    },
+
+    resolve(value) {
+      this.promise.resolve(value)
+      this.remove()
+    },
+
+    reject(value) {
+      this.promise.reject(value)
+      this.remove()
+    },
+
+    onEnter(event) {
+      // Handle Enter key on input fields to submit the form. This also handles
+      // password managers (e.g. 1Password) that simulate an untrusted Enter
+      // keypress to submit, which browsers ignore.
+      if (event.target instanceof HTMLInputElement) {
+        this.submit()
+      }
+    },
+
+    submit() {
+      this.resolve(this.dialogData)
+    },
+
+    cancel() {
+      // When cancelling, resolve as `undefined` so we can have dialogs
+      // returning null as a defined value as well.
+      this.resolve(undefined)
+    },
+
+    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: $z-index-dialog;
+  padding: $content-padding;
+  align-items: center;
+  justify-content: center;
+  // Prevent scrolling of the page behind the dialog:
+  overflow: hidden;
+  background: rgb(0, 0, 0, 0.2);
+
+  &__focus-trap {
+    display: flex;
+    max-height: 100%;
+  }
+
+  // Place cancel button visually first even though submit comes first in DOM,
+  // so that password managers (e.g. 1Password) find the submit button first.
+  .dito-container:has(.dito-button--cancel) {
+    order: -1;
+  }
+
+  // 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 rgb(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/DitoDraggable.vue

@@ -0,0 +1,117 @@
+<template lang="pug">
+UseSortable.dito-draggable(
+  v-if="draggable"
+  :class="{ 'dito-draggable--dragging': isDragging }"
+  :as="as"
+  :modelValue="modelValue"
+  :options="{ ...options, onStart, onEnd }"
+  @update:modelValue="$emit('update:modelValue', $event)"
+)
+  slot
+component(
+  v-else
+  :is="as"
+)
+  slot
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent'
+import DomMixin from '../mixins/DomMixin.js'
+import { UseSortable } from '@vueuse/integrations/useSortable/component'
+
+// @vue/component
+export default DitoComponent.component('DitoDraggable', {
+  mixins: [DomMixin],
+  components: { UseSortable },
+  emits: ['update:modelValue'],
+
+  props: {
+    modelValue: {
+      type: Array,
+      required: true
+    },
+    as: {
+      type: String,
+      default: 'div'
+    },
+    options: {
+      type: Object,
+      required: true
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      mouseEvents: null,
+      isDragging: false
+    }
+  },
+
+  methods: {
+    onStart(event) {
+      this.options.onStart?.(event)
+      this.isDragging = true
+      this.mouseEvents?.remove()
+    },
+
+    onEnd(event) {
+      this.options.onEnd?.(event)
+      // Keep `isDragging` true until the next mouse interaction so that
+      // confused hover states are cleared before removing the hover catcher.
+      this.mouseEvents = this.domOn(document, {
+        mousedown: this.onMouse,
+        mousemove: this.onMouse,
+        mouseleave: this.onMouse
+      })
+    },
+
+    onMouse() {
+      this.isDragging = false
+      this.mouseEvents?.remove()
+      this.mouseEvents = null
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-draggable {
+  // Overlay a hover catcher while we're dragging to prevent hover states from
+  // getting stuck / confused. Safari struggles with this, so disable it there.
+  @include browser-query(('chrome', 'firefox')) {
+    &:has(&__chosen),
+    &--dragging {
+      > * {
+        position: relative;
+
+        > :first-child::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+        }
+      }
+    }
+  }
+
+  &__fallback {
+    filter: drop-shadow(0 2px 4px $color-shadow);
+
+    // Nested <td> need to also switch to `display: flex` style during dragging.
+    &,
+    td {
+      display: flex;
+
+      > * {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>

package/src/components/DitoEditButtons.vue

@@ -0,0 +1,135 @@
+<template lang="pug">
+//- 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"
+  :nested="nested"
+  @click.stop
+)
+  //- Firefox doesn't like <button> here, so use <a> instead:
+  a.dito-button(
+    v-if="draggable"
+    :class="{ 'dito-button--disabled': isDraggableDisabled }"
+    v-bind="getButtonAttributes(verbs.drag)"
+  )
+  RouterLink.dito-button(
+    v-if="editable"
+    :class="{ 'dito-button--disabled': isEditableDisabled }"
+    :to="editPath ? { path: editPath } : {}"
+    v-bind="getButtonAttributes(verbs.edit)"
+  )
+  DitoCreateButton(
+    v-if="creatable"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
+    :nested="nested"
+    :path="createPath"
+    :verb="verbs.create"
+    :text="createButtonText"
+    :disabled="isCreatableDisabled"
+  )
+  button.dito-button(
+    v-if="deletable"
+    type="button"
+    :disabled="isDeletableDisabled"
+    v-bind="getButtonAttributes(verbs.delete)"
+    @click="$emit('delete')"
+  )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
+import { capitalize } from '@ditojs/utils'
+
+// @vue/component
+export default DitoComponent.component('DitoEditButtons', {
+  mixins: [ContextMixin],
+  emits: ['delete'],
+
+  props: {
+    buttons: { type: Object, default: null },
+    schema: { type: Object, required: true },
+    dataPath: { type: String, required: true },
+    data: { type: [Object, Array], default: null },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
+    nested: { type: Boolean, default: false },
+    disabled: { type: Boolean, required: true },
+    draggable: { type: Boolean, default: false },
+    editable: { type: Boolean, default: false },
+    creatable: { type: Boolean, default: false },
+    deletable: { type: Boolean, default: false },
+    editPath: { type: String, default: null },
+    createPath: { type: String, default: null }
+  },
+
+  computed: {
+    formLabel() {
+      return this.getLabel(this.schema.form)
+    },
+
+    isDraggableDisabled() {
+      return this.disabled || !this.hasSchemaOption('draggable')
+    },
+
+    isDeletableDisabled() {
+      return this.disabled || !this.hasSchemaOption('deletable')
+    },
+
+    isEditableDisabled() {
+      return (
+        this.disabled ||
+        !this.editPath ||
+        !this.hasSchemaOption('editable')
+      )
+    },
+
+    isCreatableDisabled() {
+      return (
+        this.disabled ||
+        !this.createPath ||
+        !this.hasSchemaOption('creatable')
+      )
+    },
+
+    createButtonText() {
+      return (
+        // Allow schema to override create button through creatable object:
+        this.schema.creatable?.label || (
+          // Auto-generate create button labels from from labels for list
+          // sources with only one form:
+          this.formLabel &&
+          `${capitalize(this.verbs.create)} ${this.formLabel}`
+        ) ||
+        null
+      )
+    }
+  },
+
+  methods: {
+    hasSchemaOption(name) {
+      // All options can be disabled on a per-form basis by setting
+      // `schema[name]` to `false` or a callback returning `false`.
+      return this.getSchemaValue(name, {
+        type: Boolean,
+        default: true
+      })
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.dito-edit-buttons {
+  // Override cursor from collapsible dito-label:
+  cursor: default;
+  flex: none;
+}
+</style>

package/src/components/DitoErrors.vue

@@ -0,0 +1,83 @@
+<template lang="pug">
+.dito-errors(
+  v-if="errors"
+)
+  ul
+    li(
+      v-for="error of errors"
+    ) {{ error }}
+</template>
+
+<script>
+import tippy from 'tippy.js'
+import DitoComponent from '../DitoComponent.js'
+import { markRaw } from 'vue'
+
+// @vue/component
+export default DitoComponent.component('DitoErrors', {
+  props: {
+    errors: { type: Array, default: null }
+  },
+
+  data() {
+    return {
+      tip: null
+    }
+  },
+
+  watch: {
+    errors() {
+      this.$nextTick(this.updateErrors)
+    }
+  },
+
+  unmounted() {
+    this.tip?.destroy()
+  },
+
+  methods: {
+    updateErrors() {
+      let { tip } = this
+      tip?.hide()
+      if (this.errors) {
+        tip = this.tip ??= markRaw(tippy(this.$el.closest('.dito-container')))
+        tip.setProps({
+          content: this.errors.join('\n'),
+          theme: 'error',
+          trigger: 'manual',
+          appendTo: 'parent',
+          placement: 'bottom-start',
+          animation: 'shift-away-subtle',
+          popperOptions: {
+            modifiers: [
+              {
+                name: 'flip',
+                enabled: false
+              }
+            ]
+          },
+          interactive: true,
+          hideOnClick: false,
+          offset: [3, 3], // 1/2 form-spacing
+          zIndex: 1
+        })
+        tip.popper.addEventListener('mousedown', () => tip.hide())
+        tip.show()
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-errors {
+  position: absolute;
+  visibility: hidden;
+
+  ul {
+    color: $color-error;
+  }
+}
+</style>