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

package/src/types/index.js

@@ -0,0 +1,30 @@
+// NOTE: index.js exports nothing, but type components will be registered in
+// DitoComponent and can be retrieved through DitoTypeComponent.get(type) and
+// rendered through their component-names (e.g. dito-type-list).
+
+export { default as DitoTypeButton } from './DitoTypeButton.vue'
+export { default as DitoTypeCheckbox } from './DitoTypeCheckbox.vue'
+export { default as DitoTypeCheckboxes } from './DitoTypeCheckboxes.vue'
+export { default as DitoTypeCode } from './DitoTypeCode.vue'
+export { default as DitoTypeColor } from './DitoTypeColor.vue'
+export { default as DitoDitoTypeComponent } from './DitoTypeComponent.vue'
+export { default as DitoTypeComputed } from './DitoTypeComputed.vue'
+export { default as DitoTypeDate } from './DitoTypeDate.vue'
+export { default as DitoTypeList } from './DitoTypeList.vue'
+export { default as DitoTypeLabel } from './DitoTypeLabel.vue'
+export { default as DitoTypeMarkup } from './DitoTypeMarkup.vue'
+export { default as DitoTypeMultiselect } from './DitoTypeMultiselect.vue'
+export { default as DitoTypeNumber } from './DitoTypeNumber.vue'
+export { default as DitoTypeObject } from './DitoTypeObject.vue'
+export { default as DitoTypePanel } from './DitoTypePanel.vue'
+export { default as DitoTypeProgress } from './DitoTypeProgress.vue'
+export { default as DitoTypeRadio } from './DitoTypeRadio.vue'
+export { default as DitoTypeSection } from './DitoTypeSection.vue'
+export { default as DitoTypeSelect } from './DitoTypeSelect.vue'
+export { default as DitoTypeSlider } from './DitoTypeSlider.vue'
+export { default as DitoTypeSpacer } from './DitoTypeSpacer.vue'
+export { default as DitoTypeSwitch } from './DitoTypeSwitch.vue'
+export { default as DitoTypeText } from './DitoTypeText.vue'
+export { default as DitoTypeTextarea } from './DitoTypeTextarea.vue'
+export { default as DitoTypeTreeList } from './DitoTypeTreeList.vue'
+export { default as DitoTypeUpload } from './DitoTypeUpload.vue'

package/src/utils/SchemaGraph.js

