vft 0.0.1 → 0.0.3

package/src/web/tabs/index.vue

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

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