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

package/src/components/DitoUploadFile.vue

@@ -0,0 +1,199 @@
+<template lang="pug">
+.dito-upload-file
+  .dito-thumbnail(
+    v-if="thumbnail"
+    :class="`dito-thumbnail--${thumbnail}`"
+  )
+    .dito-thumbnail__inner
+      img(
+        v-if="source"
+        :src="source"
+        crossorigin="anonymous"
+      )
+      .dito-thumbnail__type(
+        v-else
+      )
+        span {{ type }}
+  span {{ file.name }}
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoUploadFile', {
+  props: {
+    file: { type: Object, required: true },
+    thumbnail: { type: String, default: null },
+    thumbnailUrl: { type: String, default: null }
+  },
+
+  data() {
+    return {
+      uploadUrl: null
+    }
+  },
+
+  computed: {
+    type() {
+      return (
+        TYPES[this.file.type] ||
+        this.file.name.split('.').pop().toUpperCase()
+      )
+    },
+
+    source() {
+      return this.uploadUrl || this.thumbnailUrl
+    }
+  },
+
+  watch: {
+    'file.upload.file': {
+      immediate: true,
+      handler(file) {
+        if (this.thumbnail && file?.type.startsWith('image/')) {
+          const reader = new FileReader()
+          reader.onload = () => {
+            this.uploadUrl = reader.result
+          }
+          reader.readAsDataURL(file)
+        } else {
+          this.uploadUrl = null
+        }
+      }
+    }
+  }
+})
+
+const TYPES = {
+  'text/plain': 'TXT',
+  'text/html': 'HTML',
+  'text/css': 'CSS',
+  'text/javascript': 'JS',
+  'image/jpeg': 'JPG',
+  'image/png': 'PNG',
+  'image/gif': 'GIF',
+  'image/svg+xml': 'SVG',
+  'movie/mp4': 'MP4',
+  'audio/mpeg': 'MP3',
+  'application/json': 'JSON',
+  'application/xml': 'XML',
+  'application/pdf': 'PDF',
+  'application/zip': 'ZIP'
+}
+</script>
+
+<style lang="scss">
+@use 'sass:math';
+@import '../styles/_imports';
+
+.dito-upload-file {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.dito-thumbnail {
+  $self: &;
+
+  // Small size by default
+  --max-size: #{1 * $input-height};
+  --corner-size: calc(var(--max-size) / 5);
+  --shadow-size: 1px;
+  --min-size: calc(2 * var(--corner-size));
+  --margin: 0em;
+  --drop-shadow: drop-shadow(
+    0 calc(var(--shadow-size) * 0.75) var(--shadow-size)
+      #{rgba($color-black, 0.4)}
+  );
+
+  position: relative;
+  margin: var(--margin);
+  margin-right: 0.5em;
+  filter: var(--drop-shadow);
+
+  &--small {
+    --max-size: #{1 * $input-height};
+    --margin: 0em;
+    --shadow-size: 1px;
+  }
+
+  &--medium {
+    --max-size: #{2 * $input-height};
+    --margin: 0.25em;
+    --shadow-size: 1.5px;
+  }
+
+  &--large {
+    --max-size: #{4 * $input-height};
+    --margin: 0.5em;
+    --shadow-size: 2.5px;
+  }
+
+  &__inner {
+    background: #ffffff;
+    clip-path: polygon(
+      0 0,
+      calc(100% - var(--corner-size)) 0,
+      100% var(--corner-size),
+      100% 100%,
+      0 100%
+    );
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: var(--corner-size);
+      height: var(--corner-size);
+      background: linear-gradient(45deg, #ffffff, #eeeeee 40%, #dddddd 50%);
+      filter: var(--drop-shadow);
+    }
+  }
+
+  &__type {
+    --font-size: var(--corner-size);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--min-size);
+    min-height: var(--max-size);
+    aspect-ratio: 3 / 4;
+
+    span {
+      --color: #{$color-grey};
+
+      font-size: min(var(--font-size), #{1.25 * $font-size});
+      color: var(--color);
+
+      #{$self}:not(#{$self}--small) & {
+        padding: 0 calc(var(--font-size) / 4);
+        border-radius: calc(var(--font-size) / 4);
+        background: var(--color);
+        color: #ffffff;
+      }
+
+      #{$self}--medium & {
+        --color: #{$color-light};
+      }
+
+      #{$self}--large & {
+        --color: #{$color-lighter};
+      }
+    }
+  }
+
+  img {
+    display: block;
+    // SVG images need 100% settings to scale into the container.
+    width: 100%;
+    height: 100%;
+    min-width: var(--min-size);
+    min-height: var(--min-size);
+    max-width: var(--max-size);
+    max-height: var(--max-size);
+  }
+}
+</style>