@@ -0,0 +1,147 @@
+import { isTemporaryId } from './data.js'
+import {
+  isInteger,
+  asArray,
+  parseDataPath,
+  getValueAtDataPath
+} from '@ditojs/utils'
+import { nanoid } from 'nanoid'
+
+// SchemaGraph is a class to collect schema graph meta information in order to
+// process sources and relations for the given targets 'server' and 'clipboard',
+// according to the following table:
+//
+// | --------------------------------------------| --------- | --------- |
+// | data                                        | server    | clipboard |
+// | --------------------------------------------| --------- | --------- |
+// | type: 'relation', internal: false           | keep id   | keep id   |
+// | type: 'relation', internal: true            | keep id   | ref, #ref |
+// | type: 'relation', internal: true, temporary | ref, #ref | ref, #ref |
+// | type: 'source', related: false              | keep id   | remove id |
+// | type: 'source', related: false, temporary   | ref, #id  | remove id |
+// | type: 'source', related: true               | keep id   | ref, #id  |
+// | type: 'source', related: true, temporary    | ref, #id  | ref, #id  |
+// | --------------------------------------------| --------- | --------- |
+
+export class SchemaGraph {
+  graph = {}
+  references = {}
+
+  set(dataPath, settings, defaults) {
+    dataPath = parseDataPath(dataPath)
+    let subGraph = this.graph
+    for (const part of dataPath) {
+      const key = isInteger(+part) ? '*' : part
+      subGraph = subGraph[key] ??= {}
+    }
+    subGraph.$settings = {
+      ...defaults, // See `addSource(dataPath)`
+      ...subGraph.$settings,
+      ...settings
+    }
+  }
+
+  addSource(dataPath, schema) {
+    // Only set `related: false` through the defaults, as `setSourceRelated()`
+    // may be called before `addSource()`, depending on the graph structure.
+    this.set(dataPath, { type: 'source', schema }, { related: false })
+  }
+
+  setSourceRelated(dataPath) {
+    this.set(dataPath, {
+      related: true,
+      reference: this.getReferencePrefix(dataPath)
+    })
+  }
+
+  addRelation(dataPath, relatedDataPath, schema) {
+    this.set(dataPath, {
+      type: 'relation',
+      schema,
+      internal: !!relatedDataPath,
+      reference: this.getReferencePrefix(relatedDataPath)
+    })
+  }
+
+  getReferencePrefix(dataPath) {
+    return dataPath
+      ? (this.references[dataPath] ??= nanoid(6))
+      : null
+  }
+
+  flatten() {
+    const flatten = graph => {
+      const entries = []
+      for (const [key, { $settings, ...subGraph }] of Object.entries(graph)) {
+        if ($settings) {
+          entries.push([key, $settings])
+        }
+        for (const [subKey, settings] of flatten(subGraph)) {
+          entries.push([`${key}/${subKey}`, settings])
+        }
+      }
+      return entries
+    }
+
+    return flatten(this.graph)
+  }
+
+  process(sourceSchema, data, { target }) {
+    const clipboard = target === 'clipboard'
+    if (clipboard) {
+      delete data[sourceSchema.idKey || 'id']
+    }
+    for (const [dataPath, settings] of this.flatten()) {
+      const { type, schema, internal, related, reference } = settings
+      const source = type === 'source'
+      const relation = type === 'relation'
+      if (source || relation && internal) {
+        const values = getValueAtDataPath(data, dataPath, () => null)
+        const removeId = clipboard && source && !related
+        const referenceId = (
+          clipboard && (
+            relation && internal ||
+            source && related
+          )
+        )
+        for (const value of asArray(values).flat()) {
+          const idKey = (
+            source && schema.idKey ||
+            relation && schema.relateBy ||
+            'id'
+          )
+          let id = value?.[idKey]
+          if (id != null) {
+            if (removeId) {
+              delete value[idKey]
+            }
+            if (referenceId || isTemporaryId(id)) {
+              if (isTemporaryId(id)) {
+                id = id.slice(1)
+              }
+              const refKey = clipboard
+                ? // Clipboard just needs temporary ids under the actual `idKey`
+                  idKey
+                : // Server wants Objection-style '#id' / '#ref' pairs.
+                  source
+                  ? '#id'
+                  : '#ref'
+              const revValue = clipboard
+                ? `@${id}`
+                : // Keep the ids unique in reference groups, since they
+                  // reference across the full graph.
+                  reference
+                  ? `${reference}-${id}`
+                  : id // A temporary id without a related, just preserve it.
+              value[refKey] = revValue
+              if (refKey !== idKey) {
+                delete value[idKey]
+              }
+            }
+          }
+        }
+      }
+    }
+    return data
+  }
+}

package/src/utils/accessor.js

@@ -0,0 +1,75 @@
+import {
+  isFunction,
+  isString,
+  parseDataPath,
+  normalizeDataPath
+} from '@ditojs/utils'
+
+export function getSchemaAccessor(
+  keyOrDataPath,
+  { type, default: def, get, set, callback = true } = {}
+) {
+  // `keyOrDataPath` can be a simple property key,
+  // or a data-path into sub-properties, both in array or string format.
+  if (isString(keyOrDataPath) && keyOrDataPath.includes('.')) {
+    keyOrDataPath = parseDataPath(keyOrDataPath)
+  }
+  // Use the normalized data path for the handling overrides
+  const name = normalizeDataPath(keyOrDataPath)
+  return {
+    get() {
+      // Only determine schema value if we have no getter, or the getter
+      // wants to receive the value and process it further:
+      const value =
+        !get || get.length > 0
+          ? // NOTE: Because `schema` objects are retrieved from `meta`, they
+            // don't seem to be reactive. To allow changed in `schema` values,
+            // `set()` stores changed values in the separate `overrides` object.
+            this.overrides && name in this.overrides
+            ? this.overrides[name]
+            : this.getSchemaValue(keyOrDataPath, {
+                type,
+                default: def,
+                callback
+              })
+          : undefined
+      return get ? get.call(this, value) : value
+    },
+
+    set(value) {
+      if (set) {
+        set.call(this, value)
+      } else {
+        this.overrides ||= {}
+        this.overrides[name] = value
+      }
+    }
+  }
+}
+
+export function getStoreAccessor(name, { default: def, get, set } = {}) {
+  return {
+    get() {
+      let value = this.getStore(name)
+      if (value === undefined && def !== undefined) {
+        // Support `default()` functions:
+        value = isFunction(def) ? def.call(this) : def
+        // Trigger setter by setting value and accessor to default:
+        this[name] = value
+        // Now access store again, for reactivity tracking
+        this.getStore(name)
+      }
+      // Allow the provided getter to further change or process the value
+      // retrieved from the store:
+      return get ? get.call(this, value) : value
+    },
+
+    set(value) {
+      // Allow the provided setter to return a new value to set, or do the
+      // setting itself, and then return `undefined`:
+      if (!set || (value = set.call(this, value)) !== undefined) {
+        this.setStore(name, value)
+      }
+    }
+  }
+}

