@qi-tian-da-sheng/bin-project-ui 1.0.0

package/packages/components/tabs/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @description: 选项卡
+ * @author: MC.Yang
+ */
+import _Tabs from "./src/tabs.vue"
+import _TabPanel from "./src/tab-panel.vue"
+import {withInstall} from "@bin-ui/tools";
+
+const Tabs = withInstall(_Tabs);
+const TabPanel = withInstall(_TabPanel);
+
+export type PTagInstance = InstanceType<typeof _Tabs>;
+export type PTabPanelInstance = InstanceType<typeof _TabPanel>;
+
+export default {Tabs, TabPanel};
+export {Tabs, TabPanel};

package/packages/components/tabs/src/tab-nav-bar.vue

@@ -0,0 +1,86 @@
+<template>
+  <div :class="classes" :style="navBarStyle" ref="barRef"></div>
+</template>
+
+<script setup lang="ts">
+import {computed, nextTick, onMounted, PropType, ref, VNode, watch} from "vue";
+import {useNS} from "@bin-ui/hooks";
+import tabProps from "./tabs-props";
+import {debounce} from "@bin-ui/tools";
+import {useResizeObserver} from "@vueuse/core";
+
+defineOptions({
+  name: "PTabNavBar",
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  navs: {
+    type: Array as PropType<VNode[]>,
+  },
+  placement: tabProps.placement,
+  value: tabProps.value,
+});
+
+const barRef = ref<HTMLElement>();
+const navBarStyle = ref();
+
+const update = () => (navBarStyle.value = getStyle());
+
+// watch
+watch([() => props.navs, () => props.value, () => props.placement], () => {
+  nextTick(() => {
+    update();
+  });
+});
+
+// onMounted
+onMounted(() => {
+  nextTick(() => {
+    update();
+  });
+});
+
+// useResizeObserver
+useResizeObserver(
+    barRef,
+    debounce(() => {
+      update();
+    }, 35),
+);
+
+// 样式
+const ns = useNS('tabs__bar');
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.is(props.placement, props.placement !== undefined),
+  ]
+});
+const getStyle = () => {
+  if (props.placement && props.navs) {
+    const isVertical = ['left', 'right'].includes(props.placement.toLowerCase());
+    const [sizePropName, offsetPropName] = isVertical ? ['height', 'top'] : ['width', 'left'];
+    let offset = 0;
+    let i = 0;
+    for (; i < props.navs.length; i++) {
+      if (props.navs[i].props?.value === props.value) {
+        break;
+      }
+      if (props.navs[i]?.el) {
+        const sizeWithUnit = getComputedStyle(props.navs[i].el as Element)[sizePropName as 'width' | 'left'];
+        const size = parseFloat(sizeWithUnit);
+        offset += size;
+      }
+    }
+    if (!props.navs[i]) return {};
+    return {
+      [offsetPropName]: `${offset}px`,
+      [sizePropName]: props.navs[i].el
+          ? getComputedStyle(props.navs[i].el as Element)[sizePropName as 'width' | 'left']
+          : '0px',
+    };
+  }
+};
+
+</script>

package/packages/components/tabs/src/tab-nav-item.vue

