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

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

@@ -0,0 +1,122 @@
+/*
+ * @description: 选项卡
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {PTabsProps} from "./type";
+
+/**
+ * 选项卡 Props
+ */
+export default {
+
+    /**
+     * @description 选项卡右侧的操作区域
+     */
+    action: {
+        type: [String, Function] as PropType<PTabsProps['action']>,
+    },
+
+    /**
+     * @description 选项卡是否可增加
+     */
+    addable: Boolean,
+
+    /**
+     * @description 是否禁用选项卡
+     */
+    disabled: Boolean,
+
+    /**
+     * @description 是否开启拖拽调整顺序
+     */
+    dragSort: Boolean,
+
+    /**
+     * @description 选项卡列表
+     */
+    list: {
+        type: Array as PropType<PTabsProps['list']>,
+    },
+
+    /**
+     * @description 选项卡位置
+     */
+    placement: {
+        type: String as PropType<PTabsProps['placement']>,
+        default: 'top' as PTabsProps['placement'],
+        validator(val: PTabsProps['placement']): boolean {
+            if (!val) return true;
+            return ['left', 'top', 'bottom', 'right'].includes(val);
+        },
+    },
+
+    /**
+     * @description Tab 较多的时候，选中滑块滚动最终停留的位置
+     */
+    scrollPosition: {
+        type: String as PropType<PTabsProps['scrollPosition']>,
+        default: 'auto' as PTabsProps['scrollPosition'],
+        validator(val: PTabsProps['scrollPosition']): boolean {
+            if (!val) return true;
+            return ['auto', 'start', 'center', 'end'].includes(val);
+        },
+    },
+
+    /**
+     * @description 组件尺寸
+     */
+    size: {
+        type: String as PropType<PTabsProps['size']>,
+        default: 'normal' as PTabsProps['size'],
+        validator(val: PTabsProps['size']): boolean {
+            if (!val) return true;
+            return ['small', 'normal', 'large'].includes(val);
+        },
+    },
+
+    /**
+     * @description 选项卡风格，包含 默认风格 和 卡片风格两种
+     */
+    theme: {
+        type: String as PropType<PTabsProps['theme']>,
+        default: 'normal' as PTabsProps['theme'],
+        validator(val: PTabsProps['theme']): boolean {
+            if (!val) return true;
+            return ['normal', 'card'].includes(val);
+        },
+    },
+
+    /**
+     * @description 激活的选项卡值
+     */
+    value: {
+        type: [String, Number] as PropType<PTabsProps['value']>,
+        default: undefined as PTabsProps['value'],
+    },
+    modelValue: {
+        type: [String, Number] as PropType<PTabsProps['value']>,
+        default: undefined as PTabsProps['value'],
+    },
+
+    /**
+     * @description 添加选项卡时触发
+     */
+    onAdd: Function as PropType<PTabsProps['onAdd']>,
+
+    /**
+     * @description 激活的选项卡发生变化时触发
+     */
+    onChange: Function as PropType<PTabsProps['onChange']>,
+
+    /**
+     * @description 拖拽排序时触发
+     */
+    onDragSort: Function as PropType<PTabsProps['onDragSort']>,
+
+    /**
+     * @description 删除选项卡时触发
+     */
+    onRemove: Function as PropType<PTabsProps['onRemove']>,
+
+}

package/packages/components/tabs/src/tabs.vue

