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

package/src/components/DitoButtons.vue

@@ -0,0 +1,80 @@
+<template lang="pug">
+.dito-buttons(
+  v-if="buttonSchemas || hasSlotContent($slots.default)"
+)
+  template(
+    v-for="(buttonSchema, buttonDataPath) in buttonSchemas"
+  )
+    DitoContainer(
+      v-if="shouldRenderSchema(buttonSchema)"
+      :key="buttonDataPath"
+      :schema="buttonSchema"
+      :dataPath="buttonDataPath"
+      :data="data"
+      :meta="meta"
+      :nested="nested"
+      :store="getChildStore(buttonSchema.name)"
+      :disabled="disabled"
+    )
+  template(
+    v-for="vnode of $slots.default?.()"
+  )
+    //- Render each node in the default slot through `dito-vnode`,
+    //- so it can be wrapped in a `.dito-container` class.
+    .dito-container(
+      v-if="hasVNodeContent(vnode)"
+    )
+      DitoVnode(:vnode="vnode")
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
+import { appendDataPath } from '../utils/data.js'
+import { hasSlotContent, hasVNodeContent } from '@ditojs/ui/src'
+
+// @vue/component
+export default DitoComponent.component('DitoButtons', {
+  mixins: [ContextMixin],
+
+  provide: {
+    $tabComponent: () => null
+  },
+
+  props: {
+    buttons: { type: Object, default: null },
+    dataPath: { type: String, default: '' },
+    data: { type: [Object, Array], default: null },
+    meta: { type: Object, default: () => ({}) },
+    store: { type: Object, default: () => ({}) },
+    nested: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false }
+  },
+
+  computed: {
+    buttonSchemas() {
+      // Compute a buttons list which has the dataPath baked into its keys.
+      const { dataPath, buttons } = this
+      return buttons
+        ? Object.values(buttons).reduce((schemas, button) => {
+            schemas[appendDataPath(dataPath, button.name)] = button
+            return schemas
+          }, {})
+        : null
+    }
+  },
+
+  methods: {
+    hasSlotContent,
+    hasVNodeContent
+  }
+})
+</script>
+
+<style lang="scss">
+.dito-buttons {
+  > .dito-container {
+    padding: 0;
+  }
+}
+</style>

package/src/components/DitoClipboard.vue

