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

package/src/components/DitoLabel.vue

@@ -0,0 +1,200 @@
+<template lang="pug">
+component.dito-label(
+  v-if="text || collapsible"
+  :is="collapsible ? 'button' : 'div'"
+  :type="collapsible ? 'button' : null"
+  v-bind="attributes"
+  :class="{ 'dito-label--active': isActive }"
+)
+  .dito-chevron(
+    v-if="collapsible"
+    :class="{ 'dito-chevron--open': !collapsed }"
+  )
+  .dito-label__inner(
+    v-if="text || prefixes.length > 0 || suffixes.length > 0"
+  )
+    DitoAffixes(
+      :items="prefixes"
+      position="prefix"
+      :parentContext="context"
+    )
+    label(
+      v-if="text"
+      :for="dataPath"
+      v-html="text"
+    )
+    DitoAffixes(
+      :items="suffixes"
+      mode="ellipsis"
+      position="suffix"
+      :parentContext="context"
+    )
+    .dito-info(
+      v-if="info"
+      :data-info="info"
+    )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import DitoAffixes from './DitoAffixes.vue'
+import { isObject, asArray } from '@ditojs/utils'
+
+// @vue/component
+export default DitoComponent.component('DitoLabel', {
+  components: { DitoAffixes },
+
+  emits: ['open'],
+
+  props: {
+    label: { type: [String, Object], default: null },
+    dataPath: { type: String, default: null },
+    collapsed: { type: Boolean, default: false },
+    collapsible: { type: Boolean, default: false },
+    info: { type: String, default: null }
+  },
+
+  computed: {
+    text() {
+      const { label } = this
+      return isObject(label) ? label?.text : label
+    },
+
+    prefixes() {
+      return asArray(this.label?.prefix)
+    },
+
+    suffixes() {
+      return asArray(this.label?.suffix)
+    },
+
+    attributes() {
+      return this.collapsible ? { onClick: this.onClick } : {}
+    },
+
+    isActive() {
+      return this.appState.activeLabel === this
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.appState.activeLabel = this
+      this.$emit('open', this.collapsed)
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-label {
+  $self: &;
+
+  // For buttons and chevron to align right:
+  display: flex;
+  position: relative;
+  // Vertically center all items in the label, e.g. chevron, edit-buttons.
+  align-items: center;
+  min-height: $input-height;
+  margin-right: $form-spacing-half; // When inlined.
+
+  &:has(.dito-schema-header) {
+    // The container's label is used as teleport for a nested section or object
+    // label. Hide `&__inner`, as it is be duplicated inside the nested label.
+    > #{$self}__inner {
+      display: none;
+    }
+  }
+
+  &:not(:has(+ .dito-tabs)) {
+    // Take full width but only if there aren't also tabs to be centered.
+    flex: 1;
+  }
+
+  &__inner {
+    flex: 1 0 0%;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    gap: $input-padding-hor;
+  }
+
+  label {
+    @include ellipsis;
+
+    cursor: inherit;
+    font-weight: bold;
+    line-height: $input-height;
+  }
+
+  // Fix alignment of sub and sup elements in label content.
+  sub,
+  sup {
+    display: inline-block;
+    vertical-align: baseline;
+  }
+
+  sub {
+    transform: translateY(4px);
+  }
+
+  sup {
+    transform: translateY(-4px);
+  }
+
+  .dito-buttons {
+    // Move the label padding inside .dito-buttons, so that it captures all
+    // near mouse events:
+    margin: calc(-1 * var(--label-padding));
+    margin-left: 0;
+    padding: var(--label-padding);
+  }
+
+  &--fill {
+    width: 100%;
+
+    // In order for ellipsis to work on labels without affecting other layout,
+    // we need to position it absolutely inside its container. But we can only
+    // do so if there is't also a chevron or other UX elements besides it.
+    &:has(> #{$self}__inner:only-child) {
+      flex: 1; // When in `.dito-schema-header`.
+
+      > #{$self}__inner {
+        position: absolute;
+        inset: 0;
+      }
+    }
+
+    &::after {
+      // Since <label> uses `position: absolute`, set content to a zero-width
+      // space on its parent to enforce the right text height in the container
+      content: '\200b'; // zero-width space;
+    }
+  }
+
+  .dito-info {
+    margin-left: 0.35em;
+  }
+
+  @at-root button#{&} {
+    border: 0;
+    padding: 0;
+    background: none;
+    text-align: start;
+
+    &:hover {
+      .dito-chevron {
+        color: $color-darker;
+      }
+    }
+
+    &:focus:not(:active, &--active) {
+      .dito-chevron {
+        -webkit-text-stroke: $border-width $color-active;
+      }
+    }
+  }
+}
+</style>

package/src/components/DitoMenu.vue

@@ -0,0 +1,186 @@
+<template lang="pug">
+ul.dito-menu(
+  v-resize="onResize"
+  :style="{ '--width': width ? `${width}px` : null }"
+)
+  li.dito-menu__item(
+    v-for="item in items"
+  )
+    template(
+      v-if="shouldShowItem(item)"
+    )
+      a.dito-menu__link(
+        :href="getItemHref(item)"
+        :class="{ 'dito-menu__link--active': isActiveItem(item) }"
+        @click.prevent.stop="onClickItem(item)"
+      ) {{ getLabel(item) }}
+      DitoMenu.dito-menu__sub(
+        v-if="item.items"
+        :items="item.items"
+        :path="getItemPath(item, false)"
+      )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoMenu', {
+  props: {
+    items: {
+      type: [Object, Array],
+      default: () => []
+    },
+    path: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      width: 0
+    }
+  },
+
+  methods: {
+    shouldShowItem(item) {
+      return (
+        this.shouldRenderSchema(item) && (
+          !item.items ||
+          Object.values(item.items).some(this.shouldRenderSchema)
+        )
+      )
+    },
+
+    onResize({ contentRect: { width } }) {
+      if (width) {
+        this.width = width
+      }
+    },
+
+    getItemPath(item, firstChild) {
+      const path = item.path ? `${this.path}/${item.path}` : null
+      return firstChild && path && item.items
+        ? `${path}${this.getItemPath(Object.values(item.items)[0], false)}`
+        : path
+    },
+
+    getItemHref(item) {
+      const path = this.getItemPath(item, true)
+      return path ? this.$router.resolve(path).href : null
+    },
+
+    isActiveItem(item) {
+      return (
+        this.$route.path.startsWith(this.getItemPath(item, false)) ||
+        item.items && Object.values(item.items).some(this.isActiveItem)
+      )
+    },
+
+    onClickItem(item) {
+      const path = this.getItemPath(item, true)
+      if (path) {
+        this.$router.push({ path, force: true })
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@use 'sass:color';
+@import '../styles/_imports';
+
+.dito-menu {
+  $self: &;
+  $item-height: $menu-font-size + 2 * $menu-padding-ver;
+
+  --menu-active-color: #{$color-white};
+  --menu-active-background: #{$color-active};
+
+  border-right: $border-style;
+  padding: 0 $menu-spacing;
+
+  &__item {
+    &:has(#{$self}__sub):not(:has(#{$self}__link--active)) {
+      // Pop-out sub-menus on hover:
+      &:hover {
+        > #{$self}__link {
+          background: $color-lightest;
+        }
+
+        #{$self}__sub {
+          display: block;
+          position: absolute;
+          width: var(--width);
+          z-index: $z-index-header;
+          transform: translateX(calc(var(--width) + 2 * $menu-spacing))
+            translateY(-$item-height);
+
+          #{$self}__item:first-child {
+            #{$self}__link {
+              margin-top: 0;
+            }
+          }
+
+          &::before {
+            // Fill the gap to not loose the hover when moving over it.
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -2 * $menu-spacing;
+            width: 2 * $menu-spacing;
+            height: $item-height;
+            opacity: 0;
+          }
+        }
+
+        #{$self}__sub {
+          box-shadow: $shadow-window;
+        }
+      }
+    }
+  }
+
+  &__link {
+    display: block;
+    padding: $menu-padding;
+    line-height: $menu-line-height;
+    border-radius: $border-radius;
+    margin-top: $menu-spacing;
+
+    &:focus:not(:active, &--active) {
+      box-shadow: $shadow-focus;
+    }
+
+    &:hover {
+      background: rgb(255, 255, 255, 0.5);
+    }
+
+    &--active {
+      &,
+      &:hover {
+        color: var(--menu-active-color);
+        background: var(--menu-active-background);
+      }
+
+      &:has(+ #{$self}__sub) {
+        --menu-active-background: #{color.adjust($color-active, $alpha: -0.3)};
+      }
+    }
+  }
+
+  &__sub {
+    display: none;
+    border-right: 0;
+    padding: 0;
+    border-radius: $border-radius;
+    background: $color-lightest;
+  }
+
+  &__link--active + &__sub {
+    display: block;
+  }
+}
+</style>

