@niche-works/css-layouts 0.1.0

package/matrix/styles.css

@@ -0,0 +1,59 @@
+.nws-layout-matrix {
+  --nws-layout-childX: none;
+  --nws-layout-childY: none;
+  --nws-layout-spacingX: 0px;
+  --nws-layout-spacingY: 0px;
+  display: grid;
+}
+.nws-layout-matrix.nws-layout-spacingX {
+  column-gap: var(--nws-layout-spacingX);
+}
+.nws-layout-matrix.nws-layout-spacingY {
+  row-gap: var(--nws-layout-spacingY);
+}
+.nws-layout-matrix.nws-layout-direction-x {
+  grid-auto-flow: row;
+  grid-template-columns: var(--nws-layout-childX);
+  grid-template-rows: var(--nws-layout-childY);
+}
+.nws-layout-matrix.nws-layout-direction-y {
+  grid-auto-flow: column;
+  grid-template-columns: var(--nws-layout-childX);
+  grid-template-rows: var(--nws-layout-childY);
+}
+.nws-layout-matrix.nws-layout-alignX-left {
+  justify-content: flex-start;
+}
+.nws-layout-matrix.nws-layout-alignX-center {
+  justify-content: center;
+}
+.nws-layout-matrix.nws-layout-alignX-right {
+  justify-content: flex-end;
+}
+.nws-layout-matrix.nws-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+.nws-layout-matrix.nws-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+.nws-layout-matrix.nws-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+.nws-layout-matrix.nws-layout-alignY-top {
+  align-content: flex-start;
+}
+.nws-layout-matrix.nws-layout-alignY-middle {
+  align-content: center;
+}
+.nws-layout-matrix.nws-layout-alignY-bottom {
+  align-content: flex-end;
+}
+.nws-layout-matrix.nws-layout-alignY-spaceBetween {
+  align-content: space-between;
+}
+.nws-layout-matrix.nws-layout-alignY-spaceAround {
+  align-content: space-around;
+}
+.nws-layout-matrix.nws-layout-alignY-spaceEvenly {
+  align-content: space-evenly;
+}

package/matrix/types.d.cts

@@ -0,0 +1,46 @@
+import { AdjustOptions, AlignOptions, ChildCountOptions, ChildOptions, ChildSizeOptions, DirectionOptions, SpacingOptions } from "../_types.cjs";
+
+//#region src/matrix/types.d.ts
+type MatrixLayoutOptions = AdjustOptions & AlignOptions & DirectionOptions & MatrixAxisXOptions & MatrixAxisYOptions & SpacingOptions;
+/**
+ * 横軸、要素数指定
+ */
+type MatrixAxisXWithCountOptions = {
+  childCountX: ChildCountOptions['childCountX'];
+  childSizeX?: ChildSizeOptions['childSizeX'];
+  childX?: never;
+};
+/**
+ * 横軸、テンプレート指定
+ */
+type MatrixAxisXWithTemplateOptions = {
+  childCountX?: never;
+  childSizeX?: never;
+  chilsX: ChildOptions['childX'];
+};
+/**
+ * 横軸用オプション
+ */
+type MatrixAxisXOptions = MatrixAxisXWithCountOptions | MatrixAxisXWithTemplateOptions;
+/**
+ * 縦軸、要素数指定
+ */
+type MatrixAxisYWithCountOptions = {
+  childCountY: ChildCountOptions['childCountY'];
+  childSizeY?: ChildSizeOptions['childSizeY'];
+  childY?: never;
+};
+/**
+ * 縦軸、テンプレート指定
+ */
+type MatrixAxisYWithTemplateOptions = {
+  childCountY?: never;
+  childSizeY?: never;
+  childY: ChildOptions['childY'];
+};
+/**
+ * 縦軸用オプション
+ */
+type MatrixAxisYOptions = MatrixAxisYWithCountOptions | MatrixAxisYWithTemplateOptions;
+//#endregion
+export { MatrixLayoutOptions };

package/matrix/types.d.mts