@@ -0,0 +1,80 @@
+<template>
+  <div :class="classes" :draggable="props.draggable" @click="onClickNav">
+    <div :class="[ns.b('item-wrapper'), ns.is(props.active, 'active'), ns.is(props.disabled, 'disabled'),]">
+      <span :class="ns.bb('text', 'wrapper')">
+        <template v-if="isArray(props.label)">
+          <component v-for="item in props.label" :is="item"/>
+        </template>
+        <template v-else>{{ props.label }}</template>
+      </span>
+      <p-icon
+          v-if="props.removable && !props.disabled"
+          :class="ns.bb('remove', 'btn')"
+          target="close"
+          @click="removeBtnClick"
+      ></p-icon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, PropType} from "vue";
+import PIcon from "../../icon/src/icon.vue";
+import {useNS} from "@bin-ui/hooks";
+import tabProps from "./tabs-props";
+import tabPanelProps from "./tab-panel-props";
+import {isArray} from "@bin-ui/tools";
+
+defineOptions({
+  name: "PTabNavItem",
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  draggable: {
+    type: Boolean,
+  },
+  index: Number,
+  active: {
+    type: Boolean,
+  },
+  theme: tabProps.theme,
+  size: tabProps.size,
+  placement: tabProps.placement,
+  label: {
+    type: null,
+  },
+  disabled: tabPanelProps.disabled,
+  removable: tabPanelProps.removable,
+  value: tabPanelProps.value,
+  onClick: Function as PropType<Function>,
+  onRemove: Function as PropType<Function>,
+});
+
+// 点击选项卡导航
+const onClickNav = (e: MouseEvent) => {
+  if (props.disabled) return;
+  props.onClick?.(e);
+};
+
+// 点击选项卡删除按钮
+const removeBtnClick = (e: MouseEvent) => {
+  if (e) e.stopPropagation();
+  props.onRemove?.({value: props.value, index: props.index, e});
+};
+
+// 样式
+const ns = useNS('tabs__nav');
+const classes = computed(() => {
+  return [
+    ns.b('item'),
+    ns.m('card', props.theme === 'card'),
+    ns.is(props.placement, props.placement !== undefined),
+    ns.is(props.disabled, 'disabled'),
+    ns.is(props.active, 'active'),
+    ns.size(props.size),
+  ]
+})
+
+
+</script>

package/packages/components/tabs/src/tab-nav.vue

