@demos-europe/demosplan-ui 0.0.1

package/components/core/MultistepNav.vue

@@ -0,0 +1,89 @@
+<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>
+  <!--
+
+  The MultistepNav generates a horizontal Bar with n steps
+  the steps can be decorated with an fa-icon.
+
+  on click of an "old" step the event change-step emits the new step index.
+
+  -->
+  <usage>
+    <multistep-nav
+      @change-step="val => step = val"
+      :active-step="step"
+      :steps="[{
+           label: 'my text here',
+           icon: 'fa-some-icon',
+           title: 'In this step you can do this'
+          }, {
+           label: 'this is the second step',
+           icon: 'fa-some-other-icon',
+           title: 'In this step you can do that'
+          }, {
+           label: 'and so on'
+          }]" />
+  </usage>
+</documentation>
+
+<template>
+  <nav :class="prefixClass('c-multistep')">
+    <button
+      v-for="(step, idx) in steps"
+      :key="`step_${idx}`"
+      :disabled="idx > activeStep"
+      @click="changeStep(idx)"
+      class="btn--blank"
+      :aria-label="step.title ? Translator.trans(step.title) : Translator.trans(step.label)"
+      :class="[
+        prefixClass('c-multistep__step'),
+        idx === activeStep ? prefixClass('is-active') : '',
+        idx > activeStep ? prefixClass('is-disabled') : ''
+      ]">
+      <span>
+        <i
+          v-if="step.icon"
+          aria-hidden="true"
+          :class="[prefixClass(step.icon), prefixClass('fa u-mr-0_25')]" />
+        {{ Translator.trans(step.label) }}
+      </span>
+    </button>
+  </nav>
+</template>
+
+<script>
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+
+export default {
+  name: 'MultistepNav',
+
+  mixins: [prefixClassMixin],
+
+  props: {
+    activeStep: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+
+    steps: {
+      type: Array,
+      required: true
+    }
+  },
+
+  methods: {
+    changeStep (val) {
+      this.$emit('change-step', val)
+    }
+  }
+}
+</script>

package/components/core/form/DpCheckbox.vue

@@ -0,0 +1,108 @@
+<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--checkbox')">
+    <input
+      :id="id"
+      :name="name !== '' ? name : false"
+      :class="prefixClass('o-form__control-input')"
+      type="checkbox"
+      :required="required"
+      :disabled="disabled"
+      :readonly="readonly"
+      autocomplete="off"
+      :checked="checked"
+      :value="valueToSend"
+      @change="$emit('change', $event.target.checked)"
+      true-value="1"
+      false-value="0">
+    <dp-label
+      v-if="label.text !== ''"
+      :class="prefixClass('o-form__label')"
+      v-bind="{
+        bold: false,
+        text: '',
+        for: id,
+        required: required,
+        ...label,
+      }" />
+  </div>
+</template>
+
+<script>
+import { DpLabel } from 'demosplan-ui/components'
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+
+export default {
+  name: 'DpCheckbox',
+
+  components: {
+    DpLabel
+  },
+
+  mixins: [prefixClassMixin],
+
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+
+  props: {
+    checked: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    id: {
+      type: String,
+      required: true
+    },
+
+    label: {
+      type: Object,
+      default: () => ({}),
+      validator: (prop) => {
+        return Object.keys(prop).every(key => ['bold', 'hint', 'text', 'tooltip'].includes(key))
+      }
+    },
+
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    valueToSend: {
+      type: String,
+      required: false,
+      default: '1'
+    }
+  }
+}
+</script>

package/components/core/form/DpDateRangePicker.vue

