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

package/src/mixins/EmitterMixin.js

@@ -0,0 +1,158 @@
+import { isArray, isPlainObject } from '@ditojs/utils'
+
+// @vue/component
+export default {
+  data() {
+    return {
+      listeners: null
+    }
+  },
+
+  methods: {
+    // Async on() and $off() methods that keep track of the events added /
+    // removed, and provide a hasListeners() method that checks if the component
+    // has listeners for a given event.
+
+    // Also adds proper handling of async events, including a async emit() that
+    // deals with proper event queueing.
+    on(event, callback) {
+      if (isArray(event)) {
+        for (const ev of event) {
+          this.on(ev, callback)
+        }
+      } else if (isPlainObject(event)) {
+        for (const key in event) {
+          this.on(key, event[key])
+        }
+      } else {
+        const listeners = (this.listeners ||= Object.create(null))
+        const { callbacks } = (listeners[event] ||= {
+          callbacks: [],
+          queue: []
+        })
+        callbacks.push(callback)
+      }
+      return this
+    },
+
+    once(event, callback) {
+      const on = (...args) => {
+        this.off(event, on)
+        return callback.apply(this, args)
+      }
+      on.callback = callback // Needed for `off()`, see below.
+      return this.on(event, on)
+    },
+
+    off(event, callback) {
+      if (!arguments.length) {
+        // Remove all events
+        delete this.listeners
+      } else if (isArray(event)) {
+        for (const ev of event) {
+          this.off(ev, callback)
+        }
+      } else if (isPlainObject(event)) {
+        for (const key in event) {
+          this.off(key, event[key])
+        }
+      } else {
+        // Remove specific event
+        const entry = this.listeners?.[event]
+        if (entry) {
+          if (!callback) {
+            // Remove all handlers for this event
+            delete this.listeners[event]
+          } else {
+            // Remove a specific handler: find the index in callbacks
+            const { callbacks } = entry
+            const index = callbacks.findIndex(
+              // Match `cb.callback` also, as used by `once()`, see  above:
+              cb => cb === callback || cb.callback === callback
+            )
+            if (index !== -1) {
+              callbacks.splice(index, 1)
+            }
+          }
+        }
+      }
+      return this
+    },
+
+    emit(event, ...args) {
+      // Only queue event if there actually are listeners for it.
+      const entry = this.listeners?.[event]
+      if (entry) {
+        const { queue, callbacks } = entry
+        return new Promise(resolve => {
+          const next = async () => {
+            // Emit the next event in the queue with its params.
+            // Note that it only gets removed once `next()` is called.
+            const entry = queue.shift()
+            if (entry) {
+              let result
+              const errors = []
+              for (const callback of callbacks) {
+                try {
+                  const res = await callback.apply(this, entry.args)
+                  if (res !== undefined) {
+                    result = res
+                  }
+                } catch (error) {
+                  errors.push(error)
+                }
+              }
+              if (errors.length > 0) {
+                const error = new AggregateError(
+                  errors,
+                  `Errors during event handler for '${event}'`
+                )
+                entry.resolve(Promise.reject(error))
+              } else {
+                // Resolve the promise that was added to the queue for the event
+                // that was just completed by the wrapper that called `next()`
+                entry.resolve(result)
+              }
+              next()
+            }
+          }
+          queue.push({ args, resolve })
+          // For new queues (= only one entry) emit the first event immediately,
+          // to get the queue running.
+          if (queue.length === 1) {
+            next()
+          }
+        })
+      }
+      // Make sure it's thenable even if there are no listeners.
+      return Promise.resolve()
+    },
+
+    // Checks if the component has listeners for a given event type:
+    hasListeners(event) {
+      if (isArray(event)) {
+        for (const ev of event) {
+          if (!this.hasListeners(ev)) {
+            return false
+          }
+        }
+        return event.length > 0
+      } else {
+        return !!this.listeners?.[event]
+      }
+    },
+
+    delegate(event, target) {
+      if (target) {
+        if (isArray(event)) {
+          for (const ev of event) {
+            this.delegate(ev, target)
+          }
+        } else {
+          this.on(event, (...args) => target.emit(event, ...args))
+        }
+      }
+      return this
+    }
+  }
+}