@@ -0,0 +1,46 @@
+import { AdjustOptions, AlignOptions, ChildCountOptions, ChildOptions, ChildSizeOptions, DirectionOptions, SpacingOptions } from "../_types.mjs";
+
+//#region src/matrix/types.d.ts
+type MatrixLayoutOptions = AdjustOptions & AlignOptions & DirectionOptions & MatrixAxisXOptions & MatrixAxisYOptions & SpacingOptions;
+/**
+ * 横軸、要素数指定
+ */
+type MatrixAxisXWithCountOptions = {
+  childCountX: ChildCountOptions['childCountX'];
+  childSizeX?: ChildSizeOptions['childSizeX'];
+  childX?: never;
+};
+/**
+ * 横軸、テンプレート指定
+ */
+type MatrixAxisXWithTemplateOptions = {
+  childCountX?: never;
+  childSizeX?: never;
+  chilsX: ChildOptions['childX'];
+};
+/**
+ * 横軸用オプション
+ */
+type MatrixAxisXOptions = MatrixAxisXWithCountOptions | MatrixAxisXWithTemplateOptions;
+/**
+ * 縦軸、要素数指定
+ */
+type MatrixAxisYWithCountOptions = {
+  childCountY: ChildCountOptions['childCountY'];
+  childSizeY?: ChildSizeOptions['childSizeY'];
+  childY?: never;
+};
+/**
+ * 縦軸、テンプレート指定
+ */
+type MatrixAxisYWithTemplateOptions = {
+  childCountY?: never;
+  childSizeY?: never;
+  childY: ChildOptions['childY'];
+};
+/**
+ * 縦軸用オプション
+ */
+type MatrixAxisYOptions = MatrixAxisYWithCountOptions | MatrixAxisYWithTemplateOptions;
+//#endregion
+export { MatrixLayoutOptions };

package/matrix/types.mjs

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

package/pack/index.cjs

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

package/pack/index.d.cts

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

package/pack/index.d.mts

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

package/pack/index.mjs

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

package/pack/pack.cjs

@@ -0,0 +1,28 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_constants = require('../constants.cjs');
+const require__constants = require('../_constants.cjs');
+const require__helpers_applySpacing = require('../_helpers/applySpacing.cjs');
+require('./styles.cjs');
+let _niche_works_utils_object_maybeDefault = require("@niche-works/utils/object/maybeDefault");
+_niche_works_utils_object_maybeDefault = require_runtime.__toESM(_niche_works_utils_object_maybeDefault, 1);
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+
+//#region src/pack/pack.ts
+/**
+* packレイアウト
+*
+* - 子要素で親要素を満たす
+*/
+const pack = (options = {}) => {
+	const { direction, spacing, spacingX, spacingY } = (0, _niche_works_utils_object_maybeDefault.default)(options, { direction: "x" }, { overwriteNull: true });
+	const result = {
+		className: (0, clsx.default)(require_constants.clsLayoutPack, require__constants.clsLayoutDirection[direction]),
+		style: {}
+	};
+	require__helpers_applySpacing(result, spacing, spacingX, spacingY);
+	return result;
+};
+
+//#endregion
+module.exports = pack;

package/pack/pack.d.cts

@@ -0,0 +1,11 @@
+import { CreateLayout } from "../types.cjs";
+import { PackLayoutOptions } from "./types.cjs";
+
+//#region src/pack/pack.d.ts
+/**
+ * packレイアウト
+ *
+ * - 子要素で親要素を満たす
+ */
+declare const pack: CreateLayout<PackLayoutOptions>;
+export = pack;

package/pack/pack.d.mts

@@ -0,0 +1,12 @@
+import { CreateLayout } from "../types.mjs";
+import { PackLayoutOptions } from "./types.mjs";
+
+//#region src/pack/pack.d.ts
+/**
+ * packレイアウト
+ *
+ * - 子要素で親要素を満たす
+ */
+declare const pack: CreateLayout<PackLayoutOptions>;
+//#endregion
+export { pack as default };

package/pack/pack.mjs

