@mozaic-ds/vue 0.35.0-beta.0 → 0.35.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.35.0-beta.0",
+  "version": "0.35.0-beta.2",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -27,13 +27,13 @@
     "@mozaic-ds/icons": "1.49.0",
     "@mozaic-ds/styles": "1.51.0",
     "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.27.0",
+    "core-js": "^3.27.1",
     "libphonenumber-js": "^1.10.15",
     "vue": "^2.6.14",
     "vue-country-flag": "2.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.20.12",
     "@babel/eslint-parser": "^7.19.1",
     "@rushstack/eslint-patch": "^1.2.0",
     "@vue/cli-plugin-babel": "~5.0.8",
@@ -41,8 +41,8 @@
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/eslint-config-prettier": "^7.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.30.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.8.0",
     "postcss": "^8.4.20",
     "postcss-loader": "^7.0.2",

package/src/components/autocomplete/MAutocomplete.vue

@@ -21,10 +21,10 @@
         :id="id"
         v-model="inputValue"
         :placeholder="placeholder"
-        :is-invalid="invalid"
+        :is-invalid="isInvalid"
         :disabled="disabled"
         :size="size"
-        :root-class="{ 'is-invalid': invalid }"
+        :root-class="getInvalidRootClass"
         text-input-field-class="mc-autocomplete__trigger"
         icon-position="left"
         icon="DisplaySearch48"
@@ -44,6 +44,7 @@
       </button>
     </div>
     <MListBox
+      v-if="!isFiltered"
       v-model="listboxValue"
       :open="openState"
       :items="localItems"
@@ -52,7 +53,6 @@
       :data-key-expr="dataKeyExpr"
       :data-text-expr="dataTextExpr"
       :data-value-expr="dataValueExpr"
-      :is-filtered="isFiltered"
       :max-width="maxWidth"
       @change="onChangeListbox"
     >
@@ -60,6 +60,9 @@
         <slot name="item" :item="item"></slot>
       </template>
     </MListBox>
+    <div v-else class="mc-autocomplete__error">
+      {{ emptySearchLabel }}
+    </div>
   </div>
 </template>
 
@@ -230,6 +233,12 @@ export default {
     hasValues() {
       return this.inputValue?.length > 0;
     },
+    isInvalid() {
+      return this.invalid || this.isFiltered;
+    },
+    getInvalidRootClass() {
+      return (this.isInvalid && 'is-invalid') || null;
+    },
   },
 
   watch: {
@@ -239,6 +248,13 @@ export default {
       },
       immediate: true,
     },
+    localItems: {
+      handler: function (val) {
+        // this.localItems = val;
+        this.isFiltered = !val.length;
+        this.$emit('list-filtered', val);
+      },
+    },
     input: {
       handler: function (val) {
         this.inputValue = val;
@@ -309,18 +325,24 @@ export default {
     filterList(value) {
       if (value.length && this.filter) {
         this.filter(value);
-      } else if (value.length && this.filterOnType) {
-        this.localItems = this.items.filter((item) =>
-          item[this.dataTextExpr].toUpperCase().includes(value.toUpperCase())
-        );
-
-        this.isFiltered = !this.localItems.length;
       } else {
-        this.localItems = this.items;
-        this.isFiltered = !this.localItems.length;
-      }
+        if (!this.filterOnType) {
+          return;
+        }
 
-      this.$emit('list-filtered', this.localItems);
+        if (value.length) {
+          this.localItems = this.items.filter((item) =>
+            item[this.dataTextExpr].toUpperCase().includes(value.toUpperCase())
+          );
+
+          // this.isFiltered = !this.localItems.length;
+        } else {
+          this.localItems = this.items;
+          // this.isFiltered = !this.localItems.length;
+        }
+
+        // this.$emit('list-filtered', this.localItems);
+      }
     },
     closeListBox() {
       this.openState = false;
@@ -384,6 +406,18 @@ export default {
 @import 'components/c.autocomplete';
 
 .mc-autocomplete {
+  &__main {
+    position: relative;
+  }
+
+  &__error {
+    @include set-font-scale('04', 'm');
+
+    color: $color-fields-error;
+    display: inline-block;
+    margin-top: $mu025;
+  }
+
   .mc-autocomplete__trigger {
     padding-right: $mu300;
   }

package/src/components/listbox/MListBox.vue

@@ -6,37 +6,32 @@
     :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
     :style="{ '--listbox-width': maxWidth }"
   >
-    <template v-if="!isFiltered">
-      <li
-        v-for="(item, index) in localItems"
-        :key="item.id"
-        class="mc-listbox__item"
-      >
-        <MIcon
-          v-if="item.icon"
-          :name="item.icon"
-          class="mc-listbox__icon"
-          color="#666666"
-        />
-        <input
-          :id="setItemId(index)"
-          v-model="localValue"
-          class="mc-listbox__input"
-          :class="{ 'mc-checkbox__input': multiple }"
-          :type="multiple ? 'checkbox' : 'radio'"
-          :value="item[dataValueExpr]"
-          :name="!multiple ? `listboxradio-${uuid}` : null"
-          @change="onChange"
-        />
-        <label :for="setItemId(index)" class="mc-listbox__label">
-          <slot name="item" :item="item">
-            {{ item[dataTextExpr] }}
-          </slot>
-        </label>
-      </li>
-    </template>
-    <li v-else class="mc-listbox__item">
-      <span class="mc-listbox__empty">{{ emptySearchLabel }}</span>
+    <li
+      v-for="(item, index) in localItems"
+      :key="item.id"
+      class="mc-listbox__item"
+    >
+      <MIcon
+        v-if="item.icon"
+        :name="item.icon"
+        class="mc-listbox__icon"
+        color="#666666"
+      />
+      <input
+        :id="setItemId(index)"
+        v-model="localValue"
+        class="mc-listbox__input"
+        :class="{ 'mc-checkbox__input': multiple }"
+        :type="multiple ? 'checkbox' : 'radio'"
+        :value="item[dataValueExpr]"
+        :name="!multiple ? `listboxradio-${uuid}` : null"
+        @change="onChange"
+      />
+      <label :for="setItemId(index)" class="mc-listbox__label">
+        <slot name="item" :item="item">
+          {{ item[dataTextExpr] }}
+        </slot>
+      </label>
     </li>
   </ul>
 </template>
@@ -64,18 +59,10 @@ export default {
       type: Boolean,
       default: false,
     },
-    isFiltered: {
-      type: Boolean,
-      default: false,
-    },
     multiple: {
       type: Boolean,
       default: false,
     },
-    emptySearchLabel: {
-      type: String,
-      default: 'No item matching your criteria found',
-    },
     dataKeyExpr: {
       type: String,
       default: 'id',