@demos-europe/demosplan-ui 0.0.1

package/components/core/form/DpToggle.vue

@@ -0,0 +1,78 @@
+<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>
+  <!--
+    Simple Toggle component
+
+    @improve T14353 rename to DpToggle
+  -->
+</documentation>
+
+<template>
+  <span
+    class="toggle-wrapper"
+    @click="toggle"
+    role="checkbox"
+    :aria-checked="value.toString()"
+    :aria-disabled="disabled"
+    tabindex="0"
+    @keydown.space.prevent="toggle">
+    <div
+      v-show="disabled"
+      class="toggle-disabled" />
+    <span
+      class="toggle-background"
+      :style="backgroundStyles" />
+    <span
+      class="toggle-indicator"
+      :style="indicatorStyles" />
+  </span>
+</template>
+
+<script>
+// Simple Toggle by Adam Wathan https://jsfiddle.net/adamwathan/hfs34ye4/
+export default {
+  name: 'DpToggle',
+
+  props: {
+    value: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  computed: {
+    backgroundStyles () {
+      return {
+        backgroundColor: this.value ? '#3490dc' : '#dae1e7'
+      }
+    },
+
+    indicatorStyles () {
+      return { transform: this.value ? 'translateX(1rem)' : 'translateX(0)' }
+    }
+  },
+
+  methods: {
+    toggle () {
+      if (this.disabled === false) {
+        this.$emit('input', !this.value)
+      }
+    }
+  }
+}
+</script>

package/components/core/index.js

@@ -0,0 +1,132 @@
+/**
+ * (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
+ */
+
+import dataTableSearch from './DpDataTable/DataTableSearch'
+import DpAccordion from './DpAccordion'
+import DpAnonymizeText from './DpAnonymizeText'
+import DpAutocomplete from './DpAutocomplete'
+import DpBulkEditHeader from './DpBulkEditHeader'
+import DpButtonIcon from './DpButtonIcon'
+import DpButtonRow from './DpButtonRow'
+import DpCard from './DpCard'
+import DpChangeStateAtDate from './DpChangeStateAtDate'
+import DpCheckbox from './form/DpCheckbox'
+import DpCheckboxGroup from './DpCheckboxGroup'
+import DpColumnSelector from './DpDataTable/DpColumnSelector'
+import DpContextualHelp from './DpContextualHelp'
+import DpCopyPasteButton from './DpCopyPasteButton'
+import DpDashboardTaskCard from './DpDashboardTaskCard'
+import DpDataTable from './DpDataTable/DpDataTable'
+import DpDataTableExtended from './DpDataTable/DpDataTableExtended'
+import DpDatepicker from './form/DpDatepicker'
+import DpDateRangePicker from './form/DpDateRangePicker'
+import DpDatetimePicker from './form/DpDatetimePicker'
+import DpEditableList from './DpEditableList'
+import DpEditor from './DpEditor/DpEditor'
+import DpFlyout from './DpFlyout'
+import DpFormRow from './form/DpFormRow'
+import DpHeightLimit from './HeightLimit'
+import DpInlineNotification from './DpInlineNotification'
+import DpModal from './DpModal'
+import DpMultiselect from './form/DpMultiselect'
+import DpNotifyContainer from './notify/DpNotifyContainer'
+import DpObscure from './DpObscure'
+import DpPager from './DpPager'
+import DpProgressBar from './DpProgressBar'
+import DpRadio from './form/DpRadio'
+import DpRegisterFlyout from './DpRegisterFlyout'
+import DpResettableInput from './DpResettableInput'
+import DpSearchField from './form/DpSearchField'
+import DpSelect from './form/DpSelect'
+import DpSelectPageItemCount from './DpDataTable/DpSelectPageItemCount'
+import DpSkeletonBox from './DpSkeletonBox'
+import DpSlidebar from './DpSlidebar'
+import DpSlidingPagination from './DpSlidingPagination'
+import DpSplitButton from './DpSplitButton'
+import DpStickyElement from './shared/DpStickyElement'
+import DpSwitcher from './DpSwitcher'
+import DpTab from './DpTabs/DpTab'
+import DpTableCard from './DpTableCardList/DpTableCard'
+import DpTableCardListHeader from './DpTableCardList/DpTableCardListHeader'
+import DpTabs from './DpTabs/DpTabs'
+import DpTextArea from './form/DpTextArea'
+import DpTextWrapper from './DpTextWrapper'
+import DpTimePicker from './form/DpTimePicker'
+import DpToggle from './form/DpToggle'
+import DpToggleForm from './DpToggleForm'
+import DpTooltipIcon from './DpTooltipIcon'
+import DpTransitionExpand from './DpTransitionExpand'
+import DpTreeList from './DpTreeList/DpTreeList'
+import DpUploadFiles from './DpUpload/DpUploadFiles'
+import DpVideoPlayer from './DpVideoPlayer'
+import { getFileIdsByHash } from './DpUpload/utils/GetFileIdsByHash'
+import MultistepNav from './MultistepNav'
+
+export {
+  dataTableSearch,
+  DpAccordion,
+  DpAnonymizeText,
+  DpAutocomplete,
+  DpBulkEditHeader,
+  DpButtonIcon,
+  DpButtonRow,
+  DpCard,
+  DpChangeStateAtDate,
+  DpCheckbox,
+  DpCheckboxGroup,
+  DpColumnSelector,
+  DpContextualHelp,
+  DpCopyPasteButton,
+  DpDashboardTaskCard,
+  DpDataTable,
+  DpDataTableExtended,
+  DpDatepicker,
+  DpDateRangePicker,
+  DpDatetimePicker,
+  DpEditableList,
+  DpEditor,
+  DpFlyout,
+  DpFormRow,
+  DpHeightLimit,
+  DpInlineNotification,
+  DpModal,
+  DpMultiselect,
+  DpNotifyContainer,
+  DpObscure,
+  DpPager,
+  DpProgressBar,
+  DpRadio,
+  DpRegisterFlyout,
+  DpResettableInput,
+  DpSearchField,
+  DpSelect,
+  DpSelectPageItemCount,
+  DpSkeletonBox,
+  DpSlidebar,
+  DpSlidingPagination,
+  DpSplitButton,
+  DpStickyElement,
+  DpSwitcher,
+  DpTab,
+  DpTableCard,
+  DpTableCardListHeader,
+  DpTabs,
+  DpTextArea,
+  DpTextWrapper,
+  DpTimePicker,
+  DpToggle,
+  DpToggleForm,
+  DpTooltipIcon,
+  DpTransitionExpand,
+  DpTreeList,
+  DpUploadFiles,
+  DpVideoPlayer,
+  getFileIdsByHash,
+  MultistepNav
+}

package/components/core/notify/DpNotifyContainer.vue

@@ -0,0 +1,122 @@
+<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>
+
+<!-- @improve check for a11y issues, see https://inclusive-components.design/notifications/ -->
+<template>
+  <div
+    :class="prefixClass('c-notify')"
+    :aria-live="liveState">
+    <transition-group name="transition-slide-up">
+      <dp-notify-message
+        v-for="message in messages"
+        :key="message.uid"
+        :message="message"
+        @dp-notify-remove="removeMessage"
+        :role="messageRole" />
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex'
+import DpNotifyMessage from './DpNotifyMessage'
+import { hasOwnProp } from 'demosplan-utils'
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+
+export default {
+  name: 'DpNotifyContainer',
+
+  components: {
+    DpNotifyMessage
+  },
+
+  mixins: [prefixClassMixin],
+
+  props: {
+    /**
+     * { confirm: [{
+     *      message: String,
+     *      linkUrl: String,
+     *      linkText: String
+     *    }, {
+     *      message: String,
+     *      linkUrl: String,
+     *      linkText: String
+     *    }]
+     * }
+     */
+    notifications: {
+      type: [Object, Array],
+      required: false,
+      default () {
+        return []
+      }
+    }
+  },
+
+  data () {
+    return {
+      isVisible: false
+    }
+  },
+
+  computed: {
+    ...mapState('notify', ['messages']),
+
+    liveState () {
+      return (this.isVisible) ? 'polite' : 'off'
+    },
+
+    messageRole () {
+      return (this.isVisible) ? 'message' : 'none'
+    }
+  },
+
+  methods: {
+    ...mapMutations('notify', ['add', 'remove']),
+
+    init () {
+      for (const type in this.notifications) {
+        if (hasOwnProp(this.notifications, type)) {
+          const messages = this.notifications[type]
+
+          let i = 0
+          const l = messages.length
+          let message
+
+          for (; i < l; i++) {
+            message = messages[i]
+            // Support legacy messages
+            if (typeof message === 'string') {
+              message = { message: message }
+            }
+
+            this.add({
+              type,
+              text: message.message || '',
+              linkUrl: message.linkUrl || '',
+              linkText: message.linkText || ''
+            })
+          }
+        }
+      }
+
+      document.addEventListener('visibilitychange', () => { this.isVisible = document.hidden })
+    },
+
+    removeMessage (message) {
+      this.remove(message)
+    }
+  },
+
+  created () {
+    this.init()
+  }
+}
+</script>

package/components/core/notify/DpNotifyMessage.vue

@@ -0,0 +1,95 @@
+<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('c-notify__message ' + messageClass)">
+    <i
+      :class="prefixClass('c-notify__closer fa fa-times-circle cursor--pointer')"
+      aria-hidden="true"
+      @click.stop.prevent="hide" />
+
+    <div :class="prefixClass('cf')">
+      <i
+        :class="prefixClass('fa u-mt-0_125 u-mr-0_25 float--left ' + messageIcon)" />
+      <div :class="prefixClass('u-ml')">
+        {{ message.text }}
+        <a
+          v-if="message.linkUrl"
+          :class="prefixClass('c-notify__link u-mt-0_25')"
+          :href="message.linkUrl"
+          data-cy="messageLink">
+          {{ message.linkText || message.linkUrl }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+
+export default {
+  name: 'DpNotifyMessage',
+
+  mixins: [prefixClassMixin],
+
+  props: {
+    /**
+     * A single notification message object containing type, text(, linkUrl, linkText)
+     */
+    message: {
+      type: Object,
+      required: true
+    },
+    hideTimer: {
+      type: Number,
+      required: false,
+      default: 20000
+    }
+  },
+
+  data () {
+    return {
+      messageId: '',
+      icons: {
+        info: 'fa-info-circle',
+        warning: 'fa-exclamation-triangle',
+        error: 'fa-exclamation-circle',
+        confirm: 'fa-check-circle',
+        dev: 'fa-info-circle'
+      }
+    }
+  },
+
+  computed: {
+    messageClass () {
+      return 'c-notify__message--' + this.message.type
+    },
+
+    messageIcon () {
+      return this.icons[this.message.type]
+    }
+  },
+
+  methods: {
+    hide () {
+      this.$emit('dp-notify-remove', this.message)
+    }
+  },
+
+  mounted () {
+    if (this.message.type !== 'error') {
+      setTimeout(() => {
+        this.hide()
+      }, this.hideTimer)
+    }
+  }
+}
+</script>

package/components/core/shared/DpStickyElement.vue

@@ -0,0 +1,95 @@
+<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="{'o-sticky--border': border, 'u-z-fixed': applyZIndex}"
+    class="o-sticky bg-color--white">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { Stickier } from 'demosplan-utils'
+
+export default {
+  name: 'DpStickyElement',
+
+  props: {
+    /**
+     * If set to false, no z-index is applied to the element.
+     */
+    applyZIndex: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Whether the element should show an 1px border when being sticky.
+     * When enabled, the border is always displayed on the side of the
+     * element opposite to the direction the element sticks to.
+     */
+    border: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Reference to the HTMLElement that should serve as the context for the sticky element.
+     * If omitted, the Stickier lib will default to this.$el.offsetParent
+     */
+    context: {
+      type: HTMLElement,
+      required: false,
+      default: undefined
+    },
+
+    /**
+     * The direction the element should stick to.
+     */
+    direction: {
+      required: false,
+      type: String,
+      default: 'top'
+    },
+
+    /**
+     * Whether context changes should trigger a refresh of stickier positions.
+     */
+    observeContext: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * The offset from context the element should go into/out of sticky mode.
+     */
+    offset: {
+      required: false,
+      type: Number,
+      default: 0
+    }
+  },
+
+  mounted () {
+    this.stickyElement = new Stickier(
+      this.$el,
+      this.context,
+      this.offset,
+      this.direction,
+      'palm',
+      false,
+      this.observeContext
+    )
+  }
+}
+</script>

package/components/index.js

@@ -0,0 +1,24 @@
+/**
+ * (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
+ */
+
+import DpButton from './DpButton/DpButton'
+import DpDetails from './DpDetails/DpDetails'
+import DpIcon from './DpIcon/DpIcon'
+import DpInput from './DpInput/DpInput'
+import DpLabel from './DpLabel/DpLabel'
+import DpLoading from './DpLoading/DpLoading'
+
+export {
+  DpButton,
+  DpDetails,
+  DpIcon,
+  DpInput,
+  DpLabel,
+  DpLoading
+}

package/components/shared/translations.js

@@ -0,0 +1,15 @@
+/**
+ * (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
+ */
+
+const de = {
+  contextualHelp: 'Kontexthilfe',
+  loadingData: 'Daten werden geladen...'
+}
+
+export { de }

package/directives/CleanHtml/CleanHtml.js

@@ -0,0 +1,50 @@
+/**
+ * (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
+ */
+
+import DOMPurify from 'dompurify'
+
+/**
+ * Checks the type of value and always returns an object to be used with setInnerHTML.
+ * If a string is passed, its value is used as content.
+ * @param value {Object<content, options>|String}
+ * @return {{content}|*}
+ */
+const getOptions = (value) => {
+  const type = typeof value
+  if (type === 'string') {
+    return {
+      content: value
+    }
+  } else if (type === 'object') {
+    return value
+  }
+}
+
+/**
+ * Apply a sanitized string to the innerHtml of element.
+ * @param el
+ * @param binding
+ */
+const setSanitizedInnerHTML = (el, binding) => {
+  const { content, options = {} } = getOptions(binding.value)
+  el.innerHTML = DOMPurify.sanitize(content, options)
+}
+
+const CleanHtml = {
+  bind: function (el, binding) {
+    setSanitizedInnerHTML(el, binding)
+  },
+  update: function (el, binding) {
+    if (binding.value !== binding.oldValue) {
+      setSanitizedInnerHTML(el, binding)
+    }
+  }
+}
+
+export { CleanHtml }

package/directives/CleanHtml/CleanHtml.stories.mdx

@@ -0,0 +1,64 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta
+    title="Directives/CleanHtml"
+    parameters={{
+        viewMode: 'docs',
+        previewTabs: {
+            canvas: {
+                hidden: true
+            }
+        },
+    }} />
+
+# CleanHtml
+
+This directive sanitizes Html. It builds on the XSS sanitizer library [DOMPurify](https://github.com/cure53/DOMPurify).
+
+The directive can be passed a (probably html-)string directly, or alongside any [DOMPurify option](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).
+
+## Simple usage
+
+Malicious code is filtered out, according to the DOMPurify [default behavior](https://github.com/cure53/DOMPurify#some-purification-samples-please).
+
+```html
+<template>
+  <div>
+    <span v-cleanhtml="someValue">
+  </div>
+</template>
+import { CleanHtml } from 'demosplan-ui/directives'
+
+export default {
+  name: 'MyComponent',
+
+  directives: {
+    cleanhtml: CleanHtml
+  },
+
+  //...
+}
+```
+
+## Usage with options
+
+Malicious code is filtered out, and only p and span tags are allowed.
+
+```html
+<template>
+  <div>
+    <span v-cleanhtml="{ content: someValue, options: { ALLOWED_TAGS: ['p', 'span'] }">
+  </div>
+</template>
+import { CleanHtml } from 'demosplan-ui/directives'
+
+export default {
+  name: 'MyComponent',
+
+  directives: {
+    cleanhtml: CleanHtml
+  },
+
+  //...
+}
+```