@opentiny/vue-action-sheet - npm Package Compare versions

Comparing version 3.13.0 to 3.14.0

lib/index.js

@@ -15,3 +15,3 @@ function _extends() {
 }
-import { defineComponent, $prefix, $props, $setup } from "@opentiny/vue-common";
+import { defineComponent, $prefix, $setup, $props } from "@opentiny/vue-common";
 import MobileTemplate from "./mobile.js";
@@ -30,66 +30,88 @@ import MobileFirstTemplate from "./mobile-first.js";
 };
+var actionSheetProps = _extends({}, $props, {
+  menus: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  modelValue: [Number, String, Array],
+  beforeClose: Function,
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  ellipsis: {
+    type: Boolean,
+    default: false
+  },
+  height: {
+    type: String,
+    default: "100%"
+  },
+  valueField: {
+    type: String,
+    default: "id"
+  },
+  textField: {
+    type: String,
+    default: "label"
+  },
+  title: String,
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  showFooter: {
+    type: Boolean,
+    default: false
+  },
+  showClose: {
+    type: Boolean,
+    default: function _default2() {
+      return true;
+    }
+  },
+  fullscreen: {
+    type: Boolean,
+    default: function _default3() {
+      return false;
+    }
+  },
+  customClass: [String, Object, Array],
+  contentClass: String,
+  type: {
+    type: String,
+    default: "normal"
+  },
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  maskClosable: {
+    type: Boolean,
+    default: true
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  flex: {
+    type: Boolean,
+    default: true
+  },
+  contentPosition: {
+    type: Boolean,
+    default: false
+  },
+  contentStyle: {
+    type: Object,
+    default: function _default4() {
+      return {};
+    }
+  }
+});
 var ActionSheet = defineComponent({
   name: $prefix + "ActionSheet",
-  props: _extends({}, $props, {
-    menus: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    },
-    modelValue: [Number, String, Array],
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    ellipsis: {
-      type: Boolean,
-      default: false
-    },
-    height: {
-      type: String,
-      default: "100%"
-    },
-    valueField: {
-      type: String,
-      default: "id"
-    },
-    textField: {
-      type: String,
-      default: "label"
-    },
-    title: String,
-    showHeader: {
-      type: Boolean,
-      default: true
-    },
-    showFooter: {
-      type: Boolean,
-      default: false
-    },
-    customClass: [String, Object, Array],
-    contentClass: String,
-    type: {
-      type: String,
-      default: "normal"
-    },
-    mask: {
-      type: Boolean,
-      default: true
-    },
-    maskClosable: {
-      type: Boolean,
-      default: true
-    },
-    contentPosition: {
-      type: Boolean,
-      default: false
-    },
-    contentStyle: {
-      type: Object,
-      default: function _default2() {
-        return {};
-      }
-    }
-  }),
+  props: actionSheetProps,
   setup: function setup(props, context) {
@@ -103,3 +125,3 @@ return $setup({
 });
-var version = "3.13.0";
+var version = "3.14.0";
 ActionSheet.model = {
@@ -106,0 +128,0 @@ prop: "modelValue",

lib/mobile-first.js

@@ -7,3 +7,3 @@ import { renderless, api } from "@opentiny/vue-renderless/action-sheet/vue";
 import BScroll from "@better-scroll/core";
-import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, renderSlot, toDisplayString, createCommentVNode, Fragment, renderList, withModifiers, createTextVNode } from "vue";
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, renderSlot, toDisplayString, createBlock, createCommentVNode, normalizeClass, Fragment, renderList, withModifiers, createTextVNode } from "vue";
 function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
@@ -60,3 +60,4 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   },
-  props: [].concat(props, ["modelValue", "visible", "title", "showHeader", "showFooter", "customClass", "menus", "type", "mask", "maskClosable"]),
+  emits: ["update:modelValue", "update:visible", "hide", "close", "click"],
+  props: [].concat(props, ["modelValue", "visible", "title", "showHeader", "showFooter", "showClose", "fullscreen", "customClass", "menus", "type", "mask", "maskClosable", "lockScroll", "flex", "beforeClose"]),
   setup: function setup(props2, context) {
@@ -82,3 +83,3 @@ return _setup({
   ref: "header",
-  class: "flex leading-6 pb-4 px-4 text-base items-center"
+  class: "flex flex-none leading-6 pb-4 px-4 text-base items-center"
 };
@@ -89,3 +90,3 @@ var _hoisted_3 = {
 var _hoisted_4 = {
-  class: "min-w-[50%] max-w-[80%] px-4 text-center truncate"
+  class: "min-w-[50%] max-w-[80%] px-4 text-center truncate font-bold"
 };
@@ -96,7 +97,2 @@ var _hoisted_5 = {
 var _hoisted_6 = {
-  "data-tag": "action-sheet-body",
-  ref: "body",
-  class: "flex-auto overflow-auto"
-};
-var _hoisted_7 = {
   key: 0,
@@ -106,3 +102,3 @@ "data-tag": "action-box",
 };
-var _hoisted_8 = {
+var _hoisted_7 = {
   key: 0,
@@ -112,20 +108,20 @@ "data-tag": "action-title",
 };
-var _hoisted_9 = {
+var _hoisted_8 = {
   class: "px-4"
 };
-var _hoisted_10 = {
-  class: "flex-auto min-h-[3.5rem]"
+var _hoisted_9 = {
+  class: "flex-auto min-h-[theme(spacing.12)]"
 };
-var _hoisted_11 = ["onClick"];
-var _hoisted_12 = {
+var _hoisted_10 = ["onClick"];
+var _hoisted_11 = {
   class: "truncate px-4"
 };
-var _hoisted_13 = {
+var _hoisted_12 = {
   key: 1,
   "data-tag": "action-sheet-footer",
   ref: "footer",
-  class: "flex px-3 pt-2 justify-center"
+  class: "flex flex-none pt-2 justify-center"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_IconClose = resolveComponent("IconClose");
+  var _component_icon_close = resolveComponent("icon-close");
   var _component_tiny_button = resolveComponent("tiny-button");
@@ -137,7 +133,14 @@ var _component_tiny_drawer = resolveComponent("tiny-drawer");
     mask: _ctx.mask,
+    flex: "",
+    "before-close": _ctx.beforeClose,
     "mask-closable": _ctx.maskClosable,
+    "lock-scroll": _ctx.lockScroll,
     "show-header": false,
-    "custom-class": _ctx.m("max-h-[95%] rounded-t-lg", {
-      "min-h-[15.625rem]": _ctx.type !== "action"
+    "custom-class": _ctx.m("rounded-t-lg", {
+      "h-full": _ctx.fullscreen
     }, {
+      "max-h-[90%]": !_ctx.fullscreen
+    }, {
+      "min-h-[theme(spacing.64)]": _ctx.type !== "action"
+    }, {
       "py-4": _ctx.showHeader && _ctx.type !== "action"
@@ -162,19 +165,26 @@ }, _ctx.customClass),
         ), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "header-right", {}, function() {
-          return [createVNode(_component_IconClose, {
+          return [_ctx.showClose ? (openBlock(), createBlock(_component_icon_close, {
+            key: 0,
             "custom-class": "h-5 w-5 cursor-pointer",
             onClick: _ctx.close
-          }, null, 8, ["onClick"])];
+          }, null, 8, ["onClick"])) : createCommentVNode("v-if", true)];
         })])],
         512
         /* NEED_PATCH */
-      )) : createCommentVNode("v-if", true), createElementVNode(
+      )) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "body-top"), createElementVNode(
         "div",
-        _hoisted_6,
-        [_ctx.type === "action" ? (openBlock(), createElementBlock("div", _hoisted_7, [_ctx.title ? (openBlock(), createElementBlock("div", _hoisted_8, [createElementVNode(
+        {
+          "data-tag": "action-sheet-body",
+          ref: "body",
+          class: normalizeClass(["flex-auto overflow-auto scrollbar-size-0", {
+            "flex flex-col": _ctx.flex
+          }])
+        },
+        [_ctx.type === "action" ? (openBlock(), createElementBlock("div", _hoisted_6, [_ctx.title ? (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode(
           "span",
-          _hoisted_9,
+          _hoisted_8,
           toDisplayString(_ctx.title),
           1
           /* TEXT */
-        )])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_10, [(openBlock(true), createElementBlock(
+        )])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_9, [(openBlock(true), createElementBlock(
           Fragment,
@@ -185,3 +195,3 @@ null,
               key: index,
-              class: "flex-none flex items-center justify-center h-14 text-base border-b-0.5 border-color-bg-2 cursor-pointer",
+              class: "flex-none flex items-center justify-center h-12 text-base border-b-0.5 border-color-bg-2 cursor-pointer",
               onClick: withModifiers(function($event) {
@@ -196,3 +206,3 @@ return _ctx.actionSelectOption(item, index);
                 "span",
-                _hoisted_12,
+                _hoisted_11,
                 toDisplayString(item),
@@ -202,3 +212,3 @@ 1
               )];
-            })], 8, _hoisted_11);
+            })], 8, _hoisted_10);
           }),
@@ -221,11 +231,13 @@ 128
         })],
-        512
-        /* NEED_PATCH */
-      ), _ctx.showFooter ? (openBlock(), createElementBlock(
+        2
+        /* CLASS */
+      ), renderSlot(_ctx.$slots, "body-bottom"), _ctx.showFooter ? (openBlock(), createElementBlock(
         "div",
-        _hoisted_13,
-        [renderSlot(_ctx.$slots, "footer", {}, function() {
+        _hoisted_12,
+        [renderSlot(_ctx.$slots, "footer", {
+          beforeClose: _ctx.beforeClose
+        }, function() {
           return [createVNode(_component_tiny_button, {
             tiny_mode: "mobile-first",
-            class: "flex-1",
+            class: "flex-1 mx-4 sm:mx-0",
             type: "primary",
@@ -251,3 +263,3 @@ onClick: _ctx.confirm
     /* FORWARDED */
-  }, 8, ["title", "mask", "mask-closable", "custom-class", "visible"])]);
+  }, 8, ["title", "mask", "before-close", "mask-closable", "lock-scroll", "custom-class", "visible"])]);
 }
@@ -254,0 +266,0 @@ var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

lib/mobile.js

@@ -53,3 +53,3 @@ import { renderless, api } from "@opentiny/vue-renderless/action-sheet/vue";
   name: $prefix + "ActionSheet",
-  props: [].concat(props, ["menus", "modelValue", "visible", "ellipsis", "height", "contentPosition", "contentStyle"]),
+  props: [].concat(props, ["menus", "modelValue", "visible", "ellipsis", "contentPosition", "contentStyle", "height", "valueField", "textField", "contentClass"]),
   setup: function setup(props2, context) {
@@ -78,3 +78,3 @@ return _setup({
       onClick: _cache[1] || (_cache[1] = function() {
-        return _ctx.visibleHandle && _ctx.visibleHandle.apply(_ctx, arguments);
+        return _ctx.hide && _ctx.hide.apply(_ctx, arguments);
       })
@@ -109,7 +109,7 @@ },
             return openBlock(), createElementBlock("div", {
-              class: normalizeClass(["tiny-mobile-action-sheet__item", item.warn ? "is-warn" : "", item.id === _ctx.modelValue || item.id === _ctx.state.active ? "is-active" : ""]),
+              class: normalizeClass(["tiny-mobile-action-sheet__item", item.warn ? "is-warn" : "", item[_ctx.valueField] === _ctx.modelValue ? "is-active" : ""]),
               style: normalizeStyle(_ctx.state.contentStyle),
               key: index,
               onClick: function onClick($event) {
-                return _ctx.menuHandle(item, index);
+                return _ctx.selectOption(item, index);
               }
@@ -120,3 +120,3 @@ }, [renderSlot(_ctx.$slots, "item", {
               return [createTextVNode(
-                toDisplayString(item.label),
+                toDisplayString(item[_ctx.textField]),
                 1
@@ -141,3 +141,3 @@ /* TEXT */
           onClick: _cache[0] || (_cache[0] = function() {
-            return _ctx.visibleHandle && _ctx.visibleHandle.apply(_ctx, arguments);
+            return _ctx.hide && _ctx.hide.apply(_ctx, arguments);
           })
@@ -144,0 +144,0 @@ },

package.json

 {
   "name": "@opentiny/vue-action-sheet",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "",
@@ -10,7 +10,9 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-common": "~3.13.0",
-    "@opentiny/vue-drawer": "~3.13.0",
-    "@opentiny/vue-icon": "~3.13.0",
-    "@opentiny/vue-renderless": "~3.13.0",
-    "@better-scroll/core": "2.5.0"
+    "@opentiny/vue-common": "~3.14.0",
+    "@opentiny/vue-drawer": "~3.14.0",
+    "@opentiny/vue-icon": "~3.14.0",
+    "@opentiny/vue-renderless": "~3.14.0",
+    "@better-scroll/core": "2.5.0",
+    "@opentiny/vue-button": "~3.14.0",
+    "@opentiny/vue-theme-mobile": "~3.14.0"
   },
@@ -17,0 +19,0 @@ "license": "MIT",

src/index.d.ts

@@ -0,1 +1,82 @@
+export declare const actionSheetProps: {
+    menus: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    modelValue: (StringConstructor | ArrayConstructor | NumberConstructor)[];
+    beforeClose: FunctionConstructor;
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueField: {
+        type: StringConstructor;
+        default: string;
+    };
+    textField: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: StringConstructor;
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClose: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    customClass: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+    contentClass: StringConstructor;
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lockScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flex: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    contentPosition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    contentStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
 declare const _default: import("@vue/runtime-core").DefineComponent<{
@@ -7,2 +88,3 @@ menus: {
     modelValue: (StringConstructor | ArrayConstructor | NumberConstructor)[];
+    beforeClose: FunctionConstructor;
     visible: {
@@ -37,2 +119,10 @@ type: BooleanConstructor;
     };
+    showClose: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
     customClass: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
@@ -52,2 +142,10 @@ contentClass: StringConstructor;
     };
+    lockScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flex: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     contentPosition: {
@@ -75,2 +173,3 @@ type: BooleanConstructor;
     modelValue: (StringConstructor | ArrayConstructor | NumberConstructor)[];
+    beforeClose: FunctionConstructor;
     visible: {
@@ -105,2 +204,10 @@ type: BooleanConstructor;
     };
+    showClose: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
     customClass: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
@@ -120,2 +227,10 @@ contentClass: StringConstructor;
     };
+    lockScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flex: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     contentPosition: {
@@ -149,4 +264,8 @@ type: BooleanConstructor;
     showFooter: boolean;
+    showClose: boolean;
+    fullscreen: boolean;
     maskClosable: boolean;
+    lockScroll: boolean;
+    flex: boolean;
 }, {}>;
 export default _default;

src/mobile-first.vue.d.ts

@@ -18,3 +18,8 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     showFooter?: any;
+    showClose?: any;
+    fullscreen?: any;
     maskClosable?: any;
+    lockScroll?: any;
+    flex?: any;
+    beforeClose?: any;
 }>, {
@@ -28,3 +33,3 @@ t: (this: any, path: any, options?: any) => any;
     gcls: (key: any) => any;
-}, 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<Readonly<{
+}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("update:modelValue" | "update:visible" | "close" | "click" | "hide")[], "update:modelValue" | "update:visible" | "close" | "click" | "hide", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
     type?: any;
@@ -46,4 +51,15 @@ title?: any;
     showFooter?: any;
+    showClose?: any;
+    fullscreen?: any;
     maskClosable?: any;
-}>>>, {
+    lockScroll?: any;
+    flex?: any;
+    beforeClose?: any;
+}>>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
+}, {
     readonly type?: any;
@@ -65,4 +81,9 @@ readonly title?: any;
     readonly showFooter?: any;
+    readonly showClose?: any;
+    readonly fullscreen?: any;
     readonly maskClosable?: any;
+    readonly lockScroll?: any;
+    readonly flex?: any;
+    readonly beforeClose?: any;
 }, {}>;
 export default _default;

src/mobile.vue.d.ts

@@ -12,2 +12,4 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     modelValue?: any;
+    textField?: any;
+    valueField?: any;
     menus?: any;
@@ -17,2 +19,3 @@ visible?: any;
     contentStyle?: any;
+    contentClass?: any;
 }>, {
@@ -37,2 +40,4 @@ t: (this: any, path: any, options?: any) => any;
     modelValue?: any;
+    textField?: any;
+    valueField?: any;
     menus?: any;
@@ -42,2 +47,3 @@ visible?: any;
     contentStyle?: any;
+    contentClass?: any;
 }>>>, {
@@ -54,2 +60,4 @@ readonly ellipsis?: any;
     readonly modelValue?: any;
+    readonly textField?: any;
+    readonly valueField?: any;
     readonly menus?: any;
@@ -59,3 +67,4 @@ readonly visible?: any;
     readonly contentStyle?: any;
+    readonly contentClass?: any;
 }, {}>;
 export default _default;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31333

increased by18.62%

Lines of code

968

increased by23.31%

Worsened metrics

Dependency count

7

increased by40%

Dependency changes

• + Added@opentiny/vue-button@~3.14.0

• + Added@opentiny/vue-theme-mobile@~3.14.0

• + Added@opentiny/vue-button@3.14.0(transitive)

• + Added@opentiny/vue-common@3.14.0(transitive)

• + Added@opentiny/vue-drawer@3.14.0(transitive)

• + Added@opentiny/vue-icon@3.14.0(transitive)

• + Added@opentiny/vue-locale@3.14.0(transitive)

• + Added@opentiny/vue-renderless@3.14.1(transitive)

• + Added@opentiny/vue-theme@3.14.1(transitive)

• + Added@opentiny/vue-theme-mobile@3.14.2(transitive)

• + Added@opentiny/vue-tooltip@3.14.0(transitive)

• - Removed@opentiny/vue-button@3.13.0(transitive)

• - Removed@opentiny/vue-common@3.13.1(transitive)

• - Removed@opentiny/vue-drawer@3.13.0(transitive)

• - Removed@opentiny/vue-icon@3.13.0(transitive)

• - Removed@opentiny/vue-locale@3.13.0(transitive)

• - Removed@opentiny/vue-renderless@3.13.2(transitive)

• - Removed@opentiny/vue-theme@3.13.3(transitive)

• - Removed@opentiny/vue-theme-mobile@3.13.0(transitive)

• Updated@opentiny/vue-common@~3.14.0

• Updated@opentiny/vue-drawer@~3.14.0

• Updated@opentiny/vue-icon@~3.14.0

• Updated@opentiny/vue-renderless@~3.14.0