comand-component-library 4.0.0 → 4.0.2

package/src/components/CmdUploadForm.vue

@@ -24,22 +24,24 @@
         </CmdSystemMessage>
         <!-- end CmdSystemMessage -->
 
-        <div :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
+        <div :class="['box flex-container vertical', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
             <template v-if="!listOfFiles.length">
+                <!-- begin CmdHeadline -->
                 <CmdHeadline v-if="allowMultipleFileUploads" v-bind="cmdHeadlineNoFilesToUpload" headlineLevel="4">
-                    {{ getMessage("cmduploadform.no_files_to_upload") }}
-                </CmdHeadline>
-                <CmdHeadline v-else v-bind="cmdHeadlineNoFilesToUpload" headlineLevel="4">
-                    {{ getMessage("cmduploadform.no_file_to_upload") }}
+                    {{ headlineTextNoFilesToUpload }}
                 </CmdHeadline>
+                <!-- end CmdHeadline -->
             </template>
 
             <!-- begin total-upload information -->
             <div v-else class="flex-container vertical">
                 <div v-if="showTotalUpload && listOfFiles.length !== 1" class="flex-container vertical list-files-wrapper">
+                    <!-- begin CmdHeadline -->
                     <CmdHeadline v-bind="cmdHeadlineSummaryOfAllFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.summary_of_all_files") }}
                     </CmdHeadline>
+                    <!-- end CmdHeadline -->
+
                     <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
                         <li class="flex-container no-flex">
                             <a
@@ -83,9 +85,12 @@
 
                 <div class="flex-container vertical list-files-wrapper">
                     <!-- begin list of selected files -->
+                    <!-- begin CmdHeadline -->
                     <CmdHeadline v-bind="cmdHeadlineListOfSelectedFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.list_of_selected_files") }}
                     </CmdHeadline>
+                    <!-- end CmdHeadline -->
+
                     <ul class="list-of-files">
                         <li
                             v-for="(uploadFile, index) in listOfFiles"
@@ -108,20 +113,21 @@
                                 { error: uploadFile.error }
                               ]">
                                 {{ uploadFile.file.name }} <small>({{ formatSize(uploadFile.file.size) }})</small>
-                        </span>
-                            <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) -->
-                            <progress
-                                max="100"
-                                :value="uploadFile.progress"
-                                :title="
-                                formatSize(uploadFile.uploadedBytes) + '/' + formatSize(uploadFile.file.size)
-                              "
-                            ></progress>
-                          </span>
-                            </template>
+                            </span>
+
+                            <!-- begin progressbar -->
+                            <span class="progressbar" v-if="uploadInitiated && !uploadFile.error">
+                                <span>{{ getPercentage(uploadFile.progress) }}</span>
+                                <!-- do not place inside progress-tag (will not be displayed then) -->
+                                <progress
+                                    max="100"
+                                    :value="uploadFile.progress"
+                                    :title="
+                                    formatSize(uploadFile.uploadedBytes) + '/' + formatSize(uploadFile.file.size)
+                                  "
+                                ></progress>
+                            </span>
+                            <!-- end progressbar -->
                         </li>
                     </ul>
                     <a
@@ -137,12 +143,18 @@
             <!-- end list of selected files -->
 
             <!-- begin upload conditions -->
+            <!-- begin CmdHeadline -->
             <CmdHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectAdditionalFiles" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_additional_files") }}
             </CmdHeadline>
+            <!-- end CmdHeadline -->
+
+            <!-- begin CmdHeadline -->
             <CmdHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectNewFile" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_new_file") }}
             </CmdHeadline>
+            <!-- end CmdHeadline -->
+
             <dl class="small">
                 <template v-if="maxTotalUploadSize > 0">
                     <dt :class="{ error: totalSize > maxTotalUploadSize }">
@@ -188,7 +200,8 @@
             </dl>
             <!-- end upload conditions -->
 
-            <div>
+            <!-- begin upload-button and drag-and-drop-text -->
+            <div class="flex-container vertical no-gap">
                 <button
                     type="button"
                     :class="['button upload primary', { disabled: uploadInitiated }]"