@@ -0,0 +1,144 @@
+<template>
+  <div :class="ns.namespace">
+    <template v-if="props.placement !== 'bottom'">
+      <component :is="renderHeader"/>
+      <component :is="renderContent"/>
+    </template>
+    <template v-else>
+      <component :is="renderContent"/>
+      <component :is="renderHeader"/>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ComponentPublicInstance, h, provide, useSlots} from "vue";
+import PTabNav from "./tab-nav.vue";
+import PTabPanel from "./tab-panel.vue";
+import tabsProps from "./tabs-props";
+import {InjectTabs, TabsDragSortContext, TabValue} from "./type";
+import {toRefs} from "vue";
+import {useNS} from "@bin-ui/hooks";
+import {isArray} from "@bin-ui/tools";
+import useVModel from "@bin-ui/hooks/useVModel";
+import {usePNode} from "@bin-ui/tools/element/render-node";
+
+defineOptions({
+  name: "PTabs",
+  inheritAttrs: false
+})
+
+const props = defineProps({...tabsProps});
+
+const renderPNode = usePNode();
+const slots = useSlots();
+const {value, modelValue} = toRefs(props);
+const [tabValue, setTabValue] = useVModel(value, modelValue, undefined, props.onChange);
+
+provide<InjectTabs>('tabs', {activeValue: tabValue});
+
+// 激活选项卡改变事件
+const onTabChange = (value: TabValue) => {
+  setTabValue(value);
+};
+// 选项卡添加事件
+const onTabAdd = (e: MouseEvent) => {
+  props.onAdd?.({e});
+};
+// 选项卡删除事件
+const onTabRemove = ({value, index, e}: { value: TabValue; index: number; e: MouseEvent }) => {
+  props.onRemove?.({value, index, e});
+};
+// 拖拽排序事件
+const onDragSort = (context: TabsDragSortContext) => {
+  props.onDragSort?.(context);
+};
+
+// 获取槽位面板
+const getSlotPanels = (): ComponentPublicInstance[] => {
+  // 获取默认插槽的内容
+  const content = renderPNode('default') || slots.default?.({});
+
+  // 如果没有内容，直接返回空数组
+  if (!content || !isArray(content)) {
+    return [];
+  }
+
+  // 定义一个递归函数来展平内容并过滤出 PTabPanel 组件
+  const flatAndFilterContent = (nodes: ComponentPublicInstance[]): ComponentPublicInstance[] => {
+    let result: ComponentPublicInstance[] = [];
+
+    nodes.forEach(node => {
+      // 如果节点有子节点且子节点是数组，则递归处理
+      const item = node as any;
+      if (item.children && isArray(item.children)) {
+        result = result.concat(flatAndFilterContent(item.children));
+      } else if (item.type?.name === 'PTabPanel') {
+        // 如果节点是 PTabPanel 类型，则添加到结果中
+        result.push(node);
+      }
+    });
+
+    return result;
+  };
+
+  // 调用递归函数并返回结果
+  return flatAndFilterContent(content);
+};
+
+// 样式
+const ns = useNS('tabs');
+
+// 渲染选项卡 nav
+const renderHeader = () => {
+  const panels = (props.list?.length ? props.list : getSlotPanels()) || [];
+  const actionContent = renderPNode('action');
+  const panelsData = panels.map((item: any) => {
+    const selfItem = item;
+    if (item.props) {
+      Object.keys(item.props).forEach((key) => {
+        selfItem[key] = item.props[key];
+      });
+    }
+    return selfItem;
+  });
+
+  const tabNavProps: any = {
+    theme: props.theme,
+    value: tabValue.value,
+    size: props.size,
+    disabled: props.disabled,
+    placement: props.placement,
+    scrollPosition: props.scrollPosition,
+    addable: props.addable,
+    panels: panelsData,
+    action: actionContent,
+    dragSort: props.dragSort,
+    onDragSort: (context: TabsDragSortContext) => onDragSort(context),
+    onChange: (value: TabValue) => onTabChange(value),
+    onAdd: (e: MouseEvent) => onTabAdd(e),
+    onRemove: (options: { value: TabValue; index: number; e: MouseEvent }) => onTabRemove(options),
+  };
+
+  return h('div', {
+    class: [
+      ns.e('header'),
+      ns.is(props.placement),
+    ]
+  }, [
+    h(PTabNav, {...tabNavProps})
+  ]);
+};
+
+// 渲染选项卡 panel
+const renderContent = () => {
+  const panels = getSlotPanels();
+  if (props.list?.length) {
+    return props.list.map(item => h(PTabPanel, {...item as any}));
+  }
+  if (panels && panels.length) {
+    return h('div', {class: ns.e('content')}, panels.map(item => h(item, {})));
+  }
+};
+
+</script>

package/packages/components/tabs/src/type.ts

