@vtable-guild/vtable-guild 2.9.0-alpha.1 → 2.9.0-alpha.2

package/css/presets/antdv.css

@@ -28,6 +28,16 @@
   --vtg-cell-tag-line-height: 20px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 8%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 14px;
+  --vtg-editor-radius: 6px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
   --vtg-column-settings-radius: 8px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 1050;

package/css/presets/element-plus.css

@@ -31,6 +31,16 @@
   --vtg-cell-tag-line-height: 22px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 10%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 12px;
+  --vtg-editor-radius: 4px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: var(--color-default);
   --vtg-column-settings-radius: 4px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 2000;

package/css/style.css

@@ -30,6 +30,16 @@
   --vtg-cell-tag-line-height: 20px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 8%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 14px;
+  --vtg-editor-radius: 6px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
   --vtg-column-settings-radius: 8px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 1050;
@@ -281,6 +291,16 @@
   --vtg-cell-tag-line-height: 22px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 10%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 12px;
+  --vtg-editor-radius: 4px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: var(--color-default);
   --vtg-column-settings-radius: 4px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 2000;
@@ -819,6 +839,9 @@
 .vtg-mt-2 {
     margin-top: 0.5rem
 }
+.vtg-mt-\[var\(--vtg-editor-error-gap\)\] {
+    margin-top: var(--vtg-editor-error-gap)
+}
 .vtg-box-border {
     box-sizing: border-box
 }
@@ -849,6 +872,12 @@
 .vtg-table-cell {
     display: table-cell
 }
+.vtg-grid {
+    display: grid
+}
+.\!vtg-hidden {
+    display: none !important
+}
 .vtg-hidden {
     display: none
 }
@@ -897,6 +926,9 @@
 .vtg-h-\[var\(--vtg-btn-height-sm\)\] {
     height: var(--vtg-btn-height-sm)
 }
+.vtg-h-\[var\(--vtg-cell-progress-height\)\] {
+    height: var(--vtg-cell-progress-height)
+}
 .vtg-h-\[var\(--vtg-checkbox-size\)\] {
     height: var(--vtg-checkbox-size)
 }
@@ -912,6 +944,9 @@
 .vtg-h-\[var\(--vtg-pagination-size\)\] {
     height: var(--vtg-pagination-size)
 }
+.vtg-h-\[var\(--vtg-query-control-height\,32px\)\] {
+    height: var(--vtg-query-control-height,32px)
+}
 .vtg-h-\[var\(--vtg-radio-size\)\] {
     height: var(--vtg-radio-size)
 }
@@ -945,6 +980,9 @@
 .vtg-min-h-\[var\(--vtg-pagination-option-height\)\] {
     min-height: var(--vtg-pagination-option-height)
 }
+.vtg-min-h-\[var\(--vtg-query-control-height\,32px\)\] {
+    min-height: var(--vtg-query-control-height,32px)
+}
 .vtg-w-0 {
     width: 0px
 }
@@ -1002,6 +1040,12 @@
 .vtg-w-\[var\(--vtg-pagination-simple-input-width\)\] {
     width: var(--vtg-pagination-simple-input-width)
 }
+.vtg-w-\[var\(--vtg-query-label-width\,80px\)\] {
+    width: var(--vtg-query-label-width,80px)
+}
+.vtg-w-\[var\(--vtg-query-light-field-width\,240px\)\] {
+    width: var(--vtg-query-light-field-width,240px)
+}
 .vtg-w-\[var\(--vtg-radio-size\)\] {
     width: var(--vtg-radio-size)
 }
@@ -1041,6 +1085,12 @@
 .vtg-min-w-\[80px\] {
     min-width: 80px
 }
+.vtg-min-w-\[min\(100\%\,calc\(var\(--vtg-query-field-min-width\,240px\)\*2_\+_var\(--vtg-query-column-gap\,24px\)\)\)\] {
+    min-width: min(100%, calc(var(--vtg-query-field-min-width,240px) * 2 + var(--vtg-query-column-gap,24px)))
+}
+.vtg-min-w-\[var\(--vtg-cell-progress-min-width\)\] {
+    min-width: var(--vtg-cell-progress-min-width)
+}
 .vtg-min-w-\[var\(--vtg-pagination-size\)\] {
     min-width: var(--vtg-pagination-size)
 }
