comand-component-library 3.1.53 → 3.1.54

package/src/documentation/components/ViewCodeData.vue

@@ -1,113 +0,0 @@
-<script setup>
-import {defineProps, ref, computed} from "vue"
-import {isFrameMode} from "../../utils/common"
-import ComponentCode from "./ComponentCode"
-import CmdBox from "../../components/CmdBox"
-
-defineProps({
-    code: {
-        type: String,
-        required: true
-    },
-    data: {
-        type: [String, Object, Array],
-        required: false
-    },
-    isFirstComponent: {
-        type: Boolean,
-        default: false
-    }
-})
-
-const responsiveWidth = ref("0px")
-const frameUrl = new URL(location)
-const showFrame = computed(() => !isFrameMode() && responsiveWidth.value !== "0px")
-
-frameUrl.searchParams.set("frameMode", "true")
-
-function changeWidth(width) {
-    responsiveWidth.value = width + "px"
-}
-</script>
-
-<template>
-    <div class="flex-container vertical">
-        <div>
-            <header class="flex-container" id="switch-device-view">
-                <h4>View</h4>
-                <ul v-if="isFirstComponent" class="flex-container">
-                    <li>
-                        Toggle width:
-                    </li>
-                    <li>
-                        <a :class="['icon-device-smartphone', {'active': responsiveWidth === '600px'}]" href="#" @click.prevent="changeWidth(600)" title="Change view to smartphone (0-600px)"></a>
-                    </li>
-                    <li>
-                        <a :class="['icon-device-tablet', {'active': responsiveWidth === '1023px'}]" href="#" @click.prevent="changeWidth(1023)" title="Change view to tablet (601px-1023px)"></a>
-                    </li>
-                    <li>
-                        <a :class="['icon-device-laptop', {'active': responsiveWidth === '1280px'}]" href="#" @click.prevent="changeWidth(1280)" title="Change view to laptop (1024px-1280px)"></a>
-                    </li>
-                    <li>
-                        <a :class="['icon-device-desktop', {'active': responsiveWidth === '0px'}]" href="#" @click.prevent="changeWidth(0)" title="Change view to desktop (1281px+)"></a>
-                    </li>
-                </ul>
-            </header>
-            <div v-if="showFrame" id="responsive-view-wrapper" :style="{width: responsiveWidth}">
-                <iframe :src="frameUrl.href" id="responsive-view" :style="{width: responsiveWidth}"></iframe>
-            </div>
-            <slot v-if="!showFrame"></slot>
-        </div>
-        <div v-if="!isFrameMode()" class="flex-container">
-            <div>
-                <CmdBox :useSlots="['body']" :collapsible="true" :collapsingBoxesOpen="true" :cmdCustomHeadline="{headlineText: 'Code', headlineLevel: 4}">
-                    <template v-slot:body>
-                        <ComponentCode :code="code"/>
-                    </template>
-                </CmdBox>
-            </div>
-            <div v-if="data">
-                <CmdBox :useSlots="['body']" :collapsible="true" :collapsingBoxesOpen="true" :cmdCustomHeadline="{headlineText: 'Data', headlineLevel: 4}">
-                    <template v-slot:body>
-                        <ComponentCode :code="data" language="json"/>
-                    </template>
-                </CmdBox>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss">
-
-#responsive-view-wrapper {
-    resize: vertical;
-    overflow: hidden;
-    display: flex;
-
-    #responsive-view {
-        flex-grow: 1;
-        border: .1rem dotted var(--text-color);
-    }
-}
-
-#switch-device-view {
-    justify-content: space-between;
-
-    > * {
-        flex: none;
-    }
-
-    ul {
-        align-items: center;
-
-        li {
-            list-style-type: none;
-            margin: 0;
-
-            &:first-child {
-                white-space: nowrap;
-            }
-        }
-    }
-}
-</style>

package/src/documentation/data/CmdAccordionHelp.js

