wbc-ui3 v1.0.7-r1

wbc-ui3 version=1.0.5-r7

The package export in addition theses components:

• WBLink
• WBHtml
• WBC

3- WBC configuration

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

Then, your main.js have this structure

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

#import WBC plugin
import WBC_plugin from "wbc-ui3";

#creation of Vue APP named WBCApp
const WBCApp = createApp(App);

#install plugin to WBCApp before mounted it
WBCApp.use(WBC_plugin, {});

#Mount Vue application to the element id
WBCApp.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.

Run project

Done. Now run:

  cd <project-name>
  npm install
  npm run lint
  npm run dev

How to use WBC?

For details guide, visit www.wi-bg.com/WBC

WBHtml: Component and Examples

Component name:'WBHtml'
props:['html']
syntax:
"<WBHtml htm="[[<htm_content>|<classes or style>|<external_or_internal_link>]]"></WBHtml>

WBHtml: Taking account of HTML syntax

WBHtml: Taking account of attributes (class or style)

WBHtml: stylish html hyper-link to new page :target="_blank"

N.B. WBHtml text c an be linked to interanl route (for example vue-router4)

WBHtml: with multi href and classes

WBLink: Component and Examples

Component name:'WBLink'
props:['to', 'text']
attributes:any attributes of the Anchor tag
syntax:
"<WBLink to="http://stackoverflow.com" text="This is a Link"></WBLink>

WBLink: Css stylish href with classes and attributes to open in the same onglet

N.B.

• To open in another onglet use property target="_blank"
• To use router-link, the props to have to be an object.

WBC: Component and Examples

Component name:'WBC'
props:['to', 'item','key']
attributes:any attributes of html tag/component/page...
syntax:
"<WBLink to="http://stackoverflow.com" text="This is a Link"></WBLink>

• WBC is a Vue component which consists of writing, generalizing, controlling, generating and mixing 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 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-ui3";
import * as  object_of_components from <external_source>

#creation of Vue APP named WBCApp
const WBCApp = createApp(App);

#install plugin to WBCApp before mounted it
WBCApp.use(WBC_plugin, object_of_components);

• Global registered components are automatically registered to WBC.

The 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.wi-bg.com/WBC

S-WBC: list of items using "<li>"

N.B: Some rules

• WBC rules are based on type of item props and the global wrap. For example:
• if item is bollean => checkbox with its value is rendered
• if item is a list and wrap="<p>" then here the WBC render each item list as a paragraph (ADJACENT)
• if item is a list and the wrap includes '~' (wrap="<~div>") then here the WBC render EMBEDDED item div list.

GWBC: When item props is an object

In that case, WBC become a caviar, theses operations can be dynamically used throw the object js:

• hide/show the component
• stylish the component
• add headers and footers for this component
• Link the component to urls
• add events to components
• ranging and changing the layout of the components easily like a puzzle game

• interact with the back-end

  For full details guide, visit www.wi-bg.com/WBC

Previous version

wbc-ui3 version=1.0.5-r8

bug was fixed in WBC component :

globalWrap was added for the case "Object without comp"

wbc-ui3 version=1.0.5-r9

"hide" option was added for item.object WBC case

wbc-ui3 version=1.0.5-r10

README.md was updated

wbc-ui3 version=1.0.5-r11

skipped: same as wbc-ui3 version=1.0.5-r10

wbc-ui3 version=1.0.5-r12

Taking account of absence of html was added in the case of "GWBC item_ object' with item.COMP"

wbc-ui3 version=1.0.5-r13

localWrap and globalWrap was added for the case when the item_.value. is an object

wbc-ui3 version=1.0.5-r14

wrap of WBC component was set to null: Now WBC can be mounted without root node

wbc-ui3 version=1.0.5-r15

Bug of hide props for item with comp is an array

wbc-ui3 version=1.0.5-r16

was skipped

wbc-ui3 version=1.0.5-r17

• Adding headers and footers of the WBC for the Object cases when item.props.headers or item.props.footers is present slotA , slotB, slotY and slotZ in version 2 was replaced by headers and footers
• { strToObj, getRandomColor, randomKey } were pulled out and put in seperated file tools.js

wbc-ui3 version=1.0.5-r18

• WBC and its dependencies now support HTML syntaxe

wbc-ui3 version=1.0.6-r2

• Supporting Vuetify librairy.

• Props "key" was added. It is accessiple in the instance using key.value (since key=ref(props.key)).

• forceRerender function was added to the instance.

• For GWBC component, it is recommended to BIND the PROPS key to the "item.props.key".

• Now GWBC component initializing function is executeded before component mounted.

• Object of events via item.events:(v=>v.???) was added to GWBC component.

• hyper-link via item.href:(url/subUrl/internalRoute) was added to GWBC component.

• For GWBC-VSelect-vuetify it support item-title, item-value, return-object,to (vSelectChange redirection)

wbc-ui3 version=1.0.6-r3

• A bug in WBHtml was fixed

wbc-ui3 version=1.0.6-r4

• skipped

wbc-ui3 version=1.0.6-r5

• Code is prettified

wbc-ui3 version=1.0.7-r1

• Bug item Arrays case was fixed (slicing array)
• Mode use of WBC was added locally and globally:
  • Globally: can be passed via the WBC plagin.
  • Locally: props.mode was added to the component.