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

package/src/types/DitoTypePanel.vue

@@ -0,0 +1,18 @@
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+
+// @vue/component
+export default DitoTypeComponent.register('panel', {
+  defaultValue: () => undefined, // Callback to override `defaultValue: null`
+  excludeValue: true,
+  generateLabel: false,
+  omitSpacing: true,
+
+  getPanelSchema(api, schema) {
+    // For a TypePanel, the component schema is also the panel schema, but
+    // remove the added name, so it doesn't get appended twice to data-path.
+    const { name, ...panel } = schema
+    return panel
+  }
+})
+</script>

package/src/types/DitoTypeProgress.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+progress.dito-progress(
+  :id="dataPath"
+  ref="element"
+  :value="progressValue"
+  :max="progressMax"
+  v-bind="attributes"
+)
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import NumberMixin from '../mixins/NumberMixin.js'
+
+// @vue/component
+export default DitoTypeComponent.register('progress', {
+  mixins: [NumberMixin],
+  computed: {
+    progressValue() {
+      let { value, range, step } = this
+      if (value !== null) {
+        if (range) {
+          value -= range[0]
+        }
+        if (step) {
+          value = Math.round(value / step) * step
+        }
+      } else {
+        value = ''
+      }
+      return value
+    },
+
+    progressMax() {
+      const { range } = this
+      return range ? range[1] - range[0] : null
+    }
+  }
+})
+</script>

package/src/types/DitoTypeRadio.vue

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

package/src/types/DitoTypeSection.vue

