@a2simcode/ui 0.0.71 → 0.0.73

package/docs/examples/table/tree-data.vue

@@ -1,141 +1,141 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table :columns="columns" :records="records" is-tree />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'group',
-    config: {
-      label: 'department',
-      width: 200,
-      align: 'left',
-      fieldFormat(rec: any) {
-        return rec['department'] ?? rec['group'] ?? rec['name']
-      },
-    },
-  },
-  {
-    id: 'total_children',
-    config: {
-      label: 'memebers count',
-      width: 150,
-      align: 'center',
-      fieldFormat(rec: any) {
-        if (rec?.['position']) {
-          return `position:  ${rec['position']}`
-        } else return rec?.['total_children']
-      },
-    },
-  },
-  {
-    id: 'monthly_expense',
-    config: {
-      label: 'monthly expense',
-      width: 150,
-      align: 'right',
-      fieldFormat(rec: any) {
-        if (rec?.['salary']) {
-          return `salary:  ${rec['salary']}`
-        } else return rec?.['monthly_expense']
-      },
-    },
-  },
-  {
-    id: 'new_hires_this_month',
-    config: {
-      label: 'new hires this month',
-      width: 150,
-      align: 'center',
-    },
-  },
-  {
-    id: 'resignations_this_month',
-    config: {
-      label: 'resignations this month',
-      width: 150,
-      align: 'center',
-    },
-  },
-  {
-    id: 'complaints_and_suggestions',
-    config: {
-      label: 'recived complaints counts',
-      width: 150,
-      align: 'center',
-    },
-  },
-])
-
-const records = ref([
-  {
-    group: 'Headquarters',
-    total_children: 3,
-    monthly_expense: 60000,
-    new_hires_this_month: 2,
-    resignations_this_month: 0,
-    complaints_and_suggestions: 1,
-    children: [
-      {
-        department: 'HR',
-        position: 'HR Manager',
-        salary: 15000,
-        monthly_expense: 15000,
-        new_hires_this_month: 1,
-        resignations_this_month: 0,
-        complaints_and_suggestions: 0,
-      },
-      {
-        department: 'Finance',
-        position: 'Finance Manager',
-        salary: 18000,
-        monthly_expense: 18000,
-        new_hires_this_month: 0,
-        resignations_this_month: 0,
-        complaints_and_suggestions: 0,
-      },
-      {
-        department: 'IT',
-        position: 'IT Director',
-        salary: 27000,
-        monthly_expense: 27000,
-        new_hires_this_month: 1,
-        resignations_this_month: 0,
-        complaints_and_suggestions: 1,
-      },
-    ],
-  },
-  {
-    group: 'Branch Office',
-    total_children: 2,
-    monthly_expense: 35000,
-    new_hires_this_month: 1,
-    resignations_this_month: 1,
-    complaints_and_suggestions: 2,
-    children: [
-      {
-        department: 'Sales',
-        position: 'Sales Manager',
-        salary: 16000,
-        monthly_expense: 16000,
-        new_hires_this_month: 1,
-        resignations_this_month: 0,
-        complaints_and_suggestions: 1,
-      },
-      {
-        department: 'Support',
-        position: 'Support Lead',
-        salary: 14000,
-        monthly_expense: 19000,
-        new_hires_this_month: 0,
-        resignations_this_month: 1,
-        complaints_and_suggestions: 1,
-      },
-    ],
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table :columns="columns" :records="records" is-tree />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'group',
+    config: {
+      label: 'department',
+      width: 200,
+      align: 'left',
+      fieldFormat(rec: any) {
+        return rec['department'] ?? rec['group'] ?? rec['name']
+      },
+    },
+  },
+  {
+    id: 'total_children',
+    config: {
+      label: 'memebers count',
+      width: 150,
+      align: 'center',
+      fieldFormat(rec: any) {
+        if (rec?.['position']) {
+          return `position:  ${rec['position']}`
+        } else return rec?.['total_children']
+      },
+    },
+  },
+  {
+    id: 'monthly_expense',
+    config: {
+      label: 'monthly expense',
+      width: 150,
+      align: 'right',
+      fieldFormat(rec: any) {
+        if (rec?.['salary']) {
+          return `salary:  ${rec['salary']}`
+        } else return rec?.['monthly_expense']
+      },
+    },
+  },
+  {
+    id: 'new_hires_this_month',
+    config: {
+      label: 'new hires this month',
+      width: 150,
+      align: 'center',
+    },
+  },
+  {
+    id: 'resignations_this_month',
+    config: {
+      label: 'resignations this month',
+      width: 150,
+      align: 'center',
+    },
+  },
+  {
+    id: 'complaints_and_suggestions',
+    config: {
+      label: 'recived complaints counts',
+      width: 150,
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  {
+    group: 'Headquarters',
+    total_children: 3,
+    monthly_expense: 60000,
+    new_hires_this_month: 2,
+    resignations_this_month: 0,
+    complaints_and_suggestions: 1,
+    children: [
+      {
+        department: 'HR',
+        position: 'HR Manager',
+        salary: 15000,
+        monthly_expense: 15000,
+        new_hires_this_month: 1,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 0,
+      },
+      {
+        department: 'Finance',
+        position: 'Finance Manager',
+        salary: 18000,
+        monthly_expense: 18000,
+        new_hires_this_month: 0,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 0,
+      },
+      {
+        department: 'IT',
+        position: 'IT Director',
+        salary: 27000,
+        monthly_expense: 27000,
+        new_hires_this_month: 1,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 1,
+      },
+    ],
+  },
+  {
+    group: 'Branch Office',
+    total_children: 2,
+    monthly_expense: 35000,
+    new_hires_this_month: 1,
+    resignations_this_month: 1,
+    complaints_and_suggestions: 2,
+    children: [
+      {
+        department: 'Sales',
+        position: 'Sales Manager',
+        salary: 16000,
+        monthly_expense: 16000,
+        new_hires_this_month: 1,
+        resignations_this_month: 0,
+        complaints_and_suggestions: 1,
+      },
+      {
+        department: 'Support',
+        position: 'Support Lead',
+        salary: 14000,
+        monthly_expense: 19000,
+        new_hires_this_month: 0,
+        resignations_this_month: 1,
+        complaints_and_suggestions: 1,
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/table/tree-lazy.vue

@@ -1,80 +1,80 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table
-      :columns="columns"
-      :records="records"
-      is-tree
-      :load-children="loadChildren"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'category',
-    config: {
-      label: '类别',
-      width: 200,
-    },
-  },
-  {
-    id: 'amount',
-    config: {
-      label: '销售额',
-      width: 'auto',
-    },
-  },
-  {
-    id: 'profit',
-    config: {
-      label: '利润',
-      width: 120,
-    },
-  },
-])
-
-const records = ref([
-  {
-    category: '办公用品',
-    amount: '129.70',
-    profit: '-60.70',
-    children: [
-      { category: '信封', amount: '125.44', profit: '42.56' },
-      { category: '器具', amount: '1375.92', profit: '550.2' },
-    ],
-  },
-  {
-    category: '技术',
-    amount: '229.70',
-    profit: '90.70',
-    children: true,
-  },
-  {
-    category: '家具',
-    amount: '329.00',
-    profit: '120.30',
-    children: [
-      { category: '桌子', amount: '125.44', profit: '42.56' },
-      { category: '椅子', amount: '1375.92', profit: '550.2' },
-    ],
-  },
-])
-
-const delay = (ms: number) => new Promise((r) => setTimeout(r, ms))
-
-const loadChildren = async (record: any) => {
-  await delay(600)
-  if (record.category === '技术') {
-    return [
-      { category: '设备', amount: '225.44', profit: '462.56' },
-      { category: '配件', amount: '375.92', profit: '550.2' },
-      { category: '电话', amount: '175.92', profit: '750.2' },
-    ]
-  }
-  return []
-}
-</script>
-
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      :columns="columns"
+      :records="records"
+      is-tree
+      :load-children="loadChildren"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'category',
+    config: {
+      label: '类别',
+      width: 200,
+    },
+  },
+  {
+    id: 'amount',
+    config: {
+      label: '销售额',
+      width: 'auto',
+    },
+  },
+  {
+    id: 'profit',
+    config: {
+      label: '利润',
+      width: 120,
+    },
+  },
+])
+
+const records = ref([
+  {
+    category: '办公用品',
+    amount: '129.70',
+    profit: '-60.70',
+    children: [
+      { category: '信封', amount: '125.44', profit: '42.56' },
+      { category: '器具', amount: '1375.92', profit: '550.2' },
+    ],
+  },
+  {
+    category: '技术',
+    amount: '229.70',
+    profit: '90.70',
+    children: true,
+  },
+  {
+    category: '家具',
+    amount: '329.00',
+    profit: '120.30',
+    children: [
+      { category: '桌子', amount: '125.44', profit: '42.56' },
+      { category: '椅子', amount: '1375.92', profit: '550.2' },
+    ],
+  },
+])
+
+const delay = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+const loadChildren = async (record: any) => {
+  await delay(600)
+  if (record.category === '技术') {
+    return [
+      { category: '设备', amount: '225.44', profit: '462.56' },
+      { category: '配件', amount: '375.92', profit: '550.2' },
+      { category: '电话', amount: '175.92', profit: '750.2' },
+    ]
+  }
+  return []
+}
+</script>
+