@fringeworks/style-layouts 0.0.0-stage → 0.8.1

package/balance/index.d.cts

@@ -0,0 +1,3 @@
+import { BalanceLayoutOptions } from "./types.cjs";
+import balance from "./balance.cjs";
+export { type BalanceLayoutOptions, balance as default };

package/balance/index.d.mts

@@ -0,0 +1,3 @@
+import { BalanceLayoutOptions } from "./types.mjs";
+import balance from "./balance.mjs";
+export { type BalanceLayoutOptions, balance as default };

package/balance/index.mjs

@@ -0,0 +1,3 @@
+import balance from "./balance.mjs";
+
+export { balance as default };

package/balance/styles.css

@@ -0,0 +1,131 @@
+.frg-layout-balance {
+  --frg-layout-gapX: 0px;
+  --frg-layout-gapY: 0px;
+  --frg-layout-itemSizeX: auto;
+  --frg-layout-itemSizeY: auto;
+  --frg-layout-itemRatio: auto;
+  display: grid;
+}
+.frg-layout-balance.frg-layout-direction-x {
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+}
+.frg-layout-balance.frg-layout-direction-x.frg-layout-adjustX-grow, .frg-layout-balance.frg-layout-direction-x.frg-layout-adjustX-fit {
+  grid-auto-columns: auto;
+}
+.frg-layout-balance.frg-layout-direction-x.frg-layout-adjustX-shrink {
+  grid-auto-columns: minmax(0, max-content);
+}
+.frg-layout-balance.frg-layout-direction-x.frg-layout-itemSizeX {
+  grid-auto-columns: auto;
+}
+.frg-layout-balance.frg-layout-direction-y {
+  grid-auto-flow: row;
+  grid-auto-rows: max-content;
+}
+.frg-layout-balance.frg-layout-direction-y.frg-layout-adjustY-grow, .frg-layout-balance.frg-layout-direction-y.frg-layout-adjustY-fit {
+  grid-auto-rows: auto;
+}
+.frg-layout-balance.frg-layout-direction-y.frg-layout-adjustY-shrink {
+  grid-auto-rows: minmax(0, max-content);
+}
+.frg-layout-balance.frg-layout-direction-y.frg-layout-itemSizeY {
+  grid-auto-rows: auto;
+}
+.frg-layout-balance.frg-layout-alignX-left {
+  justify-items: flex-start;
+}
+.frg-layout-balance.frg-layout-alignX-center {
+  justify-items: center;
+}
+.frg-layout-balance.frg-layout-alignX-right {
+  justify-items: flex-end;
+}
+.frg-layout-balance.frg-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+.frg-layout-balance.frg-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+.frg-layout-balance.frg-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+.frg-layout-balance.frg-layout-alignY-top {
+  align-items: flex-start;
+}
+.frg-layout-balance.frg-layout-alignY-middle {
+  align-items: center;
+}
+.frg-layout-balance.frg-layout-alignY-bottom {
+  align-items: flex-end;
+}
+.frg-layout-balance.frg-layout-alignY-spaceBetween {
+  align-content: space-between;
+}
+.frg-layout-balance.frg-layout-alignY-spaceAround {
+  align-content: space-around;
+}
+.frg-layout-balance.frg-layout-alignY-spaceEvenly {
+  align-content: space-evenly;
+}
+.frg-layout-balance > * {
+  min-width: 0;
+  min-height: 0;
+}
+.frg-layout-balance.frg-layout-itemSizeX > * {
+  width: var(--frg-layout-itemSizeX);
+}
+.frg-layout-balance.frg-layout-adjustX-fit {
+  justify-items: stretch;
+}
+.frg-layout-balance.frg-layout-adjustX-fit > * {
+  width: auto;
+}
+.frg-layout-balance.frg-layout-adjustX-grow > *, .frg-layout-balance.frg-layout-adjustX-shrink > * {
+  width: 100%;
+}
+.frg-layout-balance.frg-layout-adjustX-grow > * {
+  min-width: max-content;
+}
+.frg-layout-balance.frg-layout-adjustX-grow.frg-layout-itemSizeX > * {
+  min-width: var(--frg-layout-itemSizeX);
+}
+.frg-layout-balance.frg-layout-adjustX-shrink > * {
+  max-width: max-content;
+}
+.frg-layout-balance.frg-layout-adjustX-shrink.frg-layout-itemSizeX > * {
+  max-width: var(--frg-layout-itemSizeX);
+}
+.frg-layout-balance.frg-layout-itemSizeY > * {
+  height: var(--frg-layout-itemSizeY);
+}
+.frg-layout-balance.frg-layout-adjustY-fit {
+  align-items: stretch;
+}
+.frg-layout-balance.frg-layout-adjustY-fit > * {
+  height: auto;
+}
+.frg-layout-balance.frg-layout-adjustY-grow > *, .frg-layout-balance.frg-layout-adjustY-shrink > * {
+  height: 100%;
+}
+.frg-layout-balance.frg-layout-adjustY-grow:not(.frg-layout-itemSizeY) > * {
+  min-height: max-content;
+}
+.frg-layout-balance.frg-layout-adjustY-grow.frg-layout-itemSizeY > * {
+  min-height: var(--frg-layout-itemSizeY);
+}
+.frg-layout-balance.frg-layout-adjustY-shrink:not(.frg-layout-itemSizeY) > * {
+  max-height: max-content;
+}
+.frg-layout-balance.frg-layout-adjustY-shrink.frg-layout-itemSizeY > * {
+  max-height: var(--frg-layout-itemSizeY);
+}
+.frg-layout-balance.frg-layout-itemRatio > * {
+  aspect-ratio: var(--frg-layout-itemRatio);
+}
+.frg-layout-balance.frg-layout-gapX {
+  column-gap: var(--frg-layout-gapX);
+}
+.frg-layout-balance.frg-layout-gapY {
+  row-gap: var(--frg-layout-gapY);
+}

