vft 0.0.1

package/src/web/cascader-panel/node.ts

@@ -0,0 +1,218 @@
+import { isFunction } from '@vue/shared';
+import { capitalize, isEmpty, isUndefined } from '@vri/utils';
+import type { VNode } from 'vue';
+
+export type CascaderNodeValue = string | number
+export type CascaderNodePathValue = CascaderNodeValue[]
+export type CascaderValue =
+  | CascaderNodeValue
+  | CascaderNodePathValue
+  | (CascaderNodeValue | CascaderNodePathValue)[]
+export type CascaderConfig = Required<CascaderProps>
+export type ExpandTrigger = 'click' | 'hover'
+export type isDisabled = (data: CascaderOption, node: Node) => boolean
+export type isLeaf = (data: CascaderOption, node: Node) => boolean
+export type Resolve = (dataList?: CascaderOption[]) => void
+export type LazyLoad = (node: Node, resolve: Resolve) => void
+export type RenderLabel = ({
+  node: Node,
+  data: CascaderOption
+}) => VNode | VNode[]
+export interface CascaderOption extends Record<string, unknown> {
+  label?: string
+  value?: CascaderNodeValue
+  children?: CascaderOption[]
+  disabled?: boolean
+  leaf?: boolean
+}
+
+export interface CascaderProps {
+  expandTrigger?: ExpandTrigger
+  multiple?: boolean
+  checkStrictly?: boolean
+  emitPath?: boolean
+  lazy?: boolean
+  lazyLoad?: LazyLoad
+  value?: string
+  label?: string
+  children?: string
+  disabled?: string | isDisabled
+  leaf?: string | isLeaf
+  hoverThreshold?: number
+}
+
+export type Nullable<T> = null | T
+
+type ChildrenData = CascaderOption[] | undefined
+
+let uid = 0;
+
+const calculatePathNodes = (node: Node) => {
+  const nodes = [node];
+  let { parent } = node;
+
+  while (parent) {
+    nodes.unshift(parent);
+    parent = parent.parent;
+  }
+
+  return nodes;
+};
+
+class Node {
+  readonly uid: number = uid++;
+  readonly level: number;
+  readonly value: CascaderNodeValue;
+  readonly label: string;
+  readonly pathNodes: Node[];
+  readonly pathValues: CascaderNodePathValue;
+  readonly pathLabels: string[];
+
+  childrenData: ChildrenData;
+  children: Node[];
+  text: string;
+  loaded: boolean;
+  checked = false;
+  indeterminate = false;
+  loading = false;
+
+  constructor(
+    readonly data: Nullable<CascaderOption>,
+    readonly config: CascaderConfig,
+    readonly parent?: Node,
+    readonly root = false
+  ) {
+    const { value: valueKey, label: labelKey, children: childrenKey } = config;
+
+    const childrenData = data[childrenKey] as ChildrenData;
+    const pathNodes = calculatePathNodes(this);
+
+    this.level = root ? 0 : parent ? parent.level + 1 : 1;
+    this.value = data[valueKey] as CascaderNodeValue;
+    this.label = data[labelKey] as string;
+    this.pathNodes = pathNodes;
+    this.pathValues = pathNodes.map((node) => node.value);
+    this.pathLabels = pathNodes.map((node) => node.label);
+    this.childrenData = childrenData;
+    this.children = (childrenData || []).map(
+      (child) => new Node(child, config, this)
+    );
+    this.loaded = !config.lazy || this.isLeaf || !isEmpty(childrenData);
+  }
+
+  get isDisabled(): boolean {
+    const { data, parent, config } = this;
+    const { disabled, checkStrictly } = config;
+    const isDisabled = isFunction(disabled)
+      ? disabled(data, this)
+      : !!data[disabled];
+    return isDisabled || (!checkStrictly && parent?.isDisabled);
+  }
+
+  get isLeaf(): boolean {
+    const { data, config, childrenData, loaded } = this;
+    const { lazy, leaf } = config;
+    const isLeaf = isFunction(leaf) ? leaf(data, this) : data[leaf];
+
+    return isUndefined(isLeaf)
+      ? lazy && !loaded
+        ? false
+        : !(Array.isArray(childrenData) && childrenData.length)
+      : !!isLeaf;
+  }
+
+  get valueByOption() {
+    return this.config.emitPath ? this.pathValues : this.value;
+  }
+
+  appendChild(childData: CascaderOption) {
+    const { childrenData, children } = this;
+    const node = new Node(childData, this.config, this);
+
+    if (Array.isArray(childrenData)) {
+      childrenData.push(childData);
+    } else {
+      this.childrenData = [childData];
+    }
+
+    children.push(node);
+
+    return node;
+  }
+
+  calcText(allLevels: boolean, separator: string) {
+    const text = allLevels ? this.pathLabels.join(separator) : this.label;
+    this.text = text;
+    return text;
+  }
+
+  broadcast(event: string, ...args: unknown[]) {
+    const handlerName = `onParent${capitalize(event)}`;
+    this.children.forEach((child) => {
+      if (child) {
+        // bottom up
+        child.broadcast(event, ...args);
+        child[handlerName] && child[handlerName](...args);
+      }
+    });
+  }
+
+  emit(event: string, ...args: unknown[]) {
+    const { parent } = this;
+    const handlerName = `onChild${capitalize(event)}`;
+    if (parent) {
+      parent[handlerName] && parent[handlerName](...args);
+      parent.emit(event, ...args);
+    }
+  }
+
+  onParentCheck(checked: boolean) {
+    if (!this.isDisabled) {
+      this.setCheckState(checked);
+    }
+  }
+
+  onChildCheck() {
+    const { children } = this;
+    const validChildren = children.filter((child) => !child.isDisabled);
+    const checked = validChildren.length
+      ? validChildren.every((child) => child.checked)
+      : false;
+
+    this.setCheckState(checked);
+  }
+
+  setCheckState(checked: boolean) {
+    const totalNum = this.children.length;
+    const checkedNum = this.children.reduce((c, p) => {
+      const num = p.checked ? 1 : p.indeterminate ? 0.5 : 0;
+      return c + num;
+    }, 0);
+
+    this.checked =
+      this.loaded &&
+      this.children
+        .filter((child) => !child.isDisabled)
+        .every((child) => child.loaded && child.checked) &&
+      checked;
+    this.indeterminate =
+      this.loaded && checkedNum !== totalNum && checkedNum > 0;
+  }
+
+  doCheck(checked: boolean) {
+    if (this.checked === checked) return;
+
+    const { checkStrictly, multiple } = this.config;
+
+    if (checkStrictly || !multiple) {
+      this.checked = checked;
+    } else {
+      // bottom up to unify the calculation of the indeterminate state
+      this.broadcast('check', checked);
+      this.setCheckState(checked);
+      this.emit('check');
+    }
+  }
+}
+
+export default Node;

