@mozaic-ds/vue 0.33.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,9 +23,9 @@
     "postinstall.js"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "1.47.0",
+    "@mozaic-ds/css-dev-tools": "1.50.0",
     "@mozaic-ds/icons": "1.49.0",
-    "@mozaic-ds/styles": "1.49.1",
+    "@mozaic-ds/styles": "1.50.0",
     "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.26.1",
     "libphonenumber-js": "^1.10.15",

package/src/components/autocomplete/MAutocomplete.vue

@@ -1,36 +1,47 @@
 <template>
   <div
-    v-click-outside="onClickOutside"
+    v-click-outside="closeListBox"
     class="mc-autocomplete"
     :class="{ 'mc-autocomplete--multi': multiple }"
     :style="setStyles"
   >
-    <MTag
-      v-if="multiple && listboxValue.length > 0"
-      :id="tagId ? tagId : `autocompleteTag-${uuid}`"
-      ref="tag"
-      :label="setTagLabel"
-      :disabled="disabled"
-      type="removable"
-      class="mc-autocomplete__tag"
-      size="s"
-      @remove-tag="clearAutocomplete()"
-    />
-    <MLoader v-if="loading" class="mc-autocomplete__loader" size="s" />
-    <MTextInput
-      :id="id"
-      v-model="inputValue"
-      :placeholder="placeholder"
-      :is-invalid="invalid"
-      :disabled="disabled"
-      text-input-field-class="mc-autocomplete__trigger"
-      icon-position="left"
-      icon="DisplaySearch48"
-      autocomplete="off"
-      type="search"
-      @input="onInput"
-      @click="openState = true"
-    />
+    <div class="mc-autocomplete__main">
+      <MTag
+        v-if="multiple && listboxValue.length > 0"
+        :id="tagId ? tagId : `autocompleteTag-${uuid}`"
+        ref="tag"
+        :label="setTagLabel"
+        :disabled="disabled"
+        type="removable"
+        class="mc-autocomplete__tag"
+        size="s"
+        @remove-tag="clearListbox()"
+      />
+      <MLoader v-if="loading" class="mc-autocomplete__loader" size="s" />
+      <MTextInput
+        :id="id"
+        v-model="inputValue"
+        :placeholder="placeholder"
+        :is-invalid="invalid"
+        :disabled="disabled"
+        :size="size"
+        text-input-field-class="mc-autocomplete__trigger"
+        icon-position="left"
+        icon="DisplaySearch48"
+        autocomplete="off"
+        @input="onInput"
+        @click="openState = true"
+      />
+      <button
+        v-if="hasValues"
+        type="button"
+        class="mc-autocomplete__clear"
+        @click="onClear"
+      >
+        <MIcon name="ControlTagCross24" class="mc-autocomplete__clear-icon" />
+        <span class="mc-autocomplete__clear-text">{{ labelClearButton }}</span>
+      </button>
+    </div>
     <MListBox
       v-model="listboxValue"
       :open="openState"
@@ -42,7 +53,7 @@
       :data-value-expr="dataValueExpr"
       :is-filtered="isFiltered"
       :max-width="maxWidth"
-      @change="onChange"
+      @change="onChangeListbox"
     >
       <template #item="{ item }">
         <slot name="item" :item="item"></slot>
@@ -52,8 +63,9 @@
 </template>
 
 <script>
-import MTag from '../tags/MTag.vue';
+import MIcon from '../icon/MIcon.vue';
 import MLoader from '../loader/MLoader.vue';
+import MTag from '../tags/MTag.vue';
 import MTextInput from '../textinput/MTextInput.vue';
 import MListBox from '../listbox/MListBox.vue';
 
