Questionnaire library

How to create & publish vue component library to npm registry

• Install vue-sfc-rollup module globally

    # Install globally (recommended)
    npm install -g vue-sfc-rollup

• Initialize project

    sfc-init
    # Fill in prompts

• Once your development is done, it's time to package your component to publish to npm

    # Run build process
    npm run build
    # Login to npm registry
    npm login
    # Publish your library
    npm publish --access=publish

Installation

npm install @chearasmey/questionnaire  

How to implement library

Import RComponent to main.js

    import RComponent from '@chearasmey/questionnaire'

Use questionnaire plugin as global

    app.use(RComponent)

Use RCard component

    <r-card padding="10px 5px 10px 5px">Card content</r-card>

RCard Props

margin: Take string value, set card margin.
padding: Take string value, set card padding.
background: Take string value, set card background.
rounded: Take string value, set card border radius.
shadow: Take Boolean value, set card box shadow if it's true.
top-left-radius: Take string value, set card border top left radius.
top-right-radius: Take string value, set card border top right radius.
bottom-left-radius: Take string value, set card border bottom left radius.
bottom-right-radius: Take string value, set card border bottom right radius.

Use RCategoryCard

    <r-category-card :title="Account Inquiry" />

Use RQuestionnaire

    <r-questionnaire
        :is-icon="true"
        icon-url="/question_icon.png"
        :is-expand="true"
        :is-expand-icon="true"
    >
        <template #title>
            <div class="text-danger font-bold">
                Statement
            </div>
        </template>
        <template #content>
            <div class="font-size-12">
                Statement Inforamtion (CASA) It is able to download from APD Mobile App with max period 12 months as PDF/Excel file.
            </div>
        </template>
    </r-questionnaire>

RQuestionnaire Props:

is-icon: Boolean value, leading icon if set it value to true.
icon-url: String value, Set icon URL.
is-exapnd: Boolean value, show answer content if set it value to true.
is-expand-icon: Boolean value, show arrow icon if set it value to true.

Use RQuestionPanel

    <r-question-panel :categories="categories" />

categories: Array value
Ex:

    const categories = [
        {
            "title": "Account Inquiry",
            "subCategory": [
            {
                "question": "Statement",
                "answer": "Statement Inforamtion (CASA)\nIt is able to download from APD Mobile App with max period 12 months as PDF/Excel file."
            },
            {
                "question": "Fee/Charge",
                "answer": "no"
            },
            {
                "question": "Interest Rate",
                "answer": "no"
            },
            {
                "question": "Passbook",
                "answer": "no"
            }
            ]
        },
        {
            "title": "Branch/Department Inquiry",
            "subCategory": [
            {
                "question": "Headquater",
                "answer": "Headquater"
            },
            {
                "question": "Mao Tse Tung office",
                "answer": "no"
            }
            ]
        }
    ]

RQuestionPanel Props:

category-class: String value, add style (class) to main category.

<r-question-panel :categories="categories" content-class="font-size-20 text-success" />

active-border: String value, add border style (class) to active main category.

<r-question-panel :categories="categories" active-border="border-2 border-blue-500" />

title-class: String value, add style (class) to questionnaire title.

<r-question-panel :categories="categories" title-class="font-size-20 font-bold" />

content-class: String value, add style (class) to questionnaire content (answer).

<r-question-panel :categories="categories" content-class="font-size-12 text-primary" />

panel-background: String value, add background color to questionnaire panel.

<r-question-panel :categories="categories" panel-background="crimson />

active-panel-background: String value, add background color to questionnaire panel.

<r-question-panel :categories="categories" active-panel-background="yellow" />

leading-icon: String value, replace leading icon to questionnaire default icon.

<r-question-panel :categories="categories" leading-icon="https://apdbank.com.kh/favicon.png" />

question-label: String value, question key from object for RQuestionnaire. Default value is question.

<r-question-panel :categories="categories" question-label="questionKeyName" />

answer-label: String value, answer key from object for RQuestionnaire. Default value is answer.

<r-question-panel :categories="categories" answer-label="answerKeyName" />

unique-id: String value, require to add unqiue id to resovle multiple RQuestionPanel.

<r-question-panel :categories="categories" unique-id="questionnaire1" />
<r-question-panel :categories="categories" unique-id="questionnaire2" />

Fix bugs

• Resolve main category style by add category-class props
• Resolve active border style by add active-border props
• To resolve object key from API (Array) by adding question and answer label to RQuestionPanel
• Fix answer content from rawHtml to render HTML on RQuestionPanel
• Add unique-id props to RQuestionPanel to resolve conflict element class once implement multiple RQuestionPanel