comand-component-library 3.1.66 → 3.1.69

package/src/components/CmdToggleDarkMode.vue

@@ -0,0 +1,66 @@
+<template>
+    <div :class="['cmd-toggle-dark-mode', {'dark-mode': darkMode}]">
+        <CmdFormElement
+            element="input"
+            type="checkbox"
+            :labelText="labelText"
+            :showLabel="showLabel"
+            v-model="darkMode"
+        />
+    </div>
+</template>
+
+<script>
+import CmdFormElement from "./CmdFormElement"
+
+export default {
+    data() {
+      return {
+          darkMode: false
+      }
+    },
+    components: {
+        CmdFormElement
+    },
+    props: {
+        labelText: {
+            type: String,
+            default: "Toggle Darkmode"
+        },
+        showLabel: {
+            type: Boolean,
+            default: false
+        }
+    },
+    created() {
+        // get color-scheme (light-/dark-mode) from browser-settings
+        // this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+        // document.body.classList.add(this.darkMode ? 'dark-mode' : 'light-mode');
+
+        const mql = window.matchMedia('(prefers-color-scheme: dark)')
+        mql.addEventListener("change", this.onColorSchemeChange)
+        this.onColorSchemeChange(mql)
+    },
+    beforeUnmount() {
+        window.matchMedia('(prefers-color-scheme: dark)').removeEventListener("change", this.onColorSchemeChange)
+    },
+    methods: {
+        onColorSchemeChange(event) {
+            this.darkMode = event.matches
+            document.querySelector('html').classList.add(this.darkMode ? 'dark-mode' : 'light-mode')
+        }
+    },
+    watch: {
+        darkMode() {
+            // toggle classes to overwrite media-query styles for color-schemes
+            const htmlTag = document.querySelector('html')
+            if(this.darkMode) {
+                htmlTag.classList.replace("light-mode", "dark-mode");
+            } else {
+                htmlTag.classList.replace("dark-mode", "light-mode");
+            }
+            htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', { detail: this.darkMode ? 'dark-mode' : 'light-mode' }))
+        }
+    }
+}
+</script>

package/src/components/CmdUploadForm.vue

@@ -212,7 +212,7 @@
             :labelText="getMessage('cmduploadform.labeltext.comment')"
             v-model="comment"
             :required="commentRequired"
-            :statusMessage="commentStatusMessage"
+            :validationMessage="commentStatusMessage"
             :placeholder="getMessage('cmduploadform.placeholder.comment')"
             :status="commentStatusMessage ? 'error' : ''"
         />
