@demos-europe/demosplan-ui 0.0.1

package/components/core/DpEditor/libs/preventPaste.js

@@ -0,0 +1,28 @@
+/**
+ * (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 { Extension, Plugin } from 'tiptap'
+
+export default class preventPaste extends Extension {
+  get name () {
+    return 'PreventProp'
+  }
+
+  get plugins () {
+    return [
+      new Plugin({
+        props: {
+          handlePaste () {
+            return true
+          }
+        }
+      })
+    ]
+  }
+}

package/components/core/DpFlyout.vue

@@ -0,0 +1,119 @@
+<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 DpFlyout component renders a flyout that is intended to show stuff.
+
+@improve use https://popper.js.org/docs/v2/ for positioning instead of basic css - or find
+another way to make left/right offset dynamic.
+
+-->
+<usage variant="TBD">
+</usage>
+</documentation>
+
+<template>
+  <span
+    class="o-flyout"
+    :class="{
+      'o-flyout--left': align === 'left',
+      'o-flyout--right': align === 'right',
+      'o-flyout--padded': padded,
+      'is-expanded': isExpanded,
+      'o-flyout--menu': hasMenu
+    }"
+    v-click-outside="close"
+    data-cy="flyoutTrigger">
+    <button
+      :disabled="disabled"
+      type="button"
+      aria-haspopup="true"
+      class="o-flyout__trigger btn--blank o-link--default u-ph-0_25 line-height--2 whitespace--nowrap"
+      @click="toggle">
+      <slot name="trigger">
+        <i class="fa fa-ellipsis-h" />
+      </slot>
+    </button>
+    <div
+      class="o-flyout__content box-shadow-1"
+      data-cy="flyout">
+      <slot />
+    </div>
+  </span>
+</template>
+
+<script>
+import ClickOutside from 'vue-click-outside'
+
+export default {
+  name: 'DpFlyout',
+
+  directives: {
+    ClickOutside
+  },
+
+  props: {
+    align: {
+      required: false,
+      type: String,
+      default: 'right',
+      validator: (prop) => ['left', 'right'].includes(prop)
+    },
+
+    disabled: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+
+    hasMenu: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
+
+    padded: {
+      required: false,
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data () {
+    return {
+      isExpanded: false
+    }
+  },
+
+  methods: {
+    close () {
+      if (this.isExpanded === true) {
+        this.$emit('close')
+        this.isExpanded = false
+      }
+    },
+
+    toggle () {
+      this.isExpanded = !this.isExpanded
+
+      if (this.isExpanded) {
+        this.$emit('open')
+      } else {
+        this.$emit('close')
+      }
+    }
+  },
+
+  mounted () {
+    this.popupItem = this.$el
+  }
+}
+</script>

package/components/core/DpInlineNotification.vue

@@ -0,0 +1,116 @@
+<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
+    v-if="isDismissed === false"
+    :class="`flash flash-${type} flex`">
+    <i
+      class="fa u-pr-0_25 line-height--1_4"
+      :class="iconClasses[type]"
+      aria-hidden="true" />
+    <div class="space-stack-xs">
+      <div
+        v-if="message"
+        v-html="message" />
+      <slot />
+      <button
+        v-if="dismissible"
+        class="btn--blank o-link--default weight--bold"
+        v-text="Translator.trans('hint.dismiss')"
+        @click="dismiss" />
+    </div>
+  </div>
+  <div
+    v-else
+    class="cf">
+    <button
+      :aria-label="Translator.trans('hint.show')"
+      class="btn--blank color--grey float--right"
+      @click="show">
+      <dp-icon
+        icon="info"
+        aria-hidden="true" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { DpIcon } from 'demosplan-ui/components'
+import lscache from 'lscache'
+
+export default {
+  name: 'DpInlineNotification',
+
+  components: {
+    DpIcon
+  },
+
+  props: {
+    /**
+     * A notification may be too prominent if permanently visible. In that case it can be dismissed.
+     * A small icon will take the place of the notification to bring it back if needed.
+     */
+    dismissible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * If set, the dismissed state will be preserved via localStorage.
+     */
+    dismissibleKey: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    message: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    type: {
+      type: String,
+      required: false,
+      default: 'error'
+    }
+  },
+
+  data () {
+    return {
+      iconClasses: {
+        confirm: 'fa-check',
+        error: 'fa-exclamation-circle',
+        info: 'fa-info-circle',
+        warning: 'fa-exclamation-triangle'
+      },
+      isDismissed: true
+    }
+  },
+
+  methods: {
+    dismiss () {
+      this.isDismissed = true
+      this.dismissibleKey && lscache.set(this.dismissibleKey, Date.now())
+    },
+
+    show () {
+      this.isDismissed = false
+      this.dismissibleKey && lscache.remove(this.dismissibleKey)
+    }
+  },
+
+  mounted () {
+    this.isDismissed = (this.dismissible && this.dismissibleKey) ? !!lscache.get(this.dismissibleKey) : false
+  }
+}
+</script>

