@demos-europe/demosplan-ui 0.0.1

package/components/core/DpRegisterFlyout.vue

@@ -0,0 +1,58 @@
+<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>
+  <dp-flyout
+    align="left"
+    class="u-ml-0_5"
+    :has-menu="false">
+    <template v-slot:trigger>
+      <div class="c-header__nav-item-link">
+        {{ Translator.trans('register.action') }}
+        <i
+          class="fa fa-angle-down"
+          aria-hidden="true" />
+      </div>
+    </template>
+
+    <div class="space-stack-s">
+      <a
+        class="display--block"
+        :href="Routing.generate('DemosPlan_citizen_registration_form')"
+        v-text="Translator.trans('register')" />
+      <a
+        class="display--block"
+        :href="Routing.generate('DemosPlan_orga_register_form')"
+        v-text="Translator.trans('register.orga')" />
+    </div>
+  </dp-flyout>
+</template>
+
+<script>
+import DpFlyout from './DpFlyout'
+
+export default {
+  name: 'DpRegisterFlyout',
+
+  components: {
+    DpFlyout
+  },
+
+  mounted () {
+    /*
+     * The placeholder element is shown until all javascript has been loaded
+     * and parsed to prevent a flash of missing content.
+     */
+    const placeholder = document.getElementById('registerFlyoutPlaceholder')
+    if (placeholder) {
+      placeholder.remove()
+    }
+  }
+}
+</script>

package/components/core/DpResettableInput.vue

@@ -0,0 +1,140 @@
+<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>
+<!--
+An Inputfield wich comes with an dismiss-icon if there is some Text typed.
+
+Clicking the dismiss-"x" emits "reset".
+
+To provide the interface for dpInput all configuration attributes for the input can be passed via `inputAttributes`.
+
+-->
+</documentation>
+
+<template>
+  <div class="position--relative">
+    <dp-input
+      :id="id"
+      :data-cy="dataCy"
+      has-icon
+      :required="required"
+      v-bind="inputAttributes"
+      @blur="$emit('blur', currentValue)"
+      @input="$emit('input', currentValue)"
+      @enter="$emit('enter', currentValue)"
+      @focus="$emit('focus')"
+      :pattern="pattern"
+      v-model="currentValue" />
+    <button
+      v-if="!inputAttributes.disabled"
+      class="btn--blank o-link--default"
+      :class="buttonClass"
+      :disabled="currentValue === defaultValue"
+      @click="resetValue">
+      <dp-icon
+        icon="xmark"
+        :size="iconSize" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { DpIcon, DpInput } from 'demosplan-ui/components'
+
+export default {
+  name: 'DpResettableInput',
+
+  components: {
+    DpIcon,
+    DpInput
+  },
+
+  props: {
+    dataCy: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * By default, the normal variant is used. If set to 'small', a smaller variant is displayed
+     */
+    buttonVariant: {
+      type: String,
+      required: false,
+      default: 'medium',
+      validator: (prop) => ['small', 'medium'].includes(prop)
+    },
+
+    defaultValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    id: {
+      type: String,
+      required: true
+    },
+
+    inputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+
+    pattern: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      currentValue: this.value
+    }
+  },
+
+  computed: {
+    buttonClass () {
+      return this.buttonVariant === 'small' ? 'o-form__control-search-reset--small' : 'o-form__control-search-reset'
+    },
+
+    iconSize () {
+      return this.buttonVariant
+    }
+  },
+
+  watch: {
+    value: function () {
+      this.currentValue = this.value
+    }
+  },
+
+  methods: {
+    resetValue () {
+      this.$emit('reset')
+    }
+  }
+}
+</script>

package/components/core/DpSkeletonBox.vue

@@ -0,0 +1,32 @@
+<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
+    :style="{height: height, width: width}"
+    class="c-skeleton-box" />
+</template>
+
+<script>
+export default {
+  name: 'DpSkeletonBox',
+
+  props: {
+    height: {
+      type: String,
+      default: '1em'
+    },
+
+    width: {
+      type: String,
+      default: '100%'
+    }
+  }
+}
+</script>

package/components/core/DpSlidebar.vue

