@a2simcode/ui 0.0.163 → 0.0.164

package/docs/examples/table/icon.vue

@@ -1,85 +1,85 @@
-<template>
-  <div style="position: relative; width: 100%; height: 300px">
-    <j-table v-if="iconsReady" :columns="columns" :records="records" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { getIcon, iconLoaded, loadIcon } from '@iconify/vue'
-import { onBeforeMount, ref } from 'vue'
-
-const iconsReady = ref(false)
-
-const browsers = [
-  { name: 'Chrome', icon: 'logos:chrome' },
-  { name: 'Firefox', icon: 'logos:firefox' },
-  { name: 'Safari', icon: 'logos:safari' },
-  { name: 'Edge', icon: 'logos:microsoft-edge' },
-]
-
-const toSvg = (iconName: string) => {
-  const iconData = getIcon(iconName)
-  if (!iconData) return ''
-  return `<svg viewBox="0 0 ${iconData.width} ${iconData.height}">${iconData.body}</svg>`
-}
-
-const records = ref<Record<string, any>[]>([])
-
-onBeforeMount(async () => {
-  // @ts-ignore
-  if (import.meta.env.SSR) {
-    iconsReady.value = true
-    return
-  }
-
-  const icons = browsers.map((item) => item.icon)
-
-  await Promise.all(
-    icons.map(async (icon) => {
-      if (!iconLoaded(icon)) {
-        await loadIcon(icon)
-      }
-    })
-  )
-
-  records.value = browsers.map((item) => {
-    return {
-      ...item,
-      svg: toSvg(item.icon),
-    }
-  })
-
-  iconsReady.value = true
-})
-
-const columns = ref([
-  {
-    id: 'name',
-    config: {
-      label: '浏览器',
-      width: 150,
-      align: 'left',
-    },
-  },
-  {
-    id: 'icon',
-    type: 'j-icon',
-    config: {
-      label: '图标（Iconify）',
-      width: 120,
-      align: 'center',
-      size: 24,
-    },
-  },
-  {
-    id: 'svg',
-    type: 'j-icon',
-    config: {
-      label: '图标（SVG）',
-      width: 120,
-      align: 'center',
-      size: 24,
-    },
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 300px">
+    <j-table v-if="iconsReady" :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getIcon, iconLoaded, loadIcon } from '@iconify/vue'
+import { onBeforeMount, ref } from 'vue'
+
+const iconsReady = ref(false)
+
+const browsers = [
+  { name: 'Chrome', icon: 'logos:chrome' },
+  { name: 'Firefox', icon: 'logos:firefox' },
+  { name: 'Safari', icon: 'logos:safari' },
+  { name: 'Edge', icon: 'logos:microsoft-edge' },
+]
+
+const toSvg = (iconName: string) => {
+  const iconData = getIcon(iconName)
+  if (!iconData) return ''
+  return `<svg viewBox="0 0 ${iconData.width} ${iconData.height}">${iconData.body}</svg>`
+}
+
+const records = ref<Record<string, any>[]>([])
+
+onBeforeMount(async () => {
+  // @ts-ignore
+  if (import.meta.env.SSR) {
+    iconsReady.value = true
+    return
+  }
+
+  const icons = browsers.map((item) => item.icon)
+
+  await Promise.all(
+    icons.map(async (icon) => {
+      if (!iconLoaded(icon)) {
+        await loadIcon(icon)
+      }
+    })
+  )
+
+  records.value = browsers.map((item) => {
+    return {
+      ...item,
+      svg: toSvg(item.icon),
+    }
+  })
+
+  iconsReady.value = true
+})
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '浏览器',
+      width: 150,
+      align: 'left',
+    },
+  },
+  {
+    id: 'icon',
+    type: 'j-icon',
+    config: {
+      label: '图标（Iconify）',
+      width: 120,
+      align: 'center',
+      size: 24,
+    },
+  },
+  {
+    id: 'svg',
+    type: 'j-icon',
+    config: {
+      label: '图标（SVG）',
+      width: 120,
+      align: 'center',
+      size: 24,
+    },
+  },
+])
+</script>

package/docs/examples/table/link.vue

