comand-component-library 3.1.45 → 3.1.46

package/src/documentation/generated/logosIcons.json

@@ -0,0 +1,110 @@
+[
+    {
+        "name": "android",
+        "iconClass": "icon-android"
+    },
+    {
+        "name": "apple",
+        "iconClass": "icon-apple"
+    },
+    {
+        "name": "chrome",
+        "iconClass": "icon-chrome"
+    },
+    {
+        "name": "css3",
+        "iconClass": "icon-css3"
+    },
+    {
+        "name": "edge",
+        "iconClass": "icon-edge"
+    },
+    {
+        "name": "facebook",
+        "iconClass": "icon-facebook"
+    },
+    {
+        "name": "facebook-square",
+        "iconClass": "icon-facebook-square"
+    },
+    {
+        "name": "firefox",
+        "iconClass": "icon-firefox"
+    },
+    {
+        "name": "flickr",
+        "iconClass": "icon-flickr"
+    },
+    {
+        "name": "google-analytics",
+        "iconClass": "icon-google-analytics"
+    },
+    {
+        "name": "html5",
+        "iconClass": "icon-html5"
+    },
+    {
+        "name": "linkedin",
+        "iconClass": "icon-linkedin"
+    },
+    {
+        "name": "linkedin-square",
+        "iconClass": "icon-linkedin-square"
+    },
+    {
+        "name": "opera",
+        "iconClass": "icon-opera"
+    },
+    {
+        "name": "safari",
+        "iconClass": "icon-safari"
+    },
+    {
+        "name": "skype",
+        "iconClass": "icon-skype"
+    },
+    {
+        "name": "social-networks",
+        "iconClass": "icon-social-networks"
+    },
+    {
+        "name": "tumblr",
+        "iconClass": "icon-tumblr"
+    },
+    {
+        "name": "tumblr-square",
+        "iconClass": "icon-tumblr-square"
+    },
+    {
+        "name": "linux",
+        "iconClass": "icon-linux"
+    },
+    {
+        "name": "twitch",
+        "iconClass": "icon-twitch"
+    },
+    {
+        "name": "twitter",
+        "iconClass": "icon-twitter"
+    },
+    {
+        "name": "twitter-square",
+        "iconClass": "icon-twitter-square"
+    },
+    {
+        "name": "windows8",
+        "iconClass": "icon-windows8"
+    },
+    {
+        "name": "xing",
+        "iconClass": "icon-xing"
+    },
+    {
+        "name": "xing-square",
+        "iconClass": "icon-xing-square"
+    },
+    {
+        "name": "youtube",
+        "iconClass": "icon-youtube"
+    }
+]

package/src/documentation/tabs.js

@@ -0,0 +1,46 @@
+import {ref} from "vue"
+import router from "../router"
+
+const tabs = [{name: 'Component'}, {name: 'Properties'}]
+const tabProps = {
+    tabs,
+    stretchTabs: true,
+    useSlot: true,
+    activeTab: ref(0)
+}
+const tabHandlers = {
+    activeTab: setActiveTab
+}
+
+function getActiveTab(tabName) {
+    const tabIndex = tabs.map(tab => tab.name.toLowerCase()).indexOf(tabName?.toLowerCase())
+    if (tabIndex > -1) {
+        return tabIndex
+    }
+    return 0
+}
+
+// set url-parameter if tab is clicked
+function setActiveTab(index) {
+    const tab = tabs[index]
+    if (tab) {
+        router.push({
+            name: router.currentRoute.name,
+            params: {
+                tab: tab.name.toLowerCase()
+            }
+        })
+    }
+}
+
+function routeHandler(to) {
+    tabProps.activeTab = getActiveTab(to.params.tab)
+}
+
+export {
+    tabs,
+    tabProps,
+    tabHandlers,
+    setActiveTab,
+    routeHandler
+}

package/src/documentation/views/ContainerPage.vue

