@fringeworks/style-layouts 0.0.0-stage → 0.8.0

package/_internal/applyItemRatio.d.mts

@@ -0,0 +1,12 @@
+import { LayoutStyle } from "../types.mjs";
+
+//#region src/_internal/applyItemRatio.d.ts
+/**
+ * 子要素の縦横比に関する設定の適用
+ * @param result
+ * @param itemRatioX
+ * @param itemRatioY
+ */
+declare function applyItemRatio(result: LayoutStyle, itemRatioX: number | null | undefined, itemRatioY: number | null | undefined): void;
+//#endregion
+export { applyItemRatio as default };

package/_internal/applyItemRatio.mjs

@@ -0,0 +1,21 @@
+import { clsLayoutItemRatio, varLayoutItemRatio } from "../_constants.mjs";
+import hasValue from "./hasValue.mjs";
+import mergeClassName from "./mergeClassName.mjs";
+
+//#region src/_internal/applyItemRatio.ts
+/**
+* 子要素の縦横比に関する設定の適用
+* @param result
+* @param itemRatioX
+* @param itemRatioY
+*/
+function applyItemRatio(result, itemRatioX, itemRatioY) {
+	if (hasValue(itemRatioX) || hasValue(itemRatioY)) {
+		result.className = mergeClassName(result.className, clsLayoutItemRatio);
+		result.style ??= {};
+		result.style[varLayoutItemRatio] = `${itemRatioX ?? 1} / ${itemRatioY ?? 1}`;
+	}
+}
+
+//#endregion
+export { applyItemRatio as default };

package/_internal/applyItemSize.cjs

@@ -0,0 +1,21 @@
+const require__constants = require('../_constants.cjs');
+const require__internal_hasValue = require('./hasValue.cjs');
+const require__internal_mergeClassName = require('./mergeClassName.cjs');
+const require__internal_unit = require('./unit.cjs');
+
+//#region src/_internal/applyItemSize.ts
+function applyItemSize(result, itemSizeX, itemSizeY) {
+	if (require__internal_hasValue(itemSizeX)) {
+		result.className = require__internal_mergeClassName(result.className, require__constants.clsLayoutItemSizeX);
+		result.style ??= {};
+		result.style[require__constants.varLayoutItemSizeX] = require__internal_unit(itemSizeX);
+	}
+	if (require__internal_hasValue(itemSizeY)) {
+		result.className = require__internal_mergeClassName(result.className, require__constants.clsLayoutItemSizeY);
+		result.style ??= {};
+		result.style[require__constants.varLayoutItemSizeY] = require__internal_unit(itemSizeY);
+	}
+}
+
+//#endregion
+module.exports = applyItemSize;

package/_internal/applyItemSize.d.cts

@@ -0,0 +1,5 @@
+import { LayoutStyle } from "../types.cjs";
+
+//#region src/_internal/applyItemSize.d.ts
+declare function applyItemSize(result: LayoutStyle, itemSizeX: number | null | undefined, itemSizeY: number | null | undefined): void;
+export = applyItemSize;

package/_internal/applyItemSize.d.mts

@@ -0,0 +1,6 @@
+import { LayoutStyle } from "../types.mjs";
+
+//#region src/_internal/applyItemSize.d.ts
+declare function applyItemSize(result: LayoutStyle, itemSizeX: number | null | undefined, itemSizeY: number | null | undefined): void;
+//#endregion
+export { applyItemSize as default };

package/_internal/applyItemSize.mjs

