comand-component-library 3.1.71 → 3.1.72

package/src/components/CmdBox.vue

@@ -8,9 +8,10 @@
                 <slot name="header"></slot>
                 <!-- end slot 'header' -->
                 <a href="#"
+                   class="toggle-icon"
                    :title="open ? iconOpen.tooltip : iconClosed.tooltip"
                    @click.prevent="toggleContentVisibility">
-                    <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+                    <span :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
                 </a>
             </div>
             <!-- end collapsible header with slot -->
@@ -313,8 +314,8 @@ export default {
                 margin-bottom: 0;
             }
 
-            &:not(.open):last-child {
-                margin-top: auto;
+            &:not(.open) {
+                justify-content: flex-start;
             }
         }
 
@@ -334,9 +335,10 @@ export default {
 
             * {
                 color: var(--pure-white);
+                margin-bottom: 0;
             }
 
-            > [class*="icon"]:last-child {
+            > .toggle-icon, .toggle-icon > [class*="icon"] {
                 font-size: 1rem;
                 margin-left: auto;
             }

package/src/components/CmdFakeSelect.vue

@@ -5,7 +5,8 @@
             'cmd-fake-select label',
             {
                 color: type === 'color',
-                'has-state': validationStatus && validationStatus !== 'none'
+                'has-state': validationStatus && validationStatus !== 'none',
+                disabled: $attrs.disabled
             }
         ]"
         :aria-labelledby="labelId"
@@ -229,7 +230,7 @@ export default {
         /**
          * status (i.e. for validation)
          *
-         * @allowedValues: error, success, disabled
+         * @allowedValues: error, warning, success, info
          * @affectsStyling: true
          */
         status: {
@@ -372,7 +373,7 @@ export default {
             }
         },
         toggleOptions() {
-            if (this.status !== 'disabled') {
+            if (this.$attrs.disabled !== 'disabled') {
                 this.showOptions = !this.showOptions
             }
         },
@@ -546,8 +547,16 @@ export default {
             &.active {
                 background: var(--light-gray);
 
+                span {
+                    color: var(--text-color);
+                }
+
                 &:hover, &:active, &:focus {
                     background: var(--primary-color);
+
+                    span {
+                        color: var(--pure-white);
+                    }
                 }
             }
         }

package/src/components/CmdFormElement.vue

@@ -21,6 +21,46 @@
         <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
               :class="['label-text', !showLabel ? 'hidden' : undefined]">
             <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+
+            <!-- begin CmdTooltip -->
+    <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
+        <!-- begin CmdSystemMessage -->
+        <CmdSystemMessage
+            v-if="getValidationMessage"
+            :message="getValidationMessage"
+            :validation-status="validationStatus"
+            :iconClose="{show: false}"
+        />
+        <!-- end CmdSystemMessage -->
+
+        <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
+            <!-- begin list of requirements -->
+            <h6>
+                {{ getMessage("cmdformelement.headline.requirements_for_input") }}<br/>
+                "{{ labelText }}"
+            </h6>
+            <dl class="list-of-requirements">
+                <template v-for="(requirement, index) in inputRequirements" :key="index">
+                    <dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
+                    <dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
+                        <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
+                              :title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></span>
+                    </dd>
+                </template>
+            </dl>
+            <!-- end list of requirements -->
+
+            <!-- begin helplink -->
+            <hr v-if="helplink?.show"/>
+            <a v-if="helplink?.show && helplink?.url" :href="helplink.url" :target="helplink.target" @click.prevent>
+                <span v-if="helplink.icon?.iconClass" :class="helplink.icon?.iconClass" :title="helplink.icon?.tooltip"></span>
+                <span v-if="helplink.text">{{ helplink.text }}</span>
+            </a>
+            <!-- end helplink -->
+        </template>
+    </CmdTooltip>
+            <!-- end CmdTooltip -->
+
             <a v-if="$attrs.required || inputRequirements.length"
                 href="#"
                 @click.prevent
@@ -89,6 +129,7 @@
                         :value="inputValue"
                         :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
                         :id="labelId"
+                        :disabled="$attrs.disabled"
                         :aria-invalid="validationStatus === 'error'"
                     />
                     <span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
@@ -103,6 +144,7 @@
                            :value="inputValue"
                            :class="{inputClass, validationStatus}"
                            :id="labelId"
+                           :disabled="$attrs.disabled"
                            :aria-invalid="validationStatus === 'error'"
                     />
                     <span class="label-text">{{ onLabel }}</span>
@@ -152,7 +194,7 @@
                     :maxlength="getMaxLength()"
                     :value="modelValue"
                 />
-                <a v-if="showSearchButton" href="#" class="button no-flex" :title="iconSearch.tooltip" @click.prevent="executeSearch">
+                <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]" :title="iconSearch.tooltip" @click.prevent="executeSearch">
                     <span :class="iconSearch.iconClass"></span>
                 </a>
                 <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :class="iconDelete.iconClass" :title="iconDelete.tooltip"></a>
@@ -171,45 +213,6 @@
         <span v-if="nativeButton?.icon?.show && nativeButton?.icon?.position === 'after'" :class="nativeButton?.icon?.iconClass"></span>
     </button>
     <!-- end button -->
-
-    <!-- begin CmdTooltip -->
-    <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
-        <!-- begin CmdSystemMessage -->
-        <CmdSystemMessage
-            v-if="getValidationMessage"
-            :message="getValidationMessage"
-            :validation-status="validationStatus"
-            :iconClose="{show: false}"
-        />
-        <!-- end CmdSystemMessage -->
-
-        <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
-            <!-- begin list of requirements -->
-            <h6>
-                {{ getMessage("cmdformelement.headline.requirements_for_input") }}<br/>
-                "{{ labelText }}"
-            </h6>
-            <dl class="list-of-requirements">
-                <template v-for="(requirement, index) in inputRequirements" :key="index">
-                    <dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
-                    <dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
-                        <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
-                              :title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></span>
-                    </dd>
-                </template>
-            </dl>
-            <!-- end list of requirements -->
-
-            <!-- begin helplink -->
-            <hr v-if="helplink?.show"/>
-            <a v-if="helplink?.show && helplink?.url" :href="helplink.url" :target="helplink.target" @click.prevent>
-                <span v-if="helplink.icon?.iconClass" :class="helplink.icon?.iconClass" :title="helplink.icon?.tooltip"></span>
-                <span v-if="helplink.text">{{ helplink.text }}</span>
-            </a>
-            <!-- end helplink -->
-        </template>
-    </CmdTooltip>
-    <!-- end CmdTooltip -->
 </template>
 
 <script>
@@ -807,6 +810,14 @@ export default {
         right: .5rem
     }
 
+    .cmd-tooltip {
+        position: absolute;
+        right: 0;
+        transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
+        left: auto !important;
+        top: 0 !important;
+    }
+
     &.has-state, & + .cmd-tooltip {
         ::placeholder {
             color: var(--status-color);

package/src/components/CmdInputGroup.vue

@@ -1,21 +1,24 @@
 <template>
-    <div :class="['cmd-input-group label', {inline: labelInline, 'multiple-switch': multipleSwitch}]">
+    <div :class="['cmd-input-group label', {inline: labelInline, 'multiple-switch': multipleSwitch, disabled: disabled}]">
         <span :class="['label-text', { hidden: !showLabel}]" :id="labelId" :aria-labelledby="labelId">
              <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
         </span>
         <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
             <label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id">
-                <input :type="inputTypes"
-                       :id="inputElement.id"
-                       :name="inputElement.name"
-                       :value="inputElement.value"
-                       v-model="inputValue"
-                       :class="{'replace-input-type': replaceInputType}"
+                <input
+                    :type="inputTypes"
+                   :id="inputElement.id"
+                   :name="inputElement.name"
+                   :value="inputElement.value"
+                   v-model="inputValue"
+                   :disabled="disabled"
+                   :class="{'replace-input-type': replaceInputType}"
                 />
                 <span v-if="multipleSwitch && inputElement.iconClass" :class="inputElement.iconClass"></span>
                 <span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
             </label>
         </span>
+
         <!-- begin useSlot -->
         <div v-else class="flex-container no-flex">
             <!-- begin slot -->
@@ -117,6 +120,15 @@ export default {
         stretchHorizontally: {
             type: Boolean,
             default: false
+        },
+        /**
+         * define disabled-property to set disabled-style
+         *
+         * component cannot handle native disabled-attribute, because it is no native form-element
+         */
+        disabled: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {

package/src/components/CmdToggleDarkMode.vue

@@ -6,6 +6,10 @@
             :labelText="labelText"
             :showLabel="showLabel"
             v-model="darkMode"
+            :toggle-switch="true"
+            :useIconsForToggleSwitch="true"
+            toggle-switch-checked-icon-class="icon-home"
+            toggle-switch-unchecked-icon-class="icon-globe"
         />
     </div>
 </template>
@@ -14,19 +18,17 @@
 import CmdFormElement from "./CmdFormElement"
 
 export default {
-    data() {
-      return {
-          darkMode: false
-      }
-    },
+    name: "ToggleDarkMode",
     components: {
         CmdFormElement
     },
+    data() {
+        return {
+            darkMode: false,
+            labelText: "Light mode activated"
+        }
+    },
     props: {
-        labelText: {
-            type: String,
-            default: "Toggle Darkmode"
-        },
         showLabel: {
             type: Boolean,
             default: false
@@ -56,11 +58,29 @@ export default {
             const htmlTag = document.querySelector('html')
             if(this.darkMode) {
                 htmlTag.classList.replace("light-mode", "dark-mode");
+                this.labelText = "Dark-Mode enabled"
             } else {
                 htmlTag.classList.replace("dark-mode", "light-mode");
+                this.labelText = "Light-Mode enabled"
             }
             htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', { detail: this.darkMode ? 'dark-mode' : 'light-mode' }))
         }
     }
 }
-</script>
+</script>
+
+<style lang="scss">
+.cmd-toggle-dark-mode {
+    .cmd-form-element {
+        input {
+            background: blue;
+        }
+    }
+
+    &.dark-mode {
+        input {
+            background: black;
+        }
+    }
+}
+</style>

package/src/components/CmdTooltip.vue

@@ -138,7 +138,7 @@ export default {
     },
     unmounted() {
         if(this.relatedId) {
-            const relatedElement = document.getElementById(this.relatedId)
+            const relatedElement = document.getElementById(this.npm )
 
             if(relatedElement) {
                 relatedElement.removeEventListener("mouseenter", this.showTooltip)