comand-component-library 3.3.87 → 4.0.1

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
-        <section v-if="innerWrapper" :class="setInnerClass">
-            <a v-if="anchorId" :id="anchorId"></a>
+        <!-- begin slot-content in section -->
+        <section v-if="innerWrapper" :class="setInnerClass" :id="{anchorId: anchorId}">
             <!-- begin cmd-headline -->
             <CmdHeadline
                 v-if="cmdHeadline"
@@ -15,12 +15,16 @@
             <slot></slot>
             <!-- end slot-content -->
         </section>
+        <!-- end slot-content in section -->
+
+        <!-- begin slot-content without section -->
         <template v-else>
             <!-- begin slot-content -->
             <a v-if="anchorId" :id="anchorId"></a>
             <slot></slot>
             <!-- end slot-content -->
         </template>
+        <!-- end slot-content without section -->
     </div>
 </template>
 
@@ -113,7 +117,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-width-limitation-wrapper ---------------------------------------------------------------------------------------- */
 .cmd-width-limitation-wrapper {
     > * {

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')

package/src/mixins/FieldValidation.js

@@ -215,23 +215,6 @@ export default {
             }
             return this.helplink.icon.iconClass
         },
-        getStatusIconType() {
-            if (this.validationStatus !== "") {
-                if (!this.capsLockActivated) {
-                    if (this.validationStatus === "error") {
-                        return this.iconHasStateError.iconType
-                    } else if (this.validationStatus === "warning") {
-                        return this.iconHasStateWarning.iconType
-                    } else if (this.validationStatus === "success") {
-                        return this.iconHasStateSuccess.iconType
-                    }
-                    return this.iconHasStateInfo.iconType
-                } else {
-                    return this.iconCapsLock.iconType
-                }
-            }
-            return this.helplink.icon.iconType
-        },
         inputRequirements() {
             const standardRequirements = []
             // check if field is required