vft 0.0.1 → 0.0.2

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

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

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

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

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

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

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

@@ -1,23 +0,0 @@
-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
-    );
-  }
-});