@@ -0,0 +1,21 @@
+import { clsLayoutItemSizeX, clsLayoutItemSizeY, varLayoutItemSizeX, varLayoutItemSizeY } from "../_constants.mjs";
+import hasValue from "./hasValue.mjs";
+import mergeClassName from "./mergeClassName.mjs";
+import unit from "./unit.mjs";
+
+//#region src/_internal/applyItemSize.ts
+function applyItemSize(result, itemSizeX, itemSizeY) {
+	if (hasValue(itemSizeX)) {
+		result.className = mergeClassName(result.className, clsLayoutItemSizeX);
+		result.style ??= {};
+		result.style[varLayoutItemSizeX] = unit(itemSizeX);
+	}
+	if (hasValue(itemSizeY)) {
+		result.className = mergeClassName(result.className, clsLayoutItemSizeY);
+		result.style ??= {};
+		result.style[varLayoutItemSizeY] = unit(itemSizeY);
+	}
+}
+
+//#endregion
+export { applyItemSize as default };

package/_internal/hasValue.cjs

@@ -0,0 +1,15 @@
+
+//#region src/_internal/hasValue.ts
+/**
+* 有効な値か
+* @param value
+* @returns
+*/
+function hasValue(value) {
+	if (typeof value === "number") return true;
+	else if (typeof value === "boolean") return true;
+	else return value !== null && value !== void 0 && value !== "";
+}
+
+//#endregion
+module.exports = hasValue;

package/_internal/hasValue.d.cts

@@ -0,0 +1,8 @@
+//#region src/_internal/hasValue.d.ts
+/**
+ * 有効な値か
+ * @param value
+ * @returns
+ */
+declare function hasValue(value: string | number | boolean | null | undefined): value is string | number | boolean;
+export = hasValue;

package/_internal/hasValue.d.mts

@@ -0,0 +1,9 @@
+//#region src/_internal/hasValue.d.ts
+/**
+ * 有効な値か
+ * @param value
+ * @returns
+ */
+declare function hasValue(value: string | number | boolean | null | undefined): value is string | number | boolean;
+//#endregion
+export { hasValue as default };

package/_internal/hasValue.mjs

@@ -0,0 +1,14 @@
+//#region src/_internal/hasValue.ts
+/**
+* 有効な値か
+* @param value
+* @returns
+*/
+function hasValue(value) {
+	if (typeof value === "number") return true;
+	else if (typeof value === "boolean") return true;
+	else return value !== null && value !== void 0 && value !== "";
+}
+
+//#endregion
+export { hasValue as default };

package/_internal/mergeClassName.cjs

@@ -0,0 +1,11 @@
+
+//#region src/_internal/mergeClassName.ts
+function mergeClassName(...classNames) {
+	return classNames.reduce((result, className) => {
+		if (className) result.push(className);
+		return result;
+	}, []).join(" ");
+}
+
+//#endregion
+module.exports = mergeClassName;

package/_internal/mergeClassName.d.cts

@@ -0,0 +1,3 @@
+//#region src/_internal/mergeClassName.d.ts
+declare function mergeClassName(...classNames: (string | null | undefined)[]): string;
+export = mergeClassName;

package/_internal/mergeClassName.d.mts

@@ -0,0 +1,4 @@
+//#region src/_internal/mergeClassName.d.ts
+declare function mergeClassName(...classNames: (string | null | undefined)[]): string;
+//#endregion
+export { mergeClassName as default };

package/_internal/mergeClassName.mjs

@@ -0,0 +1,10 @@
+//#region src/_internal/mergeClassName.ts
+function mergeClassName(...classNames) {
+	return classNames.reduce((result, className) => {
+		if (className) result.push(className);
+		return result;
+	}, []).join(" ");
+}
+
+//#endregion
+export { mergeClassName as default };

package/_internal/mergeLayoutResults.cjs

@@ -0,0 +1,16 @@
+const require__internal_mergeClassName = require('./mergeClassName.cjs');
+
+//#region src/_internal/mergeLayoutResults.ts
+function mergeLayoutResults(results) {
+	return results.reduce((layoutResult, result) => {
+		if (result.className) layoutResult.className = require__internal_mergeClassName(layoutResult.className, result.className);
+		if (result.style) layoutResult.style = {
+			...layoutResult.style,
+			...result.style
+		};
+		return layoutResult;
+	}, {});
+}
+
+//#endregion
+module.exports = mergeLayoutResults;