@@ -980,14 +980,13 @@ export default {
 <style lang="scss">
 /* begin cmd-upload-form -------------------------------------------------------------------------------------------- */
 .cmd-upload-form {
-
     .cmd-custom-headline {
         margin: 0;
         justify-content: center;
     }
 
     .box {
-        background: var(--pure-white-reduced-opacity);
+        background: var(--color-scheme-background-color);
 
         dl {
             justify-content: center;
@@ -1031,7 +1030,7 @@ export default {
 
                 progress {
                     &[value] {
-                        background: var(--pure-white);
+                        background: var(--color-scheme-background-color);
 
                         &::-moz-progress-bar {
                             border-top-left-radius: var(--border-radius);
@@ -1051,7 +1050,7 @@ export default {
                     top: 0.2rem;
                     padding: 0.1rem 0.2rem;
                     line-height: 100%;
-                    background: var(--pure-white);
+                    background: var(--color-scheme-background-color);
                 }
             }
         }
@@ -1119,7 +1118,7 @@ export default {
 .drop-area {
     border: var(--default-border);
     border-style: dashed;
-    background: var(--pure-white);
+    background: var(--color-scheme-background-color);
     padding: (var(--default-padding));
     text-align: center;
 

package/src/index.js

@@ -32,7 +32,6 @@ export { default as CmdShareButtons } from '@/components/CmdShareButtons'
 export { default as CmdSiteHeader } from '@/components/CmdSiteHeader'
 export { default as CmdSlideButton } from '@/components/CmdSlideButton'
 export { default as CmdSlideshow } from '@/components/CmdSlideshow'
-export { default as CmdSwitchButton } from '@/components/CmdSwitchButton'
 export { default as CmdSwitchLanguage } from '@/components/CmdSwitchLanguage'
 export { default as CmdSystemMessage } from '@/components/CmdSystemMessage'
 export { default as CmdTable } from '@/components/CmdTable'

package/src/mixins/FieldValidation.js

@@ -157,7 +157,7 @@ export default {
                     return this.getMessage("cmdfieldvalidation.information_filled_correctly")
                 }
             }
-            return ""
+            return null
         },
         getStatusIconClass() {
             if (this.validationStatus !== "") {

package/src/utils/common.js

@@ -3,4 +3,13 @@ function isFrameMode() {
     return frameUrl.searchParams.has("frameMode")
 }
 
-export {isFrameMode}
+function createUuid(){
+    let dt = new Date().getTime()
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        const r = (dt + Math.random() * 16) % 16 | 0
+        dt = Math.floor(dt / 16)
+        return (c === "x" ? r : (r & 0x3 | 0x8)).toString(16)
+    })
+}
+
+export {isFrameMode, createUuid}

package/src/components/CmdSwitchButton.vue

@@ -1,181 +0,0 @@
-<template>
-    <label :class="['cmd-switch-button', 'toggle-switch',
-                    {'switch-label': onLabel && offLabel && !labelText,
-                    'colored' : colored, 'on' : colored && isChecked,
-                    'off' : colored && !isChecked, 'disabled': $attrs.disabled
-                    }
-                    ]"
-           :for="id"
-           :title="$attrs.title"
-    >
-        <input :type="type" :id="id" :name="name" :value="inputValue" :checked="isChecked" @change="onChange" v-bind="$attrs"/>
-        <span class="label" v-if="onLabel && offLabel && !labelText">{{ onLabel }}</span>
-        <span class="label" v-if="onLabel && offLabel && !labelText">{{ offLabel }}</span>
-        <span class="label" v-if="!onLabel && !offLabel && labelText">{{ labelText }}</span>
-    </label>
-</template>
-
-<script>
-export default {
-    inheritAttrs: false,
-    name: "CmdSwitchButton",
-    emits: ["update:value"],
-    props: {
-        /**
-         * set type for input
-         *
-         * values: checkbox, radio
-         */
-        type: {
-            type: String,
-            required: true
-        },
-        /**
-         * set id for input
-         *
-         * @requiredForAccessibility: true
-         */
-        id: {
-            type: String,
-            required: true
-        },
-        /**
-         * set name for input
-         *
-         * required for radio-buttons (and form-submit by browser)
-         */
-        name: {
-            type: String,
-            required: false
-        },
-        /**
-         * value for v-model
-         */
-        value: {
-            type: [String, Array, Boolean],
-            required: false
-        },
-        /**
-         * set value to pre-check toggle-switch
-         */
-        inputValue: {
-            type: String,
-            required: false
-        },
-        /**
-         * text for label
-         *
-         * required if onLabel/offLabel are not set
-         *
-         * @requiredForAccessibility: true
-         */
-        labelText: {
-            type: String,
-            required: false
-        },
-        /**
-         * text for on-label
-         *
-         * set to activate switch-label (=label is placed on toggle-switch (not behind))
-         *
-         * @requiredForAccessibility: true
-         */
-        onLabel: {
-            type: String,
-            required: false
-        },
-        /**
-         * text for off-label
-         *
-         * set to activate switch-label (=label is placed on toggle-switch (not behind))
-         *
-         * @requiredForAccessibility: true
-         */
-        offLabel: {
-            type: String,
-            required: false
-        },
-        /**
-         * set to true, if checkbox/radio-buttons should have green/checked and red/unchecked color-coding
-         *
-         * @affectsStyling: true
-         */
-        colored: {
-            type: Boolean,
-            required: false
-        }
-    },
-    computed: {
-        isChecked() {
-            if (typeof this.value === 'boolean') {
-                return this.value
-            }
-            if (typeof this.value === 'string') {
-                return this.value === this.inputValue
-            }
-            if(this.value !== undefined) {
-                return this.value.includes(this.inputValue)
-            }
-            return false
-        }
-    },
-    methods: {
-        onChange(e) {
-            if (typeof this.value === 'boolean') {
-                this.$emit('update:value', e.target.checked)
-            } else if (typeof this.value === 'string') {
-                this.$emit('update:value', e.target.value)
-            } else {
-                let values = [...this.value]
-                if (e.target.checked) {
-                    values.push(e.target.value)
-                } else {
-                    values = values.filter(value => value !== e.target.value)
-                }
-                this.$emit('update:value', values)
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-/* begin cmd-switch-button ------------------------------------------------------------------------------------------ */
-/* no cmd-prefix-styling (class based on frontend-framework */
-.toggle-switch {
-    &.switch-label {
-        &.colored {
-            &.off {
-                border-color: var(--error-color);
-
-                span {
-                    &.label {
-                        color: var(--error-color);
-
-                        &::before {
-                            border-color: var(--error-color);
-                            background-color: var(--pure-white);
-                        }
-                    }
-                }
-            }
-
-            &.on {
-                border-color: var(--success-color);
-
-                span {
-                    &.label {
-                        color: var(--success-color);
-
-                        &::before {
-                            border-color: var(--success-color);
-                            background-color: var(--success-color);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-/* end cmd-switch-button ------------------------------------------------------------------------------------------ */
-</style>