※ Note

※ Add plugins yarn add -D @huongnv080/hv vue-uuid vue-click-outside-of sass-loader sass yarn add -D vue3-barcode qrcode-vue3 @vueup/vue-quill@latest xlsx yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 npx tailwindcss init -p

※ Import to index.vue

import { createApp } from 'vue'
import App from './App.vue'
import './tailwind.css'
import '@huongnv080/uikit/cs/css/index.scss'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import vClickOutside from 'vue-click-outside-of'
import router from './router'

import {
    vni,
    vns,
    vnms,
    vnmss,
    vnd,
    vnrc,
    vnfi,
    vnform,
    vneditor,
    vnbar,
    vnqr,
    vnchat,
    vntable,
    vnerror,
    vnconfirm,
    vnformdailog,
    vnfilterdailog,
    vnupload
} from '@huongnv080/hv'
import Error from './plugin/vnerror'
import Confirm from './plugin/vnconfirm'
import Form from './plugin/vnformdailog'
import Filter from './plugin/vnfilterdailog'
import Upload from './plugin/vnupload'

const app = createApp(App)
app.component('vn-i', vni)
app.component('vn-s', vns)
app.component('vn-ms', vnms)
app.component('vn-mss', vnmss)
app.component('vn-d', vnd)
app.component('vn-rc', vnrc)
app.component('vn-fi', vnfi)
app.component('vn-ta', vnta)
app.component('vn-editor', vneditor)
app.component('vn-bar', vnbar)
app.component('vn-qr', vnqr)
app.component('vn-menu', vnmenu)
app.component('vn-header', vnheader)
app.component('vn-form', vnform)
app.component('vn-tab', vntab)
app.component('vn-table', vntable)
app.component('vn-chat', vnchat)
app.component('vn-error', vnerror)
app.component('vn-confirm', vnconfirm)
app.component('vn-form-dailog', vnformdailog)
app.component('vn-filter-dailog', vnfilterdailog)
app.component('vn-upload', vnupload)
app.use(vClickOutside)
app.use(Error)
app.use(Confirm)
app.use(Filter)
app.use(Form)
app.use(Upload)
app.use(router)
app.mount('#app')

※ Use at Page.vue

<template>
    <div>
        <vn-i v-model:value="form.ivm.value" :attr="form.ivm" @input="onChange"/>
        <vn-i v-model:value="form.nvm.value" :attr="form.nvm" @input="onChange"/>
    </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
    name: 'HelloWorld',
    setup() {
        const form = {
            ivm: {
                value: "aaa",
                label: "TEXT"
            },
            nvm: {
                value: "aaa",
                type: "number",
                label: "NUMBER"
            }
        }

        const onChange = () => {
            console.log(form)
        }

        return {
            form,
            onChange
        }
  }
})
</script>

※ When Use Form at Page.vue

<template>
    <div>
        <vn-form :form="form" @onChange="onChange" />
        <!-- Use in compoment -->
        <button @click="() => onHiddenConfirm()">Open Confirm</button>
        <div v-if="!confirm.hidden" >
            <vn-confirm :attr="confirm" @onHidden="onHiddenConfirm" />
        </div>
        <button @click="() => onHiddenDailog()">Open Dailog</button>
        <div v-if="!formDailog.hidden">
            <vn-form-dailog :attr="formDailog" @onItemChange="onChange" @onHidden="onHiddenDailog"/>
        </div>
        <button @click="() => onHiddenSearchDailog()">Open Search Dailog</button>
        <div v-if="!formSearchDailog.hidden">
            <vn-filter-dailog :attr="formSearchDailog" @onItemChange="onChange" @onHidden="onHiddenSearchDailog"/>
        </div>
    </div>
</template>

<script>
import { ref, defineComponent, getCurrentInstance } from "vue";
import { IsFunc } from "./js/Util";

export default defineComponent({
    name: "HelloWorld",
    props: {
        msg: String
    },
    setup() {
        const form = {
                ivm: {
                value: "aaa",
                required: true,
                label: "TEXT",
            },
            iivm: {
                value: 10,
                type: "number",
                label: "NUMBER"
            }
        }

        const onChange = (item) => {
            console.log(item)
        }

        const onOK = (paras) => {
            console.log(paras)
        }

        const onSave = (form, close) => {
            if(IsFunc(close))close()
            console.log(form)
        }

        const confirm = ref({
            title: "Confirm Dailog",
            body: "Text Confirm",
            hidden: true,
            buttons: [
                { name: "OK", func: onOk, cls: "text-white bg-blue-700 hover:bg-blue-800" },
            ],
            form: form
        })

        const formDailog = ref({
            title: "Form Dailog",
            form: form,
            hidden: true,
            buttons: [
                { name: "Save", func: onSave, cls: "text-white bg-blue-700 hover:bg-blue-800" },
            ],
        })

        const formSearch = {
            iivm: {
                value: 10,
                type: "number",
                vertical: true,
                search: true,
                label: "NUMBER"
            },
        }

        const formSearchDailog = ref({
            hidden: true,
            form: formSearch
        })

        const app = getCurrentInstance()
        const vnconfirm = app.appContext.config.globalProperties.$vnconfirm
        const onHiddenConfirm = (hidden) => {
            // Set when use in compoment
            // confirm.value.hidden = hidden
            // Set when use in Script
            vnconfirm.open({
                attr: confirm.value
            })
        }

        const vnform = app.appContext.config.globalProperties.$vnform
        const onHiddenDailog = (hidden) => {
            formDailog.value.hidden = hidden
            vnform.open({
                attr: formDailog.value,
                onItemChange: onChange
            })
        }

        const filter = app.appContext.config.globalProperties.$vnfilter
        const onHiddenSearchDailog = (hidden) => {
            formSearchDailog.value.hidden = hidden
            filter.open({
                attr: formSearchDailog.value,
                onItemChange: onChange,
                onRunAction: onChange
            })
        }

        return {
            form,
            confirm,
            formDailog,
            formSearchDailog,
            onHiddenConfirm,
            onHiddenDailog,
            onHiddenSearchDailog,
            onChange
        };
    },
})
</script>