package/src/components/DitoVNode.vue

@@ -0,0 +1,14 @@
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+function DitoVNode({ vnode }) {
+  return vnode
+}
+
+DitoVNode.props = {
+  vnode: { type: Object, required: true }
+}
+
+export default DitoComponent.component('DitoVnode', DitoVNode)
+</script>

package/src/components/DitoView.vue

@@ -0,0 +1,143 @@
+<template lang="pug">
+template(
+  v-if="user && shouldRenderSchema(viewSchema)"
+)
+  //- Only render DitoView when it is active, otherwise a normal router-view
+  //- instead, to nest further route components.
+  //- NOTE: This is different from the handling in DitoForm, where `v-show` is
+  //- used to always render forms even when other nested forms are present.
+  RouterView(
+    v-if="!isLastRoute"
+    :key="name"
+  )
+  .dito-view.dito-scroll-parent(
+    v-else
+    :data-resource="sourceSchema.path"
+  )
+    DitoSchema(
+      :key="name"
+      :schema="viewSchema"
+      :data="data"
+      :meta="meta"
+      :store="getChildStore(name)"
+      padding="root"
+      :disabled="isLoading"
+      scrollable
+      single
+    )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import RouteMixin from '../mixins/RouteMixin.js'
+import {
+  isSingleComponentView,
+  someNestedSchemaComponent
+} from '../utils/schema.js'
+import { hasResource } from '../utils/resource.js'
+
+// @vue/component
+export default DitoComponent.component('DitoView', {
+  mixins: [RouteMixin],
+
+  provide() {
+    // Redirect $sourceComponent and $resourceComponent to the main component:
+    return {
+      $sourceComponent: () => this.mainComponent?.sourceComponent || null,
+      $resourceComponent: () => this.mainComponent?.resourceComponent || null
+    }
+  },
+
+  data() {
+    return {
+      // Updated from LoadingMixin through `setLoading(isLoading)`:
+      isLoading: false,
+      // NOTE: Data is shared across all views because the router recycles the
+      // DitoView component.
+      data: {}
+    }
+  },
+
+  computed: {
+    schema() {
+      return this.meta.schema ?? {}
+    },
+
+    name() {
+      return this.schema.name
+    },
+
+    isView() {
+      return true
+    },
+
+    isSingleComponentView() {
+      return isSingleComponentView(this.schema)
+    },
+
+    mainComponent() {
+      return this.mainSchemaComponent?.getComponentByDataPath(this.name)
+    },
+
+    viewSchema() {
+      const { component, ...schema } = this.schema
+      // Translate single-component schemas into multi-component schemas,
+      // so they can be rendered directly through DitoSchema also:
+      return this.isSingleComponentView
+        ? {
+            ...schema,
+            components: {
+              [schema.name]: {
+                name: schema.name,
+                label: false,
+                ...component
+              }
+            }
+          }
+        : schema
+    },
+
+    providesData() {
+      return someNestedSchemaComponent(this.viewSchema, hasResource)
+    }
+  },
+
+  watch: {
+    $route: {
+      // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
+      flush: 'post',
+      handler(to, from) {
+        // See if the route changes completely, and clear the data if it does.
+        if (this.isFullRouteChange(to, from)) {
+          this.isLoading = false
+          this.data = {}
+        }
+      }
+    }
+  },
+
+  mounted() {
+    // Prevent bypassing of if-condition by direct URL access.
+    if (!this.shouldRenderSchema(this.viewSchema)) {
+      this.$router.replace({ path: '/' })
+    }
+  },
+
+  methods: {
+    setData(data) {
+      this.data = data
+    },
+
+    getChildPath(path) {
+      // Lists inside single-component views use the view's path for sub-paths:
+      return this.isSingleComponentView
+        ? this.path
+        : `${this.path}/${path}`
+    },
+
+    setLoading(isLoading) {
+      this.isLoading = !!isLoading
+    }
+  }
+})
+</script>

