@cst-ui/nano-buttons 0.2.3 → 0.3.1

package/README.md

@@ -1,244 +1,292 @@
-# @cst-ui/nano-buttons
-
-Nano 项目主题按钮组件库，基于 Vue 3 和 Element Plus 封装。
-
-这个包用于统一提供 Nano 系列按钮组件，并通过子入口提供弹窗标签页化的公共能力。模板中统一使用横线法组件名，例如 `<nano-button>`，不再保留旧命名。
-
-## 入口说明
-
-包内能力按子入口拆分，按钮和弹窗标签页可以分开引入：
-
-```ts
-// 兼容旧按钮入口
-import NanoButtons from '@cst-ui/nano-buttons'
-
-// 明确的按钮入口
-import NanoButtons from '@cst-ui/nano-buttons/buttons'
-
+# @cst-ui/nano-buttons
+
+Nano 项目公共前端组件库，基于 Vue 3 和 Element Plus 封装。
+
+这个包用于统一提供 Nano 系列按钮、表格、分页组件，并通过子入口提供弹窗标签页化的公共能力。模板中统一使用横线法组件名，例如 `<nano-button>`，不再保留旧命名。
+
+## 入口说明
+
+包内能力按子入口拆分，按钮、表格和弹窗标签页可以分开引入：
+
+```ts
+// 兼容旧按钮入口
+import NanoButtons from '@cst-ui/nano-buttons'
+
+// 明确的按钮入口
+import NanoButtons from '@cst-ui/nano-buttons/buttons'
+
 // 弹窗标签页入口
 import { createNanoDialogTabs } from '@cst-ui/nano-buttons/dialog-tabs'
-```
-
-## 在线文档
-
-组件效果、安装方式、使用示例和 API 说明见在线文档：
-
-https://nano-buttons-docs.netlify.app/
-
-## 安装
-
-```bash
-pnpm add @cst-ui/nano-buttons
-```
-
-## 全局注册
-
-在应用入口文件中注册组件并引入样式：
-
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import NanoButtons from '@cst-ui/nano-buttons'
-import '@cst-ui/nano-buttons/style.css'
-
-const app = createApp(App)
-
-app.use(NanoButtons)
-app.mount('#app')
-```
 
+// 表格与分页入口
+import { CstTable, CstPagination } from '@cst-ui/nano-buttons/table'
+```
+
+## 在线文档
+
+组件效果、安装方式、使用示例和 API 说明见在线文档：
+
+https://nano-buttons-docs.netlify.app/
+
+## 安装
+
+```bash
+pnpm add @cst-ui/nano-buttons
+```
+
+## 全局注册
+
+在应用入口文件中注册组件并引入样式：
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import NanoButtons from '@cst-ui/nano-buttons'
+import '@cst-ui/nano-buttons/style.css'
+
+const app = createApp(App)
+
+app.use(NanoButtons)
+app.mount('#app')
+```
+
 按钮插件也提供明确的平级子入口，旧入口继续兼容：
-
-```ts
+
+```ts
 import NanoButtons from '@cst-ui/nano-buttons/buttons'
 ```
 
-## 组件列表
+表格模块使用独立入口，可以按需引入组件或全局安装：
 
-模板中统一使用横线法：
+```ts
+import CstTableComponents from '@cst-ui/nano-buttons/table'
 
-```vue
-<nano-button />
-<nano-add-button />
-<nano-text-add-button />
-<nano-move-button />
-<nano-import-button />
-<nano-export-button />
-<nano-edit-button />
-<nano-manage-button />
-<nano-delete-button />
-<nano-submit-button />
-<nano-cancel-button />
+app.use(CstTableComponents)
+```
+
+## 组件列表
+
+模板中统一使用横线法：
+
+```vue
+<nano-button />
+<nano-add-button />
+<nano-text-add-button />
+<nano-move-button />
+<nano-import-button />
+<nano-export-button />
+<nano-edit-button />
+<nano-manage-button />
+<nano-delete-button />
+<nano-submit-button />
+<nano-cancel-button />
 <nano-back-top-button />
+<cst-table />
+<cst-pagination />
+```
+
+## 使用示例
+
+固定语义按钮直接使用对应组件：
+
+```vue
+<nano-add-button />
+<nano-import-button />
+<nano-export-button />
+<nano-delete-button />
+<nano-submit-button>保存</nano-submit-button>
+<nano-cancel-button>取消</nano-cancel-button>
+```
+
+不在固定语义里的普通按钮，统一使用 `<nano-button>`：
+
+```vue
+<nano-button icon="Refresh">刷新</nano-button>
+<nano-import-button>导入</nano-import-button>
+<nano-export-button :loading="exporting">导出</nano-export-button>
 ```
 
-## 使用示例
+## 表格与分页
 
-固定语义按钮直接使用对应组件：
+`CstPagination` 是独立分页组件，只负责展示分页状态和发送变更事件，不请求接口、不处理业务数据。默认显示总数、每页条数、页码和前往指定页；服务端分页页面可以直接接入现有查询方法：
 
 ```vue
-<nano-add-button />
-<nano-import-button />
-<nano-export-button />
-<nano-delete-button />
-<nano-submit-button>保存</nano-submit-button>
-<nano-cancel-button>取消</nano-cancel-button>
+<CstPagination
+  :current-page="page.currentPage"
+  :page-size="page.pageSize"
+  :page-count="page.pageCount"
+  :page-sizes="page.pageSizes"
+  @update:current-page="onCurrentPageUpdate"
+  @update:page-size="onPageSizeUpdate"
+/>
 ```
 
-不在固定语义里的普通按钮，统一使用 `<nano-button>`：
+`CstTable` 组合了 Element Plus Table 和 `CstPagination`，默认对传入的完整数组做前端分页。列定义和其他表格属性继续按照 Element Plus Table 使用：
 
 ```vue
-<nano-button icon="Refresh">刷新</nano-button>
-<nano-import-button>导入</nano-import-button>
-<nano-export-button :loading="exporting">导出</nano-export-button>
+<CstTable
+  :data="rows"
+  :default-page-size="10"
+>
+  <el-table-column prop="name" label="名称" />
+  <el-table-column prop="status" label="状态" />
+</CstTable>
 ```
 
