npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wbc-ui2

v5.4.0

Published

W-B-Component is a u.i. component

Downloads

44

Readme

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");

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.wbc-ui.com/