@fringeworks/style-layouts 0.0.0-stage → 0.8.0

package/matrix/styles.css

@@ -0,0 +1,141 @@
+.lx-layout-matrix {
+  --lx-layout-gapX: 0px;
+  --lx-layout-gapY: 0px;
+  --lx-layout-itemSizeX: auto;
+  --lx-layout-itemSizeY: auto;
+  --lx-layout-itemRatio: auto;
+  --lx-layout-itemCountX: auto-fit;
+  --lx-layout-itemCountY: auto-fit;
+  --lx-layout-templateX: none;
+  --lx-layout-templateY: none;
+  display: grid;
+}
+.lx-layout-matrix.lx-layout-direction-x {
+  grid-auto-flow: row;
+}
+.lx-layout-matrix.lx-layout-direction-y {
+  grid-auto-flow: column;
+}
+.lx-layout-matrix.lx-layout-alignX-left {
+  justify-content: flex-start;
+}
+.lx-layout-matrix.lx-layout-alignX-center {
+  justify-content: center;
+}
+.lx-layout-matrix.lx-layout-alignX-right {
+  justify-content: flex-end;
+}
+.lx-layout-matrix.lx-layout-alignX-spaceBetween {
+  justify-content: space-between;
+}
+.lx-layout-matrix.lx-layout-alignX-spaceAround {
+  justify-content: space-around;
+}
+.lx-layout-matrix.lx-layout-alignX-spaceEvenly {
+  justify-content: space-evenly;
+}
+.lx-layout-matrix.lx-layout-alignY-top {
+  align-content: flex-start;
+}
+.lx-layout-matrix.lx-layout-alignY-middle {
+  align-content: center;
+}
+.lx-layout-matrix.lx-layout-alignY-bottom {
+  align-content: flex-end;
+}
+.lx-layout-matrix.lx-layout-alignY-spaceBetween {
+  align-content: space-between;
+}
+.lx-layout-matrix.lx-layout-alignY-spaceAround {
+  align-content: space-around;
+}
+.lx-layout-matrix.lx-layout-alignY-spaceEvenly {
+  align-content: space-evenly;
+}
+.lx-layout-matrix.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, var(--lx-layout-itemSizeX));
+}
+.lx-layout-matrix.lx-layout-itemSizeX.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), var(--lx-layout-itemSizeX));
+}
+.lx-layout-matrix.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), auto);
+}
+.lx-layout-matrix.lx-layout-templateX {
+  grid-template-columns: var(--lx-layout-templateX);
+}
+.lx-layout-matrix.lx-layout-adjustX-fit.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeX)), 1fr));
+}
+.lx-layout-matrix.lx-layout-adjustX-fit.lx-layout-itemSizeX.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), minmax(clamp(0px, (100% - var(--lx-layout-gapX) * (var(--lx-layout-itemCountX) - 1)) / var(--lx-layout-itemCountX), var(--lx-layout-itemSizeX)), 1fr));
+}
+.lx-layout-matrix.lx-layout-adjustX-fit.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), 1fr);
+}
+.lx-layout-matrix.lx-layout-adjustX-grow.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(var(--lx-layout-itemSizeX), 1fr));
+}
+.lx-layout-matrix.lx-layout-adjustX-grow.lx-layout-itemSizeX.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), minmax(var(--lx-layout-itemSizeX), 1fr));
+}
+.lx-layout-matrix.lx-layout-adjustX-grow.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), 1fr);
+}
+.lx-layout-matrix.lx-layout-adjustX-shrink.lx-layout-itemSizeX {
+  grid-template-columns: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeX)));
+}
+.lx-layout-matrix.lx-layout-adjustX-shrink.lx-layout-itemSizeX.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), minmax(0, var(--lx-layout-itemSizeX)));
+}
+.lx-layout-matrix.lx-layout-adjustX-shrink.lx-layout-itemCountX {
+  grid-template-columns: repeat(var(--lx-layout-itemCountX), auto);
+}
+.lx-layout-matrix.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, var(--lx-layout-itemSizeY));
+}
+.lx-layout-matrix.lx-layout-itemSizeY.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), var(--lx-layout-itemSizeY));
+}
+.lx-layout-matrix.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), auto);
+}
+.lx-layout-matrix.lx-layout-templateY {
+  grid-template-rows: var(--lx-layout-templateY);
+}
+.lx-layout-matrix.lx-layout-adjustY-fit.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(clamp(0px, 100%, var(--lx-layout-itemSizeY)), 1fr));
+}
+.lx-layout-matrix.lx-layout-adjustY-fit.lx-layout-itemSizeY.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), minmax(clamp(0px, (100% - var(--lx-layout-gapY) * (var(--lx-layout-itemCountY) - 1)) / var(--lx-layout-itemCountY), var(--lx-layout-itemSizeY)), 1fr));
+}
+.lx-layout-matrix.lx-layout-adjustY-fit.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), 1fr);
+}
+.lx-layout-matrix.lx-layout-adjustY-grow.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(var(--lx-layout-itemSizeY), 1fr));
+}
+.lx-layout-matrix.lx-layout-adjustY-grow.lx-layout-itemSizeY.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), minmax(var(--lx-layout-itemSizeY), 1fr));
+}
+.lx-layout-matrix.lx-layout-adjustY-grow.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), 1fr);
+}
+.lx-layout-matrix.lx-layout-adjustY-shrink.lx-layout-itemSizeY {
+  grid-template-rows: repeat(auto-fit, minmax(0, var(--lx-layout-itemSizeY)));
+}
+.lx-layout-matrix.lx-layout-adjustY-shrink.lx-layout-itemSizeY.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), minmax(0, var(--lx-layout-itemSizeY)));
+}
+.lx-layout-matrix.lx-layout-adjustY-shrink.lx-layout-itemCountY {
+  grid-template-rows: repeat(var(--lx-layout-itemCountY), auto);
+}
+.lx-layout-matrix.lx-layout-itemRatio > * {
+  aspect-ratio: var(--lx-layout-itemRatio);
+}
+.lx-layout-matrix.lx-layout-gapX {
+  column-gap: var(--lx-layout-gapX);
+}
+.lx-layout-matrix.lx-layout-gapY {
+  row-gap: var(--lx-layout-gapY);
+}

