@agile-team/mach-table 0.5.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agile-team/mach-table",
-  "version": "0.5.0",
+  "version": "0.14.0",
   "description": "Enterprise-grade, framework-agnostic TypeScript data grid with virtualization, editing, grouping and extensibility",
   "keywords": [
     "data-grid",
@@ -11,8 +11,8 @@
     "vue",
     "react"
   ],
-  "author": "Agile Team",
-  "license": "MIT",
+  "author": "ChenyCHENYU (Agile Team)",
+  "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://github.com/ChenyCHENYU/MachTable#readme",
   "bugs": {
     "url": "https://github.com/ChenyCHENYU/MachTable/issues"

package/styles/mach-table.css

@@ -67,6 +67,113 @@
   font-variant-numeric: tabular-nums;
 }
 
+.mach-root.mach-dom-layout--auto-height {
+  height: auto;
+  min-height: 0;
+}
+
+.mach-root.mach-dom-layout--auto-height .mach-body {
+  flex: none;
+}
+
+.mach-root.mach-dom-layout--auto-height .mach-body-viewport--scroll {
+  overflow-y: hidden;
+}
+
+.mach-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 44px;
+  padding: 6px 8px;
+  font: 13px/1.4 var(--mach-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  color: var(--mach-body-fg, #26303f);
+  background: var(--mach-body-bg, #fff);
+  border: 1px solid var(--mach-border-color, #e6eaf0);
+  border-bottom: 0;
+  border-radius: var(--mach-radius-lg, 8px) var(--mach-radius-lg, 8px) 0 0;
+}
+
+.mach-toolbar__main,
+.mach-toolbar__aside {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.mach-toolbar__search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: min(240px, 32vw);
+  height: 32px;
+  padding: 0 9px;
+  color: #64748b;
+  background: var(--mach-header-bg, #fafbfd);
+  border: 1px solid var(--mach-border-color, #e6eaf0);
+  border-radius: 6px;
+  transition: border-color var(--mach-transition, .15s ease), box-shadow var(--mach-transition, .15s ease);
+}
+
+.mach-toolbar__search:focus-within {
+  border-color: var(--mach-primary, #2563eb);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mach-primary, #2563eb) 12%, transparent);
+}
+
+.mach-toolbar__search input {
+  min-width: 0;
+  width: 100%;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  outline: 0;
+}
+
+.mach-toolbar__button,
+.mach-toolbar__select,
+.mach-toolbar__selection {
+  height: 32px;
+  padding: 0 10px;
+  color: inherit;
+  background: var(--mach-body-bg, #fff);
+  border: 1px solid var(--mach-border-color, #e6eaf0);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: color var(--mach-transition, .15s ease), border-color var(--mach-transition, .15s ease), background var(--mach-transition, .15s ease);
+}
+
+.mach-toolbar__button {
+  min-width: 32px;
+  padding: 0 8px;
+  font-size: 16px;
+}
+
+.mach-toolbar__button:hover:not(:disabled),
+.mach-toolbar__select:hover {
+  color: var(--mach-primary, #2563eb);
+  border-color: var(--mach-primary, #2563eb);
+}
+
+.mach-toolbar__button:disabled {
+  cursor: not-allowed;
+  opacity: .45;
+}
+
+.mach-toolbar__selection {
+  color: var(--mach-primary, #2563eb);
+  background: var(--mach-primary-weak, #dbeafe);
+  border-color: transparent;
+  font-size: 12px;
+}
+
+@media (max-width: 640px) {
+  .mach-toolbar { align-items: stretch; flex-direction: column; }
+  .mach-toolbar__main, .mach-toolbar__aside { flex-wrap: wrap; }
+  .mach-toolbar__search { flex: 1; width: auto; }
+}
+
 .mach-size--compact {
   --mach-font-size: 12px;
   --mach-cell-padding: 6px;
@@ -531,6 +638,23 @@ input.mach-select-all {
   transform: rotate(90deg);
 }
 
+.mach-detail-toggle--loading {
+  animation: mach-tree-spin 0.8s linear infinite;
+  color: var(--mach-primary);
+}
+
+.mach-detail-toggle--error {
+  color: #dc2626;
+}
+
+@keyframes mach-tree-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mach-detail-toggle--loading { animation: none; }
+}
+
 .mach-cell--group {
   cursor: pointer;
   background: var(--mach-header-bg);
@@ -637,6 +761,11 @@ input.mach-select-all {
   box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
 }
 
+.mach-editor-validating {
+  cursor: progress;
+  opacity: 0.72;
+}
+
 .mach-footer {
   display: flex;
   flex-shrink: 0;
@@ -1025,11 +1154,33 @@ input.mach-select-all {
 }
 
 .mach-column-panel {
-  min-width: 200px;
+  min-width: 220px;
   max-height: 70vh;
   overflow: auto;
 }
 
+.mach-column-panel[role="dialog"] {
+  width: min(440px, calc(100vw - 16px));
+}
+
+.mach-column-workbench-search {
+  box-sizing: border-box;
+  width: 100%;
+  height: 30px;
+  padding: 0 9px;
+  border: 1px solid var(--mach-border-color);
+  border-radius: var(--mach-radius);
+  background: var(--mach-body-bg);
+  color: var(--mach-body-fg);
+  font: inherit;
+  outline: none;
+}
+
+.mach-column-workbench-search:focus {
+  border-color: var(--mach-primary);
+  box-shadow: 0 0 0 2px var(--mach-primary-weak);
+}
+
 .mach-column-panel-title {
   font-weight: 600;
   color: var(--mach-header-fg);
@@ -1076,7 +1227,7 @@ input.mach-select-all {
 }
 
 .mach-column-panel-list {
-  max-height: 180px;
+  max-height: 280px;
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -1086,6 +1237,54 @@ input.mach-select-all {
   padding: 4px;
 }
 
+.mach-column-workbench-item {
+  display: grid;
+  grid-template-columns: minmax(120px, 1fr) 108px 26px 26px;
+  align-items: center;
+  gap: 4px;
+  min-height: 32px;
+  padding: 2px 3px;
+  border-radius: var(--mach-radius);
+}
+
+.mach-column-workbench-item:hover {
+  background: var(--mach-row-hover-bg);
+}
+
+.mach-column-workbench-label {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 7px;
+  cursor: pointer;
+}
+
+.mach-column-workbench-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mach-column-workbench-pin,
+.mach-column-workbench-move {
+  height: 26px;
+  border: 1px solid var(--mach-border-color);
+  border-radius: var(--mach-radius);
+  background: var(--mach-body-bg);
+  color: inherit;
+  font: inherit;
+}
+
+.mach-column-workbench-move {
+  padding: 0;
+  cursor: pointer;
+}
+
+.mach-column-workbench-move:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
 .mach-tag {
   display: inline-flex;
   align-items: center;
@@ -1177,6 +1376,18 @@ input.mach-select-all {
   gap: 2px;
 }
 
+.mach-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
 .mach-action-btn {
   display: inline-flex;
   align-items: center;
@@ -1203,6 +1414,50 @@ input.mach-select-all {
   color: var(--mach-danger);
 }
 
+.mach-action-btn--primary {
+  color: var(--mach-primary);
+}
+
+.mach-action-btn--warning {
+  color: var(--mach-warning);
+}
+
+.mach-action-btn--success,
+.mach-edit-control--confirm {
+  color: var(--mach-success);
+}
+
+.mach-action-btn--danger {
+  color: var(--mach-danger);
+}
+
+.mach-action-btn:focus-visible,
+.mach-edit-control:focus-visible,
+.mach-cell-edit-trigger:focus-visible,
+.mach-action-drawer__close:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--mach-primary) 65%, transparent);
+  outline-offset: 1px;
+}
+
+.mach-action-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.mach-action-btn--loading svg {
+  animation: mach-spin 0.8s linear infinite;
+}
+
+.mach-dictionary-value--loading {
+  color: var(--mach-header-fg);
+  opacity: 0.72;
+}
+
+.mach-dictionary-value--error {
+  text-decoration: underline dotted;
+  text-underline-offset: 3px;
+}
+
 .mach-action-btn--icon {
   padding: 0;
   width: 24px;
@@ -1210,7 +1465,262 @@ input.mach-select-all {
 
 .mach-context-menu-item--danger {
   color: var(--mach-danger);
-}
+}
+
+.mach-context-menu-item,
+.mach-action-drawer__item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.mach-context-menu-item--primary,
+.mach-action-drawer__item--primary {
+  color: var(--mach-primary);
+}
+
+.mach-context-menu-item--warning,
+.mach-action-drawer__item--warning {
+  color: var(--mach-warning);
+}
+
+.mach-context-menu-item--success,
+.mach-action-drawer__item--success {
+  color: var(--mach-success);
+}
+
+.mach-context-menu-item--danger,
+.mach-action-drawer__item--danger {
+  color: var(--mach-danger);
+}
+
+.mach-action-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--mach-z-menu) + 2);
+  background: rgba(15, 23, 42, 0.2);
+  backdrop-filter: blur(1px);
+}
+
+.mach-action-drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  width: min(340px, calc(100vw - 24px));
+  height: 100%;
+  background: var(--mach-body-bg);
+  color: var(--mach-body-fg);
+  border-left: 1px solid var(--mach-border-color);
+  box-shadow: -16px 0 40px rgba(15, 23, 42, 0.14);
+  font-family: var(--mach-font-family);
+  animation: mach-drawer-in 0.18s ease-out;
+}
+
+.mach-action-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 56px;
+  padding: 0 16px 0 20px;
+  border-bottom: 1px solid var(--mach-border-color);
+}
+
+.mach-action-drawer__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--mach-radius);
+  background: transparent;
+  color: var(--mach-header-fg);
+  cursor: pointer;
+}
+
+.mach-action-drawer__close:hover {
+  color: var(--mach-primary);
+  background: var(--mach-row-hover-bg);
+}
+
+.mach-action-drawer__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  overflow: auto;
+}
+
+.mach-action-drawer__item {
+  width: 100%;
+  min-height: 40px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--mach-radius);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mach-action-drawer__item:hover:not(:disabled) {
+  background: var(--mach-row-hover-bg);
+}
+
+.mach-action-drawer__item:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+@keyframes mach-drawer-in {
+  from { transform: translateX(18px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@media (max-width: 640px) {
+  .mach-action-drawer {
+    top: auto;
+    bottom: 0;
+    width: 100%;
+    height: auto;
+    max-height: min(70vh, 520px);
+    border-top: 1px solid var(--mach-border-color);
+    border-left: 0;
+    border-radius: var(--mach-radius-lg) var(--mach-radius-lg) 0 0;
+    animation-name: mach-drawer-up;
+  }
+}
+
+@keyframes mach-drawer-up {
+  from { transform: translateY(18px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.mach-cell:has(.mach-cell-edit-trigger) {
+  padding-right: 29px;
+}
+
+.mach-cell-edit-trigger {
+  position: absolute;
+  right: 5px;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  transform: translateY(-50%);
+  border: 0;
+  border-radius: var(--mach-radius-sm);
+  background: transparent;
+  color: var(--mach-header-fg);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--mach-transition), color var(--mach-transition), background-color var(--mach-transition);
+}
+
+.mach-cell-edit-trigger svg {
+  width: 13px;
+  height: 13px;
+}
+
+.mach-cell:hover .mach-cell-edit-trigger--hover,
+.mach-cell:focus-within .mach-cell-edit-trigger--hover,
+.mach-cell-edit-trigger--always {
+  opacity: 0.72;
+}
+
+.mach-cell-edit-trigger:hover {
+  opacity: 1;
+  color: var(--mach-primary);
+  background: color-mix(in srgb, var(--mach-primary) 9%, transparent);
+}
+
+.mach-cell--editing {
+  overflow: visible;
+  z-index: 4;
+}
+
+.mach-cell-editor-shell,
+.mach-row-editor-shell {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  gap: 5px;
+}
+
+.mach-cell-editor-shell > .mach-editor-input,
+.mach-cell-editor-shell > .mach-editor-select,
+.mach-cell-editor-shell > :not(.mach-cell-editor-controls),
+.mach-row-editor-shell > * {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mach-cell-editor-controls {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 2px;
+  border: 1px solid var(--mach-border-color);
+  border-radius: var(--mach-radius);
+  background: var(--mach-body-bg);
+  box-shadow: var(--mach-shadow-sm);
+}
+
+.mach-edit-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 23px;
+  height: 23px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--mach-radius-sm);
+  background: transparent;
+  color: var(--mach-header-fg);
+  cursor: pointer;
+}
+
+.mach-edit-control svg {
+  width: 14px;
+  height: 14px;
+}
+
+.mach-edit-control--confirm {
+  color: var(--mach-primary);
+}
+
+.mach-edit-control:hover {
+  background: var(--mach-row-hover-bg);
+}
+
+.mach-edit-control:disabled {
+  opacity: 0.35;
+  cursor: wait;
+}
+
+.mach-row--editing,
+.mach-row--editing .mach-cell {
+  background: color-mix(in srgb, var(--mach-primary) 3%, var(--mach-body-bg));
+}
+
+.mach-cell--row-editing .mach-editor-input,
+.mach-cell--row-editing .mach-editor-select {
+  border-color: color-mix(in srgb, var(--mach-primary) 45%, var(--mach-border-color));
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.mach-cell--row-editing .mach-editor-input:focus,
+.mach-cell--row-editing .mach-editor-select:focus {
+  border-color: var(--mach-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mach-primary) 12%, transparent);
+}
 
 .mach-tooltip {
   position: fixed;
@@ -1381,4 +1891,8 @@ input.mach-select-all {
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
+
+  .mach-action-drawer {
+    animation: none !important;
+  }
 }