@@ -1053,6 +1103,9 @@
 .vtg-max-w-\[calc\(100vw-16px\)\] {
     max-width: calc(100vw - 16px)
 }
+.vtg-max-w-\[var\(--vtg-cell-progress-max-width\)\] {
+    max-width: var(--vtg-cell-progress-max-width)
+}
 .vtg-max-w-full {
     max-width: 100%
 }
@@ -1218,6 +1271,9 @@
 .vtg-gap-4 {
     gap: 1rem
 }
+.vtg-gap-\[var\(--vtg-cell-progress-gap\)\] {
+    gap: var(--vtg-cell-progress-gap)
+}
 .vtg-gap-\[var\(--vtg-pagination-control-gap\)\] {
     gap: var(--vtg-pagination-control-gap)
 }
@@ -1227,15 +1283,27 @@
 .vtg-gap-\[var\(--vtg-pagination-page-gap\)\] {
     gap: var(--vtg-pagination-page-gap)
 }
+.vtg-gap-\[var\(--vtg-query-action-gap\,8px\)\] {
+    gap: var(--vtg-query-action-gap,8px)
+}
+.vtg-gap-\[var\(--vtg-query-label-gap\,12px\)\] {
+    gap: var(--vtg-query-label-gap,12px)
+}
 .vtg-gap-x-4 {
     column-gap: 1rem
 }
+.vtg-gap-x-\[var\(--vtg-query-column-gap\,24px\)\] {
+    column-gap: var(--vtg-query-column-gap,24px)
+}
 .vtg-gap-y-2 {
     row-gap: 0.5rem
 }
 .vtg-gap-y-3 {
     row-gap: 0.75rem
 }
+.vtg-gap-y-\[var\(--vtg-query-row-gap\,16px\)\] {
+    row-gap: var(--vtg-query-row-gap,16px)
+}
 .vtg-self-stretch {
     align-self: stretch
 }
@@ -1295,6 +1363,9 @@
 .vtg-rounded-\[var\(--vtg-btn-border-radius-sm\,4px\)\] {
     border-radius: var(--vtg-btn-border-radius-sm,4px)
 }
+.vtg-rounded-\[var\(--vtg-cell-progress-radius\)\] {
+    border-radius: var(--vtg-cell-progress-radius)
+}
 .vtg-rounded-\[var\(--vtg-cell-tag-radius\)\] {
     border-radius: var(--vtg-cell-tag-radius)
 }
@@ -1304,6 +1375,9 @@
 .vtg-rounded-\[var\(--vtg-column-settings-radius\)\] {
     border-radius: var(--vtg-column-settings-radius)
 }
+.vtg-rounded-\[var\(--vtg-editor-radius\)\] {
+    border-radius: var(--vtg-editor-radius)
+}
 .vtg-rounded-\[var\(--vtg-input-border-radius\)\] {
     border-radius: var(--vtg-input-border-radius)
 }
@@ -1313,6 +1387,12 @@
 .vtg-rounded-\[var\(--vtg-pagination-radius\)\] {
     border-radius: var(--vtg-pagination-radius)
 }
+.vtg-rounded-\[var\(--vtg-query-radius\,4px\)\] {
+    border-radius: var(--vtg-query-radius,4px)
+}
+.vtg-rounded-\[var\(--vtg-query-radius\,6px\)\] {
+    border-radius: var(--vtg-query-radius,6px)
+}
 .vtg-rounded-\[var\(--vtg-scrollbar-thumb-radius\)\] {
     border-radius: var(--vtg-scrollbar-thumb-radius)
 }
@@ -1461,6 +1541,9 @@
 .vtg-bg-\[color\:var\(--color-surface-hover\)\] {
     background-color: var(--color-surface-hover)
 }
+.vtg-bg-\[color\:var\(--vtg-cell-progress-trail\)\] {
+    background-color: var(--vtg-cell-progress-trail)
+}
 .vtg-bg-\[color\:var\(--vtg-cell-tag-bg\)\] {
     background-color: var(--vtg-cell-tag-bg)
 }
@@ -1567,6 +1650,12 @@
 .vtg-p-3 {
     padding: 0.75rem
 }
