From d8f582cc8314da1f48e10306494e42bd69e26247 Mon Sep 17 00:00:00 2001
From: xpyjs <jeremyjone@qq.com>
Date: Thu, 25 May 2023 16:59:36 +0800
Subject: [PATCH] feat(reactive): allow scope data to reactive

user can use column or slider slots change data directly (v-model through 3rd components lib)

closed #42
---
 demo/components/DatePicker.vue | 26 ++++++++++++++++++++++++++
 demo/demo.vue                  |  8 +++++++-
 src/composables/useData.ts     |  4 ++--
 src/composables/useEvent.ts    | 16 ++++++++++------
 tsconfig.json                  |  1 +
 5 files changed, 46 insertions(+), 9 deletions(-)
 create mode 100644 demo/components/DatePicker.vue

diff --git a/demo/components/DatePicker.vue b/demo/components/DatePicker.vue
new file mode 100644
index 0000000..fa4ba50
--- /dev/null
+++ b/demo/components/DatePicker.vue
@@ -0,0 +1,26 @@
+<template>
+  <input v-model="dateString" type="date" @input="updateDate" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Date,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const dateString = computed(() => props.modelValue.toISOString().substr(0, 10));
+
+function updateDate(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const newDate = new Date(target.value);
+  if (!isNaN(newDate.getTime())) {
+    emit('update:modelValue', newDate);
+  }
+}
+</script>
diff --git a/demo/demo.vue b/demo/demo.vue
index 07906ef..6992cf0 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -61,7 +61,12 @@
         prop="endDate"
         date-format="MM-dd HH:mm:ss"
         ellipsis
-      />
+      >
+        <template #default="scope">
+          <!-- <input v-model="scope.row.name" /> -->
+          <DatePicker v-model="scope.row.endDate" @click.stop />
+        </template>
+      </x-gantt-column>
 
       <x-gantt-slider
         prop="o.t1"
@@ -144,6 +149,7 @@
 <script setup lang="ts">
 import type { XGantt } from '../types';
 import { reactive, ref } from 'vue';
+import DatePicker from './components/DatePicker.vue';
 
 let id = 0;
 
diff --git a/src/composables/useData.ts b/src/composables/useData.ts
index c62763f..076e83d 100644
--- a/src/composables/useData.ts
+++ b/src/composables/useData.ts
@@ -3,7 +3,7 @@ import Variables from '@/constants/vars';
 import type RowItem from '@/models/data/row';
 import { useStore } from '@/store';
 import { isString } from 'lodash';
-import { computed, type ExtractPropTypes, toRaw, watch, type Ref } from 'vue';
+import { computed, type ExtractPropTypes, watch, type Ref } from 'vue';
 import useGanttHeader from './useGanttHeader';
 
 export default () => {
@@ -55,7 +55,7 @@ export default () => {
 
   function toRowData(data?: RowItem): RowData {
     return {
-      row: toRaw(data?.data),
+      row: data?.data,
       $index: data?.flatIndex,
       level: data && data.level + 1
     };
diff --git a/src/composables/useEvent.ts b/src/composables/useEvent.ts
index 8253cfe..3ff5b4e 100644
--- a/src/composables/useEvent.ts
+++ b/src/composables/useEvent.ts
@@ -6,12 +6,16 @@ import { toRaw } from 'vue';
 export default () => {
   const { rootEmit } = useStore();
 
+  const toRowData = (data?: any) => {
+    return toRaw({ ...data });
+  };
+
   /**
    * 点击行事件
    * @param row 该行的原始数据
    */
   function EmitRowClick(row: any) {
-    rootEmit.value?.('row-click', toRaw(row));
+    rootEmit.value?.('row-click', toRowData(row));
   }
 
   /**
@@ -19,7 +23,7 @@ export default () => {
    * @param row 该行的原始数据
    */
   function EmitRowDblClick(row: any) {
-    rootEmit.value?.('row-dbl-click', toRaw(row));
+    rootEmit.value?.('row-dbl-click', toRowData(row));
   }
 
   /**
@@ -28,7 +32,7 @@ export default () => {
    * @param row 该行的原始数据
    */
   function EmitRowChecked(state: boolean, row: any) {
-    rootEmit.value?.('row-checked', state, toRaw(row));
+    rootEmit.value?.('row-checked', state, toRowData(row));
   }
 
   /**
@@ -40,7 +44,7 @@ export default () => {
       'move-slider',
       data.map(item => {
         return {
-          row: toRaw(item.row),
+          row: toRowData(item.row),
           old: item.old
         };
       })
@@ -58,7 +62,7 @@ export default () => {
     rootEmit.value?.(
       'add-link',
       link,
-      { from: toRaw(data.from), to: toRaw(data.to) },
+      { from: toRowData(data.from), to: toRowData(data.to) },
       cb
     );
   }
@@ -67,7 +71,7 @@ export default () => {
    * 点击连线事件
    */
   function EmitClickLink(link: LinkProps | null) {
-    rootEmit.value?.('click-link', link ? toRaw(link) : null);
+    rootEmit.value?.('click-link', link ? toRowData(link) : null);
   }
 
   /**
diff --git a/tsconfig.json b/tsconfig.json
index db4e68c..c18cd9d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -46,6 +46,7 @@
     "src/pages/**/*.vue",
     "types/**/*.d.ts",
     "demo/demo.vue",
+    "demo/components/*.vue",
     "demo/*.ts",
     "tests/**/*.spec.ts"
   ],