@mozaic-ds/vue 0.25.0 → 0.27.0

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
     "lint": "vue-cli-service lint",
-    "build:bundle": "vue-cli-service build --target lib --name mozaic-vue ./src/index.js",
-    "build:bundleAdeo": "vue-cli-service build --target lib --formats umd --mode adeo --filename mozaic-vue.adeo ./src/index.js --no-clean",
+    "build:bundle": "MOZAIC_PRESET=lm vue-cli-service build --target lib --name mozaic-vue ./src/index.js",
+    "build:bundleAdeo": "MOZAIC_PRESET=adeo vue-cli-service build --target lib --formats umd --mode adeo --filename mozaic-vue.adeo ./src/index.js --no-clean",
     "postinstall": "node postinstall.js",
     "prepublishOnly": "npm run-script build:bundle && npm run-script build:bundleAdeo",
     "publish:beta": "npm publish --access public --tag alpha",

package/src/components/autocomplete/MAutocomplete.vue

@@ -41,6 +41,7 @@
       :data-text-expr="dataTextExpr"
       :data-value-expr="dataValueExpr"
       :is-filtered="isFiltered"
+      :max-width="maxWidth"
       @change="onChange"
     >
       <template #item="{ item }">
@@ -169,7 +170,7 @@ export default {
     // Global
     maxWidth: {
       type: String,
-      default: '17.875rem',
+      default: '100%', // 17.875rem
     },
   },
 
@@ -220,8 +221,7 @@ export default {
     },
 
     listboxValue: function (val) {
-      const value = Array.isArray(val) ? val : val.toString();
-      const selectedItems = this.getSelectedItems(value);
+      const selectedItems = this.getSelectedItems(val);
 
       const seletedLabels = selectedItems.map(
         (item) => item[this.dataTextExpr]
@@ -306,9 +306,11 @@ export default {
     getSelectedItems(val) {
       const value = val ? val : this.listboxValue;
 
-      const selectedItems = this.items.filter((item) =>
-        value.includes(item[this.dataValueExpr])
-      );
+      const selectedItems = this.items.filter((item) => {
+        return this.multiple
+          ? value.includes(item[this.dataValueExpr])
+          : value === item[this.dataValueExpr];
+      });
 
       return selectedItems;
     },
@@ -364,6 +366,10 @@ export default {
     top: $mu075;
     z-index: 10;
   }
+
+  &__trigger {
+    width: 100%;
+  }
 }
 
 .mc-autocomplete--multi .mc-autocomplete__trigger {

package/src/components/flag/MFlag.vue

@@ -1,6 +1,6 @@
 <template>
   <component :is="htmlTag" class="mc-flag" :class="setClasses">
-    {{ label }}
+    <span class="mc-flag__label">{{ label }}</span>
   </component>
 </template>
 

package/src/components/listbox/MListBox.vue

@@ -4,6 +4,7 @@
     class="mc-listbox"
     aria-labelledby="listbox"
     :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
+    :style="{ '--listbox-width': maxWidth }"
   >
     <template v-if="!isFiltered">
       <li
@@ -91,6 +92,10 @@ export default {
       type: [Array, String, Number],
       default: undefined,
     },
+    maxWidth: {
+      type: String,
+      default: '17.875rem',
+    },
   },
 
   data() {