Could not find a declaration file for module 'vuesax'
// Warning encountered in vscode

npm version: 6.13.4
node version: v12.16.1
OS: macOS Catalina
Model: iMac (Retina 5K, 27-inch, 2019)

if i add filter attribute, i have some crashing error, it can solved with remove v-on: change, but i need that for listener onclick in each key. Any one can help me?

<vs-select
          : state = "darkMode?: dark`"
          placeholder = "Select Province"
          auto
          filter
          v-model = "FID"
          v-on: change = "getDataProvince ()"
          : loading = "isLoading"
        >
          <vs-option v-for = "p, index in province": label = "p.attributes.Province": value = "p.attributes.FID": key = "p.attributes.FID">
            {{p.attributes.Province}}
          
        

It would to be better to see date-time pickers in Vuesax, I kind of felt them missing!

Thanks for your hard working and this is an amazing UI lib.
If i wanna use Vuesax in current Vue3 beta,how i get start?
And one more question,why the component's animation feel not smooth.
Thanks for your time.

At first I noticed that my value label was not showing at the select component:

But it has a selected value inside

I checked the component and found out that valueLabel is used to show the value label, and it's filled with Array[0] while it should have Array[1].

Pretty much what the title says. vs-table displays when it's not nested in a vs-row and vs-col. When it is nested, I can see it in the DOM when I inspect element, but the height shows as 0.

When setting custom color in nuxt js it says document is undefiend.

https://unpkg.com/vuesax
redirect to
https://unpkg.com/[email protected]/dist/vuesax.umd.min.js

As title
Vue 3.0 is about to be released, will you consider supporting it?

When there are more elements in the sidebar than the display is able to show it starts to scroll. This works, however it also adds an unnecessary overflow at the bottom. The attached gif demonstrates that you are able to scroll normally through your sidebar, however you can also scroll below the sidebar.

Steps to Reproduce

1. Create a sidebar.
2. Add multiple elements.
3. Resize your window so not all elements fit into it.

Expected
Only the sidebar should scroll.

Result
The sidebar does scroll however you can also scroll below it.

Given this setup:

// data has pageCount and page
<vs-pagination v-if="pageCount>0" v-model="page" :length="pageCount"/>

the component breaks unexpectedly when pageCount changes. Some behaviours I've observed:




In the first two, I tried setting page to 1 when pageCount changes.
Adding :key="pageCount" seems to work sometimes, but other times throws Cannot read property 'getBoundingClientRect' of undefined

<vs-button gradient warn @click="active=!active"> Open Dialog </ vs-button>

`

    <template header>
      <h4 class="not-margin">Welcome to <b>Vuesax</b></h4>
    </template>
    <div class="con-form">
      <vs-input v-model="input1" placeholder="Email">
        <template #icon>
          @
        </template>
      </vs-input>
      <vs-input type="password" v-model="input2" placeholder="Password">
        <template #icon>
          <i class="bx bxs-lock"></i>
        </template>
      </vs-input>
      <div class="flex">
        <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
        <a href="#">Forgot Password?</a>
      </div>
    </div>
    <template #footer>
      <div class="footer-dialog">
        <vs-button block>
          Sign In
        </vs-button>
        <div class="new">
          New Here? <a href="#">Create New Account</a>
        </div>
      </div>
    </template>

`
i implement this code from vuesax's v4 documentation to my project & i get a error message like this:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. vue.js:634

how to fix it?

create new file in my project Notification.ts

import Vue from 'vue';
import 'vuesax/src/functions/vsNotification/Base/style.sass'
import component from 'vuesax/src/functions/vsNotification/Base/vsNotification'

interface NotificationParams {
  title?: string
  text?: string
  position?: string
  color?: string
  border?: string
  icon?: string
  duration?: number | string
  onClick?: any
  buttonClose?: boolean
  flat?: boolean
  onDestroy?: any
  sticky?: boolean
  square?: boolean
  width?: string
  loading?: boolean
  progress?: any
  notPadding?: any
  content?: any
  clickClose?: boolean
  classNotification?: string
}

