@xihan-ui/styles 2.1.0 → 3.0.0

package/css/grid-list.css

@@ -0,0 +1,235 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* GridList 的行复用 Collection Item；拖动把手由组合进来的 Sortable 负责。 */
+@import '../family/action-control.css';
+@import '../family/check-mark.css';
+@import '../family/collection-item.css';
+@import '../family/loading-ring.css';
+@import '../family/motion.css';
+
+@layer xihan.components {
+  [data-scope='grid-list'] {
+    --xh-grid-list-skin: 1;
+  }
+
+  [data-scope='grid-list'][data-part='root'] {
+    --xh-_grid-list-indicator: var(--xh-control-indicator-md);
+    --xh-_grid-list-indicator-glyph: calc(var(--xh-_grid-list-indicator) * 0.75);
+    --xh-_grid-list-indicator-accent: var(--xh-_tone-border-control, var(--xh-bg-brand));
+    --xh-_grid-list-indicator-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-icon-size: var(--xh-grid-list-icon-size, var(--xh-glyph-size-md));
+    /* 占位文案与条目同档：字号与行内内衬随尺寸档 */
+    --xh-_grid-list-state-font-size: var(--xh-control-font-md);
+    --xh-_grid-list-state-px: var(--xh-control-px-md);
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    gap: var(--xh-grid-list-gap, var(--xh-list-option-gap));
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--xh-grid-list-p, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-grid-list-radius, var(--xh-shape-surface));
+    background: var(--xh-grid-list-bg, transparent);
+  }
+
+  [data-scope='grid-list'][data-part='root'][data-variant='outline'] {
+    border-color: var(--xh-grid-list-border, var(--xh-border-default));
+    background: var(--xh-grid-list-bg, var(--xh-bg-surface));
+  }
+
+  [data-scope='grid-list'][data-part='root'][data-variant='subtle'] {
+    background: var(--xh-grid-list-bg, var(--xh-bg-subtle));
+  }
+
+  [data-scope='grid-list'][data-part='root'][data-invalid] {
+    border-color: var(--xh-grid-list-border-invalid, var(--xh-border-invalid));
+  }
+
+  [data-scope='grid-list'][data-part='root']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='grid-list'][data-part='root'][data-size='sm'] {
+    --xh-_grid-list-indicator: var(--xh-control-indicator-sm);
+    --xh-_grid-list-state-font-size: var(--xh-control-font-sm);
+    --xh-_grid-list-state-px: var(--xh-control-px-sm);
+    --xh-icon-size: var(--xh-grid-list-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  [data-scope='grid-list'][data-part='root'][data-size='lg'] {
+    --xh-_grid-list-indicator: var(--xh-control-indicator-lg);
+    --xh-_grid-list-state-font-size: var(--xh-control-font-lg);
+    --xh-_grid-list-state-px: var(--xh-control-px-lg);
+    --xh-icon-size: var(--xh-grid-list-icon-size, var(--xh-glyph-size-lg));
+  }
+
+  [data-scope='grid-list'][data-part='label'] {
+    padding-block: var(--xh-grid-list-label-py, var(--xh-space-1));
+    padding-inline: var(--xh-grid-list-label-px, var(--xh-control-px-md));
+    color: var(--xh-grid-list-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-grid-list-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-grid-list-label-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-leading-normal);
+  }
+
+  /* 行走 Collection Item 的 page 语境（页内持久集合），与 Table、Transfer 同一种选中标记：品牌淡底行面 +
+     淡底前景（selected+hover 20% / +pressed 28%），外加行首勾选框；两者都由家族与勾选标记配方给，
+     这里只映射圆角与选中面的公开槽 */
+  [data-scope='grid-list'][data-part='row'] {
+    --xh-collection-radius: var(--xh-grid-list-row-radius, var(--xh-shape-control));
+    --xh-collection-bg-selected: var(--xh-grid-list-row-bg-selected, var(--xh-bg-brand-subtle));
+    --xh-collection-fg-selected: var(--xh-grid-list-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-hover: var(--xh-grid-list-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-highlight: var(--xh-grid-list-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-pressed: var(--xh-grid-list-row-fg-selected, var(--xh-fg-on-brand-subtle));
+
+    /* 家族只过渡换面的两支；重新取数时整列淡下同样走 micro，opacity 补进同一份列表 */
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* Headless 会预先保留下一次 roving focus 的 highlighted 行（指针点过的行也记着）；容器尚未真正获得
+     键盘焦点时，这只是内部导航位置，不能提前画成焦点态：面退回静息（选中行退回选中面），指针移入仍按
+     悬停那一档回应 */
+  [data-scope='grid-list'][data-part='row'][data-highlighted]:not(:focus-visible) {
+    --xh-collection-bg-keyboard-highlight: transparent;
+    --xh-collection-outline-keyboard-highlight: transparent;
+    --xh-collection-bg-selected-highlight: var(--xh-grid-list-row-bg-selected, var(--xh-bg-brand-subtle));
+    --xh-collection-outline-selected-highlight: transparent;
+  }
+
+  [data-scope='grid-list'][data-part='row'][data-highlighted]:not(:focus-visible):hover {
+    --xh-collection-bg-keyboard-highlight: var(--xh-bg-subtle);
+    --xh-collection-bg-selected-highlight: var(--xh-bg-brand-subtle-hover);
+  }
+
+  [data-scope='grid-list'][data-part='root'][data-readonly]
+  [data-scope='grid-list'][data-part='row'] {
+    cursor: default;
+  }
+
+  /* 已有行时重新取数：不换成占位，行保留上一帧、按 micro 淡到禁用透明度，数据到了再淡回；
+     这一段不接指针——取数在途时选中与行内动作都不生效。aria-busy 与这一副可见回执同源 */
+  [data-scope='grid-list'][data-part='root'][data-loading]
+  [data-scope='grid-list'][data-part='row'] {
+    opacity: var(--xh-grid-list-row-loading-opacity, var(--xh-state-disabled-opacity));
+    pointer-events: none;
+  }
+
+  /* content 保持真实 gridcell 盒；里面两行自己排，不依赖 Collection Item 的直接子项网格。 */
+  [data-scope='grid-list'][data-part='row-content'] {
+    display: flex;
+    grid-row: 1 / span 2;
+    grid-column: text;
+    flex-direction: column;
+    gap: var(--xh-grid-list-row-content-gap, var(--xh-space-1));
+    min-inline-size: 0;
+  }
+
+  [data-scope='grid-list'][data-part='row-text'],
+  [data-scope='grid-list'][data-part='row-description'] {
+    grid-row: auto;
+    grid-column: auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [data-scope='grid-list'][data-part='row-text'] {
+    color: inherit;
+    white-space: nowrap;
+  }
+
+  [data-scope='grid-list'][data-part='row-description'] {
+    color: var(--xh-grid-list-row-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-grid-list-row-description-font-size, var(--xh-control-caption-md));
+    white-space: nowrap;
+  }
+
+  [data-scope='grid-list'][data-part='row-actions'] {
+    display: flex;
+    grid-row: 1 / span 2;
+    grid-column: suffix / span 2;
+    gap: var(--xh-grid-list-row-actions-gap, var(--xh-space-1));
+    align-items: center;
+    margin-inline-start: var(--xh-grid-list-row-actions-ms, var(--xh-control-gap-md));
+  }
+
+  [data-scope='grid-list'][data-part='row-action'] {
+    --xh-action-font-size: var(--xh-grid-list-row-action-font-size, var(--xh-control-font-sm));
+  }
+
+  /* 行首方框：静息透明底 + 控件盒描边，勾上换语气实心面。框里的勾由勾选标记配方画（常驻、按状态淡变并轻缩放），
+     尺寸读这里改接的 --xh-icon-size：方框边长 × 0.75，与 Checkbox 同一比例 */
+  [data-scope='grid-list'][data-part='row-selection-indicator'] {
+    --xh-icon-size: var(--xh-grid-list-row-indicator-glyph-size, var(--xh-_grid-list-indicator-glyph));
+
+    display: grid;
+    grid-row: 1 / span 2;
+    grid-column: prefix;
+    place-items: center;
+    inline-size: var(--xh-grid-list-row-indicator-size, var(--xh-_grid-list-indicator));
+    block-size: var(--xh-grid-list-row-indicator-size, var(--xh-_grid-list-indicator));
+    margin-inline-end: var(--xh-grid-list-row-indicator-me, var(--xh-control-gap-md));
+    border: var(--xh-stroke-thin) solid var(--xh-grid-list-row-indicator-border, var(--xh-border-control));
+    border-radius: var(--xh-grid-list-row-indicator-radius, var(--xh-shape-inset));
+    background: var(--xh-grid-list-row-indicator-bg, transparent);
+    color: var(--xh-grid-list-row-indicator-fg-selected, var(--xh-_grid-list-indicator-on-accent));
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='grid-list'][data-part='row-selection-indicator'][data-state='checked'] {
+    border-color: var(--xh-grid-list-row-indicator-border-selected, var(--xh-_grid-list-indicator-accent));
+    background: var(--xh-grid-list-row-indicator-bg-selected, var(--xh-_grid-list-indicator-accent));
+  }
+
+  /* 空态与加载态占同一个位置、同一副排版：一行文案居中，字号与行内内衬随尺寸档与条目同档，次要文字色，
+     块向内距一档，不设最小高 */
+  [data-scope='grid-list'][data-part='empty'],
+  [data-scope='grid-list'][data-part='loading'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-grid-list-state-gap, var(--xh-control-gap-md));
+    padding-block: var(--xh-grid-list-state-py, var(--xh-space-3));
+    padding-inline: var(--xh-grid-list-state-px, var(--xh-_grid-list-state-px));
+    color: var(--xh-grid-list-state-fg, var(--xh-fg-muted));
+    font-size: var(--xh-grid-list-state-font-size, var(--xh-_grid-list-state-font-size));
+    line-height: var(--xh-leading-normal);
+    text-align: center;
+  }
+
+  /* 还没有行、正在取：一枚加载环排在文案之前。环由加载环配方画成（轨道 + 起始边、随 data-loading 淡入并转），
+     这里只给它盒子：直径取尺寸档的图标档 */
+  [data-scope='grid-list'][data-part='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
+  [data-scope='grid-list'][data-part='row-selection-indicator'][hidden],
+  [data-scope='grid-list'][data-part='row-content'][hidden],
+  [data-scope='grid-list'][data-part='row-actions'][hidden],
+  [data-scope='grid-list'][data-part='empty'][hidden],
+  [data-scope='grid-list'][data-part='loading'][hidden],
+  [data-scope='grid-list'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  @media print {
+    [data-scope='grid-list'][data-part='row-actions'] {
+      display: none;
+    }
+  }
+}

package/css/grid.css

@@ -460,10 +460,12 @@
   [data-scope='grid'][data-part='item'] {
     grid-column-start: var(--xh-_grid-start);
     grid-column-end: span var(--xh-_grid-span);
+    grid-row-end: span var(--xh-_grid-row-span);
 
-    /* 两个槽位在每一格上都声明一遍，嵌套时内层的格子不吃外层那一格的值 */
+    /* 三个槽位在每一格上都声明一遍，嵌套时内层的格子不吃外层那一格的值 */
     --xh-_grid-span: 1;
     --xh-_grid-start: auto;
+    --xh-_grid-row-span: 1;
   }
 
   /* —— 跨列 —— */
@@ -942,6 +944,255 @@
     }
   }
 
+  /* —— 跨行 —— */
+  /* 占一行是格子上的缺省，这里从跨两行起逐值写。行高由内容撑出时跨几行就占几条行轨道，
+     同一行里其余的格子按各自内容排，不被拉成同高 */
+  [data-scope='grid'][data-part='item'][data-row-span='2'] {
+    --xh-_grid-row-span: 2;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='3'] {
+    --xh-_grid-row-span: 3;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='4'] {
+    --xh-_grid-row-span: 4;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='5'] {
+    --xh-_grid-row-span: 5;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='6'] {
+    --xh-_grid-row-span: 6;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='7'] {
+    --xh-_grid-row-span: 7;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='8'] {
+    --xh-_grid-row-span: 8;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='9'] {
+    --xh-_grid-row-span: 9;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='10'] {
+    --xh-_grid-row-span: 10;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='11'] {
+    --xh-_grid-row-span: 11;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='12'] {
+    --xh-_grid-row-span: 12;
+  }
+
+  /* —— 逐档跨行 —— */
+  /* 与逐档跨列逐字同构：移动优先，没写的档沿用比它窄的那一档；每档都从 1 写起，某一档收回一行同样合法 */
+  @media (min-width: 640px) {
+    [data-scope='grid'][data-part='item'][data-row-span-sm='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
+  @media (min-width: 768px) {
+    [data-scope='grid'][data-part='item'][data-row-span-md='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    [data-scope='grid'][data-part='item'][data-row-span-lg='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    [data-scope='grid'][data-part='item'][data-row-span-xl='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='grid'][data-part='root'][hidden] {