@opentiny/vue-cascader-select - npm Package Compare versions

Comparing version 2.13.0 to 2.14.0

lib/index.js

@@ -30,6 +30,41 @@ function _extends() {
     },
-    modelValue: Array,
-    options: Array,
+    modelValue: {
+      type: Array,
+      default: function _default2() {
+        return [];
+      }
+    },
+    options: {
+      type: Array,
+      default: function _default3() {
+        return [];
+      }
+    },
+    threeDimensional: {
+      type: Boolean,
+      default: false
+    },
+    swipeDuration: {
+      type: [Number, String],
+      default: 1e3
+    },
+    visibleOptionNum: {
+      type: [Number, String],
+      default: 5
+    },
+    optionHeight: {
+      type: [Number, String],
+      default: 36
+    },
+    fieldNames: {
+      type: Object,
+      default: function _default4() {
+        return {
+          text: "label",
+          value: "id",
+          children: "children"
+        };
+      }
+    },
     visible: Boolean,
-    cycleRoll: Boolean,
     valueType: {
@@ -47,8 +82,31 @@ type: String,
     },
+    childrenField: {
+      type: String,
+      default: "children"
+    },
     disabled: Function,
     textColor: {
       type: Object,
-      default: function _default2() {
-        return {};
+      default: function _default5() {
+        return {
+          default: "",
+          first: "",
+          second: "",
+          third: "",
+          disabled: ""
+        };
       }
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    customClass: [String, Object, Array],
+    panelCustomClass: [String, Object, Array],
+    type: {
+      type: String,
+      validator: function validator(value) {
+        return ~["cascade", "single"].indexOf(value);
+      },
+      default: "single"
     }
@@ -64,3 +122,3 @@ }),
 };
