@opentiny/vue-drawer 2.13.0 → 2.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 +26 -20
  3. package/lib/pc.js +40 -21
  4. package/package.json +7 -4
  5. package/src/index.d.ts +61 -62
  6. package/src/mobile-first.vue.d.ts +1 -1
  7. package/src/pc.vue.d.ts +1 -1
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 = "2.13.0";
105
+ });
106
+ var version = "2.15.0";
103
107
  Drawer.model = {
104
108
  prop: "modelValue",
105
109
  event: "update:modelValue"
package/lib/mobile-first.js CHANGED
@@ -1,7 +1,8 @@
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";
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
+
5
6
  function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
6
7
  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
7
8
  if (render) {
@@ -56,21 +57,21 @@ function normalizeComponent(scriptExports, render, staticRenderFns, functionalTe
56
57
  };
57
58
  }
58
59
 
59
- var __vue2_script = {
60
+ var __vue2_script = defineComponent({
60
61
  components: {
61
62
  TinyButton: Button,
62
63
  IconClose: IconClose()
63
64
  },
64
- props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex"]),
65
- setup: function setup(props2, context) {
66
- return _setup({
65
+ props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "beforeClose"]),
66
+ setup: function setup$1(props2, context) {
67
+ return setup({
67
68
  props: props2,
68
69
  context,
69
70
  renderless,
70
71
  api
71
72
  });
72
73
  }
73
- };
74
+ });
74
75
  var render = function render2() {
75
76
  var _vm = this;
76
77
  var _h = _vm.$createElement;
@@ -93,7 +94,7 @@ var render = function render2() {
93
94
  }),
94
95
  on: {
95
96
  "click": function click($event) {
96
- _vm.maskClosable && _vm.close();
97
+ return _vm.handleClose("mask");
97
98
  }
98
99
  }
99
100
  }) : _vm._e(), _c("div", {
@@ -105,15 +106,15 @@ var render = function render2() {
105
106
  }, {
106
107
  "max-h-full": ["top", "bottom"].includes(_vm.placement)
107
108
  }, {
108
- "left-0 bottom-0 translate-y-full border-t-0.5": _vm.placement === "bottom"
109
+ "left-0 bottom-0 translate-y-full border-t-0.5 rounded-t-lg": _vm.placement === "bottom"
109
110
  }, {
110
- "left-0 top-0 -translate-y-full border-b-0.5": _vm.placement === "top"
111
+ "left-0 top-0 -translate-y-full border-b-0.5 rounded-b-lg": _vm.placement === "top"
111
112
  }, {
112
113
  "translate-y-0": ["top", "bottom"].includes(_vm.placement) && _vm.state.toggle
113
114
  }, {
114
- "left-0 top-0 -translate-x-full border-r-0.5": _vm.placement === "left"
115
+ "left-0 top-0 -translate-x-full border-r-0.5 rounded-r-lg": _vm.placement === "left"
115
116
  }, {
116
- "right-0 top-0 translate-x-full border-l-0.5": _vm.placement === "right"
117
+ "right-0 top-0 translate-x-full border-l-0.5 rounded-l-lg": _vm.placement === "right"
117
118
  }, {
118
119
  "translate-x-0": ["left", "right"].includes(_vm.placement) && _vm.state.toggle
119
120
  }, _vm.customClass),
@@ -148,7 +149,9 @@ var render = function render2() {
148
149
  "custom-class": "h-5 w-5 cursor-pointer"
149
150
  },
150
151
  on: {
151
- "click": _vm.close
152
+ "click": function click($event) {
153
+ return _vm.handleClose("close");
154
+ }
152
155
  }
153
156
  })];
154
157
  })], 2)];
@@ -174,7 +177,9 @@ var render = function render2() {
174
177
  "tiny_mode": "mobile-first"
175
178
  },
176
179
  on: {
177
- "click": _vm.close
180
+ "click": function click($event) {
181
+ return _vm.handleClose("cancel");
182
+ }
178
183
  }
