@fringeworks/style-layouts 0.0.0-stage → 0.8.0

package/_constants.cjs

@@ -0,0 +1,327 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/_constants.ts
+/**
+* レイアウト種別: stack
+*/
+const clsLayoutStack = "lx-layout-stack";
+/**
+* レイアウト種別: flow
+*/
+const clsLayoutFlow = "lx-layout-flow";
+/**
+* レイアウト種別: tile
+*/
+const clsLayoutTile = "lx-layout-tile";
+/**
+* レイアウト種別: matrix
+*/
+const clsLayoutMatrix = "lx-layout-matrix";
+/**
+* レイアウト種別: center
+*/
+const clsLayoutCenter = "lx-layout-center";
+/**
+* レイアウト種別: pack
+*/
+const clsLayoutPack = "lx-layout-pack";
+/**
+* レイアウト種別: balance
+*/
+const clsLayoutBalance = "lx-layout-balance";
+/**
+* レイアウト種別: layer
+*/
+const clsLayoutLayer = "lx-layout-layer";
+/**
+* レイアウト種別: pin
+*/
+const clsLayoutPin = "lx-layout-pin";
+/**
+* 整列: 横方向
+*/
+const clsLayoutDirectionX = "lx-layout-direction-x";
+/**
+* 整列: 縦方向
+*/
+const clsLayoutDirectionY = "lx-layout-direction-y";
+/**
+* 横位置: 左
+*/
+const clsLayoutAlignXLeft = "lx-layout-alignX-left";
+/**
+* 横位置: 中央
+*/
+const clsLayoutAlignXCenter = "lx-layout-alignX-center";
+/**
+* 横位置: 右
+*/
+const clsLayoutAlignXRight = "lx-layout-alignX-right";
+/**
+* 横位置: 両端揃え
+*/
+const clsLayoutAlignXSpaceBetween = "lx-layout-alignX-spaceBetween";
+/**
+* 横位置: 両端余白あり均等
+*/
+const clsLayoutAlignXSpaceAround = "lx-layout-alignX-spaceAround";
+/**
+* 横位置: 完全均等
+*/
+const clsLayoutAlignXSpaceEvenly = "lx-layout-alignX-spaceEvenly";
+/**
+* 縦位置: 上
+*/
+const clsLayoutAlignYTop = "lx-layout-alignY-top";
+/**
+* 縦位置: 中央
+*/
+const clsLayoutAlignYMiddle = "lx-layout-alignY-middle";
+/**
+* 縦位置: 下
+*/
+const clsLayoutAlignYBottom = "lx-layout-alignY-bottom";
+/**
+* 縦位置: 両端揃え
+*/
+const clsLayoutAlignYSpaceBetween = "lx-layout-alignY-spaceBetween";
+/**
+* 縦位置: 両端余白あり均等
+*/
+const clsLayoutAlignYSpaceAround = "lx-layout-alignY-spaceAround";
+/**
+* 縦位置: 完全均等
+*/
+const clsLayoutAlignYSpaceEvenly = "lx-layout-alignY-spaceEvenly";
+/**
+* 子要素の幅調整: なし
+*/
+const clsLayoutAdjustXNone = "lx-layout-adjustX-none";
+/**
+* 子要素の幅調整: 伸ばす & 縮める
+*/
+const clsLayoutAdjustXFit = "lx-layout-adjustX-fit";
+/**
+* 子要素の幅調整: 伸ばす
+*/
+const clsLayoutAdjustXExpand = "lx-layout-adjustX-grow";
+/**
+* 子要素の幅調整: 縮める
+*/
+const clsLayoutAdjustXShrink = "lx-layout-adjustX-shrink";
+/**
+* 子要素の高さ調整: なし
+*/
+const clsLayoutAdjustYNone = "lx-layout-adjustY-none";
+/**
+* 子要素の高さ調整: 伸ばす & 縮める
+*/
+const clsLayoutAdjustYFit = "lx-layout-adjustY-fit";
+/**
+* 子要素の高さ調整: 伸ばす
+*/
+const clsLayoutAdjustYExpand = "lx-layout-adjustY-grow";
+/**
+* 子要素の高さ調整: 縮める
+*/
+const clsLayoutAdjustYShrink = "lx-layout-adjustY-shrink";
+/**
+* 間隔: 横方向
+*/
+const clsLayoutGapX = "lx-layout-gapX";
+/**
+* 間隔: 縦方向
+*/
+const clsLayoutGapY = "lx-layout-gapY";
+/**
+* 子要素の幅
+*/
+const clsLayoutItemSizeX = "lx-layout-itemSizeX";
+/**
+* 子要素の高さ
+*/
+const clsLayoutItemSizeY = "lx-layout-itemSizeY";
+/**
+* 子要素の縦横比
+*/
+const clsLayoutItemRatio = "lx-layout-itemRatio";
+/**
+* 子要素の横方向の数
+*/
+const clsLayoutItemCountX = "lx-layout-itemCountX";
+/**
+* 子要素の縦方向の数
+*/
+const clsLayoutItemCountY = "lx-layout-itemCountY";
+/**
+* 横方向のテンプレート
+*/
+const clsLayoutTemplateX = "lx-layout-templateX";
+/**
+* 縦方向のテンプレート
+*/
+const clsLayoutTemplateY = "lx-layout-templateY";
+/**
+* 変数\
+* 間隔: 横方向
+*/
+const varLayoutGapX = "--lx-layout-gapX";
+/**
+* 変数\
+* 間隔: 縦方向
+*/
+const varLayoutGapY = "--lx-layout-gapY";
+/**
+* 変数\
+* 子要素の幅
+*/
+const varLayoutItemSizeX = "--lx-layout-itemSizeX";
+/**
+* 変数\
+* 子要素の高さ
+*/
+const varLayoutItemSizeY = "--lx-layout-itemSizeY";
+/**
+* 変数\
+* 子要素の縦横比
+*/
+const varLayoutItemRatio = "--lx-layout-itemRatio";
+/**
+* 変数\
+* 子要素の横方向の数
+*/
+const varLayoutItemCountX = "--lx-layout-itemCountX";
+/**
+* 変数\
+* 子要素の縦方向の数
+*/
+const varLayoutItemCountY = "--lx-layout-itemCountY";
+/**
+* 変数\
+* 横方向のテンプレート
+*/
+const varLayoutTemplateX = "--lx-layout-templateX";
+/**
+* 変数\
+* 縦方向のテンプレート
+*/
+const varLayoutTemplateY = "--lx-layout-templateY";
+/**
+* axis毎のクラス
+*/
+const clsLayout = {
+	direction: {
+		x: clsLayoutDirectionX,
+		y: clsLayoutDirectionY
+	},
+	align: {
+		x: {
+			left: clsLayoutAlignXLeft,
+			center: clsLayoutAlignXCenter,
+			right: clsLayoutAlignXRight,
+			"space-between": clsLayoutAlignXSpaceBetween,
+			"space-around": clsLayoutAlignXSpaceAround,
+			"space-evenly": clsLayoutAlignXSpaceEvenly
+		},
+		y: {
+			top: clsLayoutAlignYTop,
+			middle: clsLayoutAlignYMiddle,
+			bottom: clsLayoutAlignYBottom,
+			"space-between": clsLayoutAlignYSpaceBetween,
+			"space-around": clsLayoutAlignYSpaceAround,
+			"space-evenly": clsLayoutAlignYSpaceEvenly
+		}
+	},
+	adjust: {
+		x: {
+			none: clsLayoutAdjustXNone,
+			fit: clsLayoutAdjustXFit,
+			grow: clsLayoutAdjustXExpand,
+			shrink: clsLayoutAdjustXShrink
+		},
+		y: {
+			none: clsLayoutAdjustYNone,
+			fit: clsLayoutAdjustYFit,
+			grow: clsLayoutAdjustYExpand,
+			shrink: clsLayoutAdjustYShrink
+		}
+	},
+	itemSize: {
+		x: clsLayoutItemSizeX,
+		y: clsLayoutItemSizeY
+	},
+	template: {
+		x: clsLayoutTemplateX,
+		y: clsLayoutTemplateY
+	}
+};
+/**
+* axis毎の変数
+*/
+const varLayout = {
+	itemSize: {
+		x: varLayoutItemSizeX,
+		y: varLayoutItemSizeY
+	},
+	template: {
+		x: varLayoutTemplateX,
+		y: varLayoutTemplateY
+	},
+	gap: {
+		x: varLayoutGapX,
+		y: varLayoutGapY
+	}
+};
+
+//#endregion
+exports.clsLayout = clsLayout;
+exports.clsLayoutAdjustXExpand = clsLayoutAdjustXExpand;
+exports.clsLayoutAdjustXFit = clsLayoutAdjustXFit;
+exports.clsLayoutAdjustXNone = clsLayoutAdjustXNone;
+exports.clsLayoutAdjustXShrink = clsLayoutAdjustXShrink;
+exports.clsLayoutAdjustYExpand = clsLayoutAdjustYExpand;
+exports.clsLayoutAdjustYFit = clsLayoutAdjustYFit;
+exports.clsLayoutAdjustYNone = clsLayoutAdjustYNone;
+exports.clsLayoutAdjustYShrink = clsLayoutAdjustYShrink;
+exports.clsLayoutAlignXCenter = clsLayoutAlignXCenter;
+exports.clsLayoutAlignXLeft = clsLayoutAlignXLeft;
+exports.clsLayoutAlignXRight = clsLayoutAlignXRight;
+exports.clsLayoutAlignXSpaceAround = clsLayoutAlignXSpaceAround;
+exports.clsLayoutAlignXSpaceBetween = clsLayoutAlignXSpaceBetween;
+exports.clsLayoutAlignXSpaceEvenly = clsLayoutAlignXSpaceEvenly;
+exports.clsLayoutAlignYBottom = clsLayoutAlignYBottom;
+exports.clsLayoutAlignYMiddle = clsLayoutAlignYMiddle;
+exports.clsLayoutAlignYSpaceAround = clsLayoutAlignYSpaceAround;
+exports.clsLayoutAlignYSpaceBetween = clsLayoutAlignYSpaceBetween;
+exports.clsLayoutAlignYSpaceEvenly = clsLayoutAlignYSpaceEvenly;
+exports.clsLayoutAlignYTop = clsLayoutAlignYTop;
+exports.clsLayoutBalance = clsLayoutBalance;
+exports.clsLayoutCenter = clsLayoutCenter;
+exports.clsLayoutDirectionX = clsLayoutDirectionX;
+exports.clsLayoutDirectionY = clsLayoutDirectionY;
+exports.clsLayoutFlow = clsLayoutFlow;
+exports.clsLayoutGapX = clsLayoutGapX;
+exports.clsLayoutGapY = clsLayoutGapY;
+exports.clsLayoutItemCountX = clsLayoutItemCountX;
+exports.clsLayoutItemCountY = clsLayoutItemCountY;
+exports.clsLayoutItemRatio = clsLayoutItemRatio;
+exports.clsLayoutItemSizeX = clsLayoutItemSizeX;
+exports.clsLayoutItemSizeY = clsLayoutItemSizeY;
+exports.clsLayoutLayer = clsLayoutLayer;
+exports.clsLayoutMatrix = clsLayoutMatrix;
+exports.clsLayoutPack = clsLayoutPack;
+exports.clsLayoutPin = clsLayoutPin;
+exports.clsLayoutStack = clsLayoutStack;
+exports.clsLayoutTemplateX = clsLayoutTemplateX;
+exports.clsLayoutTemplateY = clsLayoutTemplateY;
+exports.clsLayoutTile = clsLayoutTile;
+exports.varLayout = varLayout;
+exports.varLayoutGapX = varLayoutGapX;
+exports.varLayoutGapY = varLayoutGapY;
+exports.varLayoutItemCountX = varLayoutItemCountX;
+exports.varLayoutItemCountY = varLayoutItemCountY;
+exports.varLayoutItemRatio = varLayoutItemRatio;
+exports.varLayoutItemSizeX = varLayoutItemSizeX;
+exports.varLayoutItemSizeY = varLayoutItemSizeY;
+exports.varLayoutTemplateX = varLayoutTemplateX;
+exports.varLayoutTemplateY = varLayoutTemplateY;

