@burger-editor/blocks 4.0.0-alpha.53 → 4.0.0-alpha.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -0
- package/dist/index.js +13 -13
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -77,6 +77,27 @@ const wysiwygItem = items.wysiwyg;
|
|
|
77
77
|
const catalog = defaultCatalog;
|
|
78
78
|
```
|
|
79
79
|
|
|
80
|
+
## スタイルシート
|
|
81
|
+
|
|
82
|
+
このパッケージは以下のCSSファイルを提供します：
|
|
83
|
+
|
|
84
|
+
### general.css
|
|
85
|
+
|
|
86
|
+
ブロック全体の基本スタイルを定義します。以下の機能を含みます：
|
|
87
|
+
|
|
88
|
+
- **ブロックコンテナ**: `[data-bge-container]` - レイアウト、余白、背景色などの基本スタイル
|
|
89
|
+
- **グリッドレイアウト**: `grid` - 自動フィット/フィル対応の柔軟なグリッドシステム
|
|
90
|
+
- **インラインレイアウト**: `inline` - フレックスボックスベースの横並びレイアウト
|
|
91
|
+
- **フロートレイアウト**: `float` - テキスト回り込みレイアウト
|
|
92
|
+
- **Wysiwyg内フレックスボックス**: `[data-bgc-flex-box]` - リッチテキスト内での横並びレイアウト
|
|
93
|
+
- **Wysiwyg内段落整列**: `[data-bgc-align]` - テキストの左寄せ/中央寄せ/右寄せ
|
|
94
|
+
|
|
95
|
+
### 各アイテムのスタイル
|
|
96
|
+
|
|
97
|
+
各アイテムは個別の`style.css`ファイルを持ち、アイテム固有のスタイルを定義します。
|
|
98
|
+
|
|
99
|
+
> **ℹ️ 統合CSSパッケージ**: すべてのスタイルを1つのファイルで利用したい場合は、[@burger-editor/css](../css/)パッケージを使用してください。
|
|
100
|
+
|
|
80
101
|
## カスタムアイテムの作成
|
|
81
102
|
|
|
82
103
|
独自のアイテムを作成する場合は、[@burger-editor/core](../core/README.md)の`createItem`関数を使用します。
|
package/dist/index.js
CHANGED
|
@@ -9,7 +9,7 @@ var style$b = "/* No Styling */\n";
|
|
|
9
9
|
var template$b = "<a href=\"\" data-kind=\"primary\" data-before-icon=\"none\" data-after-icon=\"none\" data-bge=\"link:href, target:target, kind:data-kind, before-icon:data-before-icon, after-icon:data-after-icon\">\n\t<div>\n\t\t<span data-bge=\"text\">ボタン</span>\n\t\t<span data-bge=\"subtext\">サブテキスト</span>\n\t</div>\n</a>\n";
|
|
10
10
|
|
|
11
11
|
var button = createItem({
|
|
12
|
-
version: "4.0.0-alpha.
|
|
12
|
+
version: "4.0.0-alpha.54",
|
|
13
13
|
name: "button",
|
|
14
14
|
template: template$b,
|
|
15
15
|
style: style$b,
|
|
@@ -65,7 +65,7 @@ var style$a = "/* No Styling */\n";
|
|
|
65
65
|
var template$a = "<details data-bge=\"open:open\">\n\t<summary data-bge=\"summary\">折りたたみコンテンツ</summary>\n\t<div data-bge=\"content\"><p>内容を入力してください</p></div>\n</details>\n";
|
|
66
66
|
|
|
67
67
|
var details = createItem({
|
|
68
|
-
version: "4.0.0-alpha.
|
|
68
|
+
version: "4.0.0-alpha.54",
|
|
69
69
|
name: "details",
|
|
70
70
|
template: template$a,
|
|
71
71
|
style: style$a,
|
|
@@ -79,7 +79,7 @@ var style$9 = "[data-bgi='download-file'] {\n\t[data-bge*='size'] {\n\t\t&::befo
|
|
|
79
79
|
var template$9 = "<a href=\"./files/bgeditor/bg-sample.pdf\" target=\"_blank\" data-bge=\"path:href, download:download\">\n\t<div>\n\t\t<span data-bge=\"name\">サンプルダウンロードファイル</span>\n\t\t<span data-bge=\"formated-size, size:data-size\" data-size=\"138158\">134.92kB</span>\n\t</div>\n</a>\n";
|
|
80
80
|
|
|
81
81
|
var downloadFile = createItem({
|
|
82
|
-
version: "4.0.0-alpha.
|
|
82
|
+
version: "4.0.0-alpha.54",
|
|
83
83
|
name: "download-file",
|
|
84
84
|
template: template$9,
|
|
85
85
|
style: style$9,
|
|
@@ -118,7 +118,7 @@ var style$8 = "[data-bgi='google-maps'] {\n\tdiv {\n\t\tinline-size: 100%;\n\t\t
|
|
|
118
118
|
var template$8 = "<div data-lat=\"35.681382\" data-lng=\"139.766084\" data-zoom=\"16\" data-bge=\"lat:data-lat, lng:data-lng, zoom:data-zoom\">\n\t<img data-bge=\"img:src\" src=\"https://maps.google.com/maps/api/staticmap?center=35.681382,139.766084&zoom=16&size=640x400&markers=color:red|color:red|35.681382,139.766084&scale=2&key=%googleMapsApiKey%\" width=\"8\" height=\"5\" alt=\"Google Maps\" />\n</div>\n<a href=\"https://maps.apple.com/?q=35.681382,139.766084\" data-bge=\"url:href\" target=\"_blank\"><span>アプリで開く</span></a>\n";
|
|
119
119
|
|
|
120
120
|
var googleMaps = createItem({
|
|
121
|
-
version: "4.0.0-alpha.
|
|
121
|
+
version: "4.0.0-alpha.54",
|
|
122
122
|
name: "google-maps",
|
|
123
123
|
template: template$8,
|
|
124
124
|
style: style$8,
|
|
@@ -253,7 +253,7 @@ var style$7 = "[data-bgi='hr'] {\n\t--inline-size: 100%;\n\t--border-color: #000
|
|
|
253
253
|
var template$7 = "<div data-bgi-hr-kind=\"primary\" data-bge=\"kind:data-bgi-hr-kind\">\n\t<hr />\n</div>\n";
|
|
254
254
|
|
|
255
255
|
var hr = createItem({
|
|
256
|
-
version: "4.0.0-alpha.
|
|
256
|
+
version: "4.0.0-alpha.54",
|
|
257
257
|
name: "hr",
|
|
258
258
|
template: template$7,
|
|
259
259
|
style: style$7,
|
|
@@ -343,7 +343,7 @@ function createWidthState() {
|
|
|
343
343
|
|
|
344
344
|
const ORIGIN = "__org";
|
|
345
345
|
var image = createItem({
|
|
346
|
-
version: "4.0.0-alpha.
|
|
346
|
+
version: "4.0.0-alpha.54",
|
|
347
347
|
name: "image",
|
|
348
348
|
template: template$6,
|
|
349
349
|
style: style$6,
|
|
@@ -541,7 +541,7 @@ var style$5 = "[data-bgi='import'] {\n\tbge-import {\n\t\t&::before {\n\t\t\tfon
|
|
|
541
541
|
var template$5 = "<bge-import data-bge=\":src\" src=\"\"></bge-import>\n";
|
|
542
542
|
|
|
543
543
|
var importItem = createItem({
|
|
544
|
-
version: "4.0.0-alpha.
|
|
544
|
+
version: "4.0.0-alpha.54",
|
|
545
545
|
name: "import",
|
|
546
546
|
template: template$5,
|
|
547
547
|
style: style$5,
|
|
@@ -555,7 +555,7 @@ var style$4 = "/* No Styling */\n";
|
|
|
555
555
|
var template$4 = "<div data-bge=\":scrollable\" data-bge-scrollable=\"false\">\n\t<table>\n\t\t<caption data-bge=\"caption\">\n\t\t\tキャプションを入力してください\n\t\t</caption>\n\t\t<tbody data-bge-list>\n\t\t\t<tr>\n\t\t\t\t<th data-bge=\"th\">表組の見出し</th>\n\t\t\t\t<td data-bge=\"td\">表組の内容を入力してください</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>\n";
|
|
556
556
|
|
|
557
557
|
var table = createItem({
|
|
558
|
-
version: "4.0.0-alpha.
|
|
558
|
+
version: "4.0.0-alpha.54",
|
|
559
559
|
name: "table",
|
|
560
560
|
template: template$4,
|
|
561
561
|
style: style$4,
|
|
@@ -583,7 +583,7 @@ var style$3 = "/* No Styling */\n";
|
|
|
583
583
|
var template$3 = "<h2 data-bge=\"title-h2\">見出しを入力してください</h2>\n";
|
|
584
584
|
|
|
585
585
|
var titleH2 = createItem({
|
|
586
|
-
version: "4.0.0-alpha.
|
|
586
|
+
version: "4.0.0-alpha.54",
|
|
587
587
|
name: "title-h2",
|
|
588
588
|
template: template$3,
|
|
589
589
|
style: style$3,
|
|
@@ -597,7 +597,7 @@ var style$2 = "/* No Styling */\n";
|
|
|
597
597
|
var template$2 = "<h3 data-bge=\"title-h3\">見出しを入力してください</h3>\n";
|
|
598
598
|
|
|
599
599
|
var titleH3 = createItem({
|
|
600
|
-
version: "4.0.0-alpha.
|
|
600
|
+
version: "4.0.0-alpha.54",
|
|
601
601
|
name: "title-h3",
|
|
602
602
|
template: template$2,
|
|
603
603
|
style: style$2,
|
|
@@ -611,7 +611,7 @@ var style$1 = "/* No Styling */\n";
|
|
|
611
611
|
var template$1 = "<div data-bge=\"wysiwyg\"><p>本文を入力してください</p></div>\n";
|
|
612
612
|
|
|
613
613
|
var wysiwyg = createItem({
|
|
614
|
-
version: "4.0.0-alpha.
|
|
614
|
+
version: "4.0.0-alpha.54",
|
|
615
615
|
name: "wysiwyg",
|
|
616
616
|
template: template$1,
|
|
617
617
|
style: style$1,
|
|
@@ -626,7 +626,7 @@ var template = "<div data-id=\"3KtWfp0UopM\" data-title=\"YouTube動画\" data-w
|
|
|
626
626
|
|
|
627
627
|
const FALLBACK_TITLE = "YouTube\u52D5\u753B";
|
|
628
628
|
var youtube = createItem({
|
|
629
|
-
version: "4.0.0-alpha.
|
|
629
|
+
version: "4.0.0-alpha.54",
|
|
630
630
|
name: "youtube",
|
|
631
631
|
template,
|
|
632
632
|
style,
|
|
@@ -1612,6 +1612,6 @@ const legacyCatalog = {
|
|
|
1612
1612
|
]
|
|
1613
1613
|
};
|
|
1614
1614
|
|
|
1615
|
-
var general = "[data-bge-container] {\n\t--bge-auto-repeat-base-width: calc(800 / 16 * 1rem);\n\n\t/* Custom max-width */\n\t--bge-options-max-width--normal: calc(800 / 16 * 1rem);\n\t--bge-options-max-width--small: calc(400 / 16 * 1rem);\n\t--bge-options-max-width--large: calc(1200 / 16 * 1rem);\n\t--bge-options-max-width--full: 100dvi;\n\t--bge-options-max-width: var(--bge-options-max-width--normal);\n\n\t/* Custom margin */\n\t--bge-options-margin--normal: 3rem;\n\t--bge-options-margin--none: 0;\n\t--bge-options-margin--small: 1rem;\n\t--bge-options-margin--large: 8rem;\n\t--bge-options-margin: var(--bge-options-margin--normal);\n\n\t/* Custom background color */\n\t--bge-options-bg-color--transparent: transparent;\n\t--bge-options-bg-color--white: #fff;\n\t--bge-options-bg-color--gray: #dfdfdf;\n\t--bge-options-bg-color--blue: #eaf3f8;\n\t--bge-options-bg-color--red: #fcc;\n\t--bge-options-bg-color: var(--bge-options-bg-color--transparent);\n\n\t/* Custom padding-block */\n\t--bge-options-padding-block--none: 0;\n\t--bge-options-padding-block--small: 1rem;\n\t--bge-options-padding-block--medium: 3rem;\n\t--bge-options-padding-block--large: 5rem;\n\t--bge-options-padding-block: var(--bge-options-padding-block--none);\n\n\t/* Custom padding-inline */\n\t--bge-options-padding-inline--default-gutter: 2rem;\n\t--bge-options-padding-inline--none: 0;\n\t--bge-options-padding-inline--small: 1rem;\n\t--bge-options-padding-inline--medium: 3rem;\n\t--bge-options-padding-inline--large: 5rem;\n\t--bge-options-padding-inline: var(--bge-options-padding-inline--default-gutter);\n\n\t/* Custom column gap */\n\t--bge-options-column-gap--normal: 1rem;\n\t--bge-options-column-gap--none: 0;\n\t--bge-options-column-gap--small: 0.5rem;\n\t--bge-options-column-gap--large: 5rem;\n\t--bge-options-column-gap: var(--bge-options-column-gap--normal);\n\n\t/* Custom row gap */\n\t--bge-options-row-gap--normal: 1rem;\n\t--bge-options-row-gap--none: 0;\n\t--bge-options-row-gap--small: 0.5rem;\n\t--bge-options-row-gap--large: 5rem;\n\t--bge-options-row-gap: var(--bge-options-row-gap--normal);\n\n\t/* Custom subgrid gap factor (grid type only) */\n\t--bge-options-_grid_subgrid-gap--normal: 1rem;\n\t--bge-options-_grid_subgrid-gap--none: 0;\n\t--bge-options-_grid_subgrid-gap--small: 0.5rem;\n\t--bge-options-_grid_subgrid-gap--large: 1rem;\n\t--bge-options-_grid_subgrid-gap: var(--bge-options-_grid_subgrid-gap--normal);\n}\n\n:where([data-bge-container]) {\n\t--_margin-block-end: var(--bge-options-margin);\n\t--_margin-block-end_when-last: 0;\n\tinline-size: 100%;\n\tmax-inline-size: var(--bge-options-max-width);\n\tpadding-block: var(--bge-options-padding-block);\n\tpadding-inline: var(--bge-options-padding-inline);\n\tmargin-block-end: var(--_margin-block-end);\n\tmargin-inline: auto;\n\tcontainer-name: bge-container;\n\tcontainer-type: inline-size;\n\tbackground-color: var(--bge-options-bg-color);\n\n\t&:where(:last-child) {\n\t\t--_margin-block-end: var(--_margin-block-end_when-last);\n\t}\n}\n\n:where([data-bge-container-frame]) {\n\tinline-size: 100%;\n\n\t/* Reset list styles for semantic container frames */\n\t&:is(ul, ol) {\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tlist-style: none;\n\t}\n}\n\n:where([data-bge-container='grid'], [data-bge-container^='grid:']) {\n\t--_gap-block: var(--bge-options-row-gap, var(--bge-options-gap));\n\t--_gap-inline: var(--bge-options-column-gap, var(--bge-options-gap));\n\t--_subgrid-gap: var(--bge-options-_grid_subgrid-gap, var(--_gap-block));\n\n\t&:where([data-bge-container$=':2'], [data-bge-container*=':2:'])\n\t\t:where([data-bge-container-frame]) {\n\t\t--bge-grid-col: 2;\n\t}\n\n\t&:where([data-bge-container$=':3'], [data-bge-container*=':3:'])\n\t\t:where([data-bge-container-frame]) {\n\t\t--bge-grid-col: 3;\n\t}\n\n\t&:where([data-bge-container$=':4'], [data-bge-container*=':4:'])\n\t\t:where([data-bge-container-frame]) {\n\t\t--bge-grid-col: 4;\n\t}\n\n\t&:where([data-bge-container$=':5'], [data-bge-container*=':5:'])\n\t\t:where([data-bge-container-frame]) {\n\t\t--bge-grid-col: 5;\n\t}\n\n\t:where([data-bge-container-frame]) {\n\t\t--_grid-col: var(--bge-grid-col, 1);\n\t\t--_repeat-base-width: calc(var(--bge-auto-repeat-base-width) / var(--_grid-col));\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(var(--_grid-col), minmax(0, 1fr));\n\t\tgap: var(--_gap-block) var(--_gap-inline);\n\n\t\t&:is([data-bge-container*=':auto-fit:'] *) {\n\t\t\tgrid-template-columns: repeat(\n\t\t\t\tauto-fit,\n\t\t\t\tminmax(min(100%, var(--_repeat-base-width)), 1fr)\n\t\t\t);\n\t\t}\n\n\t\t&:is([data-bge-container*=':auto-fill:'] *) {\n\t\t\tgrid-template-columns: repeat(\n\t\t\t\tauto-fill,\n\t\t\t\tminmax(min(100%, var(--_repeat-base-width)), 1fr)\n\t\t\t);\n\t\t}\n\t}\n\n\t:where([data-bge-group]) {\n\t\t--item-count: 1;\n\t\tdisplay: grid;\n\t\tgrid-template-rows: subgrid;\n\t\tgrid-row: span var(--item-count);\n\t\tgap: var(--_subgrid-gap) 0;\n\n\t\t/* Reset list styles for semantic groups */\n\t\t&:is(li) {\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t/* Subgrid hack 2 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(2):last-child) {\n\t\t\t--item-count: 2;\n\t\t}\n\n\t\t/* Subgrid hack 3 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(3):last-child) {\n\t\t\t--item-count: 3;\n\t\t}\n\n\t\t/* Subgrid hack 4 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(4):last-child) {\n\t\t\t--item-count: 4;\n\t\t}\n\n\t\t/* Subgrid hack 5 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(5):last-child) {\n\t\t\t--item-count: 5;\n\t\t}\n\n\t\t/* Subgrid hack 6 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(6):last-child) {\n\t\t\t--item-count: 6;\n\t\t}\n\n\t\t/* Subgrid hack 7 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(7):last-child) {\n\t\t\t--item-count: 7;\n\t\t}\n\n\t\t/* Subgrid hack 8 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(8):last-child) {\n\t\t\t--item-count: 8;\n\t\t}\n\t}\n\n\t:where([data-bge-item]) {\n\t\tdisplay: flex;\n\t\talign-items: stretch;\n\t\talign-self: stretch;\n\t\tjustify-content: start;\n\t\tcontainer-name: bge-item;\n\t\tcontainer-type: inline-size;\n\n\t\t> * {\n\t\t\tflex: 0 0 100%;\n\t\t}\n\t}\n}\n\n:where([data-bge-container='inline'], [data-bge-container^='inline:']) {\n\t--_gap-block: var(--bge-options-row-gap, var(--bge-options-gap));\n\t--_gap-inline: var(--bge-options-column-gap, var(--bge-options-gap));\n\n\t:where([data-bge-container-frame]) {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: var(--_gap-block) var(--_gap-inline);\n\t\talign-items: stretch;\n\t\tjustify-content: center;\n\n\t\t&:where(:is([data-bge-container$=':center'], [data-bge-container*=':center:']) *) {\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':start'], [data-bge-container*=':start:']) *) {\n\t\t\tjustify-content: start;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':end'], [data-bge-container*=':end:']) *) {\n\t\t\tjustify-content: end;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':between'], [data-bge-container*=':between:']) *) {\n\t\t\tjustify-content: space-between;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':around'], [data-bge-container*=':around:']) *) {\n\t\t\tjustify-content: space-around;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':evenly'], [data-bge-container*=':evenly:']) *) {\n\t\t\tjustify-content: space-evenly;\n\t\t}\n\n\t\t&:where(\n\t\t\t:is([data-bge-container$=':align-center'], [data-bge-container*=':align-center:']) *\n\t\t) {\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&:where(\n\t\t\t:is([data-bge-container$=':align-start'], [data-bge-container*=':align-start:']) *\n\t\t) {\n\t\t\talign-items: start;\n\t\t}\n\n\t\t&:where(\n\t\t\t:is([data-bge-container$=':align-end'], [data-bge-container*=':align-end:']) *\n\t\t) {\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&:where(\n\t\t\t:is([data-bge-container$=':align-stretch'], [data-bge-container*=':align-stretch:'])\n\t\t\t\t*\n\t\t) {\n\t\t\talign-items: stretch;\n\t\t}\n\n\t\t&:where(\n\t\t\t:is(\n\t\t\t\t\t[data-bge-container$=':align-baseline'],\n\t\t\t\t\t[data-bge-container*=':align-baseline:']\n\t\t\t\t)\n\t\t\t\t*\n\t\t) {\n\t\t\t--align: baseline;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':wrap'], [data-bge-container*=':wrap:']) *) {\n\t\t\tflex-wrap: wrap;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':nowrap'], [data-bge-container*=':nowrap:']) *) {\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t}\n\n\t&:where([data-bge-container$=':immutable'], [data-bge-container*=':immutable:']) {\n\t\t/* Left-right split box with resizable item (has `[data-bge-scale]`) on one side */\n\t\t&:has([data-bge-group]:nth-child(2):last-child) {\n\t\t\t:where([data-bge-group]) {\n\t\t\t\t&:has([data-bge-scale]) {\n\t\t\t\t\tflex-grow: 0;\n\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t}\n\n\t\t\t\t&:not(:has([data-bge-scale])) {\n\t\t\t\t\tflex-grow: 1;\n\t\t\t\t\tflex-shrink: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* Standard with immutable container */\n\t\t:where([data-bge-group]) {\n\t\t\tflex: 1 1 auto;\n\t\t}\n\t}\n}\n\n:where([data-bge-container='float'], [data-bge-container^='float:']) {\n\t--_gap-block: var(--bge-options-row-gap, var(--bge-options-gap));\n\t--_gap-inline: var(--bge-options-column-gap, var(--bge-options-gap));\n\t--bge-grid-float: none;\n\t--margin-inline: 0;\n\n\t&:where([data-bge-container$=':start'], [data-bge-container*=':start:']) {\n\t\t--bge-grid-float: inline-start;\n\t\t--margin-inline: 0 var(--_gap-inline);\n\t}\n\n\t&:where([data-bge-container$=':end'], [data-bge-container*=':end:']) {\n\t\t--bge-grid-float: inline-end;\n\t\t--margin-inline: var(--_gap-inline) 0;\n\t}\n\n\t:where([data-bge-container-frame]) {\n\t\t&::after {\n\t\t\tclear: both;\n\t\t\tdisplay: block;\n\t\t\tcontent: '';\n\t\t}\n\n\t\t& > :where(:first-child) {\n\t\t\tfloat: var(--bge-grid-float, none);\n\t\t\tinline-size: fit-content;\n\t\t\tmargin-inline: var(--margin-inline);\n\t\t}\n\t}\n}\n\n/**\n * MARK: Wysiwyg内 横並び（フレックス）ボックス\n */\n:where([data-bgc-flex-box]) {\n\t--_gap-block: var(--bge-options-row-gap, var(--bge-options-gap));\n\t--_gap-inline: var(--bge-options-column-gap, var(--bge-options-gap));\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--_gap-block) var(--_gap-inline);\n\talign-items: center;\n\n\t&[data-bgc-flex-box='start'] {\n\t\tjustify-content: start;\n\t}\n\n\t&[data-bgc-flex-box='end'] {\n\t\tjustify-content: end;\n\t}\n\n\t&[data-bgc-flex-box='center'] {\n\t\tjustify-content: center;\n\t}\n\n\t&[data-bgc-flex-box='between'] {\n\t\tjustify-content: space-between;\n\t}\n\n\t&[data-bgc-flex-box='around'] {\n\t\tjustify-content: space-around;\n\t}\n\n\t&[data-bgc-flex-box='evenly'] {\n\t\tjustify-content: space-evenly;\n\t}\n}\n";
|
|
1615
|
+
var general = "[data-bge-container] {\n\t--bge-auto-repeat-base-width: calc(800 / 16 * 1rem);\n\n\t/* Custom max-width */\n\t--bge-options-max-width--normal: calc(800 / 16 * 1rem);\n\t--bge-options-max-width--small: calc(400 / 16 * 1rem);\n\t--bge-options-max-width--large: calc(1200 / 16 * 1rem);\n\t--bge-options-max-width--full: 100dvi;\n\t--bge-options-max-width: var(--bge-options-max-width--normal);\n\n\t/* Custom margin */\n\t--bge-options-margin--normal: 3rem;\n\t--bge-options-margin--none: 0;\n\t--bge-options-margin--small: 1rem;\n\t--bge-options-margin--large: 8rem;\n\t--bge-options-margin: var(--bge-options-margin--normal);\n\n\t/* Custom background color */\n\t--bge-options-bg-color--transparent: transparent;\n\t--bge-options-bg-color--white: #fff;\n\t--bge-options-bg-color--gray: #dfdfdf;\n\t--bge-options-bg-color--blue: #eaf3f8;\n\t--bge-options-bg-color--red: #fcc;\n\t--bge-options-bg-color: var(--bge-options-bg-color--transparent);\n\n\t/* Custom padding-block */\n\t--bge-options-padding-block--none: 0;\n\t--bge-options-padding-block--small: 1rem;\n\t--bge-options-padding-block--medium: 3rem;\n\t--bge-options-padding-block--large: 5rem;\n\t--bge-options-padding-block: var(--bge-options-padding-block--none);\n\n\t/* Custom padding-inline */\n\t--bge-options-padding-inline--default-gutter: 2rem;\n\t--bge-options-padding-inline--none: 0;\n\t--bge-options-padding-inline--small: 1rem;\n\t--bge-options-padding-inline--medium: 3rem;\n\t--bge-options-padding-inline--large: 5rem;\n\t--bge-options-padding-inline: var(--bge-options-padding-inline--default-gutter);\n\n\t/* Custom column gap */\n\t--bge-options-column-gap--normal: 1rem;\n\t--bge-options-column-gap--none: 0;\n\t--bge-options-column-gap--small: 0.5rem;\n\t--bge-options-column-gap--large: 5rem;\n\t--bge-options-column-gap: var(--bge-options-column-gap--normal);\n\n\t/* Custom row gap */\n\t--bge-options-row-gap--normal: 1rem;\n\t--bge-options-row-gap--none: 0;\n\t--bge-options-row-gap--small: 0.5rem;\n\t--bge-options-row-gap--large: 5rem;\n\t--bge-options-row-gap: var(--bge-options-row-gap--normal);\n\n\t/* Custom subgrid gap factor (grid type only) */\n\t--bge-options-_grid_subgrid-gap--normal: 1rem;\n\t--bge-options-_grid_subgrid-gap--none: 0;\n\t--bge-options-_grid_subgrid-gap--small: 0.5rem;\n\t--bge-options-_grid_subgrid-gap--large: 1rem;\n\t--bge-options-_grid_subgrid-gap: var(--bge-options-_grid_subgrid-gap--normal);\n}\n\n:where([data-bge-container]) {\n\t--_margin-block-end: var(--bge-options-margin);\n\t--_margin-block-end_when-last: 0;\n\tinline-size: 100%;\n\tmax-inline-size: var(--bge-options-max-width);\n\tpadding-block: var(--bge-options-padding-block);\n\tpadding-inline: var(--bge-options-padding-inline);\n\tmargin-block-end: var(--_margin-block-end);\n\tmargin-inline: auto;\n\tcontainer-name: bge-container;\n\tcontainer-type: inline-size;\n\tbackground-color: var(--bge-options-bg-color);\n\n\t&:where(:last-child) {\n\t\t--_margin-block-end: var(--_margin-block-end_when-last);\n\t}\n}\n\n:where([data-bge-container-frame]) {\n\tinline-size: 100%;\n\n\t/* Reset list styles for semantic container frames */\n\t&:is(ul, ol) {\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tlist-style: none;\n\t}\n}\n\n:where([data-bge-container='grid'], [data-bge-container^='grid:']) {\n\t--_gap-block: var(--bge-options-row-gap, var(--bge-options-gap));\n\t--_gap-inline: var(--bge-options-column-gap, var(--bge-options-gap));\n\t--_subgrid-gap: var(--bge-options-_grid_subgrid-gap, var(--_gap-block));\n\n\t&:where([data-bge-container$=':2'], [data-bge-container*=':2:'])\n\t\t:where([data-bge-container-frame]) {\n\t\t--bge-grid-col: 2;\n\t}\n\n\t&:where([data-bge-container$=':3'], [data-bge-container*=':3:'])\n\t\t:where([data-bge-container-frame]) {\n\t\t--bge-grid-col: 3;\n\t}\n\n\t&:where([data-bge-container$=':4'], [data-bge-container*=':4:'])\n\t\t:where([data-bge-container-frame]) {\n\t\t--bge-grid-col: 4;\n\t}\n\n\t&:where([data-bge-container$=':5'], [data-bge-container*=':5:'])\n\t\t:where([data-bge-container-frame]) {\n\t\t--bge-grid-col: 5;\n\t}\n\n\t:where([data-bge-container-frame]) {\n\t\t--_grid-col: var(--bge-grid-col, 1);\n\t\t--_repeat-base-width: calc(var(--bge-auto-repeat-base-width) / var(--_grid-col));\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(var(--_grid-col), minmax(0, 1fr));\n\t\tgap: var(--_gap-block) var(--_gap-inline);\n\n\t\t&:is([data-bge-container*=':auto-fit:'] *) {\n\t\t\tgrid-template-columns: repeat(\n\t\t\t\tauto-fit,\n\t\t\t\tminmax(min(100%, var(--_repeat-base-width)), 1fr)\n\t\t\t);\n\t\t}\n\n\t\t&:is([data-bge-container*=':auto-fill:'] *) {\n\t\t\tgrid-template-columns: repeat(\n\t\t\t\tauto-fill,\n\t\t\t\tminmax(min(100%, var(--_repeat-base-width)), 1fr)\n\t\t\t);\n\t\t}\n\t}\n\n\t:where([data-bge-group]) {\n\t\t--item-count: 1;\n\t\tdisplay: grid;\n\t\tgrid-template-rows: subgrid;\n\t\tgrid-row: span var(--item-count);\n\t\tgap: var(--_subgrid-gap) 0;\n\n\t\t/* Reset list styles for semantic groups */\n\t\t&:is(li) {\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t/* Subgrid hack 2 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(2):last-child) {\n\t\t\t--item-count: 2;\n\t\t}\n\n\t\t/* Subgrid hack 3 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(3):last-child) {\n\t\t\t--item-count: 3;\n\t\t}\n\n\t\t/* Subgrid hack 4 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(4):last-child) {\n\t\t\t--item-count: 4;\n\t\t}\n\n\t\t/* Subgrid hack 5 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(5):last-child) {\n\t\t\t--item-count: 5;\n\t\t}\n\n\t\t/* Subgrid hack 6 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(6):last-child) {\n\t\t\t--item-count: 6;\n\t\t}\n\n\t\t/* Subgrid hack 7 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(7):last-child) {\n\t\t\t--item-count: 7;\n\t\t}\n\n\t\t/* Subgrid hack 8 items */\n\t\t&[data-bge-group]:has([data-bge-item]:nth-child(8):last-child) {\n\t\t\t--item-count: 8;\n\t\t}\n\t}\n\n\t:where([data-bge-item]) {\n\t\tdisplay: flex;\n\t\talign-items: stretch;\n\t\talign-self: stretch;\n\t\tjustify-content: start;\n\t\tcontainer-name: bge-item;\n\t\tcontainer-type: inline-size;\n\n\t\t> * {\n\t\t\tflex: 0 0 100%;\n\t\t}\n\t}\n}\n\n:where([data-bge-container='inline'], [data-bge-container^='inline:']) {\n\t--_gap-block: var(--bge-options-row-gap, var(--bge-options-gap));\n\t--_gap-inline: var(--bge-options-column-gap, var(--bge-options-gap));\n\n\t:where([data-bge-container-frame]) {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: var(--_gap-block) var(--_gap-inline);\n\t\talign-items: stretch;\n\t\tjustify-content: center;\n\n\t\t&:where(:is([data-bge-container$=':center'], [data-bge-container*=':center:']) *) {\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':start'], [data-bge-container*=':start:']) *) {\n\t\t\tjustify-content: start;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':end'], [data-bge-container*=':end:']) *) {\n\t\t\tjustify-content: end;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':between'], [data-bge-container*=':between:']) *) {\n\t\t\tjustify-content: space-between;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':around'], [data-bge-container*=':around:']) *) {\n\t\t\tjustify-content: space-around;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':evenly'], [data-bge-container*=':evenly:']) *) {\n\t\t\tjustify-content: space-evenly;\n\t\t}\n\n\t\t&:where(\n\t\t\t:is([data-bge-container$=':align-center'], [data-bge-container*=':align-center:']) *\n\t\t) {\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&:where(\n\t\t\t:is([data-bge-container$=':align-start'], [data-bge-container*=':align-start:']) *\n\t\t) {\n\t\t\talign-items: start;\n\t\t}\n\n\t\t&:where(\n\t\t\t:is([data-bge-container$=':align-end'], [data-bge-container*=':align-end:']) *\n\t\t) {\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&:where(\n\t\t\t:is([data-bge-container$=':align-stretch'], [data-bge-container*=':align-stretch:'])\n\t\t\t\t*\n\t\t) {\n\t\t\talign-items: stretch;\n\t\t}\n\n\t\t&:where(\n\t\t\t:is(\n\t\t\t\t\t[data-bge-container$=':align-baseline'],\n\t\t\t\t\t[data-bge-container*=':align-baseline:']\n\t\t\t\t)\n\t\t\t\t*\n\t\t) {\n\t\t\t--align: baseline;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':wrap'], [data-bge-container*=':wrap:']) *) {\n\t\t\tflex-wrap: wrap;\n\t\t}\n\n\t\t&:where(:is([data-bge-container$=':nowrap'], [data-bge-container*=':nowrap:']) *) {\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t}\n\n\t&:where([data-bge-container$=':immutable'], [data-bge-container*=':immutable:']) {\n\t\t/* Left-right split box with resizable item (has `[data-bge-scale]`) on one side */\n\t\t&:has([data-bge-group]:nth-child(2):last-child) {\n\t\t\t:where([data-bge-group]) {\n\t\t\t\t&:has([data-bge-scale]) {\n\t\t\t\t\tflex-grow: 0;\n\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t}\n\n\t\t\t\t&:not(:has([data-bge-scale])) {\n\t\t\t\t\tflex-grow: 1;\n\t\t\t\t\tflex-shrink: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* Standard with immutable container */\n\t\t:where([data-bge-group]) {\n\t\t\tflex: 1 1 auto;\n\t\t}\n\t}\n}\n\n:where([data-bge-container='float'], [data-bge-container^='float:']) {\n\t--_gap-block: var(--bge-options-row-gap, var(--bge-options-gap));\n\t--_gap-inline: var(--bge-options-column-gap, var(--bge-options-gap));\n\t--bge-grid-float: none;\n\t--margin-inline: 0;\n\n\t&:where([data-bge-container$=':start'], [data-bge-container*=':start:']) {\n\t\t--bge-grid-float: inline-start;\n\t\t--margin-inline: 0 var(--_gap-inline);\n\t}\n\n\t&:where([data-bge-container$=':end'], [data-bge-container*=':end:']) {\n\t\t--bge-grid-float: inline-end;\n\t\t--margin-inline: var(--_gap-inline) 0;\n\t}\n\n\t:where([data-bge-container-frame]) {\n\t\t&::after {\n\t\t\tclear: both;\n\t\t\tdisplay: block;\n\t\t\tcontent: '';\n\t\t}\n\n\t\t& > :where(:first-child) {\n\t\t\tfloat: var(--bge-grid-float, none);\n\t\t\tinline-size: fit-content;\n\t\t\tmargin-inline: var(--margin-inline);\n\t\t}\n\t}\n}\n\n/**\n * MARK: Wysiwyg内 横並び（フレックス）ボックス\n */\n:where([data-bgc-flex-box]) {\n\t--_gap-block: var(--bge-options-row-gap, var(--bge-options-gap));\n\t--_gap-inline: var(--bge-options-column-gap, var(--bge-options-gap));\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--_gap-block) var(--_gap-inline);\n\talign-items: center;\n\n\t&[data-bgc-flex-box='start'] {\n\t\tjustify-content: start;\n\t}\n\n\t&[data-bgc-flex-box='end'] {\n\t\tjustify-content: end;\n\t}\n\n\t&[data-bgc-flex-box='center'] {\n\t\tjustify-content: center;\n\t}\n\n\t&[data-bgc-flex-box='between'] {\n\t\tjustify-content: space-between;\n\t}\n\n\t&[data-bgc-flex-box='around'] {\n\t\tjustify-content: space-around;\n\t}\n\n\t&[data-bgc-flex-box='evenly'] {\n\t\tjustify-content: space-evenly;\n\t}\n}\n\n/**\n * MARK: Wysiwyg内 段落整列\n */\n:where([data-bgc-align]) {\n\t&[data-bgc-align='start'] {\n\t\ttext-align: start;\n\t}\n\n\t&[data-bgc-align='center'] {\n\t\ttext-align: center;\n\t}\n\n\t&[data-bgc-align='end'] {\n\t\ttext-align: end;\n\t}\n}\n";
|
|
1616
1616
|
|
|
1617
1617
|
export { defaultCatalog, general as generalCSS, items, legacyCatalog };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@burger-editor/blocks",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.55",
|
|
4
4
|
"description": "BurgerEditor Blocks",
|
|
5
5
|
"author": "D-ZERO",
|
|
6
6
|
"license": "(MIT OR Apache-2.0)",
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
"dev": "rollup -c -w"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@burger-editor/core": "4.0.0-alpha.
|
|
32
|
-
"@burger-editor/utils": "4.0.0-alpha.
|
|
31
|
+
"@burger-editor/core": "4.0.0-alpha.55",
|
|
32
|
+
"@burger-editor/utils": "4.0.0-alpha.55",
|
|
33
33
|
"@d-zero/shared": "0.17.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@burger-editor/custom-element": "4.0.0-alpha.
|
|
36
|
+
"@burger-editor/custom-element": "4.0.0-alpha.55",
|
|
37
37
|
"@types/google.maps": "3.58.1",
|
|
38
|
-
"rollup": "4.
|
|
38
|
+
"rollup": "4.56.0",
|
|
39
39
|
"rollup-plugin-esbuild": "6.2.1",
|
|
40
40
|
"rollup-plugin-string": "3.0.0"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "7dbeb2e6ea6b762aaad6d4c8f9ff1663d8575e95"
|
|
43
43
|
}
|