comand-component-library 3.1.45 → 3.1.48

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

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

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

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