comand-component-library 4.0.2 → 4.0.4

package/src/components/CmdFakeSelect.vue

@@ -20,19 +20,7 @@
             <span class="label-text">
                 <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
 
-                <!-- begin CmdTooltipForInputElements -->
-                <CmdTooltipForInputElements
-                    v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
-                    ref="tooltip"
-                    :validationStatus="validationStatus"
-                    :validationMessage="getValidationMessage"
-                    :relatedId="tooltipId"
-                    :cmdListOfRequirements="listOfRequirements"
-                    :role="validationStatus === 'error' ? 'alert' : 'dialog'"
-                />
-                <!-- end CmdTooltipForInputElements -->
-
-                <a v-if="$attrs.required || inputRequirements.length"
+                <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
                    href="#"
                    @click.prevent
                    :title="!useCustomTooltip ? getValidationMessage : ''"
@@ -40,9 +28,21 @@
                    aria-live="assertive"
                    :id="tooltipId">
                    <!-- begin CmdIcon -->
-                   <CmdIcon :iconClass="getStatusIconClass" />
-                   <!-- end CmdIcon -->
+                   <CmdIcon :iconClass="getStatusIconClass"/>
+                    <!-- end CmdIcon -->
                 </a>
+
+                <!-- begin CmdTooltipForFormElements -->
+                <CmdTooltipForFormElements
+                    v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
+                    ref="tooltip"
+                    :validationStatus="validationStatus"
+                    :validationMessage="getValidationMessage"
+                    :relatedId="tooltipId"
+                    :cmdListOfRequirements="listOfRequirements"
+                    :role="validationStatus === 'error' ? 'alert' : 'dialog'"
+                />
+                <!-- end CmdTooltipForFormElements -->
             </span>
             <!-- end label -->
         </template>
@@ -51,7 +51,8 @@
                 <!-- begin default/selected-option -->
                 <a href="#" @click.prevent="toggleOptions" @blur="onBlur" :title="optionIcon?.tooltip">
                     <!-- begin show flag -->
-                    <img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry" :class="['flag', optionCountry]"/>
+                    <img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry"
+                         :class="['flag', optionCountry]"/>
                     <!-- end show flag -->
 
                     <!-- begin show color-box -->
@@ -60,7 +61,8 @@
 
                     <!-- begin optional icon -->
                     <!-- begin CmdIcon -->
-                    <CmdIcon v-if="optionIcon?.iconClass" :type="optionIcon?.iconType" :iconClass="optionIcon?.iconClass" />
+                    <CmdIcon v-if="optionIcon?.iconClass" :type="optionIcon?.iconType"
+                             :iconClass="optionIcon?.iconClass"/>
                     <!-- end CmdIcon -->
                     <!-- end optional icon -->
 
@@ -83,7 +85,8 @@
 
                 <!-- begin default dropdown (incl. optional icon) -->
                 <ul v-if="type === 'default' && showOptions" role="listbox">
-                    <li v-for="(option, index) in selectData" :key="index" role="option" :aria-selected="option.value === modelValue">
+                    <li v-for="(option, index) in selectData" :key="index" role="option"
+                        :aria-selected="option.value === modelValue">
                         <!-- begin type 'href' -->
                         <a v-if="optionLinkType === 'href'"
                            href="#" @click.prevent="selectOption(option.value)"
@@ -91,16 +94,18 @@
                            :title="option.tooltip"
                         >
                             <!-- begin CmdIcon -->
-                            <CmdIcon v-if="option.iconClass" :iconClass="option.iconClass" :type="option.iconType" />
+                            <CmdIcon v-if="option.iconClass" :iconClass="option.iconClass" :type="option.iconType"/>
                             <!-- end CmdIcon -->
                             <span v-if="option.text">{{ option.text }}</span>
                         </a>
                         <!-- end type 'href' -->
 
                         <!-- begin type 'router' -->
-                        <router-link v-if="optionLinkType === 'router'" to="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
+                        <router-link v-if="optionLinkType === 'router'" to="#"
+                                     @click.prevent="selectOption(option.value)"
+                                     :class="{'active' : option.value === modelValue}">
                             <!-- begin CmdIcon -->
