@ditojs/admin 2.0.4 → 2.1.0

package/src/types/DitoTypeMultiselect.vue

@@ -0,0 +1,434 @@
+<template lang="pug">
+.dito-multiselect(
+  :class=`{
+    'dito-multiselect-single': !multiple,
+    'dito-multiselect-multiple': multiple
+  }`
+)
+  VueMultiselect(
+    ref="element"
+    v-model="selectedOptions"
+    :showLabels="false"
+    :placeholder="placeholder"
+    tagPlaceholder="Press enter to add new tag"
+    :options="populate && activeOptions || []"
+    :customLabel="getLabelForOption"
+    :trackBy="optionValue"
+    :groupLabel="groupByLabel"
+    :groupValues="groupByOptions"
+    :multiple="multiple"
+    :taggable="taggable"
+    :searchable="searchable"
+    :internalSearch="!searchFilter"
+    :preserveSearch="!!searchFilter"
+    :clearOnSelect="!searchFilter"
+    :closeOnSelect="!stayOpen"
+    :loading="isLoading"
+    v-bind="attributes"
+    @open="onOpen"
+    @close="onClose"
+    @tag="onAddTag"
+    @search-change="onSearchChange"
+  )
+  button.dito-button-clear.dito-button-overlay(
+    v-if="showClearButton"
+    type="button"
+    :disabled="disabled"
+    @click="clear"
+  )
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import DitoContext from '../DitoContext.js'
+import TypeMixin from '../mixins/TypeMixin.js'
+import OptionsMixin from '../mixins/OptionsMixin.js'
+import VueMultiselect from 'vue-multiselect'
+import { getSchemaAccessor } from '../utils/accessor.js'
+
+// @vue/component
+export default DitoTypeComponent.register('multiselect', {
+  mixins: [OptionsMixin],
+  components: { VueMultiselect },
+
+  data() {
+    return {
+      searchedOptions: null,
+      populate: false
+    }
+  },
+
+  computed: {
+    selectedOptions: {
+      get() {
+        return this.multiple
+          ? (this.selectedValue || [])
+              .map(
+                // If an option cannot be found, we may be in taggable mode and
+                // can add it.
+                value => (
+                  this.getOptionForValue(value) || this.addTagOption(value)
+                )
+              )
+              // Filter out options that we couldn't match.
+              // TODO: We really should display an error instead
+              .filter(value => value)
+          : this.selectedOption
+      },
+
+      set(option) {
+        // Convert value to options object, since vue-multiselect can't map that
+        // itself unfortunately. `track-by` is used for :key mapping it seems.
+        this.selectedValue = this.multiple
+          ? (option || []).map(value => this.getValueForOption(value))
+          : this.getValueForOption(option)
+        this.onChange()
+      }
+    },
+
+    activeOptions() {
+      return this.searchedOptions || this.options
+    },
+
+    multiple: getSchemaAccessor('multiple', {
+      type: Boolean,
+      default: false
+    }),
+
+    searchable: getSchemaAccessor('searchable', {
+      type: Boolean,
+      default: false
+    }),
+
+    taggable: getSchemaAccessor('taggable', {
+      type: Boolean,
+      default: false
+    }),
+
+    stayOpen: getSchemaAccessor('stayOpen', {
+      type: Boolean,
+      default: false
+    }),
+
+    placeholder() {
+      const { placeholder, searchable, taggable } = this.schema
+      return (
+        placeholder || (
+          searchable && taggable
+            ? `Search or add a ${this.label}`
+            : searchable
+              ? `Select or search ${this.label}`
+              : undefined
+        )
+      )
+    }
+  },
+
+  mounted() {
+    if (this.autofocus) {
+      // vue-multiselect doesn't support the autofocus attribute. We need to
+      // handle it here.
+      this.focus()
+    }
+  },
+
+  methods: {
+    addTagOption(tag) {
+      if (this.taggable) {
+        const { optionLabel, optionValue } = this
+        const option =
+          optionLabel && optionValue
+            ? {
+                [optionLabel]: tag,
+                // TODO: Define a simple schema option to convert the tag value
+                // to something else, e.g. `toTag: tag => underscore(tag)`
+                [optionValue]: tag
+              }
+            : tag
+        this.options.push(option)
+        return option
+      }
+    },
+
+    focusElement() {
+      this.$refs.element.activate()
+    },
+
+    onOpen() {
+      this.populate = true
+    },
+
+    onClose() {
+      // Since we don't fire blur events while the multiselect is open (see
+      // below), we need to do it here, when it's actually closed.
+      if (this.focused) {
+        this.onBlur()
+      }
+    },
+
+    onBlur() {
+      if (!this.$refs.element.isOpen) {
+        TypeMixin.methods.onBlur.call(this)
+      }
+    },
+
+    onAddTag(tag) {
+      const option = this.addTagOption(tag)
+      if (option) {
+        this.value.push(this.getValueForOption(option))
+      }
+    },
+
+    async onSearchChange(query) {
+      if (this.searchFilter) {
+        if (query) {
+          // Set `searchedOptions` to an empty array, before it will be
+          // populated asynchronously with the actual results.
+          this.searchedOptions = []
+          this.searchedOptions = await this.resolveData(
+            () => this.searchFilter(new DitoContext(this, { query }))
+          )
+        } else {
+          // Clear `searchedOptions` when the query is cleared.
+          this.searchedOptions = null
+        }
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+@import 'vue-multiselect/dist/vue-multiselect.css';
+
+$spinner-width: $select-arrow-width;
+$tag-icon-width: 1.8em;
+$tag-margin: 2px;
+$tag-padding: 3px;
+$tag-line-height: 1em;
+
+.dito-multiselect {
+  position: relative;
+
+  .multiselect {
+    font-size: inherit;
+    min-height: inherit;
+    color: $color-black;
+  }
+
+  .multiselect__tags {
+    font-size: inherit;
+    overflow: auto;
+    min-height: inherit;
+    padding: 0 $spinner-width 0 0;
+    // So tags can float on multiple lines and have proper margins:
+    padding-bottom: $tag-margin;
+  }
+
+  .multiselect__tag {
+    float: left;
+    margin: $tag-margin 0 0 $tag-margin;
+    border-radius: 1em;
+    padding: $tag-padding $tag-icon-width $tag-padding 0.8em;
+    line-height: $tag-line-height;
+    height: calc($input-height - 2 * $tag-padding);
+  }
+
+  .multiselect__tags-wrap {
+    overflow: auto;
+    line-height: 0;
+  }
+
+  .multiselect__single,
+  .multiselect__placeholder,
+  .multiselect__input {
+    font-size: inherit;
+    line-height: inherit;
+    min-height: 0;
+    margin: 0 0 1px 0;
+    // Sadly, vue-select sets style="padding: ...;" in addition to using
+    // classes, so `!important` is necessary:
+    padding: $input-padding !important;
+    // So input can float next to tags and have proper margins with
+    // .multiselect__tags:
+    padding-bottom: 0 !important;
+    background: none;
+  }
+
+  .multiselect__placeholder,
+  .multiselect__input::placeholder {
+    color: $color-placeholder;
+  }
+
+  .multiselect--active {
+    .multiselect__placeholder {
+      // Don't use `display: none` to hide place-holder, as the layout would
+      // collapse.
+      display: inline-block;
+      visibility: hidden;
+    }
+  }
+
+  .multiselect__select,
+  .multiselect__spinner {
+    padding: 0;
+    // $border-width to prevent masking border with .multiselect__spinner
+    top: $border-width;
+    right: $border-width;
+    bottom: $border-width;
+    height: inherit;
+    border-radius: $border-radius;
+  }
+
+  .multiselect__select {
+    width: 0;
+    margin-right: calc($select-arrow-width / 2);
+
+    &::before {
+      @include arrow($select-arrow-size);
+
+      bottom: $select-arrow-bottom;
+      right: calc(-1 * $select-arrow-size / 2);
+    }
+  }
+
+  .multiselect__spinner {
+    width: $spinner-width;
+
+    &::before,
+    &::after {
+      // Change the width of the loading spinner
+      border-width: 3px;
+      border-top-color: $color-active;
+      inset: 0;
+      margin: auto;
+    }
+  }
+
+  .multiselect__option {
+    min-height: unset;
+    height: unset;
+    line-height: $tag-line-height;
+    padding: $input-padding;
+
+    &::after {
+      // Instruction text for options
+      padding: $input-padding;
+      line-height: $tag-line-height;
+    }
+  }
+
+  .multiselect__option--highlight {
+    &::after {
+      display: block;
+      position: absolute;
+      background: transparent;
+      color: $color-white;
+    }
+  }
+
+  .multiselect__option--disabled {
+    background: none;
+    color: $color-disabled;
+  }
+
+  .multiselect__tag-icon {
+    background: none;
+    border-radius: 1em;
+    width: $tag-icon-width;
+    margin: 0;
+
+    &::after {
+      @extend %icon-clear;
+
+      font-size: 0.9em;
+      color: $color-text-inverted;
+    }
+
+    &:hover::after {
+      color: $color-text;
+    }
+  }
+
+  .multiselect__option--selected {
+    background: $color-highlight;
+    color: $color-text;
+    font-weight: normal;
+
+    &.multiselect__option--highlight {
+      color: $color-text-inverted;
+    }
+  }
+
+  .multiselect__tag,
+  .multiselect__option--highlight {
+    background: $color-active;
+    color: $color-text-inverted;
+  }
+
+  .multiselect__tags,
+  .multiselect__content-wrapper {
+    border: $border-style;
+    border-radius: $border-radius;
+  }
+
+  &.dito-multiselect-single {
+    --input-width: 100%;
+  }
+
+  &.dito-multiselect-multiple {
+    --input-width: auto;
+  }
+
+  .multiselect--active {
+    .multiselect__single,
+    .multiselect__input {
+      // Sadly, vue-select sets `style="width"` in addition to using classes
+      // so `!important` is necessary:
+      width: var(--input-width) !important;
+    }
+
+    .multiselect__tags {
+      border-color: $color-active;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .multiselect__content-wrapper {
+      border: $border-width solid $color-active;
+      border-top-color: $border-color;
+      margin: -1px 0 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &.multiselect--above {
+      .multiselect__tags {
+        border-radius: $border-radius;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      .multiselect__content-wrapper {
+        border: $border-width solid $color-active;
+        border-bottom-color: $border-color;
+        margin: 0 0 -1px;
+        border-radius: $border-radius;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  &.dito-has-errors {
+    .multiselect__tags {
+      border-color: $color-error;
+    }
+  }
+
+  .dito-button-clear {
+    width: $spinner-width;
+  }
+}
+</style>

package/src/types/DitoTypeNumber.vue

@@ -0,0 +1,46 @@
+<template lang="pug">
+InputField.dito-number(
+  :id="dataPath"
+  ref="element"
+  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 { InputField } from '@ditojs/ui/src'
+
+export default DitoTypeComponent.register(
+  ['number', 'integer'],
+  // @vue/component
+  {
+    mixins: [NumberMixin],
+    components: { InputField },
+    nativeField: true,
+    textField: true,
+
+    computed: {
+      isInteger() {
+        return this.type === 'integer'
+      }
+    }
+  }
+)
+</script>
+
+<style lang="scss">
+// Only show spin buttons if the number component defines a step size.
+input[type='number']:not([step]) {
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+</style>

package/src/types/{TypeObject.vue → DitoTypeObject.vue}

@@ -9,9 +9,9 @@
     v-if="objectData"
   )
     //- Support the same rendering options as TypeList:
-    dito-schema-inlined(
+    DitoSchemaInlined(
       v-if="isInlined"
-        :label="objectLabel"
+      :label="objectLabel"
       :schema="getItemFormSchema(schema, objectData, context)"
       :dataPath="dataPath"
       :data="objectData"
@@ -36,7 +36,7 @@
       v-else
       v-html="getItemLabel(schema, objectData)"
     )
-  dito-edit-buttons(
+  DitoEditButtons(
     :creatable="creatable"
     :deletable="objectData && deletable"
     :editable="objectData && editable"
@@ -53,31 +53,14 @@
   )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-object
-    display: flex
-    border: $border-style
-    border-radius: $border-radius
-    margin: 0
-    padding: $form-spacing
-    box-sizing: border-box
-    .dito-object-content
-      flex: 0 1 100%
-    > .dito-buttons
-      flex: 1 0 0%
-      margin-left: $form-spacing
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import SourceMixin from '../mixins/SourceMixin.js'
 import { resolveSchemaComponent } from '../utils/schema.js'
 
 // @vue/component
-export default TypeComponent.register('object', {
+export default DitoTypeComponent.register('object', {
   mixins: [SourceMixin],
 
   getSourceType(type) {
@@ -101,18 +84,50 @@ export default TypeComponent.register('object', {
   },
 
   async processSchema(
-    api, schema, name, routes, level,
-    nested = false, flatten = false,
+    api,
+    schema,
+    name,
+    routes,
+    level,
+    nested = false,
+    flatten = false,
     process = null
   ) {
     await Promise.all([
       resolveSchemaComponent(schema),
       SourceMixin.processSchema(
-        api, schema, name, routes, level,
-        nested, flatten,
+        api,
+        schema,
+        name,
+        routes,
+        level,
+        nested,
+        flatten,
         process
       )
     ])
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-object {
+  display: flex;
+  border: $border-style;
+  border-radius: $border-radius;
+  margin: 0;
+  padding: $form-spacing;
+  box-sizing: border-box;
+
+  .dito-object-content {
+    flex: 0 1 100%;
+  }
+
+  > .dito-buttons {
+    flex: 1 0 0%;
+    margin-left: $form-spacing;
+  }
+}
+</style>

package/src/types/{TypePanel.vue → DitoTypePanel.vue}

@@ -1,8 +1,8 @@
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 
 // @vue/component
-export default TypeComponent.register('panel', {
+export default DitoTypeComponent.register('panel', {
   defaultValue: () => undefined, // Callback to override `defaultValue: null`
   excludeValue: true,
   generateLabel: false,

package/src/types/{TypeProgress.vue → DitoTypeProgress.vue}

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

package/src/types/{TypeRadio.vue → DitoTypeRadio.vue}

@@ -9,32 +9,36 @@ ul.dito-radio-buttons(
     label
       input.dito-radio-button(
         ref="element"
+        v-model="selectedValue"
         type="radio"
         :value="getValueForOption(option)"
-        v-model="selectedValue"
         v-bind="attributes"
       )
       | {{ getLabelForOption(option) }}
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-radio-buttons
-    label
-      @extend %input-borderless
-    .dito-radio-button
-      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('radio', {
+export default DitoTypeComponent.register('radio', {
   mixins: [OptionsMixin],
 
   nativeField: true
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-radio-buttons {
+  label {
+    @extend %input-borderless;
+  }
+
+  .dito-radio-button {
+    margin-right: $form-spacing;
+  }
+}
+</style>