@ditojs/admin 2.0.5 → 2.1.0

package/src/mixins/TypeMixin.js

@@ -238,7 +238,7 @@ export default {
           // If the element is disabled, `focus()` will likely not have the
           // desired effect. Use `scrollIntoView()` if available:
           if (this.disabled) {
-            (element.$el || element).scrollIntoView?.()
+            ;(element.$el || element).scrollIntoView?.()
           }
         })
       }
@@ -276,9 +276,10 @@ export default {
     onChange() {
       this.markDirty()
       this.emitEvent('change', {
-        context: this.parsedValue !== undefined
-          ? { value: this.parsedValue }
-          : null,
+        context:
+          this.parsedValue !== undefined
+            ? { value: this.parsedValue }
+            : null,
         // Pass `schemaComponent` as parent, so change events can propagate up.
         parent: this.schemaComponent
       })

package/src/mixins/ValidationMixin.js

@@ -3,6 +3,8 @@ import * as validations from '../validations/index.js'
 
 // @vue/component
 export default {
+  emits: ['errors'],
+
   data() {
     return {
       isTouched: false,
@@ -30,6 +32,7 @@ export default {
       const { value } = this
       // console.log('validate', this.dataPath, value, this.validations)
       for (const [rule, setting] of Object.entries(this.validations)) {
+        // eslint-disable-next-line import/namespace
         const validator = validations[rule]
         if (validator && (validator.nullish || value != null)) {
           const { validate, message } = validator

package/src/styles/_base.scss

@@ -0,0 +1,17 @@
+@include reset;
+
+:root {
+  --font-size: #{$font-size};
+  --line-height: #{$line-height};
+  --color-text: #{$color-text};
+
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  color: var(--color-text);
+  background: $content-color-background;
+  font-family: $font-family-sans;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+  max-width: 100%;
+}

package/src/styles/_button.scss

@@ -0,0 +1,212 @@
+@use 'sass:math';
+
+.dito-button {
+  // .dito-button with order-arrows:
+  .dito-order-arrows {
+    display: inline-block;
+    width: math.round($button-order-arrow-size * $math-sqrt2);
+    padding-left: $form-spacing;
+
+    $arrow-offset: calc($button-order-arrow-size / 2 + $border-width);
+
+    &::before {
+      @include arrow($button-order-arrow-size, 'up');
+
+      bottom: $arrow-offset;
+    }
+
+    &::after {
+      @include arrow($button-order-arrow-size, 'down');
+
+      top: $arrow-offset;
+    }
+  }
+
+  &.dito-order-asc .dito-order-arrows {
+    &::before {
+      bottom: 0;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  &.dito-order-desc .dito-order-arrows {
+    &::before {
+      display: none;
+    }
+
+    &::after {
+      top: 0;
+    }
+  }
+}
+
+.dito-button-create:empty::before {
+  content: 'Create';
+}
+
+.dito-button-add:empty::before {
+  content: 'Add';
+}
+
+.dito-button-delete:empty::before {
+  content: 'Delete';
+}
+
+.dito-button-remove:empty::before {
+  content: 'Remove';
+}
+
+.dito-button-edit:empty::before {
+  content: 'Edit';
+}
+
+.dito-button-save:empty::before {
+  content: 'Save';
+}
+
+.dito-button-apply:empty::before {
+  content: 'Apply';
+}
+
+.dito-button-login:empty::before {
+  content: 'Login';
+}
+
+.dito-button-ok:empty::before {
+  content: 'OK';
+}
+
+.dito-button-cancel:empty::before {
+  content: 'Cancel';
+}
+
+.dito-button-close:empty::before {
+  content: 'Close';
+}
+
+.dito-button-drag:empty::before {
+  content: 'Drag';
+}
+
+.dito-button-copy:empty::before {
+  content: 'Copy';
+}
+
+.dito-button-paste:empty::before {
+  content: 'Paste';
+}
+
+.dito-button-drag {
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.dito-buttons {
+  &.dito-buttons-large {
+    --button-margin: 3px;
+
+    font-size: $menu-font-size;
+    flex-flow: row wrap;
+    justify-content: center;
+
+    .dito-container {
+      // Do not specify this on .dito-buttons directly as it would break borders
+      margin-top: $content-padding;
+    }
+
+    .dito-button {
+      border-radius: 2em;
+      padding: $button-round-padding;
+    }
+  }
+
+  &.dito-buttons-main {
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+    align-self: flex-end;
+    z-index: 500;
+    padding-bottom: $content-padding;
+    margin-bottom: -$content-padding;
+    margin-top: 2 * $content-padding;
+    box-shadow: 0 (-$content-padding) $content-padding (-$content-padding)
+      $color-shadow;
+    background: $content-color-background;
+  }
+
+  &.dito-buttons-round,
+  &.dito-buttons-small {
+    // For now, nothing for these:
+    // .dito-button-create:empty::before,
+    // .dito-button-add:empty::before
+    // Special .dito-button-add-upload without :empty:
+    .dito-button-add-upload::before {
+      @extend %icon-add;
+    }
+
+    .dito-button-delete:empty::before,
+    .dito-button-remove:empty::before {
+      @extend %icon-remove;
+    }
+
+    .dito-button-edit:empty::before {
+      @extend %icon-edit;
+    }
+
+    .dito-button-drag:empty::before {
+      @extend %icon-drag;
+    }
+
+    .dito-button-copy:empty::before {
+      @extend %icon-copy;
+    }
+
+    .dito-button-paste:empty::before {
+      @extend %icon-paste;
+    }
+  }
+}
+
+.dito-button-overlay {
+  position: absolute;
+  right: $border-width;
+  top: $border-width;
+  bottom: $border-width;
+  border: 0;
+  border-radius: $border-radius;
+  cursor: pointer;
+
+  &.dito-button-clear {
+    width: $input-height;
+    z-index: 1;
+    background: $color-white;
+    display: none;
+
+    $button-clear: &;
+
+    @at-root .dito-component:hover {
+      // Support two levels of nesting inside .dito-component, used by TypeColor
+      & > #{$button-clear},
+      & > * > #{$button-clear},
+      & > * > * > #{$button-clear} {
+        display: block;
+      }
+    }
+
+    &::before {
+      @extend %icon-clear;
+
+      color: $color-grey;
+    }
+
+    &:hover::before {
+      color: $color-black;
+    }
+  }
+}

package/src/styles/_imports.scss

@@ -0,0 +1,2 @@
+@import '@ditojs/ui/imports.scss';
+@import '_settings';

package/src/styles/_layout.scss

@@ -0,0 +1,22 @@
+// TODO: Convert to flexbox
+
+.dito-layout-vertical {
+  display: table;
+
+  > * {
+    display: table-row;
+  }
+}
+
+.dito-layout-horizontal {
+  display: table-row;
+
+  > * {
+    display: table-cell;
+
+    /* stylelint-disable-next-line selector-max-universal */
+    & + * {
+      padding-left: $form-spacing;
+    }
+  }
+}

package/src/styles/_notifications.scss

@@ -0,0 +1,54 @@
+@use 'sass:color';
+
+@mixin type($background) {
+  background: color.adjust($background, $lightness: 5%);
+  color: $color-white;
+  border-left: 12px solid color.adjust($background, $lightness: -10%);
+}
+
+.dito-notifications {
+  .dito-notification {
+    padding: 8px;
+    margin: 12px 12px 0;
+    font-size: inherit;
+    color: $color-white;
+    border-radius: $border-radius;
+    box-shadow: $shadow-window;
+
+    .notification-title {
+      font-weight: bold;
+      padding-bottom: 8px;
+    }
+
+    .notification-content {
+      p {
+        margin: 0;
+
+        & + p {
+          margin-top: 8px;
+        }
+      }
+    }
+
+    &,
+    &.info {
+      @include type($color-active);
+    }
+
+    &.success {
+      @include type($color-success);
+    }
+
+    &.warning {
+      @include type($color-warning);
+    }
+
+    &.error {
+      @include type($color-error);
+    }
+  }
+
+  .vue-notification-wrapper {
+    overflow: visible;
+  }
+}

package/src/styles/_pulldown.scss

@@ -0,0 +1,39 @@
+ul.dito-pulldown {
+  display: none;
+  position: absolute;
+  top: 0;
+  z-index: 1000;
+  border-radius: $pulldown-radius;
+  box-shadow: $shadow-window;
+
+  &.dito-open {
+    display: block;
+  }
+
+  li {
+    @include user-select(none);
+
+    a {
+      display: block;
+      text-align: center;
+      padding: $pulldown-padding;
+      line-height: 1;
+      background: $button-color;
+
+      &:hover {
+        background: $color-active;
+        color: $color-white;
+      }
+    }
+
+    &:first-child a {
+      border-top-left-radius: $pulldown-radius;
+      border-top-right-radius: $pulldown-radius;
+    }
+
+    &:last-child a {
+      border-bottom-left-radius: $pulldown-radius;
+      border-bottom-right-radius: $pulldown-radius;
+    }
+  }
+}

package/src/styles/_scroll.scss

@@ -0,0 +1,15 @@
+.dito-scroll {
+  flex: 1;
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.dito-scroll-parent {
+  // To make vertical scrolling in .dito-scroll work:
+  flex: 1;
+  display: flex;
+  position: relative;
+  flex-flow: column;
+  overflow: hidden;
+}

package/src/styles/_settings.scss

@@ -0,0 +1,68 @@
+// Typography
+$font-family-sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto',
+  'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  'Helvetica', 'Arial', sans-serif;
+$font-family-mono: 'Menlo', 'Consolas', 'Monaco', 'Vera Mono', 'Andale Mono',
+  'Ubuntu Mono', monospace;
+$font-size: 13px;
+$font-size-small: 11px;
+// Adjust line-height so that it fulfils this equation, which is used
+// to reach equal height for icon-buttons (`height: 2em`), table headers & co.:
+// `(2 * $font-size - 2 * ($border-width + $input-padding-ver)) / $font-size`
+// TODO: Ideally, this would be handled in @ditojs/ui, but it would have to be
+// done in a way independent of `$font-size`. The right approach would probably
+// be to use `$input-height` and vertical centering instead for all inputs that
+// have a height of one line?
+// NOTE: Due to higher precision in dart-sass, this needs to be rounded to 5
+// fractional digits, otherwise CSS creates the wrong resulting line-height with
+// 1 missing pixel.
+$line-height: rounded(
+  calc(
+    $input-height-factor - 2 * ($border-width + $input-padding-ver) / $font-size
+  ),
+  5
+);
+
+// Button
+$button-order-arrow-size: 4px;
+
+// Pulldown
+$pulldown-radius: 0.5em;
+$pulldown-padding-ver: 0.5em;
+$pulldown-padding-hor: 1em;
+$pulldown-padding: $pulldown-padding-ver $pulldown-padding-hor;
+
+// Content
+$content-width: 900px;
+$content-sidebar-width: 360px;
+$content-padding: 16px;
+$content-padding-half: calc($content-padding / 2);
+$content-color-background: $color-lightest;
+
+// Form
+$form-spacing: $input-padding-hor;
+$form-spacing-half: calc($form-spacing / 2);
+
+// Menu
+$menu-font-size: 14px;
+$menu-line-height: 1;
+$menu-z-index: 1000;
+$menu-padding-ver: $menu-font-size;
+$menu-padding-hor: $content-padding;
+$menu-padding: $menu-padding-ver $menu-padding-hor;
+$menu-height: $menu-font-size + 2 * $menu-padding-ver;
+
+// Tabs
+$tab-margin: 6px;
+$tab-padding-hor: 12px;
+$tab-padding-ver: calc(($menu-padding-ver * 2 - $tab-margin) / 2);
+$tab-radius: 4px;
+// $border-radius
+
+// Patterns
+$pattern-transparency-size: ($font-size - $border-width) * $input-height-factor;
+$pattern-transparency: repeating-conic-gradient(
+    transparent 0% 25%,
+    #eeeeee 0% 50%
+  )
+  0% 0% / #{$pattern-transparency-size} #{$pattern-transparency-size};

package/src/styles/_sortable.scss

@@ -0,0 +1,13 @@
+.dito-sortable-fallback {
+  filter: drop-shadow(0 2px 4px $color-shadow);
+
+  // Nested <td> need to also switch to `display: block` style during dragging
+  &,
+  td {
+    display: flex;
+
+    > * {
+      flex: 1;
+    }
+  }
+}

package/src/styles/_table.scss

@@ -0,0 +1,224 @@
+@mixin table-border {
+  // Note: No border-width set here on purpose!
+  border-style: solid;
+  border-color: $border-color;
+}
+
+@mixin table-border-left {
+  border-left-width: $border-width;
+}
+
+@mixin table-border-right {
+  border-right-width: $border-width;
+}
+
+@mixin table-border-top {
+  border-top-width: $border-width;
+}
+
+@mixin table-border-bottom {
+  border-bottom-width: $border-width;
+}
+
+@mixin table-border-top-left {
+  @include table-border-top;
+  @include table-border-left;
+
+  border-top-left-radius: $border-radius;
+}
+
+@mixin table-border-top-right {
+  @include table-border-top;
+  @include table-border-right;
+
+  border-top-right-radius: $border-radius;
+}
+
+@mixin table-border-bottom-left {
+  @include table-border-bottom;
+  @include table-border-left;
+
+  border-bottom-left-radius: $border-radius;
+}
+
+@mixin table-border-bottom-right {
+  @include table-border-bottom;
+  @include table-border-right;
+
+  border-bottom-right-radius: $border-radius;
+}
+
+table.dito-table {
+  --separator-width: #{$border-width};
+
+  width: 100%;
+  height: min-content;
+  border-radius: $border-radius;
+
+  > tbody,
+  > tfoot {
+    > tr {
+      vertical-align: baseline;
+
+      > td {
+        padding: $form-spacing 0 $form-spacing $form-spacing;
+        background: $content-color-background;
+
+        &:last-child {
+          padding-right: $form-spacing;
+        }
+
+        &.dito-cell-edit-buttons {
+          width: 1%;
+
+          &,
+          .dito-button {
+            // To align better with `vertical-align: baseline` in normal td:
+            vertical-align: top;
+          }
+        }
+      }
+    }
+  }
+
+  &.dito-table-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) {
+      $padding: $form-spacing * 1.5;
+
+      padding: $padding 0 $padding $padding;
+    }
+    // Variants of list styles: separators and alternate colors.
+  }
+
+  &.dito-table-separators {
+    > tbody > tr + tr,
+    > tbody:not(:empty) + tfoot > tr {
+      > td {
+        border-top: var(--separator-width) solid $border-color;
+      }
+    }
+  }
+
+  &.dito-table-alternate-colors {
+    > tbody > tr:nth-child(odd),
+    &.dito-table-even-count > tfoot > tr {
+      > td {
+        background: $color-white;
+      }
+    }
+  }
+
+  &.dito-table-background {
+    > tbody,
+    > tfoot {
+      > tr > td {
+        background: $color-white;
+      }
+      // Add top/top-left/top-right borders to the thead cells, using the special
+      // convention that they're added to the first element inside them instead of
+      // the cell itself, so buttons can keep the border themselves and display
+      // focus nicely.
+    }
+  }
+
+  > thead > tr > th {
+    // Use `:not(:focus)` to avoid overriding button focus border styling.
+    > * {
+      box-sizing: content-box;
+
+      &:not(:focus) {
+        @include table-border;
+      }
+
+      & {
+        @include table-border-top;
+        @include table-border-bottom;
+        @include table-border-left;
+        @include table-border-right;
+      }
+    }
+
+    &:first-child > * {
+      @include table-border-top-left;
+    }
+
+    &:last-child > * {
+      @include table-border-top-right;
+    }
+
+    & + th > * {
+      margin-left: -1px;
+      // Don't cover the focused border of buttons:
+      &:focus {
+        z-index: 1;
+      }
+      // Add left/rigth borders to the normal tbody cells.
+    }
+  }
+
+  > tbody > tr > td {
+    border: 0;
+    @include table-border;
+
+    &:first-child {
+      @include table-border-left;
+    }
+
+    &:last-child {
+      @include table-border-right;
+    }
+    // If there is no thead, add top/top-left/top-right borders borders to the
+    // first row of the tbody cells.
+  }
+
+  > tbody:first-child > tr:first-child > td,
+  /* Use :first-child to exclude situation where there's a thead and empty tbody*/
+  > tbody:first-child:empty + tfoot > tr > td {
+    @include table-border-top;
+
+    &:first-child {
+      @include table-border-top-left;
+    }
+
+    &:last-child {
+      @include table-border-top-right;
+    }
+    // If there is no toot, add top/top-left/top-right borders borders to the
+    // first row of the tbody cells.
+  }
+
+  > tbody:last-child > tr:last-child > td {
+    @include table-border-bottom;
+
+    &:first-child {
+      @include table-border-bottom-left;
+    }
+
+    &:last-child {
+      @include table-border-bottom-right;
+    }
+    // Add bottom/bottom-left/bottom-right borders to the thead cells.
+  }
+
+  > tfoot > tr > td {
+    border-width: 0;
+    @include table-border;
+    @include table-border-bottom;
+
+    &:first-child {
+      @include table-border-bottom-left;
+    }
+
+    &:last-child {
+      @include table-border-bottom-right;
+    }
+    // Nested .dito-table:
+  }
+}
+
+table.dito-table table.dito-table,
+.dito-form-nested table.dito-table {
+  margin: 0;
+}