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

Comparing version 3.12.0 to 3.13.0-alpha.0

lib/index.js

@@ -15,10 +15,12 @@ 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";
 import MobileFirstTemplate from "./mobile-first.js";
 var template = function template2(mode) {
-  if ("mobile" === (process.env.TINY_MODE || mode)) {
+  var _process$env;
+  var tinyMode = typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
+  if ("mobile" === (tinyMode || mode)) {
     return MobileTemplate;
   }
-  if ("mobile-first" === (process.env.TINY_MODE || mode)) {
+  if ("mobile-first" === (tinyMode || mode)) {
     return MobileFirstTemplate;
@@ -28,66 +30,88 @@ }
 };
+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) {
@@ -101,3 +125,3 @@ return $setup({
 });
-var version = "3.12.0";
+var version = "3.13.0-alpha.0";
 ActionSheet.model = {
@@ -104,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.12.0",
+  "version": "3.13.0-alpha.0",
   "description": "",
@@ -10,6 +10,6 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-common": "~3.12.0",
-    "@opentiny/vue-drawer": "~3.12.0",
-    "@opentiny/vue-icon": "~3.12.0",
-    "@opentiny/vue-renderless": "~3.12.0",
+    "@opentiny/vue-common": "~3.13.0-alpha.0",
+    "@opentiny/vue-drawer": "~3.13.0-alpha.0",
+    "@opentiny/vue-icon": "~3.13.0-alpha.0",
+    "@opentiny/vue-renderless": "~3.13.0-alpha.0",
     "@better-scroll/core": "2.5.0"
@@ -16,0 +16,0 @@ },

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

License quality

100

increased by25%

Number of low supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

19056

decreased by-27.75%

Number of package files

5

decreased by-44.44%

Lines of code

539

decreased by-31.34%

Number of low quality alerts

2

increased by100%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@opentiny/vue-common@~3.13.0-alpha.0

• Updated@opentiny/vue-drawer@~3.13.0-alpha.0

• Updated@opentiny/vue-icon@~3.13.0-alpha.0

• Updated@opentiny/vue-renderless@~3.13.0-alpha.0