comand-component-library 3.1.53 → 3.1.54

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

@@ -1,52 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdTabs from "../../../components/CmdTabs"
-import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-
-// import example-data
-import CmdCode from "../../data/CmdTabsHelp"
-import tabs from "../../../assets/data/tabs.json"
-import propertyDescriptions from "../../generated/CmdTabsPropertyDescriptions.json"
-
-const propertyStructures = {
-    tabs: [
-        {
-            "name": "<string>",
-            "headline": "<string>",
-            "htmlContent": "<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="Tabs (not stretched)" :headlineLevel="3" preHeadlineText="Example #1" />
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="tabs">
-                <CmdTabs
-                    :stretchTabs="false"
-                    :tabs="tabs"
-                />
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Tabs (stretched)" :headlineLevel="3" preHeadlineText="Example #2" />
-            <ViewCodeData :code="CmdCode[1]" :data="tabs">
-                <CmdTabs
-                    :stretchTabs="true"
-                    :tabs="tabs"
-                />
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdTabs.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,50 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdThumbnailScroller from "../../../components/CmdThumbnailScroller"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-import CmdCode from "../../data/CmdThumbnailScrollerHelp"
-
-// import example-data
-import thumbnailScroller from "../../../assets/data/thumbnail-scroller.json"
-import propertyDescriptions from "../../generated/CmdThumbnailScrollerPropertyDescriptions.json"
-
-const propertyStructures = {
-    thumbnailScrollerItems: [
-        {
-            "imgId": "<number>",
-            "srcImageSmall": "<string>",
-            "srcImageLarge": "<string>",
-            "alt": "<string>",
-            "figcaption": "<string>"
-        }
-    ],
-    figcaption: {
-        show: "<boolean>",
-        position: "<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="thumbnailScroller">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <CmdThumbnailScroller
-                        :thumbnail-scroller-items="thumbnailScroller"
-                    />
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdThumbnailScroller.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,59 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdTooltip from "../../../components/CmdTooltip"
-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/CmdTooltipHelp"
-import propertyDescriptions from "../../generated/CmdTooltipPropertyDescriptions.json"
-
-const propertyStructures = {
-    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="Tooltip opened by hover" :headlineLevel="3" preHeadlineText="Example #1" />
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                    <p>
-                        <a href="#" @click.prevent id="hoverme">Hover me!</a><br/>
-                    </p>
-                    <CmdTooltip
-                        related-id="hoverme">
-                        Tooltip for hover
-                    </CmdTooltip>
-                </teleport>
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Tooltip opened (and closed) by click" :headlineLevel="3" preHeadlineText="Example #2" />
-            <ViewCodeData :code="CmdCode[1]">
-                <p>
-                    <a href="#" @click.prevent id="clickme" title="Native tooltip">Click me!</a>
-                </p>
-            <CmdTooltip
-                related-id="clickme"
-                :toggle-visibility-by-click="true">
-                Tooltip for click
-            </CmdTooltip>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdTooltip.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,59 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdUploadForm from "../../../components/CmdUploadForm"
-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/CmdUploadFormHelp"
-import propertyDescriptions from "../../generated/CmdUploadFormPropertyDescriptions.json"
-
-const propertyStructures = {
-    uploadOptions: {
-        url: "<string>",
-        filesParam: "<string>",
-        additionalParams: "<object>",
-    }
-}
-</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="Advanced mode" :headlineLevel="3" preHeadlineText="Example #1" />
-            <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                <CmdUploadForm
-                    :cmdCustomHeadline="{headlineText: 'Select files to upload', headlineLevel: 5}"
-                    :enableDragAndDrop="true"
-                    :allowedFileExtensions="['gif','png','jpg']"
-                    :allowMultipleFileUploads="true"
-                    :uploadOptions="{url: 'some url'}"
-                />
-                </teleport>
-            </ViewCodeData>
-            <hr />
-            <CmdCustomHeadline headlineText="Simple mode" :headlineLevel="3" preHeadlineText="Example #2" />
-            <ViewCodeData :code="CmdCode[1]">
-                <CmdUploadForm
-                    :advancedMode="false"
-                    :maxFileUploadSize="5242880"
-                    :enableDragAndDrop="true"
-                    :allowedFileExtensions="['pdf']"
-                    :allowMultipleFileUploads="false"
-                    :uploadOptions="{url: 'some url'}"
-                />
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdUploadForm.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,46 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdWidthLimitationWrapper from "../../../components/CmdWidthLimitationWrapper"
-import ComponentProperties from "../../components/ComponentProperties"
-import ViewCodeData from "../../components/ViewCodeData"
-import CmdTabs from "../../../components/CmdTabs"
-
-// import example-data
-import CmdCode from "../../data/CmdWidthLimitationWrapperHelp"
-import propertyDescriptions from "../../generated/CmdWidthLimitationWrapperPropertyDescriptions.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()">
-                <CmdWidthLimitationWrapper>
-                    <!-- begin slot-content -->
-                    Content
-                    <!-- end slot-content -->
-                </CmdWidthLimitationWrapper>
-                </teleport>
-            </ViewCodeData>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdWidthLimitationWrapper.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>
-
-<style lang="scss">
-.cmd-width-limitation-wrapper {
-    border: var(--default-border);
-    border-style: dotted;
-
-    > section {
-        border: inherit;
-    }
-}
-</style>