@opentinyvue/vue-cascader-select 2.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,2 @@
+import CascaderSelect from './src/index';
+export default CascaderSelect;

package/lib/index.js

@@ -0,0 +1,132 @@
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+import { $prefix, $props, $setup } from "@opentinyvue/vue-common";
+import MobileFirstTemplate from "./mobile-first.js";
+var $constants = {};
+var template = function template2() {
+  return MobileFirstTemplate;
+};
+var CascaderSelect = {
+  name: $prefix + "CascaderSelect",
+  props: _extends({}, $props, {
+    _constants: {
+      type: Object,
+      default: function _default() {
+        return $constants;
+      }
+    },
+    modelValue: {
+      type: Array,
+      default: function _default2() {
+        return [];
+      }
+    },
+    defaultValue: {
+      type: Array,
+      default: function _default3() {
+        return [];
+      }
+    },
+    options: {
+      type: Array,
+      default: function _default4() {
+        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 _default5() {
+        return {
+          text: "label",
+          value: "id",
+          children: "children"
+        };
+      }
+    },
+    visible: Boolean,
+    valueType: {
+      type: String,
+      default: "number"
+    },
+    valueField: {
+      type: String,
+      default: "id"
+    },
+    textField: {
+      type: String,
+      default: "label"
+    },
+    childrenField: {
+      type: String,
+      default: "children"
+    },
+    disabled: Function,
+    textColor: {
+      type: Object,
+      default: function _default6() {
+        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"
+    }
+  }),
+  setup: function setup(props, context) {
+    return $setup({
+      props,
+      context,
+      template
+    });
+  }
+};
+var version = "2.21.0";
+CascaderSelect.model = {
+  prop: "modelValue",
+  event: "update:modelValue"
+};
+CascaderSelect.install = function(Vue) {
+  Vue.component(CascaderSelect.name, CascaderSelect);
+};
+CascaderSelect.version = version;
+export {
+  CascaderSelect as default
+};

package/lib/mobile-first.js

@@ -0,0 +1,313 @@
+import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-renderless/cascader-select/vue';
+import { defineComponent, $prefix, $props, setup, props } from '@opentinyvue/vue-common';
+import { renderless, api } from '@opentinyvue/vue-renderless/cascader-select/column';
+import ActionSheet from '@opentinyvue/vue-action-sheet';
+import Button from '@opentinyvue/vue-button';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+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],
+    defaultValue: [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,
+    visible: Boolean,
+    textColor: {
+      type: Object,
+      default: function _default3() {
+        return {};
+      }
+    }
+  }),
+  emits: ["click", "change"],
+  setup: function setup$1(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);
+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({
+  components: {
+    PickerColumn,
+    TinyActionSheet: ActionSheet,
+    TinyButton: Button
+  },
+  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", "defaultValue"]),
+  setup: function setup2(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless: renderless$1,
+      api: api$1,
+      classes
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    attrs: {
+      "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
+    },
+    on: {
+      "update:visible": function updateVisible($event) {
+        _vm.state.actionSheetVisible = $event;
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "header-left",
+      fn: function fn() {
+        return [_vm._t("header-left")];
+      },
+      proxy: true
+    }], null, true)
+  }, [_c("div", {
+    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: {
+      "click": function click($event) {
+        $event.stopPropagation();
+      }
+    }
+  }, [_c("div", {
+    ref: "selectPanel",
+    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: 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],
+        "default-value": _vm.defaultValue[columnIndex],
+        "three-dimensional": _vm.threeDimensional,
+        "swipe-duration": _vm.swipeDuration,
+        "visible-option-num": _vm.visibleOptionNum,
+        "option-height": _vm.optionHeight,
+        "visible": _vm.state.actionSheetVisible
+      },
+      on: {
+        "change": function change(option) {
+          _vm.changeHandler(columnIndex, option);
+        }
+      }
+    })], 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", {
+    attrs: {
+      "type": "primary",
+      "size": "large",
+      "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
+    },
+    on: {
+      "click": _vm.confirm
+    }
+  }, [_vm._v(_vm._s(_vm.t("ui.button.confirm")))])], 1)])])], 1);
+};
+var staticRenderFns = [];
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var mobileFirst = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobileFirst as default };

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@opentinyvue/vue-cascader-select",
+  "version": "2.21.0",
+  "description": "",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@opentinyvue/vue-action-sheet": "~2.21.0",
+    "@opentinyvue/vue-button": "~2.21.0",
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/Column.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/index.d.ts

@@ -0,0 +1,92 @@
+declare const _default: {
+    name: string;
+    props: {
+        _constants: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        modelValue: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        defaultValue: {
+            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;
+        valueType: {
+            type: StringConstructor;
+            default: string;
+        };
+        valueField: {
+            type: StringConstructor;
+            default: string;
+        };
+        textField: {
+            type: StringConstructor;
+            default: string;
+        };
+        childrenField: {
+            type: StringConstructor;
+            default: string;
+        };
+        disabled: FunctionConstructor;
+        textColor: {
+            type: ObjectConstructor;
+            default: () => {
+                default: string;
+                first: string;
+                second: string;
+                third: string;
+                disabled: string;
+            };
+        };
+        lockScroll: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        customClass: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        panelCustomClass: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: {
+            type: StringConstructor;
+            validator: (value: any) => number;
+            default: string;
+        };
+        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;
+};
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/token.d.ts

@@ -0,0 +1,11 @@
+export declare const classes: {
+    'header-item': string;
+    'picker-column': string;
+    'picker-columnitem': string;
+    'picker-bar': string;
+    'col-list': string;
+    'col-roller': string;
+    'col-roller-item': string;
+    'col-item-tile': string;
+    'col-roller-mask': string;
+};