comand-component-library 4.2.43 → 4.2.45

package/src/components/CmdCodeOutput.vue

@@ -0,0 +1,106 @@
+
+<template>
+    <div :class="['cmd-code-output', {box : styleAsBox}]" style="max-height: maxHeight">
+        <a v-if="allowCopyByClick" href="#" @click.prevent="copyToClipboard()" :title="cmdIcon.tooltip">
+            <!-- begin CmdIcon -->
+            <CmdIcon :iconClass="cmdIcon.iconClass" :type="cmdIcon.iconType"/>
+            <!-- end CmdIcon -->
+        </a>
+        <!-- begin preformatted code (keep in one line) -->
+        <pre v-if="preformatted"><code ref="code">
+            <slot></slot>
+        </code></pre>
+        <!-- end preformatted code (keep in one line) -->
+
+        <!-- begin unformatted code -->
+        <code v-else ref="code">
+            <!-- begin slot-content -->
+            <slot></slot>
+            <!-- end slot-content -->
+        </code>
+        <!-- end unformatted code -->
+    </div>
+</template>
+
+<script>
+import { ref } from "vue"
+
+export default {
+    name: "CmdCodeOutput",
+    props: {
+        /**
+         * preformat code (keeps spaces, tabs, and line breaks exactly as written)
+         *
+         * @affectsStyling: true
+         */
+         preformatted: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * style component like a box
+         *
+         * @affectsStyling: true
+         */
+         styleAsBox: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * enable if data can be copied by click on icon
+         */
+        allowCopyByClick: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * set max-height (content will scroll vertically)
+         */
+         maxHeight: {
+            type: String,
+            default: "20rem"
+        },
+        /**
+         * icon 'copy'
+         *
+         * @requiredForAccessibility: partial
+         */
+        cmdIcon: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-file-copy",
+                    tooltip: "Copy data to clipboard!",
+                    iconType: "auto"
+                }
+            }
+        }
+    },
+    methods: {
+        copyToClipboard() {
+            // get data, remove spaces and copy to clipboard
+            const code = this.$refs.code
+            const output = code.innerText.replace(/\t/g, '    ')
+            navigator.clipboard.writeText(output)
+            alert(output + " was copied to clipboard")
+        }
+    }
+}
+</script>
+
+<style>
+    .cmd-code-output {
+        overflow-y: scroll;
+
+        &.box {
+            padding-right: calc(var(--default-padding) * 3);
+
+        }
+
+        > a {
+            position: absolute;
+            top: var(--default-padding);
+            right: var(--default-padding);
+        }
+    }
+</style>

package/src/components/CmdMultistepFormProgressBar.vue

@@ -1,6 +1,6 @@
 <template>
     <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap, 'full-width': fullWidth}]">
-        <li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
+        <li v-for="(step, index) in multisteps" :key="index">
             <!-- begin CmdLink -->
             <CmdLink
                 :linkType="step.linkType"
@@ -243,7 +243,7 @@ export default {
             }
         }
 
-        &.active {
+        .active, .router-link-exact-active {
             a {
                 background: var(--button-primary-background-highlighted);
             }

package/src/index.js

@@ -6,6 +6,7 @@ export { default as CmdBasicForm } from '@/components/CmdBasicForm.vue'
 export { default as CmdBox } from '@/components/CmdBox.vue'
 export { default as CmdBoxWrapper } from '@/components/CmdBoxWrapper.vue'
 export { default as CmdBreadcrumbs } from '@/components/CmdBreadcrumbs.vue'
+export { default as CmdCodeOutput } from '@/components/CmdCodeOutput.vue'
 export { default as CmdCompanyLogo } from '@/components/CmdCompanyLogo.vue'
 export { default as CmdContainer } from '@/components/CmdContainer.vue'
 export { default as CmdCookieDisclaimer } from '@/components/CmdCookieDisclaimer.vue'