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

eg-elements

v3.2.2

Published

A Vuejs UI and structure components library

Downloads

4

Readme

EG Elements

EG Elements is a vuejs library of modular and easily customizable interface components.

Installation

Using npm:

npm i eg-elements

Usage

To use the library globally and register all the components in your main js file:

import eg from "eg-elements"
Vue.use(eg)

You can alternatively use the components individually in one of your components:

import { EgInput, EgButton } from 'eg-elements'

Components

Basics:

Inputs:

Structure:

Helpers:

Global Parameters

you can pass some parameters when using Vue.use() to set up several actions:

  • First of all, the native icon libraries selected as a string or an array with the attribute "icons"
  • Then the globally installed components can be selected and their names can be customized by passing to the "components" attribute an object that contains the component code as a key and the chosen name as a value.
  • Finally, the theme can be selected, either as a single theme by passing a string to the "theme" attribute, or by passing multiple themes with a table. If multiple themes are selected, they will be active only if one of the parent elements has the theme name as class.
Vue.use(ege, {
    theme: "basic",
    components: {
        icon: "icon",
        input: "text-input",
        numberInput: "eg-number"
    },
    icons: ['brandico', 'elusive']
});

Design and Themes

Each component has an internal CSS structure with a default design and some key classes that you can target and customize. If you select a theme using Vue.use(), you can also use CSS variables to quickly modify the key attributes of the components used in your own css files.

If you import one or more components individually, you can also import the theme manually. The path for the Basic theme is "~eg-elements/src/themes/theme_basic.scss".

Here is the page of the Basic theme that contains the list of variables and that is currently displayed by default in the demo. The main purpose of using variables is to be able to stylize a component locally. You can overwrite the value of any of these variables in of the parents classes to make it fit the situation, of even your whole design if you overwrite most of them in the :root.

The components styles are written using lang="scss", so you might need the Webpack SASS pre-processor if you want to tweak the elements files: