@opentiny/vue-drawer 3.14.0 → 3.16.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/lib/index.js +4 -4
- package/lib/mobile-first.js +41 -39
- package/lib/pc.js +60 -60
- package/package.json +7 -7
- package/src/index.d.ts +140 -68
- package/src/mobile-first.vue.d.ts +4 -4
- package/src/pc.vue.d.ts +7 -7
package/lib/index.js
CHANGED
|
@@ -12,7 +12,7 @@ function _extends() {
|
|
|
12
12
|
};
|
|
13
13
|
return _extends.apply(this, arguments);
|
|
14
14
|
}
|
|
15
|
-
import { $prefix, $setup, $props } from "@opentiny/vue-common";
|
|
15
|
+
import { defineComponent, $prefix, $setup, $props } from "@opentiny/vue-common";
|
|
16
16
|
import PcTemplate from "./pc.js";
|
|
17
17
|
import MobileFirstTemplate from "./mobile-first.js";
|
|
18
18
|
var template = function template2(mode) {
|
|
@@ -92,7 +92,7 @@ var drawerProps = _extends({}, $props, {
|
|
|
92
92
|
beforeClose: Function,
|
|
93
93
|
tipsProps: Object
|
|
94
94
|
});
|
|
95
|
-
var Drawer = {
|
|
95
|
+
var Drawer = defineComponent({
|
|
96
96
|
name: $prefix + "Drawer",
|
|
97
97
|
props: drawerProps,
|
|
98
98
|
setup: function setup(props, context) {
|
|
@@ -102,8 +102,8 @@ var Drawer = {
|
|
|
102
102
|
template
|
|
103
103
|
});
|
|
104
104
|
}
|
|
105
|
-
};
|
|
106
|
-
var version = "3.
|
|
105
|
+
});
|
|
106
|
+
var version = "3.16.0";
|
|
107
107
|
Drawer.model = {
|
|
108
108
|
prop: "modelValue",
|
|
109
109
|
event: "update:modelValue"
|
package/lib/mobile-first.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { renderless, api } from
|
|
2
|
-
import { props, setup
|
|
3
|
-
import { IconClose } from
|
|
4
|
-
import Button from
|
|
5
|
-
import { resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString, createVNode, withCtx, createTextVNode, vShow } from
|
|
6
|
-
|
|
1
|
+
import { renderless, api } from '@opentiny/vue-renderless/drawer/vue';
|
|
2
|
+
import { defineComponent, props, setup } from '@opentiny/vue-common';
|
|
3
|
+
import { IconClose } from '@opentiny/vue-icon';
|
|
4
|
+
import Button from '@opentiny/vue-button';
|
|
5
|
+
import { resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString, createVNode, withCtx, createTextVNode, vShow } from 'vue';
|
|
6
|
+
|
|
7
|
+
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
|
|
7
8
|
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
|
|
8
9
|
if (it)
|
|
9
10
|
return (it = it.call(o)).next.bind(it);
|
|
10
|
-
if (Array.isArray(o) || (it =
|
|
11
|
+
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
|
|
11
12
|
if (it)
|
|
12
13
|
o = it;
|
|
13
14
|
var i = 0;
|
|
@@ -19,20 +20,20 @@ function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
|
|
|
19
20
|
}
|
|
20
21
|
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
21
22
|
}
|
|
22
|
-
function
|
|
23
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
23
24
|
if (!o)
|
|
24
25
|
return;
|
|
25
26
|
if (typeof o === "string")
|
|
26
|
-
return
|
|
27
|
+
return _arrayLikeToArray(o, minLen);
|
|
27
28
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
28
29
|
if (n === "Object" && o.constructor)
|
|
29
30
|
n = o.constructor.name;
|
|
30
31
|
if (n === "Map" || n === "Set")
|
|
31
32
|
return Array.from(o);
|
|
32
33
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
|
|
33
|
-
return
|
|
34
|
+
return _arrayLikeToArray(o, minLen);
|
|
34
35
|
}
|
|
35
|
-
function
|
|
36
|
+
function _arrayLikeToArray(arr, len) {
|
|
36
37
|
if (len == null || len > arr.length)
|
|
37
38
|
len = arr.length;
|
|
38
39
|
for (var i = 0, arr2 = new Array(len); i < len; i++)
|
|
@@ -41,28 +42,28 @@ function _arrayLikeToArray_tiny(arr, len) {
|
|
|
41
42
|
}
|
|
42
43
|
var _export_sfc = function _export_sfc2(sfc, props) {
|
|
43
44
|
var target = sfc.__vccOpts || sfc;
|
|
44
|
-
for (var _iterator =
|
|
45
|
+
for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
|
|
45
46
|
var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
|
|
46
47
|
target[key] = val;
|
|
47
48
|
}
|
|
48
49
|
return target;
|
|
49
50
|
};
|
|
50
51
|
|
|
51
|
-
var _sfc_main = {
|
|
52
|
+
var _sfc_main = defineComponent({
|
|
52
53
|
components: {
|
|
53
54
|
TinyButton: Button,
|
|
54
55
|
IconClose: IconClose()
|
|
55
56
|
},
|
|
56
57
|
props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "beforeClose"]),
|
|
57
|
-
setup: function setup(props2, context) {
|
|
58
|
-
return
|
|
58
|
+
setup: function setup$1(props2, context) {
|
|
59
|
+
return setup({
|
|
59
60
|
props: props2,
|
|
60
61
|
context,
|
|
61
62
|
renderless,
|
|
62
63
|
api
|
|
63
64
|
});
|
|
64
65
|
}
|
|
65
|
-
};
|
|
66
|
+
});
|
|
66
67
|
var _hoisted_1 = {
|
|
67
68
|
"data-tag": "tiny-drawer",
|
|
68
69
|
class: "text-sm"
|
|
@@ -78,7 +79,7 @@ var _hoisted_3 = {
|
|
|
78
79
|
};
|
|
79
80
|
var _hoisted_4 = {
|
|
80
81
|
key: 0,
|
|
81
|
-
class: "max-w-[80%] pr-4 text-left truncate"
|
|
82
|
+
class: "max-w-[80%] pr-4 text-left truncate text-color-text-primary"
|
|
82
83
|
};
|
|
83
84
|
var _hoisted_5 = {
|
|
84
85
|
class: "flex-1 flex items-center justify-end"
|
|
@@ -98,7 +99,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
98
99
|
return withDirectives((openBlock(), createElementBlock(
|
|
99
100
|
"div",
|
|
100
101
|
_hoisted_1,
|
|
101
|
-
[
|
|
102
|
+
[_ctx.mask ? (openBlock(), createElementBlock(
|
|
102
103
|
"div",
|
|
103
104
|
{
|
|
104
105
|
key: 0,
|
|
@@ -121,50 +122,52 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
121
122
|
class: normalizeClass(_ctx.m("fixed w-full max-w-full flex flex-col bg-color-bg-1 z-50 shadow-sm border-color-border-separator", {
|
|
122
123
|
"transition-all ease-linear duration-200": !_ctx.state.dragEvent.isDrag
|
|
123
124
|
}, {
|
|
124
|
-
"h-full": ["left", "right"].includes(
|
|
125
|
+
"h-full": ["left", "right"].includes(_ctx.placement)
|
|
125
126
|
}, {
|
|
126
|
-
"max-h-full": ["top", "bottom"].includes(
|
|
127
|
+
"max-h-full": ["top", "bottom"].includes(_ctx.placement)
|
|
127
128
|
}, {
|
|
128
|
-
"left-0 bottom-0 translate-y-full border-t-0.5 rounded-t-lg":
|
|
129
|
+
"left-0 bottom-0 translate-y-full border-t-0.5 rounded-t-lg": _ctx.placement === "bottom"
|
|
129
130
|
}, {
|
|
130
|
-
"left-0 top-0 -translate-y-full border-b-0.5 rounded-b-lg":
|
|
131
|
+
"left-0 top-0 -translate-y-full border-b-0.5 rounded-b-lg": _ctx.placement === "top"
|
|
131
132
|
}, {
|
|
132
|
-
"translate-y-0": ["top", "bottom"].includes(
|
|
133
|
+
"translate-y-0": ["top", "bottom"].includes(_ctx.placement) && _ctx.state.toggle
|
|
133
134
|
}, {
|
|
134
|
-
"left-0 top-0 -translate-x-full border-r-0.5 rounded-r-lg":
|
|
135
|
+
"left-0 top-0 -translate-x-full border-r-0.5 rounded-r-lg": _ctx.placement === "left"
|
|
135
136
|
}, {
|
|
136
|
-
"right-0 top-0 translate-x-full border-l-0.5 rounded-l-lg":
|
|
137
|
+
"right-0 top-0 translate-x-full border-l-0.5 rounded-l-lg": _ctx.placement === "right"
|
|
137
138
|
}, {
|
|
138
|
-
"translate-x-0": ["left", "right"].includes(
|
|
139
|
-
},
|
|
139
|
+
"translate-x-0": ["left", "right"].includes(_ctx.placement) && _ctx.state.toggle
|
|
140
|
+
}, _ctx.customClass)),
|
|
140
141
|
style: normalizeStyle({
|
|
141
|
-
width: ["left", "right"].includes(
|
|
142
|
+
width: ["left", "right"].includes(_ctx.placement) ? _ctx.state.computedWidth : null,
|
|
143
|
+
height: ["top", "bottom"].includes(_ctx.placement) && _ctx.dragable && _ctx.state.height ? _ctx.state.height + "px" : null
|
|
142
144
|
})
|
|
143
145
|
},
|
|
144
|
-
[
|
|
146
|
+
[_ctx.dragable ? (openBlock(), createElementBlock(
|
|
145
147
|
"div",
|
|
146
148
|
{
|
|
147
149
|
key: 0,
|
|
148
150
|
"data-tag": "drawer-drag-bar",
|
|
149
151
|
ref: "dragBar",
|
|
150
|
-
class: normalizeClass(["h-full
|
|
152
|
+
class: normalizeClass(["absolute", ["left", "right"].includes(_ctx.placement) && "cursor-e-resize h-full top-0 w-2", ["top", "bottom"].includes(_ctx.placement) && "cursor-n-resize w-full h-2 left-0", _ctx.placement === "left" && "-right-1", _ctx.placement === "right" && "-left-1", _ctx.placement === "top" && "-bottom-1", _ctx.placement === "bottom" && "-top-1"])
|
|
151
153
|
},
|
|
152
154
|
null,
|
|
153
155
|
2
|
|
154
156
|
/* CLASS */
|
|
155
|
-
)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [
|
|
157
|
+
)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [_ctx.showHeader ? (openBlock(), createElementBlock(
|
|
156
158
|
"div",
|
|
157
159
|
_hoisted_3,
|
|
158
160
|
[renderSlot(_ctx.$slots, "header", {}, function() {
|
|
159
|
-
return [
|
|
161
|
+
return [_ctx.title ? (openBlock(), createElementBlock(
|
|
160
162
|
"div",
|
|
161
163
|
_hoisted_4,
|
|
162
|
-
toDisplayString(
|
|
164
|
+
toDisplayString(_ctx.title),
|
|
163
165
|
1
|
|
164
166
|
/* TEXT */
|
|
165
167
|
)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "header-right", {}, function() {
|
|
166
168
|
return [createVNode(_component_IconClose, {
|
|
167
169
|
"custom-class": "h-5 w-5 cursor-pointer",
|
|
170
|
+
class: "fill-color-icon-primary",
|
|
168
171
|
onClick: _cache[1] || (_cache[1] = function($event) {
|
|
169
172
|
return _ctx.handleClose("close");
|
|
170
173
|
})
|
|
@@ -179,13 +182,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
179
182
|
"data-tag": "drawer-body",
|
|
180
183
|
ref: "body",
|
|
181
184
|
class: normalizeClass(["flex-auto overflow-auto", {
|
|
182
|
-
"flex flex-col":
|
|
185
|
+
"flex flex-col": _ctx.flex
|
|
183
186
|
}])
|
|
184
187
|
},
|
|
185
188
|
[renderSlot(_ctx.$slots, "default")],
|
|
186
189
|
2
|
|
187
190
|
/* CLASS */
|
|
188
|
-
),
|
|
191
|
+
), _ctx.showFooter ? (openBlock(), createElementBlock(
|
|
189
192
|
"div",
|
|
190
193
|
_hoisted_6,
|
|
191
194
|
[createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "footer", {}, function() {
|
|
@@ -231,9 +234,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
231
234
|
)],
|
|
232
235
|
512
|
|
233
236
|
/* NEED_PATCH */
|
|
234
|
-
)), [[vShow,
|
|
237
|
+
)), [[vShow, _ctx.visible]]);
|
|
235
238
|
}
|
|
236
239
|
var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
};
|
|
240
|
+
|
|
241
|
+
export { mobileFirst as default };
|
package/lib/pc.js
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import { renderless, api } from
|
|
2
|
-
import { props, setup
|
|
3
|
-
import
|
|
4
|
-
import { iconClose, iconHelpCircle } from
|
|
5
|
-
import Button from
|
|
6
|
-
import Tooltip from
|
|
7
|
-
import { resolveComponent, openBlock, createElementBlock, createVNode, Transition, withCtx, normalizeClass, normalizeStyle, createCommentVNode, withDirectives, createElementVNode, renderSlot, toDisplayString, createBlock, normalizeProps, mergeProps, createTextVNode, vShow } from
|
|
8
|
-
|
|
1
|
+
import { renderless, api } from '@opentiny/vue-renderless/drawer/vue';
|
|
2
|
+
import { defineComponent, props, setup } from '@opentiny/vue-common';
|
|
3
|
+
import '@opentiny/vue-theme/drawer/index.css';
|
|
4
|
+
import { iconClose, iconHelpCircle } from '@opentiny/vue-icon';
|
|
5
|
+
import Button from '@opentiny/vue-button';
|
|
6
|
+
import Tooltip from '@opentiny/vue-tooltip';
|
|
7
|
+
import { resolveComponent, openBlock, createElementBlock, createVNode, Transition, withCtx, normalizeClass, normalizeStyle, createCommentVNode, withDirectives, createElementVNode, renderSlot, toDisplayString, createBlock, normalizeProps, mergeProps, createTextVNode, vShow } from 'vue';
|
|
8
|
+
|
|
9
|
+
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
|
|
9
10
|
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
|
|
10
11
|
if (it)
|
|
11
12
|
return (it = it.call(o)).next.bind(it);
|
|
12
|
-
if (Array.isArray(o) || (it =
|
|
13
|
+
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
|
|
13
14
|
if (it)
|
|
14
15
|
o = it;
|
|
15
16
|
var i = 0;
|
|
@@ -21,20 +22,20 @@ function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
|
|
|
21
22
|
}
|
|
22
23
|
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
23
24
|
}
|
|
24
|
-
function
|
|
25
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
25
26
|
if (!o)
|
|
26
27
|
return;
|
|
27
28
|
if (typeof o === "string")
|
|
28
|
-
return
|
|
29
|
+
return _arrayLikeToArray(o, minLen);
|
|
29
30
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
30
31
|
if (n === "Object" && o.constructor)
|
|
31
32
|
n = o.constructor.name;
|
|
32
33
|
if (n === "Map" || n === "Set")
|
|
33
34
|
return Array.from(o);
|
|
34
35
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
|
|
35
|
-
return
|
|
36
|
+
return _arrayLikeToArray(o, minLen);
|
|
36
37
|
}
|
|
37
|
-
function
|
|
38
|
+
function _arrayLikeToArray(arr, len) {
|
|
38
39
|
if (len == null || len > arr.length)
|
|
39
40
|
len = arr.length;
|
|
40
41
|
for (var i = 0, arr2 = new Array(len); i < len; i++)
|
|
@@ -43,14 +44,14 @@ function _arrayLikeToArray_tiny(arr, len) {
|
|
|
43
44
|
}
|
|
44
45
|
var _export_sfc = function _export_sfc2(sfc, props) {
|
|
45
46
|
var target = sfc.__vccOpts || sfc;
|
|
46
|
-
for (var _iterator =
|
|
47
|
+
for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
|
|
47
48
|
var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
|
|
48
49
|
target[key] = val;
|
|
49
50
|
}
|
|
50
51
|
return target;
|
|
51
52
|
};
|
|
52
53
|
|
|
53
|
-
var _sfc_main = {
|
|
54
|
+
var _sfc_main = defineComponent({
|
|
54
55
|
components: {
|
|
55
56
|
TinyButton: Button,
|
|
56
57
|
TinyTooltip: Tooltip,
|
|
@@ -58,48 +59,42 @@ var _sfc_main = {
|
|
|
58
59
|
IconHelpCircle: iconHelpCircle()
|
|
59
60
|
},
|
|
60
61
|
props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex", "beforeClose", "tipsProps"]),
|
|
61
|
-
setup: function setup(props2, context) {
|
|
62
|
-
return
|
|
62
|
+
setup: function setup$1(props2, context) {
|
|
63
|
+
return setup({
|
|
63
64
|
props: props2,
|
|
64
65
|
context,
|
|
65
66
|
renderless,
|
|
66
67
|
api
|
|
67
68
|
});
|
|
68
69
|
}
|
|
69
|
-
};
|
|
70
|
+
});
|
|
70
71
|
var _hoisted_1 = {
|
|
71
72
|
"data-tag": "tiny-drawer",
|
|
72
73
|
class: "tiny-drawer"
|
|
73
74
|
};
|
|
74
75
|
var _hoisted_2 = {
|
|
75
|
-
key: 0,
|
|
76
|
-
"data-tag": "drawer-drag-bar",
|
|
77
|
-
ref: "dragBar",
|
|
78
|
-
class: /* @__PURE__ */ normalizeClass(["tiny-drawer__drag-bar"])
|
|
79
|
-
};
|
|
80
|
-
var _hoisted_3 = {
|
|
81
76
|
class: "tiny-drawer__box"
|
|
82
77
|
};
|
|
83
|
-
var
|
|
78
|
+
var _hoisted_3 = {
|
|
84
79
|
key: 0,
|
|
85
80
|
"data-tag": "drawer-header",
|
|
86
81
|
ref: "header",
|
|
87
82
|
class: "tiny-drawer__header-wrapper"
|
|
88
83
|
};
|
|
89
|
-
var
|
|
84
|
+
var _hoisted_4 = {
|
|
90
85
|
class: "tiny-drawer__header"
|
|
91
86
|
};
|
|
92
|
-
var
|
|
87
|
+
var _hoisted_5 = {
|
|
93
88
|
class: "tiny-drawer__header-left"
|
|
94
89
|
};
|
|
95
|
-
var
|
|
90
|
+
var _hoisted_6 = {
|
|
96
91
|
key: 0,
|
|
97
92
|
class: "tiny-drawer__title"
|
|
98
93
|
};
|
|
99
|
-
var
|
|
94
|
+
var _hoisted_7 = {
|
|
100
95
|
class: "tiny-drawer__header-right"
|
|
101
96
|
};
|
|
102
|
-
var
|
|
97
|
+
var _hoisted_8 = {
|
|
103
98
|
key: 1,
|
|
104
99
|
"data-tag": "drawer-footer",
|
|
105
100
|
ref: "footer",
|
|
@@ -114,7 +109,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
114
109
|
name: "drawer-fade"
|
|
115
110
|
}, {
|
|
116
111
|
default: withCtx(function() {
|
|
117
|
-
return [
|
|
112
|
+
return [_ctx.mask && _ctx.visible ? (openBlock(), createElementBlock(
|
|
118
113
|
"div",
|
|
119
114
|
{
|
|
120
115
|
key: 0,
|
|
@@ -123,7 +118,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
123
118
|
"show-bg-color": _ctx.state.toggle
|
|
124
119
|
}]),
|
|
125
120
|
style: normalizeStyle({
|
|
126
|
-
zIndex:
|
|
121
|
+
zIndex: _ctx.zIndex
|
|
127
122
|
}),
|
|
128
123
|
onClick: _cache[0] || (_cache[0] = function($event) {
|
|
129
124
|
return _ctx.handleClose("mask");
|
|
@@ -137,7 +132,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
137
132
|
_: 1
|
|
138
133
|
/* STABLE */
|
|
139
134
|
}), createVNode(Transition, {
|
|
140
|
-
name: "drawer-slide-" +
|
|
135
|
+
name: "drawer-slide-" + _ctx.placement,
|
|
141
136
|
persisted: ""
|
|
142
137
|
}, {
|
|
143
138
|
default: withCtx(function() {
|
|
@@ -147,39 +142,45 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
147
142
|
"data-tag": "tiny-drawer-main",
|
|
148
143
|
ref: "drawerBox",
|
|
149
144
|
class: normalizeClass(["tiny-drawer__main", {
|
|
150
|
-
"is-left":
|
|
151
|
-
"is-right":
|
|
152
|
-
"is-top":
|
|
153
|
-
"is-bottom":
|
|
145
|
+
"is-left": _ctx.placement === "left",
|
|
146
|
+
"is-right": _ctx.placement === "right",
|
|
147
|
+
"is-top": _ctx.placement === "top",
|
|
148
|
+
"is-bottom": _ctx.placement === "bottom",
|
|
154
149
|
"drag-effects": !_ctx.state.dragEvent.isDrag,
|
|
155
150
|
"toggle": _ctx.state.toggle
|
|
156
|
-
}, "tiny-drawer-main",
|
|
151
|
+
}, "tiny-drawer-main", _ctx.customClass]),
|
|
157
152
|
style: normalizeStyle({
|
|
158
|
-
width: ["left", "right"].includes(
|
|
159
|
-
|
|
153
|
+
width: ["left", "right"].includes(_ctx.placement) ? _ctx.state.computedWidth : null,
|
|
154
|
+
height: ["top", "bottom"].includes(_ctx.placement) && _ctx.dragable && _ctx.state.height ? _ctx.state.height + "px" : null,
|
|
155
|
+
zIndex: _ctx.zIndex
|
|
160
156
|
})
|
|
161
157
|
},
|
|
162
|
-
[
|
|
158
|
+
[_ctx.dragable ? (openBlock(), createElementBlock(
|
|
163
159
|
"div",
|
|
164
|
-
|
|
160
|
+
{
|
|
161
|
+
key: 0,
|
|
162
|
+
"data-tag": "drawer-drag-bar",
|
|
163
|
+
ref: "dragBar",
|
|
164
|
+
class: normalizeClass(["tiny-drawer__drag-bar", ["left", "right"].includes(_ctx.placement) && "p-left-Right", ["top", "bottom"].includes(_ctx.placement) && "p-top-Bottom", _ctx.placement === "left" && "p-left", _ctx.placement === "right" && "p-right", _ctx.placement === "top" && "p-top", _ctx.placement === "bottom" && "p-bottom"])
|
|
165
|
+
},
|
|
165
166
|
null,
|
|
166
|
-
|
|
167
|
-
/*
|
|
168
|
-
)) : createCommentVNode("v-if", true), createElementVNode("div",
|
|
167
|
+
2
|
|
168
|
+
/* CLASS */
|
|
169
|
+
)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [_ctx.showHeader ? (openBlock(), createElementBlock(
|
|
169
170
|
"div",
|
|
170
|
-
|
|
171
|
+
_hoisted_3,
|
|
171
172
|
[renderSlot(_ctx.$slots, "header", {}, function() {
|
|
172
|
-
return [createElementVNode("div",
|
|
173
|
+
return [createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [_ctx.title ? (openBlock(), createElementBlock(
|
|
173
174
|
"div",
|
|
174
|
-
|
|
175
|
-
toDisplayString(
|
|
175
|
+
_hoisted_6,
|
|
176
|
+
toDisplayString(_ctx.title),
|
|
176
177
|
1
|
|
177
178
|
/* TEXT */
|
|
178
|
-
)) : createCommentVNode("v-if", true),
|
|
179
|
+
)) : createCommentVNode("v-if", true), _ctx.tipsProps ? (openBlock(), createBlock(
|
|
179
180
|
_component_tiny_tooltip,
|
|
180
181
|
normalizeProps(mergeProps({
|
|
181
182
|
key: 1
|
|
182
|
-
},
|
|
183
|
+
}, _ctx.tipsProps)),
|
|
183
184
|
{
|
|
184
185
|
default: withCtx(function() {
|
|
185
186
|
return [createVNode(_component_icon_help_circle, {
|
|
@@ -191,8 +192,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
191
192
|
},
|
|
192
193
|
16
|
|
193
194
|
/* FULL_PROPS */
|
|
194
|
-
)) : createCommentVNode("v-if", true)]), createElementVNode("div",
|
|
195
|
-
}),
|
|
195
|
+
)) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "header-right")])])];
|
|
196
|
+
}), _ctx.showClose ? (openBlock(), createElementBlock("button", {
|
|
196
197
|
key: 0,
|
|
197
198
|
type: "button",
|
|
198
199
|
class: "tiny-drawer__headerbtn",
|
|
@@ -211,15 +212,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
211
212
|
"data-tag": "drawer-body",
|
|
212
213
|
ref: "body",
|
|
213
214
|
class: normalizeClass(["tiny-drawer__body", {
|
|
214
|
-
"flex flex-col":
|
|
215
|
+
"flex flex-col": _ctx.flex
|
|
215
216
|
}, "drawer-body"])
|
|
216
217
|
},
|
|
217
218
|
[renderSlot(_ctx.$slots, "default")],
|
|
218
219
|
2
|
|
219
220
|
/* CLASS */
|
|
220
|
-
),
|
|
221
|
+
), _ctx.showFooter ? (openBlock(), createElementBlock(
|
|
221
222
|
"div",
|
|
222
|
-
|
|
223
|
+
_hoisted_8,
|
|
223
224
|
[renderSlot(_ctx.$slots, "footer", {}, function() {
|
|
224
225
|
return [createVNode(_component_tiny_button, {
|
|
225
226
|
type: "primary",
|
|
@@ -264,13 +265,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
264
265
|
)) : createCommentVNode("v-if", true)])],
|
|
265
266
|
6
|
|
266
267
|
/* CLASS, STYLE */
|
|
267
|
-
), [[vShow,
|
|
268
|
+
), [[vShow, _ctx.visible]])];
|
|
268
269
|
}),
|
|
269
270
|
_: 3
|
|
270
271
|
/* FORWARDED */
|
|
271
272
|
}, 8, ["name"])]);
|
|
272
273
|
}
|
|
273
274
|
var pc = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
};
|
|
275
|
+
|
|
276
|
+
export { pc as default };
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opentiny/vue-drawer",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.16.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "./lib/index.js",
|
|
6
6
|
"module": "./lib/index.js",
|
|
7
7
|
"sideEffects": false,
|
|
8
8
|
"type": "module",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@opentiny/vue-button": "~3.
|
|
11
|
-
"@opentiny/vue-tooltip": "~3.
|
|
12
|
-
"@opentiny/vue-common": "~3.
|
|
13
|
-
"@opentiny/vue-renderless": "~3.
|
|
14
|
-
"@opentiny/vue-icon": "~3.
|
|
15
|
-
"@opentiny/vue-theme": "~3.
|
|
10
|
+
"@opentiny/vue-button": "~3.16.0",
|
|
11
|
+
"@opentiny/vue-tooltip": "~3.16.0",
|
|
12
|
+
"@opentiny/vue-common": "~3.16.0",
|
|
13
|
+
"@opentiny/vue-renderless": "~3.16.0",
|
|
14
|
+
"@opentiny/vue-icon": "~3.16.0",
|
|
15
|
+
"@opentiny/vue-theme": "~3.16.0"
|
|
16
16
|
},
|
|
17
17
|
"license": "MIT",
|
|
18
18
|
"types": "index.d.ts"
|
package/src/index.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export declare const drawerProps: {
|
|
|
10
10
|
type: BooleanConstructor;
|
|
11
11
|
default: boolean;
|
|
12
12
|
};
|
|
13
|
-
customClass: (
|
|
13
|
+
customClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
|
|
14
14
|
placement: {
|
|
15
15
|
type: StringConstructor;
|
|
16
16
|
default: string;
|
|
@@ -61,73 +61,145 @@ export declare const drawerProps: {
|
|
|
61
61
|
tiny_theme: StringConstructor;
|
|
62
62
|
tiny_chart_theme: ObjectConstructor;
|
|
63
63
|
};
|
|
64
|
-
declare const _default: {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
SCROLL_LOCK_CLASS(mode: string): string;
|
|
71
|
-
DEFAULT_WIDTH: string;
|
|
72
|
-
};
|
|
73
|
-
};
|
|
74
|
-
visible: {
|
|
75
|
-
type: BooleanConstructor;
|
|
76
|
-
default: boolean;
|
|
77
|
-
};
|
|
78
|
-
customClass: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
|
|
79
|
-
placement: {
|
|
80
|
-
type: StringConstructor;
|
|
81
|
-
default: string;
|
|
82
|
-
};
|
|
83
|
-
width: {
|
|
84
|
-
type: StringConstructor;
|
|
85
|
-
};
|
|
86
|
-
title: StringConstructor;
|
|
87
|
-
showClose: {
|
|
88
|
-
type: BooleanConstructor;
|
|
89
|
-
default: boolean;
|
|
90
|
-
};
|
|
91
|
-
showHeader: {
|
|
92
|
-
type: BooleanConstructor;
|
|
93
|
-
default: boolean;
|
|
94
|
-
};
|
|
95
|
-
showFooter: {
|
|
96
|
-
type: BooleanConstructor;
|
|
97
|
-
default: boolean;
|
|
98
|
-
};
|
|
99
|
-
mask: {
|
|
100
|
-
type: BooleanConstructor;
|
|
101
|
-
default: boolean;
|
|
102
|
-
};
|
|
103
|
-
maskClosable: {
|
|
104
|
-
type: BooleanConstructor;
|
|
105
|
-
default: boolean;
|
|
106
|
-
};
|
|
107
|
-
dragable: BooleanConstructor;
|
|
108
|
-
lockScroll: {
|
|
109
|
-
type: BooleanConstructor;
|
|
110
|
-
default: boolean;
|
|
111
|
-
};
|
|
112
|
-
flex: {
|
|
113
|
-
type: BooleanConstructor;
|
|
114
|
-
default: boolean;
|
|
64
|
+
declare const _default: import("@vue/runtime-core").DefineComponent<{
|
|
65
|
+
_constants: {
|
|
66
|
+
type: ObjectConstructor;
|
|
67
|
+
default: () => {
|
|
68
|
+
SCROLL_LOCK_CLASS(mode: string): string;
|
|
69
|
+
DEFAULT_WIDTH: string;
|
|
115
70
|
};
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
71
|
+
};
|
|
72
|
+
visible: {
|
|
73
|
+
type: BooleanConstructor;
|
|
74
|
+
default: boolean;
|
|
75
|
+
};
|
|
76
|
+
customClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
|
|
77
|
+
placement: {
|
|
78
|
+
type: StringConstructor;
|
|
79
|
+
default: string;
|
|
80
|
+
};
|
|
81
|
+
width: {
|
|
82
|
+
type: StringConstructor;
|
|
83
|
+
};
|
|
84
|
+
title: StringConstructor;
|
|
85
|
+
showClose: {
|
|
86
|
+
type: BooleanConstructor;
|
|
87
|
+
default: boolean;
|
|
88
|
+
};
|
|
89
|
+
showHeader: {
|
|
90
|
+
type: BooleanConstructor;
|
|
91
|
+
default: boolean;
|
|
92
|
+
};
|
|
93
|
+
showFooter: {
|
|
94
|
+
type: BooleanConstructor;
|
|
95
|
+
default: boolean;
|
|
96
|
+
};
|
|
97
|
+
mask: {
|
|
98
|
+
type: BooleanConstructor;
|
|
99
|
+
default: boolean;
|
|
100
|
+
};
|
|
101
|
+
maskClosable: {
|
|
102
|
+
type: BooleanConstructor;
|
|
103
|
+
default: boolean;
|
|
104
|
+
};
|
|
105
|
+
dragable: BooleanConstructor;
|
|
106
|
+
lockScroll: {
|
|
107
|
+
type: BooleanConstructor;
|
|
108
|
+
default: boolean;
|
|
109
|
+
};
|
|
110
|
+
flex: {
|
|
111
|
+
type: BooleanConstructor;
|
|
112
|
+
default: boolean;
|
|
113
|
+
};
|
|
114
|
+
zIndex: {
|
|
115
|
+
type: NumberConstructor;
|
|
116
|
+
default: number;
|
|
117
|
+
};
|
|
118
|
+
beforeClose: FunctionConstructor;
|
|
119
|
+
tipsProps: ObjectConstructor;
|
|
120
|
+
tiny_mode: StringConstructor;
|
|
121
|
+
tiny_mode_root: BooleanConstructor;
|
|
122
|
+
tiny_template: (ObjectConstructor | FunctionConstructor)[];
|
|
123
|
+
tiny_renderless: FunctionConstructor;
|
|
124
|
+
tiny_theme: StringConstructor;
|
|
125
|
+
tiny_chart_theme: ObjectConstructor;
|
|
126
|
+
}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
|
|
127
|
+
[key: string]: any;
|
|
128
|
+
}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
|
|
129
|
+
_constants: {
|
|
130
|
+
type: ObjectConstructor;
|
|
131
|
+
default: () => {
|
|
132
|
+
SCROLL_LOCK_CLASS(mode: string): string;
|
|
133
|
+
DEFAULT_WIDTH: string;
|
|
119
134
|
};
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
};
|
|
135
|
+
};
|
|
136
|
+
visible: {
|
|
137
|
+
type: BooleanConstructor;
|
|
138
|
+
default: boolean;
|
|
139
|
+
};
|
|
140
|
+
customClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
|
|
141
|
+
placement: {
|
|
142
|
+
type: StringConstructor;
|
|
143
|
+
default: string;
|
|
144
|
+
};
|
|
145
|
+
width: {
|
|
146
|
+
type: StringConstructor;
|
|
147
|
+
};
|
|
148
|
+
title: StringConstructor;
|
|
149
|
+
showClose: {
|
|
150
|
+
type: BooleanConstructor;
|
|
151
|
+
default: boolean;
|
|
152
|
+
};
|
|
153
|
+
showHeader: {
|
|
154
|
+
type: BooleanConstructor;
|
|
155
|
+
default: boolean;
|
|
156
|
+
};
|
|
157
|
+
showFooter: {
|
|
158
|
+
type: BooleanConstructor;
|
|
159
|
+
default: boolean;
|
|
160
|
+
};
|
|
161
|
+
mask: {
|
|
162
|
+
type: BooleanConstructor;
|
|
163
|
+
default: boolean;
|
|
164
|
+
};
|
|
165
|
+
maskClosable: {
|
|
166
|
+
type: BooleanConstructor;
|
|
167
|
+
default: boolean;
|
|
168
|
+
};
|
|
169
|
+
dragable: BooleanConstructor;
|
|
170
|
+
lockScroll: {
|
|
171
|
+
type: BooleanConstructor;
|
|
172
|
+
default: boolean;
|
|
173
|
+
};
|
|
174
|
+
flex: {
|
|
175
|
+
type: BooleanConstructor;
|
|
176
|
+
default: boolean;
|
|
177
|
+
};
|
|
178
|
+
zIndex: {
|
|
179
|
+
type: NumberConstructor;
|
|
180
|
+
default: number;
|
|
181
|
+
};
|
|
182
|
+
beforeClose: FunctionConstructor;
|
|
183
|
+
tipsProps: ObjectConstructor;
|
|
184
|
+
tiny_mode: StringConstructor;
|
|
185
|
+
tiny_mode_root: BooleanConstructor;
|
|
186
|
+
tiny_template: (ObjectConstructor | FunctionConstructor)[];
|
|
187
|
+
tiny_renderless: FunctionConstructor;
|
|
188
|
+
tiny_theme: StringConstructor;
|
|
189
|
+
tiny_chart_theme: ObjectConstructor;
|
|
190
|
+
}>>, {
|
|
191
|
+
tiny_mode_root: boolean;
|
|
192
|
+
_constants: Record<string, any>;
|
|
193
|
+
placement: string;
|
|
194
|
+
zIndex: number;
|
|
195
|
+
mask: boolean;
|
|
196
|
+
visible: boolean;
|
|
197
|
+
showClose: boolean;
|
|
198
|
+
showHeader: boolean;
|
|
199
|
+
showFooter: boolean;
|
|
200
|
+
maskClosable: boolean;
|
|
201
|
+
dragable: boolean;
|
|
202
|
+
lockScroll: boolean;
|
|
203
|
+
flex: boolean;
|
|
204
|
+
}, {}>;
|
|
133
205
|
export default _default;
|
|
@@ -15,10 +15,10 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
|
|
|
15
15
|
showHeader?: any;
|
|
16
16
|
showFooter?: any;
|
|
17
17
|
maskClosable?: any;
|
|
18
|
+
dragable?: any;
|
|
18
19
|
lockScroll?: any;
|
|
19
20
|
flex?: any;
|
|
20
21
|
beforeClose?: any;
|
|
21
|
-
dragable?: any;
|
|
22
22
|
}>, {
|
|
23
23
|
t: (this: any, path: any, options?: any) => any;
|
|
24
24
|
vm: any;
|
|
@@ -27,7 +27,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
|
|
|
27
27
|
d: (props: any) => void;
|
|
28
28
|
dp: (props: any) => void;
|
|
29
29
|
gcls: (key: any) => any;
|
|
30
|
-
}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").
|
|
30
|
+
}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
|
|
31
31
|
title?: any;
|
|
32
32
|
tiny_mode?: any;
|
|
33
33
|
tiny_mode_root?: any;
|
|
@@ -44,10 +44,10 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
|
|
|
44
44
|
showHeader?: any;
|
|
45
45
|
showFooter?: any;
|
|
46
46
|
maskClosable?: any;
|
|
47
|
+
dragable?: any;
|
|
47
48
|
lockScroll?: any;
|
|
48
49
|
flex?: any;
|
|
49
50
|
beforeClose?: any;
|
|
50
|
-
dragable?: any;
|
|
51
51
|
}>>>, {
|
|
52
52
|
readonly title?: any;
|
|
53
53
|
readonly tiny_mode?: any;
|
|
@@ -65,9 +65,9 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
|
|
|
65
65
|
readonly showHeader?: any;
|
|
66
66
|
readonly showFooter?: any;
|
|
67
67
|
readonly maskClosable?: any;
|
|
68
|
+
readonly dragable?: any;
|
|
68
69
|
readonly lockScroll?: any;
|
|
69
70
|
readonly flex?: any;
|
|
70
71
|
readonly beforeClose?: any;
|
|
71
|
-
readonly dragable?: any;
|
|
72
72
|
}, {}>;
|
|
73
73
|
export default _default;
|
package/src/pc.vue.d.ts
CHANGED
|
@@ -13,14 +13,14 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
|
|
|
13
13
|
mask?: any;
|
|
14
14
|
visible?: any;
|
|
15
15
|
customClass?: any;
|
|
16
|
+
showClose?: any;
|
|
16
17
|
showHeader?: any;
|
|
17
18
|
showFooter?: any;
|
|
18
|
-
showClose?: any;
|
|
19
19
|
maskClosable?: any;
|
|
20
|
+
dragable?: any;
|
|
20
21
|
lockScroll?: any;
|
|
21
22
|
flex?: any;
|
|
22
23
|
beforeClose?: any;
|
|
23
|
-
dragable?: any;
|
|
24
24
|
tipsProps?: any;
|
|
25
25
|
}>, {
|
|
26
26
|
t: (this: any, path: any, options?: any) => any;
|
|
@@ -30,7 +30,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
|
|
|
30
30
|
d: (props: any) => void;
|
|
31
31
|
dp: (props: any) => void;
|
|
32
32
|
gcls: (key: any) => any;
|
|
33
|
-
}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").
|
|
33
|
+
}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
|
|
34
34
|
title?: any;
|
|
35
35
|
tiny_mode?: any;
|
|
36
36
|
tiny_mode_root?: any;
|
|
@@ -45,14 +45,14 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
|
|
|
45
45
|
mask?: any;
|
|
46
46
|
visible?: any;
|
|
47
47
|
customClass?: any;
|
|
48
|
+
showClose?: any;
|
|
48
49
|
showHeader?: any;
|
|
49
50
|
showFooter?: any;
|
|
50
|
-
showClose?: any;
|
|
51
51
|
maskClosable?: any;
|
|
52
|
+
dragable?: any;
|
|
52
53
|
lockScroll?: any;
|
|
53
54
|
flex?: any;
|
|
54
55
|
beforeClose?: any;
|
|
55
|
-
dragable?: any;
|
|
56
56
|
tipsProps?: any;
|
|
57
57
|
}>>>, {
|
|
58
58
|
readonly title?: any;
|
|
@@ -69,14 +69,14 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
|
|
|
69
69
|
readonly mask?: any;
|
|
70
70
|
readonly visible?: any;
|
|
71
71
|
readonly customClass?: any;
|
|
72
|
+
readonly showClose?: any;
|
|
72
73
|
readonly showHeader?: any;
|
|
73
74
|
readonly showFooter?: any;
|
|
74
|
-
readonly showClose?: any;
|
|
75
75
|
readonly maskClosable?: any;
|
|
76
|
+
readonly dragable?: any;
|
|
76
77
|
readonly lockScroll?: any;
|
|
77
78
|
readonly flex?: any;
|
|
78
79
|
readonly beforeClose?: any;
|
|
79
|
-
readonly dragable?: any;
|
|
80
80
|
readonly tipsProps?: any;
|
|
81
81
|
}, {}>;
|
|
82
82
|
export default _default;
|