179
184
  }, [_vm._v(_vm._s(_vm.t("ui.button.cancel")))]), _c("tiny-button", {
180
185
  staticClass: "ml-2",
@@ -183,7 +188,9 @@ var render = function render2() {
183
188
  "type": "primary"
184
189
  },
185
190
  on: {
186
- "click": _vm.confirm
191
+ "click": function click($event) {
192
+ return _vm.handleClose("confirm");
193
+ }
187
194
  }
188
195
  }, [_vm._v(_vm._s(_vm.t("ui.button.confirm")))])];
189
196
  })], 2)]) : _vm._e()])])]);
@@ -199,6 +206,5 @@ function __vue2_injectStyles(context) {
199
206
  var mobileFirst = /* @__PURE__ */ function() {
200
207
  return __component__.exports;
201
208
  }();
202
- export {
203
- mobileFirst as default
204
- };
209
+
210
+ export { mobileFirst as default };
package/lib/pc.js CHANGED
@@ -1,8 +1,10 @@
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";
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
+
6
8
  function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
7
9
  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
8
10
  if (render) {
@@ -57,21 +59,23 @@ function normalizeComponent(scriptExports, render, staticRenderFns, functionalTe
57
59
  };
58
60
  }
59
61
 
60
- var __vue2_script = {
62
+ var __vue2_script = defineComponent({
61
63
  components: {
62
64
  TinyButton: Button,
63
- IconClose: IconClose()
65
+ TinyTooltip: Tooltip,
66
+ IconClose: iconClose(),
67
+ IconHelpCircle: iconHelpCircle()
64
68
  },
65
- props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex"]),
66
- setup: function setup(props2, context) {
67
- return _setup({
69
+ props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex", "beforeClose", "tipsProps"]),
70
+ setup: function setup$1(props2, context) {
71
+ return setup({
68
72
  props: props2,
69
73
  context,
70
74
  renderless,
71
75
  api
72
76
  });
73
77
  }
74
- };
78
+ });
75
79
  var render = function render2() {
76
80
  var _vm = this;
77
81
  var _h = _vm.$createElement;
@@ -95,7 +99,7 @@ var render = function render2() {
95
99
  },
96
100
  on: {
97
101
  "click": function click($event) {
98
- _vm.maskClosable && _vm.close();
102
+ return _vm.handleClose("mask");
99
103
  }
100
104
  }
101
105
  }) : _vm._e()]), _c("transition", {
@@ -117,7 +121,7 @@ var render = function render2() {
117
121
  "is-bottom": _vm.placement === "bottom",
118
122
  "drag-effects": !_vm.state.dragEvent.isDrag,
119
123
  "toggle": _vm.state.toggle
120
- }, _vm.customClass],
124
+ }, "tiny-drawer-main", _vm.customClass],
121
125
  style: {
122
126
  width: ["left", "right"].includes(_vm.placement) ? _vm.state.computedWidth : null,
123
127
  zIndex: _vm.zIndex
@@ -142,9 +146,13 @@ var render = function render2() {
142
146
  }, [_vm._t("header", function() {
143
147
  return [_c("div", {
144
148
  staticClass: "tiny-drawer__header"
149
+ }, [_c("div", {
150
+ staticClass: "tiny-drawer__header-left"
145
151
  }, [_vm.title ? _c("div", {
146
152
  staticClass: "tiny-drawer__title"
147
- }, [_vm._v(_vm._s(_vm.title))]) : _vm._e(), _c("div", {
153
+ }, [_vm._v(_vm._s(_vm.title))]) : _vm._e(), _vm.tipsProps ? _c("tiny-tooltip", _vm._b({}, "tiny-tooltip", _vm.tipsProps, false), [_c("icon-help-circle", {
154
+ staticClass: "tiny-drawer__help-icon"
155
+ })], 1) : _vm._e()], 1), _c("div", {
148
156
  staticClass: "tiny-drawer__header-right"
149
157
  }, [_vm._t("header-right")], 2)])];
150
158
  }), _vm.showClose ? _c("button", {
@@ -154,7 +162,9 @@ var render = function render2() {
154
162
  "aria-label": "Close"
155
163
  },
156
164
  on: {
157
- "click": _vm.close
165
+ "click": function click($event) {
166
+ return _vm.handleClose("close");
167
+ }
158
168
  }
159
169
  }, [_c("icon-close", {
160
170
  staticClass: "tiny-svg-size tiny-drawer__close"
@@ -162,7 +172,7 @@ var render = function render2() {
162
172
  ref: "body",
163
173
  class: ["tiny-drawer__body", {
164
174
  "flex flex-col": _vm.flex
165
- }],
175
+ }, "drawer-body"],
166
176
  attrs: {
167
177
  "data-tag": "drawer-body"
168
178
  }
@@ -174,18 +184,28 @@ var render = function render2() {
174
184
  }
175
185
  }, [_vm._t("footer", function() {
176
186
  return [_c("tiny-button", {
187
+ class: ["tiny-drawer__confirm-btn", {
188
+ reverse: _vm.state.btnOrderReversed
189
+ }],
177
190
  attrs: {
178
191
  "type": "primary"
179
192
  },
180
193
  on: {
181
- "click": _vm.confirm
194
+ "click": function click($event) {
195
+ return _vm.handleClose("confirm");
196
+ }
182
197
  }
183
198
  }, [_vm._v(_vm._s(_vm.t("ui.button.confirm")))]), _c("tiny-button", {
199
+ class: ["tiny-drawer__cancel-btn", {
200
+ reverse: _vm.state.btnOrderReversed
201
+ }],
184
202
  attrs: {
185
203
  "plain": ""
186
204
  },
187
205
  on: {
188
- "click": _vm.close
206
+ "click": function click($event) {
207
+ return _vm.handleClose("cancel");
208
+ }
189
209
  }
190
210
  }, [_vm._v(_vm._s(_vm.t("ui.button.cancel")))])];
191
211
  })], 2) : _vm._e()])])])], 1);