@@ -1,66 +1,66 @@
-<template>
-  <div style="position: relative; width: 100%; height: 400px">
-    <j-table :columns="columns" :records="records" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const columns = ref([
-  {
-    id: 'name',
-    type: 'link',
-    config: {
-      label: '项目名称',
-      width: 'auto',
-      align: 'left',
-      click: ({ row }: { row: any }) => {
-        ElMessage.success(`点击了项目: ${row.name}`)
-      },
-    },
-  },
-  {
-    id: 'status',
-    config: {
-      label: '状态',
-      width: 'auto',
-      align: 'center',
-    },
-  },
-  {
-    id: 'owner',
-    type: 'link',
-    config: {
-      label: '负责人',
-      width: 'auto',
-      align: 'center',
-      click: ({ row }: { row: any }) => {
-        ElMessage.info(`查看负责人: ${row.owner}`)
-      },
-    },
-  },
-])
-
-const records = ref([
-  {
-    id: '1',
-    name: '项目A',
-    status: '进行中',
-    owner: '张三',
-  },
-  {
-    id: '2',
-    name: '项目B',
-    status: '已完成',
-    owner: '李四',
-  },
-  {
-    id: '3',
-    name: '项目C',
-    status: '待审核',
-    owner: '王五',
-  },
-])
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 400px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: 'link',
+    config: {
+      label: '项目名称',
+      width: 'auto',
+      align: 'left',
+      click: ({ row }: { row: any }) => {
+        ElMessage.success(`点击了项目: ${row.name}`)
+      },
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: '状态',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'owner',
+    type: 'link',
+    config: {
+      label: '负责人',
+      width: 'auto',
+      align: 'center',
+      click: ({ row }: { row: any }) => {
+        ElMessage.info(`查看负责人: ${row.owner}`)
+      },
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '项目A',
+    status: '进行中',
+    owner: '张三',
+  },
+  {
+    id: '2',
+    name: '项目B',
+    status: '已完成',
+    owner: '李四',
+  },
+  {
+    id: '3',
+    name: '项目C',
+    status: '待审核',
+    owner: '王五',
+  },
+])
+</script>

package/docs/examples/table/multiple.vue

