@demos-europe/demosplan-ui 0.0.1

package/components/DpLoading/DpLoading.vue

@@ -0,0 +1,63 @@
+<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-loading"
+    :class="{
+      'c-loading--overlay': overlay,
+      'flex flex-items-center space-inline-xs': !overlay
+    }"
+    @click.prevent="">
+    <div
+      v-if="overlay"
+      class="c-loading__inner flex flex-items-center space-inline-xs">
+      <span class="c-loading__spinner" />
+      <span
+        v-if="!hideLabel"
+        class="c-loading__text"
+        v-text="label" />
+    </div>
+    <template v-else>
+      <span class="c-loading__spinner" />
+      <span
+        v-if="!hideLabel"
+        class="c-loading__text"
+        v-text="label" />
+    </template>
+  </div>
+</template>
+
+<script>
+import { de } from '../shared/translations'
+
+export default {
+  name: 'DpLoading',
+
+  props: {
+    hideLabel: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+
+    overlay: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      label: de.loadingData
+    }
+  }
+}
+</script>

package/components/core/DpAccordion.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>
+
+<documentation>
+
+<!--  can toggle itself via the toggle method, but can also be toggled from outside (e.g. via a save or abort button)
+      by passing the parent's open state as prop (isOpen) and calling a toggle method on the parent @item:toggle which
+      toggles the parent's isOpen data property, see usage -->
+
+  <usage variant="with toggle from outside">
+    <dp-accordion
+      :is-open="isOpen"
+      :title="title"
+      @item:toggle="(open) => toggleItem(open)">
+    </dp-accordion>
+  </usage>
+</documentation>
+
+<template>
+  <div class="o-accordion">
+    <button
+      type="button"
+      v-if="title !== ''"
+      @click="() => toggle()"
+      :aria-expanded="isVisible.toString()"
+      data-cy="accordionToggle"
+      :class="fontWeight === 'bold' ? 'weight--bold' : 'weight--normal'"
+      class="btn--blank o-link--default">
+      <i
+        class="width-s fa"
+        :class="{'fa-caret-right': !isVisible, 'fa-caret-down': isVisible}"
+        aria-hidden="true" />
+      <span :class="compressed ? 'font-size-medium' : 'o-accordion--title'">{{ title }}</span>
+    </button>
+    <dp-transition-expand>
+      <div v-show="isVisible">
+        <!-- This is where the accordion content goes. -->
+        <slot />
+      </div>
+    </dp-transition-expand>
+  </div>
+</template>
+
+<script>
+import DpTransitionExpand from './DpTransitionExpand'
+
+export default {
+  name: 'DpAccordion',
+
+  components: {
+    DpTransitionExpand
+  },
+
+  props: {
+    fontWeight: {
+      type: String,
+      required: false,
+      default: 'bold',
+      validate: prop => ['normal', 'bold'].includes(prop)
+    },
+
+    // Reduce font-size of the title
+    compressed: {
+      type: Boolean,
+      default: false
+    },
+
+    // Needed if you want to toggle the accordion from outside
+    isOpen: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    // Text displayed in toggle trigger
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      isVisible: this.isOpen
+    }
+  },
+
+  watch: {
+    isOpen () {
+      this.isVisible = this.isOpen
+    }
+  },
+
+  methods: {
+    toggle (state) {
+      this.isVisible = (typeof state === 'undefined') ? !this.isVisible : state
+      this.$emit('item:toggle', this.isVisible)
+    }
+  }
+}
+</script>

package/components/core/DpAnonymizeText.vue