@@ -0,0 +1,86 @@
+<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 initializes a SideNav instance and contains a minimal template (mostly for the closing button)
+    closing happens via data-slidebar-hide attribute; opening happens via emitted event instead of data-slidebar-show attribute
+    because sidenav may be initialized before corresponding DOM elements exist
+
+    Put content inside the default slot
+   -->
+</documentation>
+
+<template>
+  <div
+    class="c-slidebar u-pr-0"
+    data-slidebar="right">
+    <div
+      class="c-slidebar__container"
+      data-slidebar-container=""
+      data-cy="sidebarModal">
+      <div class="u-ml-1_5">
+        <button
+          type="button"
+          class="btn--blank o-link--default u-mt-0_5 u-n-ml u-mb u-p-0_25"
+          @click="$emit('close')"
+          data-slidebar-hide="">
+          <dp-icon icon="close" />
+        </button>
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hasOwnProp, SideNav } from 'demosplan-utils'
+import { DpIcon } from 'demosplan-ui/components'
+
+export default {
+  name: 'DpSlidebar',
+
+  components: {
+    DpIcon
+  },
+
+  data () {
+    return {
+      sideNav: {}
+    }
+  },
+
+  methods: {
+    hideSlideBar () {
+      if (hasOwnProp(this.sideNav, 'hideSideNav')) {
+        this.sideNav.hideSideNav()
+        this.$emit('close')
+      }
+    },
+
+    showSlideBar () {
+      if (hasOwnProp(this.sideNav, 'showSideNav')) {
+        this.sideNav.showSideNav()
+      }
+    }
+  },
+
+  mounted () {
+    // Initialize SideNav
+    this.sideNav = new SideNav()
+
+    this.$root.$on('hide-slidebar', () => {
+      this.hideSlideBar()
+    })
+
+    this.$root.$on('show-slidebar', () => {
+      this.showSlideBar()
+    })
+  }
+}
+</script>

package/components/core/DpSlidingPagination.vue

@@ -0,0 +1,45 @@
+<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>
+
+<script>
+import { prefixClass } from 'demosplan-ui/lib'
+import SlidingPagination from 'vue-sliding-pagination'
+
+export default {
+  name: 'DpSlidingPagination',
+  functional: true,
+  methods: {
+    prefixClass (classList) {
+      return prefixClass(classList)
+    }
+  },
+  render (createElement, context) {
+    const current = context.data.attrs.current
+    const total = context.data.attrs.total
+    const customizedProperties = {
+      ariaPaginationLabel: Translator.trans('pager.label'),
+      ariaGotoPageLabel: Translator.trans('pager.goto.page.from.pages', { page: current, total: total }),
+      ariaPreviousPageLabel: Translator.trans('pager.previous'),
+      ariaNextPageLabel: Translator.trans('pager.next'),
+      ariaCurrentPageLabel: Translator.trans('pager.page.from.pages.current.page', { page: current, total: total }),
+      classMap: {
+        componentClass: prefixClass('c-sliding-pagination'),
+        list: prefixClass('c-sliding-pagination__list'),
+        element: prefixClass('c-sliding-pagination__list-element'),
+        elementDisabled: prefixClass('c-sliding-pagination__list-element--disabled'),
+        elementActive: prefixClass('c-sliding-pagination__list-element--active'),
+        page: prefixClass('c-sliding-pagination__page')
+      }
+    }
+    context.data.attrs = { ...context.data.attrs, ...customizedProperties }
+
+    return createElement(SlidingPagination, context.data, context.children)
+  }
+}
+</script>

package/components/core/DpSplitButton.vue

@@ -0,0 +1,77 @@
+<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-click-outside="close"
+    class="c-splitbutton">
+    <slot>
+      <button
+        class="btn btn--primary"
+        type="button">
+        Primary Action Button
+      </button>
+    </slot><!--
+ --><button
+      v-if="hasDropdownContent"
+      class="c-splitbutton__trigger"
+      :class="{'is-open': isOpen}"
+      type="button"
+      aria-haspopup="true"
+      :aria-expanded="isOpen"
+      @click="toggleDropdown"
+      @keyup.esc.prevent="isOpen ? isOpen = !isOpen : ''">
+      <i class="fa fa-caret-down c-splitbutton__trigger-icon" />
+      <span class="hide-visually">{{ Translator.trans(isOpen ? 'dropdown.close' : 'dropdown.open') }}</span>
+    </button>
+    <div
+      v-if="hasDropdownContent"
+      class="c-splitbutton__dropdown"
+      role="menu"
+      :class="{'is-open': isOpen}">
+      <slot name="dropdown">
+        Dropdown Actions
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import ClickOutside from 'vue-click-outside'
+
+export default {
+  name: 'DpSplitButton',
+
+  directives: {
+    ClickOutside
+  },
+
+  data () {
+    return {
+      isOpen: false,
+      hasDropdownContent: false
+    }
+  },
+
+  methods: {
+    close () {
+      this.isOpen = false
+    },
+
+    toggleDropdown () {
+      this.isOpen = (this.isOpen === false)
+    }
+  },
+
+  mounted () {
+    this.popupItem = this.$el
+    this.hasDropdownContent = (typeof this.$slots.dropdown !== 'undefined')
+  }
+}
+</script>

