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

package/src/types/DitoTypeCode.vue

@@ -0,0 +1,199 @@
+<template lang="pug">
+.dito-code(
+  :id="dataPath"
+  :style="style"
+)
+  .dito-code__editor(ref="editor")
+  .dito-resize(
+    v-if="resizable"
+    @mousedown.stop.prevent="onDragResize"
+  )
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import DomMixin from '../mixins/DomMixin.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+import CodeFlask from 'codeflask'
+
+// @vue/component
+export default DitoTypeComponent.register('code', {
+  mixins: [DomMixin],
+
+  data() {
+    return {
+      height: null
+    }
+  },
+
+  computed: {
+    lines: getSchemaAccessor('lines', {
+      type: Number,
+      default: 3
+    }),
+
+    language: getSchemaAccessor('language', {
+      type: String,
+      default: 'javascript'
+    }),
+
+    indentSize: getSchemaAccessor('indentSize', {
+      type: Number,
+      default: 2
+    }),
+
+    resizable: getSchemaAccessor('resizable', {
+      type: Boolean,
+      default: false
+    }),
+
+    style() {
+      return {
+        height: this.height || `calc(${this.lines}em * var(--line-height))`
+      }
+    }
+  },
+
+  mounted() {
+    const flask = new CodeFlask(this.$refs.editor, {
+      language: this.language,
+      indentSize: this.indentSize,
+      lineNumbers: false
+    })
+
+    let changed = false
+    let ignoreWatch = false
+    let ignoreUpdate = false
+
+    const onChange = () => {
+      if (!this.focused && changed) {
+        changed = false
+        this.onChange()
+      }
+    }
+
+    const onFocus = () => this.onFocus()
+
+    const onBlur = () => {
+      this.onBlur()
+      onChange()
+    }
+
+    this.domOn(this.$refs.editor.querySelector('textarea'), {
+      focus: onFocus,
+      blur: onBlur
+    })
+
+    const setCode = code => {
+      if (code !== flask.code) {
+        ignoreUpdate = true
+        flask.updateCode(code)
+      }
+    }
+
+    const setValue = value => {
+      if (value !== this.value) {
+        ignoreWatch = true
+        this.value = value
+        changed = true
+        onChange()
+      }
+    }
+
+    flask.onUpdate(value => {
+      if (ignoreUpdate) {
+        ignoreUpdate = false
+      } else {
+        setValue(value)
+      }
+    })
+
+    this.$watch('value', value => {
+      if (ignoreWatch) {
+        ignoreWatch = false
+      } else {
+        setCode(value || '')
+      }
+    })
+
+    this.$watch('language', language => {
+      flask.updateLanguage(language)
+    })
+
+    setCode(this.value || '')
+  },
+
+  methods: {
+    focusElement() {
+      this.$el.querySelector('textarea')?.focus()
+    },
+
+    blurElement() {
+      this.$el.querySelector('textarea')?.blur()
+    },
+
+    onDragResize(event) {
+      const getPoint = ({ clientX: x, clientY: y }) => ({ x, y })
+
+      let prevY = getPoint(event).y
+      let height = parseFloat(getComputedStyle(this.$el).height)
+
+      const mousemove = event => {
+        const { y } = getPoint(event)
+        height += y - prevY
+        prevY = y
+        this.height = `${Math.max(height, 0)}px`
+      }
+
+      const handlers = this.domOn(document, {
+        mousemove,
+
+        mouseup(event) {
+          mousemove(event)
+          handlers.remove()
+        }
+      })
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-code {
+  @extend %input;
+
+  position: relative;
+  // For proper sizing of content along with :style="style" setting above,
+  // for proper line-height calculation.
+  padding: $input-padding;
+  min-height: calc(1em * var(--line-height) + 2 * $input-padding-ver);
+
+  .codeflask {
+    background: none;
+    // Ignore the parent padding defined above which is only needed to set
+    // the desired height with :style="style".
+    top: 0;
+    left: 0;
+
+    &__textarea,
+    &__pre {
+      // Use same padding as .dito-code
+      padding: $input-padding;
+    }
+
+    &__textarea,
+    &__code,
+    &__lines {
+      font-family: $font-family-mono;
+      font-size: var(--font-size);
+      line-height: var(--line-height);
+    }
+
+    &__lines {
+      padding: $input-padding;
+    }
+  }
+}
+</style>

package/src/types/DitoTypeColor.vue

@@ -0,0 +1,272 @@
+<template lang="pug">
+DitoTrigger.dito-color(
+  v-model:show="showPopup"
+  trigger="focus"
+)
+  template(#trigger)
+    DitoInput(
+      :id="dataPath"
+      ref="element"
+      v-model="hexValue"
+      type="input"
+      size="8"
+      :focused="showPopup"
+      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(#append)
+            .dito-color__preview(
+              v-if="value"
+            )
+              div(:style="{ background: `#${hexValue || '00000000'}` }")
+  template(#popup)
+    SketchPicker.dito-color__picker(
+      v-model="colorValue"
+      :disableAlpha="!alpha"
+      :disableFields="!inputs"
+      :presetColors="presets"
+    )
+</template>
+
+<script>
+import tinycolor from 'tinycolor2'
+import { Sketch as SketchPicker } from '@lk77/vue3-color'
+import { isObject, isString } from '@ditojs/utils'
+import { DitoTrigger, DitoInput } from '@ditojs/ui/src'
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import DitoAffixes from '../components/DitoAffixes.vue'
+import { getSchemaAccessor } from '../utils/accessor.js'
+
+// Monkey-patch the `SketchPicker's` `hex` computed property to return lowercase
+// hex values instead of uppercase ones.
+const { hex } = SketchPicker.computed
+SketchPicker.computed.hex = function () {
+  return hex.call(this).toLowerCase()
+}
+
+// @vue/component
+export default DitoTypeComponent.register('color', {
+  components: { DitoTrigger, DitoInput, DitoAffixes, SketchPicker },
+
+  data() {
+    return {
+      showPopup: false,
+      convertedValue: null
+    }
+  },
+
+  computed: {
+    canUpdateValue() {
+      return !this.focused || this.readonly
+    },
+
+    colorValue: {
+      get() {
+        return (
+          this.convertedValue ||
+          this.value ||
+          (this.colorFormat === 'hex' ? '' : {})
+        )
+      },
+
+      set(value) {
+        this.value = convertColor(value, this.colorFormat)
+      }
+    },
+
+    hexValue: {
+      get() {
+        const color = tinycolor(this.value)
+        return color.isValid()
+          ? color
+              .toString(color.getAlpha() < 1 ? 'hex8' : 'hex6')
+              .slice(1)
+              .toLowerCase()
+          : null
+      },
+
+      set(value) {
+        const color = tinycolor(value)
+        if (color.isValid()) {
+          const convertedValue = convertColor(value, this.colorFormat)
+          if (this.canUpdateValue) {
+            this.value = convertedValue
+          } else {
+            // Store to change later, once `canUpdateValue` is true again.
+            // See `watch` below.
+            this.convertedValue = convertedValue
+          }
+        }
+      }
+    },
+
+    // TODO: `format` clashes with TypeMixin.format()`, which shall be renamed
+    // soon to `formatValue()`. Rename `colorFormat` back to `format` after.
+    colorFormat: getSchemaAccessor('format', {
+      type: String,
+      default: 'hex'
+    }),
+
+    // TODO: Rename to `showAlpha`?
+    alpha: getSchemaAccessor('alpha', {
+      type: Boolean,
+      default: false
+    }),
+
+    // TODO: Rename to `showInputs`?
+    inputs: getSchemaAccessor('inputs', {
+      type: Boolean,
+      default: true
+    }),
+
+    presets: getSchemaAccessor('presets', {
+      type: Array,
+      default: [
+        '#ffffff',
+        '#c3c3c3',
+        '#7f7f7f',
+        '#000000',
+        '#880015',
+        '#ed1c24',
+        '#ff7f27',
+        '#fff200',
+
+        '#22b14c',
+        '#00a2e8',
+        '#3f48cc',
+        '#a349a4',
+        '#b97a57',
+        '#ffaec9',
+        '#ffc90e',
+        '#00000000'
+      ]
+    })
+  },
+
+  watch: {
+    value: 'onChange',
+
+    canUpdateValue(canUpdateValue) {
+      if (canUpdateValue && this.convertedValue !== null) {
+        this.value = this.convertedValue
+        this.convertedValue = null
+      }
+    }
+  }
+})
+
+function convertColor(color, format) {
+  return isObject(color) // a vue3-color color object
+    ? toVue3ColorFormat(color, format)
+    : toTinyColorFormat(tinycolor(color), format)
+}
+
+function toVue3ColorFormat(color, format) {
+  const value =
+    color[
+      {
+        hex: color?.a < 1 ? 'hex8' : 'hex',
+        rgb: 'rgba'
+      }[format] ||
+      format
+    ]
+  return isString(value) && value[0] === '#' ? value.toLowerCase() : value
+}
+
+// This should really be in tinycolor, but it only has the string equivalent
+// of it.
+function toTinyColorFormat(color, format) {
+  switch (format) {
+    case 'rgb':
+      return color.toRgb()
+    case 'prgb':
+      return color.toPercentageRgb()
+    case 'name':
+      return color.toName()
+    case 'hsl':
+      return color.toHsl()
+    case 'hsv':
+      return color.toHsv()
+    case 'hex3':
+      return `#${color.toHex(true)}`
+    case 'hex4':
+      return `#${color.toHex8(true)}`
+    case 'hex8':
+      return `#${color.toHex8()}`
+    case 'hex':
+    case 'hex6':
+    default:
+      // Preserve alpha channel if present
+      return color.getAlpha() < 1
+        ? `#${color.toHex8()}`
+        : `#${color.toHex()}`
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+$color-swatch-width: $pattern-transparency-size;
+$color-swatch-radius: $border-radius - $border-width;
+
+.dito-color {
+  .dito-input {
+    display: flex;
+    position: relative;
+
+    input {
+      box-sizing: border-box;
+      font-variant-numeric: tabular-nums;
+      padding-right: $color-swatch-width;
+    }
+  }
+
+  &__picker {
+    margin: $popup-margin;
+    border: $border-style;
+    border-radius: $border-radius;
+    background: $color-white;
+    box-shadow: $shadow-window;
+  }
+
+  &__preview {
+    background: $pattern-transparency;
+    margin: (-$input-padding-ver) (-$input-padding-hor);
+    margin-left: 0;
+    border-left: $border-style;
+
+    &,
+    div {
+      width: $color-swatch-width;
+      height: calc($input-height - 2 * $border-width);
+      border-top-right-radius: $color-swatch-radius;
+      border-bottom-right-radius: $color-swatch-radius;
+    }
+  }
+
+  // Inherit input focus state
+  .dito-input:focus-within &__preview,
+  .dito-input--focus &__preview {
+    border-left-color: $color-active;
+  }
+}
+</style>

package/src/types/DitoTypeComponent.vue

@@ -0,0 +1,31 @@
+<template lang="pug">
+component(
+  :is="schema.component"
+  v-bind="$props"
+)
+</template>
+
+<script>
+// This is the general purpose 'component' type, which can resolve to any custom
+// component through `schema.component`, see `resolveSchemaComponent()`. This
+// can be used to nest arbitrary vue components in schema:
+// {
+//   type: 'component',
+//   component: import('./component')
+// }
+
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import { resolveSchemaComponent } from '../utils/schema.js'
+
+// @vue/component
+export default DitoTypeComponent.register('component', {
+  // Override the standard `defaultValue: null` to not set any data for custom
+  // components, unless they provide a default value.
+  defaultValue: () => undefined, // Callback to override `defaultValue: null`
+  ignoreMissingValue: ({ schema }) => !('default' in schema),
+
+  async processSchema(api, schema) {
+    await resolveSchemaComponent(schema)
+  }
+})
+</script>

package/src/types/DitoTypeComputed.vue

@@ -0,0 +1,50 @@
+<template lang="pug">
+//- TODO: Find a better way to trigger evaluation of `value` that dose not
+//- involve actually rendering it when the component is not visible.
+input.dito-text.dito-input(
+  :id="dataPath"
+  ref="element"
+  :name="name"
+  type="text"
+  :value="value"
+  :disabled="disabled"
+  :readonly="true"
+)
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import ValueMixin from '../mixins/ValueMixin.js'
+import DataMixin from '../mixins/DataMixin.js'
+
+export default DitoTypeComponent.register(
+  ['computed', 'data', 'hidden'],
+  // @vue/component
+  {
+    mixins: [DataMixin],
+
+    defaultValue: () => undefined, // Callback to override `defaultValue: null`
+    defaultVisible: false,
+
+    computed: {
+      value: {
+        get() {
+          const { schema } = this
+          if (schema.data || schema.dataPath) {
+            const value = this.handleDataSchema(schema, 'value')
+            // TODO: Fix side-effects
+            // eslint-disable-next-line max-len
+            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+            this.data[this.name] = value
+          }
+          return ValueMixin.computed.value.get.call(this)
+        },
+
+        set(value) {
+          ValueMixin.computed.value.set.call(this, value)
+        }
+      }
+    }
+  }
+)
+</script>

package/src/types/DitoTypeDate.vue

@@ -0,0 +1,99 @@
+<template lang="pug">
+.dito-date
+  component(
+    :is="getComponent(type)"
+    :id="dataPath"
+    ref="element"
+    v-model="dateValue"
+    :locale="locale"
+    :format="formats"
+    v-bind="attributes"
+  )
+    template(#prefix)
+      DitoAffixes(
+        :items="schema.prefix"
+        position="prefix"
+        mode="input"
+        absolute
+        :disabled="disabled"
+        :parentContext="context"
+      )
+    template(#suffix)
+      DitoAffixes(
+        :items="schema.suffix"
+        position="suffix"
+        mode="input"
+        absolute
+        :clearable="showClearButton"
+        :disabled="disabled"
+        :inlineInfo="inlineInfo"
+        :parentContext="context"
+        @clear="clear"
+      )
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+import DitoAffixes from '../components/DitoAffixes.vue'
+import {
+  DitoDatePicker,
+  DitoTimePicker,
+  DitoDateTimePicker
+} from '@ditojs/ui/src'
+import { isDate, assignDeeply } from '@ditojs/utils'
+
+export default DitoTypeComponent.register(
+  ['date', 'datetime', 'time'],
+  // @vue/component
+  {
+    components: { DitoAffixes },
+    // TODO: This is only here so we get placeholder added. Come up with a
+    // better way to support attributes per component (a list of actually
+    // supported attributes)
+    nativeField: true,
+    textField: true,
+
+    computed: {
+      dateValue: {
+        get() {
+          const { value } = this
+          return value ? new Date(value) : value
+        },
+
+        set(value) {
+          this.value = value
+        }
+      },
+
+      // TODO: Rename to `format`, once `schema.format()` was removed to
+      // `formatValue()`.
+      formats: getSchemaAccessor('formats', {
+        type: Object,
+        default: null,
+        get(formats) {
+          const { date, time } = assignDeeply({}, this.api.formats, formats)
+          return {
+            date: ['date', 'datetime'].includes(this.type) ? date : null,
+            time: ['time', 'datetime'].includes(this.type) ? time : null
+          }
+        }
+      })
+    },
+
+    methods: {
+      getComponent(type) {
+        return {
+          date: DitoDatePicker,
+          time: DitoTimePicker,
+          datetime: DitoDateTimePicker
+        }[type]
+      }
+    },
+
+    processValue({ value }) {
+      return isDate(value) ? value.toISOString() : value
+    }
+  }
+)
+</script>

package/src/types/DitoTypeLabel.vue

@@ -0,0 +1,23 @@
+<template lang="pug">
+DitoLabel.dito-label-component(
+  :label="value"
+  :dataPath="dataPath"
+)
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+
+// @vue/component
+export default DitoTypeComponent.register('label', {
+  excludeValue: true,
+  generateLabel: false
+})
+</script>
+
+<style lang="scss">
+.dito-label-component {
+  display: flex;
+  height: 2em;
+}
+</style>