package/src/mixins/ItemMixin.js

@@ -0,0 +1,144 @@
+import DitoContext from '../DitoContext.js'
+import {
+  getItemFormSchema,
+  getItemId,
+  getItemUid,
+  isListSource
+} from '../utils/schema.js'
+import { appendDataPath } from '../utils/data.js'
+import { isObject, isString, isFunction } from '@ditojs/utils'
+
+// @vue/component
+export default {
+  methods: {
+    getItemFormSchema,
+
+    getItemUid,
+
+    getItemId(sourceSchema, item, index = null) {
+      return this.isTransient && index !== null
+        ? String(index)
+        : getItemId(sourceSchema, item)
+    },
+
+    getItemDataPath(sourceSchema, index) {
+      let { dataPath } = this
+      if (sourceSchema !== this.schema) {
+        dataPath = appendDataPath(dataPath, sourceSchema.name)
+      }
+      if (index != null) {
+        dataPath = appendDataPath(dataPath, index)
+      }
+      return dataPath
+    },
+
+    getItemStore(sourceSchema, item, index) {
+      return this.getChildStore(this.getItemUid(sourceSchema, item), index)
+    },
+
+    removeItemStore(sourceSchema, item, index) {
+      this.removeChildStore(this.getItemUid(sourceSchema, item), index)
+    },
+
+    findItemIdIndex(sourceSchema, data, itemId) {
+      const index = this.isTransient
+        ? // For transient data, the index is used as the id
+          itemId
+        : data?.findIndex(
+            (item, index) => (
+              this.getItemId(sourceSchema, item, index) === itemId
+            )
+          )
+      return index !== -1 ? index : null
+    },
+
+    getItemLabel(sourceSchema, item, {
+      index = null,
+      extended = false,
+      asObject = false
+    } = {}) {
+      const { itemLabel } = sourceSchema
+      if (!item || !extended && itemLabel === false) {
+        return null
+      }
+
+      let dataPath
+      const getDataPath = () =>
+        (dataPath ??= this.getItemDataPath(sourceSchema, index))
+
+      let formLabel
+      const getFormLabel = () =>
+        (formLabel ??= this.getLabel(
+          getItemFormSchema(sourceSchema, item, this.context)
+        ))
+
+      let text
+      let prefix
+      let suffix
+      if (isFunction(itemLabel)) {
+        const label = itemLabel.call(
+          this,
+          new DitoContext(this, {
+            nested: false,
+            data: item,
+            value: item,
+            index,
+
+            get dataPath() {
+              return getDataPath()
+            },
+
+            get formLabel() {
+              return getFormLabel()
+            }
+          })
+        )
+        if (isObject(label)) {
+          ;({ text, prefix, suffix } = label)
+        } else {
+          text = label
+        }
+        // It's up to `itemLabel()` entirely to produce the label:
+        extended = false
+      } else if (isString(itemLabel) && !(itemLabel in item)) {
+        // `itemLabel` can be both a key, or simply a label.
+        text = itemLabel
+      } else {
+        // Look up the name on the item, by these rules:
+        // 1. If `itemLabel` is a string, use it as the property key
+        // 2. Otherwise, if there are columns, use the value of the first
+        // 3. Otherwise, see if the item has a property named 'name'
+        const { columns } = sourceSchema
+        const key = (
+          isString(itemLabel) && itemLabel ||
+          isListSource(sourceSchema) && columns && Object.keys(columns)[0] ||
+          'name'
+        )
+        text = item[key]
+      }
+      const hadLabel = !!text
+      // If no label was found so far, try to produce one from the index.
+      if (text == null) {
+        // Always use extended style when auto-generating labels from index/id:
+        extended = true
+        text =
+          isListSource(sourceSchema) && index !== null
+            ? (text = `${index + 1}`)
+            : ''
+      }
+      if (extended) {
+        const formLabel = getFormLabel()
+        if (formLabel) {
+          // If a label was provided, put in quotes when prefixed with the
+          // form label for the extended style:
+          text = `${formLabel} ${hadLabel ? `'${text}'` : text}`
+        }
+      }
+      return asObject
+        ? text || prefix || suffix
+          ? { text, prefix, suffix }
+          : null
+        : text
+    }
+  }
+}