-## 依赖说明
-
-`vue`、`element-plus` 和 `vue-router` 是 peer dependencies，需要由使用方项目提供。
-
-## 弹窗标签页
-
-弹窗标签页能力用于把原本的弹窗按开关切换成系统 tab 页，同时保留原弹窗模式。公共包只负责打开模式、上下文缓存、保存结果通知、关闭回来源页和 `NanoDialogTabPage` 页面壳；业务项目负责注册页面、请求数据和保存业务。
-
-### 入口安装
-
-在应用入口安装插件：
-
-```ts
-import { createNanoDialogTabs } from '@cst-ui/nano-buttons/dialog-tabs'
-
-app.use(createNanoDialogTabs({
-  router,
-  parentRouteName: 'layout',
-  registry: dialogRegistry,
-  mode: () => DIALOG_OPEN_MODE,
-  translate: key => i18n.global.t(key),
-  tabAdapter: {
-    getTabs: () => tabStore.tabsOption,
-    getCurrentIndex: () => tabStore.currentIndex,
-    setCurrentIndex: index => tabStore.SET_TAB(index),
-    deleteTab: index => tabStore.DELETE_TAB(index),
-  },
-}))
-```
-
-### 注册页面
-
-在业务项目维护弹窗注册表：
-
-```ts
-export const dialogRegistry = {
-  userEdit: {
-    suffix: '/edit',
-    title: 'dialog.user.edit',
-    component: async () => await import('@/views/user/components/edit-page.vue'),
-    props: {
-      mode: 'edit',
-    },
-  },
-}
-```
-
-### 打开弹窗或 tab
-
-原页面统一使用 `openDialog`。开关为 `dialog` 时走 `openModal`，开关为 `tab` 时打开注册页面：
-
-```ts
-import { useDialogOpen } from '@cst-ui/nano-buttons/dialog-tabs'
-
-const { openDialog } = useDialogOpen()
-
-openDialog({
-  key: 'userEdit',
-  routeSuffix: `/edit/${row.id}`,
-  routePatternSuffix: '/edit/:id',
-  context: {
-    id: row.id,
-  },
-  openModal: () => {
-    data.showEdit = true
-  },
-})
-```
-
-### tab 页面
-
-tab 页面用 `NanoDialogTabPage` 统一标题、内容滚动、底部操作区和上下文失效兜底：
+只需要表格、不需要分页时关闭分页：
 
 ```vue
-<template>
-  <NanoDialogTabPage
-    :title-key="pageTitleKey"
-    :loading="loading"
-    :expired="expired"
-    @close="closeCurrentDialogTab"
-  >
-    <UserEditForm
-      :item="item"
-      variant="page"
-      @cancel="closeCurrentDialogTab"
-      @save-ok="onSaveOk"
-    />
-  </NanoDialogTabPage>
-</template>
-
-<script setup lang="ts">
-import { NanoDialogTabPage, useDialogPage } from '@cst-ui/nano-buttons/dialog-tabs'
-
-const {
-  route,
-  dialogContext,
-  closeCurrentDialogTab,
-  emitSavedAndClose,
-} = useDialogPage<{ id?: string }>('dialog.user.edit')
-
-const id = computed(() => dialogContext.value?.id ?? route.params.id)
-
-const onSaveOk = () => {
-  emitSavedAndClose('userEdit', { id: id.value })
-}
-</script>
-```
-
-### 保存后刷新来源页
-
-来源页可以监听保存结果并刷新列表：
-
-```ts
-import { onDialogResult } from '@cst-ui/nano-buttons/dialog-tabs'
-
-onMounted(() => {
-  const remove = onDialogResult((result) => {
-    if (result.key === 'userEdit' && result.type === 'saved')
-      loadList()
-  })
-
-  onUnmounted(remove)
-})
+<CstTable :data="rows" :pagination="false">
+  <el-table-column prop="name" label="名称" />
+</CstTable>
 ```
 
-### 使用建议
-
-1. 路由上的业务主键只放可被正常访问的 ID，不放敏感数据。
-2. `context` 只作为临时上下文，页面刷新后可能失效，页面应提供兜底提示或根据路由主键重新查数据。
-3. 标题传多语言 key，不在公共模块里写死业务文案。
-4. 保存成功统一用 `emitSavedAndClose` 通知来源页刷新。
-
-## 维护与发布
-
-包维护、版本发布和权限交接说明见 [MAINTAINING.md](./MAINTAINING.md)。
-
-文档站本地开发：
-
-```bash
-pnpm docs:dev
-```
-
-文档站构建：
-
-```bash
-pnpm docs:build
-```
-
-更新线上文档时，重新构建后将 `docs-dist/` 上传到 Netlify。若 Netlify 站点或域名发生变化，请同步修改本文档中的在线文档链接。
+## 依赖说明
+
+`vue`、`element-plus` 和 `vue-router` 是 peer dependencies，需要由使用方项目提供。
+
+## 弹窗标签页
+
+弹窗标签页能力用于把原本的弹窗按开关切换成系统 tab 页，同时保留原弹窗模式。公共包只负责打开模式、上下文缓存、保存结果通知、关闭回来源页和 `NanoDialogTabPage` 页面壳；业务项目负责注册页面、请求数据和保存业务。
+
+### 入口安装
+
+在应用入口安装插件：
+
+```ts
+import { createNanoDialogTabs } from '@cst-ui/nano-buttons/dialog-tabs'
+
+app.use(createNanoDialogTabs({
+  router,
+  parentRouteName: 'layout',
+  registry: dialogRegistry,
+  mode: () => DIALOG_OPEN_MODE,
+  translate: key => i18n.global.t(key),
+  tabAdapter: {
+    getTabs: () => tabStore.tabsOption,
+    getCurrentIndex: () => tabStore.currentIndex,
+    setCurrentIndex: index => tabStore.SET_TAB(index),
+    deleteTab: index => tabStore.DELETE_TAB(index),
+  },
+}))
+```
+
+### 注册页面
+
+在业务项目维护弹窗注册表：
+
+```ts
+export const dialogRegistry = {
+  userEdit: {
+    suffix: '/edit',
+    title: 'dialog.user.edit',
+    component: async () => await import('@/views/user/components/edit-page.vue'),
+    props: {
+      mode: 'edit',
+    },
+  },
+}
+```
+
+### 打开弹窗或 tab
+
+原页面统一使用 `openDialog`。开关为 `dialog` 时走 `openModal`，开关为 `tab` 时打开注册页面：
+
+```ts
+import { useDialogOpen } from '@cst-ui/nano-buttons/dialog-tabs'
+
+const { openDialog } = useDialogOpen()
+
+openDialog({
+  key: 'userEdit',
+  routeSuffix: `/edit/${row.id}`,
+  routePatternSuffix: '/edit/:id',
+  context: {
+    id: row.id,
+  },
+  openModal: () => {
+    data.showEdit = true
+  },
+})
+```
+
+### tab 页面
+
+tab 页面用 `NanoDialogTabPage` 统一标题、内容滚动、底部操作区和上下文失效兜底：
+
+```vue
+<template>
+  <NanoDialogTabPage
+    :title-key="pageTitleKey"
+    :loading="loading"
+    :expired="expired"
+    @close="closeCurrentDialogTab"
+  >
+    <UserEditForm
+      :item="item"
+      variant="page"
+      @cancel="closeCurrentDialogTab"
+      @save-ok="onSaveOk"
+    />
+  </NanoDialogTabPage>
+</template>
+
+<script setup lang="ts">
+import { NanoDialogTabPage, useDialogPage } from '@cst-ui/nano-buttons/dialog-tabs'
+
+const {
+  route,
+  dialogContext,
+  closeCurrentDialogTab,
+  emitSavedAndClose,
+} = useDialogPage<{ id?: string }>('dialog.user.edit')
+
+const id = computed(() => dialogContext.value?.id ?? route.params.id)
+
+const onSaveOk = () => {
+  emitSavedAndClose('userEdit', { id: id.value })
+}
+</script>
+```
+
+### 保存后刷新来源页
+
+来源页可以监听保存结果并刷新列表：
+
+```ts
+import { onDialogResult } from '@cst-ui/nano-buttons/dialog-tabs'
+
+onMounted(() => {
+  const remove = onDialogResult((result) => {
+    if (result.key === 'userEdit' && result.type === 'saved')
+      loadList()
+  })
+
+  onUnmounted(remove)
+})
+```
+
+### 使用建议
+
+1. 路由上的业务主键只放可被正常访问的 ID，不放敏感数据。
+2. `context` 只作为临时上下文，页面刷新后可能失效，页面应提供兜底提示或根据路由主键重新查数据。
+3. 标题传多语言 key，不在公共模块里写死业务文案。
+4. 保存成功统一用 `emitSavedAndClose` 通知来源页刷新。
+
+## 维护与发布
+
+包维护、版本发布和权限交接说明见 [MAINTAINING.md](./MAINTAINING.md)。
+
+文档站本地开发：
+
+```bash
+pnpm docs:dev
+```
+
+文档站构建：
+
+```bash
+pnpm docs:build
+```
+
+更新线上文档时，重新构建后将 `docs-dist/` 上传到 Netlify。若 Netlify 站点或域名发生变化，请同步修改本文档中的在线文档链接。

package/dist/style.css

