vft 0.0.1 → 0.0.2

package/src/web/menu/utils/submenu.ts

@@ -1,66 +0,0 @@
-// @ts-nocheck
-import { triggerEvent } from '@vri/utils';
-import { EVENT_CODE } from '@vri/constants';
-import type MenuItem from './menu-item';
-
-class SubMenu {
-  public subMenuItems: NodeList;
-  public subIndex = 0;
-  constructor(public parent: MenuItem, public domNode: ParentNode) {
-    this.subIndex = 0;
-    this.init();
-  }
-
-  init(): void {
-    this.subMenuItems = this.domNode.querySelectorAll('li');
-    this.addListeners();
-  }
-
-  gotoSubIndex(idx: number): void {
-    if (idx === this.subMenuItems.length) {
-      idx = 0;
-    } else if (idx < 0) {
-      idx = this.subMenuItems.length - 1;
-    }
-    (this.subMenuItems[idx] as HTMLElement).focus();
-    this.subIndex = idx;
-  }
-
-  addListeners(): void {
-    const parentNode = this.parent.domNode;
-    Array.prototype.forEach.call(this.subMenuItems, (el: Element) => {
-      el.addEventListener('keydown', (event: KeyboardEvent) => {
-        let prevDef = false;
-        switch (event.code) {
-          case EVENT_CODE.down: {
-            this.gotoSubIndex(this.subIndex + 1);
-            prevDef = true;
-            break;
-          }
-          case EVENT_CODE.up: {
-            this.gotoSubIndex(this.subIndex - 1);
-            prevDef = true;
-            break;
-          }
-          case EVENT_CODE.tab: {
-            triggerEvent(parentNode as HTMLElement, 'mouseleave');
-            break;
-          }
-          case EVENT_CODE.enter:
-          case EVENT_CODE.space: {
-            prevDef = true;
-            (event.currentTarget as HTMLElement).click();
-            break;
-          }
-        }
-        if (prevDef) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-        return false;
-      });
-    });
-  }
-}
-
-export default SubMenu;

package/src/web/multiple-select-flat/index.ts

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

package/src/web/multiple-select-flat/index.vue

@@ -1,53 +0,0 @@
-<template>
-  <div :class="ns.b()">
-    <el-checkbox :class="ns.e('check-all')" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox>
-    <el-checkbox-group v-model="checkList" @change="handleCheckedChange">
-      <el-checkbox v-for="item in options" :key="item.code" :label="item.code">{{ item.name }}</el-checkbox>
-    </el-checkbox-group>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useNamespace } from '../../use';
-import { ref } from 'vue';
-import { type MultipleSelectFlatOptions } from './types';
-
-const ns = /* hoist-static*/ useNamespace('multiple-select-flat');
-defineOptions({ name: ns.b() });
-
-interface MultipleSelcetFlatProps {
-  /** 选择项列表 */
-  options: Array<MultipleSelectFlatOptions>;
-}
-const { options } = defineProps<MultipleSelcetFlatProps>();
-
-const emit = defineEmits<{
-  (e: 'submit', val: string): void;
-}>();
-
-const checkAll = ref(false);
-const handleCheckAllChange = (val: boolean) => {
-  checkList.value = val ? options.map((o) => o.code) : [];
-  emit('submit', checkList.value.join());
-};
-
-const checkList = ref<string[]>([]);
-const handleCheckedChange = (val: string[]) => {
-  checkAll.value = val.length === options.length;
-  emit('submit', checkList.value.join());
-};
-</script>
-
-<style lang="scss" scoped>
-$name: 'multiple-select-flat';
-
-@include b($name) {
-  @include e(check-all) {
-    margin-right: 30px;
-  }
-
-  :deep(.el-checkbox-group) {
-    display: inline;
-  }
-}
-</style>

package/src/web/multiple-select-flat/types.ts

@@ -1,5 +0,0 @@
-export interface MultipleSelectFlatOptions {
-  name: string;
-  code: string;
-  [key: string]: any;
-}

package/src/web/multiple-tabs/index.scss

@@ -1,16 +0,0 @@
-$name: multiple-tabs;
-
-@include set-root-css-vars($name, $multiple-tabs);
-
-@function getCompCssVar($value) {
-  @return getCssVar($name, $value);
-}
-
-@include b($name) {
-  background-color: getCompCssVar('bg-color');
-  height: getCompCssVar('height');
-
-  @include e(title) {
-    @include line-clamp(1);
-  }
-}

package/src/web/multiple-tabs/index.ts

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

package/src/web/multiple-tabs/index.vue

@@ -1,193 +0,0 @@
-<script lang="ts" setup>
-import { getRouterKeyPath, listenerRouteChange, useRouterHelper } from '@vri/router';
-import { useMultipleTabStore, useTabs } from '@vri/store';
-import { useRefs } from '@vri/use';
-import { generateCssVars } from '@vri/utils';
-import hotkeys from 'hotkeys-js';
-import { computed, ref, unref } from 'vue';
-import type { RouteLocationNormalized, RouteMeta } from 'vue-router';
-import { useRouter } from 'vue-router';
-import { useNamespace } from '../../use';
-import type { TabsPaneContext } from '../tabs/types';
-import Tabs from './../tabs/index.vue';
-import TabPane from './../tabs/tab-pane.vue';
-import TabContent from './tab-content.vue';
-import type { TabContentExpose } from './types';
-import { initAffixTabs, useTabsDrag } from './use';
-
-interface MultipleTabsProps {
-  tabsStyle?: Record<string, Numberish>;
-  contextMenuStyle?: Record<string, Numberish>;
-  canDrag?: boolean;
-}
-
-const {
-  tabsStyle,
-  contextMenuStyle,
-  canDrag
-} = defineProps<MultipleTabsProps>();
-
-const ns = /* hoist-static*/ useNamespace('multiple-tabs');
-
-defineOptions({
-  name: ns.b()
-});
-
-const affixList = initAffixTabs();
-
-if (canDrag) {
-  useTabsDrag(affixList);
-}
-
-const tabStore = useMultipleTabStore();
-
-// active path for tab
-const activePathRef = ref('');
-const activeIndex = ref(0);
-const fromRoute = ref();
-
-const router = useRouter();
-const { go } = useRouterHelper();
-
-// get current tab list
-const getTabsState = computed(() => {
-  return tabStore.getTabList.filter((item) => {
-    return !item.meta?.hideTab;
-  });
-});
-
-
-watchEffect(() => {
-  if (activePathRef.value) {
-    const _activeIndex = getTabsState.value.findIndex(item => {
-      return getRouterKeyPath(item) === activePathRef.value;
-    });
-    if (_activeIndex === -1) {
-      activeIndex.value = getTabsState.value?.length - 1;
-    } else {
-      activeIndex.value = _activeIndex;
-    }
-    activeIndex.value = activeIndex.value < affixList?.length ? affixList?.length - 1 : activeIndex.value;
-  }
-});
-
-onBeforeRouteLeave(() => {
-  fromRoute.value = unref(router.currentRoute);
-});
-
-listenerRouteChange((route) => {
-  if (!route) {
-    return;
-  }
-  
-  const { meta = {} } = route;
-  const { currentActivePath, hideTab } = meta as RouteMeta;
-  
-  const isHide = !hideTab ? null : currentActivePath;
-  
-  // set current active tab value
-  const activePath = getRouterKeyPath(route);
-  
-  if (activePathRef.value !== activePath) {
-    activePathRef.value = activePath;
-  }
-  
-  if (isHide) {
-    // 如果当前 tab 是隐藏的，则从路由中根据 currentActivePath 寻找到此路由的信息，然后在 tabStore 添加此路由
-    let findParentRoute = router.getRoutes().find((item) => item.path === currentActivePath);
-    findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized, unref(fromRoute), activeIndex.value, route);
-  } else {
-    tabStore.addTab(unref(route), unref(fromRoute), activeIndex.value);
-  }
-});
-
-// 点击 tab 根据 tab 传入的 path 路径，跳转到对应页面
-function handleClick (pane: TabsPaneContext) {
-  if (activePathRef.value === pane.paneName) {
-  	return;
-  }
-  const clickTab = getTabsState.value[pane.attrs.index];
-  activePathRef.value = pane.paneName as string;
-  const hideActiveRoutePath = (clickTab?.meta?.hideActiveRoute as RouteLocationNormalized)?.fullPath;
-  if (hideActiveRoutePath) {
-    go(hideActiveRoutePath);
-  } else {
-    go(clickTab.fullPath || clickTab.path);
-  }
-}
-
-// click x close tab
-function handleRemove (targetPath: string) {
-  tabStore.closeTabByKey(targetPath, router);
-}
-
-const [refs, setRefs] = useRefs<TabContentExpose>();
-
-function handleContextMenu (data: {pane: {attrs: {index: number;};}; event: any;}) {
-  const _index = data.pane.attrs.index;
-  const _event = data.event;
-  refs.value[_index].handleContext(_event);
-}
-
-const _tabsStyle = computed(() => {
-  let initTabStyle: Record<string, Numberish> = {
-    padding: '4px 0 0',
-    'header-height': '26px',
-    'item-color': '#5C5C5C',
-    'item-bg-color': '#f8f8f8',
-    'font-size': '13px',
-    'item-padding': '0 10px',
-    'close-icon-left': '8px',
-    'item-distance': '10px',
-    'item-max-width': '348px',
-    'header-margin': '0 0 0 8px'
-  };
-  
-  return { ...generateCssVars(initTabStyle, 'tabs'), ...tabsStyle };
-});
-
-const { closeCurrent } = useTabs();
-
-hotkeys('command+e, ctrl+e', function () {
-  closeCurrent();
-  return false;
-});
-
-const _contextMenuStyle = computed(() => {
-  return {
-    ...generateCssVars({
-      border: '1px solid #dcdfe6',
-      'sub-item-height': '40px',
-      'item-min-width': '150px'
-    }, 'menu'),
-    ...contextMenuStyle
-  };
-});
-</script>
-
-<template>
-  <div :class="ns.b()" :style="_tabsStyle">
-    <tabs
-      v-model:model-value="activePathRef"
-      type="card"
-      @tabClick="handleClick"
-      @tabRemove="handleRemove"
-      @tabContextMenu="handleContextMenu"
-      :closeIconCfg="{ color: 'white'}"
-    >
-      <!--why key add index：key not update after sort -->
-      <template v-for="(item, index) in getTabsState" :key="getRouterKeyPath(item) + index">
-        <tab-pane :closable="!(item.meta?.affix)" :index="index" :name="getRouterKeyPath(item)">
-          <template #label>
-            <tab-content :contextMenuStyle="_contextMenuStyle" :affixNum="affixList?.length"
-              :ref="setRefs(index)" :tabItem="item" />
-          </template>
-        </tab-pane>
-      </template>
-    </tabs>
-  </div>
-</template>
-
-<style lang="scss">
-@import './index.scss';
-</style>

package/src/web/multiple-tabs/tab-content.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { type RouteLocationNormalized } from 'vue-router';
-import { useContextMenu } from '../context-menu/useContextMenu';
-import type { TabContentExpose } from './types';
-import { useTabDropdown } from './use';
-
-interface Props {
-  tabItem: RouteLocationNormalized;
-  affixNum: number;
-  contextMenuStyle?: Record<string, Numberish>;
-}
-
-const { tabItem, affixNum, contextMenuStyle } = defineProps<Props>();
-
-const [createContextMenu] = useContextMenu();
-
-const getTitle = computed(() => {
-  return tabItem.meta && (tabItem.meta.title as string);
-});
-
-const { getDropMenuList, handleContextMenu } = useTabDropdown(tabItem, affixNum);
-
-function handleContext(e: MouseEvent) {
-  handleContextMenu(tabItem)(e);
-  createContextMenu({
-    event: e,
-    styles: contextMenuStyle,
-    items: getDropMenuList.value
-  });
-}
-
-defineExpose<TabContentExpose>({
-  handleContext
-});
-</script>
-
-<template>
-  <span :title="getTitle" class="vri-multiple-tabs__title" @contextmenu.stop="handleContext">{{ getTitle }}</span>
-</template>

package/src/web/multiple-tabs/types.ts

@@ -1,3 +0,0 @@
-export type TabContentExpose = {
-  handleContext: (e: MouseEvent) => void;
-};

package/src/web/multiple-tabs/use/index.ts

@@ -1,2 +0,0 @@
-export * from './use-tab-dropdown';
-export * from './use-multiple-tabs';

