wbc-ui2

wbc-ui2 Version=5.5.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 WBC_plugin from "wbc-ui2";
import * as  object_of_components from <external_source>

#install plugin to Vue instamce
Vue.use(WBC_plugin, object_of_components, mode);

Global registered components are automatically registered to WBC.

The WBC can be classified from particular to general, in terms of the item and the props in:

• S-WBC: Simple case
• L-WBC: List of WBC
• GL-WBC: General List of WBC
• GWBC: General WBC
• GWBSC : General Simple Component
• GWBNC : General Nested Component

For details guide, visit www.wbjs.net

3- WBC configuration

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

Then, your main.js have this structure

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

# import WBC_ui2_pluging from "wbc-ui2";
import WBC_ui2_pluging from "wbc-ui2";

#External component to inject into WBC.
import * as  externalComps from <external_source>

#computed properties to i pass to WBC. As an example:
storeGetters=store._wrappedGetters ;

Vue.use(WBC_pluging, {components:externalComps, compouted:storeGetters });

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

The contribution

1- The components WBLink, WBHtml, WBC are registered globally to the main app. Now, you can explore the power of WBC.

2- All global registered components are automatically injected to WBC.

How to use WBC?

For details guide, visit www.wbc2.wbjs.net/

Howo to use?

in parent main.js

import * as externalComps  from ....
Vue.use(WBC_setting, { ...{components:<externalComps>}, compouted:.... }, 'prod')
alert(JSON.stringify(WBC_setting))