package/matrix/types.d.cts

@@ -0,0 +1,46 @@
+import { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemCountOptions, ItemRatioOptions, ItemSizeOptions, TracksOptions } from "../_types.cjs";
+
+//#region src/matrix/types.d.ts
+type MatrixLayoutOptions = DirectionOptions & AlignOptions & AdjustOptions & ItemRatioOptions & GapOptions & MatrixAxisXOptions & MatrixAxisYOptions;
+/**
+ * 横軸、要素数指定
+ */
+type MatrixAxisXWithCountOptions = {
+  itemCountX: ItemCountOptions['itemCountX'];
+  itemSizeX?: ItemSizeOptions['itemSizeX'];
+  tracksX?: never;
+};
+/**
+ * 横軸、テンプレート指定
+ */
+type MatrixAxisXWithTemplateOptions = {
+  itemCountX?: never;
+  itemSizeX?: never;
+  tracksX: TracksOptions['tracksX'];
+};
+/**
+ * 横軸用オプション
+ */
+type MatrixAxisXOptions = MatrixAxisXWithCountOptions | MatrixAxisXWithTemplateOptions;
+/**
+ * 縦軸、要素数指定
+ */
+type MatrixAxisYWithCountOptions = {
+  itemCountY: ItemCountOptions['itemCountY'];
+  itemSizeY?: ItemSizeOptions['itemSizeY'];
+  tracksY?: never;
+};
+/**
+ * 縦軸、テンプレート指定
+ */
+type MatrixAxisYWithTemplateOptions = {
+  itemCountY?: never;
+  itemSizeY?: never;
+  tracksY: TracksOptions['tracksY'];
+};
+/**
+ * 縦軸用オプション
+ */
+type MatrixAxisYOptions = MatrixAxisYWithCountOptions | MatrixAxisYWithTemplateOptions;
+//#endregion
+export { MatrixLayoutOptions };

package/matrix/types.d.mts

