@ditojs/admin 2.71.1 → 2.73.0

package/src/styles/_button.scss

@@ -2,7 +2,7 @@
 
 .dito-button {
   // .dito-button with order-arrows:
-  .dito-order-arrows {
+  &__order-arrows {
     display: inline-block;
     width: math.round($button-order-arrow-size * $math-sqrt2);
     padding-left: $form-spacing;
@@ -22,7 +22,7 @@
     }
   }
 
-  &.dito-order-asc .dito-order-arrows {
+  &--order-asc &__order-arrows {
     &::before {
       bottom: 0;
     }
@@ -32,7 +32,7 @@
     }
   }
 
-  &.dito-order-desc .dito-order-arrows {
+  &--order-desc &__order-arrows {
     &::before {
       display: none;
     }
@@ -41,80 +41,111 @@
       top: 0;
     }
   }
-}
 
-.dito-button-create:empty::before {
-  content: 'Create';
-}
+  &--create:empty::before {
+    content: 'Create';
+  }
 
-.dito-button-add:empty::before {
-  content: 'Add';
-}
+  &--add:empty::before {
+    content: 'Add';
+  }
 
-.dito-button-delete:empty::before {
-  content: 'Delete';
-}
+  &--delete:empty::before {
+    content: 'Delete';
+  }
 
-.dito-button-remove:empty::before {
-  content: 'Remove';
-}
+  &--remove:empty::before {
+    content: 'Remove';
+  }
 
-.dito-button-edit:empty::before {
-  content: 'Edit';
-}
+  &--edit:empty::before {
+    content: 'Edit';
+  }
 
-.dito-button-clear:empty::before {
-  content: 'Clear';
-}
+  &--clear:empty::before {
+    content: 'Clear';
+  }
 
-.dito-button-save:empty::before {
-  content: 'Save';
-}
+  &--save:empty::before {
+    content: 'Save';
+  }
 
-.dito-button-apply:empty::before {
-  content: 'Apply';
-}
+  &--apply:empty::before {
+    content: 'Apply';
+  }
 
-.dito-button-login:empty::before {
-  content: 'Login';
-}
+  &--login:empty::before {
+    content: 'Login';
+  }
 
-.dito-button-ok:empty::before {
-  content: 'OK';
-}
+  &--ok:empty::before {
+    content: 'OK';
+  }
 
-.dito-button-cancel:empty::before {
-  content: 'Cancel';
-}
+  &--cancel:empty::before {
+    content: 'Cancel';
+  }
 
-.dito-button-close:empty::before {
-  content: 'Close';
-}
+  &--close:empty::before {
+    content: 'Close';
+  }
 
-.dito-button-drag:empty::before {
-  content: 'Drag';
-}
+  &--drag:empty::before {
+    content: 'Drag';
+  }
 
-.dito-button-copy:empty::before {
-  content: 'Copy';
-}
+  &--copy:empty::before {
+    content: 'Copy';
+  }
 
