comand-component-library 3.1.45 → 3.1.46

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

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

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

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

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

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

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

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

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

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