@@ -0,0 +1,194 @@
+/*
+ * @description: 选项卡类型定义
+ * @author: MC.Yang
+ */
+import {Ref} from "vue";
+import {ElementSizes, PNode} from "@bin-ui/typings";
+
+/**
+ * 选项卡值
+ */
+export type TabValue = string | number;
+
+/**
+ * 选项卡位置
+ */
+export type TabPlacement = 'left' | 'top' | 'bottom' | 'right';
+
+/**
+ * 选项卡选中滑块滚动最终停留的位置
+ */
+export type TabScrollPosition = 'auto' | 'start' | 'center' | 'end';
+
+/**
+ * 选项卡主题
+ */
+export type TabTheme = 'normal' | 'card';
+
+/**
+ * 选项卡 Props 类型定义
+ */
+export interface PTabsProps {
+    /**
+     * @description 选项卡右侧的操作区域
+     */
+    action?: string | PNode;
+    /**
+     * @description 选项卡是否可增加
+     * @default false
+     */
+    addable?: boolean;
+    /**
+     * @description 是否禁用选项卡
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @description 是否开启拖拽调整顺序
+     * @default false
+     */
+    dragSort?: boolean;
+    /**
+     * @description 选项卡列表
+     */
+    list?: Array<PTabPanelProps>;
+    /**
+     * @description 选项卡位置
+     * @default top
+     */
+    placement?: TabPlacement;
+    /**
+     * @description Tab 较多的时候，选中滑块滚动最终停留的位置
+     * @default auto
+     */
+    scrollPosition?: TabScrollPosition;
+    /**
+     * @description 组件尺寸
+     * @default medium
+     */
+    size?: ElementSizes;
+    /**
+     * @description 选项卡风格，包含 默认风格 和 卡片风格两种
+     * @default normal
+     */
+    theme?: TabTheme;
+    /**
+     * @description 激活的选项卡值
+     */
+    value?: TabValue;
+    /**
+     * @description 激活的选项卡值
+     */
+    modelValue?: TabValue;
+    /**
+     * @description 添加选项卡时触发
+     */
+    onAdd?: (context: { e: MouseEvent }) => void;
+    /**
+     * @description 激活的选项卡发生变化时触发
+     */
+    onChange?: (value: TabValue) => void;
+    /**
+     * @description 拖拽排序时触发
+     */
+    onDragSort?: (context: TabsDragSortContext) => void;
+    /**
+     * @description 删除选项卡时触发
+     */
+    onRemove?: (options: { value: TabValue; index: number; e: MouseEvent }) => void;
+}
+
+/**
+ * 选项卡面板 Props 类型定义
+ */
+export interface PTabPanelProps {
+    /**
+     * @description 用于自定义选项卡导航，同 panel
+     */
+    default?: PNode;
+    /**
+     * @description 选项卡内容隐藏时是否销毁
+     * @default true
+     */
+    destroyOnHide?: boolean;
+    /**
+     * @description 是否禁用当前选项卡
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @description 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * @description 选项卡名称，可自定义选项卡导航内容
+     */
+    label?: string | PNode;
+    /**
+     * @description 是否启用选项卡懒加载
+     * @default false
+     */
+    lazy?: boolean;
+    /**
+     * @description 用于自定义选项卡面板内容
+     */
+    panel?: string | PNode;
+    /**
+     * @description 当前选项卡是否允许移除
+     * @default false
+     */
+    removable?: boolean;
+    /**
+     * @description 选项卡的值，唯一标识
+     */
+    value?: TabValue;
+    /**
+     * @description 点击删除按钮时触发
+     */
+    onRemove?: (options: { value: TabValue; e: MouseEvent }) => void;
+}
+
+
+/**
+ * 选项卡节点
+ */
+export interface InjectTabs {
+    /**
+     * @description 激活 tabs 值
+     */
+    activeValue: Ref<TabValue | undefined>;
+}
+
+/**
+ * 选项卡拖动排序上下文
+ */
+export interface TabsDragSortContext {
+    /**
+     * @description 当前索引
+     */
+    currentIndex: number;
+    /**
+     * @description 当前值
+     */
+    current: TabValue;
+    /**
+     * @description 目标索引
+     */
+    targetIndex: number;
+    /**
+     * @description 目标值
+     */
+    target: TabValue;
+}
+
+// 所有选项卡元素深度
+export interface AllElementDeps {
+    activeTab?: HTMLElement;
+    navsContainer?: HTMLElement;
+    navsWrap?: HTMLElement;
+    leftOperations?: HTMLElement;
+    toLeftBtn?: HTMLElement;
+    rightOperations?: HTMLElement;
+    toRightBtn?: HTMLElement;
+}