package/components/core/DpModal.vue

@@ -0,0 +1,208 @@
+<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-modal')"
+    @keydown="checkKeyEvent">
+    <transition
+      name="content"
+      appear
+      @enter="preventScroll">
+      <aside
+        v-if="isOpenModal"
+        :aria-label="ariaLabel"
+        :class="prefixClass('o-modal__content ' + contentClasses)"
+        role="dialog">
+        <button
+          :class="prefixClass('btn--blank o-link--default position--absolute u-right-0 u-p-0_5')"
+          :aria-label="Translator.trans('close.window')"
+          :title="Translator.trans('close.window')"
+          @click.prevent.stop="toggle()">
+          <dp-icon icon="close" />
+        </button>
+        <div :class="prefixClass('o-modal__body ' + contentBodyClasses)">
+          <h2
+            :class="prefixClass('font-size-h1 border--bottom u-pb-0_25 ' + contentHeaderClasses)"
+            v-if="hasHeader">
+            <slot name="header" />
+          </h2>
+          <slot name="default" />
+        </div>
+      </aside>
+    </transition>
+    <transition
+      name="backdrop"
+      appear
+      @after-leave="preventScroll(false)">
+      <div
+        v-if="isOpenModal"
+        @click.prevent.stop="toggle()"
+        :class="prefixClass('o-modal__backdrop')" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import { DpIcon } from 'demosplan-ui/components'
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+
+export default {
+  name: 'DpModal',
+
+  components: {
+    DpIcon
+  },
+
+  mixins: [prefixClassMixin],
+
+  props: {
+    ariaLabel: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
+    contentBodyClasses: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
+    contentClasses: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
+    contentHeaderClasses: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
+    //  Required when toggling modal with toggleByEvent()
+    modalId: {
+      required: false,
+      type: String,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      isOpenModal: false,
+      lastFocusedElement: '',
+      focusableElements: []
+    }
+  },
+
+  computed: {
+    hasHeader () {
+      return typeof this.$slots.header !== 'undefined'
+    }
+  },
+
+  methods: {
+    getFocusableElements () {
+      this.focusableElements = [...this.$el.querySelectorAll('a, button:not([disabled]), input, textarea, select, details, [tabindex]:not([tabindex="-1"])')].filter(el => this.isElementVisible(el))
+    },
+
+    isElementVisible (el) {
+      const isInDom = el.offsetParent !== null
+      const style = window.getComputedStyle(el)
+      const isDisplayed = style.display !== 'none' && style.opacity !== '0'
+      return isInDom && isDisplayed
+    },
+
+    toggleByEvent (modalId) {
+      //  Do not execute without a specified modalId to prevent unintentional toggling of multiple modals
+      if (typeof modalId === 'undefined') {
+        return
+      }
+      //  Check if event specifies the correct modal instance
+      if (this.modalId === modalId) {
+        this.toggle()
+      }
+    },
+
+    toggle () {
+      this.isOpenModal = (this.isOpenModal === false)
+      this.$emit('modal:toggled', this.isOpenModal)
+      if (this.isOpenModal === true) {
+        this.lastFocusedElement = document.activeElement
+        // On toggle get all focusable elements and focus the first one (after everything is rendered)
+        this.$nextTick(() => {
+          this.getFocusableElements()
+          if (this.focusableElements.length > 0) {
+            this.focusableElements[0].focus({ preventScroll: true })
+          }
+        })
+      } else {
+        this.lastFocusedElement.focus()
+      }
+    },
+
+    /**
+     * By setting the html element to overflow: hidden, content behind the opened modal is locked for scrolling.
+     * To prevent page jumps when the scroll bar disappears, a padding is put onto the body element.
+     *
+     * When toggling the modal in, this can be done immediately. When removing the modal, we have to wait for the
+     * transition to finish, otherwise the modal jumps a little to the left when the "real scrollbar" appears again.
+     * The @after-leave hook is called from the backdrop because the transition applied to it is slightly longer.
+     *
+     * @param {boolean} toggleIn
+     */
+    preventScroll (toggleIn) {
+      const htmlElement = document.querySelector('html')
+      const bodyElement = document.querySelector('body')
+      if (toggleIn) {
+        htmlElement.style.overflow = 'hidden'
+        bodyElement.style.overflowY = 'scroll'
+      } else {
+        htmlElement.style.overflow = null
+        bodyElement.style.overflowY = null
+      }
+    },
+
+    checkKeyEvent (event) {
+      // Close modal and return early if escape
+      if (event.key === 'Escape') {
+        this.toggle()
+      } else if (event.key === 'Tab') {
+        event.preventDefault()
+        const eventTargetIndex = this.focusableElements.findIndex(el => el === event.target)
+        const last = this.focusableElements.length - 1
+        if (this.focusableElements.length < 2) {
+          // Do nothing if only 1 or no elements to focus
+        } else if (event.shiftKey === false && event.target === this.focusableElements[last]) {
+          // If last element was previously focused, on tab jump to the first element
+          this.focusableElements[0].focus()
+        } else if (event.shiftKey === true && event.target === this.focusableElements[0]) {
+          // If first element was focused, on tab+shift focus the last element
+          this.focusableElements[last].focus()
+        } else {
+          const idxToFocus = event.shiftKey ? eventTargetIndex - 1 : eventTargetIndex + 1
+          this.focusableElements[idxToFocus].focus()
+        }
+      }
+    }
+  },
+
+  mounted () {
+    this.$root.$on('modal:toggle', (modalId) => this.toggleByEvent(modalId))
+  },
+
+  updated () {
+    // When component is re-rendered, we have to collect all focusable elements again, as new ones may have appeared
+    this.$nextTick(() => this.getFocusableElements())
+  }
+
+}
+</script>

