comand-component-library 3.1.44 → 3.1.47

package/src/components/CmdFakeSelect.vue

@@ -1,121 +1,254 @@
 <template>
-    <div :class="[status, 'cmd-fake-select label']">
-        <span>{{ labelText }}</span>
+    <div
+        :class="[
+            validationStatus,
+            'cmd-fake-select label',
+            {
+                color: type === 'color',
+                'has-state': validationStatus && validationStatus !== 'none'
+            }
+        ]"
+         :aria-labelledby="labelText"
+         :aria-required="$attrs.required !== undefined"
+         ref="fakeselect"
+    >
+        <span>
+            <!-- begin label -->
+            <span>
+                {{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup>
+            </span>
+            <!-- end label -->
+            <a v-if="$attrs.required || inputRequirements.length"
+                href="#"
+                @click.prevent
+                :class="getStatusIconClass"
+                :title="!useCustomTooltip ? getValidationMessage : ''"
+                :aria-errormessage="getValidationMessage"
+                aria-live="assertive"
+                :id="tooltipId"
+                :role="validationStatus === 'error' ? 'alert' : 'dialog'">
+            </a>
+        </span>
         <ul :class="{'open': showOptions}" @clickout="closeOptions">
             <li>
-                <a href="#" @click.prevent="toggleOptions">
-                    <img v-if="type === 'country'" :src="pathFlag(optionCountry)" :alt="optionCountry" class="flag" :class="optionCountry"/>
-                    <span v-else-if="type === 'color'" class="color"
-                          :style="'background: ' + optionColor"></span>
+                <!-- begin default/selected-option -->
+                <a href="#" @click.prevent="toggleOptions" @blur="onBlur">
+                    <img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry" :class="['flag', optionCountry]"/>
+                    <span v-else-if="type === 'color'" :style="'background: ' + optionColor"></span>
                     <span v-if="optionIcon" :class="optionIcon"></span>
-                    <span>{{ optionName }}</span>
-                    <span :class="dropdownIconClass"></span>
+                    <span class="option-name" :style="limitWidthStyle">{{ optionName }}</span>
+                    <span v-if="dropdownIcon" :class="dropdownIcon.iconClass" :title="dropdownIcon.tooltip"></span>
                 </a>
+                <!-- end default/selected-option-->
 
                 <!-- begin default dropdown (incl. optional icon) -->
-                <ul v-if="type === 'default' && showOptions">
-                    <li v-for="(option, index) in selectData" :key="index">
-                        <a href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
-                            <span v-if="option.icon?.iconClass" :class="option.icon.iconClass"></span>
+                <ul v-if="type === 'default' && showOptions" :aria-expanded="showOptions">
+                    <li v-for="(option, index) in selectData" :key="index" role="option">
+                        <!-- begin type 'href' -->
+                        <a v-if="optionLinkType === 'href'" href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
+                            <span v-if="option.iconClass" :class="option.iconClass"></span>
                             <span>{{ 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}">
+                            <span v-if="option.iconClass" :class="option.iconClass"></span>
+                            <span>{{ option.text }}</span>
+                        </router-link>
+                        <!-- end type 'router' -->
                     </li>
                 </ul>
                 <!-- end default dropdown (incl. optional icon) -->
 
                 <!-- begin dropdown with checkboxes -->
-                <ul v-else-if="type !== 'default' && type !== 'content' && showOptions" class="checkbox-options">
+                <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">
-                        <label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : value.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="value.includes(`${option.value}`)" :id="'option-' + (index + 1)"/>
+                                   :checked="modelValue.includes(`${option.value}`)" :id="'option-' + (index + 1)"/>
                             <span>{{ option.text }}</span>
                         </label>
 
                         <a v-else-if="type === 'country'" href="#"
-                           @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
+                           @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
                             <img class="flag" :src="pathFlag(option.value)"
                                  :alt="option.text"/>
                             <span>{{ option.text }}</span>
                         </a>
 
-                        <a v-else href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
+                        <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>
+                            <span>{{ option.text }}</span>
+                        </a>
+                    </li>
+                    <li v-if="showSelectAllOptions && type === 'checkboxOptions'" class="select-all-options">
+                        <a href="#" @click.prevent="toggleAllOptions">
+                            <span :class="selectAllOptionsIcon"></span>
+                            <span>{{ selectAllOptionsText }}</span>
                         </a>
                     </li>
                 </ul>
                 <!-- end dropdown with checkboxes -->
 
                 <!-- begin dropdown with slot -->
-                <template v-else-if="type === 'content' && showOptions">
+                <template v-else-if="type === 'content' && showOptions" :aria-expanded="showOptions">
                     <slot></slot>
                 </template>
                 <!-- end dropdown with slot -->
             </li>
         </ul>
     </div>
+    <!-- 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"
+            :validatioStatus="validationStatus"
+            :iconClose="{show: false}"
+        />
+        <!-- end CmdSystemMessage -->
+
+        <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
+            <!-- begin list of requirements -->
+            <h6>{{ getMessage("cmdfakeselect.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) ? 'icon-check-circle' : 'icon-error-circle'" :title="requirement.valid(modelValue, $attrs) ? 'success' : 'error'"></span>
+                    </dd>
+                </template>
+            </dl>
+            <!-- end list of requirements -->
+
+            <!-- begin helplink -->
+            <template v-if="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>
+            </template>
+            <!-- end helplink -->
+        </template>
+    </CmdTooltip>
+    <!-- end CmdTooltip -->
 </template>
 
 <script>
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
+import FieldValidation from "../mixins/FieldValidation.js"
+import Tooltip from "../mixins/Tooltip.js"
+
+// import components
+import CmdSystemMessage from "./CmdSystemMessage"
+import CmdTooltip from "./CmdTooltip"
+
 export default {
     name: 'CmdFakeSelect',
+    inheritAttrs: false,
+    mixins: [
+        I18n,
+        DefaultMessageProperties,
+        FieldValidation,
+        Tooltip
+    ],
+    components: {
+        CmdSystemMessage,
+        CmdTooltip
+    },
     data() {
         return {
-            showOptions: false
+            showOptions: false,
+            validationStatus: "",
+            limitWidthStyle: {}
         }
     },
     props: {
         /**
          * set different default selectbox-types for
          *
-         * values: "(none), color, country, filterlist"
+         * @allowedValues: default, color, country, checkboxOptions
          */
         type: {
             type: String,
             default: "default"
         },
         /**
-         * set default value
+         * set type of option-links
+         *
+         * @allowedValues: href, router
          */
-        value: {
-            type: [String, Array],
-            required: false
+        optionLinkType: {
+            type: String,
+            default: "href"
         },
         /**
-         * set default option name
+         * set default v-model (must be named modelValue in Vue3)
          */
-        defaultOptionName: {
-            type: String,
-            required: false
+        modelValue: {
+            type: [String, Array],
+            default: ""
         },
         /**
          * list of options to select (incl. displayed names and values)
+         *
+         * type-property must be set to "checkboxOptions"
          */
         selectData: {
             type: Array,
             required: false
         },
+        /**
+         * toggles option to (de)select all options in a checkbox-list
+         *
+         * type-property must be set to "checkboxOptions"
+         */
+        showSelectAllOptions: {
+            type: Boolean,
+            default: true
+        },
         /**
          * status (i.e. for validation)
          *
-         * values: "error, success, disabled"
+         * @allowedValues: error, success, disabled
+         * @affectsStyling: true
          */
         status: {
             type: String,
             required: false
         },
         /**
-         * icon-class for dropdown icon (i.e. an angle/arrow)
+         * icon for dropdown-icon (i.e. an angle/arrow)
+         *
+         * @requiredForAccessibility: partial
+         * @defaultIcon: icon-single-arrow-down
          */
-        dropdownIconClass: {
-            type: String,
-            default: "icon-single-arrow-down"
+        dropdownIcon: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-single-arrow-down",
+                    tooltip: "Toggle dropdown visibility"
+                }
+            }
         },
         /**
          * label-text for fake-select
+         *
+         *  @requiredForAccessibility: true
          */
         labelText: {
             type: String,
@@ -133,8 +266,8 @@ export default {
         // get the displayed option name
         optionName() {
             // fake a normal checkbox
-            if (this.type !== "checkboxOptions" && this.type !== "content" && this.value) {
-                const result = this.selectData.find(option => option.value === this.value)?.text
+            if (this.type !== "checkboxOptions" && this.type !== "content" && this.modelValue) {
+                const result = this.selectData.find(option => option.value === this.modelValue)?.text
 
                 // if find() returns some data, return this data
                 if (result) {
@@ -144,67 +277,149 @@ export default {
 
             // selectbox with checkbox-options
             else if (this.type === "checkboxOptions") {
-                if (this.value.length === 1) {
-                    return this.selectData.find(option => option.value === this.value[0])?.text
-                } else if (this.value.length > 1) {
-                    return this.value.length + " options selected"
+                if (this.modelValue.length === 1) {
+                    return this.selectData.find(option => option.value === this.modelValue[0])?.text
+                } else if (this.modelValue.length > 1) {
+                    return this.modelValue.length + " options selected"
                 }
             }
 
-            // if nothing is selected return the set default option name
-            if (this.defaultOptionName) {
-                return this.defaultOptionName
+            else if (this.selectData?.length) {
+                return this.selectData[0].text
             }
 
-            // if nothing is selected and no default option name is set, return default text (so selectbox is not empty)
-            return "Please select\u2026"
+            return "Please select"
         },
         // get the displayed icon (only available for default selectbox)
         optionIcon() {
             if (this.type === "default") {
                 return this.selectData.find(option => {
-                    return option.value === this.value
+                    return option.value === this.modelValue
                 })?.icon?.iconClass
             }
             return null
         },
         optionCountry() {
             if (this.type === "country") {
-               return this.value
+                return this.modelValue
             }
             return null
         },
         optionColor() {
             if (this.type === "color") {
-                return this.value
+                return this.modelValue
             }
             return null
+        },
+        selectAllOptionsText() {
+            if(Array.isArray(this.modelValue) && this.modelValue.length === this.selectData.length) {
+                return "Deselect all options"
+            }
+            return "Select all options"
+        },
+        selectAllOptionsIcon() {
+            return "icon-check"
         }
     },
+    mounted() {
+        //this.$nextTick(this.limitWidth)
+        //setTimeout(this.limitWidth, 250)
+        const hnd = setInterval(() => {
+            if (this.$refs.fakeselect) {
+                clearInterval(hnd)
+                this.limitWidth()
+            }
+        }, 100)
+    },
     methods: {
+        toggleAllOptions() {
+            this.validationStatus = "success"
+            const checkboxValues = []
+            if(this.modelValue.length === this.selectData.length) {
+                if(this.$attrs.required) {
+                    this.validationStatus = "error"
+                }
+            } else {
+                for (let i = 0; i < this.selectData.length; i++) {
+                    checkboxValues.push(this.selectData[i].value)
+                }
+            }
+
+            this.$emit("update:modelValue", checkboxValues)
+        },
+        limitWidth() {
+            if(this.$refs.fakeselect) {
+                const outerWidth = this.$refs.fakeselect.offsetWidth
+                this.limitWidthStyle = {width: outerWidth / 100 * 90 + "px"}
+            }
+        },
         toggleOptions() {
             if (this.status !== 'disabled') {
                 this.showOptions = !this.showOptions
             }
         },
+        // check is an option is selected for default-selectbox
+        selectOption(optionValue) {
+            this.validationStatus = "success"
+            if(this.$attrs.required !== undefined) {
+                if(!optionValue) {
+                    this.validationStatus = "error"
+                }
+            }
+
+            this.showOptions = false
+            this.$emit('update:modelValue', optionValue);
+        },
+        // check if a checkbox is changed for selectbox with checkboxes
         optionSelect(event) {
-            let value = [...this.value] // copy array from props
+            this.validationStatus = "success"
+
+            let value = [...this.modelValue] // copy array from props
             if (event.target.checked) {
                 value.push(event.target.value); // attention: value will be transformed into string!
             } else {
                 value = value.filter(v => v !== event.target.value);
             }
-            this.$emit('update:value', value);
-        },
-        selectOption(optionValue) {
-            this.showOptions = false
-            this.$emit('update:value', optionValue);
+            if(this.$attrs.required !== undefined && !value.length) {
+                this.validationStatus = "error"
+            }
+
+            this.$emit('update:modelValue', value);
         },
         closeOptions() {
             this.showOptions = false
         },
         pathFlag(isoCode) {
             return this.pathFlags + "/flag-" + isoCode + ".svg"
+        },
+        onBlur() {
+            this.validationStatus = "success"
+
+            if (this.$attrs.required !== undefined && (!this.modelValue || this.modelValue.length === 0)) {
+                this.validationStatus = "error"
+            }
+        },
+        // overwrite requirement-message form fieldValidation.js
+        getRequirementMessage() {
+            return "An option is selected"
+        }
+    },
+    watch: {
+        status: {
+            handler() {
+                this.validationStatus = this.status
+            },
+            immediate: true
+        },
+        selectData: {
+            handler() {
+              // check if given value by modelValue exists (else pre-select first option)
+              if(this.type === "default" && this.selectData?.length && !this.selectData.some((option) => option.value === this.modelValue)) {
+                  this.$emit("update:modelValue", this.selectData[0].value)
+              }
+            },
+            immediate: true,
+            deep: true
         }
     }
 }
@@ -219,6 +434,18 @@ export default {
 }
 
 .cmd-fake-select {
+    align-self: flex-end;
+
+    & + .cmd-tooltip {
+        border-color: var(--status-color);
+    }
+
+    > span:first-child {
+        a {
+            align-self: flex-end;
+        }
+    }
+
     > ul {
         height: var(--input-height);
         margin: 0;
@@ -236,7 +463,12 @@ export default {
                     height: inherit;
                     border: var(--default-border);
 
-                    > [class*='icon-']:last-child {
+                    .option-name {
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+
+                    > [class*="icon-"]:last-child {
                         margin-left: auto;
                         font-size: 1rem;
                     }
@@ -245,6 +477,8 @@ export default {
         }
 
         &.open {
+            border-bottom: 0;
+
             > li {
                 &:first-child {
                     > a {
@@ -299,23 +533,23 @@ export default {
         }
 
         label {
-            &.active {
-                background: var(--light-gray);
-            }
+            display: flex;
+        }
+
+        span {
+            white-space: nowrap;
         }
 
         ul {
             position: absolute;
             list-style: none;
             z-index: 10;
-            width: 100%;
-            margin-left: 0;
-            border-top: 0;
+            min-width: 100%;
+            margin: 0;
             border-bottom-right-radius: var(--border-radius);
             border-bottom-left-radius: var(--border-radius);
             background: var(--pure-white);
             border: var(--primary-border);
-            border-top: 0;
 
             li {
                 &:last-child {
@@ -325,9 +559,22 @@ export default {
                 }
             }
 
+            &.custom-fake-select-content {
+                padding: var(--default-padding);
+
+                img {
+                    display: block;
+                }
+            }
+
             &.checkbox-options {
                 li {
                     padding: calc(var(--default-padding) / 2);
+
+                    &.select-all-options {
+                        border-top: var(--primary-border);
+                        padding: 0;
+                    }
                 }
             }
         }
@@ -344,8 +591,7 @@ export default {
                     }
 
                     &:hover, &:active, &:focus {
-                        border-color: var(--error-color);
-                        background: var(--error-background);
+                        background: var(--pure-white);
 
                         span {
                             color: var(--error-color);
@@ -390,6 +636,24 @@ export default {
             }
         }
     }
+
+    &.color {
+        li {
+            a {
+                gap: calc(var(--default-gap) / 2);
+
+                > span:first-child {
+                    width: 1.5rem;
+                    aspect-ratio: 1;
+                    border: var(--default-border);
+
+                    &[style=""] {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
 }
 
 /* end cmd-fake-select ------------------------------------------------------------------------------------------ */