@a2simcode/ui 0.0.70 → 0.0.72

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

@@ -1,103 +1,103 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table
-      :columns="columns"
-      :records="records"
-      :sub-columns="subColumns"
-      :is-sub-show-number="true"
-      :sub-actions="subActions"
-    />
-  </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' },
-      { id: 'P003', product: 'Keyboard', quantity: 1, price: '$100' },
-    ],
-  },
-  {
-    orderId: 'ORD-002',
-    customer: 'Jane Smith',
-    amount: '$800',
-    children: [
-      { id: 'P004', product: 'Monitor', quantity: 2, price: '$300' },
-      { id: 'P005', product: 'Headset', quantity: 1, price: '$200' },
-    ],
-  },
-  {
-    orderId: 'ORD-003',
-    customer: 'Bob Johnson',
-    amount: '$150',
-    children: [
-      { id: 'P006', product: 'USB Hub', quantity: 3, price: '$50' },
-    ],
-  },
-])
-
-const subColumns = [
-  {
-    id: 'product',
-    config: {
-      label: 'Product',
-      width: 200,
-    },
-  },
-  {
-    id: 'quantity',
-    config: {
-      label: 'Quantity',
-      width: 100,
-    },
-  },
-  {
-    id: 'price',
-    config: {
-      label: 'Price',
-      width: 100,
-    },
-  },
-]
-
-const subActions = [
-  {
-    id: 'view',
-    label: '查看详情',
-    click: ({ data }) => {
-      console.log('查看详情:', data)
-    },
-  },
-]
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      :columns="columns"
+      :records="records"
+      :sub-columns="subColumns"
+      :is-sub-show-number="true"
+      :sub-actions="subActions"
+    />
+  </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' },
+      { id: 'P003', product: 'Keyboard', quantity: 1, price: '$100' },
+    ],
+  },
+  {
+    orderId: 'ORD-002',
+    customer: 'Jane Smith',
+    amount: '$800',
+    children: [
+      { id: 'P004', product: 'Monitor', quantity: 2, price: '$300' },
+      { id: 'P005', product: 'Headset', quantity: 1, price: '$200' },
+    ],
+  },
+  {
+    orderId: 'ORD-003',
+    customer: 'Bob Johnson',
+    amount: '$150',
+    children: [
+      { id: 'P006', product: 'USB Hub', quantity: 3, price: '$50' },
+    ],
+  },
+])
+
+const subColumns = [
+  {
+    id: 'product',
+    config: {
+      label: 'Product',
+      width: 200,
+    },
+  },
+  {
+    id: 'quantity',
+    config: {
+      label: 'Quantity',
+      width: 100,
+    },
+  },
+  {
+    id: 'price',
+    config: {
+      label: 'Price',
+      width: 100,
+    },
+  },
+]
+
+const subActions = [
+  {
+    id: 'view',
+    label: '查看详情',
+    click: ({ data }) => {
+      console.log('查看详情:', data)
+    },
+  },
+]
+</script>

package/docs/examples/table/tag.vue

@@ -1,43 +1,43 @@
-<template>
-  <div style="position: relative; width: 100%; height: 220px">
-    <j-table :columns="columns" :records="records" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'name',
-    config: {
-      label: '客户',
-      width: 160,
-      align: 'left',
-    },
-  },
-  {
-    id: 'tags',
-    type: 'j-tag',
-    config: {
-      label: '标签',
-      width: 360,
-      align: 'left',
-      dataType: 'options',
-      options: [
-        { value: 'ax', label: '安盛科技', color: '#fff7e8' },
-        { value: 'jy', label: '锦银集团', color: '#e8f3ff' },
-        { value: 'drs', label: '大都人寿', color: '#e8fffb' },
-        { value: 'auto1', label: '自动白字', color: '#165dff' },
-        { value: 'auto2', label: '自动黑字', color: '#94bfff' },
-      ],
-    },
-  },
-])
-
-const records = ref([
-  { name: '客户A', tags: 'ax,jy' },
-  { name: '客户B', tags: 'drs,auto1' },
-  { name: '客户C', tags: 'ax,jy,drs,auto2' },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 220px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '客户',
+      width: 160,
+      align: 'left',
+    },
+  },
+  {
+    id: 'tags',
+    type: 'j-tag',
+    config: {
+      label: '标签',
+      width: 360,
+      align: 'left',
+      dataType: 'options',
+      options: [
+        { value: 'ax', label: '安盛科技', color: '#fff7e8' },
+        { value: 'jy', label: '锦银集团', color: '#e8f3ff' },
+        { value: 'drs', label: '大都人寿', color: '#e8fffb' },
+        { value: 'auto1', label: '自动白字', color: '#165dff' },
+        { value: 'auto2', label: '自动黑字', color: '#94bfff' },
+      ],
+    },
+  },
+])
+
+const records = ref([
+  { name: '客户A', tags: 'ax,jy' },
+  { name: '客户B', tags: 'drs,auto1' },
+  { name: '客户C', tags: 'ax,jy,drs,auto2' },
+])
+</script>

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

