Wbc-ui2 NPM | npm.io

wbc-ui2 Version=5.4.0

Why wbc-ui2?

wbc-ui2 aims to write, generalize, control, generate and transform html, css, js (support events too), dom, vuetify by writing only js or json objects. In addition, theses objects provide interaction with the backend as well.

wbc-ui2 provides three components: WBLink, WBHtml, WBC

WBC is a VueJs Component with three props (item wrap and key). It aims to be used for more complex components with the minimum html/css codes. It is fully controllable by js or JSON object.

WBC is reactive with the dom, dynamic, support events and can interact with backend.

each WBC component has its own headers and footers slots...

WBC support external source components (like Vuetify or bootstrap-vue..). It have to be injected while the installation of the WBC plugin of vue app.

import router from <your_router_path>;
import store from <your_store_path>;
import vuetify from <your_plugins_vuetify>;

#install plugin to Vue instamce
import * as WBC_ui2_pluging from "wbc-ui2";
Vue.use(WBC_ui2_pluging, {  store,router,vuetify  });

Global registered components are automatically registered to WBC.

The wbc-ui2 module provides, in addition, some useful tools:

WBC,
WBHtml,
WBLink,
randomColor,
randomKey,
capitalizeWords,
getRandomInt,
stringToJson,
compFunc,
anyMatchInArray,
strToObj,
queryData,
clone,
validators,
generalVal,
moment,
JsonViewer,
vuetify,
VueCookies,
vuetifyModule,
html_ressources,
aesEnc,
aesDec,

For details guide, visit www.wbc-ui.com

3- WBC configuration

In main.js install WBC plugin (WBC_plugin) in your app.

Then, your main.js have this structure

import router from <your_router_path>;
import store from <your_store_path>;
import vuetify from <your_plugins_vuetify>;

#install plugin to Vue instamce
import * as WBC_ui2_pluging from "wbc-ui2";
Vue.use(WBC_ui2_pluging, {  store,router,vuetify  });

new Vue({
    render: (h) => h(App),
}).$mount("#app");