@niche-works/style-layouts 0.2.0 → 0.3.0

package/core/tile/styles.css

@@ -4,21 +4,129 @@
   --nws-layout-childSizeX: auto;
   --nws-layout-childSizeY: auto;
   --nws-layout-childRatio: auto;
-  --nws-layout-templateX: none;
-  --nws-layout-templateY: none;
-  --nws-layout-autoTracX: auto;
-  --nws-layout-autoTracY: auto;
   display: grid;
 }
+.nws-layout-tile > * {
+  min-width: 0;
+  min-height: 0;
+}
 .nws-layout-tile.nws-layout-direction-x {
   grid-auto-flow: row;
-  grid-template-columns: var(--nws-layout-templateX);
-  grid-auto-rows: var(--nws-layout-autoTracY);
+  grid-template-columns: repeat(auto-fit, minmax(max-content, 100%));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, var(--nws-layout-childSizeX));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-fit, .nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-grow, .nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-shrink {
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-fit > *, .nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-grow > *, .nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-shrink > * {
+  width: auto;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-fit.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--nws-layout-childSizeX)), 1fr));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-grow.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(var(--nws-layout-childSizeX), 1fr));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustX-shrink.nws-layout-childSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeX)));
+}
+.nws-layout-tile.nws-layout-direction-x {
+  grid-auto-rows: auto;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-fit {
+  grid-auto-rows: minmax(0, 100%);
+  align-content: stretch;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-fit > * {
+  height: auto;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-grow {
+  grid-auto-rows: minmax(auto, 100%);
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-grow > * {
+  max-height: 100%;
+  height: 100%;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-grow.nws-layout-childSizeY {
+  grid-auto-rows: minmax(var(--nws-layout-childSizeY), 100%);
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
+  min-height: var(--nws-layout-childSizeY);
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-shrink {
+  grid-auto-rows: minmax(0, auto);
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-shrink > * {
+  min-height: 100%;
+  height: 100%;
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-shrink.nws-layout-childSizeY {
+  grid-auto-rows: minmax(0, var(--nws-layout-childSizeY));
+}
+.nws-layout-tile.nws-layout-direction-x.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
+  max-height: var(--nws-layout-childSizeY);
 }
 .nws-layout-tile.nws-layout-direction-y {
   grid-auto-flow: column;
-  grid-auto-columns: var(--nws-layout-autoTracX);
-  grid-template-rows: var(--nws-layout-templateY);
+  grid-auto-columns: auto;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-fit > *, .nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-grow > *, .nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-shrink > * {
+  width: auto;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-fit {
+  grid-auto-columns: minmax(0, 100%);
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-grow {
+  grid-auto-columns: minmax(auto, 100%);
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-grow.nws-layout-childSizeX {
+  grid-auto-columns: minmax(var(--nws-layout-childSizeX), 100%);
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-shrink {
+  grid-auto-columns: minmax(0, auto);
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustX-shrink.nws-layout-childSizeX {
+  grid-auto-columns: minmax(0, var(--nws-layout-childSizeX));
+}
+.nws-layout-tile.nws-layout-direction-y {
+  grid-template-rows: repeat(auto-fit, minmax(max-content, 100%));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, var(--nws-layout-childSizeY));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-fit, .nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-grow, .nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-shrink {
+  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-fit {
+  align-content: stretch;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-fit > * {
+  height: auto;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-fit.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--nws-layout-childSizeY)), 1fr));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-grow > * {
+  max-height: 100%;
+  height: 100%;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-grow.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(var(--nws-layout-childSizeY), 1fr));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
+  min-height: var(--nws-layout-childSizeY);
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-shrink > * {
+  min-height: 100%;
+  height: 100%;
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-shrink.nws-layout-childSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(0, var(--nws-layout-childSizeY)));
+}
+.nws-layout-tile.nws-layout-direction-y.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
+  max-height: var(--nws-layout-childSizeY);
 }
 .nws-layout-tile.nws-layout-alignX-left {
   justify-content: flex-start;
@@ -62,41 +170,6 @@
 .nws-layout-tile.nws-layout-childSizeY > * {
   height: var(--nws-layout-childSizeY);
 }
-.nws-layout-tile > * {
-  min-width: 0;
-}
-.nws-layout-tile.nws-layout-adjustX-fit > * {
-  width: auto;
-}
-.nws-layout-tile.nws-layout-adjustX-grow > * {
-  width: auto;
-}
-.nws-layout-tile.nws-layout-adjustX-shrink > * {
-  width: auto;
-}
-.nws-layout-tile > * {
-  min-height: 0;
-}
-.nws-layout-tile.nws-layout-adjustY-fit {
-  align-content: stretch;
-}
-.nws-layout-tile.nws-layout-adjustY-fit > * {
-  height: auto;
-}
-.nws-layout-tile.nws-layout-adjustY-grow > * {
-  max-height: 100%;
-  height: 100%;
-}
-.nws-layout-tile.nws-layout-adjustY-grow.nws-layout-childSizeY > * {
-  min-height: var(--nws-layout-childSizeY);
-}
-.nws-layout-tile.nws-layout-adjustY-shrink > * {
-  min-height: 100%;
-  height: 100%;
-}
-.nws-layout-tile.nws-layout-adjustY-shrink.nws-layout-childSizeY > * {
-  max-height: var(--nws-layout-childSizeY);
-}
 .nws-layout-tile.nws-layout-childRatio > * {
   aspect-ratio: var(--nws-layout-childRatio);
 }

package/core/tile/tile.cjs

@@ -1,12 +1,9 @@
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_core_constants = require('../constants.cjs');
 const require_core__constants = require('../_constants.cjs');
-const require_core__internal_hasValue = require('../_internal/hasValue.cjs');
 const require_core__internal_applyChildRatio = require('../_internal/applyChildRatio.cjs');
-const require_core__internal_unit = require('../_internal/unit.cjs');
 const require_core__internal_applyChildSize = require('../_internal/applyChildSize.cjs');
 const require_core__internal_applyGap = require('../_internal/applyGap.cjs');
-const require_core__internal_mergeLayoutResults = require('../_internal/mergeLayoutResults.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");
@@ -26,61 +23,14 @@ const tile = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: (0, clsx.default)(require_core_constants.clsLayoutTile, require_core__constants.clsLayoutDirection[direction], require_core__constants.clsLayoutAlign.x[alignX], require_core__constants.clsLayoutAlign.y[alignY], require_core__constants.clsLayoutAdjust.x[adjustX], require_core__constants.clsLayoutAdjust.y[adjustY]),
+		className: (0, clsx.default)(require_core_constants.clsLayoutTile, require_core__constants.clsLayout.direction[direction], require_core__constants.clsLayout.align.x[alignX], require_core__constants.clsLayout.align.y[alignY], require_core__constants.clsLayout.adjust.x[adjustX], require_core__constants.clsLayout.adjust.y[adjustY]),
 		style: {}
 	};
 	require_core__internal_applyGap(result, gap, gapX, gapY);
 	require_core__internal_applyChildSize(result, childSizeX, childSizeY);
 	require_core__internal_applyChildRatio(result, childRatioX, childRatioY);
-	return require_core__internal_mergeLayoutResults([result, _getLayoutResultByDirection[direction](options)]);
+	return result;
 };
-/**
-* 並べる方向によるスタイル
-*/
-const _getLayoutResultByDirection = {
-	x: ({ adjustX, adjustY, childSizeX, childSizeY }) => {
-		return require_core__internal_mergeLayoutResults([_getGridMainAxisTemplate(adjustX, childSizeX, require_core_constants.varLayoutTemplateX), _getGridClossAxisAuto(adjustY, childSizeY, require_core_constants.varLayoutAutoTracY)]);
-	},
-	y: ({ adjustX, adjustY, childSizeY, childSizeX }) => {
-		return require_core__internal_mergeLayoutResults([_getGridClossAxisAuto(adjustX, childSizeX, require_core_constants.varLayoutAutoTracX), _getGridMainAxisTemplate(adjustY, childSizeY, require_core_constants.varLayoutTemplateY)]);
-	}
-};
-/**
-* direction方向の子要素のサイズを指定するためのテンプレート
-* @param align 子要素の配置
-* @param childSize 子要素のサイズ
-* @returns
-*/
-function _getGridMainAxisTemplate(adjust, childSize, varName) {
-	const hasChildSize = require_core__internal_hasValue(childSize);
-	const style = {};
-	if (adjust === "fit") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(clamp(0px, 100%, ${require_core__internal_unit(childSize)}), 1fr))`;
-	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
-	else if (adjust === "grow") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(${require_core__internal_unit(childSize)}, 1fr))`;
-	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
-	else if (adjust === "shrink") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(0, ${require_core__internal_unit(childSize)}))`;
-	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
-	else if (hasChildSize) style[varName] = `repeat(auto-fit, ${require_core__internal_unit(childSize)})`;
-	else style[varName] = "repeat(auto-fit, minmax(max-content, 100%))";
-	return { style };
-}
-/**
-* 交差軸方向
-* @param adjust
-* @param childSize
-* @returns
-*/
-function _getGridClossAxisAuto(adjust, childSize, varName) {
-	const hasChildSize = require_core__internal_hasValue(childSize);
-	const style = {};
-	if (adjust === "fit") if (hasChildSize) style[varName] = `minmax(0, 100%)`;
-	else style[varName] = `minmax(0, 100%)`;
-	else if (adjust === "grow") if (hasChildSize) style[varName] = `minmax(${require_core__internal_unit(childSize)}, 100%)`;
-	else style[varName] = `minmax(auto, 100%)`;
-	else if (adjust === "shrink") if (hasChildSize) style[varName] = `minmax(0, ${require_core__internal_unit(childSize)})`;
-	else style[varName] = `minmax(0, auto)`;
-	return { style };
-}
 
 //#endregion
 module.exports = tile;

package/core/tile/tile.mjs

@@ -1,11 +1,8 @@
-import { clsLayoutTile, varLayoutAutoTracX, varLayoutAutoTracY, varLayoutTemplateX, varLayoutTemplateY } from "../constants.mjs";
-import { clsLayoutAdjust, clsLayoutAlign, clsLayoutDirection } from "../_constants.mjs";
-import hasValue from "../_internal/hasValue.mjs";
+import { clsLayoutTile } from "../constants.mjs";
+import { clsLayout } from "../_constants.mjs";
 import applyChildRatio from "../_internal/applyChildRatio.mjs";
-import unit from "../_internal/unit.mjs";
 import applyChildSize from "../_internal/applyChildSize.mjs";
 import applyGap from "../_internal/applyGap.mjs";
-import mergeLayoutResults from "../_internal/mergeLayoutResults.mjs";
 import maybeDefault from "@niche-works/utils/object/maybeDefault";
 import clsx from "clsx";
 
@@ -23,61 +20,14 @@ const tile = (options = {}) => {
 		alignY: "top"
 	}, { overwriteNull: true });
 	const result = {
-		className: clsx(clsLayoutTile, clsLayoutDirection[direction], clsLayoutAlign.x[alignX], clsLayoutAlign.y[alignY], clsLayoutAdjust.x[adjustX], clsLayoutAdjust.y[adjustY]),
+		className: clsx(clsLayoutTile, 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);
 	applyChildSize(result, childSizeX, childSizeY);
 	applyChildRatio(result, childRatioX, childRatioY);
-	return mergeLayoutResults([result, _getLayoutResultByDirection[direction](options)]);
+	return result;
 };
-/**
-* 並べる方向によるスタイル
-*/
-const _getLayoutResultByDirection = {
-	x: ({ adjustX, adjustY, childSizeX, childSizeY }) => {
-		return mergeLayoutResults([_getGridMainAxisTemplate(adjustX, childSizeX, varLayoutTemplateX), _getGridClossAxisAuto(adjustY, childSizeY, varLayoutAutoTracY)]);
-	},
-	y: ({ adjustX, adjustY, childSizeY, childSizeX }) => {
-		return mergeLayoutResults([_getGridClossAxisAuto(adjustX, childSizeX, varLayoutAutoTracX), _getGridMainAxisTemplate(adjustY, childSizeY, varLayoutTemplateY)]);
-	}
-};
-/**
-* direction方向の子要素のサイズを指定するためのテンプレート
-* @param align 子要素の配置
-* @param childSize 子要素のサイズ
-* @returns
-*/
-function _getGridMainAxisTemplate(adjust, childSize, varName) {
-	const hasChildSize = hasValue(childSize);
-	const style = {};
-	if (adjust === "fit") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(clamp(0px, 100%, ${unit(childSize)}), 1fr))`;
-	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
-	else if (adjust === "grow") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(${unit(childSize)}, 1fr))`;
-	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
-	else if (adjust === "shrink") if (hasChildSize) style[varName] = `repeat(auto-fit, minmax(0, ${unit(childSize)}))`;
-	else style[varName] = "repeat(auto-fit, minmax(0, 1fr))";
-	else if (hasChildSize) style[varName] = `repeat(auto-fit, ${unit(childSize)})`;
-	else style[varName] = "repeat(auto-fit, minmax(max-content, 100%))";
-	return { style };
-}
-/**
-* 交差軸方向
-* @param adjust
-* @param childSize
-* @returns
-*/
-function _getGridClossAxisAuto(adjust, childSize, varName) {
-	const hasChildSize = hasValue(childSize);
-	const style = {};
-	if (adjust === "fit") if (hasChildSize) style[varName] = `minmax(0, 100%)`;
-	else style[varName] = `minmax(0, 100%)`;
-	else if (adjust === "grow") if (hasChildSize) style[varName] = `minmax(${unit(childSize)}, 100%)`;
-	else style[varName] = `minmax(auto, 100%)`;
-	else if (adjust === "shrink") if (hasChildSize) style[varName] = `minmax(0, ${unit(childSize)})`;
-	else style[varName] = `minmax(0, auto)`;
-	return { style };
-}
 
 //#endregion
 export { tile as default };

package/flow/index.cjs

@@ -1,4 +1,4 @@
 require('../core/flow/styles.css');
 const require_core_flow_flow = require('../core/flow/flow.cjs');
 
-module.exports = require_core_flow_flow;
+module.exports = require_core_flow_flow;

package/layer/index.cjs

@@ -1,4 +1,4 @@
 require('../core/layer/styles.css');
 const require_core_layer_layer = require('../core/layer/layer.cjs');
 
-module.exports = require_core_layer_layer;
+module.exports = require_core_layer_layer;

package/matrix/index.cjs

@@ -1,4 +1,4 @@
 require('../core/matrix/styles.css');
 const require_core_matrix_matrix = require('../core/matrix/matrix.cjs');
 
-module.exports = require_core_matrix_matrix;
+module.exports = require_core_matrix_matrix;

package/pack/index.cjs

@@ -1,4 +1,4 @@
 require('../core/pack/styles.css');
 const require_core_pack_pack = require('../core/pack/pack.cjs');
 
-module.exports = require_core_pack_pack;
+module.exports = require_core_pack_pack;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@niche-works/style-layouts",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "keywords": [
     "css",
     "style",

package/pin/index.cjs

@@ -1,4 +1,4 @@
 require('../core/pin/styles.css');
 const require_core_pin_pin = require('../core/pin/pin.cjs');
 
-module.exports = require_core_pin_pin;
+module.exports = require_core_pin_pin;

package/stack/index.cjs

@@ -1,4 +1,4 @@
 require('../core/stack/styles.css');
 const require_core_stack_stack = require('../core/stack/stack.cjs');
 
-module.exports = require_core_stack_stack;
+module.exports = require_core_stack_stack;

package/tile/index.cjs

@@ -1,4 +1,4 @@
 require('../core/tile/styles.css');
 const require_core_tile_tile = require('../core/tile/tile.cjs');
 
-module.exports = require_core_tile_tile;
+module.exports = require_core_tile_tile;