@@ -1,119 +1,119 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table :columns="columns" :records="records" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'base_info',
-    config: {
-      label: 'Base Info',
-      width: 'auto',
-      align: 'center',
-    },
-    children: [
-      {
-        id: 'name',
-        config: {
-          label: 'Name',
-          width: 'auto',
-          align: 'left',
-        },
-      },
-      {
-        id: 'age',
-        config: {
-          label: 'Age',
-          width: 'auto',
-          align: 'center',
-        },
-      },
-    ],
-  },
-  {
-    id: 'contact_info',
-    config: {
-      label: 'Contact Info',
-      width: 'auto',
-      align: 'center',
-    },
-    children: [
-      {
-        id: 'phone',
-        config: {
-          label: 'Phone',
-          width: 'auto',
-          align: 'left',
-        },
-      },
-      {
-        id: 'email',
-        config: {
-          label: 'Email',
-          width: 'auto',
-          align: 'left',
-        },
-      },
-      {
-        id: 'address',
-        config: {
-          label: 'Address',
-          width: 'auto',
-          align: 'left',
-        },
-        children: [
-          {
-            id: 'province',
-            config: {
-              label: 'Province',
-              width: 'auto',
-              align: 'left',
-            },
-          },
-          {
-            id: 'city',
-            config: {
-              label: 'City',
-              width: 'auto',
-              align: 'left',
-            },
-          },
-          {
-            id: 'street',
-            config: {
-              label: 'Street',
-              width: 'auto',
-              align: 'left',
-            },
-          },
-        ],
-      },
-    ],
-  },
-])
-
-const records = ref([
-  {
-    name: 'John Brown',
-    age: 18,
-    phone: '123456789',
-    email: 'john@example.com',
-    province: 'Sichuan',
-    city: 'Chengdu',
-    street: 'Kehua North Road',
-  },
-  {
-    name: 'Jim Green',
-    age: 24,
-    phone: '987654321',
-    email: 'jim@example.com',
-    province: 'Guangdong',
-    city: 'Shenzhen',
-    street: 'Nanshan Road',
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'base_info',
+    config: {
+      label: 'Base Info',
+      width: 'auto',
+      align: 'center',
+    },
+    children: [
+      {
+        id: 'name',
+        config: {
+          label: 'Name',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+      {
+        id: 'age',
+        config: {
+          label: 'Age',
+          width: 'auto',
+          align: 'center',
+        },
+      },
+    ],
+  },
+  {
+    id: 'contact_info',
+    config: {
+      label: 'Contact Info',
+      width: 'auto',
+      align: 'center',
+    },
+    children: [
+      {
+        id: 'phone',
+        config: {
+          label: 'Phone',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+      {
+        id: 'email',
+        config: {
+          label: 'Email',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+      {
+        id: 'address',
+        config: {
+          label: 'Address',
+          width: 'auto',
+          align: 'left',
+        },
+        children: [
+          {
+            id: 'province',
+            config: {
+              label: 'Province',
+              width: 'auto',
+              align: 'left',
+            },
+          },
+          {
+            id: 'city',
+            config: {
+              label: 'City',
+              width: 'auto',
+              align: 'left',
+            },
+          },
+          {
+            id: 'street',
+            config: {
+              label: 'Street',
+              width: 'auto',
+              align: 'left',
+            },
+          },
+        ],
+      },
+    ],
+  },
+])
+
+const records = ref([
+  {
+    name: 'John Brown',
+    age: 18,
+    phone: '123456789',
+    email: 'john@example.com',
+    province: 'Sichuan',
+    city: 'Chengdu',
+    street: 'Kehua North Road',
+  },
+  {
+    name: 'Jim Green',
+    age: 24,
+    phone: '987654321',
+    email: 'jim@example.com',
+    province: 'Guangdong',
+    city: 'Shenzhen',
+    street: 'Nanshan Road',
+  },
+])
+</script>