@@ -0,0 +1,298 @@
+<template>
+  <div :class="ns.namespace" :style="navsContainerStyle" ref="navsContainerRef">
+    <div ref="leftOperationsRef" :class="[ns.b('operations'),ns.b('operations--left')]">
+      <Transition v-if="canToLeft" name="fade" mode="out-in" appear>
+        <div :class="[ns.b('btn'), ns.bb('left', 'btn'), ns.size(props.size)]"
+             @click="handleScroll('prev')">
+          <p-icon target="left"/>
+        </div>
+      </Transition>
+    </div>
+    <div ref="rightOperationsRef" :class="[ns.b('operations'),ns.b('operations--right')]">
+      <Transition name="fade" mode="out-in" appear>
+        <div v-if="canToRight" :class="[ns.b('btn'), ns.bb('right', 'btn'), ns.size(props.size)]"
+             @click="handleScroll('next')">
+          <p-icon target="right"/>
+        </div>
+      </Transition>
+      <div v-if="props.addable" :class="[ns.b('btn'), ns.bb('add', 'btn'), ns.size(props.size)]"
+           ref="toRightBtnRef"
+           @click="addTabClick">
+        <p-icon target="add"/>
+      </div>
+    </div>
+
+    <div :class="[
+        ns.b('container'), ns.m('card', props.theme === 'card'),
+        ns.is(props.placement, props.placement !== undefined), ns.is('addable', props.addable),
+    ]">
+      <div :class="[ns.b('scroll'), ns.is(canToLeft || canToRight, 'scrollable'),]" :onWheel="handleWheel">
+        <div :class="[
+            ns.b('wrap'), ns.is('smooth', true), ns.is('vertical', isVerticalPlacement),
+        ]" :style="wrapTransformStyle" ref="navsWrapRef">
+          <component :is="renderNavsContent"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, h, nextTick, onMounted, ref, watch} from "vue";
+import PTabPanel from "./tab-panel.vue";
+import PTabNavBar from "./tab-nav-bar.vue";
+import PTabNavItem from "./tab-nav-item.vue";
+import PIcon from "../../icon/src/icon.vue";
+import {useNS} from "@bin-ui/hooks";
+import tabProps from "./tabs-props";
+import {isFunction} from "@bin-ui/tools";
+import useDragSort from "@bin-ui/hooks/useDragSort";
+import {AllElementDeps, TabScrollPosition, TabValue} from "./type";
+
+defineOptions({
+  name: "PTabNav",
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  theme: tabProps.theme,
+  panels: {
+    type: Array as { new(): Array<InstanceType<typeof PTabPanel>> },
+    default: (): Array<InstanceType<typeof PTabPanel>> => [] as Array<InstanceType<typeof PTabPanel>>,
+  },
+  action: Array,
+  value: tabProps.value,
+  placement: tabProps.placement,
+  scrollPosition: tabProps.scrollPosition,
+  size: tabProps.size,
+  disabled: tabProps.disabled,
+  addable: tabProps.addable,
+  onChange: tabProps.onChange,
+  onAdd: tabProps.onAdd,
+  onRemove: tabProps.onRemove,
+  dragSort: tabProps.dragSort,
+  onDragSort: tabProps.onDragSort,
+});
+
+const scrollLeft = ref(0);
+const navsContainerRef = ref();
+const navsWrapRef = ref();
+const leftOperationsRef = ref();
+const rightOperationsRef = ref();
+const toRightBtnRef = ref();
+const activeTabRef = ref();
+const maxScrollLeft = ref(0);
+
+const getRefs = () => ({
+  navsContainer: navsContainerRef.value,
+  navsWrap: navsWrapRef.value,
+  leftOperations: leftOperationsRef.value,
+  rightOperations: rightOperationsRef.value,
+  toRightBtn: toRightBtnRef.value,
+  activeTab: activeTabRef.value,
+});
+
+const {setNavsWrap} = useDragSort(props);
+
+// 展示操作按钮
+const canToLeft = computed(() => scrollLeft.value > 1);
+const canToRight = computed(() => scrollLeft.value < maxScrollLeft.value - 1);
+
+// 获取 dom 宽度
+const getDomWidth = (dom: HTMLElement | undefined): number => dom?.offsetWidth || 0;
+// 获取 dom 左偏移量
+const getDomOffsetLeft = (dom: HTMLElement | undefined): number => dom?.offsetLeft || 0;
+
+// 点击选项卡导航
+const tabClick = (nav: Partial<InstanceType<typeof PTabPanel>>) => {
+  const {value, disabled} = nav;
+  if (disabled || props.value === value) {
+    return false;
+  }
+  props.onChange?.(value as TabValue);
+};
+// 点击选项卡添加按钮
+const addTabClick = (e: MouseEvent) => {
+  props.onAdd?.({e});
+};
+// 点击选项卡删除按钮
+const removeTabClick = ({value, index, e}: { value: TabValue; index: number; e: MouseEvent }) => {
+  props.onRemove?.({value, index, e});
+};
+
+// 设置激活选项卡
+const setActiveTab = (ref: any, value: TabValue) => {
+  if (!ref?.$el) return;
+  if (value === props.value && activeTabRef.value !== ref.$el) {
+    activeTabRef.value = ref.$el;
+    handleActiveTabScroll();
+  }
+};
+
+// 设置偏移量
+const setOffset = (offset: number) => {
+  scrollLeft.value = Math.max(0, Math.min(offset, maxScrollLeft.value));
+};
+
+// 设置最大左滚动
+const setMaxScrollLeft = () => {
+  nextTick(() => {
+    maxScrollLeft.value = calcMaxOffset(getRefs());
+  });
+};
+
+// 处理激活选项卡滚动
+const handleActiveTabScroll = () => {
+  setTimeout(() => {
+    if (props.scrollPosition) {
+      setOffset(calculateOffset(getRefs(), scrollLeft.value, props.scrollPosition));
+    }
+  }, 0);
+};
+
+// 处理鼠标滚动
+const handleWheel = (event: WheelEvent) => {
+  if (!canToLeft.value && !canToRight.value) return;
+
+  event.preventDefault();
+  const {deltaX, deltaY} = event;
+
+  if (Math.abs(deltaX) > Math.abs(deltaY)) {
+    setOffset(scrollLeft.value + deltaX);
+  } else {
+    setOffset(scrollLeft.value + deltaY);
+  }
+};
+
+// 处理选项卡滚动
+const handleScroll = (action: 'prev' | 'next') => {
+  setOffset(calcPrevOrNextOffset(getRefs(), scrollLeft.value, action));
+};
+
+// 计算偏移量
+const calculateOffset = (depElement: AllElementDeps, offset: number, scrollPosition: TabScrollPosition) => {
+  // 计算当前 activeTab 应该滚动到的位置
+  const {navsContainer, activeTab, rightOperations, leftOperations} = depElement;
+  const tabWidth = getDomWidth(activeTab);
+  const wrapWidth = getDomWidth(navsContainer);
+  const tabOffset = getDomOffsetLeft(activeTab);
+  const rightOperationsWidth = getDomWidth(rightOperations);
+  const leftOperationsWidth = getDomWidth(leftOperations);
+
+  if (scrollPosition === 'auto') {
+    if (tabOffset - leftOperationsWidth < offset) {
+      return tabOffset - leftOperationsWidth;
+    }
+    if (tabOffset + tabWidth > offset + wrapWidth - rightOperationsWidth) {
+      return tabOffset + tabWidth - wrapWidth + rightOperationsWidth;
+    }
+  } else if (scrollPosition === 'start') {
+    return tabOffset - leftOperationsWidth;
+  } else if (scrollPosition === 'center') {
+    return tabOffset + (tabWidth - wrapWidth) / 2;
+  } else if (scrollPosition === 'end') {
+    return tabOffset + tabWidth - wrapWidth + rightOperationsWidth;
+  }
+  return offset;
+}
+
+// 计算最大偏移量
+const calcMaxOffset = (elements: AllElementDeps) => {
+  const {navsWrap, navsContainer, rightOperations, toRightBtn} = elements;
+  const wrapWidth = getDomWidth(navsWrap);
+  const containerWidth = getDomWidth(navsContainer);
+  const rightOperationsWidth = getDomWidth(rightOperations);
+  const toRightBtnWidth = getDomWidth(toRightBtn);
+  return wrapWidth - containerWidth + rightOperationsWidth - toRightBtnWidth;
+}
+
+// 计算上一页或下一页偏移量
+const calcPrevOrNextOffset = (elements: AllElementDeps, offset: number, action: 'next' | 'prev') => {
+  const {navsContainer, activeTab} = elements;
+  const navsContainerWidth = getDomWidth(navsContainer);
+  const activeTabWidth = getDomWidth(activeTab);
+  if (action === 'next') {
+    return offset + navsContainerWidth - activeTabWidth;
+  }
+  return offset - navsContainerWidth + activeTabWidth;
+};
+
+// watch
+watch([() => props.placement, () => props.panels], setMaxScrollLeft);
+watch([() => props.scrollPosition], handleActiveTabScroll);
+
+// onMounted
+onMounted(() => {
+  setNavsWrap(navsWrapRef.value)
+  setMaxScrollLeft();
+  handleActiveTabScroll();
+});
+
+// 样式
+const ns = useNS('tabs__nav');
+// 当选项卡位置是 left 和 right 时需要在左右侧垂直方向铺开
+const isVerticalPlacement = computed(() => {
+  if (props.placement) {
+    return ['left', 'right'].includes(props.placement.toLowerCase());
+  }
+});
+// 换行变换样式
+const wrapTransformStyle = computed(() => {
+  if (isVerticalPlacement.value) return {};
+  return {
+    transform: `translate3d(${-scrollLeft.value}px, 0, 0)`,
+  };
+});
+// Navs 容器样式
+const navsContainerStyle = computed(() => {
+  return props.addable ? {'min-height': '40px'} : null;
+});
+
+// 渲染选项卡导航内容
+const renderNavsContent = () => {
+  const navsContents = props.panels.map((item, index) => {
+    let panel = item as any;
+    let label;
+    if (panel?.children?.label) {
+      label = panel.children.label();
+    } else if (isFunction(panel.label)) {
+      label = panel.label(h);
+    } else {
+      label = panel.label || `选项卡${index + 1}`;
+    }
+    let draggable = props.dragSort;
+    if (draggable && panel.draggable === false) {
+      draggable = panel.draggable;
+    }
+
+    const tabNavItemProps: any = {
+      draggable: draggable,
+      index: index,
+      active: panel.value === props.value,
+      theme: props.theme,
+      size: props.size,
+      placement: props.placement,
+      label: label,
+      disabled: props.disabled || panel.disabled,
+      removable: panel.removable,
+      value: panel.value,
+      ref: (el: any) => setActiveTab(el, panel.value),
+      onClick: () => tabClick(panel),
+      onRemove: (options: { value: TabValue; index: number; e: MouseEvent }) => removeTabClick(options),
+    };
+    return h(PTabNavItem, {...tabNavItemProps});
+  });
+
+  if (props.theme !== 'card') {
+    const navsBar = h(PTabNavBar, {
+      placement: props.placement,
+      value: props.value,
+      navs: navsContents
+    });
+    return [navsBar, navsContents];
+  } else {
+    return navsContents;
+  }
+};
+
+</script>

