comand-component-library 3.1.53 → 3.1.54

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

@@ -1,57 +0,0 @@
-<script setup>
-// import functions
-import {ref} from "vue"
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdPager from "../../../components/CmdPager"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-
-// import example-data
-import CmdCode from "../../data/CmdPagerHelp"
-import propertyDescriptions from "../../generated/CmdPagerPropertyDescriptions.json"
-
-const propertyStructures = {
-    prevButton: {
-        iconClass: "<string>",
-        buttonText: "<string>"
-    },
-    nextButton: {
-        iconClass: "<string>",
-        buttonText: "<string>"
-    }
-}
-
-const showPagePager = ref(1)
-const totalNumberOfPages = 4
-
-function changePage(event) {
-    showPagePager.value = event
-}
-</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>
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <p>
-                        Content: {{ showPagePager }} of {{ totalNumberOfPages }}
-                    </p>
-                    <CmdPager
-                        :items="totalNumberOfPages"
-                        :itemsPerPage="1"
-                        @click="changePage"
-                    />
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdPager.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,47 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdProgressBar from "../../../components/CmdProgressBar"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
-
-// import example-data
-import CmdCode from "../../data/CmdProgressBarHelp"
-import propertyDescriptions from "../../generated/CmdProgressBarPropertyDescriptions.json"
-</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 headlineText="Progress Bar with output" :headlineLevel="3" preHeadlineText="Example #1" />
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                <CmdProgressBar
-                    labelText="Progress Bar with output:"
-                    id="progress-bar"
-                    max="100"
-                />
-                </teleport>
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Progress Bar without output" :headlineLevel="5" preHeadlineText="Example #2" />
-            <ViewCodeData :code="CmdCode[1]">
-                <CmdProgressBar
-                    labelText="Progress Bar without output:"
-                    id="progress-bar"
-                    max="100"
-                    :showLoadingStatus="false"
-                />
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdProgressBar.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,65 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdShareButtons from "../../../components/CmdShareButtons"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
-
-// import example-data
-import CmdCode from "../../data/CmdShareButtonsHelp"
-import shareButtonsJson from '../../../assets/data/share-buttons-page-by-json.json'
-import shareButtonsPage from '../../../assets/data/share-buttons-page-by-property.json'
-import propertyDescriptions from "../../generated/CmdShareButtonsPropertyDescriptions.json"
-
-const propertyStructures = {
-    shareButtons: [
-        {
-            "id": "<string>",
-            "path": "<string>",
-            "tooltip": "<string>",
-            "iconClass": "<string>",
-            "linkText": "<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 headlineText="Data given by json-file" :headlineLevel="3" preHeadlineText="Example #1" />
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="shareButtonsJson">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdShareButtons
-                        :append-page="false"
-                        :share-buttons="shareButtonsJson"
-                    />
-                </teleport>
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Page given by property" :headlineLevel="3" preHeadlineText="Example #2" />
-            <ViewCodeData :code="CmdCode[1]" :data="shareButtonsPage">
-                    <CmdShareButtons
-                        page="some url"
-                        :share-buttons="shareButtonsPage"
-                    />
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Page taken from browser" headlineLevel="3" preHeadlineText="Example #3" />
-            <ViewCodeData :code="CmdCode[2]" :data="shareButtonsPage">
-                    <CmdShareButtons
-                        :share-buttons="shareButtonsPage"
-                    />
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdShareButtons.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,72 +0,0 @@
-<script setup>
-// import functions
-import {ref} from "vue"
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdSiteHeader from "../../../components/CmdSiteHeader"
-import CmdCompanyLogo from "../../../components/CmdCompanyLogo"
-import CmdListOfLinks from "../../../components/CmdListOfLinks"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-import CmdCode from "../../data/CmdSiteHeaderHelp"
-
-// import example-data
-import mainNavigation from '../../../assets/data/main-navigation.json'
-import listOfLinks from '../../../assets/data/list-of-links-top-header-navigation.json'
-import companyLogo from '../../../assets/data/company-logo.json'
-import propertyDescriptions from "../../generated/CmdSiteHeaderPropertyDescriptions.json"
-
-const propertyStructures = {
-    mainNavigationEntries: [
-        {
-            "name": "<string>",
-            "href": "<string>",
-            "target": "<string>",
-            "subentries": [
-                {
-                    "name": "<string>",
-                    "href": "<string>",
-                    "target": "<string>"
-                }
-            ]
-        }
-    ]
-}
-
-const navigationEntries = ref(mainNavigation)
-</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>
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdSiteHeader :cmdMainNavigation="{navigationEntries}" :sticky="true">
-                        <template v-slot:top-header>
-                            <CmdListOfLinks
-                                :links="listOfLinks"
-                                orientation="horizontal"
-                                align="right"
-                            />
-                        </template>
-                        <template v-slot:logo>
-                            <CmdCompanyLogo
-                                :link="companyLogo.link"
-                                altText="CoManD Logo"
-                                :pathDefaultLogo="require('@/assets/images/logo.svg')"
-                                :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
-                            />
-                        </template>
-                    </CmdSiteHeader>
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdSiteHeader.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,90 +0,0 @@
-<script setup>
-import {ref} from "vue"
-import {tabProps, tabHandlers} from "../../tabs"
-import CmdSlideButton from "../../../components/CmdSlideButton"
-import ComponentProperties from "../../components/ComponentProperties"
-import {isFrameMode} from "../../../utils/common"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-import CmdCode from "../../data/CmdSlideButtonHelp"
-import propertyDescriptions from "../../generated/CmdSlideButtonPropertyDescriptions.json"
-
-const propertyStructures = {
-    slideButtons: {
-        prev: {
-            iconClass: "<string>",
-            tooltip: "<string>"
-        },
-        next: {
-            iconClass: "<string>",
-            tooltip: "<string>"
-        }
-    }
-}
-
-const currentItem = ref(1)
-const totalItems = 4
-
-function showPrevItem() {
-    if(currentItem.value === 1) {
-        currentItem.value = totalItems
-    } else {
-        currentItem.value--
-    }
-}
-
-function showNextItem() {
-    if(currentItem.value === totalItems) {
-        currentItem.value = 1
-    } else {
-        currentItem.value++
-    }
-}
-</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>
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <div class="flex-container" id="slider">
-                        <CmdSlideButton
-                            slideButtonType="prev"
-                            @click.prevent="showPrevItem"
-                        />
-                        <p>
-                            Content {{ currentItem }}
-                        </p>
-                        <CmdSlideButton
-                            slideButtonType="next"
-                            @click.prevent="showNextItem"
-                        />
-                    </div>
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdSlideButton.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>
-
-<style lang="scss" scoped>
-.cmd-slide-button {
-    &.button {
-        position: relative;
-    }
-}
-
-#slider {
-    align-items: center;
-    border: var(--default-border);
-    border-style: dotted;
-
-    p {
-        margin: 0;
-        text-align: center;
-    }
-}
-</style>

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

@@ -1,60 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdSlideshow from "../../../components/CmdSlideshow"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-
-// import example-data
-import CmdCode from "../../data/CmdSlideshowHelp"
-import slideshow from "../../../assets/data/slideshow.json"
-import propertyDescriptions from "../../generated/CmdSlideshowPropertyDescriptions.json"
-
-const propertyStructures = {
-    slideshowItems: [{
-        "images": [
-            {
-                "maxWidth": "<number>",
-                "imgPath": "<string>"
-            },
-            {
-                "imgPath": "<string>",
-                "maxWidth": "<number>"
-            },
-            {
-                "imgPath": "<string>"
-            }
-        ],
-        "alt": "<string>",
-        "href": "<string>",
-        "title": "<string>",
-        "target": "<string>",
-        "figcaption": "<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>
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="slideshow">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                <CmdSlideshow
-                    :slideshow-items="slideshow"
-                    :showCounter="true"
-                    :autoplay="true"
-                />
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdSlideshow.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,64 +0,0 @@
-<script setup>
-// import functions
-import {ref} from "vue"
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdSwitchLanguage from "../../../components/CmdSwitchLanguage"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-
-// import example-data
-import CmdCode from "../../data/CmdSwitchLanguageHelp"
-import switchLanguage from '../../../assets/data/switch-language.json'
-import propertyDescriptions from "../../generated/CmdSwitchLanguagePropertyDescriptions.json"
-
-const currentLanguage = ref("")
-
-const propertyStructures = {
-    languages: [
-        {
-            "iso2": "<string>",
-            "name": "<string>",
-            "tooltip": "<string>",
-            "link": {
-                "type": "<string>",
-                "path": "<string>"
-            }
-        }
-    ]
-}
-
-function selectLanguage(event) {
-    // event contains the original event and the language as an object
-    event.originalEvent.preventDefault() // prevent original event
-    currentLanguage.value = event.language
-}
-</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>
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="switchLanguage">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdSwitchLanguage
-                        :languages="switchLanguage"
-                        @click="selectLanguage"
-                    />
-                </teleport>
-                <dl class="v-model" v-if="currentLanguage">
-                    <dt>Current language:</dt>
-                    <dd>
-                        <output>{{ currentLanguage.name }}</output>
-                    </dd>
-                </dl>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdSwitchLanguage.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,86 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdSystemMessage from "../../../components/CmdSystemMessage"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
-
-// import example-data
-import CmdCode from "../../data/CmdSystemMessageHelp"
-import propertyDescriptions from "../../generated/CmdSystemMessagePropertyDescriptions.json"
-
-const propertyStructures = {
-    iconMessage: {
-        show: "<boolean>",
-        iconClass: "<string>"
-    },
-    iconClose: {
-        show: "<boolean>",
-        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 headlineText="Error message (message given by property)" :headlineLevel="3" preHeadlineText="Example #1" />
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdSystemMessage
-                        validationStatus="error"
-                        :fullWidth="true"
-                        systemMessage="This is an error message!">
-                    </CmdSystemMessage>
-                </teleport>
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Warning message (message given by property and slot)" :headlineLevel="3" preHeadlineText="Example #2" />
-            <ViewCodeData :code="CmdCode[1]">
-                <CmdSystemMessage
-                    validationStatus="warning"
-                    :fullWidth="true"
-                    systemMessage="This is a warning message!">
-                    <!-- begin slot-content -->
-                    <p>This is additional text!</p>
-                    <!-- end slot-content -->
-                </CmdSystemMessage>
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Success message (message given by property and slot)" :headlineLevel="3" preHeadlineText="Example #3" />
-            <ViewCodeData :code="CmdCode[2]">
-                <CmdSystemMessage
-                    validationStatus="success"
-                    :fullWidth="true"
-                    systemMessage="This is a success message!">
-                    <!-- begin slot-content -->
-                    <ul>
-                        <li>Additional information #1</li>
-                        <li>Additional information #2</li>
-                        <li>Additional information #3</li>
-                    </ul>
-                    <!-- end slot-content -->
-                </CmdSystemMessage>
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Info message (message given by property)" :headlineLevel="3" preHeadlineText="Example #3" />
-            <ViewCodeData :code="CmdCode[3]">
-                <CmdSystemMessage
-                    validationStatus="info"
-                    :fullWidth="true"
-                    systemMessage="This is an info message!">
-                </CmdSystemMessage>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdSystemMessage.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,84 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdTable from "../../../components/CmdTable"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
-
-// import example-data
-import CmdCode from "../../data/CmdTableHelp"
-import tableSmall from "../../../assets/data/table-small.json"
-import tableLarge from "../../../assets/data/table-large.json"
-import propertyDescriptions from "../../generated/CmdTablePropertyDescriptions.json"
-
-const propertyStructures = {
-    tableData: {
-        "caption": {
-            "hide": "<boolean>",
-            "text": "<string>"
-        },
-        "thead": "<array>",
-        "tbody": [
-            "<array>"
-        ],
-        "tfoot": "<array>"
-    },
-    fullWidthOnDefault: {
-        show: "<boolean>",
-        iconClass: "<string>"
-    },
-    iconExpand: {
-        iconClass: "<string>",
-        tooltip: "<string>"
-    },
-    iconCollapse: {
-        iconClass: "<string>",
-        tooltip: "<string>"
-    },
-    iconShrink: {
-        iconClass: "<string>",
-        tooltip: "<string>"
-    },
-    iconStretch: {
-        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 headlineText="Table (with few data)" :headlineLevel="3" preHeadlineText="Example #1" />
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdTable
-                        :collapsible="true"
-                        :fullWidthOnDefault="false"
-                        :userCanToggleWidth="true"
-                        :table-data="tableSmall"
-                    />
-                </teleport>
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Table (with lots of data and highlighted row and column)" :headlineLevel="3" preHeadlineText="Example 2" />
-            <ViewCodeData :code="CmdCode[1]">
-                <CmdTable
-                    :collapsible="false"
-                    :fullWidthOnDefault="false"
-                    :userCanToggleWidth="false"
-                    :table-data="tableLarge"
-                />
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdTable.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>