@opentiny/vue-drawer 2.8.0 → 3.8.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 (4) hide show
  1. package/lib/mobile-first.js +202 -172
  2. package/package.json +3 -3
  3. package/src/index.d.ts +3 -1
  4. package/src/mobile-first.vue.d.ts +52 -63
package/lib/mobile-first.js CHANGED
@@ -2,61 +2,53 @@ import { renderless, api } from "@opentiny/vue-renderless/drawer/vue";
2
2
  import { props, setup as _setup } from "@opentiny/vue-common";
3
3
  import { IconClose } from "@opentiny/vue-icon";
4
4
  import Button from "@opentiny/vue-button";
5
- function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
6
- var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
7
- if (render) {
8
- options.render = render;
9
- options.staticRenderFns = staticRenderFns;
10
- options._compiled = true;
11
- }
12
- if (functionalTemplate) {
13
- options.functional = true;
14
- }
15
- if (scopeId) {
16
- options._scopeId = "data-v-" + scopeId;
17
- }
18
- var hook;
19
- if (moduleIdentifier) {
20
- hook = function hook2(context) {
21
- context = context || // cached call
22
- this.$vnode && this.$vnode.ssrContext || // stateful
23
- this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
24
- if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
25
- context = __VUE_SSR_CONTEXT__;
26
- }
27
- if (injectStyles) {
28
- injectStyles.call(this, context);
29
- }
30
- if (context && context._registeredComponents) {
31
- context._registeredComponents.add(moduleIdentifier);
32
- }
5
+ import { resolveComponent, withDirectives, openBlock, createElementBlock, createCommentVNode, normalizeClass, createElementVNode, normalizeStyle, renderSlot, toDisplayString, createVNode, withCtx, createTextVNode, vShow } from "vue";
6
+ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
7
+ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
8
+ if (it)
9
+ return (it = it.call(o)).next.bind(it);
10
+ if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
11
+ if (it)
12
+ o = it;
13
+ var i = 0;
14
+ return function() {
15
+ if (i >= o.length)
16
+ return { done: true };
17
+ return { done: false, value: o[i++] };
33
18
  };
34
- options._ssrRegister = hook;
35
- } else if (injectStyles) {
36
- hook = shadowMode ? function() {
37
- injectStyles.call(this, (options.functional ? this.parent : this).$root.$options.shadowRoot);
38
- } : injectStyles;
39
19
  }
40
- if (hook) {
41
- if (options.functional) {
42
- options._injectStyles = hook;
43
- var originalRender = options.render;
44
- options.render = function renderWithStyleInjection(h, context) {
45
- hook.call(context);
46
- return originalRender(h, context);
47
- };
48
- } else {
49
- var existing = options.beforeCreate;
50
- options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
51
- }
52
- }
53
- return {
54
- exports: scriptExports,
55
- options
56
- };
20
+ 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
+ function _unsupportedIterableToArray(o, minLen) {
23
+ if (!o)
24
+ return;
25
+ if (typeof o === "string")
26
+ return _arrayLikeToArray(o, minLen);
27
+ var n = Object.prototype.toString.call(o).slice(8, -1);
28
+ if (n === "Object" && o.constructor)
29
+ n = o.constructor.name;
30
+ if (n === "Map" || n === "Set")
31
+ return Array.from(o);
32
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
33
+ return _arrayLikeToArray(o, minLen);
57
34
  }
35
+ function _arrayLikeToArray(arr, len) {
36
+ if (len == null || len > arr.length)
37
+ len = arr.length;
38
+ for (var i = 0, arr2 = new Array(len); i < len; i++)
39
+ arr2[i] = arr[i];
40
+ return arr2;
41
+ }
42
+ var _export_sfc = function _export_sfc2(sfc, props) {
43
+ var target = sfc.__vccOpts || sfc;
44
+ for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
45
+ var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
46
+ target[key] = val;
47
+ }
48
+ return target;
49
+ };
58
50
 
59
- var __vue2_script = {
51
+ var _sfc_main = {
60
52
  components: {
61
53
  TinyButton: Button,
62
54
  IconClose: IconClose()
@@ -71,130 +63,168 @@ var __vue2_script = {
71
63
  });
72
64
  }
73
65
  };
