@fringeworks/style-layouts 0.0.0-stage → 0.8.0

package/stack/stack.cjs

@@ -0,0 +1,96 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require__constants = require('../_constants.cjs');
+const require__internal_hasValue = require('../_internal/hasValue.cjs');
+const require__internal_mergeClassName = require('../_internal/mergeClassName.cjs');
+const require__internal_unit = require('../_internal/unit.cjs');
+const require__internal_applyGap = require('../_internal/applyGap.cjs');
+const require__internal_applyItemRatio = require('../_internal/applyItemRatio.cjs');
+const require__internal_mergeLayoutResults = require('../_internal/mergeLayoutResults.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/stack/stack.ts
+/**
+* stackレイアウト
+*
+* - 子要素を一列に並べて配置する
+*/
+const stack = (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.clsLayoutStack, require__constants.clsLayout.direction[direction], require__constants.clsLayout.align.x[alignX], require__constants.clsLayout.align.y[alignY]),
+		style: {}
+	};
+	require__internal_applyGap(result, gap, gapX, gapY);
+	require__internal_applyItemRatio(result, itemRatioX, itemRatioY);
+	const resultList = [result];
+	if (direction === "x") {
+		resultList.push(_getStackMainAxisStyle("x", alignX, adjustX, itemSizeX));
+		resultList.push(_getStackClossAxisStyle("y", alignY, adjustY, itemSizeY));
+	} else {
+		resultList.push(_getStackMainAxisStyle("y", alignY, adjustY, itemSizeY));
+		resultList.push(_getStackClossAxisStyle("x", alignX, adjustX, itemSizeX));
+	}
+	return require__internal_mergeLayoutResults(resultList);
+};
+/**
+* 主軸方向のスタイル
+* @param axis 横 or 縦
+* @param align 位置
+* @param adjust 子要素のサイズの調整
+* @param itemSize 子要素のサイズ
+* @returns スタイル
+*/
+function _getStackMainAxisStyle(axis, align, adjust, itemSize) {
+	const result = { className: require__internal_mergeClassName(require__constants.clsLayout.align[axis][align], require__constants.clsLayout.adjust[axis][adjust]) };
+	if (require__internal_hasValue(itemSize)) {
+		result.className = require__internal_mergeClassName(result.className, require__constants.clsLayout.itemSize[axis]);
+		result.style = { [require__constants.varLayout.itemSize[axis]]: require__internal_unit(itemSize) };
+	}
+	return result;
+}
+/**
+* 交差軸方向のクラス
+* @param axis 横 or 縦
+* @param align 位置
+* @param adjust 子要素のサイズの調整
+* @param itemSize 子要素のサイズ
+* @returns スタイル
+*/
+function _getStackClossAxisStyle(axis, align, adjust, itemSize) {
+	if (adjust === "fit") return { className: require__internal_mergeClassName(require__constants.clsLayout.align[axis][align], require__constants.clsLayout.adjust[axis][adjust]) };
+	else if (adjust === "grow") {
+		const result = {
+			className: require__internal_mergeClassName(require__constants.clsLayout.align[axis][align], require__constants.clsLayout.adjust[axis][adjust]),
+			style: {}
+		};
+		if (require__internal_hasValue(itemSize)) {
+			result.className = require__internal_mergeClassName(result.className, require__constants.clsLayout.itemSize[axis]);
+			result.style = { [require__constants.varLayout.itemSize[axis]]: require__internal_unit(itemSize) };
+		}
+		return result;
+	} else if (adjust === "shrink") {
+		const result = {
+			className: require__internal_mergeClassName(require__constants.clsLayout.align[axis][align], require__constants.clsLayout.adjust[axis][adjust]),
+			style: {}
+		};
+		if (require__internal_hasValue(itemSize)) {
+			result.className = require__internal_mergeClassName(result.className, require__constants.clsLayout.itemSize[axis]);
+			result.style = { [require__constants.varLayout.itemSize[axis]]: `min(${require__internal_unit(itemSize)}, 100%)` };
+		}
+		return result;
+	} else if (require__internal_hasValue(itemSize)) return {
+		className: require__internal_mergeClassName(require__constants.clsLayout.align[axis][align], require__constants.clsLayout.itemSize[axis]),
+		style: { [require__constants.varLayout.itemSize[axis]]: require__internal_unit(itemSize) }
+	};
+	else return { className: require__internal_mergeClassName(require__constants.clsLayout.align[axis][align]) };
+}
+
+//#endregion
+module.exports = stack;

package/stack/stack.d.cts

@@ -0,0 +1,11 @@
+import { CreateLayoutStyle } from "../types.cjs";
+import { StackLayoutOptions } from "./types.cjs";
+
+//#region src/stack/stack.d.ts
+/**
+ * stackレイアウト
+ *
+ * - 子要素を一列に並べて配置する
+ */
+declare const stack: CreateLayoutStyle<StackLayoutOptions>;
+export = stack;

package/stack/stack.d.mts

@@ -0,0 +1,12 @@
+import { CreateLayoutStyle } from "../types.mjs";
+import { StackLayoutOptions } from "./types.mjs";
+
+//#region src/stack/stack.d.ts
+/**
+ * stackレイアウト
+ *
+ * - 子要素を一列に並べて配置する
+ */
+declare const stack: CreateLayoutStyle<StackLayoutOptions>;
+//#endregion
+export { stack as default };

package/stack/stack.mjs

