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

package/dist/css/style.css

@@ -24,6 +24,22 @@
   --vtg-cell-success: #52c41a;
   --vtg-cell-warning: #faad14;
   --vtg-cell-error: #ff4d4f;
+  --vtg-cell-tag-radius: 4px;
+  --vtg-cell-tag-padding-inline: 7px;
+  --vtg-cell-tag-font-size: 12px;
+  --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;
@@ -269,6 +285,22 @@
   --vtg-cell-success: #67c23a;
   --vtg-cell-warning: #e6a23c;
   --vtg-cell-error: #f56c6c;
+  --vtg-cell-tag-radius: 4px;
+  --vtg-cell-tag-padding-inline: 9px;
+  --vtg-cell-tag-font-size: 12px;
+  --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;
@@ -807,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
 }
@@ -837,6 +872,12 @@
 .vtg-table-cell {
     display: table-cell
 }
+.vtg-grid {
+    display: grid
+}
+.\!vtg-hidden {
+    display: none !important
+}
 .vtg-hidden {
     display: none
 }
@@ -885,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)
 }
@@ -900,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)
 }
@@ -933,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
 }
@@ -990,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)
 }
@@ -1029,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)
 }
@@ -1041,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%
 }
@@ -1206,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)
 }
@@ -1215,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
 }
@@ -1283,12 +1363,21 @@
 .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)
+}
 .vtg-rounded-\[var\(--vtg-checkbox-border-radius\)\] {
     border-radius: var(--vtg-checkbox-border-radius)
 }
 .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)
 }
@@ -1298,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)
 }
@@ -1398,6 +1493,9 @@
 .vtg-border-\[color\:var\(--vtg-border-color-lighter\,var\(--color-default\)\)\] {
     border-color: var(--vtg-border-color-lighter,var(--color-default))
 }
+.vtg-border-\[color\:var\(--vtg-cell-tag-border\)\] {
+    border-color: var(--vtg-cell-tag-border)
+}
 .vtg-border-\[color\:var\(--vtg-checkbox-check-color\,\#fff\)\] {
     border-color: var(--vtg-checkbox-check-color,#fff)
 }
@@ -1443,6 +1541,12 @@
 .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)
+}
 .vtg-bg-\[color\:var\(--vtg-checkbox-indeterminate-color\,\#fff\)\] {
     background-color: var(--vtg-checkbox-indeterminate-color,#fff)
 }
@@ -1546,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)
 }
@@ -1601,6 +1711,10 @@
     padding-left: var(--vtg-btn-padding-sm);
     padding-right: var(--vtg-btn-padding-sm)
 }
+.vtg-px-\[var\(--vtg-cell-tag-padding-inline\)\] {
+    padding-left: var(--vtg-cell-tag-padding-inline);
+    padding-right: var(--vtg-cell-tag-padding-inline)
+}
 .vtg-px-\[var\(--vtg-input-padding-inline\)\] {
     padding-left: var(--vtg-input-padding-inline);
     padding-right: var(--vtg-input-padding-inline)
@@ -1737,15 +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)
 }
@@ -1790,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
 }
@@ -1820,6 +1950,9 @@
 .vtg-leading-\[60px\] {
     line-height: 60px
 }
+.vtg-leading-\[var\(--vtg-cell-tag-line-height\)\] {
+    line-height: var(--vtg-cell-tag-line-height)
+}
 .vtg-leading-\[var\(--vtg-table-line-height\)\] {
     line-height: var(--vtg-table-line-height)
 }
@@ -1829,6 +1962,9 @@
 .vtg-tracking-wide {
     letter-spacing: 0.025em
 }
+.vtg-text-\[color\:var\(--color-error\)\] {
+    color: var(--color-error)
+}
 .vtg-text-\[color\:var\(--color-filter-icon\)\] {
     color: var(--color-filter-icon)
 }
@@ -1853,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)
 }
@@ -2099,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
 }
@@ -2807,13 +2949,38 @@
 .\[\&\: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
 }
+@keyframes vtg-spin {
+    to {
+        transform: rotate(360deg)
+    }
+}
+.\[\&\>span\]\:vtg-animate-spin>span {
+    animation: vtg-spin 1s linear infinite
+}
+.\[\&\>span\]\:vtg-text-\[length\:12px\]>span {
+    font-size: 12px
+}
+@media (prefers-reduced-motion: reduce) {
+    .motion-reduce\:\[\&\>span\]\:vtg-animate-none>span {
+        animation: none
+    }
+}
 .\[\&\>svg\]\:vtg-mx-auto>svg {
     margin-left: auto;
     margin-right: auto
 }
+.\[\&\>svg\]\:vtg-inline-block>svg {
+    display: inline-block
+}
 .\[\&\>svg\]\:vtg-h-\[1em\]>svg {
     height: 1em
 }
@@ -2826,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);
@@ -2836,18 +3006,48 @@
     --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)
+}
 .\[\&\[data-status\=error\]\]\:before\:vtg-bg-\[color\:var\(--vtg-cell-error\)\][data-status=error]::before {
     content: var(--tw-content, '');
     background-color: var(--vtg-cell-error)
 }
+.\[\&\[data-status\=processing\]\]\:vtg-text-\[color\:var\(--color-primary\)\][data-status=processing] {
+    color: var(--color-primary)
+}
 .\[\&\[data-status\=processing\]\]\:before\:vtg-bg-\[color\:var\(--color-primary\)\][data-status=processing]::before {
     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)
+}
 .\[\&\[data-status\=success\]\]\:before\:vtg-bg-\[color\:var\(--vtg-cell-success\)\][data-status=success]::before {
     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)
+}
 .\[\&\[data-status\=warning\]\]\:before\:vtg-bg-\[color\:var\(--vtg-cell-warning\)\][data-status=warning]::before {
     content: var(--tw-content, '');
     background-color: var(--vtg-cell-warning)