@mozaic-ds/vue 0.12.1 → 0.14.0

package/src/components/select/MSelect.vue

@@ -1,11 +1,12 @@
 <template>
   <select
     :id="id"
+    ref="select"
     class="mc-select"
-    :class="setClasses"
+    :class="[setClasses, cssFieldElementClass]"
     :value="getSelectValue"
     :disabled="disabled"
-    @change="$emit('change', $event.target.value)"
+    @change="onChange($event.target.value)"
   >
     <option v-if="placeholder" value="" disabled="disabled">
       -- {{ placeholder }} --
@@ -27,6 +28,11 @@
 <script>
 export default {
   name: 'MSelect',
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
 
   model: {
     prop: 'value',
@@ -107,6 +113,17 @@ export default {
         this.optionValue = firstOption.value;
       }
     },
+    onChange(value) {
+      const optionText = this.$refs.select
+        .querySelector(`option[value="${value}"]`)
+        .textContent.trim();
+      const optionData = {
+        text: optionText,
+        value: value,
+      };
+
+      this.$emit('change', value, optionData);
+    },
   },
 };
 </script>

package/src/components/textarea/MTextArea.vue

@@ -1,7 +1,10 @@
 <template>
   <textarea
     class="mc-textarea"
-    :class="{ 'is-valid': isValid, 'is-invalid': isInvalid }"
+    :class="[
+      { 'is-valid': isValid, 'is-invalid': isInvalid },
+      cssFieldElementClass,
+    ]"
     :aria-invalid="isInvalid"
     :value="value"
     @input="$emit('input', $event.target.value)"
@@ -11,7 +14,11 @@
 <script>
 export default {
   name: 'MTextArea',
-
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
   props: {
     value: {
       type: String,

package/src/components/textinput/MTextInput.vue

@@ -1,12 +1,26 @@
 <template>
-  <div key="icon-input" :class="{ 'mc-left-icon-input': icon }">
-    <m-text-input-icon v-if="icon" :icon="icon" />
+  <div
+    v-if="icon"
+    key="icon-input"
+    class="mc-left-icon-input"
+    :class="cssFieldElementClass"
+  >
+    <m-text-input-icon :icon="icon" />
     <m-text-input-field
       ref="mField"
       v-bind="[$attrs, $props]"
       v-on="$listeners"
     />
   </div>
+
+  <m-text-input-field
+    v-else
+    key="input-only"
+    ref="mField"
+    v-bind="[$attrs, $props]"
+    :class="cssFieldElementClass"
+    v-on="$listeners"
+  />
 </template>
 
 <script>
@@ -21,6 +35,12 @@ export default {
     MTextInputIcon,
   },
 
+  inject: {
+    cssFieldElementClass: {
+      default: '',
+    },
+  },
+
   inheritAttrs: false,
 
   props: {

package/src/index.js

@@ -38,7 +38,11 @@ export { MLayer } from './components/layer';
 export { MLink } from './components/link';
 export { MModal } from './components/modal';
 export { MNotification } from './components/notification';
+export { MOptionButton } from './components/optionbutton';
+export { MOptionCard } from './components/optioncard';
+export { MOptionGroup } from './components/optiongroup';
 export { MPagination } from './components/pagination';
+export { MPasswordInput } from './components/passwordinput';
 export { MPhoneNumber } from './components/phonenumber';
 export { MProgress } from './components/progressbar';
 export { MQuantitySelector } from './components/quantityselector';

package/types/index.d.ts

@@ -23,7 +23,11 @@ declare module '@mozaic-ds/vue' {
   const MLink: VueConstructor;
   const MModal: VueConstructor;
   const MNotification: VueConstructor;
+  const MOptionButton: VueConstructor;
+  const MOptionCard: VueConstructor;
+  const MOptionGroup: VueConstructor;
   const MPagination: VueConstructor;
+  const MPasswordInput: VueConstructor;
   const MPhoneNumber: VueConstructor;
   const MProgress: VueConstructor;
   const MQuantitySelector: VueConstructor;
@@ -60,7 +64,11 @@ declare module '@mozaic-ds/vue' {
     MLink,
     MModal,
     MNotification,
+    MOptionButton,
+    MOptionCard,
+    MOptionGroup,
     MPagination,
+    MPasswordInput,
     MPhoneNumber,
     MProgress,
     MQuantitySelector,