@ditojs/admin 3.2.7 → 3.3.0

package/src/types/DitoTypeCheckboxes.vue

@@ -1,51 +1,69 @@
 <template lang="pug">
-ul.dito-checkboxes(
+DitoOptionList.dito-checkboxes(
   :id="componentPath"
   role="group"
   :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
       .dito-checkbox
         input(
-          ref="element"
-          v-model="selectedOptions"
+          :ref="isFirstOption ? 'element' : undefined"
+          v-model="checkedValues"
           type="checkbox"
           :value="getValueForOption(option)"
           v-bind="attributes"
         )
         span {{ 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'
+import { getMultipleValue } from '../utils/schema/data.js'
 
 // @vue/component
 export default DitoTypeComponent.register('checkboxes', {
   mixins: [OptionsMixin],
+  components: { DitoOptionList, DitoOptionsEditButtons },
 
   nativeField: true,
-  defaultValue: [],
+  defaultValue: ({ schema }) => (getMultipleValue(schema) ? [] : null),
   defaultWidth: 'auto',
   defaultMultiple: true,
 
   computed: {
-    // @override
-    multiple() {
-      return true
-    },
-
-    selectedOptions: {
+    // The values of the checked checkboxes, as an array for their `v-model`,
+    // also with `multiple: false`.
+    checkedValues: {
       get() {
-        return (this.selectedValue || []).filter(value => value)
+        const { selectedValue } = this
+        return this.multiple
+          ? (selectedValue || []).filter(value => value != null)
+          : selectedValue != null
+            ? [selectedValue]
+            : []
       },
 
-      set(option) {
-        this.selectedValue = option || []
+      set(values) {
+        // With `multiple: false`, checking a checkbox unchecks the checked
+        // one, as the `v-model` of checkboxes appends checked values.
+        this.selectedValue = this.multiple ? values : (values.at(-1) ?? null)
       }
     }
   }

package/src/types/DitoTypeCode.vue

@@ -4,21 +4,23 @@
   :style="style"
 )
   .dito-code__editor(ref="editor")
-  .dito-resize(
+  DitoResizeHandle(
     v-if="resizable"
-    @mousedown.stop.prevent="onDragResize"
+    :getElement="() => $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'
 import CodeFlask from 'codeflask'
 
 // @vue/component
 export default DitoTypeComponent.register('code', {
-  mixins: [DomMixin],
+  components: { DitoResizeHandle },
 
   data() {
     return {
@@ -61,28 +63,26 @@ export default DitoTypeComponent.register('code', {
       lineNumbers: false
     })
 
-    let changed = false
     let ignoreWatch = false
     let ignoreUpdate = false
 
-    const onChange = () => {
-      if (!this.focused && changed) {
-        changed = false
-        this.onChange()
-      }
-    }
+    // 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 = () => {
       this.onBlur()
-      onChange()
+      changeOnceEdited.emitIfDone()
     }
 
-    this.domOn(this.$refs.editor.querySelector('textarea'), {
-      focus: onFocus,
-      blur: onBlur
-    })
+    // The textarea is owned by the editor, so its handlers go with it:
+    const textarea = this.$refs.editor.querySelector('textarea')
+    textarea.addEventListener('focus', onFocus)
+    textarea.addEventListener('blur', onBlur)
 
     const setCode = code => {
       if (code !== flask.code) {
@@ -95,8 +95,9 @@ export default DitoTypeComponent.register('code', {
       if (value !== this.value) {
         ignoreWatch = true
         this.value = value
-        changed = true
-        onChange()
+        changeOnceEdited.markEdited()
+        this.onInput()
+        changeOnceEdited.emitIfDone()
       }
     }
 
@@ -137,29 +138,6 @@ export default DitoTypeComponent.register('code', {
 
     blurElement() {
       this.$el.querySelector('textarea')?.blur()
-    },
-
-    onDragResize(event) {
-      const getPoint = ({ clientX: x, clientY: y }) => ({ x, y })
-
-      let prevY = getPoint(event).y
-      let height = parseFloat(getComputedStyle(this.$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()
-        }
-      })
     }
   }
 })

package/src/types/DitoTypeColor.vue

@@ -14,22 +14,14 @@ DitoTrigger.dito-color(
       v-bind="attributes"
     )
       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(#append)
@@ -52,12 +44,15 @@ DitoTrigger.dito-color(
 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 TypeMixin from '../mixins/TypeMixin.js'
+import DitoInputAffixes from '../components/DitoInputAffixes.vue'
+import { getInputAffixesProps } from '../utils/affixes.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
+import { createChangeOnceEdited } from '../utils/changeOnceEdited.js'
 
 // @vue/component
 export default DitoTypeComponent.register('color', {
-  components: { DitoTrigger, DitoInput, DitoAffixes, SketchPicker },
+  components: { DitoTrigger, DitoInput, DitoInputAffixes, SketchPicker },
 
   data() {
     return {
@@ -67,6 +62,10 @@ export default DitoTypeComponent.register('color', {
   },
 
   computed: {
+    inputAffixesProps() {
+      return getInputAffixesProps(this)
+    },
+
     canUpdateValue() {
       return !this.focused || this.readonly
     },
@@ -86,7 +85,9 @@ export default DitoTypeComponent.register('color', {
           !value ||
           color.toHex8String() !== tinycolor(value).toHex8String()
         ) {
-          this.value = toTinyColorFormat(color, this.colorFormat)
+          this.setEditedValue(toTinyColorFormat(color, this.colorFormat))
+          // The input emits its own input events, the picker doesn't:
+          this.onInput()
         }
       }
     },
@@ -107,7 +108,7 @@ export default DitoTypeComponent.register('color', {
         if (color.isValid()) {
           const convertedValue = convertColor(value, this.colorFormat)
           if (this.canUpdateValue) {
-            this.value = convertedValue
+            this.setEditedValue(convertedValue)
           } else {
             // Store to change later, once `canUpdateValue` is true again.
             // See `watch` below.
@@ -161,13 +162,60 @@ export default DitoTypeComponent.register('color', {
   },
 
   watch: {
-    value: 'onChange',
-
     canUpdateValue(canUpdateValue) {
       if (canUpdateValue && this.convertedValue !== null) {
-        this.value = this.convertedValue
+        this.setEditedValue(this.convertedValue)
         this.convertedValue = null
       }
+    },
+
+    showPopup(showPopup) {
+      if (!showPopup) {
+        this.changeOnceEdited.emitIfDone()
+      }
+    }
+  },
+
+  created() {
+    // Emits the change of the value once the editing is done, i.e. once
+    // neither the input is focused nor the picker is open.
+    this.changeOnceEdited = createChangeOnceEdited({
+      isEditing: () => this.focused || this.showPopup,
+      emitChange: () => this.onChange()
+    })
+  },
+
+  methods: {
+    // @override
+    getEvents() {
+      // The input's native change events don't tell when the editing is done,
+      // as the picker edits the value too, see `changeOnceEdited`. They
+      // are handled to keep them from emitting the schema's change events.
+      const { onFocus, onBlur, onInput } = this
+      return { onFocus, onBlur, onInput, onChange: () => {} }
+    },
+
+    // @override
+    onBlur() {
+      TypeMixin.methods.onBlur.call(this)
+      this.changeOnceEdited.emitIfDone()
+    },
+
+    // @override
+    clear() {
+      // Clearing replaces the edits that are pending, see `hexValue` and
+      // `changeOnceEdited`, and emits its own change event.
+      this.convertedValue = null
+      this.changeOnceEdited.reset()
+      TypeMixin.methods.clear.call(this)
+    },
+
+    // Sets a value that the user edited, through the input or the picker.
+    // Values changed by code don't emit change events.
+    setEditedValue(value) {
+      this.value = value
+      this.changeOnceEdited.markEdited()
+      this.changeOnceEdited.emitIfDone()
     }
   }
 })

package/src/types/DitoTypeDate.vue

@@ -10,24 +10,16 @@
     v-bind="attributes"
   )
     template(#prefix)
-      DitoAffixes(
-        :items="schema.prefix"
+      DitoInputAffixes(
         position="prefix"
-        mode="input"
+        v-bind="inputAffixesProps.prefix"
         absolute
-        :disabled="disabled"
-        :parentContext="context"
       )
     template(#suffix)
-      DitoAffixes(
-        :items="schema.suffix"
+      DitoInputAffixes(
         position="suffix"
-        mode="input"
+        v-bind="inputAffixesProps.suffix"
         absolute
-        :clearable="showClearButton"
-        :disabled="disabled"
-        :inlineInfo="inlineInfo"
-        :parentContext="context"
         @clear="clear"
       )
 </template>
@@ -35,7 +27,8 @@
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import DitoAffixes from '../components/DitoAffixes.vue'
+import DitoInputAffixes from '../components/DitoInputAffixes.vue'
+import { getInputAffixesProps } from '../utils/affixes.js'
 import {
   DitoDatePicker,
   DitoTimePicker,
@@ -52,7 +45,7 @@ export default DitoTypeComponent.register(
   ['date', 'datetime', 'time'],
   // @vue/component
   {
-    components: { DitoAffixes },
+    components: { DitoInputAffixes },
     // TODO: This is only here so we get placeholder added. Come up with a
     // better way to support attributes per component (a list of actually
     // supported attributes)
@@ -60,6 +53,10 @@ export default DitoTypeComponent.register(
     textField: true,
 
     computed: {
+      inputAffixesProps() {
+        return getInputAffixesProps(this)
+      },
+
       dateValue: {
         get() {
           const { value } = this

package/src/types/DitoTypeList.vue

@@ -73,14 +73,13 @@
           v-else
         )
           td
-            DitoSchemaInlined(
-              v-if="isInlined"
-              :label="getItemLabel(schema, item, { index, asObject: true })"
-              :schema="getItemFormSchema(schema, item, context)"
+            DitoSourceItem(
+              :schema="schema"
               :dataPath="getDataPath(index)"
               :data="item"
+              :index="index"
               :meta="nestedMeta"
-              :store="getItemStore(schema, item, index)"
+              :store="getItemStore(item)"
               :disabled="disabled || isLoading"
               :collapsed="collapsed"
               :collapsible="collapsible"
@@ -91,75 +90,50 @@
               :createPath="createPath"
               :insertIndex="creatable && draggable ? index : null"
               @delete="deleteItem(item, index)"
-            )
-            component(
-              v-else-if="schema.component"
-              :is="schema.component"
-              :dataPath="getDataPath(index)"
-              :data="item"
-              :nested="false"
-            )
-            span(
-              v-else-if="render"
-              v-html="render(getContext(item, index))"
-            )
-            span(
-              v-else
-              v-html="getItemLabel(schema, item, { index })"
+              @move="delta => moveItem(item, delta)"
             )
         td.dito-table__buttons(
           v-if="hasCellEditButtons"
         )
           DitoEditButtons(
             nested
-            :schema="getItemFormSchema(schema, item, context)"
+            :schema="schema"
+            :formSchema="getItemFormSchema(schema, item, context)"
             :dataPath="getDataPath(index)"
             :data="item"
             :meta="nestedMeta"
-            :store="getItemStore(schema, item, index)"
+            :store="getItemStore(item)"
             :disabled="disabled || isLoading"
             :deletable="deletable"
             :draggable="draggable"
             :editable="editable"
             :editPath="getEditPath(item, index)"
             @delete="deleteItem(item, index)"
+            @move="delta => moveItem(item, delta)"
           )
-    //- Render create buttons inside table when not in a single component view:
+    //- Render the list buttons inside the table when not in a single
+    //- component view, with the item that holds the list as their data:
     tfoot(
       v-if="hasListButtons && !single"
     )
       tr
         td.dito-table__buttons(:colspan="numColumns")
           DitoEditButtons(
-            :buttons="buttonSchemas"
-            :schema="schema"
-            :dataPath="dataPath"
+            v-bind="listButtonsAttributes"
             :data="data"
-            :meta="meta"
-            :store="store"
-            :nested="nested"
-            :disabled="disabled || isLoading"
-            :creatable="creatable"
-            :createPath="createPath"
           )
-  //- Render create buttons outside table when in a single component view:
+  //- ...and outside, sticky to the bottom, when in a single component view,
+  //- with the list data as their data, e.g. for buttons that store its order:
   DitoEditButtons.dito-buttons--large.dito-buttons--main.dito-buttons--sticky(
     v-if="hasListButtons && single"
-    :buttons="buttonSchemas"
-    :schema="schema"
-    :dataPath="dataPath"
+    v-bind="listButtonsAttributes"
     :data="listData"
-    :meta="meta"
-    :store="store"
-    :disabled="disabled || isLoading"
-    :creatable="creatable"
-    :createPath="createPath"
   )
 </template>
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
-import DitoContext from '../DitoContext.js'
+import DitoSourceItem from '../components/DitoSourceItem.vue'
 import SourceMixin from '../mixins/SourceMixin.js'
 import SortableMixin from '../mixins/SortableMixin.js'
 import {
@@ -167,14 +141,16 @@ import {
   resolveSchemaComponents
 } from '../utils/schema/setup.js'
 import { getViewEditPath } from '../utils/schema/lookup.js'
-import { createFiltersPanel } from '../utils/filter.js'
+import { createFiltersPanel, getFiltersDataErrors } from '../utils/filter.js'
 import { appendDataPath } from '../utils/data.js'
-import { pickBy, equals, hyphenate } from '@ditojs/utils'
+import { getListWithMovedItem } from '../utils/list.js'
+import { hyphenate } from '@ditojs/utils'
 import { computed } from 'vue'
 
 // @vue/component
 export default DitoTypeComponent.register('list', {
   mixins: [SourceMixin, SortableMixin],
+  components: { DitoSourceItem },
 
   getSourceType(type) {
     // No need for transformation here. See TypeTreeList for details.
@@ -190,19 +166,17 @@ export default DitoTypeComponent.register('list', {
         api,
         filters,
         dataPath,
-        // Pass a computed value to get / set the query, see getFiltersPanel()
+        // Pass a computed value to get / set the query, see
+        // `createFiltersPanel()`.
         computed({
           get() {
             return component.query
           },
 
-          set(query) {
-            // Filter out undefined values for comparing with equals()
-            const filter = obj => pickBy(obj, value => value !== undefined)
-            if (!equals(filter(query), filter(component.query))) {
-              component.query = query
-              component.loadData(false)
-            }
+          // The panel clears the page, but it's only reset when the filters
+          // change the query, as the filtered list then has other pages.
+          set({ page, ...query }) {
+            component.listQuery.update(query, { resetPage: true })
           }
         })
       )
@@ -218,6 +192,20 @@ export default DitoTypeComponent.register('list', {
       return !!(this.buttonSchemas || this.creatable)
     },
 
+    listButtonsAttributes() {
+      return {
+        buttons: this.buttonSchemas,
+        schema: this.schema,
+        dataPath: this.dataPath,
+        meta: this.meta,
+        store: this.store,
+        nested: this.nested,
+        disabled: this.disabled || this.isLoading,
+        creatable: this.creatable,
+        createPath: this.createPath
+      }
+    },
+
     hasEditButtons() {
       const { listData } = this
       return (
@@ -265,24 +253,24 @@ export default DitoTypeComponent.register('list', {
       return null
     },
 
-    getCellClass(column) {
-      return `dito-cell--${hyphenate(column.name)}`
+    // Moves the item by `delta` positions, see `DitoDragHandle`.
+    moveItem(item, delta) {
+      const listData = getListWithMovedItem(this.listData, item, delta)
+      if (listData) {
+        this.listData = listData
+        this.onChange()
+      }
     },
 
-    getContext(item, index) {
-      return new DitoContext(this, {
-        data: item,
-        value: item,
-        index,
-        dataPath: this.getDataPath(index)
-      })
+    getCellClass(column) {
+      return `dito-cell--${hyphenate(column.name)}`
     },
 
     onFilterErrors(errors) {
       const filtersDataPath = appendDataPath(this.dataPath, '$filters')
       const panel = this.schemaComponent.getPanelByDataPath(filtersDataPath)
       if (panel) {
-        panel.showValidationErrors(errors, true)
+        panel.showValidationErrors(getFiltersDataErrors(errors), true)
         return true
       }
     }