@ditojs/admin 2.0.4 → 2.1.0

package/src/styles/style.scss

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

package/src/types/DitoTypeButton.vue

@@ -0,0 +1,72 @@
+<template lang="pug">
+button.dito-button(
+  :id="dataPath"
+  ref="element"
+  :type="type"
+  :title="text"
+  :class="`dito-button-${verb}`"
+  v-bind="attributes"
+) {{ text }}
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+import { hasResource } from '../utils/resource.js'
+import { labelize } from '@ditojs/utils'
+
+export default DitoTypeComponent.register(
+  ['button', 'submit'],
+  // @vue/component
+  {
+    defaultValue: () => undefined, // Callback to override `defaultValue: null`
+    excludeValue: true,
+    defaultWidth: 'auto',
+    // TODO: Consider making this work nicely:
+    // omitFlexGrow: true,
+
+    computed: {
+      verb() {
+        return this.verbs[this.name] || this.name
+      },
+
+      text: getSchemaAccessor('text', {
+        type: String,
+        get(text) {
+          return text || labelize(this.verb)
+        }
+      }),
+
+      closeForm: getSchemaAccessor('closeForm', {
+        type: Boolean,
+        default: false
+      }),
+
+      // @override
+      events() {
+        const { onFocus, onBlur, onClick } = this
+        return { onFocus, onBlur, onClick }
+      }
+    },
+
+    methods: {
+      async submit(options) {
+        return this.resourceComponent?.submit(this, options)
+      },
+
+      async onClick() {
+        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()
+        }
+      }
+    }
+  }
+)
+</script>

package/src/types/{TypeCheckbox.vue → DitoTypeCheckbox.vue}

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

package/src/types/{TypeCheckboxes.vue → DitoTypeCheckboxes.vue}

@@ -3,34 +3,26 @@ ul.dito-checkboxes(
   :id="dataPath"
   :class="`dito-layout-${schema.layout || 'vertical'}`"
 )
-  li(v-for="option in options")
+  li(
+    v-for="option in options"
+  )
     label
       input.dito-checkbox(
         ref="element"
+        v-model="selectedOptions"
         type="checkbox"
         :value="getValueForOption(option)"
-        v-model="selectedOptions"
         v-bind="attributes"
       )
       | {{ getLabelForOption(option) }}
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-checkboxes
-    label
-      @extend %input-borderless
-    .dito-checkbox
-      margin-right: $form-spacing
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import OptionsMixin from '../mixins/OptionsMixin.js'
 
 // @vue/component
