vft 0.0.1 → 0.0.3

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

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

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

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