@a2simcode/ui 0.0.182 → 0.0.184

package/docs/examples/table-panel/get-selection.vue

@@ -1,111 +1,111 @@
-<template>
-  <div style="position: relative; width: 100%; height: 560px">
-    <div style="margin-bottom: 8px; display: flex; gap: 8px; align-items: center">
-      <j-button type="primary" label="获取选中" @click="handleGetSelection" />
-      <j-button type="text" label="清空选中" @click="handleClearSelection" />
-      <div style="font-size: 12px; color: var(--j-color-text-tertiary)">
-        当前选中：{{ selectedRecords.length }} 条
-      </div>
-    </div>
-
-    <j-table-panel
-      ref="tablePanelRef"
-      row-key="orderId"
-      :columns="columns"
-      :load-data="loadData"
-      is-multiple
-      @select="handleSelect"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const tablePanelRef = ref<any>()
-const selectedRecords = ref<Record<string, any>[]>([])
-
-const columns = ref([
-  {
-    id: 'orderId',
-    type: '',
-    config: {
-      label: '订单号',
-      width: 150,
-      filter: { isSearchKeyword: true },
-    },
-  },
-  {
-    id: 'customerId',
-    type: '',
-    config: {
-      label: '客户编号',
-      width: 120,
-      filter: { isSearchKeyword: true },
-    },
-  },
-  {
-    id: 'productName',
-    type: '',
-    config: {
-      label: '产品名称',
-      filter: { isSearchKeyword: true },
-    },
-  },
-  {
-    id: 'category',
-    type: '',
-    config: {
-      label: '类别',
-      width: 120,
-      dataType: 'options',
-      options: [
-        { label: '办公用品', value: '办公用品' },
-        { label: '科技产品', value: '科技产品' },
-        { label: '家具', value: '家具' },
-      ],
-    },
-  },
-])
-
-const mockData = [
-  {
-    orderId: 'CA-2016-152156',
-    customerId: 'CG-12520',
-    productName: 'Canon ImageCLASS 2200 Advanced Copier',
-    category: '办公用品',
-  },
-  {
-    orderId: 'CA-2017-152157',
-    customerId: 'DV-13045',
-    productName: 'Logitech Wireless Mouse',
-    category: '科技产品',
-  },
-  {
-    orderId: 'US-2017-108966',
-    customerId: 'SO-20335',
-    productName: 'HON Mesh Task Chair',
-    category: '家具',
-  },
-]
-
-const loadData = async () => {
-  return new Promise((resolve) => {
-    setTimeout(() => resolve(mockData), 200)
-  })
-}
-
-const handleSelect = (records: Record<string, any>[]) => {
-  selectedRecords.value = records || []
-}
-
-const handleGetSelection = () => {
-  const selection = tablePanelRef.value?.getSelection?.() || []
-  ElMessage.info(`当前选中 ${selection.length} 条`)
-}
-
-const handleClearSelection = () => {
-  tablePanelRef.value?.clearSelection?.()
-}
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 560px">
+    <div style="margin-bottom: 8px; display: flex; gap: 8px; align-items: center">
+      <j-button type="primary" label="获取选中" @click="handleGetSelection" />
+      <j-button type="text" label="清空选中" @click="handleClearSelection" />
+      <div style="font-size: 12px; color: var(--j-color-text-tertiary)">
+        当前选中：{{ selectedRecords.length }} 条
+      </div>
+    </div>
+
+    <j-table-panel
+      ref="tablePanelRef"
+      row-key="orderId"
+      :columns="columns"
+      :load-data="loadData"
+      is-multiple
+      @select="handleSelect"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const tablePanelRef = ref<any>()
+const selectedRecords = ref<Record<string, any>[]>([])
+
+const columns = ref([
+  {
+    id: 'orderId',
+    type: '',
+    config: {
+      label: '订单号',
+      width: 150,
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'customerId',
+    type: '',
+    config: {
+      label: '客户编号',
+      width: 120,
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'productName',
+    type: '',
+    config: {
+      label: '产品名称',
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'category',
+    type: '',
+    config: {
+      label: '类别',
+      width: 120,
+      dataType: 'options',
+      options: [
+        { label: '办公用品', value: '办公用品' },
+        { label: '科技产品', value: '科技产品' },
+        { label: '家具', value: '家具' },
+      ],
+    },
+  },
+])
+
+const mockData = [
+  {
+    orderId: 'CA-2016-152156',
+    customerId: 'CG-12520',
+    productName: 'Canon ImageCLASS 2200 Advanced Copier',
+    category: '办公用品',
+  },
+  {
+    orderId: 'CA-2017-152157',
+    customerId: 'DV-13045',
+    productName: 'Logitech Wireless Mouse',
+    category: '科技产品',
+  },
+  {
+    orderId: 'US-2017-108966',
+    customerId: 'SO-20335',
+    productName: 'HON Mesh Task Chair',
+    category: '家具',
+  },
+]
+
+const loadData = async () => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(mockData), 200)
+  })
+}
+
+const handleSelect = (records: Record<string, any>[]) => {
+  selectedRecords.value = records || []
+}
+
+const handleGetSelection = () => {
+  const selection = tablePanelRef.value?.getSelection?.() || []
+  ElMessage.info(`当前选中 ${selection.length} 条`)
+}
+
+const handleClearSelection = () => {
+  tablePanelRef.value?.clearSelection?.()
+}
+</script>