package/src/mixins/LoadingMixin.js

@@ -0,0 +1,23 @@
+// @vue/component
+export default {
+  data() {
+    return {
+      isLoading: false
+    }
+  },
+
+  methods: {
+    setLoading(isLoading, { updateRoot = false, updateView = false } = {}) {
+      if (!this.isLoading ^ !isLoading) {
+        // Boolean xor
+        this.isLoading = !!isLoading
+        if (updateRoot) {
+          this.rootComponent.registerLoading(isLoading)
+        }
+        if (updateView) {
+          this.viewComponent.setLoading(this.isLoading)
+        }
+      }
+    }
+  }
+}

package/src/mixins/NumberMixin.js

@@ -0,0 +1,118 @@
+import { getSchemaAccessor } from '../utils/accessor.js'
+import { isArray } from '@ditojs/utils'
+
+// @vue/component
+export default {
+  computed: {
+    inputValue: {
+      get() {
+        return this.value !== null ? this.value : ''
+      },
+
+      set(value) {
+        this.value =
+          value !== ''
+            ? this.isInteger
+              ? Number(value)
+              : parseFloat(value)
+            : null
+      }
+    },
+
+    // @overridable
+    isInteger() {
+      return false
+    },
+
+    stepValue() {
+      // Don't show steps if the input is also clearable, since the step buttons
+      // would collide with the clear button.
+      return this.step == null && !this.isInteger
+        ? 'any'
+        : this.step
+    },
+
+    decimals: getSchemaAccessor('decimals', {
+      type: Number
+    }),
+
+    step: getSchemaAccessor('step', {
+      type: Number,
+      get(step) {
+        // For integers, round the steps to the next bigger integer value:
+        return this.isInteger && step != null ? Math.ceil(step) : step
+      }
+    }),
+
+    min: getSchemaAccessor('min', {
+      type: Number,
+      get(min) {
+        min =
+          min === undefined
+            ? this.getSchemaValue('range', { type: Array })?.[0]
+            : min
+        return this.isInteger && min != null ? Math.floor(min) : min
+      }
+    }),
+
+    max: getSchemaAccessor('max', {
+      type: Number,
+      get(max) {
+        max =
+          max === undefined
+            ? this.getSchemaValue('range', { type: Array })?.[1]
+            : max
+        return this.isInteger && max != null ? Math.ceil(max) : max
+      }
+    }),
+
+    range: getSchemaAccessor('range', {
+      type: Array,
+      get() {
+        // `this.min`, `this.max` already support `schema.range`,
+        // so redirect there.
+        const { min, max } = this
+        return min != null && max != null ? [min, max] : undefined
+      },
+
+      set(range) {
+        // Provide a setter that delegates to `[this.min, this.max]`,
+        // since those already handle `schema.range`.
+        if (isArray(range)) {
+          ;[this.min, this.max] = range
+        }
+      }
+    })
+  },
+
+  methods: {
+    getValidations() {
+      const validations = {}
+      const { range, min, max, decimals, step } = this
+      if (range) {
+        validations.range = range
+      } else {
+        if (min != null) {
+          validations.min = min
+        }
+        if (max != null) {
+          validations.max = max
+        }
+      }
+      if (decimals != null) {
+        validations.decimals = decimals
+      } else if (step) {
+        const decimals = (`${step}`.split('.')[1] || '').length
+        if (decimals > 0) {
+          validations.decimals = decimals
+        } else {
+          validations.integer = true
+        }
+      }
+      if (this.isInteger) {
+        validations.integer = true
+      }
+      return validations
+    }
+  }
+}