0.0.25 • Published 1 year ago
@huongnv080/uikit v0.0.25
※ 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>
0.0.25
1 year ago
0.0.24
1 year ago
0.0.23
1 year ago
0.0.22
1 year ago
0.0.21
1 year ago
0.0.19
1 year ago
0.0.18
1 year ago
0.0.17
1 year ago
0.0.16
1 year ago
0.0.15
1 year ago
0.0.14
1 year ago
0.0.13
1 year ago
0.0.12
1 year ago
0.0.11
1 year ago
0.0.10
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago