@ditojs/admin 2.71.1 → 2.73.0

package/src/types/DitoTypeDate.vue

@@ -9,8 +9,17 @@
     :format="formats"
     v-bind="attributes"
   )
-    template(#after)
-      button.dito-button-clear.dito-button-overlay(
+    template(#prefix)
+      DitoAffixes(
+        :items="schema.prefix"
+        :parentContext="context"
+      )
+    template(#suffix)
+      DitoAffixes(
+        :items="schema.suffix"
+        :parentContext="context"
+      )
+      button.dito-button--clear.dito-button--overlay(
         v-if="showClearButton"
         :disabled="disabled"
         @click.stop="clear"
@@ -21,14 +30,19 @@
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { DatePicker, TimePicker, DateTimePicker } from '@ditojs/ui/src'
+import DitoAffixes from '../components/DitoAffixes.vue'
+import {
+  DitoDatePicker,
+  DitoTimePicker,
+  DitoDateTimePicker
+} from '@ditojs/ui/src'
 import { isDate, assignDeeply } from '@ditojs/utils'
 
 export default DitoTypeComponent.register(
   ['date', 'datetime', 'time'],
   // @vue/component
   {
-    components: { DatePicker, TimePicker, DateTimePicker },
+    components: { DitoAffixes },
     // 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)
@@ -65,9 +79,9 @@ export default DitoTypeComponent.register(
     methods: {
       getComponent(type) {
         return {
-          date: 'date-picker',
-          time: 'time-picker',
-          datetime: 'date-time-picker'
+          date: DitoDatePicker,
+          time: DitoTimePicker,
+          datetime: DitoDateTimePicker
         }[type]
       }
     },

package/src/types/DitoTypeList.vue

@@ -24,10 +24,10 @@
     )
   table.dito-table(
     :class=`{
-      'dito-table-separators': isInlined,
-      'dito-table-larger-padding': hasEditButtons && !isInlined,
-      'dito-table-alternate-colors': !isInlined,
-      'dito-table-even-count': hasEvenCount
+      'dito-table--separators': isInlined,
+      'dito-table--larger-padding': hasEditButtons && !isInlined,
+      'dito-table--alternate-colors': !isInlined,
+      'dito-table--even-count': hasEvenCount
     }`
   )
     DitoTableHead(
@@ -103,7 +103,7 @@
               v-else
               v-html="getItemLabel(schema, item, { index })"
             )
-        td.dito-cell-edit-buttons(
+        td.dito-table__buttons(
           v-if="hasCellEditButtons"
         )
           DitoEditButtons(
@@ -124,7 +124,7 @@
       v-if="hasListButtons && !single"
     )
       tr
-        td.dito-cell-edit-buttons(:colspan="numColumns")
+        td.dito-table__buttons(:colspan="numColumns")
           DitoEditButtons(
             :buttons="buttonSchemas"
             :schema="schema"
@@ -138,7 +138,7 @@
             :createPath="path"
           )
   //- Render create buttons outside table when in a single component view:
-  DitoEditButtons.dito-buttons-large.dito-buttons-main.dito-buttons-sticky(
+  DitoEditButtons.dito-buttons--large.dito-buttons--main.dito-buttons--sticky(
     v-if="hasListButtons && single"
     :buttons="buttonSchemas"
     :schema="schema"
@@ -257,7 +257,7 @@ export default DitoTypeComponent.register('list', {
     },
 
     getCellClass(column) {
-      return `dito-cell-${hyphenate(column.name)}`
+      return `dito-cell--${hyphenate(column.name)}`
     },
 
     getContext(item, index) {
@@ -333,7 +333,7 @@ export default DitoTypeComponent.register('list', {
     }
   }
 
-  &.dito-single {
+  &.dito-component--single {
     // So that list buttons can be sticky to the bottom:
     display: grid;
     grid-template-rows: min-content;

package/src/types/DitoTypeMarkup.vue

@@ -1,18 +1,18 @@
 <template lang="pug">
 .dito-markup(:id="dataPath")
-  .dito-buttons.dito-buttons-toolbar(
+  .dito-buttons.dito-buttons--toolbar(
     v-if="groupedButtons.length > 0"
   )
-    .dito-button-group(
+    .dito-buttons__group(
       v-for="buttons in groupedButtons"
     )
       button.dito-button(
         v-for="{ name, icon, isActive, onClick } in buttons"
         :key="name"
-        :class="{ 'dito-active': isActive }"
+        :class="{ 'dito-button--active': isActive }"
         @click="onClick"
       )
-        Icon(:name="icon")
+        DitoIcon(:name="icon")
   EditorContent.dito-markup-editor(
     ref="editor"
     :editor="editor"
@@ -66,7 +66,7 @@ import { Footnotes, FootnoteReference, Footnote } from 'tiptap-footnotes'
 // Tools:
 import { History } from '@tiptap/extension-history'
 
-import { Icon } from '@ditojs/ui/src'
+import { DitoIcon } from '@ditojs/ui/src'
 import { isArray, isObject, hyphenate, debounce, camelize } from '@ditojs/utils'
 
 // @vue/component
@@ -74,7 +74,7 @@ export default DitoTypeComponent.register('markup', {
   mixins: [DomMixin],
   components: {
     EditorContent,
-    Icon
+    DitoIcon
   },
 
   data() {
@@ -298,6 +298,7 @@ export default DitoTypeComponent.register('markup', {
     async onClickLink(editor) {
       const attributes = await this.rootComponent.showDialog({
         components: {
+          DitoIcon,
           href: {
             type: 'url',
             label: 'Link',
@@ -552,7 +553,7 @@ const LinkWithTitle = Link.extend({
     padding-right: $input-padding-hor;
   }
 
-  .dito-buttons-toolbar {
+  .dito-buttons--toolbar {
     margin: 0;
   }
 

package/src/types/DitoTypeMultiselect.vue

@@ -31,7 +31,7 @@
       @tag="onAddTag"
       @search-change="onSearchChange"
     )
-    button.dito-button-clear.dito-button-overlay(
+    button.dito-button--clear.dito-button--overlay(
       v-if="showClearButton"
       type="button"
       :disabled="disabled"
@@ -267,7 +267,7 @@ $tag-line-height: 1em;
       // So tags can float on multiple lines and have proper margins:
       padding-bottom: $tag-margin;
 
-      .dito-has-errors & {
+      .dito-container--has-errors & {
         border-color: $color-error;
       }
     }

package/src/types/DitoTypeNumber.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-InputField.dito-number(
+DitoInput.dito-number(
   :id="dataPath"
   ref="element"
   v-model="inputValue"
@@ -9,8 +9,17 @@ InputField.dito-number(
   :max="max"
   :step="stepValue"
 )
-  template(#after)
-    button.dito-button-clear.dito-button-overlay(
+  template(#prefix)
+    DitoAffixes(
+      :items="schema.prefix"
+      :parentContext="context"
+    )
+  template(#suffix)
+    DitoAffixes(
+      :items="schema.suffix"
+      :parentContext="context"
+    )
+    button.dito-button--clear.dito-button--overlay(
       v-if="showClearButton"
       :disabled="disabled"
       @click.stop="clear"
@@ -20,14 +29,15 @@ InputField.dito-number(
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import NumberMixin from '../mixins/NumberMixin.js'
-import { InputField } from '@ditojs/ui/src'
+import DitoAffixes from '../components/DitoAffixes.vue'
+import { DitoInput } from '@ditojs/ui/src'
 
 export default DitoTypeComponent.register(
   ['number', 'integer'],
   // @vue/component
   {
     mixins: [NumberMixin],
-    components: { InputField },
+    components: { DitoInput, DitoAffixes },
     nativeField: true,
     textField: true,
 

package/src/types/DitoTypeRadio.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 ul.dito-radio-buttons(
   :id="dataPath"
-  :class="`dito-layout-${schema.layout || 'vertical'}`"
+  :class="`dito-layout--${schema.layout || 'vertical'}`"
 )
   li(
     v-for="option in options"

package/src/types/DitoTypeSelect.vue

@@ -32,7 +32,7 @@
         v-else-if="selectedOption"
       )
         option(:value="selectedValue") {{ getLabelForOption(selectedOption) }}
-    button.dito-button-clear.dito-button-overlay(
+    button.dito-button--clear.dito-button--overlay(
       v-if="showClearButton"
       :disabled="disabled"
       @click="clear"
@@ -96,6 +96,10 @@ export default DitoTypeComponent.register('select', {
       position: absolute;
       bottom: $select-arrow-bottom;
       right: $select-arrow-right;
+
+      .dito-container--disabled & {
+        border-color: $color-disabled;
+      }
     }
   }
 
@@ -103,15 +107,11 @@ export default DitoTypeComponent.register('select', {
     margin-left: $form-spacing-half;
   }
 
-  // Handle .dito-width-fill separately due to required nesting of select:
-  &.dito-width-fill {
+  // Handle width fill separately due to required nesting of select:
+  &.dito-component--fill {
     select {
       width: 100%;
     }
   }
-
-  &.dito-disabled::after {
-    border-color: $border-color;
-  }
 }
 </style>

package/src/types/DitoTypeSlider.vue

@@ -10,7 +10,7 @@
     :max="max"
     :step="stepValue"
   )
-  InputField.dito-number(
+  DitoInput.dito-number(
     v-if="input"
     v-model="inputValue"
     type="number"
@@ -25,12 +25,12 @@
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import NumberMixin from '../mixins/NumberMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { InputField } from '@ditojs/ui/src'
+import { DitoInput } from '@ditojs/ui/src'
 
 // @vue/component
 export default DitoTypeComponent.register('slider', {
   mixins: [NumberMixin],
-  components: { InputField },
+  components: { DitoInput },
   nativeField: true,
 
   computed: {

package/src/types/DitoTypeSwitch.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-SwitchButton.dito-switch(
+DitoSwitch.dito-switch(
   :id="dataPath"
   ref="element"
   v-model="value"
@@ -10,7 +10,7 @@ SwitchButton.dito-switch(
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
-import { SwitchButton } from '@ditojs/ui/src'
+import { DitoSwitch } from '@ditojs/ui/src'
 
 // @vue/component
 export default DitoTypeComponent.register('switch', {
@@ -18,7 +18,7 @@ export default DitoTypeComponent.register('switch', {
   defaultWidth: 'auto',
 
   components: {
-    SwitchButton
+    DitoSwitch
   },
 
   computed: {

package/src/types/DitoTypeText.vue

@@ -1,13 +1,22 @@
 <template lang="pug">
-InputField.dito-text(
+DitoInput.dito-text(
   :id="dataPath"
   ref="element"
   v-model="inputValue"
   :type="inputType"
   v-bind="attributes"
 )
-  template(#after)
-    button.dito-button-clear.dito-button-overlay(
+  template(#prefix)
+    DitoAffixes(
+      :items="schema.prefix"
+      :parentContext="context"
+    )
+  template(#suffix)
+    DitoAffixes(
+      :items="schema.suffix"
+      :parentContext="context"
+    )
+    button.dito-button--clear.dito-button--overlay(
       v-if="showClearButton"
       :disabled="disabled"
       @click.stop="clear"
@@ -17,7 +26,8 @@ InputField.dito-text(
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import TextMixin from '../mixins/TextMixin'
-import { InputField } from '@ditojs/ui/src'
+import DitoAffixes from '../components/DitoAffixes.vue'
+import { DitoInput } from '@ditojs/ui/src'
 
 const maskedPassword = '****************'
 
@@ -35,7 +45,7 @@ export default DitoTypeComponent.register(
   // @vue/component
   {
     mixins: [TextMixin],
-    components: { InputField },
+    components: { DitoInput, DitoAffixes },
     nativeField: true,
     textField: true,
     ignoreMissingValue: ({ schema }) => schema.type === 'password',

package/src/types/DitoTypeTextarea.vue

@@ -5,7 +5,7 @@ textarea.dito-textarea.dito-input(
   v-model="value"
   v-bind="attributes"
   :rows="lines"
-  :class="{ 'dito-resizable': resizable }"
+  :class="{ 'dito-textarea--resizable': resizable }"
 )
 </template>
 
@@ -41,7 +41,7 @@ export default DitoTypeComponent.register('textarea', {
   resize: none;
   min-height: calc(1em * var(--line-height) + #{2 * $input-padding-ver});
 
-  &.dito-resizable {
+  &--resizable {
     resize: vertical;
   }
 }

package/src/types/DitoTypeUpload.vue

@@ -20,7 +20,7 @@
     @input-filter="onInputFilter"
     @input-file="onInputFile"
   )
-  table.dito-table.dito-table-separators.dito-table-background
+  table.dito-table.dito-table--separators.dito-table--background
     //- Styling comes from `DitoTableHead`
     thead.dito-table-head
       tr
@@ -92,9 +92,9 @@
               v-else
             )
               | Stored
-          td.dito-cell-edit-buttons
-            .dito-buttons.dito-buttons-round
-              button.dito-button.dito-button-upload(
+          td.dito-table__buttons
+            .dito-buttons.dito-buttons--round
+              button.dito-button.dito-button--upload(
                 v-if="!multiple"
                 :title="uploadTitle"
                 @click="onClickUpload"
@@ -121,13 +121,13 @@
               :value="uploadProgress"
               max="100"
             )
-            .dito-buttons.dito-buttons-round
+            .dito-buttons.dito-buttons--round
               button.dito-button(
                 v-if="isUploadActive"
                 type="button"
                 @click.prevent="upload.active = false"
               ) Cancel
-              button.dito-button.dito-button-upload(
+              button.dito-button.dito-button--upload(
                 v-if="multiple || !hasFiles"
                 :title="uploadTitle"
                 @click="onClickUpload"
@@ -473,7 +473,7 @@ function asFiles(value) {
 .dito-upload {
   .dito-table {
     tr,
-    .dito-cell-edit-buttons {
+    .dito-table__buttons {
       vertical-align: middle;
     }
   }

package/src/utils/schema.js

@@ -332,7 +332,10 @@ export async function processView(component, api, schema, name, fullPath = '') {
 }
 
 export function processSchemaDefaults(api, schema) {
-  let defaults = api.defaults[schema.type]
+  let defaults = (
+    api.defaults[schema.type] ||
+    api.defaults[camelize(schema.type)]
+  )
   if (defaults) {
     if (isFunction(defaults)) {
       defaults = defaults(schema)

package/src/components/DitoElement.vue

@@ -1,68 +0,0 @@
-<template lang="pug">
-component(
-  v-if="options?.text != null"
-  :is="tagName"
-  :class="classes"
-  :style="styles"
-) {{ options.text }}
-component(
-  v-else-if="options?.html != null"
-  :is="tagName"
-  :class="classes"
-  :style="styles"
-  v-html="options.html"
-)
-</template>
-
-<script>
-import DitoComponent from '../DitoComponent.js'
-import { isObject, isString, asArray } from '@ditojs/utils'
-
-// @vue/component
-export default DitoComponent.component('DitoElement', {
-  props: {
-    as: { type: String, default: 'span' },
-    content: { type: [String, Object], default: null }
-  },
-
-  computed: {
-    options() {
-      const { content } = this
-      return content != null
-        ? isObject(content)
-          ? content
-          : { text: content }
-        : null
-    },
-
-    tagName() {
-      return this.options.as || this.as
-    },
-
-    classes() {
-      return {
-        ...asObject(this.$attrs.class),
-        ...asObject(this.options.class)
-      }
-    },
-
-    styles() {
-      return {
-        ...asObject(this.$attrs.style),
-        ...asObject(this.options.style)
-      }
-    }
-  }
-})
-
-function asObject(value) {
-  return asArray(value).reduce((object, entry) => {
-    if (isString(entry)) {
-      object[entry] = true
-    } else if (isObject(entry)) {
-      Object.assign(object, entry)
-    }
-    return object
-  }, {})
-}
-</script>