lusaxweb / vuesax-next Goto Github PK
View Code? Open in Web Editor NEWVuesax v4: framework components for Vuejs
Home Page: https://vuesax.com/
License: GNU General Public License v3.0
Vuesax v4: framework components for Vuejs
Home Page: https://vuesax.com/
License: GNU General Public License v3.0
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.
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.
As title
Vue 3.0 is about to be released, will you consider supporting it?
<div ref="chat-body" class="chat-body">
<div ref="chat-list" v-sys-height class="chat-list">
<component v-bind:is="item.id == myObj.id ? 'my-own' : 'other-people'" :msg-obj="item"
v-for="(item,index) in msgList" :key="index"></component>
</div>
</div>
openLoading() {
this.loading = this.$vs.loading({
target: this.$refs['chat-body'],
color: 'dark',
type: 'points'
})
setTimeout(() => {
this.loading.close()
}, 3000)
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
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?
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.
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>
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:
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!
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 matters! Your medium input size is about 34px which is not good.
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?
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
: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
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!
https://codesandbox.io/s/vue-template-n6j1q?file=/src/App.vue
Steps to Reproduce
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
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:
filter
option like on https://vuesax.com/docs/components/Select.html#filterThere 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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.