package/components/core/DpObscure.vue

@@ -0,0 +1,29 @@
+<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="obscureClass"
+    :title="Translator.trans('obscure.title')">
+    <slot />
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'DpObscure',
+
+  computed: {
+    obscureClass () {
+      return (hasPermission('feature_obscure_text')) ? 'u-obscure' : ''
+    }
+  }
+
+}
+</script>

package/components/core/DpPager.vue

@@ -0,0 +1,139 @@
+<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 a wrapper for the dp-sliding-pagination component that adds a itemsPerPage Box
+  -->
+  <usage>
+    <dp-pager
+      current-page="pagination.current_page"
+      total-pages="pagination.total_pages"
+      total-items="pagination.total"
+      per-page="pagination.count"
+      limits="pagination.limits"
+      @page-change="handlePageChange"
+      @size-change="handleSizeChange"
+    ></dp-pager>
+  </usage>
+</documentation>
+
+<template>
+  <div class="c-pager__dropdown">
+    <label
+      class="c-pager__dropdown-label u-m-0 u-p-0 weight--normal display--inline-block"
+      :aria-label="Translator.trans('pager.amount.multiple.label', { results: totalItems, items: Translator.trans('pager.amount.multiple.items') })">
+      <span aria-hidden="true">
+        {{ Translator.trans('pager.amount.multiple.show') }}
+      </span>
+      <div
+        class="display--inline-block"
+        v-if="totalItems > Math.min(...limits)">
+        <dp-multiselect
+          class="display--inline-block"
+          v-model="itemsPerPage"
+          @select="handleSizeChange"
+          :searchable="false"
+          selected-label=""
+          :options="filteredLimits" />
+      </div>
+      <span v-else>{{ totalItems }}</span>
+      <span aria-hidden="true">
+        {{ Translator.trans('pager.amount.multiple.of') }}
+        <span data-cy="totalItems">{{ totalItems }}</span>
+        {{ Translator.trans('pager.amount.multiple.items') }}
+      </span>
+    </label>
+    <dp-sliding-pagination
+      v-if="totalItems > Math.min(...limits)"
+      class="display--inline-block"
+      :current="currentPage"
+      :total="totalPages || 1"
+      @page-change="handlePageChange" />
+  </div>
+</template>
+
+<script>
+import DpMultiselect from './form/DpMultiselect'
+import DpSlidingPagination from './DpSlidingPagination'
+
+export default {
+  name: 'DpPager',
+
+  components: {
+    DpSlidingPagination,
+    DpMultiselect
+  },
+
+  props: {
+    currentPage: {
+      required: false,
+      type: Number,
+      default: 1
+    },
+
+    totalItems: {
+      required: false,
+      type: Number,
+      default: 1
+    },
+
+    totalPages: {
+      required: false,
+      type: Number,
+      default: 1
+    },
+
+    perPage: {
+      required: false,
+      type: Number,
+      default: 1
+    },
+
+    limits: {
+      required: false,
+      type: Array,
+      default: () => []
+    }
+  },
+
+  data () {
+    return {
+      itemsPerPage: this.perPage <= this.totalItems ? this.perPage : this.totalItems
+    }
+  },
+
+  computed: {
+    filteredLimits () {
+      const filtered = this.limits.filter(limit => limit <= this.totalItems)
+
+      if (filtered.length < this.limits.length && this.totalItems > filtered[filtered.length - 1]) {
+        filtered.push(this.totalItems)
+      }
+
+      if (filtered.includes(this.itemsPerPage) === false) {
+        filtered.push(this.itemsPerPage)
+      }
+      filtered.sort((a, b) => a - b)
+
+      return filtered
+    }
+  },
+
+  methods: {
+    handlePageChange (newPage) {
+      this.$emit('page-change', newPage)
+    },
+
+    handleSizeChange (selectedOption) {
+      this.$emit('size-change', parseInt(selectedOption))
+    }
+  }
+}
+</script>

package/components/core/DpProgressBar.vue

@@ -0,0 +1,67 @@
+<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-progress-bar">
+    <template v-if="indeterminate">
+      <div class="u-mb-0_25 weight--bold">
+        {{ label }}
+      </div>
+
+      <div class="c-progress-bar__line is-animated" />
+    </template>
+
+    <template v-else>
+      <div class="u-mb-0_25 weight--bold">
+        {{ label }}
+      </div>
+
+      <div class="bg-color--grey-light-2">
+        <div
+          class="u-mb-0_25 c-progress-bar__line"
+          :style="style" />
+      </div>
+      <span>
+        {{ percentage }}%
+      </span>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DpProgressBar',
+
+  props: {
+    indeterminate: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    percentage: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+
+  computed: {
+    style () {
+      return 'width: ' + this.percentage + '%;'
+    }
+  }
+}
+</script>