comand-component-library 3.1.53 → 3.1.54

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

@@ -1,175 +0,0 @@
-<script setup>
-// import functions
-import {ref} from "vue"
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-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/CmdFakeSelectHelp"
-import fakeSelectOptions from "../../../assets/data/fake-select-options.json"
-import fakeSelectColors from '../../../assets/data/fake-select-colors.json'
-import fakeSelectCountries from '../../../assets/data/fake-select-countries.json'
-import fakeSelectOptionsWithIcons from '../../../assets/data/fake-select-options-with-icons.json'
-import propertyDescriptions from "../../generated/CmdFakeSelectPropertyDescriptions.json"
-
-const propertyStructures = {
-    dropdownIcon: {
-        "iconClass": "<string>",
-        "tooltip": "<string>"
-    },
-    selectData: [
-        {
-            "text": "<string>",
-            "value": "<number>"
-        }
-    ]
-}
-
-// set consts for v-models
-const fakeSelectDefault = ref("")
-const fakeSelectDefaultWithIcons = ref("2")
-const fakeSelectCheckbox = ref([])
-const formElementStatus = ref("")
-const fakeSelectCountry = ref("")
-const fakeSelectColor = 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="CmdFakeSelect" headlineText="Selectbox 'default'">
-                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="fakeSelectOptions">
-                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                        <CmdFakeSelect
-                            labelText="Labeltext for default selectbox:"
-                            :status="formElementStatus"
-                            :selectData="fakeSelectOptions"
-                            v-model="fakeSelectDefault"
-                            required
-                            defaultOptionName="Select an option:"
-                        />
-                        <dl class="vmodel">
-                            <dt>v-model:</dt>
-                            <dd>
-                                <output>{{ fakeSelectDefault }}</output>
-                            </dd>
-                        </dl>
-                    </teleport>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-            <hr/>
-            <ExampleSectionWrapper componentName="CmdFakeSelect" headlineText="Selectbox 'default' (with icons)">
-                <ViewCodeData :code="CmdCode[1]">
-                    <CmdFakeSelect
-                        labelText="Selectbox with icons:"
-                        :status="formElementStatus"
-                        :selectData="fakeSelectOptionsWithIcons"
-                        v-model="fakeSelectDefaultWithIcons"
-                        defaultOptionName="Select an option:"
-                    />
-                    <dl class="vmodel">
-                        <dt>v-model:</dt>
-                        <dd>
-                            <output>{{ fakeSelectDefaultWithIcons }}</output>
-                        </dd>
-                    </dl>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-            <hr/>
-            <ExampleSectionWrapper componentName="CmdFakeSelect" headlineText="Selectbox 'checkboxOptions' (shows checkboxes)">
-                <ViewCodeData :code="CmdCode[2]">
-                    <CmdFakeSelect
-                        labelText="Selectbox with checkboxes:"
-                        :status="formElementStatus"
-                        :selectData="fakeSelectOptions"
-                        v-model="fakeSelectCheckbox"
-                        defaultOptionName="Options:"
-                        :required="true"
-                        id="selectbox-with-checkboxes"
-                        type="checkboxOptions"
-                        :useCustomTooltip="true"
-                    />
-                    <p>
-                        fakeSelectOptions: {{ fakeSelectOptions }}
-                    </p>
-                    <dl class="vmodel">
-                        <dt>v-model:</dt>
-                        <dd>
-                            <output>{{ fakeSelectCheckbox }}</output>
-                        </dd>
-                    </dl>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-            <hr/>
-            <ExampleSectionWrapper componentName="CmdFakeSelect" headlineText="Selectbox 'content' (content given by slot)">
-                <ViewCodeData :code="CmdCode[3]">
-                    <CmdFakeSelect
-                        labelText="Selectbox with slot-content:"
-                        :status="formElementStatus"
-                        type="content"
-                        defaultOptionName="HTML-Content:"
-                    >
-                        <ul class="custom-fake-select-content">
-                            <li>
-                                <div>
-                                    <h3>Headline</h3>
-                                    <p>Some content inside a paragraph</p>
-                                </div>
-                                <img src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg" alt="image"/>
-                            </li>
-                        </ul>
-                    </CmdFakeSelect>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-            <hr/>
-            <ExampleSectionWrapper componentName="CmdFakeSelect" headlineText="Selectbox 'country' (shows country flags)">
-                <ViewCodeData :code="CmdCode[4]">
-                    <CmdFakeSelect
-                        labelText="Selectbox with country flags:"
-                        :status="formElementStatus"
-                        :selectData="fakeSelectCountries"
-                        v-model="fakeSelectCountry"
-                        defaultOptionName="Select country:"
-                        type="country"
-                    />
-                    <dl class="vmodel">
-                        <dt>v-model:</dt>
-                        <dd>
-                            <output>{{ fakeSelectCountry }}</output>
-                        </dd>
-                    </dl>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-            <hr/>
-            <ExampleSectionWrapper componentName="CmdFakeSelect" headlineText="Selectbox 'colors' (show squares with colors)">
-                <ViewCodeData :code="CmdCode[5]">
-                    <CmdFakeSelect
-                        labelText="Selectbox with colors:"
-                        :status="formElementStatus"
-                        :selectData="fakeSelectColors"
-                        v-model="fakeSelectColor"
-                        required="required"
-                        type="color"
-                    />
-                    <dl class="vmodel">
-                        <dt>v-model:</dt>
-                        <dd>
-                            <output>{{ fakeSelectColor }}</output>
-                        </dd>
-                    </dl>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdFakeSelect.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,79 +0,0 @@
-<script setup>
-// import functions
-import {tabProps, tabHandlers} from "../../tabs"
-import {openFancyBox} from "@/components/CmdFancyBox"
-import {isFrameMode} from "../../../utils/common"
-
-// import components
-import CmdFancyBox from "../../../components/CmdFancyBox"
-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/CmdFancyBoxHelp"
-import propertyDescriptions from "../../generated/CmdFancyBoxPropertyDescriptions.json"
-
-const propertyStructures = {
-    fancyboxOptions: {
-        closeIcon: {
-            "iconClass": "<string>",
-            "tooltip": "<string>"
-        },
-        printButtons: {
-            "color": {
-                "iconClass": "<string>",
-                "tooltip": "<string>"
-            },
-            "grayscale": {
-                "iconClass": "<string>",
-                "tooltip": "<string>"
-            }
-        }
-    }
-}
-
-function showFancyBox(type, content, altText) {
-    if (type === 'text') {
-        openFancyBox({content: content})
-    } else if (type === 'image') {
-        openFancyBox({url: content, altText: altText})
-    }
-}
-</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="CmdFancyBox" headlineText="Fancybox with text">
-                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                        <div>
-                            <a href="#" @click.prevent="showFancyBox('text','Some text')">Open Fancybox with text</a><br/>
-                            <CmdFancyBox
-                                :allowEscapeKey="false"
-                            >
-                                Content
-                            </CmdFancyBox>
-                        </div>
-                    </teleport>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-            <hr/>
-            <ExampleSectionWrapper componentName="CmdFancyBox" headlineText="Fancybox with image">
-                <ViewCodeData :code="CmdCode[0]">
-                    <a href="#"
-                       @click.prevent="showFancyBox('image', '/media/images/content-images/logo-business-edition-landscape.jpg', 'Alternative text')"
-                       title="Open Fancybox with large image">
-                        Open Fancybox with image
-                    </a>
-                </ViewCodeData>
-            </ExampleSectionWrapper>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdFancyBox.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>

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

