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

@@ -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>

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;
 

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
     };

src/composables/useEvent.ts

@@ -6,20 +6,24 @@ 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));
   }
 
   /**
    * 双击行事件
    * @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);
   }
 
   /**

tsconfig.json

@@ -46,6 +46,7 @@
     "src/pages/**/*.vue",
     "types/**/*.d.ts",
     "demo/demo.vue",
+    "demo/components/*.vue",
     "demo/*.ts",
     "tests/**/*.spec.ts"
   ],