@opentiny/vue-drawer 3.13.0 → 3.15.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.
Files changed (7) hide show
  1. package/lib/index.js +65 -61
  2. package/lib/mobile-first.js +52 -46
  3. package/lib/pc.js +87 -53
  4. package/package.json +7 -4
  5. package/src/index.d.ts +201 -64
  6. package/src/mobile-first.vue.d.ts +12 -9
  7. package/src/pc.vue.d.ts +18 -12
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, $props, $setup } 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) {
@@ -29,68 +29,72 @@ var template = function template2(mode) {
29
29
  var $constants = {
30
30
  SCROLL_LOCK_CLASS: function SCROLL_LOCK_CLASS(mode) {
31
31
  var scrollLockClasses = {
32
- "mobile-first": "overflow-hidden"
32
+ "mobile-first": "overflow-hidden",
33
+ "pc": "tiny-popup-parent--hidden tiny-dialog-box__scroll-lock"
33
34
  };
34
35
  return scrollLockClasses[mode] || "";
35
- }
36
+ },
37
+ DEFAULT_WIDTH: "500px"
36
38
  };
37
- var Drawer = {
38
- name: $prefix + "Drawer",
39
- props: _extends({}, $props, {
40
- _constants: {
41
- type: Object,
42
- default: function _default() {
43
- return $constants;
44
- }
45
- },
46
- visible: {
47
- type: Boolean,
48
- default: false
49
- },
50
- customClass: [String, Object, Array],
51
- placement: {
52
- type: String,
53
- default: "right"
54
- },
55
- width: {
56
- type: String,
57
- default: "500px"
58
- },
59
- title: String,
60
- showClose: {
61
- type: Boolean,
62
- default: true
63
- },
64
- showHeader: {
65
- type: Boolean,
66
- default: true
67
- },
68
- showFooter: {
69
- type: Boolean,
70
- default: false
71
- },
72
- mask: {
73
- type: Boolean,
74
- default: true
75
- },
76
- maskClosable: {
77
- type: Boolean,
78
- default: true
79
- },
80
- dragable: Boolean,
81
- lockScroll: {
82
- type: Boolean,
83
- default: true
84
- },
85
- flex: {
86
- type: Boolean,
87
- default: false
88
- },
89
- zIndex: {
90
- type: Number,
91
- default: 2e3
39
+ var drawerProps = _extends({}, $props, {
40
+ _constants: {
41
+ type: Object,
42
+ default: function _default() {
43
+ return $constants;
92
44
  }
93
- }),
45
+ },
46
+ visible: {
47
+ type: Boolean,
48
+ default: false
49
+ },
50
+ customClass: [String, Object, Array],
51
+ placement: {
52
+ type: String,
53
+ default: "right"
54
+ },
55
+ width: {
56
+ type: String
57
+ },
58
+ title: String,
59
+ showClose: {
60
+ type: Boolean,
61
+ default: true
62
+ },
63
+ showHeader: {
64
+ type: Boolean,
65
+ default: true
66
+ },
67
+ showFooter: {
68
+ type: Boolean,
69
+ default: false
70
+ },
71
+ mask: {
72
+ type: Boolean,
73
+ default: true
74
+ },
75
+ maskClosable: {
76
+ type: Boolean,
77
+ default: true
78
+ },
79
+ dragable: Boolean,
80
+ lockScroll: {
81
+ type: Boolean,
82
+ default: true
83
+ },
84
+ flex: {
85
+ type: Boolean,
86
+ default: false
87
+ },
88
+ zIndex: {
89
+ type: Number,
90
+ default: 2e3
91
+ },
92
+ beforeClose: Function,
93
+ tipsProps: Object
94
+ });
95
+ var Drawer = defineComponent({
96
+ name: $prefix + "Drawer",
97
+ props: drawerProps,
94
98
  setup: function setup(props, context) {
95
99
  return $setup({
96
100
  props,
@@ -98,8 +102,8 @@ var Drawer = {
98
102
  template
99
103
  });
100
104
  }
101
- };
102
- var version = "3.13.0";
105
+ });
106
+ var version = "3.15.0";
103
107
  Drawer.model = {
104
108
  prop: "modelValue",
105
109
  event: "update:modelValue"
package/lib/mobile-first.js CHANGED
@@ -1,13 +1,14 @@
1
- import { renderless, api } from "@opentiny/vue-renderless/drawer/vue";
2
- import { props, setup as _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
- function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
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 = _unsupportedIterableToArray_tiny(o)) || allowArrayLike && o && typeof o.length === "number") {
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 _unsupportedIterableToArray_tiny(o, minLen) {
23
+ function _unsupportedIterableToArray(o, minLen) {
23
24
  if (!o)
24
25
  return;
25
26
  if (typeof o === "string")
26
- return _arrayLikeToArray_tiny(o, minLen);
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 _arrayLikeToArray_tiny(o, minLen);
34
+ return _arrayLikeToArray(o, minLen);
34
35
  }
35
- function _arrayLikeToArray_tiny(arr, len) {
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 = _createForOfIteratorHelperLoose_tiny(props), _step; !(_step = _iterator()).done; ) {
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
- props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex"]),
57
- setup: function setup(props2, context) {
58
- return _setup({
57
+ props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "beforeClose"]),
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"
@@ -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
- [$props.mask ? (openBlock(), createElementBlock(
102
+ [_ctx.mask ? (openBlock(), createElementBlock(
102
103
  "div",
103
104
  {
104
105
  key: 0,
@@ -107,7 +108,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
107
108
  "bg-color-bg-7": _ctx.state.toggle
108
109
  })),
109
110
  onClick: _cache[0] || (_cache[0] = function($event) {
110
- return $props.maskClosable && _ctx.close();
111
+ return _ctx.handleClose("mask");
111
112
  })
112
113
  },
113
114
  null,
@@ -121,52 +122,54 @@ 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($props.placement)
125
+ "h-full": ["left", "right"].includes(_ctx.placement)
125
126
  }, {
126
- "max-h-full": ["top", "bottom"].includes($props.placement)
127
+ "max-h-full": ["top", "bottom"].includes(_ctx.placement)
127
128
  }, {
128
- "left-0 bottom-0 translate-y-full border-t-0.5": $props.placement === "bottom"
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": $props.placement === "top"
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($props.placement) && _ctx.state.toggle
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": $props.placement === "left"
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": $props.placement === "right"
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($props.placement) && _ctx.state.toggle
139
- }, $props.customClass)),
139
+ "translate-x-0": ["left", "right"].includes(_ctx.placement) && _ctx.state.toggle
140
+ }, _ctx.customClass)),
140
141
  style: normalizeStyle({
141
- width: ["left", "right"].includes($props.placement) ? _ctx.state.computedWidth : null
142
+ width: ["left", "right"].includes(_ctx.placement) ? _ctx.state.computedWidth : null
142
143
  })
143
144
  },
144
- [$props.dragable ? (openBlock(), createElementBlock(
145
+ [_ctx.dragable ? (openBlock(), createElementBlock(
145
146
  "div",
146
147
  {
147
148
  key: 0,
148
149
  "data-tag": "drawer-drag-bar",
149
150
  ref: "dragBar",
150
- class: normalizeClass(["h-full absolute top-0 w-2 cursor-e-resize", $props.placement === "left" ? "-right-1" : "-left-1"])
151
+ class: normalizeClass(["h-full absolute top-0 w-2 cursor-e-resize", _ctx.placement === "left" ? "-right-1" : "-left-1"])
151
152
  },
152
153
  null,
153
154
  2
154
155
  /* CLASS */
155
- )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [$props.showHeader ? (openBlock(), createElementBlock(
156
+ )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [_ctx.showHeader ? (openBlock(), createElementBlock(
156
157
  "div",
157
158
  _hoisted_3,
158
159
  [renderSlot(_ctx.$slots, "header", {}, function() {
159
- return [$props.title ? (openBlock(), createElementBlock(
160
+ return [_ctx.title ? (openBlock(), createElementBlock(
160
161
  "div",
161
162
  _hoisted_4,
162
- toDisplayString($props.title),
163
+ toDisplayString(_ctx.title),
163
164
  1
164
165
  /* TEXT */
165
166
  )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "header-right", {}, function() {
166
167
  return [createVNode(_component_IconClose, {
167
168
  "custom-class": "h-5 w-5 cursor-pointer",
168
- onClick: _ctx.close
169
- }, null, 8, ["onClick"])];
169
+ onClick: _cache[1] || (_cache[1] = function($event) {
170
+ return _ctx.handleClose("close");
171
+ })
172
+ })];
170
173
  })])];
171
174
  })],
172
175
  512
@@ -177,19 +180,21 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
177
180
  "data-tag": "drawer-body",
178
181
  ref: "body",
179
182
  class: normalizeClass(["flex-auto overflow-auto", {
180
- "flex flex-col": $props.flex
183
+ "flex flex-col": _ctx.flex
181
184
  }])
182
185
  },
183
186
  [renderSlot(_ctx.$slots, "default")],
184
187
  2
185
188
  /* CLASS */
186
- ), $props.showFooter ? (openBlock(), createElementBlock(
189
+ ), _ctx.showFooter ? (openBlock(), createElementBlock(
187
190
  "div",
188
191
  _hoisted_6,
189
192
  [createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "footer", {}, function() {
190
193
  return [createVNode(_component_tiny_button, {
191
194
  tiny_mode: "mobile-first",
192
- onClick: _ctx.close
195
+ onClick: _cache[2] || (_cache[2] = function($event) {
196
+ return _ctx.handleClose("cancel");
197
+ })
193
198
  }, {
194
199
  default: withCtx(function() {
195
200
  return [createTextVNode(
@@ -200,11 +205,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
200
205
  }),
201
206
  _: 1
202
207
  /* STABLE */
203
- }, 8, ["onClick"]), createVNode(_component_tiny_button, {
208
+ }), createVNode(_component_tiny_button, {
204
209
  tiny_mode: "mobile-first",
205
210
  class: "ml-2",
206
211
  type: "primary",
207
- onClick: _ctx.confirm
212
+ onClick: _cache[3] || (_cache[3] = function($event) {
213
+ return _ctx.handleClose("confirm");
214
+ })
208
215
  }, {
209
216
  default: withCtx(function() {
210
217
  return [createTextVNode(
@@ -215,7 +222,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
215
222
  }),
216
223
  _: 1
217
224
  /* STABLE */
218
- }, 8, ["onClick"])];
225
+ })];
219
226
  })])],
220
227
  512
221
228
  /* NEED_PATCH */
@@ -225,9 +232,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
225
232
  )],
226
233
  512
227
234
  /* NEED_PATCH */
228
- )), [[vShow, $props.visible]]);
235
+ )), [[vShow, _ctx.visible]]);
229
236
  }
230
237
  var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
231
- export {
232
- mobileFirst as default
233
- };
238
+
239
+ export { mobileFirst as default };
package/lib/pc.js CHANGED
@@ -1,14 +1,16 @@
1
- import { renderless, api } from "@opentiny/vue-renderless/drawer/vue";
2
- import { props, setup as _setup } from "@opentiny/vue-common";
3
- import "@opentiny/vue-theme/drawer/index.css";
4
- import { IconClose } from "@opentiny/vue-icon";
5
- import Button from "@opentiny/vue-button";
6
- import { resolveComponent, openBlock, createElementBlock, createVNode, Transition, withCtx, normalizeClass, normalizeStyle, createCommentVNode, withDirectives, createElementVNode, renderSlot, toDisplayString, createTextVNode, vShow } from "vue";
7
- function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
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) {
8
10
  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
9
11
  if (it)
10
12
  return (it = it.call(o)).next.bind(it);
11
- if (Array.isArray(o) || (it = _unsupportedIterableToArray_tiny(o)) || allowArrayLike && o && typeof o.length === "number") {
13
+ if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
12
14
  if (it)
13
15
  o = it;
14
16
  var i = 0;
@@ -20,20 +22,20 @@ function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
20
22
  }
21
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.");
22
24
  }
