Hi i liked this library and been trying to implement it but i just cant make it work.
My main.js looks like this:

And console looks like this:

Hi, I follow the getting started in the docs, but I get this error.

import { Component, Vue } from "vue-property-decorator";
// @ts-ignore
import {Button} from "equal-vue";
import "equal-vue/dist/equal.css";
Vue.use(Button);

Uncaught TypeError: Cannot read property 'install' of undefined
at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
at eval (NewOrganization.vue?84c5:72)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/NewOrganization.vue?vue&type=script&lang=ts& (app.js:1100)
at webpack_require (app.js:791)
at fn (app.js:151)
at eval (NewOrganization.vue?edaa:1)
at Module../src/views/NewOrganization.vue?vue&type=script&lang=ts& (app.js:1945)
at webpack_require (app.js:791)
at fn (app.js:151)
at eval (NewOrganization.vue?94a7:1)

• "vue": "^2.6.10",
• "vue-class-component": "^7.0.2",
• "vue-property-decorator": "^8.3.0"
• nodejs 13.2.0
• vue-cli 4.1.1

Are you sure that <input/> should inherit styles and other attrs?
Screen

Hi!
Not exist touchmove events on slider dot. You can check this by opening developer mode and try dragging a point
Touchmove event data https://i.imgur.com/cjBgKpL.png
I will try to make a request in the coming days

it-switch-label-group doesn't have display: flex so it-switch-label align-self: center does not take effect.

bad:

good:

I'm quite happy w the framework & appreciate the support. Tell me if there's anything I can do to help more w issues I find. Not applying time pressure -- happy to figure my own workarounds.

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

things like Row & Col or Grid - will you be working on such things?

Thanks!

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.

Does this project support ViteJS?

Good day! When trying to access the this.$Message variable, an error appears that the variable is not defined.
This is the first time I work with ts and vue 3, probably I did not take into account something.
Components in class-style style:

<script lang="ts">
import {Vue} from "vue-class-component";

const DEFAULT_LIMIT = 30;
const DEFAULT_PAGE = 1;

export default class FineListFilters extends Vue {
  getFines(): void {
    if (!this.validateForm()) {
      return;
    }

    this.$emit('test');
  }

  validateForm(): boolean {
    if (this.userId === null) {
      this.$Message.danger({ text: 'test' })

      return false;
    }
  }

  get userId(): number {
    return this.$store.state.userId;
  }
}
</script>

Error:

