comand-component-library 3.1.51 → 3.1.54

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

@@ -1,69 +0,0 @@
-<script setup>
-// import functions
-import {ref} from "vue"
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdFormFilters from "../../../components/CmdFormFilters"
-import CmdFakeSelect from "../../../components/CmdFakeSelect"
-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/CmdFormFiltersHelp"
-import fakeSelectFilterOptions from '../../../assets/data/fake-select-filter-options.json'
-import propertyDescriptions from "../../generated/CmdFormFiltersPropertyDescriptions.json"
-
-function getOptionName(option) {
-    for (let i = 0; i < fakeSelectFilterOptions.length; i++) {
-        if (option === fakeSelectFilterOptions[i].value) {
-            return fakeSelectFilterOptions[i].text
-        }
-    }
-    return null
-}
-
-const propertyStructures = {
-    selectedOptions: [
-        {
-            "text": "<string>",
-            "value": "<string>"
-        }
-    ]
-}
-
-const fakeSelectFilters = ref([])
-</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="CmdFormFilters" headlineText="Form Filters">
-                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                        <CmdFormFilters
-                            v-model="fakeSelectFilters"
-                            :selectedOptionsName="getOptionName"
-                        />
-                        <CmdFakeSelect
-                            labelText="Selectbox with filters:"
-                            :selectData="fakeSelectFilterOptions"
-                            v-model="fakeSelectFilters"
-                            defaultOptionName="Filters:"
-                            id="selectbox-with-filters"
-                            type="checkboxOptions"
-                            :useCustomTooltip="true"
-                        />
-                    </teleport>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdFormFilters.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,41 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdForm from "../../../components/CmdForm"
-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/CmdFormHelp"
-import propertyDescriptions from "../../generated/CmdFormPropertyDescriptions.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>
-            <ExampleSectionWrapper componentName="CmdForm" headlineText="Form">
-                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                        <CmdForm
-                            :use-fieldset="true"
-                            novalidate="novalidate"
-                            text-legend="Legend">
-                            <!-- begin slot-content -->
-                            Form content (put form elements here)
-                            <!-- end slot-content -->
-                        </CmdForm>
-                    </teleport>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdForm.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,55 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdGoogleMaps from "../../../components/CmdGoogleMaps"
-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/CmdGoogleMapsHelp"
-import propertyDescriptions from "../../generated/CmdFormFiltersPropertyDescriptions.json"
-import addressData from '../../../assets/data/address-data.json'
-
-const propertyStructures = {
-    "address": {
-        "streetNo": "<string>",
-        "zip": "<number>",
-        "city": "<string>",
-        "longitude": "<string>",
-        "latitude": "<string>",
-        "location": "<string>"
-    }
-}
-
-function coordinates(address) {
-    return {
-        longitude: address.longitude,
-        latitude: address.latitude
-    }
-}
-</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="CmdGoogleMaps" headlineText="Google Maps&trade;">
-                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                        <CmdGoogleMaps
-                            :address="coordinates(addressData.address)"
-                        />
-                    </teleport>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdGoogleMaps.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,46 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdImageGallery from "../../../components/CmdImageGallery"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-
-// import example-data
-import CmdCode from "../../data/CmdImageGalleryHelp"
-import imageGallery from '../../../assets/data/image-gallery.json'
-import propertyDescriptions from "../../generated/CmdImageGalleryPropertyDescriptions.json"
-
-const propertyStructures = {
-    images: [
-        {
-            "imgId": "<number>",
-            "srcImageSmall": "<string>",
-            "srcImageLarge": "<string>",
-            "alt": "<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="imageGallery">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdImageGallery
-                        :images="imageGallery"
-                    />
-                </teleport>
-            </ViewCodeData>>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdImageGallery.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,34 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdImageZoom from "../../../components/CmdImageZoom"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-
-// import example-data
-import CmdCode from "../../data/CmdImageZoomHelp"
-import propertyDescriptions from "../../generated/CmdImageZoomPropertyDescriptions.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>
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdImageZoom
-                        small-image-url="media/images/content-images/logo-business-edition-landscape.jpg"
-                        large-image-url="media/images/content-images/logo-business-edition-landscape-large.jpg"
-                    />
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdImageZoom.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,64 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdListOfLinks from "../../../components/CmdListOfLinks"
-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/CmdListOfLinksHelp"
-import listOfLinks from "../../../assets/data/list-of-links.json"
-import listOfLinksSectionAnchors from "../../../assets/data/list-of-links-section-anchors.json"
-import propertyDescriptions from "../../generated/CmdListOfLinksPropertyDescriptions.json"
-
-const propertyStructures = {
-    listOfLinks: [
-        {
-            "iconClass": "<string>",
-            "type": "<string>",
-            "text": "<string>",
-            "path": "<string>",
-            "target": "<string>",
-            "tooltip": "<string>",
-            "fancybox": "<boolean>"
-        }
-    ]
-}
-</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="Vertical" :headlineLevel="3" preHeadlineText="Example #1" />
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="listOfLinks">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdListOfLinks :links="listOfLinks" :cmdCustomHeadline="{headlineText: 'Links', headlineLevel: 5}" />
-                </teleport>
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Horizontal" :headlineLevel="3" preHeadlineText="Example #2" />
-            <ViewCodeData :code="CmdCode[1]" :data="listOfLinks">
-                <CmdListOfLinks :links="listOfLinks" orientation="horizontal" :cmdCustomHeadline="{headlineText: 'Links', headlineLevel: 5}" />
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Styled as box" :headlineLevel="3" preHeadlineText="Example #3" />
-            <ViewCodeData :code="CmdCode[2]" :data="listOfLinks">
-                <CmdListOfLinks :links="listOfLinks" :styleAsBox="true" :cmdCustomHeadline="{headlineText: 'Links', headlineLevel: 5}" />
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Use as section anchors" :headlineLevel="3" preHeadlineText="Example #4" />
-            <ViewCodeData :code="CmdCode[2]" :data="listOfLinksSectionAnchors">
-                <CmdListOfLinks :links="listOfLinksSectionAnchors" :sectionAnchors="true" />
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdListOfLinks.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,117 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdLoginForm from "../../../components/CmdLoginForm"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-
-// import example-data
-import CmdCode from "../../data/CmdLoginFormHelp"
-import propertyDescriptions from "../../generated/CmdLoginFormPropertyDescriptions.json"
-
-const propertyStructures = {
-    cmdCustomHeadlineLoginForm: {
-        show: "<boolean>",
-        text: "<string>",
-        level: "<number>"
-    },
-    cmdCustomHeadlineSendLoginForm: {
-        show: "<boolean>",
-        text: "<string>",
-        level: "<number>"
-    },
-    cmdFormElementUsername: {
-        labelText: "<string>",
-        placeholder: "<string>",
-        innerIconClass: "<string>",
-        name: "<string>",
-        id: "<string>"
-    },
-    cmdFormElementPassword: {
-        labelText: "<string>",
-        placeholder: "<string>",
-        innerIconClass: "<string>",
-        name: "<string>",
-        id: "<string>"
-    },
-    cmdFormElementSendLogin: "-",
-    options: {
-        forgotPassword: {
-            icon: {
-                show: "<boolean>",
-                iconClass: "<string>",
-                tooltip: "<string>",
-            },
-            text: "<string>",
-        },
-        createAccount: {
-            linkType: "href | router | button",
-            path: "<string>",
-            icon: {
-                show: "<boolean>",
-                iconClass: "<string>",
-                tooltip: "<string>",
-            },
-            text: "<string>",
-        },
-        backToLoginForm: {
-            icon: {
-                show: "<boolean>",
-                iconClass: "<string>",
-                tooltip: "<string>",
-            },
-            text: "<string>",
-        }
-    },
-    buttons: {
-        login: {
-            linkType: "<string>",
-            type: "<string>",
-            path: "<string>",
-            text: "<string>",
-            primary: "<boolean>",
-            icon: {
-                show: "<boolean>",
-                iconClass: "<string>",
-                tooltip: "<string>",
-            }
-        },
-        sendLogin: {
-            linkType: "<string>",
-            type: "<string>",
-            path: "<string>",
-            text: "<string>",
-            primary: "<boolean>",
-            icon: {
-                show: "<boolean>",
-                iconClass: "<string>",
-                tooltip: "<string>",
-            }
-        }
-    }
-}
-
-const loginData = ""
-</script>
-
-<template>
-    <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
-        <template v-slot:tab-content-0>
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdLoginForm
-                        v-model="loginData"
-                        v-focus
-                    />
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdLoginForm.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,94 +0,0 @@
-<script setup>
-// import functions
-import {ref} from "vue"
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdMainNavigation from "../../../components/CmdMainNavigation"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-
-// import example-data
-import CmdCode from "../../data/CmdMainNavigationHelp"
-import mainNavigation from '../../../assets/data/main-navigation.json'
-import propertyDescriptions from "../../generated/CmdMainNavigationPropertyDescriptions.json"
-
-const propertyStructures = {
-    closeOffcanvas: {
-        iconClass: "<string>",
-        text: "<string>",
-        showText: "<boolean>"
-    },
-    buttonOffcanvas: {
-        iconClass: "<string>",
-        text: "<string>",
-        showText: "<boolean>"
-    },
-    navigationEntries: {
-        "name": "<string>",
-        "href": "<string>",
-        "target": "<string>",
-        "subentries": [
-            {
-                "name": "<string>",
-                "href": "<string>",
-                "target": "<string>",
-                "subentries": "<array>"
-            }
-        ]
-    },
-    subentriesIconClass: {
-        labelText: "<string>",
-        placeholder: "<string>",
-        innerIconClass: "<string>",
-        name: "<string>",
-        id: "<string>"
-    },
-    subSubentriesIconClass: {
-        labelText: "<string>",
-        placeholder: "<string>",
-        innerIconClass: "<string>",
-        name: "<string>",
-        id: "<string>"
-    }
-}
-
-// use ref and assign to const to make reactive
-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]" :data="navigationEntries">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdMainNavigation
-                        :stretchMainItems="false"
-                        :persistOnMobile="false"
-                        :navigationEntries="navigationEntries"
-                    />
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdMainNavigation.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>
-
-<style lang="scss">
-@import '../../../assets/styles/variables';
-
-main#cmd-main-navigation {
-    padding: 0;
-
-    @media only screen and (max-width: $medium-max-width) {
-        #toggle-offcanvas {
-            margin-top: var(--default-margin);
-        }
-    }
-}
-</style>

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

