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

package/src/components/DitoPane.vue

@@ -0,0 +1,334 @@
+<!-- eslint-disable vue/no-template-shadow -->
+<template lang="pug">
+.dito-pane(
+  v-if="isPopulated && componentSchemas.length > 0"
+  v-resize="onResizePane"
+  :class="classes"
+)
+  template(
+    v-for=`{
+      schema,
+      dataPath,
+      nestedDataPath,
+      nested,
+      store
+    }, index in componentSchemas`
+  )
+    //- Use <span> for .dito-pane__break so we can use the
+    //- `.dito-container:first-of-type` selector.
+    span.dito-pane__break(
+      v-if="['before', 'both'].includes(schema.break)"
+    )
+    DitoContainer(
+      v-if="shouldRenderSchema(schema)"
+      ref="containers"
+      :key="nestedDataPath"
+      :data-index="index"
+      :schema="schema"
+      :dataPath="dataPath"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :single="isSingleComponent"
+      :nested="nested"
+      :disabled="disabled"
+      :compact="compact"
+      :generateLabels="generateLabels"
+      :verticalLabels="isInLabeledRow(index)"
+      :accumulatedBasis="accumulatedBasis"
+    )
+    span.dito-pane__break(
+      v-if="['after', 'both'].includes(schema.break)"
+    )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
+import { appendDataPath } from '../utils/data.js'
+import { isNested } from '../utils/schema.js'
+
+// @vue/component
+export default DitoComponent.component('DitoPane', {
+  mixins: [ContextMixin],
+
+  provide() {
+    return {
+      $tabComponent: () => this.tabComponent
+    }
+  },
+
+  props: {
+    schema: { type: Object, required: true },
+    dataPath: { type: String, default: '' },
+    data: { type: Object, default: null },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
+    tab: { type: String, default: null },
+    single: { type: Boolean, default: false },
+    padding: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false },
+    generateLabels: { type: Boolean, default: false },
+    accumulatedBasis: { type: Number, default: null }
+  },
+
+  data() {
+    return {
+      positions: []
+    }
+  },
+
+  computed: {
+    nested() {
+      // For `ContextMixin`:
+      return false
+    },
+
+    classes() {
+      const prefix = 'dito-pane'
+      return {
+        [`${prefix}--single`]: this.isSingleComponent,
+        [`${prefix}--padding-${this.padding}`]: !!this.padding
+      }
+    },
+
+    tabComponent() {
+      return this.tab ? this : this.$tabComponent()
+    },
+
+    componentSchemas() {
+      // Compute a components list which has the dataPath baked into its keys
+      // and adds the key as the name to each component, used for labels, etc.
+      // NOTE: schema can be null while multi-form lists load their data,
+      // because only the available data will determine the type of form.
+      // When editing primitive values through a form, do not append 'name' to
+      // the component's dataPath so it can be mapped to from validation errors.
+      // NOTE: Not all schemas / components have a sourceSchema, e.g. dialogs.
+      const wrapPrimitives = this.sourceSchema?.wrapPrimitives
+      return Object.entries(this.schema?.components || {}).map(
+        ([name, schema]) => {
+          // Always add name to component schema, but clone it first to avoid
+          // mutating the original schema potentially used in multiple places.
+          schema = { ...schema, name }
+          // Share dataPath and store with parent if not nested:
+          const nested = isNested(schema)
+          const nestedDataPath = appendDataPath(this.dataPath, name)
+          return {
+            schema,
+            dataPath:
+              nested && !wrapPrimitives
+                ? nestedDataPath
+                : this.dataPath,
+            nestedDataPath,
+            nested,
+            store: this.getChildStore(name)
+          }
+        }
+      )
+    },
+
+    isSingleComponent() {
+      return this.single && this.componentSchemas.length === 1
+    },
+
+    verticalLabelsByIndices() {
+      const { positions } = this
+
+      const isLastInRow = index => (
+        positions[index] && (
+          index === positions.length - 1 ||
+          findNextPosition(index).top > positions[index].top
+        )
+      )
+
+      const findNextPosition = index => {
+        for (let i = index + 1; i < positions.length; i++) {
+          if (positions[i]) return positions[i]
+        }
+        return 0
+      }
+
+      const rows = []
+      let row = []
+      for (let index = 0; index < positions.length; index++) {
+        row.push(index)
+        if (isLastInRow(index)) {
+          rows.push(row)
+          row = []
+        }
+      }
+      if (row.length > 0) {
+        rows.push(row)
+      }
+
+      const verticalLabelsByIndices = []
+
+      for (const row of rows) {
+        let hasLabelsInRow = false
+        for (const index of row) {
+          const position = this.positions[index]
+          if (
+            position?.height > 2 && (
+              position.node.matches(':has(> .dito-label)') ||
+              position.node
+                .closest('.dito-container')
+                .matches('.dito-container--label-vertical')
+            )
+          ) {
+            // TODO: Handle nested schemas, e.g. 'section' or 'object' and
+            // detect labels there too.
+            hasLabelsInRow = true
+            break
+          }
+        }
+        for (const index of row) {
+          verticalLabelsByIndices[index] = hasLabelsInRow
+        }
+      }
+
+      return verticalLabelsByIndices
+    }
+  },
+
+  watch: {
+    'componentSchemas.length'(length) {
+      this.positions.length = length
+    }
+  },
+
+  created() {
+    this._register(true)
+  },
+
+  unmounted() {
+    this._register(false)
+  },
+
+  methods: {
+    _register(add) {
+      this.schemaComponent._registerPane(this, add)
+    },
+
+    focus() {
+      if (this.tab) {
+        return this.$router.push({ hash: `#${this.tab}` })
+      }
+    },
+
+    onResizePane() {
+      this.$nextTick(() => {
+        for (const container of this.$refs.containers) {
+          const node = container.$el
+          const index = +node.dataset.index
+          const bounds = node.getBoundingClientRect()
+          const style = getComputedStyle(node)
+          const padding = parseFloat(style.padding)
+          const fontSize = parseFloat(style.fontSize)
+          const height = bounds.height - 2 * padding
+          this.positions[index] =
+            height <= 0
+              ? null
+              : {
+                  top: bounds.y,
+                  height: height / fontSize,
+                  node
+                }
+        }
+      })
+    },
+
+    isInLabeledRow(index) {
+      return !!this.verticalLabelsByIndices[index]
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-pane {
+  $self: &;
+  $root-padding: $content-padding - $form-spacing-half;
+
+  --pane-padding: 0px;
+  --container-padding: #{$form-spacing-half};
+
+  display: flex;
+  position: relative;
+  flex-flow: row wrap;
+  align-items: flex-start;
+  align-content: flex-start;
+  // Remove the padding added by `.dito-container` inside `.dito-pane`:
+  margin: -$form-spacing-half;
+  padding: var(--pane-padding);
+  // Use `flex: 0%` for all `.dito-pane` except `.dito-pane__main`,
+  // so that the `.dito-buttons--main` can be moved all the way to the bottom.
+  flex: 0%;
+
+  &__main {
+    flex: 100%;
+  }
+
+  &--padding-root {
+    // A root-level pane inside a scroll view. Clear negative margin from above.
+    margin: 0;
+    // Move the negative margin used to remove the padding added by
+    // `.dito-container` inside `.dito-pane` to the padding:
+    --pane-padding: #{$root-padding};
+
+    &#{$self}--single {
+      --pane-padding: #{$content-padding};
+      --container-padding: 0px;
+    }
+
+    &:has(> .dito-container--label-vertical:first-of-type) {
+      // Reduce top spacing when the first row has labels.
+      margin-top: -$form-spacing-half;
+    }
+
+    // Display a ruler between tabbed components and towards the .dito-buttons
+    &__tab + &__main {
+      &::before {
+        // Use a pseudo element to display a ruler with proper margins
+        display: block;
+        content: '';
+        width: 100%;
+        border-bottom: $border-style;
+        // Shift ruler up by $root-padding to exclude removed $form-spacing-half
+        margin: (-$root-padding) $form-spacing-half $root-padding;
+        padding: $form-spacing-half;
+      }
+    }
+
+    &__main + .dito-buttons--main {
+      // Needed forms with sticky main buttons.
+      margin: $content-padding;
+      margin-bottom: 0;
+    }
+  }
+
+  &--padding-inlined {
+    --pane-padding: 0px;
+  }
+
+  &--padding-nested {
+    --pane-padding: #{$form-spacing};
+
+    &:has(> .dito-container--label-vertical:first-of-type) {
+      // Reduce top spacing when the first row has labels.
+      padding-top: $form-spacing-half;
+    }
+  }
+
+  &__break {
+    // `&_break` is rendered as <span> so we can use the
+    // `.dito-container:first-of-type` selector to match the first container
+    // even if it has a break before it.
+    display: block;
+    flex: 100%;
+    height: 0;
+  }
+}
+</style>

package/src/components/DitoPanel.vue

@@ -0,0 +1,256 @@
+<template lang="pug">
+//- Only show panels in tabs when the tabs are also visible.
+component.dito-panel(
+  v-if="shouldRenderSchema(panelSchema)"
+  v-show="visible && (!panelTabComponent || panelTabComponent.visible)"
+  :is="panelTag"
+  @submit.prevent
+)
+  DitoSchema.dito-panel__schema(
+    :schema="panelSchema"
+    :dataSchema="panelDataSchema"
+    :dataPath="panelDataPath"
+    :data="panelData"
+    :meta="meta"
+    :store="store"
+    padding="nested"
+    :disabled="disabled"
+    :hasOwnData="hasOwnData"
+    generateLabels
+  )
+    template(#prepend)
+      h2.dito-panel__header(:class="{ 'dito-panel__header--sticky': sticky }")
+        span {{ getLabel(schema) }}
+        DitoButtons.dito-buttons--small(
+          :buttons="panelButtonSchemas"
+          :dataPath="panelDataPath"
+          :data="panelData"
+          :meta="meta"
+          :store="store"
+          :disabled="disabled"
+        )
+    template(#buttons)
+      DitoButtons(
+        :buttons="buttonSchemas"
+        :dataPath="panelDataPath"
+        :data="panelData"
+        :meta="meta"
+        :store="store"
+        :disabled="disabled"
+      )
+</template>
+
+<script>
+import { isFunction } from '@ditojs/utils'
+import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
+import ValidatorMixin from '../mixins/ValidatorMixin.js'
+import { getButtonSchemas } from '../utils/schema.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+
+// @vue/component
+export default DitoComponent.component('DitoPanel', {
+  mixins: [ContextMixin, ValidatorMixin],
+
+  provide() {
+    return {
+      $panelComponent: () => this,
+      $tabComponent: () => this.panelTabComponent
+    }
+  },
+
+  props: {
+    schema: { type: Object, required: true },
+    dataPath: { type: String, required: true },
+    data: { type: Object, required: true },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
+    disabled: { type: Boolean, required: true },
+    panelTabComponent: { type: Object, default: null }
+  },
+
+  data() {
+    return {
+      ownData: null
+    }
+  },
+
+  computed: {
+    nested() {
+      // For `ContextMixin`:
+      return true
+    },
+
+    panelComponent() {
+      return this
+    },
+
+    tabComponent() {
+      return this.panelTabComponent
+    },
+
+    buttonSchemas() {
+      return getButtonSchemas(this.schema.buttons)
+    },
+
+    panelButtonSchemas() {
+      return getButtonSchemas(this.schema.panelButtons)
+    },
+
+    hasOwnData() {
+      return !!this.ownData
+    },
+
+    panelData() {
+      return this.ownData || this.data
+    },
+
+    panelSchema() {
+      if (this.hasOwnData) {
+        return this.schema
+      } else {
+        // Remove `data` from the schema, so that DitoSchema isn't using it to
+        // produce its own data. See $filters panel for more details on data.
+        const { data, ...schema } = this.schema
+        return schema
+      }
+    },
+
+    panelTag() {
+      // Panels that provide their own data need their own form.
+      return this.hasOwnData ? 'form' : 'div'
+    },
+
+    panelDataSchema() {
+      return this.hasOwnData ? this.schema : this.schemaComponent.schema
+    },
+
+    panelDataPath() {
+      // If the panel provides its own data, then it needs to prefix all
+      // components with its data-path, but if it shares data with the schema
+      // component, then it should share the data-path name space too.
+      return this.hasOwnData ? this.dataPath : this.schemaComponent.dataPath
+    },
+
+    visible: getSchemaAccessor('visible', {
+      type: Boolean,
+      default: true
+    }),
+
+    sticky: getSchemaAccessor('sticky', {
+      type: Boolean,
+      default: false
+    })
+  },
+
+  created() {
+    this._register(true)
+    // NOTE: This is not the same as `schema.data` handling in DitoSchema,
+    // where the data is added to the actual component.
+    const { data } = this.schema
+    if (data) {
+      this.ownData = isFunction(data)
+        ? data(this.context)
+        : data
+    }
+  },
+
+  unmounted() {
+    this._register(false)
+  },
+
+  methods: {
+    _register(add) {
+      // Register the panels so that other components can find them by their
+      // data-path, e.g. in TypeList.onFilterErrors()
+      this.schemaComponent._registerPanel(this, add)
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-panel {
+  &:not(:last-child) {
+    margin-bottom: $content-padding;
+  }
+
+  &__header {
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    padding: $input-padding;
+    background: $button-color;
+    border: $border-style;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+
+    &--sticky {
+      $margin: $input-height-factor * $line-height * $font-size-small +
+        $form-spacing;
+
+      position: sticky;
+      top: $content-padding;
+      margin-bottom: $margin;
+      z-index: 1;
+
+      & + * {
+        margin-top: -$margin;
+      }
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        background: $content-color-background;
+        left: 0;
+        right: 0;
+        height: $content-padding;
+        top: -$content-padding;
+        margin: -$border-width;
+      }
+    }
+
+    .dito-buttons {
+      position: absolute;
+      right: $input-padding-ver;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &__schema {
+    font-size: $font-size-small;
+    background: $content-color-background;
+    border: $border-style;
+    border-top: 0;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+
+    > .dito-schema-content {
+      .dito-object {
+        border: none;
+        padding: 0;
+      }
+
+      > .dito-buttons {
+        --button-margin: #{$form-spacing};
+
+        padding: $form-spacing;
+
+        .dito-container {
+          padding: 0;
+        }
+      }
+    }
+
+    .dito-label {
+      label {
+        font-weight: normal;
+      }
+    }
+  }
+}
+</style>

package/src/components/DitoPanels.vue

@@ -0,0 +1,61 @@
+<template lang="pug">
+.dito-panels(
+  v-if="panels.length > 0"
+)
+  template(
+    v-for="{ schema, dataPath, tabComponent } in panels"
+  )
+    DitoPanel(
+      v-if="shouldRenderSchema(schema)"
+      :key="getPanelKey(dataPath, tabComponent)"
+      :schema="schema"
+      :dataPath="dataPath"
+      :data="data"
+      :meta="meta"
+      :store="getChildStore(schema.name)"
+      :disabled="schema.disabled ?? disabled"
+      :panelTabComponent="tabComponent"
+    )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import ContextMixin from '../mixins/ContextMixin.js'
+
+// @vue/component
+export default DitoComponent.component('DitoPanels', {
+  mixins: [ContextMixin],
+
+  props: {
+    panels: { type: Array, default: null },
+    data: { type: Object, required: true },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
+    disabled: { type: Boolean, required: true }
+  },
+
+  computed: {
+    nested() {
+      // For `ContextMixin`:
+      return false
+    }
+  },
+
+  methods: {
+    getPanelKey(dataPath, tabComponent) {
+      // Allow separate tabs to use panels of the same name, by
+      // prefixing their key with the tab name.
+      return tabComponent ? `${tabComponent.tab}_${dataPath}` : dataPath
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-panels {
+  margin: $content-padding;
+  margin-left: $form-spacing;
+}
+</style>