package/src/components/index.js

@@ -0,0 +1,42 @@
+// NOTE: index.js exports nothing, but Dito.js components will be registered in
+// DitoComponent and can be rendered through their tag-names.
+// NOTE: Sequence is meaningful for reasons of CSS declaration sequence. The
+// convention is in order of encountered hierarchy in the DOM.
+
+export { default as DitoRoot } from './DitoRoot.vue'
+export { default as DitoMenu } from './DitoMenu.vue'
+export { default as DitoTrail } from './DitoTrail.vue'
+export { default as DitoHeader } from './DitoHeader.vue'
+export { default as DitoNavigation } from './DitoNavigation.vue'
+export { default as DitoNotifications } from './DitoNotifications.vue'
+export { default as DitoSidebar } from './DitoSidebar.vue'
+export { default as DitoAccount } from './DitoAccount.vue'
+export { default as DitoDialog } from './DitoDialog.vue'
+export { default as DitoLabel } from './DitoLabel.vue'
+export { default as DitoSchema } from './DitoSchema.vue'
+export { default as DitoSchemaInlined } from './DitoSchemaInlined.vue'
+export { default as DitoPane } from './DitoPane.vue'
+export { default as DitoContainer } from './DitoContainer.vue'
+export { default as DitoTabs } from './DitoTabs.vue'
+export { default as DitoPanel } from './DitoPanel.vue'
+export { default as DitoPanels } from './DitoPanels.vue'
+export { default as DitoButtons } from './DitoButtons.vue'
+export { default as DitoEditButtons } from './DitoEditButtons.vue'
+export { default as DitoCreateButton } from './DitoCreateButton.vue'
+export { default as DitoClipboard } from './DitoClipboard.vue'
+export { default as DitoView } from './DitoView.vue'
+export { default as DitoForm } from './DitoForm.vue'
+export { default as DitoFormInner } from './DitoFormInner.vue'
+export { default as DitoFormNested } from './DitoFormNested.vue'
+export { default as DitoErrors } from './DitoErrors.vue'
+export { default as DitoScopes } from './DitoScopes.vue'
+export { default as DitoPagination } from './DitoPagination.vue'
+export { default as DitoTreeItem } from './DitoTreeItem.vue'
+export { default as DitoTableHead } from './DitoTableHead.vue'
+export { default as DitoTableCell } from './DitoTableCell.vue'
+export { default as DitoUploadFile } from './DitoUploadFile.vue'
+export { default as DitoDraggable } from './DitoDraggable.vue'
+export { default as DitoSpinner } from './DitoSpinner.vue'
+export { default as DitoAffix } from './DitoAffix.vue'
+export { default as DitoAffixes } from './DitoAffixes.vue'
+export { default as DitoVNode } from './DitoVNode.vue'

package/src/directives/resize.js

