@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/cascader-panel/cascader-menu.vue

@@ -1,138 +0,0 @@
-<script lang="jsx"  type="text/jsx">
-import BaseScrollbar from '../scrollbar/index';
-import CascaderNode from './cascader-node.vue';
-import Locale from '../mixin/locale';
-import { generateId } from '../util/index';
-
-export default {
-  name: 'BaseCascaderMenu',
-
-  mixins: [Locale],
-
-  inject: ['panel'],
-
-  components: {
-    BaseScrollbar,
-    CascaderNode
-  },
-
-  props: {
-    nodes: {
-      type: Array,
-      required: true
-    },
-    index: Number
-  },
-
-  data() {
-    return {
-      activeNode: null,
-      hoverTimer: null,
-      id: generateId()
-    };
-  },
-
-  computed: {
-    isEmpty() {
-      return !this.nodes.length;
-    },
-    menuId() {
-      return `cascader-menu-${this.id}-${this.index}`;
-    }
-  },
-
-  methods: {
-    handleExpand(e) {
-      this.activeNode = e.target;
-    },
-    handleMouseMove(e) {
-      const { activeNode, hoverTimer } = this;
-      const { hoverZone } = this.$refs;
-
-      if (!activeNode || !hoverZone) return;
-
-      if (activeNode.contains(e.target)) {
-        clearTimeout(hoverTimer);
-
-        const { left } = this.$el.getBoundingClientRect();
-        const startX = e.clientX - left;
-        const { offsetWidth, offsetHeight } = this.$el;
-        const top = activeNode.offsetTop;
-        const bottom = top + activeNode.offsetHeight;
-
-        hoverZone.innerHTML = `
-          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} 0 V${top} Z" />
-          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
-        `;
-      } else if (!hoverTimer) {
-        this.hoverTimer = setTimeout(this.clearHoverZone, this.panel.config.hoverThreshold);
-      }
-    },
-    clearHoverZone() {
-      const { hoverZone } = this.$refs;
-      if (!hoverZone) return;
-      hoverZone.innerHTML = '';
-    },
-
-    renderEmptyText(h) {
-      return (
-        <div class="base-cascader-menu__empty-text">{ this.t('base.cascader.noData') }</div>
-      );
-    },
-    renderNodeList(h) {
-      const { menuId } = this;
-      const { isHoverMenu } = this.panel;
-      const events = { on: {} };
-
-      if (isHoverMenu) {
-        events.on.expand = this.handleExpand;
-      }
-
-      const nodes = this.nodes.map((node, index) => {
-        const { hasChildren } = node;
-        return (
-          <cascader-node
-            key={ node.uid }
-            node={ node }
-            node-id={ `${menuId}-${index}` }
-            aria-haspopup={ hasChildren }
-            aria-owns = { hasChildren ? menuId : null }
-            { ...events }></cascader-node>
-        );
-      });
-
-      return [
-        ...nodes,
-        isHoverMenu ? <svg ref='hoverZone' class='base-cascader-menu__hover-zone'></svg> : null
-      ];
-    }
-  },
-
-  render(h) {
-    const { isEmpty, menuId } = this;
-    const events = { nativeOn: {} };
-
-    // optimize hover to expand experience (#8010)
-    if (this.panel.isHoverMenu) {
-      events.nativeOn.mousemove = this.handleMouseMove;
-      // events.nativeOn.mouseleave = this.clearHoverZone;
-    }
-
-    return (
-      <base-scrollbar
-        tag="ul"
-        role="menu"
-        id={ menuId }
-        class="base-cascader-menu"
-        wrap-class="base-cascader-menu__wrap"
-        view-class={{
-          'base-cascader-menu__list': true,
-          'is-empty': isEmpty
-        }}
-        { ...events }>
-        { isEmpty ? this.renderEmptyText(h) : this.renderNodeList(h) }
-      </base-scrollbar>
-    );
-  }
-};
-</script>

package/src/components/base/ui/cascader-panel/cascader-node.vue