@@ -0,0 +1,237 @@
+<script setup>
+// import functions
+import {defineProps, defineAsyncComponent, computed, ref} from "vue"
+import {useRoute, useRouter} from "vue-router"
+import {isFrameMode} from "../../utils/common"
+import {useScrollspy} from "../../composables/scrollspy"
+
+// import components
+import CmdListOfLinks from "../../components/CmdListOfLinks"
+
+// import data
+import componentDescription from "../data/componentsDescription"
+
+const props = defineProps({
+    componentName: {
+        type: String,
+        required: true
+    },
+    previousComponentName: {
+        type: String,
+        required: true
+    },
+    nextComponentName: {
+        type: String,
+        required: true
+    },
+    activeTab: {
+        type: Number,
+        default: 0
+    }
+})
+const componentNameHelp = computed(() => props.componentName + "Help")
+const idMainContainer = computed(() => {
+    if(isFrameMode()) {
+        return props.componentName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
+    }
+    return null
+})
+const HelpView = computed(
+    () => componentNameHelp.value
+        ? defineAsyncComponent(() => import("./components/" + componentNameHelp.value))
+        : {render: () => ""}
+)
+const iconToggleSidebar = computed(() => showPageAnchors.value ? "icon-double-arrow-right" : "icon-double-arrow-left")
+
+const route = useRoute()
+const router = useRouter()
+const scrollSpy = useScrollspy(() => examples.value.querySelectorAll(".example-section"))
+const examples = ref(null)
+const listOfLinks = ref([])
+const showPageAnchors = ref(true)
+
+function getAnchorId(sectionSelector) {
+    return "#" + sectionSelector.querySelector(".pre-headline-text")
+        ?.innerText
+        .replace(/[# ]/g, "")
+        .toLowerCase()
+}
+
+function getHeadlineText(sectionSelector) {
+    if (sectionSelector.classList.contains("has-pre-headline-text")) {
+        return sectionSelector.querySelector(".pre-headline-text + *")?.innerText
+    }
+    return sectionSelector.querySelector("*:first-child")?.innerText
+}
+
+function onViewResolve() {
+    scrollSpy.reset()
+    listOfLinks.value = []
+    const sectionSelector = examples.value.querySelectorAll(".example-section > .cmd-custom-headline")
+    for (let i = 0 ; i < sectionSelector.length; i++) {
+        listOfLinks.value.push({
+            text: getHeadlineText(sectionSelector.item(i)),
+            path: getAnchorId(sectionSelector.item(i))
+        })
+    }
+}
+</script>
+
+<template>
+    <main :id="idMainContainer">
+        <aside v-if="listOfLinks.length > 1" class="flex-container no-gap" id="page-anchors">
+            <a href="#" @click.prevent="showPageAnchors = !showPageAnchors" title="Toggle Iterations-Sidebar">
+                <span :class="iconToggleSidebar"></span>
+            </a>
+            <transition v-show="showPageAnchors" name="slide-right">
+                <CmdListOfLinks
+                    :cmdCustomHeadline="{headlineText: 'Iterations', headlineLevel: 6}"
+                    :sectionAnchors="true"
+                    :activeSection="scrollSpy.activeItem"
+                    :links="listOfLinks"
+                />
+            </transition>
+        </aside>
+        <template v-if="!isFrameMode()">
+            <a href="#" @click.prevent="router.go(-1)">
+                <span class="icon-single-arrow-left"></span>
+                <span>Back to previous component</span>
+            </a>
+            <h1>{{ componentDescription[props.componentName]?.headline }}</h1>
+            <p>{{ componentDescription[props.componentName]?.shorttext }}</p>
+        </template>
+        <div class="flex-container vertical">
+           <section id="tabs-wrapper" ref="examples">
+               <div v-show="isFrameMode()" id="frame-component-target"></div>
+               <Suspense @resolve="onViewResolve">
+                   <HelpView />
+               </Suspense>
+           </section>
+            <template v-if="!isFrameMode()">
+                <section class="flex-container" id="component-link-wrapper">
+                    <router-link :to="{name: previousComponentName, params: {tab: route.params.tab}}">
+                        <span class="icon-single-arrow-left"></span>
+                        <span>{{ previousComponentName }}</span>
+                    </router-link>
+                    <router-link :to="{name: nextComponentName, params: {tab: route.params.tab}}">
+                        <span>{{ nextComponentName }}</span>
+                        <span class="icon-single-arrow-right"></span>
+                    </router-link>
+                </section>
+            </template>
+        </div>
+        <footer></footer>
+    </main>
+</template>
+
+<style lang="scss">
+main {
+    #page-anchors {
+        position: fixed;
+        right: 0;
+        z-index: 100;
+        background: var(--pure-white);
+        border: var(--default-border);
+        border-right: 0;
+        top: var(--default-margin);
+        box-shadow: -.2rem .2rem .4rem #999;
+
+        > a {
+            flex: none;
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            padding: .2rem;
+            border-right: var(--default-border);
+
+            span[class*="icon"] {
+                font-size: 1rem;
+            }
+
+            &:hover, &:active, &:focus {
+                background: var(--primary-color);
+
+                span[class*="icon"] {
+                    color: var(--pure-white);
+                }
+            }
+        }
+
+        .cmd-custom-headline {
+            margin: 0;
+            padding: var(--default-padding);
+        }
+
+        ul {
+            gap: 0;
+            margin: 0;
+
+            li {
+                transition: var(--default-transition);
+
+                a {
+                    display: block;
+                    padding: calc(var(--default-padding) / 2);
+                    transition: var(--default-transition);
+                    font-size: 1.2rem;
+                }
+
+                &.active {
+                    background: var(--primary-color);
+                    transition: var(--default-transition);
+                    color: var(--pure-white);
+
+                    a {
+                        span, span[class*="icon"] {
+                            color: var(--pure-white);
+                            transition: var(--default-transition);
+                        }
+                    }
+
+                }
+            }
+        }
+    }
+}
+
+#tabs-wrapper {
+    > .cmd-tabs {
+        > ul > li {
+            border: 0;
+            border-bottom: var(--default-border);
+            font-weight: bold;
+
+            &:first-child {
+                border-right: var(--default-border);
+            }
+
+            &.active {
+                top: 0;
+            }
+        }
+
+        > div {
+            border: 0;
+            border-bottom: var(--default-border);
+            padding: calc(var(--default-padding) * 2)
+        }
+    }
+}
+
+#component-link-wrapper {
+    margin-top: auto;
+    justify-content: space-between;
+
+    a {
+        flex: none;
+        display: flex;
+        align-items: center;
+
+        span[class*="icon"] {
+            font-size: 1.2rem;
+            text-decoration: none;
+        }
+    }
+}
+</style>
+

