@mozaic-ds/vue 0.13.1 → 0.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.13.1",
+  "version": "0.14.2",
   "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.24.0",
-    "@mozaic-ds/icons": "^1.20.0",
-    "@mozaic-ds/styles": "^1.24.1",
+    "@mozaic-ds/css-dev-tools": "^1.26.0",
+    "@mozaic-ds/icons": "^1.26.0",
+    "@mozaic-ds/styles": "^1.26.1",
     "@mozaic-ds/web-fonts": "^1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "^1.9.37",

package/src/components/card/MCard.vue

@@ -4,7 +4,7 @@
       class="mc-card__visual"
       :class="imageratio ? `mc-card__visual--${imageratio}` : ''"
     >
-      <img :src="imgSrc" :alt="imgAlt" class="mc-card__img" />
+      <img :src="imgSrc" :loading="lazy ? 'lazy' : 'eager'" :alt="imgAlt" class="mc-card__img" />
     </figure>
     <article class="mc-card__content">
       <component :is="titleTag" class="mc-card__title">
@@ -36,6 +36,10 @@ export default {
       type: String,
       required: true,
     },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
     outlined: {
       type: Boolean,
       default: false,

package/src/components/index.js

@@ -20,6 +20,8 @@ export { MLink } from './link';
 export { MModal } from './modal';
 export { MNotification } from './notification';
 export { MOptionButton } from './optionbutton';
+export { MOptionCard } from './optioncard';
+export { MOptionGroup } from './optiongroup';
 export { MPagination } from './pagination';
 export { MPasswordInput } from './passwordinput';
 export { MPhoneNumber } from './phonenumber';

package/src/components/optionbutton/MOptionButton.vue

@@ -1,26 +1,21 @@
 <template>
-  <div class="mc-option-group">
-    <template v-for="(option, index) in options">
-      <div
-        :key="index"
-        class="mc-option-button"
-        :class="{ 'mc-option-button--full': option.full }"
-      >
-        <input
-          :id="option.id"
-          type="radio"
-          class="mc-option-button__input"
-          :name="option.name"
-          :value="option.value"
-          :disabled="option.disabled"
-          :checked="checked"
-          @change="$emit('change', $event.target.checked)"
-        />
-        <label :for="option.id" class="mc-option-button__label">
-          {{ option.label }}
-        </label>
-      </div>
-    </template>
+  <div
+    class="mc-option-button"
+    :class="{ 'mc-option-button--full': fullWidth }"
+  >
+    <input
+      :id="id"
+      type="radio"
+      class="mc-option-button__input"
+      :name="name"
+      :checked="checked"
+      :disabled="disabled"
+      v-bind="inputAttrs"
+      @change="$emit('change', $event.target.checked)"
+    />
+    <label :for="id" class="mc-option-button__label">
+      {{ label }}
+    </label>
   </div>
 </template>
 
@@ -34,14 +29,34 @@ export default {
   },
 
   props: {
-    options: {
-      type: Array,
+    id: {
+      type: String,
       required: true,
     },
+    label: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      default: null,
+    },
     checked: {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
+    inputAttrs: {
+      type: Object,
+      default: () => ({}),
+    },
   },
 };
 </script>

package/src/components/optioncard/MOptionCard.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="mc-option-card" :class="setClasses">
+    <input
+      :id="id"
+      :type="setType"
+      class="mc-option-card__input"
+      :class="setInputClasses"
+      :name="name"
+      :required="required"
+      :checked="checked"
+      v-bind="inputAttrs"
+      @change="$emit('change', $event.target.checked)"
+    />
+    <label :for="id" class="mc-option-card__label">
+      <span class="mc-option-card__label-text">{{ label }}</span>
+    </label>
+    <div class="mc-option-card__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MOptionCard',
+
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
+
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: 'radio',
+      validator: (value) => ['radio', 'checkbox'].includes(value),
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      default: null,
+    },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    index: {
+      type: Number,
+      default: 1,
+    },
+    centered: {
+      type: Boolean,
+      default: false,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    noPadding: {
+      type: Boolean,
+      default: false,
+    },
+    inputAttrs: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    setType() {
+      return this.type === 'checkbox' ? 'checkbox' : 'radio';
+    },
+    setClasses() {
+      return {
+        'mc-option-card--centered': this.centered,
+        'mc-option-card--no-padding': this.noPadding,
+        'mc-option-card--small': this.small,
+      };
+    },
+    setInputClasses() {
+      return {
+        'mc-checkbox__input': this.type === 'checkbox',
+        'mc-radio__input': this.type === 'radio',
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.option-card';
+
+// temporary fix
+.mc-option-card {
+  $parent: get-parent-selector(&);
+
+  border-radius: get-border-radius('m');
+  cursor: pointer;
+  position: relative;
+
+  &__input {
+    @at-root input#{&} {
+      &:checked ~ #{$parent}__content {
+        button,
+        [href],
+        input,
+        select,
+        textarea,
+        [tabindex]:not([tabindex='-1']) {
+          position: relative;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/optioncard/index.js

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

package/src/components/optiongroup/MOptionGroup.vue

@@ -0,0 +1,18 @@
+<template>
+  <component :is="htmlTag" class="mc-option-group">
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'MOptionGroup',
+
+  props: {
+    htmlTag: {
+      type: String,
+      default: 'div',
+    },
+  },
+};
+</script>

package/src/components/optiongroup/index.js

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

package/src/index.js

@@ -39,6 +39,8 @@ 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';

package/types/index.d.ts

@@ -24,6 +24,8 @@ declare module '@mozaic-ds/vue' {
   const MModal: VueConstructor;
   const MNotification: VueConstructor;
   const MOptionButton: VueConstructor;
+  const MOptionCard: VueConstructor;
+  const MOptionGroup: VueConstructor;
   const MPagination: VueConstructor;
   const MPasswordInput: VueConstructor;
   const MPhoneNumber: VueConstructor;
@@ -63,6 +65,8 @@ declare module '@mozaic-ds/vue' {
     MModal,
     MNotification,
     MOptionButton,
+    MOptionCard,
+    MOptionGroup,
     MPagination,
     MPasswordInput,
     MPhoneNumber,