feat : grammatical tag enhancements and demo

packages/vue-vtable/demo/src/App.vue

@@ -1,23 +1,41 @@
 <script setup>
+// unified
 import listtable from './table/unified/options/list-table/list-table.vue';
+import listtableFetch from './table/unified/options/list-table/list-table-fetch.vue';
 import listTableEdit from './table/unified/composition/list-table/list-table-edit.vue';
 
 import pivotTableTree from './table/unified/composition/pivot-table/pivot-table-lazyTreeload.vue';
 import pivotTableTitleOnDimension from './table/unified/options/pivot-table/pivot-table-titleOnDimension.vue';
 
 import pivotChart from './table/unified/composition/pivot-chart/pivot-chart.vue';
+
+// gramatical
+import ListTable from './table/gramatical/composition/ListTable.vue';
+import ListTableTree from './table/gramatical/composition/ListTable-tree.vue';
+import ListTableDes from './table/gramatical/composition/ListTable-destruction.vue';
+
+import ListTableVFor from './table/gramatical/options/ListTable-v-for.vue';
+import PivotTable from './table/gramatical/options/PivotTable.vue';  
 </script>
 
 <template>
+  <!-- unified -->
 
-  <listtable />
+  <!-- <listtable /> -->
   <!-- <listTableEdit /> -->
-
+  <!-- <listtableFetch /> -->
+
   <!-- <pivotTableTree /> -->
   <!-- <pivotTableTitleOnDimension /> -->
-
+  
   <!-- <pivotChart /> -->
+
+  <!-- gramatical -->
+  <ListTable/>
+  <!-- <ListTableDes /> -->
+  <!-- <ListTableTree /> -->
 
+  <!-- <PivotTable /> -->
 
 </template>
 

packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-destruction.vue

@@ -0,0 +1,109 @@
+<template>
+  <vue-list-table :options="tableOptions" :records="records" @onDropdownMenuClick="handleDropdownMenuClick" @onMouseEnterCell="handleMouseEnterCell">
+    <ListColumn v-for="column in columns" :key="column.field" :field="column.field" :title="column.caption" maxWidth="300" dragHeader="true" />
+  </vue-list-table>
+</template>
+
+<script setup>
+import { ref , onMounted } from 'vue';
+import { ListColumn } from '../../../../../src/components/index';
+
+const columns = [
+  {
+    field: '0',
+    caption: '名字'
+  },
+  {
+    field: '1',
+    caption: '年龄'
+  },
+  {
+    field: '2',
+    caption: '性别'
+  },
+  {
+    field: '3',
+    caption: '爱好'
+  },
+  {
+    field: '4',
+    caption: '公司'
+  },
+  {
+    field: '5',
+    caption: '地址'
+  },
+  {
+    field: '6',
+    caption: '手机'
+  },
+  {
+    field: '7',
+    caption: '邮箱'
+  },
+  {
+    field: '8',
+    caption: '备注'
+  }
+];
+
+const updateRandomColumn = () => {
+  const index = Math.floor(Math.random() * columns.length);
+  columns[index].caption = columns[index].caption + '!';
+  console.log('updateRandomColumn', columns);
+};
+setInterval(updateRandomColumn, 1000);
+
+function getRandomName() {
+  const names = ['张三', '李四', '王五', '赵六', '陈七', '吴八', '郑九', '王十'];
+  return names[Math.floor(Math.random() * names.length)];
+}
+
+function getRandomAge() {
+  return Math.floor(Math.random() * 10) + 18; 
+}
+
+function getRandomGender() {
+  return Math.random() > 0.5 ? '男' : '女';
+}
+
+function getRandomSport() {
+  const sports = ['篮球', '足球', '羽毛球', '乒乓球', '排球', '网球', '游泳', '跑步'];
+  return sports[Math.floor(Math.random() * sports.length)];
+}
+
+const generateRandomRecords = (num) => {
+  const records = [];
+  for (let i = 0; i < num; i++) {
+    records.push([getRandomName(), getRandomAge(), getRandomGender(), getRandomSport()]);
+  }
+  return records;
+};
+
+const records = ref(generateRandomRecords(1000));
+
+const updateRandomRecords = () => {
+  for (let i = 0; i < 1000; i++) {
+    const index = Math.floor(Math.random() * records.value.length);
+    records.value[index] = [getRandomName(), getRandomAge(), getRandomGender(), getRandomSport()];
+  }
+};
+
+// 每秒更新10条记录
+// setInterval(updateRandomRecords, 1000);
+
+const tableOptions = ref({
+  menu: {
+    contextMenuItems: ['copy', 'paste', 'delete', '...']
+  }
+});
+
+const handleDropdownMenuClick = (args) => {
+  console.log('menu click', tableOptions.value);
+  console.log('menu click', args);
+};
+
+const handleMouseEnterCell = (args) => {
+  console.log('mouse enter cell', args);
+};
+</script>

packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-fetch.vue

