@a2simcode/ui 0.0.186 → 0.0.187

package/docs/examples/input-layer/basic.vue

@@ -1,86 +1,86 @@
-<template>
-  <div style="width: 300px">
-    <j-input-layer
-      v-model="value"
-      placeholder="请选择用户"
-      :columns="columns"
-      :load-layer-data="loadData"
-      :width="800"
-      :height="500"
-      value-key="id"
-      label-key="name"
-      @change="handleChange"
-    />
-    <div style="margin-top: 10px">选中值: {{ value }}</div>
-
-    <j-input-layer
-      v-model="value"
-      :columns="columns"
-      :load-layer-data="loadData"
-      :width="800"
-      :height="500"
-      value-key="id"
-      label-key="name"
-      @change="handleChange"
-      :only-button="true"
-      :button-label="'选择用户'"
-      :button-ghost="true"
-      button-type="primary"
-      button-shape="round"
-    />
-    <div style="margin-top: 10px">选中值: {{ value }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-const handleChange = (data) => {
-  console.log(data, 'data')
-}
-
-const columns = [
-  {
-    id: 'id',
-    config: {
-      label: 'ID',
-      width: 80,
-    },
-  },
-  {
-    id: 'name',
-    config: {
-      label: '姓名',
-      width: 120,
-    },
-  },
-  {
-    id: 'age',
-    config: {
-      label: '年龄',
-      width: 80,
-    },
-  },
-  {
-    id: 'email',
-    config: {
-      label: '邮箱',
-    },
-  },
-]
-
-const loadData = async () => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve([
-        { id: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
-        { id: '2', name: '李四', age: 30, email: 'lisi@example.com' },
-        { id: '3', name: '王五', age: 28, email: 'wangwu@example.com' },
-        { id: '4', name: '赵六', age: 35, email: 'zhaoliu@example.com' },
-        { id: '5', name: '孙七', age: 22, email: 'sunqi@example.com' },
-      ])
-    }, 500)
-  })
-}
-</script>
+<template>
+  <div style="width: 300px">
+    <j-input-layer
+      v-model="value"
+      placeholder="请选择用户"
+      :columns="columns"
+      :load-layer-data="loadData"
+      :width="800"
+      :height="500"
+      value-key="id"
+      label-key="name"
+      @change="handleChange"
+    />
+    <div style="margin-top: 10px">选中值: {{ value }}</div>
+
+    <j-input-layer
+      v-model="value"
+      :columns="columns"
+      :load-layer-data="loadData"
+      :width="800"
+      :height="500"
+      value-key="id"
+      label-key="name"
+      @change="handleChange"
+      :only-button="true"
+      :button-label="'选择用户'"
+      :button-ghost="true"
+      button-type="primary"
+      button-shape="round"
+    />
+    <div style="margin-top: 10px">选中值: {{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const handleChange = (data) => {
+  console.log(data, 'data')
+}
+
+const columns = [
+  {
+    id: 'id',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'name',
+    config: {
+      label: '姓名',
+      width: 120,
+    },
+  },
+  {
+    id: 'age',
+    config: {
+      label: '年龄',
+      width: 80,
+    },
+  },
+  {
+    id: 'email',
+    config: {
+      label: '邮箱',
+    },
+  },
+]
+
+const loadData = async () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        { id: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
+        { id: '2', name: '李四', age: 30, email: 'lisi@example.com' },
+        { id: '3', name: '王五', age: 28, email: 'wangwu@example.com' },
+        { id: '4', name: '赵六', age: 35, email: 'zhaoliu@example.com' },
+        { id: '5', name: '孙七', age: 22, email: 'sunqi@example.com' },
+      ])
+    }, 500)
+  })
+}
+</script>

package/docs/examples/input-layer/render-vnode-page.vue

