@niche-works/style-layouts 0.2.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.ja.md +11 -0
  2. package/README.md +11 -0
  3. package/balance/index.cjs +1 -1
  4. package/center/index.cjs +1 -1
  5. package/constants.cjs +2 -2
  6. package/constants.d.cts +2 -2
  7. package/constants.d.mts +2 -2
  8. package/constants.mjs +2 -2
  9. package/core/_constants.cjs +58 -78
  10. package/core/_constants.d.cts +57 -71
  11. package/core/_constants.d.mts +57 -71
  12. package/core/_constants.mjs +58 -72
  13. package/core/balance/balance.cjs +1 -1
  14. package/core/balance/balance.mjs +2 -2
  15. package/core/balance/styles.css +14 -28
  16. package/core/center/center.cjs +1 -1
  17. package/core/center/center.mjs +2 -2
  18. package/core/center/styles.css +55 -42
  19. package/core/constants.cjs +18 -20
  20. package/core/constants.d.cts +17 -19
  21. package/core/constants.d.mts +17 -19
  22. package/core/constants.mjs +17 -19
  23. package/core/flow/flow.cjs +7 -7
  24. package/core/flow/flow.mjs +8 -8
  25. package/core/flow/styles.css +24 -20
  26. package/core/layer/layer.cjs +1 -1
  27. package/core/layer/layer.mjs +2 -2
  28. package/core/layer/styles.css +2 -10
  29. package/core/matrix/matrix.cjs +39 -41
  30. package/core/matrix/matrix.mjs +40 -42
  31. package/core/matrix/styles.css +100 -4
  32. package/core/pack/pack.cjs +1 -1
  33. package/core/pack/pack.mjs +2 -2
  34. package/core/pack/styles.css +17 -8
  35. package/core/pin/styles.css +1 -0
  36. package/core/stack/stack.cjs +19 -19
  37. package/core/stack/stack.mjs +20 -20
  38. package/core/stack/styles.css +26 -24
  39. package/core/styles.css +355 -179
  40. package/core/tile/styles.css +116 -43
  41. package/core/tile/tile.cjs +2 -52
  42. package/core/tile/tile.mjs +4 -54
  43. package/flow/index.cjs +1 -1
  44. package/layer/index.cjs +1 -1
  45. package/matrix/index.cjs +1 -1
  46. package/pack/index.cjs +1 -1
  47. package/package.json +1 -1
  48. package/pin/index.cjs +1 -1
  49. package/stack/index.cjs +1 -1
  50. package/tile/index.cjs +1 -1
package/core/constants.d.mts CHANGED
@@ -258,25 +258,23 @@ declare const clsLayoutChildCountX = "nws-layout-childCountX";
258
258
  */
259
259
  declare const clsLayoutChildCountY = "nws-layout-childCountY";
260
260
  /**
261
- * 変数\
262
- * 間隔: 横方向
261
+ * 横方向のテンプレート
263
262
  */
264
- declare const varLayoutGapX = "--nws-layout-gapX";
263
+ declare const clsLayoutTemplateX = "nws-layout-templateX";
265
264
  /**
266
- * 変数\
267
- * 間隔: 縦方向
265
+ * 縦方向のテンプレート
268
266
  */
269
- declare const varLayoutGapY = "--nws-layout-gapY";
267
+ declare const clsLayoutTemplateY = "nws-layout-templateY";
270
268
  /**
271
269
  * 変数\
272
- * 子要素の横方向の数
270
+ * 間隔: 横方向
273
271
  */
274
- declare const varLayoutChildCountX = "--nws-layout-childCountX";
272
+ declare const varLayoutGapX = "--nws-layout-gapX";
275
273
  /**
276
274
  * 変数\
277
- * 子要素の縦方向の数
275
+ * 間隔: 縦方向
278
276
  */
279
- declare const varLayoutChildCountY = "--nws-layout-childCountY";
277
+ declare const varLayoutGapY = "--nws-layout-gapY";
280
278
  /**
281
279
  * 変数\
282
280
  * 子要素の幅
@@ -294,23 +292,23 @@ declare const varLayoutChildSizeY = "--nws-layout-childSizeY";
294
292
  declare const varLayoutChildRatio = "--nws-layout-childRatio";
295
293
  /**
296
294
  * 変数\
297
- * 横方向のテンプレート
295
+ * 子要素の横方向の数
298
296
  */
299
- declare const varLayoutTemplateX = "--nws-layout-templateX";
297
+ declare const varLayoutChildCountX = "--nws-layout-childCountX";
300
298
  /**
301
299
  * 変数\
302
- * 縦方向のテンプレート
300
+ * 子要素の縦方向の数
303
301
  */
