@fringeworks/style-layouts 0.0.0-stage → 0.8.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.
- package/LICENSE +21 -0
- package/README.ja.md +331 -0
- package/README.md +331 -3
- package/_constants.cjs +327 -0
- package/_constants.d.cts +237 -0
- package/_constants.d.mts +237 -0
- package/_constants.mjs +275 -0
- package/_internal/applyGap.cjs +30 -0
- package/_internal/applyGap.d.cts +12 -0
- package/_internal/applyGap.d.mts +13 -0
- package/_internal/applyGap.mjs +30 -0
- package/_internal/applyItemCount.cjs +20 -0
- package/_internal/applyItemCount.d.cts +5 -0
- package/_internal/applyItemCount.d.mts +6 -0
- package/_internal/applyItemCount.mjs +20 -0
- package/_internal/applyItemRatio.cjs +21 -0
- package/_internal/applyItemRatio.d.cts +11 -0
- package/_internal/applyItemRatio.d.mts +12 -0
- package/_internal/applyItemRatio.mjs +21 -0
- package/_internal/applyItemSize.cjs +21 -0
- package/_internal/applyItemSize.d.cts +5 -0
- package/_internal/applyItemSize.d.mts +6 -0
- package/_internal/applyItemSize.mjs +21 -0
- package/_internal/hasValue.cjs +15 -0
- package/_internal/hasValue.d.cts +8 -0
- package/_internal/hasValue.d.mts +9 -0
- package/_internal/hasValue.mjs +14 -0
- package/_internal/mergeClassName.cjs +11 -0
- package/_internal/mergeClassName.d.cts +3 -0
- package/_internal/mergeClassName.d.mts +4 -0
- package/_internal/mergeClassName.mjs +10 -0
- package/_internal/mergeLayoutResults.cjs +16 -0
- package/_internal/mergeLayoutResults.d.cts +5 -0
- package/_internal/mergeLayoutResults.d.mts +6 -0
- package/_internal/mergeLayoutResults.mjs +16 -0
- package/_internal/unit.cjs +9 -0
- package/_internal/unit.d.cts +11 -0
- package/_internal/unit.d.mts +12 -0
- package/_internal/unit.mjs +8 -0
- package/_styles.scss.cjs +1 -0
- package/_styles.scss.d.cts +1 -0
- package/_styles.scss.d.mts +1 -0
- package/_styles.scss.mjs +3 -0
- package/_types.cjs +0 -0
- package/_types.d.cts +115 -0
- package/_types.d.mts +115 -0
- package/_types.mjs +1 -0
- package/_virtual/_rolldown/runtime.cjs +29 -0
- package/balance/balance.cjs +37 -0
- package/balance/balance.d.cts +13 -0
- package/balance/balance.d.mts +14 -0
- package/balance/balance.mjs +35 -0
- package/balance/index.cjs +3 -0
- package/balance/index.d.cts +3 -0
- package/balance/index.d.mts +3 -0
- package/balance/index.mjs +3 -0
- package/balance/styles.css +131 -0
- package/balance/types.cjs +0 -0
- package/balance/types.d.cts +21 -0
- package/balance/types.d.mts +21 -0
- package/balance/types.mjs +1 -0
- package/center/center.cjs +34 -0
- package/center/center.d.cts +12 -0
- package/center/center.d.mts +13 -0
- package/center/center.mjs +32 -0
- package/center/index.cjs +3 -0
- package/center/index.d.cts +3 -0
- package/center/index.d.mts +3 -0
- package/center/index.mjs +3 -0
- package/center/styles.css +157 -0
- package/center/types.cjs +0 -0
- package/center/types.d.cts +9 -0
- package/center/types.d.mts +9 -0
- package/center/types.mjs +1 -0
- package/constants.cjs +109 -0
- package/constants.d.cts +112 -0
- package/constants.d.mts +112 -0
- package/constants.mjs +101 -0
- package/flow/flow.cjs +71 -0
- package/flow/flow.d.cts +12 -0
- package/flow/flow.d.mts +13 -0
- package/flow/flow.mjs +69 -0
- package/flow/index.cjs +3 -0
- package/flow/index.d.cts +3 -0
- package/flow/index.d.mts +3 -0
- package/flow/index.mjs +3 -0
- package/flow/styles.css +160 -0
- package/flow/types.cjs +0 -0
- package/flow/types.d.cts +21 -0
- package/flow/types.d.mts +21 -0
- package/flow/types.mjs +1 -0
- package/helpers/_internal/constants.cjs +25 -0
- package/helpers/_internal/constants.d.cts +13 -0
- package/helpers/_internal/constants.d.mts +13 -0
- package/helpers/_internal/constants.mjs +16 -0
- package/helpers/_internal/createExtractLayoutOptions.cjs +25 -0
- package/helpers/_internal/createExtractLayoutOptions.d.cts +8 -0
- package/helpers/_internal/createExtractLayoutOptions.d.mts +9 -0
- package/helpers/_internal/createExtractLayoutOptions.mjs +24 -0
- package/helpers/extractBalanceOptions.cjs +15 -0
- package/helpers/extractBalanceOptions.d.cts +5 -0
- package/helpers/extractBalanceOptions.d.mts +6 -0
- package/helpers/extractBalanceOptions.mjs +15 -0
- package/helpers/extractCenterOptions.cjs +14 -0
- package/helpers/extractCenterOptions.d.cts +6 -0
- package/helpers/extractCenterOptions.d.mts +7 -0
- package/helpers/extractCenterOptions.mjs +14 -0
- package/helpers/extractFlowOptions.cjs +15 -0
- package/helpers/extractFlowOptions.d.cts +6 -0
- package/helpers/extractFlowOptions.d.mts +7 -0
- package/helpers/extractFlowOptions.mjs +15 -0
- package/helpers/extractLayerOptions.cjs +13 -0
- package/helpers/extractLayerOptions.d.cts +6 -0
- package/helpers/extractLayerOptions.d.mts +7 -0
- package/helpers/extractLayerOptions.mjs +13 -0
- package/helpers/extractMatrixOptions.cjs +17 -0
- package/helpers/extractMatrixOptions.d.cts +5 -0
- package/helpers/extractMatrixOptions.d.mts +6 -0
- package/helpers/extractMatrixOptions.mjs +17 -0
- package/helpers/extractPackOptions.cjs +8 -0
- package/helpers/extractPackOptions.d.cts +6 -0
- package/helpers/extractPackOptions.d.mts +7 -0
- package/helpers/extractPackOptions.mjs +8 -0
- package/helpers/extractPinOptions.cjs +8 -0
- package/helpers/extractPinOptions.d.cts +6 -0
- package/helpers/extractPinOptions.d.mts +7 -0
- package/helpers/extractPinOptions.mjs +8 -0
- package/helpers/extractStackOptions.cjs +15 -0
- package/helpers/extractStackOptions.d.cts +6 -0
- package/helpers/extractStackOptions.d.mts +7 -0
- package/helpers/extractStackOptions.mjs +15 -0
- package/helpers/extractTileOptions.cjs +15 -0
- package/helpers/extractTileOptions.d.cts +6 -0
- package/helpers/extractTileOptions.d.mts +7 -0
- package/helpers/extractTileOptions.mjs +15 -0
- package/helpers/index.cjs +20 -0
- package/helpers/index.d.cts +10 -0
- package/helpers/index.d.mts +10 -0
- package/helpers/index.mjs +11 -0
- package/index.cjs +20 -0
- package/index.d.cts +20 -0
- package/index.d.mts +20 -0
- package/index.mjs +11 -0
- package/layer/index.cjs +3 -0
- package/layer/index.d.cts +3 -0
- package/layer/index.d.mts +3 -0
- package/layer/index.mjs +3 -0
- package/layer/layer.cjs +34 -0
- package/layer/layer.d.cts +13 -0
- package/layer/layer.d.mts +14 -0
- package/layer/layer.mjs +32 -0
- package/layer/styles.css +56 -0
- package/layer/types.cjs +0 -0
- package/layer/types.d.cts +13 -0
- package/layer/types.d.mts +13 -0
- package/layer/types.mjs +1 -0
- package/matrix/index.cjs +3 -0
- package/matrix/index.d.cts +3 -0
- package/matrix/index.d.mts +3 -0
- package/matrix/index.mjs +3 -0
- package/matrix/matrix.cjs +110 -0
- package/matrix/matrix.d.cts +12 -0
- package/matrix/matrix.d.mts +13 -0
- package/matrix/matrix.mjs +108 -0
- package/matrix/styles.css +141 -0
- package/matrix/types.cjs +0 -0
- package/matrix/types.d.cts +46 -0
- package/matrix/types.d.mts +46 -0
- package/matrix/types.mjs +1 -0
- package/pack/index.cjs +3 -0
- package/pack/index.d.cts +3 -0
- package/pack/index.d.mts +3 -0
- package/pack/index.mjs +3 -0
- package/pack/pack.cjs +25 -0
- package/pack/pack.d.cts +11 -0
- package/pack/pack.d.mts +12 -0
- package/pack/pack.mjs +23 -0
- package/pack/styles.css +35 -0
- package/pack/types.cjs +0 -0
- package/pack/types.d.cts +6 -0
- package/pack/types.d.mts +6 -0
- package/pack/types.mjs +1 -0
- package/package.json +52 -4
- package/pin/index.cjs +3 -0
- package/pin/index.d.cts +3 -0
- package/pin/index.d.mts +3 -0
- package/pin/index.mjs +3 -0
- package/pin/pin.cjs +23 -0
- package/pin/pin.d.cts +11 -0
- package/pin/pin.d.mts +12 -0
- package/pin/pin.mjs +23 -0
- package/pin/styles.css +19 -0
- package/pin/types.cjs +0 -0
- package/pin/types.d.cts +6 -0
- package/pin/types.d.mts +6 -0
- package/pin/types.mjs +1 -0
- package/stack/index.cjs +3 -0
- package/stack/index.d.cts +3 -0
- package/stack/index.d.mts +3 -0
- package/stack/index.mjs +3 -0
- package/stack/stack.cjs +96 -0
- package/stack/stack.d.cts +11 -0
- package/stack/stack.d.mts +12 -0
- package/stack/stack.mjs +94 -0
- package/stack/styles.css +167 -0
- package/stack/types.cjs +0 -0
- package/stack/types.d.cts +21 -0
- package/stack/types.d.mts +21 -0
- package/stack/types.mjs +1 -0
- package/styles.css +1055 -0
- package/tile/index.cjs +3 -0
- package/tile/index.d.cts +3 -0
- package/tile/index.d.mts +3 -0
- package/tile/index.mjs +3 -0
- package/tile/styles.css +181 -0
- package/tile/tile.cjs +36 -0
- package/tile/tile.d.cts +12 -0
- package/tile/tile.d.mts +13 -0
- package/tile/tile.mjs +34 -0
- package/tile/types.cjs +0 -0
- package/tile/types.d.cts +9 -0
- package/tile/types.d.mts +9 -0
- package/tile/types.mjs +1 -0
- package/types.cjs +0 -0
- package/types.d.cts +14 -0
- package/types.d.mts +14 -0
- package/types.mjs +1 -0
- package/with-css/balance/index.cjs +8 -0
- package/with-css/balance/index.d.cts +3 -0
- package/with-css/balance/index.d.mts +3 -0
- package/with-css/balance/index.mjs +8 -0
- package/with-css/center/index.cjs +8 -0
- package/with-css/center/index.d.cts +3 -0
- package/with-css/center/index.d.mts +3 -0
- package/with-css/center/index.mjs +8 -0
- package/with-css/flow/index.cjs +8 -0
- package/with-css/flow/index.d.cts +3 -0
- package/with-css/flow/index.d.mts +3 -0
- package/with-css/flow/index.mjs +8 -0
- package/with-css/index.cjs +20 -0
- package/with-css/index.d.cts +20 -0
- package/with-css/index.d.mts +20 -0
- package/with-css/index.mjs +11 -0
- package/with-css/layer/index.cjs +8 -0
- package/with-css/layer/index.d.cts +3 -0
- package/with-css/layer/index.d.mts +3 -0
- package/with-css/layer/index.mjs +8 -0
- package/with-css/matrix/index.cjs +8 -0
- package/with-css/matrix/index.d.cts +3 -0
- package/with-css/matrix/index.d.mts +3 -0
- package/with-css/matrix/index.mjs +8 -0
- package/with-css/pack/index.cjs +8 -0
- package/with-css/pack/index.d.cts +3 -0
- package/with-css/pack/index.d.mts +3 -0
- package/with-css/pack/index.mjs +8 -0
- package/with-css/pin/index.cjs +8 -0
- package/with-css/pin/index.d.cts +3 -0
- package/with-css/pin/index.d.mts +3 -0
- package/with-css/pin/index.mjs +8 -0
- package/with-css/stack/index.cjs +8 -0
- package/with-css/stack/index.d.cts +3 -0
- package/with-css/stack/index.d.mts +3 -0
- package/with-css/stack/index.mjs +8 -0
- package/with-css/tile/index.cjs +8 -0
- package/with-css/tile/index.d.cts +3 -0
- package/with-css/tile/index.d.mts +3 -0
- package/with-css/tile/index.mjs +8 -0
package/tile/index.cjs
ADDED
package/tile/index.d.cts
ADDED
package/tile/index.d.mts
ADDED
package/tile/index.mjs
ADDED
package/tile/styles.css
ADDED
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
.frg-layout-tile {
|
|
2
|
+
--frg-layout-gapX: 0px;
|
|
3
|
+
--frg-layout-gapY: 0px;
|
|
4
|
+
--frg-layout-itemSizeX: auto;
|
|
5
|
+
--frg-layout-itemSizeY: auto;
|
|
6
|
+
--frg-layout-itemRatio: auto;
|
|
7
|
+
display: grid;
|
|
8
|
+
}
|
|
9
|
+
.frg-layout-tile > * {
|
|
10
|
+
min-width: 0;
|
|
11
|
+
min-height: 0;
|
|
12
|
+
}
|
|
13
|
+
.frg-layout-tile.frg-layout-direction-x {
|
|
14
|
+
grid-auto-flow: row;
|
|
15
|
+
grid-template-columns: repeat(auto-fit, minmax(max-content, 100%));
|
|
16
|
+
}
|
|
17
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-itemSizeX {
|
|
18
|
+
grid-template-columns: repeat(auto-fit, var(--frg-layout-itemSizeX));
|
|
19
|
+
}
|
|
20
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-fit, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-grow, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-shrink {
|
|
21
|
+
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
22
|
+
}
|
|
23
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-fit > *, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-grow > *, .frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-shrink > * {
|
|
24
|
+
width: auto;
|
|
25
|
+
}
|
|
26
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-fit.frg-layout-itemSizeX {
|
|
27
|
+
grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--frg-layout-itemSizeX)), 1fr));
|
|
28
|
+
}
|
|
29
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-grow.frg-layout-itemSizeX {
|
|
30
|
+
grid-template-columns: repeat(auto-fit, minmax(var(--frg-layout-itemSizeX), 1fr));
|
|
31
|
+
}
|
|
32
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustX-shrink.frg-layout-itemSizeX {
|
|
33
|
+
grid-template-columns: repeat(auto-fit, minmax(0, var(--frg-layout-itemSizeX)));
|
|
34
|
+
}
|
|
35
|
+
.frg-layout-tile.frg-layout-direction-x {
|
|
36
|
+
grid-auto-rows: auto;
|
|
37
|
+
}
|
|
38
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-fit {
|
|
39
|
+
grid-auto-rows: minmax(0, 100%);
|
|
40
|
+
align-content: stretch;
|
|
41
|
+
}
|
|
42
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-fit > * {
|
|
43
|
+
height: auto;
|
|
44
|
+
}
|
|
45
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow {
|
|
46
|
+
grid-auto-rows: minmax(auto, 100%);
|
|
47
|
+
}
|
|
48
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow > * {
|
|
49
|
+
max-height: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
}
|
|
52
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow.frg-layout-itemSizeY {
|
|
53
|
+
grid-auto-rows: minmax(var(--frg-layout-itemSizeY), 100%);
|
|
54
|
+
}
|
|
55
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-grow.frg-layout-itemSizeY > * {
|
|
56
|
+
min-height: var(--frg-layout-itemSizeY);
|
|
57
|
+
}
|
|
58
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink {
|
|
59
|
+
grid-auto-rows: minmax(0, auto);
|
|
60
|
+
}
|
|
61
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink > * {
|
|
62
|
+
min-height: 100%;
|
|
63
|
+
height: 100%;
|
|
64
|
+
}
|
|
65
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink.frg-layout-itemSizeY {
|
|
66
|
+
grid-auto-rows: minmax(0, var(--frg-layout-itemSizeY));
|
|
67
|
+
}
|
|
68
|
+
.frg-layout-tile.frg-layout-direction-x.frg-layout-adjustY-shrink.frg-layout-itemSizeY > * {
|
|
69
|
+
max-height: var(--frg-layout-itemSizeY);
|
|
70
|
+
}
|
|
71
|
+
.frg-layout-tile.frg-layout-direction-y {
|
|
72
|
+
grid-auto-flow: column;
|
|
73
|
+
grid-auto-columns: auto;
|
|
74
|
+
}
|
|
75
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-fit > *, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-grow > *, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-shrink > * {
|
|
76
|
+
width: auto;
|
|
77
|
+
}
|
|
78
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-fit {
|
|
79
|
+
grid-auto-columns: minmax(0, 100%);
|
|
80
|
+
}
|
|
81
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-grow {
|
|
82
|
+
grid-auto-columns: minmax(auto, 100%);
|
|
83
|
+
}
|
|
84
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-grow.frg-layout-itemSizeX {
|
|
85
|
+
grid-auto-columns: minmax(var(--frg-layout-itemSizeX), 100%);
|
|
86
|
+
}
|
|
87
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-shrink {
|
|
88
|
+
grid-auto-columns: minmax(0, auto);
|
|
89
|
+
}
|
|
90
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustX-shrink.frg-layout-itemSizeX {
|
|
91
|
+
grid-auto-columns: minmax(0, var(--frg-layout-itemSizeX));
|
|
92
|
+
}
|
|
93
|
+
.frg-layout-tile.frg-layout-direction-y {
|
|
94
|
+
grid-template-rows: repeat(auto-fit, minmax(max-content, 100%));
|
|
95
|
+
}
|
|
96
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-itemSizeY {
|
|
97
|
+
grid-template-rows: repeat(auto-fit, var(--frg-layout-itemSizeY));
|
|
98
|
+
}
|
|
99
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow, .frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink {
|
|
100
|
+
grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
|
|
101
|
+
}
|
|
102
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit {
|
|
103
|
+
align-content: stretch;
|
|
104
|
+
}
|
|
105
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit > * {
|
|
106
|
+
height: auto;
|
|
107
|
+
}
|
|
108
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-fit.frg-layout-itemSizeY {
|
|
109
|
+
grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--frg-layout-itemSizeY)), 1fr));
|
|
110
|
+
}
|
|
111
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow > * {
|
|
112
|
+
max-height: 100%;
|
|
113
|
+
height: 100%;
|
|
114
|
+
}
|
|
115
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow.frg-layout-itemSizeY {
|
|
116
|
+
grid-template-rows: repeat(auto-fit, minmax(var(--frg-layout-itemSizeY), 1fr));
|
|
117
|
+
}
|
|
118
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-grow.frg-layout-itemSizeY > * {
|
|
119
|
+
min-height: var(--frg-layout-itemSizeY);
|
|
120
|
+
}
|
|
121
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink > * {
|
|
122
|
+
min-height: 100%;
|
|
123
|
+
height: 100%;
|
|
124
|
+
}
|
|
125
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink.frg-layout-itemSizeY {
|
|
126
|
+
grid-template-rows: repeat(auto-fit, minmax(0, var(--frg-layout-itemSizeY)));
|
|
127
|
+
}
|
|
128
|
+
.frg-layout-tile.frg-layout-direction-y.frg-layout-adjustY-shrink.frg-layout-itemSizeY > * {
|
|
129
|
+
max-height: var(--frg-layout-itemSizeY);
|
|
130
|
+
}
|
|
131
|
+
.frg-layout-tile.frg-layout-alignX-left {
|
|
132
|
+
justify-content: flex-start;
|
|
133
|
+
}
|
|
134
|
+
.frg-layout-tile.frg-layout-alignX-center {
|
|
135
|
+
justify-content: center;
|
|
136
|
+
}
|
|
137
|
+
.frg-layout-tile.frg-layout-alignX-right {
|
|
138
|
+
justify-content: flex-end;
|
|
139
|
+
}
|
|
140
|
+
.frg-layout-tile.frg-layout-alignX-spaceBetween {
|
|
141
|
+
justify-content: space-between;
|
|
142
|
+
}
|
|
143
|
+
.frg-layout-tile.frg-layout-alignX-spaceAround {
|
|
144
|
+
justify-content: space-around;
|
|
145
|
+
}
|
|
146
|
+
.frg-layout-tile.frg-layout-alignX-spaceEvenly {
|
|
147
|
+
justify-content: space-evenly;
|
|
148
|
+
}
|
|
149
|
+
.frg-layout-tile.frg-layout-alignY-top {
|
|
150
|
+
align-content: flex-start;
|
|
151
|
+
}
|
|
152
|
+
.frg-layout-tile.frg-layout-alignY-middle {
|
|
153
|
+
align-content: center;
|
|
154
|
+
}
|
|
155
|
+
.frg-layout-tile.frg-layout-alignY-bottom {
|
|
156
|
+
align-content: flex-end;
|
|
157
|
+
}
|
|
158
|
+
.frg-layout-tile.frg-layout-alignY-spaceBetween {
|
|
159
|
+
align-content: space-between;
|
|
160
|
+
}
|
|
161
|
+
.frg-layout-tile.frg-layout-alignY-spaceAround {
|
|
162
|
+
align-content: space-around;
|
|
163
|
+
}
|
|
164
|
+
.frg-layout-tile.frg-layout-alignY-spaceEvenly {
|
|
165
|
+
align-content: space-evenly;
|
|
166
|
+
}
|
|
167
|
+
.frg-layout-tile.frg-layout-itemSizeX > * {
|
|
168
|
+
width: var(--frg-layout-itemSizeX);
|
|
169
|
+
}
|
|
170
|
+
.frg-layout-tile.frg-layout-itemSizeY > * {
|
|
171
|
+
height: var(--frg-layout-itemSizeY);
|
|
172
|
+
}
|
|
173
|
+
.frg-layout-tile.frg-layout-itemRatio > * {
|
|
174
|
+
aspect-ratio: var(--frg-layout-itemRatio);
|
|
175
|
+
}
|
|
176
|
+
.frg-layout-tile.frg-layout-gapX {
|
|
177
|
+
column-gap: var(--frg-layout-gapX);
|
|
178
|
+
}
|
|
179
|
+
.frg-layout-tile.frg-layout-gapY {
|
|
180
|
+
row-gap: var(--frg-layout-gapY);
|
|
181
|
+
}
|
package/tile/tile.cjs
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
|
|
2
|
+
const require__constants = require('../_constants.cjs');
|
|
3
|
+
const require__internal_mergeClassName = require('../_internal/mergeClassName.cjs');
|
|
4
|
+
const require__internal_applyGap = require('../_internal/applyGap.cjs');
|
|
5
|
+
const require__internal_applyItemRatio = require('../_internal/applyItemRatio.cjs');
|
|
6
|
+
const require__internal_applyItemSize = require('../_internal/applyItemSize.cjs');
|
|
7
|
+
let _fringeworks_utils_object_maybeDefault = require("@fringeworks/utils/object/maybeDefault");
|
|
8
|
+
_fringeworks_utils_object_maybeDefault = require_runtime.__toESM(_fringeworks_utils_object_maybeDefault, 1);
|
|
9
|
+
|
|
10
|
+
//#region src/tile/tile.ts
|
|
11
|
+
/**
|
|
12
|
+
* tileレイアウト
|
|
13
|
+
*
|
|
14
|
+
* - 子要素の高さ・幅を基準にして格子状に並べる
|
|
15
|
+
* - 親要素のサイズが子要素に依存していないことを前提とする
|
|
16
|
+
*/
|
|
17
|
+
const tile = (options = {}) => {
|
|
18
|
+
const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = (0, _fringeworks_utils_object_maybeDefault.default)(options, {
|
|
19
|
+
direction: "x",
|
|
20
|
+
alignX: "left",
|
|
21
|
+
alignY: "top",
|
|
22
|
+
adjustX: "none",
|
|
23
|
+
adjustY: "none"
|
|
24
|
+
}, { overwriteNull: true });
|
|
25
|
+
const result = {
|
|
26
|
+
className: require__internal_mergeClassName(require__constants.clsLayoutTile, require__constants.clsLayout.direction[direction], require__constants.clsLayout.align.x[alignX], require__constants.clsLayout.align.y[alignY], require__constants.clsLayout.adjust.x[adjustX], require__constants.clsLayout.adjust.y[adjustY]),
|
|
27
|
+
style: {}
|
|
28
|
+
};
|
|
29
|
+
require__internal_applyGap(result, gap, gapX, gapY);
|
|
30
|
+
require__internal_applyItemSize(result, itemSizeX, itemSizeY);
|
|
31
|
+
require__internal_applyItemRatio(result, itemRatioX, itemRatioY);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
//#endregion
|
|
36
|
+
module.exports = tile;
|
package/tile/tile.d.cts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CreateLayoutStyle } from "../types.cjs";
|
|
2
|
+
import { TileLayoutOptions } from "./types.cjs";
|
|
3
|
+
|
|
4
|
+
//#region src/tile/tile.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* tileレイアウト
|
|
7
|
+
*
|
|
8
|
+
* - 子要素の高さ・幅を基準にして格子状に並べる
|
|
9
|
+
* - 親要素のサイズが子要素に依存していないことを前提とする
|
|
10
|
+
*/
|
|
11
|
+
declare const tile: CreateLayoutStyle<TileLayoutOptions>;
|
|
12
|
+
export = tile;
|
package/tile/tile.d.mts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CreateLayoutStyle } from "../types.mjs";
|
|
2
|
+
import { TileLayoutOptions } from "./types.mjs";
|
|
3
|
+
|
|
4
|
+
//#region src/tile/tile.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* tileレイアウト
|
|
7
|
+
*
|
|
8
|
+
* - 子要素の高さ・幅を基準にして格子状に並べる
|
|
9
|
+
* - 親要素のサイズが子要素に依存していないことを前提とする
|
|
10
|
+
*/
|
|
11
|
+
declare const tile: CreateLayoutStyle<TileLayoutOptions>;
|
|
12
|
+
//#endregion
|
|
13
|
+
export { tile as default };
|
package/tile/tile.mjs
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { clsLayout, clsLayoutTile } from "../_constants.mjs";
|
|
2
|
+
import mergeClassName from "../_internal/mergeClassName.mjs";
|
|
3
|
+
import applyGap from "../_internal/applyGap.mjs";
|
|
4
|
+
import applyItemRatio from "../_internal/applyItemRatio.mjs";
|
|
5
|
+
import applyItemSize from "../_internal/applyItemSize.mjs";
|
|
6
|
+
import maybeDefault from "@fringeworks/utils/object/maybeDefault";
|
|
7
|
+
|
|
8
|
+
//#region src/tile/tile.ts
|
|
9
|
+
/**
|
|
10
|
+
* tileレイアウト
|
|
11
|
+
*
|
|
12
|
+
* - 子要素の高さ・幅を基準にして格子状に並べる
|
|
13
|
+
* - 親要素のサイズが子要素に依存していないことを前提とする
|
|
14
|
+
*/
|
|
15
|
+
const tile = (options = {}) => {
|
|
16
|
+
const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = maybeDefault(options, {
|
|
17
|
+
direction: "x",
|
|
18
|
+
alignX: "left",
|
|
19
|
+
alignY: "top",
|
|
20
|
+
adjustX: "none",
|
|
21
|
+
adjustY: "none"
|
|
22
|
+
}, { overwriteNull: true });
|
|
23
|
+
const result = {
|
|
24
|
+
className: mergeClassName(clsLayoutTile, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
|
|
25
|
+
style: {}
|
|
26
|
+
};
|
|
27
|
+
applyGap(result, gap, gapX, gapY);
|
|
28
|
+
applyItemSize(result, itemSizeX, itemSizeY);
|
|
29
|
+
applyItemRatio(result, itemRatioX, itemRatioY);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
//#endregion
|
|
34
|
+
export { tile as default };
|
package/tile/types.cjs
ADDED
|
File without changes
|
package/tile/types.d.cts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.cjs";
|
|
2
|
+
|
|
3
|
+
//#region src/tile/types.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* tileのオプション
|
|
6
|
+
*/
|
|
7
|
+
type TileLayoutOptions = DirectionOptions & AlignOptions & AdjustOptions & GapOptions & ItemSizeOptions & ItemRatioOptions;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { TileLayoutOptions };
|
package/tile/types.d.mts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/tile/types.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* tileのオプション
|
|
6
|
+
*/
|
|
7
|
+
type TileLayoutOptions = DirectionOptions & AlignOptions & AdjustOptions & GapOptions & ItemSizeOptions & ItemRatioOptions;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { TileLayoutOptions };
|
package/tile/types.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
package/types.cjs
ADDED
|
File without changes
|
package/types.d.cts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { StyleResult } from "@fringeworks/style-utils";
|
|
2
|
+
import { LooseDictionary } from "@fringeworks/types";
|
|
3
|
+
|
|
4
|
+
//#region src/types.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* レイアウトを作る関数
|
|
7
|
+
*/
|
|
8
|
+
type CreateLayoutStyle<O = LooseDictionary> = (options?: O) => LayoutStyle;
|
|
9
|
+
/**
|
|
10
|
+
* レイアウト
|
|
11
|
+
*/
|
|
12
|
+
type LayoutStyle = StyleResult;
|
|
13
|
+
//#endregion
|
|
14
|
+
export { CreateLayoutStyle, LayoutStyle };
|
package/types.d.mts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { StyleResult } from "@fringeworks/style-utils";
|
|
2
|
+
import { LooseDictionary } from "@fringeworks/types";
|
|
3
|
+
|
|
4
|
+
//#region src/types.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* レイアウトを作る関数
|
|
7
|
+
*/
|
|
8
|
+
type CreateLayoutStyle<O = LooseDictionary> = (options?: O) => LayoutStyle;
|
|
9
|
+
/**
|
|
10
|
+
* レイアウト
|
|
11
|
+
*/
|
|
12
|
+
type LayoutStyle = StyleResult;
|
|
13
|
+
//#endregion
|
|
14
|
+
export { CreateLayoutStyle, LayoutStyle };
|
package/types.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
2
|
+
const require_with_css_balance_index = require('./balance/index.cjs');
|
|
3
|
+
const require_with_css_center_index = require('./center/index.cjs');
|
|
4
|
+
const require_with_css_flow_index = require('./flow/index.cjs');
|
|
5
|
+
const require_with_css_layer_index = require('./layer/index.cjs');
|
|
6
|
+
const require_with_css_matrix_index = require('./matrix/index.cjs');
|
|
7
|
+
const require_with_css_pack_index = require('./pack/index.cjs');
|
|
8
|
+
const require_with_css_pin_index = require('./pin/index.cjs');
|
|
9
|
+
const require_with_css_stack_index = require('./stack/index.cjs');
|
|
10
|
+
const require_with_css_tile_index = require('./tile/index.cjs');
|
|
11
|
+
|
|
12
|
+
exports.balance = require_with_css_balance_index;
|
|
13
|
+
exports.center = require_with_css_center_index;
|
|
14
|
+
exports.flow = require_with_css_flow_index;
|
|
15
|
+
exports.layer = require_with_css_layer_index;
|
|
16
|
+
exports.matrix = require_with_css_matrix_index;
|
|
17
|
+
exports.pack = require_with_css_pack_index;
|
|
18
|
+
exports.pin = require_with_css_pin_index;
|
|
19
|
+
exports.stack = require_with_css_stack_index;
|
|
20
|
+
exports.tile = require_with_css_tile_index;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { CreateLayoutStyle, LayoutStyle } from "../types.cjs";
|
|
2
|
+
import { BalanceLayoutOptions } from "../balance/types.cjs";
|
|
3
|
+
import balance from "../balance/balance.cjs";
|
|
4
|
+
import { CenterLayoutOptions } from "../center/types.cjs";
|
|
5
|
+
import center from "../center/center.cjs";
|
|
6
|
+
import { FlowLayoutOptions } from "../flow/types.cjs";
|
|
7
|
+
import flow from "../flow/flow.cjs";
|
|
8
|
+
import { LayerLayoutOptions } from "../layer/types.cjs";
|
|
9
|
+
import { MatrixLayoutOptions } from "../matrix/types.cjs";
|
|
10
|
+
import { PackLayoutOptions } from "../pack/types.cjs";
|
|
11
|
+
import { PinLayoutOptions } from "../pin/types.cjs";
|
|
12
|
+
import { StackLayoutOptions } from "../stack/types.cjs";
|
|
13
|
+
import { TileLayoutOptions } from "../tile/types.cjs";
|
|
14
|
+
import layer from "../layer/layer.cjs";
|
|
15
|
+
import matrix from "../matrix/matrix.cjs";
|
|
16
|
+
import pack from "../pack/pack.cjs";
|
|
17
|
+
import pin from "../pin/pin.cjs";
|
|
18
|
+
import stack from "../stack/stack.cjs";
|
|
19
|
+
import tile from "../tile/tile.cjs";
|
|
20
|
+
export { type BalanceLayoutOptions, type CenterLayoutOptions, type CreateLayoutStyle, type FlowLayoutOptions, type LayerLayoutOptions, type LayoutStyle, type MatrixLayoutOptions, type PackLayoutOptions, type PinLayoutOptions, type StackLayoutOptions, type TileLayoutOptions, balance, center, flow, layer, matrix, pack, pin, stack, tile };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { CreateLayoutStyle, LayoutStyle } from "../types.mjs";
|
|
2
|
+
import { BalanceLayoutOptions } from "../balance/types.mjs";
|
|
3
|
+
import balance from "../balance/balance.mjs";
|
|
4
|
+
import { CenterLayoutOptions } from "../center/types.mjs";
|
|
5
|
+
import center from "../center/center.mjs";
|
|
6
|
+
import { FlowLayoutOptions } from "../flow/types.mjs";
|
|
7
|
+
import flow from "../flow/flow.mjs";
|
|
8
|
+
import { LayerLayoutOptions } from "../layer/types.mjs";
|
|
9
|
+
import { MatrixLayoutOptions } from "../matrix/types.mjs";
|
|
10
|
+
import { PackLayoutOptions } from "../pack/types.mjs";
|
|
11
|
+
import { PinLayoutOptions } from "../pin/types.mjs";
|
|
12
|
+
import { StackLayoutOptions } from "../stack/types.mjs";
|
|
13
|
+
import { TileLayoutOptions } from "../tile/types.mjs";
|
|
14
|
+
import layer from "../layer/layer.mjs";
|
|
15
|
+
import matrix from "../matrix/matrix.mjs";
|
|
16
|
+
import pack from "../pack/pack.mjs";
|
|
17
|
+
import pin from "../pin/pin.mjs";
|
|
18
|
+
import stack from "../stack/stack.mjs";
|
|
19
|
+
import tile from "../tile/tile.mjs";
|
|
20
|
+
export { type BalanceLayoutOptions, type CenterLayoutOptions, type CreateLayoutStyle, type FlowLayoutOptions, type LayerLayoutOptions, type LayoutStyle, type MatrixLayoutOptions, type PackLayoutOptions, type PinLayoutOptions, type StackLayoutOptions, type TileLayoutOptions, balance, center, flow, layer, matrix, pack, pin, stack, tile };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import balance_default from "./balance/index.mjs";
|
|
2
|
+
import center_default from "./center/index.mjs";
|
|
3
|
+
import flow_default from "./flow/index.mjs";
|
|
4
|
+
import layer_default from "./layer/index.mjs";
|
|
5
|
+
import matrix_default from "./matrix/index.mjs";
|
|
6
|
+
import pack_default from "./pack/index.mjs";
|
|
7
|
+
import pin_default from "./pin/index.mjs";
|
|
8
|
+
import stack_default from "./stack/index.mjs";
|
|
9
|
+
import tile_default from "./tile/index.mjs";
|
|
10
|
+
|
|
11
|
+
export { balance_default as balance, center_default as center, flow_default as flow, layer_default as layer, matrix_default as matrix, pack_default as pack, pin_default as pin, stack_default as stack, tile_default as tile };
|