+.vtg-p-\[var\(--vtg-query-light-padding\,16px\)\] {
+    padding: var(--vtg-query-light-padding,16px)
+}
+.vtg-p-\[var\(--vtg-query-padding\,24px\)\] {
+    padding: var(--vtg-query-padding,24px)
+}
 .vtg-p-\[var\(--vtg-tooltip-padding\)\] {
     padding: var(--vtg-tooltip-padding)
 }
@@ -1762,18 +1851,27 @@
 .vtg-text-\[length\:42px\] {
     font-size: 42px
 }
+.vtg-text-\[length\:var\(--vtg-cell-progress-font-size\)\] {
+    font-size: var(--vtg-cell-progress-font-size)
+}
 .vtg-text-\[length\:var\(--vtg-cell-tag-font-size\)\] {
     font-size: var(--vtg-cell-tag-font-size)
 }
 .vtg-text-\[length\:var\(--vtg-column-settings-icon-size\)\] {
     font-size: var(--vtg-column-settings-icon-size)
 }
+.vtg-text-\[length\:var\(--vtg-editor-error-font-size\)\] {
+    font-size: var(--vtg-editor-error-font-size)
+}
 .vtg-text-\[length\:var\(--vtg-input-font-size\)\] {
     font-size: var(--vtg-input-font-size)
 }
 .vtg-text-\[length\:var\(--vtg-pagination-font-size\)\] {
     font-size: var(--vtg-pagination-font-size)
 }
+.vtg-text-\[length\:var\(--vtg-query-error-font-size\,12px\)\] {
+    font-size: var(--vtg-query-error-font-size,12px)
+}
 .vtg-text-\[length\:var\(--vtg-table-font-size\)\] {
     font-size: var(--vtg-table-font-size)
 }
@@ -1818,6 +1916,10 @@
 .vtg-italic {
     font-style: italic
 }
+.vtg-tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,  ) var(--tw-slashed-zero,  ) var(--tw-numeric-figure,  ) var(--tw-numeric-spacing,  ) var(--tw-numeric-fraction,  )
+}
 .vtg-leading-5 {
     line-height: 1.25rem
 }
@@ -1887,6 +1989,9 @@
 .vtg-text-\[color\:var\(--color-text-regular\)\] {
     color: var(--color-text-regular)
 }
+.vtg-text-\[color\:var\(--vtg-cell-error\)\] {
+    color: var(--vtg-cell-error)
+}
 .vtg-text-\[color\:var\(--vtg-pagination-active-color\)\] {
     color: var(--vtg-pagination-active-color)
 }
@@ -2133,6 +2238,9 @@
 .\[background-size\:1px_1\.6em\] {
     background-size: 1px 1.6em
 }
+.\[grid-template-columns\:repeat\(auto-fit\2c minmax\(min\(100\%\2c var\(--vtg-query-field-min-width\2c 240px\)\)\2c 1fr\)\)\] {
+    grid-template-columns: repeat(auto-fit,minmax(min(100%, var(--vtg-query-field-min-width,240px)),1fr))
+}
 .\[transform-origin\:center\] {
     transform-origin: center
 }
@@ -2841,6 +2949,12 @@
 .\[\&\:not\(\[draggable\=true\]\)\]\:vtg-cursor-not-allowed:not([draggable=true]) {
     cursor: not-allowed
 }
+.\[\&\>\*\]\:vtg-w-full>* {
+    width: 100%
+}
+.\[\&\>\.el-button\+\.el-button\]\:\!vtg-ml-0>.el-button+.el-button {
+    margin-left: 0px !important
+}
 .\[\&\>div\]\:vtg-min-w-0>div {
     min-width: 0px
 }
@@ -2864,6 +2978,9 @@
     margin-left: auto;
     margin-right: auto
 }
+.\[\&\>svg\]\:vtg-inline-block>svg {
+    display: inline-block
+}
 .\[\&\>svg\]\:vtg-h-\[1em\]>svg {
     height: 1em
 }
@@ -2876,6 +2993,9 @@
 .\[\&\>svg\]\:vtg-w-auto>svg {
     width: auto
 }