304
- declare const varLayoutTemplateY = "--nws-layout-templateY";
302
+ declare const varLayoutChildCountY = "--nws-layout-childCountY";
305
303
  /**
306
304
  * 変数\
307
- * 横方向のオートトラック
305
+ * 横方向のテンプレート
308
306
  */
309
- declare const varLayoutAutoTracX = "--nws-layout-autoTracX";
307
+ declare const varLayoutTemplateX = "--nws-layout-templateX";
310
308
  /**
311
309
  * 変数\
312
- * 縦方向のオートトラック
310
+ * 縦方向のテンプレート
313
311
  */
314
- declare const varLayoutAutoTracY = "--nws-layout-autoTracY";
312
+ declare const varLayoutTemplateY = "--nws-layout-templateY";
315
313
  //#endregion
316
- export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutChildCountX, clsLayoutChildCountY, clsLayoutChildRatio, clsLayoutChildSizeX, clsLayoutChildSizeY, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTile, varLayoutAutoTracX, varLayoutAutoTracY, varLayoutChildCountX, varLayoutChildCountY, varLayoutChildRatio, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY };
314
+ export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutChildCountX, clsLayoutChildCountY, clsLayoutChildRatio, clsLayoutChildSizeX, clsLayoutChildSizeY, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTemplateX, clsLayoutTemplateY, clsLayoutTile, varLayoutChildCountX, varLayoutChildCountY, varLayoutChildRatio, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY };
package/core/constants.mjs CHANGED
@@ -246,25 +246,23 @@ const clsLayoutChildCountX = "nws-layout-childCountX";
246
246
  */
247
247
  const clsLayoutChildCountY = "nws-layout-childCountY";
248
248
  /**
249
- * 変数\
250
- * 間隔: 横方向
249
+ * 横方向のテンプレート
251
250
  */
252
- const varLayoutGapX = "--nws-layout-gapX";
251
+ const clsLayoutTemplateX = "nws-layout-templateX";
253
252
  /**
254
- * 変数\
255
- * 間隔: 縦方向
253
+ * 縦方向のテンプレート
256
254
  */
257
- const varLayoutGapY = "--nws-layout-gapY";
255
+ const clsLayoutTemplateY = "nws-layout-templateY";
258
256
  /**
259
257
  * 変数\
260
- * 子要素の横方向の数
258
+ * 間隔: 横方向
261
259
  */
262
- const varLayoutChildCountX = "--nws-layout-childCountX";
260
+ const varLayoutGapX = "--nws-layout-gapX";
263
261
  /**
264
262
  * 変数\
265
- * 子要素の縦方向の数
263
+ * 間隔: 縦方向
266
264
  */
267
- const varLayoutChildCountY = "--nws-layout-childCountY";
265
+ const varLayoutGapY = "--nws-layout-gapY";
268
266
  /**
269
267
  * 変数\
270
268
  * 子要素の幅
@@ -282,24 +280,24 @@ const varLayoutChildSizeY = "--nws-layout-childSizeY";
282
280
  const varLayoutChildRatio = "--nws-layout-childRatio";
283
281
  /**
284
282
  * 変数\
285
- * 横方向のテンプレート
283
+ * 子要素の横方向の数
286
284
  */
287
- const varLayoutTemplateX = "--nws-layout-templateX";
285
+ const varLayoutChildCountX = "--nws-layout-childCountX";
288
286
  /**
289
287
  * 変数\
290
- * 縦方向のテンプレート
288
+ * 子要素の縦方向の数
291
289
  */
292
- const varLayoutTemplateY = "--nws-layout-templateY";
290
+ const varLayoutChildCountY = "--nws-layout-childCountY";
293
291
  /**
294
292
  * 変数\
295
- * 横方向のオートトラック
293
+ * 横方向のテンプレート
296
294
  */
297
- const varLayoutAutoTracX = "--nws-layout-autoTracX";
295
+ const varLayoutTemplateX = "--nws-layout-templateX";
298
296
  /**
299
297
  * 変数\
300
- * 縦方向のオートトラック
298
+ * 縦方向のテンプレート
301
299
  */
302
- const varLayoutAutoTracY = "--nws-layout-autoTracY";
300
+ const varLayoutTemplateY = "--nws-layout-templateY";
303
301
 
304
302
  //#endregion
305
- export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutChildCountX, clsLayoutChildCountY, clsLayoutChildRatio, clsLayoutChildSizeX, clsLayoutChildSizeY, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTile, varLayoutAutoTracX, varLayoutAutoTracY, varLayoutChildCountX, varLayoutChildCountY, varLayoutChildRatio, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY };
303
+ export { Adjust, AdjustBase, AlignX, AlignXBase, AlignY, AlignYBase, Direction, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutChildCountX, clsLayoutChildCountY, clsLayoutChildRatio, clsLayoutChildSizeX, clsLayoutChildSizeY, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTemplateX, clsLayoutTemplateY, clsLayoutTile, varLayoutChildCountX, varLayoutChildCountY, varLayoutChildRatio, varLayoutChildSizeX, varLayoutChildSizeY, varLayoutGapX, varLayoutGapY, varLayoutTemplateX, varLayoutTemplateY };
package/core/flow/flow.cjs CHANGED
@@ -25,7 +25,7 @@ const flow = (options = {}) => {
25
25
  alignY: "top"
26
26
  }, { overwriteNull: true });