package/src/web/multiple-tabs/use/use-multiple-tabs.ts

@@ -1,86 +0,0 @@
-import { useSortable } from '@vri/use';
-import { arrSort, isNullOrUndefined } from '@vri/utils';
-import type { SortableEvent } from 'sortablejs';
-import { nextTick, ref, toRaw } from 'vue';
-import type { RouteLocationNormalized } from 'vue-router';
-import { useRouter } from 'vue-router';
-import { useMultipleTabStore } from '@vri/store';
-
-/**
- * @description 初始化需要固定的 tab 标签
- * @author wfd
- * @date 2022/10/15 19:03
- * @example
- * @returns {string[]}
- */
-export function initAffixTabs(): string[] {
-  const affixList = ref<RouteLocationNormalized[]>([]);
-
-  const tabStore = useMultipleTabStore();
-  const router = useRouter();
-
-  // 过滤需要固定的标签
-  function filterAffixTabs(routes: RouteLocationNormalized[]) {
-    const tabs: RouteLocationNormalized[] = [];
-    routes &&
-      routes.forEach((route) => {
-        if (route.meta?.affix) {
-          // console.log(route, 777, toRaw(route));
-          tabs.push(toRaw(route));
-        }
-      });
-    return tabs;
-  }
-
-  function addAffixTabs() {
-    const affixTabs = filterAffixTabs(router.getRoutes() as unknown as RouteLocationNormalized[]);
- 
-    arrSort(affixTabs, ['meta', 'order']);
-    
-    affixList.value = affixTabs;
-
-    for (const tab of affixTabs) {
-      tabStore.addTab({
-        meta: tab.meta,
-        name: tab.name,
-        path: tab.path
-      } as RouteLocationNormalized);
-    }
-  }
-
-  let isAddAffix = false;
-
-  // 开始执行固定标签
-  if (!isAddAffix) {
-    addAffixTabs();
-    isAddAffix = true;
-  }
-  return affixList.value.map((item) => item.meta?.title).filter(Boolean) as string[];
-}
-
-export function useTabsDrag(affixTextList: string[]) {
-  const tabStore = useMultipleTabStore();
-  nextTick(() => {
-    const el = document.querySelectorAll('.vri-tabs__nav')?.[0] as HTMLElement;
-
-    const { initSortable } = useSortable(el, {
-      draggable: '.is-closable',
-      filter: (e) => {
-        const text = (e?.target as HTMLElement)?.innerText;
-        if (!text) return false;
-        return affixTextList.includes(text);
-      },
-
-      onEnd: (evt: SortableEvent) => {
-        const { oldIndex, newIndex } = evt;
-
-        if (isNullOrUndefined(oldIndex) || isNullOrUndefined(newIndex) || oldIndex === newIndex) {
-          return;
-        }
-
-        tabStore.sortTabs(oldIndex, newIndex);
-      }
-    });
-    initSortable();
-  });
-}

package/src/web/multiple-tabs/use/use-tab-dropdown.ts