@@ -0,0 +1,47 @@
+<template>
+  <vue-list-table :options="tableOptions" >
+    <ListColumn v-for="column in columnsData" :key="column.field" :field="column.field" :title="column.title" :width="column.width" />
+  </vue-list-table>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const tableOptions = ref({});
+const recordsData = ref([]);
+const columnsData = ref([]);
+
+
+const fetchData = async () => {
+  try {
+    const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json');
+    const jsonData = await response.json();
+
+    const columns = [
+      { field: 'Order ID', title: 'Order ID', width: 'auto' },
+      { field: 'Customer ID', title: 'Customer ID', width: 'auto' },
+      { field: 'Product Name', title: 'Product Name', width: 'auto' },
+      { field: 'Category', title: 'Category', width: 'auto' },
+      { field: 'Sub-Category', title: 'Sub-Category', width: 'auto' },
+      { field: 'Region', title: 'Region', width: 'auto' },
+      { field: 'City', title: 'City', width: 'auto' },
+      { field: 'Order Date', title: 'Order Date', width: 'auto' },
+      { field: 'Quantity', title: 'Quantity', width: 'auto' },
+      { field: 'Sales', title: 'Sales', width: 'auto' },
+      { field: 'Profit', title: 'Profit', width: 'auto' }
+    ];
+
+    tableOptions.value = {
+      records: jsonData,
+      widthMode: 'standard',
+    };
+
+    columnsData.value = columns;
+    recordsData.value = jsonData; 
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+
+onMounted(fetchData);
+</script>

packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-tree.vue

@@ -0,0 +1,94 @@
+<template>
+  <vue-list-table :options="tableOptions" :records="recordsData" >
+    <ListColumn 
+      v-for="column in columnsData" 
+      :field="column.field" 
+      :title="column.title" 
+      :width="column.width" 
+      :tree="column.tree"
+      :fieldFormat="column.fieldFormat"
+    />
+    <Tooltip :isShowOverflowTextTooltip="true" /> 
+  </vue-list-table>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const tableOptions = ref({});
+const recordsData = ref([]);
+const columnsData = ref([]);
+
+const fetchData = async () => {
+  try {
+    const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/company_struct.json')
+    const jsonData = await response.json();
+
+    const columns = [
+      {
+        field: "group",
+        title: "department",
+        width: "auto",
+        tree: true,
+        fieldFormat(rec) {
+          return rec['department'] ?? rec['group'] ?? rec['name'];
+        }
+      },
+      {
+        field: "total_children",
+        title: "members count",
+        width: "auto",
+        fieldFormat(rec) {
+          if (rec?.['position']) {
+            return `position: ${rec['position']}`;
+          } else {
+            return rec?.['total_children'];
+          }
+        }
+      },
+      {
+        field: "monthly_expense",
+        title: "monthly expense",
+        width: "auto",
+        fieldFormat(rec) {
+          if (rec?.['salary']) {
+            return `salary: ${rec['salary']}`;
+          } else {
+            return rec?.['monthly_expense'];
+          }
+        }
+      },
+      {
+        field: "new_hires_this_month",
+        title: "new hires this month",
+        width: "auto"
+      },
+      {
+        field: "resignations_this_month",
+        title: "resignations this month",
+        width: "auto"
+      },
+      {
+        field: "complaints_and_suggestions",
+        title: "received complaints count",
+        width: "auto"
+      }
+    ];
+
+    tableOptions.value = {
+      widthMode: 'standard',
+      // tooltip: {
+      //   isShowOverflowTextTooltip: true
+      // }
+    };
+
+    columnsData.value = columns;
+    recordsData.value = jsonData;
+
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+
+onMounted(fetchData);
+</script>

packages/vue-vtable/demo/src/table/gramatical/composition/ListTable.vue

@@ -0,0 +1,66 @@
+<template>
+  <vue-list-table :options="tableOptions" :records="records" @onDropdownMenuClick="handleDropdownMenuClick" @onMouseEnterCell="handleMouseEnterCell">
+    <ListColumn field="0" title="名字" maxWidth="300" dragHeader="true" />
+    <ListColumn field="1" title="年龄" maxWidth="300" dragHeader="true" />
+    <ListColumn field="2" title="性别" maxWidth="300" dragHeader="true" />
+    <ListColumn field="3" title="爱好" maxWidth="300" dragHeader="true" />
+  </vue-list-table>
+</template>
+
+<script setup>
+import { ref , onMounted } from 'vue';
+import { ListColumn } from '../../../../../src/components/index';
+
+const records = ref([
+  ['张三', 18, '男', '篮球'],
+  ['李四', 20, '女', '足球'],
+  ['王五', 22, '男', '羽毛球'],
+  ['赵六', 24, '女', '乒乓球']
+]);
+
+const tableOptions = ref({
+  columns: [
+    {
+      field: '0',
+      caption: '名称1'
+    },
+    {
+      field: '1',
+      caption: '年龄1'
+    },
+    {
+      field: '2',
+      caption: '性别1'
+    },
+    {
+      field: '3',
+      caption: '爱好1'
+    }
+  ],
+  records: [
+    ['张三', 18, '男', '篮球'],
+    ['李四', 20, '女', '足球'],
+    ['王五', 22, '男', '羽毛球'],
+    ['赵六', 24, '女', '乒乓球'],
+    ['张三', 18, '男', '篮球'],
+    ['李四', 20, '女', '足球'],
+    ['王五', 22, '男', '羽毛球'],
+    ['赵六', 24, '女', '乒乓球']
+  ],
+  menu: {
+    contextMenuItems: ['copy', 'paste', 'delete', '...']
+  }
+});
+
+
+// 定义 handleDropdownMenuClick 方法
+const handleDropdownMenuClick = (args) => {
+  console.log('menu click', tableOptions.value);
+  console.log('menu click', args);
+};
+
+// 定义 handleMouseEnterCell 方法
+const handleMouseEnterCell = (args) => {
+  console.log('mouse enter cell', args);
+};
+</script>