@a2simcode/ui 0.0.257 → 0.0.259

package/docs/examples/table-panel/sub-table-lazy.vue

@@ -1,118 +1,118 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table-panel
-      :columns="columns"
-      :load-data="loadData"
-      :sub-columns="subColumns"
-      :load-children="loadChildren"
-      row-key="id"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { ColumnSchemaConfig } from '@a2simcode/ui'
-import * as VTable from '@visactor/vtable'
-
-VTable.register.icon('loading', {
-  type: 'image',
-  width: 16,
-  height: 16,
-  src: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/loading-circle.gif',
-  name: 'loading',
-  positionType: VTable.TYPES.IconPosition.contentLeft,
-  marginLeft: 0,
-  marginRight: 4,
-  visibleTime: 'always',
-  hover: {
-    width: 22,
-    height: 22,
-    bgColor: 'rgba(101,117,168,0.1)',
-  },
-  isGif: true,
-})
-const columns: ColumnSchemaConfig[] = [
-  {
-    id: 'id',
-    type: '',
-    config: {
-      align: 'center',
-      label: 'ID',
-      width: 100,
-    },
-  },
-  {
-    id: 'name',
-    type: '',
-    config: {
-      label: '名称',
-      width: 200,
-    },
-  },
-  {
-    id: 'value',
-    type: 'j-switch',
-    config: {
-      label: '值',
-      width: 100,
-      align: 'center',
-      activeValue: 1,
-      inactiveValue: 0,
-    },
-  },
-]
-
-const subColumns: ColumnSchemaConfig[] = [
-  {
-    id: 'id',
-    type: '',
-    config: {
-      label: '子ID',
-      width: 100,
-    },
-  },
-  {
-    id: 'name',
-    type: '',
-    config: {
-      label: '子名称',
-      width: 200,
-    },
-  },
-  {
-    id: 'value',
-    type: '',
-    config: {
-      label: '子值',
-      width: 100,
-    },
-  },
-]
-
-const loadData = async (params: Record<string, any>) => {
-  console.log('Loading main table data with params:', params)
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const data = [
-        { id: '1', name: 'Parent 1', value: 1, children: true },
-        { id: '2', name: 'Parent 2', value: 0, children: true },
-      ]
-      resolve(data)
-    }, 500)
-  })
-}
-
-const loadChildren = async (record: Record<string, any>): Promise<any[]> => {
-  console.log('Loading children for record:', record)
-  // 模拟异步加载数据
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const children = [
-        { id: record.id + '-1', name: record.name + ' Child 1', value: Math.random() * 100 },
-        { id: record.id + '-2', name: record.name + ' Child 2', value: Math.random() * 100 },
-      ]
-      resolve(children)
-    }, 1000)
-  })
-}
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      :columns="columns"
+      :load-data="loadData"
+      :sub-columns="subColumns"
+      :load-children="loadChildren"
+      row-key="id"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ColumnSchemaConfig } from '@a2simcode/ui'
+import * as VTable from '@visactor/vtable'
+
+VTable.register.icon('loading', {
+  type: 'image',
+  width: 16,
+  height: 16,
+  src: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/loading-circle.gif',
+  name: 'loading',
+  positionType: VTable.TYPES.IconPosition.contentLeft,
+  marginLeft: 0,
+  marginRight: 4,
+  visibleTime: 'always',
+  hover: {
+    width: 22,
+    height: 22,
+    bgColor: 'rgba(101,117,168,0.1)',
+  },
+  isGif: true,
+})
+const columns: ColumnSchemaConfig[] = [
+  {
+    id: 'id',
+    type: '',
+    config: {
+      align: 'center',
+      label: 'ID',
+      width: 100,
+    },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      width: 200,
+    },
+  },
+  {
+    id: 'value',
+    type: 'j-switch',
+    config: {
+      label: '值',
+      width: 100,
+      align: 'center',
+      activeValue: 1,
+      inactiveValue: 0,
+    },
+  },
+]
+
+const subColumns: ColumnSchemaConfig[] = [
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: '子ID',
+      width: 100,
+    },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '子名称',
+      width: 200,
+    },
+  },
+  {
+    id: 'value',
+    type: '',
+    config: {
+      label: '子值',
+      width: 100,
+    },
+  },
+]
+
+const loadData = async (params: Record<string, any>) => {
+  console.log('Loading main table data with params:', params)
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const data = [
+        { id: '1', name: 'Parent 1', value: 1, children: true },
+        { id: '2', name: 'Parent 2', value: 0, children: true },
+      ]
+      resolve(data)
+    }, 500)
+  })
+}
+
+const loadChildren = async (record: Record<string, any>): Promise<any[]> => {
+  console.log('Loading children for record:', record)
+  // 模拟异步加载数据
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const children = [
+        { id: record.id + '-1', name: record.name + ' Child 1', value: Math.random() * 100 },
+        { id: record.id + '-2', name: record.name + ' Child 2', value: Math.random() * 100 },
+      ]
+      resolve(children)
+    }, 1000)
+  })
+}
+</script>

package/docs/examples/table-panel/tree-parent-key.vue