@@ -201,6 +221,5 @@ function __vue2_injectStyles(context) {
201
221
  var pc = /* @__PURE__ */ function() {
202
222
  return __component__.exports;
203
223
  }();
204
- export {
205
- pc as default
206
- };
224
+
225
+ export { pc as default };
package/package.json CHANGED
@@ -1,15 +1,18 @@
1
1
  {
2
2
  "name": "@opentiny/vue-drawer",
3
- "version": "2.13.0",
3
+ "version": "2.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": "~2.13.0",
11
- "@opentiny/vue-common": "~2.13.0",
12
- "@opentiny/vue-renderless": "~3.13.0"
10
+ "@opentiny/vue-button": "~2.15.0",
11
+ "@opentiny/vue-tooltip": "~2.15.0",
12
+ "@opentiny/vue-common": "~2.15.0",
13
+ "@opentiny/vue-renderless": "~3.15.0",
14
+ "@opentiny/vue-icon": "~2.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,66 +1,65 @@
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: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
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;
52
- };
53
- zIndex: {
54
- type: NumberConstructor;
55
- default: number;
56
- };
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
8
  };
64
- setup(props: any, context: any): () => any;
9
+ visible: {
10
+ type: BooleanConstructor;
11
+ default: boolean;
12
+ };
13
+ customClass: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
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;
65
63
  };
64
+ declare const _default: any;
66
65
  export default _default;
package/src/mobile-first.vue.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: import("vue/types/vue").ExtendedVue<import("vue").default, unknown, unknown, unknown, Record<"title" | "tiny_mode" | "tiny_mode_root" | "tiny_template" | "tiny_renderless" | "_constants" | "tiny_theme" | "tiny_chart_theme" | "width" | "mask" | "visible" | "showHeader" | "showFooter" | "customClass" | "maskClosable" | "placement" | "lockScroll" | "flex" | "dragable", any>>;
1
+ declare const _default: any;
2
2
  export default _default;
package/src/pc.vue.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: import("vue/types/vue").ExtendedVue<import("vue").default, unknown, unknown, unknown, Record<"title" | "tiny_mode" | "tiny_mode_root" | "tiny_template" | "tiny_renderless" | "_constants" | "tiny_theme" | "tiny_chart_theme" | "width" | "mask" | "visible" | "showHeader" | "showFooter" | "customClass" | "maskClosable" | "placement" | "zIndex" | "showClose" | "lockScroll" | "flex" | "dragable", any>>;
1
+ declare const _default: any;
2
2
  export default _default;