@a2simcode/ui 0.0.257 → 0.0.259

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>

package/docs/examples/table-panel/model-value.vue

@@ -1,87 +1,87 @@
-<template>
-  <div>
-    <div style="margin-bottom: 12px">
-      <el-button type="primary" @click="refreshData">刷新数据</el-button>
-      <el-button @click="addRecord">新增一条记录</el-button>
-      <el-button @click="clearData">清空数据</el-button>
-      <span style="margin-left: 12px; color: #999">当前数据条数: {{ tableData.length }}</span>
-    </div>
-    <div style="position: relative; width: 100%; height: 400px">
-      <j-table-panel v-model="tableData" row-key="id" :columns="columns" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'id',
-    type: '',
-    config: {
-      label: 'ID',
-      width: 80,
-    },
-  },
-  {
-    id: 'name',
-    type: '',
-    config: {
-      label: '姓名',
-      width: 120,
-    },
-  },
-  {
-    id: 'department',
-    type: '',
-    config: {
-      label: '部门',
-      width: 120,
-    },
-  },
-  {
-    id: 'position',
-    type: '',
-    config: {
-      label: '职位',
-    },
-  },
-])
-
-let nextId = 6
-
-const initialData = [
-  { id: 1, name: '张三', department: '技术部', position: '前端工程师' },
-  { id: 2, name: '李四', department: '产品部', position: '产品经理' },
-  { id: 3, name: '王五', department: '设计部', position: 'UI设计师' },
-  { id: 4, name: '赵六', department: '技术部', position: '后端工程师' },
-  { id: 5, name: '孙七', department: '运营部', position: '运营专员' },
-]
-
-const tableData = ref<Record<string, any>[]>([...initialData])
-
-const refreshData = () => {
-  // 重新赋值触发 modelValue 变化 -> 自动刷新表格
-  tableData.value = [...initialData]
-  nextId = 6
-}
-
-const addRecord = () => {
-  const departments = ['技术部', '产品部', '设计部', '运营部']
-  const positions = ['工程师', '经理', '专员', '实习生']
-  tableData.value = [
-    ...tableData.value,
-    {
-      id: nextId++,
-      name: `员工${nextId - 1}`,
-      department: departments[Math.floor(Math.random() * departments.length)],
-      position: positions[Math.floor(Math.random() * positions.length)],
-    },
-  ]
-}
-
-const clearData = () => {
-  tableData.value = []
-}
-</script>
+<template>
+  <div>
+    <div style="margin-bottom: 12px">
+      <el-button type="primary" @click="refreshData">刷新数据</el-button>
+      <el-button @click="addRecord">新增一条记录</el-button>
+      <el-button @click="clearData">清空数据</el-button>
+      <span style="margin-left: 12px; color: #999">当前数据条数: {{ tableData.length }}</span>
+    </div>
+    <div style="position: relative; width: 100%; height: 400px">
+      <j-table-panel v-model="tableData" row-key="id" :columns="columns" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '姓名',
+      width: 120,
+    },
+  },
+  {
+    id: 'department',
+    type: '',
+    config: {
+      label: '部门',
+      width: 120,
+    },
+  },
+  {
+    id: 'position',
+    type: '',
+    config: {
+      label: '职位',
+    },
+  },
+])
+
+let nextId = 6
+
+const initialData = [
+  { id: 1, name: '张三', department: '技术部', position: '前端工程师' },
+  { id: 2, name: '李四', department: '产品部', position: '产品经理' },
+  { id: 3, name: '王五', department: '设计部', position: 'UI设计师' },
+  { id: 4, name: '赵六', department: '技术部', position: '后端工程师' },
+  { id: 5, name: '孙七', department: '运营部', position: '运营专员' },
+]
+
+const tableData = ref<Record<string, any>[]>([...initialData])
+
+const refreshData = () => {
+  // 重新赋值触发 modelValue 变化 -> 自动刷新表格
+  tableData.value = [...initialData]
+  nextId = 6
+}
+
+const addRecord = () => {
+  const departments = ['技术部', '产品部', '设计部', '运营部']
+  const positions = ['工程师', '经理', '专员', '实习生']
+  tableData.value = [
+    ...tableData.value,
+    {
+      id: nextId++,
+      name: `员工${nextId - 1}`,
+      department: departments[Math.floor(Math.random() * departments.length)],
+      position: positions[Math.floor(Math.random() * positions.length)],
+    },
+  ]
+}
+
+const clearData = () => {
+  tableData.value = []
+}
+</script>