27
27
  const result = {
28
- className: (0, clsx.default)(require_core_constants.clsLayoutFlow, require_core__constants.clsLayoutDirection[direction], require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY]),
28
+ className: (0, clsx.default)(require_core_constants.clsLayoutFlow, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY]),
29
29
  style: {}
30
30
  };
31
31
  require_core__internal_applyGap(result, gap, gapX, gapY);
@@ -46,10 +46,10 @@ const flow = (options = {}) => {
46
46
  * stackの _getStackMainAxisStyle に相当。flowでは主軸の挙動はstackと同じ。
47
47
  */
48
48
  function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
49
- const result = { className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutAdjust[axis][adjust]) };
49
+ const result = { className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.adjust[axis][adjust]) };
50
50
  if (require_core__internal_hasValue(childSize)) {
51
- result.className = (0, clsx.default)(result.className, require_core__constants.clsLayoutChildSize[axis]);
52
- result.style = { [require_core__constants.varLayoutChildSize[axis]]: require_core__internal_unit(childSize) };
51
+ result.className = (0, clsx.default)(result.className, require_core__constants.clsLayout.childSize[axis]);
52
+ result.style = { [require_core__constants.varLayout.childSize[axis]]: require_core__internal_unit(childSize) };
53
53
  }
54
54
  return result;
55
55
  }
@@ -61,10 +61,10 @@ function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
61
61
  */
62
62
  function _getFlowCrossAxisStyle(axis, align, childSize) {
63
63
  if (require_core__internal_hasValue(childSize)) return {
64
- className: (0, clsx.default)(require_core__constants.clsLayoutAlign[axis][align], require_core__constants.clsLayoutChildSize[axis]),
65
- style: { [require_core__constants.varLayoutChildSize[axis]]: require_core__internal_unit(childSize) }
64
+ className: (0, clsx.default)(require_core__constants.clsLayout.align[axis][align], require_core__constants.clsLayout.childSize[axis]),
65
+ style: { [require_core__constants.varLayout.childSize[axis]]: require_core__internal_unit(childSize) }
66
66
  };
67
- else return { className: require_core__constants.clsLayoutAlign[axis][align] };
67
+ else return { className: require_core__constants.clsLayout.align[axis][align] };
68
68
  }
69
69
 
70
70
  //#endregion
package/core/flow/flow.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { clsLayoutFlow } from "../constants.mjs";
2
- import { clsLayoutAdjust, clsLayoutAlign, clsLayoutChildSize, clsLayoutDirection, varLayoutChildSize } from "../_constants.mjs";
2
+ import { clsLayout, varLayout } from "../_constants.mjs";
3
3
  import hasValue from "../_internal/hasValue.mjs";
4
4
  import applyChildRatio from "../_internal/applyChildRatio.mjs";
5
5
  import unit from "../_internal/unit.mjs";
@@ -22,7 +22,7 @@ const flow = (options = {}) => {
22
22
  alignY: "top"
23
23
  }, { overwriteNull: true });
24
24
  const result = {
25
- className: clsx(clsLayoutFlow, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY]),
25
+ className: clsx(clsLayoutFlow, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY]),
26
26
  style: {}
27
27
  };
28
28
  applyGap(result, gap, gapX, gapY);
@@ -43,10 +43,10 @@ const flow = (options = {}) => {
43
43
  * stackの _getStackMainAxisStyle に相当。flowでは主軸の挙動はstackと同じ。
44
44
  */
45
45
  function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
46
- const result = { className: clsx(clsLayoutAlign[axis][align], clsLayoutAdjust[axis][adjust]) };
46
+ const result = { className: clsx(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]) };
47
47
  if (hasValue(childSize)) {
48
- result.className = clsx(result.className, clsLayoutChildSize[axis]);
49
- result.style = { [varLayoutChildSize[axis]]: unit(childSize) };
48
+ result.className = clsx(result.className, clsLayout.childSize[axis]);
49
+ result.style = { [varLayout.childSize[axis]]: unit(childSize) };
50
50
  }
51
51
  return result;
52
52
  }