package/packages/components/tag/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 标签
+ * @author: MC.Yang
+ */
+import _Tag from "./src/tag.vue"
+import {withInstall} from "@bin-ui/tools";
+
+const Tag = withInstall(_Tag);
+
+export type PTagInstance = InstanceType<typeof _Tag>;
+
+export default {Tag};
+export {Tag};

package/packages/components/tag/src/tag.ts

@@ -0,0 +1,145 @@
+/**
+ * @file Tag 标签组件的类型定义文件
+ * @description 定义标签组件的所有属性、事件和类型
+ * @author MC.Yang
+ * @see {@link https://tdesign.tencent.com/vue-next/components/tag TDesign Tag}
+ */
+import { PropType } from "vue";
+import { ElementSizes, ElementTypes } from "@bin-ui/typings";
+
+/**
+ * 标签组件属性定义
+ * @description 包含标签的所有可配置属性
+ * @example
+ * ```vue
+ * <p-tag
+ *   type="success"
+ *   size="large"
+ *   variant="dark"
+ *   :closable="true"
+ * >
+ *   成功标签
+ * </p-tag>
+ * ```
+ */
+export const PTagProps = {
+
+    /**
+     * @property {string} type - 标签的类型
+     * @description 控制标签的颜色主题
+     * @default undefined
+     * @values 'primary' | 'success' | 'info' | 'warning' | 'danger'
+     * @example
+     * <p-tag type="primary">主要</p-tag>
+     * <p-tag type="success">成功</p-tag>
+     * <p-tag type="danger">危险</p-tag>
+     */
+    type: String as PropType<ElementTypes | 'primary'>,
+
+    /**
+     * @property {ElementSizes} size - 标签的大小
+     * @description 控制标签的尺寸
+     * @default undefined (默认尺寸)
+     * @values 'small' | 'large'
+     * @example
+     * <p-tag size="small">小标签</p-tag>
+     * <p-tag size="large">大标签</p-tag>
+     */
+    size: String as PropType<ElementSizes>,
+
+    /**
+     * @property {string} variant - 标签的主题风格
+     * @description 控制标签的视觉风格
+     * @default undefined (默认浅色)
+     * @values 'dark' | 'light'
+     * - dark: 深色主题，深色背景 + 白色文字
+     * - light: 浅色主题，浅色背景 + 深色文字
+     * @example
+     * <p-tag variant="dark">深色标签</p-tag>
+     * <p-tag variant="light">浅色标签</p-tag>
+     */
+    variant: String as PropType<'dark' | 'light'>,
+
+    /**
+     * @property {string} status - 标签的形状状态
+     * @description 控制标签的外观形状
+     * @default undefined (默认直角)
+     * @values 'round'
+     * - round: 圆角标签
+     * @example
+     * <p-tag status="round">圆角标签</p-tag>
+     */
+    status: String as PropType<'round'>,
+
+    /**
+     * @property {boolean} closable - 是否可以被关闭
+     * @description 控制标签是否显示关闭按钮
+     * @default false
+     * @example
+     * <p-tag :closable="true" @close="handleClose">
+     *   可关闭标签
+     * </p-tag>
+     */
+    closable: Boolean,
+
+}
+
+/**
+ * 标签组件触发事件定义
+ * @interface PTagEmits
+ * @description 定义标签组件可以发出的所有事件
+ * @example
+ * ```vue
+ * <p-tag
+ *   @click="handleClick"
+ *   :closable="true"
+ *   @close="handleClose"
+ * >
+ *   标签
+ * </p-tag>
+ * 
+ * <script setup>
+ * const handleClick = (event) => {
+ *   console.log('标签被点击', event)
+ * }
+ * 
+ * const handleClose = (event) => {
+ *   console.log('标签被关闭', event)
+ * }
+ * </script>
+ * ```
+ */
+export interface PTagEmits {
+
+    /**
+     * 点击标签时触发的事件
+     * @event click
+     * @param {MouseEvent} event - 鼠标事件对象
+     * @description 当用户点击标签时触发
+     * @example
+     * <p-tag @click="handleClick">点击我</p-tag>
+     */
+    (e: 'click', event: MouseEvent): void;
+
+    /**
+     * 点击关闭按钮时触发的事件
+     * @event close
+     * @param {MouseEvent} event - 鼠标事件对象
+     * @description 当标签可被关闭时，点击关闭图标触发
+     * @example
+     * ```vue
+     * <p-tag :closable="true" @close="handleClose">
+     *   可关闭标签
+     * </p-tag>
+     * 
+     * <script setup>
+     * const handleClose = (event) => {
+     *   // 处理关闭逻辑，如移除标签
+     *   event.stopPropagation()  // 阻止事件冒泡
+     * }
+     * </script>
+     * ```
+     */
+    (e: 'close', event: MouseEvent): void;
+
+}