@@ -0,0 +1,83 @@
+import { asArray } from '@ditojs/utils'
+
+export default {
+  mounted(node, binding) {
+    observeResize(node, binding.value, binding.arg)
+  },
+
+  unmounted(node, binding) {
+    unobserveResize(node, binding.value, binding.arg)
+  }
+}
+
+export function observeResize(node, handler, options) {
+  Observer.getObserver(options).observe(node, handler)
+}
+
+export function unobserveResize(node, handler, options) {
+  Observer.getObserver(options).unobserve(node, handler)
+}
+
+export const isResizeSupported = typeof ResizeObserver !== 'undefined'
+
+const observers = {}
+
+class Observer {
+  constructor(key, options) {
+    this.key = key
+    this.options = options
+    this.observer = isResizeSupported
+      ? new ResizeObserver(entries => this.handle(entries))
+      : null
+    this.handlersByNode = new WeakMap()
+    this.nodeCount = 0
+  }
+
+  observe(node, handler) {
+    let handlers = this.handlersByNode.get(node)
+    if (!handlers) {
+      handlers = new Set()
+      this.handlersByNode.set(node, handlers)
+      this.observer?.observe(node, this.options)
+      this.nodeCount++
+    }
+    handlers.add(handler)
+  }
+
+  unobserve(node, handler) {
+    const handlers = this.handlersByNode.get(node)
+    if (handlers?.delete(handler) && handlers.size === 0) {
+      this.handlersByNode.delete(node)
+      this.observer?.unobserve(node)
+      if (--this.nodeCount === 0) {
+        delete observers[this.key]
+      }
+    }
+  }
+
+  handle(entries) {
+    for (const entry of entries) {
+      const handlers = this.handlersByNode.get(entry.target)
+      if (handlers) {
+        const event = {
+          target: entry.target,
+          contentRect: entry.contentRect,
+          // Use `asArray` since Firefox before v92 returns these as objects:
+          borderBoxSize: asArray(entry.borderBoxSize),
+          contentBoxSize: asArray(entry.contentBoxSize),
+          devicePixelContentBoxSize: asArray(entry.devicePixelContentBoxSize)
+        }
+        for (const handler of handlers) {
+          handler(event)
+        }
+      }
+    }
+  }
+
+  static getObserver({ box = 'content-box' } = {}) {
+    const options = { box }
+    const key = JSON.stringify(options)
+    observers[key] ||= new Observer(key, options)
+    return observers[key]
+  }
+}

package/src/index.js

@@ -0,0 +1 @@
+export { default } from './DitoAdmin.js'

package/src/mixins/ContextMixin.js

@@ -0,0 +1,68 @@
+import DitoContext from '../DitoContext.js'
+import { getItem, getParentItem } from '../utils/data.js'
+
+// @vue/component
+export default {
+  computed: {
+    context() {
+      return new DitoContext(this, { nested: this.nested })
+    },
+
+    // The following computed properties are similar to `DitoContext`
+    // properties, so that we can access these on `this` as well:
+    // NOTE: While internally, we speak of `data`, in the API surface the
+    // term `item` is used for the data that relates to editing objects.
+    // NOTE: This should always return the same as:
+    // return getItem(this.rootData, this.dataPath, false)
+    parentData() {
+      const data = getParentItem(this.rootData, this.dataPath, this.nested)
+      return data !== this.data ? data : null
+    },
+
+    // @overridable
+    processedData() {
+      return getProcessedParentData(this, this.dataPath, this.nested)
+    },
+
+    processedRootData() {
+      return getProcessedParentData(this, '', false)
+    },
+
+    item() {
+      return this.data
+    },
+
+    parentItem() {
+      return this.parentData
+    },
+
+    rootItem() {
+      return this.rootData
+    },
+
+    processedItem() {
+      return this.processedData
+    },
+
+    processedRootItem() {
+      return this.processedRootData
+    }
+  }
+}
+
+function getProcessedParentData(component, dataPath, nested = false) {
+  // We can only get the processed data through the schemaComponent, but
+  // that's not necessarily the item represented by this component.
+  // Solution: Find the relative path and the processed sub-item from there:
+  let { schemaComponent } = component
+  // Find the schema component that contains the desired data-path:
+  while (schemaComponent.dataPath.length > dataPath.length) {
+    schemaComponent = schemaComponent.parentSchemaComponent
+  }
+  return getItem(
+    schemaComponent.processedData,
+    // Get the dataPath relative to the schemaComponent's data:
+    dataPath.slice(schemaComponent.dataPath.length),
+    nested
+  )
+}

package/src/mixins/DataMixin.js

