@pamsai/pam-builder

Template Builder

How to use plugin

Build Package (Include Store)

1. Run Command

yarn add @pamsai/pam-builder

2. Run Command

yarn dev

or

npm run dev

3. 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
        }
    }

4. 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}`)
        }
    }

5. Use Component

    <div id="builder" />

6. 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>

7. 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
            }
        })

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.