package/packages/components/tag/src/tag.vue

@@ -0,0 +1,80 @@
+<!--
+  @component Tag 标签组件
+  @description 用于标记和选择，常用于显示状态、分类或标签信息
+  @author MC.Yang
+  @example
+  <p-tag type="primary">主要标签</p-tag>
+  <p-tag type="success" variant="dark">成功</p-tag>
+  <p-tag :closable="true" @close="handleClose">可关闭</p-tag>
+-->
+<template>
+  <!-- 水平缩放过渡动画 -->
+  <transition name="p-transition-scaleHorizontal" appear>
+    <div :class="classes"
+         @click="emits('click',$event)"
+    >
+      <!-- 标签文本内容 -->
+		<span :class="ns.e('content')">
+			<slot/>
+		</span>
+      
+      <!-- 关闭按钮（可选） -->
+      <p-icon
+          v-if="props.closable"
+          :class="ns.e('icon')"
+          target="close"
+          @click.stop="emits('close', $event)"
+      ></p-icon>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import PIcon from "../../icon/src/icon.vue";
+import { PTagEmits, PTagProps } from "./tag";
+import { useNS } from "@bin-ui/hooks";
+
+/**
+ * 组件配置
+ * @property {string} name - 组件名称
+ * @property {boolean} inheritAttrs - 允许属性继承
+ */
+defineOptions({
+  name: "PTag",
+  inheritAttrs: true
+})
+
+/** BEM 命名空间工具 */
+const ns = useNS('tag');
+
+/** 组件属性 */
+const props = defineProps({...PTagProps});
+
+/** 组件事件 */
+const emits = defineEmits<PTagEmits>();
+
+/**
+ * 计算标签的 CSS 类名数组
+ * @returns {Array<string>} 类名数组
+ * @description
+ * 根据标签的各种属性动态生成类名
+ * - type: 标签类型/颜色
+ * - size: 标签尺寸
+ * - variant: 主题风格
+ * - status: 形状状态
+ */
+const classes = computed(() => {
+  return [
+    ns.namespace,          // 'p-tag'
+    ns.m(props.type),      // 'p-tag--primary'
+    ns.m(props.size),      // 'p-tag--small' 或 'p-tag--large'
+    ns.m(props.variant),   // 'p-tag--dark' 或 'p-tag--light'
+    ns.is(props.status),   // 'is-round'
+  ]
+})
+
+</script>
+
+
+

package/packages/components/tooltip/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 文字提示
+ * @author: MC.Yang
+ */
+import _Tooltip from "./src/tooltip.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Tooltip = withInstall(_Tooltip);
+
+export type PTooltipInstance = InstanceType<typeof _Tooltip>;
+
+export default {Tooltip};
+export {Tooltip};