+.\[\&\>svg\]\:vtg-align-middle>svg {
+    vertical-align: middle
+}
 .\[\&\>td\]\:vtg-shadow-\[inset_0_-2px_0_0_var\(--vtg-table-row-drop-indicator-color\)\]>td {
     --tw-shadow: inset 0 -2px 0 0 var(--vtg-table-row-drop-indicator-color);
     --tw-shadow-colored: inset 0 -2px 0 0 var(--tw-shadow-color);
@@ -2886,6 +3006,18 @@
     --tw-shadow-colored: inset 0 2px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000)
 }
+.\[\&\[data-invalid\=true\]\]\:vtg-outline[data-invalid=true] {
+    outline-style: solid
+}
+.\[\&\[data-invalid\=true\]\]\:vtg-outline-1[data-invalid=true] {
+    outline-width: 1px
+}
+.\[\&\[data-invalid\=true\]\]\:vtg-outline-\[color\:var\(--vtg-cell-error\)\][data-invalid=true] {
+    outline-color: var(--vtg-cell-error)
+}
+.\[\&\[data-status\=error\]\]\:vtg-bg-\[color\:var\(--vtg-cell-error\)\][data-status=error] {
+    background-color: var(--vtg-cell-error)
+}
 .\[\&\[data-status\=error\]\]\:vtg-text-\[color\:var\(--vtg-cell-error\)\][data-status=error] {
     color: var(--vtg-cell-error)
 }
@@ -2900,6 +3032,9 @@
     content: var(--tw-content, '');
     background-color: var(--color-primary)
 }
+.\[\&\[data-status\=success\]\]\:vtg-bg-\[color\:var\(--vtg-cell-success\)\][data-status=success] {
+    background-color: var(--vtg-cell-success)
+}
 .\[\&\[data-status\=success\]\]\:vtg-text-\[color\:var\(--vtg-cell-success\)\][data-status=success] {
     color: var(--vtg-cell-success)
 }
@@ -2907,6 +3042,9 @@
     content: var(--tw-content, '');
     background-color: var(--vtg-cell-success)
 }
+.\[\&\[data-status\=warning\]\]\:vtg-bg-\[color\:var\(--vtg-cell-warning\)\][data-status=warning] {
+    background-color: var(--vtg-cell-warning)
+}
 .\[\&\[data-status\=warning\]\]\:vtg-text-\[color\:var\(--vtg-cell-warning\)\][data-status=warning] {
     color: var(--vtg-cell-warning)
 }

package/css/tailwind3-utilities.css

@@ -163,6 +163,9 @@
 .vtg-mt-2 {
     margin-top: 0.5rem
 }
+.vtg-mt-\[var\(--vtg-editor-error-gap\)\] {
+    margin-top: var(--vtg-editor-error-gap)
+}
 .vtg-box-border {
     box-sizing: border-box
 }
@@ -193,6 +196,12 @@
 .vtg-table-cell {
     display: table-cell
 }
+.vtg-grid {
+    display: grid
+}
+.\!vtg-hidden {
+    display: none !important
+}
 .vtg-hidden {
     display: none
 }
@@ -241,6 +250,9 @@
 .vtg-h-\[var\(--vtg-btn-height-sm\)\] {
     height: var(--vtg-btn-height-sm)
 }
+.vtg-h-\[var\(--vtg-cell-progress-height\)\] {
+    height: var(--vtg-cell-progress-height)
+}
 .vtg-h-\[var\(--vtg-checkbox-size\)\] {
     height: var(--vtg-checkbox-size)
 }
@@ -256,6 +268,9 @@
 .vtg-h-\[var\(--vtg-pagination-size\)\] {
     height: var(--vtg-pagination-size)
 }
+.vtg-h-\[var\(--vtg-query-control-height\,32px\)\] {
+    height: var(--vtg-query-control-height,32px)
+}
 .vtg-h-\[var\(--vtg-radio-size\)\] {
     height: var(--vtg-radio-size)
 }
@@ -289,6 +304,9 @@
 .vtg-min-h-\[var\(--vtg-pagination-option-height\)\] {
     min-height: var(--vtg-pagination-option-height)
 }
+.vtg-min-h-\[var\(--vtg-query-control-height\,32px\)\] {
+    min-height: var(--vtg-query-control-height,32px)
+}
 .vtg-w-0 {
     width: 0px
 }