@@ -0,0 +1,46 @@
+import { AdjustOptions, AlignOptions, DirectionOptions, GapOptions, ItemCountOptions, ItemRatioOptions, ItemSizeOptions, TracksOptions } from "../_types.mjs";
+
+//#region src/matrix/types.d.ts
+type MatrixLayoutOptions = DirectionOptions & AlignOptions & AdjustOptions & ItemRatioOptions & GapOptions & MatrixAxisXOptions & MatrixAxisYOptions;
+/**
+ * 横軸、要素数指定
+ */
+type MatrixAxisXWithCountOptions = {
+  itemCountX: ItemCountOptions['itemCountX'];
+  itemSizeX?: ItemSizeOptions['itemSizeX'];
+  tracksX?: never;
+};
+/**
+ * 横軸、テンプレート指定
+ */
+type MatrixAxisXWithTemplateOptions = {
+  itemCountX?: never;
+  itemSizeX?: never;
+  tracksX: TracksOptions['tracksX'];
+};
+/**
+ * 横軸用オプション
+ */
+type MatrixAxisXOptions = MatrixAxisXWithCountOptions | MatrixAxisXWithTemplateOptions;
+/**
+ * 縦軸、要素数指定
+ */
+type MatrixAxisYWithCountOptions = {
+  itemCountY: ItemCountOptions['itemCountY'];
+  itemSizeY?: ItemSizeOptions['itemSizeY'];
+  tracksY?: never;
+};
+/**
+ * 縦軸、テンプレート指定
+ */
+type MatrixAxisYWithTemplateOptions = {
+  itemCountY?: never;
+  itemSizeY?: never;
+  tracksY: TracksOptions['tracksY'];
+};
+/**
+ * 縦軸用オプション
+ */
+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 { type PackLayoutOptions, pack as default };

package/pack/index.d.mts

@@ -0,0 +1,3 @@
+import { PackLayoutOptions } from "./types.mjs";
+import pack from "./pack.mjs";
+export { type 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,25 @@
+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');
+let _fringeworks_utils_object_maybeDefault = require("@fringeworks/utils/object/maybeDefault");
+_fringeworks_utils_object_maybeDefault = require_runtime.__toESM(_fringeworks_utils_object_maybeDefault, 1);
+
+//#region src/pack/pack.ts
+/**
+* packレイアウト
+*
+* - 子要素で親要素を満たす
+*/
+const pack = (options = {}) => {
+	const { direction, gap, gapX, gapY } = (0, _fringeworks_utils_object_maybeDefault.default)(options, { direction: "x" }, { overwriteNull: true });
+	const result = {
+		className: require__internal_mergeClassName(require__constants.clsLayoutPack, require__constants.clsLayout.direction[direction]),
+		style: {}
+	};
+	require__internal_applyGap(result, gap, gapX, gapY);
+	return result;
+};
+
+//#endregion
+module.exports = pack;

package/pack/pack.d.cts

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

package/pack/pack.d.mts

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

package/pack/pack.mjs

@@ -0,0 +1,23 @@
+import { clsLayout, clsLayoutPack } from "../_constants.mjs";
+import mergeClassName from "../_internal/mergeClassName.mjs";
+import applyGap from "../_internal/applyGap.mjs";
+import maybeDefault from "@fringeworks/utils/object/maybeDefault";
+
+//#region src/pack/pack.ts
+/**
+* packレイアウト
+*
+* - 子要素で親要素を満たす
+*/
+const pack = (options = {}) => {
+	const { direction, gap, gapX, gapY } = maybeDefault(options, { direction: "x" }, { overwriteNull: true });
+	const result = {
+		className: mergeClassName(clsLayoutPack, clsLayout.direction[direction]),
+		style: {}
+	};
+	applyGap(result, gap, gapX, gapY);
+	return result;
+};
+
+//#endregion
+export { pack as default };

package/pack/styles.css

@@ -0,0 +1,35 @@
+.lx-layout-pack {
+  --lx-layout-gapX: 0px;
+  --lx-layout-gapY: 0px;
+  --lx-layout-itemRatio: auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.lx-layout-pack > * {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+.lx-layout-pack.lx-layout-direction-x {
+  flex-direction: row;
+}
+.lx-layout-pack.lx-layout-direction-x > * {
+  min-width: 0;
+  min-height: 100%;
+  max-height: 100%;
+}
+.lx-layout-pack.lx-layout-direction-y {
+  flex-direction: column;
+}
+.lx-layout-pack.lx-layout-direction-y > * {
+  min-height: 0;
+  min-width: 100%;
+  max-width: 100%;
+}
+.lx-layout-pack.lx-layout-gapX {
+  column-gap: var(--lx-layout-gapX);
+}
+.lx-layout-pack.lx-layout-gapY {
+  row-gap: var(--lx-layout-gapY);
+}

package/pack/types.d.cts

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

package/pack/types.d.mts

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

package/pack/types.mjs

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

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@fringeworks/style-layouts",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.8.0",
+  "keywords": [
+    "css",
+    "style",
+    "layout"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fringeworks-js/style-layouts.git"
+  },
+  "license": "MIT",
+  "author": "Mitsuhiro Seino",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.cjs"
+    },
+    "./constants": {
+      "import": "./constants.mjs",
+      "require": "./constants.cjs"
+    },
+    "./helpers/*": {
+      "import": "./helpers/*.mjs",
+      "require": "./helpers/*.cjs"
+    },
+    "./styles.css": "./styles.css",
+    "./*.css": "./*/styles.css",
+    "./with-css": {
+      "import": "./with-css/index.mjs",
+      "require": "./with-css/index.cjs"
+    },
+    "./with-css/*": {
+      "import": "./with-css/*/index.mjs",
+      "require": "./with-css/*/index.cjs"
+    },
+    "./*": {
+      "import": "./*/index.mjs",
+      "require": "./*/index.cjs"
+    }
+  },
+  "main": "./index.cjs",
+  "module": "./index.mjs",
+  "dependencies": {
+    "@fringeworks/style-utils": "^0.8.0",
+    "@fringeworks/types": "^0.8.0",
+    "@fringeworks/utils": "^0.8.0"
+  }
+}

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 { type PinLayoutOptions, pin as default };

