vft 0.0.1

package/src/web/tabs/index.vue

@@ -0,0 +1,236 @@
+<script setup lang="tsx">
+import { UPDATE_MODEL_EVENT } from '@vri/constants';
+import { computed, nextTick, provide, ref, watch, getCurrentInstance, useSlots } from 'vue';
+import { type IconProps } from '../../common';
+import { type TabsPaneContext, TabsRootContextKey, type TabsType, type TabsProps } from './types';
+import { isNumber, isNumberish, isString, isUndefined } from '@vri/utils';
+import TabNav from './tab-nav.vue';
+import { useNamespace, useOrderedChildren } from '../../use';
+
+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;
+  /** icon 配置 */
+  closeIconCfg?: IconProps;
+  addIconCfg?: IconProps;
+  arrowLeftIconCfg?: IconProps;
+  arrowRightIconCfg?: IconProps;
+}
+
+const { type = '', addable = false, modelValue, editable, tabPosition = 'top', beforeLeave, stretch, closeIconCfg, addIconCfg, arrowLeftIconCfg, arrowRightIconCfg } = defineProps<TabsProps>();
+
+const emit = defineEmits({
+  [UPDATE_MODEL_EVENT]: (name: Numberish) => isNumberish(name),
+  /** 点击 */
+  tabClick: (pane: TabsPaneContext, ev: Event) => ev instanceof Event,
+  /** 右键点击 */
+  tabContextMenu: (pane: TabsPaneContext, index: number, ev: Event) => ev instanceof Event,
+  tabChange: (name: Numberish) => isNumberish(name),
+  edit: (paneName: Numberish | undefined, action: 'remove' | 'add') =>
+    ['remove', 'add'].includes(action),
+  /** 移除 */
+  tabRemove: (name: Numberish) => isNumberish(name),
+  /** 增加 */
+  tabAdd: () => true
+});
+
+const ns = /* hoist-static*/ useNamespace('tabs');
+
+defineOptions({
+  name: ns.b()
+});
+
+const vm = getCurrentInstance()!;
+
+const slots = useSlots();
+
+// tab-nav 实例
+const nav$ = ref();
+
+// 默认的激活的 tab
+const currentName = ref<Numberish>(modelValue ?? '0');
+
+// 更新当前 current tab 触发 tabChange 以及更新 modelValue
+const changeCurrentName = (value: Numberish) => {
+  currentName.value = value;
+  emit('update:modelValue', value);
+  emit('tabChange', value);
+};
+
+// value 值为当前点击的 tab 值
+const setCurrentName = async (value?: Numberish) => {
+  // 如果 currentName 等于原值，或者 value 不存在，不执行
+  if (currentName.value === value || isUndefined(value)) return;
+
+  try {
+    // 切换标签之前的钩子函数， 若返回 false  或者返回被 reject 的 Promise，则阻止切换 */
+    const canLeave = await beforeLeave?.(value, currentName.value);
+    if (canLeave !== false) {
+      // 更新 tab 值
+      changeCurrentName(value);
+      //
+      nav$.value?.removeFocus?.();
+    }
+  } catch {}
+};
+
+/**
+ * @description tab 点击事件
+ * @author wfd
+ * @date 2022/10/18 09:07
+ * @example
+ * @param {TabsPaneContext} tab 当前被点击的 tab 信息
+ * @param {Numberish} tabName 被点击的 tab 值
+ * @param {Event} event
+ */
+const handleTabClick = (tab: TabsPaneContext, tabName: Numberish, event: Event) => {
+  // 如果 TabPaneProps 中设置了 disabled 则禁止点击
+  if (tab.props.disabled) return;
+  // 更新 currentName
+  setCurrentName(tabName);
+  // 抛出 tabClick 事件
+  emit('tabClick', tab, event);
+};
+
+const handleTabRemove = (pane: TabsPaneContext, ev: Event) => {
+  if (pane.props.disabled || isUndefined(pane.props.name)) return;
+  ev.stopPropagation();
+  emit('edit', pane.props.name, 'remove');
+  emit('tabRemove', pane.props.name);
+};
+
+// 监听 modelValue 改变触发改变 currentName
+watch(
+  () => modelValue,
+  (modelValue) => setCurrentName(modelValue)
+);
+
+// 当前激活的 tab 变化触发 nav$ scrollToActiveTab 方法
+watch(currentName, async () => {
+  await nextTick();
+  nav$.value?.scrollToActiveTab();
+});
+
+// 增加 tab 事件
+const handleTabAdd = () => {
+  emit('edit', undefined, 'add');
+  emit('tabAdd');
+};
+
+const handleContextmenu = (pane: TabsPaneContext, index: number, ev: Event) => {
+  emit('tabContextMenu', pane, index, ev);
+};
+
+// 默认渲染的内容区域
+const panels = computed(() => {
+  return <div class={ns.e('content')}>{slots.default?.()}</div>;
+});
+
+// 找出当前 tab 组件下 vri-tab-pane 的组件实例对象
+const { children: panes, addChild: registerPane, removeChild: unregisterPane } = useOrderedChildren<TabsPaneContext>(getCurrentInstance()!, 'vri-tab-pane');
+
+provide(TabsRootContextKey, {
+  props: vm.props as unknown as TabsProps,
+  currentName,
+  registerPane,
+  unregisterPane
+});
+
+defineExpose({
+  currentName
+});
+
+// 图标相关
+const _addIconCfg = computed(() => {
+  return {
+    icon: 'vi-add',
+    color: 'black',
+    size: 12,
+    ...addIconCfg
+  };
+});
+
+const _closeIconCfg = computed(() => {
+  return {
+    icon: 'vi-close',
+    size: 12,
+    ...closeIconCfg
+  };
+});
+
+const _arrowLeftIconCfg = computed(() => {
+  return {
+    icon: 'vi-arrow-left',
+    size: 18,
+    ...arrowLeftIconCfg
+  };
+});
+
+const _arrowRightIconCfg = computed(() => {
+  return {
+    icon: 'vi-arrow-right',
+    size: 18,
+    ...arrowRightIconCfg
+  };
+});
+
+const header = computed(() => {
+  return (
+    <div class={[ns.e('header'), ns.is(tabPosition)]}>
+      <TabNav
+        ref={nav$}
+        currentName={currentName.value}
+        panes={panes.value}
+        stretch={stretch}
+        closeIconCfg={_closeIconCfg.value}
+        addIconCfg={_addIconCfg.value}
+        arrowRightIconCfg={_arrowRightIconCfg.value}
+        arrowLeftIconCfg={_arrowLeftIconCfg.value}
+        editable={editable}
+        addable={addable}
+        type={type}
+        onTabClick={handleTabClick}
+        onTabRemove={handleTabRemove}
+        onTabAdd={handleTabAdd}
+        onTabContextmenu={handleContextmenu}
+      />
+      {slots.headerRight?.()}
+    </div>
+  );
+});
+
+defineRender(() => {
+  return (
+    <div
+      class={[
+        ns.b(),
+        ns.m(tabPosition),
+        {
+          [ns.m('card')]: type === 'card',
+          [ns.m('border-card')]: type === 'border-card'
+        }
+      ]}
+    >
+      {...tabPosition !== 'bottom' ? [header.value, panels.value] : [panels.value, header.value]}
+    </div>
+  );
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

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

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { type TabsPaneContext, TabsRootContextKey } from './types';
+import { useNamespace } from '../../use';
+import { capitalize } from '@vri/utils';
+import { getCurrentInstance, inject, nextTick, ref, watch, computed } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+
+import type { CSSProperties } from 'vue';
+
+const props = defineProps<{
+  tabs: TabsPaneContext[]
+}>();
+
+const instance = getCurrentInstance()!;
+const rootTabs = inject(TabsRootContextKey)!;
+
+const ns = useNamespace('tabs');
+
+const barRef = ref<HTMLDivElement>();
+const barStyle = ref<CSSProperties>();
+
+const getBarStyle = (): CSSProperties => {
+  let offset = 0;
+  let tabSize = 0;
+
+  const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition!)
+    ? 'width'
+    : 'height';
+  const sizeDir = sizeName === 'width' ? 'x' : 'y';
+  const position = sizeDir === 'x' ? 'left' : 'top';
+
+  props.tabs.every((tab) => {
+    const $el = instance.parent?.refs?.[`tab-${tab.uid}`] as HTMLElement;
+    if (!$el) return false;
+
+    if (!tab.active) {
+      return true;
+    }
+    offset = $el[`offset${capitalize(position)}`];
+    tabSize = $el[`client${capitalize(sizeName)}`];
+
+    const tabStyles = window.getComputedStyle($el);
+
+    if (sizeName === 'width') {
+      if (props.tabs.length > 1) {
+        tabSize -=
+          Number.parseFloat(tabStyles.paddingLeft) +
+          Number.parseFloat(tabStyles.paddingRight);
+      }
+      offset += Number.parseFloat(tabStyles.paddingLeft);
+    }
+    return false;
+  });
+
+  return {
+    [sizeName]: `${tabSize}px`,
+    transform: `translate${capitalize(sizeDir)}(${offset}px)`
+  };
+};
+
+const update = () => (barStyle.value = getBarStyle());
+
+watch(
+  () => props.tabs,
+  async () => {
+    await nextTick();
+    update();
+  },
+  { immediate: true }
+);
+
+const _tabPosition = computed(() => {
+  return rootTabs.props.tabPosition!;
+});
+
+useResizeObserver(barRef, () => update());
+
+defineExpose({
+  ref: barRef,
+  update
+});
+</script>
+
+<template>
+  <div
+    ref="barRef"
+    :class="[ns.e('active-bar'), ns.is(_tabPosition)]"
+    :style="barStyle"
+  />
+</template>