@@ -1,22 +0,0 @@
-export default [`<CmdAccordion :accordionData="2" toggleMode="multiple">
-    <template v-slot:accordionHeadline0>
-        <h4>Accordion 1</h4>
-    </template>
-    <template v-slot:accordionContent0>
-        <p>
-            Content for accordion 1
-        </p>
-    </template>
-    <template v-slot:accordionHeadline1>
-        <h4>Accordion 2</h4>
-    </template>
-    <template v-slot:accordionContent1>
-        <p>
-            Content for accordion 2
-        </p>
-    </template>
-</CmdAccordion>`,
-`<CmdAccordion 
-  :accordionData="accordion.accordionData1" 
-/>`
-]

package/src/documentation/data/CmdAddressDataHelp.js

@@ -1,17 +0,0 @@
-export default [`<CmdAddressData
-    :addressData="addressData"
-    :linkGoogleMaps="true"
-    :cmdCustomHeadline="{ 
-        headlineText: 'Address', 
-        headlineLevel: 5
-    }"
-/>`,
-`<CmdAddressData
-    :addressData="addressData"
-    :linkGoogleMaps="false"
-    :cmdCustomHeadline="{ 
-        headlineText: 'Address', 
-        headlineLevel: 5
-    }"
-    :showLabels="false"
-/>`]

package/src/documentation/data/CmdBackToTopButtonHelp.js

@@ -1,3 +0,0 @@
-export default [
-`<CmdBackToTopButton />`
-]

package/src/documentation/data/CmdBankAccountDataHelp.js

@@ -1,8 +0,0 @@
-export default [`<CmdBankAccountData
-    :account-data="bankAccountData"
-    :allow-copy-by-click="true"
-    :cmd-custom-headline="{ 
-      headlineText: 'Bank Account', 
-      headlineLevel: 5
-    }"
-/>`]

package/src/documentation/data/CmdBoxHelp.js

@@ -1,45 +0,0 @@
-export default [`<CmdBox
-:cmdCustomHeadline="{
-    headlineText: 'Headline given by property',
-    headlineLevel: 5
-}"
-textBody="Content given by property"
-/>`,
-`<CmdBox
-:cmdCustomHeadline="{
-  headlineText: 'Headline given by property',
-  headlineLevel: 5
-}"
-textBody="Content given by property"
-:collapsible="true"
-/>`,
-`<CmdBox :useSlot="true">
-    <template v-slot:header>
-        <h5>
-          Headline given by slot
-        </h5>
-    </template>
-    <template v-slot:body>
-        <p class="padding">
-            Content given by slot
-        </p>
-    </template>
-    <template v-slot:footer>
-        <p>
-            Footer given by slot
-        </p>
-    </template>
-</CmdBox>`,
-`<CmdBox 
-  boxType="product" 
-  :product="boxesProduct[0]" 
-  :cmdCustomHeadline="{ headlineLevel: 4}" 
-  @click.prevent="clickedOnProduct"
-/>`,
-`<CmdBox 
-boxType="user" 
-:user="boxesUser[2]" 
-:cmdCustomHeadline="{ 
-  headlineLevel: 4
-}"/>`
-]

package/src/documentation/data/CmdBoxSiteSearchHelp.js

@@ -1,11 +0,0 @@
-export default [
-`<CmdBoxSiteSearch
-    text-legend="Legend"
-    :results="420"
-    :listOfFilters="listOfFilters"
-    :cmdCustomHeadline="{
-        headlineText: 'Search site',
-        headlineLevel: 5
-    }"
-/>`
-]

package/src/documentation/data/CmdBreadcrumbsHelp.js

@@ -1,6 +0,0 @@
-export default [
-`<CmdBreadcrumbs 
-    :breadcrumbLinks="breadcrumbs" 
-    breadcrumbLabel="You are here:"
-/>`
-]

package/src/documentation/data/CmdCompanyLogoHelp.js

