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

package/src/mixins/TextMixin.js

@@ -0,0 +1,26 @@
+import { isString } from '@ditojs/utils'
+import { getDefaultValue } from '../utils/schema.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+
+// @vue/component
+export default {
+  computed: {
+    trim: getSchemaAccessor('trim', {
+      type: Boolean,
+      default: false
+    })
+  },
+
+  processValue(context) {
+    let { schema, value } = context
+    if (schema.trim && value != null && isString(value)) {
+      // Text fields don't necessarily have a `String` value when `format()`
+      // without `parse()` is used.
+      value = value.trim()
+    }
+    if (value === '') {
+      value = getDefaultValue(schema, context)
+    }
+    return value
+  }
+}

package/src/mixins/TypeMixin.js

@@ -0,0 +1,280 @@
+import ValueMixin from './ValueMixin.js'
+import ContextMixin from './ContextMixin.js'
+import ValidationMixin from './ValidationMixin.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+import { asArray, camelize } from '@ditojs/utils'
+
+// @vue/component
+export default {
+  mixins: [ValueMixin, ContextMixin, ValidationMixin],
+  emits: ['update:component'],
+
+  props: {
+    schema: { type: Object, required: true },
+    // NOTE: While `dataPath` points to the actual `value`, `data` represents
+    // the `item` in which the `value` is contained, under the key `name`.
+    dataPath: { type: String, required: true },
+    data: { type: [Object, Array], required: true },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
+    width: { type: [Number, String], default: null },
+    label: { type: String, default: null },
+    single: { type: Boolean, default: false },
+    nested: { type: Boolean, default: true },
+    accumulatedBasis: { type: Number, default: null }
+  },
+
+  data() {
+    return {
+      parsedValue: undefined,
+      focused: false
+    }
+  },
+
+  computed: {
+    name() {
+      return this.schema.name
+    },
+
+    type() {
+      return this.schema.type
+    },
+
+    labelNode() {
+      const node = this.isMounted ? this.$el.previousElementSibling : null
+      return node?.matches('.dito-label') ? node : null
+    },
+
+    visible: getSchemaAccessor('visible', {
+      type: Boolean,
+      default() {
+        return this.$options.defaultVisible
+      }
+    }),
+
+    // TODO: Rename to `excluded` for consistent naming?
+    exclude: getSchemaAccessor('exclude', {
+      type: Boolean,
+      default: false
+    }),
+
+    required: getSchemaAccessor('required', {
+      type: Boolean,
+      default: false
+    }),
+
+    // TODO: Move these to a sub-class component used for all input components?
+    readonly: getSchemaAccessor('readonly', {
+      type: Boolean,
+      default: false
+    }),
+
+    autofocus: getSchemaAccessor('autofocus', {
+      type: Boolean,
+      default: false
+    }),
+
+    // To be used for selects and inputs only?
+    clearable: getSchemaAccessor('clearable', {
+      type: Boolean,
+      default: false,
+
+      get(clearable) {
+        return clearable && !this.readonly
+      }
+    }),
+
+    disabled: getSchemaAccessor('disabled', {
+      type: Boolean,
+      default: false
+    }),
+
+    maxLength: getSchemaAccessor('maxLength', {
+      type: Number
+    }),
+
+    placeholder: getSchemaAccessor('placeholder', {
+      type: String
+    }),
+
+    autocomplete: getSchemaAccessor('autocomplete', {
+      type: String
+    }),
+
+    info: getSchemaAccessor('info', {
+      type: String,
+      default: null
+    }),
+
+    inlineInfo() {
+      // When a label is present, info is shown in the label component.
+      // Otherwise, we have to show it inline.
+      return !this.label ? this.info : null
+    },
+
+    events() {
+      const events = this.getEvents()
+      // Register callbacks for all provides non-recognized events,
+      // assuming they are native events.
+      // TODO: Move to vue3-style `on[A-Z]` event handlers naming that aren't
+      // namespaced in `schema.events` once the transition is complete.
+      for (const event of Object.keys(this.schema.events || {})) {
+        events[`on${camelize(event, true)}`] ??= () => {
+          this.emitEvent(event)
+        }
+      }
+      return events
+    },
+
+    attributes() {
+      const { nativeField, textField } = this.$options
+
+      const attributes = {
+        ...this.events,
+        disabled: this.disabled
+      }
+
+      if (nativeField) {
+        attributes.name = this.dataPath
+        if (this.label) {
+          attributes.title = this.label
+        }
+        attributes.readonly = this.readonly
+        attributes.autofocus = this.autofocus
+        if (textField) {
+          attributes.maxlength = this.maxLength
+          attributes.placeholder = this.placeholder
+          attributes.autocomplete = this.autocomplete
+        }
+      }
+
+      return attributes
+    },
+
+    validations() {
+      const validations = { ...this.getValidations() }
+      if (this.required) {
+        validations.required = true
+      }
+      // Allow schema to override default rules and add any new ones:
+      for (const [key, value] of Object.entries(this.schema.rules || {})) {
+        if (value === undefined) {
+          delete validations[key]
+        } else {
+          validations[key] = value
+        }
+      }
+      return validations
+    },
+
+    showClearButton() {
+      return this.clearable && this.value != null
+    }
+  },
+
+  created() {
+    this._register(true)
+    this.setupSchemaFields()
+  },
+
+  unmounted() {
+    this._register(false)
+  },
+
+  methods: {
+    _register(add) {
+      // Provide component to container for schema accessor evaluation.
+      this.$emit('update:component', add ? this : null)
+      // Prevent unnested type components from overriding parent data paths
+      if (this.nested) {
+        this.schemaComponent._registerComponent(this, add)
+      }
+    },
+
+    // @overridable
+    getEvents() {
+      const { onFocus, onBlur, onInput, onChange } = this
+      return { onFocus, onBlur, onInput, onChange }
+    },
+
+    // @overridable
+    getValidations() {
+      return null
+    },
+
+    // @overridable
+    async scrollIntoView() {
+      await this.focusSchema()
+      this.getFocusElement()?.scrollIntoView?.({
+        behavior: 'smooth',
+        block: 'center'
+      })
+    },
+
+    // @overridable
+    focusElement() {
+      this.getFocusElement()?.focus?.()
+    },
+
+    // @overridable
+    blurElement() {
+      this.getFocusElement()?.blur?.()
+    },
+
+    getFocusElement() {
+      const element = asArray(this.$refs.element)[0] ?? this
+      return element.$el ?? element
+    },
+
+    async focusSchema() {
+      // Also focus this component's schema and panel in case it's a tab.
+      await this.schemaComponent.focus()
+      await this.tabComponent?.focus()
+    },
+
+    async focus() {
+      await this.focusSchema()
+      this.scrollIntoView()
+      this.focusElement()
+    },
+
+    blur() {
+      this.blurElement()
+    },
+
+    clear() {
+      this.value = null
+      this.blur()
+      this.onChange()
+    },
+
+    onFocus() {
+      this.focused = true
+      this.markTouched()
+      this.emitEvent('focus')
+    },
+
+    onBlur() {
+      this.focused = false
+      this.validate()
+      this.emitEvent('blur')
+    },
+
+    onInput() {
+      this.markDirty()
+      this.emitEvent('input')
+    },
+
+    onChange() {
+      this.markDirty()
+      this.emitEvent('change', {
+        context: {
+          // Prevent endless parse recursion:
+          value: this.parsedValue !== undefined ? this.parsedValue : this.value
+        },
+        // Pass `schemaComponent` as parent, so change events can propagate up.
+        parent: this.schemaComponent
+      })
+    }
+  }
+}

