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

package/src/DitoContext.js

@@ -0,0 +1,318 @@
+import { toRaw } from 'vue'
+import { getValueAtDataPath, isFunction } from '@ditojs/utils'
+import {
+  getItemDataPath,
+  getParentItemDataPath,
+  getParentItem,
+  getItem,
+  getLastDataPathName,
+  getLastDataPathIndex
+} from './utils/data.js'
+
+const { hasOwnProperty } = Object.prototype
+
+// See also `ContextMixin`: `DitoContext` instances are a thin wrapper around
+// raw `context` objects, which themselves actually inherit from the linked
+// `component` instance, so that they only need to provide the values that
+// should be different than in the underlying component. In order to not expose
+// all fields from the component, the wrapper is introduced.
+
+// Use WeakMap for the raw `context` objects, so we don't have to pollute the
+// actual `DitoContext` instance with it.
+const contexts = new WeakMap()
+
+function toObject(context) {
+  const rawStart = toRaw(context)
+  let raw = rawStart
+  let object = null
+  // In case `DitoContext.extend()` was used, we need to find the actual context
+  // object from the object's the inheritance chain:
+  do {
+    object = contexts.get(raw)
+    if (object) break
+    raw = Object.getPrototypeOf(raw)
+  } while (raw)
+  if (object && raw !== rawStart) {
+    // Assign the passed context with the original object as well, so we don't
+    // have to search for it again:
+    contexts.set(raw, object)
+  }
+  return object
+}
+
+function get(context, key, defaultValue) {
+  const object = toObject(context)
+  const value = key in object ? object[key] : undefined
+  // If `object` explicitly sets the key to `undefined`, return it.
+  return value !== undefined || hasOwnProperty.call(object, key)
+    ? value
+    : isFunction(defaultValue)
+      ? defaultValue()
+      : defaultValue
+}
+
+function set(context, key, value) {
+  toObject(context)[key] = value
+}
+
+export default class DitoContext {
+  constructor(component, context) {
+    // Use the provided params object / function, or create a new one:
+    context = context
+      ? isFunction(context)
+        ? context()
+        : { ...context }
+      : {}
+    // If not explicitly set (to false), default to true so we don't fall back
+    // to `component` for its value.
+    context.nested ??= true
+    context.component = component
+    // Have `object` inherit from the `component` instance, so it can override
+    // its values and still retrieve from it, and associate it with `this`
+    // through `contexts` map:
+    const object = Object.setPrototypeOf(context, component)
+    // No need for `toRaw(this)` here as it's always raw inside the constructor.
+    contexts.set(this, object)
+  }
+
+  static get(component, context) {
+    return context instanceof DitoContext
+      ? context
+      : new DitoContext(component, context)
+  }
+
+  extend(object) {
+    // Create a copy of this context that inherits from the real one, but
+    // overrides some properties with the ones from the passed `object`.
+    return Object.setPrototypeOf(object, this)
+  }
+
+  // `nested` is `true` when the data-path points a value inside an item, and
+  // `false` when it points to the item itself.
+  get nested() {
+    return get(this, 'nested', true)
+  }
+
+  get schema() {
+    return get(this, 'schema', null)
+  }
+
+  get value() {
+    return get(
+      this,
+      'value',
+      () =>
+        // If the value is not defined on the underlying object, it's not a type
+        // component. If it is nested, we can still get the value from the root.
+        this.nested
+          ? getValueAtDataPath(this.rootItem, this.dataPath)
+          : undefined
+    )
+  }
+
+  get dataPath() {
+    return get(this, 'dataPath', '')
+  }
+
+  get name() {
+    return get(this, 'name', () => getLastDataPathName(this.dataPath))
+  }
+
+  get index() {
+    return get(this, 'index', () => getLastDataPathIndex(this.dataPath))
+  }
+
+  get itemDataPath() {
+    return getItemDataPath(this.dataPath, this.nested)
+  }
+
+  get parentItemDataPath() {
+    return getParentItemDataPath(this.dataPath, this.nested)
+  }
+
+  get itemIndex() {
+    return getLastDataPathIndex(this.itemDataPath)
+  }
+
+  get parentItemIndex() {
+    return getLastDataPathIndex(this.parentItemDataPath)
+  }
+
+  // NOTE: While internally, we speak of `data`, in the API surface the
+  // term `item` is used for the data that relates to editing objects:
+  get item() {
+    return get(
+      this,
+      'data',
+      // If `data` isn't provided, we can determine it from rootData & dataPath:
+      () => getItem(this.rootItem, this.dataPath, this.nested) || null
+    )
+  }
+
+  // NOTE: `parentItem` isn't the closest data parent to `item`, it's the
+  // closest parent that isn't an array, e.g. for relations or nested JSON data.
+  // This is why the term `item` was chosen over `data`, e.g. VS the use of
+  // `parentData` in server-sided validation, which is the closest parent. If
+  // needed, we could expose this data here too, as we can do all sorts of data
+  // processing with `rootData` and `dataPath`.
+  get parentItem() {
+    const item = (
+      getParentItem(this.rootItem, this.dataPath, this.nested) || null
+    )
+    return item !== this.item ? item : null
+  }
+
+  get rootItem() {
+    return get(this, 'rootData', null)
+  }
+
+  get processedItem() {
+    return get(this, 'processedData', null)
+  }
+
+  get processedRootItem() {
+    return get(this, 'processedRootData', null)
+  }
+
+  get clipboardItem() {
+    return get(this, 'clipboardData', null)
+  }
+
+  get user() {
+    return get(this, 'user', null)
+  }
+
+  get api() {
+    return get(this, 'api', null)
+  }
+
+  get views() {
+    return get(this, 'views', null)
+  }
+
+  get flattenedViews() {
+    return get(this, 'flattenedViews', null)
+  }
+
+  get itemLabel() {
+    return get(this, 'itemLabel', null)
+  }
+
+  get formLabel() {
+    return get(this, 'formLabel', null)
+  }
+
+  // NOTE: Like 'options', the associated component doesn't always exist, e.g.
+  // in nested forms during `processData()`. But `schema` is guaranteed to
+  // always be available.
+  get component() {
+    return get(this, 'component', null)
+  }
+
+  // TODO: Add `componentSchema` getter for the schema of the current component,
+  // even when the component isn't actually instantiated. Consider adding
+  // `sourceSchema` as well?
+
+  // TODO: Fix unclear naming: Which schema is this, that of the component or of
+  // its parent? Isn't exposing `formComponent` and `viewComponent` enough, once
+  // we offer access to their components there through `getComponent()` & co. on
+  // `DitoMixin` perhaps?  Also, there could be a `tabComponent` getter for
+  // schemas in tabs?
+  get schemaComponent() {
+    return get(this, 'schemaComponent', null)
+  }
+
+  get formComponent() {
+    return get(this, 'formComponent', null)
+  }
+
+  get viewComponent() {
+    return get(this, 'viewComponent', null)
+  }
+
+  get dialogComponent() {
+    return get(this, 'dialogComponent', null)
+  }
+
+  get panelComponent() {
+    return get(this, 'panelComponent', null)
+  }
+
+  get resourceComponent() {
+    return get(this, 'resourceComponent', null)
+  }
+
+  get sourceComponent() {
+    return get(this, 'sourceComponent', null)
+  }
+
+  // When used in OptionsMixin for `schema.options.value()`,
+  // `schema.options.label()` and  `schema.search.filter()` callbacks:
+  get option() {
+    return get(this, 'option', undefined)
+  }
+
+  get options() {
+    return get(this, 'options', undefined)
+  }
+
+  get open() {
+    return get(this, 'open', undefined)
+  }
+
+  // For search term in selects:
+  get searchTerm() {
+    return get(this, 'searchTerm', undefined)
+  }
+
+  // The error field is only populated in the context of buttons that send
+  // requests, see `ResourceMixin.emitButtonEvent()`:
+  get error() {
+    return get(this, 'error', undefined)
+  }
+
+  get wasNotified() {
+    return get(this, 'wasNotified', false)
+  }
+
+  get isRunning() {
+    return get(this, 'isRunning', false)
+  }
+
+  set isRunning(value) {
+    set(this, 'isRunning', value)
+  }
+
+  get query() {
+    return this.component.$route.query
+  }
+
+  // Helper Methods
+
+  get request() {
+    return options => this.component.request(options)
+  }
+
+  get format() {
+    return (value, options) => this.component.format(value, options)
+  }
+
+  get navigate() {
+    return location => this.component.navigate(location)
+  }
+
+  get download() {
+    return options => this.component.download(options)
+  }
+
+  get getResourceUrl() {
+    return resource => this.component.getResourceUrl(resource)
+  }
+
+  get notify() {
+    return options => {
+      this.component.notify(options)
+      set(this, 'wasNotified', true)
+    }
+  }
+}