package/src/web/cascader-panel/node.vue

@@ -0,0 +1,197 @@
+<template>
+  <li
+    :id="`${menuId}-${node.uid}`"
+    role="menuitem"
+    :aria-haspopup="!isLeaf"
+    :aria-owns="isLeaf ? null : menuId"
+    :aria-expanded="inExpandingPath"
+    :tabindex="expandable ? -1 : undefined"
+    :class="[
+      ns.b(),
+      ns.is('selectable', checkStrictly),
+      ns.is('active', node.checked),
+      ns.is('disabled', !expandable),
+      inExpandingPath && 'in-active-path',
+      inCheckedPath && 'in-checked-path',
+    ]"
+    @mouseenter="handleHoverExpand"
+    @focus="handleHoverExpand"
+    @click="handleClick"
+  >
+    <!-- prefix -->
+    <el-checkbox
+      v-if="multiple"
+      :model-value="node.checked"
+      :indeterminate="node.indeterminate"
+      :disabled="isDisabled"
+      @click.stop
+      @update:model-value="handleSelectCheck"
+    />
+    <el-radio
+      v-else-if="checkStrictly"
+      :model-value="checkedNodeId"
+      :label="node.uid"
+      :disabled="isDisabled"
+      @update:model-value="handleSelectCheck"
+      @click.stop
+    >
+      <!--
+        Add an empty element to avoid render label,
+        do not use empty fragment here for https://github.com/vuejs/vue-next/pull/2485
+      -->
+      <span />
+    </el-radio>
+    <v-icon v-else-if="isLeaf && node.checked" :class="ns.e('prefix')" icon="vi-success"
+      :size="14" color="rgb(64, 158, 255)"/>
+
+    <!-- content -->
+    <node-content />
+
+    <!-- postfix -->
+    <template v-if="!isLeaf">
+      <v-icon v-if="node.loading" :class="[ns.is('loading'), ns.e('postfix')]" icon="vi-loading" :size="16" />
+      <v-icon v-else :class="['arrow-right', ns.e('postfix')]" icon="vi-arrow-right"
+        :size="16" />
+    </template>
+  </li>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject } from 'vue';
+import {
+  ElCheckbox,
+  ElRadio
+} from 'element-plus';
+import { useNamespace } from '../../use';
+import NodeContent from './node-content';
+import { CASCADER_PANEL_INJECTION_KEY } from './types';
+import type { default as CascaderNode } from './node';
+import { Icon as VIcon } from '../../common';
+import type { PropType } from 'vue';
+
+export default defineComponent({
+  name: 'VriCascaderNode',
+  components: {
+    ElCheckbox,
+    ElRadio,
+    NodeContent,
+    VIcon
+  },
+  props: {
+    node: {
+      type: Object as PropType<CascaderNode>,
+      required: true
+    },
+    menuId: String
+  },
+  emits: ['expand'],
+  setup (props, { emit }) {
+    const panel = inject(CASCADER_PANEL_INJECTION_KEY)!;
+
+    const ns = useNamespace('cascader-node');
+    const isHoverMenu = computed(() => panel.isHoverMenu);
+    const multiple = computed(() => panel.config.multiple);
+    const checkStrictly = computed(() => panel.config.checkStrictly);
+    const checkedNodeId = computed(() => panel.checkedNodes[0]?.uid);
+    const isDisabled = computed(() => props.node.isDisabled);
+    const isLeaf = computed(() => props.node.isLeaf);
+    const expandable = computed(
+      () => (checkStrictly.value && !isLeaf.value) || !isDisabled.value
+    );
+    const inExpandingPath = computed(() => isInPath(panel.expandingNode!));
+    // only useful in check-strictly mode
+    const inCheckedPath = computed(
+      () => checkStrictly.value && panel.checkedNodes.some(isInPath)
+    );
+
+    const isInPath = (node: CascaderNode) => {
+      const { level, uid } = props.node;
+      return node?.pathNodes[level - 1]?.uid === uid;
+    };
+
+    const doExpand = () => {
+      if (inExpandingPath.value) return;
+      panel.expandNode(props.node);
+    };
+
+    const doCheck = (checked: boolean) => {
+      const { node } = props;
+      if (checked === node.checked) return;
+      panel.handleCheckChange(node, checked);
+    };
+
+    const doLoad = () => {
+      panel.lazyLoad(props.node, () => {
+        if (!isLeaf.value) doExpand();
+      });
+    };
+
+    const handleHoverExpand = (e: Event) => {
+      if (!isHoverMenu.value) return;
+      handleExpand();
+      !isLeaf.value && emit('expand', e);
+    };
+
+    const handleExpand = () => {
+      const { node } = props;
+      // do not exclude leaf node because the menus expanded might have to reset
+      if (!expandable.value || node.loading) return;
+      node.loaded ? doExpand() : doLoad();
+    };
+
+    const handleClick = () => {
+      if (isHoverMenu.value && !isLeaf.value) return;
+
+      if (
+        isLeaf.value &&
+        !isDisabled.value &&
+        !checkStrictly.value &&
+        !multiple.value
+      ) {
+        handleCheck(true);
+      } else {
+        handleExpand();
+      }
+    };
+
+    const handleSelectCheck = (checked: boolean) => {
+      if (checkStrictly.value) {
+        doCheck(checked);
+        if (props.node.loaded) {
+          doExpand();
+        }
+      } else {
+        handleCheck(checked);
+      }
+    };
+
+    const handleCheck = (checked: boolean) => {
+      if (!props.node.loaded) {
+        doLoad();
+      } else {
+        doCheck(checked);
+        !checkStrictly.value && doExpand();
+      }
+    };
+
+    return {
+      panel,
+      isHoverMenu,
+      multiple,
+      checkStrictly,
+      checkedNodeId,
+      isDisabled,
+      isLeaf,
+      expandable,
+      inExpandingPath,
+      inCheckedPath,
+      ns,
+      handleHoverExpand,
+      handleExpand,
+      handleClick,
+      handleCheck,
+      handleSelectCheck
+    };
+  }
+});
+</script>