@@ -1 +1 @@
-:root{--nano-font-size-sm: var(--font-size-sm, 14px);--nano-font-size-lg: var(--font-size-lg, 18px);--nano-font-weight-medium: var(--font-weight-medium, 500);--nano-radius-md: var(--radius-md, 6px);--nano-shadow-card: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, .12));--nano-color-brand-primary: var(--color-brand-primary, #243c96);--nano-color-brand-primary-hover: var(--color-brand-primary-hover, #3550b3);--nano-color-brand-primary-active: var(--color-brand-primary-active, #1b2f78);--nano-color-brand-primary-light: var(--color-brand-primary-light, #eef2ff);--nano-color-text-regular: var(--color-text-regular, #606266);--nano-color-text-on-brand: var(--color-text-on-brand, #ffffff);--nano-color-border-default: var(--color-border-default, #dcdfe6);--nano-color-success: var(--color-success, #67c23a);--nano-color-success-hover: var(--color-success-hover, #85ce61);--nano-color-success-active: var(--color-success-active, #529b2e);--nano-color-warning: var(--color-warning, #e6a23c);--nano-color-warning-hover: var(--color-warning-hover, #ebb563);--nano-color-warning-active: var(--color-warning-active, #b88230);--nano-color-danger: var(--color-danger, #d35a5a);--nano-color-danger-hover: var(--color-danger-hover, #e07272);--nano-color-danger-active: var(--color-danger-active, #bc4949);--nano-color-info: var(--color-info, #909399);--nano-color-info-hover: var(--color-info-hover, #a6a9ad);--nano-color-info-active: var(--color-info-active, #73767a);--nano-color-focus-outline: var(--color-focus-outline, rgba(36, 60, 150, .32));--nano-button-default-bg: var(--button-default-bg, #ffffff);--nano-button-default-text: var(--button-default-text, var(--nano-color-text-regular));--nano-button-default-border: var(--button-default-border, var(--nano-color-border-default));--nano-button-default-hover-bg: var(--button-default-hover-bg, var(--nano-color-brand-primary-light));--nano-button-default-hover-text: var(--button-default-hover-text, var(--nano-color-brand-primary));--nano-button-default-hover-border: var(--button-default-hover-border, var(--nano-color-brand-primary-hover));--nano-button-default-active-bg: var(--button-default-active-bg, #e0e8ff);--nano-button-default-active-text: var(--button-default-active-text, var(--nano-color-brand-primary-active));--nano-button-default-active-border: var(--button-default-active-border, var(--nano-color-brand-primary-active));--nano-button-secondary-bg: var(--button-secondary-bg, var(--nano-color-brand-primary-light));--nano-button-secondary-text: var(--button-secondary-text, var(--nano-color-brand-primary));--nano-button-secondary-border: var(--button-secondary-border, rgba(36, 60, 150, .32));--nano-button-secondary-hover-bg: var(--button-secondary-hover-bg, #e0e8ff);--nano-button-secondary-hover-text: var(--button-secondary-hover-text, var(--nano-color-brand-primary-hover));--nano-button-secondary-hover-border: var(--button-secondary-hover-border, var(--nano-color-brand-primary-hover));--nano-button-secondary-active-bg: var(--button-secondary-active-bg, #d4defd);--nano-button-secondary-active-text: var(--button-secondary-active-text, var(--nano-color-brand-primary-active));--nano-button-secondary-active-border: var(--button-secondary-active-border, var(--nano-color-brand-primary-active));--nano-button-import-bg: var(--button-import-bg, #edf5f3);--nano-button-import-text: var(--button-import-text, #2f6b57);--nano-button-import-border: var(--button-import-border, rgba(47, 107, 87, .2));--nano-button-import-hover-bg: var(--button-import-hover-bg, #e0f0ec);--nano-button-import-hover-text: var(--button-import-hover-text, #285c4b);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(47, 107, 87, .36));--nano-button-import-active-bg: var(--button-import-active-bg, #d3e8e2);--nano-button-import-active-text: var(--button-import-active-text, #224f40);--nano-button-import-active-border: var(--button-import-active-border, rgba(47, 107, 87, .48));--nano-button-export-bg: var(--button-export-bg, #edf5f3);--nano-button-export-text: var(--button-export-text, #2f6b57);--nano-button-export-border: var(--button-export-border, rgba(47, 107, 87, .2));--nano-button-export-hover-bg: var(--button-export-hover-bg, #e0f0ec);--nano-button-export-hover-text: var(--button-export-hover-text, #285c4b);--nano-button-export-hover-border: var(--button-export-hover-border, rgba(47, 107, 87, .36));--nano-button-export-active-bg: var(--button-export-active-bg, #d3e8e2);--nano-button-export-active-text: var(--button-export-active-text, #224f40);--nano-button-export-active-border: var(--button-export-active-border, rgba(47, 107, 87, .48));--nano-button-text-default: var(--button-text-default, var(--nano-color-text-regular));--nano-button-text-hover-bg: var(--button-text-hover-bg, var(--nano-color-brand-primary-light));--nano-button-text-hover: var(--button-text-hover, var(--nano-color-brand-primary));--nano-button-text-active: var(--button-text-active, var(--nano-color-brand-primary-active));--nano-button-hover-shadow: var(--button-hover-shadow, 0 4px 12px rgba(36, 60, 150, .16));--nano-button-default-hover-shadow: var(--button-default-hover-shadow, 0 2px 10px rgba(36, 60, 150, .12));--nano-button-danger-hover-shadow: var(--button-danger-hover-shadow, 0 4px 12px rgba(211, 90, 90, .18))}html.dark{--nano-button-import-bg: var(--button-import-bg, rgba(80, 160, 120, .16));--nano-button-import-text: var(--button-import-text, #8dd3b1);--nano-button-import-border: var(--button-import-border, rgba(80, 160, 120, .28));--nano-button-import-hover-bg: var(--button-import-hover-bg, rgba(80, 160, 120, .24));--nano-button-import-hover-text: var(--button-import-hover-text, #a6e2c4);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(80, 160, 120, .42));--nano-button-import-active-bg: var(--button-import-active-bg, rgba(80, 160, 120, .32));--nano-button-import-active-text: var(--button-import-active-text, #8dd3b1);--nano-button-import-active-border: var(--button-import-active-border, rgba(80, 160, 120, .56));--nano-button-export-bg: var(--button-export-bg, rgba(80, 160, 120, .16));--nano-button-export-text: var(--button-export-text, #8dd3b1);--nano-button-export-border: var(--button-export-border, rgba(80, 160, 120, .28));--nano-button-export-hover-bg: var(--button-export-hover-bg, rgba(80, 160, 120, .24));--nano-button-export-hover-text: var(--button-export-hover-text, #a6e2c4);--nano-button-export-hover-border: var(--button-export-hover-border, rgba(80, 160, 120, .42));--nano-button-export-active-bg: var(--button-export-active-bg, rgba(80, 160, 120, .32));--nano-button-export-active-text: var(--button-export-active-text, #8dd3b1);--nano-button-export-active-border: var(--button-export-active-border, rgba(80, 160, 120, .56))}.el-button{--button-bg: var(--button-default-bg, var(--nano-button-default-bg));--button-text: var(--button-default-text, var(--nano-button-default-text));--button-border: var(--button-default-border, var(--nano-button-default-border));--button-bg-hover: var(--button-default-hover-bg, var(--nano-button-default-hover-bg));--button-text-hover: var(--button-default-hover-text, var(--nano-button-default-hover-text));--button-border-hover: var(--button-default-hover-border, var(--nano-button-default-hover-border));--button-bg-active: var(--button-default-active-bg, var(--nano-button-default-active-bg));--button-text-active: var(--button-default-active-text, var(--nano-button-default-active-text));--button-border-active: var(--button-default-active-border, var(--nano-button-default-active-border));--button-shadow-hover: var(--button-default-hover-shadow, var(--nano-button-default-hover-shadow));font-size:var(--font-size-sm, var(--nano-font-size-sm));font-weight:var(--font-weight-medium, var(--nano-font-weight-medium));border-radius:var(--radius-md, var(--nano-radius-md));transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.el-button:focus-visible{outline:2px solid var(--color-focus-outline, var(--nano-color-focus-outline));outline-offset:2px}.el-button.is-disabled,.el-button.is-disabled:hover,.el-button.is-disabled:active{box-shadow:none}.el-button:not(.is-text):not(.is-link){--el-button-text-color: var(--button-text);--el-button-bg-color: var(--button-bg);--el-button-border-color: var(--button-border);--el-button-hover-text-color: var(--button-text-hover);--el-button-hover-bg-color: var(--button-bg-hover);--el-button-hover-border-color: var(--button-border-hover);--el-button-active-text-color: var(--button-text-active);--el-button-active-bg-color: var(--button-bg-active);--el-button-active-border-color: var(--button-border-active);color:var(--button-text);background-color:var(--button-bg);border-color:var(--button-border)}.el-button:not(.is-text):not(.is-link):hover{background-color:var(--button-bg-hover);color:var(--button-text-hover);border-color:var(--button-border-hover);box-shadow:var(--button-shadow-hover)}.el-button:not(.is-text):not(.is-link):active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active);box-shadow:none}.el-button.app-button-secondary{--button-bg: var(--button-secondary-bg, var(--nano-button-secondary-bg));--button-text: var(--button-secondary-text, var(--nano-button-secondary-text));--button-border: var(--button-secondary-border, var(--nano-button-secondary-border));--button-bg-hover: var(--button-secondary-hover-bg, var(--nano-button-secondary-hover-bg));--button-text-hover: var(--button-secondary-hover-text, var(--nano-button-secondary-hover-text));--button-border-hover: var(--button-secondary-hover-border, var(--nano-button-secondary-hover-border));--button-bg-active: var(--button-secondary-active-bg, var(--nano-button-secondary-active-bg));--button-text-active: var(--button-secondary-active-text, var(--nano-button-secondary-active-text));--button-border-active: var(--button-secondary-active-border, var(--nano-button-secondary-active-border))}.el-button.app-button-import{--button-bg: var(--button-import-bg, var(--nano-button-import-bg));--button-text: var(--button-import-text, var(--nano-button-import-text));--button-border: var(--button-import-border, var(--nano-button-import-border));--button-bg-hover: var(--button-import-hover-bg, var(--nano-button-import-hover-bg));--button-text-hover: var(--button-import-hover-text, var(--nano-button-import-hover-text));--button-border-hover: var(--button-import-hover-border, var(--nano-button-import-hover-border));--button-bg-active: var(--button-import-active-bg, var(--nano-button-import-active-bg));--button-text-active: var(--button-import-active-text, var(--nano-button-import-active-text));--button-border-active: var(--button-import-active-border, var(--nano-button-import-active-border))}.el-button.app-button-export{--button-bg: var(--button-export-bg, var(--nano-button-export-bg));--button-text: var(--button-export-text, var(--nano-button-export-text));--button-border: var(--button-export-border, var(--nano-button-export-border));--button-bg-hover: var(--button-export-hover-bg, var(--nano-button-export-hover-bg));--button-text-hover: var(--button-export-hover-text, var(--nano-button-export-hover-text));--button-border-hover: var(--button-export-hover-border, var(--nano-button-export-hover-border));--button-bg-active: var(--button-export-active-bg, var(--nano-button-export-active-bg));--button-text-active: var(--button-export-active-text, var(--nano-button-export-active-text));--button-border-active: var(--button-export-active-border, var(--nano-button-export-active-border))}.el-button.el-button--primary,.el-button.el-button--success,.el-button.el-button--warning,.el-button.el-button--danger,.el-button.el-button--info{--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-shadow-hover: var(--button-hover-shadow, var(--nano-button-hover-shadow));box-shadow:none}.el-button.el-button--primary{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active))}.el-button.el-button--success{--button-bg: var(--color-success, var(--nano-color-success));--button-border: var(--color-success, var(--nano-color-success));--button-bg-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-border-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-bg-active: var(--color-success-active, var(--nano-color-success-active));--button-border-active: var(--color-success-active, var(--nano-color-success-active))}.el-button.el-button--warning{--button-bg: var(--color-warning, var(--nano-color-warning));--button-border: var(--color-warning, var(--nano-color-warning));--button-bg-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-border-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-bg-active: var(--color-warning-active, var(--nano-color-warning-active));--button-border-active: var(--color-warning-active, var(--nano-color-warning-active))}.el-button.el-button--danger{--button-bg: var(--color-danger, var(--nano-color-danger));--button-border: var(--color-danger, var(--nano-color-danger));--button-bg-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-border-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-bg-active: var(--color-danger-active, var(--nano-color-danger-active));--button-border-active: var(--color-danger-active, var(--nano-color-danger-active));--button-shadow-hover: var(--button-danger-hover-shadow, var(--nano-button-danger-hover-shadow))}.el-button.el-button--info{--button-bg: var(--color-info, var(--nano-color-info));--button-border: var(--color-info, var(--nano-color-info));--button-bg-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-border-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-bg-active: var(--color-info-active, var(--nano-color-info-active));--button-border-active: var(--color-info-active, var(--nano-color-info-active))}.el-button.is-text,.el-button.is-link{background-color:transparent;color:var(--button-text-default, var(--nano-button-text-default));border-color:transparent;box-shadow:none}.el-button.is-text:hover{background-color:var(--button-text-hover-bg, var(--nano-button-text-hover-bg));color:var(--button-text-hover, var(--nano-button-text-hover))}.el-button.is-link:hover,.el-button.is-text:active,.el-button.is-link:active{color:var(--button-text-active, var(--nano-button-text-active))}.app-backtop.el-backtop{width:auto;height:auto;background-color:transparent;box-shadow:none}.app-backtop.el-backtop:hover{background-color:transparent}.app-backtop-button.el-button{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));width:42px;height:42px;padding:0;border-radius:12px;border-width:1px;box-shadow:0 10px 22px #243c9642,inset 0 1px #ffffff2e;transform:translateY(0);transition:transform .18s ease,background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.app-backtop-button.el-button>span,.app-backtop-icon{display:inline-flex;align-items:center;justify-content:center}.app-backtop-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.app-backtop-button.el-button:not(.is-text):not(.is-link):hover{transform:translateY(-2px);box-shadow:0 14px 26px #243c964d,inset 0 1px #ffffff38}.app-backtop-button.el-button:not(.is-text):not(.is-link):active{transform:translateY(0);box-shadow:0 6px 14px #243c9638,inset 0 1px 2px #1b2f7847}
+:root{--nano-font-size-sm: var(--font-size-sm, 14px);--nano-font-size-lg: var(--font-size-lg, 18px);--nano-font-weight-medium: var(--font-weight-medium, 500);--nano-radius-md: var(--radius-md, 6px);--nano-shadow-card: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, .12));--nano-color-brand-primary: var(--color-brand-primary, #243c96);--nano-color-brand-primary-hover: var(--color-brand-primary-hover, #3550b3);--nano-color-brand-primary-active: var(--color-brand-primary-active, #1b2f78);--nano-color-brand-primary-light: var(--color-brand-primary-light, #eef2ff);--nano-color-text-regular: var(--color-text-regular, #606266);--nano-color-text-on-brand: var(--color-text-on-brand, #ffffff);--nano-color-border-default: var(--color-border-default, #dcdfe6);--nano-color-success: var(--color-success, #67c23a);--nano-color-success-hover: var(--color-success-hover, #85ce61);--nano-color-success-active: var(--color-success-active, #529b2e);--nano-color-warning: var(--color-warning, #e6a23c);--nano-color-warning-hover: var(--color-warning-hover, #ebb563);--nano-color-warning-active: var(--color-warning-active, #b88230);--nano-color-danger: var(--color-danger, #d35a5a);--nano-color-danger-hover: var(--color-danger-hover, #e07272);--nano-color-danger-active: var(--color-danger-active, #bc4949);--nano-color-info: var(--color-info, #909399);--nano-color-info-hover: var(--color-info-hover, #a6a9ad);--nano-color-info-active: var(--color-info-active, #73767a);--nano-color-focus-outline: var(--color-focus-outline, rgba(36, 60, 150, .32));--nano-button-default-bg: var(--button-default-bg, #ffffff);--nano-button-default-text: var(--button-default-text, var(--nano-color-text-regular));--nano-button-default-border: var(--button-default-border, var(--nano-color-border-default));--nano-button-default-hover-bg: var(--button-default-hover-bg, var(--nano-color-brand-primary-light));--nano-button-default-hover-text: var(--button-default-hover-text, var(--nano-color-brand-primary));--nano-button-default-hover-border: var(--button-default-hover-border, var(--nano-color-brand-primary-hover));--nano-button-default-active-bg: var(--button-default-active-bg, #e0e8ff);--nano-button-default-active-text: var(--button-default-active-text, var(--nano-color-brand-primary-active));--nano-button-default-active-border: var(--button-default-active-border, var(--nano-color-brand-primary-active));--nano-button-secondary-bg: var(--button-secondary-bg, var(--nano-color-brand-primary-light));--nano-button-secondary-text: var(--button-secondary-text, var(--nano-color-brand-primary));--nano-button-secondary-border: var(--button-secondary-border, rgba(36, 60, 150, .32));--nano-button-secondary-hover-bg: var(--button-secondary-hover-bg, #e0e8ff);--nano-button-secondary-hover-text: var(--button-secondary-hover-text, var(--nano-color-brand-primary-hover));--nano-button-secondary-hover-border: var(--button-secondary-hover-border, var(--nano-color-brand-primary-hover));--nano-button-secondary-active-bg: var(--button-secondary-active-bg, #d4defd);--nano-button-secondary-active-text: var(--button-secondary-active-text, var(--nano-color-brand-primary-active));--nano-button-secondary-active-border: var(--button-secondary-active-border, var(--nano-color-brand-primary-active));--nano-button-import-bg: var(--button-import-bg, #edf5f3);--nano-button-import-text: var(--button-import-text, #2f6b57);--nano-button-import-border: var(--button-import-border, rgba(47, 107, 87, .2));--nano-button-import-hover-bg: var(--button-import-hover-bg, #e0f0ec);--nano-button-import-hover-text: var(--button-import-hover-text, #285c4b);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(47, 107, 87, .36));--nano-button-import-active-bg: var(--button-import-active-bg, #d3e8e2);--nano-button-import-active-text: var(--button-import-active-text, #224f40);--nano-button-import-active-border: var(--button-import-active-border, rgba(47, 107, 87, .48));--nano-button-export-bg: var(--button-export-bg, #edf5f3);--nano-button-export-text: var(--button-export-text, #2f6b57);--nano-button-export-border: var(--button-export-border, rgba(47, 107, 87, .2));--nano-button-export-hover-bg: var(--button-export-hover-bg, #e0f0ec);--nano-button-export-hover-text: var(--button-export-hover-text, #285c4b);--nano-button-export-hover-border: var(--button-export-hover-border, rgba(47, 107, 87, .36));--nano-button-export-active-bg: var(--button-export-active-bg, #d3e8e2);--nano-button-export-active-text: var(--button-export-active-text, #224f40);--nano-button-export-active-border: var(--button-export-active-border, rgba(47, 107, 87, .48));--nano-button-text-default: var(--button-text-default, var(--nano-color-text-regular));--nano-button-text-hover-bg: var(--button-text-hover-bg, var(--nano-color-brand-primary-light));--nano-button-text-hover: var(--button-text-hover, var(--nano-color-brand-primary));--nano-button-text-active: var(--button-text-active, var(--nano-color-brand-primary-active));--nano-button-hover-shadow: var(--button-hover-shadow, 0 4px 12px rgba(36, 60, 150, .16));--nano-button-default-hover-shadow: var(--button-default-hover-shadow, 0 2px 10px rgba(36, 60, 150, .12));--nano-button-danger-hover-shadow: var(--button-danger-hover-shadow, 0 4px 12px rgba(211, 90, 90, .18))}html.dark{--nano-button-import-bg: var(--button-import-bg, rgba(80, 160, 120, .16));--nano-button-import-text: var(--button-import-text, #8dd3b1);--nano-button-import-border: var(--button-import-border, rgba(80, 160, 120, .28));--nano-button-import-hover-bg: var(--button-import-hover-bg, rgba(80, 160, 120, .24));--nano-button-import-hover-text: var(--button-import-hover-text, #a6e2c4);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(80, 160, 120, .42));--nano-button-import-active-bg: var(--button-import-active-bg, rgba(80, 160, 120, .32));--nano-button-import-active-text: var(--button-import-active-text, #8dd3b1);--nano-button-import-active-border: var(--button-import-active-border, rgba(80, 160, 120, .56));--nano-button-export-bg: var(--button-export-bg, rgba(80, 160, 120, .16));--nano-button-export-text: var(--button-export-text, #8dd3b1);--nano-button-export-border: var(--button-export-border, rgba(80, 160, 120, .28));--nano-button-export-hover-bg: var(--button-export-hover-bg, rgba(80, 160, 120, .24));--nano-button-export-hover-text: var(--button-export-hover-text, #a6e2c4);--nano-button-export-hover-border: var(--button-export-hover-border, rgba(80, 160, 120, .42));--nano-button-export-active-bg: var(--button-export-active-bg, rgba(80, 160, 120, .32));--nano-button-export-active-text: var(--button-export-active-text, #8dd3b1);--nano-button-export-active-border: var(--button-export-active-border, rgba(80, 160, 120, .56))}.el-button{--button-bg: var(--button-default-bg, var(--nano-button-default-bg));--button-text: var(--button-default-text, var(--nano-button-default-text));--button-border: var(--button-default-border, var(--nano-button-default-border));--button-bg-hover: var(--button-default-hover-bg, var(--nano-button-default-hover-bg));--button-text-hover: var(--button-default-hover-text, var(--nano-button-default-hover-text));--button-border-hover: var(--button-default-hover-border, var(--nano-button-default-hover-border));--button-bg-active: var(--button-default-active-bg, var(--nano-button-default-active-bg));--button-text-active: var(--button-default-active-text, var(--nano-button-default-active-text));--button-border-active: var(--button-default-active-border, var(--nano-button-default-active-border));--button-shadow-hover: var(--button-default-hover-shadow, var(--nano-button-default-hover-shadow));font-size:var(--font-size-sm, var(--nano-font-size-sm));font-weight:var(--font-weight-medium, var(--nano-font-weight-medium));border-radius:var(--radius-md, var(--nano-radius-md));transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.el-button:focus-visible{outline:2px solid var(--color-focus-outline, var(--nano-color-focus-outline));outline-offset:2px}.el-button.is-disabled,.el-button.is-disabled:hover,.el-button.is-disabled:active{box-shadow:none}.el-button:not(.is-text):not(.is-link){--el-button-text-color: var(--button-text);--el-button-bg-color: var(--button-bg);--el-button-border-color: var(--button-border);--el-button-hover-text-color: var(--button-text-hover);--el-button-hover-bg-color: var(--button-bg-hover);--el-button-hover-border-color: var(--button-border-hover);--el-button-active-text-color: var(--button-text-active);--el-button-active-bg-color: var(--button-bg-active);--el-button-active-border-color: var(--button-border-active);color:var(--button-text);background-color:var(--button-bg);border-color:var(--button-border)}.el-button:not(.is-text):not(.is-link):hover{background-color:var(--button-bg-hover);color:var(--button-text-hover);border-color:var(--button-border-hover);box-shadow:var(--button-shadow-hover)}.el-button:not(.is-text):not(.is-link):active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active);box-shadow:none}.el-button.app-button-secondary{--button-bg: var(--button-secondary-bg, var(--nano-button-secondary-bg));--button-text: var(--button-secondary-text, var(--nano-button-secondary-text));--button-border: var(--button-secondary-border, var(--nano-button-secondary-border));--button-bg-hover: var(--button-secondary-hover-bg, var(--nano-button-secondary-hover-bg));--button-text-hover: var(--button-secondary-hover-text, var(--nano-button-secondary-hover-text));--button-border-hover: var(--button-secondary-hover-border, var(--nano-button-secondary-hover-border));--button-bg-active: var(--button-secondary-active-bg, var(--nano-button-secondary-active-bg));--button-text-active: var(--button-secondary-active-text, var(--nano-button-secondary-active-text));--button-border-active: var(--button-secondary-active-border, var(--nano-button-secondary-active-border))}.el-button.app-button-import{--button-bg: var(--button-import-bg, var(--nano-button-import-bg));--button-text: var(--button-import-text, var(--nano-button-import-text));--button-border: var(--button-import-border, var(--nano-button-import-border));--button-bg-hover: var(--button-import-hover-bg, var(--nano-button-import-hover-bg));--button-text-hover: var(--button-import-hover-text, var(--nano-button-import-hover-text));--button-border-hover: var(--button-import-hover-border, var(--nano-button-import-hover-border));--button-bg-active: var(--button-import-active-bg, var(--nano-button-import-active-bg));--button-text-active: var(--button-import-active-text, var(--nano-button-import-active-text));--button-border-active: var(--button-import-active-border, var(--nano-button-import-active-border))}.el-button.app-button-export{--button-bg: var(--button-export-bg, var(--nano-button-export-bg));--button-text: var(--button-export-text, var(--nano-button-export-text));--button-border: var(--button-export-border, var(--nano-button-export-border));--button-bg-hover: var(--button-export-hover-bg, var(--nano-button-export-hover-bg));--button-text-hover: var(--button-export-hover-text, var(--nano-button-export-hover-text));--button-border-hover: var(--button-export-hover-border, var(--nano-button-export-hover-border));--button-bg-active: var(--button-export-active-bg, var(--nano-button-export-active-bg));--button-text-active: var(--button-export-active-text, var(--nano-button-export-active-text));--button-border-active: var(--button-export-active-border, var(--nano-button-export-active-border))}.el-button.el-button--primary,.el-button.el-button--success,.el-button.el-button--warning,.el-button.el-button--danger,.el-button.el-button--info{--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-shadow-hover: var(--button-hover-shadow, var(--nano-button-hover-shadow));box-shadow:none}.el-button.el-button--primary{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active))}.el-button.el-button--success{--button-bg: var(--color-success, var(--nano-color-success));--button-border: var(--color-success, var(--nano-color-success));--button-bg-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-border-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-bg-active: var(--color-success-active, var(--nano-color-success-active));--button-border-active: var(--color-success-active, var(--nano-color-success-active))}.el-button.el-button--warning{--button-bg: var(--color-warning, var(--nano-color-warning));--button-border: var(--color-warning, var(--nano-color-warning));--button-bg-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-border-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-bg-active: var(--color-warning-active, var(--nano-color-warning-active));--button-border-active: var(--color-warning-active, var(--nano-color-warning-active))}.el-button.el-button--danger{--button-bg: var(--color-danger, var(--nano-color-danger));--button-border: var(--color-danger, var(--nano-color-danger));--button-bg-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-border-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-bg-active: var(--color-danger-active, var(--nano-color-danger-active));--button-border-active: var(--color-danger-active, var(--nano-color-danger-active));--button-shadow-hover: var(--button-danger-hover-shadow, var(--nano-button-danger-hover-shadow))}.el-button.el-button--info{--button-bg: var(--color-info, var(--nano-color-info));--button-border: var(--color-info, var(--nano-color-info));--button-bg-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-border-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-bg-active: var(--color-info-active, var(--nano-color-info-active));--button-border-active: var(--color-info-active, var(--nano-color-info-active))}.el-button.is-text,.el-button.is-link{background-color:transparent;color:var(--button-text-default, var(--nano-button-text-default));border-color:transparent;box-shadow:none}.el-button.is-text:hover{background-color:var(--button-text-hover-bg, var(--nano-button-text-hover-bg));color:var(--button-text-hover, var(--nano-button-text-hover))}.el-button.is-link:hover,.el-button.is-text:active,.el-button.is-link:active{color:var(--button-text-active, var(--nano-button-text-active))}.app-backtop.el-backtop{width:auto;height:auto;background-color:transparent;box-shadow:none}.app-backtop.el-backtop:hover{background-color:transparent}.app-backtop-button.el-button{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));width:42px;height:42px;padding:0;border-radius:12px;border-width:1px;box-shadow:0 10px 22px #243c9642,inset 0 1px #ffffff2e;transform:translateY(0);transition:transform .18s ease,background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.app-backtop-button.el-button>span,.app-backtop-icon{display:inline-flex;align-items:center;justify-content:center}.app-backtop-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.app-backtop-button.el-button:not(.is-text):not(.is-link):hover{transform:translateY(-2px);box-shadow:0 14px 26px #243c964d,inset 0 1px #ffffff38}.app-backtop-button.el-button:not(.is-text):not(.is-link):active{transform:translateY(0);box-shadow:0 6px 14px #243c9638,inset 0 1px 2px #1b2f7847}.cst-pagination[data-v-cbbb7f80]{display:flex;width:100%}.cst-pagination--start[data-v-cbbb7f80]{justify-content:flex-start}.cst-pagination--center[data-v-cbbb7f80]{justify-content:center}.cst-pagination--end[data-v-cbbb7f80]{justify-content:flex-end}.cst-table-wrapper[data-v-18cdd107]{display:flex;width:100%;min-height:0;flex-direction:column}.cst-table[data-v-18cdd107]{width:100%;overflow:hidden;border-radius:var(--el-border-radius-base);box-shadow:var(--el-box-shadow-light)}.cst-table-pagination[data-v-18cdd107]{margin-top:var(--cst-table-pagination-gap, 16px)}

package/dist/table/CstPagination.vue.d.ts

@@ -0,0 +1,64 @@
+type PaginationAlign = 'start' | 'center' | 'end';
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{
+    currentPage?: number;
+    pageSize?: number;
+    total?: number;
+    pageCount?: number;
+    pageSizes?: number[];
+    layout?: string;
+    background?: boolean;
+    disabled?: boolean;
+    hideOnSinglePage?: boolean;
+    align?: PaginationAlign;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:currentPage": (value: number) => any;
+    "update:pageSize": (value: number) => any;
+    currentChange: (value: number) => any;
+    sizeChange: (value: number) => any;
+    prevClick: (value: number) => any;
+    nextClick: (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    currentPage?: number;
+    pageSize?: number;
+    total?: number;
+    pageCount?: number;
+    pageSizes?: number[];
+    layout?: string;
+    background?: boolean;
+    disabled?: boolean;
+    hideOnSinglePage?: boolean;
+    align?: PaginationAlign;
+}> & Readonly<{
+    "onUpdate:currentPage"?: ((value: number) => any) | undefined;
+    "onUpdate:pageSize"?: ((value: number) => any) | undefined;
+    onCurrentChange?: ((value: number) => any) | undefined;
+    onSizeChange?: ((value: number) => any) | undefined;
+    onPrevClick?: ((value: number) => any) | undefined;
+    onNextClick?: ((value: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+    currentPage: number;
+    pageSize: number;
+    total: number;
+    pageCount: number;
+    pageSizes: number[];
+    layout: string;
+    background: boolean;
+    hideOnSinglePage: boolean;
+    align: PaginationAlign;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/table/CstTable.vue.d.ts

@@ -0,0 +1,47 @@
+type PaginationAlign = 'start' | 'center' | 'end';
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{
+    data?: unknown[];
+    pagination?: boolean;
+    defaultPageSize?: number;
+    pageSizes?: number[];
+    paginationLayout?: string;
+    paginationBackground?: boolean;
+    paginationAlign?: PaginationAlign;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    currentPageChange: (value: number) => any;
+    pageSizeChange: (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    data?: unknown[];
+    pagination?: boolean;
+    defaultPageSize?: number;
+    pageSizes?: number[];
+    paginationLayout?: string;
+    paginationBackground?: boolean;
+    paginationAlign?: PaginationAlign;
+}> & Readonly<{
+    onCurrentPageChange?: ((value: number) => any) | undefined;
+    onPageSizeChange?: ((value: number) => any) | undefined;
+}>, {
+    data: unknown[];
+    pageSizes: number[];
+    defaultPageSize: number;
+    pagination: boolean;
+    paginationLayout: string;
+    paginationBackground: boolean;
+    paginationAlign: PaginationAlign;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/table/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),b=e.defineComponent({name:"CstPagination",inheritAttrs:!1,__name:"CstPagination",props:{currentPage:{default:1},pageSize:{default:10},total:{default:void 0},pageCount:{default:void 0},pageSizes:{default:()=>[10,20,50,100]},layout:{default:"total, sizes, prev, pager, next, jumper"},background:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},hideOnSinglePage:{type:Boolean,default:!1},align:{default:"end"}},emits:["update:currentPage","update:pageSize","currentChange","sizeChange","prevClick","nextClick"],setup(t,{emit:i}){const o=i;return(u,n)=>{const s=e.resolveComponent("el-pagination");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["cst-pagination",`cst-pagination--${t.align}`])},[e.createVNode(s,e.mergeProps(u.$attrs,{"current-page":t.currentPage,"page-size":t.pageSize,"page-sizes":t.pageSizes,layout:t.layout,background:t.background,disabled:t.disabled,"hide-on-single-page":t.hideOnSinglePage,total:t.pageCount===void 0?t.total??0:void 0,"page-count":t.pageCount,"onUpdate:currentPage":n[0]||(n[0]=a=>o("update:currentPage",a)),"onUpdate:pageSize":n[1]||(n[1]=a=>o("update:pageSize",a)),onCurrentChange:n[2]||(n[2]=a=>o("currentChange",a)),onSizeChange:n[3]||(n[3]=a=>o("sizeChange",a)),onPrevClick:n[4]||(n[4]=a=>o("prevClick",a)),onNextClick:n[5]||(n[5]=a=>o("nextClick",a))}),{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default",{},void 0,!0)]),_:3},16,["current-page","page-size","page-sizes","layout","background","disabled","hide-on-single-page","total","page-count"])],2)}}}),c=(t,i)=>{const o=t.__vccOpts||t;for(const[u,n]of i)o[u]=n;return o},g=c(b,[["__scopeId","data-v-cbbb7f80"]]),P={class:"cst-table-wrapper"},S={key:0,class:"cst-table-pagination"},k=e.defineComponent({name:"CstTable",inheritAttrs:!1,__name:"CstTable",props:{data:{default:()=>[]},pagination:{type:Boolean,default:!0},defaultPageSize:{default:20},pageSizes:{default:()=>[10,20,50,100]},paginationLayout:{default:"total, sizes, prev, pager, next, jumper"},paginationBackground:{type:Boolean,default:!0},paginationAlign:{default:"end"}},emits:["currentPageChange","pageSizeChange"],setup(t,{emit:i}){const o=t,u=i,n=e.useAttrs(),s=e.ref(1),a=e.ref(o.defaultPageSize),C=e.computed(()=>{if(!o.pagination)return o.data;const l=(s.value-1)*a.value;return o.data.slice(l,l+a.value)}),m=e.computed(()=>({border:!0,stripe:!0,fit:!0,tableLayout:"auto",...n})),d=l=>{s.value=l,u("currentPageChange",l)},v=l=>{a.value=l,s.value=1,u("pageSizeChange",l),u("currentPageChange",1)};return e.watch(()=>o.data.length,l=>{const r=Math.max(1,Math.ceil(l/a.value));s.value>r&&d(r)}),(l,r)=>{const z=e.resolveComponent("el-table");return e.openBlock(),e.createElementBlock("div",P,[e.createVNode(z,e.mergeProps(m.value,{data:C.value,class:"cst-table"}),{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default",{},void 0,!0)]),_:3},16,["data"]),t.pagination?(e.openBlock(),e.createElementBlock("div",S,[e.createVNode(g,{"current-page":s.value,"page-size":a.value,total:t.data.length,"page-sizes":t.pageSizes,layout:t.paginationLayout,background:t.paginationBackground,align:t.paginationAlign,"onUpdate:currentPage":d,"onUpdate:pageSize":v},null,8,["current-page","page-size","total","page-sizes","layout","background","align"])])):e.createCommentVNode("",!0)])}}}),p=c(k,[["__scopeId","data-v-18cdd107"]]),y=[p,g],f=t=>{y.forEach(i=>{t.component(i.name||"AnonymousComponent",i)})},h={install:f};exports.CstPagination=g;exports.CstTable=p;exports.default=h;exports.install=f;

