🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

Overview

Twitter Follow

Equal UI

Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.
Explore Equal UI docs

Features

  • Enterpise class UI based on Equal design system
  • Supports Material Design Icons
  • Lightweight: 18KB brotli
  • Includes 30+ components
  • Based on TypeScript

Links

Twitter: @Yan

Install

You need Vue.js version 3.0+

# npm
npm install equal-vue
# yarn
yarn add equal-vue

Usage

All components

import { createApp } from 'vue'
import Equal from 'equal-vue'
import 'equal-vue/dist/style.css'

createApp.use(Equal)

Or individual components

import { createApp } from 'vue'
import { Button, Alert, Switch } from 'equal-vue'
import 'equal-vue/dist/style.css'

createApp.use(Button).use(Alert).use(Switch)

License

MIT

Comments
  • BUG: modal not correct

    BUG: modal not correct

    Hi! Modal broke a little Please, check your changes in this commit 1dcf3c01 next files: ItModal.vue, styles.less, or write what exactly you wanted to fix and i fix it.

    opened by Happy-Child 11
  • Cannot import equal-vue

    Cannot import equal-vue

    Hello

    Here is my main.ts

    import { createApp } from 'vue' import App from './views/App.vue' import router from './scripts/router' import store from './scripts/store'

    import Equal from 'equal-vue' import 'equal-vue/dist/equal.css'

    createApp(App).use(store).use(router).use(Equal).mount('#app')

    But it doesn't work. I have the following error: _Le fichier de déclaration du module 'equal-vue' est introuvable. '/home/herve/Devs/sources/testV3/testv3ts/node_modules/equal-vue/dist/equal.cjs.js' a implicitement un type 'any'. Essayez 'npm i --save-dev @types/equal-vue' s'il existe, ou ajoutez un nouveau fichier de déclaration (.d.ts) contenant 'declare module 'equal-vue';'ts(7016)

    I think it is relative to typescript but I don't understand :-( Thanks for your help.

    opened by hpeyron 9
  • [ Bug Report ] Question related to message below [it-input]

    [ Bug Report ] Question related to message below [it-input]

    Is your feature request related to a problem? Please describe.

    First of all, i love the ui and animations (light and smooth), Now i have a question for you.
    
    I noticed when i pass message prop its displays the message perfectly in every state. but the message disappears as i begin to type. is it expected, if it is then i don't think it makes sense.
    
    Lets dive in it.
    
    We already have placeholder, The placeholder is expected to disappear as the user begins typing.
    
    The messages (hints) are normally expected to stay there forever or until user himself wants to make them go away.
    
    Most suitable example here would be field validation. the danger message should persist below text field until user fixes the input. like typing email address etc.
    

    Describe the solution you'd like

    The solution would be to make it stay.
    
    I have seen there is no validation support for it-input. well i did made a test component to behave as a wrapper component around it-input to provide a validations support and i might also make a [Form] component as in vuetify (i like the concept of validating all fields through ref).
    
    I am willing to contribute.
    

    Describe alternatives you've considered

    Maybe we can give a prop to make it stay or let it be as it is now.
    

    Additional context

    I want your answer as soon as possible because i am working on an application.
    
    opened by ArishSultan 5
  • Suggest, intergrate tailwindcss as base style utility.

    Suggest, intergrate tailwindcss as base style utility.

    Hi Equal team!

    Thank you for your project!. I know project still early but i tried your project in my some small projects in company and get good review. The most things everyone asked me are:

    • Equal lacking ability customize theming: Nowadays projects usually want add new tech like dark mode, responsive, customize color palette, responsive, customize layout, customize spacing etc, there features Equal complete missing for now. I see you guys put basic style base for all components and it working good, but it has not ability to customize. When project developed more, a ton of components will be added to Equal and changing style will become serious issue.

    Some UI framwork choose better way to follow is adopt css-only framework as base style, this is what Buefy doing when it adopt Bulma as css utility. Other benefit of this way is you guys can focus nearly 100% to develop components and make it perfect without worry about styling.

    I want suggest if you like this way, a newer and better css-only framwork is tailwindcss. Tailwindcss is new famous style utility framwork with maximum customize logic, the most issue when use tailwindcss is .... it is pure css and without js :). If Equal and Tailwindcss can intergrate together and become perfect couple i'm sure this is new king and Queen!

    • Equal is lacking form interactive. As a developer i think almost people want have form components which include erro message handler, input mask (input type = number ususally not used in real life, project want normal input but limit only numeric, make us end up use masking plugin like cleaverjs). Other component like select list missng ability combo box (include searching field inside dropdown allow quick search, multi select etc. This we can checkingBuefy` to have some insprire.

    • Equal still less component, but i believe has more soon by wonderful your hand and contributors !

    Thank again for good framwork!, Wish you guy happy!

    opened by TrungRueta 4
  • [ Feature Request ] Add posibility to change colors of components

    [ Feature Request ] Add posibility to change colors of components

    Is your feature request related to a problem? Please describe.

    Actually on many of components like slider or toggle its not possible to change color. Actually i'm forced to use blue clor on many of components, and the blue color doesn't fit to my application :D
    

    Describe the solution you'd like

    Add new props to elements which will allow to change custom color in RGB notation f.e
    
    <it-slider>
    border-color="#FF23FF"
    shadow-color="FF11FF"
    </it-slider>
    
    Would be great :)
    

    Describe alternatives you've considered

    At least add basic colors to other components like in button we can choose primary, success etc.
    

    Additional context

    No response

    opened by DamianDamian-Domin 3
  • feature/button_htmlType  add htmlType prop on button

    feature/button_htmlType add htmlType prop on button

    Hello. Added the ability to specify the type of property on the button. This is great when used in forms. I really need this in my current project in order to leave the standard validation.

    Sorry for my bad english

    opened by ravshan01 3
  • [ Feature Request ] Adding `CONTRIBUTING.md` file

    [ Feature Request ] Adding `CONTRIBUTING.md` file

    I saw there is no CONTRIBUTING.md file in the repository and there are a lot of things that should be existing to make this code readable and maintainable and rid of some mysteries in a lot of parts.

    Rules for the pull request process

    Link your pull request with an issue

    The issue will be a discussion for every new feature/bug to know what is the best way to implement it

    Use ( Conventional Commits ) instead of ( "Da" or "upd" )

    Besides the benefit from using readable commit messages, conventional commits will help us to generate CHANGELOG.md automatic

    The Reasons behind every decision

    Adding section to demonstrate why you used this tech ( ex. typescript instead of flow, less instead of sass ) so if the rules you put to choose this tech expired you can use another tech

    Semantic issue title if you will suggest feature and will not work on it use [ Feature Suggestion ] else [ Feature Request ]

    If you agree to these rules I can add a pull request and add this CONTRIBUTING.md guide

    opened by AbrahemAlhofe 3
  • [question] Best practice for using it-tabs with vue-router

    [question] Best practice for using it-tabs with vue-router

    I was evaluating Equal before starting a new project. Thanks for this library, it seems very good.

    I have a question if you can provide some guidance or pointers: what would be the best way to integrate equal UI components with vue-router (especially considering the it-tabs component)? Thanks.

    opened by twitwi 3
  • feature request: extend it-select customization

    feature request: extend it-select customization

    Привет! Супер-классная либа в целом! Только мало кастомизации. Собственно issue по этому поводу.

    Feature Request

    Мой запрос в том, чтобы расширить функционал <it-select>. На данный момент этот компонент использовать очень неудобно из-за того, как он работает с моделью и опциями.

    Допустим, у меня есть список с такой сигнатурой:

    interface Item {
      id: number;
      text: string;
    }
    
    let items: Item[];
    

    И я хочу дать пользователю выбрать одну опцию из этого списка. Хочу, чтобы пользователю были видны значения из text, а я у себя изнутри бы использовал id.

    export default {
      setup() {
        const items: Item[] = [
          { id: 1, text: 'One' },
          { id: 2, text: 'Two' },
          { id: 3, text: 'Three' }
        ];
    
        const value = ref<number | null>(null);
    
        return { items, value }
      }
    }
    

    И для того, чтобы такая логика могла быть реализована с <it-select>, ему нужны дополнительные пропсы:

    <template>
      <it-select
        v-model="value"
        :options="items"
        option-value="id"
        option-label="text"
      />
    </template>
    
    • optionValue - строка (по умолчанию value, например). По ней из опций брать то, что является значением опции. То есть то, что окажется в modelValue, если опция будет выбрана.
    • optionLabel - строка (по умолчанию label, например). По ней брать из опции то, что отображается пользователю, видимый текст опции.

    Если в options лежит не список объектов, а просто массив значений (строки, или числа, etc), то и отображать, и использовать в качестве значений сами элементы массива.

    index

    index - параметр, с помощью которого уже сейчас можно доставать значения изнутри опций. Но это бесполезно в случае, когда нужно показывать какой-то другой текст, соответствующий значениям. И совсем сложно что-то такое делать, когда у разных опций соответствующий им текст может быть одинаков.

    Кастомизация через слот

    Также было бы очень удобно, если бы компонент предоставлял кастомное отображение опций через слот:

    <template>
      <it-select
        v-model="value"
        :options="items"
        option-value="id"
      >
        <template #item="{ item }">
          {{ item.id }} - {{ item.text }}
        </template>
      </it-select>
    </template>
    

    Данный функционал я почерпнул из другой UI-библиотеки - Vuetify. Можно посмотреть, как там это у них в селекте работает.

    opened by 0x009922 3
  • Cannot using with TS. Need types...

    Cannot using with TS. Need types...

    Could not find a declaration file for module 'equal-vue'. 'c:/Проекты/VUE/knd_frontend/node_modules/equal-vue/dist/equal.cjs.js' implicitly has an 'any' type.

    opened by ghost 3
  • A console.log was left in the it-select component

    A console.log was left in the it-select component

    Each time I click an it-select component, it will show a console log with the text: scrollToSelectedOption.

    I recommend having the next rule in ESLint to avoid this from now on: 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    opened by JJBocanegra 2
  • Property 'use' does not exist on type 'CreateAppFunction<Element>'

    Property 'use' does not exist on type 'CreateAppFunction'

    Environment

    getting error 
    
    Property 'use' does not exist on type 'CreateAppFunction<Element>'
    

    Current Behavior

    getting error

    Property 'use' does not exist on type 'CreateAppFunction'

    Expected Behavior

    no error

    Steps To Reproduce

    .

    Anything else?

    No response

    bug 
    opened by unnimona 0
  • the outer div for an element MUST be classed

    the outer div for an element MUST be classed

    Environment

    na
    

    Current Behavior

    na

    Expected Behavior

    na

    Steps To Reproduce

    This is the html output for an :

        <div class="it-input-mask" style="display: none;"></div>
        <div class="it-input-prefix-wrapper">
            <div class="it-input-wrapper">
                <input maxlength="3" class="tiny it-input" label="Close" type="text">
            </div>
        </div>
    </div>```
    
    Without a class on the outer div, it's impossible to apply custom styling.  For example, I want to make it an inline-block.
    
    ### Anything else?
    
    Also, the docs for number-input and others, are missing the "show source" button.  The only way to find out how to use number-input was to look at the source code.
    bug 
    opened by TheDirigible 0
  • laravel mix

    laravel mix

    Is your feature request related to a problem? Please describe.

    Compatibility with Laravel-Mix
    

    Describe the solution you'd like

    It will be enabled to be compatible with Laravel-Mix, or in any case if it is already good to indicate it in your documentation?
    

    Describe alternatives you've considered

    :(
    

    Additional context

    No response

    opened by jcColala 0
  • [ Bug Report ] Duplicate attribute 'type' on button

    [ Bug Report ] Duplicate attribute 'type' on button

    Environment

    - **node**:
    - **equal**:
    N/A
    

    Current Behavior

    There's currently an overlap between the native attribute type of a button (e.g. <button type="submit">) and the type attribute indicating the colour type of the button.

    Expected Behavior

    Different naming convention for the type attribute that is used to indicate the colour type of the button. Keeping in mind the native attributes of the elements.

    Steps To Reproduce

    1. Create a button, with type submit and type primary,
    2. Code editor displays error: Duplicate attribute 'type'

    Anything else?

    No response

    bug 
    opened by gwen-bo 2
  • [ Feature Request ] onClickPrefix and onClickSuffix events

    [ Feature Request ] onClickPrefix and onClickSuffix events

    Is your feature request related to a problem? Please describe.

    No response

    Describe the solution you'd like

    Hi, can you add onClickPrefix and onClickSuffix events for input?
    

    Describe alternatives you've considered

    <span v-if="prefixIcon" class="it-input-icon-wrapper" @click="emit('clickPrefix', $event')">
    
    <span v-if="suffixIcon" class="it-input-icon-wrapper" @click="emit('clickSuffix', $event')">
    

    Additional context

    No response

    opened by Laravelka 0
  • [ Feature Request ] Can form related elements add some event triggers?

    [ Feature Request ] Can form related elements add some event triggers?

    Is your feature request related to a problem? Please describe.

    For example: emt('filedBlur', true) when ItInput loses focus.
    

    Describe the solution you'd like

    Can't tell Itinput lost focus when I want to do an assembly of Itinput and async-validator
    

    Describe alternatives you've considered

    <input @focus="handleFocus"
            @blur="handleBlur" **** />
    
    
     const handleFocus = (event: FocusEvent) => {
          focused.value = true
          emit('focus', event)
        }
        const handleBlur = (event: FocusEvent) => {
          focused.value = false
          emit('blur', event)
        }
    

    Additional context

    No response

    opened by rdzhaoxin 1
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

BalmJS 428 Jan 4, 2023
Vue Components inspired by Microsoft's Fluent Design System

Vue Components inspired by Microsoft's Fluent Design System

null 74 Dec 14, 2022
ICIJ's Design System for Bootstrap 4 and Vue.js

Murmur is ICIJ's Design System for Bootstrap 4 and Vue.js Status CI checks Code Climate NPM version NPM downloads Installation guide If you are using

The International Consortium of Investigative Journalists 15 Nov 15, 2022
Vue implementation of the Carbon Design System

carbon-components-vue Vue implementation of the Carbon Design System A collection of Carbon Components implemented using Vue.js. Carbon Vue library -

Carbon Design System 511 Dec 29, 2022
A Vue.js design-system for Web.

A Vue.js Design System for Web. Responsive, user-friendly and lightweight library helping us build great products for our customers. This library for

Qvant 229 Dec 27, 2022
Maker Design System by Square

Square Maker A Vue.js 2.x component library. View the styleguide here. ?? Install # install maker npm i @square/maker # install peer dependencies npx

Square 55 Dec 21, 2022
🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

Ant Design Vue An enterprise-class UI components based on Ant Design and Vue. English | 简体中文 Features An enterprise-class UI design system for desktop

vueComponent 17.6k Jan 4, 2023
Material Design UI library for Vuejs 2.0

Muse-UI Material Design UI library for Vuejs 2.0 Installation Muse-UI is available as an npm package npm install muse-ui -S yarn add muse-ui Usage imp

Muse UI 8.3k Dec 27, 2022
A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.

Naive UI A Vue 3 Component Library Fairly Complete, Customizable Themes, Uses TypeScript, Not too Slow Kinda Interesting English | 中文 Documentation ww

TuSimple 11.3k Jan 4, 2023
Material Design styled components for Vue.js

Material Components Vue Material Design styled components for Vue.js Material-components-vue integrates the mdc-web (by google) vanilla components fol

Mats Pfeiffer 307 Dec 25, 2022
Bootstrap4 Material Design Components for Vue.js

Vue MDBootstrap Vue MDBootstrap is a collection of VueJs components and built according to the Google Material Design specs. They can be used to built

Ahmad Fajar 3 Dec 23, 2022
An enterprise-level UI component library and front-end solution based on Vue.js 3

An enterprise-level UI component library and front-end solution based on Vue.js 3

View Design 187 Dec 31, 2022
A library of UI components built using Vue.js and TailwindCSS

Varnish This library contains a set of UI components. They range from something as simple as a button, to as complex as a fully-featured, Markdown-bas

Caneara 73 Dec 21, 2022
Vue Bootstrap with Material Design - Powerful and free UI KIT

Vue Bootstrap with Material Design Based on the latest Bootstrap 4 and Vue. 400+ material UI elemens, 600+ material icons, 74 CSS animations, SASS fil

MDBootstrap 902 Jan 4, 2023
Vue3 ready components library built with love and care designed to integrate beautifully with Bulma CSS

Vue3-ui Vue3 ready components library built with love and care designed to integrate beautifully with Bulma CSS Documentation The full documentation f

null 50 Dec 7, 2022
Vue2 material design icons with easy access to icons names and types

vue-material-icons Vue2 material design icons with easy access to icons names and types (all available in IDE hints). Hints were tested on IntelliJ ID

Dominik Betka 0 May 11, 2022
MADE Vue - A library of Vue 3 UI Components

MADE Vue A library of Vue 3 UI Components. Support MADE Vue ♥ Projects like MADE Vue are built and maintained in spare time. If you find this project

MADE Apps 4 Oct 6, 2022
N3-components , Powerful Vue UI Library.

N3-components - Powerful Vue Library. N3 components library is built with Vue.js, is a powerful library for frontend or full-stack engineers to build

null 1k Dec 17, 2022