package/_internal/mergeLayoutResults.d.cts

@@ -0,0 +1,5 @@
+import { LayoutStyle } from "../types.cjs";
+
+//#region src/_internal/mergeLayoutResults.d.ts
+declare function mergeLayoutResults(results: LayoutStyle[]): LayoutStyle;
+export = mergeLayoutResults;

package/_internal/mergeLayoutResults.d.mts

@@ -0,0 +1,6 @@
+import { LayoutStyle } from "../types.mjs";
+
+//#region src/_internal/mergeLayoutResults.d.ts
+declare function mergeLayoutResults(results: LayoutStyle[]): LayoutStyle;
+//#endregion
+export { mergeLayoutResults as default };

package/_internal/mergeLayoutResults.mjs

@@ -0,0 +1,16 @@
+import mergeClassName from "./mergeClassName.mjs";
+
+//#region src/_internal/mergeLayoutResults.ts
+function mergeLayoutResults(results) {
+	return results.reduce((layoutResult, result) => {
+		if (result.className) layoutResult.className = mergeClassName(layoutResult.className, result.className);
+		if (result.style) layoutResult.style = {
+			...layoutResult.style,
+			...result.style
+		};
+		return layoutResult;
+	}, {});
+}
+
+//#endregion
+export { mergeLayoutResults as default };

package/_internal/unit.cjs

@@ -0,0 +1,9 @@
+
+//#region src/_internal/unit.ts
+function unit(value, unit = "px") {
+	if (typeof value === "number") return `${value}${unit}`;
+	else return value;
+}
+
+//#endregion
+module.exports = unit;

package/_internal/unit.d.cts

@@ -0,0 +1,11 @@
+//#region src/_internal/unit.d.ts
+/**
+ * valueが数値の場合、単位を付与して文字列に変換する
+ * それ以外はそのまま返す
+ * @param value
+ * @param unit
+ * @returns
+ */
+declare function unit(value: string | number, unit?: string): string;
+declare function unit(value: string | number | null | undefined, unit?: string): string | null | undefined;
+export = unit;

package/_internal/unit.d.mts

@@ -0,0 +1,12 @@
+//#region src/_internal/unit.d.ts
+/**
+ * valueが数値の場合、単位を付与して文字列に変換する
+ * それ以外はそのまま返す
+ * @param value
+ * @param unit
+ * @returns
+ */
+declare function unit(value: string | number, unit?: string): string;
+declare function unit(value: string | number | null | undefined, unit?: string): string | null | undefined;
+//#endregion
+export { unit as default };

package/_internal/unit.mjs

@@ -0,0 +1,8 @@
+//#region src/_internal/unit.ts
+function unit(value, unit = "px") {
+	if (typeof value === "number") return `${value}${unit}`;
+	else return value;
+}
+
+//#endregion
+export { unit as default };

package/_styles.scss.cjs

@@ -0,0 +1 @@
+require('./styles.css');

package/_styles.scss.d.cts

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

package/_styles.scss.d.mts

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

package/_styles.scss.mjs

@@ -0,0 +1,3 @@
+import "./styles.css";
+
+export {  };

package/_types.d.cts

