@demos-europe/demosplan-ui 0.0.1

package/components/core/form/DpDatetimePicker.vue

@@ -0,0 +1,194 @@
+<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 !== ''"
+      :for="`datePicker:${id}`"
+      :hint="hint"
+      :required="required"
+      :text="label" />
+    <div class="o-form__control-wrapper o-form__group">
+      <dp-datepicker
+        class="o-form__group-item shrink"
+        :calendars-after="2"
+        :disabled="disabled"
+        :id="`datePicker:${id}`"
+        :max-date="maxDate"
+        :min-date="minDate"
+        :required="required"
+        v-model="date"
+        @input="$emit('input', currentDatetime)" />
+      <dp-time-picker
+        class="o-form__group-item"
+        :disabled="disabled"
+        :id="`timePicker:${id}`"
+        v-model="time"
+        :min-value="minTime"
+        @input="$emit('input', currentDatetime)" />
+      <input
+        type="hidden"
+        :disabled="disabled"
+        :name="name"
+        :value="currentDatetime"
+        v-if="hiddenInput && name">
+    </div>
+  </div>
+</template>
+
+<script>
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import dayjs from 'dayjs'
+import DpDatepicker from './DpDatepicker'
+import DpTimePicker from './DpTimePicker'
+
+dayjs.extend(customParseFormat)
+
+export default {
+  name: 'DpDatetimePicker',
+
+  components: {
+    DpDatepicker,
+    DpLabel: async () => {
+      const { DpLabel } = await import('demosplan-ui/components')
+      return DpLabel
+    },
+    DpTimePicker
+  },
+
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Add a hidden input field to submit value of `currentDatetime`
+     * if used in a form that actually gets submitted.
+     */
+    hiddenInput: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    hint: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /*
+     * The ids of date and time pickers are derived from this prop.
+     */
+    id: {
+      type: String,
+      required: true
+    },
+
+    /*
+     * If set, a label is rendered above the datetime picker. However this is not exactly
+     * best practice in terms of accessibility right now, since this label points to none
+     * of the date or time inputs.
+     */
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /*
+     * Set a maxDate for the date field. Since this is passed to the datepicker component,
+     * in contrast to the `value` field a string in the format of 'dd.mm.yyyy' is expected.
+     */
+    maxDate: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /*
+     * Set a minDate for the date field. Since this is passed to the datepicker component,
+     * in contrast to the `value` field a string in the format of 'dd.mm.yyyy' is expected.
+     */
+    minDate: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    // Used in conjunction with `hiddenInput` to render a hidden input field with this name.
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    // Expects ISO datetime
+    value: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      date: '',
+      time: '00:00'
+    }
+  },
+
+  computed: {
+    currentDatetime () {
+      const parsedDateTime = dayjs(`${this.date} ${this.time}`, 'DD.MM.YYYY HH:mm')
+      return parsedDateTime.isValid() ? parsedDateTime.format() : ''
+    },
+
+    isCurrentDateSelected () {
+      return this.minDate !== '' ? this.date === this.minDate : false
+    },
+
+    /**
+     * Set minTime only if the current day is selected in the datepicker
+     * @return {string|string}
+     */
+    minTime () {
+      return this.isCurrentDateSelected ? new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }) : ''
+    }
+  },
+
+  watch: {
+    value: function (newVal) {
+      this.setDatetime(newVal)
+    }
+  },
+
+  methods: {
+    setDatetime (datetime) {
+      const parsedDateTime = dayjs(datetime)
+      if (parsedDateTime.isValid()) {
+        this.date = parsedDateTime.format('DD.MM.YYYY')
+        this.time = parsedDateTime.format('HH:mm')
+      }
+    }
+  },
+
+  mounted () {
+    this.setDatetime(this.value)
+  }
+}
+</script>

package/components/core/form/DpFormRow.vue

@@ -0,0 +1,79 @@
+<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="u-mb-0_75">
+    <!-- insert form fields here -->
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DpFormRow',
+
+  data () {
+    return {
+      // Number of elements in the form row
+      elementCount: 0,
+      // True if the form elements fill the entire row
+      isFullRow: true
+    }
+  },
+
+  computed: {
+    /**
+     * Array containing the widths of the form elements
+     * @return {Array}
+     */
+    elementsWidths () {
+      return this.$children.map(child => child.$props.width || 'u-1-of-1') || []
+    }
+  },
+
+  methods: {
+    /**
+     * Determine if the given form elements fill the entire row; if not, add padding-right
+     */
+    determineRowWidth () {
+      if (this.elementsWidths.length > 0) {
+        // U-firstWidthValue-of-y
+        const firstWidthValues = this.elementsWidths.map(width => parseInt(width.match(/\d+/)))
+        // Add firstWidthValues together
+        const combinedWidth = firstWidthValues.reduce((acc, curr) => {
+          return acc + parseInt(curr)
+        })
+        // U-x-of-completeWidth
+        const completeWidth = parseInt(this.elementsWidths[0].match(/\d+$/)[0])
+        this.isFullRow = completeWidth === combinedWidth
+      }
+    },
+
+    /**
+     * Add padding-right to the form element if
+     * - it is not the last element in the row or
+     * - it is the last element in the row, but the elements don't fill the row
+     */
+    setPadding () {
+      this.$children.forEach(child => {
+        const idx = this.$children.indexOf(child)
+        if (idx < this.elementCount - 1 || (idx === this.elementCount - 1 && this.isFullRow === false)) {
+          child.$el.classList.add('u-pr')
+        }
+      })
+    }
+  },
+
+  mounted () {
+    this.elementCount = this.$children.length
+    this.determineRowWidth()
+    this.setPadding()
+  }
+}
+</script>

