@mozaic-ds/vue 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
@@ -13,9 +13,9 @@
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "^1.27.1",
-    "@mozaic-ds/icons": "^1.28.0",
-    "@mozaic-ds/styles": "^1.28.0",
+    "@mozaic-ds/css-dev-tools": "^1.29.1",
+    "@mozaic-ds/icons": "^1.30.0",
+    "@mozaic-ds/styles": "^1.30.0",
     "@mozaic-ds/web-fonts": "^1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "1.9.50",

package/src/components/autocomplete/MAutocomplete.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    ref="autocomplete"
+    class="mc-autocomplete"
+    :class="{ 'mc-autocomplete--multi': multiple }"
+    :style="tagStyle"
+    @keyup.esc="isOpen = true"
+  >
+    <m-tag
+      v-if="multiple && selectedItems().length > 0"
+      id="tag"
+      type="removable"
+      :label="selectedItems().length.toString() + ' ' + labelTag"
+      class="mc-autocomplete__tag"
+      size="s"
+      @remove-tag="removeElementsFromList()"
+    />
+    <m-text-input
+      v-model="itemDisplayed"
+      :placeholder="placeholder"
+      text-input-field-class="mc-autocomplete__trigger"
+      icon-position="left"
+      icon="DisplaySearch48"
+      autocomplete="off"
+      :style="{ width: boxWidth + 'px' }"
+      @input="filerList"
+      @click="isOpen = true"
+    />
+    <m-list-box
+      :open="isOpen"
+      :items="sort ? orderedItems() : itemListForDropdown"
+      :multiple="multiple"
+      :empty-search-label="emptySearchLabel"
+      :style="{ width: boxWidth + 'px' }"
+      @update:itemSelected="updateList"
+      @close-list-box="isOpen = false"
+    >
+      <template #item="{ item }">
+        <slot name="item" :item="item"> </slot>
+      </template>
+    </m-list-box>
+  </div>
+</template>
+
+<script>
+import MTextInput from '../textinput/MTextInput';
+import MTag from '../tags/MTag';
+import MListBox from '../listbox/MListBox';
+
+export default {
+  name: 'MAutocomplete',
+
+  components: { MListBox, MTag, MTextInput },
+
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    items: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    filter: {
+      type: Function,
+      default: null,
+    },
+    emptySearchLabel: {
+      type: String,
+      default: 'No item matching your criteria found',
+    },
+    sort: {
+      type: Boolean,
+      default: false,
+    },
+    labelTag: {
+      type: String,
+      default: '',
+    },
+    open: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      itemListForDropdown: this.$props.items,
+      selected: this.$props.items,
+      itemDisplayed: '',
+      isOpen: this.$props.open,
+      tagWidth: '0px',
+      boxWidth: '288px',
+    };
+  },
+  computed: {
+    tagStyle() {
+      return {
+        '--tag-width': this.tagWidth,
+      };
+    },
+    boxStyle() {
+      return {
+        '--box-width': this.boxWidth,
+      };
+    },
+  },
+  mounted() {
+    this.selectedItems();
+    this.tagWidthCalcul();
+    this.boxWidthCalcul();
+  },
+  methods: {
+    tagWidthCalcul() {
+      this.$nextTick(() => {
+        this.tagWidth =
+          document && document.querySelector('.mc-autocomplete__tag')
+            ? document.querySelector('.mc-autocomplete__tag').clientWidth + 'px'
+            : '0px';
+      });
+    },
+    selectedItems() {
+      return this.selected.filter((item) => {
+        return item.selected;
+      });
+    },
+    orderedItems() {
+      this.itemListForDropdown.sort((a, b) => {
+        if (a.selected === b.selected) {
+          return a.id - b.id;
+        } else if (a.selected < b.selected) {
+          return 1;
+        } else {
+          return -1;
+        }
+      });
+    },
+    updateList(list) {
+      if (!this.$props.multiple && list) {
+        this.itemDisplayed = list[0].text;
+      } else {
+        this.isOpen = true;
+        this.selectedItems();
+      }
+      this.itemListForDropdown.forEach((elem) => {
+        if (elem.id === list.id) {
+          elem.selected = false;
+        }
+      });
+      this.tagWidthCalcul();
+      this.$emit(
+        'update:modelValue',
+        this.$props.multiple ? this.selectedItems().value : list
+      );
+    },
+    removeElementsFromList() {
+      this.itemListForDropdown.forEach((elem) => {
+        elem.selected = false;
+      });
+      this.selectedItems();
+      this.tagWidthCalcul();
+      this.$emit('list-removed');
+    },
+    filerList(value) {
+      if (value.length && this.$props.filter) {
+        this.$props.filter(value);
+      } else if (value.length) {
+        this.itemListForDropdown = this.itemListForDropdown.filter((item) =>
+          item.text.toUpperCase().includes(value.toUpperCase())
+        );
+      } else {
+        this.itemListForDropdown = this.$props.items;
+      }
+      this.$emit('list-filtered', this.itemListForDropdown);
+    },
+    boxWidthCalcul() {
+      this.$nextTick(() => {
+        this.boxWidth = document.querySelector('.mc-autocomplete').clientWidth;
+        console.log(this.boxWidth);
+      });
+      return;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/_all-settings';
+@import 'components/_c.autocomplete';
+
+.mc-autocomplete--multi .mc-autocomplete__trigger {
+  padding-left: calc(2.9375rem + var(--tag-width));
+}
+</style>

package/src/components/autocomplete/index.js

@@ -0,0 +1,7 @@
+import MAutocomplete from './MAutocomplete.vue';
+
+MAutocomplete.install = function (Vue) {
+  Vue.component(MAutocomplete.name, MAutocomplete);
+};
+
+export { MAutocomplete };

package/src/components/card/MCard.vue

@@ -5,6 +5,7 @@
       :class="imageratio ? `mc-card__visual--${imageratio}` : ''"
     >
       <img :src="imgSrc" :loading="lazy ? 'lazy' : 'eager'" :alt="imgAlt" class="mc-card__img" />
+      <slot name="image" />
     </figure>
     <article class="mc-card__content">
       <component :is="titleTag" class="mc-card__title">

package/src/components/checkbox/MCheckboxGroup.vue

@@ -18,13 +18,19 @@
       :class="{ 'mc-field__container--inline': inline }"
     >
       <m-checkbox
-        v-for="option in options"
+        v-for="(option, index) in options"
         v-bind="option"
         :key="option.id ? option.id : option.value"
         class="mc-field__item"
         :checked="value ? value.includes(option.value) : undefined"
         @change="(v) => onChange(v, option.value)"
-      />
+      >
+        <template #label>
+          <slot :name="`label${index + 1}`">
+            {{ option.label }}
+          </slot>
+        </template>
+      </m-checkbox>
     </div>
     <span
       v-if="errorId && errorMessage"

package/src/components/container/MContainer.vue

@@ -26,6 +26,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'layouts/_l.container';
+@import 'settings-tools/all-settings';
+@import 'layouts/l.container';
+@import 'utilities/u.margin';
+@import 'utilities/u.padding';
 </style>

package/src/components/fileuploader/MFileResult.vue

@@ -16,6 +16,7 @@
         type="button"
         class="mc-fileuploader__delete"
         :aria-label="removeLabel"
+        :disabled="disabled"
         @click="deleteFile(file)"
       ></button>
       <div
@@ -53,6 +54,10 @@ export default {
       type: String,
       default: '',
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   watch: {
     files: {

package/src/components/fileuploader/MFileUploader.vue

@@ -33,6 +33,7 @@
       :files="uploadedFiles"
       :allowed-extensions="allowedExtensions"
       :remove-label="removeLabel"
+      :disabled="disabled"
       @file-removed="deleteRemoteFile"
     />
   </div>

package/src/components/index.js

@@ -4,6 +4,7 @@ export { MContainer } from './container';
 export { MHeading } from './heading';
 // Components
 export { MAccordion } from './accordion';
+export { MAutocomplete } from './autocomplete';
 export { MBadge } from './badge';
 export { MBreadcrumb } from './breadcrumb';
 export { MButton } from './button';
@@ -17,6 +18,7 @@ export { MHero } from './hero';
 export { MIcon } from './icon';
 export { MLayer } from './layer';
 export { MLink } from './link';
+export { MListBox } from './listbox';
 export { MLoader } from './loader';
 export { MModal } from './modal';
 export { MNotification } from './notification';

package/src/components/listbox/MListBox.vue

@@ -0,0 +1,106 @@
+<template>
+  <ul
+    v-if="items.length > 0"
+    ref="listbox"
+    role="listbox"
+    class="mc-listbox"
+    aria-labelledby="listbox"
+    :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
+  >
+    <li
+      v-for="item in selectableItems"
+      :key="item.id"
+      class="mc-listbox__item"
+      @change="$emit('update:itemSelected', item)"
+      @click.self="updateList(item.id, item.text, !item.selected, true)"
+    >
+      <slot name="item" :item="item">
+        <span class="mc-listbox__text">{{ item.text }} </span>
+      </slot>
+      <m-checkbox
+        v-if="multiple"
+        :id="`checkbox-dropdown-${item.id}`"
+        v-model="selectableItems.find((elem) => elem.id === item.id).selected"
+        class="mc-listbox__input"
+        @change="updateList(item.id, item.text, !item.selected, $e)"
+      />
+    </li>
+  </ul>
+  <div v-else class="mc-list-box__empty">
+    {{ emptySearchLabel }}
+  </div>
+</template>
+<script>
+import MCheckbox from '../checkbox/MCheckbox';
+export default {
+  name: 'MListbox',
+
+  components: { MCheckbox },
+
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    emptySearchLabel: {
+      type: String,
+      default: 'No item matching your criteria found',
+    },
+    icon: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selectableItems: null,
+      selected: [],
+    };
+  },
+  watch: {
+    items: {
+      handler: function (val) {
+        this.selectableItems = val;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    updateList(id, text, value, isCheckboxUpdate) {
+      if (!this.multiple) {
+        this.$emit('update:itemSelected', [{ id, selected: value, text }]);
+
+        this.$emit('close-list-box');
+        return;
+      }
+
+      if (
+        isCheckboxUpdate &&
+        this.selectableItems.find((item) => item.id === id)
+      ) {
+        this.selectableItems.find((item) => item.id === id).selected = value;
+      }
+
+      if (value) {
+        this.selected = [...this.selected, { id, selected: value, text }];
+      } else {
+        this.selected = this.selected.filter((item) => item.id !== id);
+      }
+      this.$emit('update:itemSelected', this.selectableItems);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/_all-settings';
+@import 'components/_c.listbox';
+</style>

package/src/components/listbox/index.js

@@ -0,0 +1,7 @@
+import MListBox from './MListBox.vue';
+
+MListBox.install = function (Vue) {
+  Vue.component(MListBox.name, MListBox);
+};
+
+export { MListBox };

package/src/components/optioncard/MOptionCard.vue

@@ -119,6 +119,8 @@ export default {
         input,
         select,
         textarea,
+        label,
+        .mc-option-card__focusable,
         [tabindex]:not([tabindex='-1']) {
           position: relative;
         }

package/src/components/tabs/MTab.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['mc-tabs', setClasses]">
     <ul
-      v-if="type != 'dropdown'"
+      v-if="type !== 'dropdown'"
       ref="tablist"
       class="mc-tabs__nav"
       role="tablist"
@@ -82,6 +82,10 @@ export default {
       type: Object,
       default: null,
     },
+    activeIndex: {
+      type: Number,
+      default: 0,
+    },
   },
 
   data() {
@@ -105,17 +109,33 @@ export default {
     },
   },
 
+  watch: {
+    activeIndex(newValue) {
+      const tab = this.getTabFromIndex(newValue);
+      if (tab && this.tabs[newValue]) {
+        this.manageTabs(tab, null, Object.assign({index: newValue}, this.tabs[newValue]));
+      }
+    }
+  },
+
   mounted: function () {
     this.$nextTick(() => {
       if (this.type === 'tabs') {
         this.tablist = this.$refs.tablist;
 
-        const isActive = this.tabs.some((tab) =>
-          Object.prototype.hasOwnProperty.call(tab, 'active')
-        );
-        if (!isActive) {
-          const firstTab = this.tablist.querySelector('.mc-tabs__link');
-          this.manageTabs(firstTab);
+        if (this.activeIndex) {
+          const tab = this.getTabFromIndex(this.activeIndex);
+          if (tab) {
+            this.manageTabs(tab);
+          }
+        } else {
+          const isActive = this.tabs.some((tab) =>
+              Object.prototype.hasOwnProperty.call(tab, 'active')
+          );
+          if (!isActive) {
+            const firstTab = this.tablist.querySelector('.mc-tabs__link');
+            this.manageTabs(firstTab);
+          }
         }
       }
     });
@@ -136,6 +156,9 @@ export default {
       return tabClasses;
     },
     manageTabs: function (el, e, tab) {
+      if (tab && tab.disabled) {
+        return;
+      }
       if (e) {
         this.$emit('tab-clicked', e.target, tab);
       }
@@ -148,6 +171,11 @@ export default {
       el.classList.add('mc-tabs__link--selected');
       el.setAttribute('aria-selected', 'true');
     },
+    getTabFromIndex: function (index) {
+      if (this.tablist && this.tablist.children[index] && this.tablist.children[index].children[0]) {
+        return this.tablist.children[index].children[0];
+      }
+    },
   },
 };
 </script>

package/src/components/tags/MTag.vue

@@ -24,7 +24,11 @@
       class="mc-tag-selectable__input"
       type="checkbox"
       :name="name"
+      :value="value"
+      :checked="checked"
+      :required="required"
       :disabled="disabled"
+      @change="$emit('change', $event.target.checked)"
     />
     <label class="mc-tag-selectable__pill" :for="id">
       <span class="mc-tag-selectable__label">
@@ -57,6 +61,11 @@ import {
 export default {
   name: 'MTag',
 
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
+
   props: {
     label: {
       type: String,
@@ -80,10 +89,22 @@ export default {
       type: String,
       default: null,
     },
+    value: {
+      type: String,
+      default: null,
+    },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
     disabled: {
       type: Boolean,
       default: false,
     },
+    required: {
+      type: Boolean,
+      default: false,
+    },
     size: {
       type: String,
       default: 'm',

package/src/components/textinput/MTextInput.vue

@@ -9,6 +9,7 @@
     <m-text-input-field
       ref="mField"
       v-bind="[$attrs, $props]"
+      :class="textInputFieldClass"
       v-on="$listeners"
     />
   </div>
@@ -48,6 +49,10 @@ export default {
       type: String,
       default: null,
     },
+    textInputFieldClass: {
+      type: String,
+      default: null,
+    },
   },
 };
 </script>

package/src/index.js

@@ -23,6 +23,7 @@ export { MContainer } from './components/container/';
 export { MHeading } from './components/heading';
 // Components
 export { MAccordion } from './components/accordion/';
+export { MAutocomplete } from './components/autocomplete';
 export { MBadge } from './components/badge/';
 export { MBreadcrumb } from './components/breadcrumb/';
 export { MButton } from './components/button/';
@@ -36,6 +37,7 @@ export { MHero } from './components/hero';
 export { MIcon } from './components/icon';
 export { MLayer } from './components/layer';
 export { MLink } from './components/link';
+export { MListBox } from './components/listbox';
 export { MLoader } from './components/loader';
 export { MModal } from './components/modal';
 export { MNotification } from './components/notification';