const notificationConstructor = Vue.extend(component)

// tslint:disable-next-line:only-arrow-functions
notificationConstructor.prototype.close = function() {
  this.isVisible = false
}

notificationConstructor.prototype.setLoading = function(val: boolean) {
  this.loading = val
}

notificationConstructor.prototype.changeProgress = function(val: number) {
  if (val) {
    this.progress = val
  }
}

notificationConstructor.prototype.toggleClass = function(val: number) {
  if (val) {
    this.classNotification = val
    this.$el.closest('.vs-notification-parent').classList.toggle(val)
  }
}

const notification = (params: NotificationParams = {}) => {
  const instance = new notificationConstructor()

  instance.$data.title = params.title
  instance.$data.text = params.text
  instance.$data.color = params.color
  instance.$data.colorName = params.color
  instance.$data.border = params.border
  instance.$data.icon = params.icon
  instance.$data.onClick = params.onClick
  instance.$data.flat = params.flat
  instance.$data.onDestroy = params.onDestroy
  instance.$data.sticky = params.sticky
  instance.$data.square = params.square
  instance.$data.width = params.width
  instance.$data.loading = params.loading
  instance.$data.notPadding = params.notPadding
  instance.$data.clickClose = params.clickClose
  instance.$data.classNotification = params.classNotification
  if (params.duration !== 'none') {
    instance.$data.duration = params.duration || 4000
  }
  if (params.progress == 'auto' && params.duration !== 'none') {
    instance.$data.progressAuto = true
  } else {
    instance.$data.progress = params.progress
  }
  if (typeof params.buttonClose == 'boolean') {
    instance.$data.buttonClose = params.buttonClose
  }

  if (params.width == '100%' || window.innerWidth < 600) {
    if (params.position === 'top-left' || params.position === 'top-right') {
      params.position = 'top-center'
    } else if (params.position === 'bottom-left' || params.position === 'bottom-right' || !params.position) {
      params.position = 'bottom-center'
    }
  }

  if (typeof params.position !== 'string') {
    params.position = 'bottom-right'
  }

  const parent: HTMLElement =
  document.querySelector(`.vs-notification-parent--${params.position || 'bottom-right'}`) || document.createElement('div')

  if (!document.querySelector(`.vs-notification-parent--${params.position || 'bottom-right'}`)) {
    parent.className = 'vs-notification-parent'
    parent.classList.add(`vs-notification-parent--${params.position || 'bottom-right'}`)
  }

  if (params.classNotification) {
    parent.classList.add(params.classNotification)
  }

  parent.appendChild(instance.$mount().$el)

  document.body.appendChild(parent)

  Vue.nextTick(() => {
    instance.$data.isVisible = true
    instance.$data.content = params.content
  })

  if (params.duration !== 'none') {
    setTimeout(() => {
      (instance as any).close()
    }, Number(params.duration) || 4000)
  }

  return instance
}

export default notification

in request.ts:

import Notification from '@/Notification'

service.interceptors.response.use(
  response => response,
  error => {
    Notification({
      title: 'Title',
      text: 'something...'
    })
    return Promise.reject(error.response.data)
  }
)

I am currently developing an implementation of the dialogue and have encountered a problem. At the moment of closing the dialog, I would like to have a callback at the moment of closing it from the same close button, which has the dialog.
I think this requirement can be useful for many possible implementations of the dialog.

is https://vuesax.com/ Open-Source?

when using vs-tooltip it gives the following error when navigating away from the page:

I'm trying to render options list based on data from async operation (setTimeout in example below). So I created simple v-for on <vs-option> to gets options that I want.

Options are visible, you can change selected option and value changes. But label of selected option is not visible.

Example

https://codesandbox.io/s/still-snowflake-kgjsv?file=/src/App.vue

It would be nice if you could position the sidebar to the right. Exactly how it worked in Vuesax 3

