vft 0.0.1

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

@@ -0,0 +1,44 @@
+import { computed } from 'vue';
+import { NOOP } from '@vue/shared';
+
+import type { PropType } from 'vue';
+import type {
+  CascaderConfig,
+  CascaderOption,
+  CascaderProps,
+  CascaderValue
+} from './node';
+
+export const CommonProps = {
+  modelValue: [Number, String, Array] as PropType<CascaderValue>,
+  options: {
+    type: Array as PropType<CascaderOption[]>,
+    default: () => [] as CascaderOption[]
+  },
+  props: {
+    type: Object as PropType<CascaderProps>,
+    default: () => ({} as CascaderProps)
+  }
+};
+
+export const DefaultProps: CascaderConfig = {
+  expandTrigger: 'click',
+  multiple: false,
+  checkStrictly: false, // whether all nodes can be selected
+  emitPath: true, // wether to emit an array of all levels value in which node is located
+  lazy: false,
+  lazyLoad: NOOP,
+  value: 'value',
+  label: 'label',
+  children: 'children',
+  leaf: 'leaf',
+  disabled: 'disabled',
+  hoverThreshold: 500
+};
+
+export const useCascaderConfig = (props: { props: CascaderProps }) => {
+  return computed(() => ({
+    ...DefaultProps,
+    ...props.props
+  }));
+};

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

