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.

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.

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.

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!

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

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

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

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.

Привет! Супер-классная либа в целом! Только мало кастомизации. Собственно 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. Можно посмотреть, как там это у них в селекте работает.

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.

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',

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

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.

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

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

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

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