ERROR in src/components/MyComponentName.vue:90:12
TS2339: Property '$Message' does not exist on type 'FineListFilters'.
    88 |   validateForm(): boolean {
    89 |     if (this.userId === null) {
  > 90 |       this.$Message.danger({ text: 'test' })
       |                  ^^^^^^^^
    91 |
    92 |       return false;
    93 |     }

package.json:

{
  "name": "apidebug",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "equal-vue": "^0.74.0",
    "moment": "^2.29.1",
    "v-calendar": "^3.0.0-alpha.4",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-property-decorator": "^9.1.2",
    "vuex": "^4.0.0",
    "vuex-class": "^0.3.2",
    "vuex-class-modules": "^1.3.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "^4.5.12",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-vue-next": "~0.1.4"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.ts:

import { createApp } from 'vue';
import App from './App.vue'
import store from "@/store/store";
// @ts-ignore
import Equal from 'equal-vue';
import 'equal-vue/dist/style.css'

import VCalendar from 'v-calendar';

const app = createApp(App);
app.use(store);
app.use(Equal);
app.use(VCalendar, {
    componentPrefix: 'v'
});
app.mount('#app');

If i remove @ts-ignore then a get error:

ERROR in src/main.ts:4:19
TS7016: Could not find a declaration file for module 'equal-vue'. 'node_modules/equal-vue/dist/equal-vue.umd.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/equal-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'equal-vue';`
    2 | import App from './App.vue'
    3 | import store from "@/store/store";
  > 4 | import Equal from 'equal-vue';
      |                   ^^^^^^^^^^^
    5 | import 'equal-vue/dist/style.css'
    6 |
    7 | import VCalendar from 'v-calendar';

I think it would be nice to have that behaviour like with plain vue and almost all ui libraries, otherwise you got to watch your data to trigger functions.

Maybe there's already a way to achieve this?

Example:

<it-select @change="replot"  v-model="type" :options="optionsArray" />

Thanks.

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.

Hi,
This project looks really cool! I can't wait for the stable version!
How can i implement it in a Vue + TypeScript setup? It seems like @types/equal-vue does not exist. Is there another solution?
Regards

Curious why this is the case? I was hoping to drop equal-vue in to add components, with no changes to existing setup. Did I do something wrong?

I import the style in my main.js, which I think is what tutorial wanted me to do. Messages do not work without this import.

Thank you for this framework (:

Font size is too small to read in phones
Could be little bigger

First of all, I just went through the documentation site and honestly, I love it! Looking forward to how it will turn out. It would be awesome to have an optional config file that extends Equal's default theming; eg. like how tailwind does it.

Input type number is broken as below!

Hi, I have seen in radio component having Sublabel.

The slot name of radio that included with sublabel, same as the feature name.
However, the prop name is using sub-label, so that would be different from above.

Expected Result

The naming of these things would be the same as feature name.

If you have any feedback or suggestion, please do not hesitate to comment on this issue. 😁

Ref:
https://quatrochan.github.io/Equal/components/radio

Image not found in modal component "image only".

Expected Behavior

On click button "Show Image" should show an image in a modal.

Current Behavior

Image is not showing in "image only modal".

Environment

• Browser Name and version: Firefox Dev Edition v88.0b5
• Operating System and version (desktop or mobile): Mac OSX Big Sur v11.2.3

Screenshot

Present in al pages containing buttons

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 checking Buefy` 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!

That is to say, it is low res

Has better TypeScript support than the class API. This project will need to be rewritten for this in sometime soon

https://github.com/Aysnine/vite-with-equal-vue

Clicking a link in navbar should close itself

Because .it-modal-body has overflow: hidden, an it-select will not function properly inside of one. What does the overflow setting accomplish? Could it just be dropped?

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

When I was working on implementing `scrollToSelectedOption`, I was confused on what are the requirements,  in another meaning what this method should do, and how I can be sure that I hadn't broken anything else

Describe the solution you'd like

We should test our components

Describe alternatives you've considered

There are two approaches to test components

1. Using `cypress`
   We are here will use development page ( `localhost:3000` )
2. Using `jest`
   We are here will mount components headless to test it, nevertheless I don't prefer that approach

Additional context

I will work on test the components after the convention about the possible approaches and details, and how to migrate from non-tested components to test-based components

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

No response

Describe the solution you'd like

    - when `is-select` components be mounted
        set `ul.it-select-list` element as `scrollerRef` reference with `setScrollerRef`
    - when select an option 
        call `selectOption` with selected option's index as `optionIndex` argument
            set `selectedOptionIndex` variable with value of `optionIndex`
    - on call `scrollToSelectedOption`
        set `scrollTop` value of `scrollerRef` equal `offsetTop` of `selectedOption` 

Describe alternatives you've considered

none

Additional context

No response

Hi, I'm new to Equal, great work!

The components' documentation seems to miss a search option (such as in Bootstrap/Material UI).

As a user it sure could really help to have one :)

Ide throws this error after trying to import the library

Component message

Click on 5000ms and right after any other (4000ms) - The any other, should be removed before the 5000ms, but its not - And then it gets quite "messy" when it finds out that all have to be removed at the same time.

@quatrochan
Tried to use it with vite in ssr mode but I got the error below.

node_modules/vite/dist/node/chunks/dep-e9a16784.js:32070:7: error: [plugin: vite:dep-scan] Missing "./dist/style.css" export in "equal-vue" package
32070 │ throw new Error(
╵ ^
Is there a way to fix this?

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

Hi!
When you load page on XL size and next resize window to other breakpoint - absolute position labels not change.
View demo.

You should position labels relative parent, without absolute by body.

I can fix this in the pull request. What do you think?

Like view-ui or antdv

No "Show code" in documentation

Environment

- **node**: v15.3.0
- **equal**: v0.79.0

Current Behavior

When using at the same time drawer and modal, drawer gets transform styles and it looks pretty weird.

Expected Behavior

Open modal above drawer shouldn't influence on size of drawer

Steps To Reproduce

1. Go to sandobx: https://codesandbox.io/embed/flamboyant-merkle-h7v5p?fontsize=14&hidenavigation=1&theme=dark
2. Press "Show drawer" button
3. Press "Delete account" button

Anything else?

Thanks for your efforts!!!

Environment

- **node**: v15.3.0
- **equal**: v0.79.1

Current Behavior

entering text in the it-textarea component breaks data binding

Expected Behavior

Data binding shouldn't be broken after text was entered in the it-textarea component 😅

Steps To Reproduce

1. go to playground https://codesandbox.io/s/async-paper-64n1i?file=/src/main.js
2. enter something in the textarea
3. click on clear or set value buttons (there is no reaction)
4. reload playground
5. press set value button, text has changed

Anything else?

Would be nice to add status property, similar to it-input.
Thanks!

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.

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

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.