package/src/DitoTypeComponent.js

@@ -0,0 +1,42 @@
+// DitoTypeComponent is the abstract base component for all other type
+// components inside the types/ folder. There's also a separate concrete
+// `DitoTypeComponent.vue` component, use to render `{ type: 'component' }`
+import { asArray, camelize } from '@ditojs/utils'
+import DitoComponent from './DitoComponent.js'
+import TypeMixin from './mixins/TypeMixin.js'
+import { registerTypeComponent, getTypeComponent } from './utils/schema.js'
+
+// @vue/component
+export default {
+  extends: DitoComponent,
+  mixins: [TypeMixin],
+
+  nativeField: false,
+  textField: false,
+  // Set reasonable defaults for all of these that are used by most type
+  // components. These only need defining in sub-classes when they differ.
+  defaultValue: null,
+  defaultNested: true,
+  defaultVisible: true,
+  defaultMultiple: false,
+  generateLabel: true,
+  excludeValue: false,
+  ignoreMissingValue: null,
+  omitSpacing: false,
+
+  component: DitoComponent.component,
+
+  get: getTypeComponent,
+
+  register(types, definition = {}) {
+    types = asArray(types)
+    const component = this.component(
+      `DitoType${camelize(types[0], true)}`,
+      definition
+    )
+    for (const type of types) {
+      registerTypeComponent(type, component)
+    }
+    return component
+  }
+}

