comand-component-library 3.1.51 → 3.1.54

package/src/documentation/generated/logosIcons.json

@@ -1,110 +0,0 @@
-[
-    {
-        "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

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

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

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

package/src/documentation/views/IconFont.vue

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

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

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

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