@radio-garden/ditojs-admin 2.85.2-0.5067ad799

package/src/styles/_imports.scss

@@ -0,0 +1,3 @@
+// stylelint-disable scss/load-partial-extension
+@import '@ditojs/ui/imports.scss';
+@import '_settings';

package/src/styles/_info.scss

@@ -0,0 +1,19 @@
+.dito-info {
+  --size: calc(1em * var(--line-height));
+
+  display: inline-block;
+  position: relative;
+  flex: 0 0 var(--size);
+  width: var(--size);
+  height: var(--size);
+  text-align: center;
+  vertical-align: top;
+  margin-left: 0.35em;
+  color: $color-active;
+
+  &::before {
+    @extend %icon-info;
+
+    width: var(--size);
+  }
+}

package/src/styles/_layout.scss

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

package/src/styles/_pulldown.scss

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

package/src/styles/_scroll.scss

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

package/src/styles/_settings.scss

@@ -0,0 +1,88 @@
+// 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-width-wide: 1400px;
+$content-padding: 16px;
+$content-padding-half: calc($content-padding / 2);
+$content-color-background: $color-lightest;
+
+// Sidebar
+$sidebar-max-width: 360px;
+$sidebar-min-width: 200px;
+
+// Form
+$form-spacing: $input-padding-hor;
+$form-spacing-half: calc($form-spacing / 2);
+
+// Header
+$header-font-size: 14px;
+$header-line-height: 1;
+$header-padding-ver: $header-font-size;
+$header-padding-hor: $content-padding;
+$header-padding: $header-padding-ver $header-padding-hor;
+$header-height: $header-font-size + 2 * $header-padding-ver;
+
+// Tabs
+$tab-margin: $form-spacing;
+$tab-padding-hor: 2 * $tab-margin;
+$tab-padding-ver: calc(($header-padding-ver * 2 - $tab-margin) / 2);
+$tab-radius: 4px;
+
+// Menu
+$menu-font-size: $header-font-size;
+$menu-line-height: $header-line-height;
+$menu-spacing: 4px;
+$menu-padding-ver: $header-padding-ver - $menu-spacing;
+$menu-padding-hor: $header-padding-hor - $menu-spacing;
+$menu-padding: $menu-padding-ver $menu-padding-hor;
+
+// Z-Indices
+$z-index-dialog: 4000;
+$z-index-drag-overlay: 3000;
+$z-index-notifications: 2500;
+$z-index-header: 2000;
+$z-index-tippy: 750;
+$z-index-main-buttons: 500;
+
+// 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/_table.scss

@@ -0,0 +1,223 @@
+@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;
+}
+
+.dito-table {
+  $self: &;
+
+  --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;
+        }
+      }
+    }
+  }
+
+  &__buttons {
+    width: 1%;
+
+    &,
+    .dito-button {
+      // To align better with `vertical-align: baseline` in normal td:
+      vertical-align: top;
+    }
+  }
+
+  &--larger-padding {
+    // Add more spacing to cells in tables except those containing edit buttons,
+    // to better align cell texts with edit buttons.
+    td:not(#{$self}__buttons) {
+      $padding: $form-spacing * 1.5;
+
+      padding: $padding 0 $padding $padding;
+    }
+    // Variants of list styles: separators and alternate colors.
+  }
+
+  &--separators {
+    > tbody > tr + tr,
+    > tbody:not(:empty) + tfoot > tr {
+      > td {
+        border-top: var(--separator-width) solid $border-color;
+      }
+    }
+  }
+
+  &--alternate-colors {
+    > tbody > tr:nth-child(odd),
+    &#{$self}--even-count > tfoot > tr {
+      > td {
+        background: $color-white;
+      }
+    }
+  }
+
+  &--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/right 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;
+    }
+  }
+
+  #{$self} & {
+    // Nested .dito-table
+    margin: 0;
+  }
+}

package/src/styles/_tippy.scss