-export default TypeComponent.register('checkboxes', {
+export default DitoTypeComponent.register('checkboxes', {
   mixins: [OptionsMixin],
 
   nativeField: true,
@@ -43,9 +35,23 @@ export default TypeComponent.register('checkboxes', {
       },
 
       set(option) {
-        this.selectedValue = (option || [])
+        this.selectedValue = option || []
       }
     }
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-checkboxes {
+  label {
+    @extend %input-borderless;
+  }
+
+  .dito-checkbox {
+    margin-right: $form-spacing;
+  }
+}
+</style>

package/src/types/{TypeCode.vue → DitoTypeCode.vue}

@@ -1,49 +1,18 @@
 <template lang="pug">
 .dito-code(
-  ref="code"
   :id="dataPath"
+  ref="code"
   :style="style"
 )
 </template>
 
-<style lang="sass">
-  @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
-    &.dito-width-fill
-      width: auto
-    .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
-    .codeflask__textarea,
-    .codeflask__pre
-      // Use same padding as .dito-code
-      padding: $input-padding
-    .codeflask__textarea,
-    .codeflask__code,
-    .codeflask__lines
-      font-family: $font-family-mono
-      font-size: var(--font-size)
-      line-height: var(--line-height)
-    .codeflask__lines
-      padding: $input-padding
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import DomMixin from '../mixins/DomMixin.js'
 import CodeFlask from 'codeflask'
 
 // @vue/component
-export default TypeComponent.register('code', {
+export default DitoTypeComponent.register('code', {
   mixins: [DomMixin],
 
   computed: {
@@ -128,3 +97,46 @@ export default TypeComponent.register('code', {
   }
 })
 </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;
+
+  &.dito-width-fill {
+    width: auto;
+  }
+
+  .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;
+  }
+
+  .codeflask__textarea,
+  .codeflask__pre {
+    // Use same padding as .dito-code
+    padding: $input-padding;
+  }
+
+  .codeflask__textarea,
+  .codeflask__code,
+  .codeflask__lines {
+    font-family: $font-family-mono;
+    font-size: var(--font-size);
+    line-height: var(--line-height);
+  }
+
+  .codeflask__lines {
+    padding: $input-padding;
+  }
+}
+</style>

package/src/types/{TypeColor.vue → DitoTypeColor.vue}

@@ -1,16 +1,16 @@
 <template lang="pug">
-trigger.dito-color(
-  trigger="click"
+Trigger.dito-color(
   v-model:show="showPopup"
+  trigger="click"
 )
   template(#trigger)
     .dito-input(:class="{ 'dito-focus': showPopup }")
       input(
-        ref="element"
         :id="dataPath"
+        ref="element"
+        v-model="hexValue"
         type="input"
         size="8"
-        v-model="hexValue"
         v-bind="attributes"
       )
       .dito-color-preview.dito-inherit-focus(
@@ -19,62 +19,27 @@ trigger.dito-color(
         div(:style="{ background: `#${hexValue || '00000000'}` }")
       button.dito-button-clear.dito-button-overlay(
         v-if="showClearButton"
-        @click.stop="clear"
         :disabled="disabled"
+        @click.stop="clear"
       )
   template(#popup)
-    sketch-picker.dito-color-picker(
+    SketchPicker.dito-color-picker(
       v-model="colorValue"
-      :disable-alpha="!alpha"
-      :disable-fields="!inputs"
-      :preset-colors="presets"
+      :disableAlpha="!alpha"
+      :disableFields="!inputs"
+      :presetColors="presets"
     )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  $color-swatch-width: $pattern-transparency-size
-  $color-swatch-radius: $border-radius - $border-width
-  .dito-color
-    .dito-input
-      display: block
-      position: relative
-      input
-        box-sizing: border-box
-        font-variant-numeric: tabular-nums
-        padding-right: $color-swatch-width
-    .dito-button-clear
-      margin-right: $color-swatch-width
-    .dito-color-picker
-      margin: $popup-margin
-      border: $border-style
-      border-radius: $border-radius
-      background: $color-white
-      box-shadow: $shadow-window
-    .dito-color-preview
-      background: $pattern-transparency
-      border-left: $border-style
-      &,
-      div
-        position: absolute
-        width: $color-swatch-width
-        top: 0
-        right: 0
-        bottom: 0
-        border-top-right-radius: $color-swatch-radius
-        border-bottom-right-radius: $color-swatch-radius
-</style>
-
 <script>
 import tinycolor from 'tinycolor2'
 import { Sketch as SketchPicker } from '@lk77/vue3-color'
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import { Trigger } from '@ditojs/ui/src'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
 // @vue/component
-export default TypeComponent.register('color', {
+export default DitoTypeComponent.register('color', {
   components: { Trigger, SketchPicker },
 
   data() {
@@ -92,11 +57,14 @@ export default TypeComponent.register('color', {
 
       set(value) {
         const format = this.colorFormat
-        const key = {
-          // NOTE: vue3-color calls it 'hex', while tinycolor calls it 'hex6'
-          hex: value?.a < 1 ? 'hex8' : 'hex',
-          rgb: 'rgba'
-        }[format] || format
+        const key = (
+          {
+            // NOTE: vue3-color calls it 'hex', while tinycolor calls it 'hex6'
+            hex: value?.a < 1 ? 'hex8' : 'hex',
+            rgb: 'rgba'
+          }[format] ||
+          format
+        )
         if (key) {
           this.value = value[key]
         } else {
@@ -109,10 +77,14 @@ export default TypeComponent.register('color', {
     hexValue: {
       get() {
         if (this.value == null) {
+          // TODO: Fix side-effects
+          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
           this.convertedHexValue = null
         } else if (!this.focused) {
           const color = tinycolor(this.value)
           if (color.isValid()) {
+            // TODO: Fix side-effects
+            // eslint-disable-next-line
             this.convertedHexValue = color
               .toString(color.getAlpha() < 1 ? 'hex8' : 'hex6')
               .slice(1)
@@ -183,5 +155,52 @@ export default TypeComponent.register('color', {
     }
   }
 })
-
 </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: block;
+    position: relative;
+
+    input {
+      box-sizing: border-box;
+      font-variant-numeric: tabular-nums;
+      padding-right: $color-swatch-width;
+    }
+  }
+
+  .dito-button-clear {
+    margin-right: $color-swatch-width;
+  }
+
+  .dito-color-picker {
+    margin: $popup-margin;
+    border: $border-style;
+    border-radius: $border-radius;
+    background: $color-white;
+    box-shadow: $shadow-window;
+  }
+
+  .dito-color-preview {
+    background: $pattern-transparency;
+    border-left: $border-style;
+
+    &,
+    div {
+      position: absolute;
+      width: $color-swatch-width;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      border-top-right-radius: $color-swatch-radius;
+      border-bottom-right-radius: $color-swatch-radius;
+    }
+  }
+}
+</style>

package/src/types/{TypeComponent.vue → DitoTypeComponent.vue}

@@ -14,11 +14,11 @@ component(
 //   component: import('./component')
 // }
 
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import { resolveSchemaComponent } from '../utils/schema.js'
 
 // @vue/component
-export default TypeComponent.register('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`

package/src/types/DitoTypeComputed.vue

@@ -0,0 +1,54 @@
+<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 TypeMixin from '../mixins/TypeMixin.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, 'schema', {
+              // Modifying `this.data` below triggers another call of the
+              // `value` getter, so use a value of 2 for `resolveCounter` to
+              // return the resolved data twice.
+              resolveCounter: 2
+            })
+            // TODO: Fix side-effects
+            // eslint-disable-next-line
+            this.data[this.name] = value
+          }
+          return TypeMixin.computed.value.get.call(this)
+        },
+
+        set(value) {
+          TypeMixin.computed.value.set.call(this, value)
+        }
+      }
+    }
+  }
+)
+</script>

package/src/types/DitoTypeDate.vue

@@ -0,0 +1,64 @@
+<template lang="pug">
+.dito-date
+  component(
+    :is="getComponent(type)"
+    :id="dataPath"
+    ref="element"
+    v-model="dateValue"
+    :locale="locale"
+    :dateFormat="{ ...api.formats.date, ...dateFormat }"
+    v-bind="attributes"
+  )
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+import { DatePicker, TimePicker, DateTimePicker } from '@ditojs/ui/src'
+import { isDate } from '@ditojs/utils'
+
+export default DitoTypeComponent.register(
+  ['date', 'datetime', 'time'],
+  // @vue/component
+  {
+    components: { DatePicker, TimePicker, DateTimePicker },
+    // 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
+        }
+      },
+
+      dateFormat: getSchemaAccessor('dateFormat', {
+        type: Object,
+        default: null
+      })
+    },
+
+    methods: {
+      getComponent(type) {
+        return {
+          date: 'date-picker',
+          time: 'time-picker',
+          datetime: 'date-time-picker'
+        }[type]
+      }
+    },
+
+    processValue(schema, 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>