@a2simcode/ui 0.0.48 → 0.0.50

package/docs/examples/table/basic.vue

@@ -1,168 +1,168 @@
-<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: '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',
-    },
-  },
-])
-
-const records = ref([
-  {
-    'Order ID': 'CA-2016-152156',
-    'Customer ID': 'CG-12520',
-    'Product Name': 'Canon ImageCLASS 2200 Advanced Copier',
-    Category: 'Office Supplies',
-    'Sub-Category': 'Copiers',
-    Region: 'West',
-    City: 'Los Angeles',
-    'Order Date': '2016-11-08',
-    Quantity: 2,
-    Sales: 2399.99,
-    Profit: 400.0,
-  },
-  {
-    'Order ID': 'CA-2017-152157',
-    'Customer ID': 'DV-13045',
-    'Product Name': 'Logitech Wireless Mouse',
-    Category: 'Technology',
-    'Sub-Category': 'Accessories',
-    Region: 'West',
-    City: 'San Francisco',
-    'Order Date': '2017-03-15',
-    Quantity: 3,
-    Sales: 89.97,
-    Profit: 25.5,
-  },
-  {
-    'Order ID': 'US-2017-108966',
-    'Customer ID': 'SO-20335',
-    'Product Name': 'HON Mesh Task Chair',
-    Category: 'Furniture',
-    'Sub-Category': 'Chairs',
-    Region: 'East',
-    City: 'New York',
-    'Order Date': '2017-06-21',
-    Quantity: 4,
-    Sales: 799.96,
-    Profit: 120.0,
-  },
-  {
-    'Order ID': 'US-2016-108967',
-    'Customer ID': 'AB-10015',
-    'Product Name': 'Avery Binder Labels',
-    Category: 'Office Supplies',
-    'Sub-Category': 'Labels',
-    Region: 'Central',
-    City: 'Chicago',
-    'Order Date': '2016-02-03',
-    Quantity: 10,
-    Sales: 15.9,
-    Profit: 5.2,
-  },
-  {
-    'Order ID': 'CA-2015-108968',
-    'Customer ID': 'ML-12515',
-    'Product Name': 'Apple iPhone 7',
-    Category: 'Technology',
-    'Sub-Category': 'Phones',
-    Region: 'South',
-    City: 'Dallas',
-    'Order Date': '2015-09-12',
-    Quantity: 1,
-    Sales: 699.0,
-    Profit: 80.0,
-  },
-])
-</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: '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',
+    },
+  },
+])
+
+const records = ref([
+  {
+    'Order ID': 'CA-2016-152156',
+    'Customer ID': 'CG-12520',
+    'Product Name': 'Canon ImageCLASS 2200 Advanced Copier',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Copiers',
+    Region: 'West',
+    City: 'Los Angeles',
+    'Order Date': '2016-11-08',
+    Quantity: 2,
+    Sales: 2399.99,
+    Profit: 400.0,
+  },
+  {
+    'Order ID': 'CA-2017-152157',
+    'Customer ID': 'DV-13045',
+    'Product Name': 'Logitech Wireless Mouse',
+    Category: 'Technology',
+    'Sub-Category': 'Accessories',
+    Region: 'West',
+    City: 'San Francisco',
+    'Order Date': '2017-03-15',
+    Quantity: 3,
+    Sales: 89.97,
+    Profit: 25.5,
+  },
+  {
+    'Order ID': 'US-2017-108966',
+    'Customer ID': 'SO-20335',
+    'Product Name': 'HON Mesh Task Chair',
+    Category: 'Furniture',
+    'Sub-Category': 'Chairs',
+    Region: 'East',
+    City: 'New York',
+    'Order Date': '2017-06-21',
+    Quantity: 4,
+    Sales: 799.96,
+    Profit: 120.0,
+  },
+  {
+    'Order ID': 'US-2016-108967',
+    'Customer ID': 'AB-10015',
+    'Product Name': 'Avery Binder Labels',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Labels',
+    Region: 'Central',
+    City: 'Chicago',
+    'Order Date': '2016-02-03',
+    Quantity: 10,
+    Sales: 15.9,
+    Profit: 5.2,
+  },
+  {
+    'Order ID': 'CA-2015-108968',
+    'Customer ID': 'ML-12515',
+    'Product Name': 'Apple iPhone 7',
+    Category: 'Technology',
+    'Sub-Category': 'Phones',
+    Region: 'South',
+    City: 'Dallas',
+    'Order Date': '2015-09-12',
+    Quantity: 1,
+    Sales: 699.0,
+    Profit: 80.0,
+  },
+])
+</script>