@vtable-guild/vtable-guild 2.7.1 → 2.8.1

package/dist/css/tailwind3.css

@@ -11,6 +11,38 @@
 
 :where(:root),
 [data-vtg-preset='antdv'] {
+  --vtg-pagination-size: 32px;
+  --vtg-pagination-size-sm: 24px;
+  --vtg-pagination-gap: 8px;
+  --vtg-pagination-margin: 16px;
+  --vtg-pagination-radius: 6px;
+  --vtg-pagination-input-width: 50px;
+  --vtg-pagination-border: transparent;
+  --vtg-pagination-bg: transparent;
+  --vtg-pagination-hover-bg: var(--color-text-hover-bg);
+  --vtg-pagination-hover-color: var(--color-on-surface);
+  --vtg-pagination-active-hover-color: var(--color-primary-hover);
+  --vtg-pagination-option-hover-bg: var(--color-control-item-hover-bg);
+  --vtg-pagination-slash-margin: 2px;
+  --vtg-pagination-focus-shadow: 0 0 0 2px rgb(5 145 255 / 10%);
+  --vtg-pagination-motion-duration: 0.2s;
+  --vtg-pagination-motion-easing: cubic-bezier(0.23, 1, 0.32, 1);
+  --vtg-pagination-simple-input-width: 63px;
+  --vtg-pagination-select-padding: 9px;
+  --vtg-pagination-icon-size: 12px;
+  --vtg-pagination-active-weight: 600;
+  --vtg-pagination-active-disabled-bg: rgb(0 0 0 / 15%);
+  --vtg-pagination-active-bg: var(--color-surface);
+  --vtg-pagination-active-color: var(--color-primary);
+  --vtg-pagination-active-border: var(--color-primary);
+  --vtg-pagination-popup-z: 1050;
+  --vtg-pagination-popup-radius: 8px;
+  --vtg-pagination-option-height: 32px;
+  --vtg-pagination-option-active-color: var(--color-on-surface);
+  --vtg-pagination-option-active-bg: var(--vtg-table-row-selected-bg);
+  --vtg-pagination-popup-shadow:
+    0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+
   /* ===== 语义 token — antdv 设计体系值 ===== */
 
   /* 排版 */
@@ -94,6 +126,7 @@
 
   /* 筛选下拉选项 hover 背景 */
   --color-control-item-hover-bg: rgb(0 0 0 / 4%);
+  --color-text-hover-bg: rgb(0 0 0 / 6%);
 
   /* 筛选下拉选项选中态背景 */
   --color-control-item-active-bg: #e6f4ff;
@@ -135,6 +168,8 @@
 :where(.dark),
 .dark [data-vtg-preset='antdv'],
 [data-vtg-preset='antdv'].dark {
+  --vtg-pagination-active-disabled-bg: rgb(255 255 255 / 15%);
+
   /* ===== 语义 token 暗色值 — 只改语义 token，组件 token 自动跟随 ===== */
   --color-surface: #141414;
   --color-surface-hover: #1d1d1d;
@@ -172,6 +207,7 @@
 
   /* 筛选下拉选项 hover 背景 */
   --color-control-item-hover-bg: rgb(255 255 255 / 8%);
+  --color-text-hover-bg: rgb(255 255 255 / 12%);
 
   /* 筛选下拉选项选中态背景 */
   --color-control-item-active-bg: #111a2c;
@@ -200,6 +236,44 @@
  */
 
 [data-vtg-preset='element-plus'] {
+  --vtg-pagination-size: 32px;
+  --vtg-pagination-size-sm: 24px;
+  --vtg-pagination-font-size: 14px;
+  --vtg-pagination-font-size-sm: 12px;
+  --vtg-pagination-gap: 16px;
+  --vtg-pagination-page-gap: 0px;
+  --vtg-pagination-control-gap: 8px;
+  --vtg-pagination-margin: 16px;
+  --vtg-pagination-radius: 2px;
+  --vtg-pagination-input-width: 56px;
+  --vtg-pagination-border: transparent;
+  --vtg-pagination-bg: var(--color-surface);
+  --vtg-pagination-hover-bg: var(--color-surface);
+  --vtg-pagination-hover-color: var(--color-primary);
+  --vtg-pagination-active-hover-color: var(--color-primary-hover);
+  --vtg-pagination-option-hover-bg: var(--color-control-item-hover-bg);
+  --vtg-pagination-slash-margin: 2px;
+  --vtg-pagination-focus-shadow: 0 0 0 1px var(--color-primary) inset;
+  --vtg-pagination-motion-duration: 0.2s;
+  --vtg-pagination-motion-easing: cubic-bezier(0.23, 1, 0.32, 1);
+  --vtg-pagination-simple-input-width: 63px;
+  --vtg-pagination-select-padding: 12px;
+  --vtg-pagination-select-width: 128px;
+  --vtg-pagination-select-width-sm: 100px;
+  --vtg-pagination-icon-size: 12px;
+  --vtg-pagination-active-weight: 700;
+  --vtg-pagination-active-disabled-bg: var(--color-surface);
+  --vtg-pagination-active-bg: var(--color-surface);
+  --vtg-pagination-active-color: var(--color-primary);
+  --vtg-pagination-active-border: transparent;
+  --vtg-pagination-popup-z: 2000;
+  --vtg-pagination-popup-radius: 4px;
+  --vtg-pagination-option-height: 34px;
+  --vtg-pagination-popup-padding: 6px;
+  --vtg-pagination-option-active-color: var(--color-primary);
+  --vtg-pagination-option-active-bg: var(--color-surface-hover);
+  --vtg-pagination-popup-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
   /* ===== 语义 token — element-plus 设计体系值 ===== */
 
   /* 排版 */
@@ -409,6 +483,31 @@
   transform: scaleY(1);
 }
 
+/* Pagination popup origin follows its measured above/below placement. */
+.vtg-pagination-popup-enter-active,
+.vtg-pagination-popup-leave-active {
+  transition:
+    opacity var(--vtg-pagination-motion-duration) var(--vtg-pagination-motion-easing),
+    transform var(--vtg-pagination-motion-duration) var(--vtg-pagination-motion-easing);
+}
+
+.vtg-pagination-popup-enter-from,
+.vtg-pagination-popup-leave-to {
+  opacity: 0;
+  transform: scaleY(0.8);
+}
+
+.vtg-pagination-popup-leave-active {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vtg-pagination-popup-enter-active,
+  .vtg-pagination-popup-leave-active {
+    transition: none;
+  }
+}
+
 /* @vtable-guild/theme/css — 默认入口 */
 
 /*

package/dist/css/tailwind4.css

@@ -53,6 +53,38 @@
 
 :where(:root),
 [data-vtg-preset='antdv'] {
+  --vtg-pagination-size: 32px;
+  --vtg-pagination-size-sm: 24px;
+  --vtg-pagination-gap: 8px;
+  --vtg-pagination-margin: 16px;
+  --vtg-pagination-radius: 6px;
+  --vtg-pagination-input-width: 50px;
+  --vtg-pagination-border: transparent;
+  --vtg-pagination-bg: transparent;
+  --vtg-pagination-hover-bg: var(--color-text-hover-bg);
+  --vtg-pagination-hover-color: var(--color-on-surface);
+  --vtg-pagination-active-hover-color: var(--color-primary-hover);
+  --vtg-pagination-option-hover-bg: var(--color-control-item-hover-bg);
+  --vtg-pagination-slash-margin: 2px;
+  --vtg-pagination-focus-shadow: 0 0 0 2px rgb(5 145 255 / 10%);
+  --vtg-pagination-motion-duration: 0.2s;
+  --vtg-pagination-motion-easing: cubic-bezier(0.23, 1, 0.32, 1);
+  --vtg-pagination-simple-input-width: 63px;
+  --vtg-pagination-select-padding: 9px;
+  --vtg-pagination-icon-size: 12px;
+  --vtg-pagination-active-weight: 600;
+  --vtg-pagination-active-disabled-bg: rgb(0 0 0 / 15%);
+  --vtg-pagination-active-bg: var(--color-surface);
+  --vtg-pagination-active-color: var(--color-primary);
+  --vtg-pagination-active-border: var(--color-primary);
+  --vtg-pagination-popup-z: 1050;
+  --vtg-pagination-popup-radius: 8px;
+  --vtg-pagination-option-height: 32px;
+  --vtg-pagination-option-active-color: var(--color-on-surface);
+  --vtg-pagination-option-active-bg: var(--vtg-table-row-selected-bg);
+  --vtg-pagination-popup-shadow:
+    0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+
   /* ===== 语义 token — antdv 设计体系值 ===== */
 
   /* 排版 */
@@ -136,6 +168,7 @@
 
   /* 筛选下拉选项 hover 背景 */
   --color-control-item-hover-bg: rgb(0 0 0 / 4%);
+  --color-text-hover-bg: rgb(0 0 0 / 6%);
 
   /* 筛选下拉选项选中态背景 */
   --color-control-item-active-bg: #e6f4ff;
@@ -177,6 +210,8 @@
 :where(.dark),
 .dark [data-vtg-preset='antdv'],
 [data-vtg-preset='antdv'].dark {
+  --vtg-pagination-active-disabled-bg: rgb(255 255 255 / 15%);
+
   /* ===== 语义 token 暗色值 — 只改语义 token，组件 token 自动跟随 ===== */
   --color-surface: #141414;
   --color-surface-hover: #1d1d1d;
@@ -214,6 +249,7 @@
 
   /* 筛选下拉选项 hover 背景 */
   --color-control-item-hover-bg: rgb(255 255 255 / 8%);
+  --color-text-hover-bg: rgb(255 255 255 / 12%);
 
   /* 筛选下拉选项选中态背景 */
   --color-control-item-active-bg: #111a2c;
@@ -242,6 +278,44 @@
  */
 
 [data-vtg-preset='element-plus'] {
+  --vtg-pagination-size: 32px;
+  --vtg-pagination-size-sm: 24px;
+  --vtg-pagination-font-size: 14px;
+  --vtg-pagination-font-size-sm: 12px;
+  --vtg-pagination-gap: 16px;
+  --vtg-pagination-page-gap: 0px;
+  --vtg-pagination-control-gap: 8px;
+  --vtg-pagination-margin: 16px;
+  --vtg-pagination-radius: 2px;
+  --vtg-pagination-input-width: 56px;
+  --vtg-pagination-border: transparent;
+  --vtg-pagination-bg: var(--color-surface);
+  --vtg-pagination-hover-bg: var(--color-surface);
+  --vtg-pagination-hover-color: var(--color-primary);
+  --vtg-pagination-active-hover-color: var(--color-primary-hover);
+  --vtg-pagination-option-hover-bg: var(--color-control-item-hover-bg);
+  --vtg-pagination-slash-margin: 2px;
+  --vtg-pagination-focus-shadow: 0 0 0 1px var(--color-primary) inset;
+  --vtg-pagination-motion-duration: 0.2s;
+  --vtg-pagination-motion-easing: cubic-bezier(0.23, 1, 0.32, 1);
+  --vtg-pagination-simple-input-width: 63px;
+  --vtg-pagination-select-padding: 12px;
+  --vtg-pagination-select-width: 128px;
+  --vtg-pagination-select-width-sm: 100px;
+  --vtg-pagination-icon-size: 12px;
+  --vtg-pagination-active-weight: 700;
+  --vtg-pagination-active-disabled-bg: var(--color-surface);
+  --vtg-pagination-active-bg: var(--color-surface);
+  --vtg-pagination-active-color: var(--color-primary);
+  --vtg-pagination-active-border: transparent;
+  --vtg-pagination-popup-z: 2000;
+  --vtg-pagination-popup-radius: 4px;
+  --vtg-pagination-option-height: 34px;
+  --vtg-pagination-popup-padding: 6px;
+  --vtg-pagination-option-active-color: var(--color-primary);
+  --vtg-pagination-option-active-bg: var(--color-surface-hover);
+  --vtg-pagination-popup-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
   /* ===== 语义 token — element-plus 设计体系值 ===== */
 
   /* 排版 */
@@ -451,6 +525,31 @@
   transform: scaleY(1);
 }
 
+/* Pagination popup origin follows its measured above/below placement. */
+.vtg-pagination-popup-enter-active,
+.vtg-pagination-popup-leave-active {
+  transition:
+    opacity var(--vtg-pagination-motion-duration) var(--vtg-pagination-motion-easing),
+    transform var(--vtg-pagination-motion-duration) var(--vtg-pagination-motion-easing);
+}
+
+.vtg-pagination-popup-enter-from,
+.vtg-pagination-popup-leave-to {
+  opacity: 0;
+  transform: scaleY(0.8);
+}
+
+.vtg-pagination-popup-leave-active {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vtg-pagination-popup-enter-active,
+  .vtg-pagination-popup-leave-active {
+    transition: none;
+  }
+}
+
 /* @vtable-guild/theme/css — 默认入口 */
 
 /*

package/dist/css/transitions.css

@@ -19,3 +19,28 @@
   opacity: 1;
   transform: scaleY(1);
 }
+
+/* Pagination popup origin follows its measured above/below placement. */
+.vtg-pagination-popup-enter-active,
+.vtg-pagination-popup-leave-active {
+  transition:
+    opacity var(--vtg-pagination-motion-duration) var(--vtg-pagination-motion-easing),
+    transform var(--vtg-pagination-motion-duration) var(--vtg-pagination-motion-easing);
+}
+
+.vtg-pagination-popup-enter-from,
+.vtg-pagination-popup-leave-to {
+  opacity: 0;
+  transform: scaleY(0.8);
+}
+
+.vtg-pagination-popup-leave-active {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vtg-pagination-popup-enter-active,
+  .vtg-pagination-popup-leave-active {
+    transition: none;
+  }
+}

package/dist/index.d.ts

@@ -1,28 +1,2 @@
 export * from './vtable-guild/src/index'
 export {}
-
-// Module augmentation for @vtable-guild/core
-// This file ensures type hints work correctly when importing from @vtable-guild/vtable-guild
-
-import type { ThemeOverrideConfig } from '@vtable-guild/core'
-import type {
-  TableThemeConfig,
-  ButtonThemeConfig,
-  CheckboxThemeConfig,
-  RadioThemeConfig,
-  InputThemeConfig,
-  TooltipThemeConfig,
-  ScrollbarThemeConfig,
-} from '@vtable-guild/theme'
-
-declare module '@vtable-guild/core' {
-  interface VTableGuildThemeOverridesMap {
-    table: ThemeOverrideConfig<TableThemeConfig>
-    button: ThemeOverrideConfig<ButtonThemeConfig>
-    checkbox: ThemeOverrideConfig<CheckboxThemeConfig>
-    radio: ThemeOverrideConfig<RadioThemeConfig>
-    input: ThemeOverrideConfig<InputThemeConfig>
-    tooltip: ThemeOverrideConfig<TooltipThemeConfig>
-    scrollbar: ThemeOverrideConfig<ScrollbarThemeConfig>
-  }
-}