@demos-europe/demosplan-ui 0.0.1

package/components/core/form/DpSelect.vue

@@ -0,0 +1,149 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<template>
+  <div>
+    <dp-label
+      v-if="label.text"
+      v-bind="{
+        ...label,
+        for: nameOrId,
+        required: required
+      }" /><!--
+ --><select
+      :id="nameOrId"
+      :required="required"
+      :name="name !== '' ? name : false"
+      class="o-form__control-select"
+      :class="[disabled ? ' bg-color--grey-light-2' : '', classes]"
+      :disabled="disabled"
+      @change="update">
+      <option
+        v-if="showPlaceholder"
+        data-id="placeholder"
+        disabled
+        value=""
+        :selected="selected === ''">
+        {{ Translator.trans(placeholder) }}
+      </option>
+      <option
+        v-for="(option, idx) in options"
+        :selected="option.value === selected"
+        :value="option.value"
+        :key="idx">
+        {{ Translator.trans(option.label) }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+import { DpLabel } from 'demosplan-ui/components'
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+
+export default {
+  name: 'DpSelect',
+
+  components: {
+    DpLabel
+  },
+
+  mixins: [prefixClassMixin],
+
+  /*
+   * Customize the v-model binding names
+   * see https://learn.adamwathan.com/advanced-vue/customizing-controlled-component-bindings
+   */
+  model: {
+    prop: 'selected',
+    event: 'select'
+  },
+
+  props: {
+    classes: {
+      type: [Array, String],
+      required: false,
+      default: ''
+    },
+
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    id: {
+      type: String,
+      required: false,
+      default: () => ''
+    },
+
+    label: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+      validator: (prop) => {
+        return Object.keys(prop).every(key => ['bold', 'hint', 'text', 'tooltip'].includes(key))
+      }
+    },
+
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    // Need label and value
+    options: {
+      required: true,
+      type: Array
+    },
+
+    placeholder: {
+      type: String,
+      required: false,
+      default: 'warning.select.entry'
+    },
+
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    showPlaceholder: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+
+    selected: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  computed: {
+    nameOrId () {
+      /*
+       * As long as there is no necessity of having the id to differ from name,
+       * it should not be required to specify it.
+       */
+      return this.id === '' ? this.name : this.id
+    }
+  },
+
+  methods: {
+    update (event) {
+      this.$emit('select', event.target.value)
+    }
+  }
+}
+</script>

package/components/core/form/DpTextArea.vue

@@ -0,0 +1,152 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<template>
+  <div :class="{ 'flex flex-column': growToParent }">
+    <dp-label
+      v-if="label !== ''"
+      v-bind="labelProps" /><!--
+ --><textarea
+      :name="name"
+      :id="id"
+      class="o-form__control-textarea"
+      :class="{ 'flex-grow': growToParent, 'height-60': reducedHeight }"
+      :data-dp-validate-if="dataDpValidateIf"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      v-bind="allowedAttributes"
+      v-model="currentValue"
+      @input="$emit('input', currentValue)"
+      :required="required" />
+  </div>
+</template>
+
+<script>
+import { attributes, length } from 'demosplan-ui/shared/props'
+import { maxlengthHint } from 'demosplan-ui/utils/lengthHint'
+
+export default {
+  name: 'DpTextArea',
+
+  components: {
+    DpLabel: async () => {
+      const { DpLabel } = await import('demosplan-ui/components')
+      return DpLabel
+    }
+  },
+
+  props: {
+    attributes: attributes('textarea'),
+
+    /**
+     * Use to conditionally validate a required textarea field.
+     */
+    dataDpValidateIf: {
+      type: [Boolean, String],
+      required: false,
+      default: false
+    },
+
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * If enabled, classes are applied to let element grow to 100% height of its parent element.
+     */
+    growToParent: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    hint: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    id: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    maxlength: length,
+
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Display the form field with reduced height (60px).
+     */
+    reducedHeight: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      currentValue: this.value
+    }
+  },
+
+  computed: {
+    allowedAttributes () {
+      const attrs = {}
+      this.attributes.forEach(attr => {
+        attr = attr.split('=')
+        attrs[attr[0]] = attr[1]
+      })
+      return attrs
+    },
+
+    labelProps () {
+      return {
+        for: this.id,
+        hint: this.maxlength ? [this.hint, maxlengthHint(this.currentValue.length, this.maxlength)] : this.hint,
+        required: this.required,
+        text: this.label,
+        tooltip: this.tooltip
+      }
+    }
+  },
+
+  watch: {
+    value () {
+      this.currentValue = this.value
+    }
+  }
+}
+</script>

package/components/core/form/DpTimePicker.vue

