comand-component-library 3.1.44 → 3.1.47

package/src/ComponentDocumentation.vue

@@ -0,0 +1,156 @@
+<template>
+    <div id="component-documentation">
+        <div v-if="!isFrameMode()" class="nav-wrapper">
+            <CmdFormElement
+                element="input"
+                type="search"
+                id="component-search"
+                labelText="Search components"
+                placeholder="Search components"
+                :showLabel="false"
+                :showSearchButton="false"
+                fieldIconClass="icon-search"
+                v-model="filterComponents"
+            />
+            <CmdSystemMessage
+                v-if="!componentNames.length"
+                validationStatus="warning"
+                :systemMessage="'Cannot find component name including &quot;' + filterComponents + '&quot;'"
+            />
+            <nav class="flex-container">
+                <template v-for="startingLetter in startingLetters" :key="startingLetter">
+                    <h4>{{ startingLetter }}</h4>
+                    <ul>
+                        <li v-for="componentName in componentNamesWithStartingLetter(startingLetter)" :key="componentName">
+                            <router-link :to="{name: componentName}">{{ componentNameText(componentName) }}</router-link>
+                        </li>
+                    </ul>
+                </template>
+            </nav>
+        </div>
+        <router-view></router-view>
+        <CmdBackToTopButton/>
+    </div>
+</template>
+
+<script>
+// import functions
+import {isFrameMode} from "./utils/common"
+
+// import components
+import CmdBackToTopButton from "./components/CmdBackToTopButton"
+import CmdFormElement from "./components/CmdFormElement"
+import CmdSystemMessage from "./components/CmdSystemMessage"
+
+// import list of components
+import componentsDescription from "./documentation/data/componentsDescription.json"
+
+export default {
+    components: {
+        CmdBackToTopButton,
+        CmdFormElement,
+        CmdSystemMessage
+    },
+    data() {
+        return {
+            filterComponents: ""
+        }
+    },
+    computed: {
+        componentNames() {
+            const filterTerm = this.filterComponents.trim().toLowerCase()
+
+            if(filterTerm) {
+                return Object.keys(componentsDescription).filter((componentName) => {
+                    return componentName.toLowerCase().includes(filterTerm)
+                })
+            }
+            return Object.keys(componentsDescription)
+        },
+        startingLetters() {
+            const startingLetters = []
+            for (let i = 0; i < this.componentNames.length; i++) {
+                const componentStartingLetter = this.getComponentStartingLetter(this.componentNames[i])
+                if (!startingLetters.includes(componentStartingLetter)) {
+                    startingLetters.push(componentStartingLetter)
+                }
+            }
+            return startingLetters.sort()
+        }
+    },
+    methods: {
+        isFrameMode() {
+            return isFrameMode()
+        },
+        componentNameText(componentName) {
+            return componentName.replace("Cmd", "")
+        },
+        componentNamesWithStartingLetter(startingLetter) {
+            const components = []
+            for (let i = 0; i < this.componentNames.length; i++) {
+                const componentStartingLetter = this.getComponentStartingLetter(this.componentNames[i])
+
+                if (startingLetter === componentStartingLetter) {
+                    components.push(this.componentNames[i])
+                }
+            }
+            return components.sort()
+        },
+        getComponentStartingLetter(componentName) {
+            return this.componentNameText(componentName).slice(0, 1)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+#responsive-view {
+    resize: vertical;
+}
+
+#component-documentation {
+    display: flex;
+
+    .nav-wrapper {
+        background: var(--default-background-color);
+        flex: none;
+        border-right: var(--default-border);
+        box-shadow: .2rem 0 .4rem #999;
+        max-width: 20rem;
+
+        nav {
+            width: auto;
+            flex-direction: column;
+            gap: 0;
+            padding: var(--default-padding) 0;
+
+            h4 {
+                padding-left: var(--default-padding);
+                margin-bottom: 0;
+            }
+
+            ul {
+                flex-direction: column;
+                border: 0;
+                background: none;
+                border-top: var(--border-color);
+
+                li {
+                    border: 0;
+                    border-bottom: var(--default-border);
+
+                    a.router-link-active {
+                        background: var(--primary-color);
+                        color: var(--pure-white);
+                    }
+                }
+            }
+        }
+    }
+
+    main {
+        width: 100%;
+        padding: calc(var(--default-padding) * 2);
+    }
+}
+</style>

package/src/ComponentLibraryHelp.vue

@@ -0,0 +1,20 @@
+<template>
+    <header>
+        <router-link :to="{ name: 'home'}">Home</router-link>
+        <router-link :to="{ name: 'components'}">Components</router-link>
+        <router-link :to="{ name: 'iconfont'}">Iconfont</router-link>
+    </header>
+    <div>
+        <router-view></router-view>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ComponentLibraryHelp"
+}
+</script>
+
+<style>
+
+</style>