package/balance/types.d.cts

@@ -0,0 +1,21 @@
+import { AlignXBase, AlignYBase } from "../constants.cjs";
+import { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.cjs";
+
+//#region src/balance/types.d.ts
+/**
+ * balanceのオプション
+ *
+ * - `direction='x'` 時: `alignY` に `space-between`,`space-around`,`space-evenly` 指定不可
+ * - `direction='y'` 時: `alignX` に `space-between`,`space-around`,`space-evenly` 指定不可
+ */
+type BalanceLayoutOptions = AdjustOptions & GapOptions & ItemSizeOptions & ItemRatioOptions & BalanceDirectionWithAlignOptions;
+/**
+ * direction & alignのオプション
+ */
+type BalanceDirectionWithAlignOptions = (DirectionOptions<'x'> & Omit<AlignOptions, 'alignY'> & {
+  alignY?: AlignYBase;
+}) | (DirectionOptions<'y'> & Omit<AlignOptions, 'alignX'> & {
+  alignX?: AlignXBase;
+});
+//#endregion
+export { BalanceLayoutOptions };

package/balance/types.d.mts

@@ -0,0 +1,21 @@
+import { AlignXBase, AlignYBase } from "../constants.mjs";
+import { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.mjs";
+
+//#region src/balance/types.d.ts
+/**
+ * balanceのオプション
+ *
+ * - `direction='x'` 時: `alignY` に `space-between`,`space-around`,`space-evenly` 指定不可
+ * - `direction='y'` 時: `alignX` に `space-between`,`space-around`,`space-evenly` 指定不可
+ */
+type BalanceLayoutOptions = AdjustOptions & GapOptions & ItemSizeOptions & ItemRatioOptions & BalanceDirectionWithAlignOptions;
+/**
+ * direction & alignのオプション
+ */
+type BalanceDirectionWithAlignOptions = (DirectionOptions<'x'> & Omit<AlignOptions, 'alignY'> & {
+  alignY?: AlignYBase;
+}) | (DirectionOptions<'y'> & Omit<AlignOptions, 'alignX'> & {
+  alignX?: AlignXBase;
+});
+//#endregion
+export { BalanceLayoutOptions };

package/balance/types.mjs

@@ -0,0 +1 @@
+export {  };

package/center/center.cjs

@@ -0,0 +1,34 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require__constants = require('../_constants.cjs');
+const require__internal_mergeClassName = require('../_internal/mergeClassName.cjs');
+const require__internal_applyGap = require('../_internal/applyGap.cjs');
+const require__internal_applyItemRatio = require('../_internal/applyItemRatio.cjs');
+const require__internal_applyItemSize = require('../_internal/applyItemSize.cjs');
+let _fringeworks_utils_object_maybeDefault = require("@fringeworks/utils/object/maybeDefault");
+_fringeworks_utils_object_maybeDefault = require_runtime.__toESM(_fringeworks_utils_object_maybeDefault, 1);
+
+//#region src/center/center.ts
+/**
+* centerレイアウト
+*
+* - 子要素を中央に配置する
+* - 親要素が子要素のサイズよりも小さくなっても左上が親要素内に収まる
+*/
+const center = (options = {}) => {
+	const { direction, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = (0, _fringeworks_utils_object_maybeDefault.default)(options, {
+		direction: "x",
+		adjustX: "none",
+		adjustY: "none"
+	}, { overwriteNull: true });
+	const result = {
+		className: require__internal_mergeClassName(require__constants.clsLayoutCenter, require__constants.clsLayout.direction[direction], require__constants.clsLayout.adjust.x[adjustX], require__constants.clsLayout.adjust.y[adjustY]),
+		style: {}
+	};
+	require__internal_applyGap(result, gap, gapX, gapY);
+	require__internal_applyItemSize(result, itemSizeX, itemSizeY);
+	require__internal_applyItemRatio(result, itemRatioX, itemRatioY);
+	return result;
+};
+
+//#endregion
+module.exports = center;

package/center/center.d.cts

@@ -0,0 +1,12 @@
+import { CreateLayoutStyle } from "../types.cjs";
+import { CenterLayoutOptions } from "./types.cjs";
+
+//#region src/center/center.d.ts
+/**
+ * centerレイアウト
+ *
+ * - 子要素を中央に配置する
+ * - 親要素が子要素のサイズよりも小さくなっても左上が親要素内に収まる
+ */
+declare const center: CreateLayoutStyle<CenterLayoutOptions>;
+export = center;

package/center/center.d.mts

@@ -0,0 +1,13 @@
+import { CreateLayoutStyle } from "../types.mjs";
+import { CenterLayoutOptions } from "./types.mjs";
+
+//#region src/center/center.d.ts
+/**
+ * centerレイアウト
+ *
+ * - 子要素を中央に配置する
+ * - 親要素が子要素のサイズよりも小さくなっても左上が親要素内に収まる
+ */
+declare const center: CreateLayoutStyle<CenterLayoutOptions>;
+//#endregion
+export { center as default };

package/center/center.mjs

@@ -0,0 +1,32 @@
+import { clsLayout, clsLayoutCenter } from "../_constants.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
+import applyGap from "../_internal/applyGap.mjs";
+import applyItemRatio from "../_internal/applyItemRatio.mjs";
+import applyItemSize from "../_internal/applyItemSize.mjs";
+import maybeDefault from "@fringeworks/utils/object/maybeDefault";
+
+//#region src/center/center.ts
+/**
+* centerレイアウト
+*
+* - 子要素を中央に配置する
+* - 親要素が子要素のサイズよりも小さくなっても左上が親要素内に収まる
+*/
+const center = (options = {}) => {
+	const { direction, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = maybeDefault(options, {
+		direction: "x",
+		adjustX: "none",
+		adjustY: "none"
+	}, { overwriteNull: true });
+	const result = {
+		className: mergeClassName(clsLayoutCenter, clsLayout.direction[direction], clsLayout.adjust.x[adjustX], clsLayout.adjust.y[adjustY]),
+		style: {}
+	};
+	applyGap(result, gap, gapX, gapY);
+	applyItemSize(result, itemSizeX, itemSizeY);
+	applyItemRatio(result, itemRatioX, itemRatioY);
+	return result;
+};
+
+//#endregion
+export { center as default };

package/center/index.cjs

@@ -0,0 +1,3 @@
+const require_center_center = require('./center.cjs');
+
+module.exports = require_center_center;

package/center/index.d.cts

@@ -0,0 +1,3 @@
+import { CenterLayoutOptions } from "./types.cjs";
+import center from "./center.cjs";
+export { type CenterLayoutOptions, center as default };

package/center/index.d.mts

@@ -0,0 +1,3 @@
+import { CenterLayoutOptions } from "./types.mjs";
+import center from "./center.mjs";
+export { type CenterLayoutOptions, center as default };

package/center/index.mjs

@@ -0,0 +1,3 @@
+import center from "./center.mjs";
+
+export { center as default };

package/center/styles.css

@@ -0,0 +1,157 @@
+.frg-layout-center {
+  --frg-layout-gapX: 0px;
+  --frg-layout-gapY: 0px;
+  --frg-layout-itemSizeX: auto;
+  --frg-layout-itemSizeY: auto;
+  --frg-layout-itemRatio: auto;
+  display: flex;
+  justify-content: flex-start;
+  align-content: flex-start;
+  flex-wrap: nowrap;
+}
+.frg-layout-center > * {
+  min-width: 0;
+  max-width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  margin: 0;
+}
+.frg-layout-center.frg-layout-direction-x {
+  flex-direction: row;
+}
+.frg-layout-center.frg-layout-direction-x > * {
+  max-width: none;
+  max-height: none;
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.frg-layout-center.frg-layout-direction-x > *:first-child {
+  margin-left: auto;
+}
+.frg-layout-center.frg-layout-direction-x > *:last-child {
+  margin-right: auto;
+}
+.frg-layout-center.frg-layout-direction-x.frg-layout-itemSizeX > * {
+  width: var(--frg-layout-itemSizeX);
+  flex-basis: var(--frg-layout-itemSizeX);
+}
+.frg-layout-center.frg-layout-direction-x.frg-layout-adjustX-fit > * {
+  width: 100%;
+  max-width: none;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0%;
+}
+.frg-layout-center.frg-layout-direction-x.frg-layout-adjustX-grow > * {
+  width: 100%;
+  min-width: var(--frg-layout-itemSizeX);
+  max-width: none;
+  flex-grow: 1;
+  flex-basis: var(--frg-layout-itemSizeX);
+}
+.frg-layout-center.frg-layout-direction-x.frg-layout-adjustX-shrink > * {
+  width: var(--frg-layout-itemSizeX);
+  max-width: 100%;
+  flex-shrink: 1;
+  flex-basis: var(--frg-layout-itemSizeX);
+}
+.frg-layout-center.frg-layout-direction-x.frg-layout-itemSizeY > * {
+  height: var(--frg-layout-itemSizeY);
+}
+.frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-fit {
+  align-items: stretch;
+}
+.frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-fit > * {
+  height: 100%;
+  max-height: none;
+}
+.frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-grow {
+  align-items: stretch;
+}
+.frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-grow > * {
+  height: 100%;
+  min-height: var(--frg-layout-itemSizeY);
+  max-height: none;
+}
+.frg-layout-center.frg-layout-direction-x.frg-layout-adjustY-shrink > * {
+  height: var(--frg-layout-itemSizeY);
+  max-height: 100%;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.frg-layout-center.frg-layout-direction-y {
+  flex-direction: column;
+}
+.frg-layout-center.frg-layout-direction-y > * {
+  max-width: none;
+  max-height: none;
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+.frg-layout-center.frg-layout-direction-y > *:first-child {
+  margin-top: auto;
+}
+.frg-layout-center.frg-layout-direction-y > *:last-child {
+  margin-bottom: auto;
+}
+.frg-layout-center.frg-layout-direction-y.frg-layout-itemSizeX > * {
+  width: var(--frg-layout-itemSizeX);
+}
+.frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-fit {
+  align-items: stretch;
+}
+.frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-fit > * {
+  width: 100%;
+  max-width: none;
+}
+.frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-grow {
+  align-items: stretch;
+}
+.frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-grow > * {
+  width: 100%;
+  min-width: var(--frg-layout-itemSizeX);
+  max-width: none;
+}
+.frg-layout-center.frg-layout-direction-y.frg-layout-adjustX-shrink > * {
+  width: var(--frg-layout-itemSizeX);
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.frg-layout-center.frg-layout-direction-y.frg-layout-itemSizeY > * {
+  height: var(--frg-layout-itemSizeY);
+  flex-basis: var(--frg-layout-itemSizeY);
+}
+.frg-layout-center.frg-layout-direction-y.frg-layout-adjustY-fit > * {
+  height: 100%;
+  max-height: none;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0%;
+}
+.frg-layout-center.frg-layout-direction-y.frg-layout-adjustY-grow > * {
+  height: 100%;
+  min-height: var(--frg-layout-itemSizeY);
+  max-height: none;
+  flex-grow: 1;
+  flex-basis: var(--frg-layout-itemSizeY);
+}
+.frg-layout-center.frg-layout-direction-y.frg-layout-adjustY-shrink > * {
+  height: var(--frg-layout-itemSizeY);
+  max-height: 100%;
+  flex-shrink: 1;
+  flex-basis: var(--frg-layout-itemSizeY);
+}
+.frg-layout-center.frg-layout-itemRatio > * {
+  aspect-ratio: var(--frg-layout-itemRatio);
+}
+.frg-layout-center.frg-layout-gapX {
+  column-gap: var(--frg-layout-gapX);
+}
+.frg-layout-center.frg-layout-gapY {
+  row-gap: var(--frg-layout-gapY);
+}

package/center/types.d.cts

@@ -0,0 +1,9 @@
+import { AdjustOptions, DirectionOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.cjs";
+
+//#region src/center/types.d.ts
+/**
+ * centerのオプション
+ */
+type CenterLayoutOptions = DirectionOptions & AdjustOptions & GapOptions & ItemSizeOptions & ItemRatioOptions;
+//#endregion
+export { CenterLayoutOptions };

package/center/types.d.mts

@@ -0,0 +1,9 @@
+import { AdjustOptions, DirectionOptions, GapOptions, ItemRatioOptions, ItemSizeOptions } from "../_types.mjs";
+
+//#region src/center/types.d.ts
+/**
+ * centerのオプション
+ */
+type CenterLayoutOptions = DirectionOptions & AdjustOptions & GapOptions & ItemSizeOptions & ItemRatioOptions;
+//#endregion
+export { CenterLayoutOptions };

package/center/types.mjs

@@ -0,0 +1 @@
+export {  };

package/constants.cjs

@@ -0,0 +1,109 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/constants.ts
+/**
+* 整列方向
+*
+* - x: 横方向
+* - y: 縦方向
+*/
+const Direction = {
+	x: "x",
+	y: "y"
+};
+const AlignBetween = {
+	"space-between": "space-between",
+	"space-around": "space-around",
+	"space-evenly": "space-evenly"
+};
+/**
+* 横位置
+*
+* - left: 左寄せ
+* - center: 中央寄せ
+* - right: 右寄せ
+*/
+const AlignXBase = {
+	left: "left",
+	center: "center",
+	right: "right"
+};
+/**
+* 横位置
+*
+* - left: 左寄せ
+* - center: 中央寄せ
+* - right: 右寄せ
+* - space-between: 両端揃え
+* - space-around: 両端余白あり均等
+* - space-evenly: 完全均等
+*/
+const AlignX = {
+	...AlignXBase,
+	...AlignBetween
+};
+/**
+* 縦位置
+*
+* - top: 上寄せ
+* - middle: 中央寄せ
+* - bottom: 下寄せ
+*/
+const AlignYBase = {
+	top: "top",
+	middle: "middle",
+	bottom: "bottom"
+};
+/**
+* 縦位置
+*
+* - top: 上寄せ
+* - middle: 中央寄せ
+* - bottom: 下寄せ
+* - space-between: 両端揃え
+* - space-around: 両端余白あり均等
+* - space-evenly: 完全均等
+*/
+const AlignY = {
+	...AlignYBase,
+	...AlignBetween
+};
+/**
+* 親要素のサイズを基準にした子要素のサイズ調整
+*
+* - `none`
+*   - 親のサイズに足りないとき: そのまま
+*   - 親のサイズを超えるとき: そのまま
+*/
+const AdjustBase = { none: "none" };
+/**
+* 親要素のサイズを基準にした子要素のサイズ調整
+*
+* - `none`
+*   - 親のサイズに足りないとき: そのまま
+*   - 親のサイズを超えるとき: そのまま
+* - `fit`
+*   - 親のサイズに足りないとき: 伸ばす
+*   - 親のサイズを超えるとき: 縮める
+* - `grow`
+*   - 親のサイズに足りないとき: 伸ばす
+*   - 親のサイズを超えるとき: そのまま
+* - `shrink`
+*   - 親のサイズに足りないとき: そのまま
+*   - 親のサイズを超えるとき: 縮める
+*/
+const Adjust = {
+	...AdjustBase,
+	fit: "fit",
+	grow: "grow",
+	shrink: "shrink"
+};
+
+//#endregion
+exports.Adjust = Adjust;
+exports.AdjustBase = AdjustBase;
+exports.AlignX = AlignX;
+exports.AlignXBase = AlignXBase;
+exports.AlignY = AlignY;
+exports.AlignYBase = AlignYBase;
+exports.Direction = Direction;