feat(useEllipsis): reactive

.eslintrc.cjs

@@ -17,7 +17,7 @@ module.exports = {
     sourceType: 'module',
     project: './tsconfig.json',
   },
-  plugins: ['vue', '@typescript-eslint'],
+  plugins: ['vue', '@typescript-eslint', 'markdown'],
   rules: {
     '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     'import/no-extraneous-dependencies': [
@@ -34,4 +34,10 @@ module.exports = {
       },
     },
   },
+  overrides: [
+    {
+      files: ['*.md'],
+      processor: 'markdown/markdown',
+    },
+  ],
 }

package.json

@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "@noi/core": "workspace:*",
-    "vue": "^3.4.12",
     "@vueuse/core": "^10.7.1",
-    "@vueuse/motion": "^2.0.0"
+    "@vueuse/motion": "^2.0.0",
+    "vue": "^3.4.12"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",
@@ -40,6 +40,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-markdown": "^3.0.1",
     "eslint-plugin-vue": "^9.20.1",
     "happy-dom": "^12.10.3",
     "lint-staged": "^15.2.0",

packages/core/useEllipsis/index.test.ts

@@ -0,0 +1,11 @@
+// basic usage
+//
+/**
+ * 1. 正常渲染
+ * 3. content & ellipsisContent
+ * 4. custom ellipsisText
+ * 5. position
+ * 6. rows
+ * 7. 响应式，改变窗口resize，或者响应式容器，或者改变content
+ * 8. 不同的行号 & 不同的字体大小
+ */

packages/core/useEllipsis/index.ts

@@ -3,10 +3,12 @@ import {
   type Ref,
   render,
   type VNode,
-  nextTick,
+  watch,
   computed,
   ComputedRef,
+  onMounted,
 } from 'vue'
+import { useWindowSize } from '@vueuse/core'
 
 export enum EllipsisPosition {
   Start = 'start',
@@ -167,7 +169,7 @@ const defaultUseEllipsisOptions = {
 }
 
 export const useEllipsis = (
-  target: Ref<HTMLElement>,
+  source: Ref<HTMLElement>,
   options: UseEllipsisOptions
 ): UseEllipsisReturn => {
   // eslint-disable-next-line no-param-reassign
@@ -183,8 +185,8 @@ export const useEllipsis = (
         : EllipsisState.Collapsed
   }
 
-  nextTick(() => {
-    clone.value = useCloneElement(target.value)
+  const reCalculate = () => {
+    clone.value = useCloneElement(source.value)
     ellipsisContent.value = calcEllipsisText(
       clone.value,
       options.content.value,
@@ -193,7 +195,13 @@ export const useEllipsis = (
       options.action ? options.action({ state, toggle }) : undefined,
       options.rows
     )
-  })
+  }
+
+  onMounted(reCalculate)
+
+  const { width } = useWindowSize()
+
+  watch([width, options.content, source], reCalculate)
 
   const content = computed(() =>
     state.value === EllipsisState.Collapsed

packages/core/useEllipsis/index.zh-CN.md

@@ -0,0 +1 @@
+# useEllipsis