astro-dev-mcp 0.3.0 → 0.4.0
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/dist/templates/uiPatterns.d.ts +2 -0
- package/dist/templates/uiPatterns.d.ts.map +1 -1
- package/dist/templates/uiPatterns.js +155 -132
- package/dist/templates/uiPatterns.js.map +1 -1
- package/dist/utils/astroDevClasses.d.ts +41 -0
- package/dist/utils/astroDevClasses.d.ts.map +1 -0
- package/dist/utils/astroDevClasses.js +57 -0
- package/dist/utils/astroDevClasses.js.map +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uiPatterns.d.ts","sourceRoot":"","sources":["../../src/templates/uiPatterns.ts"],"names":[],"mappings":"AAAA;;;GAGG;
|
|
1
|
+
{"version":3,"file":"uiPatterns.d.ts","sourceRoot":"","sources":["../../src/templates/uiPatterns.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,MAAM,SAAS,GAClB,KAAK,GACL,WAAW,GACX,MAAM,GACN,UAAU,GACV,MAAM,GACN,OAAO,CAAC;AAEX,MAAM,WAAW,eAAe;IAC/B,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE;QACT,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC5B,CAAC;CACF;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAiBjE"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* UIパターン汎用ジェネレーター
|
|
3
3
|
* コンテンツデータとUIパターンを受け取り、適切なマークアップを生成
|
|
4
4
|
*/
|
|
5
|
+
import { getContainerClass, getButtonClass } from '../utils/astroDevClasses.js';
|
|
5
6
|
/**
|
|
6
7
|
* UIパターンに基づいてマークアップを生成
|
|
7
8
|
*/
|
|
@@ -27,7 +28,9 @@ export function generateUIPattern(config) {
|
|
|
27
28
|
* タブUI生成(開発環境のTab.ts連携)
|
|
28
29
|
*/
|
|
29
30
|
function generateTabUI(config) {
|
|
30
|
-
const {
|
|
31
|
+
const { options = {} } = config;
|
|
32
|
+
const { useContainer = true } = options;
|
|
33
|
+
const containerClass = useContainer ? getContainerClass() : '';
|
|
31
34
|
return `---
|
|
32
35
|
interface Props {
|
|
33
36
|
data: {
|
|
@@ -43,35 +46,37 @@ const { data } = Astro.props;
|
|
|
43
46
|
---
|
|
44
47
|
|
|
45
48
|
<section class="c_tab">
|
|
46
|
-
|
|
47
|
-
|
|
49
|
+
${useContainer ? `<div class="${containerClass}">` : ''}
|
|
50
|
+
<h2 class="section_ttl">{data.ttl}</h2>
|
|
51
|
+
<ul class="c_tab_list">
|
|
52
|
+
{
|
|
53
|
+
data.items.map((item, i) => (
|
|
54
|
+
<li>
|
|
55
|
+
<button
|
|
56
|
+
type="button"
|
|
57
|
+
class={i === 0 ? "-open" : ""}
|
|
58
|
+
aria-pressed={i === 0 ? "true" : "false"}
|
|
59
|
+
tabindex={i === 0 ? "-1" : "0"}
|
|
60
|
+
>
|
|
61
|
+
{item.name}
|
|
62
|
+
</button>
|
|
63
|
+
</li>
|
|
64
|
+
))
|
|
65
|
+
}
|
|
66
|
+
</ul>
|
|
48
67
|
{
|
|
49
68
|
data.items.map((item, i) => (
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</button>
|
|
59
|
-
</li>
|
|
69
|
+
<div
|
|
70
|
+
class="c_tab_content"
|
|
71
|
+
hidden={i !== 0}
|
|
72
|
+
tabindex="-1"
|
|
73
|
+
>
|
|
74
|
+
<!-- コンテンツはプロジェクト固有で実装 -->
|
|
75
|
+
{item.content}
|
|
76
|
+
</div>
|
|
60
77
|
))
|
|
61
78
|
}
|
|
62
|
-
</
|
|
63
|
-
{
|
|
64
|
-
data.items.map((item, i) => (
|
|
65
|
-
<div
|
|
66
|
-
class="c_tab_content"
|
|
67
|
-
hidden={i !== 0}
|
|
68
|
-
tabindex="-1"
|
|
69
|
-
>
|
|
70
|
-
<!-- コンテンツはプロジェクト固有で実装 -->
|
|
71
|
-
{item.content}
|
|
72
|
-
</div>
|
|
73
|
-
))
|
|
74
|
-
}
|
|
79
|
+
${useContainer ? '</div>' : ''}
|
|
75
80
|
</section>
|
|
76
81
|
`;
|
|
77
82
|
}
|
|
@@ -80,7 +85,8 @@ const { data } = Astro.props;
|
|
|
80
85
|
*/
|
|
81
86
|
function generateAccordionUI(config) {
|
|
82
87
|
const { data, options = {} } = config;
|
|
83
|
-
const { openFirst = true } = options;
|
|
88
|
+
const { openFirst = true, useContainer = true } = options;
|
|
89
|
+
const containerClass = useContainer ? getContainerClass() : '';
|
|
84
90
|
return `---
|
|
85
91
|
interface Props {
|
|
86
92
|
data: {
|
|
@@ -96,24 +102,26 @@ const { data } = Astro.props;
|
|
|
96
102
|
---
|
|
97
103
|
|
|
98
104
|
<section class="accordion_section">
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
<div class="
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
105
|
+
${useContainer ? `<div class="${containerClass}">` : ''}
|
|
106
|
+
<h2 class="section_ttl">{data.ttl}</h2>
|
|
107
|
+
<div class="accordion_list">
|
|
108
|
+
{
|
|
109
|
+
data.items.map((item, i) => (
|
|
110
|
+
<details
|
|
111
|
+
class={"c_pull accordion_item" + (${openFirst} && i === 0 ? " -open" : "")}
|
|
112
|
+
open={${openFirst} && i === 0}
|
|
113
|
+
>
|
|
114
|
+
<summary class="c_pull_ttl accordion_item_ttl">
|
|
115
|
+
<span class="accordion_item_ttl_text">{item.ttl}</span>
|
|
116
|
+
</summary>
|
|
117
|
+
<div class="c_pull_content accordion_item_content">
|
|
118
|
+
<div class="accordion_item_content_text" set:html={item.content} />
|
|
119
|
+
</div>
|
|
120
|
+
</details>
|
|
121
|
+
))
|
|
122
|
+
}
|
|
123
|
+
</div>
|
|
124
|
+
${useContainer ? '</div>' : ''}
|
|
117
125
|
</section>
|
|
118
126
|
`;
|
|
119
127
|
}
|
|
@@ -122,8 +130,9 @@ const { data } = Astro.props;
|
|
|
122
130
|
*/
|
|
123
131
|
function generateGridUI(config) {
|
|
124
132
|
const { data, options = {}, components = [] } = config;
|
|
125
|
-
const { columns = 3, gap = '2.4rem', hasImage = true } = options;
|
|
133
|
+
const { columns = 3, gap = '2.4rem', hasImage = true, useContainer = true } = options;
|
|
126
134
|
const hasPicture = components.includes('Picture');
|
|
135
|
+
const containerClass = useContainer ? getContainerClass() : '';
|
|
127
136
|
return `---
|
|
128
137
|
${hasPicture ? 'import Picture from "@/components/Picture.astro";' : ''}
|
|
129
138
|
|
|
@@ -144,28 +153,30 @@ const { data, imgPath = '' } = Astro.props;
|
|
|
144
153
|
---
|
|
145
154
|
|
|
146
155
|
<section class="grid_section">
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
{
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
156
|
+
${useContainer ? `<div class="${containerClass}">` : ''}
|
|
157
|
+
<h2 class="section_ttl">{data.ttl}</h2>
|
|
158
|
+
<ul class="grid_list" style="display: grid; grid-template-columns: repeat(${columns}, 1fr); gap: ${gap};">
|
|
159
|
+
{
|
|
160
|
+
data.items.map((item) => (
|
|
161
|
+
<li class="grid_item">
|
|
162
|
+
${hasImage
|
|
153
163
|
? `
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
164
|
+
{item.img && (
|
|
165
|
+
<div class="grid_item_img">
|
|
166
|
+
${hasPicture ? '<Picture src={imgPath + item.img} alt={item.ttl} sizes={[400, 300]} />' : '<img src={imgPath + item.img} alt={item.ttl} loading="lazy" />'}
|
|
167
|
+
</div>
|
|
168
|
+
)}
|
|
169
|
+
`
|
|
160
170
|
: ''}
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
171
|
+
<div class="grid_item_body">
|
|
172
|
+
<h3 class="grid_item_ttl">{item.ttl}</h3>
|
|
173
|
+
{item.desc && <p class="grid_item_desc">{item.desc}</p>}
|
|
174
|
+
</div>
|
|
175
|
+
</li>
|
|
176
|
+
))
|
|
177
|
+
}
|
|
178
|
+
</ul>
|
|
179
|
+
${useContainer ? '</div>' : ''}
|
|
169
180
|
</section>
|
|
170
181
|
`;
|
|
171
182
|
}
|
|
@@ -174,8 +185,9 @@ const { data, imgPath = '' } = Astro.props;
|
|
|
174
185
|
*/
|
|
175
186
|
function generateCarouselUI(config) {
|
|
176
187
|
const { data, options = {}, components = [] } = config;
|
|
177
|
-
const { autoplay = false } = options;
|
|
188
|
+
const { autoplay = false, useContainer = true } = options;
|
|
178
189
|
const hasPicture = components.includes('Picture');
|
|
190
|
+
const containerClass = useContainer ? getContainerClass() : '';
|
|
179
191
|
return `---
|
|
180
192
|
${hasPicture ? 'import Picture from "@/components/Picture.astro";' : ''}
|
|
181
193
|
|
|
@@ -199,29 +211,31 @@ const { data, imgPath = '' } = Astro.props;
|
|
|
199
211
|
---
|
|
200
212
|
|
|
201
213
|
<section class="carousel_section">
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
<div class="swiper-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
214
|
+
${useContainer ? `<div class="${containerClass}">` : ''}
|
|
215
|
+
<h2 class="section_ttl">{data.ttl}</h2>
|
|
216
|
+
<div class="swiper carousel_swiper" data-autoplay="${autoplay}">
|
|
217
|
+
<div class="swiper-wrapper">
|
|
218
|
+
{
|
|
219
|
+
data.items.map((item) => (
|
|
220
|
+
<div class="swiper-slide carousel_item">
|
|
221
|
+
{item.img && (
|
|
222
|
+
<div class="carousel_item_img">
|
|
223
|
+
${hasPicture ? '<Picture src={imgPath + item.img} alt={item.ttl} sizes={[800, 600]} />' : '<img src={imgPath + item.img} alt={item.ttl} loading="lazy" />'}
|
|
224
|
+
</div>
|
|
225
|
+
)}
|
|
226
|
+
<div class="carousel_item_body">
|
|
227
|
+
<h3 class="carousel_item_ttl">{item.ttl}</h3>
|
|
228
|
+
{item.desc && <p class="carousel_item_desc">{item.desc}</p>}
|
|
211
229
|
</div>
|
|
212
|
-
)}
|
|
213
|
-
<div class="carousel_item_body">
|
|
214
|
-
<h3 class="carousel_item_ttl">{item.ttl}</h3>
|
|
215
|
-
{item.desc && <p class="carousel_item_desc">{item.desc}</p>}
|
|
216
230
|
</div>
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
231
|
+
))
|
|
232
|
+
}
|
|
233
|
+
</div>
|
|
234
|
+
<div class="swiper-pagination"></div>
|
|
235
|
+
<div class="swiper-button-prev"></div>
|
|
236
|
+
<div class="swiper-button-next"></div>
|
|
220
237
|
</div>
|
|
221
|
-
|
|
222
|
-
<div class="swiper-button-prev"></div>
|
|
223
|
-
<div class="swiper-button-next"></div>
|
|
224
|
-
</div>
|
|
238
|
+
${useContainer ? '</div>' : ''}
|
|
225
239
|
</section>
|
|
226
240
|
`;
|
|
227
241
|
}
|
|
@@ -229,7 +243,9 @@ const { data, imgPath = '' } = Astro.props;
|
|
|
229
243
|
* リストUI生成
|
|
230
244
|
*/
|
|
231
245
|
function generateListUI(config) {
|
|
232
|
-
const { data } = config;
|
|
246
|
+
const { data, options = {} } = config;
|
|
247
|
+
const { useContainer = true } = options;
|
|
248
|
+
const containerClass = useContainer ? getContainerClass() : '';
|
|
233
249
|
return `---
|
|
234
250
|
interface Props {
|
|
235
251
|
data: {
|
|
@@ -245,17 +261,19 @@ const { data } = Astro.props;
|
|
|
245
261
|
---
|
|
246
262
|
|
|
247
263
|
<section class="list_section">
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
<
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
264
|
+
${useContainer ? `<div class="${containerClass}">` : ''}
|
|
265
|
+
<h2 class="section_ttl">{data.ttl}</h2>
|
|
266
|
+
<ul class="list">
|
|
267
|
+
{
|
|
268
|
+
data.items.map((item) => (
|
|
269
|
+
<li class="list_item">
|
|
270
|
+
<h3 class="list_item_ttl">{item.ttl}</h3>
|
|
271
|
+
{item.desc && <p class="list_item_desc">{item.desc}</p>}
|
|
272
|
+
</li>
|
|
273
|
+
))
|
|
274
|
+
}
|
|
275
|
+
</ul>
|
|
276
|
+
${useContainer ? '</div>' : ''}
|
|
259
277
|
</section>
|
|
260
278
|
`;
|
|
261
279
|
}
|
|
@@ -263,8 +281,11 @@ const { data } = Astro.props;
|
|
|
263
281
|
* モーダルUI生成(開発環境のModal.ts連携)
|
|
264
282
|
*/
|
|
265
283
|
function generateModalUI(config) {
|
|
266
|
-
const { data, components = [] } = config;
|
|
284
|
+
const { data, components = [], options = {} } = config;
|
|
267
285
|
const hasPicture = components.includes('Picture');
|
|
286
|
+
const { useContainer = true, useStandardButton = true } = options;
|
|
287
|
+
const containerClass = useContainer ? getContainerClass() : '';
|
|
288
|
+
const buttonClass = useStandardButton ? getButtonClass('c_modal_btn modal_card') : 'c_modal_btn modal_card';
|
|
268
289
|
return `---
|
|
269
290
|
${hasPicture ? 'import Picture from "@/components/Picture.astro";' : ''}
|
|
270
291
|
|
|
@@ -291,39 +312,41 @@ const { data, imgPath = '' } = Astro.props;
|
|
|
291
312
|
---
|
|
292
313
|
|
|
293
314
|
<section class="modal_section">
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
<
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
<
|
|
311
|
-
<
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
315
|
+
${useContainer ? `<div class="${containerClass}">` : ''}
|
|
316
|
+
<h2 class="section_ttl">{data.ttl}</h2>
|
|
317
|
+
<ul class="modal_list">
|
|
318
|
+
{
|
|
319
|
+
data.items.map((item) => (
|
|
320
|
+
<li class="modal_item">
|
|
321
|
+
<button
|
|
322
|
+
type="button"
|
|
323
|
+
class="${buttonClass}"
|
|
324
|
+
data-src={item.src}
|
|
325
|
+
data-alt={item.alt}
|
|
326
|
+
>
|
|
327
|
+
{item.thumbnail && (
|
|
328
|
+
<span class="modal_thumbnail">
|
|
329
|
+
${hasPicture ? '<Picture src={imgPath + item.thumbnail} alt={item.alt || item.ttl} sizes={[800, 450]} />' : '<img src={imgPath + item.thumbnail} alt={item.alt || item.ttl} loading="lazy" />'}
|
|
330
|
+
{item.type === 'video' && (
|
|
331
|
+
<span class="modal_play_icon">
|
|
332
|
+
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
333
|
+
<circle cx="30" cy="30" r="30" fill="white" opacity="0.9" />
|
|
334
|
+
<path d="M24 18L42 30L24 42V18Z" fill="#667eea" />
|
|
335
|
+
</svg>
|
|
336
|
+
</span>
|
|
337
|
+
)}
|
|
338
|
+
</span>
|
|
339
|
+
)}
|
|
340
|
+
<span class="modal_body">
|
|
341
|
+
<h3 class="modal_ttl">{item.ttl}</h3>
|
|
342
|
+
{item.desc && <p class="modal_desc">{item.desc}</p>}
|
|
316
343
|
</span>
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
</li>
|
|
324
|
-
))
|
|
325
|
-
}
|
|
326
|
-
</ul>
|
|
344
|
+
</button>
|
|
345
|
+
</li>
|
|
346
|
+
))
|
|
347
|
+
}
|
|
348
|
+
</ul>
|
|
349
|
+
${useContainer ? '</div>' : ''}
|
|
327
350
|
</section>
|
|
328
351
|
`;
|
|
329
352
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uiPatterns.js","sourceRoot":"","sources":["../../src/templates/uiPatterns.ts"],"names":[],"mappings":"AAAA;;;GAGG;
|
|
1
|
+
{"version":3,"file":"uiPatterns.js","sourceRoot":"","sources":["../../src/templates/uiPatterns.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* astro-dev汎用CSSクラス定義
|
|
3
|
+
* 生成コンポーネントで使用する標準クラス
|
|
4
|
+
*/
|
|
5
|
+
export interface AstroDevClasses {
|
|
6
|
+
container: string;
|
|
7
|
+
pcOnly: string;
|
|
8
|
+
spOnly: string;
|
|
9
|
+
screenReaderOnly: string;
|
|
10
|
+
skipLink: string;
|
|
11
|
+
button: string;
|
|
12
|
+
scrollAnimation: {
|
|
13
|
+
base: string;
|
|
14
|
+
up: string;
|
|
15
|
+
down: string;
|
|
16
|
+
right: string;
|
|
17
|
+
left: string;
|
|
18
|
+
scale: string;
|
|
19
|
+
active: string;
|
|
20
|
+
each: string;
|
|
21
|
+
};
|
|
22
|
+
frameWrapper: string;
|
|
23
|
+
}
|
|
24
|
+
export declare const astroDevClasses: AstroDevClasses;
|
|
25
|
+
/**
|
|
26
|
+
* ボタンクラスを生成
|
|
27
|
+
*/
|
|
28
|
+
export declare function getButtonClass(customClass?: string): string;
|
|
29
|
+
/**
|
|
30
|
+
* スクロールアニメーションクラスを生成
|
|
31
|
+
*/
|
|
32
|
+
export declare function getScrollAnimationClass(direction?: 'up' | 'down' | 'right' | 'left' | 'scale', each?: boolean): string;
|
|
33
|
+
/**
|
|
34
|
+
* スクリーンリーダー用テキストを生成
|
|
35
|
+
*/
|
|
36
|
+
export declare function generateScreenReaderText(text: string): string;
|
|
37
|
+
/**
|
|
38
|
+
* コンテナクラスを取得
|
|
39
|
+
*/
|
|
40
|
+
export declare function getContainerClass(): string;
|
|
41
|
+
//# sourceMappingURL=astroDevClasses.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"astroDevClasses.d.ts","sourceRoot":"","sources":["../../src/utils/astroDevClasses.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,eAAe;IAE/B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IAGf,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IAGjB,MAAM,EAAE,MAAM,CAAC;IAGf,eAAe,EAAE;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;KACb,CAAC;IAGF,YAAY,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,EAAE,eAkB7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAI3D;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CACtC,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,EACtD,IAAI,UAAQ,GACV,MAAM,CAYR;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAE1C"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* astro-dev汎用CSSクラス定義
|
|
3
|
+
* 生成コンポーネントで使用する標準クラス
|
|
4
|
+
*/
|
|
5
|
+
export const astroDevClasses = {
|
|
6
|
+
container: 'contentInner',
|
|
7
|
+
pcOnly: 'pcOnly',
|
|
8
|
+
spOnly: 'spOnly',
|
|
9
|
+
screenReaderOnly: 'txtHidden',
|
|
10
|
+
skipLink: 'skipLink',
|
|
11
|
+
button: 'c_btn',
|
|
12
|
+
scrollAnimation: {
|
|
13
|
+
base: 'scrollIn',
|
|
14
|
+
up: '-up',
|
|
15
|
+
down: '-down',
|
|
16
|
+
right: '-right',
|
|
17
|
+
left: '-left',
|
|
18
|
+
scale: '-scale',
|
|
19
|
+
active: '-active',
|
|
20
|
+
each: '-each',
|
|
21
|
+
},
|
|
22
|
+
frameWrapper: 'frameWrapper',
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* ボタンクラスを生成
|
|
26
|
+
*/
|
|
27
|
+
export function getButtonClass(customClass) {
|
|
28
|
+
return customClass
|
|
29
|
+
? `${astroDevClasses.button} ${customClass}`
|
|
30
|
+
: astroDevClasses.button;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* スクロールアニメーションクラスを生成
|
|
34
|
+
*/
|
|
35
|
+
export function getScrollAnimationClass(direction, each = false) {
|
|
36
|
+
const classes = [astroDevClasses.scrollAnimation.base];
|
|
37
|
+
if (direction) {
|
|
38
|
+
classes.push(astroDevClasses.scrollAnimation[direction]);
|
|
39
|
+
}
|
|
40
|
+
if (each) {
|
|
41
|
+
classes.push(astroDevClasses.scrollAnimation.each);
|
|
42
|
+
}
|
|
43
|
+
return classes.join(' ');
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* スクリーンリーダー用テキストを生成
|
|
47
|
+
*/
|
|
48
|
+
export function generateScreenReaderText(text) {
|
|
49
|
+
return `<span class="${astroDevClasses.screenReaderOnly}">${text}</span>`;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* コンテナクラスを取得
|
|
53
|
+
*/
|
|
54
|
+
export function getContainerClass() {
|
|
55
|
+
return astroDevClasses.container;
|
|
56
|
+
}
|
|
57
|
+
//# sourceMappingURL=astroDevClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"astroDevClasses.js","sourceRoot":"","sources":["../../src/utils/astroDevClasses.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA+BH,MAAM,CAAC,MAAM,eAAe,GAAoB;IAC/C,SAAS,EAAE,cAAc;IACzB,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,gBAAgB,EAAE,WAAW;IAC7B,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,OAAO;IACf,eAAe,EAAE;QAChB,IAAI,EAAE,UAAU;QAChB,EAAE,EAAE,KAAK;QACT,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,OAAO;KACb;IACD,YAAY,EAAE,cAAc;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,WAAoB;IAClD,OAAO,WAAW;QACjB,CAAC,CAAC,GAAG,eAAe,CAAC,MAAM,IAAI,WAAW,EAAE;QAC5C,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC;AAC3B,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,uBAAuB,CACtC,SAAsD,EACtD,IAAI,GAAG,KAAK;IAEZ,MAAM,OAAO,GAAG,CAAC,eAAe,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAEvD,IAAI,SAAS,EAAE,CAAC;QACf,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACV,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC;IAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC1B,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,IAAY;IACpD,OAAO,gBAAgB,eAAe,CAAC,gBAAgB,KAAK,IAAI,SAAS,CAAC;AAC3E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB;IAChC,OAAO,eAAe,CAAC,SAAS,CAAC;AAClC,CAAC"}
|