@@ -1,49 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdMultistepFormProgressBar from "../../../components/CmdMultistepFormProgressBar"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-
-// import example-data
-import CmdCode from "../../data/CmdMultistepFormProgressBarHelp"
-import multistepFormProgressBar from '../../../assets/data/multistep-form-progress-bar.json'
-import propertyDescriptions from "../../generated/CmdMultistepFormProgressBarPropertyDescriptions.json"
-
-const propertyStructures = {
-    multisteps: [
-        {
-            "path": "<string>",
-            "tooltip": "<string>",
-            "type": "<string>",
-            "name": "<string>",
-            "formaction": "<string>",
-            "text": "<string>",
-            "iconClass": "<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="multistepFormProgressBar">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdMultistepFormProgressBar
-                        :multisteps="multistepFormProgressBar"
-                        @click="showPageMultistep = $event.index + 1"
-                    />
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdMultistepFormProgressBar.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,49 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-// import components
-
-import CmdOpeningHours from "../../../components/CmdOpeningHours"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-
-// import example-data
-import CmdCode from "../../data/CmdOpeningHoursHelp"
-import openingHours from '../../../assets/data/opening-hours.json'
-import propertyDescriptions from "../../generated/CmdOpeningHoursPropertyDescriptions.json"
-
-const propertyStructures = {
-    openingHours: [
-        {
-            "day": "<string>",
-            "fromTime": "<string>",
-            "tillTime": "<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="openingHours">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdOpeningHours
-                        :openingHours="openingHours"
-                        :closed="true"
-                        :cmdCustomHeadline="{text: 'Opening hours', level: 4}"
-                        textOpenClosed="Closed right now!"
-                        textHolidaysClosed="Closed on holidays"
-                        textMiscInfo="Miscellaneous information"
-                    />
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdOpeningHours.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>