@@ -0,0 +1,136 @@
+<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="border u-mb u-p-0_25">
+    <editor-menu-bubble
+      :editor="editor"
+      class="editor-menububble__wrapper"
+      :keep-in-bounds="true"
+      v-slot:default="{ commands, isActive, menu }">
+      <div
+        :class="{ 'is-active': menu.isActive }"
+        :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`">
+        <a
+          v-if="isActive.anonymize()"
+          class="editor-menububble__button is-active"
+          @click="commands.unanonymize">
+          {{ Translator.trans('statement.anonymize.unmark') }}
+        </a>
+        <a
+          v-else
+          class="editor-menububble__button"
+          @click="commands.anonymize">
+          {{ Translator.trans('statement.anonymize.mark') }}
+        </a>
+      </div>
+    </editor-menu-bubble>
+    <editor-content
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      ref="editorContent"
+      class="editor-content"
+      :editor="editor" />
+  </div>
+</template>
+
+<script>
+import {
+  Bold,
+  BulletList,
+  HardBreak,
+  History,
+  Italic,
+  ListItem,
+  OrderedList,
+  Underline
+} from 'tiptap-extensions'
+import { Editor, EditorContent, EditorMenuBubble } from 'tiptap'
+import EditorAnonymize from './DpEditor/libs/editorAnonymize'
+import EditorObscure from './DpEditor/libs/editorObscure'
+import EditorUnAnonymize from './DpEditor/libs/editorUnAnonymize'
+import PreventDrop from './DpEditor/libs/preventDrop'
+import PreventKeyboardInput from './DpEditor/libs/preventKeyboardInput'
+
+export default {
+  name: 'DpAnonymizeText',
+
+  components: {
+    EditorContent,
+    EditorMenuBubble
+  },
+
+  props: {
+    value: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      editor: null
+    }
+  },
+
+  methods: {
+    setValue () {
+      let currentValue = this.editor.getHTML()
+
+      // 1. look if there are anonymized segements, which are tagged to un-anonymize
+      const unanonymize = /<span[^>]*?title="(.*?)"([^>]*?)class="anonymize-me"([^>]*?)>([^<]*?)<span class="unanonymized">([^<]*?)<\/span>([^<]*?)<\/span>/gm
+      currentValue = currentValue.replace(unanonymize, (match, p1) => p1.replaceAll('&quot;', '"'))
+
+      // 2. remove unanonymize tags that are left over because the selection was wider than the anonymized element
+      const unanonymizeCleaner = /<span class="unanonymized">(.*?)<\/span>/gm
+      currentValue = currentValue.replace(unanonymizeCleaner, '$1')
+
+      // 3. anonymize text - leave the text in the title, that it can be restored again.
+      const anonymize = /<span class="anonymize-me">(.*?)<\/span>/gm
+      currentValue = currentValue.replace(anonymize, (match, p1) => ('<span title="' + p1.replaceAll('"', '&quot;') + '" class="anonymize-me">***</span>'))
+
+      // Update text
+      this.editor.setContent(currentValue)
+      this.$emit('change', currentValue)
+    }
+  },
+
+  mounted () {
+    this.editor = new Editor({
+      content: this.value,
+      editable: true,
+      disableInputRules: true,
+      disablePasteRules: true,
+      extensions: [
+        new EditorAnonymize(),
+        new EditorUnAnonymize(),
+        new EditorObscure(),
+        new PreventKeyboardInput(),
+        new PreventDrop(),
+        new Bold(),
+        new Italic(),
+        new BulletList(),
+        new OrderedList(),
+        new ListItem(),
+        new Underline(),
+        new History(),
+        new HardBreak()
+      ],
+      onUpdate: () => {
+        this.setValue()
+      },
+      editorProps: {
+        handleTextInput: () => true // Disable text input
+      }
+    })
+  }
+}
+</script>

package/components/core/DpAutocomplete.vue

@@ -0,0 +1,133 @@
+<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>
+  <vue-omnibox
+    :box-height="height"
+    :disable-search="true"
+    :label="label"
+    :options="options"
+    :placeholder="placeholder"
+    :value="currentQuery"
+    @input="emitAndFetch"
+    @searched="emit($event, 'searched')"
+    @selected="emit($event, 'selected')">
+    <template
+      v-for="(_, scopedSlotName) in $scopedSlots"
+      v-slot:[scopedSlotName]="slotData">
+      <slot
+        :name="scopedSlotName"
+        v-bind="slotData" />
+    </template>
+  </vue-omnibox>
+</template>
+
+<script>
+import { dpApi } from 'demosplan-utils'
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+import VueOmnibox from 'vue-omnibox'
+
+export default {
+  name: 'DpAutocomplete',
+
+  components: {
+    VueOmnibox
+  },
+
+  mixins: [prefixClassMixin],
+
+  props: {
+    additionalRouteParams: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+
+    height: {
+      type: String,
+      required: false,
+      default: '28px'
+    },
+
+    label: {
+      type: String,
+      required: false,
+      default: () => 'label'
+    },
+
+    options: {
+      type: Array,
+      required: false,
+      default: () => ([])
+    },
+
+    placeholder: {
+      type: String,
+      required: false,
+      default: () => Translator.trans('search')
+    },
+
+    queryParam: {
+      type: String,
+      required: false,
+      default: 'query'
+    },
+
+    route: {
+      type: String,
+      required: true
+    },
+
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      currentQuery: this.value,
+      isLoading: false
+    }
+  },
+
+  watch: {
+    value () {
+      if (this.currentQuery !== this.value) {
+        this.currentQuery = this.value
+      }
+    }
+  },
+
+  methods: {
+    emit (e, type) {
+      this.$emit(type, e)
+    },
+
+    emitAndFetch (value) {
+      this.emit(value, 'input')
+      this.currentQuerry = value
+      if (value.length >= 3) this.fetchOptions(value)
+    },
+
+    async fetchOptions (searchString) {
+      this.isLoading = true
+      try {
+        const response = await dpApi.get(Routing.generate(this.route, { ...this.additionalRouteParams, [this.queryParam]: searchString }))
+        // Only emit results that match the current search -> prevents race conditions
+        if (this.currentQuerry === searchString) this.$emit('search-changed', response)
+        this.isLoading = false
+      } catch (e) {
+        console.log(e)
+      }
+    }
+  }
+}
+</script>

package/components/core/DpBulkEditHeader.vue

@@ -0,0 +1,53 @@
+<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
+    role="menu"
+    class="layout__item u-12-of-12 u-p-0_5 bg-color--system-info-light-1 line-height--1_6">
+    <span class="u-mr">
+      {{ selectedItemsText }}
+    </span>
+    <slot :selected-items-count="selectedItemsCount">
+      <!-- place edit actions here -->
+    </slot>
+    <button
+      type="button"
+      class="btn btn--secondary float--right"
+      @click="$emit('reset-selection')">
+      {{ Translator.trans('unselect') }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DpBulkEditHeader',
+
+  props: {
+    selectedItemsCount: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+
+    selectionText: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  computed: {
+    selectedItemsText () {
+      return this.selectedItemsCount + ' ' + this.selectionText
+    }
+  }
+}
+</script>

package/components/core/DpButtonIcon.vue

@@ -0,0 +1,47 @@
+<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>
+  <button
+    class="btn--icon"
+    v-tooltip="{
+      content: translatedText,
+      delay: { show: 1000, hide: 200 }
+    }"
+    @click="$emit('click')">
+    <i
+      :class="`fa ${icon}`"
+      aria-hidden="true" />
+    <span class="hide-visually">{{ translatedText }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'DpButtonIcon',
+
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+
+    text: {
+      type: String,
+      required: true
+    }
+  },
+
+  computed: {
+    translatedText () {
+      return Translator.trans(this.text)
+    }
+  }
+}
+</script>

package/components/core/DpButtonRow.vue

@@ -0,0 +1,155 @@
+<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 component contains a button row, currently with save and abort buttons. -->
+  <usage>
+    <dp-button-row
+      :busy="isLoading"
+      primary
+      secondary
+      @primary-action="save"
+      @secondary-action="reset" />
+  </usage>
+
+  <usage variant="with slot and third button">
+    <dp-button-row
+      :busy="isLoading"
+      primary
+      secondary
+      @primary-action="save"
+      @secondary-action="reset">
+      <dp-button
+        class="u-ml-0_5"
+        color="secondary"
+        :text="Translator.trans('close')"
+        @click="closeAndCancel" />
+    </dp-button-row>
+  </usage>
+</documentation>
+
+<template>
+  <div
+    :class="[`text--${align}`, $attrs.class]"
+    class="space-inline-s">
+    <dp-button
+      v-if="primary"
+      :busy="busy"
+      :disabled="disabled"
+      :text="primaryText"
+      :variant="variant"
+      @click.prevent="$emit('primary-action')"
+      data-cy="saveButton" />
+    <dp-button
+      v-if="secondary"
+      color="secondary"
+      :href="href"
+      :text="secondaryText"
+      :variant="variant"
+      @click.prevent="$emit('secondary-action')" />
+    <slot />
+  </div>
+</template>
+
+<script>
+import { DpButton } from 'demosplan-ui/components'
+
+export default {
+  name: 'DpButtonRow',
+
+  components: {
+    DpButton
+  },
+
+  props: {
+    /**
+     * Specifies if the buttons should align left or right inside their container.
+     */
+    align: {
+      type: String,
+      required: false,
+      default: 'right'
+    },
+
+    /**
+     * The primary button may have a "busy" state to indicate system progress.
+     */
+    busy: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * The primary button may have a "disabled" state to prevent unwanted user interaction e.g if no data is changed yet.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * The secondary button may be a link under the hood, e.g. for jumping back to another view.
+     * The default value corresponds with the respective value in the `DpButton` component.
+     */
+    href: {
+      type: String,
+      required: false,
+      default: '#'
+    },
+
+    /**
+     * Display a primary button intended to save changes.
+     */
+    primary: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Custom text for the primary button.
+     */
+    primaryText: {
+      type: String,
+      required: false,
+      default: () => Translator.trans('save')
+    },
+
+    /**
+     * Display a secondary button intended to cancel a process or reset input.
+     */
+    secondary: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Custom text for the secondary button.
+     */
+    secondaryText: {
+      type: String,
+      required: false,
+      default: () => Translator.trans('abort')
+    },
+
+    /**
+     * Variants of the button include `outline` (`text` to be implemented).
+     * When not specified, the default style (white on colored background) is applied.
+     */
+    variant: {
+      required: false,
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>