package/src/mixins/ValidationMixin.js

@@ -0,0 +1,119 @@
+import { isFunction } from '@ditojs/utils'
+import * as validators from '../validators/index.js'
+
+// @vue/component
+export default {
+  emits: ['errors'],
+
+  data() {
+    return {
+      isTouched: false,
+      isDirty: false,
+      isValidated: false,
+      isValid: false,
+      errors: null
+    }
+  },
+
+  computed: {
+    hasErrors() {
+      return !!this.errors
+    }
+  },
+
+  methods: {
+    resetValidation() {
+      this.isTouched = false
+      this.isDirty = false
+      this.isValidated = false
+      this.isValid = false
+      this.clearErrors()
+    },
+
+    validate(notify = true) {
+      let isValid = true
+      if (notify) {
+        this.clearErrors()
+      }
+      const { value } = this
+      for (const [rule, setting] of Object.entries(this.validations)) {
+        // eslint-disable-next-line import/namespace
+        const validator = validators[rule]
+        if (
+          validator &&
+          // Only apply 'required' validator to empty values.
+          // Apply all other validators only to non-empty values.
+          (rule === 'required' || value != null && value !== '')
+        ) {
+          const { validate, message } = validator
+          if (!validate(value, setting, this.validations)) {
+            isValid = false
+            if (notify) {
+              const error = isFunction(message)
+                ? message(value, setting, this)
+                : message
+              this.addError(error, true)
+            }
+          }
+        }
+      }
+      if (notify) {
+        this.isValidated = true
+        this.isValid = isValid
+      }
+      return isValid
+    },
+
+    verify() {
+      return this.validate(false)
+    },
+
+    markTouched() {
+      this.isTouched = true
+      // Clear currently displayed errors when focusing input.
+      this.clearErrors()
+    },
+
+    markDirty() {
+      this.isDirty = true
+      this.isValidated = false
+      this.isValid = false
+      // Clear currently displayed errors on new input.
+      this.clearErrors()
+    },
+
+    addError(error, addLabel = false) {
+      this.errors ||= []
+      if (addLabel) {
+        const label = this.label || this.placeholder || this.name
+        error = `The ${label} field ${error}.`
+      }
+      this.errors.push(error)
+      this.$emit('errors', this.errors)
+    },
+
+    showValidationErrors(errors, focus) {
+      // Convert from AJV errors objects to an array of error messages
+      this.errors = []
+      if (errors.length === 0) {
+        return false
+      }
+      for (const { message } of errors) {
+        this.addError(message, true)
+      }
+      if (focus) {
+        this.scrollIntoView()
+      }
+      return true
+    },
+
+    getErrors() {
+      return this.errors ? [...this.errors] : null
+    },
+
+    clearErrors() {
+      this.errors = null
+      this.$emit('errors', this.errors)
+    }
+  }
+}