package/src/assets/data/accordion.json

@@ -1,47 +1,44 @@
 {
   "accordionData1": [
     {
-      "headline": "First",
-      "icon": {
-        "iconClass": "icon-globe",
-        "tooltip": "Globe"
-      },
-      "content": "Text 1",
+      "headlineText": "First",
+      "headlineLevel": 5,
+      "iconClass": "icon-globe",
+      "content": "Content 1",
       "status": false
     },
     {
-      "headline": "Second",
-      "icon": {
-        "iconClass": "icon-user-profile",
-        "tooltip": "User profile"
-      },
-      "content": "Text 2",
+      "headlineText": "Second",
+      "headlineLevel": 5,
+      "iconClass": "icon-user-profile",
+      "content": "Content 2",
       "status": true
     },
     {
-      "headline": "Third",
-      "icon": {
-        "iconClass": "icon-home",
-        "tooltip": "Home"
-      },
-      "content": "Text 3",
+      "headlineText": "Third",
+      "headlineLevel": 5,
+      "iconClass": "icon-home",
+      "content": "Content 3",
       "status": false
     }
   ],
   "accordionData2": [
     {
-      "headline": "First",
-      "content": "Text 1",
+      "headlineText": "First",
+      "headlineLevel": 5,
+      "content": "Content 1",
       "status": false
     },
     {
-      "headline": "Second",
-      "content": "Text 2",
+      "headlineText": "Second",
+      "headlineLevel": 5,
+      "content": "Content 2",
       "status": false
     },
     {
-      "headline": "Third",
-      "content": "Text 3",
+      "headlineText": "Third",
+      "headlineLevel": 5,
+      "content": "Content 3",
       "status": false
     }
   ]

package/src/assets/data/address-data.json

@@ -0,0 +1,34 @@
+{
+      "company": {
+            "iconClass": "icon-home",
+            "value": "Your company name"
+      },
+      "address": {
+            "iconClass": "icon-home",
+            "streetNo": "Your Street/No",
+            "zip": "Your zip",
+            "city": "Your city",
+            "country": "Your country",
+            "longitude": "0.0",
+            "latitude": "0.0",
+            "location": ""
+      },
+      "telephone": {
+            "iconClass": "icon-phone",
+            "value": "Your phone number"
+      },
+      "mobilephone": {
+            "iconClass": "icon-device-smartphone",
+            "value": "Your mobile phone number"
+      },
+      "fax": {
+            "iconClass": "icon-fax",
+            "value": "Your fax number"
+      },
+      "email": {
+            "iconClass": "icon-mail",
+            "value": "Your email address"
+      }
+}
+
+

package/src/assets/data/bank-account-data.json

@@ -0,0 +1,22 @@
+[
+  {
+    "text": "Account owner:",
+    "value": "Company name",
+    "allowCopy": false
+  },
+  {
+    "text": "Bank:",
+    "value": "Name of bank",
+    "allowCopy": false
+  },
+  {
+    "text": "IBAN:",
+    "value": "DE 0536 0100 4306 4812 8438",
+    "allowCopy": true
+  },
+  {
+    "text": "SWIFT/BIC:",
+    "value": "PBNKDEFF",
+    "allowCopy": true
+  }
+]

package/src/assets/data/box-product.json

@@ -1,7 +1,7 @@
 [
   {
     "name": "Product name 1",
-    "img": {
+    "image": {
       "src": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
       "alt": "Alternative text"
     },
@@ -13,7 +13,7 @@
   },
   {
     "name": "Product name 2",
-    "img": {
+    "image": {
       "src": "media/images/thumbnail-scroller/original/logo-cmd-green-landscape.jpg",
       "alt": "Alternative text"
     },
@@ -25,7 +25,7 @@
   },
   {
     "name": "Product name 3",
-    "img": {
+    "image": {
       "src": "media/images/thumbnail-scroller/original/logo-cmd-red-landscape.jpg",
       "alt": "Alternative text"
     },
@@ -37,7 +37,7 @@
   },
   {
     "name": "Product name 4",
-    "img": {
+    "image": {
       "src": "media/images/thumbnail-scroller/original/logo-cmd-yellow-landscape.jpg",
       "alt": "Alternative text"
     },
@@ -46,5 +46,15 @@
     "description": "short description text",
     "new": true,
     "discount": "-50%"
+  },
+  {
+    "name": "Product name 5",
+    "image": {
+      "src": "media/images/thumbnail-scroller/original/logo-cmd-yellow-landscape.jpg",
+      "alt": "Alternative text"
+    },
+    "articleNumber": "AB12349",
+    "price": 123.49,
+    "description": "short description text"
   }
 ]

package/src/assets/data/box-user.json

@@ -1,88 +1,114 @@
 [
   {
     "name": "User name 1",
-    "img": "",
+    "image": "",
     "profession": "User profession",
     "position": "User position",
     "description": "Some short description text for further information about the user",
     "links": [
         {
-        "href": "mailto:",
+        "path": "mailto:",
         "target": "",
         "iconClass": "icon-mail",
-        "title": "Send mail"
+        "tooltip": "Send mail"
       }
     ]
   },
   {
     "name": "User name 2",
-    "img": "",
+    "image": "",
     "profession": "User profession",
     "position": "User position",
     "links": [
       {
-        "href": "mailto:",
+        "path": "mailto:",
         "target": "",
         "iconClass": "icon-mail",
-        "title": "Send mail"
+        "tooltip": "Send mail"
       },
       {
-        "href": "http://www.comand-cms.com",
+        "path": "http://www.comand-cms.com",
         "target": "comand",
         "iconClass": "icon-globe",
-        "title": "Visit website"
+        "tooltip": "Visit website"
       }
     ]
   },
   {
     "name": "User name 3",
-    "img": "",
+    "image": "",
     "profession": "User profession",
     "position": "User position",
     "links":  [
       {
-        "href": "mailto:",
+        "path": "mailto:",
         "target": "",
         "iconClass": "icon-mail",
-        "title": "Send mail"
+        "tooltip": "Send mail"
       },
       {
-        "href": "http://www.comand-cms.com",
+        "path": "http://www.comand-cms.com",
         "target": "comand",
         "iconClass": "icon-globe",
-        "title": "Visit website"
+        "tooltip": "Visit website"
       },
       {
-        "href": "tel:",
+        "path": "tel:",
         "target": "",
         "iconClass": "icon-phone",
-        "title": "Make call"
+        "tooltip": "Make call"
       }
     ]
   },
   {
     "name": "User name 4",
-    "img": "",
+    "image": "",
     "profession": "User profession",
     "position": "User position",
     "links":  [
       {
-        "href": "mailto:",
+        "path": "mailto:",
         "target": "",
         "iconClass": "icon-mail",
-        "title": "Send mail"
+        "tooltip": "Send mail"
       },
       {
-        "href": "http://www.comand-cms.com",
+        "path": "http://www.comand-cms.com",
         "target": "comand",
         "iconClass": "icon-globe",
-        "title": "Visit website"
+        "tooltip": "Visit website"
       },
       {
-        "href": "tel:",
+        "path": "tel:",
         "target": "",
         "iconClass": "icon-phone",
-        "title": "Make call"
+        "tooltip": "Make call"
+      }
+    ]
+  },
+  {
+    "name": "User name 5",
+    "image": "",
+    "profession": "User profession",
+    "position": "User position",
+    "links":  [
+      {
+        "path": "mailto:",
+        "target": "",
+        "iconClass": "icon-mail",
+        "tooltip": "Send mail"
+      },
+      {
+        "path": "http://www.comand-cms.com",
+        "target": "comand",
+        "iconClass": "icon-globe",
+        "tooltip": "Visit website"
+      },
+      {
+        "path": "tel:",
+        "target": "",
+        "iconClass": "icon-phone",
+        "tooltip": "Make call"
       }
     ]
   }

package/src/assets/data/breadcrumbs.json

@@ -8,10 +8,18 @@
   {
     "text": "Subpage",
     "type": "router",
-    "to": {
-      "path": "/subpage",
+    "route": {
+      "path": "/subpage"
+    }
+  },
+  {
+    "text": "Subsubpage",
+    "type": "router",
+    "route": {
+      "name": "subsubpage",
       "params": {
-        "lang": "de"
+        "param1": "1",
+        "param2": "2"
       }
     }
   }

package/src/assets/data/cookie-disclaimer.json

@@ -4,7 +4,7 @@
     "cookies": [
         {
           "id": "cookie-sessionid",
-          "description": "Dieser Cookie ist für die Funktionsfähigkeit der Website notwendig.",
+          "description": "These cookies are required for functionality",
           "labelText": "SessionID",
           "checked": true,
           "status": "disabled",
@@ -16,7 +16,7 @@
         },
         {
           "id": "cookie-google-recaptcha",
-          "description": "Dieser Cookie gewährleistet, dass Formulare nicht von Bots verschickt werden können.",
+          "description": "This cookies prevents bots from sending forms",
           "labelText": "Google reCaptcha™",
           "checked": true,
           "status": "disabled",
@@ -34,7 +34,7 @@
     "cookies": [
       {
         "id": "cookie-google-maps",
-        "description": "Ermöglicht die Nutzung von Google Maps™-Karten.",
+        "description": "These cookies enables the Google Map",
         "labelText": "Google Maps™",
         "checked": false,
         "linkDataPrivacy": {
@@ -46,7 +46,7 @@
       },
       {
         "id": "cookie-google-analytics",
-        "description": "Dient zur anonymisierten Erfassung des Surfverhaltens zur Verbesserung der Websiteerfahrung.",
+        "description": "This cookie collects anonymous data for statistics and improvements",
         "labelText": "Google Analytics™",
         "checked": false,
         "linkDataPrivacy": {

package/src/assets/data/fake-select-colors.json

@@ -1,4 +1,8 @@
 [
+  {
+    "value": "",
+    "text": "Please select..."
+  },
   {
     "value": "#ffffff",
     "text": "White"

package/src/assets/data/fake-select-countries.json

@@ -3,22 +3,14 @@
     "value": "cn",
     "text": "China"
   },
-  {
-    "value": "de",
-    "text": "Germany"
-  },
-  {
-    "value": "en",
-    "text": "United Kingdom"
-  },
-  {
-    "value": "es",
-    "text": "Spain"
-  },
   {
     "value": "fr",
     "text": "France"
   },
+  {
+    "value": "de",
+    "text": "Germany"
+  },
   {
     "value": "it",
     "text": "Italy"
@@ -26,5 +18,13 @@
   {
     "value": "ru",
     "text": "Russia"
+  },
+  {
+    "value": "es",
+    "text": "Spain"
+  },
+  {
+    "value": "en",
+    "text": "United Kingdom"
   }
 ]

package/src/assets/data/fake-select-filter-options.json

@@ -0,0 +1,14 @@
+[
+  {
+    "text": "Filter 1",
+    "value": "1"
+  },
+  {
+    "text": "Filter 2",
+    "value": "2"
+  },
+  {
+    "text": "Filter 3",
+    "value": "3"
+  }
+]

package/src/assets/data/fake-select-options-with-icons.json

@@ -1,23 +1,17 @@
 [
   {
-    "text": "Optionname 1",
+    "text": "Option 1",
     "value": "1",
-    "icon": {
-      "iconClass": "icon-home"
-    }
+    "iconClass": "icon-mail"
   },
   {
-    "text": "Optionname 2",
+    "text": "Option 2",
     "value": "2",
-    "icon": {
-      "iconClass": "icon-globe"
-    }
+    "iconClass": "icon-globe"
   },
   {
-    "text": "Optionname 3",
+    "text": "Option 3",
     "value": "3",
-    "icon": {
-      "iconClass": "icon-user-profile"
-    }
+    "iconClass": "icon-phone"
   }
 ]

package/src/assets/data/fake-select-options.json

@@ -1,14 +1,14 @@
 [
   {
-    "text": "Optionname 1",
+    "text": "Option 1",
     "value": "1"
   },
   {
-    "text": "Optionname 2",
+    "text": "Option 2 with multiple words that are longer than the box",
     "value": "2"
   },
   {
-    "text": "Optionname 3",
+    "text": "Option 3",
     "value": "3"
   }
 ]