package/_constants.d.cts

@@ -0,0 +1,237 @@
+import { Adjust, AlignX, AlignY, Direction } from "./constants.cjs";
+
+//#region src/_constants.d.ts
+/**
+ * レイアウト種別: stack
+ */
+declare const clsLayoutStack = "lx-layout-stack";
+/**
+ * レイアウト種別: flow
+ */
+declare const clsLayoutFlow = "lx-layout-flow";
+/**
+ * レイアウト種別: tile
+ */
+declare const clsLayoutTile = "lx-layout-tile";
+/**
+ * レイアウト種別: matrix
+ */
+declare const clsLayoutMatrix = "lx-layout-matrix";
+/**
+ * レイアウト種別: center
+ */
+declare const clsLayoutCenter = "lx-layout-center";
+/**
+ * レイアウト種別: pack
+ */
+declare const clsLayoutPack = "lx-layout-pack";
+/**
+ * レイアウト種別: balance
+ */
+declare const clsLayoutBalance = "lx-layout-balance";
+/**
+ * レイアウト種別: layer
+ */
+declare const clsLayoutLayer = "lx-layout-layer";
+/**
+ * レイアウト種別: pin
+ */
+declare const clsLayoutPin = "lx-layout-pin";
+/**
+ * 整列: 横方向
+ */
+declare const clsLayoutDirectionX = "lx-layout-direction-x";
+/**
+ * 整列: 縦方向
+ */
+declare const clsLayoutDirectionY = "lx-layout-direction-y";
+/**
+ * 横位置: 左
+ */
+declare const clsLayoutAlignXLeft = "lx-layout-alignX-left";
+/**
+ * 横位置: 中央
+ */
+declare const clsLayoutAlignXCenter = "lx-layout-alignX-center";
+/**
+ * 横位置: 右
+ */
+declare const clsLayoutAlignXRight = "lx-layout-alignX-right";
+/**
+ * 横位置: 両端揃え
+ */
+declare const clsLayoutAlignXSpaceBetween = "lx-layout-alignX-spaceBetween";
+/**
+ * 横位置: 両端余白あり均等
+ */
+declare const clsLayoutAlignXSpaceAround = "lx-layout-alignX-spaceAround";
+/**
+ * 横位置: 完全均等
+ */
+declare const clsLayoutAlignXSpaceEvenly = "lx-layout-alignX-spaceEvenly";
+/**
+ * 縦位置: 上
+ */
+declare const clsLayoutAlignYTop = "lx-layout-alignY-top";
+/**
+ * 縦位置: 中央
+ */
+declare const clsLayoutAlignYMiddle = "lx-layout-alignY-middle";
+/**
+ * 縦位置: 下
+ */
+declare const clsLayoutAlignYBottom = "lx-layout-alignY-bottom";
+/**
+ * 縦位置: 両端揃え
+ */
+declare const clsLayoutAlignYSpaceBetween = "lx-layout-alignY-spaceBetween";
+/**
+ * 縦位置: 両端余白あり均等
+ */
+declare const clsLayoutAlignYSpaceAround = "lx-layout-alignY-spaceAround";
+/**
+ * 縦位置: 完全均等
+ */
+declare const clsLayoutAlignYSpaceEvenly = "lx-layout-alignY-spaceEvenly";
+/**
+ * 子要素の幅調整: なし
+ */
+declare const clsLayoutAdjustXNone = "lx-layout-adjustX-none";
+/**
+ * 子要素の幅調整: 伸ばす & 縮める
+ */
+declare const clsLayoutAdjustXFit = "lx-layout-adjustX-fit";
+/**
+ * 子要素の幅調整: 伸ばす
+ */
+declare const clsLayoutAdjustXExpand = "lx-layout-adjustX-grow";
+/**
+ * 子要素の幅調整: 縮める
+ */
+declare const clsLayoutAdjustXShrink = "lx-layout-adjustX-shrink";
+/**
+ * 子要素の高さ調整: なし
+ */
+declare const clsLayoutAdjustYNone = "lx-layout-adjustY-none";
+/**
+ * 子要素の高さ調整: 伸ばす & 縮める
+ */
+declare const clsLayoutAdjustYFit = "lx-layout-adjustY-fit";
+/**
+ * 子要素の高さ調整: 伸ばす
+ */
+declare const clsLayoutAdjustYExpand = "lx-layout-adjustY-grow";
+/**
+ * 子要素の高さ調整: 縮める
+ */
+declare const clsLayoutAdjustYShrink = "lx-layout-adjustY-shrink";
+/**
+ * 間隔: 横方向
+ */
+declare const clsLayoutGapX = "lx-layout-gapX";
+/**
+ * 間隔: 縦方向
+ */
+declare const clsLayoutGapY = "lx-layout-gapY";
+/**
+ * 子要素の幅
+ */
+declare const clsLayoutItemSizeX = "lx-layout-itemSizeX";
+/**
+ * 子要素の高さ
+ */
+declare const clsLayoutItemSizeY = "lx-layout-itemSizeY";
+/**
+ * 子要素の縦横比
+ */
+declare const clsLayoutItemRatio = "lx-layout-itemRatio";
+/**
+ * 子要素の横方向の数
+ */
+declare const clsLayoutItemCountX = "lx-layout-itemCountX";
+/**
+ * 子要素の縦方向の数
+ */
+declare const clsLayoutItemCountY = "lx-layout-itemCountY";
+/**
+ * 横方向のテンプレート
+ */
+declare const clsLayoutTemplateX = "lx-layout-templateX";
+/**
+ * 縦方向のテンプレート
+ */
+declare const clsLayoutTemplateY = "lx-layout-templateY";
+/**
+ * 変数\
+ * 間隔: 横方向
+ */
+declare const varLayoutGapX = "--lx-layout-gapX";
+/**
+ * 変数\
+ * 間隔: 縦方向
+ */
+declare const varLayoutGapY = "--lx-layout-gapY";
+/**
+ * 変数\
+ * 子要素の幅
+ */
+declare const varLayoutItemSizeX = "--lx-layout-itemSizeX";
+/**
+ * 変数\
+ * 子要素の高さ
+ */
+declare const varLayoutItemSizeY = "--lx-layout-itemSizeY";
+/**
+ * 変数\
+ * 子要素の縦横比
+ */
+declare const varLayoutItemRatio = "--lx-layout-itemRatio";
+/**
+ * 変数\
+ * 子要素の横方向の数
+ */
+declare const varLayoutItemCountX = "--lx-layout-itemCountX";
+/**
+ * 変数\
+ * 子要素の縦方向の数
+ */
+declare const varLayoutItemCountY = "--lx-layout-itemCountY";
+/**
+ * 変数\
+ * 横方向のテンプレート
+ */
+declare const varLayoutTemplateX = "--lx-layout-templateX";
+/**
+ * 変数\
+ * 縦方向のテンプレート
+ */
+declare const varLayoutTemplateY = "--lx-layout-templateY";
+/**
+ * axis毎のクラス
+ */
+declare const clsLayout: {
+  direction: Record<Direction, string>;
+  align: Record<Direction, Partial<Record<AlignX | AlignY, string>>>;
+  adjust: Record<Direction, Record<Adjust, string>>;
+  itemSize: Record<Direction, string>;
+  template: Record<Direction, string>;
+};
+/**
+ * axis毎の変数
+ */
+declare const varLayout: {
+  readonly itemSize: {
+    readonly x: "--lx-layout-itemSizeX";
+    readonly y: "--lx-layout-itemSizeY";
+  };
+  readonly template: {
+    readonly x: "--lx-layout-templateX";
+    readonly y: "--lx-layout-templateY";
+  };
+  readonly gap: {
+    readonly x: "--lx-layout-gapX";
+    readonly y: "--lx-layout-gapY";
+  };
+};
+//#endregion
+export { clsLayout, clsLayoutAdjustXExpand, clsLayoutAdjustXFit, clsLayoutAdjustXNone, clsLayoutAdjustXShrink, clsLayoutAdjustYExpand, clsLayoutAdjustYFit, clsLayoutAdjustYNone, clsLayoutAdjustYShrink, clsLayoutAlignXCenter, clsLayoutAlignXLeft, clsLayoutAlignXRight, clsLayoutAlignXSpaceAround, clsLayoutAlignXSpaceBetween, clsLayoutAlignXSpaceEvenly, clsLayoutAlignYBottom, clsLayoutAlignYMiddle, clsLayoutAlignYSpaceAround, clsLayoutAlignYSpaceBetween, clsLayoutAlignYSpaceEvenly, clsLayoutAlignYTop, clsLayoutBalance, clsLayoutCenter, clsLayoutDirectionX, clsLayoutDirectionY, clsLayoutFlow, clsLayoutGapX, clsLayoutGapY, clsLayoutItemCountX, clsLayoutItemCountY, clsLayoutItemRatio, clsLayoutItemSizeX, clsLayoutItemSizeY, clsLayoutLayer, clsLayoutMatrix, clsLayoutPack, clsLayoutPin, clsLayoutStack, clsLayoutTemplateX, clsLayoutTemplateY, clsLayoutTile, varLayout, varLayoutGapX, varLayoutGapY, varLayoutItemCountX, varLayoutItemCountY, varLayoutItemRatio, varLayoutItemSizeX, varLayoutItemSizeY, varLayoutTemplateX, varLayoutTemplateY };