-                            <CmdIcon v-if="option.iconClass" :iconClass="option.iconClass" :type="option.iconType" />
+                            <CmdIcon v-if="option.iconClass" :iconClass="option.iconClass" :type="option.iconType"/>
                             <!-- end CmdIcon -->
                             <span>{{ option.text }}</span>
                         </router-link>
@@ -110,10 +115,12 @@
                 <!-- end default dropdown (incl. optional icon) -->
 
                 <!-- begin dropdown with checkboxes/countries/colors -->
-                <ul v-else-if="type !== 'default' && type !== 'content' && showOptions" :class="{'checkbox-options': type === 'checkboxOptions'}" :aria-expanded="showOptions">
+                <ul v-else-if="type !== 'default' && type !== 'content' && showOptions"
+                    :class="{'checkbox-options': type === 'checkboxOptions'}" :aria-expanded="showOptions">
                     <li v-for="(option, index) in selectData" :key="index">
                         <!-- begin checkboxes -->
-                        <label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : modelValue.includes(`${option.value}`)}">
+                        <label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)"
+                               :class="{'active' : modelValue.includes(`${option.value}`)}">
                             <input type="checkbox" :value="option.value" @change="optionSelect"
                                    :checked="compareValues(option.value)" :id="'option-' + (index + 1)"/>
                             <span>{{ option.text }}</span>
@@ -122,7 +129,8 @@
 
                         <!-- begin country-flags -->
                         <a v-else-if="type === 'country'" href="#"
-                           @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
+                           @click.prevent="selectOption(option.value)"
+                           :class="{'active' : option.value === modelValue}">
                             <img class="flag" :src="pathFlag(option.value)"
                                  :alt="option.text"/>
                             <span>{{ option.text }}</span>
@@ -130,7 +138,8 @@
                         <!-- end country-flags -->
 
                         <!-- begin color-boxes -->
-                        <a v-else-if="type === 'color'" href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
+                        <a v-else-if="type === 'color'" href="#" @click.prevent="selectOption(option.value)"
+                           :class="{'active' : option.value === modelValue}">
                             <span class="color" :style="'background: ' + option.value"></span>
                             <span>{{ option.text }}</span>
                         </a>
@@ -141,8 +150,10 @@
                     <li v-if="showSelectAllOptions && type === 'checkboxOptions'" class="select-all-options">
                         <a href="#" @click.prevent="toggleAllOptions">
                             <!-- begin CmdIcon -->
-                            <CmdIcon v-if="!allOptionsSelected" :iconClass="iconSelectAllOptions.iconClass" :type="iconSelectAllOptions.iconType" />
-                            <CmdIcon v-else :iconClass="iconDeselectAllOptions.iconClass" :type="iconDeselectAllOptions.iconType" />
+                            <CmdIcon v-if="!allOptionsSelected" :iconClass="iconSelectAllOptions.iconClass"
+                                     :type="iconSelectAllOptions.iconType"/>
+                            <CmdIcon v-else :iconClass="iconDeselectAllOptions.iconClass"
+                                     :type="iconDeselectAllOptions.iconType"/>
                             <!-- end CmdIcon -->
                             <span>{{ selectAllOptionsText }}</span>
                         </a>