package/pin/index.d.mts

@@ -0,0 +1,3 @@
+import { PinLayoutOptions } from "./types.mjs";
+import pin from "./pin.mjs";
+export { type 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,23 @@
+const require__constants = require('../_constants.cjs');
+const require__internal_applyItemRatio = require('../_internal/applyItemRatio.cjs');
+const require__internal_applyItemSize = require('../_internal/applyItemSize.cjs');
+
+//#region src/pin/pin.ts
+/**
+* pinレイアウト
+*
+* - 子要素のtop,left,bottom,rightに従い配置する
+*/
+const pin = (options = {}) => {
+	const { itemSizeX, itemSizeY, itemRatioX, itemRatioY } = options;
+	const result = {
+		className: require__constants.clsLayoutPin,
+		style: {}
+	};
+	require__internal_applyItemSize(result, itemSizeX, itemSizeY);
+	require__internal_applyItemRatio(result, itemRatioX, itemRatioY);
+	return result;
+};
+
+//#endregion
+module.exports = pin;

package/pin/pin.d.cts

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

package/pin/pin.d.mts

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

package/pin/pin.mjs

@@ -0,0 +1,23 @@
+import { clsLayoutPin } from "../_constants.mjs";
+import applyItemRatio from "../_internal/applyItemRatio.mjs";
+import applyItemSize from "../_internal/applyItemSize.mjs";
+
+//#region src/pin/pin.ts
+/**
+* pinレイアウト
+*
+* - 子要素のtop,left,bottom,rightに従い配置する
+*/
+const pin = (options = {}) => {
+	const { itemSizeX, itemSizeY, itemRatioX, itemRatioY } = options;
+	const result = {
+		className: clsLayoutPin,
+		style: {}
+	};
+	applyItemSize(result, itemSizeX, itemSizeY);
+	applyItemRatio(result, itemRatioX, itemRatioY);
+	return result;
+};
+
+//#endregion
+export { pin as default };

package/pin/styles.css

@@ -0,0 +1,19 @@
+.lx-layout-pin {
+  --lx-layout-itemSizeX: auto;
+  --lx-layout-itemSizeY: auto;
+  --lx-layout-itemRatio: auto;
+  display: block;
+  position: relative;
+}
+.lx-layout-pin > * {
+  position: absolute;
+}
+.lx-layout-pin.lx-layout-itemSizeX > * {
+  width: var(--lx-layout-itemSizeX);
+}
+.lx-layout-pin.lx-layout-itemSizeY > * {
+  height: var(--lx-layout-itemSizeY);
+}
+.lx-layout-pin.lx-layout-itemRatio > * {
+  aspect-ratio: var(--lx-layout-itemRatio);
+}

package/pin/types.d.cts

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

package/pin/types.d.mts

@@ -0,0 +1,6 @@
+import { ItemRatioOptions, ItemSizeOptions } from "../_types.mjs";
+
+//#region src/pin/types.d.ts
+type PinLayoutOptions = ItemSizeOptions & ItemRatioOptions;
+//#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 { type StackLayoutOptions, stack as default };

package/stack/index.d.mts

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

package/stack/index.mjs

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