-var version = "2.13.0";
+var version = "2.14.0";
 CascaderSelect.model = {
@@ -67,0 +125,0 @@ prop: "modelValue",

lib/mobile-first.js

@@ -1,5 +0,18 @@
-import { renderless, api } from "@opentiny/vue-renderless/cascader-select/vue";
-import { defineComponent, props, setup as _setup } from "@opentiny/vue-common";
-import ActionSheet from "@opentiny/vue-action-sheet";
-import Button from "@opentiny/vue-button";
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+import { renderless as renderless$1, api as api$1 } from "@opentiny/vue-renderless/cascader-select/vue";
+import { defineComponent, $prefix, $props, setup as _setup, props } from "@opentiny/vue-common";
+import { renderless, api } from "@opentiny/vue-renderless/cascader-select/column";
 function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
@@ -59,15 +72,155 @@ var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
 
+import ActionSheet from "@opentiny/vue-action-sheet";
+import Button from "@opentiny/vue-button";
+var classes = {
+  "header-item": "cursor-pointer px-4 flex items-center justify-center min-w-[50px] h-full text-sm",
+  "picker-column": "flex relative before:content-[''] before:absolute before:top-1/2 before:h-[var(--lineHeight)] before:w-full before:border-t before:border-b before:border-color-bg-3 before:scale-90 before:-translate-y-1/2",
+  "picker-columnitem": "flex-1 h-full relative",
+  "picker-bar": "flex h-12 items-center justify-between",
+  "col-list": "relative block w-full h-full overflow-hidden text-center scrolling-touch",
+  "col-roller": "absolute block top-1/2 w-full z1 -translate-y-1/2 [transform-style:preserve-3d] h-[var(--lineHeight)]",
+  "col-roller-item": "block [backface-visibility:hidden] absolute top-0 w-full h-9 leading-9 text-color-text-primary truncate",
+  "col-item-tile": "block text-center w-full truncate",
+  "col-roller-mask": "absolute w-full h-full block [background-image:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.4)),linear-gradient(0deg,rgba(255,255,255,0.9),rgba(255,255,255,0.4))] [background-position:top,bottom] bg-no-repeat z-1"
+};
+var __vue2_script$1 = defineComponent({
+  name: $prefix + "CascaderSelectColumn",
+  props: _extends({}, $props, {
+    // 当前选中项
+    value: [String, Number],
+    columnsType: String,
+    column: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    // 是否开启3D效果
+    threeDimensional: {
+      type: Boolean,
+      default: true
+    },
+    swipeDuration: {
+      type: [Number, String],
+      default: 1e3
+    },
+    visibleOptionNum: {
+      type: [Number, String],
+      default: 7
+    },
+    optionHeight: {
+      type: [Number, String],
+      default: 36
+    },
+    fieldNames: {
+      type: Object,
+      default: function _default2() {
+        return {};
+      }
+    },
+    disabled: Boolean,
+    textColor: {
+      type: Object,
+      default: function _default3() {
+        return {};
+      }
+    }
+  }),
+  emits: ["click", "change"],
+  setup: function setup(props2, context) {
+    return _setup({
+      props: props2,
+      context,
+      renderless,
+      api,
+      classes,
+      mono: true
+    });
+  }
+});
+var render$1 = function render$12() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    class: _vm.gcls("col-list"),
+    attrs: {
+      "data-tag": "tiny-cascader-picker__list"
+    },
+    on: {
+      "touchstart": _vm.onTouchStart,
+      "touchmove": _vm.onTouchMove,
+      "touchend": _vm.onTouchEnd
+    }
+  }, [_c("div", {
+    ref: "roller",
+    class: _vm.gcls("col-roller"),
+    style: _vm.threeDimensional ? _vm.state.touchRollerStyle : _vm.state.touchTileStyle,
+    attrs: {
+      "data-tag": "tiny-cascader-picker-roller"
+    },
+    on: {
+      "transitionend": _vm.stopMomentum
+    }
+  }, _vm._l(_vm.column, function(item, index) {
+    var _vm$m, _vm$m2, _vm$m3, _vm$m4;
+    return _c("div", {
+      key: item[_vm.fieldNames.value] || index
+    }, [item && item[_vm.fieldNames.text] && _vm.threeDimensional ? _c("div", {
+      class: _vm.m(_vm.gcls("col-roller-item"), {
+        "invisible opacity-0": _vm.isHidden(index + 1)
+      }, {
+        "text-color-brand": item === _vm.column[_vm.state.currIndex - 1]
+      }, {
+        "text-color-icon-disabled": item === _vm.column[_vm.state.currIndex - 1] && _vm.disabled
+      }),
+      style: _vm.setRollerStyle(index + 1),
+      attrs: {
+        "data-tag": "tiny-cascader-picker-roller-item"
+      }
+    }, [_vm._v(" " + _vm._s(item[_vm.fieldNames.text]) + " ")]) : _vm._e(), item && item[_vm.fieldNames.text] && !_vm.threeDimensional ? _c("div", {
+      class: _vm.m(_vm.gcls("col-item-tile"), _vm.textColor.default || "text-color-text-primary", (_vm$m = {}, _vm$m[_vm.textColor.third || "text-color-icon-placeholder"] = _vm.OptionStyle(item, _vm.column, 2), _vm$m), (_vm$m2 = {}, _vm$m2[_vm.textColor.second || "text-color-icon-secondary"] = _vm.OptionStyle(item, _vm.column, 1), _vm$m2), (_vm$m3 = {}, _vm$m3[_vm.textColor.first || "text-color-icon-focus"] = _vm.OptionStyle(item, _vm.column, 0), _vm$m3), (_vm$m4 = {}, _vm$m4[_vm.textColor.disabled || "text-color-icon-disabled"] = _vm.OptionStyle(item, _vm.column, 0) && _vm.disabled, _vm$m4)),
+      style: {
+        height: _vm.pxCheck(_vm.optionHeight),
+        lineHeight: _vm.pxCheck(_vm.optionHeight)
+      },
+      attrs: {
+        "data-tag": "tiny-cascader-picker-roller-item-tile"
+      }
+    }, [_vm._v(" " + _vm._s(item[_vm.fieldNames.text]) + " ")]) : _vm._e()]);
+  }), 0), _c("div", {
+    class: _vm.gcls("col-roller-mask"),
+    style: _vm.state.maskStyles,
+    attrs: {
+      "data-tag": "tiny-cascader-picker-roller-mask"
+    }
+  })]);
+};
+var staticRenderFns$1 = [];
+var __cssModules$1 = {};
+var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1, null, null, null);
+function __vue2_injectStyles$1(context) {
+  for (var o in __cssModules$1) {
+    this[o] = __cssModules$1[o];
+  }
+}
+var PickerColumn = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}();
 var __vue2_script = defineComponent({
-  emits: ["update:modelValue", "update:visible"],
-  props: [].concat(props, ["modelValue", "options", "visible", "cycleRoll", "valueType", "valueField", "textField", "disabled", "textColor"]),
   components: {
+    PickerColumn,
     TinyActionSheet: ActionSheet,
     TinyButton: Button
   },
-  setup: function setup(props2, context) {
+  emits: ["cancel", "change", "confirm", "update:modelValue", "update:visible"],
+  props: [].concat(props, ["modelValue", "options", "threeDimensional", "swipeDuration", "visibleOptionNum", "optionHeight", "fieldNames", "visible", "valueType", "valueField", "textField", "childrenField", "disabled", "textColor", "lockScroll", "customClass", "panelCustomClass", "type"]),
+  setup: function setup2(props2, context) {
     return _setup({
       props: props2,
       context,
-      renderless,
-      api
+      renderless: renderless$1,
+      api: api$1,
+      mono: true,
+      classes
     });
@@ -80,6 +233,10 @@ }
   var _c = _vm._self._c || _h;
-  return _c("tiny-action-sheet", {
+  return _c("div", {
     attrs: {
-      "data-tag": "tiny-mobile-cascader-select",
-      "content-class": "rounded-t-lg bg-white",
+      "data-tag": "tiny-mobile-cascader-select"
+    }
+  }, [_c("tiny-action-sheet", {
+    attrs: {
+      "custom-class": _vm.m("rounded-t-lg bg-color-bg-1", _vm.customClass),
+      "lock-scroll": _vm.lockScroll,
       "visible": _vm.state.actionSheetVisible
@@ -93,3 +250,6 @@ },
   }, [_c("div", {
-    staticClass: "w-full h-max rounded-t-lg bg-white select-none overflow-hidden",
+    staticClass: "w-full h-max rounded-t-lg bg-color-bg-1 select-none overflow-hidden",
+    attrs: {
+      "data-tag": "tiny-mobile-cascader-select-body"
+    },
     on: {
@@ -102,60 +262,50 @@ "click": function click($event) {
     ref: "selectPanel",
-    class: ["w-full h-max grid", {
-      "grid-cols-1": _vm.state.selectorCount === 1
-    }, {
-      "grid-cols-2": _vm.state.selectorCount === 2
-    }, {
-      "grid-cols-3": _vm.state.selectorCount === 3
-    }]
-  }, _vm._l(_vm.state.selectorCount, function(v, i) {
+    class: _vm.m("w-full h-max grid", _vm.panelCustomClass),
+    attrs: {
+      "data-tag": "tiny-mobile-cascader-select-selectpanel"
+    }
+  }, [_c("div", {
+    staticClass: "relative text-sm",
+    attrs: {
+      "data-tag": "tiny-cascader-select-picker"
+    }
+  }, [_vm._t("top"), _c("div", {
+    class: _vm.gcls("picker-column"),
+    style: _vm.columnStyle,
+    attrs: {
+      "data-tag": "tiny-cascader-picker__column"
+    }
+  }, _vm._l(_vm.columnsList, function(column, columnIndex) {
     return _c("div", {
-      key: "s" + i,
-      staticClass: "h-40",
-      staticStyle: {
-        "transform": "translate3d(0, 0, 0)"
+      key: columnIndex,
+      class: _vm.gcls("picker-columnitem"),
+      attrs: {
+        "data-tag": "tiny-cascader-picker__columnitem"
+      }
+    }, [columnIndex > 0 ? _vm._t("split") : _vm._e(), _c("picker-column", {
+      ref: "swipeRef",
+      refInFor: true,
+      attrs: {
+        "column": column,
+        "disabled": _vm.isDisabled,
+        "text-color": _vm.textColor,
+        "columns-type": _vm.columnsType,
+        "field-names": _vm.columnFieldNames,
+        "value": _vm.defaultValues[columnIndex],
+        "three-dimensional": _vm.threeDimensional,
+        "swipe-duration": _vm.swipeDuration,
+        "visible-option-num": _vm.visibleOptionNum,
+        "option-height": _vm.optionHeight
       },
       on: {
-        "touchstart": function touchstart($event) {
-          $event.preventDefault();
-          return _vm.handleTouchstart.apply(null, arguments);
-        },
-        "touchend": function touchend($event) {
-          $event.preventDefault();
-          return (function($event2) {
-            return _vm.handleTouchend($event2, i);
-          }).apply(null, arguments);
-        },
-        "touchmove": function touchmove($event) {
-          $event.preventDefault();
-          return (function($event2) {
-            return _vm.throttledHandleTouchmove($event2, i);
-          }).apply(null, arguments);
+        "change": function change(option) {
+          _vm.changeHandler(columnIndex, option);
         }
       }
-    }, _vm._l(_vm.state["selector" + i].visibleOptions, function(option, j) {
-      var _vm$m, _vm$m2, _vm$m3, _vm$m4;
-      return _c("div", {
-        key: "s" + i + "o" + j,
-        class: _vm.m("w-full h-8 flex justify-center items-center cursor-pointer relative", {
-          "text-xs": _vm.styleOpt(option) === 2
-        }, {
-          "text-sm": _vm.styleOpt(option) === 1
-        }, {
-          "text-base": _vm.styleOpt(option) === 0
-        }, (_vm$m = {}, _vm$m[_vm.textColor.third || "text-color-icon-placeholder"] = _vm.styleOpt(option) === 2, _vm$m), (_vm$m2 = {}, _vm$m2[_vm.textColor.second || "text-color-icon-secondary"] = _vm.styleOpt(option) === 1, _vm$m2), (_vm$m3 = {}, _vm$m3[_vm.textColor.first || "text-color-icon-focus"] = _vm.styleOpt(option) === 0, _vm$m3), (_vm$m4 = {}, _vm$m4[_vm.textColor.disabled || "text-color-icon-disabled"] = _vm.statusOpt(option) === "disabled", _vm$m4)),
-        attrs: {
-          "data-tag": "tiny-mobile-cs-option",
-          "date-status": _vm.statusOpt(option),
-          "data-option": option[_vm.valueField]
-        }
-      }, [_vm._t("option", function() {
-        return [_vm._v(" " + _vm._s(option[_vm.textField]) + " ")];
-      }, null, {
-        i,
-        j,
-        option
-      })], 2);
-    }), 0);
-  }), 0), _c("div", {
-    staticClass: "w-full h-11 mt-4 flex justify-center items-center"
+    })], 2);
+  }), 0), _vm._t("default")], 2)]), _c("div", {
+    staticClass: "w-full h-11 mt-4 flex justify-center items-center",
+    attrs: {
+      "data-tag": "tiny-mobile-cascader-select-button"
+    }
   }, [_c("tiny-button", {
@@ -165,4 +315,4 @@ attrs: {
       "size": "large",
-      "button-class": _vm.m("h-10 sm:h-10 mx-4 flex justify-center items-center", _vm.state.confirmDisabled ? "bg-color-icon-disabled" : "bg-color-icon-focus"),
-      "disabled": _vm.state.confirmDisabled
+      "custom-class": _vm.m("h-10 sm:h-10 w-full sm:w-auto mx-4 sm:mx-0 flex justify-center items-center", _vm.isDisabled ? "bg-color-icon-disabled" : "bg-color-icon-focus"),
+      "disabled": _vm.isDisabled
     },
@@ -172,3 +322,3 @@ on: {
     }
-  }, [_vm._v(" " + _vm._s(_vm.t("ui.button.confirm")) + " ")])], 1)])]);
+  }, [_vm._v(_vm._s(_vm.t("ui.button.confirm")))])], 1)])])], 1);
 };
