@ditojs/admin 3.2.6 → 3.3.0

package/src/utils/schema/item.js

@@ -0,0 +1,114 @@
+import {
+  isObject,
+  isString,
+  isNumber,
+  isFunction,
+  escapeHtml
+} from '@ditojs/utils'
+import { isListSource } from './structure.js'
+import { getItemId } from './data.js'
+
+// Returns the id of `item`, by which routes address it. Transient items aren't
+// stored yet and may lack ids, so they're addressed by their `index` instead,
+// when it's known.
+export function getItemIdOrIndex(
+  sourceSchema,
+  item,
+  { index = null, isTransient }
+) {
+  return isTransient && index !== null
+    ? String(index)
+    : getItemId(sourceSchema, item)
+}
+
+// Returns the index of the item in `items` that `itemId` addresses, see
+// `getItemIdOrIndex()`, or `null` if there is none. The ids of transient items
+// are their indices already, and are returned as they are.
+export function findItemIndexById(sourceSchema, items, itemId, {
+  isTransient
+}) {
+  const index = isTransient
+    ? itemId
+    : items?.findIndex(item => getItemId(sourceSchema, item) === itemId)
+  return index != null && index !== -1 ? index : null
+}
+
+// Returns the label of `item` as HTML: Values of the item are escaped,
+// while labels that the schema provides, e.g. through `itemLabel()`, can
+// contain HTML, so they need to escape the values that they include.
+// The label depends on the component that displays the item through two
+// callbacks: `evaluateItemLabel()` calls `sourceSchema.itemLabel()` with the
+// item's context, and `getFormLabel()` returns the label of the item's form.
+export function getItemLabel(
+  sourceSchema,
+  item,
+  {
+    index = null,
+    extended = false,
+    asObject = false,
+    evaluateItemLabel,
+    getFormLabel
+  }
+) {
+  const { itemLabel } = sourceSchema
+  if (!item || !extended && itemLabel === false) {
+    return null
+  }
+
+  let text
+  let prefix
+  let suffix
+  if (isFunction(itemLabel)) {
+    const label = evaluateItemLabel()
+    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'
+    )
+    const value = item[key]
+    // Only primitives display as a label. If the property holds an array
+    // or object, fall through to the auto-generated label. Strings are
+    // escaped, as the label is rendered as HTML.
+    text = isString(value)
+      ? escapeHtml(value)
+      : isNumber(value)
+        ? value
+        : null
+  }
+  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 ? `${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/utils/schema/lookup.js

@@ -10,6 +10,7 @@ import { reactive, computed } from 'vue'
 import { getTypeOptions } from './types.js'
 import {
   findNestedSchemaComponent,
+  isMenu,
   isSchema,
   isSingleComponentView
 } from './structure.js'
@@ -72,6 +73,14 @@ export function getViewPath(schema, context) {
   return null
 }
 
+// Returns the path that links to the view or menu `schema`, displayed at
+// `path`: Menus link to their first item.
+export function getViewLinkPath(schema, path = schema.fullPath) {
+  return isMenu(schema)
+    ? Object.values(schema.items)[0].fullPath
+    : path
+}
+
 export function getViewEditPath(schema, id, context) {
   const path = getViewPath(schema, context)
   return path ? `${path}/${id}` : null
@@ -125,14 +134,19 @@ function getFormWithCreatedComponents(form, context) {
     formsByItem = new WeakMap()
     formsByComponentsCallback.set(form.components, formsByItem)
   }
-  let formWithCreatedComponents = formsByItem.get(item)
-  if (!formWithCreatedComponents) {
-    formWithCreatedComponents = computed(() =>
-      createFormWithComponents(form, context)
+  let entry = formsByItem.get(item)
+  if (!entry) {
+    entry = { context }
+    entry.formWithCreatedComponents = computed(() =>
+      createFormWithComponents(form, entry.context)
     )
-    formsByItem.set(item, formWithCreatedComponents)
+    formsByItem.set(item, entry)
   }
-  return formWithCreatedComponents.value
+  // Recreate the components with the latest context rather than the one of
+  // the first caller, whose component may have been unmounted since. Changes
+  // of the context alone don't recreate them, see above.
+  entry.context = context
+  return entry.formWithCreatedComponents.value
 }
 
 function createFormWithComponents(form, context) {
@@ -214,16 +228,27 @@ export function getButtonSchemas(buttons) {
 }
 
 // Returns the entry of the panel described by `schema`, which `DitoPanels`
-// displays at `dataPath` and `componentPath`.
-function getPanelEntry(schema, dataPath, componentPath, tabComponent) {
-  return schema ? { schema, dataPath, componentPath, tabComponent } : null
+// displays at `dataPath` and `componentPath`. Panels of components in tabs are
+// only displayed while their tab is selected: `tab` describes that tab as
+// `{ tabName, isTabSelected }`, where `isTabSelected()` tells if it currently
+// is, see `DitoPane.panelTab`.
+function getPanelEntry(schema, dataPath, componentPath, tab) {
+  return schema
+    ? {
+        schema,
+        dataPath,
+        componentPath,
+        tabName: tab?.tabName ?? null,
+        isTabSelected: tab?.isTabSelected ?? null
+      }
+    : null
 }
 
 export function getPanelEntries(
   panelSchemas,
   dataPath,
   componentPath,
-  tabComponent = null,
+  tab = null,
   panelEntries = []
 ) {
   if (panelSchemas) {
@@ -232,7 +257,7 @@ export function getPanelEntries(
         schema,
         appendDataPath(dataPath, key),
         appendDataPath(componentPath, key),
-        tabComponent
+        tab
       )
       if (entry) {
         panelEntries.push(entry)
@@ -256,7 +281,7 @@ export function getAllPanelEntries(
   dataPathComponentPath,
   schemaComponentPath,
   component = null,
-  tabComponent = null
+  tab = null
 ) {
   const panelSchema = getTypeOptions(schema)?.getPanelSchema?.(
     api,
@@ -270,7 +295,7 @@ export function getAllPanelEntries(
           panelSchema,
           appendDataPath(dataPath, panelSchema.name),
           appendDataPath(dataPathComponentPath, panelSchema.name),
-          tabComponent
+          tab
         )
       ]
     : []
@@ -280,7 +305,7 @@ export function getAllPanelEntries(
     schema?.panels,
     dataPath,
     schemaComponentPath,
-    tabComponent,
+    tab,
     panelEntries
   )
   return panelEntries

package/src/utils/schema/setup.js

@@ -97,13 +97,13 @@ export async function resolveSchemas(
 export async function resolveViews(unresolvedViews) {
   return resolveSchemas(unresolvedViews, async (schema, unwrapModule) => {
     schema = await resolveSchema(schema, unwrapModule)
-    if (!schema.name && isMenu(schema)) {
-      // Generate a name for sub-menus from their label if it's missing.
-      // NOTE: This is never actually referenced from anywhere, but they need
-      // a name by which they're stored in the parent object.
+    if (isMenu(schema)) {
       schema = {
         ...schema,
-        name: camelize(schema.label),
+        // Generate a name for sub-menus from their label if it's missing.
+        // NOTE: This is never actually referenced from anywhere, but they need
+        // a name by which they're stored in the parent object.
+        name: schema.name || camelize(schema.label),
         items: await resolveSchemas(schema.items)
       }
     }

package/src/utils/schema/validation.js

@@ -40,8 +40,7 @@ export function getValidations(schema, context) {
 export function getValueValidationErrors(value, validations) {
   const errors = []
   for (const [name, setting] of Object.entries(validations)) {
-    // eslint-disable-next-line import/namespace
-    const validator = validators[name]
+    const validator = getValidator(name)
     if (
       validator &&
       // Only apply 'required' validator to empty values.
@@ -61,6 +60,21 @@ export function getValueValidationErrors(value, validations) {
   return errors
 }
 
+// The names of unknown validators that were warned about, see `getValidator()`:
+const warnedUnknownValidatorNames = new Set()
+
+// Returns the validator of the name, or `null` with a warning, once per name,
+// e.g. for misspelled `schema.rules`.
+function getValidator(name) {
+  // eslint-disable-next-line import/namespace
+  const validator = validators[name] ?? null
+  if (!validator && !warnedUnknownValidatorNames.has(name)) {
+    warnedUnknownValidatorNames.add(name)
+    console.warn(`Unknown validator '${name}' is ignored.`)
+  }
+  return validator
+}
+
 /**
  * Validates `data` along the components of `schema`, including tabs, panels
  * and the nested forms of list and object items, skipping components whose

package/src/utils/uid.js

@@ -1,15 +1,112 @@
 import { toRaw } from 'vue'
+import { isArray, isPlainObject, isString } from '@ditojs/utils'
+import { isTemporaryId } from './data.js'
 
-const uidMap = new WeakMap()
+const uidsByItem = new WeakMap()
 
-// Generated and remembers unique ids per passed object using a weak map.
-let uid = 0
+// Generated uids have their own prefix, so that they can't be mistaken for
+// temporary ids, see `setTemporaryId()`.
+const generatedUidPrefix = 'uid-'
+let lastGeneratedUid = 0
+
+// Generates and remembers unique ids per passed object using a weak map.
 export function getUid(item, getItemId = null) {
   const raw = toRaw(item)
-  let id = uidMap.get(raw)
-  if (!id && item) {
-    id = getItemId?.(item) || `@${++uid}`
-    uidMap.set(raw, id)
+  let uid = uidsByItem.get(raw)
+  if (!uid && item) {
+    uid = getItemId?.(item) || `${generatedUidPrefix}${++lastGeneratedUid}`
+    uidsByItem.set(raw, uid)
+  }
+  return uid
+}
+
+// Transfers the uids of new objects in `source`, which are generated or
+// temporary ids, to the corresponding objects in `target` that don't have uids
+// yet, e.g. when the saved data replaces the data that was edited. This way,
+// the components and stores that are keyed by the uids of new items are kept,
+// even though the items only have their ids once they are saved.
+// Objects are matched by their keys. Array items are matched by their `id`
+// properties, see `transferArrayUids()`. The items of lists with a custom
+// `idKey` have no `id`, so they count as new items and are matched in order.
+export function transferUids(source, target) {
+  const rawSource = toRaw(source)
+  const rawTarget = toRaw(target)
+  if (
+    rawSource !== rawTarget &&
+    isTransferable(rawSource) &&
+    isTransferable(rawTarget)
+  ) {
+    const uid = uidsByItem.get(rawSource)
+    if (isNewItemUid(uid) && !uidsByItem.has(rawTarget)) {
+      uidsByItem.set(rawTarget, uid)
+    }
+    if (isArray(rawSource) && isArray(rawTarget)) {
+      transferArrayUids(rawSource, rawTarget)
+    } else {
+      for (const key of Object.keys(rawSource)) {
+        if (key in rawTarget) {
+          transferUids(rawSource[key], rawTarget[key])
+        }
+      }
+    }
+  }
+}
+
+// Matches the items of two arrays by their ids rather than their positions, as
+// the saved items may be ordered differently than the edited ones: Each saved
+// item in `source` is matched with the item in `target` that has the same id.
+// The new items in `source`, which have no id or a temporary one, can only be
+// matched with the items in `target` that have none of the saved ids, in order,
+// and only if their counts are equal. Otherwise, they are left unmatched rather
+// than risking to give an item the uid, component and store of another.
+function transferArrayUids(source, target) {
+  const sourceItems = source.filter(isTransferable)
+  const targetItems = target.filter(isTransferable)
+  const targetItemsById = new Map()
+  for (const item of targetItems) {
+    const id = getSavedItemId(item)
+    if (id !== undefined) {
+      targetItemsById.set(id, item)
+    }
+  }
+  const savedIds = new Set()
+  const newSourceItems = []
+  for (const item of sourceItems) {
+    const id = getSavedItemId(item)
+    if (id !== undefined) {
+      savedIds.add(id)
+      const targetItem = targetItemsById.get(id)
+      if (targetItem) {
+        transferUids(item, targetItem)
+      }
+    } else {
+      newSourceItems.push(item)
+    }
   }
-  return id
+  const newTargetItems = targetItems.filter(
+    item => !savedIds.has(getSavedItemId(item))
+  )
+  if (newSourceItems.length === newTargetItems.length) {
+    newSourceItems.forEach((item, index) => {
+      transferUids(item, newTargetItems[index])
+    })
+  }
+}
+
+// Returns the id of a saved item as a string, so that numeric ids match their
+// string representations, or `undefined` for new items.
+function getSavedItemId(item) {
+  const { id } = item
+  return id != null && !isTemporaryId(id) ? String(id) : undefined
+}
+
+function isTransferable(value) {
+  return isArray(value) || isPlainObject(value)
+}
+
+function isNewItemUid(uid) {
+  return (
+    isString(uid) &&
+    (uid.startsWith(generatedUidPrefix) || isTemporaryId(uid))
+  )
 }

package/src/validators/_decimals.js

@@ -1,11 +1,22 @@
+function hasUnlimitedDecimals(decimals) {
+  return decimals == null || decimals === '*'
+}
+
 export const decimals = {
   validate: (value, decimals) => {
-    const match = decimals === '*' ? '+' : `{1,${decimals}}`
-    return new RegExp(`^[-+]?\\d*(\\.\\d${match})?$`).test(value)
+    // `decimals: 0` allows no decimal point at all, only integers:
+    const fraction = hasUnlimitedDecimals(decimals)
+      ? '(\\.\\d+)?'
+      : decimals > 0
+        ? `(\\.\\d{1,${decimals}})?`
+        : ''
+    return new RegExp(`^[-+]?\\d*${fraction}$`).test(value)
   },
 
   message: (value, decimals) =>
-    `must be numeric and may contain ${
-      !decimals || decimals === '*' ? '' : decimals
-    } decimal points`
+    hasUnlimitedDecimals(decimals)
+      ? 'must be numeric and may contain decimal points'
+      : decimals > 0
+        ? `must be numeric and may contain ${decimals} decimal points`
+        : 'must be numeric and may not contain decimal points'
 }