@opentiny/vue-drawer 2.14.0 → 2.16.0

package/lib/index.js

@@ -12,7 +12,7 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-import { $prefix, $setup, $props } from "@opentiny/vue-common";
+import { defineComponent, $prefix, $setup, $props } from "@opentiny/vue-common";
 import PcTemplate from "./pc.js";
 import MobileFirstTemplate from "./mobile-first.js";
 var template = function template2(mode) {
@@ -92,7 +92,7 @@ var drawerProps = _extends({}, $props, {
   beforeClose: Function,
   tipsProps: Object
 });
-var Drawer = {
+var Drawer = defineComponent({
   name: $prefix + "Drawer",
   props: drawerProps,
   setup: function setup(props, context) {
@@ -102,8 +102,8 @@ var Drawer = {
       template
     });
   }
-};
-var version = "2.14.0";
+});
+var version = "2.16.0";
 Drawer.model = {
   prop: "modelValue",
   event: "update:modelValue"

package/lib/mobile-first.js

@@ -1,7 +1,8 @@
-import { renderless, api } from "@opentiny/vue-renderless/drawer/vue";
-import { props, setup as _setup } from "@opentiny/vue-common";
-import { IconClose } from "@opentiny/vue-icon";
-import Button from "@opentiny/vue-button";
+import { renderless, api } from '@opentiny/vue-renderless/drawer/vue';
+import { defineComponent, props, setup } from '@opentiny/vue-common';
+import { IconClose } from '@opentiny/vue-icon';
+import Button from '@opentiny/vue-button';
+
 function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
   var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
   if (render) {
@@ -56,21 +57,21 @@ function normalizeComponent(scriptExports, render, staticRenderFns, functionalTe
   };
 }
 
-var __vue2_script = {
+var __vue2_script = defineComponent({
   components: {
     TinyButton: Button,
     IconClose: IconClose()
   },
   props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "beforeClose"]),
-  setup: function setup(props2, context) {
-    return _setup({
+  setup: function setup$1(props2, context) {
+    return setup({
       props: props2,
       context,
       renderless,
       api
     });
   }
-};
+});
 var render = function render2() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -118,14 +119,15 @@ var render = function render2() {
       "translate-x-0": ["left", "right"].includes(_vm.placement) && _vm.state.toggle
     }, _vm.customClass),
     style: {
-      width: ["left", "right"].includes(_vm.placement) ? _vm.state.computedWidth : null
+      width: ["left", "right"].includes(_vm.placement) ? _vm.state.computedWidth : null,
+      height: ["top", "bottom"].includes(_vm.placement) && _vm.dragable && _vm.state.height ? _vm.state.height + "px" : null
     },
     attrs: {
       "data-tag": "tiny-drawer-main"
     }
   }, [_vm.dragable ? _c("div", {
     ref: "dragBar",
-    class: ["h-full absolute top-0 w-2 cursor-e-resize", _vm.placement === "left" ? "-right-1" : "-left-1"],
+    class: ["absolute", ["left", "right"].includes(_vm.placement) && "cursor-e-resize h-full top-0 w-2", ["top", "bottom"].includes(_vm.placement) && "cursor-n-resize w-full h-2 left-0", _vm.placement === "left" && "-right-1", _vm.placement === "right" && "-left-1", _vm.placement === "top" && "-bottom-1", _vm.placement === "bottom" && "-top-1"],
     attrs: {
       "data-tag": "drawer-drag-bar"
     }
@@ -139,11 +141,12 @@ var render = function render2() {
     }
   }, [_vm._t("header", function() {
     return [_vm.title ? _c("div", {
-      staticClass: "max-w-[80%] pr-4 text-left truncate"
+      staticClass: "max-w-[80%] pr-4 text-left truncate text-color-text-primary"
     }, [_vm._v(_vm._s(_vm.title))]) : _vm._e(), _c("div", {
       staticClass: "flex-1 flex items-center justify-end"
     }, [_vm._t("header-right", function() {
       return [_c("IconClose", {
+        staticClass: "fill-color-icon-primary",
         attrs: {
           "custom-class": "h-5 w-5 cursor-pointer"
         },
@@ -205,6 +208,5 @@ function __vue2_injectStyles(context) {
 var mobileFirst = /* @__PURE__ */ function() {
   return __component__.exports;
 }();
-export {
-  mobileFirst as default
-};
+
+export { mobileFirst as default };

package/lib/pc.js

@@ -1,9 +1,10 @@
-import { renderless, api } from "@opentiny/vue-renderless/drawer/vue";
-import { props, setup as _setup } from "@opentiny/vue-common";
-import "@opentiny/vue-theme/drawer/index.css";
-import { iconClose, iconHelpCircle } from "@opentiny/vue-icon";
-import Button from "@opentiny/vue-button";
-import Tooltip from "@opentiny/vue-tooltip";
+import { renderless, api } from '@opentiny/vue-renderless/drawer/vue';
+import { defineComponent, props, setup } from '@opentiny/vue-common';
+import '@opentiny/vue-theme/drawer/index.css';
+import { iconClose, iconHelpCircle } from '@opentiny/vue-icon';
+import Button from '@opentiny/vue-button';
+import Tooltip from '@opentiny/vue-tooltip';
+
 function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
   var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
   if (render) {
@@ -58,7 +59,7 @@ function normalizeComponent(scriptExports, render, staticRenderFns, functionalTe
   };
 }
 
-var __vue2_script = {
+var __vue2_script = defineComponent({
   components: {
     TinyButton: Button,
     TinyTooltip: Tooltip,
@@ -66,15 +67,15 @@ var __vue2_script = {
     IconHelpCircle: iconHelpCircle()
   },
   props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex", "beforeClose", "tipsProps"]),
-  setup: function setup(props2, context) {
-    return _setup({
+  setup: function setup$1(props2, context) {
+    return setup({
       props: props2,
       context,
       renderless,
       api
     });
   }
-};
+});
 var render = function render2() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -123,6 +124,7 @@ var render = function render2() {
     }, "tiny-drawer-main", _vm.customClass],
     style: {
       width: ["left", "right"].includes(_vm.placement) ? _vm.state.computedWidth : null,
+      height: ["top", "bottom"].includes(_vm.placement) && _vm.dragable && _vm.state.height ? _vm.state.height + "px" : null,
       zIndex: _vm.zIndex
     },
     attrs: {
@@ -130,7 +132,7 @@ var render = function render2() {
     }
   }, [_vm.dragable ? _c("div", {
     ref: "dragBar",
-    class: ["tiny-drawer__drag-bar"],
+    class: ["tiny-drawer__drag-bar", ["left", "right"].includes(_vm.placement) && "p-left-Right", ["top", "bottom"].includes(_vm.placement) && "p-top-Bottom", _vm.placement === "left" && "p-left", _vm.placement === "right" && "p-right", _vm.placement === "top" && "p-top", _vm.placement === "bottom" && "p-bottom"],
     attrs: {
       "data-tag": "drawer-drag-bar"
     }
@@ -220,6 +222,5 @@ function __vue2_injectStyles(context) {
 var pc = /* @__PURE__ */ function() {
   return __component__.exports;
 }();
-export {
-  pc as default
-};
+
+export { pc as default };

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@opentiny/vue-drawer",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "description": "",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "sideEffects": false,
   "type": "module",
   "dependencies": {
-    "@opentiny/vue-button": "~2.14.0",
-    "@opentiny/vue-tooltip": "~2.14.0",
-    "@opentiny/vue-common": "~2.14.0",
-    "@opentiny/vue-renderless": "~3.14.0",
-    "@opentiny/vue-icon": "~2.14.0",
-    "@opentiny/vue-theme": "~3.14.0"
+    "@opentiny/vue-button": "~2.16.0",
+    "@opentiny/vue-tooltip": "~2.16.0",
+    "@opentiny/vue-common": "~2.16.0",
+    "@opentiny/vue-renderless": "~3.16.0",
+    "@opentiny/vue-icon": "~2.16.0",
+    "@opentiny/vue-theme": "~3.16.0"
   },
   "license": "MIT",
   "types": "index.d.ts"

package/src/index.d.ts

@@ -10,7 +10,7 @@ export declare const drawerProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    customClass: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+    customClass: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
     placement: {
         type: StringConstructor;
         default: string;
@@ -61,71 +61,5 @@ export declare const drawerProps: {
     tiny_theme: StringConstructor;
     tiny_chart_theme: ObjectConstructor;
 };
-declare const _default: {
-    name: string;
-    props: {
-        _constants: {
-            type: ObjectConstructor;
-            default: () => {
-                SCROLL_LOCK_CLASS(mode: string): string;
-                DEFAULT_WIDTH: string;
-            };
-        };
-        visible: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        customClass: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
-        placement: {
-            type: StringConstructor;
-            default: string;
-        };
-        width: {
-            type: StringConstructor;
-        };
-        title: StringConstructor;
-        showClose: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showHeader: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showFooter: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        mask: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        maskClosable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        dragable: BooleanConstructor;
-        lockScroll: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        flex: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        zIndex: {
-            type: NumberConstructor;
-            default: number;
-        };
-        beforeClose: FunctionConstructor;
-        tipsProps: ObjectConstructor;
-        tiny_mode: StringConstructor;
-        tiny_mode_root: BooleanConstructor;
-        tiny_template: (ObjectConstructor | FunctionConstructor)[];
-        tiny_renderless: FunctionConstructor;
-        tiny_theme: StringConstructor;
-        tiny_chart_theme: ObjectConstructor;
-    };
-    setup(props: any, context: any): () => any;
-};
+declare const _default: any;
 export default _default;

package/src/mobile-first.vue.d.ts

@@ -1,2 +1,2 @@
-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" | "lockScroll" | "flex" | "beforeClose" | "placement" | "dragable", any>>;
+declare const _default: any;
 export default _default;

package/src/pc.vue.d.ts

@@ -1,2 +1,2 @@
-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" | "showClose" | "customClass" | "maskClosable" | "lockScroll" | "flex" | "beforeClose" | "placement" | "zIndex" | "dragable" | "tipsProps", any>>;
+declare const _default: any;
 export default _default;