@xihan-ui/styles 1.0.0 → 2.0.0

package/css/grid.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 grid 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='grid'] {
@@ -11,8 +18,11 @@
     grid-template-columns: var(--xh-grid-columns, repeat(var(--xh-_grid-cols), minmax(0, 1fr)));
     /* 不写 gap 档位就不留间距 */
     gap: var(--xh-grid-gap, var(--xh-space-0));
-    /* 列数收在根上这一个槽位里，换档只改这里；每一层都声明一遍，嵌套时内层不吃外层的值 */
+    /* 列数、行数与自适应列宽下限都收在根上这几个槽位里，换档只改这里；
+       每一层都声明一遍，嵌套时内层不吃外层的值 */
     --xh-_grid-cols: 1;
+    --xh-_grid-rows: 1;
+    --xh-_grid-col-min: var(--xh-layout-col-min-md);
   }
 
   /* —— 列数 —— */
@@ -266,6 +276,81 @@
     }
   }
 
+  /* —— 行数 —— */
+  /* 不写 data-rows 就不声明行轨道：行数由内容自己撑出来，这是缺省。
+     写了就把这几行排成显式轨道，超出的项落进隐式行。
+     使用者槽位排在档位之前，写死一份轨道表即盖过所有行数档 */
+  [data-scope='grid'][data-part='root'][data-rows] {
+    grid-template-rows: var(--xh-grid-rows, repeat(var(--xh-_grid-rows), minmax(0, auto)));
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='2'] {
+    --xh-_grid-rows: 2;
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='3'] {
+    --xh-_grid-rows: 3;
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='4'] {
+    --xh-_grid-rows: 4;
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='5'] {
+    --xh-_grid-rows: 5;
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='6'] {
+    --xh-_grid-rows: 6;
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='7'] {
+    --xh-_grid-rows: 7;
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='8'] {
+    --xh-_grid-rows: 8;
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='9'] {
+    --xh-_grid-rows: 9;
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='10'] {
+    --xh-_grid-rows: 10;
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='11'] {
+    --xh-_grid-rows: 11;
+  }
+
+  [data-scope='grid'][data-part='root'][data-rows='12'] {
+    --xh-_grid-rows: 12;
+  }
+
+  /* —— 自适应列宽 —— */
+  /* 写了下限就按「放得下几列就几列」排，data-cols 那条轨道表让位；
+     下限只收档位名，四档各指一个令牌 */
+  [data-scope='grid'][data-part='root'][data-min-col] {
+    grid-template-columns: var(--xh-grid-columns, repeat(auto-fill, minmax(var(--xh-_grid-col-min), 1fr)));
+  }
+
+  [data-scope='grid'][data-part='root'][data-min-col='xs'] {
+    --xh-_grid-col-min: var(--xh-layout-col-min-xs);
+  }
+
+  [data-scope='grid'][data-part='root'][data-min-col='sm'] {
+    --xh-_grid-col-min: var(--xh-layout-col-min-sm);
+  }
+
+  [data-scope='grid'][data-part='root'][data-min-col='md'] {
+    --xh-_grid-col-min: var(--xh-layout-col-min-md);
+  }
+
+  [data-scope='grid'][data-part='root'][data-min-col='lg'] {
+    --xh-_grid-col-min: var(--xh-layout-col-min-lg);
+  }
+
   /* —— 间距档位 —— */
   /* 每一档指向一个间距令牌，行与行之间也吃这同一份间距 */
   [data-scope='grid'][data-part='root'][data-gap='xs'] {
@@ -288,6 +373,50 @@
     gap: var(--xh-grid-gap, var(--xh-layout-gap-xl));
   }
 