@@ -191,11 +202,18 @@ export default {
         /**
          * set different default selectbox-types for
          *
-         * @allowedValues: default, color, country, checkboxOptions
+         * @allowedValues: default, color, country, content, checkboxOptions
          */
         type: {
             type: String,
-            default: "default"
+            default: "default",
+            validator(value) {
+                return value === "default" ||
+                    value === "color" ||
+                    value === "country" ||
+                    value === "content" ||
+                    value === "checkboxOptions"
+            }
         },
         /**
          * set type of option-links
@@ -204,7 +222,11 @@ export default {
          */
         optionLinkType: {
             type: String,
-            default: "href"
+            default: "href",
+            validator(value) {
+                return value === "href" ||
+                    value === "router"
+            }
         },
         /**
          * set default v-model (must be named modelValue in Vue3)
@@ -234,12 +256,19 @@ export default {
         /**
          * status (i.e. for validation)
          *
-         * @allowedValues: error, warning, success, info
+         * @allowedValues: "" , error, warning, success, info
          * @affectsStyling: true
          */
         status: {
             type: String,
-            required: false
+            required: false,
+            validator(value) {
+                return value === "" ||
+                    value === "error" ||
+                    value === "warning" ||
+                    value === "success" ||
+                    value === "info"
+            }
         },
         /**
          * icon for dropdown-icon (i.e. an angle/arrow)
@@ -273,6 +302,13 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * activate if interactive status-icon (to show requirements) should be shown inline with label
+         */
+        showStatusIcon: {
+            type: Boolean,
+            default: true
+        },
         /**
          * path to flag-files (will be combined with flag isoCode to load svg)
          */
@@ -284,8 +320,8 @@ export default {
          * default text if no option is selected (and first option is not used)
          */
         textPleaseSelect: {
-           type: String,
-           default: "Please select\u2026"
+            type: String,
+            default: "Please select\u2026"
         },
         /**
          * set icon for "select all"-option
@@ -334,7 +370,7 @@ export default {
 
                 // if find() returns some data, return this data
                 if (result) {
-                   return result.text
+                    return result.text
                 }
             }
 
@@ -369,7 +405,7 @@ export default {
         },
         optionCountry() {
             if (this.type === "country") {
-                   return this.modelValue || this.selectData?.[0]?.value
+                return this.modelValue || this.selectData?.[0]?.value
             }
             return null
         },
@@ -498,17 +534,11 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style>
 /* begin cmd-fake-select ------------------------------------------------------------------------------------------ */
-@mixin disabled-styles {
-    color: var(--disabled-color);
-    border-color: var(--disabled-color);
-    background: var(--disabled-background-color);
-}
-
 .cmd-fake-select {
     align-self: flex-end;
-    border-radius: var(--border-radius);
+    border-radius: var(--default-border-radius);
 
     > span:first-child {
         a {
@@ -522,17 +552,19 @@ export default {
         display: block;
         min-width: 0;
         box-shadow: none;
-        border-radius: var(--border-radius);
+        border-radius: var(--default-border-radius);
 
         > li {
             height: 100%;
+            border-radius: var(--default-border-radius);
 
             &:first-child {
                 > a {
                     height: inherit;
                     border: var(--default-border);
-                    background: var(--color-scheme-background-color);
+                    background: var(--color-scheme-background);
                     color: var(--color-scheme-text-color);
+                    border-radius: var(--default-border-radius);
 
                     span, [class*="icon"] {
                         color: var(--color-scheme-text-color);
@@ -562,11 +594,27 @@ export default {
 
         &.open {
             border-bottom: 0;
+            ul {
+                border-bottom-left-radius: var(--default-border-radius);
+                border-bottom-right-radius: var(--default-border-radius);
+
+                > li {
+                    &:first-child {
+                        > a {
+                            border-color: var(--primary-color);
+                            border-bottom-left-radius: 0;
+                            border-bottom-right-radius: 0;
+                        }
+                    }
+                }
+
+                > li:last-child {
+                    border-bottom-left-radius: inherit;
+                    border-bottom-right-radius: inherit;
 
-            > li {
-                &:first-child {
                     > a {
-                        border-color: var(--primary-color);
+                        border-bottom-left-radius: inherit;
+                        border-bottom-right-radius: inherit;
                     }
                 }
             }
@@ -586,7 +634,6 @@ export default {
             border-bottom: var(--default-border);
             text-decoration: none;
 
-
             &:hover, &:active, &:focus {
                 background: var(--primary-color);
 
@@ -638,9 +685,9 @@ export default {
             z-index: 10;
             min-width: 100%;
             margin: 0;
-            border-bottom-right-radius: var(--border-radius);
-            border-bottom-left-radius: var(--border-radius);
-            background: var(--color-scheme-background-color);
+            border-bottom-right-radius: var(--default-border-radius);
+            border-bottom-left-radius: var(--default-border-radius);
+            background: var(--color-scheme-background);
             border: var(--primary-border);
 
             li {
@@ -672,45 +719,36 @@ export default {
         }
     }
 
-    // use additional class in selector to gain high specificity
+    /* use additional class in selector to gain high specificity */
     &.has-state.label {
-        > ul {
-            > li {
-                > a {
-                    border-color: var(--status-color);
-
-                    > span, [class*="icon-"] {
-                        color: var(--status-color);
-                    }
+        &.error * {
+            --status-color: var(--error-color);
+        }
 
-                    &:hover, &:active, &:focus {
-                        background: var(--color-scheme-background-color);
+        &.success * {
+            --status-color: var(--success-color);
+        }
 
-                        span {
-                            color: var(--status-color);
-                        }
-                    }
-                }
+        .label-text {
+            > span, [class*="icon-"] {
+                color: var(--status-color);
             }
         }
-    }
 
-    &.disabled {
         > ul {
-            > li {
+            > li:first-child {
                 > a {
-                    @include disabled-styles;
+                    border-color: var(--status-color);
 
-                    span {
-                        color: var(--disabled-color);
+                    > span, [class*="icon-"] {
+                        color: var(--status-color);
                     }
 
                     &:hover, &:active, &:focus {
-                        cursor: not-allowed;
-                        @include disabled-styles;
+                        background: var(--color-scheme-background);
 
                         span {
-                            color: var(--disabled-color);
+                            color: var(--status-color);
                         }
                     }
                 }
@@ -748,6 +786,39 @@ export default {
         }
     }
 }
+</style>
+
+<style lang="scss">
+@mixin disabled-styles {
+    color: var(--disabled-color);
+    border-color: var(--disabled-color);
+    background: var(--disabled-background);
+}
+
+.cmd-fake-select {
+    &.disabled {
+        > ul {
+            > li {
+                > a {
+                    @include disabled-styles;
+
+                    span {
+                        color: var(--disabled-color);
+                    }
+
+                    &:hover, &:active, &:focus {
+                        cursor: not-allowed;
+                        @include disabled-styles;
+
+                        span {
+                            color: var(--disabled-color);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
 
 /* end cmd-fake-select ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdFancyBox.vue

@@ -480,7 +480,7 @@ export default FancyBox
     min-width: 30vw;
     min-height: 30vh;
     background: var(--pure-white);
-    border-radius: var(--border-radius);
+    border-radius: var(--default-border-radius);
     overflow: hidden;
     gap: calc(var(--default-gap) / 2);
 
@@ -569,7 +569,7 @@ export default FancyBox
                 min-height: 0;
 
                 &[class*="print"] > [class*="icon-"] {
-                    color: var(--text-color);
+                    color: var(--default-text-color);
                 }
 
                 &.print-grayscale {

package/src/components/CmdFormElement.vue

@@ -28,18 +28,6 @@
                 <sup v-if="$attrs.required" aria-hidden="true">*</sup>
             </span>
 
-            <!-- begin CmdTooltipForInputElements -->
-            <CmdTooltipForInputElements
-                v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
-                ref="tooltip"
-                :validationStatus="validationStatus"
-                :validationMessage="getValidationMessage"
-                :relatedId="tooltipId"
-                :cmdListOfRequirements="listOfRequirements"
-                :role="validationStatus === 'error' ? 'alert' : 'dialog'"
-            />
-            <!-- end CmdTooltipForInputElements -->
-
             <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
                href="#"
                @click.prevent
@@ -51,6 +39,17 @@
                 <CmdIcon :iconClass="getStatusIconClass"/>
                 <!-- end CmdIcon -->
             </a>
+
+            <!-- begin CmdTooltipForFormElements -->
+            <CmdTooltipForFormElements
+                v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
+                ref="tooltip"
+                :validationStatus="validationStatus"
+                :relatedId="tooltipId"
+                :cmdListOfRequirements="listOfRequirements"
+                :role="validationStatus === 'error' ? 'alert' : 'dialog'"
+            />
+            <!-- end CmdTooltipForFormElements -->
         </span>
         <!-- end label-text (+ required asterisk) -->
 
@@ -163,22 +162,27 @@
                 :id="htmlId"
                 @blur="onBlur"
                 @change="$emit('update:modelValue', $event.target.value)">
-            <option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
-                    :selected="option.value === modelValue">{{ option.text }}
+            <option
+                v-for="(option, index) in selectOptions"
+                :key="index"
+                :value="option.value"
+                :selected="option.value === modelValue"
+            >
+                {{ option.text }}
             </option>
         </select>
         <!-- end selectbox -->
 
         <!-- begin textarea -->
-        <textarea v-if="element === 'textarea'"
-                  v-bind="elementAttributes"
-                  :id="htmlId"
-                  :value="modelValue"
-                  :maxlength="getMaxLength()"
-                  @input="onInput"
-                  @focus="tooltip = true"
-                  @blur="onBlur">
-        </textarea>
+        <textarea
+            v-if="element === 'textarea'"
+            v-bind="elementAttributes"
+            :id="htmlId"
+            :value="modelValue"
+            :maxlength="getMaxLength()"
+            @input="onInput"
+            @focus="tooltip = true"
+            @blur="onBlur"></textarea><!-- no line-break to avoid empty spaces inside textarea -->
         <span v-if="element === 'textarea' && showCharactersTextarea" class="characters-left-wrapper">
             <span v-if="textCharactersLeft">{{ textCharactersLeft }}</span>
             <span :class="['characters-left', {error: charactersLeft === 0}]">{{ charactersLeft }}</span>
@@ -390,7 +394,7 @@ export default {
             required: false
         },
         /**
-         * activate if interactive status-icon (to show requirements) should be shown above form-element
+         * activate if interactive status-icon (to show requirements) should be shown inline with label
          */
         showStatusIcon: {
             type: Boolean,
@@ -441,13 +445,20 @@ export default {
         /**
          * set status for label and form-element
          *
-         * @allowedValues: error, warning, success, info
+         * @allowedValues: "", error, warning, success, info
          *
          * @affectsStyling: true
          */
         status: {
             type: String,
-            required: false
+            required: false,
+            validator(value) {
+                return value === "" ||
+                    value === "error" ||
+                    value === "warning" ||
+                    value === "success" ||
+                    value === "info"
+            }
         },
         /**
          * toggle display of number of used and allowed characters for textarea
@@ -513,7 +524,7 @@ export default {
          * icon for error-validated items in list-of-requirements
          *
          * element-property must be set to 'input'
-         * showRequirements-subproperty (of CmdListOfRequirements)  must be set to 'true'
+         * showRequirements-subproperty (of CmdListOfRequirements) must be set to 'true'
          *
          */
         iconHasStateError: {
@@ -720,6 +731,9 @@ export default {
         }
     },
     methods: {
+        setFocus() {
+            this.$refs.label.querySelector("input, select, textarea")?.focus()
+        },
         additionalStandardRequirements() {
             const requirements = []
             // check if field is type "email"
@@ -852,10 +866,19 @@ export default {
     /* icon right aligned in input */
     input + .place-inside {
         left: auto;
-        right: .5rem
+        right: .5rem;
+        color: var(--hyperlink-color);
+
+        span {
+            color: inherit;
+        }
     }
 
     &.has-state, & + .cmd-tooltip {
+        * {
+            --status-color: var(--error-color);
+        }
+
         ::placeholder {
             color: var(--status-color);
         }
@@ -864,9 +887,13 @@ export default {
             color: var(--status-color);
 
             &.place-inside {
-                --status-color: var(--error-color);
+                color: inherit;
             }
         }
+
+        &.success * {
+            --status-color: var(--success-color);
+        }
     }
 
     :is(input[type="checkbox"], input[type="radio"]):checked {
@@ -886,6 +913,10 @@ export default {
     .search-field-wrapper {
         margin: 0;
 
+        input[type="search"] {
+            border-radius: var(--default-border-radius);
+        }
+
         a {
             position: absolute;
             top: 50%;
@@ -893,10 +924,10 @@ export default {
             transform: translateY(-50%);
             z-index: 100;
 
-            // set styles to avoid overwriting by has-state-colors
+            /* set styles to avoid overwriting by has-state-colors */
             &.button {
                 span {
-                    color: var(--color-scheme-background-color);
+                    color: var(--color-scheme-background);
                 }
 
                 &:hover, &:active, &:focus {
@@ -907,11 +938,6 @@ export default {
             }
         }
 
-        input:not(:only-child) {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
         a.button {
             right: 0;
 

package/src/components/CmdGoogleMaps.vue

@@ -34,6 +34,11 @@ export default {
 /* begin cmd-google-maps ---------------------------------------------------------------------------------------- */
 .cmd-google-maps {
     border: var(--default-border);
+    border-radius: var(--default-border-radius);
+
+    iframe {
+        border-radius: inherit;
+    }
 }
 /* end cmd-google-maps ------------------------------------------------------------------------------------------ */
 </style>