comand-component-library 3.1.45 → 3.1.46

package/src/documentation/components/ComponentProperties.vue

@@ -0,0 +1,237 @@
+<script>
+function getPropertyTypeName(type) {
+    if(Array.isArray(type)) {
+        return type.map(t => t.name).join(", ")
+    }
+    return type.name
+}
+
+function getPropertyDefault(defaultValue) {
+    if(typeof defaultValue === "function") {
+        return defaultValue()
+    }
+    return defaultValue
+}
+
+function getIcon(value) {
+    if (value === "partial") {
+        return "icon-exclamation-circle partial"
+    }
+    return value ? "icon-check-circle" : "icon-cancel-circle not-required";
+}
+
+function getTooltip(value) {
+    if (value === "partial") {
+        return "Parts of this property are required"
+    }
+    return value ? "Property is required for component" : "Property is not required for component"
+}
+
+function getPropertyDescription(propertyDescriptions, propertyName) {
+    if(propertyDescriptions) {
+        if(propertyDescriptions[propertyName]?.comments?.length) {
+            return propertyDescriptions[propertyName].comments.join("<br />")
+        }
+    }
+    return ""
+}
+
+function hasAnnotation(propertyDescriptions, propertyName, annotationName) {
+    return propertyDescriptions?.[propertyName]?.annotations?.[annotationName]?.length
+}
+
+// function hasAnnotationValue(propertyDescriptions, propertyName, annotationName, annotationValue) {
+//     return getAnnotationValues(propertyDescriptions, propertyName, annotationName).includes(annotationValue)
+// }
+
+function getAnnotationValues(propertyDescriptions, propertyName, annotationName) {
+    return (propertyDescriptions?.[propertyName]?.annotations?.[annotationName] || []).join("").split(/\s*,\s*/)
+}
+
+function getAnnotationValue(propertyDescriptions, propertyName, annotationName) {
+    const values = propertyDescriptions?.[propertyName]?.annotations?.[annotationName] || []
+    if (values.length) {
+        return values[0]
+    }
+    return null
+}
+
+// function getAnnotation(propertyDescriptions, propertyName, annotationName) {
+//     if(propertyDescriptions) {
+//         if(propertyDescriptions[propertyName]?.annotations?.[annotationName]?.length) {
+//             return propertyDescriptions[propertyName].annotations[annotationName].join("").split(/\s*,\s*/)
+//         }
+//     }
+//     return []
+// }
+
+function getPropertyStructure(propertyStructures, propertyName) {
+    if(propertyStructures?.[propertyName]) {
+        return JSON.stringify(propertyStructures?.[propertyName], null, 2)
+    }
+    return "-"
+}
+
+export {
+    getPropertyTypeName,
+    getPropertyDefault,
+    getIcon,
+    getTooltip,
+    getPropertyDescription,
+    getPropertyStructure
+}
+</script>
+
+<script setup>
+import { defineProps, computed } from "vue"
+import {capitalize} from "../../utils/string"
+import componentsDescription from "../data/componentsDescription.json"
+
+const props = defineProps(
+    {
+        properties: {
+            type: Object,
+            required: true
+        },
+        propertyDescriptions: {
+            type: Object,
+            required: false
+        },
+        propertyStructures: {
+            type: Object,
+            required: false
+        }
+    }
+)
+
+const sortedProperties = computed(
+    function() {
+        return Object.entries(props.properties).sort((a, b) => a[0].localeCompare(b[0]))
+    }
+)
+
+function resolveComponentName(name) {
+    if (name.slice(0, 3) === "cmd" && name.length > 3) {
+        const componentName = capitalize(name)
+        if (componentsDescription[componentName]) {
+            return componentName
+        }
+        const componentNameParts = componentName.split(/(?<=[a-z])(?=[A-Z])/)
+        for (let i = componentNameParts.length - 2; i > 2; i--) {
+            const componentNameCandidate = componentNameParts.slice(0, i).join("")
+            if (componentsDescription[componentNameCandidate]) {
+                return componentNameCandidate
+            }
+        }
+    }
+    return null
+}
+
+function createComponentLink(name) {
+    // check if property.name starts with cmd-namespace-prefix
+    return !!resolveComponentName(name)
+}
+
+function createDetailLink(type) {
+    // check if property-type is array or object
+    if(Array.isArray(type)) {
+        return type.some(t => t.name === "Array" || t.name === "Object")
+    }
+    return type.name === "Array" || type.name === "Object"
+}
+</script>
+
+<template>
+    <h2>Properties</h2>
+    <table class="table-properties">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Required</th>
+                <th>Structure</th>
+                <th>Default</th>
+                <th>Req. for Accessibility</th>
+                <th>Allowed Values</th>
+                <th>Affects Styling</th>
+                <th>Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="([propertyName, property]) in sortedProperties" :key="propertyName">
+                <td>
+                    <template v-if="createComponentLink(propertyName)">
+                        <router-link :to="{name: resolveComponentName(propertyName), params: { tab: 'properties'}}" title="Open help page for this component">{{ propertyName }}</router-link>
+                    </template>
+                    <template v-else-if="createDetailLink(property.type)">
+                        <a :href="'#' + propertyName">{{ propertyName }}</a>
+                    </template>
+                    <template v-else>
+                        {{ propertyName }}
+                    </template>
+                </td>
+                <td>
+                    {{ getPropertyTypeName(property.type) }}
+                </td>
+                <td class="contains-status-icons">
+                    <span :class="getIcon(property.required)" :title="getTooltip(property.required)"></span>
+                </td>
+                <td>
+                    <pre v-if="getPropertyStructure(props.propertyStructures, propertyName)">{{ getPropertyStructure(props.propertyStructures, propertyName) }}</pre>
+                </td>
+                <td>
+                    <pre v-if="getPropertyDefault(property.default)">{{getPropertyDefault(property.default) }}</pre>
+                    <template v-else>
+                        <em>(none)</em>
+                    </template>
+                </td>
+                <td class="contains-status-icons">
+                    <span :class="getIcon(getAnnotationValue(props.propertyDescriptions, propertyName, 'requiredForAccessibility'))" :title="getTooltip(property.required)"></span>
+                </td>
+                <td class="allowed-values">
+                    <ul v-if="hasAnnotation(props.propertyDescriptions, propertyName, 'allowedValues')">
+                        <li v-for="value in getAnnotationValues(props.propertyDescriptions, propertyName, 'allowedValues')" :key="value">{{ value }}</li>
+                    </ul>
+                    <em v-else>
+                        (all)
+                    </em>
+                </td>
+                <td class="contains-status-icons">
+                    <span :class="getIcon(hasAnnotation(props.propertyDescriptions, propertyName, 'affectsStyling'))" :title="getTooltip(property.required)"></span>
+                </td>
+                <td v-html="getPropertyDescription(props.propertyDescriptions, propertyName)">
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<style lang="scss">
+    .table-properties {
+        td {
+            text-align: left;
+
+            &.contains-status-icons {
+                text-align: center;
+
+                span[class*="icon"] {
+                    color: var(--success-color);
+
+                    &.not-required {
+                        color: var(--error-color);
+                    }
+
+                    &.partial {
+                        color: var(--warning-color);
+                    }
+                }
+            }
+
+            &.allowed-values {
+                ul {
+                    margin: 0;
+                }
+            }
+        }
+    }
+</style>

