@demos-europe/demosplan-ui 0.0.1

package/components/DpInput/DpInput.stories.mdx

@@ -0,0 +1,127 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import DpInput from './DpInput'
+
+<Meta
+    title="Components/Input"
+    component={DpInput}
+    argTypes={{
+        maxlength: {
+            control: {
+                type: 'number'
+            }
+        }
+    }} />
+
+# Input
+
+The `DpInput` component is used for the following form input fields:
+- text
+- email
+- number
+- password
+- tel
+
+export const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { DpInput },
+    template: `<dp-input v-bind="$props" />`
+});
+
+## Examples
+
+### Text input
+
+<Canvas>
+    <Story
+        name="Text input"
+        args={{
+            id: 'someId',
+            label: {
+                text: 'First name'
+            },
+            width: 'u-1-of-2'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Hint
+
+The `hint` property adds the provided string between label and input field.
+
+<Canvas>
+    <Story
+        name="Hint"
+        args={{
+            id: 'someId',
+            label: {
+                hint: 'This is a hint that explains what to enter in the input',
+                text: 'Contact person'
+            },
+            width: 'u-1-of-2'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Required
+
+If an input field is `required`, an asterisk will be added to its label.
+
+<Canvas>
+    <Story
+        name="Required"
+        args={{
+            id: 'someId',
+            label: {
+                text: 'Phone'
+            },
+            pattern: '^(\+?)(-| |[0-9]|\(|\))*$',
+            required: true,
+            type: 'tel',
+            width: 'u-1-of-4'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Disabled
+
+<Canvas>
+    <Story
+        name="Disabled"
+        args={{
+            disabled: true,
+            id: 'someId',
+            label: {
+                text: 'Email address'
+            },
+            pattern: '^(\+?)(-| |[0-9]|\(|\))*$',
+            type: 'email',
+            value: 'yourEmail@example.com',
+            width: 'u-1-of-4'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Tooltip
+
+The `tooltip` property adds a contextual help icon that reveals additional information on the input field when the user hovers
+over it with their mouse. It should be used sparingly and only to reveal non-critical information, whereas critical  information should be presented immediately.
+
+<Canvas>
+    <Story
+        name="Tooltip"
+        args={{
+            id: 'someId',
+            label: {
+                text: 'Last name',
+                tooltip: 'This is a text adding some more information on the input field'
+            },
+            type: 'text',
+            width: 'u-1-of-4'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>

package/components/DpInput/DpInput.vue

@@ -0,0 +1,284 @@
+<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="containerWidth !== '' ? prefixClass(containerWidth) : false">
+    <dp-label
+      v-if="label.text !== ''"
+      v-bind="{
+        ...label,
+        for: id,
+        hint: labelHint,
+        required: required
+      }" /><!--
+ --><input
+      :id="id"
+      :name="name !== '' ? name : false"
+      :class="prefixClass(classes)"
+      :data-counter="dataCounter !== '' ? dataCounter : false"
+      :data-dp-validate-error="dataDpValidateError || false"
+      :data-dp-validate-if="dataDpValidateIf !== '' ? dataDpValidateIf : false"
+      :data-dp-validate-should-equal="dataDpValidateShouldEqual !== '' ? dataDpValidateShouldEqual : false"
+      :data-cy="dataCy !== '' ? dataCy : false"
+      :aria-labelledby="ariaLabelledby"
+      :maxlength="maxlength !== '' ? maxlength : false"
+      :minlength="minlength !== '' ? minlength : false"
+      :type="type"
+      :pattern="pattern !== '' ? pattern : false"
+      :placeholder="placeholder !== '' ? placeholder : false"
+      :disabled="disabled"
+      :readonly="readonly"
+      :required="required"
+      :autocomplete="autocomplete !== '' ? autocomplete : false"
+      :size="size ? size : false"
+      v-model="currentValue"
+      @focus="$emit('focus')"
+      @input="$emit('input', currentValue)"
+      @keydown.enter="handleEnter">
+  </div>
+</template>
+
+<script>
+import { exactlengthHint, maxlengthHint, minlengthHint } from '../../utils/lengthHint'
+import DpLabel from '../DpLabel/DpLabel'
+import { length } from '../../shared/props'
+import { prefixClassMixin } from '../../mixins'
+
+export default {
+  name: 'DpInput',
+
+  components: {
+    DpLabel
+  },
+
+  mixins: [prefixClassMixin],
+
+  props: {
+    /**
+     * Reference another element on the page to define an accessible name if there is no label or
+     * you want to override the label.
+     */
+    ariaLabelledby: {
+      type: [String, Boolean],
+      required: false,
+      default: false
+    },
+
+    /**
+     * Tell the browser if autocomplete is allowed or not. If enabled the browser is allowed
+     * to automatically complete the input. You can also provide a type of data which is expected.
+     */
+    autocomplete: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    dataCounter: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    dataCy: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    dataDpValidateError: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    dataDpValidateIf: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    dataDpValidateShouldEqual: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Use: when input field used with Icon || Button, then input field has padding right.
+     */
+    hasIcon: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    id: {
+      type: String,
+      required: true
+    },
+
+    label: {
+      type: Object,
+      default: () => ({
+        bold: true,
+        hint: '',
+        text: '',
+        tooltip: ''
+      }),
+      validator: (prop) => {
+        return Object.keys(prop).every(key => ['bold', 'hint', 'text', 'tooltip'].includes(key))
+      }
+    },
+
+    /**
+     * Limit the maximum allowed number of characters to the given amount.
+     */
+    maxlength: length,
+
+    /**
+     * Define the minimum number of characters that need to be given.
+     */
+    minlength: length,
+
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    pattern: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Set to false to prevent default behavior onEnter.
+     */
+    preventDefaultOnEnter: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * When setting a number for the `size` prop, this is directly rendered
+     * as html attribute on the input element. Also, it is assumed that visual sizing
+     * based on that value shall be applied, that is why both container classes
+     * and element classes do not define any width styles when a size is set here.
+     */
+    size: {
+      type: Number,
+      required: false,
+      default: undefined
+    },
+
+    type: {
+      type: String,
+      required: false,
+      default: 'text'
+    },
+
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Full width by default; set to 'auto' to have no width defined.
+     * @deprecated Apply width to the parent element of DpInput.
+     */
+    width: {
+      type: String,
+      default: 'u-1-of-1'
+    }
+  },
+
+  data () {
+    return {
+      currentValue: this.value
+    }
+  },
+
+  computed: {
+    classes () {
+      let cssClasses = []
+      cssClasses = (this.size > 0) ? [] : [...cssClasses, 'u-1-of-1']
+      cssClasses = this.readonly || this.disabled ? [...cssClasses, 'bg-color--grey-light-2'] : cssClasses
+      cssClasses = this.type !== 'search' ? [...cssClasses, 'o-form__control-input'] : [...cssClasses, 'o-form__control-search']
+      cssClasses = this.hasIcon ? [...cssClasses, 'u-pr'] : cssClasses
+      return cssClasses.join(' ')
+    },
+
+    containerWidth () {
+      return (this.width === 'auto' || this.size > 0) ? '' : this.width
+    },
+
+    labelHint () {
+      const hint = typeof this.label.hint !== 'undefined' && this.label.hint !== '' ? [this.label.hint] : []
+
+      if (this.maxlength && !this.minlength) {
+        hint.push(maxlengthHint(this.currentValue.length, this.maxlength))
+      } else if (this.minlength && !this.maxlength) {
+        hint.push(minlengthHint(this.currentValue.length, this.minlength))
+      } else if (this.maxlength && this.minlength) {
+        if (this.maxlength === this.minlength) {
+          hint.push(exactlengthHint(this.currentValue.length, this.maxlength))
+        } else {
+          hint.push(maxlengthHint(this.currentValue.length, this.maxlength))
+          hint.push(minlengthHint(this.currentValue.length, this.minlength))
+        }
+      }
+
+      return hint
+    }
+  },
+
+  watch: {
+    value: function () {
+      this.currentValue = this.value
+    }
+  },
+
+  methods: {
+    handleEnter (event) {
+      if (this.preventDefaultOnEnter === true) {
+        event.preventDefault()
+      }
+      this.$emit('enter')
+    }
+  }
+}
+</script>

package/components/DpLabel/DpLabel.stories.mdx

@@ -0,0 +1,103 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import DpLabel from './DpLabel'
+
+<Meta
+    title="Components/Label"
+    component={DpLabel} />
+
+# Label
+
+The `DpLabel` component is used to add a label to form controls.
+
+It is included in the following <strong><i>demosplan-ui</i></strong> form components:
+
+- DpCheckbox
+- DpInput
+- DpRadio
+- DpSelect
+- DpDateTimePicker
+- DpTextarea
+- DpTimePicker
+
+If you want to use any of these components, you don't need to import `DpLabel` separately.
+
+`DpLabel` is currently not included in the following <strong><i>demosplan-ui</i></strong> form components:
+
+- DpMultiselect
+- DpTiptap
+- DpDatepicker
+- DpDateRangePicker
+
+If you want to use any of these components, you need to import `DpLabel` separately.
+
+export const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { DpLabel },
+    template: `<dp-label v-bind="$props" />`
+});
+
+## Default usage
+
+<Canvas>
+    <Story
+        name="Default usage"
+        args={{
+            for: 'formControlId',
+            text: 'First name',
+            width: 'u-1-of-2'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Required
+
+If a form control is `required`, an asterisk will be added to the label.
+
+<Canvas>
+    <Story
+        name="Required"
+        args={{
+            for: 'formControlId',
+            required: true,
+            text: 'E-mail address',
+            width: 'u-1-of-2'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Hint
+
+The `hint` property adds the provided string below the label.
+
+<Canvas>
+    <Story
+        name="Hint"
+        args={{
+            for: 'formControlId',
+            hint: 'This is a hint that explains what to enter in the corresponding form control',
+            text: 'Contact person',
+            width: 'u-1-of-2'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Tooltip
+
+The `tooltip` property adds a contextual help icon that reveals additional information on the form control when the user
+hovers over it with their mouse.
+
+<Canvas>
+    <Story
+        name="Tooltip"
+        args={{
+            for: 'formControlId',
+            tooltip: 'This is a text adding some more information on the form control',
+            text: 'Authorized users',
+            width: 'u-1-of-2'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>

package/components/DpLabel/DpLabel.vue

@@ -0,0 +1,112 @@
+<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>
+  <label
+    :class="prefixClass(['o-form__label flex', bold ? 'weight--bold' : 'weight--normal', hints.length > 0 ? 'has-hint' : ''])"
+    :for="labelFor">
+    <span>
+      <span v-cleanhtml="text" /><span v-if="required">*</span>
+      <span
+        v-if="hints.length > 0"
+        :class="prefixClass('display--block font-size-small weight--normal')">
+        <span
+          :class="prefixClass(['display--inline-block'])"
+          :key="i"
+          v-for="(h, i) in hints"
+          v-cleanhtml="h" />
+      </span>
+    </span>
+    <i
+      v-if="tooltip !== ''"
+      :class="prefixClass('fa fa-question-circle u-mt-0_125 flex-item-end')"
+      :aria-label="ariaLabel"
+      v-tooltip="tooltip" />
+  </label>
+</template>
+
+<script>
+import { CleanHtml } from 'demosplan-ui/directives'
+import { de } from '../shared/translations'
+import { prefixClassMixin } from '../../mixins'
+
+export default {
+  name: 'DpLabel',
+
+  directives: {
+    cleanhtml: CleanHtml
+  },
+
+  mixins: [prefixClassMixin],
+
+  props: {
+    bold: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+
+    for: {
+      type: String,
+      required: true
+    },
+
+    // Can be string or array (the second element being the "maxlength" hint).
+    hint: {
+      type: [String, Array],
+      required: false,
+      default: () => []
+    },
+
+    text: {
+      type: String,
+      required: true
+    },
+
+    tooltip: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  computed: {
+    ariaLabel () {
+      return de.contextualHelp
+    },
+    /**
+     * List of Hints
+     *
+     * @return Array{String}
+     */
+    hints () {
+      if (this.hint) {
+        return this.wrapItemIntoArray(this.hint)
+      }
+      return []
+    },
+
+    labelFor () {
+      return this.for
+    }
+  },
+
+  methods: {
+    wrapItemIntoArray (item) {
+      return Array.isArray(item) ? item : [item]
+    }
+  }
+}
+</script>

package/components/DpLoading/DpLoading.stories.mdx

@@ -0,0 +1,63 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import DpLoading from './DpLoading'
+
+<Meta
+  title="Components/Loading"
+  component={DpLoading} />
+
+# Loading
+
+The `DpLoading` component renders a spinning animation alongside some explanatory text.
+
+It indicates background activity and is especially used when components load data on first page load.
+
+export const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { DpLoading },
+    template: `<dp-loading v-bind="$props" @click="action" />`,
+    methods: {
+      action: action('click')
+    }
+});
+
+## Default usage
+
+<Canvas>
+    <Story name="Default">
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Without label
+
+In contexts with limited space, use the `hide-label` prop.
+
+<Canvas>
+    <Story
+      name="hideLabel"
+      args={{
+          hideLabel: true
+      }}>
+      {Template.bind({})}
+    </Story>
+</Canvas>
+
+## As overlay
+
+To block interactions with content that is being refreshed, the `overlay` prop may be used.
+
+<Canvas withSource="open">
+    <h1>
+        Some content that is still present but covered by the loading component,
+        which makes it impossible to interact with said content.
+    </h1>
+    <Story
+        name="Overlay"
+        args={{
+            overlay: true
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>