vft 0.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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