comand-component-library 3.1.43 → 3.1.46

package/src/components/CmdWidthLimitationWrapper.vue

@@ -2,11 +2,15 @@
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
         <component v-if="innerWrapper" :is="innerComponent" :class="setInnerClass">
             <a v-if="anchorId" :id="anchorId"></a>
+            <!-- begin slot-content -->
             <slot></slot>
+            <!-- end slot-content -->
         </component>
         <template v-else>
+            <!-- begin slot-content -->
             <a v-if="anchorId" :id="anchorId"></a>
             <slot></slot>
+            <!-- end slot-content -->
         </template>
     </div>
 </template>
@@ -17,6 +21,8 @@ export default {
     props: {
         /**
          * set a html-tag as inner tag
+         *
+         * @allowedValues: section, div
          */
         innerComponent: {
             type: String,
@@ -26,16 +32,17 @@ export default {
             }
         },
         /**
-         * activate if the inner content should be wrapped in inner component tag
+         * activate if the inner content should be wrapped in inner component tag (recommended)
          *
          * (if deactivated, content will be directly placed inside cmd-width-limitation-wrapper)
+         *
          */
         innerWrapper: {
             type: Boolean,
             default: true
         },
         /**
-         * activate if wrapper (and its content) should be sticky (=postion remains the same if content below is scrolled)
+         * activate if wrapper (and its content) should be sticky (=position remains the same if content below is scrolled)
          *
          * i.e. use for site-header
          *
@@ -104,10 +111,6 @@ export default {
         top: 0;
     }
 
-    &#site-footer {
-
-    }
-
     &#site-footer {
         padding: var(--grid-gap) 0;
         border-top: var(--default-border);

package/src/composables/event.js

@@ -0,0 +1,8 @@
+import {onMounted, onUnmounted} from "vue"
+
+function useEventListener(target, event, listener) {
+    onMounted(() => target.addEventListener(event, listener))
+    onUnmounted(() => target.removeEventListener(event, listener))
+}
+
+export {useEventListener}

package/src/composables/scrollspy.js

@@ -0,0 +1,52 @@
+import {reactive} from "vue"
+import {useEventListener} from "./event"
+import {getOffsetTop} from "../utils/dom"
+
+function toArray(items) {
+    if (items instanceof NodeList) {
+        return Array.from(items)
+    }
+    if (Array.isArray(items)) {
+        return items
+    }
+    return []
+}
+
+function buildItemList(itemSupplier, itemList) {
+    if (!itemList.length) {
+        const items = itemSupplier()
+        toArray(items).map((item, index) => {
+            const itemData = {
+                offsetTop: getOffsetTop(item)
+            }
+            if (index + 1 < items.length) {
+                itemData.height = getOffsetTop(items.item(index + 1)) - itemData.offsetTop
+            } else {
+                itemData.height = document.documentElement.scrollHeight - itemData.offsetTop
+            }
+            return itemData
+        }).forEach(item => itemList.push(item))
+    }
+}
+
+export function useScrollspy(itemSupplier, initialActiveItem = 0) {
+    const itemList = []
+    const scrollSpy = reactive({
+        activeItem: initialActiveItem,
+        reset() {
+            this.activeItem = 0
+            itemList.length = 0
+        }
+    })
+    useEventListener(window, "scroll", () => {
+        const sy = window.scrollY
+        buildItemList(itemSupplier, itemList)
+        for (let i = 0, c = itemList.length; i < c; i++) {
+            if (sy < itemList[i].offsetTop + itemList[i].height / 2) {
+                scrollSpy.activeItem = i
+                break
+            }
+        }
+    })
+    return scrollSpy
+}

package/src/directives/focus.js

@@ -0,0 +1,19 @@
+export default {
+    // el = real dom-element
+    mounted(el) {
+        // check if element is native input-element
+        if(el.tagName === "INPUT" || el.tagName === "SELECT" || el.tagName === "TEXTAREA") {
+            el.focus()
+        } else {
+            // check if component is used, which contains a native input-element
+            const innerInputElement = el.querySelector("input, select, textarea")
+            if(innerInputElement) {
+                innerInputElement.focus()
+            }
+            // no input-element found
+            else {
+                console.warn("No input-element for focus-directive on element " + el.tagName + " found!")
+            }
+        }
+    }
+}

package/src/directives/telephone.js

@@ -2,7 +2,7 @@ export default {
     // el = real dom-element
     // binding.value = value of v-directive
     mounted(el, binding) {
-        if (binding.value) {
+        if (binding.value && typeof binding.value === "string") {
             let regex = /[^\d]/g // match everything except all digits (and continue (/g) after first match is found)
             let phonenumber = binding.value.replace(/^\s*\+/, "00")
             el.href = "tel:" + phonenumber.replace(regex, "")

package/src/documentation/commonProps.js

@@ -0,0 +1,6 @@
+export default {
+    activeTab: {
+        type: Number,
+        default: 0
+    }
+}

package/src/documentation/components/ComponentCode.vue

@@ -0,0 +1,50 @@
+<template>
+    <pre :class="classLanguage"><code :class="classLanguage" v-html="codeFormatted"></code></pre>
+    <p v-if="codeCopied">Code was copied to clipboard!</p>
+    <a href="#" @click.prevent="copyToClipboard">
+        <span class="icon-duplicate-content"></span>
+        <span>Copy code</span>
+    </a>
+</template>
+
+<script>
+import Prism from "prismjs"
+import "prismjs/components/prism-json"
+
+export default {
+    name: "ComponentCode",
+    data() {
+        return {
+            codeCopied: false
+        }
+    },
+    props: {
+        code: {
+            type: [String, Object, Array],
+            required: true
+        },
+        language: {
+            type: String,
+            default: "markup"
+        }
+    },
+    computed: {
+        codeFormatted() {
+            let codeUnformatted = this.code
+            if(typeof this.code !== "string") {
+                codeUnformatted = JSON.stringify(codeUnformatted, null, 2)
+            }
+            return Prism.highlight(codeUnformatted, Prism.languages[this.language], this.language)
+        },
+        classLanguage() {
+            return "language-" + this.language
+        }
+    },
+    methods: {
+        copyToClipboard() {
+            navigator.clipboard.writeText(this.code)
+            this.codeCopied = true
+        }
+    }
+}
+</script>

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
+    }"
+/>`]