vft 0.0.1

package/src/web/tabs/tab-nav.vue

@@ -0,0 +1,403 @@
+<script lang="tsx" setup>
+import {
+  computed,
+  type CSSProperties,
+  getCurrentInstance,
+  inject,
+  nextTick,
+  onMounted,
+  onUpdated,
+  ref,
+  watch
+} from 'vue';
+import { type IconProps } from '../../common';
+import { useNamespace } from '../../use';
+import { capitalize } from '@vri/utils';
+import { EVENT_CODE } from '@vri/constants';
+import { TabsRootContextKey } from './types';
+import type { TabsPaneContext, TabsType, Scrollable } from './types';
+import { useDocumentVisibility, useResizeObserver, useWindowFocus } from '@vueuse/core';
+import TabBar from './tab-bar.vue';
+import Icon from '../../common/icon/index.vue';
+
+interface TabNavProps {
+  panes: TabsPaneContext[];
+  /** 标签是否同时可增加和关闭 */
+  editable?: boolean;
+  /** 标签是否可增加 */
+  addable?: boolean;
+  /** tab 类型 */
+  type?: TabsType;
+  stretch?: boolean;
+  /** 图标配置 */
+  closeIconCfg?: IconProps;
+  addIconCfg?: IconProps;
+  arrowLeftIconCfg?: IconProps;
+  arrowRightIconCfg?: IconProps;
+}
+
+const {
+  panes,
+  editable,
+  addable,
+  type,
+  stretch,
+  closeIconCfg,
+  addIconCfg,
+  arrowLeftIconCfg,
+  arrowRightIconCfg
+} = defineProps<TabNavProps>();
+
+const emit = defineEmits(['tabClick', 'tabRemove', 'tabAdd', 'tabContextmenu']);
+
+const vm = getCurrentInstance()!;
+
+// 获取从 index.vue 提供的数据信息
+const rootTabs = inject(TabsRootContextKey)!;
+
+const ns = useNamespace('tabs');
+const visibility = useDocumentVisibility();
+const focused = useWindowFocus();
+
+// 整个 nav dom 包含前进后退 btn (vri-tabs__nav-wrap)
+const el$ = ref<HTMLDivElement>();
+// el$ 子节点 包含 newButton (vri-tabs__nav-scroll)
+const navScroll$ = ref<HTMLDivElement>();
+// navScroll$ 子节点 (vri-tabs__nav)
+const nav$ = ref<HTMLDivElement>();
+
+/** 是否展示左右滚动 */
+const scrollable = ref<false | Scrollable>(false);
+// 记录滚动时的偏移量
+const navOffset = ref(0);
+const isFocus = ref(false);
+const focusable = ref(true);
+
+// 根据 tabPosition 确定 sizeName 是 width or height
+const sizeName = computed(() => ['top', 'bottom'].includes(rootTabs.props.tabPosition!) ? 'width' : 'height');
+
+// 设置 tab 导航栏的 translateX or translateY 的偏移量
+const navStyle = computed<CSSProperties>(() => {
+  const dir = sizeName.value === 'width' ? 'X' : 'Y';
+  return {
+    transform: `translate${dir}(-${navOffset.value}px)`
+  };
+});
+
+// 向前滚动
+const scrollPrev = () => {
+  if (!navScroll$.value) return;
+  const containerSize =
+    navScroll$.value[`offset${capitalize(sizeName.value)}`];
+  const currentOffset = navOffset.value;
+
+  if (!currentOffset) return;
+
+  navOffset.value = currentOffset > containerSize ? currentOffset - containerSize : 0;
+};
+
+// 向后滚动
+const scrollNext = () => {
+  if (!navScroll$.value || !nav$.value) return;
+
+  const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
+  const containerSize =
+    navScroll$.value[`offset${capitalize(sizeName.value)}`];
+  const currentOffset = navOffset.value;
+
+  if (navSize - currentOffset <= containerSize) return;
+
+  navOffset.value = navSize - currentOffset > containerSize * 2
+    ? currentOffset + containerSize
+    : navSize - containerSize;
+};
+
+// 滚动到激活的 tab 主要是获取 navOffset 的值
+const scrollToActiveTab = async() => {
+  const nav = nav$.value;
+  if (!scrollable.value || !el$.value || !navScroll$.value || !nav) return;
+
+  await nextTick();
+
+  const activeTab = el$.value.querySelector('.is-active');
+  if (!activeTab) return;
+
+  const navScroll = navScroll$.value;
+  const isHorizontal = ['top', 'bottom'].includes(
+    rootTabs.props.tabPosition!
+  );
+  const activeTabBounding = activeTab.getBoundingClientRect();
+  // vri-tabs__nav-scroll
+  const navScrollBounding = navScroll.getBoundingClientRect();
+  const maxOffset = isHorizontal
+    ? nav.offsetWidth - navScrollBounding.width
+    : nav.offsetHeight - navScrollBounding.height;
+
+  const currentOffset = navOffset.value;
+
+  let newOffset = currentOffset;
+
+  if (isHorizontal) {
+    if (activeTabBounding.left < navScrollBounding.left) {
+      newOffset =
+        currentOffset - (navScrollBounding.left - activeTabBounding.left);
+    }
+    if (activeTabBounding.right > navScrollBounding.right) {
+      newOffset =
+        currentOffset + activeTabBounding.right - navScrollBounding.right;
+    }
+  } else {
+    if (activeTabBounding.top < navScrollBounding.top) {
+      newOffset =
+        currentOffset - (navScrollBounding.top - activeTabBounding.top);
+    }
+    if (activeTabBounding.bottom > navScrollBounding.bottom) {
+      newOffset =
+        currentOffset +
+        (activeTabBounding.bottom - navScrollBounding.bottom);
+    }
+  }
+  newOffset = Math.max(newOffset, 0);
+  navOffset.value = Math.min(newOffset, maxOffset);
+};
+
+const update = () => {
+  if (!nav$.value || !navScroll$.value) return;
+  // 根据 position 的不同 获取 nav$(vri-tabs__nav) 的 offsetWidth or offsetHeight
+  const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
+  // 获取到 navScroll$ 的 offsetWidth or offsetHeight
+  const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];
+  // 获取到当前的偏移量
+  const currentOffset = navOffset.value;
+  // 由于 navScroll$ 的 overflow 是 hidden，所以当 vri-tabs__nav 撑开时其宽度可能会超过 vri-tabs__nav-scroll
+  if (containerSize < navSize) {
+    scrollable.value = scrollable.value || {};
+    scrollable.value.prev = currentOffset;
+    scrollable.value.next = currentOffset + containerSize < navSize;
+    if (navSize - currentOffset < containerSize) {
+      navOffset.value = navSize - containerSize;
+    }
+  } else {
+    scrollable.value = false;
+    if (currentOffset > 0) {
+      navOffset.value = 0;
+    }
+  }
+};
+
+const changeTab = (e: KeyboardEvent) => {
+  const code = e.code;
+
+  const { up, down, left, right } = EVENT_CODE;
+  if (![up, down, left, right].includes(code)) return;
+
+  // 左右上下键更换tab
+  const tabList = Array.from(
+    (e.currentTarget as HTMLDivElement).querySelectorAll<HTMLDivElement>(
+      '[role=tab]:not(.is-disabled)'
+    )
+  );
+  const currentIndex = tabList.indexOf(e.target as HTMLDivElement);
+
+  let nextIndex: number;
+  if (code === left || code === up) {
+    // left
+    if (currentIndex === 0) {
+      // first
+      nextIndex = tabList.length - 1;
+    } else {
+      nextIndex = currentIndex - 1;
+    }
+  } else {
+    // right
+    if (currentIndex < tabList.length - 1) {
+      // not last
+      nextIndex = currentIndex + 1;
+    } else {
+      nextIndex = 0;
+    }
+  }
+  tabList[nextIndex].focus(); // 改变焦点元素
+  tabList[nextIndex].click(); // 选中下一个tab
+  setFocus();
+};
+
+const setFocus = () => {
+  if (focusable.value) isFocus.value = true;
+};
+const removeFocus = () => (isFocus.value = false);
+
+watch(visibility, (visibility) => {
+  if (visibility === 'hidden') {
+    focusable.value = false;
+  } else if (visibility === 'visible') {
+    setTimeout(() => (focusable.value = true), 50);
+  }
+});
+
+watch(focused, (focused) => {
+  if (focused) {
+    setTimeout(() => (focusable.value = true), 50);
+  } else {
+    focusable.value = false;
+  }
+});
+
+// 监听 resize 触发 update
+useResizeObserver(el$, update);
+
+onMounted(() => setTimeout(() => scrollToActiveTab(), 0));
+onUpdated(() => update());
+
+defineExpose({
+  scrollToActiveTab,
+  removeFocus
+});
+
+watch(
+  () => panes,
+  () => vm.update(),
+  { flush: 'post' }
+);
+
+// 前进后退标签
+const scrollBtn = computed(() => {
+  return scrollable.value
+    ? [
+      <span
+        class={[
+          ns.e('nav-prev'),
+          ns.is('disabled', !scrollable.value.prev)
+        ]}
+        onClick={scrollPrev}
+      >
+        {arrowLeftIconCfg?.icon ? <Icon {...arrowLeftIconCfg}></Icon> : null}
+      </span>,
+      <span
+        class={[
+          ns.e('nav-next'),
+          ns.is('disabled', !scrollable.value.next)
+        ]}
+        onClick={scrollNext}
+      >
+         {arrowRightIconCfg?.icon ? <Icon {...arrowRightIconCfg}></Icon> : null}
+      </span>
+    ]
+    : null;
+});
+
+// 渲染 tab-pane
+const tabs = computed(() => {
+  return panes?.map((pane, index) => {
+    const uid = pane.uid;
+    const disabled = pane.props.disabled;
+    const tabName = pane.props.name ?? pane.index ?? `${index}`;
+    const closable = !disabled && (pane.isClosable || editable);
+    pane.index = `${index}`;
+
+    // 关闭标签图标
+    const btnClose = closable ? (
+      <span class="is-icon-close" onClick={(ev: MouseEvent) => emit('tabRemove', pane, ev)}>
+        {closeIconCfg?.icon ? <Icon {...closeIconCfg}></Icon> : null}
+      </span>
+    ) : null;
+
+    const tabLabelContent = pane.slots.label?.() || pane.props.label;
+    const tabindex = !disabled && pane.active ? 0 : -1;
+
+    return (
+      <div
+        ref={`tab-${uid}`}
+        class={[
+          ns.e('item'),
+          ns.is(rootTabs.props.tabPosition!),
+          ns.is('active', pane.active),
+          ns.is('disabled', disabled),
+          ns.is('closable', closable),
+          ns.is('focus', isFocus.value)
+        ]}
+        id={`tab-${tabName}`}
+        key={`tab-${uid}`}
+        aria-controls={`pane-${tabName}`}
+        role="tab"
+        aria-selected={pane.active}
+        tabindex={tabindex}
+        onFocus={() => setFocus()}
+        onBlur={() => removeFocus()}
+        onClick={(ev: MouseEvent) => {
+          removeFocus();
+          emit('tabClick', pane, tabName, ev);
+        }}
+        onContextmenu={(event) => {
+          event.preventDefault();
+          emit('tabContextmenu', { pane, index, event });
+        }}
+        onKeydown={(ev: KeyboardEvent) => {
+          if (
+            closable &&
+            (ev.code === EVENT_CODE.delete ||
+              ev.code === EVENT_CODE.backspace)
+          ) {
+            emit('tabRemove', pane, ev);
+          }
+        }}
+      >
+        {...[tabLabelContent, btnClose]}
+      </div>
+    );
+  });
+});
+
+// 增加 tab 的 dom
+const newButton =
+  editable || addable ? (
+    <span
+      class={ns.e('new-tab')}
+      tabindex="0"
+      onClick={() => emit('tabAdd')}
+      onKeydown={(ev: KeyboardEvent) => {
+        if (ev.code === EVENT_CODE.enter) emit('tabAdd');
+      }}
+    >
+      {addIconCfg?.icon ? <Icon {...addIconCfg}></Icon> : null}
+    </span>
+  ) : null;
+
+defineRender(() => {
+  return (
+    <div
+      ref={el$}
+      class={[
+        ns.e('nav-wrap'),
+        ns.is('scrollable', !!scrollable.value),
+        ns.is(rootTabs.props.tabPosition!)
+      ]}
+    >
+      {scrollBtn.value}
+      <div class={ns.e('nav-scroll')} ref={navScroll$}>
+        <div
+          class={[
+            ns.e('nav'),
+            ns.is(rootTabs.props.tabPosition!),
+            ns.is(
+              'stretch',
+              stretch &&
+              ['top', 'bottom'].includes(rootTabs.props.tabPosition!)
+            )
+          ]}
+          ref={nav$}
+          style={navStyle.value}
+          role="tablist"
+          onKeydown={changeTab}
+        >
+          {...[
+            !type ? <TabBar tabs={[...panes]} /> : null,
+            tabs.value
+          ]}
+        </div>
+        {newButton}
+      </div>
+    </div>
+  );
+});
+</script>