package/src/utils/agent.js

@@ -0,0 +1,47 @@
+// This user-agent parser was lifted from Paper.js:
+// https://github.com/paperjs/paper.js/blob/cc15696750035ab00e00c64c7c95daa2c85efe01/src/core/PaperScope.js#L75-L107
+
+export function parseUserAgent(userAgent = '') {
+  const agent = {}
+  // Use replace() to get all matches, and deal with Chrome/Webkit overlap:
+  const ua = userAgent.toLowerCase()
+  const [os] =
+    /(iphone|ipad|linux; android|darwin|win|mac|linux|freebsd|sunos)/.exec(
+      ua
+    ) || []
+  const platform = (
+    {
+      'darwin': 'mac',
+      'iphone': 'ios',
+      'ipad': 'ios',
+      'linux; android': 'android'
+    }[os] ||
+    os
+  )
+  if (platform) {
+    agent.platform = platform
+    agent[platform] = true
+  }
+  ua.replace(
+    /(opera|chrome|safari|webkit|firefox|msie|trident)\/?\s*([.\d]+)(?:.*version\/([.\d]+))?(?:.*rv:v?([.\d]+))?/g,
+    (match, browser, v1, v2, rv) => {
+      // Do not set additional browsers once chrome is detected.
+      if (!agent.chrome) {
+        const version = rv || v2 || v1
+        if (!agent.version || browser !== 'safari') {
+          // Use the version we get for webkit for Safari, which is actually
+          // The Safari version, e.g. 16.0
+          agent.version = version
+          agent.versionNumber = parseFloat(version)
+        }
+        agent.browser = browser
+        agent[browser] = true
+      }
+    }
+  )
+  if (agent.chrome) {
+    // Can't have it both ways, Chrome.
+    delete agent.webkit
+  }
+  return agent
+}

package/src/utils/data.js

@@ -0,0 +1,92 @@
+import {
+  isInteger,
+  parseDataPath,
+  getValueAtDataPath,
+  normalizeDataPath
+} from '@ditojs/utils'
+
+export function appendDataPath(dataPath, token) {
+  return dataPath
+    ? `${dataPath}/${token}`
+    : token
+}
+
+export function parseParentDataPath(dataPath) {
+  const path = parseDataPath(dataPath)
+  path?.pop()
+  return path
+}
+
+export function getParentDataPath(dataPath) {
+  return normalizeDataPath(parseParentDataPath(dataPath))
+}
+
+export function parseItemDataPath(dataPath, nested = false) {
+  return nested ? parseParentDataPath(dataPath) : parseDataPath(dataPath)
+}
+
+export function getItemDataPath(dataPath, nested = false) {
+  return normalizeDataPath(parseItemDataPath(dataPath, nested))
+}
+
+export function parseParentItemDataPath(dataPath, nested = false) {
+  const path = parseItemDataPath(dataPath, nested)
+  if (path) {
+    // Remove the parent token. If it's a number, then we're dealing with an
+    // array and need to remove more tokens until we meet the actual parent:
+    let token
+    do {
+      token = path.pop()
+    } while (token != null && isInteger(+token))
+    // If the removed token is valid, we can get the parent data:
+    if (token != null) {
+      return path
+    }
+  }
+  return null
+}
+
+export function getParentItemDataPath(dataPath, nested = false) {
+  return normalizeDataPath(parseParentItemDataPath(dataPath, nested))
+}
+
+export function getItem(rootItem, dataPath, nested = false) {
+  const path = parseItemDataPath(dataPath, nested)
+  return path ? getValueAtDataPath(rootItem, path) : null
+}
+
+export function getParentItem(rootItem, dataPath, nested = false) {
+  const path = parseParentItemDataPath(dataPath, nested)
+  return path ? getValueAtDataPath(rootItem, path) : null
+}
+
+export function getLastDataPathToken(dataPath) {
+  const path = parseDataPath(dataPath)
+  return path[path.length - 1]
+}
+
+export function getLastDataPathName(dataPath) {
+  const token = getLastDataPathToken(dataPath)
+  return token == null || isInteger(+token) ? null : token
+}
+
+export function getLastDataPathIndex(dataPath) {
+  const token = getLastDataPathToken(dataPath)
+  const index = token == null ? null : +token
+  return isInteger(index) ? index : null
+}
+
+let temporaryId = 0
+export function setTemporaryId(data, idKey = 'id') {
+  // Temporary ids are marked with a '@' at the beginning.
+  data[idKey] = `@${++temporaryId}`
+}
+
+export function isTemporaryId(id) {
+  return /^@/.test(id)
+}
+
+export function isReference(data, idKey = 'id') {
+  // Returns true if value is an object that holds nothing more than an id.
+  return data?.[idKey] != null && Object.keys(data).length === 1
+}