@@ -346,6 +364,12 @@
 .vtg-w-\[var\(--vtg-pagination-simple-input-width\)\] {
     width: var(--vtg-pagination-simple-input-width)
 }
+.vtg-w-\[var\(--vtg-query-label-width\,80px\)\] {
+    width: var(--vtg-query-label-width,80px)
+}
+.vtg-w-\[var\(--vtg-query-light-field-width\,240px\)\] {
+    width: var(--vtg-query-light-field-width,240px)
+}
 .vtg-w-\[var\(--vtg-radio-size\)\] {
     width: var(--vtg-radio-size)
 }
@@ -385,6 +409,12 @@
 .vtg-min-w-\[80px\] {
     min-width: 80px
 }
+.vtg-min-w-\[min\(100\%\,calc\(var\(--vtg-query-field-min-width\,240px\)\*2_\+_var\(--vtg-query-column-gap\,24px\)\)\)\] {
+    min-width: min(100%, calc(var(--vtg-query-field-min-width,240px) * 2 + var(--vtg-query-column-gap,24px)))
+}
+.vtg-min-w-\[var\(--vtg-cell-progress-min-width\)\] {
+    min-width: var(--vtg-cell-progress-min-width)
+}
 .vtg-min-w-\[var\(--vtg-pagination-size\)\] {
     min-width: var(--vtg-pagination-size)
 }
@@ -397,6 +427,9 @@
 .vtg-max-w-\[calc\(100vw-16px\)\] {
     max-width: calc(100vw - 16px)
 }
+.vtg-max-w-\[var\(--vtg-cell-progress-max-width\)\] {
+    max-width: var(--vtg-cell-progress-max-width)
+}
 .vtg-max-w-full {
     max-width: 100%
 }
@@ -562,6 +595,9 @@
 .vtg-gap-4 {
     gap: 1rem
 }
+.vtg-gap-\[var\(--vtg-cell-progress-gap\)\] {
+    gap: var(--vtg-cell-progress-gap)
+}
 .vtg-gap-\[var\(--vtg-pagination-control-gap\)\] {
     gap: var(--vtg-pagination-control-gap)
 }
@@ -571,15 +607,27 @@
 .vtg-gap-\[var\(--vtg-pagination-page-gap\)\] {
     gap: var(--vtg-pagination-page-gap)
 }
+.vtg-gap-\[var\(--vtg-query-action-gap\,8px\)\] {
+    gap: var(--vtg-query-action-gap,8px)
+}
+.vtg-gap-\[var\(--vtg-query-label-gap\,12px\)\] {
+    gap: var(--vtg-query-label-gap,12px)
+}
 .vtg-gap-x-4 {
     column-gap: 1rem
 }
+.vtg-gap-x-\[var\(--vtg-query-column-gap\,24px\)\] {
+    column-gap: var(--vtg-query-column-gap,24px)
+}
 .vtg-gap-y-2 {
     row-gap: 0.5rem
 }
 .vtg-gap-y-3 {
     row-gap: 0.75rem
 }
+.vtg-gap-y-\[var\(--vtg-query-row-gap\,16px\)\] {
+    row-gap: var(--vtg-query-row-gap,16px)
+}
 .vtg-self-stretch {
     align-self: stretch
 }
@@ -639,6 +687,9 @@
 .vtg-rounded-\[var\(--vtg-btn-border-radius-sm\,4px\)\] {
     border-radius: var(--vtg-btn-border-radius-sm,4px)
 }
+.vtg-rounded-\[var\(--vtg-cell-progress-radius\)\] {
+    border-radius: var(--vtg-cell-progress-radius)
+}
 .vtg-rounded-\[var\(--vtg-cell-tag-radius\)\] {
     border-radius: var(--vtg-cell-tag-radius)
 }
@@ -648,6 +699,9 @@
 .vtg-rounded-\[var\(--vtg-column-settings-radius\)\] {
     border-radius: var(--vtg-column-settings-radius)
 }
+.vtg-rounded-\[var\(--vtg-editor-radius\)\] {
+    border-radius: var(--vtg-editor-radius)
+}
 .vtg-rounded-\[var\(--vtg-input-border-radius\)\] {
     border-radius: var(--vtg-input-border-radius)
 }