+  /* —— 行间距与列间距 —— */
+  /* 只改一条轴上的间距，另一条仍跟着 gap 走。两组规则与 gap 档位同权重，
+     靠源码序排在它之后取胜；根规则那条 gap 权重更低，恒盖得住 */
+
+  [data-scope='grid'][data-part='root'][data-row-gap='xs'] {
+    row-gap: var(--xh-grid-row-gap, var(--xh-layout-gap-xs));
+  }
+
+  [data-scope='grid'][data-part='root'][data-row-gap='sm'] {
+    row-gap: var(--xh-grid-row-gap, var(--xh-layout-gap-sm));
+  }
+
+  [data-scope='grid'][data-part='root'][data-row-gap='md'] {
+    row-gap: var(--xh-grid-row-gap, var(--xh-layout-gap-md));
+  }
+
+  [data-scope='grid'][data-part='root'][data-row-gap='lg'] {
+    row-gap: var(--xh-grid-row-gap, var(--xh-layout-gap-lg));
+  }
+
+  [data-scope='grid'][data-part='root'][data-row-gap='xl'] {
+    row-gap: var(--xh-grid-row-gap, var(--xh-layout-gap-xl));
+  }
+
+  [data-scope='grid'][data-part='root'][data-column-gap='xs'] {
+    column-gap: var(--xh-grid-column-gap, var(--xh-layout-gap-xs));
+  }
+
+  [data-scope='grid'][data-part='root'][data-column-gap='sm'] {
+    column-gap: var(--xh-grid-column-gap, var(--xh-layout-gap-sm));
+  }
+
+  [data-scope='grid'][data-part='root'][data-column-gap='md'] {
+    column-gap: var(--xh-grid-column-gap, var(--xh-layout-gap-md));
+  }
+
+  [data-scope='grid'][data-part='root'][data-column-gap='lg'] {
+    column-gap: var(--xh-grid-column-gap, var(--xh-layout-gap-lg));
+  }
+
+  [data-scope='grid'][data-part='root'][data-column-gap='xl'] {
+    column-gap: var(--xh-grid-column-gap, var(--xh-layout-gap-xl));
+  }
+
   /* —— 块向对齐 —— */
   /* 管的是每一项在自己那格里怎么摆，不是格子在容器里怎么摆：列宽由轨道表定死，容器不留富余 */
   [data-scope='grid'][data-part='root'][data-align='start'] {
@@ -311,19 +440,19 @@
   }
 
   /* —— 行内对齐 —— */
