@ditojs/admin 3.1.1 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/main/packages/admin",
@@ -41,8 +41,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^3.1.1",
-    "@ditojs/utils": "^3.1.1"
+    "@ditojs/ui": "^3.1.3",
+    "@ditojs/utils": "^3.1.3"
   },
   "peerDependencies": {
     "@kyvg/vue3-notification": "^3.4.2",
@@ -87,7 +87,7 @@
     "vue-upload-component": "^3.2.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^3.1.1",
+    "@ditojs/build": "^3.1.3",
     "@kyvg/vue3-notification": "^3.4.2",
     "@tiptap/core": "^3.31.4",
     "@tiptap/extension-blockquote": "^3.31.4",
@@ -131,5 +131,5 @@
     "vue-router": "^5.3.1",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "acce85bb38d817aab18f9d5d03b3aa9dff00c3f9"
+  "gitHead": "3dba854ad248a56da1614122b960ad8a7eda70dd"
 }

package/src/components/DitoCreateButton.vue

@@ -4,7 +4,7 @@
     v-if="creatableForm"
     :type="isInlined ? 'button' : 'submit'"
     :disabled="disabled"
-    v-bind="getButtonAttributes(verb, formLabel)"
+    v-bind="getButtonAttributes(verb, formLabel, text)"
     @click="createItem(creatableForm)"
   ) {{ text }}
   template(
@@ -13,7 +13,10 @@
     button.dito-button(
       type="button"
       :disabled="disabled"
-      v-bind="{ ...pulldownTriggerAttributes, ...getButtonAttributes(verb) }"
+      v-bind=`{
+        ...pulldownTriggerAttributes,
+        ...getButtonAttributes(verb, null, text)
+      }`
       @mousedown.stop="onPulldownMouseDown()"
     ) {{ text }}
     ul.dito-pulldown(

package/src/mixins/DitoMixin.js

@@ -295,13 +295,18 @@ export default {
         : labelize(name) || ''
     },
 
-    getButtonAttributes(verb, subject = null) {
-      // Name buttons by what they act on if known, e.g. 'Add Section'.
-      const label = subject ? `${labelize(verb)} ${subject}` : labelize(verb)
+    getButtonAttributes(verb, subject = null, text = null) {
+      // Buttons that display text are named by it, others by what they act on
+      // if known, e.g. 'Add Section'.
+      const label = text
+        ? null
+        : `${labelize(verb)}${subject ? ` ${subject}` : ''}`
       return {
-        'class': `dito-button--${verb}`,
-        'title': label,
-        'aria-label': label
+        class: `dito-button--${verb}`,
+        ...(label && {
+          'title': label,
+          'aria-label': label
+        })
       }
     },
 

package/src/mixins/OptionsMixin.js

@@ -82,11 +82,6 @@ export default {
       return this.getOptionForValue(this.selectedValue)
     },
 
-    // The form model of the data, owned by the dialog or route component.
-    formModel() {
-      return (this.dialogComponent ?? this.routeComponent).formModel
-    },
-
     // The resolver of the options in the form model of the data, which loads
     // them and shares them with the computes of the form. It is looked up with
     // the entry of this component, in the shape of the entries of

package/src/mixins/SourceMixin.js

@@ -424,7 +424,7 @@ export default {
     // @override ResourceMixin.clearData()
     clearData() {
       this.total = 0
-      this.value = null
+      this.setLoadedValue(null)
     },
 
     // @override ResourceMixin.setData()
@@ -437,7 +437,7 @@ export default {
       if (this.isListSource && isArray(data)) {
         this.setLoadedListItems(data)
       } else if (!data || this.isObjectSource && isObject(data)) {
-        this.value = data
+        this.setLoadedValue(data)
       } else if (this.unwrapListData(data)) {
         // The format didn't match, see if we received a `{ results, total }`
         // object, in which case `this.value` was already set by
@@ -483,7 +483,21 @@ export default {
     // current order. Lists in the data of forms, views and dialogs are
     // numbered by `FormModel`, see `initializeData()`.
     setLoadedListItems(items) {
-      this.value = updateOrder(this.sourceSchema, items, this.paginationRange)
+      this.setLoadedValue(
+        updateOrder(this.sourceSchema, items, this.paginationRange)
+      )
+    },
+
+    // Writes the value loaded through the source's resource. Loading isn't an
+    // edit of the data, so the value is written as a clean change, which
+    // doesn't make the form dirty, e.g. for sources whose value is stored,
+    // like the order of their items, see `FormModel.applyCleanChanges()`.
+    setLoadedValue(value) {
+      this.formModel
+        .applyCleanChanges(() => {
+          this.value = value
+        })
+        .catch(console.error)
     },
 
     createItem(schema, type, index = null) {

package/src/mixins/TypeMixin.js

@@ -37,6 +37,11 @@ export default {
       return this.schema.name
     },
 
+    // The form model of the data, owned by the dialog or route component.
+    formModel() {
+      return (this.dialogComponent ?? this.routeComponent).formModel
+    },
+
     type() {
       return this.schema.type
     },

package/src/types/DitoTypeMarkup.vue

@@ -251,9 +251,11 @@ export default DitoTypeComponent.register('markup', {
     const onFocus = () => this.onFocus()
 
     const onBlur = () => {
-      // Write the value first, so that validating on blur validates it.
+      // Write the value first, so that validating on blur validates it, and
+      // emit the change once the editor isn't focused anymore.
       updateValue()
       this.onBlur()
+      emitChange()
     }
 
     const onUpdate = () => {
@@ -275,9 +277,16 @@ export default DitoTypeComponent.register('markup', {
         ignoreWatch = true
         this.value = value
       }
-      if (!this.focused && changed) {
-        this.onChange()
+      if (!this.focused) {
+        emitChange()
+      }
+    }
+
+    // Emits the change of the value, once the editing is done.
+    const emitChange = () => {
+      if (changed) {
         changed = false
+        this.onChange()
       }
     }
 

package/src/utils/FormModel.js

@@ -584,7 +584,11 @@ function takeOverChangedValues(target, before, after) {
     return target
   }
   const isSameShape = (
-    isPlainObject(before) && isPlainObject(after) && isPlainObject(target) || (
+    (
+      isPlainObject(before) &&
+      isPlainObject(after) &&
+      isPlainObject(target)
+    ) || (
       isArray(before) &&
       isArray(after) &&
       isArray(target) &&

package/src/utils/schema/data.js

@@ -23,6 +23,7 @@ import {
   hasFormSchema,
   hasMultipleFormSchemas,
   getFormSchemas,
+  getItemFormSchema,
   getItemFormSchemaFromForms
 } from './lookup.js'
 
@@ -605,7 +606,20 @@ export function processSchemaData(schema, data, {
     }
   }
 
-  processComponents(schema.components, componentPath)
+  const components = isFunction(schema.components)
+    ? // Unnested components with `components()` callbacks, e.g. sections:
+      getItemFormSchema(
+        schema,
+        data,
+        new DitoContext(options.component, {
+          schema,
+          data,
+          dataPath,
+          rootData: options.rootData
+        })
+      ).components
+    : schema.components
+  processComponents(components, componentPath)
   processTabOrPanelSchemas(schema.tabs, componentPath)
   processTabOrPanelSchemas(schema.panels, componentPath)
 

package/src/utils/schema/lookup.js

@@ -6,26 +6,32 @@ import {
   isFunction,
   camelize
 } from '@ditojs/utils'
-import { reactive } from 'vue'
+import { reactive, computed } from 'vue'
 import { getTypeOptions } from './types.js'
 import {
   findNestedSchemaComponent,
   isSchema,
   isSingleComponentView
 } from './structure.js'
-// TODO: `getFormSchemas()` processes forms with `components()` callbacks on
-// every call, which also causes the only circular import between these
-// modules. Move this out of the lookup, see the form model.
+// TODO: Setting up the forms of `components()` callbacks causes the only
+// circular import between these modules.
 import { setupForm } from './setup.js'
 
 const emptySchema = {}
 
+// The forms with the components that `components()` callbacks create, by
+// callback and by the data that they create them for, see
+// `getFormWithCreatedComponents()`.
+const formsByComponentsCallback = new WeakMap()
+
 export function hasFormSchema(schema) {
   // Support both single form and multiple forms notation, as well as inlined
-  // components.
+  // components, also created by `components()` callbacks.
   return (
-    isSchema(schema) &&
-    isObject(schema.form || schema.forms || schema.components)
+    isSchema(schema) && (
+      isObject(schema.form || schema.forms || schema.components) ||
+      isFunction(schema.components)
+    )
   )
 }
 
@@ -96,20 +102,51 @@ export function getFormSchemas(schema, context, modifyForm) {
     Object.entries(forms).map(([type, form]) => {
       // Support `schema.components` callbacks to create components on the fly.
       if (context && isFunction(form.components)) {
-        // Make the form schema reactive since `setupForm()` is async, so that
-        // the setting of defaults will be picked up by downstream code.
-        form = reactive({
-          ...form,
-          components: form.components(context)
-        })
-        // Process the form again, now that we have the components.
-        setupForm(context.api, form).catch(console.error)
+        form = getFormWithCreatedComponents(form, context)
       }
       return [type, modifyForm?.(form) ?? form]
     })
   )
 }
 
+// Returns the form with the components that its `components()` callback
+// creates for the data of `context`. The forms are cached per data, and the
+// callback only creates new components when the data that it reads changes,
+// so that rendering and the walks of the form model, see `FormModel`, share
+// the same component schemas. `components()` callbacks therefore derive the
+// components from the data of their context, not from its components.
+function getFormWithCreatedComponents(form, context) {
+  const { item } = context
+  if (!isObject(item)) {
+    return createFormWithComponents(form, context)
+  }
+  let formsByItem = formsByComponentsCallback.get(form.components)
+  if (!formsByItem) {
+    formsByItem = new WeakMap()
+    formsByComponentsCallback.set(form.components, formsByItem)
+  }
+  let formWithCreatedComponents = formsByItem.get(item)
+  if (!formWithCreatedComponents) {
+    formWithCreatedComponents = computed(() =>
+      createFormWithComponents(form, context)
+    )
+    formsByItem.set(item, formWithCreatedComponents)
+  }
+  return formWithCreatedComponents.value
+}
+
+function createFormWithComponents(form, context) {
+  // Make the form schema reactive since `setupForm()` is async, so that the
+  // setting of defaults will be picked up by downstream code.
+  const formWithComponents = reactive({
+    ...form,
+    components: form.components(context)
+  })
+  // Process the form again, now that it has its components.
+  setupForm(context.api, formWithComponents).catch(console.error)
+  return formWithComponents
+}
+
 export function getItemFormSchemaFromForms(forms, item) {
   return forms[item?.type] || forms.default || null
 }

package/types/index.d.ts

@@ -1548,9 +1548,18 @@ export interface RadioSchema<$Item = any>
   layout?: 'horizontal' | 'vertical'
 }
 
-type SectionContent<$Data> = {
-  /** The section's field components. */
-  components?: Components<$Data>
+type SectionContent<$Data, $Item = $Data> = {
+  /**
+   * The section's field components, or a callback that
+   * creates them from the data, e.g. fields that depend on
+   * a selected template. The callback runs again when the
+   * data that it reads changes, and receives the context of
+   * the section, so that `item` is the item that contains
+   * it, also for nested sections.
+   */
+  components?:
+    | Components<$Data>
+    | ItemAccessor<$Item, {}, Components<$Data>>
   /**
    * A form schema for the section's content. Use this
    * instead of `components` to get form-level options
@@ -1690,7 +1699,7 @@ export type SectionSchema<$Item = any, $Nested = $Item> = BaseSchema<$Item> &
          * @defaultValue `false`
          */
         nested: true
-      } & SectionContent<$Nested>)
+      } & SectionContent<$Nested, $Item>)
   )
 
 export interface CheckboxSchema<$Item = any> extends BaseSchema<$Item> {