@@ -1,67 +1,67 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table-panel
-      row-key="id"
-      :columns="columns"
-      :load-data="loadData"
-      :is-tree="true"
-      is-multiple
-      parent-key="pid"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'name',
-    type: '',
-    config: {
-      label: '名称',
-      width: 240,
-    },
-  },
-  {
-    id: 'id',
-    type: '',
-    config: {
-      label: 'ID',
-      width: 160,
-    },
-  },
-  {
-    id: 'pid',
-    type: '',
-    config: {
-      label: '父ID',
-      width: 160,
-    },
-  },
-  {
-    id: 'value',
-    type: '',
-    config: {
-      label: '值',
-      width: 120,
-      align: 'right',
-    },
-  },
-])
-
-const flatData = [
-  { id: '1', pid: '', name: '父节点 1', value: 10 },
-  { id: '1-1', pid: '1', name: '子节点 1-1', value: 11 },
-  { id: '1-2', pid: '1', name: '子节点 1-2', value: 12 },
-  { id: '1-2-1', pid: '1-2', name: '子节点 1-2-1', value: 121 },
-  { id: '2', pid: '', name: '父节点 2', value: 20 },
-  { id: '2-1', pid: '2', name: '子节点 2-1', value: 21 },
-]
-
-const loadData = async (_params: Record<string, any>) => {
-  return new Promise((resolve) => {
-    setTimeout(() => resolve(flatData), 200)
-  })
-}
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      row-key="id"
+      :columns="columns"
+      :load-data="loadData"
+      :is-tree="true"
+      is-multiple
+      parent-key="pid"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      width: 240,
+    },
+  },
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: 'ID',
+      width: 160,
+    },
+  },
+  {
+    id: 'pid',
+    type: '',
+    config: {
+      label: '父ID',
+      width: 160,
+    },
+  },
+  {
+    id: 'value',
+    type: '',
+    config: {
+      label: '值',
+      width: 120,
+      align: 'right',
+    },
+  },
+])
+
+const flatData = [
+  { id: '1', pid: '', name: '父节点 1', value: 10 },
+  { id: '1-1', pid: '1', name: '子节点 1-1', value: 11 },
+  { id: '1-2', pid: '1', name: '子节点 1-2', value: 12 },
+  { id: '1-2-1', pid: '1-2', name: '子节点 1-2-1', value: 121 },
+  { id: '2', pid: '', name: '父节点 2', value: 20 },
+  { id: '2-1', pid: '2', name: '子节点 2-1', value: 21 },
+]
+
+const loadData = async (_params: Record<string, any>) => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(flatData), 200)
+  })
+}
+</script>

package/docs/examples/tabs/basic.vue

@@ -1,98 +1,98 @@
-<template>
-  <div class="tabs-demo">
-    <div class="demo-item">
-      <p>基础用法</p>
-      <j-tabs v-model="activeName1">
-        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-      </j-tabs>
-    </div>
-
-    <div class="demo-item">
-      <p>卡片风格</p>
-      <j-tabs v-model="activeName2" type="card">
-        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-      </j-tabs>
-    </div>
-
-    <div class="demo-item">
-      <p>边框卡片风格</p>
-      <j-tabs v-model="activeName3" type="border-card">
-        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-      </j-tabs>
-    </div>
-
-    <div class="demo-item" style="height: 300px">
-      <p>标签位置</p>
-      <div class="j-block" style="height: 0; flex: 1">
-        <j-tabs v-model="activeName4" tab-position="left">
-          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-        </j-tabs>
-      </div>
-    </div>
-
-    <div class="demo-item">
-      <p>可关闭标签</p>
-      <j-tabs v-model="activeName5" type="card" closable>
-        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-      </j-tabs>
-    </div>
-
-    <div class="demo-item">
-      <p>可增加标签</p>
-      <j-tabs v-model="activeName6" type="card" addable>
-        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-      </j-tabs>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const activeName1 = ref('first')
-const activeName2 = ref('first')
-const activeName3 = ref('first')
-const activeName4 = ref('first')
-const activeName5 = ref('first')
-const activeName6 = ref('first')
-</script>
-
-<style scoped>
-.tabs-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.demo-item p {
-  margin: 0 0 12px;
-  font-size: 14px;
-  color: var(--j-color-text-2);
-  font-weight: 500;
-}
-
-.demo-item {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-</style>
+<template>
+  <div class="tabs-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-tabs v-model="activeName1">
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item">
+      <p>卡片风格</p>
+      <j-tabs v-model="activeName2" type="card">
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item">
+      <p>边框卡片风格</p>
+      <j-tabs v-model="activeName3" type="border-card">
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item" style="height: 300px">
+      <p>标签位置</p>
+      <div class="j-block" style="height: 0; flex: 1">
+        <j-tabs v-model="activeName4" tab-position="left">
+          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+        </j-tabs>
+      </div>
+    </div>
+
+    <div class="demo-item">
+      <p>可关闭标签</p>
+      <j-tabs v-model="activeName5" type="card" closable>
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item">
+      <p>可增加标签</p>
+      <j-tabs v-model="activeName6" type="card" addable>
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeName1 = ref('first')
+const activeName2 = ref('first')
+const activeName3 = ref('first')
+const activeName4 = ref('first')
+const activeName5 = ref('first')
+const activeName6 = ref('first')
+</script>
+
+<style scoped>
+.tabs-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.demo-item p {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+
+.demo-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>