74
- var render = function render2() {
75
- var _vm = this;
76
- var _h = _vm.$createElement;
77
- var _c = _vm._self._c || _h;
78
- return _c("div", {
79
- directives: [{
80
- name: "show",
81
- rawName: "v-show",
82
- value: _vm.visible,
83
- expression: "visible"
84
- }],
85
- staticClass: "text-sm",
86
- attrs: {
87
- "data-tag": "tiny-drawer"
88
- }
89
- }, [_vm.mask ? _c("div", {
90
- ref: "mask",
91
- class: _vm.m("fixed z-50 inset-0 w-full h-full bg-black opacity-0 transition-opacity ease-linear duration-200", {
92
- "opacity-30": _vm.state.toggle
93
- }),
94
- on: {
95
- "click": function click($event) {
96
- _vm.maskClosable && _vm.close();
97
- }
98
- }
99
- }) : _vm._e(), _c("div", {
100
- ref: "drawerBox",
101
- class: _vm.m("fixed w-full max-w-full flex flex-col bg-white z-50 shadow-sm border-color-border-separator", {
102
- "transition-all ease-linear duration-200": !_vm.state.dragEvent.isDrag
103
- }, {
104
- "h-full": ["left", "right"].includes(_vm.placement)
105
- }, {
106
- "left-0 bottom-0 translate-y-full border-t-0.5": _vm.placement === "bottom"
107
- }, {
108
- "left-0 top-0 -translate-y-full border-b-0.5": _vm.placement === "top"
109
- }, {
110
- "translate-y-0": ["top", "bottom"].includes(_vm.placement) && _vm.state.toggle
111
- }, {
112
- "left-0 top-0 -translate-x-full border-r-0.5": _vm.placement === "left"
113
- }, {
114
- "right-0 top-0 translate-x-full border-l-0.5": _vm.placement === "right"
115
- }, {
116
- "translate-x-0": ["left", "right"].includes(_vm.placement) && _vm.state.toggle
117
- }, _vm.customClass),
118
- style: {
119
- width: ["left", "right"].includes(_vm.placement) ? _vm.state.computedWidth : null
120
- },
121
- attrs: {
122
- "data-tag": "tiny-drawer-main"
123
- }
124
- }, [_vm.dragable ? _c("div", {
125
- ref: "dragBar",
126
- class: ["h-full absolute top-0 w-2 cursor-e-resize", _vm.placement === "left" ? "-right-1" : "-left-1"],
127
- attrs: {
128
- "data-tag": "drawer-drag-bar"
129
- }
130
- }) : _vm._e(), _c("div", {
131
- class: ["flex-auto flex-col flex max-h-full"]
132
- }, [_vm.showHeader ? _c("div", {
133
- ref: "header",
134
- staticClass: "flex leading-6 p-4 text-base items-center",
135
- attrs: {
136
- "data-tag": "drawer-header"
137
- }
138
- }, [_vm._t("header", function() {
139
- return [_vm.title ? _c("div", {
140
- staticClass: "max-w-[80%] pr-4 text-left truncate"
141
- }, [_vm._v(_vm._s(_vm.title))]) : _vm._e(), _c("div", {
142
- staticClass: "flex-1 flex items-center justify-end"
143
- }, [_vm._t("header-right", function() {
144
- return [_c("IconClose", {
145
- attrs: {
146
- "custom-class": "h-5 w-5 cursor-pointer"
147
- },
148
- on: {
149
- "click": _vm.close
150
- }
151
- })];
152
- })], 2)];
153
- })], 2) : _vm._e(), _c("div", {
154
- ref: "body",
155
- staticClass: "flex-auto flex flex-col overflow-auto",
156
- attrs: {
157
- "data-tag": "drawer-body"
158
- }
159
- }, [_vm._t("default")], 2), _vm.showFooter ? _c("div", {
160
- ref: "footer",
161
- staticClass: "px-4 py-3",
162
- attrs: {
163
- "data-tag": "drawer-footer"
164
- }
165
- }, [_c("div", {
166
- staticClass: "flex-1 text-right"
167
- }, [_vm._t("footer", function() {
168
- return [_c("tiny-button", {
169
- attrs: {
170
- "tiny_mode": "mobile-first"
66
+ var _hoisted_1 = {
67
+ "data-tag": "tiny-drawer",
68
+ class: "text-sm"
69
+ };
70
+ var _hoisted_2 = {
71
+ class: /* @__PURE__ */ normalizeClass(["flex-auto flex-col flex max-h-full"])
72
+ };
73
+ var _hoisted_3 = {
74
+ key: 0,
75
+ "data-tag": "drawer-header",
76
+ ref: "header",
77
+ class: "flex leading-6 p-4 text-base items-center"
78
+ };
79
+ var _hoisted_4 = {
80
+ key: 0,
81
+ class: "max-w-[80%] pr-4 text-left truncate"
82
+ };
83
+ var _hoisted_5 = {
84
+ class: "flex-1 flex items-center justify-end"
85
+ };
86
+ var _hoisted_6 = {
87
+ "data-tag": "drawer-body",
88
+ ref: "body",
89
+ class: "flex-auto flex flex-col overflow-auto"
90
+ };
91
+ var _hoisted_7 = {
92
+ key: 1,
93
+ "data-tag": "drawer-footer",
94
+ ref: "footer",
95
+ class: "px-4 py-3"
96
+ };
97
+ var _hoisted_8 = {
98
+ class: "flex-1 text-right"
99
+ };
100
+ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
101
+ var _component_IconClose = resolveComponent("IconClose");
102
+ var _component_tiny_button = resolveComponent("tiny-button");
103
+ return withDirectives((openBlock(), createElementBlock(
104
+ "div",
105
+ _hoisted_1,
106
+ [createCommentVNode(" mask "), $props.mask ? (openBlock(), createElementBlock(
107
+ "div",
108
+ {
109
+ key: 0,
110
+ ref: "mask",
111
+ class: normalizeClass(_ctx.m("fixed z-50 inset-0 w-full h-full bg-black opacity-0 transition-opacity ease-linear duration-200", {
112
+ "opacity-30": _ctx.state.toggle
113
+ })),
114
+ onClick: _cache[0] || (_cache[0] = function($event) {
115
+ return $props.maskClosable && _ctx.close();
116
+ })
171
117
  },
172
- on: {
173
- "click": _vm.close
174
- }
175
- }, [_vm._v(_vm._s(_vm.t("ui.button.cancel")))]), _c("tiny-button", {
176
- staticClass: "ml-2",
177
- attrs: {
178
- "tiny_mode": "mobile-first",
179
- "type": "primary"
118
+ null,
119
+ 2
120
+ /* CLASS */
121
+ )) : createCommentVNode("v-if", true), createCommentVNode(" main "), createElementVNode(
122
+ "div",
123
+ {
124
+ "data-tag": "tiny-drawer-main",
125
+ ref: "drawerBox",
126
+ class: normalizeClass(_ctx.m("fixed w-full max-w-full flex flex-col bg-white z-50 shadow-sm border-color-border-separator", {
127
+ "transition-all ease-linear duration-200": !_ctx.state.dragEvent.isDrag
128
+ }, {
129
+ "h-full": ["left", "right"].includes($props.placement)
130
+ }, {
131
+ "left-0 bottom-0 translate-y-full border-t-0.5": $props.placement === "bottom"
132
+ }, {
133
+ "left-0 top-0 -translate-y-full border-b-0.5": $props.placement === "top"
134
+ }, {
135
+ "translate-y-0": ["top", "bottom"].includes($props.placement) && _ctx.state.toggle
136
+ }, {
137
+ "left-0 top-0 -translate-x-full border-r-0.5": $props.placement === "left"
138
+ }, {
139
+ "right-0 top-0 translate-x-full border-l-0.5": $props.placement === "right"
140
+ }, {
141
+ "translate-x-0": ["left", "right"].includes($props.placement) && _ctx.state.toggle
142
+ }, $props.customClass)),
143
+ style: normalizeStyle({
144
+ width: ["left", "right"].includes($props.placement) ? _ctx.state.computedWidth : null
145
+ })
180
146
  },
181
- on: {
182
- "click": _vm.confirm
183
- }
184
- }, [_vm._v(_vm._s(_vm.t("ui.button.confirm")))])];
185
- })], 2)]) : _vm._e()])])]);
186
- };
187
- var staticRenderFns = [];
188
- var __cssModules = {};
189
- var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
190
- function __vue2_injectStyles(context) {
191
- for (var o in __cssModules) {
192
- this[o] = __cssModules[o];
193
- }
147
+ [$props.dragable ? (openBlock(), createElementBlock(
148
+ "div",
149
+ {
150
+ key: 0,
151
+ "data-tag": "drawer-drag-bar",
152
+ ref: "dragBar",
153
+ class: normalizeClass(["h-full absolute top-0 w-2 cursor-e-resize", $props.placement === "left" ? "-right-1" : "-left-1"])
154
+ },
155
+ null,
156
+ 2
157
+ /* CLASS */
158
+ )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [createCommentVNode(" header "), $props.showHeader ? (openBlock(), createElementBlock(
159
+ "div",
160
+ _hoisted_3,
161
+ [renderSlot(_ctx.$slots, "header", {}, function() {
162
+ return [$props.title ? (openBlock(), createElementBlock(
163
+ "div",
164
+ _hoisted_4,
165
+ toDisplayString($props.title),
166
+ 1
167
+ /* TEXT */
168
+ )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "header-right", {}, function() {
169
+ return [createVNode(_component_IconClose, {
170
+ "custom-class": "h-5 w-5 cursor-pointer",
171
+ onClick: _ctx.close
172
+ }, null, 8, ["onClick"])];
173
+ })])];
174
+ })],
175
+ 512
176
+ /* NEED_PATCH */
177
+ )) : createCommentVNode("v-if", true), createCommentVNode(" body "), createElementVNode(
178
+ "div",
179
+ _hoisted_6,
180
+ [renderSlot(_ctx.$slots, "default")],
181
+ 512
182
+ /* NEED_PATCH */
183
+ ), createCommentVNode(" footer "), $props.showFooter ? (openBlock(), createElementBlock(
184
+ "div",
185
+ _hoisted_7,
186
+ [createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "footer", {}, function() {
187
+ return [createVNode(_component_tiny_button, {
188
+ tiny_mode: "mobile-first",
189
+ onClick: _ctx.close
190
+ }, {
191
+ default: withCtx(function() {
192
+ return [createTextVNode(
193
+ toDisplayString(_ctx.t("ui.button.cancel")),
194
+ 1
195
+ /* TEXT */
196
+ )];
197
+ }),
198
+ _: 1
199
+ /* STABLE */
200
+ }, 8, ["onClick"]), createVNode(_component_tiny_button, {
201
+ tiny_mode: "mobile-first",
202
+ class: "ml-2",
203
+ type: "primary",
204
+ onClick: _ctx.confirm
205
+ }, {
206
+ default: withCtx(function() {
207
+ return [createTextVNode(
208
+ toDisplayString(_ctx.t("ui.button.confirm")),
209
+ 1
210
+ /* TEXT */
211
+ )];
212
+ }),
213
+ _: 1
214
+ /* STABLE */
215
+ }, 8, ["onClick"])];
216
+ })])],
217
+ 512
218
+ /* NEED_PATCH */
219
+ )) : createCommentVNode("v-if", true)])],
220
+ 6
221
+ /* CLASS, STYLE */
222
+ )],
223
+ 512
224
+ /* NEED_PATCH */
225
+ )), [[vShow, $props.visible]]);
194
226
  }