@@ -0,0 +1,25 @@
+import { clsLayoutPack } from "../constants.mjs";
+import { clsLayoutDirection } from "../_constants.mjs";
+import applySpacing from "../_helpers/applySpacing.mjs";
+import "./styles.css";
+import maybeDefault from "@niche-works/utils/object/maybeDefault";
+import clsx from "clsx";
+
+//#region src/pack/pack.ts
+/**
+* packレイアウト
+*
+* - 子要素で親要素を満たす
+*/
+const pack = (options = {}) => {
+	const { direction, spacing, spacingX, spacingY } = maybeDefault(options, { direction: "x" }, { overwriteNull: true });
+	const result = {
+		className: clsx(clsLayoutPack, clsLayoutDirection[direction]),
+		style: {}
+	};
+	applySpacing(result, spacing, spacingX, spacingY);
+	return result;
+};
+
+//#endregion
+export { pack as default };

package/pack/styles.css

@@ -0,0 +1,27 @@
+.nws-layout-pack {
+  --nws-layout-spacingX: 0px;
+  --nws-layout-spacingY: 0px;
+  display: grid;
+}
+.nws-layout-pack.nws-layout-spacingX {
+  column-gap: var(--nws-layout-spacingX);
+}
+.nws-layout-pack.nws-layout-spacingY {
+  row-gap: var(--nws-layout-spacingY);
+}
+.nws-layout-pack.nws-layout-direction-x {
+  grid-auto-flow: column;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-template-rows: auto;
+}
+.nws-layout-pack.nws-layout-direction-y {
+  grid-auto-flow: row;
+  grid-template-columns: auto;
+  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
+}
+.nws-layout-pack > * {
+  height: auto;
+  width: auto;
+  min-height: 0;
+  min-width: 0;
+}

package/pack/types.d.cts

@@ -0,0 +1,6 @@
+import { DirectionOptions, SpacingOptions } from "../_types.cjs";
+
+//#region src/pack/types.d.ts
+type PackLayoutOptions = DirectionOptions & SpacingOptions;
+//#endregion
+export { PackLayoutOptions };

package/pack/types.d.mts

@@ -0,0 +1,6 @@
+import { DirectionOptions, SpacingOptions } from "../_types.mjs";
+
+//#region src/pack/types.d.ts
+type PackLayoutOptions = DirectionOptions & SpacingOptions;
+//#endregion
+export { PackLayoutOptions };

package/pack/types.mjs

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

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@niche-works/css-layouts",
+  "version": "0.1.0",
+  "keywords": [
+    "css",
+    "style",
+    "layout"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mitsuhiroseino/niche-works-css-layouts.git"
+  },
+  "license": "MIT",
+  "author": "Mitsuhiro Seino",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.cjs"
+    },
+    "./*": {
+      "import": "./*/index.mjs",
+      "require": "./*/index.cjs"
+    },
+    "./constants": {
+      "import": "./constants.mjs",
+      "require": "./constants.cjs"
+    },
+    "./*/constants": {
+      "import": "./*/constants.mjs",
+      "require": "./*/constants.cjs"
+    }
+  },
+  "main": "./index.cjs",
+  "module": "./index.mjs",
+  "dependencies": {
+    "@niche-works/types": "^0.3.1",
+    "@niche-works/utils": "^0.4.0",
+    "clsx": "^2.1.1",
+    "csstype": "^3.2.3"
+  }
+}

package/pin/index.cjs

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

package/pin/index.d.cts

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

package/pin/index.d.mts

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

package/pin/index.mjs

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

package/pin/pin.cjs

@@ -0,0 +1,22 @@
+const require_constants = require('../constants.cjs');
+const require__helpers_applyChildSize = require('../_helpers/applyChildSize.cjs');
+require('./styles.cjs');
+
+//#region src/pin/pin.ts
+/**
+* pinレイアウト
+*
+* - 子要素のtop,left,bottom,rightに従い配置する
+*/
+const pin = (options = {}) => {
+	const { childSizeX, childSizeY } = options;
+	const result = {
+		className: require_constants.clsLayoutPin,
+		style: {}
+	};
+	require__helpers_applyChildSize(result, childSizeX, childSizeY);
+	return result;
+};
+
+//#endregion
+module.exports = pin;

