@lemonadejs/modal 2.3.6 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +118 -118
- package/dist/index.d.ts +73 -73
- package/dist/index.js +490 -490
- package/dist/react.js +40 -0
- package/dist/style.css +124 -124
- package/dist/vue.js +52 -0
- package/package.json +21 -21
package/dist/react.js
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// @ts-nocheck
|
|
2
|
+
import React, { useRef, useEffect } from "react";
|
|
3
|
+
import { renderToStaticMarkup } from 'react-dom/server';
|
|
4
|
+
import Component from './index';
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
// @ts-ignore
|
|
8
|
+
export default React.forwardRef((props, mainReference) => {
|
|
9
|
+
// Dom element
|
|
10
|
+
const Ref = useRef(null);
|
|
11
|
+
|
|
12
|
+
const template = renderToStaticMarkup(props.children)
|
|
13
|
+
|
|
14
|
+
// Get the properties for the spreadsheet
|
|
15
|
+
let options = { ...props };
|
|
16
|
+
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
// @ts-ignore
|
|
19
|
+
if (!Ref.current.innerHTML) {
|
|
20
|
+
mainReference.current = Component(Ref.current, options, template);
|
|
21
|
+
}
|
|
22
|
+
}, []);
|
|
23
|
+
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
for (let key in props) {
|
|
26
|
+
if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
|
|
27
|
+
if (props[key] !== mainReference.current[key]) {
|
|
28
|
+
mainReference.current[key] = props[key];
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}, [props])
|
|
33
|
+
|
|
34
|
+
let prop = {
|
|
35
|
+
ref: Ref,
|
|
36
|
+
style: { height: '100%', width: '100%' }
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
return React.createElement("div", prop);
|
|
40
|
+
})
|
package/dist/style.css
CHANGED
|
@@ -1,125 +1,125 @@
|
|
|
1
|
-
.lm-modal {
|
|
2
|
-
position: absolute;
|
|
3
|
-
min-width: 300px;
|
|
4
|
-
min-height: 240px;
|
|
5
|
-
border-radius: 5px;
|
|
6
|
-
z-index: 15;
|
|
7
|
-
background-color: #fff;
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
box-shadow: 0 0 12px rgb(0 0 0 / 22%);
|
|
10
|
-
opacity: 1;
|
|
11
|
-
transition: opacity 0.5s ease;
|
|
12
|
-
will-change: transform;
|
|
13
|
-
border: 1px solid #bbb;
|
|
14
|
-
outline: none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.lm-modal[center] {
|
|
18
|
-
position: fixed;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.lm-modal-backdrop {
|
|
22
|
-
position: fixed;
|
|
23
|
-
top: 0;
|
|
24
|
-
left: 0;
|
|
25
|
-
width: 100vw;
|
|
26
|
-
height: 100vh;
|
|
27
|
-
background-color: #00000020;
|
|
28
|
-
z-index: 999;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.lm-modal-layers:focus {
|
|
32
|
-
z-index: 999;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.lm-modal-animation {
|
|
36
|
-
transform: none;
|
|
37
|
-
animation: slide-bottom-in 0.4s forwards;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.lm-modal[data-responsive].fullscreen {
|
|
41
|
-
top: 0;
|
|
42
|
-
height: 100% !important;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.lm-modal.moving {
|
|
46
|
-
cursor: move !important;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.lm-modal-picker {
|
|
50
|
-
width: 100% !important;
|
|
51
|
-
height: 260px !important;
|
|
52
|
-
left: 0;
|
|
53
|
-
bottom: 0;
|
|
54
|
-
border: 0;
|
|
55
|
-
border-radius: 0;
|
|
56
|
-
transform: none;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.lm-modal[title]::before {
|
|
60
|
-
content: attr(title);
|
|
61
|
-
display: block;
|
|
62
|
-
position: relative;
|
|
63
|
-
width: 100%;
|
|
64
|
-
border-bottom: 1px solid #e9e9e9;
|
|
65
|
-
padding: 10px;
|
|
66
|
-
box-sizing: border-box;
|
|
67
|
-
font-size: 1.2em;
|
|
68
|
-
line-height: 24px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.lm-modal::after {
|
|
72
|
-
font-family: 'Material Icons';
|
|
73
|
-
cursor: pointer;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.lm-modal[closable="true"]::after {
|
|
77
|
-
content: 'close';
|
|
78
|
-
display: block;
|
|
79
|
-
position: absolute;
|
|
80
|
-
top: 10px;
|
|
81
|
-
right: 10px;
|
|
82
|
-
font-size: 24px;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.lm-modal[minimizable="true"]::after {
|
|
86
|
-
content: '\2500';
|
|
87
|
-
display: block;
|
|
88
|
-
position: absolute;
|
|
89
|
-
top: 10px;
|
|
90
|
-
right: 10px;
|
|
91
|
-
font-size: 24px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.lm-modal[title=""]::before {
|
|
95
|
-
display: none;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.lm-modal[closed="true"] {
|
|
99
|
-
display: none !important;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.lm-modal[minimized="true"] {
|
|
103
|
-
bottom: 0;
|
|
104
|
-
top: initial !important;
|
|
105
|
-
left: initial !important;
|
|
106
|
-
width: 200px !important;
|
|
107
|
-
height: 45px !important;
|
|
108
|
-
min-width: initial;
|
|
109
|
-
min-height: initial;
|
|
110
|
-
overflow: hidden;
|
|
111
|
-
transition: margin 0.2s ease-in-out;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.lm-modal[minimized="true"]::after {
|
|
115
|
-
content: 'open_in_full';
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
@keyframes slide-bottom-in {
|
|
119
|
-
0% { transform: translateY(100%); }
|
|
120
|
-
100% { transform: translateY(0%); }
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.lm-modal.hide {
|
|
124
|
-
opacity: 0;
|
|
1
|
+
.lm-modal {
|
|
2
|
+
position: absolute;
|
|
3
|
+
min-width: 300px;
|
|
4
|
+
min-height: 240px;
|
|
5
|
+
border-radius: 5px;
|
|
6
|
+
z-index: 15;
|
|
7
|
+
background-color: #fff;
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
box-shadow: 0 0 12px rgb(0 0 0 / 22%);
|
|
10
|
+
opacity: 1;
|
|
11
|
+
transition: opacity 0.5s ease;
|
|
12
|
+
will-change: transform;
|
|
13
|
+
border: 1px solid #bbb;
|
|
14
|
+
outline: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.lm-modal[center] {
|
|
18
|
+
position: fixed;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.lm-modal-backdrop {
|
|
22
|
+
position: fixed;
|
|
23
|
+
top: 0;
|
|
24
|
+
left: 0;
|
|
25
|
+
width: 100vw;
|
|
26
|
+
height: 100vh;
|
|
27
|
+
background-color: #00000020;
|
|
28
|
+
z-index: 999;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.lm-modal-layers:focus {
|
|
32
|
+
z-index: 999;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.lm-modal-animation {
|
|
36
|
+
transform: none;
|
|
37
|
+
animation: slide-bottom-in 0.4s forwards;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.lm-modal[data-responsive].fullscreen {
|
|
41
|
+
top: 0;
|
|
42
|
+
height: 100% !important;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.lm-modal.moving {
|
|
46
|
+
cursor: move !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.lm-modal-picker {
|
|
50
|
+
width: 100% !important;
|
|
51
|
+
height: 260px !important;
|
|
52
|
+
left: 0;
|
|
53
|
+
bottom: 0;
|
|
54
|
+
border: 0;
|
|
55
|
+
border-radius: 0;
|
|
56
|
+
transform: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.lm-modal[title]::before {
|
|
60
|
+
content: attr(title);
|
|
61
|
+
display: block;
|
|
62
|
+
position: relative;
|
|
63
|
+
width: 100%;
|
|
64
|
+
border-bottom: 1px solid #e9e9e9;
|
|
65
|
+
padding: 10px;
|
|
66
|
+
box-sizing: border-box;
|
|
67
|
+
font-size: 1.2em;
|
|
68
|
+
line-height: 24px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.lm-modal::after {
|
|
72
|
+
font-family: 'Material Icons';
|
|
73
|
+
cursor: pointer;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.lm-modal[closable="true"]::after {
|
|
77
|
+
content: 'close';
|
|
78
|
+
display: block;
|
|
79
|
+
position: absolute;
|
|
80
|
+
top: 10px;
|
|
81
|
+
right: 10px;
|
|
82
|
+
font-size: 24px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.lm-modal[minimizable="true"]::after {
|
|
86
|
+
content: '\2500';
|
|
87
|
+
display: block;
|
|
88
|
+
position: absolute;
|
|
89
|
+
top: 10px;
|
|
90
|
+
right: 10px;
|
|
91
|
+
font-size: 24px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.lm-modal[title=""]::before {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.lm-modal[closed="true"] {
|
|
99
|
+
display: none !important;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.lm-modal[minimized="true"] {
|
|
103
|
+
bottom: 0;
|
|
104
|
+
top: initial !important;
|
|
105
|
+
left: initial !important;
|
|
106
|
+
width: 200px !important;
|
|
107
|
+
height: 45px !important;
|
|
108
|
+
min-width: initial;
|
|
109
|
+
min-height: initial;
|
|
110
|
+
overflow: hidden;
|
|
111
|
+
transition: margin 0.2s ease-in-out;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.lm-modal[minimized="true"]::after {
|
|
115
|
+
content: 'open_in_full';
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@keyframes slide-bottom-in {
|
|
119
|
+
0% { transform: translateY(100%); }
|
|
120
|
+
100% { transform: translateY(0%); }
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.lm-modal.hide {
|
|
124
|
+
opacity: 0;
|
|
125
125
|
}
|
package/dist/vue.js
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { h } from 'vue';
|
|
2
|
+
import component from "./index";
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
inheritAttrs: false,
|
|
7
|
+
mounted() {
|
|
8
|
+
let options = {
|
|
9
|
+
...this.$attrs
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
this.el = this.$refs.container;
|
|
13
|
+
|
|
14
|
+
this.current = component(this.$refs.container, options);
|
|
15
|
+
},
|
|
16
|
+
setup(_, context) {
|
|
17
|
+
let containerProps = {
|
|
18
|
+
ref: 'container',
|
|
19
|
+
style: {
|
|
20
|
+
width: '100%',
|
|
21
|
+
height: '100%',
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
let vnode = [];
|
|
26
|
+
|
|
27
|
+
if (context.slots.default && typeof(context.slots.default) === 'function') {
|
|
28
|
+
vnode = context.slots.default()
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return () => h('div', containerProps, vnode);
|
|
32
|
+
},
|
|
33
|
+
watch: {
|
|
34
|
+
$attrs: {
|
|
35
|
+
deep: true,
|
|
36
|
+
handler() {
|
|
37
|
+
this.updateState();
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
methods: {
|
|
42
|
+
updateState() {
|
|
43
|
+
for (let key in this.$attrs) {
|
|
44
|
+
if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
|
|
45
|
+
if (this.$attrs[key] !== this.current[key]) {
|
|
46
|
+
this.current[key] = this.$attrs[key];
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@lemonadejs/modal",
|
|
3
|
-
"title": "JavaScript Modal",
|
|
4
|
-
"description": "LemonadeJS modal is a JavaScript component to create floating modals.",
|
|
5
|
-
"author": {
|
|
6
|
-
"name": "Contact <contact@lemonadejs.net>",
|
|
7
|
-
"url": "https://lemonadejs.net"
|
|
8
|
-
},
|
|
9
|
-
"keywords": [
|
|
10
|
-
"javascript modal",
|
|
11
|
-
"lemonadejs modal",
|
|
12
|
-
"js modal",
|
|
13
|
-
"modal js"
|
|
14
|
-
],
|
|
15
|
-
"dependencies": {
|
|
16
|
-
"lemonadejs": "^
|
|
17
|
-
},
|
|
18
|
-
"main": "dist/index.js",
|
|
19
|
-
"types": "dist/index.d.ts",
|
|
20
|
-
"version": "2.
|
|
21
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@lemonadejs/modal",
|
|
3
|
+
"title": "JavaScript Modal",
|
|
4
|
+
"description": "LemonadeJS modal is a JavaScript component to create floating modals.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Contact <contact@lemonadejs.net>",
|
|
7
|
+
"url": "https://lemonadejs.net"
|
|
8
|
+
},
|
|
9
|
+
"keywords": [
|
|
10
|
+
"javascript modal",
|
|
11
|
+
"lemonadejs modal",
|
|
12
|
+
"js modal",
|
|
13
|
+
"modal js"
|
|
14
|
+
],
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"lemonadejs": "^4.0.7"
|
|
17
|
+
},
|
|
18
|
+
"main": "dist/index.js",
|
|
19
|
+
"types": "dist/index.d.ts",
|
|
20
|
+
"version": "2.4.0"
|
|
21
|
+
}
|