@@ -175,0 +325,0 @@ var staticRenderFns = [];

package.json

 {
   "name": "@opentiny/vue-cascader-select",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "",
@@ -10,7 +10,7 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-action-sheet": "~2.13.0",
-    "@opentiny/vue-button": "~2.13.0",
-    "@opentiny/vue-common": "~2.13.0",
-    "@opentiny/vue-icon": "~2.13.0",
-    "@opentiny/vue-renderless": "~3.13.0"
+    "@opentiny/vue-action-sheet": "~2.14.0",
+    "@opentiny/vue-button": "~2.14.0",
+    "@opentiny/vue-common": "~2.14.0",
+    "@opentiny/vue-icon": "~2.14.0",
+    "@opentiny/vue-renderless": "~3.14.0"
   },
@@ -17,0 +17,0 @@ "license": "MIT",

src/index.d.ts

@@ -8,6 +8,35 @@ declare const _default: {
         };
-        modelValue: ArrayConstructor;
-        options: ArrayConstructor;
+        modelValue: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        options: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        threeDimensional: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        swipeDuration: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        visibleOptionNum: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        optionHeight: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        fieldNames: {
+            type: ObjectConstructor;
+            default: () => {
+                text: string;
+                value: string;
+                children: string;
+            };
+        };
         visible: BooleanConstructor;
