@opentinyvue/vue-cascader-node 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 CascaderNode from './src/index';
+export default CascaderNode;

package/lib/index.js

@@ -0,0 +1,48 @@
+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 { defineComponent, $prefix, $props, $setup } from "@opentinyvue/vue-common";
+import PcTemplate from "./pc.js";
+import MobileFirstTemplate from "./mobile-first.js";
+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 CascaderNode = defineComponent({
+  name: $prefix + "CascaderNode",
+  componentName: "CascaderNode",
+  props: _extends({}, $props, {
+    node: {
+      required: true
+    },
+    nodeId: String
+  }),
+  setup: function setup(props, context) {
+    return $setup({
+      props,
+      context,
+      template
+    });
+  }
+});
+var version = "2.21.0";
+CascaderNode.install = function(Vue) {
+  Vue.component(CascaderNode.name, CascaderNode);
+};
+CascaderNode.version = version;
+export {
+  CascaderNode as default
+};

package/lib/mobile-first.js

@@ -0,0 +1,117 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/cascader-node/vue';
+import { defineComponent, $prefix, setup, $props } from '@opentinyvue/vue-common';
+import { IconLoading, IconChevronRight } from '@opentinyvue/vue-icon';
+
+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 = {
+  "cascader-node__postfix": "text-sm fill-color-text-primary absolute top-1/2 right-4 -translate-y-2/4",
+  "cascader-node__label_disabled": "max-w-[theme(spacing.80)] flex-1 whitespace-nowrap overflow-hidden text-ellipsis",
+  // 正常状态
+  "cascader-node": "relative flex items-center pt-0 pr-10 pb-0 pl-3 h-8 leading-8 outline-0 m-1 cursor-pointer rounded hover:bg-color-bg-4",
+  "is-selectable": "",
+  "in-active-path": "text-color-brand bg-color-fill-6 fill-color-brand",
+  "in-checked-path": "text-color-brand bg-color-fill-6 fill-color-brand",
+  "in-active": "text-color-brand bg-color-fill-6 ",
+  "node-active": "fill-color-brand",
+  // 禁用时
+  "cascader-node_disabled": "cursor-not-allowed text-color-text-disabled rounded hover:bg-color-bg-1",
+  "in-active_disabled": "text-color-text-disabled"
+};
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    class: _vm.m(_vm.gcls("cascader-node"), _vm.gcls(!_vm.state.isDisabled && _vm.state.config.checkStrictly ? "is-selectable" : ""), _vm.gcls(!_vm.state.isDisabled && _vm.state.inActivePath ? "in-active-path" : ""), _vm.gcls(!_vm.state.isDisabled && _vm.state.inCheckedPath ? "in-checked-path" : ""), _vm.gcls(!_vm.state.isDisabled && _vm.state.isChecked ? "in-active" : ""), _vm.gcls(_vm.state.isDisabled ? "cascader-node_disabled" : ""), _vm.gcls(_vm.state.isDisabled ? "in-active_disabled" : "")),
+    attrs: {
+      "id": _vm.nodeId,
+      "role": "menuitem",
+      "data-tag": "tiny-cascader-node"
+    },
+    on: {
+      "click": _vm.handleNodeClick
+    }
+  }, [_c("span", {
+    class: [_vm.node ? _vm.gcls("cascader-node__label_disabled") : ""]
+  }, [_vm._v(_vm._s(_vm.state.nodeLabel))]), _vm.node.loading ? _c("icon-loading", {
+    class: _vm.gcls("cascader-node__postfix")
+  }) : !_vm.state.isLeaf ? _c("icon-chevron-right", {
+    class: _vm.m(_vm.gcls("cascader-node__postfix"), _vm.gcls(!_vm.state.isDisabled && _vm.state.inActivePath ? "node-active" : ""), _vm.gcls(!_vm.state.isDisabled && _vm.state.inCheckedPath ? "node-active" : ""), _vm.gcls(!_vm.state.isDisabled && _vm.state.isChecked ? "node-active" : ""))
+  }, [_vm._v(">")]) : _vm._e()], 1);
+};
+var staticRenderFns = [];
+var __vue2_script = defineComponent({
+  name: $prefix + "CascaderNode",
+  components: {
+    IconLoading: IconLoading(),
+    IconChevronRight: IconChevronRight()
+  },
+  inheritAttrs: false,
+  emits: ["expand", "update:modelValue", "expand-change", "active-item-change", "change"],
+  inject: ["panel"],
+  props: _extends({}, $props, {
+    node: {
+      required: true
+    },
+    nodeId: String
+  }),
+  setup: function setup$1(props, context) {
+    return setup({
+      props,
+      context,
+      renderless,
+      api,
+      classes
+    });
+  }
+});
+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,212 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/cascader-node/vue';
+import { defineComponent, $prefix, setup, $props } from '@opentinyvue/vue-common';
+import Checkbox from '@opentinyvue/vue-checkbox';
+import Radio from '@opentinyvue/vue-radio';
+import { isEqual } from '@opentinyvue/vue-renderless/common/object';
+import { iconYes, iconLoadingShadow, iconChevronRight } from '@opentinyvue/vue-icon';
+import '@opentinyvue/vue-theme/cascader-node/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({
+  name: $prefix + "CascaderNode",
+  components: {
+    TinyCheckbox: Checkbox,
+    TinyRadio: Radio,
+    IconYes: iconYes(),
+    IconLoading: iconLoadingShadow(),
+    IconChevronRight: iconChevronRight()
+  },
+  inheritAttrs: false,
+  emits: ["expand", "update:modelValue", "expand-change", "active-item-change", "change"],
+  inject: ["panel"],
+  props: _extends({}, $props, {
+    node: {
+      type: Object,
+      required: true
+    },
+    nodeId: String
+  }),
+  setup: function setup$1(props, context) {
+    return setup({
+      props,
+      context,
+      renderless,
+      api
+    });
+  },
+  render: function render() {
+    var _this = this;
+    var h = arguments[0];
+    var renderPrefix = function renderPrefix2() {
+      var _this$state = _this.state, isLeaf = _this$state.isLeaf, isChecked = _this$state.isChecked, config = _this$state.config;
+      var checkStrictly2 = config.checkStrictly, multiple2 = config.multiple;
+      if (multiple2) {
+        return renderCheckbox();
+      } else if (checkStrictly2) {
+        return renderRadio();
+      } else if (isLeaf && isChecked) {
+        return renderCheckIcon();
+      }
+      return null;
+    };
+    var renderPostfix = function renderPostfix2() {
+      var node = _this.node, state2 = _this.state;
+      if (node.loading) {
+        return renderLoadingIcon();
+      } else if (!state2.isLeaf) {
+        return renderExpandIcon();
+      }
+      return null;
+    };
+    var stopPropagation = function stopPropagation2(e) {
+      return e.stopPropagation();
+    };
+    var renderCheckbox = function renderCheckbox2() {
+      var state2 = _this.state, node = _this.node;
+      return h("tiny-checkbox", {
+        "attrs": {
+          "modelValue": node.checked,
+          "indeterminate": !node.checked && node.indeterminate,
+          "disabled": state2.isDisabled
+        },
+        "on": {
+          "change": _this.handleMultiCheckChange,
+          "click": stopPropagation
+        }
+      });
+    };
+    var renderRadio = function renderRadio2() {
+      var _this$state2 = _this.state, checkedValue = _this$state2.checkedValue, value = _this$state2.value, isDisabled = _this$state2.isDisabled;
+      if (isEqual(value, checkedValue)) {
+        value = checkedValue;
+      }
+      return h("tiny-radio", {
+        "attrs": {
+          "disabled": isDisabled,
+          "label": value
+        },
+        "on": {
+          "click": stopPropagation,
+          "change": _this.handleCheckChange
+        },
+        "model": {
+          value: checkedValue,
+          callback: function callback($$v) {
+            checkedValue = $$v;
+          }
+        }
+      }, [h("span")]);
+    };
+    var renderCheckIcon = function renderCheckIcon2() {
+      return h("icon-yes", {
+        "class": "tiny-cascader-node__prefix"
+      });
+    };
+    var renderLoadingIcon = function renderLoadingIcon2() {
+      return h("icon-loading", {
+        "class": "tiny-cascader-node__postfix"
+      });
+    };
+    var renderExpandIcon = function renderExpandIcon2() {
+      return h("icon-chevron-right", {
+        "class": "tiny-cascader-node__postfix"
+      });
+    };
+    var renderContent = function renderContent2() {
+      var panel = _this.panel, node = _this.node;
+      var render2 = panel.state.renderLabelFn;
+      var vnode = render2 ? render2({
+        node,
+        data: node.data
+      }) : null;
+      return h("span", {
+        "class": "tiny-cascader-node__label"
+      }, [vnode || node.label]);
+    };
+    var state = this.state;
+    var _state$config = state.config, checkStrictly = _state$config.checkStrictly, expandTrigger = _state$config.expandTrigger, multiple = _state$config.multiple;
+    var disabled = !checkStrictly && state.isDisabled;
+    var events = {};
+    events.on = {};
+    if (expandTrigger === "click") {
+      events.on.click = this.handleExpand;
+    } else {
+      var handler = function handler2(e) {
+        _this.handleExpand();
+        _this.$emit("expand", e);
+      };
+      events.on.mouseenter = handler;
+      events.on.focus = handler;
+    }
+    if (state.isLeaf && !(state.isDisabled || checkStrictly || multiple)) {
+      events.on.click = this.handleCheckChange;
+    }
+    return h("li", _extends({
+      attrs: {
+        role: "menuitem",
+        id: this.nodeId,
+        tabindex: disabled ? null : -1,
+        "aria-expanded": state.inActivePath
+      },
+      class: {
+        "tiny-cascader-node": true,
+        "is-selectable": checkStrictly,
+        "in-active-path": state.inActivePath,
+        "in-checked-path": state.inCheckedPath,
+        "is-active": state.isChecked,
+        "is-disabled": disabled
+      }
+    }, events), [renderPrefix(), renderContent(), renderPostfix()]);
+  }
+});
+var __vue2_render, __vue2_staticRenderFns;
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, __vue2_render, __vue2_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,23 @@
+{
+  "name": "@opentinyvue/vue-cascader-node",
+  "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-checkbox": "~2.21.0",
+    "@opentinyvue/vue-radio": "~2.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0",
+    "@opentinyvue/vue-theme": "~3.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+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.vue.d.ts

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

package/src/token.d.ts

@@ -0,0 +1,12 @@
+export declare const classes: {
+    'cascader-node__postfix': string;
+    'cascader-node__label_disabled': string;
+    'cascader-node': string;
+    'is-selectable': string;
+    'in-active-path': string;
+    'in-checked-path': string;
+    'in-active': string;
+    'node-active': string;
+    'cascader-node_disabled': string;
+    'in-active_disabled': string;
+};