package/docs/examples/table-panel/mask.vue

@@ -1,151 +1,151 @@
-<template>
-  <div class="table-panel-mask-demo">
-    <j-table-panel
-      row-key="id"
-      :columns="columns"
-      :load-data="loadData"
-      :buttons="buttons"
-      :render-v-node="renderVNode"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, h } from 'vue'
-
-const isMasked = ref(true)
-
-const columns = ref([
-  {
-    id: 'id',
-    type: '',
-    config: { label: 'ID', width: 120 },
-  },
-  {
-    id: 'name',
-    type: '',
-    config: {
-      label: '姓名',
-      filter: { isSearchKeyword: true },
-    },
-  },
-  {
-    id: 'phone',
-    type: '',
-    config: { label: '手机号' },
-  },
-  {
-    id: 'email',
-    type: '',
-    config: { label: '邮箱' },
-  },
-])
-
-const buttons = ref([
-  {
-    label: '切换掩码',
-    icon: 'mdi:eye',
-    click: () => {
-      isMasked.value = !isMasked.value
-    },
-  },
-])
-
-const data = [
-  { id: 'U-1001', name: '张三', phone: '13812345678', email: 'zhangsan@example.com' },
-  { id: 'U-1002', name: '李四', phone: '18698765432', email: 'lisi@example.com' },
-  { id: 'U-1003', name: '王五', phone: '15900001111', email: 'wangwu@example.com' },
-]
-
-const loadData = async () => data
-
-const maskPhone = (value?: string) => {
-  if (!value) return ''
-  if (value.length <= 7) return value
-  return `${value.slice(0, 3)}****${value.slice(-4)}`
-}
-
-const maskEmail = (value?: string) => {
-  if (!value) return ''
-  const at = value.indexOf('@')
-  if (at <= 1) return value
-  return `${value.slice(0, 1)}****${value.slice(at)}`
-}
-
-const renderVNode = (row: Record<string, any>) => {
-  const phoneText = isMasked.value ? maskPhone(row.phone) : row.phone
-  const emailText = isMasked.value ? maskEmail(row.email) : row.email
-
-  return h('div', { class: 'mask-row' }, [
-    h('div', { class: 'mask-row__main' }, [
-      h('div', { class: 'mask-row__title' }, [
-        h('span', { class: 'mask-row__name' }, row.name),
-        h('span', { class: 'mask-row__id' }, row.id),
-      ]),
-      h('div', { class: 'mask-row__kv' }, [
-        h('span', { class: 'mask-row__k' }, '手机号'),
-        h('span', { class: 'mask-row__v' }, phoneText),
-      ]),
-      h('div', { class: 'mask-row__kv' }, [
-        h('span', { class: 'mask-row__k' }, '邮箱'),
-        h('span', { class: 'mask-row__v' }, emailText),
-      ]),
-    ]),
-  ])
-}
-</script>
-
-<style scoped>
-.table-panel-mask-demo {
-  position: relative;
-  width: 100%;
-  height: 500px;
-}
-
-.mask-row {
-  padding: 12px 16px;
-  border: 1px solid var(--j-color-border);
-  border-radius: 6px;
-  background: var(--j-color-bg-container);
-}
-
-.mask-row + .mask-row {
-  margin-top: 10px;
-}
-
-.mask-row__title {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  margin-bottom: 8px;
-  gap: 12px;
-}
-
-.mask-row__name {
-  font-weight: 600;
-  color: var(--j-color-text);
-}
-
-.mask-row__id {
-  font-size: 12px;
-  color: var(--j-color-text-3);
-}
-
-.mask-row__kv {
-  display: flex;
-  gap: 10px;
-  line-height: 20px;
-}
-
-.mask-row__k {
-  width: 48px;
-  flex: 0 0 auto;
-  color: var(--j-color-text-2);
-  font-size: 12px;
-}
-
-.mask-row__v {
-  color: var(--j-color-text);
-  font-size: 12px;
-}
-</style>
+<template>
+  <div class="table-panel-mask-demo">
+    <j-table-panel
+      row-key="id"
+      :columns="columns"
+      :load-data="loadData"
+      :buttons="buttons"
+      :render-v-node="renderVNode"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const isMasked = ref(true)
+
+const columns = ref([
+  {
+    id: 'id',
+    type: '',
+    config: { label: 'ID', width: 120 },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '姓名',
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'phone',
+    type: '',
+    config: { label: '手机号' },
+  },
+  {
+    id: 'email',
+    type: '',
+    config: { label: '邮箱' },
+  },
+])
+
+const buttons = ref([
+  {
+    label: '切换掩码',
+    icon: 'mdi:eye',
+    click: () => {
+      isMasked.value = !isMasked.value
+    },
+  },
+])
+
+const data = [
+  { id: 'U-1001', name: '张三', phone: '13812345678', email: 'zhangsan@example.com' },
+  { id: 'U-1002', name: '李四', phone: '18698765432', email: 'lisi@example.com' },
+  { id: 'U-1003', name: '王五', phone: '15900001111', email: 'wangwu@example.com' },
+]
+
+const loadData = async () => data
+
+const maskPhone = (value?: string) => {
+  if (!value) return ''
+  if (value.length <= 7) return value
+  return `${value.slice(0, 3)}****${value.slice(-4)}`
+}
+
+const maskEmail = (value?: string) => {
+  if (!value) return ''
+  const at = value.indexOf('@')
+  if (at <= 1) return value
+  return `${value.slice(0, 1)}****${value.slice(at)}`
+}
+
+const renderVNode = (row: Record<string, any>) => {
+  const phoneText = isMasked.value ? maskPhone(row.phone) : row.phone
+  const emailText = isMasked.value ? maskEmail(row.email) : row.email
+
+  return h('div', { class: 'mask-row' }, [
+    h('div', { class: 'mask-row__main' }, [
+      h('div', { class: 'mask-row__title' }, [
+        h('span', { class: 'mask-row__name' }, row.name),
+        h('span', { class: 'mask-row__id' }, row.id),
+      ]),
+      h('div', { class: 'mask-row__kv' }, [
+        h('span', { class: 'mask-row__k' }, '手机号'),
+        h('span', { class: 'mask-row__v' }, phoneText),
+      ]),
+      h('div', { class: 'mask-row__kv' }, [
+        h('span', { class: 'mask-row__k' }, '邮箱'),
+        h('span', { class: 'mask-row__v' }, emailText),
+      ]),
+    ]),
+  ])
+}
+</script>
+
+<style scoped>
+.table-panel-mask-demo {
+  position: relative;
+  width: 100%;
+  height: 500px;
+}
+
+.mask-row {
+  padding: 12px 16px;
+  border: 1px solid var(--j-color-border);
+  border-radius: 6px;
+  background: var(--j-color-bg-container);
+}
+
+.mask-row + .mask-row {
+  margin-top: 10px;
+}
+
+.mask-row__title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  gap: 12px;
+}
+
+.mask-row__name {
+  font-weight: 600;
+  color: var(--j-color-text);
+}
+
+.mask-row__id {
+  font-size: 12px;
+  color: var(--j-color-text-3);
+}
+
+.mask-row__kv {
+  display: flex;
+  gap: 10px;
+  line-height: 20px;
+}
+
+.mask-row__k {
+  width: 48px;
+  flex: 0 0 auto;
+  color: var(--j-color-text-2);
+  font-size: 12px;
+}
+
+.mask-row__v {
+  color: var(--j-color-text);
+  font-size: 12px;
+}
+</style>