@@ -1,246 +0,0 @@
-<script lang="jsx">
-  import BaseCheckbox from '../checkbox/checkbox';
-  import BaseRadio from '../radio/radio';
-  import { isEqual } from '../util/index';
-
-  const stopPropagation = e => e.stopPropagation();
-
-  export default {
-    inject: ['panel'],
-
-    components: {
-      BaseCheckbox,
-      BaseRadio
-    },
-
-    props: {
-      node: {
-        required: true
-      },
-      nodeId: String
-    },
-
-    computed: {
-      config() {
-        return this.panel.config;
-      },
-      isLeaf() {
-        return this.node.isLeaf;
-      },
-      isDisabled() {
-        return this.node.isDisabled;
-      },
-      checkedValue() {
-        return this.panel.checkedValue;
-      },
-      isChecked() {
-        return this.node.isSameNode(this.checkedValue);
-      },
-      inActivePath() {
-        return this.isInPath(this.panel.activePath);
-      },
-      inCheckedPath() {
-        if (!this.config.checkStrictly) return false;
-
-        return this.panel.checkedNodePaths
-          .some(checkedPath => this.isInPath(checkedPath));
-      },
-      value() {
-        return this.node.getValueByOption();
-      }
-    },
-
-    methods: {
-      handleExpand() {
-        const { panel, node, isDisabled, config } = this;
-        const { multiple, checkStrictly } = config;
-
-        if (!checkStrictly && isDisabled || node.loading) return;
-
-        if (config.lazy && !node.loaded) {
-          panel.lazyLoad(node, () => {
-            // do not use cached leaf value here, invoke this.isLeaf to get new value.
-            const { isLeaf } = this;
-
-            if (!isLeaf) this.handleExpand();
-            if (multiple) {
-              // if leaf sync checked state, else clear checked state
-              const checked = isLeaf ? node.checked : false;
-              this.handleMultiCheckChange(checked);
-            }
-          });
-        } else {
-          panel.handleExpand(node);
-        }
-      },
-
-      handleCheckChange() {
-        const { panel, value, node } = this;
-        panel.handleCheckChange(value);
-        panel.handleExpand(node);
-      },
-
-      handleMultiCheckChange(checked) {
-        this.node.doCheck(checked);
-        this.panel.calculateMultiCheckedValue();
-      },
-
-      isInPath(pathNodes) {
-        const { node } = this;
-        const selectedPathNode = pathNodes[node.level - 1] || {};
-        return selectedPathNode.uid === node.uid;
-      },
-
-      renderPrefix(h) {
-        const { isLeaf, isChecked, config } = this;
-        const { checkStrictly, multiple } = config;
-
-        if (multiple) {
-          return this.renderCheckbox(h);
-        } else if (checkStrictly) {
-          return this.renderRadio(h);
-        } else if (isLeaf && isChecked) {
-          return this.renderCheckIcon(h);
-        }
-
-        return null;
-      },
-
-      renderPostfix(h) {
-        const { node, isLeaf } = this;
-
-        if (node.loading) {
-          return this.renderLoadingIcon(h);
-        } else if (!isLeaf) {
-          return this.renderExpandIcon(h);
-        }
-
-        return null;
-      },
-
-      renderCheckbox(h) {
-        const { node, config, isDisabled } = this;
-        const events = {
-          on: { change: this.handleMultiCheckChange },
-          nativeOn: {}
-        };
-
-        if (config.checkStrictly) { // when every node is selectable, click event should not trigger expand event.
-          events.nativeOn.click = stopPropagation;
-        }
-
-        return (
-          <base-checkbox
-            value={ node.checked }
-            indeterminate={ node.indeterminate }
-            disabled={ isDisabled }
-            { ...events }
-          ></base-checkbox>
-        );
-      },
-
-      renderRadio(h) {
-        let { checkedValue, value, isDisabled } = this;
-
-        // to keep same reference if value cause radio's checked state is calculated by reference comparision;
-        if (isEqual(value, checkedValue)) {
-          value = checkedValue;
-        }
-
-        return (
-          <base-radio
-            value={ checkedValue }
-            label={ value }
-            disabled={ isDisabled }
-            onChange={ this.handleCheckChange }
-            nativeOnClick={ stopPropagation }>
-            {/* add an empty element to avoid render label */}
-            <span></span>
-          </base-radio>
-        );
-      },
-
-      renderCheckIcon(h) {
-        return (
-          <i class="base-icon-check base-cascader-node__prefix"></i>
-        );
-      },
-
-      renderLoadingIcon(h) {
-        return (
-          <i class="base-icon-loading base-cascader-node__postfix"></i>
-        );
-      },
-
-      renderExpandIcon(h) {
-        return (
-          <i class="base-icon-arrow-right base-cascader-node__postfix"></i>
-        );
-      },
-
-      renderContent(h) {
-        const { panel, node } = this;
-        const render = panel.renderLabelFn;
-        const vnode = render
-          ? render({ node, data: node.data })
-          : null;
-
-        return (
-          <span class="base-cascader-node__label">{ vnode || node.label }</span>
-        );
-      }
-    },
-
-    render(h) {
-      const {
-        inActivePath,
-        inCheckedPath,
-        isChecked,
-        isLeaf,
-        isDisabled,
-        config,
-        nodeId
-      } = this;
-      const { expandTrigger, checkStrictly, multiple } = config;
-      const disabled = !checkStrictly && isDisabled;
-      const events = { on: {} };
-
-      if (expandTrigger === 'click') {
-        events.on.click = this.handleExpand;
-      } else {
-        events.on.mouseenter = e => {
-          this.handleExpand();
-          this.$emit('expand', e);
-        };
-        events.on.focus = e => {
-          this.handleExpand();
-          this.$emit('expand', e);
-        };
-      }
-      if (isLeaf && !isDisabled && !checkStrictly && !multiple) {
-        events.on.click = this.handleCheckChange;
-      }
-
-      return (
-        <li
-          role="menuitem"
-          id={ nodeId }
-          aria-expanded={ inActivePath }
-          tabindex={ disabled ? null : -1 }
-          class={{
-            'base-cascader-node': true,
-            'is-selectable': checkStrictly,
-            'in-active-path': inActivePath,
-            'in-checked-path': inCheckedPath,
-            'is-active': isChecked,
-            'is-disabled': disabled
-          }}
-          {...events}>
-          { this.renderPrefix(h) }
-          { this.renderContent(h) }
-          { this.renderPostfix(h) }
-        </li>
-      );
-    }
-  };
-</script>