@@ -1,8 +0,0 @@
-export default [
-`<CmdCompanyLogo 
-    :link="companyLogoData.link" 
-    altText="CoManD Logo" 
-    :pathDefaultLogo="require('@/assets/images/logo.svg')" 
-    :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
-/>`
-]

package/src/documentation/data/CmdCookieDisclaimerHelp.js

@@ -1,9 +0,0 @@
-export default [
-`<CmdCookieDisclaimer 
-    headline="Usage of cookies on this web site"
-    :cookieOptions="cookieDisclaimerData"
-    buttonLabelAcceptAllCookies="Accept all cookies"
-    buttonLabelAcceptCurrentSettings="Accept current settings"
-    @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
-/>`
-]

package/src/documentation/data/CmdCopyrightInformation.js

@@ -1,2 +0,0 @@
-export default
-`<CmdCopyrightInformation/>`

package/src/documentation/data/CmdCustomHeadlineHelp.js

@@ -1,8 +0,0 @@
-export default [
-`<CmdCustomHeadline 
-    headlineText="Headline level 1"  
-    :headlineLevel="1" 
-    preHeadlineText="Pre-headline text" 
-    iconClass="icon-user-profile" 
-/>`
-]

package/src/documentation/data/CmdFakeSelectHelp.js

@@ -1,60 +0,0 @@
-export default [
-`<CmdFakeSelect
-    labelText="Labeltext for default selectbox:"
-    :status="formElementStatus"
-    :selectData="fakeSelectOptions"
-    v-model="fakeSelectDefault"
-    required
-    defaultOptionName="Select an option:"
-/>`,
-`<CmdFakeSelect
-    labelText="Selectbox with icons:"
-    :status="formElementStatus"
-    :selectData="fakeSelectOptionsWithIcons"
-    v-model="fakeSelectDefaultWithIcons"
-    defaultOptionName="Select an option:"
-/>`,
-`<CmdFakeSelect
-    labelText="Selectbox with checkboxes:"
-    :status="formElementStatus"
-    :selectData="fakeSelectOptions"
-    v-model="fakeSelectCheckbox"
-    defaultOptionName="Options:"
-    :required="true"
-    id="selectbox-with-checkboxes"
-    type="checkboxOptions"
-    :useCustomTooltip="true"
-/>`,
-`<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>`,
-`<CmdFakeSelect
-    labelText="Selectbox with country flags:"
-    :status="formElementStatus"
-    :selectData="fakeSelectCountries"
-    v-model="fakeSelectCountry"
-    defaultOptionName="Select country:"
-    type="country"
-/>`,
-`<CmdFakeSelect
-    labelText="Selectbox with colors:"
-    :status="formElementStatus"
-    :selectData="fakeSelectColors"
-    v-model="fakeSelectColor"
-    required="required"
-    type="color"
-/>`
-]

package/src/documentation/data/CmdFancyBoxHelp.js

@@ -1,7 +0,0 @@
-export default [
-`<CmdFancyBox 
-  :allowEscapeKey="false"
-  >
-    Content
-</CmdFancyBox>`
-]

package/src/documentation/data/CmdFooterNavigationHelp.js

@@ -1,5 +0,0 @@
-export default
-`<CmdFooterNavigation 
-  :footerNavigation="footerNavigationData" 
-  headline="Links" 
-/>`

package/src/documentation/data/CmdFormElementHelp.js

