@ditojs/admin 3.2.6 → 3.3.0

package/src/types/DitoTypeMarkup.vue

@@ -6,7 +6,7 @@
     .dito-buttons__group(
       v-for="buttons in groupedButtons"
     )
-      button.dito-button(
+      DitoButton(
         v-for="{ id, label, icon, isActive, onClick } in buttons"
         :key="id"
         :class="{ 'dito-button--active': isActive }"
@@ -20,16 +20,18 @@
     :editor="editor"
     :style="styles"
   )
-  .dito-resize(
+  DitoResizeHandle(
     v-if="resizable"
-    @mousedown.stop.prevent="onDragResize"
+    :getElement="() => $refs.editor.$el"
+    @resize="height = `${$event}px`"
   )
 </template>
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
-import DomMixin from '../mixins/DomMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
+import { createChangeOnceEdited } from '../utils/changeOnceEdited.js'
+import DitoResizeHandle from '../components/DitoResizeHandle.vue'
 // Tiptap:
 import { Editor, EditorContent, Mark, getMarkAttributes } from '@tiptap/vue-3'
 import { Slice, Fragment } from '@tiptap/pm/model'
@@ -70,15 +72,16 @@ import { Footnotes, FootnoteReference, Footnote } from 'tiptap-footnotes'
 // Tools:
 import { History } from '@tiptap/extension-history'
 
-import { DitoIcon } from '@ditojs/ui/src'
+import { DitoButton, DitoIcon } from '@ditojs/ui/src'
 import { isArray, isObject, hyphenate, debounce, camelize } from '@ditojs/utils'
 
 // @vue/component
 export default DitoTypeComponent.register('markup', {
-  mixins: [DomMixin],
   components: {
     EditorContent,
-    DitoIcon
+    DitoButton,
+    DitoIcon,
+    DitoResizeHandle
   },
 
   data() {
@@ -171,10 +174,10 @@ export default DitoTypeComponent.register('markup', {
 
     editorOptions() {
       return {
-        editable: !this.readonly,
-        autoFocus: this.autofocus,
-        disableInputRules: !this.enableRules.input,
-        disablePasteRules: !this.enableRules.paste,
+        editable: !this.readonly && !this.disabled,
+        autofocus: this.autofocus,
+        enableInputRules: this.enableRules.input,
+        enablePasteRules: this.enableRules.paste,
         parseOptions: this.parseOptions,
         editorProps: this.hardBreak
           ? {
@@ -240,14 +243,20 @@ export default DitoTypeComponent.register('markup', {
 
   watch: {
     readonly: 'updateEditorOptions',
+    disabled: 'updateEditorOptions',
     autofocus: 'updateEditorOptions',
     enableRules: 'updateEditorOptions'
   },
 
   created() {
-    let changed = false
     let ignoreWatch = false
 
+    // Emits the change of the value once the editor isn't focused anymore.
+    const changeOnceEdited = createChangeOnceEdited({
+      isEditing: () => this.focused,
+      emitChange: () => this.onChange()
+    })
+
     const onFocus = () => this.onFocus()
 
     const onBlur = () => {
@@ -255,7 +264,7 @@ export default DitoTypeComponent.register('markup', {
       // emit the change once the editor isn't focused anymore.
       updateValue()
       this.onBlur()
-      emitChange()
+      changeOnceEdited.emitIfDone()
     }
 
     const onUpdate = () => {
@@ -264,6 +273,13 @@ export default DitoTypeComponent.register('markup', {
     }
 
     const setValueDebounced = debounce(() => updateValue(), 100)
+    // Writes the pending edits before unmounting, as the destroyed editor
+    // can't be read anymore, see `beforeUnmount()`:
+    this.writePendingValue = () => {
+      if (setValueDebounced.cancel()) {
+        updateValue()
+      }
+    }
 
     const updateValue = () => {
       const content = this.editor.getHTML()
@@ -271,23 +287,13 @@ export default DitoTypeComponent.register('markup', {
         ? content.replace(/^<p>(.*?)<\/p>$/s, '$1')
         : content
       if (value !== this.value) {
-        changed = true
+        changeOnceEdited.markEdited()
         // 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) {
-        emitChange()
-      }
-    }
-
-    // Emits the change of the value, once the editing is done.
-    const emitChange = () => {
-      if (changed) {
-        changed = false
-        this.onChange()
-      }
+      changeOnceEdited.emitIfDone()
     }
 
     this.$watch('value', value => {
@@ -295,8 +301,8 @@ export default DitoTypeComponent.register('markup', {
         ignoreWatch = false
       } else {
         const content = this.hardBreak
-          ? `<p>${value}</p>`
-          : value
+          ? `<p>${value ?? ''}</p>`
+          : value ?? ''
         this.editor.commands.setContent(content, {
           emitUpdate: false,
           parseOptions: this.parseOptions
@@ -314,40 +320,21 @@ export default DitoTypeComponent.register('markup', {
     })
   },
 
+  beforeUnmount() {
+    this.writePendingValue()
+  },
+
   unmounted() {
     this.editor.destroy()
   },
 
   methods: {
-    onDragResize(event) {
-      const getPoint = ({ clientX: x, clientY: y }) => ({ x, y })
-
-      let prevY = getPoint(event).y
-      let height = parseFloat(getComputedStyle(this.$refs.editor.$el).height)
-
-      const mousemove = event => {
-        const { y } = getPoint(event)
-        height += y - prevY
-        prevY = y
-        this.height = `${Math.max(height, 0)}px`
-      }
-
-      const handlers = this.domOn(document, {
-        mousemove,
-
-        mouseup(event) {
-          mousemove(event)
-          handlers.remove()
-        }
-      })
-    },
-
     updateEditorOptions() {
       this.editor.setOptions(this.editorOptions)
     },
 
     async onClickLink(editor) {
-      const attributes = await this.rootComponent.showDialog({
+      const attributes = await this.showDialog({
         components: {
           href: {
             type: 'url',
@@ -411,8 +398,8 @@ export default DitoTypeComponent.register('markup', {
         marks.strike && Strike,
         marks.small && Small,
         marks.code && Code,
-        marks.subscript && Superscript,
-        marks.superscript && Subscript,
+        marks.subscript && Subscript,
+        marks.superscript && Superscript,
         marks.link && LinkWithTitle,
 
         // Nodes: `schema.nodes`
@@ -681,7 +668,7 @@ const LinkWithTitle = Link.extend({
   a {
     pointer-events: none;
     cursor: default;
-    color: blue;
+    color: $color-active;
     text-decoration: underline;
   }
 

package/src/types/DitoTypeMultiselect.vue

@@ -1,13 +1,10 @@
 <template lang="pug">
 .dito-multiselect
   .dito-multiselect__inner
-    DitoAffixes(
-      :items="schema.prefix"
+    DitoInputAffixes(
       position="prefix"
-      mode="input"
+      v-bind="inputAffixesProps.prefix"
       absolute
-      :disabled="disabled"
-      :parentContext="context"
     )
     VueMultiselect(
       :id="componentPath"
@@ -48,32 +45,25 @@
         )
           span {{ getLabelForOption(option) }}
           i.multiselect__tag-icon(
-            tabindex="1"
+            tabindex="0"
             @keydown.enter.prevent="remove(option)"
             @mousedown.prevent="remove(option)"
           )
-    DitoAffixes(
-      :items="schema.suffix"
+    DitoInputAffixes(
       position="suffix"
-      mode="input"
+      v-bind="inputAffixesProps.suffix"
       absolute
-      :clearable="showClearButton"
-      :disabled="disabled"
-      :inlineInfo="inlineInfo"
-      :parentContext="context"
       @clear="clear"
     )
-  //- Edit button is never disabled, even if the field is disabled.
-  DitoEditButtons(
+  DitoOptionsEditButtons(
     v-if="editable"
     :schema="schema"
     :dataPath="dataPath"
     :data="data"
     :meta="meta"
     :store="store"
-    :disabled="false"
-    :editable="editable"
-    :editPath="editPath"
+    :parentContext="context"
+    :optionValue="selectedValue"
   )
 </template>
 
@@ -82,7 +72,9 @@ import DitoTypeComponent from '../DitoTypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import TypeMixin from '../mixins/TypeMixin.js'
 import OptionsMixin from '../mixins/OptionsMixin.js'
-import DitoAffixes from '../components/DitoAffixes.vue'
+import DitoInputAffixes from '../components/DitoInputAffixes.vue'
+import { getInputAffixesProps } from '../utils/affixes.js'
+import DitoOptionsEditButtons from '../components/DitoOptionsEditButtons.vue'
 import VueMultiselect from 'vue-multiselect'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { isArray, isBoolean, isObject, isString } from '@ditojs/utils'
@@ -90,7 +82,7 @@ import { isArray, isBoolean, isObject, isString } from '@ditojs/utils'
 // @vue/component
 export default DitoTypeComponent.register('multiselect', {
   mixins: [OptionsMixin],
-  components: { DitoAffixes, VueMultiselect },
+  components: { DitoInputAffixes, DitoOptionsEditButtons, VueMultiselect },
 
   data() {
     return {
@@ -98,25 +90,35 @@ export default DitoTypeComponent.register('multiselect', {
       isLoadingSearchedOptions: false,
       // The term of the current search, see `onSearchChange()`:
       currentSearchTerm: null,
+      // The options of the tags that were added, see `onAddTag()`:
+      addedTagOptions: [],
       populate: false
     }
   },
 
   computed: {
+    inputAffixesProps() {
+      return getInputAffixesProps(this)
+    },
+
     selectedOptions: {
       get() {
         // Values without options stay visible once the options are loaded,
-        // and are kept when the selection changes, see `getFallbackOption()`,
-        // unless the multiselect is taggable and can add them as options.
+        // and are kept when the selection changes, see `getFallbackOption()`.
+        // Taggable multiselects may have no options besides their values.
         return this.multiple
-          ? this.hasOptions && isArray(this.value)
+          ? (
+              isArray(this.value) && (
+                this.hasOptions ||
+                this.taggable && !this.isLoadingOptions
+              )
+            )
             ? this.value.map(value => {
                 const selectedValue = this.relate
                   ? this.getValueForOption(value)
                   : value
                 return (
                   this.getOptionForValue(selectedValue) ||
-                  this.addTagOption(selectedValue) ||
                   this.getFallbackOption(value)
                 )
               })
@@ -134,6 +136,22 @@ export default DitoTypeComponent.register('multiselect', {
       }
     },
 
+    // @override
+    options() {
+      const options = OptionsMixin.computed.options.call(this)
+      // Add the options of the added tags that the options don't contain yet,
+      // without modifying the options of the data model. Grouped options have
+      // no group to add them to.
+      const addedTagOptions = this.groupBy
+        ? []
+        : this.addedTagOptions.filter(
+            option => !this.isOptionAmong(option, options)
+          )
+      return addedTagOptions.length > 0
+        ? [...options, ...addedTagOptions]
+        : options
+    },
+
     activeOptions() {
       return this.searchedOptions || this.options
     },
@@ -175,11 +193,16 @@ export default DitoTypeComponent.register('multiselect', {
       if (isBoolean(placeholder)) {
         placeholder = placeholder ? undefined : null
       }
+      const { label } = this
       return placeholder === undefined
         ? searchable && taggable
-          ? `Search or add a ${this.label}`
+          ? label
+            ? `Search or add a ${label}`
+            : 'Search or add'
           : searchable
-            ? `Select or search ${this.label}`
+            ? label
+              ? `Select or search ${label}`
+              : 'Select or search'
             : undefined
         : placeholder
     },
@@ -198,29 +221,37 @@ export default DitoTypeComponent.register('multiselect', {
   },
 
   methods: {
-    addTagOption(tag) {
-      if (this.taggable) {
-        const { optionLabel, optionValue } = this
-        const option =
-          optionLabel && optionValue
-            ? {
-                [optionLabel]: tag,
-                // TODO: Define a simple schema option to convert the tag value
-                // to something else, e.g. `toTag: tag => underscore(tag)`
-                [optionValue]: tag
-              }
-            : tag
-        this.options.push(option)
-        return option
-      }
+    createTagOption(tag) {
+      const { optionLabel, optionValue } = this
+      return optionLabel && optionValue
+        ? {
+            [optionLabel]: tag,
+            // TODO: Define a simple schema option to convert the tag value
+            // to something else, e.g. `toTag: tag => underscore(tag)`
+            [optionValue]: tag
+          }
+        : tag
+    },
+
+    // Returns whether `options` contain an option with the value of `option`.
+    isOptionAmong(option, options) {
+      const value = this.getValueForOption(option)
+      return options.some(
+        otherOption => this.getValueForOption(otherOption) === value
+      )
     },
 
     // Returns whether the option is a fallback option for a value without
     // one, see `getFallbackOption()`. Plain options are their own values.
+    // Taggable multiselects can hold any value.
     isUnavailableOption(option) {
-      return this.optionValue
-        ? !this.getOptionForValue(this.getValueForOption(option))
-        : !this.options.includes(option)
+      return (
+        !this.taggable && (
+          this.optionValue
+            ? !this.getOptionForValue(this.getValueForOption(option))
+            : !this.options.includes(option)
+        )
+      )
     },
 
     // Returns an option for a value without one, e.g. of options that only
@@ -263,10 +294,13 @@ export default DitoTypeComponent.register('multiselect', {
     },
 
     onAddTag(tag) {
-      const option = this.addTagOption(tag)
-      if (option) {
-        this.value ??= []
-        this.value.push(this.getValueForOption(option))
+      if (this.taggable) {
+        const option = this.createTagOption(tag)
+        this.addedTagOptions.push(option)
+        // Select the option through `selectedOptions`, which emits the change:
+        this.selectedOptions = this.multiple
+          ? [...this.selectedOptions, option]
+          : option
       }
     },
 
@@ -346,10 +380,6 @@ $tag-line-height: 1em;
     align-items: center;
   }
 
-  .dito-edit-buttons {
-    margin-left: $form-spacing-half;
-  }
-
   .multiselect {
     $self: last-selector(&);
 

package/src/types/DitoTypeNumber.vue

@@ -10,22 +10,14 @@ DitoInput.dito-number(
   :step="stepValue"
 )
   template(#prefix)
-    DitoAffixes(
-      :items="schema.prefix"
+    DitoInputAffixes(
       position="prefix"
-      mode="input"
-      :disabled="disabled"
-      :parentContext="context"
+      v-bind="inputAffixesProps.prefix"
     )
   template(#suffix)
-    DitoAffixes(
-      :items="schema.suffix"
+    DitoInputAffixes(
       position="suffix"
-      mode="input"
-      :clearable="showClearButton"
-      :disabled="disabled"
-      :inlineInfo="inlineInfo"
-      :parentContext="context"
+      v-bind="inputAffixesProps.suffix"
       @clear="clear"
     )
 </template>
@@ -33,7 +25,8 @@ DitoInput.dito-number(
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import NumberMixin from '../mixins/NumberMixin.js'
-import DitoAffixes from '../components/DitoAffixes.vue'
+import DitoInputAffixes from '../components/DitoInputAffixes.vue'
+import { getInputAffixesProps } from '../utils/affixes.js'
 import { DitoInput } from '@ditojs/ui/src'
 
 export default DitoTypeComponent.register(
@@ -41,11 +34,15 @@ export default DitoTypeComponent.register(
   // @vue/component
   {
     mixins: [NumberMixin],
-    components: { DitoInput, DitoAffixes },
+    components: { DitoInput, DitoInputAffixes },
     nativeField: true,
     textField: true,
 
     computed: {
+      inputAffixesProps() {
+        return getInputAffixesProps(this)
+      },
+
       isInteger() {
         return this.type === 'integer'
       }
@@ -56,7 +53,7 @@ export default DitoTypeComponent.register(
 
 <style lang="scss">
 // Only show spin buttons if the number component defines a step size.
-input[type='number']:not([step]) {
+.dito-number input[type='number']:not([step]) {
   &::-webkit-inner-spin-button,
   &::-webkit-outer-spin-button {
     -webkit-appearance: none;

package/src/types/DitoTypeObject.vue

@@ -6,11 +6,8 @@
   .dito-object-content(
     v-if="objectData"
   )
-    //- Support the same rendering options as TypeList:
-    DitoSchemaInlined(
-      v-if="isInlined"
-      :label="objectLabel"
-      :schema="getItemFormSchema(schema, objectData, context)"
+    DitoSourceItem(
+      :schema="schema"
       :dataPath="dataPath"
       :data="objectData"
       :meta="nestedMeta"
@@ -19,24 +16,8 @@
       :collapsed="collapsed"
       :collapsible="collapsible"
       :deletable="deletable"
-      :accumulatedBasis="accumulatedBasis"
       @delete="deleteItem(objectData)"
     )
-    component(
-      v-else-if="schema.component"
-      :is="schema.component"
-      :dataPath="dataPath"
-      :data="objectData"
-      :nested="false"
-    )
-    span(
-      v-else-if="render"
-      v-html="render(getContext())"
-    )
-    span(
-      v-else
-      v-html="getItemLabel(schema, objectData)"
-    )
   //- NOTE: For inlined objects, `DitoEditButtons` here only handle the create
   //- button outside of the schema, the other edit buttons inside are handled by
   //- `DitoSchemaInlined`.
@@ -45,7 +26,6 @@
     :schema="schema"
     :dataPath="dataPath"
     :data="objectData"
-    :path="path"
     :meta="meta"
     :store="store"
     :disabled="disabled || isLoading"
@@ -60,34 +40,20 @@
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
-import DitoContext from '../DitoContext.js'
+import DitoSourceItem from '../components/DitoSourceItem.vue'
 import SourceMixin from '../mixins/SourceMixin.js'
 import { resolveSchemaComponent } from '../utils/schema/setup.js'
 
 // @vue/component
 export default DitoTypeComponent.register('object', {
   mixins: [SourceMixin],
+  components: { DitoSourceItem },
 
   getSourceType(type) {
     // No need for transformation here. See TypeTreeList for details.
     return type
   },
 
-  computed: {
-    objectLabel() {
-      // Only show a label if the object is collapsible.
-      return this.collapsible
-        ? this.getItemLabel(this.schema, this.objectData, { asObject: true })
-        : null
-    }
-  },
-
-  methods: {
-    getContext() {
-      return new DitoContext(this, { data: this.objectData })
-    }
-  },
-
   async processSchema(
     api,
     schema,

package/src/types/DitoTypeRadio.vue

@@ -1,31 +1,44 @@
 <template lang="pug">
-ul.dito-radio-buttons(
+DitoOptionList.dito-radio-buttons(
   :id="componentPath"
   role="radiogroup"
   :aria-label="label"
-  :class="`dito-layout--${schema.layout || 'vertical'}`"
+  :options="options"
+  :isGrouped="!!groupBy"
+  :layout="schema.layout"
 )
-  li(
-    v-for="option in options"
-  )
+  template(#option="{ option, isFirstOption }")
     label
       input.dito-radio-button(
-        ref="element"
+        :ref="isFirstOption ? 'element' : undefined"
         v-model="selectedValue"
         type="radio"
         :value="getValueForOption(option)"
         v-bind="attributes"
       )
       | {{ getLabelForOption(option) }}
+    DitoOptionsEditButtons(
+      v-if="editable"
+      :schema="schema"
+      :dataPath="dataPath"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :parentContext="context"
+      :optionValue="getValueForOption(option)"
+    )
 </template>
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import OptionsMixin from '../mixins/OptionsMixin.js'
+import DitoOptionList from '../components/DitoOptionList.vue'
+import DitoOptionsEditButtons from '../components/DitoOptionsEditButtons.vue'
 
 // @vue/component
 export default DitoTypeComponent.register('radio', {
   mixins: [OptionsMixin],
+  components: { DitoOptionList, DitoOptionsEditButtons },
 
   nativeField: true,
   defaultWidth: 'auto'