package/packages/components/tabs/src/tab-panel-props.ts

@@ -0,0 +1,77 @@
+/*
+ * @description: 选项卡面板
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {PTabPanelProps} from "./type";
+
+/**
+ * 选项卡面板 Props
+ */
+export default {
+
+    /**
+     * 用于自定义选项卡导航，同 panel
+     */
+    default: {
+        type: Function as PropType<PTabPanelProps['default']>,
+    },
+
+    /**
+     * 选项卡内容隐藏时是否销毁
+     */
+    destroyOnHide: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * 是否禁用当前选项卡
+     */
+    disabled: Boolean,
+
+    /**
+     * 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动
+     */
+    draggable: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * 选项卡名称，可自定义选项卡导航内容
+     */
+    label: {
+        type: [String, Function] as PropType<PTabPanelProps['label']>,
+    },
+
+    /**
+     * 是否启用选项卡懒加载
+     */
+    lazy: Boolean,
+
+    /**
+     * 用于自定义选项卡面板内容
+     */
+    panel: {
+        type: [String, Function] as PropType<PTabPanelProps['panel']>,
+    },
+
+    /**
+     * 当前选项卡是否允许移除
+     */
+    removable: Boolean,
+
+    /**
+     * 选项卡的值，唯一标识
+     */
+    value: {
+        type: [String, Number] as PropType<PTabPanelProps['value']>,
+    },
+
+    /**
+     * 点击删除按钮时触发
+     */
+    onRemove: Function as PropType<PTabPanelProps['onRemove']>,
+
+};

