@demos-europe/demosplan-ui 0.0.1

package/directives/Tooltip/Tooltip.js

@@ -0,0 +1,40 @@
+/**
+ * (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 { VPopover, VTooltip } from 'v-tooltip'
+
+/*
+ * Merge custom config into default options for tooltip config.
+ * The non-vue tooltip lib also uses tooltip.js, both have to be in sync.
+ */
+const tooltipConfig = {
+  defaultHtml: true,
+  defaultBoundariesElement: 'scrollParent',
+  defaultDelay: {
+    show: 300,
+    hide: 100
+  },
+  defaultTemplate: '<div class="tooltip" role="tooltip"><div class="tooltip__arrow"></div><div class="tooltip__inner"></div></div>',
+  popover: {
+    defaultPlacement: 'top',
+    defaultBaseClass: 'tooltip',
+    defaultInnerClass: 'tooltip__inner',
+    defaultArrowClass: 'tooltip__arrow',
+    defaultDelay: {
+      show: 300,
+      hide: 100
+    },
+    defaultTrigger: 'hover'
+  }
+}
+VTooltip.options = { ...VTooltip.options, ...tooltipConfig }
+VPopover.options = { ...VPopover.options, ...tooltipConfig }
+const Tooltip = VTooltip
+
+export { VPopover, Tooltip }

package/directives/Tooltip/Tooltip.stories.mdx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta
+    title="Directives/Tooltip"
+    parameters={{
+        viewMode: 'docs',
+        previewTabs: {
+            canvas: {
+                hidden: true
+            }
+        },
+    }} />
+
+# Tooltip
+
+This directive adds a tooltip to the element it is used on.
+
+## Simple usage
+
+```html
+<template>
+  <div>
+    <i
+        class="fa fa-question-circle float--right u-mt-0_125"
+        v-tooltip="`some text to display in a tooltip`" />
+  </div>
+</template>
+<script>
+import { Tooltip } from 'demosplan-ui/directives'
+
+export default {
+  name: 'MyComponent',
+
+  directives: {
+    tooltip: Tooltip
+  },
+
+  //...
+}
+
+</script>
+```

package/directives/index.js

