vft 0.0.1 → 0.0.2

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

@@ -1,218 +0,0 @@
-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

@@ -1,197 +0,0 @@
-<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

@@ -1,83 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,31 +0,0 @@
-# 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

@@ -1,54 +0,0 @@
-$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

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