Pam-builder NPM

Template Builder

How to use plugin

Build Package (Include Store) 1. Run Command

yarn add pam-builder

Run Command

yarn dev

npm run dev

Setup Data To Local Storage

    get storageBaseUrl() {
        return <YOUR_STORAGE_BASEURL>
    }

    get storageToken() {
        return <YOUR_PERSONALIZE_TOKEN>
    }

    [Optional]
    get personalizeBaseUrl() {
        return <YOUR_PERSONALIZE_BASEURL>
    }

    get personalizeToken() {
        return <YOUR_PERSONALIZE_TOKEN>
    }

    created() {
        if (process.client) {
            localStorage['storage-baseurl'] = this.storageBaseUrl
            localStorage['storage-token'] = this.storageToken

            [Optional]
            localStorage['personalize-baseurl'] = this.personalizeBaseUrl
            localStorage['personalize-token'] = this.personalizeToken
        }
    }

attribute	value	type	description
storageBaseUrl	up to you	`string`	for get or upload image (ex. GET `<BASEURL>/galleries`, POST `<BASEURL>/uploader/public`
storageToken	up to you	`string`	for access api get or upload image
personalizeBaseUrl (optional)	up to you	`string`	for get personalize (ex. GET `<BASEURL>/customers/attributes`)*
personalizeToken (optional)	up to you	`string`	for access api get personalize

Import Module And Create Instance Vue Component

    [Vue]
    mounted() {
        const builder: any = require('~/node_modules/vue-builder-plugin/src/plugins/Module')
        const store =  builder.default.store
        const router = builder.default.router
        const self = this
        new Vue({
            router,
            store,
            render: (h) =>
                h(builder.default.component, {
                    props: {
                        propTemplateJson: this.propTemplateJson,
                        propMessageType: this.propMessageType
                    },
                    on: {
                        change(templateJson: any) {
                            self.$emit('change', (templateJson && !_.isEmpty(templateJson) ? templateJson : {}))
                        }
                    }
                })
        }).$mount(`#${this.id}`)
    }

    [Nuxt.js]
    mounted() {
        if (process.client) {
            const builder: any = require('~/node_modules/vue-builder-plugin/src/plugins/Module')
            const store =  builder.default.store
            const router = builder.default.router
            const self = this
            new Vue({
                router,
                store,
                render: (h) =>
                    h(builder.default.component, {
                        props: {
                            propTemplateJson: this.propTemplateJson,
                            propMessageType: this.propMessageType
                        },
                        on: {
                            change(templateJson: any) {
                                self.$emit('change', (templateJson && !_.isEmpty(templateJson) ? templateJson : {}))
                            }
                        }
                    })
            }).$mount(`#${this.id}`)
        }
    }

attribute	value	type	description
id	up to you	`string`	for create element (default: builder). Mutiple element should be setup difference name
store	-	-	for use store in builder component module
router	-	-	for use router in builder component module
propTemplateJson	up to you	`object`	for setup default prop your template json (pass to builder module)
propMessageType	EMAIL, WEB_ATTENTION, FLEX_MESSAGE	`string`	for setup default prop your message type (EMAIL: result mjml, WEB_ATTENTION: result html, FLEX_MESSAGE: result line flex message)
this.builder	up to you	`any`	for save vue instance data (parameter in your component)
render	-	`function`	for render component
change(templateJson: any)	-	`function`	for pass updated data from child (module component) to parent (your component) component
.$mount(`#${this.id}`)	-	-	for create instance vue

Use Component

    <div id="builder" />

attribute	value	type	description
id	up to you	`string`	for create element (default: builder). Mutiple element should be setup difference name

Import Style To Component

    <style lang="scss">
        @import '~/node_modules/vue-builder-plugin/src/assets/scss/Main.scss';
        @import '~/node_modules/vue-builder-plugin/src/assets/css/quill.core.css';
        @import '~/node_modules/vue-builder-plugin/src/assets/css/quill.snow.css';
    </style>

Access Builder Instance Directive From Outside

    (window as any).$el.__vue__.<YOUR_DIRECTIVE(DATA, PROPS, METHODS, ...)>

    such as
        (window as any).$el.__vue__.onUpdateScreen({
            mobile: this.isMobileActive,
            desktop: this.isFullsceenActive,
            width: {
                type: this.propWidthScreenType,
                size: this.propWidthScreenSize
            }
        })

attribute	value	type	description
isMobileActive	true, false	`boolean`	for set up screen (if value is true you can view on mobile screen only)
isFullsceenActive	true, false	`boolean`	for set up screen (if value is true you can view on desktop screen only)
width	{ type: string, size: string }	`object`	for set up width and type screen (if you set value you still edit builder)
propWidthScreenType	SM, MD, LG, FULL, CUSTOM	`string`	for set up screen type (SM: 30%, MD: 70%, LG: 50%, FULL: 100%, CUSTOM: up to you, DEFAULT: 90%)
propWidthScreenSize	number of percent (ex. 25%)	`string`	for set up screen custom

Project setup

yarn install

Compiles and hot-reloads for development

yarn dev

Compiles and minifies for production

yarn build:ts

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.