@a2simcode/ui 0.0.71 → 0.0.72

package/docs/examples/table/pagination.vue

@@ -1,151 +1,151 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table
-      ref="tableRef"
-      v-model:table-page="currentPage"
-      v-model:page-size="pageSize"
-      :columns="columns"
-      :records="records"
-      :is-page="true"
-      :page-total="pageTotal"
-      @load-page-data="handleLoadPageData"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-
-const columns = ref([
-  {
-    id: 'Order ID',
-    config: {
-      label: 'Order ID',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'Customer ID',
-    config: {
-      label: 'Customer ID',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'Product Name',
-    config: {
-      label: 'Product Name',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'Category',
-    config: {
-      label: 'Category',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'Sub-Category',
-    config: {
-      label: 'Sub-Category',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'Region',
-    config: {
-      label: 'Region',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'City',
-    config: {
-      label: 'City',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'Order Date',
-    config: {
-      label: 'Order Date',
-      width: 'auto',
-      align: 'center',
-    },
-  },
-  {
-    id: 'Quantity',
-    config: {
-      label: 'Quantity',
-      width: 'auto',
-      align: 'right',
-    },
-  },
-  {
-    id: 'Sales',
-    config: {
-      label: 'Sales',
-      width: 'auto',
-      align: 'right',
-    },
-  },
-  {
-    id: 'Profit',
-    config: {
-      label: 'Profit',
-      width: 'auto',
-      align: 'right',
-    },
-  },
-])
-
-let records: Record<string, any>[] = []
-const tableRef = ref()
-const allData = ref<any[]>([])
-const currentPage = ref(1)
-const pageSize = ref(20)
-const pageTotal = ref(0)
-
-// 加载分页数据
-const handleLoadPageData = ({ page, rows }: { page: number; rows: number }) => {
-  const start = (page - 1) * rows
-  const end = start + rows
-  records = allData.value.slice(start, end)
-
-  tableRef.value?.setRecords(records)
-}
-
-const generateLocalData = () => {
-  const data: any[] = []
-  for (let i = 1; i <= 100; i++) {
-    data.push({
-      'Order ID': `CA-2016-${150000 + i}`,
-      'Customer ID': `CU-${10000 + i}`,
-      'Product Name': `Sample Product ${i}`,
-      Category: i % 2 === 0 ? 'Office Supplies' : 'Technology',
-      'Sub-Category': i % 3 === 0 ? 'Chairs' : 'Accessories',
-      Region: i % 4 === 0 ? 'West' : 'East',
-      City: i % 5 === 0 ? 'Los Angeles' : 'New York',
-      'Order Date': `2016-01-${(i % 28) + 1}`.padStart(10, '0'),
-      Quantity: (i % 10) + 1,
-      Sales: 50 + i,
-      Profit: 10 + (i % 20),
-    })
-  }
-  return data
-}
-
-onMounted(() => {
-  allData.value = generateLocalData()
-  pageTotal.value = allData.value.length
-  handleLoadPageData({ page: currentPage.value, rows: pageSize.value })
-})
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      ref="tableRef"
+      v-model:table-page="currentPage"
+      v-model:page-size="pageSize"
+      :columns="columns"
+      :records="records"
+      :is-page="true"
+      :page-total="pageTotal"
+      @load-page-data="handleLoadPageData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const columns = ref([
+  {
+    id: 'Order ID',
+    config: {
+      label: 'Order ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Customer ID',
+    config: {
+      label: 'Customer ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Product Name',
+    config: {
+      label: 'Product Name',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Category',
+    config: {
+      label: 'Category',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Sub-Category',
+    config: {
+      label: 'Sub-Category',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Region',
+    config: {
+      label: 'Region',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'City',
+    config: {
+      label: 'City',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Order Date',
+    config: {
+      label: 'Order Date',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'Quantity',
+    config: {
+      label: 'Quantity',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+  {
+    id: 'Sales',
+    config: {
+      label: 'Sales',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+  {
+    id: 'Profit',
+    config: {
+      label: 'Profit',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+])
+
+let records: Record<string, any>[] = []
+const tableRef = ref()
+const allData = ref<any[]>([])
+const currentPage = ref(1)
+const pageSize = ref(20)
+const pageTotal = ref(0)
+
+// 加载分页数据
+const handleLoadPageData = ({ page, rows }: { page: number; rows: number }) => {
+  const start = (page - 1) * rows
+  const end = start + rows
+  records = allData.value.slice(start, end)
+
+  tableRef.value?.setRecords(records)
+}
+
+const generateLocalData = () => {
+  const data: any[] = []
+  for (let i = 1; i <= 100; i++) {
+    data.push({
+      'Order ID': `CA-2016-${150000 + i}`,
+      'Customer ID': `CU-${10000 + i}`,
+      'Product Name': `Sample Product ${i}`,
+      Category: i % 2 === 0 ? 'Office Supplies' : 'Technology',
+      'Sub-Category': i % 3 === 0 ? 'Chairs' : 'Accessories',
+      Region: i % 4 === 0 ? 'West' : 'East',
+      City: i % 5 === 0 ? 'Los Angeles' : 'New York',
+      'Order Date': `2016-01-${(i % 28) + 1}`.padStart(10, '0'),
+      Quantity: (i % 10) + 1,
+      Sales: 50 + i,
+      Profit: 10 + (i % 20),
+    })
+  }
+  return data
+}
+
+onMounted(() => {
+  allData.value = generateLocalData()
+  pageTotal.value = allData.value.length
+  handleLoadPageData({ page: currentPage.value, rows: pageSize.value })
+})
+</script>

package/docs/examples/table/single-selection.vue

@@ -1,64 +1,64 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table
-      ref="tableRef"
-      :columns="columns"
-      :records="records"
-      @selection-changed="onSelectionChanged"
-    />
-  </div>
-  <div style="margin-top: 10px">Selected: {{ selected }}</div>
-  <div style="margin-top: 10px">
-    <el-button @click="getSelectionManual">Get Selection Manually</el-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const tableRef = ref()
-const selected = ref<any[]>([])
-
-const onSelectionChanged = (selection: any[]) => {
-  console.log('selection changed', selection)
-  selected.value = selection
-}
-
-const getSelectionManual = () => {
-  if (tableRef.value) {
-    const selection = tableRef.value.getSelection()
-    console.log('manual selection', selection)
-    selected.value = selection
-  }
-}
-
-const columns = ref([
-  {
-    id: 'Order ID',
-    config: {
-      label: 'Order ID',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'Customer ID',
-    config: {
-      label: 'Customer ID',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-])
-
-const records = ref([
-  {
-    'Order ID': 'CA-2016-152156',
-    'Customer ID': 'CG-12520',
-  },
-  {
-    'Order ID': 'CA-2016-138688',
-    'Customer ID': 'DV-13045',
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      ref="tableRef"
+      :columns="columns"
+      :records="records"
+      @selection-changed="onSelectionChanged"
+    />
+  </div>
+  <div style="margin-top: 10px">Selected: {{ selected }}</div>
+  <div style="margin-top: 10px">
+    <el-button @click="getSelectionManual">Get Selection Manually</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tableRef = ref()
+const selected = ref<any[]>([])
+
+const onSelectionChanged = (selection: any[]) => {
+  console.log('selection changed', selection)
+  selected.value = selection
+}
+
+const getSelectionManual = () => {
+  if (tableRef.value) {
+    const selection = tableRef.value.getSelection()
+    console.log('manual selection', selection)
+    selected.value = selection
+  }
+}
+
+const columns = ref([
+  {
+    id: 'Order ID',
+    config: {
+      label: 'Order ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Customer ID',
+    config: {
+      label: 'Customer ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+])
+
+const records = ref([
+  {
+    'Order ID': 'CA-2016-152156',
+    'Customer ID': 'CG-12520',
+  },
+  {
+    'Order ID': 'CA-2016-138688',
+    'Customer ID': 'DV-13045',
+  },
+])
+</script>

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

@@ -1,97 +1,97 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table
-      :columns="columns"
-      :records="records"
-      :sub-columns="subColumns"
-      :load-children="loadChildren"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'orderId',
-    config: {
-      label: 'Order ID',
-      width: 150,
-    },
-  },
-  {
-    id: 'customer',
-    config: {
-      label: 'Customer',
-      width: 'auto',
-    },
-  },
-  {
-    id: 'amount',
-    config: {
-      label: 'Amount',
-      width: 150,
-    },
-  },
-])
-
-const records = ref([
-  {
-    orderId: 'ORD-001',
-    customer: 'John Doe',
-    amount: '$1,200',
-    children: [
-      { id: 'P001', product: 'Laptop', quantity: 1, price: '$1,000' },
-      { id: 'P002', product: 'Mouse', quantity: 2, price: '$50' },
-    ],
-  },
-  {
-    orderId: 'ORD-002',
-    customer: 'Jane Smith',
-    amount: '$800',
-    children: true,
-  },
-])
-
-const subColumns = [
-  {
-    id: 'product',
-    config: {
-      label: 'Product',
-      width: 200,
-    },
-  },
-  {
-    id: 'quantity',
-    config: {
-      label: 'Quantity',
-      width: 100,
-    },
-  },
-  {
-    id: 'price',
-    config: {
-      label: 'Price',
-      width: 100,
-    },
-  },
-]
-
-const fetchDetailFromServer = async (orderId: string) => {
-  await new Promise((resolve) => setTimeout(resolve, 600))
-
-  if (orderId === 'ORD-002') {
-    return [
-      { id: 'P003', product: 'Monitor', quantity: 1, price: '$300' },
-      { id: 'P004', product: 'Headset', quantity: 1, price: '$200' },
-    ]
-  }
-
-  return []
-}
-
-const loadChildren = async (record: any) => {
-  return await fetchDetailFromServer(record.orderId)
-}
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      :columns="columns"
+      :records="records"
+      :sub-columns="subColumns"
+      :load-children="loadChildren"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'orderId',
+    config: {
+      label: 'Order ID',
+      width: 150,
+    },
+  },
+  {
+    id: 'customer',
+    config: {
+      label: 'Customer',
+      width: 'auto',
+    },
+  },
+  {
+    id: 'amount',
+    config: {
+      label: 'Amount',
+      width: 150,
+    },
+  },
+])
+
+const records = ref([
+  {
+    orderId: 'ORD-001',
+    customer: 'John Doe',
+    amount: '$1,200',
+    children: [
+      { id: 'P001', product: 'Laptop', quantity: 1, price: '$1,000' },
+      { id: 'P002', product: 'Mouse', quantity: 2, price: '$50' },
+    ],
+  },
+  {
+    orderId: 'ORD-002',
+    customer: 'Jane Smith',
+    amount: '$800',
+    children: true,
+  },
+])
+
+const subColumns = [
+  {
+    id: 'product',
+    config: {
+      label: 'Product',
+      width: 200,
+    },
+  },
+  {
+    id: 'quantity',
+    config: {
+      label: 'Quantity',
+      width: 100,
+    },
+  },
+  {
+    id: 'price',
+    config: {
+      label: 'Price',
+      width: 100,
+    },
+  },
+]
+
+const fetchDetailFromServer = async (orderId: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 600))
+
+  if (orderId === 'ORD-002') {
+    return [
+      { id: 'P003', product: 'Monitor', quantity: 1, price: '$300' },
+      { id: 'P004', product: 'Headset', quantity: 1, price: '$200' },
+    ]
+  }
+
+  return []
+}
+
+const loadChildren = async (record: any) => {
+  return await fetchDetailFromServer(record.orderId)
+}
+</script>