comand-component-library 3.1.45 → 3.1.48

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

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

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

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

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

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

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

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

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

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

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