@@ -217,7 +230,9 @@
                     </strong>
                 </p>
             </div>
+            <!-- end upload-button and drag-and-drop-text -->
         </div>
+
         <!-- begin CmdFormElement -->
         <CmdFormElement
             v-if="enableComment"
@@ -268,7 +283,8 @@
     <!-- 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">
+    <a v-else href="#" @click.prevent="selectFiles" :class="['cmd-upload-form box', { 'drop-area': enableDragAndDrop, 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
+        <!-- begin progressbar -->
         <span class="progressbar" v-if="uploadInitiated">
             <span>{{ getPercentage(totalUploadProgress) }}</span>
             <progress
@@ -277,10 +293,11 @@
                 :title="totalBytesUploaded">
             </progress>
         </span>
+        <!-- end progressbar -->
 
         <!-- begin slot-content -->
         <slot>
-            <template v-if="enableDragAndDrop">
+            <template v-if="!enableDragAndDrop">
                 <template v-if="fileTypeImage">
                     <span>{{ getMessage("cmduploadform.select_image") }}</span>
                     <!-- begin CmdIcon -->
@@ -455,6 +472,22 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * toggle visibility for legend-text
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * text for legend
+         *
+         * @requiredForAccessibility: true
+         */
+        textLegend: {
+            type: String,
+            required: false
+        },
         /**
          * set icon for delete-icons
          */