-.dito-button-paste:empty::before {
-  content: 'Paste';
-}
+  &--paste:empty::before {
+    content: 'Paste';
+  }
+
+  &--drag {
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
 
-.dito-button-drag {
-  cursor: grab;
+  &--overlay {
+    $overlay-inset: calc(2 * $border-width);
 
-  &:active {
-    cursor: grabbing;
+    position: absolute;
+    inset: $overlay-inset;
+    left: unset;
+    padding: 0;
+    border: 0;
+    border-radius: $border-radius;
+    cursor: pointer;
+
+    &.dito-button--clear {
+      width: calc(2em - 2 * ($border-width + $overlay-inset));
+      display: none;
+
+      @at-root .dito-component:hover:not(:has(.dito-component)) & {
+        display: block;
+      }
+
+      &::before {
+        @extend %icon-clear;
+
+        color: $color-grey;
+      }
+
+      &:hover::before {
+        color: $color-black;
+      }
+    }
   }
 }
 
 .dito-buttons {
   // TODO: BEM
 
-  &.dito-buttons-large {
+  &--large {
     --button-margin: 3px;
 
     font-size: $header-font-size;
@@ -133,11 +164,11 @@
     }
   }
 
-  &.dito-buttons-main {
+  &--main {
     border-top: $border-style;
   }
 
-  &.dito-buttons-sticky {
+  &--sticky {
     align-self: flex-end;
     position: sticky;
     bottom: 0;
@@ -153,69 +184,39 @@
     }
   }
 
-  &.dito-buttons-round,
-  &.dito-buttons-small {
+  &--round,
+  &--small {
     // For now, nothing for these:
-    // .dito-button-create:empty::before,
-    // .dito-button-add:empty::before
+    // .dito-button--create:empty::before,
+    // .dito-button--add:empty::before
 
-    .dito-button-upload:empty::before {
+    .dito-button--upload:empty::before {
       @extend %icon-upload;
     }
 
-    .dito-button-delete:empty::before,
-    .dito-button-remove:empty::before {
+    .dito-button--delete:empty::before,
+    .dito-button--remove:empty::before {
       @extend %icon-remove;
     }
 
-    .dito-button-edit:empty::before {
+    .dito-button--edit:empty::before {
       @extend %icon-edit;
     }
 
-    .dito-button-clear:empty::before {
+    .dito-button--clear:empty::before {
       @extend %icon-clear;
     }
 
-    .dito-button-drag:empty::before {
+    .dito-button--drag:empty::before {
       @extend %icon-drag;
     }
 
-    .dito-button-copy:empty::before {
+    .dito-button--copy:empty::before {
       @extend %icon-copy;
     }
 
-    .dito-button-paste:empty::before {
+    .dito-button--paste:empty::before {
       @extend %icon-paste;
     }
   }
 }
-
-.dito-button-overlay {
-  position: absolute;
-  inset: $border-width;
-  left: unset;
-  padding: 0;
-  border: 0;
-  border-radius: $border-radius;
-  cursor: pointer;
-
-  &.dito-button-clear {
-    width: 2em;
-    background: $color-white;
-    display: none;
-
-    @at-root .dito-component:hover:not(:has(.dito-component)) & {
-      display: block;
-    }
-
-    &::before {
-      @extend %icon-clear;
-
-      color: $color-grey;
-    }
-
-    &:hover::before {
-      color: $color-black;
-    }
-  }
-}

package/src/styles/_layout.scss

@@ -1,17 +1,19 @@
-.dito-layout-vertical,
-.dito-layout-horizontal {
-  display: flex;
-
-  > * {
-    flex: 0 0 auto;
+.dito-layout {
+  &--vertical,
+  &--horizontal {
     display: flex;
+
+    > * {
+      flex: 0 0 auto;
+      display: flex;
+    }
   }
-}
 
-.dito-layout-horizontal {
-  gap: $form-spacing;
-}
+  &--horizontal {
+    gap: $form-spacing;
+  }
 
-.dito-layout-vertical {
-  flex-direction: column;
+  &--vertical {
+    flex-direction: column;
+  }
 }

package/src/styles/_pulldown.scss

@@ -1,6 +1,8 @@
 @import '../styles/_imports';
 
-ul.dito-pulldown {
+.dito-pulldown {
+  $self: &;
+
   display: none;
   position: absolute;
   top: 0;
@@ -9,28 +11,28 @@ ul.dito-pulldown {
   box-shadow: $shadow-window;
   overflow: hidden;
 
-  &.dito-open {
+  &--open {
     display: block;
   }
 
   li {
     @include user-select(none);
+  }
 
-    a {
-      display: block;
-      padding: $pulldown-padding;
-      line-height: 1;
-      background: $button-color;
+  &__item {
+    display: block;
+    padding: $pulldown-padding;
+    line-height: 1;
+    background: $button-color;
 
-      &.dito-disabled {
-        color: $color-disabled;
-        cursor: default;
-      }
+    &--disabled {
+      color: $color-disabled;
+      cursor: default;
+    }
 
-      &:not(.dito-disabled):hover {
-        background: $color-active;
-        color: $color-white;
-      }
+    &:not(&--disabled):hover {
+      background: $color-active;
+      color: $color-white;
     }
   }
 }

package/src/styles/_table.scss

@@ -48,7 +48,9 @@
   border-bottom-right-radius: $border-radius;
 }
 
-table.dito-table {
+.dito-table {
+  $self: &;
+
   --separator-width: #{$border-width};
 
   width: 100%;
@@ -67,24 +69,24 @@ table.dito-table {
         &:last-child {
           padding-right: $form-spacing;
         }
+      }
+    }
+  }
 
-        &.dito-cell-edit-buttons {
-          width: 1%;
+  &__buttons {
+    width: 1%;
 
-          &,
-          .dito-button {
-            // To align better with `vertical-align: baseline` in normal td:
-            vertical-align: top;
-          }
-        }
-      }
+    &,
+    .dito-button {
+      // To align better with `vertical-align: baseline` in normal td:
+      vertical-align: top;
     }
   }
 
-  &.dito-table-larger-padding {
+  &--larger-padding {
     // Add more spacing to cells in tables except those containing edit buttons,
     // to better align cell texts with edit buttons.
-    td:not(.dito-cell-edit-buttons) {
+    td:not(#{$self}__buttons) {
       $padding: $form-spacing * 1.5;
 
       padding: $padding 0 $padding $padding;
@@ -92,7 +94,7 @@ table.dito-table {
     // Variants of list styles: separators and alternate colors.
   }
 
-  &.dito-table-separators {
+  &--separators {
     > tbody > tr + tr,
     > tbody:not(:empty) + tfoot > tr {
       > td {
@@ -101,16 +103,16 @@ table.dito-table {
     }
   }
 
-  &.dito-table-alternate-colors {
+  &--alternate-colors {
     > tbody > tr:nth-child(odd),
-    &.dito-table-even-count > tfoot > tr {
+    &#{$self}--even-count > tfoot > tr {
       > td {
         background: $color-white;
       }
     }
   }
 
-  &.dito-table-background {
+  &--background {
     > tbody,
     > tfoot {
       > tr > td {
@@ -152,7 +154,7 @@ table.dito-table {
       &:focus {
         z-index: 1;
       }
-      // Add left/rigth borders to the normal tbody cells.
+      // Add left/right borders to the normal tbody cells.
     }
   }
 
@@ -212,11 +214,10 @@ table.dito-table {
     &:last-child {
       @include table-border-bottom-right;
     }
-    // Nested .dito-table:
   }
-}
 
-table.dito-table table.dito-table,
-.dito-form-nested table.dito-table {
-  margin: 0;
+  #{$self} & {
+    // Nested .dito-table
+    margin: 0;
+  }
 }

package/src/types/DitoTypeButton.vue

@@ -1,43 +1,62 @@
 <template lang="pug">
-button.dito-button(
+DitoButton.dito-button(
   :id="dataPath"
   ref="element"
   :type="type"
+  :text="text"
   :title="title"
   :class="buttonClass"
   v-bind="attributes"
 )
-  .dito-button__text(
-    v-if="text"
-  ) {{ text }}
-  .dito-info(
-    v-if="!label && info"
-    :data-info="info"
-  )
+  template(#prefix)
+    DitoAffixes(
+      v-if="prefixes.length > 0"
+      :items="prefixes"
+      :parentContext="context"
+    )
+  template(#suffix)
+    DitoAffixes(
+      v-if="suffixes.length > 0"
+      :items="suffixes"
+      :parentContext="context"
+    )
+    .dito-info(
+      v-if="!label && info"
+      :data-info="info"
+    )
 </template>
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
+import DitoAffixes from '../components/DitoAffixes.vue'
+import { DitoButton } from '@ditojs/ui/src'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { hasResource } from '../utils/resource.js'
-import { labelize } from '@ditojs/utils'
+import { labelize, asArray } from '@ditojs/utils'
 
 export default DitoTypeComponent.register(
   ['button', 'submit'],
   // @vue/component
   {
+    components: { DitoAffixes, DitoButton },
     defaultValue: () => undefined, // Callback to override `defaultValue: null`
     excludeValue: true,
     defaultWidth: 'auto',
     generateLabel: false,
 
+    data() {
+      return {
+        isRunning: false
+      }
+    },
+
     computed: {
       verb() {
         return this.verbs[this.name]
       },
 
       buttonClass() {
-        return this.verb ? `dito-button-${this.verb}` : null
+        return this.verb ? `dito-button--${this.verb}` : null
       },
 
       text: getSchemaAccessor('text', {
@@ -53,6 +72,14 @@ export default DitoTypeComponent.register(
         default: null
       }),
 
+      prefixes() {
+        return asArray(this.schema.prefix)
+      },
+
+      suffixes() {
+        return asArray(this.schema.suffix)
+      },
+
       closeForm: getSchemaAccessor('closeForm', {
         type: Boolean,
         default: false
@@ -71,15 +98,31 @@ export default DitoTypeComponent.register(
       },
 
       async onClick() {
-        const res = await this.emitEvent('click', {
-          parent: this.schemaComponent
-        })
-        // Have buttons that define resources call `this.submit()` by default:
-        if (
-          res === undefined && // Meaning: don't prevent default.
-          hasResource(this.schema)
-        ) {
-          await this.submit()
+        this.isRunning = true
+        try {
+          const res = await this.emitEvent('click', {
+            parent: this.schemaComponent
+          })
+          // Have buttons that define resources call `this.submit()` by default:
+          if (
+            res === undefined && // Meaning: don't prevent default.
+            hasResource(this.schema)
+          ) {
+            await this.submit()
+          }
+        } catch (error) {
+          const res = await this.emitEvent('error', { error })
+          if (res === undefined) {
+            if (error instanceof AggregateError) {
+              for (const err of error.errors) {
+                this.notify({ type: 'error', text: err })
+              }
+            } else {
+              this.notify({ type: 'error', text: error })
+            }
+          }
+        } finally {
+          this.isRunning = false
         }
       }
     }

package/src/types/DitoTypeCheckboxes.vue

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

package/src/types/DitoTypeColor.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-Trigger.dito-color(
+DitoTrigger.dito-color(
   v-model:show="showPopup"
   trigger="focus"
 )
   template(#trigger)
-    .dito-input(:class="{ 'dito-focus': showPopup }")
+    .dito-input(:class="{ 'dito-input--focus': showPopup }")
       input(
         :id="dataPath"
         ref="element"
@@ -13,17 +13,17 @@ Trigger.dito-color(
         size="8"
         v-bind="attributes"
       )
-      .dito-color-preview.dito-inherit-focus(
+      .dito-color__preview(
         v-if="value"
       )
         div(:style="{ background: `#${hexValue || '00000000'}` }")
-      button.dito-button-clear.dito-button-overlay(
+      button.dito-button--clear.dito-button--overlay(
         v-if="showClearButton"
         :disabled="disabled"
         @click.stop="clear"
       )
   template(#popup)
-    SketchPicker.dito-color-picker(
+    SketchPicker.dito-color__picker(
       v-model="colorValue"
       :disableAlpha="!alpha"
       :disableFields="!inputs"
@@ -35,7 +35,7 @@ Trigger.dito-color(
 import tinycolor from 'tinycolor2'
 import { Sketch as SketchPicker } from '@lk77/vue3-color'
 import { isObject, isString } from '@ditojs/utils'
-import { Trigger } from '@ditojs/ui/src'
+import { DitoTrigger } from '@ditojs/ui/src'
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
@@ -48,7 +48,7 @@ SketchPicker.computed.hex = function () {
 
 // @vue/component
 export default DitoTypeComponent.register('color', {
-  components: { Trigger, SketchPicker },
+  components: { DitoTrigger, SketchPicker },
 
   data() {
     return {
@@ -224,11 +224,11 @@ $color-swatch-radius: $border-radius - $border-width;
     }
   }
 
-  .dito-button-clear {
+  .dito-button--clear {
     margin-right: $color-swatch-width;
   }
 
-  .dito-color-picker {
+  &__picker {
     margin: $popup-margin;
     border: $border-style;
     border-radius: $border-radius;
@@ -236,7 +236,7 @@ $color-swatch-radius: $border-radius - $border-width;
     box-shadow: $shadow-window;
   }
 
-  .dito-color-preview {
+  &__preview {
     background: $pattern-transparency;
     border-left: $border-style;
 
@@ -251,5 +251,11 @@ $color-swatch-radius: $border-radius - $border-width;
       border-bottom-right-radius: $color-swatch-radius;
     }
   }
+
+  // Inherit input focus state
+  .dito-input:focus-within &__preview,
+  .dito-input--focus &__preview {
+    border-left-color: $color-active;
+  }
 }
 </style>