-  [data-scope='grid'][data-part='root'][data-justify='start'] {
+  [data-scope='grid'][data-part='root'][data-justify-items='start'] {
     justify-items: start;
   }
 
-  [data-scope='grid'][data-part='root'][data-justify='center'] {
+  [data-scope='grid'][data-part='root'][data-justify-items='center'] {
     justify-items: center;
   }
 
-  [data-scope='grid'][data-part='root'][data-justify='end'] {
+  [data-scope='grid'][data-part='root'][data-justify-items='end'] {
     justify-items: end;
   }
 
-  [data-scope='grid'][data-part='root'][data-justify='stretch'] {
+  [data-scope='grid'][data-part='root'][data-justify-items='stretch'] {
     justify-items: stretch;
   }
 
@@ -431,6 +560,388 @@
     --xh-_grid-start: 12;
   }
 
+  /* —— 逐档跨列与错列 —— */
+  /* 与逐档列数逐字同构：移动优先，先按 data-span / data-offset 排定，
+     视口每宽到一档就换成那一档的值，没写的档沿用比它窄的那一档。
+     每档都从 1 写起：base 跨多列、某一档收回一列同样是合法的一档。
+     宽度写字面量，理由同上面的逐档列数 */
+
+  @media (min-width: 640px) {
+    [data-scope='grid'][data-part='item'][data-span-sm='1'] {
+      --xh-_grid-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='2'] {
+      --xh-_grid-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='3'] {
+      --xh-_grid-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='4'] {
+      --xh-_grid-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='5'] {
+      --xh-_grid-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='6'] {
+      --xh-_grid-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='7'] {
+      --xh-_grid-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='8'] {
+      --xh-_grid-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='9'] {
+      --xh-_grid-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='10'] {
+      --xh-_grid-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='11'] {
+      --xh-_grid-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-sm='12'] {
+      --xh-_grid-span: 12;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='1'] {
+      --xh-_grid-start: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='2'] {
+      --xh-_grid-start: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='3'] {
+      --xh-_grid-start: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='4'] {
+      --xh-_grid-start: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='5'] {
+      --xh-_grid-start: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='6'] {
+      --xh-_grid-start: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='7'] {
+      --xh-_grid-start: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='8'] {
+      --xh-_grid-start: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='9'] {
+      --xh-_grid-start: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='10'] {
+      --xh-_grid-start: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-sm='11'] {
+      --xh-_grid-start: 12;
+    }
+  }
+
+  @media (min-width: 768px) {
+    [data-scope='grid'][data-part='item'][data-span-md='1'] {
+      --xh-_grid-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='2'] {
+      --xh-_grid-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='3'] {
+      --xh-_grid-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='4'] {
+      --xh-_grid-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='5'] {
+      --xh-_grid-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='6'] {
+      --xh-_grid-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='7'] {
+      --xh-_grid-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='8'] {
+      --xh-_grid-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='9'] {
+      --xh-_grid-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='10'] {
+      --xh-_grid-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='11'] {
+      --xh-_grid-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-md='12'] {
+      --xh-_grid-span: 12;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='1'] {
+      --xh-_grid-start: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='2'] {
+      --xh-_grid-start: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='3'] {
+      --xh-_grid-start: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='4'] {
+      --xh-_grid-start: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='5'] {
+      --xh-_grid-start: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='6'] {
+      --xh-_grid-start: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='7'] {
+      --xh-_grid-start: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='8'] {
+      --xh-_grid-start: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='9'] {
+      --xh-_grid-start: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='10'] {
+      --xh-_grid-start: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-md='11'] {
+      --xh-_grid-start: 12;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    [data-scope='grid'][data-part='item'][data-span-lg='1'] {
+      --xh-_grid-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='2'] {
+      --xh-_grid-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='3'] {
+      --xh-_grid-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='4'] {
+      --xh-_grid-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='5'] {
+      --xh-_grid-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='6'] {
+      --xh-_grid-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='7'] {
+      --xh-_grid-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='8'] {
+      --xh-_grid-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='9'] {
+      --xh-_grid-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='10'] {
+      --xh-_grid-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='11'] {
+      --xh-_grid-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-lg='12'] {
+      --xh-_grid-span: 12;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='1'] {
+      --xh-_grid-start: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='2'] {
+      --xh-_grid-start: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='3'] {
+      --xh-_grid-start: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='4'] {
+      --xh-_grid-start: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='5'] {
+      --xh-_grid-start: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='6'] {
+      --xh-_grid-start: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='7'] {
+      --xh-_grid-start: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='8'] {
+      --xh-_grid-start: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='9'] {
+      --xh-_grid-start: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='10'] {
+      --xh-_grid-start: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-lg='11'] {
+      --xh-_grid-start: 12;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    [data-scope='grid'][data-part='item'][data-span-xl='1'] {
+      --xh-_grid-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='2'] {
+      --xh-_grid-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='3'] {
+      --xh-_grid-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='4'] {
+      --xh-_grid-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='5'] {
+      --xh-_grid-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='6'] {
+      --xh-_grid-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='7'] {
+      --xh-_grid-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='8'] {
+      --xh-_grid-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='9'] {
+      --xh-_grid-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='10'] {
+      --xh-_grid-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='11'] {
+      --xh-_grid-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-span-xl='12'] {
+      --xh-_grid-span: 12;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='1'] {
+      --xh-_grid-start: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='2'] {
+      --xh-_grid-start: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='3'] {
+      --xh-_grid-start: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='4'] {
+      --xh-_grid-start: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='5'] {
+      --xh-_grid-start: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='6'] {
+      --xh-_grid-start: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='7'] {
+      --xh-_grid-start: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='8'] {
+      --xh-_grid-start: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='9'] {
+      --xh-_grid-start: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='10'] {
+      --xh-_grid-start: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-offset-xl='11'] {
+      --xh-_grid-start: 12;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='grid'][data-part='root'][hidden] {