comand-component-library 3.1.45 → 3.1.46

package/src/components/CmdUploadForm.vue

@@ -1,15 +1,18 @@
 <template>
-    <fieldset :class="['my-sp-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
-        <h3 v-if="headline">{{ headline }}</h3>
+    <!-- begin advanced mode -->
+    <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
+        <!-- begin CmdCustomHeadline -->
+        <CmdCustomHeadline v-if="cmdCustomHeadline"
+                           v-bind="cmdCustomHeadline"
+        />
+        <!-- end CmdCustomHeadline -->
+
+        <!-- begin CmdSystemMessage -->
         <CmdSystemMessage
             v-if="systemMessageStatus && allSystemMessages.length"
-            :closeIcon="{ show: false }"
-            :status="systemMessageStatus"
-            :systemMessage="
-        allSystemMessages.length === 1
-          ? allSystemMessages[0]
-          : getMessage('cmduploadform.system_message.the_following_errors_occurred')
-      "
+            :iconClose="{ show: false }"
+            :validationStatus="systemMessageStatus"
+            :systemMessage="allSystemMessages.length === 1 ? allSystemMessages[0] : getMessage('cmduploadform.system_message.the_following_errors_occurred')"
         >
             <ul v-if="allSystemMessages.length > 1">
                 <li v-for="(systemMessage, index) in allSystemMessages" :key="index">
@@ -17,7 +20,9 @@
                 </li>
             </ul>
         </CmdSystemMessage>
-        <div :class="['box', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
+        <!-- end CmdSystemMessage -->
+
+        <div :class="['box drop-area', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
             <template v-if="!listOfFiles.length">
                 <h4 v-if="allowMultipleFileUploads">
                     {{ getMessage("cmduploadform.no_files_to_upload") }}
@@ -56,13 +61,13 @@
                                 </strong>
                             </span>
                             <span class="progressbar" v-if="uploadInitiated">
-                            <span>{{ getPercentage(totalUploadProgress) }}</span>
-                            <progress
-                                max="100"
-                                :value="totalUploadProgress"
-                                :title="totalBytesUploaded"
-                            ></progress>
-                          </span>
+                                <span>{{ getPercentage(totalUploadProgress) }}</span>
+                                <progress
+                                    max="100"
+                                    :value="totalUploadProgress"
+                                    :title="totalBytesUploaded"
+                                ></progress>
+                            </span>
                         </li>
                     </ul>
                     <hr/>
@@ -95,7 +100,7 @@
                         <template v-if="uploadInitiated && !uploadFile.error">
                         <span class="progressbar">
                             <span>{{ getPercentage(uploadFile.progress) }}</span>
-                              <!-- do not place inside progress-tag (will not be displayed then) -->
+                            <!-- do not place inside progress-tag (will not be displayed then) -->
                             <progress
                                 max="100"
                                 :value="uploadFile.progress"
@@ -131,14 +136,14 @@
                         {{ getMessage("cmduploadform.max_total_upload_size") }}
                     </dt>
                     <dd :class="['text-align-right', { error: totalSize > maxTotalUploadSize }]">
-                        {{ formatSize(this.maxTotalUploadSize) }}
+                        {{ formatSize(maxTotalUploadSize) }}
                     </dd>
                 </template>
                 <dt :class="{ error: errors.fileSize }">
                     {{ getMessage("cmduploadform.max_file_upload_size") }}
                 </dt>
                 <dd :class="['text-align-right', { error: errors.fileSize }]">
-                    {{ formatSize(this.maxFileUploadSize) }}
+                    {{ formatSize(maxFileUploadSize) }}
                 </dd>
                 <dt :class="{ error: errors.fileType }">
                     {{ getMessage("cmduploadform.allowed_file_types") }}
@@ -176,30 +181,21 @@
                     }}</span>
                 <span v-else>{{ getMessage("cmduploadform.labeltext.select_file") }}</span>
             </button>
-            <CmdFormElement
-                element="input"
-                type="file"
-                :labelText="getMessage('cmduploadform.labeltext.select_files')"
-                :disabled="uploadInitiated"
-                :multiple="allowMultipleFileUploads"
-                @change="filesSelected"
-            />
             <p v-if="enableDragAndDrop" :class="['text-drag-and-drop', { disabled: uploadInitiated }]">
                 <span>{{ getMessage("cmduploadform.or") }}</span>
                 <strong>
                     {{ getMessage("cmduploadform.drag_and_drop") }}
                     <template v-if="allowMultipleFileUploads && listOfFiles.length">
                         {{ getMessage("cmduploadform.additional") }}
-                    </template
-                    >
+                    </template>
                     <template v-if="!allowMultipleFileUploads && listOfFiles.length">
                         {{ getMessage("cmduploadform.new") }}
-                    </template
-                    >
+                    </template>
                     {{ getMessage("cmduploadform.files_to_this_area") }}
                 </strong>
             </p>
         </div>
+        <!-- begin CmdFormElement -->
         <CmdFormElement
             v-if="enableComment"
             element="textarea"