@@ -0,0 +1,94 @@
+import { clsLayout, clsLayoutStack, varLayout } from "../_constants.mjs";
+import hasValue from "../_internal/hasValue.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
+import unit from "../_internal/unit.mjs";
+import applyGap from "../_internal/applyGap.mjs";
+import applyItemRatio from "../_internal/applyItemRatio.mjs";
+import mergeLayoutResults from "../_internal/mergeLayoutResults.mjs";
+import maybeDefault from "@fringeworks/utils/object/maybeDefault";
+
+//#region src/stack/stack.ts
+/**
+* stackレイアウト
+*
+* - 子要素を一列に並べて配置する
+*/
+const stack = (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(clsLayoutStack, clsLayout.direction[direction], clsLayout.align.x[alignX], clsLayout.align.y[alignY]),
+		style: {}
+	};
+	applyGap(result, gap, gapX, gapY);
+	applyItemRatio(result, itemRatioX, itemRatioY);
+	const resultList = [result];
+	if (direction === "x") {
+		resultList.push(_getStackMainAxisStyle("x", alignX, adjustX, itemSizeX));
+		resultList.push(_getStackClossAxisStyle("y", alignY, adjustY, itemSizeY));
+	} else {
+		resultList.push(_getStackMainAxisStyle("y", alignY, adjustY, itemSizeY));
+		resultList.push(_getStackClossAxisStyle("x", alignX, adjustX, itemSizeX));
+	}
+	return mergeLayoutResults(resultList);
+};
+/**
+* 主軸方向のスタイル
+* @param axis 横 or 縦
+* @param align 位置
+* @param adjust 子要素のサイズの調整
+* @param itemSize 子要素のサイズ
+* @returns スタイル
+*/
+function _getStackMainAxisStyle(axis, align, adjust, itemSize) {
+	const result = { className: mergeClassName(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]) };
+	if (hasValue(itemSize)) {
+		result.className = mergeClassName(result.className, clsLayout.itemSize[axis]);
+		result.style = { [varLayout.itemSize[axis]]: unit(itemSize) };
+	}
+	return result;
+}
+/**
+* 交差軸方向のクラス
+* @param axis 横 or 縦
+* @param align 位置
+* @param adjust 子要素のサイズの調整
+* @param itemSize 子要素のサイズ
+* @returns スタイル
+*/
+function _getStackClossAxisStyle(axis, align, adjust, itemSize) {
+	if (adjust === "fit") return { className: mergeClassName(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]) };
+	else if (adjust === "grow") {
+		const result = {
+			className: mergeClassName(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
+			style: {}
+		};
+		if (hasValue(itemSize)) {
+			result.className = mergeClassName(result.className, clsLayout.itemSize[axis]);
+			result.style = { [varLayout.itemSize[axis]]: unit(itemSize) };
+		}
+		return result;
+	} else if (adjust === "shrink") {
+		const result = {
+			className: mergeClassName(clsLayout.align[axis][align], clsLayout.adjust[axis][adjust]),
+			style: {}
+		};
+		if (hasValue(itemSize)) {
+			result.className = mergeClassName(result.className, clsLayout.itemSize[axis]);
+			result.style = { [varLayout.itemSize[axis]]: `min(${unit(itemSize)}, 100%)` };
+		}
+		return result;
+	} else if (hasValue(itemSize)) return {
+		className: mergeClassName(clsLayout.align[axis][align], clsLayout.itemSize[axis]),
+		style: { [varLayout.itemSize[axis]]: unit(itemSize) }
+	};
+	else return { className: mergeClassName(clsLayout.align[axis][align]) };
+}
+
+//#endregion
+export { stack as default };

package/stack/styles.css

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

package/stack/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/stack/types.d.ts
+/**
+ * stackのオプション
+ *
+ * - `direction='x'` 時: `alignY` に `space-between`,`space-around`,`space-evenly` 指定不可
+ * - `direction='y'` 時: `alignX` に `space-between`,`space-around`,`space-evenly` 指定不可
+ */
+type StackLayoutOptions = AdjustOptions & ItemSizeOptions & ItemRatioOptions & GapOptions & StackDirectionWithAlignOptions;
+/**
+ * direction & alignのオプション
+ */
+type StackDirectionWithAlignOptions = (DirectionOptions<'x'> & Omit<AlignOptions, 'alignY'> & {
+  alignY?: AlignYBase;
+}) | (DirectionOptions<'y'> & Omit<AlignOptions, 'alignX'> & {
+  alignX?: AlignXBase;
+});
+//#endregion
+export { StackLayoutOptions };

package/stack/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/stack/types.d.ts
+/**
+ * stackのオプション
+ *
+ * - `direction='x'` 時: `alignY` に `space-between`,`space-around`,`space-evenly` 指定不可
+ * - `direction='y'` 時: `alignX` に `space-between`,`space-around`,`space-evenly` 指定不可
+ */
+type StackLayoutOptions = AdjustOptions & ItemSizeOptions & ItemRatioOptions & GapOptions & StackDirectionWithAlignOptions;
+/**
+ * direction & alignのオプション
+ */
+type StackDirectionWithAlignOptions = (DirectionOptions<'x'> & Omit<AlignOptions, 'alignY'> & {
+  alignY?: AlignYBase;
+}) | (DirectionOptions<'y'> & Omit<AlignOptions, 'alignX'> & {
+  alignX?: AlignXBase;
+});
+//#endregion
+export { StackLayoutOptions };

package/stack/types.mjs

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