truncate-middle-text 0.0.1

package/README.md

@@ -0,0 +1,95 @@
+# 单行文本中间省略号
+
+### 说明
+针对单行文本中间省略号，特点：
+1. 根据元素宽度自动触发单行文本中间省略号
+2. 文字动态变更亦可以触发
+3. 当隐藏元素（从超长文档中滚动到视图内）时，可以正确识别是否渲染中间省略号
+
+
+
+### 安装与使用
+
+1. 安装
+   `pnpm i truncate-middle-text`
+
+2. 在入口文件（通常是main.ts）引入全局样式
+
+   ```ts
+   import "truncate-middle-text/dist/index.css";
+   ```
+
+3. 固定列宽中使用
+   ```vue
+   <template>
+   <div style="width: 150px;">
+       <TruncateMiddleText
+           :text="text"
+           :end-lenght="3"
+           link-color="red"
+           @truncate-click="handleTruncateClick"
+       />
+   </div>
+   </template>
+   <script setup lang="ts">
+   import { TruncateMiddleText, type TruncateMiddleTextInstance } from "truncate-middle-text";
+   import { ref } from "vue";
+   
+   const text = ref("问君能有几多愁，恰似一江春水向东流，问君能有几多愁，恰似一江春水向东流");
+       
+   function handleTruncateClick(isLink: boolean) {
+       console.error(isLink);
+   }
+   </script>
+   ```
+
+   
+
+### 注意事项
+
+1）如果在左右布局的弹性布局中使用时需要注意在`TruncateMiddleText`组件外层包裹，并设置`overflow: hidden`才能做到动态中间省略号
+
+```vue
+<template>
+<div style="display: flex; width: 200px;">
+    <span style="flex-shrink: 0;">左侧label</span>
+    <!-- 注意：这里需要设置 overflow: hidden 才能在弹性布局中自适应宽度 -->
+    <div style="overflow: hidden;">
+        <TruncateMiddleText
+            :text="text"
+            :end-lenght="3"
+            link-color="red"
+            @truncate-click="handleTruncateClick"
+        />
+    </div>
+</div>
+</template>
+<script setup lang="ts">
+import { TruncateMiddleText, type TruncateMiddleTextInstance } from "truncate-middle-text";
+import { ref } from "vue";
+
+const text = ref("问君能有几多愁，恰似一江春水向东流，问君能有几多愁，恰似一江春水向东流");
+    
+function handleTruncateClick(isLink: boolean) {
+    console.error(isLink);
+}
+</script>
+```
+
+
+
+### API
+#### props
+
+| 属性      | 类型   | 说明                                                      |
+| --------- | ------ | --------------------------------------------------------- |
+| text      | string | 渲染的文字                                                |
+| endLenght | number | 文字尾部字符长度                                          |
+| linkColor | string | 可选参数，链接字体和bottomBorder的颜色，默认为：*#4f90e1* |
+
+### 事件
+
+| 事件名称      | 类型                    | 说明                                                         |
+| ------------- | ----------------------- | ------------------------------------------------------------ |
+| truncateClick | (isLink: boolean): void | 点击TruncateMiddleText时的点击事件<br />isLink：当前文字是否被裁剪过，即是否出现中间省略号 |
+

package/dist/index.css

@@ -0,0 +1,2 @@
+.truncate-middle{display:flex}.truncate-middle-prev{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.truncate-middle-next{flex-shrink:0}.truncate-middle-link{color:#4f90e1;border-bottom:2px solid #4f90e1}
+/*$vite$:1*/

package/dist/index.js

@@ -0,0 +1,52 @@
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeStyle as i, onMounted as a, openBlock as o, ref as s, toDisplayString as c, toRef as l } from "vue";
+//#region src/components/TruncateMiddleText/useIntersectionObserver.ts
+function u({ prevRef: e, text: t }) {
+	let n = s(!1), r = new IntersectionObserver((t) => {
+		t.forEach((t) => {
+			t.isIntersecting && requestAnimationFrame(() => {
+				console.error("intersection observer"), (e.value?.scrollWidth || 0) > (e.value?.clientWidth || 0) ? n.value = !0 : n.value = !1;
+			});
+		});
+	}), i = new ResizeObserver(() => {
+		console.error("mutation oberser");
+		let t = e.value?.scrollWidth || 0, r = e.value?.clientWidth || 0;
+		console.error(t, r), t > r ? n.value = !0 : n.value = !1;
+	});
+	return a(() => {
+		e.value !== void 0 && (i.observe(e.value), r.observe(e.value));
+	}), { isLink: n };
+}
+//#endregion
+//#region src/components/TruncateMiddleText/TruncateMiddleText.vue?vue&type=script&setup=true&lang.ts
+var d = { class: "truncate-middle-next" }, f = /* @__PURE__ */ r({
+	__name: "TruncateMiddleText",
+	props: {
+		text: {},
+		endLenght: {},
+		linkColor: { default: "#4f90e1" }
+	},
+	emits: ["truncateClick"],
+	setup(r, { emit: a }) {
+		let f = r, p = a, m = s(), { isLink: h } = u({
+			prevRef: m,
+			text: l(f, "text")
+		}), g = e(() => h.value ? {
+			borderBottom: `2px solid ${f.linkColor}`,
+			color: f.linkColor
+		} : {}), _ = e(() => f.text.length <= f.endLenght ? "" : f.text.slice(0, f.text.length - f.endLenght)), v = e(() => f.text.slice(-f.endLenght));
+		function y() {
+			p("truncateClick", h.value);
+		}
+		return (e, r) => (o(), t("div", {
+			class: "truncate-middle",
+			style: i(g.value),
+			onClick: y
+		}, [n("div", {
+			class: "truncate-middle-prev",
+			ref_key: "prevRef",
+			ref: m
+		}, c(_.value), 513), n("div", d, c(v.value), 1)], 4));
+	}
+});
+//#endregion
+export { f as TruncateMiddleText, u as useIntersectionObserver };

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`truancate-middle-text`]={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function n({prevRef:e,text:n}){let r=(0,t.ref)(!1),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting&&requestAnimationFrame(()=>{console.error(`intersection observer`),(e.value?.scrollWidth||0)>(e.value?.clientWidth||0)?r.value=!0:r.value=!1})})}),a=new ResizeObserver(()=>{console.error(`mutation oberser`);let t=e.value?.scrollWidth||0,n=e.value?.clientWidth||0;console.error(t,n),t>n?r.value=!0:r.value=!1});return(0,t.onMounted)(()=>{e.value!==void 0&&(a.observe(e.value),i.observe(e.value))}),{isLink:r}}var r={class:`truncate-middle-next`};e.TruncateMiddleText=(0,t.defineComponent)({__name:`TruncateMiddleText`,props:{text:{},endLenght:{},linkColor:{default:`#4f90e1`}},emits:[`truncateClick`],setup(e,{emit:i}){let a=e,o=i,s=(0,t.ref)(),{isLink:c}=n({prevRef:s,text:(0,t.toRef)(a,`text`)}),l=(0,t.computed)(()=>c.value?{borderBottom:`2px solid ${a.linkColor}`,color:a.linkColor}:{}),u=(0,t.computed)(()=>a.text.length<=a.endLenght?``:a.text.slice(0,a.text.length-a.endLenght)),d=(0,t.computed)(()=>a.text.slice(-a.endLenght));function f(){o(`truncateClick`,c.value)}return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`truncate-middle`,style:(0,t.normalizeStyle)(l.value),onClick:f},[(0,t.createElementVNode)(`div`,{class:`truncate-middle-prev`,ref_key:`prevRef`,ref:s},(0,t.toDisplayString)(u.value),513),(0,t.createElementVNode)(`div`,r,(0,t.toDisplayString)(d.value),1)],4))}}),e.useIntersectionObserver=n});