package/src/web/cascader-panel/store.ts

@@ -0,0 +1,83 @@
+import { isEqual } from 'lodash';
+import Node from './node';
+
+import type {
+  CascaderConfig,
+  CascaderNodePathValue,
+  CascaderNodeValue,
+  CascaderOption
+} from './node';
+
+const flatNodes = (nodes: Node[], leafOnly: boolean) => {
+  return nodes.reduce((res, node) => {
+    if (node.isLeaf) {
+      res.push(node);
+    } else {
+      !leafOnly && res.push(node);
+      res = res.concat(flatNodes(node.children, leafOnly));
+    }
+    return res;
+  }, [] as Node[]);
+};
+
+export default class Store {
+  readonly nodes: Node[];
+  readonly allNodes: Node[];
+  readonly leafNodes: Node[];
+
+  constructor(data: CascaderOption[], readonly config: CascaderConfig) {
+    const nodes = (data || []).map(
+      (nodeData) => new Node(nodeData, this.config)
+    );
+    this.nodes = nodes;
+    this.allNodes = flatNodes(nodes, false);
+    this.leafNodes = flatNodes(nodes, true);
+  }
+
+  getNodes() {
+    return this.nodes;
+  }
+
+  getFlattedNodes(leafOnly: boolean) {
+    return leafOnly ? this.leafNodes : this.allNodes;
+  }
+
+  appendNode(nodeData: CascaderOption, parentNode?: Node) {
+    const node = parentNode
+      ? parentNode.appendChild(nodeData)
+      : new Node(nodeData, this.config);
+
+    if (!parentNode) this.nodes.push(node);
+
+    this.allNodes.push(node);
+    node.isLeaf && this.leafNodes.push(node);
+  }
+
+  appendNodes(nodeDataList: CascaderOption[], parentNode: Node) {
+    nodeDataList.forEach((nodeData) => this.appendNode(nodeData, parentNode));
+  }
+
+  // when checkStrictly, leaf node first
+  getNodeByValue(
+    value: CascaderNodeValue | CascaderNodePathValue,
+    leafOnly = false
+  ): Nullable<Node> {
+    if (!value && value !== 0) return null;
+
+    const node = this.getFlattedNodes(leafOnly).find(
+      (node) => isEqual(node.value, value) || isEqual(node.pathValues, value)
+    );
+
+    return node || null;
+  }
+
+  getSameNode(node: Node): Nullable<Node> {
+    if (!node) return null;
+
+    const node_ = this.getFlattedNodes(false).find(
+      ({ value, level }) => isEqual(node.value, value) && node.level === level
+    );
+
+    return node_ || null;
+  }
+}