@@ -58,10 +58,10 @@ function _getFlowMainAxisStyle(axis, align, adjust, childSize) {
58
58
  */
59
59
  function _getFlowCrossAxisStyle(axis, align, childSize) {
60
60
  if (hasValue(childSize)) return {
61
- className: clsx(clsLayoutAlign[axis][align], clsLayoutChildSize[axis]),
62
- style: { [varLayoutChildSize[axis]]: unit(childSize) }
61
+ className: clsx(clsLayout.align[axis][align], clsLayout.childSize[axis]),
62
+ style: { [varLayout.childSize[axis]]: unit(childSize) }
63
63
  };
64
- else return { className: clsLayoutAlign[axis][align] };
64
+ else return { className: clsLayout.align[axis][align] };
65
65
  }
66
66
 
67
67
  //#endregion
package/core/flow/styles.css CHANGED
@@ -49,16 +49,14 @@
49
49
  .nws-layout-flow.nws-layout-direction-x.nws-layout-alignY-spaceEvenly {
50
50
  align-content: space-evenly;
51
51
  }
52
- .nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeX > * {
53
- flex-basis: var(--nws-layout-childSizeX);
54
- }
55
- .nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeY > * {
56
- height: var(--nws-layout-childSizeY);
57
- }
58
52
  .nws-layout-flow.nws-layout-direction-x > * {
59
53
  flex-grow: 0;
60
54
  flex-shrink: 0;
61
55
  min-width: 0;
56
+ min-height: 0;
57
+ }
58
+ .nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeX > * {
59
+ flex-basis: var(--nws-layout-childSizeX);
62
60
  }
63
61
  .nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-fit {
64
62
  justify-content: flex-start;
@@ -67,7 +65,6 @@
67
65
  flex-grow: 1;
68
66
  flex-shrink: 1;
69
67
  flex-basis: auto;
70
- min-width: 0;
71
68
  }
72
69
  .nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-fit.nws-layout-childSizeX > * {
73
70
  flex-basis: var(--nws-layout-childSizeX);
@@ -78,8 +75,8 @@
78
75
  .nws-layout-flow.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
79
76
  flex-shrink: 1;
80
77
  }
81
- .nws-layout-flow.nws-layout-direction-x > * {
82
- min-height: 0;
78
+ .nws-layout-flow.nws-layout-direction-x.nws-layout-childSizeY > * {
79
+ height: var(--nws-layout-childSizeY);
83
80
  }
84
81
  .nws-layout-flow.nws-layout-direction-y {
85
82
  flex-direction: column;
@@ -123,20 +120,18 @@
123
120
  .nws-layout-flow.nws-layout-direction-y.nws-layout-alignY-spaceEvenly {
124
121
  justify-content: space-evenly;
125
122
  }
123
+ .nws-layout-flow.nws-layout-direction-y > * {
124
+ flex-grow: 0;
125
+ flex-shrink: 0;
126
+ min-width: 0;
127
+ min-height: 0;
128
+ }
126
129
  .nws-layout-flow.nws-layout-direction-y.nws-layout-childSizeX > * {
127
130
  width: var(--nws-layout-childSizeX);
128
131
  }
129
132
  .nws-layout-flow.nws-layout-direction-y.nws-layout-childSizeY > * {
130
133
  flex-basis: var(--nws-layout-childSizeY);
131
134
  }
132
- .nws-layout-flow.nws-layout-direction-y > * {
133
- min-width: 0;
134
- }
135
- .nws-layout-flow.nws-layout-direction-y > * {
136
- flex-grow: 0;
137
- flex-shrink: 0;
138
- min-height: 0;
139
- }
140
135
  .nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-fit {
141
136
  justify-content: flex-start;
142
137
  }
@@ -144,7 +139,6 @@
144
139
  flex-grow: 1;
145
140
  flex-shrink: 1;
146
141
  flex-basis: auto;
147
- min-height: 0;
148
142
  }
149
143
  .nws-layout-flow.nws-layout-direction-y.nws-layout-adjustY-fit.nws-layout-childSizeY > * {
150
144
  flex-basis: var(--nws-layout-childSizeY);
@@ -159,8 +153,18 @@
159
153
  aspect-ratio: var(--nws-layout-childRatio);
160
154
  }
161
155
  .nws-layout-flow.nws-layout-gapX {
162
- column-gap: var(--nws-layout-gapX);
156
+ margin-left: calc(var(--nws-layout-gapX) / -2);
157
+ margin-right: calc(var(--nws-layout-gapX) / -2);
158
+ }
159
+ .nws-layout-flow.nws-layout-gapX > * {
160
+ margin-left: calc(var(--nws-layout-gapX) / 2);
161
+ margin-right: calc(var(--nws-layout-gapX) / 2);
163
162
  }
164
163
  .nws-layout-flow.nws-layout-gapY {
165
- row-gap: var(--nws-layout-gapY);
164
+ margin-top: calc(var(--nws-layout-gapY) / -2);
165
+ margin-bottom: calc(var(--nws-layout-gapY) / -2);
166
+ }
167
+ .nws-layout-flow.nws-layout-gapY > * {
168
+ margin-top: calc(var(--nws-layout-gapY) / 2);
169
+ margin-bottom: calc(var(--nws-layout-gapY) / 2);
166
170
  }
package/core/layer/layer.cjs CHANGED
@@ -22,7 +22,7 @@ const layer = (options = {}) => {
22
22
  alignY: "top"
23
23
  }, { overwriteNull: true });
24
24
  const result = {
25
- className: (0, clsx.default)(require_core_constants.clsLayoutLayer, require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY], require_core__constants.clsLayoutAdjust.x[adjustX], require_core__constants.clsLayoutAdjust.y[adjustY]),
25
+ className: (0, clsx.default)(require_core_constants.clsLayoutLayer, require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY], require_core__constants.clsLayout.adjust.x[adjustX], require_core__constants.clsLayout.adjust.y[adjustY]),
26
26
  style: {}