@@ -0,0 +1,17 @@
+/**
+ * (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 { Tooltip, VPopover } from './Tooltip/Tooltip'
+import { CleanHtml } from './CleanHtml/CleanHtml'
+
+export {
+  CleanHtml,
+  Tooltip,
+  VPopover
+}

package/lib/index.js

@@ -0,0 +1,14 @@
+/**
+ * (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 prefixClass from './prefixClass'
+
+export {
+  prefixClass
+}

package/lib/prefixClass.js

@@ -0,0 +1,47 @@
+/**
+ * (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
+ */
+
+/**
+ * Prefix css classes with a parameter given from the project settings
+ *
+ * @param {String}  classList or querySelector
+ *
+ * @return {String} prefixed classList
+ */
+export default function prefixClass (classList = '') {
+  let prefix = ''
+  if (typeof dplan !== 'undefined' && dplan.settings && dplan.settings.publicCSSClassPrefix) {
+    prefix = dplan.settings.publicCSSClassPrefix
+  }
+
+  let prefixed = ''
+
+  // Don't try to do something if the result should not change
+  if (prefix === '') {
+    return classList
+  }
+
+  // Throw error if the type is wrong
+  if (typeof classList !== 'string') {
+    throw new Error('classList is an' + typeof classList + '. should be String.', classList)
+  }
+
+  /*
+   * Assuming that a querySelector is passed when classList contains a dot, only the class selector parts are prefixed.
+   * In the unlikely case that classes contain dots as part of their names, they will not be prefixed.
+   */
+  const checkClassList = /[.#[]/gi
+  if (checkClassList.test(classList)) {
+    prefixed = classList.replace(/(\.)(\S+)/gi, (cl, m1, m2) => `.${prefix}${m2}`)
+  } else {
+    prefixed = classList.replace(/(\S+)/gi, cl => `${prefix}${cl}`)
+  }
+
+  return prefixed
+}

package/mixins/index.js

@@ -0,0 +1,14 @@
+/**
+ * (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 prefixClassMixin from './prefixClassMixin'
+
+export {
+  prefixClassMixin
+}

package/mixins/prefixClassMixin.js

@@ -0,0 +1,22 @@
+/**
+ * (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
+ */
+
+/**
+ * This mixin can be to provide the prefixClass method and a prop to control when to prefix and when not.
+ *
+ */
+import prefixClass from '../lib/prefixClass'
+
+export default {
+  methods: {
+    prefixClass (classList) {
+      return prefixClass(classList)
+    }
+  }
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@demos-europe/demosplan-ui",
+  "version": "0.0.1",
+  "license": "MIT",
+  "private": false,
+  "description": "Vue components, Vue directives, Design Token and Scss files to build interfaces for demosPlan.",
+  "dependencies": {
+    "@braintree/sanitize-url": "^6.0.1",
+    "@uppy/core": "^3.0.1",
+    "@uppy/drag-drop": "^3.0.0",
+    "@uppy/progress-bar": "^3.0.0",
+    "@uppy/tus": "^3.0.1",
+    "a11y-datepicker": " ^0.9.0",
+    "dayjs": "^1.11.5",
+    "dompurify": "^2.4.0",
+    "ismobilejs": "^1.1.1",
+    "lscache": "^1.3.2",
+    "plyr": "^3.7.2",
+    "style-dictionary": "^3.7.1",
+    "tailwindcss": "^3.2.1",
+    "tippy.js": "^6.3.7",
+    "tiptap": "^1.32.2",
+    "tiptap-commands": "^1.17.0",
+    "tiptap-extensions": "^1.35.2",
+    "uuid": "^9.0.0",
+    "v-tooltip": "2.1.3",
+    "vue-click-outside": "^1.1.0",
+    "vue-multiselect": "^2.1.6",
+    "vue-omnibox": "^0.3.7",
+    "vue-sliding-pagination": "^1.3.2",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.3",
+    "@storybook/addon-actions": "6.5.13",
+    "@storybook/addon-docs": "6.5.13",
+    "@storybook/addon-essentials": "6.5.12",
+    "@storybook/addon-links": "6.5.12",
+    "@storybook/vue": "6.5.12",
+    "babel-loader": "^8.2.5",
+    "js-beautify": "^1.14.7",
+    "vue-loader": "^15.9.8"
+  },
+  "scripts": {
+    "build-css": "tailwindcss -i ./style/index.css -o ./style/style.css",
+    "build-storybook": "build-storybook",
+    "build-tokens": "node buildTokens.js",
+    "preinstall": "yarn build-tokens",
+    "storybook": "start-storybook -p 6006"
+  }
+}

package/shared/props.js

@@ -0,0 +1,86 @@
+/**
+ * (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
+ */
+
+/**
+ * Props that are shared between multiple Vue form components.
+ *
+ * The prop `maxlength` is implemented as a factory function with no params - actually it could also be
+ * a simple object. However, since we tend to copy and paste, and to path a way for future expansion
+ * of this pattern, it should be mentioned that crafting dynamic prop definitions is possible like so:
+ *
+ * ```
+ *    // In this file...
+ *    const myProp = (param = defaultValue) => {
+ *      // ...define prop
+ *    }
+ *    // In the component...
+ *    import { myProp } from 'demosplan-ui/shared/props'
+ *    props: {
+ *      myProp: myProp('otherValue'),
+ *    }
+ * ```
+ */
+
+/**
+ * Can be used e.g for maxLength to Limit the maximum allowed number of characters to the given amount.
+ * If set, it renders a hint with a counter of the characters yet available.
+ *
+ * The type may be Boolean just to allow for the falsy default (making it possible to pass it down
+ * to the actual textarea element without further transformation), or String (but containing an integer),
+ * to not be forced to transform it to int in every template with `:maxlength="'<Number>'"`.
+ */
+const length = () => {
+  return {
+    type: [Boolean, String],
+    required: false,
+    default: false,
+    validator: (string) => {
+      /*
+       * The `string !== true` check actually tests for the empty string being passed
+       * to the property, which internally is converted to the boolean "true". That way,
+       * using the `maxlength` attr without assigning a value to it throws an error.
+       * On the other hand it should not be possible to pass values that can't be
+       * converted into a whole number.
+       */
+      return string !== true && Number(string) % 1 === 0
+    }
+  }
+}
+
+/**
+ * Allows passing of additional attributes into the inner form element. Only chosen elements
+ * are allowed for each element type, failing if at least one attribute is not allowed within the array.
+ *
+ * Attributes are specified like `:attributes="['attrName1=attrValue1', 'attrName2=attrValue2']"`.
+ *
+ * @param {String} element  Type of element
+ */
+const attributes = element => {
+  const allowed = {
+    textarea: ['cols', 'rows']
+  }
+  return {
+    type: Array,
+    required: false,
+    default: () => [],
+    validator: applied => {
+      const allowedApplied = applied.filter(attr => {
+        const attrArr = attr.split('=')
+        return allowed[element].includes(attrArr[0]) && attrArr.length === 2
+      })
+      if (applied.length === 0 || allowedApplied.length === applied.length) {
+        return true
+      } else {
+        console.error(`A Vue form component of type "${element}" is used with the "attributes" prop containing a disallowed attr.`)
+      }
+    }
+  }
+}
+
+export { attributes, length }

package/style/index.css

@@ -0,0 +1,7 @@
+/**
+ * @noinspection
+ * PHPStorm complains about unset css vars in rendered css. This is irritating and can be suppressed.
+ */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/tailwind.config.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
+ */
+
+module.exports = {
+  content: ['./components/**/*.{js,vue}', './directives/**/*.js'],
+  corePlugins: {
+    preflight: false // Enable later when removing demosplan base styles. See https://tailwindcss.com/docs/preflight
+  },
+  plugins: [],
+  safelist: [
+    {
+      pattern: /./// Disable purging https://github.com/tailwindlabs/tailwindcss/discussions/6557#discussioncomment-1838214
+    }
+  ],
+  theme: {
+    extend: {}
+  }
+}