@@ -1,188 +1,188 @@
-<template>
-  <div style="margin-bottom: 10px">
-    <j-button type="primary" label="获取选中数据" @click="getSelection" />
-    <j-button label="选中前两行" @click="setSelection" />
-  </div>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table ref="tableRef" :columns="columns" :records="records" is-multiple />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const tableRef = ref()
-
-const getSelection = () => {
-  const records = tableRef.value.getSelection()
-  console.log(records)
-  alert(`选中了 ${records.length} 条数据，详情请查看控制台`)
-}
-
-const setSelection = () => {
-  const selectedRecords = [records.value[0], records.value[1]]
-  tableRef.value.setSelection(selectedRecords)
-}
-
-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: '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([
-  {
-    id: 'CA-2016-152156',
-    'Order ID': 'CA-2016-152156',
-    'Customer ID': 'CG-12520',
-    'Product Name': 'Canon ImageCLASS 2200 Advanced Copier',
-    Category: 'Office Supplies',
-    Quantity: 2,
-    Sales: 2399.99,
-    Profit: 400.0,
-  },
-  {
-    id: 'CA-2017-152157',
-    'Order ID': 'CA-2017-152157',
-    'Customer ID': 'DV-13045',
-    'Product Name': 'Logitech Wireless Mouse',
-    Category: 'Technology',
-    Quantity: 3,
-    Sales: 89.97,
-    Profit: 25.5,
-  },
-  {
-    id: 'US-2017-108966',
-    'Order ID': 'US-2017-108966',
-    'Customer ID': 'SO-20335',
-    'Product Name': 'HON Mesh Task Chair',
-    Category: 'Furniture',
-    Quantity: 4,
-    Sales: 799.96,
-    Profit: 120.0,
-  },
-  {
-    id: 'US-2016-108967',
-    'Order ID': 'US-2016-108967',
-    'Customer ID': 'AB-10015',
-    'Product Name': 'Avery Binder Labels',
-    Category: 'Office Supplies',
-    Quantity: 10,
-    Sales: 15.9,
-    Profit: 5.2,
-  },
-  {
-    id: 'CA-2015-108968',
-    'Order ID': 'CA-2015-108968',
-    'Customer ID': 'ML-12515',
-    'Product Name': 'Apple iPhone 7',
-    Category: 'Technology',
-    Quantity: 1,
-    Sales: 699.0,
-    Profit: 80.0,
-  },
-  {
-    id: 'CA-2016-108969',
-    'Order ID': 'CA-2016-108969',
-    'Customer ID': 'CG-12520',
-    'Product Name': 'Staples Paper',
-    Category: 'Office Supplies',
-    Quantity: 20,
-    Sales: 40.0,
-    Profit: 12.0,
-  },
-  {
-    id: 'US-2016-108970',
-    'Order ID': 'US-2016-108970',
-    'Customer ID': 'DV-13045',
-    'Product Name': 'Dell Monitor 24"',
-    Category: 'Technology',
-    Quantity: 2,
-    Sales: 320.0,
-    Profit: 60.0,
-  },
-  {
-    id: 'US-2017-108971',
-    'Order ID': 'US-2017-108971',
-    'Customer ID': 'SO-20335',
-    'Product Name': 'Office Chair Ergonomic',
-    Category: 'Furniture',
-    Quantity: 1,
-    Sales: 199.0,
-    Profit: 35.0,
-  },
-  {
-    id: 'CA-2017-108972',
-    'Order ID': 'CA-2017-108972',
-    'Customer ID': 'AB-10015',
-    'Product Name': 'Notebook Set',
-    Category: 'Office Supplies',
-    Quantity: 15,
-    Sales: 60.0,
-    Profit: 18.0,
-  },
-  {
-    id: 'US-2015-108973',
-    'Order ID': 'US-2015-108973',
-    'Customer ID': 'ML-12515',
-    'Product Name': 'Bluetooth Headset',
-    Category: 'Technology',
-    Quantity: 2,
-    Sales: 150.0,
-    Profit: 30.0,
-  },
-])
-</script>
+<template>
+  <div style="margin-bottom: 10px">
+    <j-button type="primary" label="获取选中数据" @click="getSelection" />
+    <j-button label="选中前两行" @click="setSelection" />
+  </div>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table ref="tableRef" :columns="columns" :records="records" is-multiple />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tableRef = ref()
+
+const getSelection = () => {
+  const records = tableRef.value.getSelection()
+  console.log(records)
+  alert(`选中了 ${records.length} 条数据，详情请查看控制台`)
+}
+
+const setSelection = () => {
+  const selectedRecords = [records.value[0], records.value[1]]
+  tableRef.value.setSelection(selectedRecords)
+}
+
+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: '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([
+  {
+    id: 'CA-2016-152156',
+    'Order ID': 'CA-2016-152156',
+    'Customer ID': 'CG-12520',
+    'Product Name': 'Canon ImageCLASS 2200 Advanced Copier',
+    Category: 'Office Supplies',
+    Quantity: 2,
+    Sales: 2399.99,
+    Profit: 400.0,
+  },
+  {
+    id: 'CA-2017-152157',
+    'Order ID': 'CA-2017-152157',
+    'Customer ID': 'DV-13045',
+    'Product Name': 'Logitech Wireless Mouse',
+    Category: 'Technology',
+    Quantity: 3,
+    Sales: 89.97,
+    Profit: 25.5,
+  },
+  {
+    id: 'US-2017-108966',
+    'Order ID': 'US-2017-108966',
+    'Customer ID': 'SO-20335',
+    'Product Name': 'HON Mesh Task Chair',
+    Category: 'Furniture',
+    Quantity: 4,
+    Sales: 799.96,
+    Profit: 120.0,
+  },
+  {
+    id: 'US-2016-108967',
+    'Order ID': 'US-2016-108967',
+    'Customer ID': 'AB-10015',
+    'Product Name': 'Avery Binder Labels',
+    Category: 'Office Supplies',
+    Quantity: 10,
+    Sales: 15.9,
+    Profit: 5.2,
+  },
+  {
+    id: 'CA-2015-108968',
+    'Order ID': 'CA-2015-108968',
+    'Customer ID': 'ML-12515',
+    'Product Name': 'Apple iPhone 7',
+    Category: 'Technology',
+    Quantity: 1,
+    Sales: 699.0,
+    Profit: 80.0,
+  },
+  {
+    id: 'CA-2016-108969',
+    'Order ID': 'CA-2016-108969',
+    'Customer ID': 'CG-12520',
+    'Product Name': 'Staples Paper',
+    Category: 'Office Supplies',
+    Quantity: 20,
+    Sales: 40.0,
+    Profit: 12.0,
+  },
+  {
+    id: 'US-2016-108970',
+    'Order ID': 'US-2016-108970',
+    'Customer ID': 'DV-13045',
+    'Product Name': 'Dell Monitor 24"',
+    Category: 'Technology',
+    Quantity: 2,
+    Sales: 320.0,
+    Profit: 60.0,
+  },
+  {
+    id: 'US-2017-108971',
+    'Order ID': 'US-2017-108971',
+    'Customer ID': 'SO-20335',
+    'Product Name': 'Office Chair Ergonomic',
+    Category: 'Furniture',
+    Quantity: 1,
+    Sales: 199.0,
+    Profit: 35.0,
+  },
+  {
+    id: 'CA-2017-108972',
+    'Order ID': 'CA-2017-108972',
+    'Customer ID': 'AB-10015',
+    'Product Name': 'Notebook Set',
+    Category: 'Office Supplies',
+    Quantity: 15,
+    Sales: 60.0,
+    Profit: 18.0,
+  },
+  {
+    id: 'US-2015-108973',
+    'Order ID': 'US-2015-108973',
+    'Customer ID': 'ML-12515',
+    'Product Name': 'Bluetooth Headset',
+    Category: 'Technology',
+    Quantity: 2,
+    Sales: 150.0,
+    Profit: 30.0,
+  },
+])
+</script>