package/src/utils/filter.js

@@ -0,0 +1,266 @@
+import { isArray, asArray, labelize } from '@ditojs/utils'
+import { getNamedSchemas, processNestedSchemaDefaults } from './schema'
+
+export const filterComponents = {
+  'text'(filter) {
+    const options = [
+      {
+        label: 'contains',
+        value: 'contains'
+      },
+      {
+        label: 'equals',
+        value: 'equals'
+      },
+      {
+        label: 'starts with',
+        value: 'starts-with'
+      },
+      {
+        label: 'ends with',
+        value: 'ends-with'
+      }
+    ]
+    return {
+      operator: filter.operators
+        ? {
+            type: 'select',
+            width: '2/5',
+            options: isArray(filter.operators)
+              ? options.filter(
+                  option => filter.operators.includes(option.value)
+                )
+              : options,
+            clearable: true
+          }
+        : null,
+      text: {
+        type: 'text',
+        width: filter.operators ? '3/5' : 'fill',
+        clearable: true
+      }
+    }
+  },
+
+  'date-range'() {
+    const datetime = {
+      type: 'datetime',
+      width: '1/2',
+      formats: {
+        // Use shorter date format in date-range filters:
+        date: {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric'
+        }
+      },
+      clearable: true
+    }
+    return {
+      from: datetime,
+      to: datetime
+    }
+  }
+}
+
+export function createFiltersPanel(api, filters, dataPath, query) {
+  const { sticky, ...filterSchemas } = filters
+  const panel = {
+    type: 'panel',
+    label: 'Filters',
+    name: '$filters',
+    // Override the default value
+    disabled: false,
+    sticky,
+
+    // NOTE: On panels, the data() callback does something else than on normal
+    // schema: It produces the `data` property to be passed to the panel's
+    // schema, not the data to be used for the panel component directly.
+    data() {
+      return parseFiltersData(
+        panel,
+        query.value
+      )
+    },
+
+    components: createFiltersComponents(filterSchemas),
+    buttons: createFiltersButtons(false),
+    panelButtons: createFiltersButtons(true),
+
+    events: {
+      change() {
+        this.applyFilters()
+      }
+    },
+
+    computed: {
+      filters() {
+        return formatFiltersData(this.schema, this.data)
+      },
+
+      hasFilters() {
+        return this.filters.length > 0
+      }
+    },
+
+    methods: {
+      applyFilters() {
+        query.value = {
+          ...query.value,
+          filter: this.filters,
+          // Clear pagination when applying or clearing filters:
+          page: undefined
+        }
+      },
+
+      clearFilters() {
+        this.resetData()
+        this.applyFilters()
+      }
+    }
+  }
+  processNestedSchemaDefaults(api, panel)
+  return panel
+}
+
+function createFiltersButtons(small) {
+  return {
+    clear: {
+      type: 'button',
+      text: small ? null : 'Clear',
+      disabled: ({ schemaComponent }) => !schemaComponent.hasFilters,
+      events: {
+        click({ schemaComponent }) {
+          // Since panel buttons are outside of the schema, we need to use the
+          // schema component received from the initialize event below:
+          schemaComponent.clearFilters()
+        }
+      }
+    },
+
+    submit: {
+      type: 'submit',
+      text: small ? null : 'Filter',
+      visible: !small,
+      events: {
+        click({ schemaComponent }) {
+          schemaComponent.applyFilters()
+        }
+      }
+    }
+  }
+}
+
+function getDataName(filterName) {
+  // Prefix filter data keys with '$' to avoid conflicts with other data keys:
+  return `$${filterName}`
+}
+
+function getFilterName(dataName) {
+  return dataName.startsWith('$') ? dataName.slice(1) : null
+}
+
+function createFiltersComponents(filters) {
+  const comps = {}
+  for (const filter of Object.values(getNamedSchemas(filters) || {})) {
+    // Support both custom forms and default filter components, through the
+    // `filterComponents` registry. Even for default filters, still use the
+    // properties in `filter` as the base for `form`, so things like `label`
+    // can be changed on the resulting form.
+    const { filter: type, width, ...form } = filter
+    const components = type
+      ? filterComponents[type]?.(filter)
+      : filter.components
+    if (components) {
+      form.type = 'form'
+      form.components = {}
+      // Convert labels to placeholders:
+      for (const [key, component] of Object.entries(components)) {
+        if (component) {
+          const label = component.label || labelize(component.name || key)
+          form.components[key] = {
+            ...component,
+            label: false,
+            placeholder: label
+          }
+        }
+      }
+      comps[getDataName(filter.name)] = {
+        label: form.label ?? labelize(filter.name),
+        type: 'object',
+        width,
+        default: () => ({}),
+        form,
+        inlined: true
+      }
+    } else {
+      throw new Error(
+        `Invalid filter '${filter.name}': Unknown filter type '${type}'.`
+      )
+    }
+  }
+  return comps
+}
+
+function getComponentsForFilter(schema, dataName) {
+  const component = schema.components[dataName]
+  return component?.form?.components
+}
+
+function formatFiltersData(schema, data) {
+  const filters = []
+  for (const dataName in data) {
+    const entry = data[dataName]
+    if (entry) {
+      // Map components sequence to arguments:
+      const args = Object.keys(
+        getComponentsForFilter(schema, dataName)
+      ).map(
+        key => entry[key] ?? null
+      )
+      // Only apply filter if there are some arguments that aren't null:
+      if (args.some(value => value !== null)) {
+        filters.push(
+          `${
+            getFilterName(dataName)
+          }:${
+            args.map(JSON.stringify).join(',')
+          }`
+        )
+      }
+    }
+  }
+  return filters
+}
+
+function parseFiltersData(schema, query) {
+  const filters = {}
+  // Same as @ditojs/server's QueryParameters.filter: Translate the string data
+  // from $route.query back to param lists per filter:
+  if (query) {
+    for (const filter of asArray(query.filter)) {
+      const [, filterName, json] = filter.match(/^(\w+):(.*)$/)
+      try {
+        filters[filterName] = asArray(JSON.parse(`[${json}]`))
+      } catch {}
+    }
+  }
+  const filtersData = {}
+  for (const dataName in schema.components) {
+    const data = {}
+    // If we have retrieved params from the query, fetch the associated
+    // form components so we can map the values back to object keys:
+    const args = filters[getFilterName(dataName)]
+    if (args) {
+      const components = getComponentsForFilter(schema, dataName)
+      if (components) {
+        let index = 0
+        for (const key in components) {
+          data[key] = args[index++]
+        }
+      }
+    }
+    filtersData[dataName] = data
+  }
+  return filtersData
+}

package/src/utils/math.js

@@ -0,0 +1,14 @@
+import { isString } from '@ditojs/utils'
+
+export function parseFraction(value) {
+  const match = (
+    isString(value) &&
+    value.match(/^\s*([+-]?\d+)\s*\/\s*([+-]?\d+)\s*$/)
+  )
+  if (match) {
+    const [, dividend, divisor] = match
+    return parseFloat(dividend) / parseFloat(divisor)
+  } else {
+    return parseFloat(value)
+  }
+}