@@ -210,50 +206,109 @@
             :placeholder="getMessage('cmduploadform.placeholder.comment')"
             :status="commentStatusMessage ? 'error' : ''"
         />
+        <!-- end CmdFormElement -->
+
         <div class="button-wrapper no-flex">
             <button
                 :class="[
-          'button primary',
-          {
-            disabled:
-              listOfFiles.length === 0 ||
-              (maxTotalUploadSize > 0 && totalSize > maxTotalUploadSize) ||
-              uploadInitiated
-          }
-        ]"
+                    'button primary',
+                    {
+                        disabled:
+                        listOfFiles.length === 0 ||
+                        (maxTotalUploadSize > 0 && totalSize > maxTotalUploadSize) ||
+                        uploadInitiated
+                    }
+                ]"
                 :disabled="
-          listOfFiles.length === 0 ||
-            (maxTotalUploadSize > 0 && totalSize > maxTotalUploadSize) ||
-            uploadInitiated
-        "
+                    listOfFiles.length === 0 ||
+                    (maxTotalUploadSize > 0 && totalSize > maxTotalUploadSize) ||
+                    uploadInitiated
+                "
                 @click="uploadFiles"
             >
-        <span class="icon-upload"></span
-        ><span v-if="listOfFiles.length === 1 || !allowMultipleFileUploads">{{
-                    getMessage("cmduploadform.buttontext.upload_file")
-                }}</span>
+                <span class="icon-upload"></span>
+                <span v-if="listOfFiles.length === 1 || !allowMultipleFileUploads">
+                    {{ getMessage("cmduploadform.buttontext.upload_file") }}
+                </span>
                 <span v-else>{{ getMessage("cmduploadform.buttontext.upload_files") }}</span>
             </button>
             <button :class="['button', { disabled: listOfFiles.length === 0 }]" @click="cancel">
-        <span class="icon-cancel"></span
-        ><span>{{ getMessage("cmduploadform.buttontext.cancel") }}</span>
+                <span class="icon-cancel"></span>
+                <span>{{ getMessage("cmduploadform.buttontext.cancel") }}</span>
             </button>
         </div>
     </fieldset>
+    <!-- end advanced mode -->
+
+    <!-- begin simple mode -->
+    <a v-else href="#" @click.prevent="selectFiles" :class="['cmd-upload-form  drop-area', {'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
+        <span class="progressbar" v-if="uploadInitiated">
+            <span>{{ getPercentage(totalUploadProgress) }}</span>
+            <progress
+                max="100"
+                :value="totalUploadProgress"
+                :title="totalBytesUploaded">
+            </progress>
+        </span>
+
+        <!-- begin slot-content -->
+        <slot>
+            <template v-if="enableDragAndDrop">
+                <template v-if="fileTypeImage">
+                    <span>{{ getMessage("cmduploadform.select_image") }}</span>
+                    <span class="icon-image"></span>
+                </template>
+                <template v-else>
+                    <span>{{ getMessage("cmduploadform.select_file") }}</span>
+                    <span class="icon-file"></span>
+                </template>
+            </template>
+            <template v-else>
+                <span>{{ getMessage("cmduploadform.drag_and_drop_file_here") }}</span>
+                <span class="icon-drag-and-drop"></span>
+            </template>
+            <small>{{ getMessage("cmduploadform.max_upload_size") }} {{ formatSize(maxFileUploadSize) }}</small>
+            <small>{{ getMessage("cmduploadform.allowed_file_types") }} {{ allowedFileExtensions }}</small>
+        </slot>
+        <!-- end slot-content -->
+    </a>
+    <!-- end simple mode -->
+
+    <!-- begin CmdFormElement -->
+    <CmdFormElement
+        element="input"
+        type="file"
+        :labelText="getMessage('cmduploadform.labeltext.select_files')"
+        :disabled="uploadInitiated"
+        :multiple="allowMultipleFileUploads"
+        @change="filesSelected"
+        ref="formElement"
+    />
+    <!-- end CmdFormElement -->
 </template>
 
 <script>
+// import mixins
 import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdUploadForm/DefaultMessageProperties"
+
 import {getFileExtension} from "../utils/GetFileExtension.js"
 import axios from "axios"
 
+// import components
+import CmdCustomHeadline from "./CmdCustomHeadline"
 import CmdFormElement from "./CmdFormElement"
 import CmdSystemMessage from "./CmdSystemMessage"
 