@@ -657,6 +711,12 @@
 .vtg-rounded-\[var\(--vtg-pagination-radius\)\] {
     border-radius: var(--vtg-pagination-radius)
 }
+.vtg-rounded-\[var\(--vtg-query-radius\,4px\)\] {
+    border-radius: var(--vtg-query-radius,4px)
+}
+.vtg-rounded-\[var\(--vtg-query-radius\,6px\)\] {
+    border-radius: var(--vtg-query-radius,6px)
+}
 .vtg-rounded-\[var\(--vtg-scrollbar-thumb-radius\)\] {
     border-radius: var(--vtg-scrollbar-thumb-radius)
 }
@@ -805,6 +865,9 @@
 .vtg-bg-\[color\:var\(--color-surface-hover\)\] {
     background-color: var(--color-surface-hover)
 }
+.vtg-bg-\[color\:var\(--vtg-cell-progress-trail\)\] {
+    background-color: var(--vtg-cell-progress-trail)
+}
 .vtg-bg-\[color\:var\(--vtg-cell-tag-bg\)\] {
     background-color: var(--vtg-cell-tag-bg)
 }
@@ -911,6 +974,12 @@
 .vtg-p-3 {
     padding: 0.75rem
 }
+.vtg-p-\[var\(--vtg-query-light-padding\,16px\)\] {
+    padding: var(--vtg-query-light-padding,16px)
+}
+.vtg-p-\[var\(--vtg-query-padding\,24px\)\] {
+    padding: var(--vtg-query-padding,24px)
+}
 .vtg-p-\[var\(--vtg-tooltip-padding\)\] {
     padding: var(--vtg-tooltip-padding)
 }
@@ -1106,18 +1175,27 @@
 .vtg-text-\[length\:42px\] {
     font-size: 42px
 }
+.vtg-text-\[length\:var\(--vtg-cell-progress-font-size\)\] {
+    font-size: var(--vtg-cell-progress-font-size)
+}
 .vtg-text-\[length\:var\(--vtg-cell-tag-font-size\)\] {
     font-size: var(--vtg-cell-tag-font-size)
 }
 .vtg-text-\[length\:var\(--vtg-column-settings-icon-size\)\] {
     font-size: var(--vtg-column-settings-icon-size)
 }
+.vtg-text-\[length\:var\(--vtg-editor-error-font-size\)\] {
+    font-size: var(--vtg-editor-error-font-size)
+}
 .vtg-text-\[length\:var\(--vtg-input-font-size\)\] {
     font-size: var(--vtg-input-font-size)
 }
 .vtg-text-\[length\:var\(--vtg-pagination-font-size\)\] {
     font-size: var(--vtg-pagination-font-size)
 }
+.vtg-text-\[length\:var\(--vtg-query-error-font-size\,12px\)\] {
+    font-size: var(--vtg-query-error-font-size,12px)
+}
 .vtg-text-\[length\:var\(--vtg-table-font-size\)\] {
     font-size: var(--vtg-table-font-size)
 }
@@ -1162,6 +1240,10 @@
 .vtg-italic {
     font-style: italic
 }
+.vtg-tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,  ) var(--tw-slashed-zero,  ) var(--tw-numeric-figure,  ) var(--tw-numeric-spacing,  ) var(--tw-numeric-fraction,  )
+}
 .vtg-leading-5 {
     line-height: 1.25rem
 }
@@ -1231,6 +1313,9 @@
 .vtg-text-\[color\:var\(--color-text-regular\)\] {
     color: var(--color-text-regular)
 }
+.vtg-text-\[color\:var\(--vtg-cell-error\)\] {
+    color: var(--vtg-cell-error)
+}
 .vtg-text-\[color\:var\(--vtg-pagination-active-color\)\] {
     color: var(--vtg-pagination-active-color)
 }
@@ -1477,6 +1562,9 @@
 .\[background-size\:1px_1\.6em\] {
     background-size: 1px 1.6em
 }