@@ -0,0 +1,115 @@
+import { Adjust, AlignX, AlignY, Direction } from "./constants.cjs";
+
+//#region src/_types.d.ts
+/**
+ * 子要素を並べる方向
+ */
+type DirectionOptions<D extends Direction = Direction> = {
+  /**
+   * 並べる方向
+   */
+  direction?: D | null;
+};
+/**
+ * 子要素の位置
+ */
+type AlignOptions = {
+  /**
+   * 子要素の横位置
+   */
+  alignX?: AlignX | null;
+  /**
+   * 子要素の縦位置
+   */
+  alignY?: AlignY | null;
+};
+/**
+ * 子要素のサイズ調整
+ */
+type AdjustOptions = {
+  /**
+   * 子要素の幅の調整
+   * itemSizeXを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustX?: Adjust | null;
+  /**
+   * 子要素の高さの調整
+   * itemSizeYを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustY?: Adjust | null;
+};
+/**
+ * 要素間の余白
+ */
+type GapOptions = {
+  /**
+   * 余白
+   */
+  gap?: number | null;
+  /**
+   * 横方向の余白
+   */
+  gapX?: number | null;
+  /**
+   * 縦方向の余白
+   */
+  gapY?: number | null;
+};
+/**
+ * 子要素のサイズ
+ */
+type ItemSizeOptions = {
+  /**
+   * 子要素の幅
+   */
+  itemSizeX?: number | null;
+  /**
+   * 子要素の高さ
+   */
+  itemSizeY?: number | null;
+};
+/**
+ * 子要素のサイズの縦横比
+ */
+type ItemRatioOptions = {
+  /**
+   * 子要素の縦横比(横)
+   */
+  itemRatioX?: number | null;
+  /**
+   * 子要素の縦横比(縦)
+   */
+  itemRatioY?: number | null;
+};
+/**
+ * 子要素の数
+ */
+type ItemCountOptions = {
+  /**
+   * 横方向の要素数
+   */
+  itemCountX?: number | null;
+  /**
+   * 縦方向の要素数
+   */
+  itemCountY?: number | null;
+};
+/**
+ * 子要素のサイズと数
+ */
+type TracksOptions = {
+  /**
+   * 横方向の設定
+   * このプロパティが設定されている場合、itemCountX,itemSizeXは無効
+   */
+  tracksX?: (string | number)[] | null;
+  /**
+   * 縦方向の設定
+   * このプロパティが設定されている場合、itemCountY,itemSizeYは無効
+   */
+  tracksY?: (string | number)[] | null;
+};
+//#endregion
+export { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemCountOptions, ItemRatioOptions, ItemSizeOptions, TracksOptions };

package/_types.d.mts

@@ -0,0 +1,115 @@
+import { Adjust, AlignX, AlignY, Direction } from "./constants.mjs";
+
+//#region src/_types.d.ts
+/**
+ * 子要素を並べる方向
+ */
+type DirectionOptions<D extends Direction = Direction> = {
+  /**
+   * 並べる方向
+   */
+  direction?: D | null;
+};
+/**
+ * 子要素の位置
+ */
+type AlignOptions = {
+  /**
+   * 子要素の横位置
+   */
+  alignX?: AlignX | null;
+  /**
+   * 子要素の縦位置
+   */
+  alignY?: AlignY | null;
+};
+/**
+ * 子要素のサイズ調整
+ */
+type AdjustOptions = {
+  /**
+   * 子要素の幅の調整
+   * itemSizeXを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustX?: Adjust | null;
+  /**
+   * 子要素の高さの調整
+   * itemSizeYを指定した場合に有効
+   * デフォルトは`none`
+   */
+  adjustY?: Adjust | null;
+};
+/**
+ * 要素間の余白
+ */
+type GapOptions = {
+  /**
+   * 余白
+   */
+  gap?: number | null;
+  /**
+   * 横方向の余白
+   */
+  gapX?: number | null;
+  /**
+   * 縦方向の余白
+   */
+  gapY?: number | null;
+};
+/**
+ * 子要素のサイズ
+ */
+type ItemSizeOptions = {
+  /**
+   * 子要素の幅
+   */
+  itemSizeX?: number | null;
+  /**
+   * 子要素の高さ
+   */
+  itemSizeY?: number | null;
+};
+/**
+ * 子要素のサイズの縦横比
+ */
+type ItemRatioOptions = {
+  /**
+   * 子要素の縦横比(横)
+   */
+  itemRatioX?: number | null;
+  /**
+   * 子要素の縦横比(縦)
+   */
+  itemRatioY?: number | null;
+};
+/**
+ * 子要素の数
+ */
+type ItemCountOptions = {
+  /**
+   * 横方向の要素数
+   */
+  itemCountX?: number | null;
+  /**
+   * 縦方向の要素数
+   */
+  itemCountY?: number | null;
+};
+/**
+ * 子要素のサイズと数
+ */
+type TracksOptions = {
+  /**
+   * 横方向の設定
+   * このプロパティが設定されている場合、itemCountX,itemSizeXは無効
+   */
+  tracksX?: (string | number)[] | null;
+  /**
+   * 縦方向の設定
+   * このプロパティが設定されている場合、itemCountY,itemSizeYは無効
+   */
+  tracksY?: (string | number)[] | null;
+};
+//#endregion
+export { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemCountOptions, ItemRatioOptions, ItemSizeOptions, TracksOptions };

package/_types.mjs

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

package/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,29 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__toESM = __toESM;

package/balance/balance.cjs

@@ -0,0 +1,37 @@
+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/balance/balance.ts
+/**
+* balanceレイアウト
+*
+* - 子要素を均等に配置する
+* - `adjust`が効いていない場合は、子要素のサイズを維持したまま、余白を均等に配分する
+* - `adjust`が効いている場合は、子要素のサイズを調整してコンテナを満たす
+*/
+const balance = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = (0, _fringeworks_utils_object_maybeDefault.default)(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top",
+		adjustX: "none",
+		adjustY: "none"
+	}, { overwriteNull: true });
+	const result = {
+		className: require__internal_mergeClassName(require__constants.clsLayoutBalance, 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]),
+		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 = balance;