package/src/components/DitoNavigation.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+nav.dito-navigation.dito-scroll-parent
+  h1
+    RouterLink.dito-link(to="/") {{ appState.title }}
+  DitoMenu.dito-scroll(:items="views")
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoNavigation', {})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-navigation {
+  @include user-select(none);
+
+  flex: 0 0 min-content;
+  font-size: $menu-font-size;
+  white-space: nowrap;
+  background: $color-lighter;
+
+  h1 {
+    display: block;
+    line-height: $header-line-height;
+    font-weight: bold;
+    background: $color-darker;
+    border-right: $border-width solid $color-darkest;
+    color: $color-white;
+
+    .dito-link {
+      display: block;
+      padding: $header-padding;
+    }
+  }
+}
+</style>

package/src/components/DitoNotifications.vue

@@ -0,0 +1,170 @@
+<template lang="pug">
+.dito-notifications
+  .dito-header
+    span
+  .dito-notifications__inner
+    VueNotifications(
+      ref="notifications"
+      classes="dito-notification"
+      :dangerouslySetInnerHtml="true"
+      position=""
+      width=""
+    )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import { asArray, stripHtml } from '@ditojs/utils'
+
+// @vue/component
+export default DitoComponent.component('DitoNotifications', {
+  notifications() {
+    return this.isMounted && this.$refs.notifications
+  },
+
+  methods: {
+    notify({ type = 'info', title, text, error, duration } = {}) {
+      title ||= (
+        {
+          warning: 'Warning',
+          error: 'Error',
+          info: 'Information',
+          success: 'Success'
+        }[type] ||
+        'Notification'
+      )
+      text = `<p>${
+        asArray(text).join('</p> <p>')
+      }</p>`.replace(/\n|\r\n|\r/g, '<br>')
+      const log = (
+        {
+          warning: 'warn',
+          error: 'error',
+          info: 'log',
+          success: 'log'
+        }[type] ||
+        'error'
+      )
+      // eslint-disable-next-line no-console
+      console[log](
+        ...[
+          stripHtml(text),
+          ...(type === 'error' && error ? [error] : [])
+        ]
+      )
+      const { notifications = true } = this.api
+      if (notifications) {
+        // Calculate display-duration for the notification based on its content
+        // and the setting of the `durationFactor` configuration. It defines the
+        // amount of milliseconds multiplied with the amount of characters
+        // displayed in the notification, plus 40 (40 + title + message):
+        const { durationFactor = 20 } = notifications
+        duration ??= (40 + text.length + title.length) * durationFactor
+        this.$notify({
+          type,
+          title,
+          text,
+          duration: duration === 0 ? -1 : duration // < 0 -> <= 0 = sticky
+        })
+      }
+    },
+
+    destroyAll() {
+      this.notifications.destroyAll()
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@use 'sass:color';
+@import '../styles/_imports';
+
+@mixin type($background) {
+  background: color.adjust($background, $lightness: 5%);
+  color: $color-white;
+  border-left: 12px solid color.adjust($background, $lightness: -10%);
+}
+
+.dito-notifications {
+  $notification-width: 300px;
+
+  flex: 1;
+  z-index: $z-index-notifications;
+  box-sizing: border-box;
+  margin-left: $form-spacing;
+  // For the `@container` rule to work:
+  container-type: inline-size;
+
+  .dito-header {
+    span {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  &__inner {
+    position: relative;
+  }
+
+  .vue-notification-group {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: $notification-width;
+
+    @container (width < #{$notification-width + $content-padding}) {
+      left: unset;
+      right: $content-padding;
+    }
+  }
+
+  .vue-notification-wrapper {
+    overflow: visible;
+  }
+
+  .dito-notification {
+    padding: 8px;
+    margin: $content-padding 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 {
+      overflow: hidden;
+      word-break: break-all;
+
+      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);
+    }
+  }
+}
+</style>

package/src/components/DitoPagination.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+Pagination(
+  v-model:page="page"
+  :pageSize="limit"
+  :total="total"
+)
+</template>
+
+<script>
+import { DitoPagination as Pagination } from '@ditojs/ui/src'
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoPagination', {
+  components: { Pagination },
+
+  props: {
+    query: { type: Object, required: true },
+    limit: { type: Number, required: true },
+    total: { type: Number, required: true }
+  },
+
+  computed: {
+    page: {
+      get() {
+        return (+this.query.page || 0) + 1
+      },
+
+      set(page) {
+        if (this.page !== page) {
+          this.$router.push(
+            this.getQueryLink({
+              ...this.query,
+              page: page - 1
+            })
+          )
+        }
+      }
+    }
+  }
+})
+</script>