package/src/web/tabs/tab-pane.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { type TabsPaneContext, TabsRootContextKey } from './types';
+import { useNamespace } from '../../use';
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  useSlots,
+  watch
+} from 'vue';
+import { eagerComputed } from '@vueuse/core';
+
+interface TabPaneProps {
+  /** 选项卡标题 */
+  label?: string;
+  /** 与选项卡绑定值 value 对应的标识符，表示选项卡别名 */
+  name?: Numberish;
+  /** 标签是否可关闭 */
+  closable?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 标签是否延迟渲染 */
+  lazy?: boolean;
+}
+
+const { name, closable, lazy } = defineProps<TabPaneProps>();
+
+const vm = getCurrentInstance()!;
+
+const slots = useSlots();
+
+const tabsRoot = inject(TabsRootContextKey)!;
+
+const ns = /* hoist-static*/ useNamespace('tab-pane');
+
+defineOptions({
+  name: ns.b()
+});
+
+const index = ref<string>();
+// 可关闭
+const isClosable = computed(() => closable || tabsRoot.props.closable);
+// 激活
+const active = eagerComputed(() => {
+  return tabsRoot.currentName.value === (name ?? index.value);
+});
+
+const loaded = ref(active.value);
+
+const paneName = computed(() => name ?? index.value);
+
+const shouldBeRender = eagerComputed(() => {
+  return !lazy || loaded.value || active.value;
+});
+
+watch(active, (val) => {
+  if (val) loaded.value = true;
+});
+
+const pane = reactive({
+  uid: vm.uid,
+  slots,
+  props: vm.props as unknown as TabPaneProps,
+  paneName,
+  active,
+  index,
+  isClosable,
+  attrs: vm.attrs
+});
+
+
+onMounted(() => {
+  tabsRoot.registerPane(pane as TabsPaneContext);
+});
+
+onUnmounted(() => {
+  tabsRoot.unregisterPane(pane.uid);
+});
+</script>
+
+<template>
+  <div v-if="shouldBeRender" v-show="active" :id="`pane-${paneName}`" :class="ns.b()"
+    role="tabpanel" :aria-hidden="!active" :aria-labelledby="`tab-${paneName}`">
+    <slot />
+  </div>
+</template>