package/src/web/cascader-panel/types.ts

@@ -0,0 +1,56 @@
+import type { InjectionKey, VNode } from 'vue';
+import type {
+  default as CascaderNode,
+  CascaderOption,
+  CascaderProps,
+  ExpandTrigger
+} from './node';
+
+export type { CascaderNode, CascaderOption, CascaderProps, ExpandTrigger };
+
+export type CascaderNodeValue = string | number
+export type CascaderNodePathValue = CascaderNodeValue[]
+export type CascaderValue =
+  | CascaderNodeValue
+  | CascaderNodePathValue
+  | (CascaderNodeValue | CascaderNodePathValue)[]
+export type CascaderConfig = Required<CascaderProps>
+export type isDisabled = (data: CascaderOption, node: CascaderNode) => boolean
+export type isLeaf = (data: CascaderOption, node: CascaderNode) => boolean
+export type Resolve = (dataList?: CascaderOption[]) => void
+export type LazyLoad = (node: CascaderNode, resolve: Resolve) => void
+export type RenderLabel = ({
+  node: CascaderNode,
+  data: CascaderOption
+}) => VNode | VNode[]
+
+export interface Tag {
+  node?: CascaderNode
+  key: number
+  text: string
+  hitState?: boolean
+  closable: boolean
+  isCollapseTag: boolean
+}
+
+export interface VriCascaderPanelContext {
+  config: CascaderConfig
+  expandingNode: Nullable<CascaderNode>
+  checkedNodes: CascaderNode[]
+  isHoverMenu: boolean
+  initialLoaded: boolean
+  renderLabelFn: RenderLabel
+  lazyLoad: (
+    node?: CascaderNode,
+    cb?: (dataList: CascaderOption[]) => void
+  ) => void
+  expandNode: (node: CascaderNode, silent?: boolean) => void
+  handleCheckChange: (
+    node: CascaderNode,
+    checked: boolean,
+    emitClose?: boolean
+  ) => void
+}
+
+export const CASCADER_PANEL_INJECTION_KEY: InjectionKey<VriCascaderPanelContext> =
+  Symbol();