@@ -0,0 +1,186 @@
+<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-items-center">
+    <dp-datepicker
+      :id="startId"
+      :name="startName"
+      :min-date="minDate"
+      :max-date="maxStartDate"
+      :calendars-after="calendarsAfter"
+      :calendars-before="calendarsBefore"
+      :disabled="startDisabled"
+      :value="startValue"
+      :required="required || (endDate !== '' && endDate < currentDate)"
+      data-cy="startDateDescription"
+      @input="handleInputStartDate" />
+    <span>-</span>
+    <dp-datepicker
+      :id="endId"
+      :name="endName"
+      :min-date="minEndDate"
+      :max-date="maxDate"
+      :calendars-after="calendarsAfter"
+      :calendars-before="calendarsBefore"
+      :disabled="endDisabled"
+      :value="endValue"
+      :required="required"
+      data-cy="endDateDescription"
+      @input="handleInputEndDate" />
+  </div>
+</template>
+
+<script>
+import DpDatepicker from './DpDatepicker'
+import { formatDate } from 'demosplan-utils'
+
+export default {
+  name: 'DpDateRangePicker',
+
+  components: {
+    DpDatepicker
+  },
+
+  props: {
+    calendarsAfter: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+
+    calendarsBefore: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+
+    endDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    endId: {
+      type: String,
+      required: true
+    },
+
+    endName: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    endValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    enforcePlausibleDates: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    maxDate: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    minDate: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    startDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    startId: {
+      type: String,
+      required: true
+    },
+
+    startName: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    startValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      endDate: this.endValue,
+      maxStartDate: this.enforcePlausibleDates ? this.endValue : '',
+      minEndDate: this.enforcePlausibleDates ? this.startValue : ''
+    }
+  },
+
+  computed: {
+    currentDate () {
+      return formatDate()
+    }
+  },
+
+  watch: {
+    startValue (newVal) {
+      this.minEndDate = this.enforcePlausibleDates ? newVal : ''
+    },
+
+    endValue (newVal) {
+      this.maxStartDate = this.enforcePlausibleDates ? newVal : ''
+    }
+  },
+
+  methods: {
+    handleInputEndDate (value) {
+      this.updateMaxStartDate(value)
+      this.$emit('input:end-date', value)
+    },
+
+    handleInputStartDate (value) {
+      this.updateMinEndDate(value)
+      this.$emit('input:start-date', value)
+    },
+
+    updateMaxStartDate (value) {
+      this.endDate = value
+      this.maxStartDate = this.enforcePlausibleDates && value ? value : ''
+    },
+
+    updateMinEndDate (value) {
+      this.minEndDate = this.enforcePlausibleDates && value ? value : ''
+    }
+  }
+}
+</script>

package/components/core/form/DpDatepicker.vue

@@ -0,0 +1,160 @@
+<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
+    :id="id"
+    data-cy="datepicker"
+    @input.stop.prevent="emitUpdate" />
+</template>
+
+<script>
+// eslint-disable-next-line import/extensions
+import Datepicker from 'a11y-datepicker/dist/index.es.min'
+
+export default {
+  name: 'DpDatepicker',
+
+  props: {
+    calendarsAfter: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+
+    calendarsBefore: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    id: {
+      type: String,
+      required: true
+    },
+
+    maxDate: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    minDate: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      datepicker: null,
+      localConfig: {
+        theme: 'light',
+        locale: 'DE-de',
+        dateFormat: 'dd.mm.yyyy',
+        id: this.id,
+        inputClass: 'o-form__control-input width-100p'
+      }
+    }
+  },
+
+  watch: {
+    value: function () {
+      if (this.value !== null) {
+        const isNotSet = document.getElementById(this.id).getElementsByTagName('input')[0].value !== this.value
+        this.datepicker && isNotSet && this.datepicker.setDate(this.value, true)
+      }
+    },
+
+    maxDate: function () {
+      if (this.datepicker.getDate()) {
+        const currentDate = this.datepicker.getDateAsString()
+        this.datepicker = this.datepicker.updateDatepicker({ maxDate: this.maxDate })
+        this.datepicker.setDate(currentDate, true)
+      } else {
+        this.datepicker = this.datepicker.updateDatepicker({ maxDate: this.maxDate })
+      }
+    },
+
+    minDate: function () {
+      if (this.datepicker.getDate()) {
+        const currentDate = this.datepicker.getDateAsString()
+        this.datepicker = this.datepicker.updateDatepicker({ minDate: this.minDate })
+        this.datepicker.setDate(currentDate, true)
+      } else {
+        this.datepicker = this.datepicker.updateDatepicker({ minDate: this.minDate })
+      }
+    },
+
+    required: function () {
+      this.datepicker = this.datepicker.updateDatepicker({ required: this.required })
+    },
+
+    disabled: function () {
+      this.datepicker = this.datepicker.updateDatepicker({ disabled: this.disabled })
+    }
+  },
+
+  methods: {
+    emitUpdate (e) {
+      const currentVal = e.target.value
+      const date = this.datepicker.getDateAsString()
+      const valueToEmit = date === currentVal ? date : currentVal
+      this.$emit('input', valueToEmit)
+      this.$root.$emit('dp-datepicker', { id: this.id, value: valueToEmit })
+    }
+  },
+
+  mounted () {
+    const config = {
+      ...this.calendarsAfter > 0 ? { monthsAfterCurrent: this.calendarsAfter } : {},
+      ...this.calendarsBefore > 0 ? { monthsBeforeCurrent: this.calendarsBefore } : {},
+      ...this.maxDate !== '' ? { maxDate: this.maxDate } : {},
+      ...this.minDate !== '' ? { minDate: this.minDate } : {},
+      ...this.name !== '' ? { inputName: this.name } : {},
+      ...{ required: this.required },
+      ...{ disabled: this.disabled },
+      ...this.localConfig
+    }
+    this.datepicker = Datepicker(config)
+    this.value !== '' && this.datepicker.setDate(this.value)
+  }
+}
+</script>