antoniandre / wave-ui Goto Github PK

I tried to create a shared input component using <w-input> with a props validators. If the prop validators from <w-input> received empty array [] the form v-model will return false. just like this code below: **Note: just imagine <w-input> is my shared input component.

<template>
  <w-form v-model="isFormValid" @submit="submit">
    <w-input
      v-model="contact.firstname"
      type="text"
      label="First name"
      required
      :validators="[validators.required]"
    />
    <w-input
      v-model="contact.lastname"
      type="text"
      label="Last name"
      :validators="[]"
    />
    <w-button type="submit" class="mr1">
      Submit
    </w-button>
  </w-form>
</template>

<script lang="ts">
import { defineComponent, watchEffect, ref } from 'vue'

const TestPage = defineComponent({
  name: 'TestPage',
  setup () {
    const isFormValid = ref(null)
    const contact = ref({
      firstname: '',
      lastname: ''
    })
    const validators = {
      required: value => !!value || 'This field is required',
    }
    function submit () {
      console.log('Submit', isFormValid.value)
    }
    watchEffect(() => {
      console.log(isFormValid.value)
    })
    return { isFormValid, contact, validators, submit }
  }
})
export default TestPage
</script>

The documentation on form submission to server is incomplete. The sentence 'Then the form will be submitted in another tab to a fake test.php.' is quite mysterious. Hints on how this might be done would be very helpful.

Additionally the sentence 'The w-form prevents the form submission by default - for modern usage where an AJAX call is made on success (see the last example: Advanced validation).' is unhelpful as there is no Advanced validation example. I also need this.

Currently w-select can only display the list of items beneath the element, which means it isn't visible when placed at the bottom of the screen.

I have failed to install and run a wave-ui project. I need a clear step by step example to get my first wave-ui app running. Perhaps the most mysterious paragraph section 3 of the installation. -- Place a 'w-app at the route of your app' -- in a file named 'App.js'
The structure of the documentation itself has been of little help as it places the in /documentation/index.vue.
Have you any plans for such a 'step by step to your first wave-ui app'?

If there is a table inside the body of a card, it would be nice if the two worked together a bit:

1. Remove the padding from the card body
2. Remove the border from the table

Hey there!
when I use a w-select in a w-dialog, the menu elements are rendered behind the dialog and were not accessible. I tried to fix it by adding:

.w-select__menu {
  z-index: 100;
}

But I could not get it working. I will let you know, if I find some more details.
Cheers :)

Edit: Ah, went into your component and saw, that dialog has an index of 100. I was able to fix it temporary with a z-index of 1000, for w-select__menu

The notification will be rewritten in HTML?
Thank you.

Hi, I'm not so sure if this feature is available because i don't see in the documentation but if doesn't have, i would suggest to have this in input field.

Hi

This is not really an issue, more of a comment / feature request.

I know that the Table is still under development, but as bare minimum for us, it would need to have a facility to fix the left most n columns as we are looking for a table to display results of multi-dimensional data, where the number of columns that need to be fixed will vary depending on how many dimensions are nested in the column area and how many attributes each of those dimensions has. Similarly the number of columns with figures will also vary depending on the query. At present we are using DexExtreme's DataTable which seems to give us most of what we want, although it is quite a large download.

There are a lot of tables that cater for the standard product list and I think your table will that

I'm pretty sure lines 148 and 149 should be swapped:

is it possible to use only datapickers, instead of the calendar?

This is a functioning example of w-switch without label-on-left:

But with label-on-left, its behavior is really curious: (the v-model value is changing but just cannot be tell from the look)

The browser is Mozill Firefox 87.0b1 (64-bit). And I can reproduce this on Google Chrome 88.0.4324.182 (Official Build) (64-bit).
I am currently using wave-ui@next ([email protected]) and the examples (see below) in CodePen seems to be using https://unpkg.com/wave-ui@latest, that is [email protected].

Anyway, thank you for your hard work on this brilliant project!

A way to reproduce

Go to https://antoniandre.github.io/wave-ui/w-switch. And from any of the examples, go to a corresponding CodePen editor and make one w-switch label-on-left with an arbitrary label. And the switch will look like always off.

Hellooo,

Thank you for the great UI Framework, i wanna ask something about dynamic tabs.
Can you add scrolling on that, i just try adding a lot of tabs in your demo page and the rest of other tabs doesn't show up.

terima kasih,

It points to:

https://antoniandre.github.io/wave-ui/https:/github.com/antoniandre/wave-ui

Is there any plan to implement WCAG/Section 501 (accesibility)?

For example, when focusing w-select, it MUST respnd to arrow up/down keys...

Hi, this could be a misunderstanding but I didn´t see in the documentation support for responsive spacing classes.
For example, the class lg-mt5 could be added for margin top for the respective screen size and in the same element it could also have the class sm-mt0 which would change the margin-top for the respective screen size.

Support for this feature would be appreciated , Thanks

Could you provide the html for the common layouts?

