@pequity/squirrel 1.0.22 → 1.0.23
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/dist/cjs/p-drawer.js
CHANGED
|
@@ -3,7 +3,7 @@ const pAlert = require("./p-alert.js");
|
|
|
3
3
|
const pCloseBtn = require("./p-close-btn.js");
|
|
4
4
|
const vue = require("vue");
|
|
5
5
|
const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
|
|
6
|
-
const
|
|
6
|
+
const __default__ = vue.defineComponent({
|
|
7
7
|
name: "PDrawer",
|
|
8
8
|
components: {
|
|
9
9
|
PAlert: pAlert,
|
|
@@ -69,6 +69,13 @@ const _sfc_main = vue.defineComponent({
|
|
|
69
69
|
enableClose: {
|
|
70
70
|
type: Boolean,
|
|
71
71
|
default: true
|
|
72
|
+
},
|
|
73
|
+
width: {
|
|
74
|
+
type: String,
|
|
75
|
+
default: "460px",
|
|
76
|
+
validator: (value) => {
|
|
77
|
+
return !!value.match(/^[0-9]+px$/);
|
|
78
|
+
}
|
|
72
79
|
}
|
|
73
80
|
},
|
|
74
81
|
emits: ["update:modelValue", "before-open", "opening", "opened", "before-close", "closing", "closed"],
|
|
@@ -85,6 +92,9 @@ const _sfc_main = vue.defineComponent({
|
|
|
85
92
|
},
|
|
86
93
|
transitionOutClass() {
|
|
87
94
|
return this.outClass || this.position === "right" ? "slideOutRight" : "slideOutLeft";
|
|
95
|
+
},
|
|
96
|
+
animationDuration() {
|
|
97
|
+
return (parseInt(this.width, 10) / 1200).toFixed(2) + "s";
|
|
88
98
|
}
|
|
89
99
|
},
|
|
90
100
|
created() {
|
|
@@ -140,6 +150,17 @@ const _sfc_main = vue.defineComponent({
|
|
|
140
150
|
}
|
|
141
151
|
}
|
|
142
152
|
});
|
|
153
|
+
const __injectCSSVars__ = () => {
|
|
154
|
+
vue.useCssVars((_ctx) => ({
|
|
155
|
+
"4c0aead4": _ctx.width,
|
|
156
|
+
"59cfae08": _ctx.animationDuration
|
|
157
|
+
}));
|
|
158
|
+
};
|
|
159
|
+
const __setup__ = __default__.setup;
|
|
160
|
+
__default__.setup = __setup__ ? (props, ctx) => {
|
|
161
|
+
__injectCSSVars__();
|
|
162
|
+
return __setup__(props, ctx);
|
|
163
|
+
} : __injectCSSVars__;
|
|
143
164
|
const _hoisted_1 = ["data-drawer-id", "aria-label", "aria-describedby", "aria-labelledby"];
|
|
144
165
|
const _hoisted_2 = ["id"];
|
|
145
166
|
const _hoisted_3 = {
|
|
@@ -213,7 +234,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
213
234
|
_ctx.title ? (vue.openBlock(), vue.createElementBlock("h3", {
|
|
214
235
|
key: 0,
|
|
215
236
|
id: `${_ctx.id}-title`,
|
|
216
|
-
class: vue.normalizeClass(["flex-1 text-xl font-medium", { "text-right": _ctx.position === "left" }])
|
|
237
|
+
class: vue.normalizeClass(["flex-1 text-xl font-medium leading-8", { "text-right": _ctx.position === "left" }])
|
|
217
238
|
}, vue.toDisplayString(_ctx.title), 11, _hoisted_2)) : vue.createCommentVNode("", true)
|
|
218
239
|
], true)
|
|
219
240
|
], 2)
|
|
@@ -249,5 +270,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
249
270
|
}, 8, ["enter-active-class", "leave-active-class", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
|
|
250
271
|
], 8, ["to"])) : vue.createCommentVNode("", true);
|
|
251
272
|
}
|
|
252
|
-
const pDrawer = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(
|
|
273
|
+
const pDrawer = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(__default__, [["render", _sfc_render], ["__scopeId", "data-v-f474eec2"]]);
|
|
253
274
|
module.exports = pDrawer;
|
package/dist/es/p-drawer.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import PAlert from "./p-alert.js";
|
|
2
2
|
import PCloseBtn from "./p-close-btn.js";
|
|
3
|
-
import { defineComponent, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow, renderSlot, createCommentVNode, createElementBlock, toDisplayString } from "vue";
|
|
3
|
+
import { defineComponent, useCssVars, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow, renderSlot, createCommentVNode, createElementBlock, toDisplayString } from "vue";
|
|
4
4
|
import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
|
|
5
|
-
const
|
|
5
|
+
const __default__ = defineComponent({
|
|
6
6
|
name: "PDrawer",
|
|
7
7
|
components: {
|
|
8
8
|
PAlert,
|
|
@@ -68,6 +68,13 @@ const _sfc_main = defineComponent({
|
|
|
68
68
|
enableClose: {
|
|
69
69
|
type: Boolean,
|
|
70
70
|
default: true
|
|
71
|
+
},
|
|
72
|
+
width: {
|
|
73
|
+
type: String,
|
|
74
|
+
default: "460px",
|
|
75
|
+
validator: (value) => {
|
|
76
|
+
return !!value.match(/^[0-9]+px$/);
|
|
77
|
+
}
|
|
71
78
|
}
|
|
72
79
|
},
|
|
73
80
|
emits: ["update:modelValue", "before-open", "opening", "opened", "before-close", "closing", "closed"],
|
|
@@ -84,6 +91,9 @@ const _sfc_main = defineComponent({
|
|
|
84
91
|
},
|
|
85
92
|
transitionOutClass() {
|
|
86
93
|
return this.outClass || this.position === "right" ? "slideOutRight" : "slideOutLeft";
|
|
94
|
+
},
|
|
95
|
+
animationDuration() {
|
|
96
|
+
return (parseInt(this.width, 10) / 1200).toFixed(2) + "s";
|
|
87
97
|
}
|
|
88
98
|
},
|
|
89
99
|
created() {
|
|
@@ -139,6 +149,17 @@ const _sfc_main = defineComponent({
|
|
|
139
149
|
}
|
|
140
150
|
}
|
|
141
151
|
});
|
|
152
|
+
const __injectCSSVars__ = () => {
|
|
153
|
+
useCssVars((_ctx) => ({
|
|
154
|
+
"4c0aead4": _ctx.width,
|
|
155
|
+
"59cfae08": _ctx.animationDuration
|
|
156
|
+
}));
|
|
157
|
+
};
|
|
158
|
+
const __setup__ = __default__.setup;
|
|
159
|
+
__default__.setup = __setup__ ? (props, ctx) => {
|
|
160
|
+
__injectCSSVars__();
|
|
161
|
+
return __setup__(props, ctx);
|
|
162
|
+
} : __injectCSSVars__;
|
|
142
163
|
const _hoisted_1 = ["data-drawer-id", "aria-label", "aria-describedby", "aria-labelledby"];
|
|
143
164
|
const _hoisted_2 = ["id"];
|
|
144
165
|
const _hoisted_3 = {
|
|
@@ -212,7 +233,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
212
233
|
_ctx.title ? (openBlock(), createElementBlock("h3", {
|
|
213
234
|
key: 0,
|
|
214
235
|
id: `${_ctx.id}-title`,
|
|
215
|
-
class: normalizeClass(["flex-1 text-xl font-medium", { "text-right": _ctx.position === "left" }])
|
|
236
|
+
class: normalizeClass(["flex-1 text-xl font-medium leading-8", { "text-right": _ctx.position === "left" }])
|
|
216
237
|
}, toDisplayString(_ctx.title), 11, _hoisted_2)) : createCommentVNode("", true)
|
|
217
238
|
], true)
|
|
218
239
|
], 2)
|
|
@@ -248,7 +269,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
248
269
|
}, 8, ["enter-active-class", "leave-active-class", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
|
|
249
270
|
], 8, ["to"])) : createCommentVNode("", true);
|
|
250
271
|
}
|
|
251
|
-
const pDrawer = /* @__PURE__ */ _export_sfc(
|
|
272
|
+
const pDrawer = /* @__PURE__ */ _export_sfc(__default__, [["render", _sfc_render], ["__scopeId", "data-v-f474eec2"]]);
|
|
252
273
|
export {
|
|
253
274
|
pDrawer as default
|
|
254
275
|
};
|
|
@@ -59,6 +59,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
59
59
|
type: BooleanConstructor;
|
|
60
60
|
default: boolean;
|
|
61
61
|
};
|
|
62
|
+
width: {
|
|
63
|
+
type: StringConstructor;
|
|
64
|
+
default: string;
|
|
65
|
+
validator: (value: string) => boolean;
|
|
66
|
+
};
|
|
62
67
|
}, unknown, {
|
|
63
68
|
id: string | null;
|
|
64
69
|
show: boolean;
|
|
@@ -66,6 +71,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
66
71
|
}, {
|
|
67
72
|
transitionInClass(): "slideInRight" | "slideInLeft";
|
|
68
73
|
transitionOutClass(): "slideOutRight" | "slideOutLeft";
|
|
74
|
+
animationDuration(): string;
|
|
69
75
|
}, {
|
|
70
76
|
close(): void;
|
|
71
77
|
beforeOpen(): void;
|
|
@@ -135,6 +141,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
135
141
|
type: BooleanConstructor;
|
|
136
142
|
default: boolean;
|
|
137
143
|
};
|
|
144
|
+
width: {
|
|
145
|
+
type: StringConstructor;
|
|
146
|
+
default: string;
|
|
147
|
+
validator: (value: string) => boolean;
|
|
148
|
+
};
|
|
138
149
|
}>> & {
|
|
139
150
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
140
151
|
"onBefore-open"?: ((...args: any[]) => any) | undefined;
|
|
@@ -145,6 +156,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
145
156
|
onClosed?: ((...args: any[]) => any) | undefined;
|
|
146
157
|
}, {
|
|
147
158
|
zIndex: number;
|
|
159
|
+
width: string;
|
|
148
160
|
title: string;
|
|
149
161
|
disabled: boolean;
|
|
150
162
|
position: string;
|
package/dist/style.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
.bg-cross[data-v-cb511035] {
|
|
10
10
|
background-image: url("data:image/svg+xml,%3csvg%20width='6'%20height='6'%20viewBox='0%200%206%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2511_8629)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3%203.51667L5.42083%205.9375L5.9375%205.42083L3.51667%203L5.9375%200.57917L5.42083%200.0625L3%202.48333L0.57917%200.0625L0.0625%200.57917L2.48333%203L0.0625%205.42083L0.57917%205.9375L3%203.51667Z'%20fill='%231A123B'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2511_8629'%3e%3crect%20width='6'%20height='6'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
|
|
11
11
|
}
|
|
12
|
-
.drawer[data-v-
|
|
12
|
+
.drawer[data-v-f474eec2] {
|
|
13
13
|
position: fixed;
|
|
14
14
|
bottom: 0px;
|
|
15
15
|
top: 0px;
|
|
@@ -21,17 +21,18 @@
|
|
|
21
21
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
22
22
|
outline: 2px solid transparent;
|
|
23
23
|
outline-offset: 2px;
|
|
24
|
-
width:
|
|
24
|
+
max-width: var(--4c0aead4);
|
|
25
|
+
width: 100%;
|
|
25
26
|
}
|
|
26
|
-
.drawer.drawer-left[data-v-
|
|
27
|
+
.drawer.drawer-left[data-v-f474eec2] {
|
|
27
28
|
left: 0px;
|
|
28
29
|
}
|
|
29
|
-
.drawer.drawer-right[data-v-
|
|
30
|
+
.drawer.drawer-right[data-v-f474eec2] {
|
|
30
31
|
right: 0px;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
/* Slide from right animations */
|
|
34
|
-
@keyframes slideInRight-
|
|
35
|
+
@keyframes slideInRight-f474eec2 {
|
|
35
36
|
0% {
|
|
36
37
|
transform: translate3d(100%, 0, 0);
|
|
37
38
|
visibility: visible;
|
|
@@ -40,12 +41,12 @@
|
|
|
40
41
|
transform: translate3d(0, 0, 0);
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
|
-
.slideInRight[data-v-
|
|
44
|
-
animation-duration:
|
|
44
|
+
.slideInRight[data-v-f474eec2] {
|
|
45
|
+
animation-duration: var(--59cfae08);
|
|
45
46
|
animation-fill-mode: both;
|
|
46
|
-
animation-name: slideInRight-
|
|
47
|
+
animation-name: slideInRight-f474eec2;
|
|
47
48
|
}
|
|
48
|
-
@keyframes slideOutRight-
|
|
49
|
+
@keyframes slideOutRight-f474eec2 {
|
|
49
50
|
0% {
|
|
50
51
|
transform: translate3d(0, 0, 0);
|
|
51
52
|
}
|
|
@@ -54,14 +55,14 @@
|
|
|
54
55
|
transform: translate3d(100%, 0, 0);
|
|
55
56
|
}
|
|
56
57
|
}
|
|
57
|
-
.slideOutRight[data-v-
|
|
58
|
-
animation-duration:
|
|
58
|
+
.slideOutRight[data-v-f474eec2] {
|
|
59
|
+
animation-duration: var(--59cfae08);
|
|
59
60
|
animation-fill-mode: both;
|
|
60
|
-
animation-name: slideOutRight-
|
|
61
|
+
animation-name: slideOutRight-f474eec2;
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
/* Slide from left animations */
|
|
64
|
-
@keyframes slideInLeft-
|
|
65
|
+
@keyframes slideInLeft-f474eec2 {
|
|
65
66
|
0% {
|
|
66
67
|
transform: translate3d(-100%, 0, 0);
|
|
67
68
|
visibility: visible;
|
|
@@ -70,12 +71,12 @@
|
|
|
70
71
|
transform: translate3d(0, 0, 0);
|
|
71
72
|
}
|
|
72
73
|
}
|
|
73
|
-
.slideInLeft[data-v-
|
|
74
|
-
animation-duration:
|
|
74
|
+
.slideInLeft[data-v-f474eec2] {
|
|
75
|
+
animation-duration: var(--59cfae08);
|
|
75
76
|
animation-fill-mode: both;
|
|
76
|
-
animation-name: slideInLeft-
|
|
77
|
+
animation-name: slideInLeft-f474eec2;
|
|
77
78
|
}
|
|
78
|
-
@keyframes slideOutLeft-
|
|
79
|
+
@keyframes slideOutLeft-f474eec2 {
|
|
79
80
|
0% {
|
|
80
81
|
transform: translate3d(0, 0, 0);
|
|
81
82
|
}
|
|
@@ -84,24 +85,25 @@
|
|
|
84
85
|
transform: translate3d(-100%, 0, 0);
|
|
85
86
|
}
|
|
86
87
|
}
|
|
87
|
-
.slideOutLeft[data-v-
|
|
88
|
-
animation-duration:
|
|
88
|
+
.slideOutLeft[data-v-f474eec2] {
|
|
89
|
+
animation-duration: var(--59cfae08);
|
|
89
90
|
animation-fill-mode: both;
|
|
90
|
-
animation-name: slideOutLeft-
|
|
91
|
+
animation-name: slideOutLeft-f474eec2;
|
|
91
92
|
}
|
|
92
93
|
|
|
93
94
|
/* Backdrop */
|
|
94
|
-
.fadeIn[data-v-
|
|
95
|
-
animation-
|
|
96
|
-
animation-name: fadeInFrames-a0b8be1e;
|
|
97
|
-
animation-fill-mode: both;
|
|
95
|
+
.fadeIn[data-v-f474eec2] {
|
|
96
|
+
animation-name: fadeInFrames-f474eec2;
|
|
98
97
|
}
|
|
99
|
-
.fadeOut[data-v-
|
|
100
|
-
animation-
|
|
101
|
-
|
|
98
|
+
.fadeOut[data-v-f474eec2] {
|
|
99
|
+
animation-name: fadeOutFrames-f474eec2;
|
|
100
|
+
}
|
|
101
|
+
.fadeIn[data-v-f474eec2],
|
|
102
|
+
.fadeOut[data-v-f474eec2] {
|
|
103
|
+
animation-duration: 0.25s;
|
|
102
104
|
animation-fill-mode: both;
|
|
103
105
|
}
|
|
104
|
-
@keyframes fadeInFrames-
|
|
106
|
+
@keyframes fadeInFrames-f474eec2 {
|
|
105
107
|
from {
|
|
106
108
|
opacity: 0;
|
|
107
109
|
animation-timing-function: cubic-bezier(0, 0, 1, 1);
|
|
@@ -110,7 +112,7 @@ to {
|
|
|
110
112
|
opacity: 1;
|
|
111
113
|
}
|
|
112
114
|
}
|
|
113
|
-
@keyframes fadeOutFrames-
|
|
115
|
+
@keyframes fadeOutFrames-f474eec2 {
|
|
114
116
|
from {
|
|
115
117
|
opacity: 1;
|
|
116
118
|
animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pequity/squirrel",
|
|
3
3
|
"description": "Squirrel component library",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.23",
|
|
5
5
|
"packageManager": "pnpm@8.9.2",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"scripts": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"module": "./dist/es/index.js",
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@popperjs/core": "2.11.8",
|
|
42
|
-
"@tanstack/vue-virtual": "3.2.
|
|
42
|
+
"@tanstack/vue-virtual": "3.2.1",
|
|
43
43
|
"dayjs": "1.11.10",
|
|
44
44
|
"floating-vue": "5.2.2",
|
|
45
45
|
"lodash-es": "4.17.21",
|
|
@@ -67,23 +67,23 @@
|
|
|
67
67
|
"@pequity/eslint-config": "^0.0.12",
|
|
68
68
|
"@semantic-release/changelog": "^6.0.3",
|
|
69
69
|
"@semantic-release/git": "^10.0.1",
|
|
70
|
-
"@storybook/addon-a11y": "^8.0.
|
|
71
|
-
"@storybook/addon-actions": "^8.0.
|
|
72
|
-
"@storybook/addon-essentials": "^8.0.
|
|
73
|
-
"@storybook/addon-interactions": "^8.0.
|
|
74
|
-
"@storybook/addon-links": "^8.0.
|
|
75
|
-
"@storybook/blocks": "^8.0.
|
|
70
|
+
"@storybook/addon-a11y": "^8.0.8",
|
|
71
|
+
"@storybook/addon-actions": "^8.0.8",
|
|
72
|
+
"@storybook/addon-essentials": "^8.0.8",
|
|
73
|
+
"@storybook/addon-interactions": "^8.0.8",
|
|
74
|
+
"@storybook/addon-links": "^8.0.8",
|
|
75
|
+
"@storybook/blocks": "^8.0.8",
|
|
76
76
|
"@storybook/jest": "^0.2.3",
|
|
77
|
-
"@storybook/manager-api": "^8.0.
|
|
77
|
+
"@storybook/manager-api": "^8.0.8",
|
|
78
78
|
"@storybook/test-runner": "^0.17.0",
|
|
79
79
|
"@storybook/testing-library": "^0.2.2",
|
|
80
|
-
"@storybook/theming": "^8.0.
|
|
81
|
-
"@storybook/vue3": "^8.0.
|
|
82
|
-
"@storybook/vue3-vite": "^8.0.
|
|
80
|
+
"@storybook/theming": "^8.0.8",
|
|
81
|
+
"@storybook/vue3": "^8.0.8",
|
|
82
|
+
"@storybook/vue3-vite": "^8.0.8",
|
|
83
83
|
"@types/jest": "^29.5.12",
|
|
84
84
|
"@types/jsdom": "^21.1.6",
|
|
85
85
|
"@types/lodash-es": "^4.17.12",
|
|
86
|
-
"@types/node": "^20.12.
|
|
86
|
+
"@types/node": "^20.12.7",
|
|
87
87
|
"@vitejs/plugin-vue": "^5.0.4",
|
|
88
88
|
"@vue/compiler-sfc": "3.4.21",
|
|
89
89
|
"@vue/test-utils": "^2.4.5",
|
|
@@ -103,15 +103,15 @@
|
|
|
103
103
|
"prettier-plugin-tailwindcss": "^0.5.13",
|
|
104
104
|
"resolve-tspaths": "^0.8.18",
|
|
105
105
|
"rimraf": "^5.0.5",
|
|
106
|
-
"sass": "^1.
|
|
107
|
-
"semantic-release": "^23.0.
|
|
108
|
-
"storybook": "^8.0.
|
|
106
|
+
"sass": "^1.75.0",
|
|
107
|
+
"semantic-release": "^23.0.8",
|
|
108
|
+
"storybook": "^8.0.8",
|
|
109
109
|
"svgo": "^3.2.0",
|
|
110
110
|
"tailwindcss": "^3.4.3",
|
|
111
111
|
"ts-jest": "^29.1.2",
|
|
112
|
-
"typescript": "5.4.
|
|
112
|
+
"typescript": "5.4.5",
|
|
113
113
|
"vite": "^5.2.8",
|
|
114
114
|
"vue-router": "^4.3.0",
|
|
115
|
-
"vue-tsc": "2.0.
|
|
115
|
+
"vue-tsc": "2.0.13"
|
|
116
116
|
}
|
|
117
117
|
}
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
<h3
|
|
45
45
|
v-if="title"
|
|
46
46
|
:id="`${id}-title`"
|
|
47
|
-
class="flex-1 text-xl font-medium"
|
|
47
|
+
class="flex-1 text-xl font-medium leading-8"
|
|
48
48
|
:class="{ 'text-right': position === 'left' }"
|
|
49
49
|
>
|
|
50
50
|
{{ title }}
|
|
@@ -151,6 +151,13 @@ export default defineComponent({
|
|
|
151
151
|
type: Boolean,
|
|
152
152
|
default: true,
|
|
153
153
|
},
|
|
154
|
+
width: {
|
|
155
|
+
type: String,
|
|
156
|
+
default: '460px',
|
|
157
|
+
validator: (value: string) => {
|
|
158
|
+
return !!value.match(/^[0-9]+px$/);
|
|
159
|
+
},
|
|
160
|
+
},
|
|
154
161
|
},
|
|
155
162
|
emits: ['update:modelValue', 'before-open', 'opening', 'opened', 'before-close', 'closing', 'closed'],
|
|
156
163
|
data() {
|
|
@@ -167,6 +174,9 @@ export default defineComponent({
|
|
|
167
174
|
transitionOutClass() {
|
|
168
175
|
return this.outClass || this.position === 'right' ? 'slideOutRight' : 'slideOutLeft';
|
|
169
176
|
},
|
|
177
|
+
animationDuration() {
|
|
178
|
+
return (parseInt(this.width, 10) / 1200).toFixed(2) + 's';
|
|
179
|
+
},
|
|
170
180
|
},
|
|
171
181
|
created() {
|
|
172
182
|
if (this.live) {
|
|
@@ -227,7 +237,8 @@ export default defineComponent({
|
|
|
227
237
|
<style scoped lang="scss">
|
|
228
238
|
.drawer {
|
|
229
239
|
@apply fixed bottom-0 top-0 flex flex-col bg-surface shadow-lg outline-none;
|
|
230
|
-
width:
|
|
240
|
+
max-width: v-bind('width');
|
|
241
|
+
width: 100%;
|
|
231
242
|
}
|
|
232
243
|
.drawer.drawer-left {
|
|
233
244
|
@apply left-0;
|
|
@@ -247,7 +258,7 @@ export default defineComponent({
|
|
|
247
258
|
}
|
|
248
259
|
}
|
|
249
260
|
.slideInRight {
|
|
250
|
-
animation-duration:
|
|
261
|
+
animation-duration: v-bind('animationDuration');
|
|
251
262
|
animation-fill-mode: both;
|
|
252
263
|
animation-name: slideInRight;
|
|
253
264
|
}
|
|
@@ -262,7 +273,7 @@ export default defineComponent({
|
|
|
262
273
|
}
|
|
263
274
|
}
|
|
264
275
|
.slideOutRight {
|
|
265
|
-
animation-duration:
|
|
276
|
+
animation-duration: v-bind('animationDuration');
|
|
266
277
|
animation-fill-mode: both;
|
|
267
278
|
animation-name: slideOutRight;
|
|
268
279
|
}
|
|
@@ -278,7 +289,7 @@ export default defineComponent({
|
|
|
278
289
|
}
|
|
279
290
|
}
|
|
280
291
|
.slideInLeft {
|
|
281
|
-
animation-duration:
|
|
292
|
+
animation-duration: v-bind('animationDuration');
|
|
282
293
|
animation-fill-mode: both;
|
|
283
294
|
animation-name: slideInLeft;
|
|
284
295
|
}
|
|
@@ -293,21 +304,23 @@ export default defineComponent({
|
|
|
293
304
|
}
|
|
294
305
|
}
|
|
295
306
|
.slideOutLeft {
|
|
296
|
-
animation-duration:
|
|
307
|
+
animation-duration: v-bind('animationDuration');
|
|
297
308
|
animation-fill-mode: both;
|
|
298
309
|
animation-name: slideOutLeft;
|
|
299
310
|
}
|
|
300
311
|
|
|
301
312
|
/* Backdrop */
|
|
302
313
|
.fadeIn {
|
|
303
|
-
animation-duration: 0.4s;
|
|
304
314
|
animation-name: fadeInFrames;
|
|
305
|
-
animation-fill-mode: both;
|
|
306
315
|
}
|
|
307
316
|
|
|
308
317
|
.fadeOut {
|
|
309
|
-
animation-duration: 0.2s;
|
|
310
318
|
animation-name: fadeOutFrames;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.fadeIn,
|
|
322
|
+
.fadeOut {
|
|
323
|
+
animation-duration: 0.25s;
|
|
311
324
|
animation-fill-mode: both;
|
|
312
325
|
}
|
|
313
326
|
|