@mozaic-ds/vue 0.35.0 → 0.35.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.35.0",
+  "version": "0.35.1-beta.1",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {

package/src/components/dropdown/MDropdown.vue

@@ -35,6 +35,7 @@
       :data-key-expr="dataKeyExpr"
       :data-text-expr="dataTextExpr"
       :data-value-expr="dataValueExpr"
+      :max-width="maxWidth"
       @change="onChange"
     >
       <template #item="{ item }">
@@ -144,7 +145,7 @@ export default {
     // Global
     maxWidth: {
       type: String,
-      default: '17.875rem',
+      default: '100%', // 17.875rem
     },
   },
 
@@ -167,8 +168,8 @@ export default {
     },
     setStyles() {
       return {
-        '--tag-width': this.tagWidth,
-        '--max-width': this.maxWidth,
+        '--dropdown-width': this.maxWidth,
+        '--dropdown-tag-width': this.tagWidth,
       };
     },
   },
@@ -194,18 +195,13 @@ 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]
       );
 
-      this.buttonValue = seletedLabels.join(', ');
-
-      if (val.length === 0) {
-        this.buttonValue = this.placeholder;
-      }
+      this.buttonValue =
+        val.length === 0 ? this.placeholder : seletedLabels.join(', ');
 
       if (this.multiple) {
         this.tagValue = val;
@@ -293,32 +289,5 @@ export default {
 
 <style lang="scss">
 @import 'settings-tools/all-settings';
-@import 'components/c.checkbox';
-@import 'components/_c.dropdown';
-
-.mc-dropdown {
-  max-width: var(--max-width);
-
-  &__tag {
-    position: absolute;
-    top: 0;
-    transform: translateY(50%);
-  }
-
-  &__trigger {
-    display: block;
-    text-align: left;
-
-    &.is-open {
-      background-image: url(inline-icons('arrow-top-16', black));
-    }
-  }
-}
-
-.mc-dropdown--multi .mc-dropdown__trigger {
-  overflow: hidden;
-  padding-left: calc(0.75rem + var(--tag-width));
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+@import 'components/c.dropdown';
 </style>