@@ -1,412 +0,0 @@
-<script setup>
-// import functions
-import {ref} from "vue"
-import {tabProps, tabHandlers} from "../../tabs"
-import {isFrameMode} from "../../../utils/common"
-import {nextSequenceValue, currentSequenceValue} from "../../../utils/globalSequence"
-
-// import components
-import CmdFormElement from "../../../components/CmdFormElement"
-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/CmdFormElementHelp"
-import selectOptions from '../../../assets/data/select-options.json'
-import propertyDescriptions from "../../generated/CmdFormElementPropertyDescriptions.json"
-
-const propertyStructures = {
-    datalist: {
-        "id": "<string>",
-        "options": "<array>"
-    },
-    nativeButton: {
-        "text": "<string>",
-        "icon": {
-            "show": "<boolean>",
-            "iconClass": "<string>",
-            "position": "<string>",
-            "tooltip": "<string>"
-        }
-    },
-    selectOptions: [
-        {
-            "text": "<string>",
-            "value": "<string>"
-        }
-    ]
-}
-
-const datalist = {
-    id: "datalist-id",
-    options: [
-        "Option 1",
-        "Option 2",
-        "Option 3"
-    ]
-}
-
-// set consts for v-models
-const checkbox = ref(false)
-const radio = ref("radiobutton1")
-const replacedRadio = ref("radiobutton2")
-const range = ref(50)
-const select = ref("2")
-const textarea = ref("")
-const formElementStatus = ref("")
-// TODO: formElementStatus
-
-function getExampleId() {
-    return "example" + nextSequenceValue("CmdFormElementHelp")
-}
-
-function getPreHeadlineText() {
-    return "Example #" + currentSequenceValue("CmdFormElementHelp")
-}
-</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>
-            <section class="example-section">
-                <a :id="getExampleId()"></a>
-                <CmdCustomHeadline :preHeadlineText="getPreHeadlineText()" headlineText="Input (type text)" :headlineLevel="2"/>
-                <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
-                    <teleport to="#frame-component-target" :disabled="!isFrameMode()">
-                        <CmdFormElement
-                            labelText="Input (type text):"
-                            element="input"
-                            type="text"
-                            :status="formElementStatus"
-                            placeholder="Type in text"
-                            tooltipText="This is a tooltip"
-                            :useCustomTooltip="false"
-                        />
-                    </teleport>
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a :id="getExampleId()"></a>
-                <CmdCustomHeadline :preHeadlineText="getPreHeadlineText()" headlineText="Input (type number)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[1]">
-                    <CmdFormElement
-                        labelText="Input (type number):"
-                        element="input"
-                        type="number"
-                        :status="formElementStatus"
-                        placeholder="Type in number"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                    />
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example3"></a>
-                <CmdCustomHeadline preHeadlineText="Example #3" headlineText="Input (type color)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[2]">
-                    <CmdFormElement
-                        labelText="Input (type color):"
-                        element="input"
-                        type="color"
-                        :status="formElementStatus"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                    />
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example4"></a>
-                <CmdCustomHeadline preHeadlineText="Example #4" headlineText="Input (type date)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[3]">
-                    <CmdFormElement
-                        labelText="Input (type date):"
-                        element="input"
-                        type="date"
-                        :status="formElementStatus"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                    />
-                </ViewCodeData>
-            </section>
-
-            <hr/>
-            <section class="example-section">
-                <a id="example5"></a>
-                <CmdCustomHeadline preHeadlineText="Example #5" headlineText="Input (type datetime-local)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[4]">
-                    <CmdFormElement
-                        labelText="Input (type datetime-local):"
-                        element="input"
-                        type="datetime-local"
-                        :status="formElementStatus"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                    />
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example6"></a>
-                <CmdCustomHeadline preHeadlineText="Example #6" headlineText="Input (type password)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[5]">
-                    <CmdFormElement
-                        labelText="Input (type password):"
-                        element="input"
-                        type="password"
-                        fieldIconClass="icon-security-settings"
-                        :status="formElementStatus"
-                        placeholder="Type in password"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                    />
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example7"></a>
-                <CmdCustomHeadline preHeadlineText="Example #7" headlineText="Input (type file)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[6]">
-                    <CmdFormElement
-                        labelText="Input (type file):"
-                        element="input"
-                        type="file"
-                        :status="formElementStatus"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                    />
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example8"></a>
-                <CmdCustomHeadline preHeadlineText="Example #8" headlineText="Input (type range)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[7]">
-                    <CmdFormElement
-                        labelText="Input (type range):"
-                        element="input"
-                        type="range"
-                        :status="formElementStatus"
-                        :useCustomTooltip="false"
-                        v-model="range"
-                    />
-                    <dl class="vmodel">
-                        <dt>v-model:</dt>
-                        <dd>
-                            <output>{{ range }}</output>
-                        </dd>
-                    </dl>
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example9"></a>
-                <CmdCustomHeadline preHeadlineText="Example #9" headlineText="Input (type submit)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[8]">
-                    <CmdFormElement
-                        :nativeButton="{ text: 'Submit', icon: {iconClass: 'icon-edit', show: true}}"
-                        element="button"
-                        type="submit"
-                        :status="formElementStatus"
-                        :useCustomTooltip="false"
-                    />
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example10"></a>
-                <CmdCustomHeadline preHeadlineText="Example #10" headlineText="Input (type button)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[9]">
-                    <CmdFormElement
-                        :nativeButton="{ icon: {iconClass: 'icon-edit', show: true, tooltip: 'I am a tooltip'}}"
-                        element="button"
-                        type="button"
-                        :status="formElementStatus"
-                        :useCustomTooltip="false"
-                    />
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example11"></a>
-                <CmdCustomHeadline preHeadlineText="Example #11" headlineText="Input (type checkbox)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[10]">
-                    <CmdFormElement
-                        labelText="Input (type checkbox)"
-                        element="input"
-                        type="checkbox"
-                        :status="formElementStatus"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                        v-model="checkbox"
-                    />
-                    <dl class="vmodel">
-                        <dt>v-model:</dt>
-                        <dd>
-                            <output>{{ checkbox }}</output>
-                        </dd>
-                    </dl>
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example12"></a>
-                <CmdCustomHeadline preHeadlineText="Example #12" headlineText="Input (type radio)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[11]">
-                    <CmdFormElement
-                        labelText="Input #1 (type radio)"
-                        element="input"
-                        type="radio"
-                        name="radio-group"
-                        id="example-radio1"
-                        :status="formElementStatus"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                        v-model="radio"
-                        inputValue="radiobutton1"
-                    />
-                    <CmdFormElement
-                        labelText="Input #2 (type radio)"
-                        element="input"
-                        type="radio"
-                        name="radio-group"
-                        id="example-radio2"
-                        :status="formElementStatus"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                        v-model="radio"
-                        inputValue="radiobutton2"
-                    />
-                    <dl class="vmodel">
-                        <dt>v-model:</dt>
-                        <dd>
-                            <output>{{ radio }}</output>
-                        </dd>
-                    </dl>
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example13"></a>
-                <CmdCustomHeadline preHeadlineText="Example #13" headlineText="Input (type checkbox, replaced)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[12]">
-                    <CmdFormElement
-                        labelText="Input (type checkbox)"
-                        element="input"
-                        type="checkbox"
-                        :replace-input-type="true"
-                        :status="formElementStatus"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                        v-model="checkbox"
-                    />
-                    <dl class="vmodel">
-                        <dt>v-model:</dt>
-                        <dd>
-                            <output>{{ checkbox }}</output>
-                        </dd>
-                    </dl>
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example14"></a>
-                <CmdCustomHeadline preHeadlineText="Example #14" headlineText="Input (type radio, replaced)" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[13]">
-                    <CmdFormElement
-                        labelText="Input #1 (type radio)"
-                        element="input"
-                        type="radio"
-                        :replace-input-type="true"
-                        name="replaced-radio-group"
-                        id="example-replaced-radio1"
-                        :status="formElementStatus"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                        v-model="replacedRadio"
-                        inputValue="radiobutton1"
-                    />
-                    <CmdFormElement
-                        labelText="Input #2 (type radio)"
-                        element="input"
-                        type="radio"
-                        name="replaced-radio-group"
-                        :replace-input-type="true"
-                        id="example-replaced-radio2"
-                        :status="formElementStatus"
-                        tooltipText="This is a tooltip"
-                        :useCustomTooltip="false"
-                        v-model="replacedRadio"
-                        inputValue="radiobutton2"
-                    />
-                    <dl class="vmodel">
-                        <dt>v-model:</dt>
-                        <dd>
-                            <output>{{ replacedRadio }}</output>
-                        </dd>
-                    </dl>
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example15"></a>
-                <CmdCustomHeadline preHeadlineText="Example #15" headlineText="Select" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[14]">
-                    <CmdFormElement
-                        labelText="Selectbox"
-                        element="select"
-                        required="required"
-                        :status="formElementStatus"
-                        v-model="select"
-                        :selectOptions="selectOptions"
-                    />
-                    <dl>
-                        <dt>v-model:</dt>
-                        <dd>
-                            <output>{{ select }}</output>
-                        </dd>
-                    </dl>
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example16"></a>
-                <CmdCustomHeadline preHeadlineText="Example #16" headlineText="Datalist" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[15]">
-                    <CmdFormElement
-                        labelText="Datalist:"
-                        element="input"
-                        type="text"
-                        :status="formElementStatus"
-                        placeholder="Type in option"
-                        :datalist="datalist"
-                        tooltipText="This is a tooltip"
-                    />
-                </ViewCodeData>
-            </section>
-            <hr/>
-            <section class="example-section">
-                <a id="example171"></a>
-                <CmdCustomHeadline preHeadlineText="Example #17" headlineText="Textarea" :headlineLevel="2"/>
-                <ViewCodeData :code="CmdCode[16]">
-                    <CmdFormElement
-                        labelText="Textarea:"
-                        element="textarea"
-                        :status="formElementStatus"
-                        placeholder="Type in text"
-                        tooltipText="This is a tooltip"
-                        v-model="textarea"
-                    />
-                </ViewCodeData>
-            </section>
-        </template>
-        <template v-slot:tab-content-1>
-            <ComponentProperties :properties="CmdFormElement.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
-        </template>
-    </CmdTabs>
-</template>