@@ -0,0 +1,45 @@
+@use 'sass:color';
+@import 'tippy.js/dist/tippy.css';
+@import 'tippy.js/animations/shift-away-subtle.css';
+
+.tippy-box {
+  .tippy-content,
+  .tippy-arrow {
+    z-index: $z-index-tippy;
+  }
+
+  &[data-theme] {
+    --color: #{$color-active};
+
+    font-size: unset;
+    line-height: unset;
+    background-color: var(--color);
+    color: $color-white;
+    filter: drop-shadow(0 2px 4px $color-shadow);
+
+    .tippy-content {
+      white-space: pre-line;
+      padding: ($input-padding-ver + 2 * $border-width)
+        ($input-padding-hor + $border-width);
+    }
+
+    > .tippy-arrow::before {
+      color: var(--color);
+    }
+  }
+
+  &[data-theme~='info'] {
+    --color: #{color.adjust($color-active, $lightness: 5%)};
+  }
+
+  &[data-theme~='error'] {
+    --color: #{color.adjust($color-error, $lightness: 5%)};
+
+    cursor: pointer;
+
+    > .tippy-arrow {
+      transform: unset !important;
+      left: 16px !important;
+    }
+  }
+}

package/src/styles/style.scss

@@ -0,0 +1,9 @@
+@import '_imports';
+@import '_base';
+@import '_button';
+@import '_pulldown';
+@import '_layout';
+@import '_scroll';
+@import '_table';
+@import '_info';
+@import '_tippy';

package/src/types/DitoTypeButton.vue

@@ -0,0 +1,143 @@
+<template lang="pug">
+DitoButton.dito-button(
+  :id="dataPath"
+  ref="element"
+  :type="type"
+  :text="text"
+  :title="title"
+  :disabled="disabled"
+  :class="buttonClass"
+  v-bind="attributes"
+)
+  template(#prefix)
+    DitoAffixes(
+      v-if="prefixes.length > 0"
+      :items="prefixes"
+      position="prefix"
+      :disabled="disabled"
+      :parentContext="context"
+    )
+  template(#suffix)
+    DitoAffixes(
+      v-if="suffixes.length > 0"
+      :items="suffixes"
+      position="suffix"
+      :disabled="disabled"
+      :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, 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
+      },
+
+      text: getSchemaAccessor('text', {
+        type: String
+      }),
+
+      title() {
+        return this.text || labelize(this.verb)
+      },
+
+      prefixes() {
+        return asArray(this.schema.prefix)
+      },
+
+      suffixes() {
+        return asArray(this.schema.suffix)
+      },
+
+      closeForm: getSchemaAccessor('closeForm', {
+        type: Boolean,
+        default: false
+      })
+    },
+
+    methods: {
+      // @override
+      getEvents() {
+        const { onFocus, onBlur, onClick } = this
+        return { onFocus, onBlur, onClick }
+      },
+
+      async submit(options) {
+        return this.resourceComponent?.submit(this, options)
+      },
+
+      async onClick() {
+        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
+        }
+      }
+    }
+  }
+)
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-button {
+  $self: &;
+
+  &__text {
+    @include ellipsis;
+  }
+}
+</style>

package/src/types/DitoTypeCheckbox.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+.dito-checkbox
+  input(
+    :id="dataPath"
+    ref="element"
+    v-model="value"
+    type="checkbox"
+    v-bind="attributes"
+  )
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+
+// @vue/component
+export default DitoTypeComponent.register('checkbox', {
+  nativeField: true
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-checkbox {
+  @extend %input-borderless;
+}
+</style>

package/src/types/DitoTypeCheckboxes.vue

@@ -0,0 +1,65 @@
+<template lang="pug">
+ul.dito-checkboxes(
+  :id="dataPath"
+  :class="`dito-layout--${schema.layout || 'vertical'}`"
+)
+  li(
+    v-for="option in options"
+  )
+    label
+      .dito-checkbox
+        input(
+          ref="element"
+          v-model="selectedOptions"
+          type="checkbox"
+          :value="getValueForOption(option)"
+          v-bind="attributes"
+        )
+        span {{ getLabelForOption(option) }}
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import OptionsMixin from '../mixins/OptionsMixin.js'
+
+// @vue/component
+export default DitoTypeComponent.register('checkboxes', {
+  mixins: [OptionsMixin],
+
+  nativeField: true,
+  defaultValue: [],
+  defaultWidth: 'auto',
+  defaultMultiple: true,
+
+  computed: {
+    // @override
+    multiple() {
+      return true
+    },
+
+    selectedOptions: {
+      get() {
+        return (this.selectedValue || []).filter(value => value)
+      },
+
+      set(option) {
+        this.selectedValue = option || []
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-checkboxes {
+  label {
+    @extend %input-borderless;
+  }
+
+  input {
+    margin-right: $form-spacing;
+  }
+}
+</style>