package/balance/balance.d.cts

@@ -0,0 +1,13 @@
+import { CreateLayoutStyle } from "../types.cjs";
+import { BalanceLayoutOptions } from "./types.cjs";
+
+//#region src/balance/balance.d.ts
+/**
+ * balanceレイアウト
+ *
+ * - 子要素を均等に配置する
+ * - `adjust`が効いていない場合は、子要素のサイズを維持したまま、余白を均等に配分する
+ * - `adjust`が効いている場合は、子要素のサイズを調整してコンテナを満たす
+ */
+declare const balance: CreateLayoutStyle<BalanceLayoutOptions>;
+export = balance;

package/balance/balance.d.mts

@@ -0,0 +1,14 @@
+import { CreateLayoutStyle } from "../types.mjs";
+import { BalanceLayoutOptions } from "./types.mjs";
+
+//#region src/balance/balance.d.ts
+/**
+ * balanceレイアウト
+ *
+ * - 子要素を均等に配置する
+ * - `adjust`が効いていない場合は、子要素のサイズを維持したまま、余白を均等に配分する
+ * - `adjust`が効いている場合は、子要素のサイズを調整してコンテナを満たす
+ */
+declare const balance: CreateLayoutStyle<BalanceLayoutOptions>;
+//#endregion
+export { balance as default };

package/balance/balance.mjs

@@ -0,0 +1,35 @@
+import { clsLayout, clsLayoutBalance } 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/balance/balance.ts
+/**
+* balanceレイアウト
+*
+* - 子要素を均等に配置する
+* - `adjust`が効いていない場合は、子要素のサイズを維持したまま、余白を均等に配分する
+* - `adjust`が効いている場合は、子要素のサイズを調整してコンテナを満たす
+*/
+const balance = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, gap, gapX, gapY, itemSizeX, itemSizeY, itemRatioX, itemRatioY } = maybeDefault(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top",
+		adjustX: "none",
+		adjustY: "none"
+	}, { overwriteNull: true });
+	const result = {
+		className: mergeClassName(clsLayoutBalance, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY], 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 { balance as default };

package/balance/index.cjs

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