@q1travel/design-system 0.8.0 → 0.9.0

package/dist-pkg/style.css

@@ -1295,6 +1295,138 @@
 
 /* 组件自身样式。发布进 npm 包，foundations.css 之后加载。 */
 
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--q1-color-text-primary);
+  font-size: var(--q1-font-size-label-14);
+  line-height: var(--q1-line-height-label-14);
+}
+
+.table th,
+.table td {
+  padding: var(--q1-space-3) var(--q1-space-2);
+  border-bottom: 1px solid var(--q1-color-border);
+  text-align: left;
+  vertical-align: middle;
+}
+
+.table thead th {
+  color: var(--q1-color-text-secondary);
+  font-weight: var(--q1-font-weight-medium);
+}
+
+.table__head--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.table--compact th,
+.table--compact td {
+  padding-block: var(--q1-space-2);
+}
+
+.table__scroll {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.table__scroll--vertical {
+  overflow-y: auto;
+}
+
+.table__scroll:focus-visible {
+  outline: none;
+  box-shadow: var(--q1-shadow-focus);
+}
+
+.table--sticky-header thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--q1-color-bg-canvas);
+}
+
+.table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--q1-space-1);
+  margin: calc(-1 * var(--q1-space-1)) calc(-1 * var(--q1-space-2));
+  border: 0;
+  border-radius: var(--q1-radius-1);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: var(--q1-space-1) var(--q1-space-2);
+}
+
+.table__sort-state {
+  display: inline-flex;
+  align-items: center;
+  color: currentColor;
+  font-size: var(--q1-font-size-label-13);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.table__sort:hover {
+  background: var(--q1-color-bg-subtle);
+  color: var(--q1-color-text-primary);
+}
+
+.table__sort:focus-visible,
+.table input[type='checkbox']:focus-visible {
+  outline: none;
+  box-shadow: var(--q1-shadow-focus);
+}
+
+.table__checkbox-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--q1-space-6);
+  min-height: var(--q1-space-6);
+  margin: calc(-1 * var(--q1-space-1)) calc(-1 * var(--q1-space-2));
+  border-radius: var(--q1-radius-1);
+  cursor: pointer;
+}
+
+.table__checkbox-control:has(input:disabled) {
+  cursor: not-allowed;
+}
+
+.table tbody tr[tabindex='0']:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--q1-color-action-primary);
+}
+
+.table th[aria-sort='ascending'] .table__sort,
+.table th[aria-sort='descending'] .table__sort {
+  color: var(--q1-color-action-primary);
+}
+
+.table__bulk-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--q1-space-2);
+  margin-block-end: var(--q1-space-3);
+}
+
+@media (pointer: coarse) {
+  .table__checkbox-control,
+  .table__sort {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
 [data-q1-portal='overlay'] {
   position: relative;
   z-index: var(--q1-z-overlay-root);
@@ -5305,7 +5437,7 @@ a.q1-card:focus-visible {
   font-variant-numeric: tabular-nums;
   cursor: pointer;
 }
-.pagination__button:hover:not(:disabled) {
+.pagination__button:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--q1-color-bg-subtle);
   color: var(--q1-color-text-primary);
 }
@@ -5321,7 +5453,8 @@ a.q1-card:focus-visible {
   background: var(--q1-color-bg-subtle);
   font-weight: var(--q1-font-weight-medium);
 }
-.pagination__button:disabled {
+.pagination__button:disabled,
+.pagination__button[aria-disabled='true'] {
   border-color: var(--q1-color-border);
   background: var(--q1-color-bg-subtle);
   color: var(--q1-color-text-muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": false,
   "type": "module",
   "main": "./dist-pkg/design-system.js",
@@ -37,9 +37,9 @@
     "check:shell": "npm run sync:contracts && node scripts/check-shell.mjs && node scripts/check-token-package.mjs && npm run check:release-provenance",
     "check:browser:strictmode": "node scripts/check-browser.mjs --strictmode-ref",
     "check:browser": "npm run check:browser:strictmode && node scripts/check-browser.mjs",
-    "check:package-api": "node scripts/check-package-api.mjs && node --test scripts/check-controls-contract.test.mjs && node --test scripts/check-pagination-contract.test.mjs",
+    "check:package-api": "node scripts/check-package-api.mjs && node --test scripts/check-controls-contract.test.mjs && node --test scripts/check-pagination-contract.test.mjs && node --test scripts/check-table-core.test.mjs scripts/check-table-interaction.test.mjs scripts/check-table-layout.test.mjs",
     "check:release-provenance": "node --test scripts/check-release-provenance.test.mjs && node scripts/check-release-provenance.mjs",
-    "check": "npm run build && npm run check:shell && npm run check:browser",
+    "check": "npm run build && npm run check:shell && npm run check:browser && npm run build:pkg",
     "build:lib": "vite build --config vite.lib.config.ts",
     "build:style": "node scripts/build-style.mjs",
     "build:pkg": "npm run build:lib && npm run build:style && npm run check:package-api",