package/src/documentation/components/ExampleSectionWrapper.vue

@@ -0,0 +1,46 @@
+<template>
+    <section class="example-section">
+        <a :id="getExampleId()"></a>
+        <!-- begin cmd-custom-headline -->
+        <CmdCustomHeadline
+            :preHeadlineText="getPreHeadlineText()"
+            :headlineText="headlineText"
+            :headlineLevel="3"
+        />
+        <!-- end cmd-custom-headline -->
+        <slot></slot>
+    </section>
+</template>
+
+<script>
+// import functions
+import {currentSequenceValue, nextSequenceValue} from "../../utils/globalSequence";
+
+// import components
+import CmdCustomHeadline from "../../components/CmdCustomHeadline"
+
+export default {
+    name: "ExampleSectionWrapper",
+    components: {
+        CmdCustomHeadline
+    },
+    props: {
+        componentName: {
+            type: String,
+            required: true
+        },
+        headlineText: {
+            type: String,
+            required: true
+        }
+    },
+    methods: {
+         getExampleId() {
+            return "example" + nextSequenceValue(this.componentName)
+        },
+         getPreHeadlineText() {
+            return "Example #" + currentSequenceValue(this.componentName)
+        }
+    }
+}
+</script>

package/src/documentation/components/ViewCodeData.vue

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

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

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

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

package/src/documentation/data/CmdBankAccountDataHelp.js

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

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

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

package/src/documentation/data/CmdBreadcrumbsHelp.js

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

package/src/documentation/data/CmdCompanyLogoHelp.js

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

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

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

package/src/documentation/data/CmdCustomHeadlineHelp.js

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

package/src/documentation/data/CmdFakeSelectHelp.js

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

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

package/src/documentation/data/CmdFooterNavigationHelp.js

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