package/src/mixins/ValidatorMixin.js

@@ -0,0 +1,57 @@
+import SchemaParentMixin from './SchemaParentMixin.js'
+
+// @vue/component
+export default {
+  mixins: [SchemaParentMixin],
+
+  computed: {
+    errors() {
+      return this.schemaComponents.flatMap(({ errors }) => errors || [])
+    },
+
+    isTouched() {
+      return this.schemaComponents.some(it => it.isTouched)
+    },
+
+    isDirty() {
+      return this.schemaComponents.some(it => it.isDirty)
+    },
+
+    isValid() {
+      return this.schemaComponents.every(it => it.isValid)
+    },
+
+    isValidated() {
+      return this.schemaComponents.every(it => it.isValid)
+    }
+  },
+
+  methods: {
+    validateAll(match, notify = true) {
+      return this.schemaComponents.every(it => it.validateAll(match, notify))
+    },
+
+    verifyAll(match) {
+      return this.schemaComponents.every(it => it.verifyAll(match))
+    },
+
+    resetValidation() {
+      this.schemaComponents.forEach(it => it.resetValidation())
+    },
+
+    clearErrors() {
+      this.schemaComponents.forEach(it => it.clearErrors())
+    },
+
+    showValidationErrors(errors, focus, first = true) {
+      this.schemaComponents.forEach(
+        schemaComponent => {
+          if (schemaComponent.showValidationErrors(errors, focus, first)) {
+            first = false
+          }
+        }
+      )
+      return !first
+    }
+  }
+}

package/src/mixins/ValueMixin.js

@@ -0,0 +1,31 @@
+import DitoContext from '../DitoContext.js'
+import { computeValue } from '../utils/schema.js'
+
+export default {
+  computed: {
+    value: {
+      get() {
+        const value = computeValue(
+          this.schema,
+          this.data,
+          this.name,
+          this.dataPath,
+          { component: this }
+        )
+        const { format } = this.schema
+        return format
+          ? format(new DitoContext(this, { value }))
+          : value
+      },
+
+      set(value) {
+        const { parse } = this.schema
+        if (parse) {
+          value = parse(new DitoContext(this, { value }))
+        }
+        this.parsedValue = value
+        this.data[this.name] = value
+      }
+    }
+  }
+}