195
- var mobileFirst = /* @__PURE__ */ function() {
196
- return __component__.exports;
197
- }();
227
+ var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
198
228
  export {
199
229
  mobileFirst as default
200
230
  };
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@opentiny/vue-drawer",
3
- "version": "2.8.0",
3
+ "version": "3.8.0",
4
4
  "description": "",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./lib/index.js",
7
7
  "sideEffects": false,
8
8
  "dependencies": {
9
- "@opentiny/vue-button": "~2.8.0",
10
- "@opentiny/vue-common": "~2.8.0",
9
+ "@opentiny/vue-button": "~3.8.0",
10
+ "@opentiny/vue-common": "~3.8.0",
11
11
  "@opentiny/vue-renderless": "~3.8.0"
12
12
  },
13
13
  "license": "MIT",
package/src/index.d.ts CHANGED
@@ -39,6 +39,8 @@ declare const _default: {
39
39
  tiny_theme: StringConstructor;
40
40
  tiny_chart_theme: ObjectConstructor;
41
41
  };
42
- setup(props: any, context: any): () => import("vue").VNode;
42
+ setup(props: any, context: any): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
43
+ [key: string]: any;
44
+ }>;
43
45
  };
44
46
  export default _default;
package/src/mobile-first.vue.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  declare const _sfc_main: {
2
2
  components: {
3
- TinyButton: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<() => import("vue").VNode> & import("@vue/composition-api").Data, {}, {}, {
3
+ TinyButton: import("@vue/runtime-core").DefineComponent<{
4
4
  type: {
5
5
  type: StringConstructor;
6
6
  default: string;
@@ -46,82 +46,71 @@ declare const _sfc_main: {
46
46
  tiny_renderless: FunctionConstructor;
47
47
  tiny_theme: StringConstructor;
48
48
  tiny_chart_theme: ObjectConstructor;
49
- }, {
50
- type: string;
51
- size: string;
52
- disabled: boolean;
53
- tabindex: string;
54
- round: boolean;
55
- tiny_mode_root: boolean;
56
- icon: string;
57
- text: string;
58
- plain: boolean;
59
- circle: boolean;
60
- loading: boolean;
61
- autofocus: boolean;
62
- resetTime: number;
63
- nativeType: string;
64
- buttonClass: string;
65
- } & {
66
- tiny_mode?: string | undefined;
67
- tiny_template?: unknown;
68
- tiny_renderless?: Function | undefined;
69
- tiny_theme?: string | undefined;
70
- tiny_chart_theme?: Record<string, any> | undefined;
71
- }> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
49
+ }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
50
+ [key: string]: any;
51
+ }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
52
+ type: {
53
+ type: StringConstructor;
54
+ default: string;
55
+ };
56
+ tabindex: {
57
+ type: StringConstructor;
58
+ default: string;
59
+ };
60
+ icon: {
61
+ type: (StringConstructor | ObjectConstructor)[];
62
+ default: string;
63
+ };
64
+ text: {
65
+ type: StringConstructor;
66
+ default: string;
67
+ };
68
+ resetTime: {
69
+ type: NumberConstructor;
70
+ default: number;
71
+ };
72
+ nativeType: {
73
+ type: StringConstructor;
74
+ default: string;
75
+ };
76
+ size: {
77
+ type: StringConstructor;
78
+ default: string;
79
+ validator(val: string): boolean;
80
+ };
81
+ round: BooleanConstructor;
82
+ plain: BooleanConstructor;
83
+ circle: BooleanConstructor;
84
+ loading: BooleanConstructor;
85
+ disabled: BooleanConstructor;
86
+ autofocus: BooleanConstructor;
87
+ buttonClass: {
88
+ type: StringConstructor;
89
+ default: string;
90
+ };
91
+ tiny_mode: StringConstructor;
92
+ tiny_mode_root: BooleanConstructor;
93
+ tiny_template: (FunctionConstructor | ObjectConstructor)[];
94
+ tiny_renderless: FunctionConstructor;
95
+ tiny_theme: StringConstructor;
96
+ tiny_chart_theme: ObjectConstructor;
97
+ }>>, {
72
98
  type: string;
73
99
  size: string;
74
100
  disabled: boolean;
75
101
  tabindex: string;
76
102
  round: boolean;
77
103
  tiny_mode_root: boolean;
78
- icon: string;
104
+ icon: string | Record<string, any>;
79
105
  text: string;
80
- plain: boolean;
81
- circle: boolean;
82
- loading: boolean;
83
- autofocus: boolean;
84
106
  resetTime: number;
85
107
  nativeType: string;
86
- buttonClass: string;
87
- } & {
88
- tiny_mode?: string | undefined;
89
- tiny_template?: unknown;
90
- tiny_renderless?: Function | undefined;
91
- tiny_theme?: string | undefined;
92
- tiny_chart_theme?: Record<string, any> | undefined;
93
- }, import("@vue/composition-api").ShallowUnwrapRef<() => import("vue").VNode>, import("@vue/composition-api").Data, {}, {}, {
94
- type: string;
95
- size: string;
96
- disabled: boolean;
97
- tabindex: string;
98
- round: boolean;
99
- tiny_mode_root: boolean;
100
- icon: string;
101
- text: string;
102
108
  plain: boolean;
103
109
  circle: boolean;
104
110
  loading: boolean;
105
111
  autofocus: boolean;
106
- resetTime: number;
107
- nativeType: string;
108
- buttonClass: string;
109
- } & {
110
- tiny_mode?: string | undefined;
111
- tiny_template?: unknown;
112
- tiny_renderless?: Function | undefined;
113
- tiny_theme?: string | undefined;
114
- tiny_chart_theme?: Record<string, any> | undefined;
115
- }, {
116
- type: string;
117
- size: string;
118
- tabindex: string;
119
- icon: string;
120
- text: string;
121
- resetTime: number;
122
- nativeType: string;
123
112
  buttonClass: string;
124
- }, true>);
113
+ }>;
125
114
  IconClose: any;
126
115
  };
127
116
  props: string[];