comand-component-library 3.1.51 → 3.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.51",
+  "version": "3.1.54",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -44,4 +44,4 @@
     "typescript": "~3.9.3",
     "vue-jest": "^5.0.0-0"
   }
-}
+}

package/src/App.vue

@@ -46,59 +46,6 @@
             </div>
             <hr/>
         </CmdWidthLimitationWrapper>
-
-        <a id="section-accordion"></a>
-        <CmdWidthLimitationWrapper>
-            <h2 class="headline-demopage">Accordion</h2>
-            <h3>Single mode (only one can be opened)</h3>
-            <a href="#" @click.prevent="toggleAllAccordions()">Toggle all accordions</a>
-            <CmdAccordion :accordionData="accordionData.accordionData1"
-                          toggleMode="single"
-                          tooltip="Click to toggle content"
-                          openIconClass="icon-single-arrow-up"
-                          closeIconClass="icon-single-arrow-down"
-                          ref="accordionGroup1"
-            />
-            <h3>Multiple mode (all can be opened)</h3>
-            <CmdAccordion :accordionData="accordionData.accordionData2"
-                          toggleMode="multiple"
-                          tooltip="Click to toggle content"
-                          openIconClass="icon-single-arrow-up"
-                          closeIconClass="icon-single-arrow-down"
-                          ref="accordionGroup2"
-            />
-            <h3>Customized headline-level (without transition of content)</h3>
-            <CmdAccordion :accordionData="accordionData.accordionData2"
-                          toggleMode="multiple"
-                          tooltip="Click to toggle content"
-                          openIconClass="icon-single-arrow-up"
-                          closeIconClass="icon-single-arrow-down"
-                          accordion-headline-level="h4"
-                          :use-transition="false"
-            />
-            <h3>Data given by slots</h3>
-            <CmdAccordion :accordionData="1">
-                <template v-slot:accordionHeadline0>
-                    <h3><span class="icon-user-group"></span><span>User groups</span></h3>
-                </template>
-                <template v-slot:accordionContent0>
-                    <p>
-                        Content
-                    </p>
-                </template>
-            </CmdAccordion>
-            <CmdAccordion :accordionData="1" :useCustomHeader="true">
-                <template v-slot:customHeadline0>
-                    <h4>Some headline</h4>
-                </template>
-                <template v-slot:accordionContent0>
-                    <p>
-                        Content
-                    </p>
-                </template>
-            </CmdAccordion>
-        </CmdWidthLimitationWrapper>
-
         <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
         <a id="section-advanced-form-elements"></a>
         <CmdWidthLimitationWrapper>
@@ -1025,7 +972,6 @@ import thumbnailScrollerData from '@/assets/data/thumbnail-scroller.json'
 import topHeaderNavigationData from '@/assets/data/list-of-links-top-header-navigation.json'
 
 // import used components
-import CmdAccordion from "@/components/CmdAccordion.vue"
 import CmdAddressData from "@/components/CmdAddressData"
 import CmdBackToTopButton from "@/components/CmdBackToTopButton.vue"
 import CmdBankAccountData from "./components/CmdBankAccountData"