@@ -0,0 +1,374 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<template>
+  <div
+    class="c-timepicker display--inline-block"
+    v-click-outside="closeFlyout"
+    @keydown.esc="closeFlyout"
+    @keydown.enter="e => handleEnter(e)">
+    <dp-label
+      v-if="label !== ''"
+      for="timeInput"
+      :text="label" />
+    <dp-resettable-input
+      v-if="!isMobileDevice"
+      :id="`timeInput:${id}`"
+      :ref="`timeInput:${id}`"
+      class="width-100"
+      button-variant="small"
+      default-value="00:00"
+      :input-attributes="{ disabled: disabled, autocomplete: 'off' }"
+      @reset="handleReset"
+      @enter="val => handleEnter(val)"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @input="val => handleInput(val)"
+      pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]"
+      :value="currentTime" />
+    <dp-input
+      v-else
+      :id="`timeInput:${id}`"
+      class="width-100"
+      type="time"
+      pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]"
+      :value="currentTime"
+      @input="val => handleInput(val)"
+      autocomplete="off" />
+
+    <div
+      ref="flyout"
+      v-show="showFlyout"
+      class="flex flex-items-start flex-content-evenly c-timepicker__flyout font-size-small"
+      tabindex="0">
+      <ul class="u-m-0_25 u-mr-0 u-pr-0_25 overflow-y-scroll height-130">
+        <li
+          v-for="hour in availableHours"
+          :key="`${id}:hour:${hour}`"
+          class="c-timepicker__flyout-item"
+          :class="{'is-selected': currentHour === hour}">
+          <button
+            @click.prevent="handleInput(hour, 'hour')"
+            class="btn--blank u-ph-0_125 u-pv-0_125"
+            tabindex="0"
+            :value="hour"
+            :id="`${id}:hour:${hour}`">
+            {{ hour }}
+          </button>
+        </li>
+      </ul>
+      <ul
+        class="u-m-0_25 height-130"
+        :class="minutes.length > 5 ? 'overflow-y-scroll' : ''">
+        <li
+          v-for="minute in availableMinutes"
+          :key="`${id}:minute:${minute}`"
+          class="c-timepicker__flyout-item"
+          :class="{'is-selected': currentMinutes === minute}">
+          <button
+            @click.prevent="handleInput(minute, 'minute')"
+            tabindex="0"
+            class="btn--blank u-ph-0_125 u-pv-0_125"
+            :value="minute"
+            :id="`${id}:minute:${minute}`">
+            {{ minute }}
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ClickOutside from 'vue-click-outside'
+import isMobile from 'ismobilejs'
+
+const DEFAULT_TIME = '00:00'
+
+export default {
+  name: 'DpTimePicker',
+
+  components: {
+    DpInput: async () => {
+      const { DpInput } = await import('demosplan-ui/components')
+      return DpInput
+    },
+    DpLabel: async () => {
+      const { DpLabel } = await import('demosplan-ui/components')
+      return DpLabel
+    },
+    DpResettableInput: () => import('../DpResettableInput')
+  },
+
+  directives: {
+    ClickOutside
+  },
+
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    id: {
+      type: String,
+      required: true
+    },
+
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    minuteSteps: {
+      type: Number,
+      required: false,
+      default: 15
+    },
+
+    /**
+     * Minimum allowed value in the format 'hh:mm'
+     */
+    minValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    // Expects ISO datetime
+    value: {
+      type: String,
+      required: false,
+      default: DEFAULT_TIME
+    }
+  },
+
+  data: () => ({
+    currentHour: '00',
+    currentMinutes: '00',
+    isInputFocused: false,
+    showFlyout: false
+  }),
+
+  computed: {
+    availableHours () {
+      if (this.minValue !== '') {
+        const values = this.minValue.split(':')
+        const minHour = values[0]
+        return this.hours.filter(h => this.availableMinutes.length ? h >= minHour : h > minHour)
+      }
+      return this.hours
+    },
+
+    availableMinutes () {
+      if (this.minValue !== '') {
+        const values = this.minValue.split(':')
+        const minHour = values[0]
+        const minMinutes = values[1]
+        if (this.currentHour === minHour) {
+          return this.minutes.filter(m => m >= minMinutes)
+        } else {
+          return this.minutes
+        }
+      }
+      return this.minutes
+    },
+
+    currentTime () {
+      return `${this.currentHour}:${this.currentMinutes}`
+    },
+
+    hours () {
+      let hours = Array.from({ length: 24 }, (v, k) => k)
+      hours = hours.map(h => {
+        return h.toString().padStart(2, '0')
+      })
+      return hours
+    },
+
+    isHour () {
+      return e => e.target.id.includes('hour')
+    },
+
+    isMinute () {
+      return e => e.target.id.includes('minute')
+    },
+
+    isMobileDevice () {
+      return isMobile(window.navigator).any
+    },
+
+    inputAttributes () {
+      return this.isMobileDevice ? { disabled: this.disabled, autocomplete: 'off', type: 'time' } : { disabled: this.disabled, autocomplete: 'off' }
+    },
+
+    minutes () {
+      let minutes = Array.from({ length: 60 }, (v, k) => k)
+      minutes = minutes.filter(m => !(m % this.minuteSteps))
+      minutes = minutes.map(h => {
+        return h.toString().padStart(2, '0')
+      })
+      return minutes
+    }
+  },
+
+  watch: {
+    isInputFocused () {
+      const input = this.$refs[`timeInput:${this.id}`].$el
+      if (this.isInputFocused) {
+        input.addEventListener('keydown', this.handleShiftDown)
+      } else {
+        input.removeEventListener('keydown', this.handleShiftDown)
+      }
+    },
+
+    showFlyout () {
+      if (this.showFlyout) {
+        document.body.addEventListener('keydown', this.handleKeyDown)
+      } else {
+        document.body.removeEventListener('keydown', this.handleKeyDown)
+      }
+    },
+
+    value () {
+      this.updateTime(this.value)
+    }
+  },
+
+  methods: {
+    closeFlyout () {
+      if (this.showFlyout) {
+        this.toggleFlyout()
+      }
+    },
+
+    focusHour () {
+      const hourId = `hour:${this.currentHour}`
+      const hourEl = document.getElementById(hourId)
+      hourEl.focus()
+    },
+
+    handleBlur () {
+      if (this.isInputFocused) {
+        this.toggleInputFocus()
+      }
+    },
+
+    /**
+     * If a minValue is set, and the minHour is selected, and the currently selected minutes are not included in the
+     * available minutes, we set the selected minutes to the first value from availableMinutes
+     * @param hour
+     * @param minutes
+     * @return {*}
+     */
+    handleCurrentMinutesUnavailable (hour, minutes) {
+      if (this.minValue !== '') {
+        const minValues = this.minValue.split(':')
+        const minHour = minValues[0]
+
+        if (hour === minHour && !this.availableMinutes.includes(minutes)) {
+          minutes = this.availableMinutes[0]
+        }
+      }
+
+      return minutes
+    },
+
+    handleEnter (val) {
+      if (val.target) {
+        // On enter, there is a pointer event setting the value of the currently active element (why tho), so we only set the complementary value here
+        if (this.isHour(val)) {
+          this.handleInput(this.currentMinutes, 'minute')
+        }
+        if (this.isMinute(val)) {
+          this.handleInput(this.currentHour, 'hour')
+        }
+      } else {
+        this.handleInput(val)
+      }
+
+      if (this.showFlyout) {
+        this.toggleFlyout()
+      }
+    },
+
+    handleFocus () {
+      if (!this.showFlyout) {
+        this.toggleFlyout()
+      }
+
+      if (!this.isInputFocused) {
+        this.toggleInputFocus()
+      }
+    },
+
+    handleInput (val, type = '') {
+      if (type === '') {
+        this.updateTime(val)
+      }
+      if (type === 'hour') {
+        this.setHour(val)
+      }
+      if (type === 'minute') {
+        this.setMinutes(val)
+      }
+      this.$emit('input', this.currentTime)
+    },
+
+    handleKeyDown (e) {
+      if (e.key === 'Escape') {
+        this.toggleFlyout()
+      }
+
+      if ((e.key === ' ')) {
+        e.preventDefault()
+        this.handleEnter()
+      }
+    },
+
+    handleReset () {
+      this.handleInput(DEFAULT_TIME)
+    },
+
+    handleShiftDown (e) {
+      if (e.shiftKey && (e.key === 'Down' || e.key === 'ArrowDown')) {
+        this.focusHour()
+      }
+    },
+
+    setHour (hour) {
+      this.currentHour = hour
+    },
+
+    setMinutes (minutes) {
+      this.currentMinutes = minutes
+    },
+
+    toggleFlyout () {
+      this.showFlyout = !this.showFlyout
+    },
+
+    toggleInputFocus () {
+      this.isInputFocused = !this.isInputFocused
+    },
+
+    updateTime (val) {
+      const values = val.split(':')
+      const hour = values[0]
+
+      const minutes = this.handleCurrentMinutesUnavailable(hour, values[1])
+
+      this.setHour(hour)
+      this.setMinutes(minutes)
+    }
+  }
+}
+</script>