@opentinyvue/vue-tree-menu 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 TreeMenu from './src/pc.vue';
+export default TreeMenu;

package/lib/index.js

@@ -0,0 +1,312 @@
+import { $props, defineComponent, $prefix, setup } from '@opentinyvue/vue-common';
+import { renderless, api } from '@opentinyvue/vue-renderless/tree-menu/vue';
+import Tree from '@opentinyvue/vue-tree';
+import Input from '@opentinyvue/vue-input';
+import { iconSearch, iconLeftWardArrow, iconEditorMenuLeft, iconEditorMenuRight } from '@opentinyvue/vue-icon';
+import '@opentinyvue/vue-theme/tree-menu/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 treeMenuProps = _extends({}, $props, {
+  placeholder: {
+    default: "",
+    type: String
+  },
+  data: Array,
+  nodeKey: String,
+  defaultExpandAll: Boolean,
+  suffixIcon: Object,
+  searchIcon: {
+    type: Object,
+    default: function _default() {
+      return iconSearch();
+    }
+  },
+  props: Object,
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+  emptyText: {
+    type: String,
+    default: ""
+  },
+  checkStrictly: Boolean,
+  lazy: {
+    type: Boolean,
+    default: false
+  },
+  load: Function,
+  showCheckbox: Boolean,
+  filterNodeMethod: Function,
+  defaultCheckedKeys: Array,
+  defaultExpandedKeys: Array,
+  defaultExpandedKeysHighlight: [Number, String],
+  indent: {
+    type: Number,
+    default: 16
+  },
+  allowDrag: Function,
+  allowDrop: Function,
+  expandOnClickNode: {
+    type: Boolean,
+    default: true
+  },
+  ellipsis: {
+    type: Boolean,
+    default: false
+  },
+  wrap: {
+    type: Boolean,
+    default: false
+  },
+  getMenuDataSync: Function,
+  accordion: Boolean,
+  showTitle: {
+    type: Boolean,
+    default: true
+  },
+  showFilter: {
+    type: Boolean,
+    default: true
+  },
+  showExpand: {
+    type: Boolean,
+    default: false
+  },
+  collapsible: {
+    type: Boolean,
+    default: true
+  },
+  showNumber: {
+    type: Boolean,
+    default: false
+  },
+  nodeHeight: Number,
+  onlyCheckChildren: {
+    type: Boolean,
+    default: false
+  },
+  menuCollapsible: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  highlightQuery: {
+    type: Boolean,
+    default: false
+  },
+  // metaErp 新增属性
+  widthAdapt: {
+    type: Boolean,
+    default: false
+  }
+});
+var __vue2_script = defineComponent({
+  name: $prefix + "TreeMenu",
+  emits: ["change", "current-change", "node-drag-start", "node-drag-enter", "node-drag-over", "node-drag-end", "node-drop", "node-expand", "node-click", "check-change", "check", "collapse-change", "node-collapse"],
+  components: {
+    TinyTree: Tree,
+    TinyInput: Input,
+    IconArrow: iconLeftWardArrow(),
+    IconEditorMenuLeft: iconEditorMenuLeft(),
+    IconEditorMenuRight: iconEditorMenuRight()
+  },
+  props: treeMenuProps,
+  setup: function setup$1(props, context) {
+    return setup({
+      props,
+      context,
+      renderless,
+      api,
+      mono: true
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    staticClass: "tiny-tree-menu",
+    class: {
+      "is-collapsed": _vm.state.isCollapsed,
+      "is-expand": _vm.state.isExpand,
+      "tiny-tree-menu__show-filter": _vm.showFilter,
+      "tiny-tree-menu__show-expand": _vm.showExpand
+    },
+    style: _vm.widthAdapt ? {
+      width: "100%"
+    } : {}
+  }, [_vm.menuCollapsible ? _c("div", {
+    staticClass: "tiny-tree-menu__toggle-button",
+    on: {
+      "click": function click($event) {
+        $event.stopPropagation();
+        return _vm.collapseChange.apply(null, arguments);
+      }
+    }
+  }, [_c("icon-arrow")], 1) : _vm._e(), _vm.showFilter ? _c("tiny-input", {
+    attrs: {
+      "placeholder": _vm.placeholder || _vm.t("ui.treeMenu.placeholder"),
+      "prefix-icon": _vm.searchIcon,
+      "clearable": _vm.state.clearable
+    },
+    model: {
+      value: _vm.state.filterText,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "filterText", $$v);
+      },
+      expression: "state.filterText"
+    }
+  }) : _vm._e(), _c("tiny-tree", {
+    ref: "tree",
+    class: {
+      "tiny-tree-menu__wrap": !_vm.ellipsis ? _vm.wrap : false,
+      "tiny-tree-menu__overflow": _vm.ellipsis,
+      "only-check-children": _vm.onlyCheckChildren
+    },
+    attrs: {
+      "tiny_mode": "pc",
+      "theme": "tiny",
+      "accordion": _vm.accordion,
+      "data": _vm.state.data,
+      "node-key": _vm.nodeKey || "id",
+      "empty-text": _vm.emptyText,
+      "filter-node-method": _vm.filterNodeMethod || _vm.filterNode,
+      "draggable": _vm.draggable,
+      "default-expand-all": _vm.defaultExpandAll,
+      "check-strictly": _vm.checkStrictly,
+      "lazy": _vm.lazy,
+      "load": _vm.load,
+      "show-checkbox": _vm.showCheckbox,
+      "show-number": _vm.showNumber,
+      "collapsible": _vm.collapsible,
+      "node-height": _vm.nodeHeight,
+      "indent": _vm.indent,
+      "default-checked-keys": _vm.defaultCheckedKeys,
+      "default-expanded-keys": _vm.state.defaultExpandedKeys,
+      "default-expanded-keys-highlight": _vm.defaultExpandedKeysHighlight,
+      "allow-drag": _vm.allowDrag,
+      "props": _vm.props,
+      "allow-drop": _vm.allowDrop,
+      "highlight-query": _vm.highlightQuery,
+      "expand-on-click-node": _vm.expandOnClickNode,
+      "only-check-children": _vm.onlyCheckChildren
+    },
+    on: {
+      "node-drag-start": _vm.nodeDragStart,
+      "node-drag-enter": _vm.nodeDragEnter,
+      "node-drag-over": _vm.nodeDragOver,
+      "node-drag-end": _vm.nodeDragEnd,
+      "node-drop": _vm.nodeDrop,
+      "node-expand": _vm.nodeExpand,
+      "node-collapse": _vm.nodeCollapse,
+      "node-click": _vm.nodeClick,
+      "check-change": _vm.checkChange,
+      "check": _vm.check,
+      "current-change": _vm.currentChange
+    },
+    scopedSlots: _vm._u([{
+      key: "default",
+      fn: function fn(_ref) {
+        var node = _ref.node, data = _ref.data;
+        return [_c("div", {
+          staticClass: "tree-node"
+        }, [_c("div", {
+          staticClass: "tree-menus-link tiny-tree-node__label"
+        }, [_c("a", {
+          staticClass: "tree-node-body",
+          attrs: {
+            "title": _vm.getTitle(data.label),
+            "href": data.url || void 0
+          }
+        }, [_c("span", {
+          staticClass: "tree-node-name"
+        }, [!data.customIcon && _vm.suffixIcon ? _c(_vm.suffixIcon, {
+          tag: "component"
+        }) : _vm._e(), data.customIcon ? _c(data.customIcon, {
+          tag: "component"
+        }) : _vm._e(), _vm._t("default", function() {
+          return [_vm._v(_vm._s(data.label || node.label) + " ")];
+        }, {
+          "node": node,
+          "data": data,
+          "label": data.label
+        })], 2)])])])];
+      }
+    }], null, true)
+  }), _vm.showExpand ? _c("div", {
+    staticClass: "tiny-tree-menu__expand"
+  }, [_c("span", [!_vm.state.isExpand ? _c("icon-editor-menu-left", {
+    on: {
+      "click": function click($event) {
+        return _vm.handleToggleMenu("collapse");
+      }
+    }
+  }) : _c("icon-editor-menu-right", {
+    on: {
+      "click": function click($event) {
+        return _vm.handleToggleMenu("expand");
+      }
+    }
+  })], 1)]) : _vm._e()], 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 TreeMenu = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+var version = "2.21.0";
+TreeMenu.install = function(Vue) {
+  Vue.component(TreeMenu.name, TreeMenu);
+};
+TreeMenu.version = version;
+
+export { TreeMenu as default };

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@opentinyvue/vue-tree-menu",
+  "version": "2.21.0",
+  "description": "",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0",
+    "@opentinyvue/vue-input": "~2.21.0",
+    "@opentinyvue/vue-tree": "~2.21.0",
+    "@opentinyvue/vue-theme": "~3.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/pc.vue.d.ts

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

package/src/props.d.ts

@@ -0,0 +1,101 @@
+export declare const treeMenuProps: {
+    placeholder: {
+        default: string;
+        type: StringConstructor;
+    };
+    data: ArrayConstructor;
+    nodeKey: StringConstructor;
+    defaultExpandAll: BooleanConstructor;
+    suffixIcon: ObjectConstructor;
+    searchIcon: {
+        type: ObjectConstructor;
+        default: () => any;
+    };
+    props: ObjectConstructor;
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    checkStrictly: BooleanConstructor;
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    load: FunctionConstructor;
+    showCheckbox: BooleanConstructor;
+    filterNodeMethod: FunctionConstructor;
+    defaultCheckedKeys: ArrayConstructor;
+    defaultExpandedKeys: ArrayConstructor;
+    defaultExpandedKeysHighlight: (StringConstructor | NumberConstructor)[];
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    allowDrag: FunctionConstructor;
+    allowDrop: FunctionConstructor;
+    expandOnClickNode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    getMenuDataSync: FunctionConstructor;
+    accordion: BooleanConstructor;
+    showTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showFilter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showExpand: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showNumber: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    nodeHeight: NumberConstructor;
+    onlyCheckChildren: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    menuCollapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    highlightQuery: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    widthAdapt: {
+        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;
+};