package/packages/components/tabs/src/tab-panel.vue

@@ -0,0 +1,52 @@
+<template>
+  <div v-if="!isDestroy" v-show="isActive" :class="classes">
+    <component v-for="item in panels" :is="item"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, inject, ref, watch} from "vue";
+import {InjectTabs} from "./type";
+import {useNS} from "@bin-ui/hooks";
+import tabPanelProps from "./tab-panel-props";
+import {useContent} from "@bin-ui/tools/element/render-node";
+
+defineOptions({
+  name: "PTabPanel",
+  inheritAttrs: false
+})
+
+const props = defineProps({...tabPanelProps});
+
+const renderPNodeContent = useContent();
+const panels = renderPNodeContent('default', 'panel');
+
+const tabs = inject<InjectTabs>('tabs');
+const isActive = computed(() => props.value === tabs?.activeValue.value);
+const isDestroy = ref(props.lazy ? true : !isActive.value);
+
+// watch
+watch(
+    isActive,
+    () => {
+      if (isActive.value) {
+        if (isDestroy.value) {
+          isDestroy.value = false;
+        }
+      } else if (!props.destroyOnHide) {
+        isDestroy.value = true;
+      }
+    },
+    {immediate: true},
+);
+
+// 样式
+const ns = useNS('tabs-panel');
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.is(isActive.value, 'active'),
+  ]
+});
+
+</script>