Hi,
The select component is throwing error when it's put in table <template #expand>.
Also, not sure if it's related to issue #30 , I tried to get the option values via nuxt axios ( outside the table's <template #expand> ) and only 1 and 2's labels are shown and the rest went blank like #30 . The only time it will work is without calling the options from async.
The error is as follows :

TypeError: valueLabel.forEach is not a function
    at VueComponent.get (vuesax.js?574d:21042)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
    at Proxy.computedGetter (vue.runtime.esm.js?2b0e:4836)
    at Proxy.render (vuesax.js?574d:20900)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4055)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.run (vue.runtime.esm.js?2b0e:4554)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)

My vue code :

<vs-table>
... 
<template #expand>
...
  <vs-select
    v-model="tr.medicine_type_id"
    placeholder="Medicine Type"
    state="dark"
  >
    <vs-option
      v-for="t in medicineTypes"
      :key="t.id"
      :label="t.name"
      :value="t.id"
    >
      {{ t.name}}
    </vs-option>
  </vs-select>
...
</template>

Scripts and declaration :

data () {
  medicineTypes: [],
  ...
},

methods: {
  async getMedTypes () {
    // axios get call and setting this.medicineTypes
  }

These are beautiful but currently missing focus styles (particularly the checkbox, switch and radio components), which are absolutely required to make components inclusive and accessible.

I'm aware this is under development but this is also true of v3 of the library.

Hi,
I thought using vs-input with icon-after shows correctly like in Documentation https://vuesax.com/docs/components/Input.html#state, but if you look in the screenshot attached, something is wrong.

<vs-input type="search" icon-after v-model="searchString" placeholder="Search member">
    <template #icon>
        <i class="bx bx-search-alt"></i>
    </template>
</vs-input>

only colors no icons vuesax4

I'm mostly joking, but also deadly serious at the same time. Vuesax is beautiful and it's a crime against humanity that I can't use it at work.

Okay now you can close this issue, I'll go back to refactoring my entire codebase to use hooks.

I’m not sure if this is bad, but after some time a lot of comments can accumulate in dom.

When you go to a new page with an open dialog, the dialog does not close on the new page and you cannot close it in any way

On the grid page, when checking examples on how to use responsive grids, the example is the following:

  <template>
    <div class="center">
      <vs-button active >Active</vs-button>
      <vs-button>Default</vs-button>
      <vs-button disabled >Disabled</vs-button>
    </div>
  </template>

The same append on almost every example of the page.

In fact, there is a vs-textarea component in v3.x, however, didn't find any info about it in the current version. Thank you beforehand!

I noticed some lack of accessibility in some of your components which I will walk through:

Labels

Unfortunately in default input fields and most of the input fields , you only using a placeholder as a label! (I DO know you have hidden labels for the screen readers but the problem is you are sacrificing a11y for the beauty! )
Placeholders are appealing because of their minimal, space-saving aesthetic. This is because placeholder text is placed inside the field. But this is a problematic way to give users a hint. First, they disappear when the user types. Disappearing text is hard to remember, which can cause errors if, for example, the user forgets to satisfy one of the password rules. Users often mistake placeholder text for a value, causing the field to be skipped.
Gray-on-white text lacks sufficient contrast, making it generally hard-to-read. And to top it off, some browsers don’t support placeholders. How the Web Became Unreadable.

We already have label input you can use them! Yes I know but the fact is frameworks are meant to be standard and by doing this you're making bad habits for developers who use your framework those who want to use your framework for design and focus on the back-end, so you speared this problem like poison in the web!

Float Labels

I can see you also using some float labels label-placeholder . Unfortunately, there are several problems with this approach.

First, there is no space for a hint because the label and hint are one and the same. Second, they’re hard to read, due to their poor contrast and small text, as they’re typically designed. Third, like placeholders, they may be mistaken for a value and could get cropped.

“Seems like a lot of effort when you could simply put labels above inputs & get all the benefits/none of the issues.”

Quirky and minimalist interfaces don’t make users feel awesome — obvious, inclusive, and robust interfaces do.

Size

Size matters! Your medium input size is about 34px which is not good.

Borders

A text box should look like a text box. Empty boxes signify “fill me in” by virtue of being empty, like a coloring-in book. This also means that the empty space should be boxed in (bordered). Removing the border, or having only a bottom border ( like what you have here) A bottom border might at first appear to be a separator. Even if you know you have to fill something in, does the value go above the line or below it?

Focus styles

#8

If you agree with these principles I'd be glad to start working on them and make Vuesax even much better!

How can I use vuesax in VuePress? I've tried adding theme: 'vuepress-theme-vuesax' in config.js, but it doesn't work. It can't resolve this theme. Any ideas?

Hello, first of all, thank you for creating this beautiful framework! 👍

It's just that I had a little problem, in the select component, text not center

As shown in the figure:

I noticed a line CSS,

.vs-select__label: {
    top: 10px
}

After deleting it, the text becomes centered

I don't know if this is a feature or a bug,

but, thank you again for creating this beautiful framework!

:3

Steps to Reproduce

1. Create a vs-button
2. Add a named :to route i.e :to="{ name: 'page', params: { pageID: page.id }}"

Expected
This does route as expected however gives a prop validation error, should allow Object type as well for valid prop type

Result
Prop validation error: Invalid prop: type check failed for prop "to". Expected String with value "[object Object]", got Object

Appreciate your efforts team for bringing v4 and adding tons of features into it and making it stable.
Have limelight on isssue lusaxweb/vuesax#717 related to dialog dom hangs

Hello! Nice ui kit!

I use project created by vue-cli, and have a error when try on demand install.

This part of my code

And this is error

Thanks!

is vuesax-next (vuesax4) compatible to vuesax3.x ?

and should i install both to use all of the components provided in vuesax 3.x and vuesax4?
or just vuesax4 is enough?

Thank you!

check this code

https://codesandbox.io/s/vue-template-n6j1q?file=/src/App.vue
Steps to Reproduce

1. click on Revert state button
2. click again

Expected
the button should toggle the state danger on the third row

Result
the button activate the danger state but cant revert it

Testcase
(fork this to get started)
https://codesandbox.io/s/vue-template-n6j1q?file=/src/App.vue

When using a select inside a dialog the options are shown under the dialog.

package it to some other name so that v3 and V4 can be used simultaneously

I don't know why when I scroll the select on the options get split from each other any solutions, please.

also I'm using vue-smooth-scrollbar component and I think that's vuesax select isn't compatible with it.

The Vuesax not have types to detect in typescript, I already tried the installation through the yarn add @types/vuesax and the reply is: Not found :/

Typo in the getting started page of the docs
[https://vuesax.com/docs/guide/gettingStarted.html]

Hi, I saw that in the vuesax website, there is a dark mode option, but when I look into the docs, it did not mention how to enable dark mode in vuesax. Is there a way to enable it or is this a work in progress? Thanks!

Will the tables be supported?

Steps to reproduce:

1. Use vs-select element with filter option like on https://vuesax.com/docs/components/Select.html#filter
2. Type a letter
3. Press enter
   

There are 23 :root definitions in the vuesax.css file, but 22 of them are repeated. Does it have any special meaning?

Hi all,
I'm using the vs-select component with the filter property and the label-placeholder property.

If I select 0 value from the list, the label stays like no value is selected.

Here the code

<vs-select filter label-placeholder="Ore" :value="hour" @input="onHourChange">
    <vs-option v-for="h in hours" :label="h" :value="h" :key="h">{{h}}</vs-option>
</vs-select>
<vs-select filter label-placeholder="Minuti" :value="minute" @input="onMinuteChange">
    <vs-option v-for="m in minutes" :label="m" :value="m" :key="m">{{m}}</vs-option>
</vs-select>

Dropdown list value

After select value 0