23
- function _unsupportedIterableToArray_tiny(o, minLen) {
25
+ function _unsupportedIterableToArray(o, minLen) {
24
26
  if (!o)
25
27
  return;
26
28
  if (typeof o === "string")
27
- return _arrayLikeToArray_tiny(o, minLen);
29
+ return _arrayLikeToArray(o, minLen);
28
30
  var n = Object.prototype.toString.call(o).slice(8, -1);
29
31
  if (n === "Object" && o.constructor)
30
32
  n = o.constructor.name;
31
33
  if (n === "Map" || n === "Set")
32
34
  return Array.from(o);
33
35
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
34
- return _arrayLikeToArray_tiny(o, minLen);
36
+ return _arrayLikeToArray(o, minLen);
35
37
  }
36
- function _arrayLikeToArray_tiny(arr, len) {
38
+ function _arrayLikeToArray(arr, len) {
37
39
  if (len == null || len > arr.length)
38
40
  len = arr.length;
39
41
  for (var i = 0, arr2 = new Array(len); i < len; i++)
@@ -42,28 +44,30 @@ function _arrayLikeToArray_tiny(arr, len) {
42
44
  }
43
45
  var _export_sfc = function _export_sfc2(sfc, props) {
44
46
  var target = sfc.__vccOpts || sfc;
45
- for (var _iterator = _createForOfIteratorHelperLoose_tiny(props), _step; !(_step = _iterator()).done; ) {
47
+ for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
46
48
  var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
47
49
  target[key] = val;
48
50
  }
49
51
  return target;
50
52
  };
51
53
 
52
- var _sfc_main = {
54
+ var _sfc_main = defineComponent({
53
55
  components: {
54
56
  TinyButton: Button,
55
- IconClose: IconClose()
57
+ TinyTooltip: Tooltip,
58
+ IconClose: iconClose(),
59
+ IconHelpCircle: iconHelpCircle()
56
60
  },
57
- props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex"]),
58
- setup: function setup(props2, context) {
59
- return _setup({
61
+ props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex", "beforeClose", "tipsProps"]),
62
+ setup: function setup$1(props2, context) {
63
+ return setup({
60
64
  props: props2,
61
65
  context,
62
66
  renderless,
63
67
  api
64
68
  });
65
69
  }
66
- };
70
+ });
67
71
  var _hoisted_1 = {
68
72
  "data-tag": "tiny-drawer",
69
73
  class: "tiny-drawer"
@@ -87,26 +91,31 @@ var _hoisted_5 = {
87
91
  class: "tiny-drawer__header"
88
92
  };
89
93
  var _hoisted_6 = {
94
+ class: "tiny-drawer__header-left"
95
+ };
96
+ var _hoisted_7 = {
90
97
  key: 0,
91
98
  class: "tiny-drawer__title"
92
99
  };
93
- var _hoisted_7 = {
100
+ var _hoisted_8 = {
94
101
  class: "tiny-drawer__header-right"
95
102
  };
96
- var _hoisted_8 = {
103
+ var _hoisted_9 = {
97
104
  key: 1,
98
105
  "data-tag": "drawer-footer",
99
106
  ref: "footer",
100
107
  class: "tiny-drawer__footer"
101
108
  };
102
109
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
110
+ var _component_icon_help_circle = resolveComponent("icon-help-circle");
111
+ var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
103
112
  var _component_icon_close = resolveComponent("icon-close");
104
113
  var _component_tiny_button = resolveComponent("tiny-button");
105
114
  return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(Transition, {
106
115
  name: "drawer-fade"
107
116
  }, {
108
117
  default: withCtx(function() {
109
- return [$props.mask && $props.visible ? (openBlock(), createElementBlock(
118
+ return [_ctx.mask && _ctx.visible ? (openBlock(), createElementBlock(
110
119
  "div",
111
120
  {
112
121
  key: 0,
@@ -115,10 +124,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
115
124
  "show-bg-color": _ctx.state.toggle
116
125
  }]),
117
126
  style: normalizeStyle({
118
- zIndex: $props.zIndex
127
+ zIndex: _ctx.zIndex
119
128
  }),
120
129
  onClick: _cache[0] || (_cache[0] = function($event) {
121
- return $props.maskClosable && _ctx.close();
130
+ return _ctx.handleClose("mask");
122
131
  })
123
132
  },
124
133
  null,
@@ -129,7 +138,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
129
138
  _: 1
130
139
  /* STABLE */
131
140
  }), createVNode(Transition, {
132
- name: "drawer-slide-" + $props.placement,
141
+ name: "drawer-slide-" + _ctx.placement,
133
142
  persisted: ""
134
143
  }, {
135
144
  default: withCtx(function() {
@@ -139,42 +148,58 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
139
148
  "data-tag": "tiny-drawer-main",
140
149
  ref: "drawerBox",
141
150
  class: normalizeClass(["tiny-drawer__main", {
142
- "is-left": $props.placement === "left",
143
- "is-right": $props.placement === "right",
144
- "is-top": $props.placement === "top",
145
- "is-bottom": $props.placement === "bottom",
151
+ "is-left": _ctx.placement === "left",
152
+ "is-right": _ctx.placement === "right",
153
+ "is-top": _ctx.placement === "top",
154
+ "is-bottom": _ctx.placement === "bottom",
146
155
  "drag-effects": !_ctx.state.dragEvent.isDrag,
147
156
  "toggle": _ctx.state.toggle
148
- }, $props.customClass]),
157
+ }, "tiny-drawer-main", _ctx.customClass]),
149
158
  style: normalizeStyle({
150
- width: ["left", "right"].includes($props.placement) ? _ctx.state.computedWidth : null,
151
- zIndex: $props.zIndex
159
+ width: ["left", "right"].includes(_ctx.placement) ? _ctx.state.computedWidth : null,
160
+ zIndex: _ctx.zIndex
152
161
  })
153
162
  },
154
- [$props.dragable ? (openBlock(), createElementBlock(
163
+ [_ctx.dragable ? (openBlock(), createElementBlock(
155
164
  "div",
156
165
  _hoisted_2,
157
166
  null,
158
167
  512
159
168
  /* NEED_PATCH */
160
- )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [$props.showHeader ? (openBlock(), createElementBlock(
169
+ )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [_ctx.showHeader ? (openBlock(), createElementBlock(
161
170
  "div",
162
171
  _hoisted_4,
163
172
  [renderSlot(_ctx.$slots, "header", {}, function() {
164
- return [createElementVNode("div", _hoisted_5, [$props.title ? (openBlock(), createElementBlock(
173
+ return [createElementVNode("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [_ctx.title ? (openBlock(), createElementBlock(
165
174
  "div",
166
- _hoisted_6,
167
- toDisplayString($props.title),
175
+ _hoisted_7,
176
+ toDisplayString(_ctx.title),
168
177
  1
169
178
  /* TEXT */
170
- )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "header-right")])])];
171
- }), $props.showClose ? (openBlock(), createElementBlock("button", {
179
+ )) : createCommentVNode("v-if", true), _ctx.tipsProps ? (openBlock(), createBlock(
180
+ _component_tiny_tooltip,
181
+ normalizeProps(mergeProps({
182
+ key: 1
183
+ }, _ctx.tipsProps)),
184
+ {
185
+ default: withCtx(function() {
186
+ return [createVNode(_component_icon_help_circle, {
187
+ class: "tiny-drawer__help-icon"
188
+ })];
189
+ }),
190
+ _: 1
191
+ /* STABLE */
192
+ },
193
+ 16
194
+ /* FULL_PROPS */
195
+ )) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "header-right")])])];
196
+ }), _ctx.showClose ? (openBlock(), createElementBlock("button", {
172
197
  key: 0,
173
198
  type: "button",
174
199
  class: "tiny-drawer__headerbtn",
175
200
  "aria-label": "Close",
176
- onClick: _cache[1] || (_cache[1] = function() {
177
- return _ctx.close && _ctx.close.apply(_ctx, arguments);
201
+ onClick: _cache[1] || (_cache[1] = function($event) {
202
+ return _ctx.handleClose("close");
178
203
  })
179
204
  }, [createVNode(_component_icon_close, {
180
205
  class: "tiny-svg-size tiny-drawer__close"
@@ -187,19 +212,24 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
187
212
  "data-tag": "drawer-body",
188
213
  ref: "body",
189
214
  class: normalizeClass(["tiny-drawer__body", {
190
- "flex flex-col": $props.flex
191
- }])
215
+ "flex flex-col": _ctx.flex
216
+ }, "drawer-body"])
192
217
  },
193
218
  [renderSlot(_ctx.$slots, "default")],
194
219
  2
195
220
  /* CLASS */
196
- ), $props.showFooter ? (openBlock(), createElementBlock(
221
+ ), _ctx.showFooter ? (openBlock(), createElementBlock(
197
222
  "div",
198
- _hoisted_8,
223
+ _hoisted_9,
199
224
  [renderSlot(_ctx.$slots, "footer", {}, function() {
200
225
  return [createVNode(_component_tiny_button, {
201
226
  type: "primary",
202
- onClick: _ctx.confirm
227
+ class: normalizeClass(["tiny-drawer__confirm-btn", {
228
+ reverse: _ctx.state.btnOrderReversed
229
+ }]),
230
+ onClick: _cache[2] || (_cache[2] = function($event) {
231
+ return _ctx.handleClose("confirm");
232
+ })
203
233
  }, {
204
234
  default: withCtx(function() {
205
235
  return [createTextVNode(
@@ -210,9 +240,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
210
240
  }),
211
241
  _: 1
212
242
  /* STABLE */
213
- }, 8, ["onClick"]), createVNode(_component_tiny_button, {
243
+ }, 8, ["class"]), createVNode(_component_tiny_button, {
214
244
  plain: "",
215
- onClick: _ctx.close
245
+ class: normalizeClass(["tiny-drawer__cancel-btn", {
246
+ reverse: _ctx.state.btnOrderReversed
247
+ }]),
248
+ onClick: _cache[3] || (_cache[3] = function($event) {
249
+ return _ctx.handleClose("cancel");
250
+ })
216
251
  }, {
217
252
  default: withCtx(function() {
218
253
  return [createTextVNode(
@@ -223,20 +258,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
223
258
  }),
224
259
  _: 1
225
260
  /* STABLE */
226
- }, 8, ["onClick"])];
261
+ }, 8, ["class"])];
227
262
  })],
228
263
  512
229
264
  /* NEED_PATCH */
230
265
  )) : createCommentVNode("v-if", true)])],
231
266
  6
232
267
  /* CLASS, STYLE */
233
- ), [[vShow, $props.visible]])];
268
+ ), [[vShow, _ctx.visible]])];
234
269
  }),
235
270
  _: 3
236
271
  /* FORWARDED */
237
272
  }, 8, ["name"])]);
238
273
  }
239
274
  var pc = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
240
- export {
241
- pc as default
242
- };
275
+
276
+ export { pc as default };
package/package.json CHANGED
@@ -1,15 +1,18 @@
1
1
  {
2
2
  "name": "@opentiny/vue-drawer",
3
- "version": "3.13.0",
3
+ "version": "3.15.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.13.0",
11
- "@opentiny/vue-common": "~3.13.0",
12
- "@opentiny/vue-renderless": "~3.13.0"
10
+ "@opentiny/vue-button": "~3.15.0",
11
+ "@opentiny/vue-tooltip": "~3.15.0",
12
+ "@opentiny/vue-common": "~3.15.0",
13
+ "@opentiny/vue-renderless": "~3.15.0",
14
+ "@opentiny/vue-icon": "~3.15.0",
15
+ "@opentiny/vue-theme": "~3.15.0"
13
16
  },
14
17
  "license": "MIT",
15
18
  "types": "index.d.ts"
package/src/index.d.ts CHANGED
@@ -1,68 +1,205 @@
1
- declare const _default: {
2
- name: string;
3
- props: {
4
- _constants: {
5
- type: ObjectConstructor;
6
- default: () => {
7
- SCROLL_LOCK_CLASS(mode: any): any;
8
- };
1
+ export declare const drawerProps: {
2
+ _constants: {
3
+ type: ObjectConstructor;
4
+ default: () => {
5
+ SCROLL_LOCK_CLASS(mode: string): string;
6
+ DEFAULT_WIDTH: string;
9
7
  };
10
- visible: {
11
- type: BooleanConstructor;
12
- default: boolean;
13
- };
14
- customClass: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
15
- placement: {
16
- type: StringConstructor;
17
- default: string;
18
- };
19
- width: {
20
- type: StringConstructor;
21
- default: string;
22
- };
23
- title: StringConstructor;
24
- showClose: {
25
- type: BooleanConstructor;
26
- default: boolean;
27
- };
28
- showHeader: {
29
- type: BooleanConstructor;
30
- default: boolean;
31
- };
32
- showFooter: {
33
- type: BooleanConstructor;
34
- default: boolean;
35
- };
36
- mask: {
37
- type: BooleanConstructor;
38
- default: boolean;
39
- };
40
- maskClosable: {
41
- type: BooleanConstructor;
42
- default: boolean;
43
- };
44
- dragable: BooleanConstructor;
45
- lockScroll: {
46
- type: BooleanConstructor;
47
- default: boolean;
48
- };
49
- flex: {
50
- type: BooleanConstructor;
51
- default: boolean;
8
+ };
9
+ visible: {
10
+ type: BooleanConstructor;
11
+ default: boolean;
12
+ };
13
+ customClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
14
+ placement: {
15
+ type: StringConstructor;
16
+ default: string;
17
+ };
18
+ width: {
19
+ type: StringConstructor;
20
+ };
21
+ title: StringConstructor;
22
+ showClose: {
23
+ type: BooleanConstructor;
24
+ default: boolean;
25
+ };
26
+ showHeader: {
27
+ type: BooleanConstructor;
28
+ default: boolean;
29
+ };
30
+ showFooter: {
31
+ type: BooleanConstructor;
32
+ default: boolean;
33
+ };
34
+ mask: {
35
+ type: BooleanConstructor;
36
+ default: boolean;
37
+ };
38
+ maskClosable: {
39
+ type: BooleanConstructor;
40
+ default: boolean;
41
+ };
42
+ dragable: BooleanConstructor;
43
+ lockScroll: {
44
+ type: BooleanConstructor;
45
+ default: boolean;
46
+ };
47
+ flex: {
48
+ type: BooleanConstructor;
49
+ default: boolean;
50
+ };
51
+ zIndex: {
52
+ type: NumberConstructor;
53
+ default: number;
54
+ };
55
+ beforeClose: FunctionConstructor;
56
+ tipsProps: ObjectConstructor;
57
+ tiny_mode: StringConstructor;
58
+ tiny_mode_root: BooleanConstructor;
59
+ tiny_template: (ObjectConstructor | FunctionConstructor)[];
60
+ tiny_renderless: FunctionConstructor;
61
+ tiny_theme: StringConstructor;
62
+ tiny_chart_theme: ObjectConstructor;
63
+ };
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;
52
70
  };
53
- zIndex: {
54
- type: NumberConstructor;
55
- default: number;
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").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
129
+ _constants: {
130
+ type: ObjectConstructor;
131
+ default: () => {
132
+ SCROLL_LOCK_CLASS(mode: string): string;
133
+ DEFAULT_WIDTH: string;
56
134
  };
57
- tiny_mode: StringConstructor;
58
- tiny_mode_root: BooleanConstructor;
59
- tiny_template: (ObjectConstructor | FunctionConstructor)[];
60
- tiny_renderless: FunctionConstructor;
61
- tiny_theme: StringConstructor;
62
- tiny_chart_theme: ObjectConstructor;
63
- };
64
- setup(props: any, context: any): () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
65
- [key: string]: any;
66
- }>;
67
- };
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
+ visible: boolean;
196
+ mask: boolean;
197
+ showClose: boolean;
198
+ showHeader: boolean;
199
+ showFooter: boolean;
200
+ maskClosable: boolean;
201
+ dragable: boolean;
202
+ lockScroll: boolean;
203
+ flex: boolean;
204
+ }, {}>;
68
205
  export default _default;
package/src/mobile-first.vue.d.ts CHANGED
@@ -9,15 +9,16 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
9
9
  tiny_chart_theme?: any;
10
10
  width?: any;
11
11
  placement?: any;
12
- mask?: any;
13
12
  visible?: any;
13
+ mask?: any;
14
14
  customClass?: any;
15
15
  showHeader?: any;
16
16
  showFooter?: any;
17
17
  maskClosable?: any;
18
- flex?: any;
19
- lockScroll?: any;
20
18
  dragable?: any;
19
+ lockScroll?: any;
20
+ flex?: any;
21
+ beforeClose?: any;
21
22
  }>, {
22
23
  t: (this: any, path: any, options?: any) => any;
23
24
  vm: any;
@@ -37,15 +38,16 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
37
38
  tiny_chart_theme?: any;
38
39
  width?: any;
39
40
  placement?: any;
40
- mask?: any;
41
41
  visible?: any;
42
+ mask?: any;
42
43
  customClass?: any;
43
44
  showHeader?: any;
44
45
  showFooter?: any;
45
46
  maskClosable?: any;
46
- flex?: any;
47
- lockScroll?: any;
48
47
  dragable?: any;
48
+ lockScroll?: any;
49
+ flex?: any;
50
+ beforeClose?: any;
49
51
  }>>>, {
50
52
  readonly title?: any;
51
53
  readonly tiny_mode?: any;
@@ -57,14 +59,15 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
57
59
  readonly tiny_chart_theme?: any;
58
60
  readonly width?: any;
59
61
  readonly placement?: any;
60
- readonly mask?: any;
61
62
  readonly visible?: any;
63
+ readonly mask?: any;
62
64
  readonly customClass?: any;
63
65
  readonly showHeader?: any;
64
66
  readonly showFooter?: any;
65
67
  readonly maskClosable?: any;
66
- readonly flex?: any;
67
- readonly lockScroll?: any;
68
68
  readonly dragable?: any;
69
+ readonly lockScroll?: any;
70
+ readonly flex?: any;
71
+ readonly beforeClose?: any;
69
72
  }, {}>;
70
73
  export default _default;
package/src/pc.vue.d.ts CHANGED
@@ -10,16 +10,18 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
10
10
  width?: any;
11
11
  placement?: any;
12
12
  zIndex?: any;
13
- mask?: any;
14
13
  visible?: any;
14
+ mask?: any;
15
15
  customClass?: any;
16
+ showClose?: any;
16
17
  showHeader?: any;
17
18
  showFooter?: any;
18
19
  maskClosable?: any;
19
- flex?: any;
20
- showClose?: any;
21
- lockScroll?: any;
22
20
  dragable?: any;
21
+ lockScroll?: any;
22
+ flex?: any;
23
+ beforeClose?: any;
24
+ tipsProps?: any;
23
25
  }>, {
24
26
  t: (this: any, path: any, options?: any) => any;
25
27
  vm: any;
@@ -40,16 +42,18 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
40
42
  width?: any;
41
43
  placement?: any;
42
44
  zIndex?: any;
43
- mask?: any;
44
45
  visible?: any;
46
+ mask?: any;
45
47
  customClass?: any;
48
+ showClose?: any;
46
49
  showHeader?: any;
47
50
  showFooter?: any;
48
51
  maskClosable?: any;
49
- flex?: any;
50
- showClose?: any;
51
- lockScroll?: any;
52
52
  dragable?: any;
53
+ lockScroll?: any;
54
+ flex?: any;
55
+ beforeClose?: any;
56
+ tipsProps?: any;
53
57
  }>>>, {
54
58
  readonly title?: any;
55
59
  readonly tiny_mode?: any;
@@ -62,15 +66,17 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
62
66
  readonly width?: any;
63
67
  readonly placement?: any;
64
68
  readonly zIndex?: any;
65
- readonly mask?: any;
66
69
  readonly visible?: any;
70
+ readonly mask?: any;
67
71
  readonly customClass?: any;
72
+ readonly showClose?: any;
68
73
  readonly showHeader?: any;
69
74
  readonly showFooter?: any;
70
75
  readonly maskClosable?: any;
71
- readonly flex?: any;
72
- readonly showClose?: any;
73
- readonly lockScroll?: any;
74
76
  readonly dragable?: any;
77
+ readonly lockScroll?: any;
78
+ readonly flex?: any;
79
+ readonly beforeClose?: any;
80
+ readonly tipsProps?: any;
75
81
  }, {}>;
76
82
  export default _default;