comand-component-library 3.1.45 → 3.1.48

package/src/mixins/FieldValidation.js

@@ -0,0 +1,220 @@
+// import mixins
+import I18n from "./I18n"
+import GlobalDefaultMessageProperties from "./GlobalDefaultMessageProperties"
+
+export default {
+    data() {
+        return {
+            validationStatus: "",
+            capsLockActivated: false
+        }
+    },
+    mixins: [
+        I18n,
+        GlobalDefaultMessageProperties
+    ],
+    props: {
+        /**
+         * validation message shown on clicking the status-icon of a form-element with state
+         */
+        validationMessage: {
+            type: String,
+            required: false
+        },
+        /**
+         * link to faq/help
+         */
+        helplink: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    url: "helpurl",
+                    target: "help",
+                    text: "Open help",
+                    // text: this.getMessage("cmdfieldvalidation.open_detailed_help"),
+                    icon: {
+                        iconClass: "icon-questionmark-circle",
+                        tooltip: "Open help in new tab"
+                    }
+                }
+            }
+        },
+        /**
+         * define custom requirement for validation
+         *
+         * prepared functions are already defined in FieldValidation.js
+         */
+        customRequirements: {
+            type: Array,
+            required: false
+        },
+        /**
+         * toggle requirements in tooltip
+         */
+        showRequirements: {
+            type: Boolean,
+            default: true
+        },
+        iconError: {
+            type: String,
+            default: "icon-error-circle"
+        } ,
+        iconWarning: {
+            type: String,
+            default: "icon-exclamation-circle"
+        },
+        iconSuccess: {
+            type: String,
+            default: "icon-check-circle"
+        },
+        iconInfo: {
+            type: String,
+            default: "icon-info-circle"
+        },
+        iconCapsLock: {
+            type: String,
+            default: "icon-home"
+        },
+        iconHelp: {
+            type: String,
+            default: "icon-questionmark-circle"
+        }
+    },
+    computed: {
+        getValidationMessage() {
+            if (this.validationStatus !== "") {
+                if (this.validationStatus === "error" && !this.validationMessage) {
+                    return this.getMessage("cmdfieldvalidation.information_not_filled_correctly")
+                }
+                if (this.validationStatus === "warning" && this.capsLockActivated) {
+                    return this.getMessage("cmdfieldvalidation.caps_lock_is_activated")
+                }
+                if (this.validationStatus === "success") {
+                    return this.getMessage("cmdfieldvalidation.information_filled_correctly")
+                }
+            }
+            return ""
+        },
+        getStatusIconClass() {
+            if (this.validationStatus !== "") {
+                if (!this.capsLockActivated) {
+                    if (this.validationStatus === "error") {
+                        return this.iconError
+                    } else if (this.validationStatus === "warning") {
+                        return this.iconWarning
+                    } else if (this.validationStatus === "success") {
+                        return this.iconSuccess
+                    }
+                    return this.iconInfo
+                } else {
+                    return this.iconCapsLock
+                }
+            }
+            return this.iconHelp
+        },
+        inputRequirements() {
+            const standardRequirements = []
+            // check if field is required
+            if(this.$attrs.required) {
+                standardRequirements.push({
+                    message: this.getRequirementMessage(),
+                    valid(value, attributes) {
+                        return !attributes.required || value.length > 0
+                    }
+                })
+            }
+            // check if filed has a minimum length
+            if(this.$attrs.minlength) {
+                standardRequirements.push({
+                    message: "Input has minimum length (" + this.value.length + "/" + this.$attrs.minlength + ")",
+                    valid(value, attributes) {
+                        return value.length >= attributes.minlength
+                    }
+                })
+            }
+            // check is field has custom requirements defined
+            if(!this.customRequirements || !this.customRequirements.length) {
+                return standardRequirements
+            }
+            // duplicate existing requirements into new (combined) array
+            return [...standardRequirements, ...this.customRequirements]
+        }
+    },
+    methods: {
+        checkForCapsLock(event) {
+            if ((["password", "number", "url", "email"].includes(this.$attrs.type)) && event.getModifierState("CapsLock")) {
+                this.capsLockActivated = true
+                this.validationStatus = "warning"
+            } else {
+                this.capsLockActivated = false
+                this.validationStatus = ""
+            }
+        },
+        getRequirementMessage() {
+            return this.getMessage("cmdfieldvalidation.required_field_is_filled")
+        }
+    }
+}
+
+function validateSpecialCharacters(message = "Field contains Special character") {
+  return {
+      message,
+      valid(value) {
+          return !/^[a-z0-9\s]*$/i.test(value)
+      }
+  }
+}
+
+function validateNumbers(message = "Field contains numbers") {
+    return {
+        message, // short for message: message
+        valid(value) {
+            return /\d/.test(value)
+        }
+    }
+}
+
+function validateNumbersOnly(message = "Field contains numbers only") {
+    return {
+        message, // short for message: message
+        valid(value) {
+            return /^\d*$/.test(value)
+        }
+    }
+}
+
+function validateCharacters(message = "Field contains at least one character") {
+    return {
+        message,
+        valid(value) {
+            return /[a-z]/i.test(value)
+        }
+    }
+}
+
+function validateCapitalLetters(message = "Field contains capital letters") {
+    return {
+        message,
+        valid(value) {
+            return /[A-Z]/.test(value)
+        }
+    }
+}
+/*
+function validateMaxlength(message = "Input has maximum length") {
+    return {
+        message,
+        valid(value, attributes) {
+            return value.length <= attributes.maxlength
+        }
+    }
+}
+*/
+export {
+    validateSpecialCharacters,
+    validateNumbers,
+    validateNumbersOnly,
+    validateCharacters,
+    validateCapitalLetters
+}