@@ -1071,7 +1017,6 @@ import * as functions from "@/mixins/FieldValidation.js"
 export default {
     name: "App",
     components: {
-        CmdAccordion, // short form of 'CmdAccordion': CmdAccordion
         CmdAddressData,
         CmdBackToTopButton,
         CmdBankAccountData,

package/src/assets/data/breadcrumbs.json

@@ -7,14 +7,14 @@
   },
   {
     "text": "Subpage",
-    "type": "router",
+    "type": "href",
     "route": {
       "path": "/subpage"
     }
   },
   {
     "text": "Subsubpage",
-    "type": "router",
+    "type": "href",
     "route": {
       "name": "subsubpage",
       "params": {

package/src/components/CmdCookieDisclaimer.vue

@@ -13,70 +13,70 @@
                 <div v-if="cookieOptions.required">
                     <h3>{{ cookieOptions.required.headline }}</h3>
 
-                    <!-- begin CmdAccordion -->
-                    <CmdAccordion :accordion-data="cookieOptions.required.cookies.length" :accordionData="2">
-                        <template v-for="(cookie, index) in cookieOptions.required.cookies"
-                                  v-slot:[`accordionHeadline${index}`]
-                                  :key="index">
-                            <!-- begin CmdSwitchButton -->
-                            <CmdSwitchButton
-                                type="checkbox"
-                                :id="cookie.id"
-                                :labelText="cookie.labelText"
-                                v-model="cookie.checked"
-                                :status="cookie.status"
-                                disabled="disabled"
-                            />
-                            <!-- end CmdSwitchButton -->
-                        </template>
-                        <template v-for="(cookie, index) in cookieOptions.required.cookies"
-                                  v-slot:[`accordionContent${index}`]
-                                  :key="index">
-                            <p v-if="cookie.description">{{ cookie.description }}</p>
-                            <p v-if="cookie.linkDataPrivacy">
-                                {{ cookie.linkDataPrivacy.label }}
-                                <a @click="openDataPrivacy"
-                                   :href="cookie.linkDataPrivacy.link"
-                                   :target="cookie.linkDataPrivacy.target">
-                                    {{ cookie.linkDataPrivacy.linkText }}
-                                </a>
-                            </p>
-                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
-                        </template>
-                    </CmdAccordion>
-                    <!-- end CmdAccordion -->
+<!--                    &lt;!&ndash; begin CmdAccordion &ndash;&gt;-->
+<!--                    <CmdAccordion :accordion-data="cookieOptions.required.cookies.length" :accordionData="2">-->
+<!--                        <template v-for="(cookie, index) in cookieOptions.required.cookies"-->
+<!--                                  v-slot:[`accordionHeadline${index}`]-->
+<!--                                  :key="index">-->
+<!--                            &lt;!&ndash; begin CmdSwitchButton &ndash;&gt;-->
+<!--                            <CmdSwitchButton-->
+<!--                                type="checkbox"-->
+<!--                                :id="cookie.id"-->
+<!--                                :labelText="cookie.labelText"-->
+<!--                                v-model="cookie.checked"-->
+<!--                                :status="cookie.status"-->
+<!--                                disabled="disabled"-->
+<!--                            />-->
+<!--                            &lt;!&ndash; end CmdSwitchButton &ndash;&gt;-->
+<!--                        </template>-->
+<!--                        <template v-for="(cookie, index) in cookieOptions.required.cookies"-->
+<!--                                  v-slot:[`accordionContent${index}`]-->
+<!--                                  :key="index">-->
+<!--                            <p v-if="cookie.description">{{ cookie.description }}</p>-->
+<!--                            <p v-if="cookie.linkDataPrivacy">-->
+<!--                                {{ cookie.linkDataPrivacy.label }}-->
+<!--                                <a @click="openDataPrivacy"-->
+<!--                                   :href="cookie.linkDataPrivacy.link"-->
+<!--                                   :target="cookie.linkDataPrivacy.target">-->
+<!--                                    {{ cookie.linkDataPrivacy.linkText }}-->
+<!--                                </a>-->
+<!--                            </p>-->
+<!--                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>-->
+<!--                        </template>-->
+<!--                    </CmdAccordion>-->
+<!--                    &lt;!&ndash; end CmdAccordion &ndash;&gt;-->
                 </div>
                 <hr />
                 <div v-if="cookieOptions.optional">
                     <h3>{{ cookieOptions.optional.headline }}</h3>
-                    <!-- begin CmdAccordion -->
-                    <CmdAccordion :accordion-data="cookieOptions.optional.cookies.length" :accordionData="2">
-                        <template v-for="(cookie, index) in cookieOptions.optional.cookies"
-                                  v-slot:[`accordionHeadline${index}`]
-                                  :key="index">
-                            <!-- begin CmdSwitchButton -->
-                            <CmdSwitchButton
-                                type="checkbox"
-                                :id="cookie.id"
-                                :labelText="cookie.labelText"
-                                v-model="cookie.checked"
-                                :status="cookie.status"
-                            />
-                            <!-- end CmdSwitchButton -->
-                        </template>
-                        <template v-for="(cookie, index) in cookieOptions.optional.cookies"
-                                  v-slot:[`accordionContent${index}`]
-                                  :key="index">
-                            <p>{{ cookie.description }}</p>
-                            <p v-if="cookie.linkDataPrivacy">
-                                {{ cookie.linkDataPrivacy.label }}
-                                <a @click="openDataPrivacy" :href="cookie.linkDataPrivacy.link"
-                                   :target="cookie.linkDataPrivacy.target">{{ cookie.linkDataPrivacy.linkText }}</a>
-                            </p>
-                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
-                        </template>
-                    </CmdAccordion>
-                    <!-- end CmdAccordion -->
+<!--                    &lt;!&ndash; begin CmdAccordion &ndash;&gt;-->
+<!--                    <CmdAccordion :accordion-data="cookieOptions.optional.cookies.length" :accordionData="2">-->
+<!--                        <template v-for="(cookie, index) in cookieOptions.optional.cookies"-->
+<!--                                  v-slot:[`accordionHeadline${index}`]-->
+<!--                                  :key="index">-->
+<!--                            &lt;!&ndash; begin CmdSwitchButton &ndash;&gt;-->
+<!--                            <CmdSwitchButton-->
+<!--                                type="checkbox"-->
+<!--                                :id="cookie.id"-->
+<!--                                :labelText="cookie.labelText"-->
+<!--                                v-model="cookie.checked"-->
+<!--                                :status="cookie.status"-->
+<!--                            />-->
+<!--                            &lt;!&ndash; end CmdSwitchButton &ndash;&gt;-->
+<!--                        </template>-->
+<!--                        <template v-for="(cookie, index) in cookieOptions.optional.cookies"-->
+<!--                                  v-slot:[`accordionContent${index}`]-->
+<!--                                  :key="index">-->
+<!--                            <p>{{ cookie.description }}</p>-->
+<!--                            <p v-if="cookie.linkDataPrivacy">-->
+<!--                                {{ cookie.linkDataPrivacy.label }}-->
+<!--                                <a @click="openDataPrivacy" :href="cookie.linkDataPrivacy.link"-->
+<!--                                   :target="cookie.linkDataPrivacy.target">{{ cookie.linkDataPrivacy.linkText }}</a>-->
+<!--                            </p>-->
+<!--                            <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>-->
+<!--                        </template>-->
+<!--                    </CmdAccordion>-->
+<!--                    &lt;!&ndash; end CmdAccordion &ndash;&gt;-->
                 </div>
             </slot>
             <!-- end slot for cookie-options -->
@@ -101,16 +101,14 @@
 
 <script>
 // import components
-import CmdAccordion from "./CmdAccordion"
 import CmdCustomHeadline from "./CmdCustomHeadline"
-import CmdSwitchButton from "./CmdSwitchButton"
+// import CmdSwitchButton from "./CmdSwitchButton"
 
 export default {
     name: "CmdCookieDisclaimer",
     components: {
-        CmdAccordion,
-        CmdCustomHeadline,
-        CmdSwitchButton
+        CmdCustomHeadline
+        // CmdSwitchButton
     },
     data() {
         return {

package/src/components/CmdFormElement.vue

@@ -672,21 +672,23 @@ export default {
 
     .search-field-wrapper {
         margin: 0;
+
+        a {
+            position: absolute;
+            top: 50%;
+            right: 1rem;
+            transform: translateY(-50%);
+            z-index: 100;
+
+            & + input {
+                padding-right: calc(var(--default-padding) * 3);
+            }
+        }
     }
 
     .place-inside {
         + .search-field-wrapper {
-            a {
-                position: absolute;
-                top: 50%;
-                right: 1rem;
-                transform: translateY(-50%);
-                z-index: 100;
-
-                & + input {
-                    padding-right: calc(var(--default-padding) * 3);
-                }
-            }
+
 
             input {
                 padding-left: calc(var(--default-padding) * 3);

package/src/components/CmdMainNavigation.vue

@@ -204,14 +204,14 @@ export default {
          */
         subentriesIconClass: {
             type: String,
-            default: "icon-single-arrow-right"
+            default: "icon-single-arrow-down"
         },
         /**
          * icon to show if a sub-entry has further sub-entries
          */
         subSubentriesIconClass: {
             type: String,
-            default: "icon-single-arrow-down"
+            default: "icon-single-arrow-right"
         },
         /**
          * toggle if overlay over content should be shown if off-canvas is open
@@ -342,7 +342,7 @@ export default {
             nav {
                 --nav-width: 30%;
 
-                position: absolute;
+                position: fixed;
                 left: -100%;
                 width: var(--nav-width);
                 height: 100%;

package/src/composables/sequence.js

@@ -0,0 +1,25 @@
+import {onBeforeUpdate} from "vue"
+
+export function useSequence() {
+    const sequences = {}
+
+    onBeforeUpdate(resetSequence)
+
+    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)
+    }
+
+    function resetSequence(sequenceName = "defaultSequence") {
+        if (sequences[sequenceName]) {
+            sequences[sequenceName] = 0
+        }
+    }
+
+    return {nextSequenceValue, currentSequenceValue, resetSequence}
+}

package/src/index.js

@@ -1,6 +1,6 @@
 import "clickout-event"
 
-export { default as CmdAccordion } from '@/components/CmdAccordion'
+// export components
 export { default as CmdAddressData } from '@/components/CmdAddressData'
 export { default as CmdBackToTopButton } from '@/components/CmdBackToTopButton'
 export { default as CmdBankAccountData } from '@/components/CmdBankAccountData'
@@ -42,5 +42,9 @@ export { default as CmdTooltip } from '@/components/CmdTooltip'
 export { default as CmdUploadForm } from '@/components/CmdUploadForm'
 export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimitationWrapper'
 
+// export directives
 export { default as DirFocus } from '@/directives/focus'
-export { default as DirTelephone } from '@/directives/telephone'
+export { default as DirTelephone } from '@/directives/telephone'
+
+// export composables
+export { useSequence } from '@/composables/sequence'

package/src/router/index.js

@@ -1,67 +1,10 @@
 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/ComponentDocumentation.vue

@@ -1,156 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-<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>