-        cycleRoll: BooleanConstructor;
         valueType: {
@@ -25,7 +54,28 @@ type: StringConstructor;
         };
+        childrenField: {
+            type: StringConstructor;
+            default: string;
+        };
         disabled: FunctionConstructor;
         textColor: {
             type: ObjectConstructor;
-            default: () => {};
+            default: () => {
+                default: string;
+                first: string;
+                second: string;
+                third: string;
+                disabled: string;
+            };
         };
+        lockScroll: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        customClass: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        panelCustomClass: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        type: {
+            type: StringConstructor;
+            validator: (value: any) => number;
+            default: string;
+        };
         tiny_mode: StringConstructor;
@@ -32,0 +82,0 @@ tiny_mode_root: BooleanConstructor;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

19200

increased by10.34%

Lines of code

570

increased by18.01%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@opentiny/vue-action-sheet@2.14.0(transitive)

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

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

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

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

• + Added@opentiny/vue-locale@2.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@2.14.0(transitive)

• + Added@vue/composition-api@1.7.2(transitive)

• + Addedvue@2.6.14(transitive)

• - Removed@babel/helper-string-parser@7.25.7(transitive)

• - Removed@babel/helper-validator-identifier@7.25.7(transitive)

• - Removed@babel/parser@7.25.7(transitive)

• - Removed@babel/types@7.25.7(transitive)

• - Removed@opentiny/vue-action-sheet@2.13.0(transitive)

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

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

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

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

• - Removed@opentiny/vue-locale@2.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)

• - Removed@vue/compiler-sfc@2.7.16(transitive)

• - Removed@vue/composition-api@1.2.4(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removednanoid@3.3.7(transitive)

• - Removedpicocolors@1.1.0(transitive)

• - Removedpostcss@8.4.47(transitive)

• - Removedprettier@2.8.8(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedto-fast-properties@2.0.0(transitive)

• - Removedtslib@2.7.0(transitive)

• - Removedvue@2.7.16(transitive)

• Updated@opentiny/vue-action-sheet@~2.14.0

• Updated@opentiny/vue-button@~2.14.0

• Updated@opentiny/vue-common@~2.14.0

• Updated@opentiny/vue-icon@~2.14.0

• Updated@opentiny/vue-renderless@~3.14.0