27
27
  };
28
28
  require_core__internal_applyChildSize(result, childSizeX, childSizeY);
package/core/layer/layer.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { clsLayoutLayer } from "../constants.mjs";
2
- import { clsLayoutAdjust, clsLayoutAlign } from "../_constants.mjs";
2
+ import { clsLayout } from "../_constants.mjs";
3
3
  import applyChildRatio from "../_internal/applyChildRatio.mjs";
4
4
  import applyChildSize from "../_internal/applyChildSize.mjs";
5
5
  import maybeDefault from "@niche-works/utils/object/maybeDefault";
@@ -19,7 +19,7 @@ const layer = (options = {}) => {
19
19
  alignY: "top"
20
20
  }, { overwriteNull: true });
21
21
  const result = {
22
- className: clsx(clsLayoutLayer, clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
22
+ className: clsx(clsLayoutLayer, clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
23
23
  style: {}
24
24
  };
25
25
  applyChildSize(result, childSizeX, childSizeY);
package/core/layer/styles.css CHANGED
@@ -31,33 +31,25 @@
31
31
  .nws-layout-layer.nws-layout-childSizeY > * {
32
32
  height: var(--nws-layout-childSizeY);
33
33
  }
34
- .nws-layout-layer.nws-layout-adjustX-fit > * {
34
+ .nws-layout-layer.nws-layout-adjustX-fit > *, .nws-layout-layer.nws-layout-adjustX-grow > * {
35
35
  justify-self: stretch;
36
36
  width: auto;
37
37
  }
38
38
  .nws-layout-layer.nws-layout-adjustX-grow > * {
39
- justify-self: stretch;
40
- width: auto;
41
39
  min-width: var(--nws-layout-childSizeX);
42
40
  }
43
41
  .nws-layout-layer.nws-layout-adjustX-shrink > * {
44
42
  width: clamp(0px, 100%, var(--nws-layout-childSizeX));
45
- min-width: 0;
46
- max-width: 100%;
47
43
  }
48
- .nws-layout-layer.nws-layout-adjustY-fit > * {
44
+ .nws-layout-layer.nws-layout-adjustY-fit > *, .nws-layout-layer.nws-layout-adjustY-grow > * {
49
45
  align-self: stretch;
50
46
  height: auto;
51
47
  }
52
48
  .nws-layout-layer.nws-layout-adjustY-grow > * {
53
- align-self: stretch;
54
- height: auto;
55
49
  min-height: var(--nws-layout-childSizeY);
56
50
  }
57
51
  .nws-layout-layer.nws-layout-adjustY-shrink > * {
58
52
  height: clamp(0px, 100%, var(--nws-layout-childSizeY));
59
- min-height: 0;
60
- max-height: 100%;
61
53
  }
62
54
  .nws-layout-layer.nws-layout-childRatio > * {
63
55
  aspect-ratio: var(--nws-layout-childRatio);
package/core/matrix/matrix.cjs CHANGED
@@ -1,11 +1,12 @@
1
1
  const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
2
2
  const require_core_constants = require('../constants.cjs');
3
3
  const require_core__constants = require('../_constants.cjs');
4
- const require_core__internal_hasValue = require('../_internal/hasValue.cjs');
5
4
  const require_core__internal_applyChildRatio = require('../_internal/applyChildRatio.cjs');
6
5
  const require_core__internal_unit = require('../_internal/unit.cjs');
6
+ const require_core__internal_applyChildSize = require('../_internal/applyChildSize.cjs');
7
7
  const require_core__internal_applyGap = require('../_internal/applyGap.cjs');
8
8
  const require_core__internal_mergeLayoutResults = require('../_internal/mergeLayoutResults.cjs');
9
+ const require_core__internal_applyChildCount = require('../_internal/applyChildCount.cjs');
9
10
  let _niche_works_utils_object_maybeDefault = require("@niche-works/utils/object/maybeDefault");
10
11
  _niche_works_utils_object_maybeDefault = require_runtime.__toESM(_niche_works_utils_object_maybeDefault, 1);
11
12
  let clsx = require("clsx");
@@ -23,17 +24,33 @@ const matrix = (options) => {
23
24
  alignX: "left",
24
25
  alignY: "top"
25
26
  }, { overwriteNull: true });
26
- const result = {
27
- className: (0, clsx.default)(require_core_constants.clsLayoutMatrix, require_core__constants.clsLayoutDirection[direction], require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY], require_core__constants.clsLayoutAdjust.x[adjustX], require_core__constants.clsLayoutAdjust.y[adjustY]),
27
+ let result = {
28
+ className: (0, clsx.default)(require_core_constants.clsLayoutMatrix, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY], require_core__constants.clsLayout.adjust.x[adjustX], require_core__constants.clsLayout.adjust.y[adjustY]),
28
29
  style: {}
29
30
  };
30
31
  require_core__internal_applyGap(result, gap, gapX, gapY);
31
32
  require_core__internal_applyChildRatio(result, childRatioX, childRatioY);
32
- return require_core__internal_mergeLayoutResults([
33
- result,
34
- _getGridTemplate("x", adjustX, childSizeX, childCountX, tracksX),
35
- _getGridTemplate("y", adjustY, childSizeY, childCountY, tracksY)
36
- ]);
33
+ let sizeX;
34
+ let sizeY;
35
+ let countX;
36
+ let countY;
37
+ let trxX;
38
+ let trxY;
39
+ if (Array.isArray(tracksX)) trxX = tracksX;
40
+ else {
41
+ sizeX = childSizeX;
42
+ countX = childCountX;
43
+ }
44
+ if (Array.isArray(tracksY)) trxY = tracksY;
45
+ else {
46
+ sizeY = childSizeY;
47
+ countY = childCountY;
48
+ }
49
+ require_core__internal_applyChildSize(result, sizeX, sizeY);
50
+ require_core__internal_applyChildCount(result, countX, countY);
51
+ if (trxX) result = require_core__internal_mergeLayoutResults([result, _getTemplate("x", adjustX, trxX)]);
52
+ if (trxY) result = require_core__internal_mergeLayoutResults([result, _getTemplate("y", adjustY, trxY)]);
53
+ return result;
37
54
  };
38
55
  /**
39
56
  * gridTemplateColumns / gridTemplateRowsを生成する
@@ -41,38 +58,19 @@ const matrix = (options) => {
41
58
  * @param adjust 子要素のサイズ調整
42
59
  * @param childSize 子要素のサイズ
43
60
  * @param childCount 子要素数
44
- * @param child 子要素数 & サイズ
61
+ * @param tracks 子要素数 & サイズ
45
62
  * @returns
46
63
  */
47
- function _getGridTemplate(axis, adjust, childSize, childCount, child) {
48
- let template;
49
- if (Array.isArray(child)) {
50
- const pxTotal = child.reduce((sum, value) => {
51
- const px = _extractPx(value);
52
- return px !== null ? sum + px : sum;
53
- }, 0);
54
- template = child.map((value) => _applyAdjustToTrack(axis, adjust, value, child.length, pxTotal)).join(" ");
55
- } else {
56
- const hasChildSize = require_core__internal_hasValue(childSize);
57
- const hasCount = require_core__internal_hasValue(childCount);
58
- if (adjust === "fit") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(clamp(0px, ${`calc((100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1)) / ${childCount})`}, ${require_core__internal_unit(childSize)}), 1fr))`;
59
- else if (hasChildSize) template = `repeat(auto-fit, minmax(clamp(0px, 100%, ${require_core__internal_unit(childSize)}), 1fr))`;
60
- else if (hasCount) template = `repeat(${childCount}, 1fr)`;
61
- else template = "repeat(auto-fit, 1fr)";
62
- else if (adjust === "grow") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(${require_core__internal_unit(childSize)}, 1fr))`;
63
- else if (hasChildSize) template = `repeat(auto-fit, minmax(${require_core__internal_unit(childSize)}, 1fr))`;
64
- else if (hasCount) template = `repeat(${childCount}, 1fr)`;
65
- else template = "repeat(auto-fit, 1fr)";
66
- else if (adjust === "shrink") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(0, ${require_core__internal_unit(childSize)}))`;
67
- else if (hasChildSize) template = `repeat(auto-fit, minmax(0, ${require_core__internal_unit(childSize)}))`;
68
- else if (hasCount) template = `repeat(${childCount}, auto)`;
69
- else template = "repeat(auto-fit, auto)";
70
- else if (hasChildSize && hasCount) template = `repeat(${childCount}, ${require_core__internal_unit(childSize)})`;
71
- else if (hasChildSize) template = `repeat(auto-fit, ${require_core__internal_unit(childSize)})`;
72
- else if (hasCount) template = `repeat(${childCount}, auto)`;
73
- else template = "repeat(auto-fit, auto)";
74
- }
75
- return { style: { [require_core__constants.varLayoutTemplate[axis]]: template } };
64
+ function _getTemplate(axis, adjust, tracks) {
65
+ const pxTotal = tracks.reduce((sum, value) => {
66
+ const px = _extractPx(value);
67
+ return px !== null ? sum + px : sum;
68
+ }, 0);
69
+ const template = tracks.map((value) => _applyAdjustToTrack(axis, adjust, value, tracks.length, pxTotal)).join(" ");
70
+ return {
71
+ className: require_core__constants.clsLayout.template[axis],
72
+ style: { [require_core__constants.varLayout.template[axis]]: template }
73
+ };
76
74
  }
77
75
  /**
78
76
  * tracksX/tracksYの各トラック値にadjustを適用する
@@ -85,13 +83,13 @@ function _applyAdjustToTrack(axis, adjust, size, childCount, pxTotal) {
85
83
  const pxValue = _extractPx(size);
86
84
  const isPx = pxValue !== null;
87
85
  if (adjust === "fit") {
88
- if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
86
+ if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${require_core__constants.varLayout.gap[axis]}) * ${childCount - 1}) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
89
87
  return isFr ? childSize : `minmax(0, ${childSize})`;
90
88
  } else if (adjust === "grow") {
91
- if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1))))`;
89
+ if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${require_core__constants.varLayout.gap[axis]}) * ${childCount - 1})))`;
92
90
  return isFr ? childSize : `minmax(${childSize}, 1fr)`;
93
91
  } else if (adjust === "shrink") {
94
- if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${require_core__constants.varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
92
+ if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${require_core__constants.varLayout.gap[axis]}) * ${childCount - 1}) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
95
93
  return isFr ? childSize : `minmax(0, ${childSize})`;
96
94
  }
97
95
  return childSize;
package/core/matrix/matrix.mjs CHANGED
@@ -1,10 +1,11 @@
1
1
  import { clsLayoutMatrix } from "../constants.mjs";
2
- import { clsLayoutAdjust, clsLayoutAlign, clsLayoutDirection, varLayoutGap, varLayoutTemplate } from "../_constants.mjs";
3
- import hasValue from "../_internal/hasValue.mjs";
2
+ import { clsLayout, varLayout } from "../_constants.mjs";
4
3
  import applyChildRatio from "../_internal/applyChildRatio.mjs";
5
4
  import unit from "../_internal/unit.mjs";
5
+ import applyChildSize from "../_internal/applyChildSize.mjs";
6
6
  import applyGap from "../_internal/applyGap.mjs";
7
7
  import mergeLayoutResults from "../_internal/mergeLayoutResults.mjs";
8
+ import applyChildCount from "../_internal/applyChildCount.mjs";
8
9
  import maybeDefault from "@niche-works/utils/object/maybeDefault";
9
10
  import clsx from "clsx";
10
11
 
@@ -20,17 +21,33 @@ const matrix = (options) => {
20
21
  alignX: "left",
21
22
  alignY: "top"
22
23
  }, { overwriteNull: true });
23
- const result = {
24
- className: clsx(clsLayoutMatrix, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
24
+ let result = {
25
+ className: clsx(clsLayoutMatrix, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
25
26
  style: {}
26
27
  };
27
28
  applyGap(result, gap, gapX, gapY);
28
29
  applyChildRatio(result, childRatioX, childRatioY);
29
- return mergeLayoutResults([
30
- result,
31
- _getGridTemplate("x", adjustX, childSizeX, childCountX, tracksX),
32
- _getGridTemplate("y", adjustY, childSizeY, childCountY, tracksY)
33
- ]);
30
+ let sizeX;
31
+ let sizeY;
32
+ let countX;
33
+ let countY;
34
+ let trxX;
35
+ let trxY;
36
+ if (Array.isArray(tracksX)) trxX = tracksX;
37
+ else {
38
+ sizeX = childSizeX;
39
+ countX = childCountX;
40
+ }
41
+ if (Array.isArray(tracksY)) trxY = tracksY;
42
+ else {
43
+ sizeY = childSizeY;
44
+ countY = childCountY;
45
+ }
46
+ applyChildSize(result, sizeX, sizeY);
47
+ applyChildCount(result, countX, countY);
48
+ if (trxX) result = mergeLayoutResults([result, _getTemplate("x", adjustX, trxX)]);
49
+ if (trxY) result = mergeLayoutResults([result, _getTemplate("y", adjustY, trxY)]);
50
+ return result;
34
51
  };
35
52
  /**
36
53
  * gridTemplateColumns / gridTemplateRowsを生成する
@@ -38,38 +55,19 @@ const matrix = (options) => {
38
55
  * @param adjust 子要素のサイズ調整
39
56
  * @param childSize 子要素のサイズ
40
57
  * @param childCount 子要素数
41
- * @param child 子要素数 & サイズ
58
+ * @param tracks 子要素数 & サイズ
42
59
  * @returns
43
60
  */
44
- function _getGridTemplate(axis, adjust, childSize, childCount, child) {
45
- let template;
46
- if (Array.isArray(child)) {
47
- const pxTotal = child.reduce((sum, value) => {
48
- const px = _extractPx(value);
49
- return px !== null ? sum + px : sum;
50
- }, 0);
51
- template = child.map((value) => _applyAdjustToTrack(axis, adjust, value, child.length, pxTotal)).join(" ");
52
- } else {
53
- const hasChildSize = hasValue(childSize);
54
- const hasCount = hasValue(childCount);
55
- if (adjust === "fit") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(clamp(0px, ${`calc((100% - var(${varLayoutGap[axis]}) * (${childCount} - 1)) / ${childCount})`}, ${unit(childSize)}), 1fr))`;
56
- else if (hasChildSize) template = `repeat(auto-fit, minmax(clamp(0px, 100%, ${unit(childSize)}), 1fr))`;
57
- else if (hasCount) template = `repeat(${childCount}, 1fr)`;
58
- else template = "repeat(auto-fit, 1fr)";
59
- else if (adjust === "grow") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(${unit(childSize)}, 1fr))`;
60
- else if (hasChildSize) template = `repeat(auto-fit, minmax(${unit(childSize)}, 1fr))`;
61
- else if (hasCount) template = `repeat(${childCount}, 1fr)`;
62
- else template = "repeat(auto-fit, 1fr)";
63
- else if (adjust === "shrink") if (hasChildSize && hasCount) template = `repeat(${childCount}, minmax(0, ${unit(childSize)}))`;
64
- else if (hasChildSize) template = `repeat(auto-fit, minmax(0, ${unit(childSize)}))`;
65
- else if (hasCount) template = `repeat(${childCount}, auto)`;
66
- else template = "repeat(auto-fit, auto)";
67
- else if (hasChildSize && hasCount) template = `repeat(${childCount}, ${unit(childSize)})`;
68
- else if (hasChildSize) template = `repeat(auto-fit, ${unit(childSize)})`;
69
- else if (hasCount) template = `repeat(${childCount}, auto)`;
70
- else template = "repeat(auto-fit, auto)";
71
- }
72
- return { style: { [varLayoutTemplate[axis]]: template } };
61
+ function _getTemplate(axis, adjust, tracks) {
62
+ const pxTotal = tracks.reduce((sum, value) => {
63
+ const px = _extractPx(value);
64
+ return px !== null ? sum + px : sum;
65
+ }, 0);
66
+ const template = tracks.map((value) => _applyAdjustToTrack(axis, adjust, value, tracks.length, pxTotal)).join(" ");
67
+ return {
68
+ className: clsLayout.template[axis],
69
+ style: { [varLayout.template[axis]]: template }
70
+ };
73
71
  }
74
72
  /**
75
73
  * tracksX/tracksYの各トラック値にadjustを適用する
@@ -82,13 +80,13 @@ function _applyAdjustToTrack(axis, adjust, size, childCount, pxTotal) {
82
80
  const pxValue = _extractPx(size);
83
81
  const isPx = pxValue !== null;
84
82
  if (adjust === "fit") {
85
- if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
83
+ if (isPx && pxTotal > 0) return `minmax(0, max(${`calc((100% - var(${varLayout.gap[axis]}) * ${childCount - 1}) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
86
84
  return isFr ? childSize : `minmax(0, ${childSize})`;
87
85
  } else if (adjust === "grow") {
88
- if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${varLayoutGap[axis]}) * (${childCount} - 1))))`;
86
+ if (isPx && pxTotal > 0) return `minmax(${childSize}, calc(${pxValue} / ${pxTotal} * (100% - var(${varLayout.gap[axis]}) * ${childCount - 1})))`;
89
87
  return isFr ? childSize : `minmax(${childSize}, 1fr)`;
90
88
  } else if (adjust === "shrink") {
91
- if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${varLayoutGap[axis]}) * (${childCount} - 1)) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
89
+ if (isPx && pxTotal > 0) return `minmax(0, min(${`calc((100% - var(${varLayout.gap[axis]}) * ${childCount - 1}) * ${pxValue} / ${pxTotal})`}, ${childSize}))`;
92
90
  return isFr ? childSize : `minmax(0, ${childSize})`;
93
91
  }
94
92
  return childSize;