package/dist/table/index.d.ts

@@ -0,0 +1,7 @@
+import type { App, Plugin } from 'vue';
+import CstPagination from './CstPagination.vue';
+import CstTable from './CstTable.vue';
+declare const install: (app: App) => void;
+declare const CstTableComponents: Plugin;
+export { CstPagination, CstTable, install, };
+export default CstTableComponents;

package/dist/table/index.mjs

@@ -0,0 +1,136 @@
+import { defineComponent as C, resolveComponent as m, openBlock as s, createElementBlock as r, normalizeClass as x, createVNode as d, mergeProps as z, withCtx as v, renderSlot as b, useAttrs as A, ref as p, computed as f, watch as $, createCommentVNode as T } from "vue";
+const U = /* @__PURE__ */ C({
+  name: "CstPagination",
+  inheritAttrs: !1,
+  __name: "CstPagination",
+  props: {
+    currentPage: { default: 1 },
+    pageSize: { default: 10 },
+    total: { default: void 0 },
+    pageCount: { default: void 0 },
+    pageSizes: { default: () => [10, 20, 50, 100] },
+    layout: { default: "total, sizes, prev, pager, next, jumper" },
+    background: { type: Boolean, default: !0 },
+    disabled: { type: Boolean, default: !1 },
+    hideOnSinglePage: { type: Boolean, default: !1 },
+    align: { default: "end" }
+  },
+  emits: ["update:currentPage", "update:pageSize", "currentChange", "sizeChange", "prevClick", "nextClick"],
+  setup(e, { emit: i }) {
+    const n = i;
+    return (l, a) => {
+      const u = m("el-pagination");
+      return s(), r("div", {
+        class: x(["cst-pagination", `cst-pagination--${e.align}`])
+      }, [
+        d(u, z(l.$attrs, {
+          "current-page": e.currentPage,
+          "page-size": e.pageSize,
+          "page-sizes": e.pageSizes,
+          layout: e.layout,
+          background: e.background,
+          disabled: e.disabled,
+          "hide-on-single-page": e.hideOnSinglePage,
+          total: e.pageCount === void 0 ? e.total ?? 0 : void 0,
+          "page-count": e.pageCount,
+          "onUpdate:currentPage": a[0] || (a[0] = (t) => n("update:currentPage", t)),
+          "onUpdate:pageSize": a[1] || (a[1] = (t) => n("update:pageSize", t)),
+          onCurrentChange: a[2] || (a[2] = (t) => n("currentChange", t)),
+          onSizeChange: a[3] || (a[3] = (t) => n("sizeChange", t)),
+          onPrevClick: a[4] || (a[4] = (t) => n("prevClick", t)),
+          onNextClick: a[5] || (a[5] = (t) => n("nextClick", t))
+        }), {
+          default: v(() => [
+            b(l.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 16, ["current-page", "page-size", "page-sizes", "layout", "background", "disabled", "hide-on-single-page", "total", "page-count"])
+      ], 2);
+    };
+  }
+}), P = (e, i) => {
+  const n = e.__vccOpts || e;
+  for (const [l, a] of i)
+    n[l] = a;
+  return n;
+}, S = /* @__PURE__ */ P(U, [["__scopeId", "data-v-cbbb7f80"]]), w = { class: "cst-table-wrapper" }, L = {
+  key: 0,
+  class: "cst-table-pagination"
+}, N = /* @__PURE__ */ C({
+  name: "CstTable",
+  inheritAttrs: !1,
+  __name: "CstTable",
+  props: {
+    data: { default: () => [] },
+    pagination: { type: Boolean, default: !0 },
+    defaultPageSize: { default: 20 },
+    pageSizes: { default: () => [10, 20, 50, 100] },
+    paginationLayout: { default: "total, sizes, prev, pager, next, jumper" },
+    paginationBackground: { type: Boolean, default: !0 },
+    paginationAlign: { default: "end" }
+  },
+  emits: ["currentPageChange", "pageSizeChange"],
+  setup(e, { emit: i }) {
+    const n = e, l = i, a = A(), u = p(1), t = p(n.defaultPageSize), k = f(() => {
+      if (!n.pagination)
+        return n.data;
+      const o = (u.value - 1) * t.value;
+      return n.data.slice(o, o + t.value);
+    }), y = f(() => ({
+      border: !0,
+      stripe: !0,
+      fit: !0,
+      tableLayout: "auto",
+      ...a
+    })), c = (o) => {
+      u.value = o, l("currentPageChange", o);
+    }, h = (o) => {
+      t.value = o, u.value = 1, l("pageSizeChange", o), l("currentPageChange", 1);
+    };
+    return $(
+      () => n.data.length,
+      (o) => {
+        const g = Math.max(1, Math.ceil(o / t.value));
+        u.value > g && c(g);
+      }
+    ), (o, g) => {
+      const B = m("el-table");
+      return s(), r("div", w, [
+        d(B, z(y.value, {
+          data: k.value,
+          class: "cst-table"
+        }), {
+          default: v(() => [
+            b(o.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 16, ["data"]),
+        e.pagination ? (s(), r("div", L, [
+          d(S, {
+            "current-page": u.value,
+            "page-size": t.value,
+            total: e.data.length,
+            "page-sizes": e.pageSizes,
+            layout: e.paginationLayout,
+            background: e.paginationBackground,
+            align: e.paginationAlign,
+            "onUpdate:currentPage": c,
+            "onUpdate:pageSize": h
+          }, null, 8, ["current-page", "page-size", "total", "page-sizes", "layout", "background", "align"])
+        ])) : T("", !0)
+      ]);
+    };
+  }
+}), O = /* @__PURE__ */ P(N, [["__scopeId", "data-v-18cdd107"]]), j = [O, S], E = (e) => {
+  j.forEach((i) => {
+    e.component(i.name || "AnonymousComponent", i);
+  });
+}, M = {
+  install: E
+};
+export {
+  S as CstPagination,
+  O as CstTable,
+  M as default,
+  E as install
+};

package/package.json

@@ -1,66 +1,74 @@
-{
-    "name": "@cst-ui/nano-buttons",
-    "version": "0.2.3",
-    "description": "Nano themed Vue 3 button components and dialog tab helpers based on Element Plus.",
-    "license": "UNLICENSED",
-    "type": "module",
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.mjs",
-    "types": "./dist/index.d.ts",
-    "typesVersions": {
-        "*": {
-            "dialog-tabs": [
-                "dist/dialog-tabs/index.d.ts"
-            ],
-            "buttons": [
-                "dist/buttons/index.d.ts"
-            ]
-        }
-    },
-    "files": [
-        "dist",
-        "README.md"
-    ],
-    "sideEffects": [
-        "*.css"
-    ],
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.cjs"
-        },
-        "./buttons": {
-            "types": "./dist/buttons/index.d.ts",
-            "import": "./dist/buttons/index.mjs",
-            "require": "./dist/buttons/index.cjs"
-        },
-        "./dialog-tabs": {
-            "types": "./dist/dialog-tabs/index.d.ts",
-            "import": "./dist/dialog-tabs/index.mjs",
-            "require": "./dist/dialog-tabs/index.cjs"
-        },
-        "./style.css": "./dist/style.css"
-    },
-    "scripts": {
-        "build": "vite build && vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly",
-        "docs:dev": "vite --config docs/vite.config.ts --host 0.0.0.0",
-        "docs:build": "vite build --config docs/vite.config.ts",
-        "docs:preview": "vite preview --config docs/vite.config.ts --host 0.0.0.0",
-        "typecheck": "vue-tsc -p tsconfig.build.json --noEmit"
-    },
-    "peerDependencies": {
-        "element-plus": "^2.8.5",
-        "vue": "^3.5.13",
-        "vue-router": "^4.4.5"
-    },
-    "devDependencies": {
-        "@element-plus/icons-vue": "2.3.2",
-        "@types/node": "^18.11.3",
-        "@vitejs/plugin-vue": "^5.1.4",
-        "typescript": "^5.6.3",
-        "vite": "^5.4.9",
-        "vue-router": "^4.4.5",
-        "vue-tsc": "2.1.6"
-    }
-}
+{
+    "name": "@cst-ui/nano-buttons",
+    "version": "0.3.1",
+    "description": "Nano themed Vue 3 button, table, pagination, and dialog tab components based on Element Plus.",
+    "license": "UNLICENSED",
+    "type": "module",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "typesVersions": {
+        "*": {
+            "dialog-tabs": [
+                "dist/dialog-tabs/index.d.ts"
+            ],
+            "buttons": [
+                "dist/buttons/index.d.ts"
+            ],
+            "table": [
+                "dist/table/index.d.ts"
+            ]
+        }
+    },
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "sideEffects": [
+        "*.css"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.cjs"
+        },
+        "./buttons": {
+            "types": "./dist/buttons/index.d.ts",
+            "import": "./dist/buttons/index.mjs",
+            "require": "./dist/buttons/index.cjs"
+        },
+        "./dialog-tabs": {
+            "types": "./dist/dialog-tabs/index.d.ts",
+            "import": "./dist/dialog-tabs/index.mjs",
+            "require": "./dist/dialog-tabs/index.cjs"
+        },
+        "./table": {
+            "types": "./dist/table/index.d.ts",
+            "import": "./dist/table/index.mjs",
+            "require": "./dist/table/index.cjs"
+        },
+        "./style.css": "./dist/style.css"
+    },
+    "scripts": {
+        "build": "vite build && vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly",
+        "docs:dev": "vite --config docs/vite.config.ts --host 0.0.0.0",
+        "docs:build": "vite build --config docs/vite.config.ts",
+        "docs:preview": "vite preview --config docs/vite.config.ts --host 0.0.0.0",
+        "typecheck": "vue-tsc -p tsconfig.build.json --noEmit"
+    },
+    "peerDependencies": {
+        "element-plus": "^2.8.5",
+        "vue": "^3.5.13",
+        "vue-router": "^4.4.5"
+    },
+    "devDependencies": {
+        "@element-plus/icons-vue": "2.3.2",
+        "@types/node": "^18.11.3",
+        "@vitejs/plugin-vue": "^5.1.4",
+        "typescript": "^5.6.3",
+        "vite": "^5.4.9",
+        "vue-router": "^4.4.5",
+        "vue-tsc": "2.1.6"
+    }
+}