+.\[grid-template-columns\:repeat\(auto-fit\2c minmax\(min\(100\%\2c var\(--vtg-query-field-min-width\2c 240px\)\)\2c 1fr\)\)\] {
+    grid-template-columns: repeat(auto-fit,minmax(min(100%, var(--vtg-query-field-min-width,240px)),1fr))
+}
 .\[transform-origin\:center\] {
     transform-origin: center
 }
@@ -2185,6 +2273,12 @@
 .\[\&\:not\(\[draggable\=true\]\)\]\:vtg-cursor-not-allowed:not([draggable=true]) {
     cursor: not-allowed
 }
+.\[\&\>\*\]\:vtg-w-full>* {
+    width: 100%
+}
+.\[\&\>\.el-button\+\.el-button\]\:\!vtg-ml-0>.el-button+.el-button {
+    margin-left: 0px !important
+}
 .\[\&\>div\]\:vtg-min-w-0>div {
     min-width: 0px
 }
@@ -2208,6 +2302,9 @@
     margin-left: auto;
     margin-right: auto
 }
+.\[\&\>svg\]\:vtg-inline-block>svg {
+    display: inline-block
+}
 .\[\&\>svg\]\:vtg-h-\[1em\]>svg {
     height: 1em
 }
@@ -2220,6 +2317,9 @@
 .\[\&\>svg\]\:vtg-w-auto>svg {
     width: auto
 }
+.\[\&\>svg\]\:vtg-align-middle>svg {
+    vertical-align: middle
+}
 .\[\&\>td\]\:vtg-shadow-\[inset_0_-2px_0_0_var\(--vtg-table-row-drop-indicator-color\)\]>td {
     --tw-shadow: inset 0 -2px 0 0 var(--vtg-table-row-drop-indicator-color);
     --tw-shadow-colored: inset 0 -2px 0 0 var(--tw-shadow-color);
@@ -2230,6 +2330,18 @@
     --tw-shadow-colored: inset 0 2px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000)
 }
+.\[\&\[data-invalid\=true\]\]\:vtg-outline[data-invalid=true] {
+    outline-style: solid
+}
+.\[\&\[data-invalid\=true\]\]\:vtg-outline-1[data-invalid=true] {
+    outline-width: 1px
+}
+.\[\&\[data-invalid\=true\]\]\:vtg-outline-\[color\:var\(--vtg-cell-error\)\][data-invalid=true] {
+    outline-color: var(--vtg-cell-error)
+}
+.\[\&\[data-status\=error\]\]\:vtg-bg-\[color\:var\(--vtg-cell-error\)\][data-status=error] {
+    background-color: var(--vtg-cell-error)
+}
 .\[\&\[data-status\=error\]\]\:vtg-text-\[color\:var\(--vtg-cell-error\)\][data-status=error] {
     color: var(--vtg-cell-error)
 }
@@ -2244,6 +2356,9 @@
     content: var(--tw-content, '');
     background-color: var(--color-primary)
 }
+.\[\&\[data-status\=success\]\]\:vtg-bg-\[color\:var\(--vtg-cell-success\)\][data-status=success] {
+    background-color: var(--vtg-cell-success)
+}
 .\[\&\[data-status\=success\]\]\:vtg-text-\[color\:var\(--vtg-cell-success\)\][data-status=success] {
     color: var(--vtg-cell-success)
 }
@@ -2251,6 +2366,9 @@
     content: var(--tw-content, '');
     background-color: var(--vtg-cell-success)
 }
+.\[\&\[data-status\=warning\]\]\:vtg-bg-\[color\:var\(--vtg-cell-warning\)\][data-status=warning] {
+    background-color: var(--vtg-cell-warning)
+}
 .\[\&\[data-status\=warning\]\]\:vtg-text-\[color\:var\(--vtg-cell-warning\)\][data-status=warning] {
     color: var(--vtg-cell-warning)
 }

package/css/tailwind3.css

@@ -30,6 +30,16 @@
   --vtg-cell-tag-line-height: 20px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 8%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 14px;
+  --vtg-editor-radius: 6px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
   --vtg-column-settings-radius: 8px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 1050;
@@ -281,6 +291,16 @@
   --vtg-cell-tag-line-height: 22px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 10%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 12px;
+  --vtg-editor-radius: 4px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: var(--color-default);
   --vtg-column-settings-radius: 4px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 2000;