package/src/web/cascader-panel/utils.ts

@@ -0,0 +1,40 @@
+import { isLeaf } from '@vri/utils';
+import type { default as CascaderNode } from './node';
+
+export const getMenuIndex = (el: HTMLElement) => {
+  if (!el) return 0;
+  const pieces = el.id.split('-');
+  return Number(pieces[pieces.length - 2]);
+};
+
+export const checkNode = (el: HTMLElement) => {
+  if (!el) return;
+
+  const input = el.querySelector('input');
+  if (input) {
+    input.click();
+  } else if (isLeaf(el)) {
+    el.click();
+  }
+};
+
+export const sortByOriginalOrder = (
+  oldNodes: CascaderNode[],
+  newNodes: CascaderNode[]
+) => {
+  const newNodesCopy = newNodes.slice(0);
+  const newIds = newNodesCopy.map((node) => node.uid);
+  const res = oldNodes.reduce((acc, item) => {
+    const index = newIds.indexOf(item.uid);
+    if (index > -1) {
+      acc.push(item);
+      newNodesCopy.splice(index, 1);
+      newIds.splice(index, 1);
+    }
+    return acc;
+  }, [] as CascaderNode[]);
+
+  res.push(...newNodesCopy);
+
+  return res;
+};

package/src/web/cascader-select/README.md

@@ -0,0 +1,31 @@
+# cascader-select 级联选择组件
+
+## Usage
+
+```html
+<vri-cascader-select title="地区" :options="cascaderOptions" @submit="onCascaderSubmit"></vri-cascader-select>
+```
+
+## Props
+
+| 属性名      | 说明                          | 类型                  | 是否必传 | 默认值   |
+| ----------- | ----------------------------- | --------------------- | -------- | -------- |
+| title       | 标题名称                      | string                | 是       | -        |
+| options     | 级联选择列表                  | Array\<option props\> | 是       | -        |
+| labelKey    | 选择项名称对应的 key 名       | string                | 否       | label    |
+| valueKey    | 选择项值对应的 key 名         | string                | 否       | value    |
+| childrenKey | 选择项 children 对应的 key 名 | string                | 否       | children |
+
+### options props
+
+| 属性名                                        | 说明            | 类型   | 是否必传 | 默认值 |
+| --------------------------------------------- | --------------- | ------ | -------- | ------ |
+| [key:string] (示例: label)                    | 选择项名        | string | 是       | -      |
+| [key:string] (示例: value)                    | 选择项值        | string | 是       | -      |
+| [key:string] (示例: children\<option props\>) | 选择项 children | Array  | 否       | -      |
+
+## Event
+
+| 事件名 | 说明             | 参数                                           |
+| ------ | ---------------- | ---------------------------------------------- |
+| submit | 确认选择时的回调 | 选中项的值（对象,不同级的值整合到一个 key 中） |

package/src/web/cascader-select/index.scss

@@ -0,0 +1,54 @@
+$name: 'cascader-select';
+
+@include b($name) {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  cursor: pointer;
+  @include e(title) {
+    font-size: 13px;
+    cursor: pointer;
+    @include when(show) {
+      color: #409eff;
+    }
+  }
+
+  @include e(icon-arrow-down) {
+    transition: all 0.2s;
+    @include when(rotate) {
+      position: relative;
+      top: -1px;
+      transform: rotate(180deg);
+    }
+  }
+}
+
+@include e(dropdown) {
+  :deep(.vri-cascader-menu__wrap.vri-scrollbar__wrap) {
+    height: unset;
+    min-height: 204px;
+    max-height: 330px;
+  }
+  :deep(.vri-cascader-node) {
+    padding: 0 16px;
+    height: 30px;
+    line-height: unset;
+    .vri-cascader-node__label {
+      padding-right: 24px;
+      font-size: 13px;
+    }
+  }
+  :deep(.vri-cascader-node.in-active-path) {
+    color: unset;
+    font-weight: normal;
+  }
+  :deep(.vri-cascader-node.is-selectable.in-checked-path),
+  :deep(.vri-cascader-node.is-active) {
+    color: #409eff;
+    font-weight: normal;
+  }
+  :deep(.vri-cascader-menu__empty-text) {
+    top: 40px;
+  }
+}

package/src/web/cascader-select/index.ts

@@ -0,0 +1,5 @@
+import CascaderSelect from './index.vue';
+
+export * from './types';
+
+export { CascaderSelect };