@@ -0,0 +1,80 @@
+<template lang="pug">
+.dito-section(:class="{ 'dito-section--labelled': hasLabel }")
+  DitoSchemaInlined.dito-section__schema(
+    :schema="getItemFormSchema(schema, item, context)"
+    :dataPath="dataPath"
+    :data="item"
+    :meta="meta"
+    :store="store"
+    :label="label"
+    :info="info"
+    :padding="hasLabel ? 'nested' : 'inlined'"
+    :disabled="disabled"
+    :collapsed="collapsed"
+    :collapsible="collapsible"
+    :labelNode="labelNode"
+  )
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+import { getItemFormSchema, processSchemaComponents } from '../utils/schema.js'
+
+// @vue/component
+export default DitoTypeComponent.register('section', {
+  defaultValue: () => undefined, // Callback to override `defaultValue: null`
+  ignoreMissingValue: ({ schema }) => !schema.nested && !('default' in schema),
+  defaultNested: false,
+  generateLabel: false,
+
+  computed: {
+    item() {
+      return this.nested ? this.value : this.data
+    },
+
+    hasLabel() {
+      return !!this.schema.label
+    },
+
+    collapsible: getSchemaAccessor('collapsible', {
+      type: Boolean,
+      default: false
+    }),
+
+    collapsed: getSchemaAccessor('collapsed', {
+      type: Boolean,
+      default: false,
+      get(collapsed) {
+        return collapsed && this.collapsible
+      }
+    })
+  },
+
+  methods: {
+    getItemFormSchema
+  },
+
+  async processSchema(api, schema, name, routes, level) {
+    // Process section components so their forms get resolved too.
+    await processSchemaComponents(api, schema, routes, level)
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-section {
+  &--labelled {
+    border: $border-width solid transparent;
+    border-radius: $border-radius;
+    transition: border-color 0.2s $ease-out-quart;
+    margin-top: $form-spacing-half;
+
+    &:has(.dito-schema--open) {
+      border-color: $border-color;
+    }
+  }
+}
+</style>

package/src/types/DitoTypeSelect.vue

@@ -0,0 +1,133 @@
+<template lang="pug">
+//- Nesting is needed to make an arrow appear over the select item:
+.dito-select
+  .dito-select__inner
+    DitoAffixes(
+      :items="schema.prefix"
+      position="prefix"
+      mode="input"
+      absolute
+      :disabled="disabled"
+      :parentContext="context"
+    )
+    select(
+      :id="dataPath"
+      ref="element"
+      v-model="selectedValue"
+      v-bind="attributes"
+      @mousedown="populate = true"
+      @focus="populate = true"
+    )
+      template(
+        v-if="populate"
+      )
+        template(
+          v-for="option in options"
+        )
+          optgroup(
+            v-if="groupBy"
+            :label="option[groupByLabel]"
+          )
+            option(
+              v-for="opt in option[groupByOptions]"
+              :value="getValueForOption(opt)"
+            ) {{ getLabelForOption(opt) }}
+          option(
+            v-else
+            :value="getValueForOption(option)"
+          ) {{ getLabelForOption(option) }}
+      template(
+        v-else-if="selectedOption"
+      )
+        option(:value="selectedValue") {{ getLabelForOption(selectedOption) }}
+    DitoAffixes(
+      :items="schema.suffix"
+      position="suffix"
+      mode="input"
+      absolute
+      :clearable="showClearButton"
+      :disabled="disabled"
+      :inlineInfo="inlineInfo"
+      :parentContext="context"
+      @clear="clear"
+    )
+  //- Edit button is never disabled, even if the field is disabled.
+  DitoEditButtons(
+    v-if="editable"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
+    :disabled="false"
+    :editable="editable"
+    :editPath="editPath"
+  )
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import OptionsMixin from '../mixins/OptionsMixin.js'
+import DitoAffixes from '../components/DitoAffixes.vue'
+
+// @vue/component
+export default DitoTypeComponent.register('select', {
+  mixins: [OptionsMixin],
+  components: { DitoAffixes },
+
+  nativeField: true,
+
+  data() {
+    return {
+      // Disable lazy-population for now.
+      // TODO: Set to `false` Once lineto e2e tests address their issues.
+      populate: true
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-select {
+  display: inline-flex;
+  position: relative;
+
+  select {
+    @extend %input;
+
+    padding-right: $select-arrow-width;
+  }
+
+  // `&___inner` is needed to make the edit buttons appear to the right of the
+  // select:
+  &__inner {
+    flex: 1;
+    position: relative;
+
+    &::before {
+      @include arrow($select-arrow-size);
+
+      position: absolute;
+      bottom: $select-arrow-bottom;
+      right: $select-arrow-right;
+
+      .dito-container--disabled & {
+        border-color: $color-disabled;
+      }
+    }
+  }
+
+  .dito-edit-buttons {
+    margin-left: $form-spacing-half;
+  }
+
+  // Handle width fill separately due to required nesting of select:
+  &.dito-component--fill {
+    select {
+      width: 100%;
+    }
+  }
+}
+</style>

package/src/types/DitoTypeSlider.vue

@@ -0,0 +1,66 @@
+<template lang="pug">
+.dito-slider
+  input.dito-range(
+    :id="dataPath"
+    ref="element"
+    v-model="inputValue"
+    type="range"
+    v-bind="attributes"
+    :min="min"
+    :max="max"
+    :step="stepValue"
+  )
+  DitoInput.dito-number(
+    v-if="input"
+    v-model="inputValue"
+    type="number"
+    v-bind="attributes"
+    :min="min"
+    :max="max"
+    :step="stepValue"
+  )
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import NumberMixin from '../mixins/NumberMixin.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+import { DitoInput } from '@ditojs/ui/src'
+
+// @vue/component
+export default DitoTypeComponent.register('slider', {
+  mixins: [NumberMixin],
+  components: { DitoInput },
+  nativeField: true,
+
+  computed: {
+    // TODO: Rename to `showInput`?
+    input: getSchemaAccessor('input', {
+      type: Boolean,
+      default: true
+    })
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-slider {
+  @extend %input;
+
+  display: flex;
+
+  .dito-range {
+    flex: auto;
+    height: calc(1em * var(--line-height));
+  }
+
+  .dito-number {
+    border: 0;
+    padding: 0;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+}
+</style>

package/src/types/DitoTypeSpacer.vue

@@ -0,0 +1,11 @@
+<!-- eslint-disable vue/valid-template-root -->
+<template lang="pug"></template>
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+// @vue/component
+export default DitoTypeComponent.register('spacer', {
+  defaultValue: () => undefined, // Callback to override `defaultValue: null`
+  excludeValue: true,
+  generateLabel: false
+})
+</script>

package/src/types/DitoTypeSwitch.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+DitoSwitch.dito-switch(
+  :id="dataPath"
+  ref="element"
+  v-model="value"
+  :labels="labels"
+  v-bind="attributes"
+)
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import { DitoSwitch } from '@ditojs/ui/src'
+
+// @vue/component
+export default DitoTypeComponent.register('switch', {
+  defaultValue: false,
+  defaultWidth: 'auto',
+
+  components: {
+    DitoSwitch
+  },
+
+  computed: {
+    labels() {
+      return this.schema.labels
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-switch {
+  .dito-switch-label {
+    font-size: $font-size-small;
+  }
+}
+</style>

package/src/types/DitoTypeText.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+DitoInput.dito-text(
+  :id="dataPath"
+  ref="element"
+  v-model="inputValue"
+  :type="inputType"
+  v-bind="attributes"
+)
+  template(#prefix)
+    DitoAffixes(
+      :items="schema.prefix"
+      position="prefix"
+      mode="input"
+      :disabled="disabled"
+      :parentContext="context"
+    )
+  template(#suffix)
+    DitoAffixes(
+      :items="schema.suffix"
+      position="suffix"
+      mode="input"
+      :clearable="showClearButton"
+      :disabled="disabled"
+      :inlineInfo="inlineInfo"
+      :parentContext="context"
+      @clear="clear"
+    )
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import TextMixin from '../mixins/TextMixin'
+import DitoAffixes from '../components/DitoAffixes.vue'
+import { DitoInput } from '@ditojs/ui/src'
+
+const maskedPassword = '****************'
+
+export default DitoTypeComponent.register(
+  [
+    'text',
+    'email',
+    'url',
+    'hostname',
+    'domain',
+    'tel',
+    'password',
+    'creditcard'
+  ],
+  // @vue/component
+  {
+    mixins: [TextMixin],
+    components: { DitoInput, DitoAffixes },
+    nativeField: true,
+    textField: true,
+    ignoreMissingValue: ({ schema }) => schema.type === 'password',
+
+    computed: {
+      inputType() {
+        return (
+          {
+            creditcard: 'text',
+            hostname: 'text',
+            domain: 'text'
+          }[this.type] ||
+          this.type
+        )
+      },
+
+      inputValue: {
+        get() {
+          return (
+            this.type === 'password' &&
+            this.value === undefined &&
+            !this.focused
+          )
+            ? maskedPassword
+            : this.value
+        },
+
+        set(value) {
+          this.value = value
+        }
+      }
+    },
+
+    methods: {
+      getValidations() {
+        const rule = {
+          email: 'email',
+          url: 'url',
+          hostname: 'hostname',
+          domain: 'domain',
+          password: 'password',
+          creditcard: 'creditcard'
+        }[this.type]
+        return rule ? { [rule]: true } : {}
+      }
+    }
+  }
+)
+</script>

package/src/types/DitoTypeTextarea.vue

@@ -0,0 +1,48 @@
+<template lang="pug">
+textarea.dito-textarea.dito-input(
+  :id="dataPath"
+  ref="element"
+  v-model="value"
+  v-bind="attributes"
+  :rows="lines"
+  :class="{ 'dito-textarea--resizable': resizable }"
+)
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import TextMixin from '../mixins/TextMixin'
+import { getSchemaAccessor } from '../utils/accessor.js'
+
+// @vue/component
+export default DitoTypeComponent.register('textarea', {
+  mixins: [TextMixin],
+  nativeField: true,
+  textField: true,
+
+  computed: {
+    lines() {
+      return this.schema.lines || 4
+    },
+
+    resizable: getSchemaAccessor('resizable', {
+      type: Boolean,
+      default: false
+    })
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-textarea {
+  display: block;
+  resize: none;
+  min-height: calc(1em * var(--line-height) + #{2 * $input-padding-ver});
+
+  &--resizable {
+    resize: vertical;
+  }
+}
+</style>