package/src/DitoUser.js

@@ -0,0 +1,12 @@
+export default class DitoUser {
+  hasRole(...roles) {
+    if (this.roles) {
+      for (const role of roles) {
+        if (this.roles.includes(role)) {
+          return true
+        }
+      }
+    }
+    return false
+  }
+}

package/src/appState.js

@@ -0,0 +1,12 @@
+import { reactive } from 'vue'
+import { parseUserAgent } from './utils/agent'
+
+export default reactive({
+  title: '',
+  routeComponents: [],
+  user: null,
+  agent: parseUserAgent(navigator.userAgent || ''),
+  loadCache: {}, // See TypeMixin.load()
+  activeLabel: null,
+  clipboardData: null
+})

package/src/components/DitoAccount.vue

@@ -0,0 +1,60 @@
+<template lang="pug">
+.dito-account
+  a(
+    @mousedown.stop="onPulldownMouseDown()"
+  )
+    span {{ user.username }}
+  ul.dito-pulldown(:class="{ 'dito-pulldown--open': pulldown.open }")
+    li(
+      v-for="(label, value) of items"
+    )
+      a.dito-pulldown__item(
+        @mousedown.stop="onPulldownMouseDown(value)"
+        @mouseup="onPulldownMouseUp(value)"
+      ) {{ label }}
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import PulldownMixin from '../mixins/PulldownMixin.js'
+
+// @vue/component
+export default DitoComponent.component('DitoAccount', {
+  mixins: [PulldownMixin],
+
+  data() {
+    return {
+      items: {
+        settings: 'Settings',
+        logout: 'Logout'
+      }
+    }
+  },
+
+  methods: {
+    onPulldownSelect(value) {
+      switch (value) {
+        case 'logout':
+          this.rootComponent.logout()
+          break
+        case 'settings':
+          console.info('TODO: Implement Settings')
+          break
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-account {
+  position: relative;
+  display: inline-block;
+
+  .dito-pulldown {
+    top: $pulldown-padding-ver;
+  }
+}
+</style>

package/src/components/DitoAffix.vue

@@ -0,0 +1,68 @@
+<template lang="pug">
+component(
+  v-if="item.type === 'text'"
+  :is="item.as || 'div'"
+) {{ item.text }}
+component(
+  v-else-if="item.type === 'html'"
+  :is="item.as || 'div'"
+  v-html="item.html"
+)
+DitoSpinner(
+  v-else-if="item.type === 'spinner'"
+  :size="item.size"
+  :color="item.color"
+)
+DitoIcon(
+  v-else-if="item.type === 'icon'"
+  :name="item.name"
+  :disabled="item.disabled"
+)
+component(
+  v-else-if="item.type === 'component'"
+  :is="item.component"
+  v-bind="item.props"
+)
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import DitoSpinner from './DitoSpinner.vue'
+import { DitoIcon } from '@ditojs/ui/src'
+
+export default DitoComponent.component('DitoAffix', {
+  components: { DitoSpinner, DitoIcon },
+
+  props: {
+    item: { type: Object, required: true },
+    parentContext: { type: Object, required: true }
+  },
+
+  computed: {
+    // Override DitoMixin's context with the parent's context
+    context() {
+      return this.parentContext
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-affix {
+  &--html,
+  &--text {
+    display: inline-block;
+  }
+
+  &--ellipsis {
+    @include ellipsis;
+
+    flex: 1;
+    display: block;
+    min-width: 0;
+    width: 0;
+  }
+}
+</style>

package/src/components/DitoAffixes.vue

@@ -0,0 +1,200 @@
+<template lang="pug">
+.dito-affixes(
+  v-if="hasContent"
+  :class="classes"
+)
+  slot(name="prepend")
+  DitoAffix.dito-affix(
+    v-for="(item, index) in visibleItems"
+    :key="index"
+    :class="getItemClasses(item)"
+    :style="item.style"
+    :item="item"
+    :parentContext="parentContext"
+  )
+  button.dito-affixes__clear(
+    v-if="clearable"
+    type="button"
+    title="Clear"
+    :disabled="disabled"
+    @click.stop="$emit('clear')"
+    @mousedown.stop
+  )
+  slot(name="append")
+  .dito-info(
+    v-if="inlineInfo"
+    :data-info="inlineInfo"
+  )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import DitoAffix from './DitoAffix.vue'
+import { asArray, isString } from '@ditojs/utils'
+import { hasSlotContent } from '@ditojs/ui/src'
+import { shouldRenderSchema } from '../utils/schema.js'
+
+export default DitoComponent.component('DitoAffixes', {
+  components: { DitoAffix },
+  emits: ['clear'],
+
+  props: {
+    items: { type: [String, Object, Array], default: null },
+    mode: { type: String, default: null },
+    position: { type: String, default: null },
+    absolute: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    inlineInfo: { type: String, default: null },
+    parentContext: { type: Object, required: true }
+  },
+
+  computed: {
+    // Override DitoMixin's context with the parent's context
+    context() {
+      return this.parentContext
+    },
+
+    processedItems() {
+      return asArray(this.items)
+        .filter(Boolean)
+        .map(item =>
+          isString(item)
+            ? { type: 'text', text: item }
+            : item.type
+              ? item
+              : item.text != null
+                ? { type: 'text', ...item }
+                : item.html != null
+                  ? { type: 'html', ...item }
+                  : item
+        )
+    },
+
+    visibleItems() {
+      return this.processedItems.filter(item =>
+        shouldRenderSchema(item, this.context)
+      )
+    },
+
+    classes() {
+      const prefix = 'dito-affixes'
+      return {
+        [`${prefix}--${this.position}`]: this.position,
+        [`${prefix}--${this.mode}`]: this.mode,
+        [`${prefix}--absolute`]: this.absolute
+      }
+    },
+
+    hasContent() {
+      return (
+        this.visibleItems.length > 0 ||
+        this.clearable ||
+        this.inlineInfo ||
+        hasSlotContent(this.$slots.prepend) ||
+        hasSlotContent(this.$slots.append)
+      )
+    }
+  },
+
+  methods: {
+    getItemClasses(item) {
+      const prefix = 'dito-affix'
+      return [
+        {
+          [`${prefix}--${item.type}`]: item.type,
+          [`${prefix}--ellipsis`]: (
+            this.mode === 'ellipsis' && ['text', 'html'].includes(item.type)
+          )
+        },
+        item.class
+      ]
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-affixes {
+  $self: &;
+
+  @include user-select(none);
+
+  display: flex;
+  align-items: center;
+  gap: $input-padding-hor;
+
+  &--absolute {
+    position: absolute;
+    inset: $border-width;
+    margin: $input-padding-ver $input-padding-hor;
+    pointer-events: none;
+
+    > * {
+      pointer-events: auto;
+    }
+
+    &#{$self}--prefix {
+      right: unset;
+    }
+
+    &#{$self}--suffix {
+      left: unset;
+    }
+  }
+
+  &--ellipsis {
+    flex: 1;
+  }
+
+  &--input {
+    color: $color-grey;
+
+    .dito-icon--disabled {
+      color: $color-light;
+    }
+
+    @at-root .dito-component:not(:has(.dito-component)):focus-within & {
+      color: $color-active;
+    }
+  }
+
+  &__clear {
+    --size: #{calc($input-height - 4 * $border-width)};
+
+    display: none;
+    position: relative;
+    cursor: pointer;
+    width: var(--size);
+    height: var(--size);
+    border-radius: $border-radius;
+    margin: (-$input-padding-ver + $border-width)
+      (-$input-padding-hor + $border-width);
+    padding: 0;
+    border: 0;
+
+    @at-root .dito-component:not(:has(.dito-component)):hover & {
+      display: block;
+    }
+
+    &::before {
+      @extend %icon-clear;
+
+      color: $color-grey;
+    }
+
+    &:hover::before {
+      color: $color-black;
+    }
+  }
+
+  // Hide other affixes when clear button is shown
+  // prettier-ignore
+  @at-root .dito-component:hover:not(:has(.dito-component))
+        #{$self}:has(#{$self}__clear) > *:not(#{$self}__clear) {
+      display: none;
+    }
+}
+</style>