@@ -0,0 +1,131 @@
+import {
+  isObject,
+  isFunction,
+  isPromise,
+  normalizeDataPath,
+  getValueAtDataPath
+} from '@ditojs/utils'
+import { markRaw, ref } from 'vue'
+import LoadingMixin from './LoadingMixin.js'
+
+// @vue/component
+export default {
+  mixins: [LoadingMixin],
+
+  data() {
+    return {
+      isLoading: false,
+      asyncDataEntries: markRaw({})
+    }
+  },
+
+  methods: {
+    handleDataSchema(schema, name, loadingOptions) {
+      if (!isObject(schema)) {
+        schema = { data: schema }
+      }
+      let { data = undefined, dataPath = null } = schema
+      // Create a reactive entry for the async data, if it doesn't exist yet.
+      // NOTE: `markRaw()` is used to avoid reactivity on `asyncDataEntries`
+      // itself, as reactivity is only desired on `reactiveVersion`, which is
+      // used to trigger controlled reevaluation of the computed getter.
+      const asyncEntry = (this.asyncDataEntries[name] ??= {
+        reactiveVersion: ref(1),
+        dependencyFunction: null,
+        resolvedData: undefined,
+        resolving: false,
+        resolved: false
+      })
+      // If the data callback provided a dependency function when it was called,
+      // cal it in every call of `handleDataSchema()` to force Vue to keep track
+      // of the async dependencies. Also access `reactiveVersion.value` right
+      // away, to ensure that the reactive property is tracked as a dependency:
+      asyncEntry.reactiveVersion.value &&
+      asyncEntry.dependencyFunction?.(this.context)
+
+      if (asyncEntry.resolved) {
+        // If the data was resolved already, return it and clear the resolved
+        // value. This works because Vue caches the result of computed getters
+        // and only reevaluates if one of the dependencies changed. This is to
+        // ensure that a cached value here doesn't block / override
+        // reevaluation when a dependency changes:
+        const { resolvedData } = asyncEntry
+        asyncEntry.resolvedData = undefined
+        asyncEntry.resolved = false
+        return resolvedData
+      }
+      // Avoid calling the data function twice:
+      if (asyncEntry.resolving) {
+        data = null
+      } else if (data) {
+        if (isFunction(data)) {
+          const result = data(this.context)
+          // If the result of the data function is another function, then the
+          // first data function is there to track dependencies and the real
+          // data loading happens in the function that it returned. Keep track
+          // it in `dependencyFunction` so it can be called on each call of
+          // `handleDataSchema()` to keep the dependencies intact, and call
+          // the function that it returned once to get the actual data:
+          if (isFunction(result)) {
+            asyncEntry.dependencyFunction = data
+            data = result(this.context)
+          } else {
+            data = result
+          }
+        }
+        // NOTE: If the data is not a promise, it is resolved already.
+        if (isPromise(data)) {
+          // If the data is asynchronous, it can't be returned straight away.
+          // But we can cheat using computed properties and `resolvedData`,
+          // which is going to receive the loaded data asynchronously,
+          // triggering a recompute of the computed property that calls
+          // `handleDataSchema()`.
+          asyncEntry.resolving = true
+          this.resolveData(data, loadingOptions)
+            .then(data => {
+              asyncEntry.resolvedData = data
+              asyncEntry.resolving = false
+              asyncEntry.resolved = true
+              // Trigger reevaluation of the computed getter by increasing the
+              // `reactiveVersion` value.
+              asyncEntry.reactiveVersion.value++
+            })
+            .catch(error => {
+              console.error(error)
+              asyncEntry.resolving = false
+            })
+          // Clear data until promise is resolved and `resolvedData` is set
+          data = null
+        }
+      } else if (dataPath) {
+        data = getValueAtDataPath(
+          this.rootData,
+          normalizeDataPath(`${this.dataPath}/${dataPath}`)
+        )
+      }
+      return data
+    },
+
+    async resolveData(load, loadingOptions = {}) {
+      // Use a timeout to allow already resolved promises to return data without
+      // showing a loading indicator.
+      let clearLoading = false
+      const timer = setTimeout(() => {
+        this.setLoading(true, loadingOptions)
+        clearLoading = true
+      }, 0)
+      let data = null
+      try {
+        data = await (isFunction(load) ? load() : load)
+      } catch (error) {
+        this.addError(error.message || error)
+      }
+      if (clearLoading) {
+        this.setLoading(false, loadingOptions)
+      } else {
+        clearTimeout(timer)
+      }
+      return data
+    }
+  }
+}