package/src/documentation/views/HelpHome.vue

@@ -0,0 +1,13 @@
+<template>
+HOME!!!
+</template>
+
+<script>
+export default {
+    name: "HelpHome"
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/documentation/views/IconFont.vue

@@ -0,0 +1,80 @@
+<template>
+    <main>
+        <h1>Icon Fonts</h1>
+        <CmdFormElement
+            element="input"
+            type="search"
+            id="component-search"
+            labelText="Search icons"
+            placeholder="Search icons"
+            :showLabel="false"
+            :showSearchButton="false"
+            fieldIconClass="icon-search"
+            v-model="filterIcons"
+        />
+        <h2>Framework Icons</h2>
+        <div class="grid-container-create-columns">
+            <div v-for="(icon, index) in filteredFrameworkIcons" :key="index">
+                <span :class="icon.iconClass"></span>
+                <span>{{ icon.name }}</span>
+            </div>
+        </div>
+        <hr/>
+        <h2>Logos Icons</h2>
+        <div class="grid-container-create-columns">
+            <div v-for="(icon, index) in filteredLogosIcons" :key="index">
+                <span :class="icon.iconClass"></span>
+                <span>{{ icon.name }}</span>
+            </div>
+        </div>
+    </main>
+</template>
+
+<script>
+import CmdFormElement from "../../components/CmdFormElement"
+
+import frameworkIcons from "../generated/frameworkIcons"
+import logosIcons from "../generated/logosIcons"
+
+export default {
+    name: "IconFont",
+    components: {CmdFormElement},
+    data() {
+        return {
+            filterIcons: "",
+            sortedFrameworkIcons: this.sortIcons(frameworkIcons),
+            sortedLogosIcons: this.sortIcons(logosIcons)
+        }
+    },
+    computed: {
+        filteredFrameworkIcons() {
+            return this.filteredIcons(this.sortedFrameworkIcons)
+        },
+        filteredLogosIcons() {
+            return this.filteredIcons(this.sortedLogosIcons)
+        }
+    },
+    methods: {
+        filteredIcons(iconFont) {
+            const filterTerm = this.filterIcons.trim().toLowerCase()
+
+            if (filterTerm) {
+                return iconFont.filter((item) => {
+                    return item.name.toLowerCase().includes(filterTerm)
+                })
+            }
+            return iconFont
+        },
+        sortIcons(icons) {
+            return icons.sort((a, b) => {
+                // compare icon-names to sort alphabetical
+                return a.name.localeCompare(b.name)
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/documentation/views/components/CmdAccordionHelp.vue

@@ -0,0 +1,78 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdAccordion from "../../../components/CmdAccordion"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
+import CmdTabs from "../../../components/CmdTabs"
+
+// import example-data
+import CmdCode from "../../data/CmdAccordionHelp"
+import accordion from '../../../assets/data/accordion.json'
+import propertyDescriptions from "../../generated/CmdAccordionPropertyDescriptions.json"
+
+const propertyStructures = {
+    accordionData: [
+        {
+            "headline": "<string>",
+            "icon": {
+                "iconClass": "<string>",
+                "tooltip": "<string>"
+            },
+            "content": "<string>",
+            "status": "<boolean>"
+        }
+    ],
+    iconClosed: {
+        "iconClass": "<string>",
+        "tooltip": "<string>"
+    },
+    iconOpen: {
+        "iconClass": "<string>",
+        "tooltip": "<string>"
+    }
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <CmdCustomHeadline preHeadlineText="Example #1" headlineText="Content given by slot" :headlineLevel="3" />
+            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
+                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                    <CmdAccordion :accordionData="2" toggleMode="multiple">
+                        <template v-slot:accordionHeadline0>
+                            <h4>Accordion 1</h4>
+                        </template>
+                        <template v-slot:accordionContent0>
+                            <p>
+                                Content for accordion 1
+                            </p>
+                        </template>
+                        <template v-slot:accordionHeadline1>
+                            <h4>Accordion 2</h4>
+                        </template>
+                        <template v-slot:accordionContent1>
+                            <p>
+                                Content for accordion 2
+                            </p>
+                        </template>
+                    </CmdAccordion>
+                </teleport>
+            </ViewCodeData>
+            <hr />
+            <CmdCustomHeadline preHeadlineText="Example #2" headlineText="Content given by json-file" :headlineLevel="3" />
+            <ViewCodeData :code="CmdCode[1]" :data="accordion.accordionData1">
+                <CmdAccordion :accordionData="accordion.accordionData1" />
+            </ViewCodeData>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdAccordion.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdAddressDataHelp.vue

@@ -0,0 +1,65 @@
+<script setup>
+// import functions
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdAddressData from "../../../components/CmdAddressData"
+import ComponentProperties from "../../components/ComponentProperties"
+import ViewCodeData from "../../components/ViewCodeData"
+import CmdTabs from "../../../components/CmdTabs"
+import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
+
+// import example-data
+import CmdCode from "../../data/CmdAddressDataHelp"
+import addressData from '../../../assets/data/address-data.json'
+import propertyDescriptions from "../../generated/CmdAddressDataPropertyDescriptions.json"
+
+const propertyStructures = {
+    addressData: {
+        "company": "<string>",
+        "address": {
+            "streetNo": "<string>",
+            "zip": "<number>",
+            "city": "<string>"
+        },
+        "telephone": "<string>",
+        "mobilephone": "<string>",
+        "fax": "<string>",
+        "email": "<string>"
+    }
+}
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ExampleSectionWrapper componentName="CmdAddressData" headlineText="List with labels">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="addressData">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdAddressData
+                            :addressData="addressData"
+                            :linkGoogleMaps="true"
+                            :cmdCustomHeadline="{ headlineText: 'Address', headlineLevel: 5}"
+                        />
+                    </teleport>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+            <hr />
+            <ExampleSectionWrapper componentName="CmdAddressData" headlineText="List without labels">
+                <ViewCodeData :code="CmdCode[1]" :data="addressData">
+                    <CmdAddressData
+                        :addressData="addressData"
+                        :showLabels="false"
+                        :linkGoogleMaps="false"
+                        :cmdCustomHeadline="{ headlineText: 'Address', headlineLevel: 5}"
+                    />
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdAddressData.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures" />
+        </template>
+    </CmdTabs>
+</template>

package/src/documentation/views/components/CmdBackToTopButtonHelp.vue

@@ -0,0 +1,62 @@
+<script setup>
+// import functions
+import {ref, onMounted} from "vue"
+import {tabProps, tabHandlers} from "../../tabs"
+import {isFrameMode} from "../../../utils/common"
+
+// import components
+import CmdBackToTopButton from "../../../components/CmdBackToTopButton"
+import ComponentProperties from "../../components/ComponentProperties"
+import CmdTabs from "../../../components/CmdTabs"
+import ViewCodeData from "../../components/ViewCodeData"
+import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
+
+// import example-data
+import CmdCode from "../../data/CmdBackToTopButtonHelp"
+import propertyDescriptions from "../../generated/CmdBackToTopButtonPropertyDescriptions.json"
+
+const propertyStructures = {
+    iconBackToTop: {
+        "iconBackToTop": {
+            "iconClass": "<string>",
+            "tooltip": "<number>"
+        }
+    }
+}
+
+const backToTop = ref(null)
+onMounted(() => {
+    backToTop.value.windowScrollY = 1
+    backToTop.value.windowInnerHeight = 0
+    backToTop.value.bodyScrollHeight = 1
+    window.removeEventListener('resize', backToTop.value.onViewportChange);
+    window.removeEventListener('scroll', backToTop.value.onViewportChange);
+})
+</script>
+
+<template>
+    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
+        <template v-slot:tab-content-0>
+            <h2>Component</h2>
+            <ExampleSectionWrapper componentName="CmdABackToTopButton" headlineText="Back-to-top-button">
+                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
+                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
+                        <CmdBackToTopButton id="view-component" ref="backToTop" />
+                    </teleport>
+                </ViewCodeData>
+            </ExampleSectionWrapper>
+        </template>
+        <template v-slot:tab-content-1>
+            <ComponentProperties :properties="CmdBackToTopButton.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures" />
+        </template>
+    </CmdTabs>
+</template>
+
+<style lang="scss">
+#view-component {
+    position: relative;
+    bottom: auto;
+    left: 0;
+    right: auto;
+}
+</style>