package/components/core/DpSwitcher.vue

@@ -0,0 +1,62 @@
+<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>
+
+<!--
+This component is the generic switcher (toggle) component. It toggles the view/values between two states. The two options (states) are defined in parent with slots: option1 and option2.
+If the first option is checked, the data: isFirstOptionActive = true. On click the toggle method emits the 'input' event to the parent.
+
+For now the component is used in DpFragmentSwitcher component, which toggles the statements/fragments view in the assessment table.
+-->
+
+<template>
+  <div class="o-switcher">
+    <input
+      type="checkbox"
+      :id="inputId "
+      @change="toggle">
+    <label :for="inputId">
+      <div
+        class="o-switcher__option float--left"
+        :class="{'o-switcher__option--checked': active}">
+        <slot name="option1" />
+      </div>
+      <div
+        class="o-switcher__option float--right"
+        :class="{'o-switcher__option--checked': false === active}"
+        data-cy="fragmentTab">
+        <slot name="option2" />
+      </div>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DpSwitcher',
+
+  props: {
+    active: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
+
+    inputId: {
+      required: true,
+      type: String
+    }
+  },
+
+  methods: {
+    toggle () {
+      this.$emit('input', (this.active === false))
+    }
+  }
+}
+</script>

package/components/core/DpTableCardList/DpTableCard.vue

@@ -0,0 +1,61 @@
+<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>
+  <li
+    :class="{'is-expanded': isOpen}"
+    v-cloak>
+    <!--  item header  -->
+    <div
+      data-add-animation>
+      <slot name="header" />
+    </div>
+    <!--  item content - hidden with table-cards:toggle-view 'collapsed' (List view)  -->
+    <transition name="fading">
+      <div
+        v-show="isOpen"
+        class="u-p-0_5">
+        <slot />
+      </div>
+    </transition>
+  </li>
+</template>
+
+<script>
+
+export default {
+  name: 'DpTableCard',
+
+  props: {
+    open: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      isOpen: this.open
+    }
+  },
+
+  watch: {
+    open (newVal) {
+      this.isOpen = newVal
+    }
+  },
+
+  methods: {
+    toggle (val) {
+      this.isOpen = (typeof val !== 'undefined') ? val : (this.isOpen === false)
+    }
+  }
+}
+</script>

package/components/core/DpTableCardList/DpTableCardListHeader.vue

@@ -0,0 +1,83 @@
+<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>
+  <dp-sticky-element>
+    <!-- search and buttons -->
+    <dp-search-field
+      v-if="searchable"
+      class="layout__item u-1-of-2 u-mb-0_5"
+      :placeholder="searchPlaceholder"
+      @reset="$emit('reset-search')"
+      @search="val => $emit('search', val)" /><!--
+ --><slot name="header-buttons" />
+    <!-- header with checkbox and labels-->
+    <div class="layout__item u-pv-0_5 border--bottom">
+      <dp-checkbox
+        v-if="selectable"
+        id="selectAll"
+        class="display--inline-block"
+        @change="val => $emit('select-all', val)" /><!--
+    --><div
+        class="layout__item weight--bold"
+        :class="[item.classes ? item.classes : '', item.width ? item.width : '']"
+        v-for="(item, idx) in items"
+        :key="idx">
+        {{ item.label }}
+      </div>
+    </div>
+  </dp-sticky-element>
+</template>
+
+<script>
+import DpCheckbox from '../form/DpCheckbox'
+import DpStickyElement from '../shared/DpStickyElement'
+
+export default {
+  name: 'DpTableCardListHeader',
+
+  components: {
+    DpCheckbox,
+    DpSearchField: () => import('../form/DpSearchField'),
+    DpStickyElement
+  },
+
+  props: {
+    /**
+     * Items to display in the list header
+     * { label: 'columnLabel', width: 'u-x-of-x', classes: 'your css classes' }
+     */
+    items: {
+      type: Array,
+      required: true
+    },
+
+    /**
+     * Add a search field above the list
+     */
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+
+    searchPlaceholder: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Adds a checkbox in the first column
+     */
+    selectable: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

package/components/core/DpTabs/DpTab.vue

@@ -0,0 +1,52 @@
+<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>
+  <section
+    v-show="isActive"
+    :id="id"
+    role="tabpanel">
+    <slot />
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'DpTab',
+
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * The label is passed to the DpTab child component, but then it is used
+     * in the parent component DpTabs.
+     */
+    label: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * A html string may be passed here which is appended to the tab label.
+     */
+    suffix: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+
+  data: () => ({
+    isActive: false
+  })
+}
+</script>