@@ -0,0 +1,134 @@
+@include b(cascader-panel) {
+  @include set-component-css-var('cascader', $cascader);
+}
+
+@include b(cascader-panel) {
+  display: flex;
+  border-radius: getCssVar('cascader-menu', 'radius');
+  font-size: getCssVar('cascader-menu', 'font-size');
+
+  @include when(bordered) {
+    border: getCssVar('cascader-menu', 'border');
+    border-radius: getCssVar('cascader-menu', 'radius');
+  }
+}
+
+@include b(cascader-menu) {
+  min-width: 180px;
+  box-sizing: border-box;
+  color: getCssVar('cascader-menu', 'text-color');
+  border-right: getCssVar('cascader-menu', 'border');
+
+  &:last-child {
+    border-right: none;
+
+    .#{$namespace}-cascader-node {
+      padding-right: 20px;
+    }
+  }
+
+  @include e(wrap) {
+    // Raise the priority
+    &.#{$namespace}-scrollbar__wrap {
+      height: 204px;
+    }
+  }
+
+  @include e(list) {
+    position: relative;
+    min-height: 100%;
+    margin: 0;
+    padding: 6px 0;
+    list-style: none;
+    box-sizing: border-box;
+  }
+
+  @include e(hover-zone) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  @include e(empty-text) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    color: getCssVar('cascader', 'color-empty');
+
+    .is-loading {
+      margin-right: 2px;
+    }
+  }
+}
+
+@include b(cascader-node) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 30px 0 20px;
+  height: 34px;
+  line-height: 34px;
+  outline: none;
+
+  &.is-selectable.in-active-path {
+    color: getCssVar('cascader-menu', 'text-color');
+  }
+
+  &.in-active-path,
+  &.is-selectable.in-checked-path,
+  &.is-active {
+    color: getCssVar('cascader-menu', 'selected-text-color');
+    font-weight: bold;
+  }
+
+  &:not(.is-disabled) {
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      background: getCssVar('cascader-node', 'background-hover');
+    }
+  }
+
+  @include when(disabled) {
+    color: getCssVar('cascader-node', 'disabled-color');
+    cursor: not-allowed;
+  }
+
+  @include e(prefix) {
+    position: absolute;
+    left: 10px;
+  }
+
+  @include e(postfix) {
+    position: absolute;
+    right: 10px;
+  }
+
+  @include e(label) {
+    flex: 1;
+    text-align: left;
+    padding: 0 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > .el-checkbox {
+    margin-right: 0;
+  }
+
+  > .el-radio {
+    margin-right: 0;
+
+    .el-radio__label {
+      padding-left: 0;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+import CascaderPanel from './index.vue'
+
+export {
+  CascaderPanel
+}

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

@@ -0,0 +1,319 @@
+<template>
+  <div :class="ns.b('panel-container')">
+    <div :class="[ns.b('panel'), ns.is('bordered', border)]" @keydown="handleKeyDown">
+      <cascader-menu v-for="(menu, index) in menus" :key="index" :ref="(item) => (menuList[index] = item)" :index="index" :nodes="[...menu]" />
+    </div>
+    <slot name="bottom"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, nextTick, onBeforeUpdate, onMounted, provide, reactive, ref, watch } from 'vue';
+import { cloneDeep, flattenDeep, isEqual } from 'lodash';
+import { castArray, focusNode, getSibling, scrollIntoView, unique } from '../../utils';
+import { isEmpty, isClient } from '@vri/utils';
+import { CHANGE_EVENT, EVENT_CODE, UPDATE_MODEL_EVENT } from '@vri/constants';
+import { useNamespace } from '../../use';
+import CascaderMenu from './menu.vue';
+import Store from './store';
+import Node from './node';
+import { CommonProps, useCascaderConfig } from './config';
+import { checkNode, getMenuIndex, sortByOriginalOrder } from './utils';
+import { CASCADER_PANEL_INJECTION_KEY } from './types';
+
+import type { PropType } from 'vue';
+import type { default as CascaderNode, CascaderNodeValue, CascaderOption, CascaderValue, RenderLabel } from './node';
+
+import type { VriCascaderPanelContext } from './types';
+
+export default defineComponent({
+  name: 'VriCascaderPanel',
+  components: {
+    CascaderMenu
+  },
+  props: {
+    ...CommonProps,
+    border: {
+      type: Boolean,
+      default: true
+    },
+    renderLabel: Function as PropType<RenderLabel>
+  },
+  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, 'close', 'expand-change'],
+  setup(props, { emit, slots }) {
+    // for interrupt sync check status in lazy mode
+    let manualChecked = false;
+
+    const ns = useNamespace('cascader');
+    const config = useCascaderConfig(props);
+
+    let store: Nullable<Store> = null;
+    const initialLoaded = ref(true);
+    const menuList = ref<any[]>([]);
+    const checkedValue = ref<Nullable<CascaderValue>>(null);
+    const menus = ref<CascaderNode[][]>([]);
+    const expandingNode = ref<Nullable<CascaderNode>>(null);
+    const checkedNodes = ref<CascaderNode[]>([]);
+
+    const isHoverMenu = computed(() => config.value.expandTrigger === 'hover');
+    const renderLabelFn = computed(() => props.renderLabel || slots.default);
+
+    const initStore = () => {
+      const { options } = props;
+      const cfg = config.value;
+
+      manualChecked = false;
+      store = new Store(options, cfg);
+      menus.value = [store.getNodes()];
+
+      if (cfg.lazy && isEmpty(props.options)) {
+        initialLoaded.value = false;
+        lazyLoad(undefined, (list) => {
+          if (list) {
+            store = new Store(list, cfg);
+            menus.value = [store.getNodes()];
+          }
+          initialLoaded.value = true;
+          syncCheckedValue(false, true);
+        });
+      } else {
+        syncCheckedValue(false, true);
+      }
+    };
+
+    const lazyLoad: VriCascaderPanelContext['lazyLoad'] = (node, cb) => {
+      const cfg = config.value;
+      node! = node || new Node({}, cfg, undefined, true);
+      node.loading = true;
+
+      const resolve = (dataList: CascaderOption[]) => {
+        const _node = node as Node;
+        const parent = _node.root ? null : _node;
+        dataList && store?.appendNodes(dataList, parent as any);
+        _node.loading = false;
+        _node.loaded = true;
+        _node.childrenData = _node.childrenData || [];
+        cb && cb(dataList);
+      };
+
+      cfg.lazyLoad(node, resolve as any);
+    };
+
+    const expandNode: VriCascaderPanelContext['expandNode'] = (node, silent) => {
+      const { level } = node;
+      const newMenus = menus.value.slice(0, level);
+      let newExpandingNode: Nullable<CascaderNode>;
+
+      if (node.isLeaf) {
+        newExpandingNode = node.pathNodes[level - 2];
+      } else {
+        newExpandingNode = node;
+        newMenus.push(node.children);
+      }
+
+      if (expandingNode.value?.uid !== newExpandingNode?.uid) {
+        expandingNode.value = node;
+        menus.value = newMenus;
+        !silent && emit('expand-change', node?.pathValues || []);
+      }
+    };
+
+    const handleCheckChange: VriCascaderPanelContext['handleCheckChange'] = (node, checked, emitClose = true) => {
+      const { checkStrictly, multiple } = config.value;
+      const oldNode = checkedNodes.value[0];
+      manualChecked = true;
+
+      !multiple && oldNode?.doCheck(false);
+      node.doCheck(checked);
+      calculateCheckedValue();
+      emitClose && !multiple && !checkStrictly && emit('close');
+      !emitClose && !multiple && !checkStrictly && expandParentNode(node);
+    };
+
+    const expandParentNode = (node) => {
+      if (!node) return;
+      node = node.parent;
+      expandParentNode(node);
+      node && expandNode(node);
+    };
+
+    const getFlattedNodes = (leafOnly: boolean) => {
+      return store?.getFlattedNodes(leafOnly);
+    };
+
+    const getCheckedNodes = (leafOnly: boolean) => {
+      return getFlattedNodes(leafOnly)?.filter((node) => node.checked !== false);
+    };
+
+    const clearCheckedNodes = () => {
+      checkedNodes.value.forEach((node) => node.doCheck(false));
+      calculateCheckedValue();
+    };
+
+    const calculateCheckedValue = () => {
+      const { checkStrictly, multiple } = config.value;
+      const oldNodes = checkedNodes.value;
+      const newNodes = getCheckedNodes(!checkStrictly)!;
+      // ensure the original order
+      const nodes = sortByOriginalOrder(oldNodes, newNodes);
+      const values = nodes.map((node) => node.valueByOption);
+      checkedNodes.value = nodes;
+      checkedValue.value = multiple ? values : values[0] ?? null;
+    };
+
+    const syncCheckedValue = (loaded = false, forced = false) => {
+      const { modelValue } = props;
+      const { lazy, multiple, checkStrictly } = config.value;
+      const leafOnly = !checkStrictly;
+
+      if (!initialLoaded.value || manualChecked || (!forced && isEqual(modelValue, checkedValue.value))) return;
+
+      if (lazy && !loaded) {
+        const values: CascaderNodeValue[] = unique(flattenDeep(castArray(modelValue)));
+        const nodes = values.map((val) => store?.getNodeByValue(val)).filter((node) => !!node && !node.loaded && !node.loading) as Node[];
+
+        if (nodes.length) {
+          nodes.forEach((node) => {
+            lazyLoad(node, () => syncCheckedValue(false, forced));
+          });
+        } else {
+          syncCheckedValue(true, forced);
+        }
+      } else {
+        const values = multiple ? castArray(modelValue) : [modelValue];
+        const nodes = unique(values.map((val) => store?.getNodeByValue(val, leafOnly))) as Node[];
+        syncMenuState(nodes, forced);
+        checkedValue.value = cloneDeep(modelValue);
+      }
+    };
+
+    const syncMenuState = (newCheckedNodes: CascaderNode[], reserveExpandingState = true) => {
+      const { checkStrictly } = config.value;
+      const oldNodes = checkedNodes.value;
+      const newNodes = newCheckedNodes.filter((node) => !!node && (checkStrictly || node.isLeaf));
+      const oldExpandingNode = store?.getSameNode(expandingNode.value!);
+      const newExpandingNode = (reserveExpandingState && oldExpandingNode) || newNodes[0];
+
+      if (newExpandingNode) {
+        newExpandingNode.pathNodes.forEach((node) => expandNode(node, true));
+      } else {
+        expandingNode.value = null;
+      }
+
+      oldNodes.forEach((node) => node.doCheck(false));
+      newNodes.forEach((node) => node.doCheck(true));
+
+      checkedNodes.value = newNodes;
+      nextTick(scrollToExpandingNode);
+    };
+
+    const scrollToExpandingNode = () => {
+      if (!isClient) return;
+
+      menuList.value.forEach((menu) => {
+        const menuElement = menu?.$el;
+        if (menuElement) {
+          const container = menuElement.querySelector(`.${ns.namespace.value}-scrollbar__wrap`);
+          const activeNode = menuElement.querySelector(`.${ns.b('node')}.${ns.is('active')}`) || menuElement.querySelector(`.${ns.b('node')}.in-active-path`);
+          scrollIntoView(container, activeNode);
+        }
+      });
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+      const { code } = e;
+
+      switch (code) {
+        case EVENT_CODE.up:
+        case EVENT_CODE.down: {
+          e.preventDefault();
+          const distance = code === EVENT_CODE.up ? -1 : 1;
+          focusNode(getSibling(target, distance, `.${ns.b('node')}[tabindex="-1"]`));
+          break;
+        }
+        case EVENT_CODE.left: {
+          e.preventDefault();
+          const preMenu = menuList.value[getMenuIndex(target) - 1];
+          const expandedNode = preMenu?.$el.querySelector(`.${ns.b('node')}[aria-expanded="true"]`);
+          focusNode(expandedNode);
+          break;
+        }
+        case EVENT_CODE.right: {
+          e.preventDefault();
+          const nextMenu = menuList.value[getMenuIndex(target) + 1];
+          const firstNode = nextMenu?.$el.querySelector(`.${ns.b('node')}[tabindex="-1"]`);
+          focusNode(firstNode);
+          break;
+        }
+        case EVENT_CODE.enter:
+          checkNode(target);
+          break;
+      }
+    };
+
+    provide(
+      CASCADER_PANEL_INJECTION_KEY,
+      reactive({
+        config,
+        expandingNode,
+        checkedNodes,
+        isHoverMenu,
+        initialLoaded,
+        renderLabelFn,
+        lazyLoad,
+        expandNode,
+        handleCheckChange
+      })
+    );
+
+    watch([config, () => props.options], initStore, {
+      deep: true,
+      immediate: true
+    });
+
+    watch(
+      () => props.modelValue,
+      () => {
+        manualChecked = false;
+        syncCheckedValue();
+      },
+      {
+        deep: true
+      }
+    );
+
+    watch(
+      () => checkedValue.value,
+      (val) => {
+        if (!isEqual(val, props.modelValue)) {
+          emit(UPDATE_MODEL_EVENT, val);
+          emit(CHANGE_EVENT, val);
+        }
+      }
+    );
+
+    onBeforeUpdate(() => (menuList.value = []));
+
+    onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue());
+
+    return {
+      ns,
+      menuList,
+      menus,
+      checkedNodes,
+      handleKeyDown,
+      handleCheckChange,
+      getFlattedNodes,
+      getCheckedNodes,
+      clearCheckedNodes,
+      calculateCheckedValue,
+      scrollToExpandingNode
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

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

@@ -0,0 +1,135 @@
+<template>
+  <v-scrollbar
+    :key="menuId"
+    tag="ul"
+    role="menu"
+    :class="ns.b()"
+    :wrap-class="ns.e('wrap')"
+    :view-class="[ns.e('list'), ns.is('empty', isEmpty)]"
+    @mousemove="handleMouseMove"
+    @mouseleave="clearHoverZone"
+  >
+    <v-cascader-node
+      v-for="node in nodes"
+      :key="node.uid"
+      :node="node"
+      :menu-id="menuId"
+      @expand="handleExpand"
+    />
+    <div v-if="isLoading" :class="ns.e('empty-text')">
+      <!--<el-icon size="14" :class="ns.is('loading')">-->
+      <!--  <loading />-->
+      <!--</el-icon>-->
+      <v-icon :class="ns.is('loading')" icon="vi-loading" :size="16"/>
+      加载中
+    </div>
+    <div v-else-if="isEmpty" :class="ns.e('empty-text')">
+      暂无数据
+    </div>
+    <svg
+      v-else-if="panel?.isHoverMenu"
+      ref="hoverZone"
+      :class="ns.e('hover-zone')"
+    />
+  </v-scrollbar>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue';
+import { useNamespace } from '../../use';
+import { generateId } from '../../utils';
+import { Scrollbar as VScrollbar } from '../scrollbar';
+import VCascaderNode from './node.vue';
+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: 'VriCascaderMenu',
+  components: {
+    VScrollbar,
+    VCascaderNode,
+    VIcon
+  },
+  props: {
+    nodes: {
+      type: Array as PropType<CascaderNode[]>,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+
+  setup(props) {
+    const instance = getCurrentInstance()!;
+    const ns = useNamespace('cascader-menu');
+
+    const id = generateId();
+    let activeNode: Nullable<HTMLElement> = null;
+    let hoverTimer: Nullable<number> = null;
+
+    const panel = inject(CASCADER_PANEL_INJECTION_KEY)!;
+
+    const hoverZone = ref<null | SVGSVGElement>(null);
+
+    const isEmpty = computed(() => !props.nodes.length);
+    const isLoading = computed(() => !panel.initialLoaded);
+    const menuId = computed(() => `cascader-menu-${id}-${props.index}`);
+
+    const handleExpand = (e: MouseEvent) => {
+      activeNode = e.target as HTMLElement;
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!panel.isHoverMenu || !activeNode || !hoverZone.value) return;
+
+      if (activeNode.contains(e.target as HTMLElement)) {
+        clearHoverTimer();
+
+        const el = instance.vnode.el as HTMLElement;
+        const { left } = el.getBoundingClientRect();
+        const { offsetWidth, offsetHeight } = el;
+        const startX = e.clientX - left;
+        const top = activeNode.offsetTop;
+        const bottom = top + activeNode.offsetHeight;
+
+        hoverZone.value.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) {
+        hoverTimer = window.setTimeout(
+          clearHoverZone,
+          panel.config.hoverThreshold
+        );
+      }
+    };
+
+    const clearHoverTimer = () => {
+      if (!hoverTimer) return;
+      clearTimeout(hoverTimer);
+      hoverTimer = null;
+    };
+
+    const clearHoverZone = () => {
+      if (!hoverZone.value) return;
+      hoverZone.value.innerHTML = '';
+      clearHoverTimer();
+    };
+    return {
+      ns,
+      panel,
+      hoverZone,
+      isEmpty,
+      isLoading,
+      menuId,
+      handleExpand,
+      handleMouseMove,
+      clearHoverZone
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,23 @@
+import { defineComponent, h } from 'vue';
+import { useNamespace } from '../../use';
+
+export default defineComponent({
+  name: 'NodeContent',
+  setup () {
+    const ns = useNamespace('cascader-node');
+    return {
+      ns
+    };
+  },
+  render () {
+    const { ns } = this;
+    const { node, panel } = this.$parent;
+    const { data, label } = node;
+    const { renderLabelFn } = panel;
+    return h(
+      'span',
+      { class: ns.e('label') },
+      renderLabelFn ? renderLabelFn({ node, data }) : label
+    );
+  }
+});