How are we supposed to access this.$waveui when using the composition API setup() function? I know you can't refer to this directly in setup(), but it also doesn't seem to work in computed functions either.

Tailwind and Wave UI both expose utility CSS classes; however, there are conflicts between the two. For example:
mx-1 applies a negative margin in Wave UI, but is expected a positive margin in Tailwind.

Is there a way I can scope/prefix Wave UI classes so that they are lower priority than Tailwind? Or any recommendations on how to avoid this naming conflict?

Hi !!!

we very like your w-dialog

we hope can call api to use it

ex.

this.$wave.dialog({
               type: 'confirm',
               title: 'title',
               text: 'text',
               .....
       })

is there a port for svelte?

Hello,

I try to use Wave-UI, but I obtain a failing compile message in console and an alert in VSCode.

Vue CLI : 4.5.12
Vue : 3.0.11
Wave UI : 1.28.0

VSCode alert on main.js import WaveUI from "wave-ui"; :

module "/node_modules/wave-ui/dist/wave-ui.common"
Could not find a declaration file for module 'wave-ui'. '/node_modules/wave-ui/dist/wave-ui.common.js' implicitly has an 'any' type.
Try npm i --save-dev @types/wave-ui if it exists or add a new declaration (.d.ts) file containing declare module 'wave-ui';ts(7016)

The console message :

Uncaught TypeError: Cannot convert undefined or null to object
at Function.assign ()
at mergeConfig (wave-ui.common.js?df19:5619)
at new WaveUI (wave-ui.common.js?df19:6368)
at eval (main.js?56d7:13)
at Module../src/main.js (app.js:1217)
at webpack_require (app.js:854)
at fn (app.js:151)
at Object.1 (app.js:1278)
at webpack_require (app.js:854)
at checkDeferredModules (app.js:46)

The main.js script :

import { createApp } from "vue";
import App from "./App.vue";
import WaveUI from "wave-ui"; // VSCode alert here
import "wave-ui/dist/wave-ui.css";

const app = createApp(App);

new WaveUI(app, {
    // Some Wave UI options
});

app.mount("#app");

Any idea ? Thx

The notification manager is a great improvement! Unfortunately the update to 1.36.0 is not working for me. I am getting the following error:

 ERROR  [Vue warn]: Error in render: "TypeError: Cannot read property 'notifications' of null"                                                                                              15:13:09

found in

---> <WNotificationManager> at src/wave-ui/components/w-notification-manager.vue
       <WApp> at src/wave-ui/components/w-app.vue
         <Layouts/default.vue> at layouts/default.vue
           <Root>

After a look at the "w-notification-manager" component, it seems to me like the "this.notifManager" data prop is still initialized as null, when the computed method tries to access it. Even though it should be instantiated as a "new NotificationManager()" in beforeMount. Maybe some sort of (nuxt-related) timing issue?

I tried debugging, but changes to the source code in the node_module did not apply, since the bundled version is used and I was not able to rebuild the module properly. I also tried deleting node_modules and the package-lock.json, but I keep getting this error, using nuxt js.

Hey there!
I am struggeling to implement an async validation method. Any idea how I would do that? :)

...
validators: {
  checkUsername: (value) => this.asyncMethodToCheckUsername(value) || 'Username already taken!'
}
...

The method returns undefined when called as validator, but true or false when called from somewhere else.

When using the validator as an async function like this, result.data contains true or false, but no errors are triggered.

...
validators: {
  checkUsername: async (value) => {
      const result = await this.$store.dispatch('auth/checkUsername', value);
      return result.data || 'Username already taken!';
    },
}
...

Any hint would be much appreciated!

It's fun to work with your Library by the way!

I already created issue in here. antoniandre/nuxt-waveui#1