package/components/core/form/DpMultiselect.vue

@@ -0,0 +1,164 @@
+<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>
+
+<documentation>
+  <!--
+   This is the generic multiselect functional component for vue instances. It is a DPlan wrapper for vue-multiselect: https://github.com/shentao/vue-multiselect
+   Component props:
+      - options - Array of strings/objects
+      - v-model - attribute to bind the component's value
+      - track-by - for the options that are of type Object
+      - searchable="false" – disables the search functionality (by default the search is enabled)
+      - close-on-select="false" – the dropdown stays open after selecting an option
+      - clear-on-select="false" – the search query stays the same after selecting an option
+      - multiple – for multiselect (by default it is single select)
+      - allow-empty - allows the value to be deselected (VORSICHT - the component's value is then NULL so any other computed props or functions using the value may fail)
+      - label - what should be shown in dropdown (for example if the option is an object with id and name we can define, that 'name' should be a label here), customLabel is a function that has to return a string
+
+      Groups in select: The options list can also contain groups. It requires passing 3 additional props: group-label, group-values and group-select. group-label is used to locate the group label. group-values should point to the group’s option list. group-select is used to define if selecting the group label should select/unselect all values in the group, or do nothing. Despite that the available options are grouped, the selected options are stored as a flat array of objects.
+
+      For all possible props see: https://vue-multiselect.js.org/#sub-props
+
+      The styling for the component can be found in _multiselect.scss
+
+   -->
+  <usage
+    :options="optionsArray"
+    track-by="id"
+    ref="multiselect"
+    id=""
+    :custom-label="option =>`${option.id} ${option.name ? option.name : ''}`"
+    class="custom styling classes"
+    :allow-empty="false"
+    v-model="selected"
+    @input="$emit('whatever you want to emit')">
+    <template v-slot:option="{ option }">
+      <strong>{{ option.id }}{{ option.name ? ` ${option.name}` : '' }}</strong>
+    </template>
+  </usage>
+</documentation>
+
+<script>
+import VueMultiselect from 'vue-multiselect'
+
+export default {
+  name: 'DpMultiselect',
+
+  functional: true,
+
+  props: {
+    required: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+
+    selectionControls: {
+      required: false,
+      type: Boolean,
+      default: false
+    }
+  },
+
+  render: function (createElement, context) {
+    const defaults = {
+      placeholder: Translator.trans('choose'),
+      selectLabel: '',
+      selectGroupLabel: '',
+      selectedLabel: '',
+      deselectLabel: '',
+      deselectGroupLabel: '',
+      tagPlaceholder: Translator.trans('tag.create')
+    }
+    context.data.attrs = { ...defaults, ...context.data.attrs }
+    if (context.props.required) {
+      context.data.directives = [
+        {
+          name: 'dp-validate-multiselect'
+        }
+      ]
+      context.data.staticClass = context.data.staticClass ? context.data.staticClass + ' is-required' : 'is-required'
+    }
+
+    const functions = {
+      noResult: () => createElement('span', Translator.trans('autocomplete.noResults')),
+      noOptions: () => createElement('span', Translator.trans('explanation.noentries'))
+    }
+
+    if (context.props.selectionControls) {
+      const menuOptions = context.data.attrs.options
+      const menuSelectedValue = context.data.model.value
+
+      // Add disabled attribute for selection Controls Buttons when click.
+      const buttonSelectAll = document.querySelector('[data-select-all]')
+      const buttonUnselectAll = document.querySelector('[data-unselect-all]')
+      if (buttonSelectAll) {
+        if (menuSelectedValue.length === menuOptions.length) {
+          buttonSelectAll.setAttribute('disabled', 'disabled')
+        } else {
+          buttonSelectAll.removeAttribute('disabled')
+        }
+      }
+
+      if (buttonUnselectAll) {
+        if (menuSelectedValue.length === 0) {
+          buttonUnselectAll.setAttribute('disabled', 'disabled')
+        } else {
+          buttonUnselectAll.removeAttribute('disabled')
+        }
+      }
+
+      functions.beforeList = () => {
+        return createElement('div', {
+          attrs: {
+            class: 'border--bottom'
+          }
+        }, [
+          createElement(
+            'button',
+            {
+              domProps: {
+                innerHTML: Translator.trans('select.all')
+              },
+              attrs: {
+                class: 'btn--blank weight--bold u-ph-0_5 u-pv-0_25',
+                type: 'button',
+                'data-select-all': ''
+              },
+              on: {
+                click: context.listeners['select-all']
+              }
+            }
+          ),
+          createElement(
+            'button',
+            {
+              domProps: {
+                innerHTML: Translator.trans('unselect.all')
+              },
+              attrs: {
+                class: 'btn--blank weight--bold u-ph-0_5 u-pv-0_25',
+                type: 'button',
+                'data-unselect-all': ''
+              },
+              on: {
+                click: context.listeners['unselect-all']
+              }
+            }
+          )
+        ])
+      }
+    }
+
+    context.data.scopedSlots = { ...context.data.scopedSlots, ...functions }
+
+    return createElement(VueMultiselect, context.data, context.children)
+  }
+}
+</script>

package/components/core/form/DpRadio.vue

@@ -0,0 +1,128 @@
+<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="prefixClass('o-form__element--radio')">
+    <input
+      :id="id"
+      :name="name !== '' ? name : false"
+      :class="prefixClass('o-form__control-input')"
+      type="radio"
+      :required="required"
+      :disabled="disabled"
+      :readonly="readonly"
+      autocomplete="off"
+      :checked="checked"
+      :value="value"
+      :data-cy="dataCy !== '' ? dataCy : false"
+      @change="$emit('change', $event.target.checked)"><!--
+ --><dp-label
+      :class="prefixClass('o-form__label')"
+      v-bind="labelProps" />
+  </div>
+</template>
+
+<script>
+import { DpLabel } from 'demosplan-ui/components'
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+
+export default {
+  name: 'DpRadio',
+
+  components: {
+    DpLabel
+  },
+
+  mixins: [prefixClassMixin],
+
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+
+  props: {
+    bold: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+
+    checked: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    dataCy: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    hint: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    id: {
+      type: String,
+      required: true
+    },
+
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    value: {
+      type: String,
+      required: false,
+      default: '1'
+    }
+  },
+
+  computed: {
+    labelProps () {
+      return {
+        for: this.id,
+        hint: this.hint,
+        text: this.label,
+        required: this.required,
+        bold: this.bold
+      }
+    }
+  }
+}
+</script>

package/components/core/form/DpSearchField.vue

@@ -0,0 +1,110 @@
+<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>
+  <span :class="{ 'display--inline-block width-100p': inputWidth !== ''}">
+    <dp-resettable-input
+      id="searchField"
+      data-cy="searchField"
+      :class="cssClasses"
+      :input-attributes="{ placeholder: Translator.trans('search'), type: 'search' }"
+      @reset="handleReset"
+      @enter="handleSearch"
+      v-model="searchTerm" /><!--
+
+ --><dp-button
+      class="u-valign--top"
+      data-cy="handleSearch"
+      @click="handleSearch"
+      :text="Translator.trans('searching')" />
+  </span>
+</template>
+
+<script>
+import { DpButton } from 'demosplan-ui/components'
+import DpResettableInput from '../DpResettableInput'
+
+export default {
+  name: 'DpSearchField',
+
+  components: {
+    DpButton,
+    DpResettableInput
+  },
+
+  props: {
+    initSearchTerm: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Value has to be a css class like 'u-1-of-2'
+     */
+    inputWidth: {
+      type: String,
+      default: ''
+    },
+
+    placeholder: {
+      type: String,
+      required: false,
+      default: 'search'
+    }
+  },
+
+  data () {
+    return {
+      searchTerm: this.initSearchTerm,
+      searchTermApplied: ''
+    }
+  },
+
+  computed: {
+    cssClasses () {
+      return this.inputWidth !== '' ? `display--inline-block u-mr-0_5 ${this.inputWidth}` : 'display--inline-block u-mr-0_5'
+    }
+  },
+
+  methods: {
+    handleReset () {
+      this.searchTerm = ''
+
+      /*
+       * Only emit reset if the searchTerm has been changed
+       * The empty string is emitted to stick to only one type.
+       */
+      if (this.searchTermApplied !== this.searchTerm) {
+        this.$emit('reset', '')
+        this.searchTermApplied = ''
+      }
+    },
+
+    handleSearch () {
+      // Prevent emitting a searchTerm twice
+      if (this.searchTermApplied === this.searchTerm) {
+        return
+      }
+
+      this.searchTermApplied = this.searchTerm
+      this.$emit('search', this.searchTerm)
+    },
+
+    reset () {
+      this.searchTermApplied = ''
+      this.searchTerm = ''
+    }
+  },
+
+  mounted () {
+    this.searchTermApplied = this.searchTerm
+  }
+}
+</script>