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

package/src/components/DitoSchemaInlined.vue

@@ -0,0 +1,97 @@
+<template lang="pug">
+DitoSchema.dito-schema-inlined(
+  :schema="schema"
+  :dataPath="dataPath"
+  :data="data"
+  :meta="meta"
+  :store="store"
+  :label="isCompact ? null : label"
+  :info="info"
+  :padding="padding ?? 'inlined'"
+  :inlined="true"
+  :disabled="disabled"
+  :compact="isCompact"
+  :collapsed="collapsed"
+  :collapsible="collapsible"
+  :generateLabels="!isCompact"
+  :labelNode="labelNode"
+  :accumulatedBasis="accumulatedBasis"
+)
+  //- Render dito-edit-buttons for inlined schemas separately from all
+  //- others in `TypeList` as a scope, for better handling of layout.
+  template(#edit-buttons)
+    DitoEditButtons(
+      v-if="deletable || draggable || editable"
+      :schema="schema"
+      :dataPath="dataPath"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :disabled="disabled"
+      :deletable="deletable"
+      :draggable="draggable"
+      :editable="editable"
+      :editPath="editPath"
+      @delete="$emit('delete')"
+    )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import { isCompact } from '../utils/schema.js'
+// @vue/component
+export default DitoComponent.component('DitoSchemaInlined', {
+  emits: ['delete'],
+
+  props: {
+    schema: { type: Object, required: true },
+    dataPath: { type: String, required: true },
+    data: { type: Object, required: true },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
+    label: { type: [String, Object], default: null },
+    info: { type: String, default: null },
+    padding: { type: String, default: null },
+    disabled: { type: Boolean, required: true },
+    collapsed: { type: Boolean, default: false },
+    collapsible: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: false },
+    editable: { type: Boolean, default: false },
+    deletable: { type: Boolean, default: false },
+    editPath: { type: String, default: null },
+    labelNode: { type: HTMLElement, default: null },
+    accumulatedBasis: { type: Number, default: null }
+  },
+
+  computed: {
+    isCompact() {
+      return isCompact(this.schema)
+    },
+
+    hasLabel() {
+      return !this.isCompact && !!this.label
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-schema-inlined {
+  // Use grid layout for two reasons: For `TransitionHeight` to work smoothly,
+  // and to align the header above the content when the header is not teleported
+  // outside of the schema.
+  display: grid;
+  grid-template-rows: min-content;
+  grid-template-columns: 100%;
+
+  &:not(:hover, .dito-schema--open) {
+    > .dito-schema-header {
+      > .dito-clipboard {
+        display: none;
+      }
+    }
+  }
+}
+</style>

package/src/components/DitoScopes.vue

@@ -0,0 +1,76 @@
+<template lang="pug">
+.dito-scopes
+  RouterLink(
+    v-for="(scope, key) in scopes"
+    :key="key"
+    v-slot="{ navigate }"
+    :to="getScopeLink(scope)"
+    custom
+  )
+    button.dito-button(
+      type="button"
+      :class="{ 'dito-button--selected': scope.name === query.scope }"
+      :title="scope.hint || getLabel(scope)"
+      @click="navigate"
+    ) {{ getLabel(scope) }}
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoScopes', {
+  props: {
+    query: { type: Object, required: true },
+    scopes: { type: Object, required: true }
+  },
+
+  methods: {
+    getScopeLink(scope) {
+      const query = { ...this.query, scope: scope.name }
+      if (query.page) {
+        query.page = 0
+      }
+      return this.getQueryLink(query)
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-scopes {
+  white-space: nowrap;
+  display: flex;
+
+  .dito-button {
+    @include ellipsis;
+
+    border-radius: 0;
+    // A bit more than the width of ellipsis, to prevent replacing short words
+    // with ellipsis.
+    min-width: 3em;
+    flex: 0 1 auto;
+
+    &:first-child {
+      border-top-left-radius: 1em;
+      border-bottom-left-radius: 1em;
+      padding-left: 1em;
+    }
+
+    &:last-child {
+      border-top-right-radius: 1em;
+      border-bottom-right-radius: 1em;
+      padding-right: 1em;
+    }
+
+    & + .dito-button {
+      margin-left: -1px;
+    } // Don't cover the focused border of buttons:
+    &:focus {
+      z-index: 1;
+    }
+  }
+}
+</style>

package/src/components/DitoSidebar.vue

@@ -0,0 +1,50 @@
+<template lang="pug">
+aside.dito-sidebar.dito-scroll-parent(
+  v-resize="onResizeSidebar"
+  :class="classes"
+)
+  nav.dito-header
+    slot
+  .dito-sidebar__teleport.dito-scroll
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoSidebar', {
+  data() {
+    return {
+      sidebarWidth: 0
+    }
+  },
+
+  computed: {
+    classes() {
+      const prefix = 'dito-sidebar'
+      // NOTE: Keep synced with $sidebar-max-width in SCSS:
+      const sidebarWidth = 360
+      return {
+        [`${prefix}--width-99`]: this.sidebarWidth < sidebarWidth,
+        [`${prefix}--width-60`]: this.sidebarWidth <= sidebarWidth * 0.6
+      }
+    }
+  },
+
+  methods: {
+    onResizeSidebar({ contentRect: { width } }) {
+      this.sidebarWidth = width
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-sidebar {
+  flex: 0 1 $sidebar-max-width;
+  max-width: $sidebar-max-width;
+  min-width: $sidebar-min-width;
+}
+</style>

package/src/components/DitoSpinner.vue

@@ -0,0 +1,95 @@
+<template lang="pug">
+.dito-spinner(
+  v-show="loading"
+  :style="{ '--color': color, '--size': size, '--margin': margin }"
+)
+  .dito-spinner__pulse.dito-spinner__pulse1
+  .dito-spinner__pulse.dito-spinner__pulse2
+  .dito-spinner__pulse.dito-spinner__pulse3
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoSpinner', {
+  props: {
+    loading: {
+      type: Boolean,
+      default: true
+    },
+    color: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: null
+    },
+    margin: {
+      type: String,
+      default: null
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.dito-spinner {
+  --color: #999999;
+  --size: 8px;
+  --margin: 2px;
+
+  display: flex;
+  align-items: center;
+
+  &__pulse {
+    display: inline-block;
+    background: var(--color);
+    width: var(--size);
+    height: var(--size);
+    margin: var(--margin);
+    border-radius: 100%;
+    animation: dito-spinner-pulse 0.75s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0s
+      infinite both;
+  }
+
+  &__pulse1 {
+    animation-delay: 0.12s;
+  }
+
+  &__pulse2 {
+    animation-delay: 0.24s;
+  }
+
+  &__pulse3 {
+    animation-delay: 0.36s;
+  }
+}
+
+@keyframes dito-spinner-pulse {
+  0%,
+  80% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  45% {
+    transform: scale(0.1);
+    opacity: 0.7;
+  }
+}
+
+@keyframes dito-spinner-pulse {
+  0%,
+  80% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  45% {
+    transform: scale(0.1);
+    opacity: 0.7;
+  }
+}
+</style>

package/src/components/DitoTableCell.vue

@@ -0,0 +1,64 @@
+<template lang="pug">
+td(
+  :class="cell.class"
+  :style="cell.style"
+)
+  //- TODO: Implement inlined components in cell mode!
+  component(
+    v-if="cell.component"
+    :is="cell.component"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
+    :nested="nested"
+    :disabled="disabled"
+  )
+  span(
+    v-else
+    v-html="renderCell(data)"
+  )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import DitoContext from '../DitoContext.js'
+import ContextMixin from '../mixins/ContextMixin.js'
+import { appendDataPath } from '../utils/data.js'
+import { escapeHtml } from '@ditojs/utils'
+
+// @vue/component
+export default DitoComponent.component('DitoTableCell', {
+  mixins: [ContextMixin],
+
+  props: {
+    cell: { type: Object, required: true },
+    schema: { type: Object, required: true },
+    dataPath: { type: String, required: true },
+    data: { type: Object, required: true },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
+    nested: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false }
+  },
+
+  methods: {
+    renderCell(item) {
+      const { name, render } = this.cell
+      const value = item[name]
+      return render
+        ? render.call(
+            this,
+            new DitoContext(this, {
+              name,
+              value,
+              data: item,
+              dataPath: appendDataPath(this.dataPath, name)
+            })
+          )
+        : escapeHtml(value)
+    }
+  }
+})
+</script>

package/src/components/DitoTableHead.vue

@@ -0,0 +1,121 @@
+<template lang="pug">
+thead.dito-table-head
+  tr
+    template(
+      v-for="column in columns"
+    )
+      th(
+        v-if="shouldRenderSchema(column)"
+        :class="getColumnClass(column)"
+      )
+        RouterLink(
+          v-if="column.sortable"
+          v-slot="{ navigate }"
+          :to="getSortLink(column)"
+          custom
+        )
+          button.dito-button(
+            type="button"
+            :class="getSortClass(column)"
+            @click="navigate"
+          )
+            .dito-button__order-arrows
+            span {{ getLabel(column) }}
+        span(
+          v-else
+        ) {{ getLabel(column) }}
+    th(
+      v-if="hasEditButtons"
+    )
+      //- Empty <span> is needed for styling, see _table.scss
+      span
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import { hyphenate } from '@ditojs/utils'
+
+// @vue/component
+export default DitoComponent.component('DitoTableHead', {
+  props: {
+    query: { type: Object, required: true },
+    columns: { type: Object, required: true },
+    hasEditButtons: { type: Boolean, required: true }
+  },
+
+  computed: {
+    sort() {
+      const order = (this.query.order || '').split(/\s+/)
+      return {
+        name: order[0],
+        order: order[1]
+      }
+    }
+  },
+
+  methods: {
+    getColumnClass(column) {
+      return `dito-column--${hyphenate(column.name)}`
+    },
+
+    getSortClass(column) {
+      return this.sort.name === column.name
+        ? `dito-button--selected dito-button--order-${this.sort.order}`
+        : null
+    },
+
+    getSortLink(column) {
+      // Toggle order if the same column is clicked again.
+      const order =
+        this.sort.name === column.name && this.sort.order === 'asc'
+          ? 'desc'
+          : 'asc'
+      return this.getQueryLink({
+        ...this.query,
+        order: `${column.name} ${order}`
+      })
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-table-head {
+  @include user-select(none);
+
+  tr {
+    th {
+      padding: 0;
+      font-weight: normal;
+      text-align: left;
+      white-space: nowrap;
+
+      .dito-button {
+        // Convention: Nested spans handle padding, see below
+        display: block; // Override default inline-flex positioning.
+        padding: 0;
+        width: 100%;
+        text-align: inherit;
+        border-radius: 0;
+      }
+
+      span {
+        display: inline-block;
+        // Convention: Nested spans handle padding
+        padding: $input-padding;
+
+        &:empty::after {
+          // Prevent empty <th> from collapsing
+          content: '\200b'; // zero-width space;
+        }
+      }
+
+      > span {
+        display: block;
+      }
+    }
+  }
+}
+</style>

package/src/components/DitoTabs.vue

@@ -0,0 +1,103 @@
+<template lang="pug">
+.dito-tabs
+  template(
+    v-for="(tabSchema, key) in tabs"
+  )
+    a.dito-tabs__link(
+      v-if="shouldRenderSchema(tabSchema)"
+      :key="key"
+      :class="{ 'dito-tabs__link--active': modelValue === key }"
+      @click="$emit('update:modelValue', key)"
+    ) {{ getLabel(tabSchema, key) }}
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoTabs', {
+  emits: ['update:modelValue'],
+  props: {
+    tabs: { type: Object, default: null },
+    modelValue: { type: String, default: null }
+  }
+})
+</script>
+
+<style lang="scss">
+@use 'sass:color';
+@import '../styles/_imports';
+
+.dito-tabs {
+  display: flex;
+
+  &__link {
+    @include user-select(none);
+
+    display: block;
+    white-space: nowrap;
+
+    &:hover {
+      background: $color-white;
+    }
+
+    // When in main header:
+    .dito-header & {
+      background: $color-light;
+      padding: $tab-padding-ver $tab-padding-hor;
+      margin-left: $tab-margin;
+      border-top-left-radius: $tab-radius;
+      border-top-right-radius: $tab-radius;
+
+      &:active {
+        background: $color-lightest;
+      }
+
+      &--active {
+        background: $color-lightest;
+      }
+    }
+
+    // When inside a inline schema:
+    .dito-schema-inlined &,
+    .dito-label & {
+      background: $color-lighter;
+      border: $border-style;
+      padding: $input-padding;
+      margin-left: -$border-width;
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: $tab-radius;
+        border-bottom-left-radius: $tab-radius;
+      }
+
+      &:last-child {
+        border-top-right-radius: $tab-radius;
+        border-bottom-right-radius: $tab-radius;
+      }
+
+      &:active {
+        background: $color-lighter;
+      }
+
+      &--active {
+        background: $color-active;
+        border-color: color.adjust($color-active, $lightness: -10%);
+        color: $color-white;
+        z-index: 1;
+      }
+    }
+  }
+
+  .dito-schema & {
+    // Push clipboard to the right in the flex layout, see:
+    // https://codepen.io/tholex/pen/hveBx/
+    margin-left: auto;
+
+    &:last-child {
+      margin-right: auto;
+    }
+  }
+}
+</style>