I think we can open a discussion about a11y and things must be addressed (I'm too busy, but I can make tests and suggestions when possible).

To begin, 2 things to do:

• w-select: remove from last to first and first to last (related to closed #25 (comment))
• w-checkbox: span clikable area, make clickable on container (know clickable on check and label)

The proper orthography is Sass, it is never put in all caps, whether referring to the language, the syntax, or the file extension (.sass).

I use vue cli to create a project, and use waveUI ,but i meet this problem：
error in ./node_modules/wave-ui/src/wave-ui/index.js

Module parse failed: Unexpected token (13:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export default class WaveUI {

static instance = null
| static vueInstance = null // Needed until constructor.
|

@ ./src/main.js 7:0-41 8:4-10
@ multi (webpack)-dev-server/client?http://192.168.3.2:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Here is my package:
{
"name": "wave",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/parser": "^7.12.11",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/runtime": "^7.12.5",
"babel-loader": "^8.2.2",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-react-transform": "^3.0.0",
"babel-upgrade": "^1.0.1",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"wave-ui": "^1.14.9"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

babel configration file:
module.exports = {
presets: [
'@babel/preset-react',
'@babel/preset-env',
'@vue/cli-plugin-babel/preset',
],
plugins: [
'lodash',
'@babel/plugin-transform-runtime',
'@babel/plugin-proposal-class-properties'
]
}

It would be nice if we could set a "read-only" prop on a w-form element and have it automatically make all wave-ui form elements inside of it read-only, rather than having to manually set it for each element individually. The same applies to "disabled".

'emitted' is repeatedly misspelt (misspelled in the US) in the documentation about form events.

When using the no-ripple option in switch, it still shows ripple animation?

  <w-switch
    no-ripple
    :value="true"
    color="pink">
  </w-switch>

<w-checkbox no-ripple>Test</w-checkbox>

<w-radio name="radio1" no-ripple>Option 1</w-radio>
<w-radio name="radio1" no-ripple>Option 2</w-radio>

I mean https://github.com/vitejs/vite, which is backended by rollup. Of course, I can use the packed .js & .css normally.

But it is not even possible to just import WaveUI from 'wave-ui/src/wave-ui' on vite. It looks like vite can not resolve component without .vue.

Or maybe support customization without a deep path include(which is not encouraged by vite)? Maybe by the syntax sugar in vuejs/rfcs#182, css variables.

EDIT: BTW, nice project. I found it well-considered on many details.

It would be nice if there was an ability to select multiple entries in a table at the same time. This is often useful for powering batch operations.

I am curious if global methods exist (mixin) to display these various dialogs, something like

this.$alert('hello world');
this.$confirm('hello world',{okButton: 'Yup', cancelButton: 'Nope'});
this.$prompt('What is your name?',{default: 'Mike'});

Do we have Discord chat?

Are there plans for a UMD/Standalone version of Wave UI?

Following your instructions for customisation I immediately ran into this error! HELP!
It does not help that the cited webpack site is currently unreadable.

ERROR Failed to compile with 1 error 06:22:14
error in ./node_modules/wave-ui/src/wave-ui/index.js

Module parse failed: Unexpected token (14:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export default class WaveUI {

static instance = null
| static registered = false
|

@ ./src/main.js 8:0-41 14:4-10
@ multi (webpack)-dev-server/client?http://192.168.1.80:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Is there an event before closing the drawer?

Can events be used to determine whether to close the drawer ?

thank u !!

this ui is very powerful !!!

Hello,

I have been looking everywhere through the source and documentation but so far I have been unable to remove the calendar icon / date picker from a input field type="date".

Is this possible? And if so, how?

Nice library, really clean. I checked it out because it was an early adopter of Vue 3, but Typescript is a requirement for me. Are there any plans to support a typelibrary for TS?

Hello!

Thanks for sharing this awesome library.

I would like to contribute to the documentation regarding the translation exemple from pug to HTML.

As many people don't already use pug, making this translation will be easier for people using HTML

Error message is
error '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead vue/no-deprecated-v-bind-sync
The line in question is <w-form class="px8 pt2 pb12" v-model="form.valid" :errors-count.sync="form.errorsCount" @Validate="onValidate" @success="onSuccess">
I am too new to vue, pug or wave-ui too be able to correct this line myself. I could of course set my compiler to permit depricated but I prefer to learn only vue3.
Brian

The documentation states that width

Accepts a string made of a value and a unit (e.g. 2.5em) or a number (e.g. 45) that will be a pixel value.

However, using a string produces the warning

Invalid prop: type check failed for prop "width". Expected Number with value NaN, got String with value "2.5em". 

I have tested using both Vue 2 & Vue 3, using Wave UI version 1.20.3

A demo of this can be found at this codepen

Selected rows stay selected even after the contents of the table have been updated. It would be nice to be able to reset the selection when the list of items changes.

I'm using Vue 3.

Hi.

Do you have any plans to realize tables component?

How to select a table's row with js?
I've tried to set selected rows property but didn't work

Instead of having to create w-notification elements in potentially deeply nested components and worry about having them overlap with other notifications and so on, it would be nice if notifications could be triggered from anywhere with a function call, and have them centrally managed.

Ideally, notifications would also never overlap. If a notification was triggered while another one was still visible, they should be automatically arranged such that they are both always visible.

I read that this UI framework was supposed to work for Vue 3, but that doesn't really seem to be the case yet? Or maybe it does and the documentation is simply lacking?

`
<template #item-title.1>Item title 1
<template #item-content.1>Item content 1

<template #item-title.2>Item title 2
<template #item-content.2>Item content 2

<template #item-title.3>Item title 3
<template #item-content.3>Item content 3
`

The "Do you (really) need even more flexibility?" (I do) example results in repeated:

'v-slot' directive doesn't support any modifier vue/valid-v-slot

errors.

I would've gone and asked in some Telegram/Discord channel, but you seemingly don't have any?

Hi 👋. I was looking around for different component libraries for Vue and saw this one. I noticed that expanding/ accordion sections on the front page changes the page scroll position, at least on Chrome:

https://antoniandre.github.io/wave-ui/

Seems like a bug!

Hii @antoniandre amazing library. Will be much better if it supports tree shaking. Any plan to add the same ?