@@ -61,8 +73,9 @@ export default {
   name: 'MAutocomplete',
 
   components: {
-    MTag,
+    MIcon,
     MLoader,
+    MTag,
     MTextInput,
     MListBox,
   },
@@ -118,6 +131,11 @@ export default {
       type: Boolean,
       default: true,
     },
+    size: {
+      type: String,
+      default: 'm',
+      validator: (value) => ['s', 'm'].includes(value),
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -130,6 +148,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    labelClearButton: {
+      type: String,
+      default: 'Clear',
+    },
     // Listbox Element
     items: {
       type: Array,
@@ -180,46 +202,50 @@ export default {
       openState: this.open,
       tagWidth: '0px',
       tagValue: null,
-      inputValue: null,
       localItems: null,
       sortedListItems: null,
-      listboxValue: null,
       isFiltered: null,
     };
   },
 
   computed: {
-    setTagLabel() {
-      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
-    },
     setStyles() {
       return {
         '--autocomplete-tag-width': this.tagWidth,
         '--autocomplete-width': this.maxWidth,
       };
     },
-  },
-
-  watch: {
-    value: {
-      handler: function (val) {
-        if (!val && this.multiple) {
-          this.listboxValue = [];
-        } else {
-          this.listboxValue = val;
-        }
+    setTagLabel() {
+      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    },
+    hasValues() {
+      return this.inputValue?.length > 0;
+    },
+    inputValue: {
+      get: function () {
+        return this.input;
+      },
+      set: function (newValue) {
+        return this.$emit('update:input', newValue);
       },
-      immediate: true,
     },
+    listboxValue: {
+      get: function () {
+        return !this.value && this.multiple ? [] : this.value;
+      },
+      set: function (newValue) {
+        return this.$emit('change', newValue);
+      },
+    },
+  },
 
+  watch: {
     items: {
       handler: function (val) {
         this.localItems = val;
-        // this.clearAutocomplete();
       },
       immediate: true,
     },
-
     listboxValue: function (val) {
       if (!this.multiple) {
         const selectedItems = this.getSelectedItems(val);
@@ -232,23 +258,14 @@ export default {
         this.tagValue = val;
       }
     },
-
     tagValue: function () {
       this.setTagWidth();
     },
-
     openState: function (val) {
       const eventName = val ? 'open' : 'close';
       this.$emit(eventName);
       this.$emit('update:open', val);
     },
-
-    input: {
-      handler: function (val) {
-        this.inputValue = val;
-      },
-      immediate: true,
-    },
   },
 
   methods: {
@@ -261,13 +278,22 @@ export default {
         }
       });
     },
-
-    clearAutocomplete() {
+    clearInput() {
+      this.inputValue = '';
+      this.onInput('');
+    },
+    clearListbox() {
       this.listboxValue = this.multiple ? [] : undefined;
-      this.onChange();
       this.$emit('clear');
     },
-
+    onClear() {
+      if (!this.multiple) {
+        this.clearInput();
+        this.clearListbox();
+      } else {
+        this.clearInput();
+      }
+    },
     filterList(value) {
       if (value.length && this.filter) {
         this.filter(value);
@@ -281,10 +307,10 @@ export default {
         this.localItems = this.items;
         this.isFiltered = !this.localItems.length;
       }
+
       this.$emit('list-filtered', this.localItems);
     },
-
-    onClickOutside() {
+    closeListBox() {
       this.openState = false;
 
       if (this.multiple && this.sort) {
@@ -293,15 +319,11 @@ export default {
         this.localItems = this.items;
       }
     },
-
-    onChange() {
-      this.$emit('change', this.listboxValue);
-
+    onChangeListbox() {
       if (!this.multiple) {
-        this.onClickOutside();
+        this.closeListBox();
       }
     },
-
     getSelectedItems(val) {
       const value = val ? val : this.listboxValue;
 
@@ -313,7 +335,6 @@ export default {
 
       return selectedItems;
     },
-
     sortItems() {
       this.sortedListItems = this.items;
       const selectedItems = this.getSelectedItems();
@@ -333,13 +354,10 @@ export default {
 
       this.localItems = this.sortedListItems;
     },
-
-    handleInputValue(value) {
-      this.$emit('update:input', value);
-    },
-
     onInput(value) {
-      this.handleInputValue(value);
+      if (value.length === 0) {
+        this.$emit('clear-input');
+      }
       this.filterList(value);
     },
   },
@@ -349,4 +367,10 @@ export default {
 <style lang="scss">
 @import 'settings-tools/all-settings';
 @import 'components/c.autocomplete';
+
+.mc-autocomplete {
+  .mc-autocomplete__trigger {
+    padding-right: $mu300;
+  }
+}
 </style>

package/src/components/dropdown/MDropdown.vue

@@ -20,7 +20,7 @@
     <button
       type="button"
       class="mc-select mc-dropdown__trigger"
-      :class="{ 'is-open': openState }"
+      :class="{ 'is-open': openState, 'mc-select--s': size === 's' }"
       :disabled="disabled"
       @click="openState = !openState"
     >
@@ -95,6 +95,11 @@ export default {
       type: Function,
       default: null,
     },
+    size: {
+      type: String,
+      default: 'm',
+      validator: (value) => ['s', 'm'].includes(value),
+    },
     disabled: {
       type: Boolean,
       default: false,

package/src/components/listbox/MListBoxActions.vue

@@ -1,9 +1,15 @@
 <template>
-  <div v-click-outside="onClickOutside" class="mc-listbox-options">
+  <div
+    v-click-outside="onClickOutside"
+    class="mc-listbox-options"
+    :class="{ 'mc-listbox-options--fixed': hasDataTable }"
+    :style="setStyles"
+  >
     <button
+      ref="trigger"
       type="button"
       class="mc-listbox-options__trigger"
-      @click="isOpen = !isOpen"
+      @click="onClickTrigger"
     >
       <m-icon name="DisplayOptions24" :color="triggerIconColor" />
       <span class="mc-listbox-options__trigger-label">{{ triggerLabel }}</span>
@@ -101,6 +107,8 @@ export default {
   data() {
     return {
       isOpen: this.open,
+      posTop: '0px',
+      hasDataTable: false,
     };
   },
 
@@ -116,6 +124,30 @@ export default {
 
       return this.items;
     },
+    setStyles() {
+      return {
+        '--listbox-top': this.hasDataTable ? this.posTop + 'px' : null,
+      };
+    },
+  },
+
+  mounted() {
+    this.hasDataTable =
+      this.$parent.$options._componentTag === 'm-data-table' ? true : false;
+
+    if (this.hasDataTable) {
+      this.$parent.$el
+        .querySelector('.mc-data-table__body')
+        .addEventListener('scroll', this.handleScroll);
+    }
+  },
+
+  destroyed() {
+    if (this.hasDataTable) {
+      this.$parent.$el
+        .querySelector('.mc-data-table__body')
+        .removeEventListener('scroll', this.handleScroll);
+    }
   },
 
   methods: {
@@ -129,6 +161,18 @@ export default {
       );
       this.$emit('update:itemSelected', valToEmit);
     },
+    onClickTrigger() {
+      this.isOpen = !this.isOpen;
+
+      if (this.isOpen && this.hasDataTable) {
+        const buttonHeight = this.$refs.trigger.getBoundingClientRect().height;
+        this.posTop =
+          this.$refs.trigger.getBoundingClientRect().top + buttonHeight;
+      }
+    },
+    handleScroll() {
+      this.isOpen = false;
+    },
   },
 };
 </script>
@@ -137,6 +181,8 @@ export default {
 @import 'settings-tools/all-settings';
 
 .mc-listbox-options {
+  $parent: &;
+
   display: inline-block;
   position: relative;
 
@@ -251,5 +297,14 @@ export default {
       color: #c61112;
     }
   }
+
+  &--fixed {
+    position: static;
+
+    .mc-listbox-options__container {
+      position: fixed;
+      top: var(--listbox-top);
+    }
+  }
 }
 </style>

package/src/components/pagination/MPagination.vue

@@ -5,12 +5,12 @@
       v-if="value > 1"
       :type="hrefPrev ? null : 'button'"
       :href="hrefPrev"
-      class="mc-pagination__button"
+      class="mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
       aria-label="Previous Page"
       :disabled="disabled"
       @click="previousPage(currentPage - 1)"
     >
-      <m-icon name="ArrowArrowLeft24" class="mc-pagination__button-icon" />
+      <MIcon name="ArrowArrowLeft24" class="mc-button__icon" />
     </component>
 
     <div v-if="!light" class="mc-pagination__field">
@@ -35,12 +35,12 @@
       v-if="value < length"
       :type="hrefNext ? null : 'button'"
       :href="hrefNext"
-      class="mc-pagination__button"
+      class="mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
       aria-label="Next Page"
       :disabled="disabled"
       @click="nextPage(currentPage + 1)"
     >
-      <m-icon name="ArrowArrowRight24" class="mc-pagination__button-icon" />
+      <MIcon name="ArrowArrowRight24" class="mc-button__icon" />
     </component>
   </div>
 </template>
@@ -153,6 +153,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'settings-tools/_all-settings';
-@import 'components/_c.pagination';
+@import 'settings-tools/all-settings';
+@import "components/c.button";
+@import 'components/c.pagination';
 </style>

package/src/tokens/adeo/android/colors.xml

@@ -273,11 +273,12 @@
   <color name="color_hero_cover_background">#ff191919</color>
   <color name="color_input_text">#ff191919</color>
   <color name="color_input_border">#ff666666</color>
-  <color name="color_input_placeholder">#ff808080</color>
+  <color name="color_input_placeholder">#ff666666</color>
   <color name="color_input_background">#ffffffff</color>
-  <color name="color_input_disabled_border">#ffe6e6e6</color>
   <color name="color_input_disabled_background">#ffe6e6e6</color>
+  <color name="color_input_disabled_border">#ffe6e6e6</color>
   <color name="color_input_disabled_icon">#ff999999</color>
+  <color name="color_input_disabled_label">#ff808080</color>
   <color name="color_input_hover_border">#ff191919</color>
   <color name="color_input_focus_border">#ff758992</color>
   <color name="color_input_valid_border">#ff46a610</color>
@@ -341,6 +342,8 @@
   <color name="color_option_card_hover_label_shadow">#ff333333</color>
   <color name="color_option_card_checked_label_border">#ff00919f</color>
   <color name="color_option_card_checked_label_shadow">#ffd9f0f3</color>
+  <color name="color_option_card_disabled_content">#ffcccccc</color>
+  <color name="color_option_card_disabled_label">#ff666666</color>
   <color name="color_overlay_background">#ff191919</color>
   <color name="color_overlay_loader_background">#ff082435</color>
   <color name="color_password_input_button_hover_background">#ffe6e6e6</color>
@@ -428,6 +431,7 @@
   <color name="color_tag_removable_dark_icon">#ff191919</color>
   <color name="color_tag_removable_dark_hover_background">#ffb3b3b3</color>
   <color name="color_tag_removable_dark_active_background">#ff999999</color>
+  <color name="color_toggle_label">#ff000000</color>
   <color name="color_toggle_off_background">#ff666666</color>
   <color name="color_toggle_off_circle">#ffffffff</color>
   <color name="color_toggle_on_background">#ff00919f</color>
@@ -435,6 +439,7 @@
   <color name="color_toggle_hover_circle">#ffe6e6e6</color>
   <color name="color_toggle_disabled_background">#ffe6e6e6</color>
   <color name="color_toggle_disabled_circle">#ffb3b3b3</color>
+  <color name="color_toggle_disabled_label">#ff808080</color>
   <color name="color_toggle_disabled_checked_background">#ff91d5db</color>
   <color name="color_toggle_disabled_checked_circle">#ffffffff</color>
   <color name="color_tooltip_background">#ff4d4d4d</color>

package/src/tokens/adeo/css/_variables.scss

@@ -269,11 +269,12 @@ $color-heading-underline-lightest: var(--color-heading-underline-lightest, #91d5
 $color-hero-cover-background: var(--color-hero-cover-background, #191919);
 $color-input-text: var(--color-input-text, #191919);
 $color-input-border: var(--color-input-border, #666666);
-$color-input-placeholder: var(--color-input-placeholder, #808080);
+$color-input-placeholder: var(--color-input-placeholder, #666666);
 $color-input-background: var(--color-input-background, #ffffff);
-$color-input-disabled-border: var(--color-input-disabled-border, #e6e6e6);
 $color-input-disabled-background: var(--color-input-disabled-background, #e6e6e6);
+$color-input-disabled-border: var(--color-input-disabled-border, #e6e6e6);
 $color-input-disabled-icon: var(--color-input-disabled-icon, #999999);
+$color-input-disabled-label: var(--color-input-disabled-label, #808080);
 $color-input-hover-border: var(--color-input-hover-border, #191919);
 $color-input-focus-border: var(--color-input-focus-border, #758992);
 $color-input-valid-border: var(--color-input-valid-border, #46a610);
@@ -337,6 +338,8 @@ $color-option-card-label-shadow: var(--color-option-card-label-shadow, #b3b3b3);
 $color-option-card-hover-label-shadow: var(--color-option-card-hover-label-shadow, #333333);
 $color-option-card-checked-label-border: var(--color-option-card-checked-label-border, #00919f);
 $color-option-card-checked-label-shadow: var(--color-option-card-checked-label-shadow, #d9f0f3);
+$color-option-card-disabled-content: var(--color-option-card-disabled-content, #cccccc);
+$color-option-card-disabled-label: var(--color-option-card-disabled-label, #666666);
 $color-overlay-background: var(--color-overlay-background, #191919);
 $color-overlay-loader-background: var(--color-overlay-loader-background, #082435);
 $color-password-input-button-hover-background: var(--color-password-input-button-hover-background, #e6e6e6);
@@ -424,6 +427,7 @@ $color-tag-removable-dark-text: var(--color-tag-removable-dark-text, #191919);
 $color-tag-removable-dark-icon: var(--color-tag-removable-dark-icon, #191919);
 $color-tag-removable-dark-hover-background: var(--color-tag-removable-dark-hover-background, #b3b3b3);
 $color-tag-removable-dark-active-background: var(--color-tag-removable-dark-active-background, #999999);
+$color-toggle-label: var(--color-toggle-label, #000000);
 $color-toggle-off-background: var(--color-toggle-off-background, #666666);
 $color-toggle-off-circle: var(--color-toggle-off-circle, #ffffff);
 $color-toggle-on-background: var(--color-toggle-on-background, #00919f);
@@ -431,6 +435,7 @@ $color-toggle-on-circle: var(--color-toggle-on-circle, #ffffff);
 $color-toggle-hover-circle: var(--color-toggle-hover-circle, #e6e6e6);
 $color-toggle-disabled-background: var(--color-toggle-disabled-background, #e6e6e6);
 $color-toggle-disabled-circle: var(--color-toggle-disabled-circle, #b3b3b3);
+$color-toggle-disabled-label: var(--color-toggle-disabled-label, #808080);
 $color-toggle-disabled-checked-background: var(--color-toggle-disabled-checked-background, #91d5db);
 $color-toggle-disabled-checked-circle: var(--color-toggle-disabled-checked-circle, #ffffff);
 $color-tooltip-background: var(--color-tooltip-background, #4d4d4d);

package/src/tokens/adeo/css/root.scss

@@ -123,6 +123,7 @@
   --color-tooltip-background: var(--color-grey-700);
   --color-toggle-disabled-checked-circle: var(--color-grey-000);
   --color-toggle-disabled-checked-background: var(--color-primary-01-200);
+  --color-toggle-disabled-label: var(--color-grey-500);
   --color-toggle-disabled-circle: var(--color-grey-300);
   --color-toggle-disabled-background: var(--color-grey-100);
   --color-toggle-hover-circle: var(--color-grey-100);
@@ -130,6 +131,7 @@
   --color-toggle-on-background: var(--color-primary-01-500);
   --color-toggle-off-circle: var(--color-grey-000);
   --color-toggle-off-background: var(--color-grey-600);
+  --color-toggle-label: var(--color-grey-999);
   --color-tag-removable-dark-active-background: var(--color-grey-400);
   --color-tag-removable-dark-hover-background: var(--color-grey-300);
   --color-tag-removable-dark-icon: var(--color-grey-900);
@@ -215,6 +217,8 @@
   --color-password-input-button-hover-background: var(--color-grey-100);
   --color-overlay-loader-background: var(--color-secondary-blue-900);
   --color-overlay-background: var(--color-grey-900);
+  --color-option-card-disabled-label: var(--color-grey-600);
+  --color-option-card-disabled-content: var(--color-grey-200);
   --color-option-card-checked-label-shadow: var(--color-primary-01-100);
   --color-option-card-checked-label-border: var(--color-primary-01-500);
   --color-option-card-hover-label-shadow: var(--color-grey-800);
@@ -278,11 +282,12 @@
   --color-input-valid-border: var(--color-success-500);
   --color-input-focus-border: var(--color-secondary-blue-500);
   --color-input-hover-border: var(--color-grey-900);
+  --color-input-disabled-label: var(--color-grey-500);
   --color-input-disabled-icon: var(--color-grey-400);
-  --color-input-disabled-background: var(--color-grey-100);
   --color-input-disabled-border: var(--color-grey-100);
+  --color-input-disabled-background: var(--color-grey-100);
   --color-input-background: var(--color-grey-000);
-  --color-input-placeholder: var(--color-grey-500);
+  --color-input-placeholder: var(--color-grey-600);
   --color-input-border: var(--color-grey-600);
   --color-input-text: var(--color-grey-900);
   --color-hero-cover-background: var(--color-grey-900);

package/src/tokens/adeo/ios/StyleDictionaryColor.h

@@ -279,9 +279,10 @@ ColorInputText,
 ColorInputBorder,
 ColorInputPlaceholder,
 ColorInputBackground,
-ColorInputDisabledBorder,
 ColorInputDisabledBackground,
+ColorInputDisabledBorder,
 ColorInputDisabledIcon,
+ColorInputDisabledLabel,
 ColorInputHoverBorder,
 ColorInputFocusBorder,
 ColorInputValidBorder,
@@ -345,6 +346,8 @@ ColorOptionCardLabelShadow,
 ColorOptionCardHoverLabelShadow,
 ColorOptionCardCheckedLabelBorder,
 ColorOptionCardCheckedLabelShadow,
+ColorOptionCardDisabledContent,
+ColorOptionCardDisabledLabel,
 ColorOverlayBackground,
 ColorOverlayLoaderBackground,
 ColorPasswordInputButtonHoverBackground,
@@ -432,6 +435,7 @@ ColorTagRemovableDarkText,
 ColorTagRemovableDarkIcon,
 ColorTagRemovableDarkHoverBackground,
 ColorTagRemovableDarkActiveBackground,
+ColorToggleLabel,
 ColorToggleOffBackground,
 ColorToggleOffCircle,
 ColorToggleOnBackground,
@@ -439,6 +443,7 @@ ColorToggleOnCircle,
 ColorToggleHoverCircle,
 ColorToggleDisabledBackground,
 ColorToggleDisabledCircle,
+ColorToggleDisabledLabel,
 ColorToggleDisabledCheckedBackground,
 ColorToggleDisabledCheckedCircle,
 ColorTooltipBackground,