Skip to content

Commit 7a6fe97

Browse files
ThomasLeconteThomasLeconte
committed
Merge branch 'develop'
2 parents 5e4602c + ad84e81 commit 7a6fe97

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+18830
-892
lines changed

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
/node_modules
2-
/lib
2+
/lib
3+
/cypress/server-test/node_modules
4+
/cypress/videos

‎.npmignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
src
2+
cypress
3+
cypress.config.ts
24
tsconfig.json
35
tslint.json
46
.prettierrc

‎README.md

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
# Vuetify 3 Dialog
22
Lite Vue plugin working with Vuetify, allowing you to show dialogs or snackbars programatically.
33

4+
## Summary
5+
- [Installation](#install-it)
6+
- [Usage](#usage)
7+
- [Dialogs](#dialogs)
8+
- [Snackbars](#snackbars)
9+
- [SFC compatibility](#sfc-compatibility)
10+
- [Developers](#developers)
11+
412
## Install it
513
First, run `npm install vuetify3-dialog`.
614
**⚠️You must have Vuetify installed on your project. If you don't have installed yet, please follow this link : [Install Vuetify](https://vuetifyjs.com/en/getting-started/installation/)**
@@ -34,12 +42,11 @@ this.$dialog.create({
3442
title: "My title",
3543
text: "My dialog message",
3644
buttons: [
37-
{ title: 'My first button', key: 'button1' },
38-
{ title: 'My second button', key: 'button2' },
39-
{ title: 'My third button', key: 'button3' },
45+
{ title: 'My first button', key: 'button1', /* any v-btn api option */ },
46+
...
4047
],
4148
cardOptions: {
42-
//any v-card api option
49+
//any v-card api options
4350
}
4451
}).then((anwser) => {
4552
//Do something with the anwser corresponding to the key of the clicked button
@@ -59,13 +66,18 @@ You can also create a simple dialog with a message and a title, by precizing lev
5966
this.$dialog.info(
6067
"My dialog message",
6168
"My title", //optional
62-
{ width: '500px'} //optional v-card api option
69+
{ width: '500px'} //optional v-card api options,
70+
{ variant: 'outlined' } //optional v-btn api options
6371
).then(() => {
6472
//Do something when the user close the dialog
6573
})
6674
```
6775
There is 4 levels of severity : `info`, `success`, `warning` and `error`.
6876

77+
__Usefull links:__
78+
- [v-card api](https://vuetifyjs.com/en/api/v-card/)
79+
- [v-dialog api](https://vuetifyjs.com/en/api/v-dialog/)
80+
6981
### Snackbars
7082
You can create a fully personalized snackbar with the following method :
7183
```js
@@ -75,7 +87,7 @@ this.$notify.create({
7587
level: 'success',
7688
location: 'top right',
7789
notifyOptions: {
78-
//any v-snackbar api option
90+
//any v-snackbar api options
7991
}
8092
})
8193
.then(() => {
@@ -87,13 +99,16 @@ You can also create a simple snackbar with a message and a title, by precizing l
8799
```js
88100
this.$notify.info(
89101
"My snackbar message",
90-
{ variant: 'outlined' } // any v-snackbar api option
102+
{ variant: 'outlined' } // any v-snackbar api options
91103
).then(() => {
92104
//Do something when the user close the snackbar
93105
})
94106
```
95107
There is 4 levels of severity : `info`, `success`, `warning` and `error`.
96108

109+
__Usefull links:__
110+
- [v-snackbar api](https://vuetifyjs.com/en/api/v-snackbar/)
111+
97112
### SFC compatibility
98113
If you want to use this plugin in an SFC component, some methods are available. Working principe is the same as previous methods, and arguments are the same.
99114
```html
@@ -110,4 +125,12 @@ if(true){
110125
notifySuccess("My snackbar message")
111126
}
112127
</script>
113-
```
128+
```
129+
130+
## Developers
131+
If you want to contribute to this project, you can clone it and run `npm install` to install dependencies.
132+
133+
Then, you need to test your changes. A demo project is located at `cypress/test-server` of this repository. You can launch it with `npm run test-server`.
134+
If you have the following error : <span style="color: #e74c3c">[vite] Internal server error: Failed to resolve entry for package "vuetify3-dialog". The package may have incorrect main/module/exports specified in its package.json.</span>, make sure you have run `npm run build` before to build the plugin and make it available for the demo project.
135+
136+
Finally, when you will have finish your changes, make sure all tests are passing with `npm run test`, thanks in advance !

‎cypress.config.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineConfig } from "cypress";
2+
3+
export default defineConfig({
4+
e2e: {
5+
setupNodeEvents(on, config) {
6+
// implement node event listeners here
7+
},
8+
},
9+
retries: 2
10+
});

‎cypress/e2e/dialog.cy.ts

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
beforeEach(() => {
2+
cy.visit('http://localhost:3000')
3+
cy.wait(500)
4+
})
5+
6+
describe('server is started', () => {
7+
it('homepage title is present', () => {
8+
cy.get('h1').should('contain', 'Vuetify')
9+
})
10+
11+
it('create dialog', () => {
12+
cy.get('button#create-dialog').click()
13+
cy.get('div.v-overlay--active').should('exist')
14+
cy.get('div.v-card-title').should('contain', 'My dialog')
15+
cy.get('div.v-card-text').should('contain', 'Hello world!')
16+
cy.get('div.v-card-actions').find('button').should('have.length', 2)
17+
})
18+
19+
it('success dialog', () => {
20+
cy.get('button#success-dialog').click()
21+
cy.get('div.v-overlay--active').should('exist')
22+
cy.get('div.v-card-title').should('contain', 'My success dialog')
23+
cy.get('div.v-card-title').find('i').should('have.class', 'mdi-check-circle')
24+
cy.get('div.v-card-title').find('i').should('have.class', 'text-success')
25+
cy.get('div.v-card-text').should('contain', 'Hello world!')
26+
cy.get('div.v-card-actions').find('button').should('have.length', 1)
27+
cy.get('div.v-card-actions').find('button').should('have.class', 'text-success')
28+
})
29+
30+
it('confirm dialog', () => {
31+
32+
// Stub console.log to check if confirm dialog is true, because of click on confirm button
33+
cy.window()
34+
.its('console')
35+
.then((console) => {
36+
cy.stub(console, 'log').callsFake((msg) => {
37+
expect(typeof msg).to.equal('boolean')
38+
expect(msg).to.equal(true)
39+
})
40+
})
41+
cy.get('button#confirm-dialog').click()
42+
cy.get('div.v-overlay--active').should('exist')
43+
cy.get('div.v-card-title').should('contain', 'My confirm dialog')
44+
cy.get('div.v-card-title').find('i').should('have.class', 'mdi-alert')
45+
cy.get('div.v-card-title').find('i').should('have.class', 'text-warning')
46+
cy.get('div.v-card-text').should('contain', 'Hello world!')
47+
cy.get('div.v-card-actions').find('button').should('have.length', 2)
48+
cy.get('div.v-card-actions').find('button').should('have.class', 'text-warning')
49+
cy.get('div.v-card-actions').find('button').should('have.class', 'text-grey')
50+
cy.get('div.v-card-actions').find('button').should('contain', 'Cancel button')
51+
cy.get('div.v-card-actions').find('button').should('contain', 'Confirm button')
52+
//click on confirm button
53+
cy.get('div.v-card-actions').find('button').eq(1).click()
54+
})
55+
56+
it('create SFC dialog', () => {
57+
cy.get('button#sfc-create-dialog').click()
58+
cy.get('div.v-overlay--active').should('exist')
59+
cy.get('div.v-card-title').should('contain', 'My SFC dialog')
60+
cy.get('div.v-card-text').should('contain', 'Hello world!')
61+
cy.get('div.v-card-actions').find('button').should('have.length', 2)
62+
})
63+
})

‎cypress/e2e/notify.cy.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
beforeEach(() => {
2+
cy.visit('http://localhost:3000')
3+
cy.wait(500)
4+
})
5+
6+
it('create notification', () => {
7+
cy.get('button#create-notification').click()
8+
cy.get('div.v-snackbar--active').should('exist')
9+
cy.get('div.v-snackbar__wrapper').should('exist')
10+
cy.get('div.v-snackbar__content').should('contain', 'Hello world!')
11+
cy.get('div.v-snackbar__wrapper').should('have.class', 'bg-info')
12+
})
13+
14+
it('error notification', () => {
15+
cy.get('button#error-notification').click()
16+
cy.get('div.v-snackbar--active').should('exist')
17+
cy.get('div.v-snackbar__wrapper').should('exist')
18+
cy.get('div.v-snackbar__content').should('contain', 'Hello error!')
19+
cy.get('div.v-snackbar__wrapper').should('have.class', 'bg-error')
20+
})
21+
22+
it('create sfc notification', () => {
23+
cy.get('button#sfc-create-notification').click()
24+
cy.get('div.v-snackbar--active').should('exist')
25+
cy.get('div.v-snackbar__wrapper').should('exist')
26+
cy.get('div.v-snackbar__content').should('contain', 'My SFC notification!')
27+
cy.get('div.v-snackbar__wrapper').should('have.class', 'bg-success')
28+
})

‎cypress/fixtures/example.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "hello@cypress.io",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}

‎cypress/support/commands.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/// <reference types="cypress" />
2+
// ***********************************************
3+
// This example commands.ts shows you how to
4+
// create various custom commands and overwrite
5+
// existing commands.
6+
//
7+
// For more comprehensive examples of custom
8+
// commands please read more here:
9+
// https://on.cypress.io/custom-commands
10+
// ***********************************************
11+
//
12+
//
13+
// -- This is a parent command --
14+
// Cypress.Commands.add('login', (email, password) => { ... })
15+
//
16+
//
17+
// -- This is a child command --
18+
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
19+
//
20+
//
21+
// -- This is a dual command --
22+
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
23+
//
24+
//
25+
// -- This will overwrite an existing command --
26+
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
27+
//
28+
// declare global {
29+
// namespace Cypress {
30+
// interface Chainable {
31+
// login(email: string, password: string): Chainable<void>
32+
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
33+
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34+
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
35+
// }
36+
// }
37+
// }

‎cypress/support/e2e.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/e2e.ts is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

‎cypress/test-server/.browserslistrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
> 1%
2+
last 2 versions
3+
not dead
4+
not ie 11

0 commit comments

Comments
 (0)