-
 export default {
     name: "CmdUploadForm",
+    emits: ["click", "error", "upload-complete", "upload-file-success"],
+    mixins: [I18n, DefaultMessageProperties],
+    components: {
+        CmdCustomHeadline,
+        CmdFormElement,
+        CmdSystemMessage,
+    },
     data() {
         return {
             comment: "",
@@ -267,11 +322,6 @@ export default {
             errors: {}
         }
     },
-    mixins: [I18n, DefaultMessageProperties],
-    components: {
-        CmdSystemMessage,
-        CmdFormElement
-    },
     created() {
         // Set initial data for resetForm.
         this.resetForm.comment = this.presetComment
@@ -309,19 +359,29 @@ export default {
             type: Array,
             required: true
         },
+        /**
+         * activate if the comment given by the user should be mandatory
+         *
+         * enableComment-property must be set to true
+         */
         commentRequired: {
             type: Boolean,
             default: true
         },
+        /**
+         * show a message if mandatory comment-textarea is not filled
+         *
+         * enableComment-property and commentRequired-property must be set to true
+         */
         commentStatusMessage: {
             type: String,
             default: ""
         },
         /**
-         * set an optional headlien for the fieldset
+         * properties for CmdCustomHeadline-component
          */
-        headline: {
-            type: String,
+        cmdCustomHeadline: {
+            type: Object,
             required: false
         },
         /**
@@ -331,10 +391,22 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * enable if a comment should be possible to left by the user
+         */
         enableComment: {
             type: Boolean,
             default: true
         },
+        /**
+         * preset the comment-textarea
+         *
+         * enableComment-property must be set to true
+         */
+        presetComment: {
+            type: String,
+            default: ""
+        },
         /**
          * set to 0 if no maximum for total upload size should be set
          */
@@ -349,31 +421,37 @@ export default {
             type: Number,
             default: 10485760
         },
+        /**
+         * enable if more than file should be enabled to be selected for upload
+         */
         allowMultipleFileUploads: {
             type: Boolean,
             default: false
         },
-        presetComment: {
-            type: String,
-            default: ""
-        },
         /**
-         *   defines upload options if component handles upload itself
-         *   (componentHandlesUpload-property must be true)
+         * defines upload options if component handles upload itself
          *
-         *  Example:
-         *  <pre>
-         *       url: String,
-         *       filesParam: String,
-         *       additionalParams: {}
-         * </pre>
+         * componentHandlesUpload-property must be true
          */
         uploadOptions: {
             type: Object,
             required: false
+        },
+        /**
+         * activate to use full upload-form-style and -functionality
+         *
+         * @affectsStyling: true
+         */
+        advancedMode: {
+            type: Boolean,
+            default: true
         }
     },
     computed: {
+        fileTypeImage() {
+            return this.allowedFileExtensions.some(extension => extension.includes('jpg'));
+
+        },
         failedUpload() {
             return this.listOfFiles.some(file => file.error)
         },
@@ -447,7 +525,7 @@ export default {
             return getFileExtension(filename)
         },
         selectFiles() {
-            let inputFile = this.$el.querySelector('input[type="file"]')
+            let inputFile = this.$refs.formElement.getDomElement().querySelector("input[type='file']")
             inputFile.click()
         },
         dragEnter(event) {
@@ -514,7 +592,11 @@ export default {
             this.checkFiles(event.target.files)
         },
         checkFiles(files) {
-            this.defaultSystemMessageStatus = "" // hide systemMessage if already is shown
+            if (!files.length) {
+                return
+            }
+
+            this.defaultSystemMessageStatus = ""; // hide systemMessage if already is shown
             this.systemMessages = [] // hide systemMessage if already is shown
             this.errors = {}
 
@@ -584,6 +666,16 @@ export default {
                     break
                 }
             }
+
+            if (!this.advancedMode) {
+                if (this.systemMessages.length) {
+                    this.$emit("error", {messages: this.systemMessages})
+                    return
+                }
+                if (this.listOfFiles.length) {
+                    this.uploadFiles()
+                }
+            }
         },
         compareFiles(file1, file2) {
             return (
@@ -763,19 +855,11 @@ export default {
 </script>
 
 <style lang="scss">
-/* begin my-sp-upload-form -------------------------------------------------------------------------------------------- */
-.my-sp-upload-form {
+/* begin cmd-upload-form -------------------------------------------------------------------------------------------- */
+.cmd-upload-form {
     .box {
-        padding: (var(--default-padding));
-        text-align: center;
-        border-style: dashed;
         background: var(--pure-white-reduced-opacity);
 
-        &.allow-drop {
-            border-style: solid;
-            background: var(--pure-white);
-        }
-
         dl {
             justify-content: center;
             text-align: left;
@@ -864,17 +948,9 @@ export default {
         }
     }
 
-    textarea {
-        min-height: 0;
-    }
-
     .button.upload {
         align-self: center;
 
-        & + .cmd-form-element {
-            display: none;
-        }
-
         & ~ p {
             & > * {
                 display: block;
@@ -885,7 +961,37 @@ export default {
     .error {
         color: var(--error-color);
     }
+
+    & + .cmd-form-element {
+        display: none;
+    }
 }
 
-/* end my-sp-upload-form ---------------------------------------------------------------------------------------------- */
+.drop-area {
+    border: var(--default-border);
+    border-style: dashed;
+    background: var(--pure-white);
+    padding: (var(--default-padding));
+    text-align: center;
+
+    &.allow-drop {
+        border-style: solid;
+    }
+
+    > span[class*="icon"] {
+        font-size: 5rem;
+    }
+}
+
+a.drop-area {
+    display: inline-flex;
+    flex-direction: column;
+    text-decoration: none;
+    background: var(--default-background-color);
+
+    span {
+        margin: 0;
+    }
+}
+/* end cmd-upload-form ---------------------------------------------------------------------------------------------- */
 </style>

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>