package/pin/pin.d.cts

@@ -0,0 +1,11 @@
+import { CreateLayout } from "../types.cjs";
+import { PinLayoutOptions } from "./types.cjs";
+
+//#region src/pin/pin.d.ts
+/**
+ * pinレイアウト
+ *
+ * - 子要素のtop,left,bottom,rightに従い配置する
+ */
+declare const pin: CreateLayout<PinLayoutOptions>;
+export = pin;

package/pin/pin.d.mts

@@ -0,0 +1,12 @@
+import { CreateLayout } from "../types.mjs";
+import { PinLayoutOptions } from "./types.mjs";
+
+//#region src/pin/pin.d.ts
+/**
+ * pinレイアウト
+ *
+ * - 子要素のtop,left,bottom,rightに従い配置する
+ */
+declare const pin: CreateLayout<PinLayoutOptions>;
+//#endregion
+export { pin as default };

package/pin/pin.mjs

@@ -0,0 +1,22 @@
+import { clsLayoutPin } from "../constants.mjs";
+import applyChildSize from "../_helpers/applyChildSize.mjs";
+import "./styles.css";
+
+//#region src/pin/pin.ts
+/**
+* pinレイアウト
+*
+* - 子要素のtop,left,bottom,rightに従い配置する
+*/
+const pin = (options = {}) => {
+	const { childSizeX, childSizeY } = options;
+	const result = {
+		className: clsLayoutPin,
+		style: {}
+	};
+	applyChildSize(result, childSizeX, childSizeY);
+	return result;
+};
+
+//#endregion
+export { pin as default };

package/pin/styles.css

@@ -0,0 +1,15 @@
+.nws-layout-pin {
+  --nws-layout-childSizeX: auto;
+  --nws-layout-childSizeY: auto;
+  display: block;
+  position: relative;
+}
+.nws-layout-pin > * {
+  position: absolute;
+}
+.nws-layout-pin.nws-layout-childSizeX > * {
+  width: var(--nws-layout-childSizeX);
+}
+.nws-layout-pin.nws-layout-childSizeY > * {
+  height: var(--nws-layout-childSizeY);
+}

package/pin/types.d.cts

@@ -0,0 +1,6 @@
+import { ChildSizeOptions } from "../_types.cjs";
+
+//#region src/pin/types.d.ts
+type PinLayoutOptions = ChildSizeOptions;
+//#endregion
+export { PinLayoutOptions };

package/pin/types.d.mts

@@ -0,0 +1,6 @@
+import { ChildSizeOptions } from "../_types.mjs";
+
+//#region src/pin/types.d.ts
+type PinLayoutOptions = ChildSizeOptions;
+//#endregion
+export { PinLayoutOptions };

package/pin/types.mjs

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

package/stack/index.cjs

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

package/stack/index.d.cts

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

package/stack/index.d.mts

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

package/stack/index.mjs

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

package/stack/stack.cjs