@@ -1,189 +0,0 @@
-export default [
-`<CmdFormElement
-    labelText="Input (type text):"
-    element="input"
-    type="text"
-    :status="formElementStatus"
-    placeholder="Type in text"
-    tooltipText="This is a tooltip"
-    :useCustomTooltip="false"
-/>`,
-`<CmdFormElement
-    labelText="Input (type number):"
-    element="input"
-    type="number"
-    :status="formElementStatus"
-    placeholder="Type in number"
-    tooltipText="This is a tooltip"
-    :useCustomTooltip="false"
-/>`,
-`<CmdFormElement
-    labelText="Input (type color):"
-    element="input"
-    type="color"
-    :status="formElementStatus"
-    tooltipText="This is a tooltip"
-    :useCustomTooltip="false"
-/>`,
-`<CmdFormElement
-    labelText="Input (type date):"
-    element="input"
-    type="date"
-    :status="formElementStatus"
-    tooltipText="This is a tooltip"
-    :useCustomTooltip="false"
-/>`,
-`<CmdFormElement
-    labelText="Input (type datetime-local):"
-    element="input"
-    type="datetime-local"
-    :status="formElementStatus"
-    tooltipText="This is a tooltip"
-    :useCustomTooltip="false"
-/>`,
-`<CmdFormElement
-    labelText="Input (type password):"
-    element="input"
-    type="password"
-    :status="formElementStatus"
-    placeholder="Type in password"
-    tooltipText="This is a tooltip"
-    :useCustomTooltip="false"
-/>`,
-`<CmdFormElement
-    labelText="Input (type file):"
-    element="input"
-    type="file"
-    :status="formElementStatus"
-    tooltipText="This is a tooltip"
-    :useCustomTooltip="false"
-/>`,
-`<CmdFormElement
-    labelText="Input (type range):"
-    element="input"
-    type="range"
-    :status="formElementStatus"
-    :useCustomTooltip="false"
-    v-model="range"
-/>`,
-`<CmdFormElement
-    :nativeButton="{ 
-        text: 'Submit', 
-        icon: {
-          iconClass: 'icon-edit', 
-          show: true
-        }
-    }"
-    element="button"
-    type="submit"
-    :status="formElementStatus"
-    :useCustomTooltip="false"
-/>`,
-`<CmdFormElement
-    :nativeButton="{ 
-      icon: {
-        iconClass: 'icon-edit', 
-        show: true, 
-        tooltip: 'I am a tooltip'
-      }
-    }"
-    element="button"
-    type="button"
-    :status="formElementStatus"
-    :useCustomTooltip="false"
-/>`,
-`<CmdFormElement
-    labelText="Input (type checkbox)"
-    element="input"
-    type="checkbox"
-    :status="formElementStatus"
-    tooltipText="This is a tooltip"
-    :useCustomTooltip="false"
-    v-model="checkbox"
-/>`,
-`<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"
-/>`,
-`<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"
-/>`,
-`<CmdFormElement
-    labelText="Input #1 (type radio)"
-    element="input"
-    type="radio"
-    :replace-input-type="true"
-    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"
-    :replace-input-type="true"
-    id="example-radio2"
-    :status="formElementStatus"
-    tooltipText="This is a tooltip"
-    :useCustomTooltip="false"
-    v-model="radio"
-    inputValue="Radiobutton2"
-/>`,
-`<CmdFormElement
-    labelText="Selectbox"
-    element="select"
-    required="required"
-    :status="formElementStatus"
-    v-model="select"
-    :selectOptions="selectOptions"
-/>`,
-`<CmdFormElement
-    labelText="Datalist:"
-    element="input"
-    type="text"
-    :status="formElementStatus"
-    placeholder="Type in option"
-    :datalist="datalist"
-    tooltipText="This is a tooltip"
-/>`,
-`<CmdFormElement
-    labelText="Textarea:"
-    element="textarea"
-    :status="formElementStatus"
-    placeholder="Type in text"
-    tooltipText="This is a tooltip"
-    v-model="textarea"
-/>`
-]

package/src/documentation/data/CmdFormFiltersHelp.js

@@ -1,6 +0,0 @@
-export default [
-`<CmdFormFilters
-  v-model:selectedOptions="fakeSelectFilterOptions"
-  :selectedOptionsName="getOptionName"
-/>`
-]

package/src/documentation/data/CmdFormHelp.js

