comand-component-library 3.1.53 → 3.1.54

package/src/components/CmdAccordion.vue

@@ -1,253 +0,0 @@
-<template>
-    <div :class="['cmd-accordion flex-container vertical', {'no-gap' : !gapBetween, 'active' : active}]">
-        <div v-for="(accordionContent, index) in accordion" :key="index">
-            <a v-if="!useCustomHeader" href="#" :title="accordionContent.status ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
-                <!-- begin slot for headline -->
-                <slot :name="'accordionHeadline' + index">
-                    <!-- begin CmdCustomHeadline -->
-                    <CmdCustomHeadline
-                        v-if="accordionContent.headlineText && accordionContent.headlineLevel"
-                        :headlineText="accordionContent.headlineText"
-                        :headlineLevel="accordionContent.headlineLevel"
-                        :iconClass="accordionContent.iconClass"
-                    />
-                    <!-- end CmdCustomHeadline -->
-                </slot>
-                <!-- end slot for headline -->
-                <span class="toggle-icon" :class="[accordionContent.status ? iconOpen.iconClass : iconClosed.iconClass]"></span>
-            </a>
-            <!-- begin accordion-content -->
-            <transition :name="toggleTransition">
-                <div class="accordion-content" v-if="accordionContent.status" aria-expanded="true">
-                    <slot :name="'accordionContent' + index">
-                        <p>{{ accordionContent.content }}</p>
-                    </slot>
-                </div>
-            </transition>
-            <!-- end accordion-content -->
-        </div>
-    </div>
-</template>
-
-<script>
-// import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
-
-export default {
-    name: "CmdAccordion",
-    components: {
-        CmdCustomHeadline
-    },
-    data() {
-        return {
-            accordion: [],
-            active: false
-        }
-    },
-    props: {
-        /**
-         * properties for CmdCustomHeadline-component
-         */
-        cmdCustomHeadline: {
-            type: Object,
-            required: false
-        },
-        /**
-         * use transition to expand accordion-content
-         */
-        useTransition: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * toggle if mode if only one accordion can be opened (or multiple ones)
-         *
-         * @allowedValues: single, multiple
-         */
-        toggleMode: {
-            type: String,
-            default: "single"
-        },
-        /**
-         * activate if you want to use a customized header
-         */
-        useCustomHeader: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * set if a gap should be shown between multiple accordions
-         */
-        gapBetween: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * all information about the contents in all shown accordions
-         */
-        accordionData: {
-            type: [Array, Number],
-            required: true
-        },
-        /**
-         * icon to expand an accordion
-         *
-         * @requiredForAccessibility: partial
-         */
-        iconOpen: {
-            type: Object,
-            default: function() {
-                return {
-                    iconClass: "icon-single-arrow-up",
-                    tooltip: "Close content"
-                }
-            },
-        },
-        /**
-         * icon to collapse an accordion
-         *
-         * @requiredForAccessibility: partial
-         */
-        iconClosed: {
-            type: Object,
-            default: function() {
-                return {
-                    iconClass: "icon-single-arrow-down",
-                    tooltip: "Show content"
-                }
-            }
-        }
-    },
-    computed: {
-        toggleTransition() {
-            if(this.useTransition) {
-                return "fade"
-            }
-            return ""
-        }
-    },
-    methods: {
-        toggleContentVisibility(accordionContent) {
-            accordionContent.status = !accordionContent.status
-            this.active = !this.active
-
-            if (this.toggleMode === 'single' || this.toggleMode === '') {
-                for (let i = 0; i < this.accordion.length; i++) {
-                    if (this.accordion[i] !== accordionContent) {
-                        this.accordion[i].status = false;
-                    }
-                }
-            }
-        },
-        /**
-         * method will be called from outside by $refs
-         */
-        openAll() {
-            for (let i = 0; i < this.accordion.length; i++) {
-                    this.accordion[i].status = true;
-            }
-        },
-        /**
-         * method will be called from outside by $refs
-         */
-        closeAll() {
-            for (let i = 0; i < this.accordion.length; i++) {
-                this.accordion[i].status = false;
-            }
-        }
-    },
-    watch: {
-        accordionData: {
-            handler() {
-                if (typeof this.accordionData === 'number') {
-                    this.accordion = []
-                    for (let i = 0; i < this.accordionData; i++) {
-                        this.accordion.push({status: false})
-                    }
-                } else {
-                    // create copy of given data and assign to data-property
-                    this.accordion = JSON.parse(JSON.stringify(this.accordionData))
-                }
-            },
-            immediate: true
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-/* begin cmd-accordion ---------------------------------------------------------------------------------------- */
-.cmd-accordion {
-    > div {
-        > a, > div:first-child {
-            display: flex;
-            align-items: center;
-            gap: var(--grid-gap);
-            border-radius: var(--border-radius);
-            padding: calc(var(--default-padding) / 2) var(--default-padding);
-            border: var(--default-border);
-            background: var(--default-background-color);
-            text-decoration: none;
-
-            &:hover, &:active, &:focus, &.active {
-                background: var(--primary-color);
-                border-color: var(--primary-color);
-
-                & + .accordion-content {
-                    border-color: var(--primary-color);
-                }
-
-                * {
-                    color: var(--pure-white);
-                }
-            }
-
-            &:first-child {
-                margin: 0;
-            }
-
-            > h2, > h3, > h4, > h5, > h6, .cmd-custom-headline {
-                margin-bottom: 0;
-                display: flex;
-                align-items: center;
-            }
-
-            label, .label {
-                margin-top: 0;
-            }
-
-            & + .accordion-content {
-                border-top: 0;
-            }
-
-            > span, > a {
-                font-size: inherit;
-
-                &[class*="icon-"] {
-                    margin-left: auto;
-                    font-size: 1rem;
-                }
-            }
-        }
-
-        .accordion-content {
-            padding: var(--default-padding);
-            border: var(--default-border);
-            border-bottom-left-radius: var(--border-radius);
-            border-bottom-right-radius: var(--border-radius);
-            background: var(--pure-white);
-
-            &.active {
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-
-            > *:last-child {
-                margin-bottom: 0;
-            }
-        }
-    }
-}
-
-/* end cmd-accordion ------------------------------------------------------------------------------------------ */
-</style>

package/src/documentation/commonProps.js

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

package/src/documentation/components/ComponentCode.vue

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

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

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