package/src/web/tabs/types.ts

@@ -0,0 +1,66 @@
+import type { ComputedRef, InjectionKey, Ref, Slots, UnwrapRef } from 'vue';
+import { type IconProps } from '../../common';
+
+export type TabsPaneContext = UnwrapRef<{
+  uid: number;
+  slots: Slots;
+  props: TabPaneProps;
+  paneName: ComputedRef<string | number | undefined>;
+  active: ComputedRef<boolean>;
+  index: Ref<string | undefined>;
+  isClosable: ComputedRef<boolean>;
+  attrs: Record<string, any>;
+}>;
+
+export type TabsType = 'card' | 'border-card' | '';
+
+export interface TabsRootContext {
+  props: TabsProps;
+  currentName: Ref<string | number>;
+  registerPane: (pane: TabsPaneContext) => void;
+  unregisterPane: (uid: number) => void;
+}
+
+export interface TabPaneProps {
+  /** 选项卡标题   */
+  label: string;
+  /** 与选项卡绑定值 value 对应的标识符，表示选项卡别名   */
+  name: Numberish;
+  /** 标签是否可关闭   */
+  closable: boolean;
+  /** 是否禁用   */
+  disabled: boolean;
+  /** 标签是否延迟渲染   */
+  lazy: boolean;
+}
+
+export interface TabsProps {
+  /** 风格类型 */
+  type?: TabsType;
+  /** 标签是否可关闭 */
+  closable?: boolean;
+  /** 标签是否可增加 */
+  addable?: boolean;
+  /** 绑定值，选中选项卡的 name */
+  modelValue: Numberish;
+  /** 标签是否同时可增加和关闭 */
+  editable?: boolean;
+  /** 选项卡所在位置 */
+  tabPosition?: 'top' | 'right' | 'bottom' | 'left';
+  /** 切换标签之前的钩子函数， 若返回 false  或者返回被 reject 的 Promise，则阻止切换 */
+  beforeLeave?: Function;
+  stretch?: boolean;
+  closeIconCfg?: IconProps;
+  addIconCfg?: IconProps;
+  arrowLeftIconCfg?: IconProps;
+  arrowRightIconCfg?: IconProps;
+}
+
+export const TabsRootContextKey: InjectionKey<TabsRootContext> = Symbol('tabsRootContextKey');
+
+export interface Scrollable {
+  next?: boolean;
+  prev?: number;
+}
+
+export type TabsPanes = Record<number, TabsPaneContext>;