@@ -1,10 +0,0 @@
-export default [
-`<CmdForm
-    :use-fieldset="true"
-    novalidate="novalidate"
-    text-legend="Legend">
-    <!-- begin slot-content -->
-    Form content (put form elements here)
-    <!-- end slot-content -->
-</CmdForm>`
-]

package/src/documentation/data/CmdGoogleMapsHelp.js

@@ -1,5 +0,0 @@
-export default [
-`<CmdGoogleMaps 
-  :address="coordinates(addressData.address)"
-/>`
-]

package/src/documentation/data/CmdImageGalleryHelp.js

@@ -1,5 +0,0 @@
-export default [
-`<CmdImageGallery 
-  :images="imageGallery"
-/>`
-]

package/src/documentation/data/CmdImageZoomHelp.js

@@ -1,6 +0,0 @@
-export default [
-`<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" 
-/>`
-]

package/src/documentation/data/CmdListOfLinksHelp.js

@@ -1,24 +0,0 @@
-export default [
-`<CmdListOfLinks 
-    :links="listOfLinks" 
-    :cmdCustomHeadline="{
-      text: 'Links', 
-      level: 5
-    }" 
-/>`,
-`<CmdListOfLinks 
-    :links="listOfLinks" 
-    orientation="horizontal" 
-    :cmdCustomHeadline="{
-        headlineText: 'Links', 
-        headlineLevel: 5
-    }" 
-/>`,
-`<CmdListOfLinks 
-    :links="listOfLinks" 
-    :styleAsBox="true" 
-    :cmdCustomHeadline="{
-      headlineText: 'Links', 
-      headlineLevel: 5
-    }" />`
-]

package/src/documentation/data/CmdLoginFormHelp.js

@@ -1,6 +0,0 @@
-export default [
-`<CmdLoginForm 
-  v-model="loginData" 
-  v-focus
-/>`
-]

package/src/documentation/data/CmdMainNavigationHelp.js

@@ -1,7 +0,0 @@
-export default [
-`<CmdMainNavigation 
-  :stretchMainItems="false"
-  :persistOnMobile="false"
-  :navigationEntries="navigationEntries"
-/>`
-]

package/src/documentation/data/CmdMultistepFormProgressBarHelp.js

@@ -1,6 +0,0 @@
-export default [
-`<CmdMultistepFormProgressBar
-    :multisteps="multistepFormProgressBar"
-    @click="showPageMultistep = $event.index + 1"
-/>`
-]

package/src/documentation/data/CmdOpeningHoursHelp.js

@@ -1,10 +0,0 @@
-export default [
-`<CmdOpeningHours 
-    :openingHours="openingHoursData" 
-    :closed="true" 
-    headline="Opening hours"
-    textOpenClosed="Closed right now!"
-    textHolidaysClosed="Closed on holidays"
-    textMiscInfo="Miscellaneous information" 
-/>`
-]

package/src/documentation/data/CmdPagerHelp.js

@@ -1,7 +0,0 @@
-export default [
-`<CmdPager
-    :items="pagerData.length"
-    :itemsPerPage="1"
-    @click="showPagePager = $event"
-/>`
-]

package/src/documentation/data/CmdProgressBarHelp.js

@@ -1,13 +0,0 @@
-export default [
-`<CmdProgressBar
-    labelText="Progress Bar (with optional output):"
-    id="progress-bar"
-    max="100"
-/>`,
-`<CmdProgressBar
-    labelText="Progress Bar without output:"
-    id="progress-bar"
-    max="100"
-    :showLoadingStatus="false"
- />`
-]

package/src/documentation/data/CmdShareButtonsHelp.js

@@ -1,13 +0,0 @@
-export default [
-`<CmdShareButtons
-  :share-buttons="shareButtonsJson"
-  :append-page="false"
-/>`,
-`<CmdShareButtons
-    :share-buttons="shareButtonsPage"
-    page="some url"
-/>`,
-`<CmdShareButtons
-  :share-buttons="shareButtonsPage"
-/>`
-]