package/dist/src/components/TruncateMiddleText/TruncateMiddleText.vue.d.ts

@@ -0,0 +1,10 @@
+import { TruncateMiddleTextProps } from './truncateMiddleText.types';
+declare const __VLS_export: import('vue').DefineComponent<TruncateMiddleTextProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    truncateClick: (isLink: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<TruncateMiddleTextProps> & Readonly<{
+    onTruncateClick?: ((isLink: boolean) => any) | undefined;
+}>, {
+    linkColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/components/TruncateMiddleText/index.d.ts

@@ -0,0 +1,5 @@
+import { default as TruncateMiddleText } from './TruncateMiddleText.vue';
+export * from './truncateMiddleText.types';
+export { default as TruncateMiddleText } from './TruncateMiddleText.vue';
+export * from './useIntersectionObserver';
+export type TruncateMiddleTextInstance = InstanceType<typeof TruncateMiddleText>;

package/dist/src/components/TruncateMiddleText/truncateMiddleText.types.d.ts

@@ -0,0 +1,11 @@
+export interface TruncateMiddleTextProps {
+    /** 要展示的文本 */
+    text: string;
+    /** 尾部字符疮毒 */
+    endLenght: number;
+    /** 链接的颜色，默认为 #4f90e1 */
+    linkColor?: string;
+}
+export interface TruncateMiddleTextEmits {
+    (e: "truncateClick", isLink: boolean): void;
+}

package/dist/src/components/TruncateMiddleText/useIntersectionObserver.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue';
+export interface UseIntersectionObserverParams {
+    prevRef: Ref<HTMLSpanElement | undefined>;
+    text: Ref<string>;
+}
+/**
+ * @description 通过 intersectionObserver 判断元素是否进入视口
+ * 如果 display: none 的容器切换为可见且视口内，会正确除法
+ * 但是某些边界情况（如 visibility: hidden） 行为不同
+ */
+export declare function useIntersectionObserver({ prevRef, text }: UseIntersectionObserverParams): {
+    isLink: Ref<boolean, boolean>;
+};

package/dist/src/components/index.d.ts

@@ -0,0 +1 @@
+export * from './TruncateMiddleText';

package/dist/src/main.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "truncate-middle-text",
+  "version": "0.0.1",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/src/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs",
+      "types": "./dist/src/main.d.ts"
+    },
+    "./dist/*": "./dist/*"
+  },
+  "keywords": ["truncate", "truncate middle", "中间省略号"],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "run-s lint:*",
+    "lint:oxlint": "oxlint . --fix",
+    "lint:eslint": "eslint . --fix --cache",
+    "format": "oxfmt src/"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.32"
+  },
+  "devDependencies": {
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/tsconfig": "^0.9.1",
+    "eslint": "^10.2.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-oxlint": "~1.60.0",
+    "eslint-plugin-vue": "~10.8.0",
+    "jiti": "^2.6.1",
+    "npm-run-all2": "^8.0.4",
+    "oxfmt": "^0.45.0",
+    "oxlint": "~1.60.0",
+    "typescript": "~6.0.0",
+    "vite": "^8.0.8",
+    "vite-plugin-dts": "^5.0.1",
+    "vite-plugin-vue-devtools": "^8.1.1",
+    "vue-tsc": "^3.2.6"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}