@yeepay/yee-boss-ui 0.1.6 → 0.1.7

package/README.md

@@ -15,6 +15,7 @@
 - `YeeForm` Schema 查询表单。
 - `useYeeGrid` 与 `gridApi/formApi`。
 - `YeeDescriptions` 配置驱动的详情展示。
+- `YeeEllipsisText` 单行/多行省略文本与按需完整提示。
 - `YeeFileUpload` 业务无关的文件选择与上传生命周期。
 - `YeeModal` 统一的 Modal / Drawer 容器。
 - `YeeSelect` 带完整文案提示的选择器。
@@ -89,6 +90,27 @@ export default {
 
 ## 通用业务组件
 
+### YeeEllipsisText
+
+通过 `line` 和 `maxWidth` 控制单行或多行省略；`tooltipWhenEllipsis` 开启后，仅在文本实际被截断时显示 Tooltip。`expand` 支持鼠标、Enter 和 Space 展开/收起，并通过 `expandChange` 通知状态变化。
+
+```vue
+<YeeEllipsisText
+  :line="2"
+  :max-width="360"
+  expand
+  tooltip-when-ellipsis
+  @expand-change="handleExpandChange"
+>
+  {{ remark }}
+  <template #tooltip>
+    完整备注：{{ remark }}
+  </template>
+</YeeEllipsisText>
+```
+
+`placement` 支持 `top`、`right`、`bottom`、`left`；`ellipsisThreshold` 默认是 `3px`。还可使用 `tooltipMaxWidth`、`tooltipOverlayStyle`、`tooltipBackgroundColor`、`tooltipColor` 和 `tooltipFontSize` 调整提示内容。默认背景、文字和字号消费 Yee 的 `popover`、`popoverForeground` 与 `fontSize` Theme Tokens；未使用 `PlatformConfigProvider` 时回退到对应的 `--yee-*` CSS Variables。
+
 ### YeeDescriptions
 
 配置项使用稳定的 `name` 时，可通过 `content-${name}` 覆盖内容。`copyable` 仅复制展示值，`info` 用于补充说明。

package/dist/components/ellipsis-text/YeeEllipsisText.vue.d.ts

@@ -0,0 +1,40 @@
+import { CSSProperties } from 'vue';
+import { YeeEllipsisTextProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?(): unknown;
+        tooltip?(): unknown;
+    }> & {
+        default?(): unknown;
+        tooltip?(): unknown;
+    };
+    refs: {
+        text: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<YeeEllipsisTextProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    expandChange: (expanded: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<YeeEllipsisTextProps> & Readonly<{
+    onExpandChange?: (expanded: boolean) => any;
+}>, {
+    line: number;
+    placement: import('./types').YeeEllipsisTextPlacement;
+    expand: boolean;
+    ellipsisThreshold: number;
+    maxWidth: number | string;
+    tooltip: boolean;
+    tooltipOverlayStyle: CSSProperties;
+    tooltipWhenEllipsis: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    text: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ellipsis-text/index.d.ts

@@ -0,0 +1,2 @@
+export { default as YeeEllipsisText } from './YeeEllipsisText.vue';
+export type { YeeEllipsisTextEmits, YeeEllipsisTextPlacement, YeeEllipsisTextProps, } from './types';

package/dist/components/ellipsis-text/types.d.ts

@@ -0,0 +1,31 @@
+import { CSSProperties } from 'vue';
+export type YeeEllipsisTextPlacement = 'bottom' | 'left' | 'right' | 'top';
+export interface YeeEllipsisTextProps {
+    /** 是否允许点击文本展开全部内容。 */
+    expand?: boolean;
+    /** 判定文本截断时允许的像素误差。 */
+    ellipsisThreshold?: number;
+    /** 折叠状态下最多展示的行数。 */
+    line?: number;
+    /** 文本区域最大宽度，数字按 px 处理。 */
+    maxWidth?: number | string;
+    /** Tooltip 展示位置。 */
+    placement?: YeeEllipsisTextPlacement;
+    /** 是否启用 Tooltip。 */
+    tooltip?: boolean;
+    /** Tooltip 背景色。 */
+    tooltipBackgroundColor?: string;
+    /** Tooltip 文字颜色。 */
+    tooltipColor?: string;
+    /** Tooltip 字号，单位 px。 */
+    tooltipFontSize?: number;
+    /** Tooltip 最大宽度，单位 px。 */
+    tooltipMaxWidth?: number;
+    /** Tooltip 内容区域样式。 */
+    tooltipOverlayStyle?: CSSProperties;
+    /** 是否仅在文本实际被截断时启用 Tooltip。 */
+    tooltipWhenEllipsis?: boolean;
+}
+export interface YeeEllipsisTextEmits {
+    expandChange: [expanded: boolean];
+}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as PlatformConfigProvider } from './components/PlatformConfigProvider.vue';
 export * from './components/descriptions';
+export * from './components/ellipsis-text';
 export * from './components/file-upload';
 export * from './components/form';
 export * from './components/grid';