@@ -0,0 +1,186 @@
+<template lang="pug">
+.dito-clipboard.dito-buttons.dito-buttons--round(
+  v-if="clipboard"
+)
+  button.dito-button.dito-button--copy(
+    ref="copyData"
+    type="button"
+    title="Copy Data"
+    :disabled="!copyEnabled"
+    @click="onCopy"
+  )
+  button.dito-button.dito-button--paste(
+    type="button"
+    title="Paste Data"
+    :disabled="!pasteEnabled"
+    @click="onPaste"
+  )
+</template>
+
+<script>
+import { isObject, clone, deindent } from '@ditojs/utils'
+import DitoComponent from '../DitoComponent.js'
+import DomMixin from '../mixins/DomMixin.js'
+import DitoContext from '../DitoContext.js'
+
+// @vue/component
+export default DitoComponent.component('DitoClipboard', {
+  mixins: [DomMixin],
+
+  props: {
+    clipboard: { type: [Boolean, Object], required: true },
+    schema: { type: Object, required: true }
+  },
+
+  data() {
+    return {
+      copyEnabled: false,
+      pasteEnabled: false
+    }
+  },
+
+  computed: {
+    clipboardOptions() {
+      return isObject(this.clipboard) ? this.clipboard : {}
+    },
+
+    copyData() {
+      const { copy } = this.clipboardOptions
+      return copy
+        ? clipboardData =>
+            copy.call(this, new DitoContext(this, { clipboardData }))
+        : clipboardData => clone(clipboardData)
+    },
+
+    pasteData() {
+      const { paste } = this.clipboardOptions
+      return paste
+        ? clipboardData =>
+            paste.call(this, new DitoContext(this, { clipboardData }))
+        : clipboardData => clipboardData
+    }
+  },
+
+  watch: {
+    // Check right away also in case there's already data (e.g. create form):
+    'parentComponent.hasData': {
+      immediate: true,
+      handler: 'updateCopy'
+    },
+
+    'appState.clipboardData': {
+      immediate: true,
+      handler: 'updatePaste'
+    }
+  },
+
+  mounted() {
+    // Check clipboard content whenever something gets copied or the window gets
+    // (re)activated, as those are the moments when the clipboard can change:
+    this.domOn(document, { copy: this.updatePaste })
+    this.domOn(window, { focus: this.updatePaste })
+  },
+
+  methods: {
+    checkClipboardData(clipboardData) {
+      const { $schema, ...data } = clipboardData || {}
+      return $schema === this.schema.name ? data : null
+    },
+
+    async getClipboardData(report) {
+      // Use the internal clipboard as fallback.
+      let { clipboardData } = this.appState
+      try {
+        const json = await navigator.clipboard?.readText?.()
+        if (json) {
+          clipboardData = JSON.parse(json)
+        }
+      } catch (err) {
+        if (report) {
+          console.error(err, err.name, err.message)
+          if (err.name === 'SyntaxError') {
+            alert(deindent`
+              The data in the clipboard appears to be malformed:
+              ${err.message}
+            `)
+          }
+        }
+      }
+      return this.checkClipboardData(clipboardData)
+    },
+
+    updateCopy() {
+      this.copyEnabled = this.parentComponent.hasData
+    },
+
+    async updatePaste() {
+      this.pasteEnabled = !!this.checkClipboardData(this.appState.clipboardData)
+      if (!this.pasteEnabled && this.appState.agent.chrome) {
+        // See if the clipboard content is valid JSON data that is compatible
+        // with the current target schema, and only then activate the pasting:
+        const data = await this.getClipboardData(false) // Don't report
+        this.pasteEnabled = !!data
+      }
+    },
+
+    async onCopy() {
+      let data = this.parentComponent.clipboardData
+      try {
+        if (data) {
+          data = {
+            $schema: this.schema.name,
+            ...this.copyData(data)
+          }
+        }
+        // Keep an internal clipboard as fallback.
+        this.appState.clipboardData = data
+        this.pasteEnabled = true
+        try {
+          const json = JSON.stringify(data, null, 2)
+          await navigator.clipboard?.writeText?.(json)
+        } catch (err) {
+          console.error(err, err.name, err.message)
+        }
+      } catch (error) {
+        console.error(error)
+        alert(error.message)
+      }
+    },
+
+    async onPaste() {
+      let data = await this.getClipboardData(true) // Report
+      try {
+        data = data && this.pasteData(data)
+        if (data) {
+          this.parentComponent.clipboardData = data
+        }
+      } catch (error) {
+        console.error(error)
+        alert(error.message)
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-clipboard {
+  display: flex;
+
+  .dito-schema & {
+    // Push clipboard to the right in the flex layout, see:
+    // https://codepen.io/tholex/pen/hveBx/
+    margin-left: auto;
+  }
+
+  .dito-header & {
+    margin-left: 0;
+
+    .dito-button {
+      margin: 0 0 $tab-margin $tab-margin;
+    }
+  }
+}
+</style>

package/src/components/DitoContainer.vue

@@ -0,0 +1,374 @@
+<template lang="pug">
+.dito-container(
+  v-show="componentVisible"
+  :class="containerClasses"
+  :style="containerStyles"
+)
+  Teleport(
+    v-if="isMounted && panelEntries.length > 0"
+    to=".dito-sidebar__teleport"
+  )
+    DitoPanels(
+      :panels="panelEntries"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :disabled="disabled"
+    )
+  DitoLabel(
+    v-if="hasLabel"
+    :class="labelClasses"
+    :dataPath="labelDataPath"
+    :label="label"
+    :info="info"
+  )
+  component.dito-component(
+    v-if="!(hasLabel && isLabel)"
+    :is="typeComponent"
+    ref="component"
+    :class="componentClasses"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
+    :width="width"
+    :label="label"
+    :single="single"
+    :nested="nested"
+    :accumulatedBasis="combinedBasis"
+    @errors="onErrors"
+    @update:component="value => (component = value)"
+  )
+  DitoErrors(:errors="errors")
+</template>
+
+<script>
+import { isString, isNumber } from '@ditojs/utils'
+import DitoComponent from '../DitoComponent.js'
+import ValueMixin from '../mixins/ValueMixin.js'
+import ContextMixin from '../mixins/ContextMixin.js'
+import DitoContext from '../DitoContext.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+import {
+  getAllPanelEntries,
+  getTypeComponent,
+  hasLabel,
+  omitSpacing
+} from '../utils/schema.js'
+import { parseFraction } from '../utils/math.js'
+
+// @vue/component
+export default DitoComponent.component('DitoContainer', {
+  mixins: [ValueMixin, ContextMixin],
+  props: {
+    schema: { type: Object, required: true },
+    dataPath: { type: String, default: '' },
+    data: { type: [Object, Array], required: true },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
+    single: { type: Boolean, default: false },
+    nested: { type: Boolean, default: true },
+    disabled: { type: Boolean, required: true },
+    compact: { type: Boolean, default: false },
+    generateLabels: { type: Boolean, default: false },
+    verticalLabels: { type: Boolean, default: false },
+    accumulatedBasis: { type: Number, default: null }
+  },
+
+  data() {
+    return {
+      errors: null,
+      // The nested type component instance, for context-based schema accessor
+      // evaluation.
+      component: null
+    }
+  },
+
+  computed: {
+    context() {
+      return new DitoContext(
+        // When available, use the type component for context-based schema
+        // accessors, but fall back to container.
+        // TODO: Consider architectural inversion to eliminate timing issues:
+        // - Type components render DitoContainer at their root
+        // - Pass type component content through container's default slot
+        // - DitoPane/DitoButtons render type components directly
+        // - Eliminates need for component instance synchronization
+        // - Provides true synchronous access to component context
+        this.component ?? this,
+        { nested: this.nested }
+      )
+    },
+
+    name() {
+      return this.schema.name
+    },
+
+    type() {
+      return this.schema.type
+    },
+
+    typeComponent() {
+      return getTypeComponent(this.type)
+    },
+
+    isLabel() {
+      return this.type === 'label'
+    },
+
+    hasLabel() {
+      return hasLabel(this.schema, this.generateLabels)
+    },
+
+    label() {
+      return this.hasLabel ? this.getLabel(this.schema) : null
+    },
+
+    labelDataPath() {
+      // Unnested types don't have a dataPath for themselves, don't use it:
+      return this.nested ? this.dataPath : null
+    },
+
+    info: getSchemaAccessor('info', {
+      type: String,
+      default: null
+    }),
+
+    width: getSchemaAccessor('width', {
+      type: [String, Number],
+      default() {
+        return this.typeComponent?.defaultWidth
+      },
+      get(width) {
+        // Use 100% == 1.0 as default width when nothing is set:
+        return width === undefined
+          ? 1.0
+          : isString(width)
+            ? width.match(/^\s*[<>]?\s*(.*)$/)[1] // Remove width operator
+            : width
+      }
+    }),
+
+    widthOperator: getSchemaAccessor('width', {
+      type: String,
+      get(width) {
+        return isString(width)
+          ? width.match(/^\s*([<>]?)/)[1] || null
+          : null
+      }
+    }),
+
+    componentVisible: getSchemaAccessor('visible', {
+      type: Boolean,
+      default() {
+        return this.typeComponent?.defaultVisible
+      }
+    }),
+
+    componentDisabled: getSchemaAccessor('disabled', {
+      type: Boolean,
+      default: false,
+      get(disabled) {
+        return disabled || this.disabled
+      }
+    }),
+
+    flexGrow() {
+      // Interpret '>50%' as '50%, flex-grow: 1`
+      return (
+        this.widthOperator === '>' ||
+        this.width === 'fill'
+      )
+    },
+
+    flexShrink() {
+      // Interpret '<50%' as '50%, flex-shrink: 1`
+      return this.widthOperator === '<'
+    },
+
+    flexBasis() {
+      const width = this.width
+      // 'auto' = no fitting:
+      return [null, 'auto', 'fill'].includes(width)
+        ? 'auto'
+        : /%$/.test(width)
+          ? parseFloat(width) / 100 // percentage -> fraction
+          : /[a-z]/.test(width)
+            ? width // native units
+            : parseFraction(width) // fraction
+    },
+
+    combinedBasis() {
+      const { accumulatedBasis, flexBasis } = this
+      return isNumber(accumulatedBasis) && isNumber(flexBasis)
+        ? accumulatedBasis * flexBasis
+        : null
+    },
+
+    containerClasses() {
+      const { class: classes } = this.schema
+      const prefix = 'dito-container'
+      return {
+        [`${prefix}--disabled`]: this.componentDisabled,
+        [`${prefix}--has-errors`]: !!this.errors,
+        [`${prefix}--single`]: this.single,
+        [`${prefix}--compact`]: this.compact,
+        [`${prefix}--label-vertical`]: this.verticalLabels,
+        [`${prefix}--omit-spacing`]: omitSpacing(this.schema),
+        ...(isString(classes) ? { [classes]: true } : classes)
+      }
+    },
+
+    containerStyles() {
+      const { flexBasis, combinedBasis } = this
+      return {
+        '--grow': this.flexGrow ? 1 : 0,
+        '--shrink': this.flexShrink ? 1 : 0,
+        '--basis': isNumber(flexBasis) ? `${flexBasis * 100}%` : flexBasis,
+        '--basis-mobile':
+          isNumber(combinedBasis) && combinedBasis <= 0.25
+            ? `${flexBasis * 200}%`
+            : null
+      }
+    },
+
+    componentClasses() {
+      return {
+        'dito-component--single': this.single,
+        ...this.getLayoutClasses('dito-component')
+      }
+    },
+
+    labelClasses() {
+      return {
+        'dito-label--visible': this.isLabel,
+        ...this.getLayoutClasses('dito-label')
+      }
+    },
+
+    panelEntries() {
+      return getAllPanelEntries(
+        this.api,
+        this.schema,
+        this.dataPath,
+        this.$refs.component,
+        this.tabComponent
+      )
+    }
+  },
+
+  methods: {
+    getLayoutClasses(prefix) {
+      return {
+        [`${prefix}--fill`]: this.width === 'fill' || this.flexBasis !== 'auto',
+        [`${prefix}--grow`]: this.flexGrow,
+        [`${prefix}--shrink`]: this.flexShrink
+      }
+    },
+
+    onErrors(errors) {
+      this.errors = errors
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-container {
+  --grow: 0;
+  --shrink: 1;
+  --basis: auto;
+
+  position: relative;
+  display: flex;
+  flex: var(--grow) var(--shrink) var(--basis);
+  flex-flow: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+  // To prevent list tables from blowing out of their flex box containers.
+  max-width: 100%;
+  // Cannot use margin here as it needs to be part of box-sizing for
+  // percentages in flex-basis to work.
+  padding: var(--container-padding);
+
+  > .dito-label:not(.dito-label--visible):only-child {
+    // Used e.g. when sources hide themselves due to maxDepth, but the label
+    // is rendered above it.
+    display: none;
+  }
+
+  &:empty {
+    padding: 0;
+  }
+
+  .dito-pane > & {
+    .dito-page--width-80 & {
+      flex-grow: 1;
+      flex-basis: var(--basis-mobile, var(--basis));
+      // DEBUG: background: yellow;
+    }
+
+    .dito-page--width-60 & {
+      flex-basis: calc(2 * var(--basis));
+      // DEBUG: background: orange;
+    }
+
+    .dito-sidebar--width-99 & {
+      flex-grow: 1;
+      // DEBUG: background: yellow;
+    }
+
+    .dito-sidebar--width-60 & {
+      flex-basis: calc(2 * var(--basis));
+      // DEBUG: background: orange;
+    }
+  }
+
+  &--single {
+    height: 100%; // So that list buttons can be sticky at the bottom;
+  }
+
+  &--label-vertical {
+    // For plain components without labels in rows with other components that
+    // have labels, add some spacing to the top to align with the other
+    // components (e.g.  buttons):
+    > .dito-component:first-child:not(.dito-section, .dito-list, .dito-object) {
+      margin-top: $input-height;
+    }
+  }
+
+  &--compact:not(&--label-vertical) {
+    // Display labels in compact schema as inline-blocks, to allow compact
+    // layouts with `width: 'auto'` elements:
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+  }
+
+  &--omit-spacing {
+    padding: 0;
+
+    > .dito-label {
+      margin: $form-spacing-half $form-spacing-half 0;
+    }
+  }
+}
+
+.dito-component {
+  position: relative;
+
+  &--fill {
+    width: 100%;
+
+    &.dito-checkbox,
+    &.dito-radio-button {
+      // WebKit doesn't like changed width on checkboxes and radios, override:
+      display: inline-block;
+      width: auto;
+    }
+  }
+}
+</style>