@demos-europe/demosplan-ui 0.0.1

package/components/core/DpTabs/DpTabs.vue

@@ -0,0 +1,165 @@
+<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>
+    <ul
+      class="flex space-inline-m list-style-none border--bottom"
+      role="tablist">
+      <li
+        v-for="(tab, idx) in tabs"
+        :key="`tab:${idx}`"
+        :class="{ 'is-active': tab.isActive }"
+        style="margin-bottom: -1px;">
+        <button
+          role="tab"
+          class="btn--blank o-link--default u-pb-0_5 border--bottom"
+          :class="[
+            tab.isActive ? 'color-ui-interactive border-interactive' : 'border--none color-ui-dimmed-text',
+            tabSize === 'large' ? 'font-size-larger' : 'font-size-large'
+          ]"
+          :aria-selected="tab.isActive"
+          :aria-controls="tab.id"
+          :data-cy="tab.id"
+          @click.prevent="handleTabClick(tab.id)">
+          {{ tab.label }}
+          <span
+            v-if="tab.suffix"
+            v-cleanhtml="tab.suffix" />
+        </button>
+      </li>
+    </ul>
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import { CleanHtml } from 'demosplan-ui/directives'
+
+export default {
+  name: 'DpTabs',
+
+  directives: {
+    cleanhtml: CleanHtml
+  },
+
+  model: {
+    prop: 'activeId',
+    event: 'change'
+  },
+
+  props: {
+    activeId: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    tabSize: {
+      type: String,
+      required: false,
+      default: 'large',
+      validator: (prop) => ['medium', 'large'].includes(prop)
+    },
+
+    /**
+     * Active tab state may be persisted via an Url fragment. Also, ab clicks are pushed
+     * to the browser history to enable state change when browser navigation is used.
+     */
+    useUrlFragment: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data: () => ({
+    tabs: []
+  }),
+
+  computed: {
+    tabIds () {
+      return this.tabs.map(tab => tab.id)
+    }
+  },
+
+  methods: {
+    /**
+     * When users click the back button, the tabs should behave accordingly.
+     */
+    handleHashChange () {
+      const hash = window.location.hash.slice(1)
+
+      if (this.isTabId(hash)) {
+        this.setActiveTab(hash)
+      }
+    },
+
+    handleTabClick (id) {
+      this.$emit('change', id)
+      this.setActiveTab(id)
+
+      if (this.useUrlFragment) {
+        history.pushState(null, null, `#${id}`)
+      }
+    },
+
+    /**
+     * Check if a given string is a valid tab id.
+     * @param id
+     * @return {boolean}
+     */
+    isTabId (id) {
+      return this.tabs.map(tab => tab.id).includes(id)
+    },
+
+    setActiveTab (id) {
+      this.tabs.forEach(tab => {
+        tab.isActive = (tab.id === id)
+      })
+    },
+
+    /**
+     * If a hash specifies a tab, activate it. If a tab is activated
+     * via prop, activate that tab. Fallback to the first tab.
+     */
+    setInitialTab () {
+      const hash = window.location.hash.slice(1)
+
+      if (this.useUrlFragment && this.isTabId(hash)) {
+        this.setActiveTab(hash)
+      } else if (this.activeId) {
+        this.setActiveTab(this.activeId)
+      } else {
+        this.tabs[0].isActive = true
+      }
+    }
+  },
+
+  created () {
+    this.tabs = this.$children
+  },
+
+  mounted () {
+    this.setInitialTab()
+
+    if (this.useUrlFragment) {
+      window.addEventListener('hashchange', this.handleHashChange)
+    }
+  },
+
+  beforeDestroy () {
+    if (this.useUrlFragment) {
+      window.removeEventListener('hashchange', this.handleHashChange)
+    }
+  }
+}
+</script>

package/components/core/DpTextWrapper.vue

@@ -0,0 +1,65 @@
+<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 { DpLoading } from 'demosplan-ui/components'
+
+export default {
+  name: 'DpTextWrapper',
+
+  functional: true,
+
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  /**
+   * Rendering dynamic elements is done by tricking the renderer into
+   * rendering the content of a made up template.
+   *
+   * This works because vue recreates components on the fly if they are
+   * not globally registered. Thus, creating the minicomponent `immediateComponent`
+   * causes its template (the passed text) to be reinterpreted every time.
+   *
+   * Since any component will rerender if any of its props is changed,
+   * changing the text property on a <dp-text-wrapper>-Instance will
+   * cause it to re-evaluate its contents.
+   *
+   * CAVEATS:
+   *
+   * While this is technically able to re-evaluate any html code inside text
+   * and on that way instantiate any Vue component inside, this will - as it
+   * is set up right now - only work for components which are registered to
+   * the global Vue object or to the currently calling parent component.
+   *
+   * @param h
+   * @param context
+   * @return {*}
+   */
+  render (h, context) {
+    const immediateComponent = {
+      template: `<div class='text-wrapper width-fit-content' data-cy='textWrapper'>${context.props.text}</div>`,
+      data () {
+        return context.props.data
+      }
+    }
+
+    return (context.props.text)
+      ? h(immediateComponent)
+      : h(DpLoading, { props: { isLoading: true } })
+  }
+}
+</script>

package/components/core/DpToggleForm.vue

@@ -0,0 +1,72 @@
+<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-accordion
+    ref="accordion"
+    :title="title">
+    <!-- this is where the form fields go -->
+    <slot />
+
+    <slot name="buttons">
+      <dp-button-row
+        primary
+        secondary
+        @primary-action="dpValidateAction(formId, save, false)"
+        @secondary-action="abort" />
+    </slot>
+  </dp-accordion>
+</template>
+
+<script>
+import DpAccordion from './DpAccordion'
+import { dpValidateMixin } from 'demosplan-utils/mixins'
+
+export default {
+  name: 'DpToggleForm',
+
+  components: {
+    DpAccordion,
+    DpButtonRow: () => import('./DpButtonRow')
+  },
+
+  mixins: [dpValidateMixin],
+
+  props: {
+    formId: {
+      type: String,
+      default: ''
+    },
+
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+
+  methods: {
+    abort () {
+      if (this.formId !== '') {
+        document.querySelector(`form#${this.formId}`).reset()
+      } else {
+        this.$emit('form-abort')
+      }
+      this.$refs.accordion.toggle()
+    },
+
+    save () {
+      if (this.formId !== '') {
+        document.querySelector(`form#${this.formId}`).submit()
+      } else {
+        this.$emit('form-save')
+      }
+    }
+  }
+}
+</script>

package/components/core/DpTooltipIcon.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>
+
+<documentation>
+  <!--
+    It renders an fontawesome Icon with a tooltip
+  -->
+  <usage>
+    <dp-tooltip-icon
+      icon="fa-trash"
+      text="some translated String"
+      large="true|false (adds the class fa-lg)"
+    ></dp-tooltip-icon>
+  </usage>
+</documentation>
+
+<template>
+  <i
+    class="fa"
+    :class="[icon, large ? 'fa-lg' : '']"
+    v-tooltip="text" />
+</template>
+
+<script>
+export default {
+  name: 'DpTooltipIcon',
+
+  props: {
+    icon: {
+      required: true,
+      type: String
+    },
+
+    text: {
+      required: true,
+      type: String
+    },
+
+    large: {
+      required: false,
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

package/components/core/DpTransitionExpand.vue

@@ -0,0 +1,87 @@
+<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>
+export default {
+  name: 'DpTransitionExpand',
+
+  functional: true,
+
+  render (createElement, context) {
+    const data = {
+      props: {
+        name: 'expand'
+      },
+
+      on: {
+        afterEnter (element) {
+          element.style.height = 'auto'
+        },
+
+        enter (element) {
+          element.style.width = getComputedStyle(element).width
+          element.style.position = 'absolute'
+          element.style.visibility = 'hidden'
+          element.style.height = 'auto'
+
+          const height = getComputedStyle(element).height
+
+          element.style.width = null
+          element.style.position = null
+          element.style.visibility = null
+          element.style.height = 0
+
+          /*
+           * Force repaint to make sure the
+           * animation is triggered correctly.
+           */
+          /* eslint-disable no-unused-expressions */
+          getComputedStyle(element).height
+
+          /*
+           * Trigger the animation.
+           * We use `requestAnimationFrame` because we need
+           * to make sure the browser has finished
+           * painting after setting the `height`
+           * to `0` in the line above.
+           */
+          requestAnimationFrame(() => {
+            element.style.height = height
+          })
+        },
+
+        leave (element) {
+          element.style.height = getComputedStyle(element).height
+
+          getComputedStyle(element).height
+
+          requestAnimationFrame(() => {
+            element.style.height = 0
+          })
+        }
+      }
+    }
+
+    return createElement('transition', data, context.children)
+  }
+}
+</script>
+
+<!--
+  This is currently not supported but will accelerate the animation
+  once the <style> part of Vue single file templates is also included in the build.
+-->
+<style scoped>
+  * {
+    will-change: height;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    perspective: 1000px;
+  }
+</style>