package/src/styles/_base.scss

@@ -0,0 +1,17 @@
+@include reset;
+
+:root {
+  --font-size: #{$font-size};
+  --line-height: #{$line-height};
+  --color-text: #{$color-text};
+
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  color: var(--color-text);
+  background: $content-color-background;
+  font-family: $font-family-sans;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+  max-width: 100%;
+}

package/src/styles/_button.scss

@@ -0,0 +1,191 @@
+@use 'sass:math';
+
+.dito-button {
+  // .dito-button with order-arrows:
+  &__order-arrows {
+    display: inline-block;
+    width: math.round($button-order-arrow-size * $math-sqrt2);
+    padding-left: $form-spacing;
+
+    $arrow-offset: calc($button-order-arrow-size / 2 + $border-width);
+
+    &::before {
+      @include arrow($button-order-arrow-size, 'up');
+
+      bottom: $arrow-offset;
+    }
+
+    &::after {
+      @include arrow($button-order-arrow-size, 'down');
+
+      top: $arrow-offset;
+    }
+  }
+
+  &--order-asc &__order-arrows {
+    &::before {
+      bottom: 0;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  &--order-desc &__order-arrows {
+    &::before {
+      display: none;
+    }
+
+    &::after {
+      top: 0;
+    }
+  }
+
+  &--create:empty::before {
+    content: 'Create';
+  }
+
+  &--add:empty::before {
+    content: 'Add';
+  }
+
+  &--delete:empty::before {
+    content: 'Delete';
+  }
+
+  &--remove:empty::before {
+    content: 'Remove';
+  }
+
+  &--edit:empty::before {
+    content: 'Edit';
+  }
+
+  &--clear:empty::before {
+    content: 'Clear';
+  }
+
+  &--save:empty::before {
+    content: 'Save';
+  }
+
+  &--apply:empty::before {
+    content: 'Apply';
+  }
+
+  &--login:empty::before {
+    content: 'Login';
+  }
+
+  &--ok:empty::before {
+    content: 'OK';
+  }
+
+  &--cancel:empty::before {
+    content: 'Cancel';
+  }
+
+  &--close:empty::before {
+    content: 'Close';
+  }
+
+  &--drag:empty::before {
+    content: 'Drag';
+  }
+
+  &--copy:empty::before {
+    content: 'Copy';
+  }
+
+  &--paste:empty::before {
+    content: 'Paste';
+  }
+
+  &--drag {
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+.dito-buttons {
+  // TODO: BEM
+
+  &--large {
+    --button-margin: 3px;
+
+    font-size: $header-font-size;
+    flex-flow: row wrap;
+    justify-content: center;
+    padding-bottom: $content-padding;
+
+    .dito-container {
+      // Do not specify this on .dito-buttons directly as it would break borders
+      margin-top: $content-padding;
+    }
+
+    .dito-button {
+      border-radius: 2em;
+      padding: $button-round-padding;
+    }
+  }
+
+  &--main {
+    border-top: $border-style;
+  }
+
+  &--sticky {
+    align-self: flex-end;
+    position: sticky;
+    bottom: 0;
+    z-index: $z-index-main-buttons;
+    background: $content-color-background;
+    margin-top: 2 * $content-padding;
+    margin-bottom: calc(-1 * var(--pane-padding, 0px));
+    box-shadow: 0 (-$content-padding) $content-padding (-$content-padding)
+      $color-shadow;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &--round,
+  &--small {
+    // For now, nothing for these:
+    // .dito-button--create:empty::before,
+    // .dito-button--add:empty::before
+
+    .dito-button--upload:empty::before {
+      @extend %icon-upload;
+    }
+
+    .dito-button--delete:empty::before,
+    .dito-button--remove:empty::before {
+      @extend %icon-remove;
+    }
+
+    .dito-button--edit:empty::before {
+      @extend %icon-edit;
+    }
+
+    .dito-button--clear:empty::before {
+      @extend %icon-clear;
+    }
+
+    .dito-button--drag:empty::before {
+      @extend %icon-drag;
+    }
+
+    .dito-button--copy:empty::before {
+      @extend %icon-copy;
+    }
+
+    .dito-button--paste:empty::before {
+      @extend %icon-paste;
+    }
+  }
+}