Vue Widget Mondial Relay

Mondial Relay Widget https://widget.mondialrelay.com/parcelshop-picker/v4_0/codesamples/Sample-LightImplementation.aspx to Vue

Installation

Using npm

npm i --save vue3-widget-mondial-relay

Requirements

Vue 3

vue 2? use the old library -> https://github.com/EduardoMateos/vue-widget-mondial-relay

Props API

| Props | Type | Required | Default | Details | | ---------------- | ------ | -------- | ---------------- | ------------------------------------------------ | | brand | String | true | | Provider by Mondial Relay | | defaultPostCode | String | false | 59000 | Default postal Code used for search at loading | | defaultCountry | String | false | FR | FR, ES, BE, NL, LU, DE, AT | | maxResults | Int | false | 7 | Must be less than 20 | | deliveryMode | String | false | 24R | Standard [24R], XL [24L], XXL [24X], Drive [DRI] | | allowedCountries | Array | false | * | FR, ES, BE, NL, LU, DE, AT | | translations | Object | false | texts in spanish | details in documentation |

Translations

Prop: translations

Object example:

        :translations="{
          headerTitle: 'Select your mondial relay ®',
          findCpText: 'CP',
          findCityText: 'City',
          cityNoResults: 'no results',
          btnListMobile: 'List',
          btnMapMobile: 'Map'
        }"

Example

<template>
  <div id="app" style="max-width: 980px; margin: auto">
    <vue-3-widget-mondial-relay
        brand="BDTEST  "
        defaultPostCode="59000"
        defaultCountry="FR"
        maxResults="7"
        deliveryMode="24R"
        @select="setParcelSelected($event)"
        :translations="{
          headerTitle: 'Select your mondial relay ®',
          findCpText: 'CP',
          findCityText: 'City',
          cityNoResults: 'no results',
          btnListMobile: 'List',
          btnMapMobile: 'Map'
        }"
    />
  </div>
</template>

import Vue3WidgetMondialRelay from 'vue3-widget-mondial-relay';

import 'vue-widget-mondial-relay/dist/widget-mondial-relay.min.css';

export default {
  name: 'App',
  components: {
    Vue3WidgetMondialRelay
  },
  methods:{
    setParcelSelected(data){
      console.log(data)
    }
  }
}