@@ -1,101 +0,0 @@
-import { getRouterKeyPath } from '@vri/router';
-import { computed, reactive, unref } from 'vue';
-import { type RouteLocationNormalized } from 'vue-router';
-import { type ContextMenuItem } from '../../context-menu/types';
-import { useMultipleTabStore, useTabs } from '@vri/store';
-
-export function useTabDropdown(tabItem: RouteLocationNormalized, affixNum: number) {
-  // 记录当前点击多 tab 的索引与 tab 的信息
-  const state = reactive({
-    current: null as Nullable<RouteLocationNormalized>,
-    currentIndex: 0
-  });
-
-  const tabStore = useMultipleTabStore();
-  const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight, newWinTab } = useTabs();
-
-  /**
-   * @description 多 tab 菜单列表
-   */
-  const getDropMenuList = computed(() => {
-    if (!tabItem) {
-      return;
-    }
-    const { meta } = tabItem;
-
-    const index = state.currentIndex;
-
-    // 关闭左侧标签页
-    const closeLeftDisabled = index === 0 || index <= affixNum;
-    // 关闭右侧标签页
-    const closeRightDisabled = tabStore.getTabList.length <= affixNum || (index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0);
-    // 关闭其他
-    const closeOtherDisabled = tabStore.getTabList.length === affixNum || (tabStore.getTabList.length === affixNum + 1 && index === affixNum);
-    // 关闭所有
-    const disabled = tabStore.getTabList.length === affixNum;
-
-    const dropMenuList: ContextMenuItem[] = [
-      {
-        iconCfg: { icon: 'vi-refresh' },
-        text: '刷新',
-        handler: () => refreshPage(tabItem)
-      },
-      {
-        iconCfg: { icon: 'vi-new-page' },
-        text: '新页面打开',
-        handler: () => newWinTab(tabItem),
-        divider: true
-      },
-      {
-        iconCfg: { icon: 'vi-close' },
-        text: '关闭标签页',
-        disabled: !!meta?.affix || disabled,
-        handler: () => close(tabItem)
-      },
-      {
-        iconCfg: { icon: 'vi-close-left' },
-        text: '关闭左侧标签页',
-        disabled: closeLeftDisabled,
-        handler: () => closeLeft(tabItem)
-      },
-      {
-        iconCfg: { icon: 'vi-close-right' },
-        text: '关闭右侧标签页',
-        disabled: closeRightDisabled,
-        divider: true,
-        handler: () => closeRight(tabItem)
-      },
-      {
-        iconCfg: { icon: 'vi-close-other' },
-        text: '关闭其它标签页',
-        disabled: closeOtherDisabled,
-        handler: () => closeOther(tabItem)
-      },
-      {
-        iconCfg: { icon: 'vi-close-all' },
-        text: '关闭所有标签页',
-        disabled,
-        handler: () => closeAll()
-      }
-    ];
-
-    return dropMenuList;
-  });
-
-  // 点击 tab 右侧菜单事件
-  function handleContextMenu(tabItem: RouteLocationNormalized) {
-    return (e: Event) => {
-      if (!tabItem) {
-        return;
-      }
-      e?.preventDefault();
-
-      // 获取当前点击的 tab 在多 tab 列表中的位置
-      const index = tabStore.getTabList.findIndex((tab) => getRouterKeyPath(tab) === getRouterKeyPath(tabItem));
-      state.current = tabItem;
-      state.currentIndex = index;
-    };
-  }
-
-  return { getDropMenuList, handleContextMenu };
-}

package/src/web/nodata/README.md

@@ -1,42 +0,0 @@
-# nodata 无数据组件
-
-## Usage
-
-```html
-<vri-nodata :type="100"></vri-nodata>
-
-<vri-nodata :type="104">
-  加载失败，请
-  <span style="color: #0171f6; cursor: pointer" @click="refreshPage()">点击</span>
-  重试
-</vri-nodata>
-```
-
-## Props
-
-| 属性名 | 说明       | 类型          | 是否必传 |
-| ------ | ---------- | ------------- | -------- |
-| type   | 无数据类型 | string/number | 是       |
-
-### type enum
-
-| type | 说明                           | 级别   |
-| ---- | ------------------------------ | ------ |
-| 100  | 暂无数据                       | 页面级 |
-| 101  | 暂无相关数据                   | 页面级 |
-| 102  | 没有搜索结果？换个关键词试试   | 页面级 |
-| 103  | 此筛选条件下无结果             | 页面级 |
-| 104  | 加载失败，请刷新重试           | 页面级 |
-| 105  | 页面打不开？刷新下试试         | 全局级 |
-| 106  | 抱歉，您访问的页面报错了       | 全局级 |
-| 107  | 网络错误，请检查网络连接后重试 | 页面级 |
-| 200  | 暂无数据                       | 局部级 |
-| 201  | 暂无相关数据                   | 局部级 |
-| 202  | 没有搜索结果？换个关键词试试   | 局部级 |
-| 203  | 此筛选条件下无结果             | 局部级 |
-
-## Slot
-
-| 插槽名 | 说明                  |
-| ------ | --------------------- |
-| -      | 图片下方文字/内容插槽 |

package/src/web/nodata/fail.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import NoData from './index.vue';
-
-const emit = defineEmits(['click']);
-</script>
-
-<template>
-  <no-data type="104">
-    加载失败，请
-    <span style="color: #0171f6;cursor: pointer" @click="emit('click');">点击</span>
-    重试
-  </no-data>
-</template>