eWizard.js framework v4.3.1

New framework features and updates

• Added the popup modifier to v-open action. It allows a popup opening by id provided as value on click or any other event, whatever is specified:

<i18n>
  {
    "eng": {
      "text": "Click to open the Awesome Popup!"
    }
  }
</i18n>
<template>
  <div class="layout">
    <wiz-button :text="$t('text')" v-open.popup="'awesomePopup'"></wiz-button>
    <wiz-popup id="awesomePopup" :opened.sync='isPopupOpened'></wiz-popup>
  </div>
</template>
<script>
import wizButton from 'wiz-button'
import wizPopup from 'wiz-popup'
export default {
  components:{
    wizButton,
    wizPopup
  },
  data(){
    return{
      isPopupOpened:false
    }
  }
};
</script>

• The vViewer component of the ewizardjs module is renamed to wizViewer.

Also, now the content can be inserted inside the Viewer component with new <slot></slot> tag. So that, slides swiping is more user-friendly, as the new tag restricts swiping by the actual slide content area.

• The new wiz-slide component
  • The e-Detailers and Surveys slides’ root component.
  • A part of the ewizardjs module.
  • Is automatically registered as a global component.
  • Allows using wiz-slide in further features and tech improvements, and avoid manual slide layout updates.

<i18n>
  {
    "eng": 
      "text": "Welcome to the slide!"
    }
  }
</i18n>

<template>
  <wiz-slide>
    <div class="layout">
      <wiz-text :text="$t('text')"></wiz-text>
    </div>
  </wiz-slide>
</template>
<script>
export default {};
</script>
<style scoped></style>

• The project external-vue-builder that is used to build presentations to format compatible with CLMs, is renamed to edetailer-builder.

eWizard-cli v0.6.0

• The -c alias for --chapter option of the wiz slide command is added.

• wiz slide now creates a slide with the <wiz-slide> component in the root.

Emails editing features

The sealed attribute for eWizard.js components and blocks:

• Tells eWizard editor how to restrict editing of the element.

• Useful when it is needed to preserve the look of elements styles (for example, to keep the initial components’ design).

Example:

<wiz-image sealed></wiz-image>

The sealed attribute without options turns off selection of a component.

You can gain even more control by passing the following options as arguments to sealed:

• placement, position to turn off component moving

• delete to turn off component removing

• duplicate to turn off component duplication

• props to turn off component properties editing

The following options are used to deny styles editing:

• paddingto turn off padding editing

• backgroundto turn off background color editing

• borderto turn off border editing

• size to turn off size editing

Even more, you can pass several options to sealed at once by separating them with a space.

Example:

<wiz-image sealed="placement delete duplicate props padding border size background"></wiz-image>