From fcd86b537dfd8952b21145df88961a8dd07b2bfc Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Mon, 24 Apr 2023 09:53:05 +0800
Subject: [PATCH] feat: add directive for hover (#620)

---
 src/cell/cell.vue         |  5 +++--
 src/cell/demos/single.vue | 12 ++++++------
 src/shared/hover.ts       | 38 ++++++++++++++++++++++++++++++++++++++
 src/shared/index.ts       |  3 +++
 4 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 src/shared/hover.ts

diff --git a/src/cell/cell.vue b/src/cell/cell.vue
index 71bb54d79..5fbeac7d1 100644
--- a/src/cell/cell.vue
+++ b/src/cell/cell.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="styleCell" @click="onClick">
+  <div v-hover="{ className: `${name}--hover`, active: hover }" :class="styleCell" @click="onClick">
     <div :class="`${name}__left`">
       <div v-if="leftIconContent" :class="`${name}__left-icon`">
         <t-node :content="leftIconContent" />
@@ -29,7 +29,7 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, toRefs, h } from 'vue';
 import { ChevronRightIcon } from 'tdesign-icons-vue-next';
-import { renderTNode, renderContent, TNode, useEmitEvent } from '../shared';
+import { renderTNode, renderContent, TNode, useEmitEvent, Hover } from '../shared';
 import config from '../config';
 import CellProps from './props';
 import { useFormDisabled } from '../form/hooks';
@@ -40,6 +40,7 @@ const name = `${prefix}-cell`;
 export default defineComponent({
   name,
   components: { TNode },
+  directives: { Hover },
   props: CellProps,
   emits: ['click'],
   setup(props, context) {
diff --git a/src/cell/demos/single.vue b/src/cell/demos/single.vue
index edb96a7f4..658d05b45 100644
--- a/src/cell/demos/single.vue
+++ b/src/cell/demos/single.vue
@@ -1,19 +1,19 @@
 <template>
   <t-cell-group bordered>
-    <t-cell title="单行标题" arrow />
-    <t-cell title="单行标题" arrow required />
-    <t-cell title="单行标题" arrow>
+    <t-cell title="单行标题" arrow hover />
+    <t-cell title="单行标题" arrow hover required />
+    <t-cell title="单行标题" arrow hover>
       <template #note>
         <t-badge :count="16" />
       </template>
     </t-cell>
-    <t-cell title="单行标题">
+    <t-cell title="单行标题" hover>
       <template #note>
         <t-switch :default-value="true" />
       </template>
     </t-cell>
-    <t-cell title="单行标题" note="辅助信息" arrow />
-    <t-cell title="单行标题" :left-icon="lockIcon" arrow />
+    <t-cell title="单行标题" note="辅助信息" arrow hover />
+    <t-cell title="单行标题" :left-icon="lockIcon" arrow hover />
   </t-cell-group>
 </template>
 
diff --git a/src/shared/hover.ts b/src/shared/hover.ts
new file mode 100644
index 000000000..34ac62334
--- /dev/null
+++ b/src/shared/hover.ts
@@ -0,0 +1,38 @@
+import { DirectiveBinding } from 'vue';
+
+interface BindingObj {
+  active: boolean;
+  className: string;
+}
+
+const Hover = {
+  created(el: HTMLElement, binding: DirectiveBinding<BindingObj>) {
+    const startTime = 50;
+    const stayTime = 70;
+    const { className, active } = binding.value;
+
+    if (!active) return;
+
+    el.addEventListener(
+      'touchstart',
+      () => {
+        setTimeout(() => {
+          el?.classList.add(className);
+        }, startTime);
+      },
+      false,
+    );
+
+    el.addEventListener(
+      'touchend',
+      () => {
+        setTimeout(() => {
+          el?.classList.remove(className);
+        }, stayTime);
+      },
+      false,
+    );
+  },
+};
+
+export default Hover;
diff --git a/src/shared/index.ts b/src/shared/index.ts
index 013b38731..e896d7d0b 100644
--- a/src/shared/index.ts
+++ b/src/shared/index.ts
@@ -16,3 +16,6 @@ export * from './useTouch';
 export * from './useScrollParent';
 export * from './useExpose';
 export * from './useTest';
+
+/* directives */
+export { default as Hover } from './hover';