@opentinyvue/vue-cascader 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,13 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Cascader from './src/index';
+export default Cascader;

package/lib/index.js

@@ -0,0 +1,146 @@
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t2 = arguments[e];
+      for (var r in t2) ({}).hasOwnProperty.call(t2, r) && (n[r] = t2[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+import { defineComponent, $prefix, $setup, $props } from "@opentinyvue/vue-common";
+import PcTemplate from "./pc.js";
+import MobileFirstTemplate from "./mobile-first.js";
+import { t } from "@opentinyvue/vue-locale";
+var template = function template2(mode) {
+  var _process$env;
+  var tinyMode = typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
+  if ("pc" === (tinyMode || mode)) {
+    return PcTemplate;
+  }
+  if ("mobile-first" === (tinyMode || mode)) {
+    return MobileFirstTemplate;
+  }
+  return PcTemplate;
+};
+var $constants = {
+  placeholder: "ui.cascader.placeholder",
+  COMPONENT_NAME: {
+    FormItem: "FormItem"
+  },
+  EVENT_NAME: {
+    FormBlur: "form.blur",
+    FormChange: "form.change"
+  },
+  defaultNodeConfig: {
+    lazy: false,
+    load: null,
+    isLeaf: "leaf",
+    afterLoad: null,
+    currentNodeKey: null,
+    checkStrictly: false,
+    checkDescendants: null,
+    defaultCheckedKeys: null,
+    defaultExpandedKeys: null,
+    autoExpandParent: null,
+    defaultExpandAll: null,
+    filterNodeMethod: null
+  }
+};
+var cascaderProps = _extends({}, $props, {
+  _constants: {
+    type: Object,
+    default: function _default() {
+      return $constants;
+    }
+  },
+  autoSize: Boolean,
+  beforeFilter: {
+    type: Function,
+    default: function _default2() {
+      return function() {
+      };
+    }
+  },
+  clearable: Boolean,
+  collapseTags: Boolean,
+  debounce: {
+    type: Number,
+    default: 300
+  },
+  disabled: Boolean,
+  filterMethod: Function,
+  filterable: Boolean,
+  modelValue: {},
+  options: Array,
+  placeholder: {
+    type: String,
+    default: t("ui.select.placeholder")
+  },
+  popperAppendToBody: {
+    type: Boolean,
+    default: true
+  },
+  popperClass: String,
+  props: {
+    type: Object,
+    default: function _default3() {
+      return {};
+    }
+  },
+  separator: {
+    type: String,
+    default: " /"
+  },
+  showAllLevels: {
+    type: Boolean,
+    default: true
+  },
+  size: String,
+  shape: String,
+  label: String,
+  tip: String,
+  displayOnly: {
+    type: Boolean,
+    default: false
+  },
+  hoverExpand: {
+    type: Boolean,
+    default: false
+  },
+  // mf时，传入action-sheet的title
+  title: String,
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  levelTitle: Array,
+  // 用来接受小屏下，传入的数组标题，赋值给 cascader-mobile的placeholder属性
+  blank: {
+    type: Boolean,
+    default: false
+  }
+});
+var Cascader = defineComponent({
+  name: $prefix + "Cascader",
+  componentName: "Cascader",
+  props: cascaderProps,
+  setup: function setup(props, context) {
+    return $setup({
+      props,
+      context,
+      template
+    });
+  }
+});
+var version = "2.21.0";
+Cascader.model = {
+  prop: "modelValue",
+  event: "update:modelValue"
+};
+Cascader.install = function(Vue) {
+  Vue.component(Cascader.name, Cascader);
+};
+Cascader.version = version;
+export {
+  Cascader as default
+};

package/lib/mobile-first.js

@@ -0,0 +1,464 @@
+import { defineComponent, props, directive, setup, useBreakpoint, hooks } from '@opentinyvue/vue-common';
+import Input from '@opentinyvue/vue-input';
+import { IconClose, IconChevronDown, IconChevronUp, IconYes, IconChevronRight } from '@opentinyvue/vue-icon';
+import CascaderMobile from '@opentinyvue/vue-cascader-mobile';
+import { renderless, api } from '@opentinyvue/vue-renderless/cascader/vue';
+import Clickoutside from '@opentinyvue/vue-renderless/common/deps/clickoutside';
+import Scrollbar from '@opentinyvue/vue-scrollbar';
+import CascaderPanel from '@opentinyvue/vue-cascader-panel';
+import Tooltip from '@opentinyvue/vue-tooltip';
+
+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
+  };
+}
+
+var classes = {
+  "type-medium": "text-sm leading-9",
+  "type-small": "text-xs leading-8",
+  "type-mini": "text-xs leading-7",
+  "show-auto-width": "w-full"
+};
+var __vue2_script$1 = defineComponent({
+  props: [].concat(props, ["modelValue", "options", "props", "size", "placeholder", "disabled", "clearable", "filterable", "filterMethod", "separator", "showAllLevels", "collapseTags", "debounce", "beforeFilter", "popperClass", "placement", "popperOptions", "visibleArrow", "offset", "boundariesPadding", "arrowOffset", "popperAppendToBody", "autoSize", "displayOnly", "shape", "label", "tip", "hoverExpand"]),
+  directives: directive({
+    Clickoutside
+  }),
+  inheritAttrs: false,
+  provide: function provide() {
+    return {
+      cascaderRoot: this
+    };
+  },
+  components: {
+    TinyInput: Input,
+    TinyScrollbar: Scrollbar,
+    TinyCascaderPanel: CascaderPanel,
+    IconClose: IconClose(),
+    IconChevronDown: IconChevronDown(),
+    IconChevronUp: IconChevronUp(),
+    IconYes: IconYes(),
+    TinyTooltip: Tooltip
+  },
+  emits: ["update:modelValue", "change", "visible-change", "focus", "blur", "expand-change", "active-item-change", "remove-tag", "created"],
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api,
+      classes
+    });
+  }
+});
+var render$1 = function render$12() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", _vm._b({
+    directives: [{
+      name: "clickoutside",
+      rawName: "v-clickoutside",
+      value: function value() {
+        return _vm.toggleDropDownVisible(false);
+      },
+      expression: "() => toggleDropDownVisible(false)"
+    }],
+    class: _vm.m("inline-block relative text-sm", _vm.gcls("type-${state.realSize}"), _vm.gcls(_vm.state.showAutoWidth ? "show-auto-width" : "")),
+    attrs: {
+      "data-tag": "tiny-cascader"
+    },
+    on: {
+      "mouseenter": function mouseenter($event) {
+        _vm.state.inputHover = true;
+      },
+      "mouseleave": function mouseleave($event) {
+        _vm.state.inputHover = false;
+      },
+      "click": function click() {
+        return _vm.toggleDropDownVisible(_vm.state.readonly ? void 0 : true);
+      },
+      "keydown": _vm.handleKeyDown
+    }
+  }, "div", _vm.a(_vm.$attrs, ["class", "style"], true), false), [_c("div", {
+    ref: "reference",
+    attrs: {
+      "data-tag": "tiny-cascader-content"
+    }
+  }, [_c("tiny-input", {
+    ref: "input",
+    attrs: {
+      "model-value": _vm.state.multiple ? _vm.state.presentText : _vm.state.inputValue,
+      "size": _vm.state.realSize,
+      "placeholder": _vm.state.placeholder,
+      "readonly": _vm.state.readonly,
+      "disabled": _vm.state.isDisabled,
+      "display-only": _vm.displayOnly,
+      "display-only-content": _vm.state.multiple ? _vm.state.presentTags.map(function(item) {
+        return item.text;
+      }).join("; ") : "",
+      "validate-event": false
+    },
+    on: {
+      "focus": _vm.handleFocus,
+      "blur": _vm.handleBlur,
+      "update:modelValue": _vm.handleInput
+    },
+    scopedSlots: _vm._u([{
+      key: "suffix",
+      fn: function fn() {
+        return [_vm.state.clearBtnVisible ? _c("icon-close", {
+          key: "clear",
+          on: {
+            "click": function click($event) {
+              $event.stopPropagation();
+              return _vm.handleClear.apply(null, arguments);
+            }
+          }
+        }) : _c(_vm.state.dropDownVisible ? "icon-chevron-up" : "icon-chevron-down", {
+          key: "arrow-down",
+          tag: "component",
+          class: {
+            "fill-color-brand": _vm.state.dropDownVisible
+          },
+          on: {
+            "click": function click($event) {
+              $event.stopPropagation();
+              return _vm.toggleDropDownVisible();
+            }
+          }
+        })];
+      },
+      proxy: true
+    }])
+  }), _vm.state.multiple && !_vm.state.isDisplayOnly && !_vm.shape ? _c("div", {
+    ref: "tags-content",
+    attrs: {
+      "data-tag": "tiny-cascader__tags"
+    }
+  }, [_vm.filterable && !_vm.state.isDisabled ? _c("input", {
+    directives: [{
+      name: "model",
+      rawName: "v-model.trim",
+      value: _vm.state.inputValue,
+      expression: "state.inputValue",
+      modifiers: {
+        "trim": true
+      }
+    }],
+    staticClass: "flex-1 h-6 text-color-text-primary text-xs border-none outline-0 box-border",
+    attrs: {
+      "type": "text",
+      "data-tag": "tiny-cascader__search-input",
+      "placeholder": _vm.state.presentTags.length ? "" : _vm.placeholder
+    },
+    domProps: {
+      "value": _vm.state.inputValue
+    },
+    on: {
+      "focus": _vm.handleFocus,
+      "blur": [_vm.handleBlur, function($event) {
+        return _vm.$forceUpdate();
+      }],
+      "input": [function($event) {
+        if ($event.target.composing) return;
+        _vm.$set(_vm.state, "inputValue", $event.target.value.trim());
+      }, function(e) {
+        return _vm.handleInput(_vm.state.inputValue, e);
+      }],
+      "click": function click($event) {
+        $event.stopPropagation();
+        return _vm.toggleDropDownVisible(true);
+      },
+      "keydown": function keydown($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "delete", [8, 46], $event.key, ["Backspace", "Delete", "Del"])) return null;
+        return _vm.handleDelete.apply(null, arguments);
+      }
+    }
+  }) : _vm._e()]) : _vm._e()], 1), _c("tiny-tooltip", {
+    ref: "tooltip",
+    attrs: {
+      "manual": true,
+      "effect": "light",
+      "content": _vm.state.tooltipContent,
+      "placement": "top"
+    },
+    model: {
+      value: _vm.state.tooltipVisible,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "tooltipVisible", $$v);
+      },
+      expression: "state.tooltipVisible"
+    }
+  }), _c("transition", {
+    attrs: {
+      "name": "tiny-zoom-in-top"
+    },
+    on: {
+      "after-leave": _vm.handleDropdownLeave
+    }
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.state.dropDownVisible,
+      expression: "state.dropDownVisible"
+    }],
+    ref: "popper",
+    class: _vm.m(_vm.popperClass, "my-1 mx-0 text-sm bg-color-bg-1 rounded shadow-md", _vm.autoSize ? "bg-transparent border-none shadow-none" : ""),
+    attrs: {
+      "data-tag": "tiny-cascader__dropdown"
+    },
+    on: {
+      "mousedown": function mousedown($event) {
+        $event.stopPropagation();
+      }
+    }
+  }, [_c("tiny-cascader-panel", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.state.filtering,
+      expression: "!state.filtering"
+    }],
+    ref: "panel",
+    attrs: {
+      "tiny_mode": "mobile-first",
+      "options": _vm.options,
+      "props": _vm.state.config,
+      "border": false,
+      "render-label": _vm.slots.default
+    },
+    on: {
+      "expand-change": _vm.handleExpandChange,
+      "close": function close($event) {
+        return _vm.toggleDropDownVisible(false);
+      }
+    },
+    model: {
+      value: _vm.state.checkedValue,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "checkedValue", $$v);
+      },
+      expression: "state.checkedValue"
+    }
+  }), _vm.filterable ? _c("tiny-scrollbar", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.state.filtering,
+      expression: "state.filtering"
+    }],
+    ref: "suggestionPanel",
+    staticClass: "bg-color-bg-1 border border-solid border-color-border-separator rounded",
+    attrs: {
+      "tag": "div",
+      "data-tag": "tiny-cascader__suggestion-panel",
+      "wrap-class": "overflow-auto pr-2 pb-2",
+      "view-class": "tiny-cascader__suggestion-list m-0 py-1.5 px-0 text-sm text-color-text-primary text-center"
+    },
+    on: {
+      "keydown": _vm.handleSuggestionKeyDown
+    },
+    scopedSlots: _vm._u([_vm.state.suggestions.length ? {
+      key: "default",
+      fn: function fn() {
+        return _vm._l(_vm.state.suggestions, function(item, index) {
+          return _c("div", {
+            key: item.uid,
+            class: ["flex justify-between items-center h-8 py-0 px-2 text-xs text-color-text-primary", "text-left outline-0 cursor-pointer", item.checked ? "text-color-brand-hover font-bold" : ""],
+            attrs: {
+              "data-tag": "tiny-cascader__suggestion-item",
+              "tabindex": -1
+            },
+            on: {
+              "click": function click($event) {
+                return _vm.handleSuggestionClick(index);
+              }
+            }
+          }, [_c("span", [_vm._v(_vm._s(item.text))]), item.checked ? _c("icon-yes", {
+            class: item.checked ? "fill-color-icon-hover" : ""
+          }) : _vm._e()], 1);
+        });
+      },
+      proxy: true
+    } : null], null, true)
+  }, [!_vm.state.suggestions.length ? _vm._t("empty", function() {
+    return [_c("div", {
+      staticClass: "my-2.5 mx-0 text-color-text-placeholder",
+      attrs: {
+        "data-tag": "tiny-cascader__empty-text"
+      }
+    }, [_vm._v(" " + _vm._s(_vm.t("ui.cascader.noMatch")) + " ")])];
+  }) : _vm._e()], 2) : _vm._e()], 1)])], 1);
+};
+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 PcFirst = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}();
+var __vue2_script = defineComponent({
+  props: [].concat(props, ["modelValue", "options", "props", "size", "placeholder", "disabled", "clearable", "filterable", "filterMethod", "separator", "showAllLevels", "collapseTags", "debounce", "beforeFilter", "popperClass", "placement", "popperOptions", "visibleArrow", "offset", "boundariesPadding", "arrowOffset", "popperAppendToBody", "autoSize", "displayOnly", "shape", "label", "tip", "hoverExpand", "title", "showHeader", "levelTitle"]),
+  inheritAttrs: false,
+  components: {
+    TinyCascaderMobile: CascaderMobile,
+    TinyPcFirst: PcFirst,
+    TinyInput: Input,
+    IconChevronRight: IconChevronRight()
+  },
+  emits: ["update:modelValue", "change", "visible-change", "focus", "blur", "expand-change", "active-item-change", "remove-tag", "created"],
+  setup: function setup2(props2, ctx) {
+    var bp = useBreakpoint().current;
+    var visible = hooks.ref(false);
+    var showText = hooks.ref("");
+    var computedMobileProp = hooks.computed(function() {
+      var mobileProp = hooks.reactive({
+        _constants: props2._constants,
+        data: props2.options,
+        ellipsis: props2.ellipsis,
+        placeholder: Array.isArray(props2.levelTitle) && props2.levelTitle.length ? props2.levelTitle : props2.placeholder,
+        // 未传入有效的 levelTitle,则使用默认的placeholder
+        title: props2.title,
+        // 外层需要补充
+        valueField: props2.props.value || "value",
+        textField: props2.props.label || "label",
+        textField2: props2.props.textField2 || "",
+        // 外层props需要补充2,3属性
+        textField3: props2.props.textField3 || "",
+        childrenField: props2.props.children || "children",
+        textSplit: props2.separator,
+        showHeader: props2.showHeader,
+        // 外层需要补充
+        multiple: false,
+        // 不支持多选
+        searchConfig: {
+          filterable: props2.filterable,
+          filterMethod: props2.filterMethod
+        },
+        // 外层需要补充
+        nodeConfig: {
+          lazy: props2.props.lazy || false,
+          load: props2.props.lazyLoad || null,
+          isLeaf: props2.props.isLeaf || "leaf",
+          checkStrictly: props2.props.checkStrictly || false,
+          afterLoad: props2.props.afterLoad || null,
+          // 外层props需要补充以下属性
+          currentNodeKey: props2.props.currentNodeKey || null,
+          checkDescendants: props2.props.checkDescendants || null,
+          defaultCheckedKeys: props2.props.defaultCheckedKeys || null,
+          defaultExpandedKeys: props2.props.defaultExpandedKeys || null,
+          autoExpandParent: props2.props.autoExpandParent || null,
+          defaultExpandAll: props2.props.defaultExpandAll || null,
+          filterNodeMethod: props2.props.filterNodeMethod || null
+        }
+      });
+      return mobileProp;
+    });
+    var updateValue = function updateValue2(value) {
+      ctx.emit("update:modelValue", value);
+      visible.value = false;
+    };
+    var updateText = function updateText2(value) {
+      showText.value = value;
+    };
+    return {
+      bp,
+      visible,
+      showText,
+      computedMobileProp,
+      updateValue,
+      updateText
+    };
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm.bp !== "default" ? _c("tiny-pc-first", _vm._b({
+    on: {
+      "update:modelValue": _vm.updateValue
+    }
+  }, "tiny-pc-first", _vm.$props, false)) : _c("div", [_c("tiny-input", {
+    attrs: {
+      "tiny_mode": "mobile-first",
+      "model-value": _vm.showText,
+      "disabled": _vm.disabled,
+      "placeholder": _vm.placeholder,
+      "readonly": ""
+    },
+    on: {
+      "click": function click($event) {
+        _vm.visible = true;
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "suffix",
+      fn: function fn() {
+        return [_c("div", [_c("icon-chevron-right", {
+          class: [_vm.visible ? "fill-color-brand" : "", _vm.disabled ? "fill-color-icon-placeholder sm:fill-color-icon-secondary" : "fill-color-icon-secondary"],
+          attrs: {
+            "custom-class": "w-5 h-5"
+          }
+        })], 1)];
+      },
+      proxy: true
+    }])
+  }), _c("tiny-cascader-mobile", _vm._b({
+    attrs: {
+      "model-value": _vm.modelValue,
+      "visible": _vm.visible
+    },
+    on: {
+      "update:modelValue": _vm.updateValue,
+      "close": function close($event) {
+        _vm.visible = false;
+      },
+      "update:text": _vm.updateText
+    }
+  }, "tiny-cascader-mobile", _vm.computedMobileProp, false))], 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/lib/pc.js

@@ -0,0 +1,405 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/cascader/vue';
+import { defineComponent, props, directive, setup } from '@opentinyvue/vue-common';
+import Clickoutside from '@opentinyvue/vue-renderless/common/deps/clickoutside';
+import { HighlightQuery } from '@opentinyvue/vue-directive';
+import Input from '@opentinyvue/vue-input';
+import Tag from '@opentinyvue/vue-tag';
+import Scrollbar from '@opentinyvue/vue-scrollbar';
+import CascaderPanel from '@opentinyvue/vue-cascader-panel';
+import FilterBox from '@opentinyvue/vue-filter-box';
+import Tooltip from '@opentinyvue/vue-tooltip';
+import { iconClose, IconTriangleDown, IconUpWard, iconYes } from '@opentinyvue/vue-icon';
+import '@opentinyvue/vue-theme/cascader/index.css';
+
+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 __vue2_script = defineComponent({
+  props: [].concat(props, ["modelValue", "options", "props", "size", "placeholder", "disabled", "clearable", "filterable", "filterMethod", "separator", "showAllLevels", "collapseTags", "debounce", "beforeFilter", "popperClass", "placement", "popperOptions", "visibleArrow", "offset", "boundariesPadding", "arrowOffset", "popperAppendToBody", "autoSize", "displayOnly", "shape", "label", "tip", "hoverExpand", "blank"]),
+  emits: ["update:modelValue", "change", "visible-change", "focus", "blur", "expand-change", "active-item-change", "remove-tag", "created"],
+  directives: _extends({}, directive({
+    Clickoutside
+  }), {
+    HighlightQuery
+  }),
+  provide: function provide() {
+    return {
+      cascaderRoot: this
+    };
+  },
+  components: {
+    TinyInput: Input,
+    TinyTag: Tag,
+    TinyScrollbar: Scrollbar,
+    TinyFilterBox: FilterBox,
+    TinyCascaderPanel: CascaderPanel,
+    IconClose: iconClose(),
+    IconChevronDown: IconTriangleDown(),
+    IconChevronUp: IconUpWard(),
+    IconYes: iconYes(),
+    TinyTooltip: Tooltip
+  },
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    directives: [{
+      name: "clickoutside",
+      rawName: "v-clickoutside",
+      value: function value() {
+        return _vm.toggleDropDownVisible(false);
+      },
+      expression: "() => toggleDropDownVisible(false)"
+    }],
+    ref: "reference",
+    class: ["tiny-cascader", _vm.state.realSize && "tiny-cascader--" + _vm.state.realSize, {
+      "is-disabled": _vm.state.isDisabled
+    }, {
+      "tiny-cascader-multiple": _vm.state.multiple
+    }, {
+      "is-display-only": _vm.state.isDisplayOnly
+    }, {
+      "show-auto-width": _vm.state.showAutoWidth
+    }, {
+      "is-hover-expand": _vm.hoverExpand
+    }],
+    on: {
+      "mouseenter": function mouseenter($event) {
+        _vm.state.inputHover = true;
+      },
+      "mouseleave": function mouseleave($event) {
+        _vm.state.inputHover = false;
+      },
+      "click": function click() {
+        return _vm.toggleDropDownVisible(_vm.state.readonly ? void 0 : true);
+      },
+      "keydown": _vm.handleKeyDown
+    }
+  }, [_vm.shape === "filter" ? _c("tiny-filter-box", {
+    attrs: {
+      "show-close": _vm.clearable,
+      "placeholder": _vm.placeholder,
+      "disabled": _vm.state.isDisabled,
+      "label": _vm.label,
+      "tip": _vm.tip,
+      "value": _vm.state.multiple ? _vm.state.presentTags.map(function(item) {
+        return item.text;
+      }).join("; ") : _vm.state.inputValue,
+      "drop-down-visible": _vm.state.dropDownVisible,
+      "blank": _vm.blank
+    },
+    on: {
+      "click": function click($event) {
+        $event.stopPropagation();
+        return _vm.toggleDropDownVisible();
+      }
+    }
+  }) : _vm._e(), _c("div", {
+    staticClass: "tiny-cascader-content"
+  }, [_vm.shape !== "filter" ? _c("tiny-input", {
+    ref: "input",
+    class: {
+      "is-focus": _vm.state.dropDownVisible
+    },
+    attrs: {
+      "model-value": _vm.state.multiple ? _vm.state.presentText : _vm.state.inputValue,
+      "size": _vm.state.realSize,
+      "placeholder": _vm.state.placeholder,
+      "readonly": _vm.state.readonly,
+      "disabled": _vm.state.isDisabled,
+      "display-only": _vm.displayOnly,
+      "display-only-content": _vm.state.multiple ? _vm.state.presentTags.map(function(item) {
+        return item.text;
+      }).join("; ") : "",
+      "validate-event": false
+    },
+    on: {
+      "focus": _vm.handleFocus,
+      "blur": _vm.handleBlur,
+      "update:modelValue": function updateModelValue(val) {
+        return _vm.handleInput(val, {});
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "suffix",
+      fn: function fn() {
+        return [_vm.state.clearBtnVisible ? _c("icon-close", {
+          key: "clear",
+          class: ["tiny-input__icon", "tiny-input__icon-close"],
+          on: {
+            "click": function click($event) {
+              $event.stopPropagation();
+              return _vm.handleClear.apply(null, arguments);
+            }
+          }
+        }) : _c(_vm.state.dropDownVisible ? "icon-chevron-up" : "icon-chevron-down", {
+          key: "arrow-down",
+          tag: "component",
+          class: ["tiny-input__icon", _vm.state.dropDownVisible && "is-reverse"],
+          on: {
+            "click": function click($event) {
+              $event.stopPropagation();
+              return _vm.toggleDropDownVisible();
+            }
+          }
+        })];
+      },
+      proxy: true
+    }], null, false, 1295602185)
+  }) : _vm._e(), _vm.state.multiple && !_vm.state.isDisplayOnly && !_vm.shape ? _c("div", {
+    ref: "tags-content",
+    staticClass: "tiny-cascader__tags",
+    class: {
+      "is-expand-content": _vm.hoverExpand && !_vm.state.isDisabled && (_vm.state.inputHover || _vm.state.dropDownVisible)
+    }
+  }, [_vm.hoverExpand ? _c("tiny-tag", {
+    class: ["tiny-cascader__tags-collapse", {
+      "is-hidden": _vm.state.isHidden
+    }],
+    attrs: {
+      "type": _vm.state.tagTypeWhenMultiple,
+      "closable": false,
+      "size": _vm.state.tagSize
+    }
+  }, [_vm._v("+ " + _vm._s(_vm.state.collapseTagsLength) + " ")]) : _vm._e(), _vm._l(_vm.state.presentTags, function(tag, index) {
+    return _c("tiny-tag", {
+      key: tag.key,
+      attrs: {
+        "type": _vm.state.tagTypeWhenMultiple,
+        "size": _vm.state.tagSize,
+        "hit": tag.hitState,
+        "closable": tag.closable,
+        "disable-transitions": ""
+      },
+      on: {
+        "close": function close($event) {
+          return _vm.deleteTag(index);
+        }
+      },
+      nativeOn: {
+        "mouseenter": function mouseenter($event) {
+          return _vm.handleMouseenter.apply(null, arguments);
+        },
+        "mouseleave": function mouseleave($event) {
+          return _vm.handleMouseleave.apply(null, arguments);
+        }
+      }
+    }, [_c("span", [_vm._v(_vm._s(tag.text))])]);
+  }), _vm.filterable && !_vm.state.isDisabled ? _c("input", {
+    directives: [{
+      name: "model",
+      rawName: "v-model.trim",
+      value: _vm.state.inputValue,
+      expression: "state.inputValue",
+      modifiers: {
+        "trim": true
+      }
+    }],
+    staticClass: "tiny-cascader__search-input",
+    attrs: {
+      "type": "text",
+      "placeholder": _vm.state.presentTags.length ? "" : _vm.placeholder
+    },
+    domProps: {
+      "value": _vm.state.inputValue
+    },
+    on: {
+      "input": [function($event) {
+        if ($event.target.composing) return;
+        _vm.$set(_vm.state, "inputValue", $event.target.value.trim());
+      }, function(e) {
+        return _vm.handleInput(_vm.state.inputValue, e);
+      }],
+      "click": function click($event) {
+        $event.stopPropagation();
+        return _vm.toggleDropDownVisible(true);
+      },
+      "keydown": function keydown($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "delete", [8, 46], $event.key, ["Backspace", "Delete", "Del"])) return null;
+        return _vm.handleDelete.apply(null, arguments);
+      },
+      "blur": function blur($event) {
+        return _vm.$forceUpdate();
+      }
+    }
+  }) : _vm._e()], 2) : _vm._e()], 1), _c("tiny-tooltip", {
+    ref: "tooltip",
+    attrs: {
+      "manual": true,
+      "effect": "light",
+      "content": _vm.state.tooltipContent,
+      "placement": "top"
+    },
+    model: {
+      value: _vm.state.tooltipVisible,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "tooltipVisible", $$v);
+      },
+      expression: "state.tooltipVisible"
+    }
+  }), _c("transition", {
+    attrs: {
+      "name": "tiny-zoom-in-top"
+    },
+    on: {
+      "after-leave": _vm.handleDropdownLeave
+    }
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.state.dropDownVisible,
+      expression: "state.dropDownVisible"
+    }],
+    ref: "popper",
+    class: ["tiny-popper", "tiny-cascader-dropdown", "tiny-cascader__dropdown", _vm.popperClass, {
+      "is-auto-size": _vm.autoSize,
+      "is-multiple": _vm.state.multiple
+    }],
+    on: {
+      "mousedown": function mousedown($event) {
+        $event.stopPropagation();
+      }
+    }
+  }, [_c("tiny-cascader-panel", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.state.filtering,
+      expression: "!state.filtering"
+    }],
+    ref: "panel",
+    attrs: {
+      "options": _vm.options,
+      "props": _vm.state.config,
+      "border": false,
+      "render-label": _vm.slots.default,
+      "onlyUsePanel": false
+    },
+    on: {
+      "expand-change": _vm.handleExpandChange,
+      "close": function close($event) {
+        return _vm.toggleDropDownVisible(false);
+      },
+      "load-data": _vm.computePresentContent
+    },
+    model: {
+      value: _vm.state.checkedValue,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "checkedValue", $$v);
+      },
+      expression: "state.checkedValue"
+    }
+  }), _vm.filterable ? _c("tiny-scrollbar", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.state.filtering,
+      expression: "state.filtering"
+    }],
+    ref: "suggestionPanel",
+    staticClass: "tiny-cascader__suggestion-panel",
+    attrs: {
+      "tag": "ul",
+      "view-class": "tiny-cascader__suggestion-list"
+    },
+    on: {
+      "keydown": _vm.handleSuggestionKeyDown
+    },
+    scopedSlots: _vm._u([_vm.state.suggestions.length ? {
+      key: "default",
+      fn: function fn() {
+        return _vm._l(_vm.state.suggestions, function(item, index) {
+          return _c("li", {
+            directives: [{
+              name: "highlight-query",
+              rawName: "v-highlight-query",
+              value: _vm.state.multiple ? _vm.state.presentText : _vm.state.inputValue,
+              expression: "state.multiple ? state.presentText : state.inputValue"
+            }],
+            key: item.uid,
+            class: ["tiny-cascader__suggestion-item", item.checked && "is-checked"],
+            attrs: {
+              "tabindex": -1
+            },
+            on: {
+              "click": function click($event) {
+                return _vm.handleSuggestionClick(index);
+              }
+            }
+          }, [_vm._t("filter", function() {
+            return [_c("span", [_vm._v(_vm._s(item.text))])];
+          }, {
+            "item": item.text
+          }), item.checked ? _c("icon-yes", {
+            staticClass: "icon-check"
+          }) : _vm._e()], 2);
+        });
+      },
+      proxy: true
+    } : null], null, true)
+  }, [!_vm.state.suggestions.length ? _vm._t("empty", function() {
+    return [_c("li", {
+      staticClass: "tiny-cascader__empty-text"
+    }, [_vm._v(" " + _vm._s(_vm.t("ui.cascader.noMatch")) + " ")])];
+  }) : _vm._e()], 2) : _vm._e()], 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 pc = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { pc as default };

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@opentinyvue/vue-cascader",
+  "type": "module",
+  "version": "2.21.0",
+  "description": "",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "dependencies": {
+    "@opentinyvue/vue-cascader-mobile": "~2.21.0",
+    "@opentinyvue/vue-cascader-panel": "~2.21.0",
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-directive": "~2.21.0",
+    "@opentinyvue/vue-filter-box": "~2.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0",
+    "@opentinyvue/vue-input": "~2.21.0",
+    "@opentinyvue/vue-locale": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0",
+    "@opentinyvue/vue-scrollbar": "~2.21.0",
+    "@opentinyvue/vue-tag": "~2.21.0",
+    "@opentinyvue/vue-theme": "~3.21.0",
+    "@opentinyvue/vue-tooltip": "~2.21.0"
+  },
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,96 @@
+export declare const cascaderProps: {
+    _constants: {
+        type: ObjectConstructor;
+        default: () => {
+            placeholder: string;
+            COMPONENT_NAME: {
+                FormItem: string;
+            };
+            EVENT_NAME: {
+                FormBlur: string;
+                FormChange: string;
+            };
+            defaultNodeConfig: {
+                lazy: boolean;
+                load: null;
+                isLeaf: string;
+                afterLoad: null;
+                currentNodeKey: null;
+                checkStrictly: boolean;
+                checkDescendants: null;
+                defaultCheckedKeys: null;
+                defaultExpandedKeys: null;
+                autoExpandParent: null;
+                defaultExpandAll: null;
+                filterNodeMethod: null;
+            };
+        };
+    };
+    autoSize: BooleanConstructor;
+    beforeFilter: {
+        type: FunctionConstructor;
+        default: () => () => void;
+    };
+    clearable: BooleanConstructor;
+    collapseTags: BooleanConstructor;
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: BooleanConstructor;
+    filterMethod: FunctionConstructor;
+    filterable: BooleanConstructor;
+    modelValue: {};
+    options: ArrayConstructor;
+    placeholder: {
+        type: StringConstructor;
+        default: any;
+    };
+    popperAppendToBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popperClass: StringConstructor;
+    props: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    showAllLevels: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: StringConstructor;
+    shape: StringConstructor;
+    label: StringConstructor;
+    tip: StringConstructor;
+    displayOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hoverExpand: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: StringConstructor;
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    levelTitle: ArrayConstructor;
+    blank: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
+declare const _default: any;
+export default _default;

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

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

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

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

package/src/pc.vue.d.ts

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

package/src/token.d.ts

@@ -0,0 +1,6 @@
+export declare const classes: {
+    'type-medium': string;
+    'type-small': string;
+    'type-mini': string;
+    'show-auto-width': string;
+};