@@ -0,0 +1,98 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_constants = require('../constants.cjs');
+const require__constants = require('../_constants.cjs');
+const require__helpers_hasValue = require('../_helpers/hasValue.cjs');
+const require__helpers_unit = require('../_helpers/unit.cjs');
+const require__helpers_applySpacing = require('../_helpers/applySpacing.cjs');
+const require__helpers_mergeLayoutResults = require('../_helpers/mergeLayoutResults.cjs');
+require('./styles.cjs');
+let _niche_works_utils_object_maybeDefault = require("@niche-works/utils/object/maybeDefault");
+_niche_works_utils_object_maybeDefault = require_runtime.__toESM(_niche_works_utils_object_maybeDefault, 1);
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+
+//#region src/stack/stack.ts
+/**
+* stackレイアウト
+*
+* - 子要素を並べて配置する
+*/
+const stack = (options = {}) => {
+	const { direction, alignX, alignY, adjustX, adjustY, spacing, spacingX = spacing, spacingY = spacing, childSizeX, childSizeY } = (0, _niche_works_utils_object_maybeDefault.default)(options, {
+		direction: "x",
+		alignX: "left",
+		alignY: "top"
+	}, { overwriteNull: true });
+	const result = {
+		className: (0, clsx.default)(require_constants.clsLayoutStack, require__constants.clsLayoutDirection[direction], require__constants.clsLayoutAlign.x[alignX], require__constants.clsLayoutAlign.y[alignY]),
+		style: {}
+	};
+	require__helpers_applySpacing(result, spacing, spacingX, spacingY);
+	const resultList = [result];
+	if (direction === "x") {
+		resultList.push(_getStackMainAxisStyle("x", alignX, adjustX, childSizeX));
+		resultList.push(_getStackClossAxisStyle("y", alignY, adjustY, childSizeY));
+	} else {
+		resultList.push(_getStackClossAxisStyle("x", alignX, adjustX, childSizeX));
+		resultList.push(_getStackMainAxisStyle("y", alignY, adjustY, childSizeY));
+	}
+	return require__helpers_mergeLayoutResults(resultList);
+};
+/**
+* 主軸方向のスタイル
+* @param axis 横 or 縦
+* @param align 位置
+* @param adjust 子要素のサイズの調整
+* @param childSize 子要素のサイズ
+* @returns スタイル
+*/
+function _getStackMainAxisStyle(axis, align, adjust, childSize) {
+	const result = { className: (0, clsx.default)(require__constants.clsLayoutAlign[axis][align], require__constants.clsLayoutAdjust[axis][adjust]) };
+	if (require__helpers_hasValue(childSize)) {
+		result.className = (0, clsx.default)(result.className, require__constants.clsLayoutChildSize[axis]);
+		result.style = { [require__constants.varLayoutChildSize[axis]]: require__helpers_unit(childSize) };
+	}
+	return result;
+}
+/**
+* 交差軸方向のクラス
+* @param axis 横 or 縦
+* @param align 位置
+* @param adjust 子要素のサイズの調整
+* @param childSize 子要素のサイズ
+* @returns スタイル
+*/
+function _getStackClossAxisStyle(axis, align, adjust, childSize) {
+	if (adjust === "fit") return {
+		className: (0, clsx.default)(require__constants.clsLayoutAlign[axis][align], require__constants.clsLayoutAdjust[axis][adjust]),
+		style: {
+			[`min-${require__constants.cssLayoutAxisSizeProp[axis]}`]: "100%",
+			[require__constants.varLayoutChildSize[axis]]: `min(0, 100%)`
+		}
+	};
+	else if (adjust === "grow") {
+		const result = {
+			className: (0, clsx.default)(require__constants.clsLayoutAlign[axis][align], require__constants.clsLayoutAdjust[axis][adjust]),
+			style: { [`min-${require__constants.cssLayoutAxisSizeProp[axis]}`]: "100%" }
+		};
+		if (require__helpers_hasValue(childSize)) {
+			result.className = (0, clsx.default)(result.className, require__constants.clsLayoutChildSize[axis]);
+			result.style[require__constants.varLayoutChildSize[axis]] = require__helpers_unit(childSize);
+		}
+		return result;
+	} else if (adjust === "shrink") {
+		const result = { className: (0, clsx.default)(require__constants.clsLayoutAlign[axis][align], require__constants.clsLayoutAdjust[axis][adjust]) };
+		if (require__helpers_hasValue(childSize)) {
+			result.className = (0, clsx.default)(result.className, require__constants.clsLayoutChildSize[axis]);
+			result.style = { [require__constants.varLayoutChildSize[axis]]: `min(${require__helpers_unit(childSize)}, 100%)` };
+		}
+		return result;
+	} else if (require__helpers_hasValue(childSize)) return {
+		className: (0, clsx.default)(require__constants.clsLayoutAlign[axis][align], require__constants.clsLayoutChildSize[axis]),
+		style: { [require__constants.varLayoutChildSize[axis]]: require__helpers_unit(childSize) }
+	};
+	else return { className: (0, clsx.default)(require__constants.clsLayoutAlign[axis][align]) };
+}
+
+//#endregion
+module.exports = stack;

package/stack/stack.d.cts

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

package/stack/stack.d.mts

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