feat(useEllipsis): init

package.json

@@ -27,7 +27,13 @@
   },
   "dependencies": {
     "@noi/core": "workspace:*",
+<<<<<<< Updated upstream
     "vue": "^3.4.7"
+=======
+    "@vueuse/core": "^10.7.1",
+    "@vueuse/motion": "^2.0.0",
+    "vue": "^3.4.6"
+>>>>>>> Stashed changes
   },
   "devDependencies": {
     "@types/node": "^20.10.8",

packages/core/index.ts

@@ -1,2 +1,2 @@
-export * from './useToast';
+export * from './useToast'
 export * from './useEllipsis'

packages/core/useEllipsis/index.ts

@@ -1,3 +1,6 @@
+import { watch, watchEffect, type Ref } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
 interface UseEllipsisOptions {
   rows?: number // 同组件 prop default: 1
   content: string // 同组件 prop
@@ -9,15 +12,40 @@ interface UseEllipsisReturn {
   state: 'expand' | 'collapse' // 当前状态
   toggle: Function // 切换状态
 }
+const cloneElement = (target: HTMLElement): HTMLElement => {
+  const originStyle = window.getComputedStyle(target)
+  const container = document.createElement('div')
+  const styleNames: string[] = Array.prototype.slice.apply(originStyle)
+  styleNames.forEach((name) => {
+    container.style.setProperty(name, originStyle.getPropertyValue(name))
+  })
+
+  container.style.position = 'fixed'
+  container.style.zIndex = '-9999'
+  container.style.top = '-9999px'
+  container.style.height = 'auto'
+  container.style.minHeight = 'auto'
+  container.style.maxHeight = 'auto'
+
+  return container
+}
 
 // eslint-disable-next-line import/prefer-default-export
 export const useEllipsis = (
-  _el: HTMLElement,
-  _options: UseEllipsisOptions
+  target: Ref<HTMLElement>,
+  options: UseEllipsisOptions
 ): UseEllipsisReturn => {
+  // const { width } = useWindowSize()
+  watchEffect(() => {
+    if (target.value) {
+      const cloneTarget = cloneElement(target.value)
+      cloneTarget.innerText = options.content
+    }
+  })
+
   const toggle = () => {}
   return {
-    content: '',
+    content: options.content.slice(0, 10),
     state: 'collapse',
     toggle,
   }