package/src/mixins/GlobalDefaultMessageProperties.js

@@ -0,0 +1,15 @@
+export default {
+    data() {
+        return {
+            defaultMessageProperties: {
+                "cmdfieldvalidation.open_detailed_help": "Open detailed help!",
+
+                "cmdfieldvalidation.information_not_filled_correctly": "This information is not filled correctly!",
+                "cmdfieldvalidation.information_filled_correctly": "This information is filled correctly!",
+                "cmdfieldvalidation.caps_lock_is_activated": "Attention: Caps lock is activated!",
+                "cmdfieldvalidation.required_field_is_filled": "Required field is filled!",
+                "cmdfieldvalidation.field_contains_special_character": "Field contains Special character"
+            }
+        }
+    }
+}

package/src/mixins/Tooltip.js

@@ -0,0 +1,26 @@
+import {nextSequenceValue} from "../utils/globalSequence";
+
+export default {
+    data() {
+        return {
+            tooltip: false,
+            tooltipId: "tooltip-" + nextSequenceValue()
+        }
+    },
+    props: {
+        /**
+         * useCustomTooltip
+         */
+        useCustomTooltip: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * allow closing tooltip by escape-key
+         */
+        allowEscapeKey: {
+            type: Boolean,
+            default: true
+        }
+    }
+}

package/src/router/index.js

@@ -0,0 +1,67 @@
+import { createRouter, createWebHistory } from "vue-router"
+import {routeHandler as tabsRouteHandler} from "../documentation/tabs"
+import ContainerPage from "../documentation/views/ContainerPage"
+import HelpHome from "../documentation/views/HelpHome"
+import IconFont from "../documentation/views/IconFont"
+import componentsDescription from "../documentation/data/componentsDescription"
+import ComponentDocumentation from "../ComponentDocumentation"
+
+const routes = []
+
+const componentNames = Object.keys(componentsDescription)
+
+routes.push({
+    path: "/",
+    name: "home",
+    component: HelpHome
+})
+
+routes.push({
+    path: "/subsubpage/:param1/:param2",
+    name: "subsubpage",
+    redirect: {
+        name: componentNames[0]
+    }
+})
+
+const componentsRoute = {
+    path: "/components",
+    name: "components",
+    component: ComponentDocumentation,
+    redirect: {
+        name: componentNames[0]
+    },
+    children: []
+}
+
+for(let i = 0 ; i < componentNames.length ; i++) {
+    componentsRoute.children.push(
+        {
+            path: componentNames[i] + "/:tab?",
+            name: componentNames[i],
+            component: ContainerPage,
+            props: () => ({
+                componentName: componentNames[i],
+                previousComponentName: i === 0 ? componentNames[componentNames.length - 1] : componentNames[i - 1],
+                nextComponentName: i === componentNames.length - 1 ? componentNames[0] : componentNames[i + 1]
+            })
+        }
+    )
+}
+
+routes.push(componentsRoute)
+
+routes.push({
+    path: "/iconfont",
+    name: "iconfont",
+    component: IconFont
+})
+
+const router = createRouter({
+    history: createWebHistory(process.env.BASE_URL),
+    routes
+})
+
+router.beforeEach(tabsRouteHandler)
+
+export default router