@@ -611,25 +644,12 @@ export default {
         cmdHeadlineSelectNewFile: {
             type: Object,
             required: false
-        },
-        /**
-         * toggle visibility for legend-text
-         */
-        showLegend: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * text for legend
-         *
-         * @requiredForAccessibility: true
-         */
-        textLegend: {
-            type: String,
-            required: false
         }
     },
     computed: {
+        headlineTextNoFilesToUpload() {
+            return this.allowMultipleFileUploads ? this.getMessage("cmduploadform.no_files_to_upload") : this.this.getMessage("cmduploadform.no_file_to_upload")
+        },
         fileTypeImage() {
             return this.allowedFileExtensions.some(extension => extension.includes('jpg'));
         },
@@ -1076,7 +1096,7 @@ export default {
         overflow-x: hidden;
         overflow-y: auto;
         border: var(--default-border);
-        padding: calc(var(--default-padding) * 2);
+        padding: var(--default-padding);
         margin: 0;
 
         > li {
@@ -1187,14 +1207,20 @@ export default {
         }
     }
 
-    &.drop-area {
+    &.box {
         display: inline-flex;
         flex-direction: column;
-        text-decoration: none;
         background: var(--default-background-color);
+        text-decoration: none;
+        text-align: center;
+        padding: var(--default-padding);
 
         span {
             margin: 0;
+
+            &[class*="icon-"] {
+                font-size: 5rem;
+            }
         }
     }
 }

package/src/components/ComponentSettings.vue

@@ -0,0 +1,171 @@
+<template>
+    <CmdBox
+        :use-slots="['body']"
+        :collapsible="true"
+        :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
+        :openCollapsedBox="true"
+        boxBodyClass="settings-body"
+    >
+        <template v-slot:body>
+            <CmdFormElement
+                v-for="(prop) in filteredProps" :key="prop.name"
+                :element="formElement(prop)"
+                :type="formType(prop)"
+                :labelText="readableName(prop.name)"
+                :placeholder="readableName(prop.name)"
+                :toggleSwitch="prop.toggleSwitch"
+                :colored="true"
+                :selectOptions="selectOptions(prop)"
+                :modelValue="prop.value"
+                @update:modelValue="onUpdateProperty(prop.name, $event)"
+            />
+        </template>
+    </CmdBox>
+</template>
+
+<script>
+
+export default {
+    name: "ComponentSettings",
+    data() {
+        return {
+            currentComponentName: ""
+        }
+    },
+    props: {
+        componentName: {
+            type: String,
+            default: ""
+        },
+        componentProps: {
+            type: Object,
+            required: true
+        },
+        componentSettings: {
+            type: Object,
+            required: true
+        },
+        componentControls: {
+            type: Object
+        }
+    },
+    computed: {
+        filteredProps() {
+            return this.filterProperties(this.componentProps, [])
+        }
+    },
+    methods: {
+        filterProperties(properties, nameParts) {
+            const allProps = []
+
+            for (let key in properties) {
+                const propType = typeof properties[key]
+                if (propType === "boolean" || propType === "string" || propType === "number" || (propType === "object" && key.slice(0, 3) === "cmd")) {
+
+                    if(propType === "object") {
+                        this.filterProperties(properties[key], [...nameParts, key]).forEach((item) => allProps.push(item))
+                    } else {
+                        const prop = {}
+
+                        if (propType === "boolean") {
+                            prop.toggleSwitch = true
+                        }
+
+                        prop.name = [...nameParts, key].join(".")
+                        prop.type = propType
+                        prop.value = properties[key]
+
+                        allProps.push(prop)
+                    }
+                }
+            }
+
+            return allProps
+        },
+        onUpdateProperty(propName, value) {
+            const nameParts = propName.split(".")
+            let settings = this.componentSettings
+            for (let i = 0; i < nameParts.length - 1; i++) {
+                settings = settings[nameParts.shift()]
+            }
+
+            if (typeof settings[nameParts[0]] === "number") {
+                settings[nameParts[0]] = Number(value)
+            } else {
+                settings[nameParts[0]] = value
+            }
+        },
+        readableName(name) {
+            // remove prefix from current component-name
+            let nameWithoutPrefix = name.replace("Cmd", "")
+
+            // remove entire prefix (componentName) for inner-component-properties
+            nameWithoutPrefix = nameWithoutPrefix.replace(/^[^.]*\./, '');
+
+            // use a regular expression to find the positions of capital letters
+            let capitalPositions = []
+            nameWithoutPrefix.replace(/[A-Z]/g, function (match, index) {
+                capitalPositions.push(index)
+                return match
+            })
+
+            // add a space before each capital letter based on the found positions
+            for (let i = capitalPositions.length - 1; i >= 0; i--) {
+                nameWithoutPrefix = nameWithoutPrefix.slice(0, capitalPositions[i]) + ' ' + nameWithoutPrefix.slice(capitalPositions[i])
+            }
+
+            // capitalize first letter
+            nameWithoutPrefix = nameWithoutPrefix.charAt(0).toUpperCase() + nameWithoutPrefix.slice(1)
+
+            return nameWithoutPrefix
+        },
+        formType(prop) {
+            if (Array.isArray(this.componentControls?.[prop.name])) {
+                return null
+            }
+
+            switch (prop.type) {
+                case "boolean":
+                    return "checkbox"
+
+                case "number":
+                    return "number"
+
+                default:
+                    return "text"
+
+            }
+        },
+        formElement(prop) {
+            if (Array.isArray(this.componentControls?.[prop.name])) {
+                return "select"
+            } else {
+                return "input"
+            }
+        },
+        selectOptions(prop) {
+            if (Array.isArray(this.componentControls?.[prop.name])) {
+                return this.componentControls[prop.name]
+            } else {
+                return null
+            }
+        }
+    },
+    watch: {
+        componentName: {
+            handler() {
+                this.currentComponentName = this.componentName
+            },
+            immediate: true
+        }
+    }
+}
+</script>
+
+<style>
+.cmd-box .settings-body > div {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--default-gap) / 2);
+}
+</style>

package/src/main.js

@@ -4,8 +4,8 @@ import "comand-frontend-framework/styles"
 
 import { createApp } from "vue"
 
-// import App from "./App.vue"
-import App from "./App.vue"
+// import ComponentLibrary from "./ComponentLibrary.vue"
+import ComponentLibrary from "./ComponentLibrary.vue"
 //import { createRouter, createWebHistory } from "vue-router"
 import "clickout-event"
 
@@ -53,4 +53,4 @@ import router from "./router"
 // })
 
 // createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
-createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
+createApp(ComponentLibrary).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')