@vueye-table/styled 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/style.css

@@ -29,6 +29,7 @@
   --vt-cell-x: 0.75rem;
   --vt-cell-y: 0.625rem;
   --vt-shadow: 0 8px 24px rgb(31 35 40 / 0.12);
+  --vt-tree-indent: 1.25rem;
 
   font-family: var(--vt-font);
   font-size: var(--vt-font-size);
@@ -109,6 +110,32 @@
   max-height: var(--vt-max-height, none);
 }
 
+.vt-surface[data-virtual] {
+  min-width: 0;
+}
+
+.vt-surface[data-virtual] .vt-scroll {
+  overflow-anchor: none;
+  scrollbar-color: var(--vt-border) var(--vt-bg);
+}
+
+.vt-surface[data-virtual] .vt-table [data-virtual-row] {
+  height: var(--vt-row-height, 40px);
+}
+
+.vt-table [data-virtual-spacer] > td,
+.vt-table th[data-virtual-spacer],
+.vt-table td[data-virtual-spacer] {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.vt-surface[data-virtual] .vt-table .vt-row-number {
+  width: 48px;
+  min-width: 48px;
+}
+
 .vt-table {
   width: 100%;
   border-collapse: separate;
@@ -398,6 +425,12 @@
   color: var(--vt-muted);
 }
 
+.vt-load-sentinel {
+  height: var(--vt-row-height, 40px);
+  color: var(--vt-muted);
+  text-align: center;
+}
+
 .vt-menu {
   position: relative;
 }
@@ -503,6 +536,119 @@
   outline: none;
 }
 
+.vt-table [data-edit-cell][data-editable] {
+  cursor: text;
+}
+.vt-table [data-edit-cell]:focus-visible {
+  outline: 2px solid var(--vt-focus);
+  outline-offset: -2px;
+}
+.vt-table [data-dirty] {
+  background-color: color-mix(in srgb, var(--vt-accent) 6%, var(--vt-bg));
+}
+.vt-table [data-editing] [data-editor],
+.vt-cell-editor,
+.vt-table [data-select-editor] input,
+.vt-table [data-select-editor] select {
+  box-sizing: border-box;
+  min-width: 6rem;
+  max-width: 100%;
+  width: 100%;
+  padding: 0.5rem;
+  color: var(--vt-fg);
+  font: inherit;
+  background: var(--vt-bg);
+  border: 1px solid var(--vt-border);
+  border-radius: 4px;
+  accent-color: var(--vt-accent);
+  caret-color: var(--vt-accent);
+}
+.vt-table [data-editor][type="checkbox"] {
+  width: 1.1rem;
+  min-width: 1.1rem;
+  height: 1.1rem;
+  margin: 0.5rem;
+}
+.vt-table [data-editor]:focus-visible,
+.vt-table [data-select-editor] input:focus-visible {
+  outline: 2px solid var(--vt-focus);
+  outline-offset: -2px;
+}
+.vt-table [aria-invalid="true"] [data-editor],
+.vt-table [data-editor][aria-invalid="true"] {
+  border-color: var(--vt-danger);
+}
+.vt-table [data-edit-issues] {
+  display: block;
+  padding: 0.4rem 0.5rem;
+  color: var(--vt-danger);
+  font-size: 0.85em;
+  white-space: normal;
+}
+.vt-table [aria-busy="true"] [data-edit-issues] {
+  color: var(--vt-muted);
+}
+.vt-table [data-select-editor] {
+  min-width: 10rem;
+  padding: 0.4rem;
+}
+.vt-table [data-editor-hint] {
+  display: block;
+  padding-top: 0.35rem;
+  font-size: 0.8em;
+  color: var(--vt-muted);
+}
+.vt-row-controls {
+  width: 1%;
+}
+.vt-row-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  min-width: 5rem;
+  max-width: 100%;
+}
+.vt-row-actions details {
+  min-width: 0;
+  max-width: 100%;
+}
+.vt-row-actions button,
+.vt-row-actions summary {
+  padding: 0.3rem 0.5rem;
+  border: 1px solid var(--vt-border);
+  border-radius: 4px;
+  color: var(--vt-fg);
+  background: var(--vt-bg);
+  font: inherit;
+  font-size: 0.85em;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.vt-row-actions button:disabled {
+  color: var(--vt-muted);
+  cursor: default;
+}
+.vt-row-actions button:enabled:hover,
+.vt-row-actions summary:hover {
+  background: var(--vt-header-bg);
+}
+.vt-row-actions button:focus-visible,
+.vt-row-actions summary:focus-visible {
+  outline: 2px solid var(--vt-focus);
+  outline-offset: 2px;
+}
+.vt-row-actions [data-row-menu] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-top: 0.35rem;
+}
+.vt-row-actions [data-row-menu] button {
+  max-width: 100%;
+  white-space: normal;
+}
+
 .vt-grid .vt-row-number {
   width: 1%;
   padding-inline: 0.5rem;
@@ -535,3 +681,76 @@
   padding-inline: 0;
   border: 0;
 }
+
+.vt-tree-cell {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.vt-tree-toggle {
+  display: inline-flex;
+  flex: 0 0 1.75rem;
+  justify-content: center;
+}
+
+.vt-expand-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  color: var(--vt-muted);
+  background: transparent;
+  border: 0;
+  border-radius: var(--vt-control-radius);
+  cursor: pointer;
+}
+
+.vt-expand-toggle:hover {
+  color: var(--vt-fg);
+  background: var(--vt-hover);
+}
+
+.vt-expand-toggle:focus-visible,
+.vt-tree-retry:focus-visible,
+.vt-table tr[tabindex]:focus-visible {
+  outline: 2px solid var(--vt-focus);
+  outline-offset: -2px;
+}
+
+.vt-tree-loading {
+  color: var(--vt-muted);
+}
+
+.vt-tree-error {
+  color: var(--vt-danger);
+}
+
+.vt-tree-retry {
+  padding: 0.125rem 0.25rem;
+  color: inherit;
+  font: inherit;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: var(--vt-control-radius);
+  cursor: pointer;
+}
+
+.vt-table .vt-expansion-cell {
+  width: 2.75rem;
+  padding-inline: 0.5rem;
+}
+
+.vt-table .vt-detail-cell {
+  padding: 1rem;
+  white-space: normal;
+  background: var(--vt-header-bg);
+}
+
+.vt-table tr[hidden] {
+  display: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueye-table/styled",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.11",
   "description": "Styled, themeable Vue components for vueye-table, built on the headless layer.",
   "keywords": [
     "data-table",
@@ -41,9 +41,9 @@
     "provenance": true
   },
   "dependencies": {
-    "@vueye-table/headless": "3.0.0-alpha.1",
-    "@vueye-table/vue": "3.0.0-alpha.1",
-    "@vueye-table/core": "3.0.0-alpha.1"
+    "@vueye-table/core": "3.0.0-alpha.11",
+    "@vueye-table/vue": "3.0.0-alpha.11",
+    "@vueye-table/headless": "3.0.0-alpha.11"
   },
   "devDependencies": {
     "vue": "3.5.43",