package/src/utilities.js

@@ -1,11 +1,8 @@
 function getRoute (entry) {
-    if(entry.link.path) {
-        return entry.link.path
-    }
-    return {
-        name: entry.link.name,
-        params: entry.link.params || {} // if entry.link.params is set (or return empty object)
+    if(entry.path) {
+        return entry.path
     }
+    return entry.route
 }
 
 export { getRoute }

package/src/utils/common.js

@@ -0,0 +1,6 @@
+function isFrameMode() {
+    const frameUrl = new URL(location)
+    return frameUrl.searchParams.has("frameMode")
+}
+
+export {isFrameMode}

package/src/utils/dom.js

@@ -0,0 +1,8 @@
+function getOffsetTop(el) {
+    if (el.offsetParent) {
+        return el.offsetTop + getOffsetTop(el.offsetParent)
+    }
+    return el.offsetTop
+}
+
+export {getOffsetTop}

package/src/utils/globalSequence.js

@@ -0,0 +1,13 @@
+const sequences = {}
+
+function nextSequenceValue(sequenceName = "defaultSequence") {
+    const currentValue = sequences[sequenceName] || 0 // get currentValue for specific sequence (else set value to 0)
+    sequences[sequenceName] = currentValue + 1 // raise currentValue by 1
+    return sequences[sequenceName]
+}
+
+function currentSequenceValue(sequenceName = "defaultSequence") {
+    return sequences[sequenceName] || 0 // get currentValue for specific sequence (else set value to 0)
+}
+
+export {nextSequenceValue, currentSequenceValue}

package/src/utils/string.js

@@ -0,0 +1,8 @@
+function capitalize(string) {
+    if(string) {
+        return string.slice(0, 1).toUpperCase() + string.slice(1)
+    }
+    return ""
+}
+
+export {capitalize}

package/src/assets/data/address.json

@@ -1,13 +0,0 @@
-{
-      "address": {
-            "streetNo": "Steinmetzstraße 16",
-            "zip": 41515,
-            "city": "Grevenbroich"
-      },
-      "telephone": "+1 (0)1234/56789",
-      "mobilephone": "+1 555-12345",
-      "fax": "+1 (0)1234/567810",
-      "email": "youremail@provider.com"
-}
-
-

package/src/assets/data/footer-navigation.json

@@ -1,38 +0,0 @@
-[
-  {
-    "iconClass": "icon-user-profile",
-    "type": "href",
-    "linkName": "",
-    "path": "#",
-    "target": "",
-    "tooltip": "Link without name, but tooltip"
-  },
-  {
-    "type": "href",
-    "linkName": "Private policy",
-    "path": "",
-    "target": "",
-    "fancybox": true
-  },
-  {
-    "type": "href",
-    "linkName": "CoManD-Website",
-    "path": "http://www.comand-cms.com",
-    "target": "_blank"
-  },
-  {
-    "type": "href",
-    "linkName": "Router with path",
-    "path": "http://www.comand-cms.com"
-  },
-  {
-    "type": "href",
-    "linkName": "Router with name",
-    "path": "#"
-  },
-  {
-    "type": "href",
-    "linkName": "Router with name and params",
-    "path": "#"
-  }
-]

package/src/assets/data/languages.json

@@ -1,31 +0,0 @@
-[
-  {
-    "iso2": "de",
-    "name": "Deutsch",
-    "tooltip": "Sprache zu deutsch wechseln",
-    "link": {
-      "type": "router",
-      "path": "/"
-    }
-  },
-  {
-    "iso2": "en",
-    "name": "English",
-    "tooltip": "Switch language to English",
-    "link": {
-      "type": "router",
-      "name": "somename",
-      "params":  {
-          "id": 123
-      }
-    }
-  },
-  {
-    "iso2": "fr",
-    "name": "Francais",
-    "tooltip": "Switch language to Francais",
-    "link": {
-      "path": "#"
-    }
-  }
-]

package/src/assets/data/multisteps.json

@@ -1,27 +0,0 @@
-[
-  {
-    "path": "",
-    "name": "Contact",
-    "iconClass": "icon-address"
-  },
-  {
-    "path": "",
-    "name": "Settings",
-    "iconClass": "icon-configuration"
-  },
-  {
-    "path": "",
-    "name": "Attachments",
-    "iconClass": "icon-attachment"
-  },
-  {
-    "path": "",
-    "name": "Terms and Conditions",
-    "iconClass": "icon-section-sign"
-  },
-  {
-    "path": "",
-    "name": "Summary",
-    "iconClass": "icon-rows"
-  }
-]

package/src/assets/data/navigation.json

@@ -1,47 +0,0 @@
-[
-  {
-    "name": "Entry 1",
-    "href": "",
-    "target": "",
-    "subentries": []
-  },
-  {
-    "name": "Entry 2",
-    "href": "",
-    "target": "",
-    "subentries": [
-      {
-        "name": "Entry 2.1",
-        "href": "",
-        "target": "",
-        "subentries": [
-            {
-              "name": "Entry 2.1.1",
-              "href": "",
-              "target": ""
-            },
-            {
-              "name": "Entry 2.1.2",
-              "href": "",
-              "target": ""
-            },
-            {
-              "name": "Entry 2.1.3",
-              "href": "",
-              "target": ""
-            }
-        ]
-      },
-      {
-        "name": "Entry 2.2",
-        "href": "",
-        "target": ""
-      }
-    ]
-  },
-  {
-    "name": "CoManD-CMS",
-    "href": "http://www.comand-cms.com",
-    "target": "_blank"
-  }
-]

package/src/assets/data/pager.json

@@ -1,11 +0,0 @@
-[
-  {
-    "item": "<p>Content 1</p>"
-  },
-  {
-    "item": "<p>Content 2</p>"
-  },
-  {
-    "item": "<p>Content 3</p>"
-  }
-]

package/src/assets/data/top-header-navigation.json

@@ -1,27 +0,0 @@
-[
-  {
-    "linkType": "href",
-    "path": "http://www.comand-cms.com",
-    "target": "_blank",
-    "icon": {
-      "iconClass": "icon-globe",
-      "tooltip": "CoManD-CMS"
-    }
-  },
-  {
-    "linkType": "href",
-    "path": "#anchor-section4",
-    "icon": {
-      "iconClass": "icon-mail",
-      "tooltip": "Contact"
-    }
-  },
-  {
-    "linkType": "href",
-    "path": "#anchor-section3",
-    "icon": {
-      "iconClass": "icon-user-profile",
-      "tooltip": "Login"
-    }
-  }
-]

package/src/components/CmdFooterNavigation.vue

@@ -1,71 +0,0 @@
-<template>
-    <div class="cmd-footer-navigation">
-        <h4 v-if="headline">{{ headline }}</h4>
-        <ul class="flex-container">
-            <li v-for="(link, index) in footerNavigation" :key="index">
-                <router-link v-if="link.type === 'router'" :to="getRoute(link)" :title="link.tooltip">
-                    <span v-if="link.iconClass" :class="link.iconClass"></span>
-                    <span v-if="link.linkName">{{ link.linkName }}</span>
-                </router-link>
-                <a v-else :href="link.path" :target="link.target" @click="executeLink(link, $event)"
-                   :title="link.tooltip">
-                    <span v-if="link.iconClass" :class="link.iconClass"></span>
-                    <span v-if="link.linkName">{{ link.linkName }}</span>
-                </a>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-import {getRoute} from "../utilities.js"
-import {openFancyBox} from "./CmdFancyBox.vue"
-
-export default {
-    name: "CmdFooterNavigation",
-    props: {
-        /**
-         * headlien above links
-         */
-        headline: {
-            type: String,
-            required: false
-        },
-        /**
-         * list of links shown vertically
-         */
-        footerNavigation: {
-            type: Array,
-            required: false
-        }
-    },
-    methods: {
-        getRoute(language) {
-            return getRoute(language)
-        },
-        executeLink(link, event) {
-            if (link.fancybox) {
-                event.preventDefault()
-                openFancyBox({url: link.link.path})
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-/* begin cmd-footer-navigation ---------------------------------------------------------------------------------------- */
-.cmd-footer-navigation {
-    ul {
-        flex-direction: column;
-        gap: calc(var(--default-gap) / 2);
-
-        li {
-            list-style: none;
-            margin-left: 0;
-        }
-    }
-}
-
-/* end cmd-footer-navigation ------------------------------------------------------------------------------------------ */
-</style>