@@ -0,0 +1,160 @@
+<template>
+  <div style="width: 420px">
+    <j-input-layer
+      ref="inputLayerRef"
+      v-model="value"
+      placeholder="请选择用户（卡片渲染 + 分页）"
+      :columns="columns"
+      :load-layer-data="loadData"
+      :width="800"
+      :height="500"
+      value-key="id"
+      label-key="name"
+      :is-page="true"
+      :is-multi-select="true"
+      :render-v-node="renderVNode"
+      @change="handleChange"
+    />
+    <div style="margin-top: 10px">选中值: {{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+type UserRow = {
+  id: string
+  name: string
+  age: number
+  email: string
+}
+
+const value = ref('')
+const selectedIds = ref<string[]>([])
+const inputLayerRef = ref<any>()
+
+const handleChange = (payload: any) => {
+  const rows = Array.isArray(payload?.data) ? payload.data : []
+  selectedIds.value = rows.map((row: any) => String(row?.id ?? ''))
+  console.log(payload, 'data')
+}
+
+const columns = [
+  {
+    id: 'id',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'name',
+    config: {
+      label: '姓名',
+      width: 120,
+    },
+  },
+  {
+    id: 'age',
+    config: {
+      label: '年龄',
+      width: 80,
+    },
+  },
+  {
+    id: 'email',
+    config: {
+      label: '邮箱',
+    },
+  },
+]
+
+const allUsers: UserRow[] = Array.from({ length: 223 }).map((_, index) => {
+  const num = index + 1
+  return {
+    id: String(num),
+    name: `用户${num}`,
+    age: 18 + (num % 20),
+    email: `user${num}@example.com`,
+  }
+})
+
+const loadData = async (params: any) => {
+  const pageSize = Number(params?.pagination?.rows ?? 10)
+  const page = Number(params?.pagination?.page ?? 1)
+  const startIndex = Math.max(0, (page - 1) * pageSize)
+
+  return {
+    rows: allUsers.slice(startIndex, startIndex + pageSize),
+    records: allUsers.length,
+  }
+}
+
+const toggleSelection = (row: UserRow, evt: MouseEvent) => {
+  evt.stopPropagation()
+
+  const tablePanelRef = inputLayerRef.value?.getTablePanelRef?.()
+  const currentSelection = (tablePanelRef?.getSelection?.() || []) as UserRow[]
+  const id = String(row?.id ?? '')
+
+  const exists = currentSelection.some((r) => String(r?.id ?? '') === id)
+  const nextSelection = exists
+    ? currentSelection.filter((r) => String(r?.id ?? '') !== id)
+    : [...currentSelection, row]
+
+  tablePanelRef?.setSelection?.(nextSelection)
+  selectedIds.value = nextSelection.map((r) => String(r?.id ?? ''))
+}
+
+const renderVNode = (row: Record<string, any>) => {
+  const id = String(row.id ?? '')
+  const isActive = selectedIds.value.includes(id)
+
+  return h(
+    'div',
+    {
+      class: ['input-layer-card', isActive ? 'is-active' : ''],
+      onClick: (evt: MouseEvent) => toggleSelection(row as UserRow, evt),
+    },
+    [
+      h('div', { class: 'input-layer-card__title' }, [h('span', row.name), h('span', row.id)]),
+      h('div', { class: 'input-layer-card__meta' }, `年龄：${row.age}`),
+      h('div', { class: 'input-layer-card__meta' }, `邮箱：${row.email}`),
+    ]
+  )
+}
+</script>
+
+<style scoped>
+.input-layer-card {
+  padding: 12px 14px;
+  border: 1px solid var(--j-color-border);
+  border-radius: 6px;
+  background: var(--j-color-bg-container);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.input-layer-card + .input-layer-card {
+  margin-top: 10px;
+}
+
+.input-layer-card.is-active {
+  border-color: var(--j-color-primary);
+}
+
+.input-layer-card__title {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 6px;
+  color: var(--j-color-text);
+  font-weight: 600;
+}
+
+.input-layer-card__meta {
+  line-height: 20px;
+  font-size: 12px;
+  color: var(--j-color-text-2);
+}
+</style>

package/docs/examples/input-layer/render-vnode.vue

@@ -1,127 +1,127 @@
-<template>
-  <div style="width: 420px">
-    <j-input-layer
-      ref="inputLayerRef"
-      v-model="value"
-      placeholder="请选择用户（卡片渲染）"
-      :columns="columns"
-      :load-layer-data="loadData"
-      :width="800"
-      :height="500"
-      value-key="id"
-      label-key="name"
-      :render-v-node="renderVNode"
-      @change="handleChange"
-    />
-    <div style="margin-top: 10px">选中值: {{ value }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, h } from 'vue'
-
-const value = ref('')
-const selectedId = ref<string>('')
-const inputLayerRef = ref<any>()
-
-const handleChange = (data: any) => {
-  console.log(data, 'data')
-}
-
-const columns = [
-  {
-    id: 'id',
-    config: {
-      label: 'ID',
-      width: 80,
-    },
-  },
-  {
-    id: 'name',
-    config: {
-      label: '姓名',
-      width: 120,
-    },
-  },
-  {
-    id: 'age',
-    config: {
-      label: '年龄',
-      width: 80,
-    },
-  },
-  {
-    id: 'email',
-    config: {
-      label: '邮箱',
-    },
-  },
-]
-
-const loadData = async () => {
-  return [
-    { id: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
-    { id: '2', name: '李四', age: 30, email: 'lisi@example.com' },
-    { id: '3', name: '王五', age: 28, email: 'wangwu@example.com' },
-    { id: '4', name: '赵六', age: 35, email: 'zhaoliu@example.com' },
-    { id: '5', name: '孙七', age: 22, email: 'sunqi@example.com' },
-  ]
-}
-
-const setSelection = (row: Record<string, any>) => {
-  selectedId.value = String(row.id ?? '')
-  const tablePanelRef = inputLayerRef.value?.getTablePanelRef?.()
-  tablePanelRef?.setSelection?.([row])
-}
-
-const renderVNode = (row: Record<string, any>) => {
-  const isActive = selectedId.value === String(row.id ?? '')
-
-  return h(
-    'div',
-    {
-      class: ['input-layer-card', isActive ? 'is-active' : ''],
-      onClick: () => setSelection(row),
-    },
-    [
-      h('div', { class: 'input-layer-card__title' }, [h('span', row.name), h('span', row.id)]),
-      h('div', { class: 'input-layer-card__meta' }, `年龄：${row.age}`),
-      h('div', { class: 'input-layer-card__meta' }, `邮箱：${row.email}`),
-    ]
-  )
-}
-</script>
-
-<style scoped>
-.input-layer-card {
-  padding: 12px 14px;
-  border: 1px solid var(--j-color-border);
-  border-radius: 6px;
-  background: var(--j-color-bg-container);
-  cursor: pointer;
-  transition: border-color 0.15s ease;
-}
-
-.input-layer-card + .input-layer-card {
-  margin-top: 10px;
-}
-
-.input-layer-card.is-active {
-  border-color: var(--j-color-primary);
-}
-
-.input-layer-card__title {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 6px;
-  color: var(--j-color-text);
-  font-weight: 600;
-}
-
-.input-layer-card__meta {
-  line-height: 20px;
-  font-size: 12px;
-  color: var(--j-color-text-2);
-}
-</style>
+<template>
+  <div style="width: 420px">
+    <j-input-layer
+      ref="inputLayerRef"
+      v-model="value"
+      placeholder="请选择用户（卡片渲染）"
+      :columns="columns"
+      :load-layer-data="loadData"
+      :width="800"
+      :height="500"
+      value-key="id"
+      label-key="name"
+      :render-v-node="renderVNode"
+      @change="handleChange"
+    />
+    <div style="margin-top: 10px">选中值: {{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const value = ref('')
+const selectedId = ref<string>('')
+const inputLayerRef = ref<any>()
+
+const handleChange = (data: any) => {
+  console.log(data, 'data')
+}
+
+const columns = [
+  {
+    id: 'id',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'name',
+    config: {
+      label: '姓名',
+      width: 120,
+    },
+  },
+  {
+    id: 'age',
+    config: {
+      label: '年龄',
+      width: 80,
+    },
+  },
+  {
+    id: 'email',
+    config: {
+      label: '邮箱',
+    },
+  },
+]
+
+const loadData = async () => {
+  return [
+    { id: '1', name: '张三', age: 25, email: 'zhangsan@example.com' },
+    { id: '2', name: '李四', age: 30, email: 'lisi@example.com' },
+    { id: '3', name: '王五', age: 28, email: 'wangwu@example.com' },
+    { id: '4', name: '赵六', age: 35, email: 'zhaoliu@example.com' },
+    { id: '5', name: '孙七', age: 22, email: 'sunqi@example.com' },
+  ]
+}
+
+const setSelection = (row: Record<string, any>) => {
+  selectedId.value = String(row.id ?? '')
+  const tablePanelRef = inputLayerRef.value?.getTablePanelRef?.()
+  tablePanelRef?.setSelection?.([row])
+}
+
+const renderVNode = (row: Record<string, any>) => {
+  const isActive = selectedId.value === String(row.id ?? '')
+
+  return h(
+    'div',
+    {
+      class: ['input-layer-card', isActive ? 'is-active' : ''],
+      onClick: () => setSelection(row),
+    },
+    [
+      h('div', { class: 'input-layer-card__title' }, [h('span', row.name), h('span', row.id)]),
+      h('div', { class: 'input-layer-card__meta' }, `年龄：${row.age}`),
+      h('div', { class: 'input-layer-card__meta' }, `邮箱：${row.email}`),
+    ]
+  )
+}
+</script>
+
+<style scoped>
+.input-layer-card {
+  padding: 12px 14px;
+  border: 1px solid var(--j-color-border);
+  border-radius: 6px;
+  background: var(--j-color-bg-container);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.input-layer-card + .input-layer-card {
+  margin-top: 10px;
+}
+
+.input-layer-card.is-active {
+  border-color: var(--j-color-primary);
+}
+
+.input-layer-card__title {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 6px;
+  color: var(--j-color-text);
+  font-weight: 600;
+}
+
+.input-layer-card__meta {
+  line-height: 20px;
+  font-size: 12px;
+  color: var(--j-color-text-2);
+}
+</style>