@ditojs/admin 2.100.0 → 3.0.0

package/src/types/DitoTypeCheckbox.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .dito-checkbox
   input(
-    :id="dataPath"
+    :id="componentPath"
     ref="element"
     v-model="value"
     type="checkbox"

package/src/types/DitoTypeCheckboxes.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 ul.dito-checkboxes(
-  :id="dataPath"
+  :id="componentPath"
   role="group"
   :aria-label="label"
   :class="`dito-layout--${schema.layout || 'vertical'}`"

package/src/types/DitoTypeCode.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .dito-code(
-  :id="dataPath"
+  :id="componentPath"
   :style="style"
 )
   .dito-code__editor(ref="editor")
@@ -120,6 +120,13 @@ export default DitoTypeComponent.register('code', {
       flask.updateLanguage(language)
     })
 
+    this.$watch(
+      () => this.readonly || this.disabled,
+      readonly =>
+        readonly ? flask.enableReadonlyMode() : flask.disableReadonlyMode(),
+      { immediate: true }
+    )
+
     setCode(this.value || '')
   },
 

package/src/types/DitoTypeColor.vue

@@ -5,7 +5,7 @@ DitoTrigger.dito-color(
 )
   template(#trigger)
     DitoInput(
-      :id="dataPath"
+      :id="componentPath"
       ref="element"
       v-model="hexValue"
       type="input"
@@ -39,7 +39,7 @@ DitoTrigger.dito-color(
               div(:style="{ background: `#${hexValue || '00000000'}` }")
   template(#popup)
     SketchPicker.dito-color__picker(
-      v-model="colorValue"
+      v-model:tinyColor="colorValue"
       :disableAlpha="!alpha"
       :disableFields="!inputs"
       :presetColors="presets"
@@ -47,21 +47,14 @@ DitoTrigger.dito-color(
 </template>
 
 <script>
-import tinycolor from 'tinycolor2'
-import { Sketch as SketchPicker } from '@lk77/vue3-color'
-import { isObject, isString } from '@ditojs/utils'
+// Use the `tinycolor` exported by `vue-color`, as required for its
+// `v-model:tinyColor` binding.
+import { SketchPicker, tinycolor } from 'vue-color'
 import { DitoTrigger, DitoInput } from '@ditojs/ui/src'
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import DitoAffixes from '../components/DitoAffixes.vue'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
-// Monkey-patch the `SketchPicker's` `hex` computed property to return lowercase
-// hex values instead of uppercase ones.
-const { hex } = SketchPicker.computed
-SketchPicker.computed.hex = function () {
-  return hex.call(this).toLowerCase()
-}
-
 // @vue/component
 export default DitoTypeComponent.register('color', {
   components: { DitoTrigger, DitoInput, DitoAffixes, SketchPicker },
@@ -80,15 +73,21 @@ export default DitoTypeComponent.register('color', {
 
     colorValue: {
       get() {
-        return (
-          this.convertedValue ||
-          this.value ||
-          (this.colorFormat === 'hex' ? '' : {})
-        )
+        return tinycolor(this.convertedValue || this.value || '#000000')
       },
 
-      set(value) {
-        this.value = convertColor(value, this.colorFormat)
+      set(color) {
+        // Picker changes take precedence over values typed into the input.
+        this.convertedValue = null
+        // Skip unchanged colors, as converting formats like `hsl` back and
+        // forth isn't lossless and would cause endless updates.
+        const { value } = this
+        if (
+          !value ||
+          color.toHex8String() !== tinycolor(value).toHex8String()
+        ) {
+          this.value = toTinyColorFormat(color, this.colorFormat)
+        }
       }
     },
 
@@ -174,21 +173,7 @@ export default DitoTypeComponent.register('color', {
 })
 
 function convertColor(color, format) {
-  return isObject(color) // a vue3-color color object
-    ? toVue3ColorFormat(color, format)
-    : toTinyColorFormat(tinycolor(color), format)
-}
-
-function toVue3ColorFormat(color, format) {
-  const value =
-    color[
-      {
-        hex: color?.a < 1 ? 'hex8' : 'hex',
-        rgb: 'rgba'
-      }[format] ||
-      format
-    ]
-  return isString(value) && value[0] === '#' ? value.toLowerCase() : value
+  return toTinyColorFormat(tinycolor(color), format)
 }
 
 // This should really be in tinycolor, but it only has the string equivalent
@@ -224,6 +209,7 @@ function toTinyColorFormat(color, format) {
 
 <style lang="scss">
 @import '../styles/_imports';
+@import 'vue-color/style.css';
 
 $color-swatch-width: $pattern-transparency-size;
 $color-swatch-radius: $border-radius - $border-width;

package/src/types/DitoTypeComponent.vue

@@ -15,7 +15,7 @@ component(
 // }
 
 import DitoTypeComponent from '../DitoTypeComponent.js'
-import { resolveSchemaComponent } from '../utils/schema.js'
+import { resolveSchemaComponent } from '../utils/schema/setup.js'
 
 // @vue/component
 export default DitoTypeComponent.register('component', {

package/src/types/DitoTypeComputed.vue

@@ -1,8 +1,6 @@
 <template lang="pug">
-//- TODO: Find a better way to trigger evaluation of `value` that dose not
-//- involve actually rendering it when the component is not visible.
 input.dito-text.dito-input(
-  :id="dataPath"
+  :id="componentPath"
   ref="element"
   :name="name"
   type="text"
@@ -14,37 +12,16 @@ input.dito-text.dito-input(
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
-import ValueMixin from '../mixins/ValueMixin.js'
-import DataMixin from '../mixins/DataMixin.js'
 
 export default DitoTypeComponent.register(
   ['computed', 'data', 'hidden'],
   // @vue/component
   {
-    mixins: [DataMixin],
-
     defaultValue: () => undefined, // Callback to override `defaultValue: null`
     defaultVisible: false,
-
-    computed: {
-      value: {
-        get() {
-          const { schema } = this
-          if (schema.data || schema.dataPath) {
-            const value = this.handleDataSchema(schema, 'value')
-            // TODO: Fix side-effects
-            // eslint-disable-next-line max-len
-            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-            this.data[this.name] = value
-          }
-          return ValueMixin.computed.value.get.call(this)
-        },
-
-        set(value) {
-          ValueMixin.computed.value.set.call(this, value)
-        }
-      }
-    }
+    // The value is resolved from `schema.data` or `schema.dataPath` by
+    // `FormModel`, see `hasValueFromDataSchema()`:
+    valueFromDataSchema: true
   }
 )
 </script>

package/src/types/DitoTypeDate.vue

@@ -2,7 +2,7 @@
 .dito-date
   component(
     :is="getComponent(type)"
-    :id="dataPath"
+    :id="componentPath"
     ref="element"
     v-model="dateValue"
     :locale="locale"
@@ -41,7 +41,12 @@ import {
   DitoTimePicker,
   DitoDateTimePicker
 } from '@ditojs/ui/src'
-import { isDate, assignDeeply } from '@ditojs/utils'
+import {
+  isDate,
+  assignDeeply,
+  formatPlainDate,
+  parsePlainDate
+} from '@ditojs/utils'
 
 export default DitoTypeComponent.register(
   ['date', 'datetime', 'time'],
@@ -58,7 +63,7 @@ export default DitoTypeComponent.register(
       dateValue: {
         get() {
           const { value } = this
-          return value ? new Date(value) : value
+          return value ? parsePlainDate(value) ?? new Date(value) : value
         },
 
         set(value) {
@@ -91,8 +96,14 @@ export default DitoTypeComponent.register(
       }
     },
 
-    processValue({ value }) {
-      return isDate(value) ? value.toISOString() : value
+    processValue({ schema, value }) {
+      // Send dates as their plain date, so they can't shift to another day
+      // through time zones, and all other date types as ISO strings.
+      return isDate(value)
+        ? schema.type === 'date'
+          ? formatPlainDate(value)
+          : value.toISOString()
+        : value
     }
   }
 )

package/src/types/DitoTypeLabel.vue

@@ -1,8 +1,5 @@
 <template lang="pug">
-DitoLabel.dito-label-component(
-  :label="value"
-  :dataPath="dataPath"
-)
+DitoLabel.dito-label-component(:label="value")
 </template>
 
 <script>

package/src/types/DitoTypeList.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .dito-list(
   v-if="isReady"
-  :id="dataPath"
+  :id="componentPath"
   role="region"
   :aria-label="label || labelize(schema.name)"
 )
@@ -42,12 +42,12 @@
       as="tbody"
       :options="getDraggableOptions()"
       :draggable="draggable"
-      :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
+      :modelValue="listData"
       @update:modelValue="value => (listData = value)"
     )
       tr(
         v-for="(item, index) in listData"
-        :id="getDataPath(index)"
+        :id="getComponentPath(index)"
         :key="getItemUid(schema, item)"
       )
         template(
@@ -163,10 +163,10 @@ import DitoContext from '../DitoContext.js'
 import SourceMixin from '../mixins/SourceMixin.js'
 import SortableMixin from '../mixins/SortableMixin.js'
 import {
-  getViewEditPath,
   resolveSchemaComponent,
   resolveSchemaComponents
-} from '../utils/schema.js'
+} from '../utils/schema/setup.js'
+import { getViewEditPath } from '../utils/schema/lookup.js'
 import { createFiltersPanel } from '../utils/filter.js'
 import { appendDataPath } from '../utils/data.js'
 import { pickBy, equals, hyphenate } from '@ditojs/utils'
@@ -250,6 +250,10 @@ export default DitoTypeComponent.register('list', {
       return appendDataPath(this.dataPath, index)
     },
 
+    getComponentPath(index) {
+      return appendDataPath(this.componentPath, index)
+    },
+
     getEditPath(item, index) {
       if (this.editable) {
         const id = this.getItemId(this.schema, item, index)

package/src/types/DitoTypeMarkup.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.dito-markup(:id="dataPath")
+.dito-markup(:id="componentPath")
   .dito-buttons.dito-buttons--toolbar(
     v-if="groupedButtons.length > 0"
   )
@@ -7,9 +7,11 @@
       v-for="buttons in groupedButtons"
     )
       button.dito-button(
-        v-for="{ name, icon, isActive, onClick } in buttons"
-        :key="name"
+        v-for="{ id, label, icon, isActive, onClick } in buttons"
+        :key="id"
         :class="{ 'dito-button--active': isActive }"
+        :aria-label="label"
+        :aria-pressed="isActive"
         @click="onClick"
       )
         DitoIcon(:name="icon")
@@ -169,7 +171,7 @@ export default DitoTypeComponent.register('markup', {
 
     editorOptions() {
       return {
-        editable: !this.readyonly,
+        editable: !this.readonly,
         autoFocus: this.autofocus,
         disableInputRules: !this.enableRules.input,
         disablePasteRules: !this.enableRules.paste,
@@ -237,7 +239,7 @@ export default DitoTypeComponent.register('markup', {
   },
 
   watch: {
-    readyonly: 'updateEditorOptions',
+    readonly: 'updateEditorOptions',
     autofocus: 'updateEditorOptions',
     enableRules: 'updateEditorOptions'
   },
@@ -249,8 +251,9 @@ export default DitoTypeComponent.register('markup', {
     const onFocus = () => this.onFocus()
 
     const onBlur = () => {
-      this.onBlur()
+      // Write the value first, so that validating on blur validates it.
       updateValue()
+      this.onBlur()
     }
 
     const onUpdate = () => {
@@ -258,10 +261,7 @@ export default DitoTypeComponent.register('markup', {
       this.onInput()
     }
 
-    const setValueDebounced = debounce(() => {
-      ignoreWatch = true
-      updateValue()
-    }, 100)
+    const setValueDebounced = debounce(() => updateValue(), 100)
 
     const updateValue = () => {
       const content = this.editor.getHTML()
@@ -270,6 +270,9 @@ export default DitoTypeComponent.register('markup', {
         : content
       if (value !== this.value) {
         changed = true
+        // The value comes from the editor, so don't set it back as content,
+        // which would re-parse it and e.g. collapse trailing whitespace.
+        ignoreWatch = true
         this.value = value
       }
       if (!this.focused && changed) {
@@ -337,7 +340,6 @@ export default DitoTypeComponent.register('markup', {
     async onClickLink(editor) {
       const attributes = await this.rootComponent.showDialog({
         components: {
-          DitoIcon,
           href: {
             type: 'url',
             label: 'Link',
@@ -440,9 +442,18 @@ export default DitoTypeComponent.register('markup', {
       const list = []
       const { commands } = this.editor
 
-      const addButton = ({ name, icon, command, attributes, onClick }) => {
+      const addButton = ({
+        name,
+        id = name,
+        label = this.labelize(id),
+        icon,
+        command,
+        attributes,
+        onClick
+      }) => {
         list.push({
-          name,
+          id,
+          label,
           icon,
           isActive: this.editor.isActive(name, attributes),
           onClick: () => {
@@ -479,6 +490,7 @@ export default DitoTypeComponent.register('markup', {
                     if (setting.includes(value)) {
                       addButton({
                         name,
+                        id: `${name}-${value}`,
                         icon: `${icon}-${value}`,
                         command,
                         attributes: { [attribute]: value },

package/src/types/DitoTypeMultiselect.vue

@@ -10,7 +10,7 @@
       :parentContext="context"
     )
     VueMultiselect(
-      :id="dataPath"
+      :id="componentPath"
       ref="element"
       v-model="selectedOptions"
       :aria-label="label"
@@ -30,7 +30,7 @@
       :preserveSearch="!!searchFilter"
       :clearOnSelect="!searchFilter"
       :closeOnSelect="!stayOpen"
-      :loading="isLoading"
+      :loading="isLoadingOptions || isLoadingSearchedOptions"
       v-bind="attributes"
       @open="onOpen"
       @close="onClose"
@@ -80,6 +80,7 @@ export default DitoTypeComponent.register('multiselect', {
   data() {
     return {
       searchedOptions: null,
+      isLoadingSearchedOptions: false,
       populate: false
     }
   },
@@ -141,7 +142,9 @@ export default DitoTypeComponent.register('multiselect', {
       const prefix = 'multiselect'
       return {
         [`${prefix}--multiple`]: this.multiple,
-        [`${prefix}--loading`]: this.isLoading,
+        [`${prefix}--loading`]: (
+          this.isLoadingOptions || this.isLoadingSearchedOptions
+        ),
         [`${prefix}--highlight`]: this.showHighlight
       }
     },
@@ -225,15 +228,32 @@ export default DitoTypeComponent.register('multiselect', {
       }
     },
 
+    // Returns the options that `searchFilter()` returns for the search term,
+    // showing the loading state while it's pending, and `null` if it fails.
+    async loadSearchedOptions(searchTerm) {
+      // Use a timeout to allow already resolved promises to return options
+      // without showing a loading indicator.
+      const timer = setTimeout(() => {
+        this.isLoadingSearchedOptions = true
+      }, 0)
+      let options = null
+      try {
+        options = await this.searchFilter(new DitoContext(this, { searchTerm }))
+      } catch (error) {
+        this.addError(error.message || error)
+      }
+      clearTimeout(timer)
+      this.isLoadingSearchedOptions = false
+      return options
+    },
+
     async onSearchChange(searchTerm) {
       if (this.searchFilter) {
         if (searchTerm) {
           // Set `searchedOptions` to an empty array, before it will be
           // populated asynchronously with the actual results.
           this.searchedOptions = []
-          this.searchedOptions = await this.resolveData(
-            () => this.searchFilter(new DitoContext(this, { searchTerm }))
-          )
+          this.searchedOptions = await this.loadSearchedOptions(searchTerm)
         } else {
           // Clear `searchedOptions` when the query is cleared.
           this.searchedOptions = null

package/src/types/DitoTypeNumber.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 DitoInput.dito-number(
-  :id="dataPath"
+  :id="componentPath"
   ref="element"
   v-model="inputValue"
   type="number"

package/src/types/DitoTypeObject.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .dito-object(
   v-if="isReady"
-  :id="dataPath"
+  :id="componentPath"
 )
   .dito-object-content(
     v-if="objectData"
@@ -18,9 +18,7 @@
       :disabled="disabled || isLoading"
       :collapsed="collapsed"
       :collapsible="collapsible"
-      :deletable="objectData && deletable"
-      :editable="objectData && editable"
-      :editPath="path"
+      :deletable="deletable"
       :accumulatedBasis="accumulatedBasis"
       @delete="deleteItem(objectData)"
     )
@@ -39,8 +37,9 @@
       v-else
       v-html="getItemLabel(schema, objectData)"
     )
-  //- NOTE: `DitoEditButtons` here only handle the create button outside of the
-  //- schema, the edit buttons inside are handled by `DitoSchemaInlined`.
+  //- NOTE: For inlined objects, `DitoEditButtons` here only handle the create
+  //- button outside of the schema, the other edit buttons inside are handled by
+  //- `DitoSchemaInlined`.
   DitoEditButtons(
     :buttons="buttonSchemas"
     :schema="schema"
@@ -52,6 +51,10 @@
     :disabled="disabled || isLoading"
     :creatable="creatable"
     :createPath="createPath"
+    :editable="editable"
+    :editPath="path"
+    :deletable="!isInlined && deletable"
+    @delete="deleteItem(objectData)"
   )
 </template>
 
@@ -59,7 +62,7 @@
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import SourceMixin from '../mixins/SourceMixin.js'
-import { resolveSchemaComponent } from '../utils/schema.js'
+import { resolveSchemaComponent } from '../utils/schema/setup.js'
 
 // @vue/component
 export default DitoTypeComponent.register('object', {

package/src/types/DitoTypePanel.vue

@@ -1,18 +1,31 @@
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
+import { setupSchemaComponents } from '../utils/schema/setup.js'
 
 // @vue/component
 export default DitoTypeComponent.register('panel', {
-  defaultValue: () => undefined, // Callback to override `defaultValue: null`
-  excludeValue: true,
+  // Panels share the data of their schema, or provide their own data through
+  // `schema.data`, see `DitoPanel`, so they never hold a value of their own.
+  defaultNested: false,
   generateLabel: false,
   omitSpacing: true,
 
   getPanelSchema(api, schema) {
-    // For a TypePanel, the component schema is also the panel schema, but
-    // remove the added name, so it doesn't get appended twice to data-path.
-    const { name, ...panel } = schema
-    return panel
+    // For a TypePanel, the component schema is also the panel schema. Its name
+    // is added to the panel's data path and component path, see
+    // `getPanelEntry()`, as unnested components don't add it to data paths.
+    return schema
+  },
+
+  async processSchema(api, schema, name, routes, level) {
+    // Process the panel's components so their forms get resolved too.
+    await setupSchemaComponents(api, schema, routes, level)
+  },
+
+  render() {
+    // Panel components are displayed in the sidebar, see
+    // `DitoContainer.panelEntries`, not in place.
+    return null
   }
 })
 </script>

package/src/types/DitoTypeProgress.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 progress.dito-progress(
-  :id="dataPath"
+  :id="componentPath"
   ref="element"
   :value="progressValue"
   :max="progressMax"

package/src/types/DitoTypeRadio.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 ul.dito-radio-buttons(
-  :id="dataPath"
+  :id="componentPath"
   role="radiogroup"
   :aria-label="label"
   :class="`dito-layout--${schema.layout || 'vertical'}`"

package/src/types/DitoTypeSection.vue

@@ -17,14 +17,26 @@
 </template>
 
 <script>
+import { normalizeDataPath, parseDataPath } from '@ditojs/utils'
 import DitoTypeComponent from '../DitoTypeComponent.js'
+import SchemaParentMixin from '../mixins/SchemaParentMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { getItemFormSchema, processSchemaComponents } from '../utils/schema.js'
+import { setupSchemaComponents } from '../utils/schema/setup.js'
+import { getItemFormSchema } from '../utils/schema/lookup.js'
+import { hasComponentNamed } from '../utils/schema/structure.js'
 
 // @vue/component
 export default DitoTypeComponent.register('section', {
-  defaultValue: () => undefined, // Callback to override `defaultValue: null`
+  // Register the section's schema with the section rather than the form, so
+  // that the section can reveal its components, see `navigateToComponent()`.
+  mixins: [SchemaParentMixin],
+  // Nested sections hold their data in an object, other sections don't have
+  // their own value. Use a callback to override `defaultValue: null`.
+  defaultValue: ({ schema }) => (schema.nested ? {} : undefined),
   ignoreMissingValue: ({ schema }) => !schema.nested && !('default' in schema),
+  // The object of nested sections can't be `null`, unlike the value of the
+  // `object` type, where `null` means that there's no object.
+  treatNullAsMissing: ({ schema }) => !!schema.nested,
   defaultNested: false,
   generateLabel: false,
 
@@ -52,12 +64,28 @@ export default DitoTypeComponent.register('section', {
   },
 
   methods: {
-    getItemFormSchema
+    getItemFormSchema,
+
+    async navigateToComponent(dataPath, onComplete, options) {
+      // Unnested sections share the data path of their parent schema, so
+      // decide by schema whether the section displays the value at `dataPath`:
+      const { mainSchemaComponent } = this
+      const dataPathPrefix = this.dataPath ? `${this.dataPath}/` : ''
+      const normalizedDataPath = normalizeDataPath(dataPath)
+      const componentName = normalizedDataPath.startsWith(dataPathPrefix)
+        ? parseDataPath(normalizedDataPath.slice(dataPathPrefix.length))[0]
+        : null
+      return (
+        !!mainSchemaComponent &&
+        hasComponentNamed(mainSchemaComponent.schema, componentName) &&
+        mainSchemaComponent.navigateToComponent(dataPath, onComplete, options)
+      )
+    }
   },
 
   async processSchema(api, schema, name, routes, level) {
     // Process section components so their forms get resolved too.
-    await processSchemaComponents(api, schema, routes, level)
+    await setupSchemaComponents(api, schema, routes, level)
   }
 })
 </script>

package/src/types/DitoTypeSelect.vue

@@ -11,7 +11,7 @@
       :parentContext="context"
     )
     select(
-      :id="dataPath"
+      :id="componentPath"
       ref="element"
       v-model="selectedValue"
       v-bind="attributes"