draft-ole 0.9.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/LICENSE +21 -0
- package/README.ja.md +134 -0
- package/README.md +128 -0
- package/dist/chunk-5BNNDTRT.js +95 -0
- package/dist/chunk-5BNNDTRT.js.map +1 -0
- package/dist/chunk-STLTIBMA.js +7658 -0
- package/dist/chunk-STLTIBMA.js.map +1 -0
- package/dist/chunk-YK4Y4ENL.js +389 -0
- package/dist/chunk-YK4Y4ENL.js.map +1 -0
- package/dist/entries/app.cjs +7337 -0
- package/dist/entries/app.cjs.map +1 -0
- package/dist/entries/app.d.cts +115 -0
- package/dist/entries/app.d.ts +115 -0
- package/dist/entries/app.js +10 -0
- package/dist/entries/app.js.map +1 -0
- package/dist/entries/page.cjs +7558 -0
- package/dist/entries/page.cjs.map +1 -0
- package/dist/entries/page.d.cts +2 -0
- package/dist/entries/page.d.ts +2 -0
- package/dist/entries/page.js +30 -0
- package/dist/entries/page.js.map +1 -0
- package/dist/index.cjs +10524 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +4700 -0
- package/dist/index.d.ts +4700 -0
- package/dist/index.js +2573 -0
- package/dist/index.js.map +1 -0
- package/dist/page-DylNkWXm.d.ts +366 -0
- package/dist/page-h3DPzs8l.d.cts +366 -0
- package/dist/transformer/call-detector.d.ts +38 -0
- package/dist/transformer/call-detector.d.ts.map +1 -0
- package/dist/transformer/call-detector.js +151 -0
- package/dist/transformer/call-detector.js.map +1 -0
- package/dist/transformer/command-injector.d.ts +27 -0
- package/dist/transformer/command-injector.d.ts.map +1 -0
- package/dist/transformer/command-injector.js +111 -0
- package/dist/transformer/command-injector.js.map +1 -0
- package/dist/transformer/diagnostic-reporter.d.ts +81 -0
- package/dist/transformer/diagnostic-reporter.d.ts.map +1 -0
- package/dist/transformer/diagnostic-reporter.js +330 -0
- package/dist/transformer/diagnostic-reporter.js.map +1 -0
- package/dist/transformer/each-scope-branch.d.ts +28 -0
- package/dist/transformer/each-scope-branch.d.ts.map +1 -0
- package/dist/transformer/each-scope-branch.js +95 -0
- package/dist/transformer/each-scope-branch.js.map +1 -0
- package/dist/transformer/each-state-rewriter.d.ts +117 -0
- package/dist/transformer/each-state-rewriter.d.ts.map +1 -0
- package/dist/transformer/each-state-rewriter.js +393 -0
- package/dist/transformer/each-state-rewriter.js.map +1 -0
- package/dist/transformer/format-diagnostics.d.ts +27 -0
- package/dist/transformer/format-diagnostics.d.ts.map +1 -0
- package/dist/transformer/format-diagnostics.js +50 -0
- package/dist/transformer/format-diagnostics.js.map +1 -0
- package/dist/transformer/handler-ir-extractor.d.ts +71 -0
- package/dist/transformer/handler-ir-extractor.d.ts.map +1 -0
- package/dist/transformer/handler-ir-extractor.js +171 -0
- package/dist/transformer/handler-ir-extractor.js.map +1 -0
- package/dist/transformer/handler-serializer.d.ts +56 -0
- package/dist/transformer/handler-serializer.d.ts.map +1 -0
- package/dist/transformer/handler-serializer.js +315 -0
- package/dist/transformer/handler-serializer.js.map +1 -0
- package/dist/transformer/helper-context-resolver.d.ts +180 -0
- package/dist/transformer/helper-context-resolver.d.ts.map +1 -0
- package/dist/transformer/helper-context-resolver.js +376 -0
- package/dist/transformer/helper-context-resolver.js.map +1 -0
- package/dist/transformer/helper-decl-utils.d.ts +28 -0
- package/dist/transformer/helper-decl-utils.d.ts.map +1 -0
- package/dist/transformer/helper-decl-utils.js +92 -0
- package/dist/transformer/helper-decl-utils.js.map +1 -0
- package/dist/transformer/identifier-collector.d.ts +28 -0
- package/dist/transformer/identifier-collector.d.ts.map +1 -0
- package/dist/transformer/identifier-collector.js +184 -0
- package/dist/transformer/identifier-collector.js.map +1 -0
- package/dist/transformer/index.d.ts +56 -0
- package/dist/transformer/index.d.ts.map +1 -0
- package/dist/transformer/index.js +333 -0
- package/dist/transformer/index.js.map +1 -0
- package/dist/transformer/inline-recovery.d.ts +109 -0
- package/dist/transformer/inline-recovery.d.ts.map +1 -0
- package/dist/transformer/inline-recovery.js +369 -0
- package/dist/transformer/inline-recovery.js.map +1 -0
- package/dist/transformer/label-injector.d.ts +105 -0
- package/dist/transformer/label-injector.d.ts.map +1 -0
- package/dist/transformer/label-injector.js +221 -0
- package/dist/transformer/label-injector.js.map +1 -0
- package/dist/transformer/package.json +3 -0
- package/dist/transformer/per-call-context.d.ts +95 -0
- package/dist/transformer/per-call-context.d.ts.map +1 -0
- package/dist/transformer/per-call-context.js +3 -0
- package/dist/transformer/per-call-context.js.map +1 -0
- package/dist/transformer/state-id-fallback.d.ts +85 -0
- package/dist/transformer/state-id-fallback.d.ts.map +1 -0
- package/dist/transformer/state-id-fallback.js +132 -0
- package/dist/transformer/state-id-fallback.js.map +1 -0
- package/dist/transformer/state-id-resolver.d.ts +104 -0
- package/dist/transformer/state-id-resolver.d.ts.map +1 -0
- package/dist/transformer/state-id-resolver.js +222 -0
- package/dist/transformer/state-id-resolver.js.map +1 -0
- package/dist/transformer/theme-class-detector.d.ts +47 -0
- package/dist/transformer/theme-class-detector.d.ts.map +1 -0
- package/dist/transformer/theme-class-detector.js +242 -0
- package/dist/transformer/theme-class-detector.js.map +1 -0
- package/dist/transformer/varname-resolver.d.ts +53 -0
- package/dist/transformer/varname-resolver.d.ts.map +1 -0
- package/dist/transformer/varname-resolver.js +231 -0
- package/dist/transformer/varname-resolver.js.map +1 -0
- package/dist/transformer/whitelist-registry.d.ts +68 -0
- package/dist/transformer/whitelist-registry.d.ts.map +1 -0
- package/dist/transformer/whitelist-registry.js +122 -0
- package/dist/transformer/whitelist-registry.js.map +1 -0
- package/dist/transformer/whitelist-validator.d.ts +59 -0
- package/dist/transformer/whitelist-validator.d.ts.map +1 -0
- package/dist/transformer/whitelist-validator.js +493 -0
- package/dist/transformer/whitelist-validator.js.map +1 -0
- package/dist/types-BXV3vhHS.d.cts +4590 -0
- package/dist/types-BXV3vhHS.d.ts +4590 -0
- package/package.json +121 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,4700 @@
|
|
|
1
|
+
import { H as HtmlAttributeShape, T as TagType, a as HTMLTagProtocol, b as HtmlTag, R as RenderContext, c as HtmlAttributeValue, S as StyleTemplate, d as SharedStyle, e as HtmlTagOptions, C as CssPositionMakerType, f as CssPlaceDescription, L as LazyLayoutRegister, g as CssLayoutBuilder, h as CssStyleManagerType, i as HtmlStyle, j as HlUnit, k as CssManagerInstance, l as CssConfig, I as IdentifierResolver, m as LayoutRegisteredItem, n as RelationShip, G as GlobalCss, o as StyleSelectors, J as JQueryManagerInstance, p as JQueryMethodType, E as ElementRef, q as ScriptScope } from './types-BXV3vhHS.js';
|
|
2
|
+
export { A as AttributeManageable, B as BooleanAttributeValue, r as BorderOptions, s as BreakpointKey, t as BreakpointStyles, u as Breakpoints, v as ButtonOptions, w as CSSAnimation, x as CSSBackground, y as CSSBorder, z as CSSColor, D as CSSColorName, F as CSSFlex, K as CSSFont, M as CSSGrid, N as CSSList, O as CSSSpacing, P as CSSTable, Q as CSSText, U as CSSTransform, V as CSSVisibility, W as CSSVisual, X as ChildManageable, Y as CollectionRef, Z as Computed, _ as CssConfigOptions, $ as CssConfigOutputMode, a0 as CssManagerType, a1 as CssOutputMode, a2 as CustomAttributeValue, a3 as EachBinding, a4 as EdgeSet, a5 as Exportable, a6 as ExprFactory, a7 as FileExporter, a8 as FileExporterOptions, a9 as FlexOptions, aa as FontOptions, ab as FrameOptions, ac as GridOptions, ad as HeadingLevel, ae as HtmlStyleType, af as JQUERY_METHOD_TYPES, ag as JQueryManagerProtocol, ah as JsBoolExpr, ai as JsExpr, aj as KeyValueAttributeValue, ak as LinkOptions, al as PageOptions, am as Positioning, an as PseudoStyleBuilder, ao as ReadableState, ap as Renderable, aq as SELF_CLOSING_TAGS, ar as ScriptStateHandle, as as SelectorRef, at as State, au as StateJsAccessor, av as TAG_TYPES, aw as TagStructure, ax as UnitStyle, ay as View, az as createBooleanValue, aA as createCustomValue, aB as createKeyValueValue, aC as createVanillaScript, aD as getTagStructure, aE as hlUnitToCssString } from './types-BXV3vhHS.js';
|
|
3
|
+
import { P as PairType, S as SelfClosingType, a as StackOptions, L as LayoutChild, b as SpacerOptions, Z as ZStackOptions } from './page-DylNkWXm.js';
|
|
4
|
+
export { A as Alignment, c as AlignmentValue, d as AppSlot, e as AppSlotOptions, B as Button, H as HStack, f as Heading, I as Image, g as Link, h as PageDocument, i as Section, j as Spacer, V as VStack, T as ViewText, k as ZStackAlignment, l as ZStackAlignmentKey, p as page } from './page-DylNkWXm.js';
|
|
5
|
+
export { AppDocument, AppOptions, AppView, app } from './entries/app.js';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Error codes specific to the HTML module.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```typescript
|
|
12
|
+
* const errorCode: HtmlErrorCode = 'invalidTag';
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
type HtmlErrorCode = 'invalidTag' | 'invalidAttribute' | 'nestingLimit';
|
|
16
|
+
/**
|
|
17
|
+
* Error codes specific to the CSS module.
|
|
18
|
+
*
|
|
19
|
+
* - `invalidProperty` - The CSS property name is invalid or unsupported
|
|
20
|
+
* - `invalidValue` - The CSS property value is invalid for the given property
|
|
21
|
+
* - `layoutConflict` - Conflicting layout properties detected
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```typescript
|
|
25
|
+
* const errorCode: CssErrorCode = 'invalidProperty';
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
type CssErrorCode = 'invalidProperty' | 'invalidValue' | 'layoutConflict' | 'duplicateProperty';
|
|
29
|
+
/**
|
|
30
|
+
* Error codes specific to the JavaScript module.
|
|
31
|
+
*
|
|
32
|
+
* - `invalidSelector` - The DOM selector is invalid or malformed
|
|
33
|
+
* - `unsupportedMethod` - The requested method is not supported
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```typescript
|
|
37
|
+
* const errorCode: JsErrorCode = 'invalidSelector';
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
type JsErrorCode = 'invalidSelector' | 'unsupportedMethod';
|
|
41
|
+
/**
|
|
42
|
+
* Error codes specific to the Publisher module (Exportable operations).
|
|
43
|
+
*
|
|
44
|
+
* Used when ExportableError extends DraftOleError.
|
|
45
|
+
*
|
|
46
|
+
* - `invalidPath` - The file path is invalid or inaccessible
|
|
47
|
+
* - `writeFailed` - The file write operation failed
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```typescript
|
|
51
|
+
* const errorCode: ExportableErrorCode = 'invalidPath';
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
54
|
+
type ExportableErrorCode = 'invalidPath' | 'writeFailed';
|
|
55
|
+
/**
|
|
56
|
+
* Union type of all error codes across all DraftOle modules.
|
|
57
|
+
*
|
|
58
|
+
* This type combines error codes from HTML, CSS, JS, and Publisher modules
|
|
59
|
+
* to provide a unified type for error handling throughout the library.
|
|
60
|
+
*
|
|
61
|
+
* @example
|
|
62
|
+
* ```typescript
|
|
63
|
+
* function handleError(code: DraftOleErrorCode, message: string) {
|
|
64
|
+
* // Handle any DraftOle error code
|
|
65
|
+
* }
|
|
66
|
+
* ```
|
|
67
|
+
*/
|
|
68
|
+
type DraftOleErrorCode = HtmlErrorCode | CssErrorCode | JsErrorCode | ExportableErrorCode;
|
|
69
|
+
/**
|
|
70
|
+
* Abstract base class for all DraftOle errors.
|
|
71
|
+
*
|
|
72
|
+
* This class serves as the foundation for all custom errors in the DraftOle library.
|
|
73
|
+
* Module-specific errors (HtmlError, CssError, JsError, ExportableError) extend this class
|
|
74
|
+
* to provide consistent error handling across the library.
|
|
75
|
+
*
|
|
76
|
+
* The class is abstract and cannot be instantiated directly. Subclasses must implement
|
|
77
|
+
* the `code` and `module` properties to specify the error type and origin.
|
|
78
|
+
*
|
|
79
|
+
* @example
|
|
80
|
+
* ```typescript
|
|
81
|
+
* class HtmlError extends DraftOleError {
|
|
82
|
+
* readonly code: HtmlErrorCode;
|
|
83
|
+
* readonly module = 'html' as const;
|
|
84
|
+
*
|
|
85
|
+
* constructor(code: HtmlErrorCode, message: string) {
|
|
86
|
+
* super(message);
|
|
87
|
+
* this.code = code;
|
|
88
|
+
* this.name = 'HtmlError';
|
|
89
|
+
* }
|
|
90
|
+
* }
|
|
91
|
+
*
|
|
92
|
+
* // Usage
|
|
93
|
+
* try {
|
|
94
|
+
* throw new HtmlError('invalidTag', 'Invalid HTML tag: <script>');
|
|
95
|
+
* } catch (error) {
|
|
96
|
+
* if (error instanceof DraftOleError) {
|
|
97
|
+
* console.log(`Error in ${error.module} module: ${error.message}`);
|
|
98
|
+
* console.log(`Error code: ${error.code}`);
|
|
99
|
+
* }
|
|
100
|
+
* }
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
declare abstract class DraftOleError extends Error {
|
|
104
|
+
/**
|
|
105
|
+
* The error code specific to the module where the error occurred.
|
|
106
|
+
*
|
|
107
|
+
* This property must be implemented by subclasses to identify the specific
|
|
108
|
+
* type of error that occurred.
|
|
109
|
+
*/
|
|
110
|
+
abstract readonly code: string | number;
|
|
111
|
+
/**
|
|
112
|
+
* The module where the error originated.
|
|
113
|
+
*
|
|
114
|
+
* This property identifies which DraftOle module threw the error,
|
|
115
|
+
* enabling module-specific error handling.
|
|
116
|
+
*/
|
|
117
|
+
abstract readonly module: 'html' | 'css' | 'js' | 'publisher';
|
|
118
|
+
/**
|
|
119
|
+
* Creates a new DraftOleError instance.
|
|
120
|
+
*
|
|
121
|
+
* This constructor is protected and can only be called from subclasses.
|
|
122
|
+
* Direct instantiation of DraftOleError is prevented.
|
|
123
|
+
*
|
|
124
|
+
* @param message - Human-readable error message describing what went wrong
|
|
125
|
+
*
|
|
126
|
+
* @throws {Error} When attempting to instantiate DraftOleError directly
|
|
127
|
+
*
|
|
128
|
+
* @example
|
|
129
|
+
* ```typescript
|
|
130
|
+
* // In a subclass
|
|
131
|
+
* class MyCustomError extends DraftOleError {
|
|
132
|
+
* readonly code = 'myError' as const;
|
|
133
|
+
* readonly module = 'html' as const;
|
|
134
|
+
*
|
|
135
|
+
* constructor(message: string) {
|
|
136
|
+
* super(message); // Calls DraftOleError constructor
|
|
137
|
+
* this.name = 'MyCustomError';
|
|
138
|
+
* }
|
|
139
|
+
* }
|
|
140
|
+
* ```
|
|
141
|
+
*/
|
|
142
|
+
constructor(message: string);
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* DEVモードで同一CSSプロパティが2回設定された場合にthrowされるエラー。
|
|
146
|
+
*
|
|
147
|
+
* `DRAFT_OLE_DEV=true` 環境変数が設定されている場合のみ発生する。
|
|
148
|
+
* 本番環境では後から設定した値で上書きされる(CSS仕様通り)。
|
|
149
|
+
*/
|
|
150
|
+
declare class DuplicateCssPropertyError extends DraftOleError {
|
|
151
|
+
readonly code: "duplicateProperty";
|
|
152
|
+
readonly module: "css";
|
|
153
|
+
constructor(property: string);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/**
|
|
157
|
+
* DEVモードでCSSプロパティの重複設定を検知するガード関数。
|
|
158
|
+
*
|
|
159
|
+
* `DRAFT_OLE_DEV=true` 環境変数が設定されている場合のみ動作する。
|
|
160
|
+
* currentValue が undefined でない(= 既に値が設定済み)なら
|
|
161
|
+
* DuplicateCssPropertyError をthrowする。
|
|
162
|
+
*
|
|
163
|
+
* @param currentValue - 現在のプロパティ値(undefined = 未設定)
|
|
164
|
+
* @param propertyName - CSSプロパティ名(エラーメッセージ用)
|
|
165
|
+
*/
|
|
166
|
+
declare function guardDuplicateCssProperty(currentValue: unknown, propertyName: string): void;
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* Boolean attribute キー定義(26 要素)
|
|
170
|
+
*
|
|
171
|
+
* Swift版 AttributeKeys enum 由来の boolean 属性集合を、type union と
|
|
172
|
+
* ランタイム検証用 const 配列のペアとして提供する。
|
|
173
|
+
*/
|
|
174
|
+
/**
|
|
175
|
+
* Valid HTML boolean attribute keys.
|
|
176
|
+
*
|
|
177
|
+
* @remarks
|
|
178
|
+
* Boolean attributes are rendered without values (e.g., `disabled`, not `disabled="true"`).
|
|
179
|
+
* This type includes 26 standard HTML boolean attributes.
|
|
180
|
+
*
|
|
181
|
+
* @example
|
|
182
|
+
* ```typescript
|
|
183
|
+
* const key: BooleanAttributeKey = 'disabled';
|
|
184
|
+
* const attr = HtmlAttribute.boolean(key);
|
|
185
|
+
* attr.renderAttribute(); // Returns: 'disabled'
|
|
186
|
+
* ```
|
|
187
|
+
*
|
|
188
|
+
* @see {@link BOOLEAN_ATTRIBUTE_KEYS} for runtime validation array
|
|
189
|
+
*/
|
|
190
|
+
type BooleanAttributeKey = 'allowfullscreen' | 'async' | 'autofocus' | 'autoplay' | 'checked' | 'controls' | 'default' | 'defer' | 'disabled' | 'formnovalidate' | 'hidden' | 'inert' | 'ismap' | 'itemscope' | 'loop' | 'multiple' | 'muted' | 'nomodule' | 'novalidate' | 'open' | 'playsinline' | 'readonly' | 'required' | 'reversed' | 'selected' | 'truespeed';
|
|
191
|
+
/**
|
|
192
|
+
* Array of all valid boolean attribute keys for runtime validation.
|
|
193
|
+
*
|
|
194
|
+
* @remarks
|
|
195
|
+
* Use this for runtime checks, schema validation, or listing available boolean attributes.
|
|
196
|
+
*
|
|
197
|
+
* @example
|
|
198
|
+
* ```typescript
|
|
199
|
+
* function isBooleanAttribute(key: string): key is BooleanAttributeKey {
|
|
200
|
+
* return BOOLEAN_ATTRIBUTE_KEYS.includes(key as BooleanAttributeKey);
|
|
201
|
+
* }
|
|
202
|
+
* ```
|
|
203
|
+
*/
|
|
204
|
+
declare const BOOLEAN_ATTRIBUTE_KEYS: readonly BooleanAttributeKey[];
|
|
205
|
+
|
|
206
|
+
/**
|
|
207
|
+
* Key-value attribute キー定義(73 要素)
|
|
208
|
+
*
|
|
209
|
+
* Swift版 AttributeKeys enum 由来の key-value 属性集合を、type union と
|
|
210
|
+
* ランタイム検証用 const 配列のペアとして提供する。
|
|
211
|
+
*/
|
|
212
|
+
/**
|
|
213
|
+
* Valid HTML key-value attribute keys.
|
|
214
|
+
*
|
|
215
|
+
* @remarks
|
|
216
|
+
* Key-value attributes are rendered as `key="value"` with automatic HTML escaping.
|
|
217
|
+
* This type includes 73 standard HTML key-value attributes.
|
|
218
|
+
*
|
|
219
|
+
* @example
|
|
220
|
+
* ```typescript
|
|
221
|
+
* const key: KeyValueAttributeKey = 'id';
|
|
222
|
+
* const attr = HtmlAttribute.keyValue(key, 'main-content');
|
|
223
|
+
* attr.renderAttribute(); // Returns: 'id="main-content"'
|
|
224
|
+
* ```
|
|
225
|
+
*
|
|
226
|
+
* @see {@link KEY_VALUE_ATTRIBUTE_KEYS} for runtime validation array
|
|
227
|
+
*/
|
|
228
|
+
type KeyValueAttributeKey = 'accept' | 'accept-charset' | 'accesskey' | 'action' | 'alt' | 'as' | 'autocomplete' | 'charset' | 'cite' | 'class' | 'cols' | 'colspan' | 'content' | 'contenteditable' | 'coords' | 'crossorigin' | 'data' | 'datetime' | 'decoding' | 'dir' | 'download' | 'draggable' | 'enctype' | 'for' | 'formaction' | 'headers' | 'height' | 'href' | 'hreflang' | 'id' | 'inputmode' | 'integrity' | 'label' | 'lang' | 'list' | 'loading' | 'max' | 'maxlength' | 'media' | 'method' | 'min' | 'minlength' | 'name' | 'pattern' | 'placeholder' | 'poster' | 'preload' | 'rel' | 'referrerpolicy' | 'role' | 'rows' | 'rowspan' | 'sandbox' | 'scope' | 'shape' | 'size' | 'sizes' | 'slot' | 'src' | 'srcdoc' | 'srclang' | 'srcset' | 'step' | 'style' | 'tabindex' | 'target' | 'title' | 'translate' | 'type' | 'usemap' | 'value' | 'width' | 'wrap';
|
|
229
|
+
/**
|
|
230
|
+
* Array of all valid key-value attribute keys for runtime validation.
|
|
231
|
+
*
|
|
232
|
+
* @remarks
|
|
233
|
+
* Use this for runtime checks, schema validation, or listing available key-value attributes.
|
|
234
|
+
*
|
|
235
|
+
* @example
|
|
236
|
+
* ```typescript
|
|
237
|
+
* function isKeyValueAttribute(key: string): key is KeyValueAttributeKey {
|
|
238
|
+
* return KEY_VALUE_ATTRIBUTE_KEYS.includes(key as KeyValueAttributeKey);
|
|
239
|
+
* }
|
|
240
|
+
* ```
|
|
241
|
+
*/
|
|
242
|
+
declare const KEY_VALUE_ATTRIBUTE_KEYS: readonly KeyValueAttributeKey[];
|
|
243
|
+
|
|
244
|
+
/**
|
|
245
|
+
* ARIA attribute キー定義(7 要素)
|
|
246
|
+
*
|
|
247
|
+
* Accessible Rich Internet Applications 仕様に基づく ARIA 属性集合を、
|
|
248
|
+
* type union とランタイム検証用 const 配列のペアとして提供する。
|
|
249
|
+
*/
|
|
250
|
+
/**
|
|
251
|
+
* Valid ARIA (Accessible Rich Internet Applications) attribute keys.
|
|
252
|
+
*
|
|
253
|
+
* @remarks
|
|
254
|
+
* ARIA attributes enhance accessibility for assistive technologies.
|
|
255
|
+
* This type includes 7 commonly used ARIA attributes.
|
|
256
|
+
*
|
|
257
|
+
* @example
|
|
258
|
+
* ```typescript
|
|
259
|
+
* const key: AriaAttributeKey = 'aria-label';
|
|
260
|
+
* const attr = HtmlAttribute.keyValue(key, 'Close dialog');
|
|
261
|
+
* attr.renderAttribute(); // Returns: 'aria-label="Close dialog"'
|
|
262
|
+
* ```
|
|
263
|
+
*
|
|
264
|
+
* @see {@link ARIA_ATTRIBUTE_KEYS} for runtime validation array
|
|
265
|
+
* @see {@link https://www.w3.org/WAI/ARIA/apg/} for ARIA best practices
|
|
266
|
+
*/
|
|
267
|
+
type AriaAttributeKey = 'aria-label' | 'aria-hidden' | 'aria-expanded' | 'aria-controls' | 'aria-live' | 'aria-describedby' | 'aria-role';
|
|
268
|
+
/**
|
|
269
|
+
* Array of all valid ARIA attribute keys for runtime validation.
|
|
270
|
+
*
|
|
271
|
+
* @remarks
|
|
272
|
+
* Use this for runtime checks, schema validation, or listing available ARIA attributes.
|
|
273
|
+
*
|
|
274
|
+
* @example
|
|
275
|
+
* ```typescript
|
|
276
|
+
* function isAriaAttribute(key: string): key is AriaAttributeKey {
|
|
277
|
+
* return ARIA_ATTRIBUTE_KEYS.includes(key as AriaAttributeKey);
|
|
278
|
+
* }
|
|
279
|
+
* ```
|
|
280
|
+
*/
|
|
281
|
+
declare const ARIA_ATTRIBUTE_KEYS: readonly AriaAttributeKey[];
|
|
282
|
+
|
|
283
|
+
/**
|
|
284
|
+
* Form 系 type 属性値定義(input type 22 種 + button type 3 種)
|
|
285
|
+
*
|
|
286
|
+
* いずれも form 系列の小型データであり、相互依存のないペアとして同居させる。
|
|
287
|
+
* type union とランタイム検証用 const 配列をそれぞれ提供する。
|
|
288
|
+
*/
|
|
289
|
+
/**
|
|
290
|
+
* Valid HTML input element type attribute values.
|
|
291
|
+
*
|
|
292
|
+
* @remarks
|
|
293
|
+
* This type includes all 22 standard HTML5 input types.
|
|
294
|
+
* Use with {@link HtmlAttribute.inputType} for type-safe input type attributes.
|
|
295
|
+
*
|
|
296
|
+
* @example
|
|
297
|
+
* ```typescript
|
|
298
|
+
* const emailType: InputType = 'email';
|
|
299
|
+
* const attr = HtmlAttribute.inputType(emailType);
|
|
300
|
+
* attr.renderAttribute(); // Returns: 'type="email"'
|
|
301
|
+
*
|
|
302
|
+
* // In an input builder
|
|
303
|
+
* new InputAttributeBuilder()
|
|
304
|
+
* .setInputType('password')
|
|
305
|
+
* .setPlaceholder('Enter password')
|
|
306
|
+
* .build();
|
|
307
|
+
* ```
|
|
308
|
+
*
|
|
309
|
+
* @see {@link INPUT_TYPES} for runtime validation array
|
|
310
|
+
* @see {@link HtmlAttribute.inputType} for creating input type attributes
|
|
311
|
+
*/
|
|
312
|
+
type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color' | 'range' | 'file' | 'checkbox' | 'radio' | 'hidden' | 'submit' | 'reset' | 'button' | 'image';
|
|
313
|
+
/**
|
|
314
|
+
* Array of all valid HTML input types for runtime validation.
|
|
315
|
+
*
|
|
316
|
+
* @remarks
|
|
317
|
+
* Use this for runtime checks, schema validation, or listing available input types.
|
|
318
|
+
*
|
|
319
|
+
* @example
|
|
320
|
+
* ```typescript
|
|
321
|
+
* function isValidInputType(type: string): type is InputType {
|
|
322
|
+
* return INPUT_TYPES.includes(type as InputType);
|
|
323
|
+
* }
|
|
324
|
+
*
|
|
325
|
+
* // Generate form field based on type
|
|
326
|
+
* INPUT_TYPES.forEach(type => {
|
|
327
|
+
* console.log(`<input type="${type}">`);
|
|
328
|
+
* });
|
|
329
|
+
* ```
|
|
330
|
+
*/
|
|
331
|
+
declare const INPUT_TYPES: readonly InputType[];
|
|
332
|
+
/**
|
|
333
|
+
* Valid HTML button element type attribute values.
|
|
334
|
+
*
|
|
335
|
+
* @remarks
|
|
336
|
+
* This type includes the 3 standard HTML button types:
|
|
337
|
+
* - `submit` - Submits the form (default behavior)
|
|
338
|
+
* - `reset` - Resets form fields to their initial values
|
|
339
|
+
* - `button` - No default behavior (for custom JavaScript)
|
|
340
|
+
*
|
|
341
|
+
* @example
|
|
342
|
+
* ```typescript
|
|
343
|
+
* const submitType: ButtonType = 'submit';
|
|
344
|
+
* const attr = HtmlAttribute.buttonType(submitType);
|
|
345
|
+
* attr.renderAttribute(); // Returns: 'type="submit"'
|
|
346
|
+
*
|
|
347
|
+
* // In a button builder
|
|
348
|
+
* new ButtonAttributeBuilder()
|
|
349
|
+
* .setButtonType('button')
|
|
350
|
+
* .setId('close-dialog')
|
|
351
|
+
* .build();
|
|
352
|
+
* ```
|
|
353
|
+
*
|
|
354
|
+
* @see {@link BUTTON_TYPES} for runtime validation array
|
|
355
|
+
* @see {@link HtmlAttribute.buttonType} for creating button type attributes
|
|
356
|
+
*/
|
|
357
|
+
type ButtonType = 'submit' | 'reset' | 'button';
|
|
358
|
+
/**
|
|
359
|
+
* Array of all valid HTML button types for runtime validation.
|
|
360
|
+
*
|
|
361
|
+
* @remarks
|
|
362
|
+
* Use this for runtime checks, schema validation, or listing available button types.
|
|
363
|
+
*
|
|
364
|
+
* @example
|
|
365
|
+
* ```typescript
|
|
366
|
+
* function isValidButtonType(type: string): type is ButtonType {
|
|
367
|
+
* return BUTTON_TYPES.includes(type as ButtonType);
|
|
368
|
+
* }
|
|
369
|
+
*
|
|
370
|
+
* // Generate buttons for all types
|
|
371
|
+
* BUTTON_TYPES.forEach(type => {
|
|
372
|
+
* console.log(`<button type="${type}">Click me</button>`);
|
|
373
|
+
* });
|
|
374
|
+
* ```
|
|
375
|
+
*/
|
|
376
|
+
declare const BUTTON_TYPES: readonly ButtonType[];
|
|
377
|
+
|
|
378
|
+
/**
|
|
379
|
+
* HtmlAttributeManagerProtocol: 属性の追加・取得・レンダリングを定義
|
|
380
|
+
*
|
|
381
|
+
* Requirements: 1.2
|
|
382
|
+
*/
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* HTML属性の管理機能を提供するインターフェース
|
|
386
|
+
*
|
|
387
|
+
* このインターフェースは、HTML要素の属性を追加し、レンダリングする責務を定義します。
|
|
388
|
+
* 属性の追加、参照、HTML文字列への変換をサポートします。
|
|
389
|
+
*
|
|
390
|
+
* @remarks
|
|
391
|
+
* 属性は追加順に保持されます。
|
|
392
|
+
* 同じキーの属性が複数追加された場合、レンダリング時には最後に追加されたものが優先されます(HTML仕様に従う)。
|
|
393
|
+
*
|
|
394
|
+
* @example
|
|
395
|
+
* ```typescript
|
|
396
|
+
* class MyAttributeManager implements HtmlAttributeManagerProtocol {
|
|
397
|
+
* private _attributes: HtmlAttributeShape[] = [];
|
|
398
|
+
*
|
|
399
|
+
* get attributes(): ReadonlyArray<HtmlAttributeShape> {
|
|
400
|
+
* return this._attributes;
|
|
401
|
+
* }
|
|
402
|
+
*
|
|
403
|
+
* addHtmlAttribute(attribute: HtmlAttributeShape): void {
|
|
404
|
+
* this._attributes.push(attribute);
|
|
405
|
+
* }
|
|
406
|
+
*
|
|
407
|
+
* renderAttributes(): string {
|
|
408
|
+
* return this._attributes
|
|
409
|
+
* .map(attr => attr.renderAttribute())
|
|
410
|
+
* .join(' ');
|
|
411
|
+
* }
|
|
412
|
+
* }
|
|
413
|
+
* ```
|
|
414
|
+
*/
|
|
415
|
+
interface HtmlAttributeManagerProtocol {
|
|
416
|
+
/**
|
|
417
|
+
* 管理されている属性の読み取り専用配列
|
|
418
|
+
*
|
|
419
|
+
* @remarks
|
|
420
|
+
* 属性は追加順に保持されます。
|
|
421
|
+
* 直接配列を変更することはできません。addHtmlAttribute メソッドを使用してください。
|
|
422
|
+
*/
|
|
423
|
+
readonly attributes: ReadonlyArray<HtmlAttributeShape>;
|
|
424
|
+
/**
|
|
425
|
+
* HTML属性を1つ追加
|
|
426
|
+
*
|
|
427
|
+
* @param attribute - 追加する属性オブジェクト
|
|
428
|
+
*
|
|
429
|
+
* @remarks
|
|
430
|
+
* 属性は配列の末尾に追加されます。
|
|
431
|
+
* 同じキーの属性が既に存在する場合でも追加され、レンダリング時には最後に追加された値が使用されます。
|
|
432
|
+
*
|
|
433
|
+
* @example
|
|
434
|
+
* ```typescript
|
|
435
|
+
* manager.addHtmlAttribute(new HtmlAttribute('id', 'test-id'));
|
|
436
|
+
* manager.addHtmlAttribute(new HtmlAttribute('class', 'btn'));
|
|
437
|
+
* ```
|
|
438
|
+
*/
|
|
439
|
+
addHtmlAttribute(attribute: HtmlAttributeShape): void;
|
|
440
|
+
/**
|
|
441
|
+
* すべての属性をHTML文字列としてレンダリング
|
|
442
|
+
*
|
|
443
|
+
* @returns 属性の文字列表現(例: `id="test" class="btn"`)
|
|
444
|
+
*
|
|
445
|
+
* @remarks
|
|
446
|
+
* 各属性は `renderAttribute()` メソッドで文字列化され、スペース区切りで連結されます。
|
|
447
|
+
* 属性がない場合は空文字列を返します。
|
|
448
|
+
*
|
|
449
|
+
* @example
|
|
450
|
+
* ```typescript
|
|
451
|
+
* manager.addHtmlAttribute(new HtmlAttribute('id', 'test-id'));
|
|
452
|
+
* manager.addHtmlAttribute(new HtmlAttribute('class', 'btn'));
|
|
453
|
+
* console.log(manager.renderAttributes()); // 'id="test-id" class="btn"'
|
|
454
|
+
* ```
|
|
455
|
+
*/
|
|
456
|
+
renderAttributes(): string;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
/**
|
|
460
|
+
* TagGenerateProtocol: タグ生成を定義するインターフェース
|
|
461
|
+
*
|
|
462
|
+
* Requirements: 1.3
|
|
463
|
+
*/
|
|
464
|
+
|
|
465
|
+
/**
|
|
466
|
+
* HTMLタグを動的に生成するファクトリインターフェース
|
|
467
|
+
*
|
|
468
|
+
* このインターフェースは、タグ種別(TagType)を指定してHTMLタグインスタンスを生成する
|
|
469
|
+
* ファクトリパターンの契約を定義します。
|
|
470
|
+
*
|
|
471
|
+
* @remarks
|
|
472
|
+
* - タグ種別に応じて、PairType(開始/終了タグのペア)またはSelfClosingType(自己閉鎖タグ)が生成されます
|
|
473
|
+
* - 生成されたタグは HTMLTagProtocol を実装しており、メソッドチェーンによる構築が可能です
|
|
474
|
+
*
|
|
475
|
+
* Preconditions: tagType は有効な TagType 値である必要があります
|
|
476
|
+
* Postconditions: 生成されたタグは HTMLTagProtocol を満たします
|
|
477
|
+
*
|
|
478
|
+
* @example
|
|
479
|
+
* ```typescript
|
|
480
|
+
* class TagFactory implements TagGenerateProtocol {
|
|
481
|
+
* generateTag(tagType: TagType): HTMLTagProtocol {
|
|
482
|
+
* if (tagType === 'img' || tagType === 'br') {
|
|
483
|
+
* return new SelfClosingType(tagType);
|
|
484
|
+
* }
|
|
485
|
+
* return new PairType(tagType);
|
|
486
|
+
* }
|
|
487
|
+
* }
|
|
488
|
+
*
|
|
489
|
+
* const factory = new TagFactory();
|
|
490
|
+
* const div = factory.generateTag('div');
|
|
491
|
+
* const img = factory.generateTag('img');
|
|
492
|
+
* ```
|
|
493
|
+
*/
|
|
494
|
+
interface TagGenerateProtocol {
|
|
495
|
+
/**
|
|
496
|
+
* 指定されたタグ種別のHTMLタグインスタンスを生成
|
|
497
|
+
*
|
|
498
|
+
* @param tagType - 生成するタグの種別(例: 'div', 'p', 'img'など)
|
|
499
|
+
* @returns 生成されたHTMLTagProtocolを実装するインスタンス
|
|
500
|
+
*
|
|
501
|
+
* @remarks
|
|
502
|
+
* タグ種別に応じて適切な実装クラス(PairType または SelfClosingType)のインスタンスを返します。
|
|
503
|
+
* 生成されたタグは空の状態(子要素なし、属性なし)で返されます。
|
|
504
|
+
*
|
|
505
|
+
* @example
|
|
506
|
+
* ```typescript
|
|
507
|
+
* const div = generator.generateTag('div');
|
|
508
|
+
* div.addChild(new TextType('Hello'));
|
|
509
|
+
* console.log(div.render()); // <div>Hello</div>
|
|
510
|
+
* ```
|
|
511
|
+
*/
|
|
512
|
+
generateTag(tagType: TagType): HTMLTagProtocol;
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
/**
|
|
516
|
+
* AttributeBuilderProtocol: 属性ビルダーの共通インターフェース
|
|
517
|
+
*
|
|
518
|
+
* 要素種別に応じた属性設定を型安全に行うビルダーの契約を定義する。
|
|
519
|
+
* 各メソッドは this を返し、フルエントAPIチェーンを可能にする。
|
|
520
|
+
*
|
|
521
|
+
* Preconditions: なし(空のビルダーも有効)
|
|
522
|
+
* Postconditions: build() は設定済みの属性配列を返す
|
|
523
|
+
*
|
|
524
|
+
* Requirements: 1.6
|
|
525
|
+
*/
|
|
526
|
+
|
|
527
|
+
/**
|
|
528
|
+
* HTML属性をビルダーパターンで構築するインターフェース
|
|
529
|
+
*
|
|
530
|
+
* このインターフェースは、HTML要素の属性を型安全かつ流暢なAPIで設定するビルダーの契約を定義します。
|
|
531
|
+
* フルエントAPI(メソッドチェーン)をサポートし、複雑な属性設定を読みやすく記述できます。
|
|
532
|
+
*
|
|
533
|
+
* @remarks
|
|
534
|
+
* サポートする属性の種類:
|
|
535
|
+
* - 共通属性: id, title, lang, role, tabindex, hidden
|
|
536
|
+
* - ARIA属性: aria-label, aria-hidden, aria-expanded
|
|
537
|
+
* - カスタム属性: data-*など任意の属性
|
|
538
|
+
* - class属性: 複数クラスの追加、条件付き追加をサポート
|
|
539
|
+
*
|
|
540
|
+
* すべてのメソッドは `this` を返すため、メソッドチェーンが可能です。
|
|
541
|
+
* 最終的に `build()` を呼び出して、設定された属性の配列を取得します。
|
|
542
|
+
*
|
|
543
|
+
* Preconditions: なし(空のビルダーも有効)
|
|
544
|
+
* Postconditions: build() は設定済みの属性配列を返す
|
|
545
|
+
* Invariants: メソッド呼び出し順序は属性の順序に影響しない
|
|
546
|
+
*
|
|
547
|
+
* @example
|
|
548
|
+
* ```typescript
|
|
549
|
+
* const builder = new AttributeBuilder();
|
|
550
|
+
* const attributes = builder
|
|
551
|
+
* .setId('my-button')
|
|
552
|
+
* .addClass('btn', 'btn-primary')
|
|
553
|
+
* .setRole('button')
|
|
554
|
+
* .setAriaLabel('Submit form')
|
|
555
|
+
* .setCustomAttribute('data-action', 'submit')
|
|
556
|
+
* .build();
|
|
557
|
+
* ```
|
|
558
|
+
*/
|
|
559
|
+
interface AttributeBuilderProtocol {
|
|
560
|
+
/**
|
|
561
|
+
* id属性を設定
|
|
562
|
+
*
|
|
563
|
+
* @param id - 要素の一意識別子
|
|
564
|
+
* @returns メソッドチェーンのため、this を返す
|
|
565
|
+
*
|
|
566
|
+
* @example
|
|
567
|
+
* ```typescript
|
|
568
|
+
* builder.setId('my-element');
|
|
569
|
+
* ```
|
|
570
|
+
*/
|
|
571
|
+
setId(id: string): this;
|
|
572
|
+
/**
|
|
573
|
+
* title属性を設定(ツールチップテキスト)
|
|
574
|
+
*
|
|
575
|
+
* @param title - 要素のツールチップに表示されるテキスト
|
|
576
|
+
* @returns メソッドチェーンのため、this を返す
|
|
577
|
+
*
|
|
578
|
+
* @example
|
|
579
|
+
* ```typescript
|
|
580
|
+
* builder.setTitle('Click to submit');
|
|
581
|
+
* ```
|
|
582
|
+
*/
|
|
583
|
+
setTitle(title: string): this;
|
|
584
|
+
/**
|
|
585
|
+
* lang属性を設定(要素の言語コード)
|
|
586
|
+
*
|
|
587
|
+
* @param lang - ISO 639-1言語コード(例: 'en', 'ja', 'fr')
|
|
588
|
+
* @returns メソッドチェーンのため、this を返す
|
|
589
|
+
*
|
|
590
|
+
* @example
|
|
591
|
+
* ```typescript
|
|
592
|
+
* builder.setLang('ja');
|
|
593
|
+
* ```
|
|
594
|
+
*/
|
|
595
|
+
setLang(lang: string): this;
|
|
596
|
+
/**
|
|
597
|
+
* role属性を設定(ARIA役割)
|
|
598
|
+
*
|
|
599
|
+
* @param role - ARIA役割(例: 'button', 'navigation', 'main')
|
|
600
|
+
* @returns メソッドチェーンのため、this を返す
|
|
601
|
+
*
|
|
602
|
+
* @example
|
|
603
|
+
* ```typescript
|
|
604
|
+
* builder.setRole('navigation');
|
|
605
|
+
* ```
|
|
606
|
+
*/
|
|
607
|
+
setRole(role: string): this;
|
|
608
|
+
/**
|
|
609
|
+
* tabindex属性を設定(タブ順序)
|
|
610
|
+
*
|
|
611
|
+
* @param index - タブインデックス(-1: フォーカス不可、0: 自然順、1+: 明示的順序)
|
|
612
|
+
* @returns メソッドチェーンのため、this を返す
|
|
613
|
+
*
|
|
614
|
+
* @example
|
|
615
|
+
* ```typescript
|
|
616
|
+
* builder.setTabindex(0); // 自然なタブ順序
|
|
617
|
+
* builder.setTabindex(-1); // タブでフォーカスできないようにする
|
|
618
|
+
* ```
|
|
619
|
+
*/
|
|
620
|
+
setTabindex(index: number): this;
|
|
621
|
+
/**
|
|
622
|
+
* hidden属性を設定(要素の表示/非表示)
|
|
623
|
+
*
|
|
624
|
+
* @param hidden - true の場合、要素を非表示にする
|
|
625
|
+
* @returns メソッドチェーンのため、this を返す
|
|
626
|
+
*
|
|
627
|
+
* @example
|
|
628
|
+
* ```typescript
|
|
629
|
+
* builder.setHidden(true); // 要素を非表示
|
|
630
|
+
* ```
|
|
631
|
+
*/
|
|
632
|
+
setHidden(hidden: boolean): this;
|
|
633
|
+
/**
|
|
634
|
+
* カスタム属性を設定(data-*など任意の属性)
|
|
635
|
+
*
|
|
636
|
+
* @param name - 属性名(例: 'data-user-id', 'data-action')
|
|
637
|
+
* @param value - 属性値
|
|
638
|
+
* @returns メソッドチェーンのため、this を返す
|
|
639
|
+
*
|
|
640
|
+
* @example
|
|
641
|
+
* ```typescript
|
|
642
|
+
* builder.setCustomAttribute('data-user-id', '12345');
|
|
643
|
+
* builder.setCustomAttribute('data-action', 'submit');
|
|
644
|
+
* ```
|
|
645
|
+
*/
|
|
646
|
+
setCustomAttribute(name: string, value: string): this;
|
|
647
|
+
/**
|
|
648
|
+
* aria-label属性を設定(スクリーンリーダー用ラベル)
|
|
649
|
+
*
|
|
650
|
+
* @param label - アクセシビリティラベル
|
|
651
|
+
* @returns メソッドチェーンのため、this を返す
|
|
652
|
+
*
|
|
653
|
+
* @example
|
|
654
|
+
* ```typescript
|
|
655
|
+
* builder.setAriaLabel('Close dialog');
|
|
656
|
+
* ```
|
|
657
|
+
*/
|
|
658
|
+
setAriaLabel(label: string): this;
|
|
659
|
+
/**
|
|
660
|
+
* aria-hidden属性を設定(スクリーンリーダーから隠す)
|
|
661
|
+
*
|
|
662
|
+
* @param hidden - true の場合、スクリーンリーダーから隠す
|
|
663
|
+
* @returns メソッドチェーンのため、this を返す
|
|
664
|
+
*
|
|
665
|
+
* @example
|
|
666
|
+
* ```typescript
|
|
667
|
+
* builder.setAriaHidden(true); // スクリーンリーダーから隠す
|
|
668
|
+
* ```
|
|
669
|
+
*/
|
|
670
|
+
setAriaHidden(hidden: boolean): this;
|
|
671
|
+
/**
|
|
672
|
+
* aria-expanded属性を設定(展開状態を示す)
|
|
673
|
+
*
|
|
674
|
+
* @param expanded - true の場合、要素が展開されていることを示す
|
|
675
|
+
* @returns メソッドチェーンのため、this を返す
|
|
676
|
+
*
|
|
677
|
+
* @example
|
|
678
|
+
* ```typescript
|
|
679
|
+
* builder.setAriaExpanded(true); // メニューが展開されている
|
|
680
|
+
* ```
|
|
681
|
+
*/
|
|
682
|
+
setAriaExpanded(expanded: boolean): this;
|
|
683
|
+
/**
|
|
684
|
+
* クラス名を1つまたは複数追加
|
|
685
|
+
*
|
|
686
|
+
* @param classNames - 追加するクラス名(可変長引数)
|
|
687
|
+
* @returns メソッドチェーンのため、this を返す
|
|
688
|
+
*
|
|
689
|
+
* @example
|
|
690
|
+
* ```typescript
|
|
691
|
+
* builder.addClass('btn');
|
|
692
|
+
* builder.addClass('btn', 'btn-primary', 'btn-lg');
|
|
693
|
+
* ```
|
|
694
|
+
*/
|
|
695
|
+
addClass(...classNames: string[]): this;
|
|
696
|
+
/**
|
|
697
|
+
* クラス名の配列を追加
|
|
698
|
+
*
|
|
699
|
+
* @param classNames - 追加するクラス名の配列
|
|
700
|
+
* @returns メソッドチェーンのため、this を返す
|
|
701
|
+
*
|
|
702
|
+
* @example
|
|
703
|
+
* ```typescript
|
|
704
|
+
* const classes = ['btn', 'btn-primary', 'btn-lg'];
|
|
705
|
+
* builder.addClasses(classes);
|
|
706
|
+
* ```
|
|
707
|
+
*/
|
|
708
|
+
addClasses(classNames: string[]): this;
|
|
709
|
+
/**
|
|
710
|
+
* 条件付きでクラス名を追加
|
|
711
|
+
*
|
|
712
|
+
* @param className - 追加するクラス名
|
|
713
|
+
* @param condition - true の場合のみクラスを追加
|
|
714
|
+
* @returns メソッドチェーンのため、this を返す
|
|
715
|
+
*
|
|
716
|
+
* @remarks
|
|
717
|
+
* 条件に応じてクラスを動的に追加する場合に便利です。
|
|
718
|
+
*
|
|
719
|
+
* @example
|
|
720
|
+
* ```typescript
|
|
721
|
+
* const isActive = true;
|
|
722
|
+
* const isDisabled = false;
|
|
723
|
+
* builder
|
|
724
|
+
* .addClassWhen('active', isActive) // 'active' が追加される
|
|
725
|
+
* .addClassWhen('disabled', isDisabled); // 追加されない
|
|
726
|
+
* ```
|
|
727
|
+
*/
|
|
728
|
+
addClassWhen(className: string, condition: boolean): this;
|
|
729
|
+
/**
|
|
730
|
+
* クラス名と条件のマップから、条件が true のクラスを追加
|
|
731
|
+
*
|
|
732
|
+
* @param classMap - クラス名をキー、条件を値とするオブジェクト
|
|
733
|
+
* @returns メソッドチェーンのため、this を返す
|
|
734
|
+
*
|
|
735
|
+
* @remarks
|
|
736
|
+
* 複数の条件付きクラスを一度に設定する場合に便利です。
|
|
737
|
+
*
|
|
738
|
+
* @example
|
|
739
|
+
* ```typescript
|
|
740
|
+
* builder.addClassesToggle({
|
|
741
|
+
* 'active': isActive, // isActive が true なら 'active' を追加
|
|
742
|
+
* 'disabled': isDisabled, // isDisabled が true なら 'disabled' を追加
|
|
743
|
+
* 'selected': isSelected // isSelected が true なら 'selected' を追加
|
|
744
|
+
* });
|
|
745
|
+
* ```
|
|
746
|
+
*/
|
|
747
|
+
addClassesToggle(classMap: Record<string, boolean>): this;
|
|
748
|
+
/**
|
|
749
|
+
* 設定された属性を HtmlAttributeShape の配列として構築
|
|
750
|
+
*
|
|
751
|
+
* @returns 設定された属性の配列
|
|
752
|
+
*
|
|
753
|
+
* @remarks
|
|
754
|
+
* このメソッドを呼び出すことで、ビルダーに設定されたすべての属性を
|
|
755
|
+
* HtmlAttributeShape の配列として取得できます。
|
|
756
|
+
* 通常、これはHTML要素の構築の最終ステップで呼び出されます。
|
|
757
|
+
*
|
|
758
|
+
* @example
|
|
759
|
+
* ```typescript
|
|
760
|
+
* const attributes = builder
|
|
761
|
+
* .setId('my-button')
|
|
762
|
+
* .addClass('btn', 'btn-primary')
|
|
763
|
+
* .setRole('button')
|
|
764
|
+
* .build();
|
|
765
|
+
*
|
|
766
|
+
* // attributes は HtmlAttributeShape[] 型
|
|
767
|
+
* attributes.forEach(attr => {
|
|
768
|
+
* console.log(attr.renderAttribute());
|
|
769
|
+
* });
|
|
770
|
+
* ```
|
|
771
|
+
*/
|
|
772
|
+
build(): HtmlAttributeShape[];
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
/**
|
|
776
|
+
* Task 4.4: TextType テキストノード
|
|
777
|
+
*
|
|
778
|
+
* テキスト内容を返すテキストノードクラス。
|
|
779
|
+
* テキストノードは属性を持たず、子要素も持たない。
|
|
780
|
+
*
|
|
781
|
+
* レンダリング:
|
|
782
|
+
* protoRender() → content を返す(デフォルトはエスケープ済み)
|
|
783
|
+
* render() → protoRender() → HTMLFormatter.format()
|
|
784
|
+
* (テキストのみの場合はそのまま返される)
|
|
785
|
+
*
|
|
786
|
+
* Requirements: 3.4, 6.3
|
|
787
|
+
*/
|
|
788
|
+
|
|
789
|
+
/**
|
|
790
|
+
* Represents a text node in the HTML document tree.
|
|
791
|
+
*
|
|
792
|
+
* Text nodes contain plain text content without any HTML tags. They cannot
|
|
793
|
+
* have attributes or child elements.
|
|
794
|
+
*
|
|
795
|
+
* **Rendering Format:**
|
|
796
|
+
* ```
|
|
797
|
+
* content
|
|
798
|
+
* ```
|
|
799
|
+
* (No HTML tags, just the raw text content)
|
|
800
|
+
*
|
|
801
|
+
* **Important:** Text content is HTML-escaped by default to prevent XSS.
|
|
802
|
+
* Use `TextType.raw(content)` for intentional unescaped HTML output.
|
|
803
|
+
*
|
|
804
|
+
* @example
|
|
805
|
+
* Basic usage:
|
|
806
|
+
* ```typescript
|
|
807
|
+
* // Using the Text factory function (escaped by default)
|
|
808
|
+
* const text = Text('Hello <World>'); // renders: Hello <World>
|
|
809
|
+
*
|
|
810
|
+
* // Text nodes are also auto-created from strings in tag factories
|
|
811
|
+
* const paragraph = p('This is automatically wrapped in TextType');
|
|
812
|
+
* ```
|
|
813
|
+
*
|
|
814
|
+
* @example
|
|
815
|
+
* Intentional raw HTML (trusted content only):
|
|
816
|
+
* ```typescript
|
|
817
|
+
* const raw = TextType.raw('<strong>trusted</strong>');
|
|
818
|
+
* // WARNING: Never pass user input to TextType.raw()
|
|
819
|
+
* ```
|
|
820
|
+
*
|
|
821
|
+
* @remarks
|
|
822
|
+
* **Preconditions:** content can be any string (including empty string)
|
|
823
|
+
*
|
|
824
|
+
* **Postconditions:** `protoRender()` returns HTML-escaped content by default
|
|
825
|
+
*
|
|
826
|
+
* **Invariants:** attributes and children are always empty
|
|
827
|
+
*/
|
|
828
|
+
declare class TextType extends HtmlTag {
|
|
829
|
+
/**
|
|
830
|
+
* The text content of this node (after escape processing).
|
|
831
|
+
*/
|
|
832
|
+
readonly content: string;
|
|
833
|
+
/**
|
|
834
|
+
* Creates a new TextType node. Content is HTML-escaped by default.
|
|
835
|
+
*
|
|
836
|
+
* @param content - The text content
|
|
837
|
+
* @param options - Options. `escape: false` disables HTML escaping (default: true)
|
|
838
|
+
*
|
|
839
|
+
* @example
|
|
840
|
+
* ```typescript
|
|
841
|
+
* const text = new TextType('Hello <World>');
|
|
842
|
+
* console.log(text.render()); // "Hello <World>"
|
|
843
|
+
*
|
|
844
|
+
* const raw = new TextType('<strong>trusted</strong>', { escape: false });
|
|
845
|
+
* console.log(raw.render()); // "<strong>trusted</strong>"
|
|
846
|
+
* ```
|
|
847
|
+
*/
|
|
848
|
+
constructor(content: string, options?: {
|
|
849
|
+
escape?: boolean;
|
|
850
|
+
});
|
|
851
|
+
/**
|
|
852
|
+
* Creates an unescaped TextType node for intentional raw HTML output.
|
|
853
|
+
*
|
|
854
|
+
* **WARNING:** Never pass user input to this method — XSS risk.
|
|
855
|
+
*
|
|
856
|
+
* @param content - Raw HTML/text content (NOT escaped)
|
|
857
|
+
* @returns A new TextType instance without HTML escaping
|
|
858
|
+
*
|
|
859
|
+
* @example
|
|
860
|
+
* ```typescript
|
|
861
|
+
* const raw = TextType.raw('<em>trusted</em>');
|
|
862
|
+
* console.log(raw.render()); // "<em>trusted</em>"
|
|
863
|
+
* ```
|
|
864
|
+
*/
|
|
865
|
+
static raw(content: string): TextType;
|
|
866
|
+
/**
|
|
867
|
+
* Renders the text content (HTML-escaped by default).
|
|
868
|
+
*
|
|
869
|
+
* Text nodes don't have tags, so this simply returns the content.
|
|
870
|
+
*
|
|
871
|
+
* @returns The text content (escaped unless constructed with `escape: false`)
|
|
872
|
+
*
|
|
873
|
+
* @example
|
|
874
|
+
* ```typescript
|
|
875
|
+
* const text = new TextType('Hello <world>');
|
|
876
|
+
* console.log(text.protoRender()); // "Hello <world>"
|
|
877
|
+
* ```
|
|
878
|
+
*/
|
|
879
|
+
protoRender(_ctx?: RenderContext): string;
|
|
880
|
+
/**
|
|
881
|
+
* Silently ignores attribute addition (no-op).
|
|
882
|
+
*
|
|
883
|
+
* Text nodes cannot have attributes, so this method does nothing.
|
|
884
|
+
*
|
|
885
|
+
* @param _attribute - The attribute (ignored)
|
|
886
|
+
* @returns This instance for method chaining
|
|
887
|
+
*/
|
|
888
|
+
addHtmlAttribute(_attribute: HtmlAttributeShape): this;
|
|
889
|
+
/**
|
|
890
|
+
* Silently ignores child element addition (no-op).
|
|
891
|
+
*
|
|
892
|
+
* Text nodes cannot have children, so this method does nothing.
|
|
893
|
+
*
|
|
894
|
+
* @param _child - The child element (ignored)
|
|
895
|
+
* @returns This instance for method chaining
|
|
896
|
+
*/
|
|
897
|
+
addChild(_child: HTMLTagProtocol): this;
|
|
898
|
+
/**
|
|
899
|
+
* Silently ignores multiple child elements addition (no-op).
|
|
900
|
+
*
|
|
901
|
+
* Text nodes cannot have children, so this method does nothing.
|
|
902
|
+
*
|
|
903
|
+
* @param _children - The child elements (ignored)
|
|
904
|
+
* @returns This instance for method chaining
|
|
905
|
+
*/
|
|
906
|
+
addChildren(_children: ReadonlyArray<HTMLTagProtocol>): this;
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
/**
|
|
910
|
+
* Task 2.1 + 2.2: HtmlAttribute クラス
|
|
911
|
+
*
|
|
912
|
+
* Boolean・KeyValue・カスタムdata-*・ARIA属性の生成とHTML文字列レンダリング
|
|
913
|
+
* class名の重複除去・正規化、属性値のHTMLエスケープ
|
|
914
|
+
*
|
|
915
|
+
* Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9, 10.3, 10.4
|
|
916
|
+
*/
|
|
917
|
+
|
|
918
|
+
declare function escapeHtml(value: string): string;
|
|
919
|
+
/**
|
|
920
|
+
* Normalizes and deduplicates CSS class names.
|
|
921
|
+
*
|
|
922
|
+
* Processes an array of class name strings by:
|
|
923
|
+
* 1. Trimming each entry
|
|
924
|
+
* 2. Splitting on whitespace
|
|
925
|
+
* 3. Removing empty strings
|
|
926
|
+
* 4. Removing duplicates while preserving first occurrence order
|
|
927
|
+
*
|
|
928
|
+
* @param names - Array of class name strings (may contain whitespace-separated classes)
|
|
929
|
+
* @returns A single space-separated string of unique class names
|
|
930
|
+
*
|
|
931
|
+
* @remarks
|
|
932
|
+
* This function is automatically called by {@link HtmlAttribute.className} to ensure
|
|
933
|
+
* class attributes are clean and efficient.
|
|
934
|
+
*
|
|
935
|
+
* @example
|
|
936
|
+
* ```typescript
|
|
937
|
+
* normalizeClassNames(['btn', 'btn-primary']);
|
|
938
|
+
* // Returns: 'btn btn-primary'
|
|
939
|
+
*
|
|
940
|
+
* normalizeClassNames(['btn btn-primary', 'btn-large', 'btn']);
|
|
941
|
+
* // Returns: 'btn btn-primary btn-large' (duplicate 'btn' removed)
|
|
942
|
+
*
|
|
943
|
+
* normalizeClassNames([' container ', '', 'flex gap-4']);
|
|
944
|
+
* // Returns: 'container flex gap-4' (trimmed and empty strings removed)
|
|
945
|
+
* ```
|
|
946
|
+
*
|
|
947
|
+
* @see {@link HtmlAttribute.className} for usage with class attributes
|
|
948
|
+
*/
|
|
949
|
+
declare function normalizeClassNames(names: string[]): string;
|
|
950
|
+
/**
|
|
951
|
+
* Type-safe representation of an HTML attribute with automatic escaping.
|
|
952
|
+
*
|
|
953
|
+
* Provides factory methods for creating boolean, key-value, custom data-*, and ARIA attributes.
|
|
954
|
+
* All attribute values are automatically HTML-escaped when rendered to prevent XSS attacks.
|
|
955
|
+
*
|
|
956
|
+
* @remarks
|
|
957
|
+
* This class implements {@link HtmlAttributeShape} and uses a discriminated union type
|
|
958
|
+
* ({@link HtmlAttributeValue}) to represent different attribute types safely.
|
|
959
|
+
*
|
|
960
|
+
* @example
|
|
961
|
+
* ```typescript
|
|
962
|
+
* // Boolean attribute
|
|
963
|
+
* const disabled = HtmlAttribute.boolean('disabled');
|
|
964
|
+
* disabled.renderAttribute(); // Returns: 'disabled'
|
|
965
|
+
*
|
|
966
|
+
* // Key-value attribute
|
|
967
|
+
* const id = HtmlAttribute.keyValue('id', 'main-content');
|
|
968
|
+
* id.renderAttribute(); // Returns: 'id="main-content"'
|
|
969
|
+
*
|
|
970
|
+
* // Class attribute (with normalization)
|
|
971
|
+
* const classes = HtmlAttribute.className('btn', 'btn-primary btn', 'btn-large');
|
|
972
|
+
* classes.renderAttribute(); // Returns: 'class="btn btn-primary btn-large"'
|
|
973
|
+
*
|
|
974
|
+
* // Custom data attribute
|
|
975
|
+
* const theme = HtmlAttribute.custom('theme', 'dark');
|
|
976
|
+
* theme.renderAttribute(); // Returns: 'data-theme="dark"'
|
|
977
|
+
* ```
|
|
978
|
+
*
|
|
979
|
+
* @see {@link HtmlAttributeValue} for the discriminated union type
|
|
980
|
+
* @see {@link escapeHtml} for XSS prevention details
|
|
981
|
+
*/
|
|
982
|
+
declare class HtmlAttribute implements HtmlAttributeShape {
|
|
983
|
+
/** The attribute key (e.g., 'id', 'class', 'disabled') */
|
|
984
|
+
readonly key: string;
|
|
985
|
+
/** The attribute value (discriminated union of boolean, key-value, or custom) */
|
|
986
|
+
readonly attributeValue: HtmlAttributeValue;
|
|
987
|
+
private constructor();
|
|
988
|
+
/**
|
|
989
|
+
* Creates a boolean attribute (e.g., disabled, checked, hidden).
|
|
990
|
+
*
|
|
991
|
+
* @param key - A valid boolean attribute key
|
|
992
|
+
* @returns A new HtmlAttribute instance representing a boolean attribute
|
|
993
|
+
*
|
|
994
|
+
* @example
|
|
995
|
+
* ```typescript
|
|
996
|
+
* const disabled = HtmlAttribute.boolean('disabled');
|
|
997
|
+
* disabled.renderAttribute(); // Returns: 'disabled'
|
|
998
|
+
*
|
|
999
|
+
* const checked = HtmlAttribute.boolean('checked');
|
|
1000
|
+
* checked.renderAttribute(); // Returns: 'checked'
|
|
1001
|
+
* ```
|
|
1002
|
+
*
|
|
1003
|
+
* @see {@link BooleanAttributeKey} for all valid boolean attribute keys
|
|
1004
|
+
*/
|
|
1005
|
+
static boolean(key: BooleanAttributeKey): HtmlAttribute;
|
|
1006
|
+
/**
|
|
1007
|
+
* Creates a key-value attribute (e.g., id="main", title="tooltip").
|
|
1008
|
+
*
|
|
1009
|
+
* @param key - A valid key-value or ARIA attribute key
|
|
1010
|
+
* @param value - The attribute value (will be HTML-escaped when rendered)
|
|
1011
|
+
* @returns A new HtmlAttribute instance representing a key-value attribute
|
|
1012
|
+
*
|
|
1013
|
+
* @example
|
|
1014
|
+
* ```typescript
|
|
1015
|
+
* const id = HtmlAttribute.keyValue('id', 'main-content');
|
|
1016
|
+
* id.renderAttribute(); // Returns: 'id="main-content"'
|
|
1017
|
+
*
|
|
1018
|
+
* const href = HtmlAttribute.keyValue('href', '/path?q=<script>');
|
|
1019
|
+
* href.renderAttribute(); // Returns: 'href="/path?q=<script>"'
|
|
1020
|
+
* ```
|
|
1021
|
+
*
|
|
1022
|
+
* @see {@link KeyValueAttributeKey} for all valid key-value attribute keys
|
|
1023
|
+
* @see {@link AriaAttributeKey} for all valid ARIA attribute keys
|
|
1024
|
+
*/
|
|
1025
|
+
static keyValue(key: KeyValueAttributeKey | AriaAttributeKey, value: string): HtmlAttribute;
|
|
1026
|
+
/**
|
|
1027
|
+
* Creates a class attribute with automatic normalization and deduplication.
|
|
1028
|
+
*
|
|
1029
|
+
* @param names - One or more class name strings (may contain whitespace-separated classes)
|
|
1030
|
+
* @returns A new HtmlAttribute instance representing a normalized class attribute
|
|
1031
|
+
*
|
|
1032
|
+
* @remarks
|
|
1033
|
+
* Class names are automatically:
|
|
1034
|
+
* - Trimmed
|
|
1035
|
+
* - Split on whitespace
|
|
1036
|
+
* - Deduplicated (first occurrence preserved)
|
|
1037
|
+
* - Joined with single spaces
|
|
1038
|
+
*
|
|
1039
|
+
* @example
|
|
1040
|
+
* ```typescript
|
|
1041
|
+
* const classes = HtmlAttribute.className('btn', 'btn-primary');
|
|
1042
|
+
* classes.renderAttribute(); // Returns: 'class="btn btn-primary"'
|
|
1043
|
+
*
|
|
1044
|
+
* const normalized = HtmlAttribute.className('btn btn-primary', 'btn-large', 'btn');
|
|
1045
|
+
* normalized.renderAttribute(); // Returns: 'class="btn btn-primary btn-large"'
|
|
1046
|
+
* ```
|
|
1047
|
+
*
|
|
1048
|
+
* @see {@link normalizeClassNames} for normalization details
|
|
1049
|
+
*/
|
|
1050
|
+
static className(...names: string[]): HtmlAttribute;
|
|
1051
|
+
/**
|
|
1052
|
+
* Creates a custom data-* attribute.
|
|
1053
|
+
*
|
|
1054
|
+
* @param name - The data attribute name (without 'data-' prefix)
|
|
1055
|
+
* @param value - The attribute value (will be HTML-escaped when rendered)
|
|
1056
|
+
* @returns A new HtmlAttribute instance representing a custom data attribute
|
|
1057
|
+
*
|
|
1058
|
+
* @example
|
|
1059
|
+
* ```typescript
|
|
1060
|
+
* const theme = HtmlAttribute.custom('theme', 'dark');
|
|
1061
|
+
* theme.renderAttribute(); // Returns: 'data-theme="dark"'
|
|
1062
|
+
*
|
|
1063
|
+
* const userId = HtmlAttribute.custom('user-id', '12345');
|
|
1064
|
+
* userId.renderAttribute(); // Returns: 'data-user-id="12345"'
|
|
1065
|
+
* ```
|
|
1066
|
+
*/
|
|
1067
|
+
static custom(name: string, value: string): HtmlAttribute;
|
|
1068
|
+
/**
|
|
1069
|
+
* Creates an aria-label attribute.
|
|
1070
|
+
*
|
|
1071
|
+
* @param label - The accessible label text
|
|
1072
|
+
* @returns A new HtmlAttribute instance for aria-label
|
|
1073
|
+
*
|
|
1074
|
+
* @example
|
|
1075
|
+
* ```typescript
|
|
1076
|
+
* const label = HtmlAttribute.ariaLabel('Close dialog');
|
|
1077
|
+
* label.renderAttribute(); // Returns: 'aria-label="Close dialog"'
|
|
1078
|
+
* ```
|
|
1079
|
+
*/
|
|
1080
|
+
static ariaLabel(label: string): HtmlAttribute;
|
|
1081
|
+
/**
|
|
1082
|
+
* Creates an aria-hidden attribute.
|
|
1083
|
+
*
|
|
1084
|
+
* @param hidden - Whether the element should be hidden from assistive technologies
|
|
1085
|
+
* @returns A new HtmlAttribute instance for aria-hidden
|
|
1086
|
+
*
|
|
1087
|
+
* @example
|
|
1088
|
+
* ```typescript
|
|
1089
|
+
* const hidden = HtmlAttribute.ariaHidden(true);
|
|
1090
|
+
* hidden.renderAttribute(); // Returns: 'aria-hidden="true"'
|
|
1091
|
+
* ```
|
|
1092
|
+
*/
|
|
1093
|
+
static ariaHidden(hidden: boolean): HtmlAttribute;
|
|
1094
|
+
/**
|
|
1095
|
+
* Creates an aria-expanded attribute.
|
|
1096
|
+
*
|
|
1097
|
+
* @param expanded - Whether the element is currently expanded
|
|
1098
|
+
* @returns A new HtmlAttribute instance for aria-expanded
|
|
1099
|
+
*
|
|
1100
|
+
* @example
|
|
1101
|
+
* ```typescript
|
|
1102
|
+
* const expanded = HtmlAttribute.ariaExpanded(false);
|
|
1103
|
+
* expanded.renderAttribute(); // Returns: 'aria-expanded="false"'
|
|
1104
|
+
* ```
|
|
1105
|
+
*/
|
|
1106
|
+
static ariaExpanded(expanded: boolean): HtmlAttribute;
|
|
1107
|
+
/**
|
|
1108
|
+
* Creates a type attribute for input elements.
|
|
1109
|
+
*
|
|
1110
|
+
* @param type - A valid HTML input type
|
|
1111
|
+
* @returns A new HtmlAttribute instance for input type
|
|
1112
|
+
*
|
|
1113
|
+
* @example
|
|
1114
|
+
* ```typescript
|
|
1115
|
+
* const emailInput = HtmlAttribute.inputType('email');
|
|
1116
|
+
* emailInput.renderAttribute(); // Returns: 'type="email"'
|
|
1117
|
+
*
|
|
1118
|
+
* const checkbox = HtmlAttribute.inputType('checkbox');
|
|
1119
|
+
* checkbox.renderAttribute(); // Returns: 'type="checkbox"'
|
|
1120
|
+
* ```
|
|
1121
|
+
*
|
|
1122
|
+
* @see {@link InputType} for all valid input types
|
|
1123
|
+
*/
|
|
1124
|
+
static inputType(type: InputType): HtmlAttribute;
|
|
1125
|
+
/**
|
|
1126
|
+
* Creates a type attribute for button elements.
|
|
1127
|
+
*
|
|
1128
|
+
* @param type - A valid HTML button type ('submit', 'reset', or 'button')
|
|
1129
|
+
* @returns A new HtmlAttribute instance for button type
|
|
1130
|
+
*
|
|
1131
|
+
* @example
|
|
1132
|
+
* ```typescript
|
|
1133
|
+
* const submit = HtmlAttribute.buttonType('submit');
|
|
1134
|
+
* submit.renderAttribute(); // Returns: 'type="submit"'
|
|
1135
|
+
*
|
|
1136
|
+
* const reset = HtmlAttribute.buttonType('reset');
|
|
1137
|
+
* reset.renderAttribute(); // Returns: 'type="reset"'
|
|
1138
|
+
* ```
|
|
1139
|
+
*
|
|
1140
|
+
* @see {@link ButtonType} for all valid button types
|
|
1141
|
+
*/
|
|
1142
|
+
static buttonType(type: ButtonType): HtmlAttribute;
|
|
1143
|
+
/**
|
|
1144
|
+
* Renders the attribute as an HTML string.
|
|
1145
|
+
*
|
|
1146
|
+
* @returns The rendered attribute string
|
|
1147
|
+
*
|
|
1148
|
+
* @remarks
|
|
1149
|
+
* - Boolean attributes render as just the key (e.g., 'disabled')
|
|
1150
|
+
* - Key-value attributes render as key="value" with escaped values
|
|
1151
|
+
* - Custom attributes render as data-name="value" with escaped values
|
|
1152
|
+
*
|
|
1153
|
+
* All attribute values are automatically HTML-escaped to prevent XSS attacks.
|
|
1154
|
+
*
|
|
1155
|
+
* @example
|
|
1156
|
+
* ```typescript
|
|
1157
|
+
* HtmlAttribute.boolean('disabled').renderAttribute();
|
|
1158
|
+
* // Returns: 'disabled'
|
|
1159
|
+
*
|
|
1160
|
+
* HtmlAttribute.keyValue('id', 'main').renderAttribute();
|
|
1161
|
+
* // Returns: 'id="main"'
|
|
1162
|
+
*
|
|
1163
|
+
* HtmlAttribute.custom('theme', 'dark').renderAttribute();
|
|
1164
|
+
* // Returns: 'data-theme="dark"'
|
|
1165
|
+
* ```
|
|
1166
|
+
*
|
|
1167
|
+
* @see {@link escapeHtml} for HTML escaping details
|
|
1168
|
+
*/
|
|
1169
|
+
renderAttribute(): string;
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
/**
|
|
1173
|
+
* Task 6.1: BaseAttributeBuilder
|
|
1174
|
+
*
|
|
1175
|
+
* BaseAttributeBuilder: 共通属性(id, title, lang, role, tabindex, hidden, custom, ARIA)の設定と
|
|
1176
|
+
* class追加の4パターン(可変長引数、配列、条件付き、辞書Toggle形式)を提供する。
|
|
1177
|
+
*
|
|
1178
|
+
* Requirements: 7.1, 7.2
|
|
1179
|
+
*/
|
|
1180
|
+
|
|
1181
|
+
/**
|
|
1182
|
+
* Base attribute builder providing common HTML attributes and fluent API.
|
|
1183
|
+
*
|
|
1184
|
+
* @remarks
|
|
1185
|
+
* This class implements {@link AttributeBuilderProtocol} and provides:
|
|
1186
|
+
* - Common attributes (id, title, lang, role, tabindex, hidden)
|
|
1187
|
+
* - ARIA attributes (aria-label, aria-hidden, aria-expanded)
|
|
1188
|
+
* - Custom data-* attributes
|
|
1189
|
+
* - Four class management patterns (variadic, array, conditional, toggle)
|
|
1190
|
+
* - Automatic class name normalization and deduplication
|
|
1191
|
+
*
|
|
1192
|
+
* Class names are accumulated internally and merged into a single normalized
|
|
1193
|
+
* class attribute when {@link build} is called.
|
|
1194
|
+
*
|
|
1195
|
+
* @example
|
|
1196
|
+
* Basic usage
|
|
1197
|
+
* ```typescript
|
|
1198
|
+
* const attrs = new BaseAttributeBuilder()
|
|
1199
|
+
* .setId('main-content')
|
|
1200
|
+
* .addClass('container', 'mx-auto')
|
|
1201
|
+
* .setAriaLabel('Main content area')
|
|
1202
|
+
* .build();
|
|
1203
|
+
* ```
|
|
1204
|
+
*
|
|
1205
|
+
* @example
|
|
1206
|
+
* Conditional classes
|
|
1207
|
+
* ```typescript
|
|
1208
|
+
* const isActive = true;
|
|
1209
|
+
* const attrs = new BaseAttributeBuilder()
|
|
1210
|
+
* .addClass('btn')
|
|
1211
|
+
* .addClassWhen('btn-active', isActive)
|
|
1212
|
+
* .addClassesToggle({
|
|
1213
|
+
* 'btn-primary': isPrimary,
|
|
1214
|
+
* 'btn-disabled': isDisabled
|
|
1215
|
+
* })
|
|
1216
|
+
* .build();
|
|
1217
|
+
* ```
|
|
1218
|
+
*
|
|
1219
|
+
* @example
|
|
1220
|
+
* Custom data attributes
|
|
1221
|
+
* ```typescript
|
|
1222
|
+
* const attrs = new BaseAttributeBuilder()
|
|
1223
|
+
* .setCustomAttribute('theme', 'dark')
|
|
1224
|
+
* .setCustomAttribute('user-id', '12345')
|
|
1225
|
+
* .build();
|
|
1226
|
+
* // Produces: data-theme="dark" data-user-id="12345"
|
|
1227
|
+
* ```
|
|
1228
|
+
*/
|
|
1229
|
+
declare class BaseAttributeBuilder implements AttributeBuilderProtocol {
|
|
1230
|
+
/** Accumulated attributes (excluding class, which is handled separately) */
|
|
1231
|
+
protected _attributes: HtmlAttribute[];
|
|
1232
|
+
/** Accumulated class names (deduplicated and normalized on build) */
|
|
1233
|
+
protected _classNames: string[];
|
|
1234
|
+
/**
|
|
1235
|
+
* Adds a key-value HTML attribute.
|
|
1236
|
+
*
|
|
1237
|
+
* @param key - The attribute name
|
|
1238
|
+
* @param value - The attribute value
|
|
1239
|
+
* @returns This builder for method chaining
|
|
1240
|
+
*
|
|
1241
|
+
* @remarks
|
|
1242
|
+
* This helper centralizes the keyValue attribute creation pattern.
|
|
1243
|
+
* Subclasses may also use this helper for their own key-value attributes.
|
|
1244
|
+
*/
|
|
1245
|
+
protected addKeyValue(key: KeyValueAttributeKey | AriaAttributeKey, value: string | number): this;
|
|
1246
|
+
/**
|
|
1247
|
+
* Sets the id attribute.
|
|
1248
|
+
*
|
|
1249
|
+
* @param id - The element ID
|
|
1250
|
+
* @returns This builder for method chaining
|
|
1251
|
+
*
|
|
1252
|
+
* @example
|
|
1253
|
+
* ```typescript
|
|
1254
|
+
* builder.setId('main-content');
|
|
1255
|
+
* // Produces: id="main-content"
|
|
1256
|
+
* ```
|
|
1257
|
+
*/
|
|
1258
|
+
setId(id: string): this;
|
|
1259
|
+
/**
|
|
1260
|
+
* Sets the title attribute (tooltip text).
|
|
1261
|
+
*
|
|
1262
|
+
* @param title - The tooltip text
|
|
1263
|
+
* @returns This builder for method chaining
|
|
1264
|
+
*
|
|
1265
|
+
* @example
|
|
1266
|
+
* ```typescript
|
|
1267
|
+
* builder.setTitle('Click to expand');
|
|
1268
|
+
* // Produces: title="Click to expand"
|
|
1269
|
+
* ```
|
|
1270
|
+
*/
|
|
1271
|
+
setTitle(title: string): this;
|
|
1272
|
+
/**
|
|
1273
|
+
* Sets the lang attribute (language code).
|
|
1274
|
+
*
|
|
1275
|
+
* @param lang - The language code (e.g., 'en', 'ja', 'fr')
|
|
1276
|
+
* @returns This builder for method chaining
|
|
1277
|
+
*
|
|
1278
|
+
* @example
|
|
1279
|
+
* ```typescript
|
|
1280
|
+
* builder.setLang('ja');
|
|
1281
|
+
* // Produces: lang="ja"
|
|
1282
|
+
* ```
|
|
1283
|
+
*/
|
|
1284
|
+
setLang(lang: string): this;
|
|
1285
|
+
/**
|
|
1286
|
+
* Sets the role attribute (ARIA role).
|
|
1287
|
+
*
|
|
1288
|
+
* @param role - The ARIA role (e.g., 'button', 'navigation')
|
|
1289
|
+
* @returns This builder for method chaining
|
|
1290
|
+
*
|
|
1291
|
+
* @example
|
|
1292
|
+
* ```typescript
|
|
1293
|
+
* builder.setRole('navigation');
|
|
1294
|
+
* // Produces: role="navigation"
|
|
1295
|
+
* ```
|
|
1296
|
+
*/
|
|
1297
|
+
setRole(role: string): this;
|
|
1298
|
+
/**
|
|
1299
|
+
* Sets the tabindex attribute.
|
|
1300
|
+
*
|
|
1301
|
+
* @param index - The tab order index (-1 for programmatically focusable, 0 for natural order)
|
|
1302
|
+
* @returns This builder for method chaining
|
|
1303
|
+
*
|
|
1304
|
+
* @example
|
|
1305
|
+
* ```typescript
|
|
1306
|
+
* builder.setTabindex(0); // Natural tab order
|
|
1307
|
+
* builder.setTabindex(-1); // Programmatically focusable only
|
|
1308
|
+
* ```
|
|
1309
|
+
*/
|
|
1310
|
+
setTabindex(index: number): this;
|
|
1311
|
+
/**
|
|
1312
|
+
* Sets the hidden boolean attribute.
|
|
1313
|
+
*
|
|
1314
|
+
* @param hidden - If true, adds the hidden attribute
|
|
1315
|
+
* @returns This builder for method chaining
|
|
1316
|
+
*
|
|
1317
|
+
* @example
|
|
1318
|
+
* ```typescript
|
|
1319
|
+
* builder.setHidden(true); // Produces: hidden
|
|
1320
|
+
* builder.setHidden(false); // No attribute added
|
|
1321
|
+
* ```
|
|
1322
|
+
*/
|
|
1323
|
+
setHidden(hidden: boolean): this;
|
|
1324
|
+
/**
|
|
1325
|
+
* Sets a custom data-* attribute.
|
|
1326
|
+
*
|
|
1327
|
+
* @param name - The data attribute name (without 'data-' prefix)
|
|
1328
|
+
* @param value - The attribute value
|
|
1329
|
+
* @returns This builder for method chaining
|
|
1330
|
+
*
|
|
1331
|
+
* @example
|
|
1332
|
+
* ```typescript
|
|
1333
|
+
* builder.setCustomAttribute('theme', 'dark');
|
|
1334
|
+
* // Produces: data-theme="dark"
|
|
1335
|
+
*
|
|
1336
|
+
* builder.setCustomAttribute('user-id', '12345');
|
|
1337
|
+
* // Produces: data-user-id="12345"
|
|
1338
|
+
* ```
|
|
1339
|
+
*/
|
|
1340
|
+
setCustomAttribute(name: string, value: string): this;
|
|
1341
|
+
/**
|
|
1342
|
+
* Sets the aria-label attribute.
|
|
1343
|
+
*
|
|
1344
|
+
* @param label - The accessible label text
|
|
1345
|
+
* @returns This builder for method chaining
|
|
1346
|
+
*
|
|
1347
|
+
* @example
|
|
1348
|
+
* ```typescript
|
|
1349
|
+
* builder.setAriaLabel('Close dialog');
|
|
1350
|
+
* // Produces: aria-label="Close dialog"
|
|
1351
|
+
* ```
|
|
1352
|
+
*/
|
|
1353
|
+
setAriaLabel(label: string): this;
|
|
1354
|
+
/**
|
|
1355
|
+
* Sets the aria-hidden attribute.
|
|
1356
|
+
*
|
|
1357
|
+
* @param hidden - Whether the element should be hidden from assistive technologies
|
|
1358
|
+
* @returns This builder for method chaining
|
|
1359
|
+
*
|
|
1360
|
+
* @example
|
|
1361
|
+
* ```typescript
|
|
1362
|
+
* builder.setAriaHidden(true);
|
|
1363
|
+
* // Produces: aria-hidden="true"
|
|
1364
|
+
* ```
|
|
1365
|
+
*/
|
|
1366
|
+
setAriaHidden(hidden: boolean): this;
|
|
1367
|
+
/**
|
|
1368
|
+
* Sets the aria-expanded attribute.
|
|
1369
|
+
*
|
|
1370
|
+
* @param expanded - Whether the element is currently expanded
|
|
1371
|
+
* @returns This builder for method chaining
|
|
1372
|
+
*
|
|
1373
|
+
* @example
|
|
1374
|
+
* ```typescript
|
|
1375
|
+
* builder.setAriaExpanded(false);
|
|
1376
|
+
* // Produces: aria-expanded="false"
|
|
1377
|
+
* ```
|
|
1378
|
+
*/
|
|
1379
|
+
setAriaExpanded(expanded: boolean): this;
|
|
1380
|
+
/**
|
|
1381
|
+
* Adds one or more class names (variadic pattern).
|
|
1382
|
+
*
|
|
1383
|
+
* @param classNames - One or more class name strings
|
|
1384
|
+
* @returns This builder for method chaining
|
|
1385
|
+
*
|
|
1386
|
+
* @example
|
|
1387
|
+
* ```typescript
|
|
1388
|
+
* builder.addClass('btn', 'btn-primary', 'btn-large');
|
|
1389
|
+
* // Accumulates: ['btn', 'btn-primary', 'btn-large']
|
|
1390
|
+
* ```
|
|
1391
|
+
*/
|
|
1392
|
+
addClass(...classNames: string[]): this;
|
|
1393
|
+
/**
|
|
1394
|
+
* Adds class names from an array (array pattern).
|
|
1395
|
+
*
|
|
1396
|
+
* @param classNames - Array of class name strings
|
|
1397
|
+
* @returns This builder for method chaining
|
|
1398
|
+
*
|
|
1399
|
+
* @example
|
|
1400
|
+
* ```typescript
|
|
1401
|
+
* const classes = ['container', 'mx-auto', 'px-4'];
|
|
1402
|
+
* builder.addClasses(classes);
|
|
1403
|
+
* ```
|
|
1404
|
+
*/
|
|
1405
|
+
addClasses(classNames: string[]): this;
|
|
1406
|
+
/**
|
|
1407
|
+
* Conditionally adds a class name (conditional pattern).
|
|
1408
|
+
*
|
|
1409
|
+
* @param className - The class name to add
|
|
1410
|
+
* @param condition - Only adds the class if this is true
|
|
1411
|
+
* @returns This builder for method chaining
|
|
1412
|
+
*
|
|
1413
|
+
* @example
|
|
1414
|
+
* ```typescript
|
|
1415
|
+
* const isActive = true;
|
|
1416
|
+
* builder.addClassWhen('active', isActive); // Adds 'active'
|
|
1417
|
+
* builder.addClassWhen('disabled', false); // Doesn't add
|
|
1418
|
+
* ```
|
|
1419
|
+
*/
|
|
1420
|
+
addClassWhen(className: string, condition: boolean): this;
|
|
1421
|
+
/**
|
|
1422
|
+
* Adds classes from a toggle map (toggle pattern).
|
|
1423
|
+
*
|
|
1424
|
+
* @param classMap - Object mapping class names to boolean flags
|
|
1425
|
+
* @returns This builder for method chaining
|
|
1426
|
+
*
|
|
1427
|
+
* @remarks
|
|
1428
|
+
* Only class names with `true` values are added.
|
|
1429
|
+
*
|
|
1430
|
+
* @example
|
|
1431
|
+
* ```typescript
|
|
1432
|
+
* builder.addClassesToggle({
|
|
1433
|
+
* 'btn-primary': isPrimary,
|
|
1434
|
+
* 'btn-disabled': isDisabled,
|
|
1435
|
+
* 'btn-large': isLarge
|
|
1436
|
+
* });
|
|
1437
|
+
* // Adds only classes where the value is true
|
|
1438
|
+
* ```
|
|
1439
|
+
*/
|
|
1440
|
+
addClassesToggle(classMap: Record<string, boolean>): this;
|
|
1441
|
+
/**
|
|
1442
|
+
* Builds and returns the accumulated attribute array.
|
|
1443
|
+
*
|
|
1444
|
+
* @returns Array of HtmlAttribute instances
|
|
1445
|
+
*
|
|
1446
|
+
* @remarks
|
|
1447
|
+
* If any class names were added, they are normalized (trimmed, deduplicated)
|
|
1448
|
+
* and merged into a single class attribute using {@link normalizeClassNames}.
|
|
1449
|
+
*
|
|
1450
|
+
* @example
|
|
1451
|
+
* ```typescript
|
|
1452
|
+
* const attrs = new BaseAttributeBuilder()
|
|
1453
|
+
* .setId('main')
|
|
1454
|
+
* .addClass('btn', 'btn-primary', 'btn')
|
|
1455
|
+
* .build();
|
|
1456
|
+
* // Returns: [
|
|
1457
|
+
* // HtmlAttribute { key: 'id', ... },
|
|
1458
|
+
* // HtmlAttribute { key: 'class', value: 'btn btn-primary' }
|
|
1459
|
+
* // ]
|
|
1460
|
+
* ```
|
|
1461
|
+
*/
|
|
1462
|
+
build(): HtmlAttribute[];
|
|
1463
|
+
}
|
|
1464
|
+
|
|
1465
|
+
/**
|
|
1466
|
+
* Task 6.2: Form-related AttributeBuilders
|
|
1467
|
+
*
|
|
1468
|
+
* 専用属性ビルダー(フォーム系):
|
|
1469
|
+
* - FormAttributeBuilder: action, method, enctype
|
|
1470
|
+
* - InputAttributeBuilder: type, placeholder, required, pattern, minLength, maxLength
|
|
1471
|
+
* - ButtonAttributeBuilder: buttonType
|
|
1472
|
+
*
|
|
1473
|
+
* Requirements: 7.3, 7.4, 7.6
|
|
1474
|
+
*/
|
|
1475
|
+
|
|
1476
|
+
/**
|
|
1477
|
+
* Specialized attribute builder for HTML form elements.
|
|
1478
|
+
*
|
|
1479
|
+
* @remarks
|
|
1480
|
+
* Extends {@link BaseAttributeBuilder} with form-specific attributes:
|
|
1481
|
+
* - action - Form submission URL
|
|
1482
|
+
* - method - HTTP method (GET or POST)
|
|
1483
|
+
* - enctype - Form data encoding type
|
|
1484
|
+
*
|
|
1485
|
+
* All common attributes from the base builder are also available.
|
|
1486
|
+
*
|
|
1487
|
+
* @example
|
|
1488
|
+
* ```typescript
|
|
1489
|
+
* const formAttrs = new FormAttributeBuilder()
|
|
1490
|
+
* .setAction('/api/submit')
|
|
1491
|
+
* .setMethod('post')
|
|
1492
|
+
* .setEnctype('multipart/form-data')
|
|
1493
|
+
* .setId('contact-form')
|
|
1494
|
+
* .addClass('form', 'form-vertical')
|
|
1495
|
+
* .build();
|
|
1496
|
+
* ```
|
|
1497
|
+
*
|
|
1498
|
+
* @see {@link BaseAttributeBuilder} for common attribute methods
|
|
1499
|
+
*/
|
|
1500
|
+
declare class FormAttributeBuilder extends BaseAttributeBuilder {
|
|
1501
|
+
/**
|
|
1502
|
+
* Sets the action attribute (form submission URL).
|
|
1503
|
+
*
|
|
1504
|
+
* @param action - The URL where the form data will be sent
|
|
1505
|
+
* @returns This builder for method chaining
|
|
1506
|
+
*
|
|
1507
|
+
* @example
|
|
1508
|
+
* ```typescript
|
|
1509
|
+
* builder.setAction('/api/submit');
|
|
1510
|
+
* // Produces: action="/api/submit"
|
|
1511
|
+
* ```
|
|
1512
|
+
*/
|
|
1513
|
+
setAction(action: string): this;
|
|
1514
|
+
/**
|
|
1515
|
+
* Sets the method attribute (HTTP method).
|
|
1516
|
+
*
|
|
1517
|
+
* @param method - The HTTP method ('get' or 'post')
|
|
1518
|
+
* @returns This builder for method chaining
|
|
1519
|
+
*
|
|
1520
|
+
* @example
|
|
1521
|
+
* ```typescript
|
|
1522
|
+
* builder.setMethod('post');
|
|
1523
|
+
* // Produces: method="post"
|
|
1524
|
+
* ```
|
|
1525
|
+
*/
|
|
1526
|
+
setMethod(method: 'get' | 'post'): this;
|
|
1527
|
+
/**
|
|
1528
|
+
* Sets the enctype attribute (encoding type).
|
|
1529
|
+
*
|
|
1530
|
+
* @param enctype - The encoding type (e.g., 'multipart/form-data', 'application/x-www-form-urlencoded')
|
|
1531
|
+
* @returns This builder for method chaining
|
|
1532
|
+
*
|
|
1533
|
+
* @remarks
|
|
1534
|
+
* Common values:
|
|
1535
|
+
* - 'application/x-www-form-urlencoded' (default)
|
|
1536
|
+
* - 'multipart/form-data' (for file uploads)
|
|
1537
|
+
* - 'text/plain'
|
|
1538
|
+
*
|
|
1539
|
+
* @example
|
|
1540
|
+
* ```typescript
|
|
1541
|
+
* builder.setEnctype('multipart/form-data');
|
|
1542
|
+
* // Produces: enctype="multipart/form-data"
|
|
1543
|
+
* ```
|
|
1544
|
+
*/
|
|
1545
|
+
setEnctype(enctype: string): this;
|
|
1546
|
+
}
|
|
1547
|
+
/**
|
|
1548
|
+
* Specialized attribute builder for HTML input elements.
|
|
1549
|
+
*
|
|
1550
|
+
* @remarks
|
|
1551
|
+
* Extends {@link BaseAttributeBuilder} with input-specific attributes:
|
|
1552
|
+
* - type - Input type (text, email, password, etc.)
|
|
1553
|
+
* - placeholder - Placeholder text
|
|
1554
|
+
* - required - Required field flag
|
|
1555
|
+
* - pattern - Validation pattern (regex)
|
|
1556
|
+
* - minlength/maxlength - Length constraints
|
|
1557
|
+
*
|
|
1558
|
+
* All common attributes from the base builder are also available.
|
|
1559
|
+
*
|
|
1560
|
+
* @example
|
|
1561
|
+
* ```typescript
|
|
1562
|
+
* const emailInput = new InputAttributeBuilder()
|
|
1563
|
+
* .setInputType('email')
|
|
1564
|
+
* .setPlaceholder('Enter your email')
|
|
1565
|
+
* .setRequired(true)
|
|
1566
|
+
* .setId('email-field')
|
|
1567
|
+
* .addClass('input', 'input-primary')
|
|
1568
|
+
* .build();
|
|
1569
|
+
* ```
|
|
1570
|
+
*
|
|
1571
|
+
* @example
|
|
1572
|
+
* Password input with validation
|
|
1573
|
+
* ```typescript
|
|
1574
|
+
* const passwordInput = new InputAttributeBuilder()
|
|
1575
|
+
* .setInputType('password')
|
|
1576
|
+
* .setPlaceholder('Enter password')
|
|
1577
|
+
* .setRequired(true)
|
|
1578
|
+
* .setMinLength(8)
|
|
1579
|
+
* .setPattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).+$')
|
|
1580
|
+
* .build();
|
|
1581
|
+
* ```
|
|
1582
|
+
*
|
|
1583
|
+
* @see {@link BaseAttributeBuilder} for common attribute methods
|
|
1584
|
+
* @see {@link InputType} for all valid input types
|
|
1585
|
+
*/
|
|
1586
|
+
declare class InputAttributeBuilder extends BaseAttributeBuilder {
|
|
1587
|
+
/**
|
|
1588
|
+
* Sets the type attribute for the input element.
|
|
1589
|
+
*
|
|
1590
|
+
* @param type - A valid HTML input type
|
|
1591
|
+
* @returns This builder for method chaining
|
|
1592
|
+
*
|
|
1593
|
+
* @example
|
|
1594
|
+
* ```typescript
|
|
1595
|
+
* builder.setInputType('email'); // Produces: type="email"
|
|
1596
|
+
* builder.setInputType('password'); // Produces: type="password"
|
|
1597
|
+
* builder.setInputType('checkbox'); // Produces: type="checkbox"
|
|
1598
|
+
* ```
|
|
1599
|
+
*
|
|
1600
|
+
* @see {@link InputType} for all valid types
|
|
1601
|
+
*/
|
|
1602
|
+
setInputType(type: InputType): this;
|
|
1603
|
+
/**
|
|
1604
|
+
* Sets the placeholder attribute.
|
|
1605
|
+
*
|
|
1606
|
+
* @param placeholder - The placeholder text
|
|
1607
|
+
* @returns This builder for method chaining
|
|
1608
|
+
*
|
|
1609
|
+
* @example
|
|
1610
|
+
* ```typescript
|
|
1611
|
+
* builder.setPlaceholder('Enter your email address');
|
|
1612
|
+
* // Produces: placeholder="Enter your email address"
|
|
1613
|
+
* ```
|
|
1614
|
+
*/
|
|
1615
|
+
setPlaceholder(placeholder: string): this;
|
|
1616
|
+
/**
|
|
1617
|
+
* Sets the required boolean attribute.
|
|
1618
|
+
*
|
|
1619
|
+
* @param required - If true, adds the required attribute
|
|
1620
|
+
* @returns This builder for method chaining
|
|
1621
|
+
*
|
|
1622
|
+
* @example
|
|
1623
|
+
* ```typescript
|
|
1624
|
+
* builder.setRequired(true); // Produces: required
|
|
1625
|
+
* builder.setRequired(false); // No attribute added
|
|
1626
|
+
* ```
|
|
1627
|
+
*/
|
|
1628
|
+
setRequired(required: boolean): this;
|
|
1629
|
+
/**
|
|
1630
|
+
* Sets the pattern attribute (validation regex).
|
|
1631
|
+
*
|
|
1632
|
+
* @param pattern - A regular expression pattern for validation
|
|
1633
|
+
* @returns This builder for method chaining
|
|
1634
|
+
*
|
|
1635
|
+
* @remarks
|
|
1636
|
+
* The pattern is matched against the entire input value (implicit ^ and $).
|
|
1637
|
+
*
|
|
1638
|
+
* @example
|
|
1639
|
+
* ```typescript
|
|
1640
|
+
* // Require at least one uppercase, one lowercase, one digit
|
|
1641
|
+
* builder.setPattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).{8,}$');
|
|
1642
|
+
*
|
|
1643
|
+
* // Require specific format
|
|
1644
|
+
* builder.setPattern('[0-9]{3}-[0-9]{4}'); // Matches: 123-4567
|
|
1645
|
+
* ```
|
|
1646
|
+
*/
|
|
1647
|
+
setPattern(pattern: string): this;
|
|
1648
|
+
/**
|
|
1649
|
+
* Sets the minlength attribute.
|
|
1650
|
+
*
|
|
1651
|
+
* @param length - Minimum number of characters required
|
|
1652
|
+
* @returns This builder for method chaining
|
|
1653
|
+
*
|
|
1654
|
+
* @example
|
|
1655
|
+
* ```typescript
|
|
1656
|
+
* builder.setMinLength(8);
|
|
1657
|
+
* // Produces: minlength="8"
|
|
1658
|
+
* ```
|
|
1659
|
+
*/
|
|
1660
|
+
setMinLength(length: number): this;
|
|
1661
|
+
/**
|
|
1662
|
+
* Sets the maxlength attribute.
|
|
1663
|
+
*
|
|
1664
|
+
* @param length - Maximum number of characters allowed
|
|
1665
|
+
* @returns This builder for method chaining
|
|
1666
|
+
*
|
|
1667
|
+
* @example
|
|
1668
|
+
* ```typescript
|
|
1669
|
+
* builder.setMaxLength(100);
|
|
1670
|
+
* // Produces: maxlength="100"
|
|
1671
|
+
* ```
|
|
1672
|
+
*/
|
|
1673
|
+
setMaxLength(length: number): this;
|
|
1674
|
+
}
|
|
1675
|
+
/**
|
|
1676
|
+
* Specialized attribute builder for HTML button elements.
|
|
1677
|
+
*
|
|
1678
|
+
* @remarks
|
|
1679
|
+
* Extends {@link BaseAttributeBuilder} with button-specific attributes:
|
|
1680
|
+
* - type - Button type (submit, reset, or button)
|
|
1681
|
+
*
|
|
1682
|
+
* All common attributes from the base builder are also available.
|
|
1683
|
+
*
|
|
1684
|
+
* @example
|
|
1685
|
+
* Submit button
|
|
1686
|
+
* ```typescript
|
|
1687
|
+
* const submitAttrs = new ButtonAttributeBuilder()
|
|
1688
|
+
* .setButtonType('submit')
|
|
1689
|
+
* .setId('submit-btn')
|
|
1690
|
+
* .addClass('btn', 'btn-primary')
|
|
1691
|
+
* .build();
|
|
1692
|
+
* ```
|
|
1693
|
+
*
|
|
1694
|
+
* @example
|
|
1695
|
+
* Custom button with ARIA
|
|
1696
|
+
* ```typescript
|
|
1697
|
+
* const closeAttrs = new ButtonAttributeBuilder()
|
|
1698
|
+
* .setButtonType('button')
|
|
1699
|
+
* .setAriaLabel('Close dialog')
|
|
1700
|
+
* .addClass('btn-close')
|
|
1701
|
+
* .build();
|
|
1702
|
+
* ```
|
|
1703
|
+
*
|
|
1704
|
+
* @see {@link BaseAttributeBuilder} for common attribute methods
|
|
1705
|
+
* @see {@link ButtonType} for all valid button types
|
|
1706
|
+
*/
|
|
1707
|
+
declare class ButtonAttributeBuilder extends BaseAttributeBuilder {
|
|
1708
|
+
/**
|
|
1709
|
+
* Sets the type attribute for the button element.
|
|
1710
|
+
*
|
|
1711
|
+
* @param type - The button type ('submit', 'reset', or 'button')
|
|
1712
|
+
* @returns This builder for method chaining
|
|
1713
|
+
*
|
|
1714
|
+
* @remarks
|
|
1715
|
+
* - 'submit' - Submits the form (default if inside a form)
|
|
1716
|
+
* - 'reset' - Resets form fields to their initial values
|
|
1717
|
+
* - 'button' - No default behavior (use for custom JavaScript)
|
|
1718
|
+
*
|
|
1719
|
+
* @example
|
|
1720
|
+
* ```typescript
|
|
1721
|
+
* builder.setButtonType('submit');
|
|
1722
|
+
* // Produces: type="submit"
|
|
1723
|
+
*
|
|
1724
|
+
* builder.setButtonType('button');
|
|
1725
|
+
* // Produces: type="button"
|
|
1726
|
+
* // Good for buttons that trigger JavaScript, not form submission
|
|
1727
|
+
* ```
|
|
1728
|
+
*
|
|
1729
|
+
* @see {@link ButtonType} for all valid types
|
|
1730
|
+
*/
|
|
1731
|
+
setButtonType(type: ButtonType): this;
|
|
1732
|
+
}
|
|
1733
|
+
|
|
1734
|
+
/**
|
|
1735
|
+
* Task 6.2: Media-related AttributeBuilders
|
|
1736
|
+
*
|
|
1737
|
+
* 専用属性ビルダー(メディア・リンク系):
|
|
1738
|
+
* - ImageAttributeBuilder: src, alt, width, height, loading
|
|
1739
|
+
* - LinkAttributeBuilder: href, rel, type, media
|
|
1740
|
+
*
|
|
1741
|
+
* Requirements: 7.5
|
|
1742
|
+
*/
|
|
1743
|
+
|
|
1744
|
+
/**
|
|
1745
|
+
* Specialized attribute builder for HTML img elements.
|
|
1746
|
+
*
|
|
1747
|
+
* @remarks
|
|
1748
|
+
* Extends {@link BaseAttributeBuilder} with image-specific attributes:
|
|
1749
|
+
* - src - Image source URL
|
|
1750
|
+
* - alt - Alternative text for accessibility
|
|
1751
|
+
* - width/height - Image dimensions
|
|
1752
|
+
* - loading - Lazy loading strategy
|
|
1753
|
+
*
|
|
1754
|
+
* All common attributes from the base builder are also available.
|
|
1755
|
+
*
|
|
1756
|
+
* @example
|
|
1757
|
+
* ```typescript
|
|
1758
|
+
* const imgAttrs = new ImageAttributeBuilder()
|
|
1759
|
+
* .setSrc('/images/hero.jpg')
|
|
1760
|
+
* .setAlt('Hero banner image')
|
|
1761
|
+
* .setWidth(800)
|
|
1762
|
+
* .setHeight(600)
|
|
1763
|
+
* .setLoading('lazy')
|
|
1764
|
+
* .addClass('img-responsive')
|
|
1765
|
+
* .build();
|
|
1766
|
+
* ```
|
|
1767
|
+
*
|
|
1768
|
+
* @see {@link BaseAttributeBuilder} for common attribute methods
|
|
1769
|
+
*/
|
|
1770
|
+
declare class ImageAttributeBuilder extends BaseAttributeBuilder {
|
|
1771
|
+
/**
|
|
1772
|
+
* Sets the src attribute (image source URL).
|
|
1773
|
+
*
|
|
1774
|
+
* @param src - The URL of the image
|
|
1775
|
+
* @returns This builder for method chaining
|
|
1776
|
+
*
|
|
1777
|
+
* @example
|
|
1778
|
+
* ```typescript
|
|
1779
|
+
* builder.setSrc('/images/logo.png');
|
|
1780
|
+
* // Produces: src="/images/logo.png"
|
|
1781
|
+
*
|
|
1782
|
+
* builder.setSrc('https://example.com/photo.jpg');
|
|
1783
|
+
* // Produces: src="https://example.com/photo.jpg"
|
|
1784
|
+
* ```
|
|
1785
|
+
*/
|
|
1786
|
+
setSrc(src: string): this;
|
|
1787
|
+
/**
|
|
1788
|
+
* Sets the alt attribute (alternative text).
|
|
1789
|
+
*
|
|
1790
|
+
* @param alt - Descriptive text for the image (important for accessibility)
|
|
1791
|
+
* @returns This builder for method chaining
|
|
1792
|
+
*
|
|
1793
|
+
* @remarks
|
|
1794
|
+
* The alt attribute is crucial for accessibility. It should:
|
|
1795
|
+
* - Describe the image content for screen readers
|
|
1796
|
+
* - Be empty ("") for decorative images
|
|
1797
|
+
* - Not include "image of" or "picture of"
|
|
1798
|
+
*
|
|
1799
|
+
* @example
|
|
1800
|
+
* ```typescript
|
|
1801
|
+
* builder.setAlt('Company logo');
|
|
1802
|
+
* // Produces: alt="Company logo"
|
|
1803
|
+
*
|
|
1804
|
+
* builder.setAlt(''); // Decorative image
|
|
1805
|
+
* // Produces: alt=""
|
|
1806
|
+
* ```
|
|
1807
|
+
*/
|
|
1808
|
+
setAlt(alt: string): this;
|
|
1809
|
+
/**
|
|
1810
|
+
* Sets the width attribute.
|
|
1811
|
+
*
|
|
1812
|
+
* @param width - Image width in pixels (number or string)
|
|
1813
|
+
* @returns This builder for method chaining
|
|
1814
|
+
*
|
|
1815
|
+
* @remarks
|
|
1816
|
+
* Setting explicit width and height helps prevent layout shift during page load.
|
|
1817
|
+
*
|
|
1818
|
+
* @example
|
|
1819
|
+
* ```typescript
|
|
1820
|
+
* builder.setWidth(800); // Produces: width="800"
|
|
1821
|
+
* builder.setWidth('100%'); // Produces: width="100%"
|
|
1822
|
+
* ```
|
|
1823
|
+
*/
|
|
1824
|
+
setWidth(width: number | string): this;
|
|
1825
|
+
/**
|
|
1826
|
+
* Sets the height attribute.
|
|
1827
|
+
*
|
|
1828
|
+
* @param height - Image height in pixels (number or string)
|
|
1829
|
+
* @returns This builder for method chaining
|
|
1830
|
+
*
|
|
1831
|
+
* @remarks
|
|
1832
|
+
* Setting explicit width and height helps prevent layout shift during page load.
|
|
1833
|
+
*
|
|
1834
|
+
* @example
|
|
1835
|
+
* ```typescript
|
|
1836
|
+
* builder.setHeight(600); // Produces: height="600"
|
|
1837
|
+
* builder.setHeight('auto'); // Produces: height="auto"
|
|
1838
|
+
* ```
|
|
1839
|
+
*/
|
|
1840
|
+
setHeight(height: number | string): this;
|
|
1841
|
+
/**
|
|
1842
|
+
* Sets the loading attribute (lazy loading strategy).
|
|
1843
|
+
*
|
|
1844
|
+
* @param loading - Loading strategy ('lazy' or 'eager')
|
|
1845
|
+
* @returns This builder for method chaining
|
|
1846
|
+
*
|
|
1847
|
+
* @remarks
|
|
1848
|
+
* - 'lazy' - Defer loading until the image is near the viewport (improves performance)
|
|
1849
|
+
* - 'eager' - Load immediately (default browser behavior)
|
|
1850
|
+
*
|
|
1851
|
+
* @example
|
|
1852
|
+
* ```typescript
|
|
1853
|
+
* builder.setLoading('lazy');
|
|
1854
|
+
* // Produces: loading="lazy"
|
|
1855
|
+
* // Good for below-the-fold images
|
|
1856
|
+
*
|
|
1857
|
+
* builder.setLoading('eager');
|
|
1858
|
+
* // Produces: loading="eager"
|
|
1859
|
+
* // Good for above-the-fold images
|
|
1860
|
+
* ```
|
|
1861
|
+
*/
|
|
1862
|
+
setLoading(loading: 'lazy' | 'eager'): this;
|
|
1863
|
+
}
|
|
1864
|
+
/**
|
|
1865
|
+
* Specialized attribute builder for HTML link and anchor (a) elements.
|
|
1866
|
+
*
|
|
1867
|
+
* @remarks
|
|
1868
|
+
* Extends {@link BaseAttributeBuilder} with link-specific attributes:
|
|
1869
|
+
* - href - Link destination URL
|
|
1870
|
+
* - rel - Relationship between current document and linked resource
|
|
1871
|
+
* - type - MIME type of linked resource
|
|
1872
|
+
* - media - Media query for when the link applies
|
|
1873
|
+
*
|
|
1874
|
+
* All common attributes from the base builder are also available.
|
|
1875
|
+
*
|
|
1876
|
+
* @example
|
|
1877
|
+
* Link element (stylesheet)
|
|
1878
|
+
* ```typescript
|
|
1879
|
+
* const stylesheetAttrs = new LinkAttributeBuilder()
|
|
1880
|
+
* .setHref('/styles/main.css')
|
|
1881
|
+
* .setRel('stylesheet')
|
|
1882
|
+
* .setType('text/css')
|
|
1883
|
+
* .build();
|
|
1884
|
+
* ```
|
|
1885
|
+
*
|
|
1886
|
+
* @example
|
|
1887
|
+
* Anchor element (hyperlink)
|
|
1888
|
+
* ```typescript
|
|
1889
|
+
* const linkAttrs = new LinkAttributeBuilder()
|
|
1890
|
+
* .setHref('https://example.com')
|
|
1891
|
+
* .setRel('noopener noreferrer')
|
|
1892
|
+
* .setId('external-link')
|
|
1893
|
+
* .addClass('link', 'link-external')
|
|
1894
|
+
* .build();
|
|
1895
|
+
* ```
|
|
1896
|
+
*
|
|
1897
|
+
* @see {@link BaseAttributeBuilder} for common attribute methods
|
|
1898
|
+
*/
|
|
1899
|
+
declare class LinkAttributeBuilder extends BaseAttributeBuilder {
|
|
1900
|
+
/**
|
|
1901
|
+
* Sets the href attribute (link destination).
|
|
1902
|
+
*
|
|
1903
|
+
* @param href - The URL of the linked resource
|
|
1904
|
+
* @returns This builder for method chaining
|
|
1905
|
+
*
|
|
1906
|
+
* @example
|
|
1907
|
+
* ```typescript
|
|
1908
|
+
* builder.setHref('/about');
|
|
1909
|
+
* // Produces: href="/about"
|
|
1910
|
+
*
|
|
1911
|
+
* builder.setHref('https://example.com');
|
|
1912
|
+
* // Produces: href="https://example.com"
|
|
1913
|
+
*
|
|
1914
|
+
* builder.setHref('#section-2');
|
|
1915
|
+
* // Produces: href="#section-2"
|
|
1916
|
+
* ```
|
|
1917
|
+
*/
|
|
1918
|
+
setHref(href: string): this;
|
|
1919
|
+
/**
|
|
1920
|
+
* Sets the rel attribute (relationship).
|
|
1921
|
+
*
|
|
1922
|
+
* @param rel - The relationship type(s) (space-separated)
|
|
1923
|
+
* @returns This builder for method chaining
|
|
1924
|
+
*
|
|
1925
|
+
* @remarks
|
|
1926
|
+
* Common values:
|
|
1927
|
+
* - 'stylesheet' - CSS stylesheet
|
|
1928
|
+
* - 'icon' - Favicon
|
|
1929
|
+
* - 'noopener' - Prevents window.opener access (security)
|
|
1930
|
+
* - 'noreferrer' - Prevents referer header
|
|
1931
|
+
* - 'nofollow' - Search engine hint
|
|
1932
|
+
*
|
|
1933
|
+
* @example
|
|
1934
|
+
* ```typescript
|
|
1935
|
+
* builder.setRel('stylesheet');
|
|
1936
|
+
* // Produces: rel="stylesheet"
|
|
1937
|
+
*
|
|
1938
|
+
* builder.setRel('noopener noreferrer');
|
|
1939
|
+
* // Produces: rel="noopener noreferrer"
|
|
1940
|
+
* ```
|
|
1941
|
+
*/
|
|
1942
|
+
setRel(rel: string): this;
|
|
1943
|
+
/**
|
|
1944
|
+
* Sets the type attribute (MIME type).
|
|
1945
|
+
*
|
|
1946
|
+
* @param type - The MIME type of the linked resource
|
|
1947
|
+
* @returns This builder for method chaining
|
|
1948
|
+
*
|
|
1949
|
+
* @example
|
|
1950
|
+
* ```typescript
|
|
1951
|
+
* builder.setType('text/css');
|
|
1952
|
+
* // Produces: type="text/css"
|
|
1953
|
+
*
|
|
1954
|
+
* builder.setType('application/rss+xml');
|
|
1955
|
+
* // Produces: type="application/rss+xml"
|
|
1956
|
+
* ```
|
|
1957
|
+
*/
|
|
1958
|
+
setType(type: string): this;
|
|
1959
|
+
/**
|
|
1960
|
+
* Sets the media attribute (media query).
|
|
1961
|
+
*
|
|
1962
|
+
* @param media - CSS media query for when the link applies
|
|
1963
|
+
* @returns This builder for method chaining
|
|
1964
|
+
*
|
|
1965
|
+
* @remarks
|
|
1966
|
+
* Used primarily with `<link>` elements to conditionally load resources.
|
|
1967
|
+
*
|
|
1968
|
+
* @example
|
|
1969
|
+
* ```typescript
|
|
1970
|
+
* builder.setMedia('screen and (min-width: 768px)');
|
|
1971
|
+
* // Produces: media="screen and (min-width: 768px)"
|
|
1972
|
+
*
|
|
1973
|
+
* builder.setMedia('print');
|
|
1974
|
+
* // Produces: media="print"
|
|
1975
|
+
* ```
|
|
1976
|
+
*/
|
|
1977
|
+
setMedia(media: string): this;
|
|
1978
|
+
}
|
|
1979
|
+
|
|
1980
|
+
/**
|
|
1981
|
+
* JsParam — jsTemplate 用変数参照マーカー型と sentinel エンコーディング
|
|
1982
|
+
*
|
|
1983
|
+
* factories.ts と js-template.ts の両方が共通して参照する。
|
|
1984
|
+
* 循環依存を防ぐため、依存関係のない独立したモジュールとして定義する。
|
|
1985
|
+
*/
|
|
1986
|
+
/**
|
|
1987
|
+
* jsTemplate で使う変数参照マーカー。
|
|
1988
|
+
* param('text') により生成され、属性値として渡された際に
|
|
1989
|
+
* 文字列リテラルではなく変数名として JS コードに展開される。
|
|
1990
|
+
*/
|
|
1991
|
+
interface JsParam {
|
|
1992
|
+
readonly __jsParam: true;
|
|
1993
|
+
readonly name: string;
|
|
1994
|
+
}
|
|
1995
|
+
/**
|
|
1996
|
+
* 値が JsParam マーカーかどうかを判定する型ガード。
|
|
1997
|
+
*
|
|
1998
|
+
* @param value - チェックする値
|
|
1999
|
+
* @returns value が JsParam の場合 true
|
|
2000
|
+
*/
|
|
2001
|
+
declare function isJsParam(value: unknown): value is JsParam;
|
|
2002
|
+
|
|
2003
|
+
/**
|
|
2004
|
+
* factories-utils.ts
|
|
2005
|
+
*
|
|
2006
|
+
* 宣言的API共通型と内部ユーティリティ関数。
|
|
2007
|
+
* タグファクトリファイル間で共有される。
|
|
2008
|
+
*
|
|
2009
|
+
* Requirements: 5.2, 5.7, 5.8
|
|
2010
|
+
*/
|
|
2011
|
+
|
|
2012
|
+
/**
|
|
2013
|
+
* Valid child argument types for tag factory functions.
|
|
2014
|
+
*
|
|
2015
|
+
* Can be either an {@link HTMLTagProtocol} instance or a string (which will be
|
|
2016
|
+
* automatically wrapped in a {@link TextType}).
|
|
2017
|
+
*
|
|
2018
|
+
* @example
|
|
2019
|
+
* ```typescript
|
|
2020
|
+
* const element = div(
|
|
2021
|
+
* 'Plain text', // string → TextType
|
|
2022
|
+
* p('Paragraph'), // HTMLTagProtocol
|
|
2023
|
+
* span('Inline text') // HTMLTagProtocol
|
|
2024
|
+
* );
|
|
2025
|
+
* ```
|
|
2026
|
+
*/
|
|
2027
|
+
type ChildArg = HTMLTagProtocol | string;
|
|
2028
|
+
/**
|
|
2029
|
+
* Attribute map for declarative attribute specification.
|
|
2030
|
+
*
|
|
2031
|
+
* **Value Types:**
|
|
2032
|
+
* - `string`: Creates a key-value attribute (e.g., `class="value"`, `id="value"`)
|
|
2033
|
+
* - `true`: Creates a boolean attribute (e.g., `checked`, `disabled`)
|
|
2034
|
+
* - `false`: Omits the attribute entirely
|
|
2035
|
+
*
|
|
2036
|
+
* **Special Keys:**
|
|
2037
|
+
* - `class`: Normalized through `normalizeClassNames`
|
|
2038
|
+
* - `data-*`: Creates custom data attributes
|
|
2039
|
+
* - Other keys: Standard HTML attributes
|
|
2040
|
+
*
|
|
2041
|
+
* @example
|
|
2042
|
+
* ```typescript
|
|
2043
|
+
* const element = div({
|
|
2044
|
+
* class: 'container active',
|
|
2045
|
+
* id: 'main',
|
|
2046
|
+
* 'data-value': '123',
|
|
2047
|
+
* hidden: false // Omitted from output
|
|
2048
|
+
* });
|
|
2049
|
+
* ```
|
|
2050
|
+
*
|
|
2051
|
+
* @example
|
|
2052
|
+
* Boolean attributes:
|
|
2053
|
+
* ```typescript
|
|
2054
|
+
* const checkbox = input({
|
|
2055
|
+
* type: 'checkbox',
|
|
2056
|
+
* checked: true, // Renders as: checked
|
|
2057
|
+
* disabled: false // Omitted
|
|
2058
|
+
* });
|
|
2059
|
+
* ```
|
|
2060
|
+
*/
|
|
2061
|
+
/**
|
|
2062
|
+
* `css` 属性に渡せる値の型。
|
|
2063
|
+
*
|
|
2064
|
+
* - 単一の `StyleTemplate`(無名 `createStyle({...})` の戻り値)
|
|
2065
|
+
* - 単一の `SharedStyle`(名前あり `createStyle("name", {...})` の戻り値)
|
|
2066
|
+
* - 上記の配列(順序保持で `class` 属性にマージされる)
|
|
2067
|
+
*
|
|
2068
|
+
* Requirements: 1.1, 1.4
|
|
2069
|
+
*/
|
|
2070
|
+
type CssAttributeValue = StyleTemplate | SharedStyle | ReadonlyArray<StyleTemplate | SharedStyle>;
|
|
2071
|
+
type AttributeMap = Record<string, string | boolean | JsParam | CssAttributeValue>;
|
|
2072
|
+
|
|
2073
|
+
/**
|
|
2074
|
+
* Creates an `<html>` element.
|
|
2075
|
+
*
|
|
2076
|
+
* The root element of an HTML document.
|
|
2077
|
+
*
|
|
2078
|
+
* @param args - Optional attributes, child elements, and a trailing `HtmlTagOptions`
|
|
2079
|
+
* @returns A new PairType instance representing an `<html>` element
|
|
2080
|
+
*
|
|
2081
|
+
* @example
|
|
2082
|
+
* ```typescript
|
|
2083
|
+
* const document = html(
|
|
2084
|
+
* head(title('My Page')),
|
|
2085
|
+
* body(h1('Welcome'))
|
|
2086
|
+
* );
|
|
2087
|
+
* ```
|
|
2088
|
+
*/
|
|
2089
|
+
declare const html: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2090
|
+
/**
|
|
2091
|
+
* Creates a `<head>` element.
|
|
2092
|
+
*
|
|
2093
|
+
* Contains metadata and document-level resources.
|
|
2094
|
+
*
|
|
2095
|
+
* @param args - Optional attributes, child elements, and a trailing `HtmlTagOptions`
|
|
2096
|
+
* @returns A new PairType instance representing a `<head>` element
|
|
2097
|
+
*
|
|
2098
|
+
* @example
|
|
2099
|
+
* ```typescript
|
|
2100
|
+
* const pageHead = head(
|
|
2101
|
+
* title('My Page'),
|
|
2102
|
+
* meta({ charset: 'utf-8' })
|
|
2103
|
+
* );
|
|
2104
|
+
* ```
|
|
2105
|
+
*/
|
|
2106
|
+
declare const head: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2107
|
+
/**
|
|
2108
|
+
* Creates a `<body>` element.
|
|
2109
|
+
*
|
|
2110
|
+
* Contains the visible content of the HTML document.
|
|
2111
|
+
*
|
|
2112
|
+
* @param args - Optional attributes, child elements, and a trailing `HtmlTagOptions`
|
|
2113
|
+
* @returns A new PairType instance representing a `<body>` element
|
|
2114
|
+
*
|
|
2115
|
+
* @example
|
|
2116
|
+
* ```typescript
|
|
2117
|
+
* const pageBody = body(
|
|
2118
|
+
* { class: 'main-layout' },
|
|
2119
|
+
* header(h1('Welcome')),
|
|
2120
|
+
* main(p('Content'))
|
|
2121
|
+
* );
|
|
2122
|
+
* ```
|
|
2123
|
+
*/
|
|
2124
|
+
declare const body: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2125
|
+
/**
|
|
2126
|
+
* Creates a `<div>` element.
|
|
2127
|
+
*
|
|
2128
|
+
* A generic container for flow content.
|
|
2129
|
+
*
|
|
2130
|
+
* @param args - Optional attributes, child elements, and a trailing `HtmlTagOptions`
|
|
2131
|
+
* @returns A new PairType instance representing a `<div>` element
|
|
2132
|
+
*
|
|
2133
|
+
* @example
|
|
2134
|
+
* ```typescript
|
|
2135
|
+
* const container = div(
|
|
2136
|
+
* { class: 'container' },
|
|
2137
|
+
* p('First paragraph'),
|
|
2138
|
+
* p('Second paragraph')
|
|
2139
|
+
* );
|
|
2140
|
+
* ```
|
|
2141
|
+
*/
|
|
2142
|
+
declare const div: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2143
|
+
/**
|
|
2144
|
+
* Creates a `<p>` element.
|
|
2145
|
+
*
|
|
2146
|
+
* Represents a paragraph of text.
|
|
2147
|
+
*
|
|
2148
|
+
* @param args - Optional attributes, child elements, and a trailing `HtmlTagOptions`
|
|
2149
|
+
* @returns A new PairType instance representing a `<p>` element
|
|
2150
|
+
*
|
|
2151
|
+
* @example
|
|
2152
|
+
* ```typescript
|
|
2153
|
+
* const paragraph = p('This is a paragraph.');
|
|
2154
|
+
* const styledParagraph = p(
|
|
2155
|
+
* { class: 'intro' },
|
|
2156
|
+
* 'This is an introduction.'
|
|
2157
|
+
* );
|
|
2158
|
+
* ```
|
|
2159
|
+
*/
|
|
2160
|
+
declare const p: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2161
|
+
/**
|
|
2162
|
+
* Creates a `<span>` element.
|
|
2163
|
+
*
|
|
2164
|
+
* A generic inline container for phrasing content.
|
|
2165
|
+
*
|
|
2166
|
+
* @param args - Optional attributes, child elements, and a trailing `HtmlTagOptions`
|
|
2167
|
+
* @returns A new PairType instance representing a `<span>` element
|
|
2168
|
+
*
|
|
2169
|
+
* @example
|
|
2170
|
+
* ```typescript
|
|
2171
|
+
* const highlighted = span({ class: 'highlight' }, 'Important text');
|
|
2172
|
+
* ```
|
|
2173
|
+
*/
|
|
2174
|
+
declare const span: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2175
|
+
/**
|
|
2176
|
+
* Creates a `<script>` element.
|
|
2177
|
+
*
|
|
2178
|
+
* Used to embed or reference executable JavaScript code.
|
|
2179
|
+
*
|
|
2180
|
+
* @param args - Optional attributes, child elements, and a trailing `HtmlTagOptions`
|
|
2181
|
+
* @returns A new PairType instance representing a `<script>` element
|
|
2182
|
+
*
|
|
2183
|
+
* @example
|
|
2184
|
+
* ```typescript
|
|
2185
|
+
* const inlineScript = script('console.log("Hello");');
|
|
2186
|
+
* const externalScript = script({ src: 'app.js' });
|
|
2187
|
+
* ```
|
|
2188
|
+
*/
|
|
2189
|
+
declare const script: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2190
|
+
|
|
2191
|
+
/** Creates a `<header>` element (introductory content or navigation aids). */
|
|
2192
|
+
declare const header: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2193
|
+
/** Creates a `<footer>` element (footer for nearest sectioning content or root). */
|
|
2194
|
+
declare const footer: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2195
|
+
/** Creates a `<nav>` element (section with navigation links). */
|
|
2196
|
+
declare const nav: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2197
|
+
/** Creates a `<main>` element (dominant content of the document body). */
|
|
2198
|
+
declare const main: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2199
|
+
/** Creates a `<section>` element (generic section of a document). */
|
|
2200
|
+
declare const section: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2201
|
+
/** Creates an `<article>` element (self-contained composition). */
|
|
2202
|
+
declare const article: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2203
|
+
/** Creates an `<aside>` element (content tangentially related to main content). */
|
|
2204
|
+
declare const aside: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2205
|
+
/** Creates a `<figure>` element (self-contained content with optional caption). */
|
|
2206
|
+
declare const figure: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2207
|
+
/** Creates a `<figcaption>` element (caption or legend for a figure). */
|
|
2208
|
+
declare const figcaption: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2209
|
+
/** Creates an `<h1>` element (level 1 heading). */
|
|
2210
|
+
declare const h1: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2211
|
+
/** Creates an `<h2>` element (level 2 heading). */
|
|
2212
|
+
declare const h2: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2213
|
+
/** Creates an `<h3>` element (level 3 heading). */
|
|
2214
|
+
declare const h3: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2215
|
+
/** Creates an `<h4>` element (level 4 heading). */
|
|
2216
|
+
declare const h4: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2217
|
+
/** Creates an `<h5>` element (level 5 heading). */
|
|
2218
|
+
declare const h5: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2219
|
+
/** Creates an `<h6>` element (level 6 heading). */
|
|
2220
|
+
declare const h6: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2221
|
+
/** Creates a `<details>` element (disclosure widget). */
|
|
2222
|
+
declare const details: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2223
|
+
/** Creates a `<summary>` element (summary for details element). */
|
|
2224
|
+
declare const summary: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2225
|
+
/** Creates a `<dialog>` element (dialog box or modal). */
|
|
2226
|
+
declare const dialog: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2227
|
+
/** Creates an `<iframe>` element (nested browsing context). */
|
|
2228
|
+
declare const iframe: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2229
|
+
/** Creates a `<noscript>` element (fallback for scripts disabled). */
|
|
2230
|
+
declare const noscript: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2231
|
+
/** Creates an `<a>` element (hyperlink). */
|
|
2232
|
+
declare const a: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2233
|
+
/** Creates a `<title>` element (document title). */
|
|
2234
|
+
declare const title: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2235
|
+
/**
|
|
2236
|
+
* Creates a `<var>` element (variable in mathematical or programming context).
|
|
2237
|
+
*
|
|
2238
|
+
* **Note:** Named `varTag` instead of `var` to avoid collision with JavaScript's `var` keyword.
|
|
2239
|
+
*/
|
|
2240
|
+
declare const varTag: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2241
|
+
|
|
2242
|
+
/** Creates a `<table>` element. */
|
|
2243
|
+
declare const table: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2244
|
+
/** Creates a `<thead>` element (table header group). */
|
|
2245
|
+
declare const thead: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2246
|
+
/** Creates a `<tbody>` element (table body group). */
|
|
2247
|
+
declare const tbody: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2248
|
+
/** Creates a `<tfoot>` element (table footer group). */
|
|
2249
|
+
declare const tfoot: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2250
|
+
/** Creates a `<tr>` element (table row). */
|
|
2251
|
+
declare const tr: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2252
|
+
/** Creates a `<th>` element (table header cell). */
|
|
2253
|
+
declare const th: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2254
|
+
/** Creates a `<td>` element (table data cell). */
|
|
2255
|
+
declare const td: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2256
|
+
/** Creates a `<caption>` element (table caption). */
|
|
2257
|
+
declare const caption: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2258
|
+
/** Creates a `<colgroup>` element (table column group). */
|
|
2259
|
+
declare const colgroup: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2260
|
+
/** Creates a `<ul>` element (unordered list). */
|
|
2261
|
+
declare const ul: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2262
|
+
/** Creates an `<ol>` element (ordered list). */
|
|
2263
|
+
declare const ol: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2264
|
+
/** Creates a `<li>` element (list item). */
|
|
2265
|
+
declare const li: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2266
|
+
/** Creates a `<dl>` element (description list). */
|
|
2267
|
+
declare const dl: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2268
|
+
/** Creates a `<dt>` element (description term). */
|
|
2269
|
+
declare const dt: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2270
|
+
/** Creates a `<dd>` element (description details). */
|
|
2271
|
+
declare const dd: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2272
|
+
|
|
2273
|
+
/** Creates a `<form>` element. */
|
|
2274
|
+
declare const form: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2275
|
+
/** Creates a `<label>` element (label for a form control). */
|
|
2276
|
+
declare const label: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2277
|
+
/** Creates a `<button>` element. */
|
|
2278
|
+
declare const button: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2279
|
+
/** Creates a `<select>` element (dropdown list). */
|
|
2280
|
+
declare const select: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2281
|
+
/** Creates an `<option>` element (option in a select list). */
|
|
2282
|
+
declare const option: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2283
|
+
/** Creates an `<optgroup>` element (group of options). */
|
|
2284
|
+
declare const optgroup: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2285
|
+
/** Creates a `<textarea>` element (multi-line text input). */
|
|
2286
|
+
declare const textarea: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2287
|
+
/** Creates a `<fieldset>` element (group of form controls). */
|
|
2288
|
+
declare const fieldset: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2289
|
+
/** Creates a `<legend>` element (caption for a fieldset). */
|
|
2290
|
+
declare const legend: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2291
|
+
/** Creates a `<datalist>` element (predefined options for input). */
|
|
2292
|
+
declare const datalist: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2293
|
+
/** Creates an `<output>` element (result of a calculation). */
|
|
2294
|
+
declare const output: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2295
|
+
|
|
2296
|
+
/** Creates a `<strong>` element (strong importance, serious urgency). */
|
|
2297
|
+
declare const strong: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2298
|
+
/** Creates an `<em>` element (stress emphasis). */
|
|
2299
|
+
declare const em: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2300
|
+
/** Creates a `<b>` element (bring attention to, stylistically offset). */
|
|
2301
|
+
declare const b: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2302
|
+
/** Creates an `<i>` element (alternative voice or mood). */
|
|
2303
|
+
declare const i: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2304
|
+
/** Creates a `<u>` element (unarticulated annotation). */
|
|
2305
|
+
declare const u: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2306
|
+
/** Creates an `<s>` element (strikethrough, no longer accurate). */
|
|
2307
|
+
declare const s: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2308
|
+
/** Creates a `<mark>` element (highlighted reference). */
|
|
2309
|
+
declare const mark: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2310
|
+
/** Creates a `<small>` element (side comments, small print). */
|
|
2311
|
+
declare const small: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2312
|
+
/** Creates a `<sub>` element (subscript). */
|
|
2313
|
+
declare const sub: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2314
|
+
/** Creates a `<sup>` element (superscript). */
|
|
2315
|
+
declare const sup: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2316
|
+
/** Creates a `<code>` element (fragment of computer code). */
|
|
2317
|
+
declare const code: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2318
|
+
/** Creates a `<pre>` element (preformatted text). */
|
|
2319
|
+
declare const pre: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2320
|
+
/** Creates a `<blockquote>` element (block quotation). */
|
|
2321
|
+
declare const blockquote: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2322
|
+
/** Creates a `<q>` element (inline quotation). */
|
|
2323
|
+
declare const q: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2324
|
+
/** Creates a `<cite>` element (title of a creative work). */
|
|
2325
|
+
declare const cite: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2326
|
+
/** Creates an `<abbr>` element (abbreviation or acronym). */
|
|
2327
|
+
declare const abbr: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2328
|
+
/** Creates an `<address>` element (contact information). */
|
|
2329
|
+
declare const address: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2330
|
+
/** Creates a `<time>` element (date/time). */
|
|
2331
|
+
declare const time: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2332
|
+
/** Creates a `<kbd>` element (keyboard input). */
|
|
2333
|
+
declare const kbd: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2334
|
+
/** Creates a `<samp>` element (sample output). */
|
|
2335
|
+
declare const samp: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2336
|
+
|
|
2337
|
+
/** Creates a `<video>` element (video player). */
|
|
2338
|
+
declare const video: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2339
|
+
/** Creates an `<audio>` element (audio player). */
|
|
2340
|
+
declare const audio: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2341
|
+
/** Creates a `<picture>` element (responsive image container). */
|
|
2342
|
+
declare const picture: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2343
|
+
/** Creates a `<canvas>` element (scriptable graphics). */
|
|
2344
|
+
declare const canvas: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2345
|
+
/** Creates an `<svg>` element (scalable vector graphics). */
|
|
2346
|
+
declare const svg: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2347
|
+
/**
|
|
2348
|
+
* Creates a `<br>` element (line break).
|
|
2349
|
+
*
|
|
2350
|
+
* @returns A new SelfClosingType instance representing a `<br>` element
|
|
2351
|
+
*
|
|
2352
|
+
* @example
|
|
2353
|
+
* ```typescript
|
|
2354
|
+
* const lineBreak = br();
|
|
2355
|
+
* // Renders as: <br>
|
|
2356
|
+
* ```
|
|
2357
|
+
*/
|
|
2358
|
+
declare const br: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2359
|
+
/**
|
|
2360
|
+
* Creates an `<hr>` element (thematic break / horizontal rule).
|
|
2361
|
+
*
|
|
2362
|
+
* @returns A new SelfClosingType instance representing an `<hr>` element
|
|
2363
|
+
*
|
|
2364
|
+
* @example
|
|
2365
|
+
* ```typescript
|
|
2366
|
+
* const separator = hr();
|
|
2367
|
+
* // Renders as: <hr>
|
|
2368
|
+
* ```
|
|
2369
|
+
*/
|
|
2370
|
+
declare const hr: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2371
|
+
/**
|
|
2372
|
+
* Creates an `<img>` element (image).
|
|
2373
|
+
*
|
|
2374
|
+
* @param attrs - Optional attributes (typically includes `src` and `alt`)
|
|
2375
|
+
* @param options - Optional HtmlTagOptions (for css/jqm injection)
|
|
2376
|
+
* @returns A new SelfClosingType instance representing an `<img>` element
|
|
2377
|
+
*
|
|
2378
|
+
* @example
|
|
2379
|
+
* ```typescript
|
|
2380
|
+
* const image = img({ src: 'photo.jpg', alt: 'My photo' });
|
|
2381
|
+
* // Renders as: <img src="photo.jpg" alt="My photo">
|
|
2382
|
+
* ```
|
|
2383
|
+
*/
|
|
2384
|
+
declare const img: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2385
|
+
/**
|
|
2386
|
+
* Creates an `<input>` element (form input control).
|
|
2387
|
+
*
|
|
2388
|
+
* @param attrs - Optional attributes (e.g., `type`, `name`, `value`, `placeholder`)
|
|
2389
|
+
* @param options - Optional HtmlTagOptions (for css/jqm injection)
|
|
2390
|
+
* @returns A new SelfClosingType instance representing an `<input>` element
|
|
2391
|
+
*
|
|
2392
|
+
* @example
|
|
2393
|
+
* ```typescript
|
|
2394
|
+
* const textInput = input({ type: 'text', placeholder: 'Enter name' });
|
|
2395
|
+
* const checkbox = input({ type: 'checkbox', checked: true });
|
|
2396
|
+
* ```
|
|
2397
|
+
*/
|
|
2398
|
+
declare const input: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2399
|
+
/**
|
|
2400
|
+
* Creates a `<meta>` element (metadata).
|
|
2401
|
+
*
|
|
2402
|
+
* @param attrs - Optional attributes (e.g., `charset`, `name`, `content`)
|
|
2403
|
+
* @param options - Optional HtmlTagOptions (for css/jqm injection)
|
|
2404
|
+
* @returns A new SelfClosingType instance representing a `<meta>` element
|
|
2405
|
+
*
|
|
2406
|
+
* @example
|
|
2407
|
+
* ```typescript
|
|
2408
|
+
* const charset = meta({ charset: 'utf-8' });
|
|
2409
|
+
* const viewport = meta({ name: 'viewport', content: 'width=device-width' });
|
|
2410
|
+
* ```
|
|
2411
|
+
*/
|
|
2412
|
+
declare const meta: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2413
|
+
/**
|
|
2414
|
+
* Creates a `<link>` element (external resource link, typically CSS).
|
|
2415
|
+
*
|
|
2416
|
+
* @param attrs - Optional attributes (e.g., `rel`, `href`, `type`)
|
|
2417
|
+
* @param options - Optional HtmlTagOptions (for css/jqm injection)
|
|
2418
|
+
* @returns A new SelfClosingType instance representing a `<link>` element
|
|
2419
|
+
*
|
|
2420
|
+
* @example
|
|
2421
|
+
* ```typescript
|
|
2422
|
+
* const stylesheet = link({ rel: 'stylesheet', href: 'styles.css' });
|
|
2423
|
+
* const icon = link({ rel: 'icon', href: 'favicon.ico' });
|
|
2424
|
+
* ```
|
|
2425
|
+
*/
|
|
2426
|
+
declare const link: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2427
|
+
/**
|
|
2428
|
+
* Creates a `<source>` element (media source for `<video>`, `<audio>`, or `<picture>`).
|
|
2429
|
+
*
|
|
2430
|
+
* @param attrs - Optional attributes (e.g., `src`, `type`, `media`)
|
|
2431
|
+
* @param options - Optional HtmlTagOptions (for css/jqm injection)
|
|
2432
|
+
* @returns A new SelfClosingType instance representing a `<source>` element
|
|
2433
|
+
*
|
|
2434
|
+
* @example
|
|
2435
|
+
* ```typescript
|
|
2436
|
+
* const videoSource = source({ src: 'video.mp4', type: 'video/mp4' });
|
|
2437
|
+
* ```
|
|
2438
|
+
*/
|
|
2439
|
+
declare const source: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2440
|
+
/**
|
|
2441
|
+
* Creates a `<track>` element (text track for media elements).
|
|
2442
|
+
*
|
|
2443
|
+
* @param attrs - Optional attributes (e.g., `kind`, `src`, `srclang`, `label`)
|
|
2444
|
+
* @param options - Optional HtmlTagOptions (for css/jqm injection)
|
|
2445
|
+
* @returns A new SelfClosingType instance representing a `<track>` element
|
|
2446
|
+
*
|
|
2447
|
+
* @example
|
|
2448
|
+
* ```typescript
|
|
2449
|
+
* const subtitles = track({ kind: 'subtitles', src: 'subs.vtt', srclang: 'en' });
|
|
2450
|
+
* ```
|
|
2451
|
+
*/
|
|
2452
|
+
declare const track: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2453
|
+
/**
|
|
2454
|
+
* Creates an `<area>` element (clickable area in an image map).
|
|
2455
|
+
*
|
|
2456
|
+
* @param attrs - Optional attributes (e.g., `shape`, `coords`, `href`, `alt`)
|
|
2457
|
+
* @param options - Optional HtmlTagOptions (for css/jqm injection)
|
|
2458
|
+
* @returns A new SelfClosingType instance representing an `<area>` element
|
|
2459
|
+
*/
|
|
2460
|
+
declare const area: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2461
|
+
/**
|
|
2462
|
+
* Creates a `<col>` element (table column definition).
|
|
2463
|
+
*
|
|
2464
|
+
* @param attrs - Optional attributes (e.g., `span`)
|
|
2465
|
+
* @param options - Optional HtmlTagOptions (for css/jqm injection)
|
|
2466
|
+
* @returns A new SelfClosingType instance representing a `<col>` element
|
|
2467
|
+
*/
|
|
2468
|
+
declare const col: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2469
|
+
/**
|
|
2470
|
+
* Creates a `<base>` element (base URL for relative URLs).
|
|
2471
|
+
*
|
|
2472
|
+
* @param attrs - Optional attributes (e.g., `href`, `target`)
|
|
2473
|
+
* @param options - Optional HtmlTagOptions (for css/jqm injection)
|
|
2474
|
+
* @returns A new SelfClosingType instance representing a `<base>` element
|
|
2475
|
+
*
|
|
2476
|
+
* @example
|
|
2477
|
+
* ```typescript
|
|
2478
|
+
* const baseUrl = base({ href: 'https://example.com/' });
|
|
2479
|
+
* ```
|
|
2480
|
+
*/
|
|
2481
|
+
declare const base: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2482
|
+
/**
|
|
2483
|
+
* Creates an `<embed>` element (embedded external content).
|
|
2484
|
+
*
|
|
2485
|
+
* @param attrs - Optional attributes (e.g., `src`, `type`, `width`, `height`)
|
|
2486
|
+
* @param options - Optional HtmlTagOptions (for css/jqm injection)
|
|
2487
|
+
* @returns A new SelfClosingType instance representing an `<embed>` element
|
|
2488
|
+
*/
|
|
2489
|
+
declare const embed: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2490
|
+
/**
|
|
2491
|
+
* Creates a `<wbr>` element (word break opportunity).
|
|
2492
|
+
*
|
|
2493
|
+
* @returns A new SelfClosingType instance representing a `<wbr>` element
|
|
2494
|
+
*
|
|
2495
|
+
* @example
|
|
2496
|
+
* ```typescript
|
|
2497
|
+
* const longUrl = p('https://very', wbr(), 'long', wbr(), 'url.com');
|
|
2498
|
+
* ```
|
|
2499
|
+
*/
|
|
2500
|
+
declare const wbr: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2501
|
+
/**
|
|
2502
|
+
* Creates a text node.
|
|
2503
|
+
*
|
|
2504
|
+
* Text nodes are usually created automatically when passing strings to tag factories,
|
|
2505
|
+
* but this function can be used for explicit text node creation.
|
|
2506
|
+
*
|
|
2507
|
+
* @param content - The text content (HTML-escaped automatically)
|
|
2508
|
+
* @returns A new TextType instance
|
|
2509
|
+
*
|
|
2510
|
+
* @example
|
|
2511
|
+
* ```typescript
|
|
2512
|
+
* // Explicit text node creation
|
|
2513
|
+
* const text = Text('Hello <World>'); // renders: Hello <World>
|
|
2514
|
+
*
|
|
2515
|
+
* // Usually, strings are auto-converted:
|
|
2516
|
+
* const paragraph = p('This is automatically wrapped in TextType');
|
|
2517
|
+
* ```
|
|
2518
|
+
*/
|
|
2519
|
+
declare function Text(content: string): TextType;
|
|
2520
|
+
declare namespace Text {
|
|
2521
|
+
var unsafeRaw: (content: string) => TextType;
|
|
2522
|
+
}
|
|
2523
|
+
|
|
2524
|
+
declare const tags: {
|
|
2525
|
+
readonly html: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2526
|
+
readonly head: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2527
|
+
readonly body: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2528
|
+
readonly div: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2529
|
+
readonly p: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2530
|
+
readonly span: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2531
|
+
readonly script: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2532
|
+
readonly header: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2533
|
+
readonly footer: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2534
|
+
readonly nav: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2535
|
+
readonly main: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2536
|
+
readonly section: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2537
|
+
readonly article: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2538
|
+
readonly aside: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2539
|
+
readonly figure: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2540
|
+
readonly figcaption: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2541
|
+
readonly h1: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2542
|
+
readonly h2: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2543
|
+
readonly h3: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2544
|
+
readonly h4: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2545
|
+
readonly h5: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2546
|
+
readonly h6: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2547
|
+
readonly details: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2548
|
+
readonly summary: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2549
|
+
readonly dialog: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2550
|
+
readonly iframe: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2551
|
+
readonly noscript: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2552
|
+
readonly a: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2553
|
+
readonly title: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2554
|
+
readonly varTag: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2555
|
+
readonly table: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2556
|
+
readonly thead: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2557
|
+
readonly tbody: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2558
|
+
readonly tfoot: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2559
|
+
readonly tr: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2560
|
+
readonly th: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2561
|
+
readonly td: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2562
|
+
readonly caption: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2563
|
+
readonly colgroup: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2564
|
+
readonly ul: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2565
|
+
readonly ol: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2566
|
+
readonly li: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2567
|
+
readonly dl: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2568
|
+
readonly dt: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2569
|
+
readonly dd: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2570
|
+
readonly form: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2571
|
+
readonly label: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2572
|
+
readonly button: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2573
|
+
readonly select: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2574
|
+
readonly option: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2575
|
+
readonly optgroup: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2576
|
+
readonly textarea: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2577
|
+
readonly fieldset: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2578
|
+
readonly legend: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2579
|
+
readonly datalist: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2580
|
+
readonly output: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2581
|
+
readonly strong: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2582
|
+
readonly em: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2583
|
+
readonly b: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2584
|
+
readonly i: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2585
|
+
readonly u: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2586
|
+
readonly s: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2587
|
+
readonly mark: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2588
|
+
readonly small: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2589
|
+
readonly sub: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2590
|
+
readonly sup: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2591
|
+
readonly code: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2592
|
+
readonly pre: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2593
|
+
readonly blockquote: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2594
|
+
readonly q: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2595
|
+
readonly cite: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2596
|
+
readonly abbr: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2597
|
+
readonly address: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2598
|
+
readonly time: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2599
|
+
readonly kbd: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2600
|
+
readonly samp: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2601
|
+
readonly video: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2602
|
+
readonly audio: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2603
|
+
readonly picture: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2604
|
+
readonly canvas: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2605
|
+
readonly svg: (...args: Array<AttributeMap | ChildArg | HtmlTagOptions>) => PairType;
|
|
2606
|
+
readonly br: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2607
|
+
readonly hr: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2608
|
+
readonly img: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2609
|
+
readonly input: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2610
|
+
readonly meta: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2611
|
+
readonly link: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2612
|
+
readonly source: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2613
|
+
readonly track: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2614
|
+
readonly area: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2615
|
+
readonly col: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2616
|
+
readonly base: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2617
|
+
readonly embed: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2618
|
+
readonly wbr: (attrs?: AttributeMap, options?: HtmlTagOptions) => SelfClosingType;
|
|
2619
|
+
readonly Text: typeof Text;
|
|
2620
|
+
};
|
|
2621
|
+
|
|
2622
|
+
/**
|
|
2623
|
+
* HTMLFormatter: minified HTMLを整形済みHTMLに変換するユーティリティ
|
|
2624
|
+
*
|
|
2625
|
+
* protoRender()が生成したインデントなしHTML文字列を、
|
|
2626
|
+
* 4スペースインデント + 改行付きの整形済みHTMLに変換する。
|
|
2627
|
+
*
|
|
2628
|
+
* Requirements: 6.1
|
|
2629
|
+
*/
|
|
2630
|
+
declare class HTMLFormatter {
|
|
2631
|
+
static format(minifiedHtml: string): string;
|
|
2632
|
+
}
|
|
2633
|
+
|
|
2634
|
+
declare class CssPositionMaker implements CssPositionMakerType {
|
|
2635
|
+
/** タグの階層パス(例: 'html>body>div') */
|
|
2636
|
+
tagPath: string;
|
|
2637
|
+
private _relationShip?;
|
|
2638
|
+
private _top?;
|
|
2639
|
+
private _left?;
|
|
2640
|
+
private _width?;
|
|
2641
|
+
private _height?;
|
|
2642
|
+
private _bottom?;
|
|
2643
|
+
private _right?;
|
|
2644
|
+
private _llRegister?;
|
|
2645
|
+
/**
|
|
2646
|
+
* CssPositionMaker を構築する
|
|
2647
|
+
* @param tagPath - タグの階層パス
|
|
2648
|
+
*/
|
|
2649
|
+
constructor(tagPath: string);
|
|
2650
|
+
/**
|
|
2651
|
+
* 現在の配置設定の概要を取得する
|
|
2652
|
+
*
|
|
2653
|
+
* top, left, width, height の値を含むオブジェクトを返す。
|
|
2654
|
+
* 遅延レイアウト解決に使用される。
|
|
2655
|
+
*
|
|
2656
|
+
* @returns 配置設定の概要
|
|
2657
|
+
*/
|
|
2658
|
+
get description(): CssPlaceDescription;
|
|
2659
|
+
/**
|
|
2660
|
+
* 遅延レイアウトレジスタを更新する
|
|
2661
|
+
*
|
|
2662
|
+
* @param register - 遅延レイアウトレジスタ(undefined で解除)
|
|
2663
|
+
*/
|
|
2664
|
+
updateLLRegister(register: LazyLayoutRegister | undefined): void;
|
|
2665
|
+
/**
|
|
2666
|
+
* 遅延レイアウトレジスタを取得する
|
|
2667
|
+
*
|
|
2668
|
+
* @returns 遅延レイアウトレジスタ、または undefined
|
|
2669
|
+
*/
|
|
2670
|
+
getLLRegister(): LazyLayoutRegister | undefined;
|
|
2671
|
+
/**
|
|
2672
|
+
* 絶対配置を設定する
|
|
2673
|
+
*
|
|
2674
|
+
* position: absolute を設定し、ビルダーで配置プロパティを指定する。
|
|
2675
|
+
* 絶対配置は位置指定された祖先要素を基準とする。
|
|
2676
|
+
*
|
|
2677
|
+
* @param closure - 配置プロパティを設定するビルダー関数
|
|
2678
|
+
*
|
|
2679
|
+
* @example
|
|
2680
|
+
* ```ts
|
|
2681
|
+
* maker.placeAbsoluteWith(b => {
|
|
2682
|
+
* b.top(0, 'px').left(0, 'px').width(100, '%').height(100, '%');
|
|
2683
|
+
* });
|
|
2684
|
+
* ```
|
|
2685
|
+
*/
|
|
2686
|
+
placeAbsoluteWith(closure: (builder: CssLayoutBuilder) => void): void;
|
|
2687
|
+
/**
|
|
2688
|
+
* 相対配置を設定する
|
|
2689
|
+
*
|
|
2690
|
+
* position: relative を設定し、ビルダーで配置プロパティを指定する。
|
|
2691
|
+
* 相対配置は元の位置からのオフセットを指定する。
|
|
2692
|
+
*
|
|
2693
|
+
* @param closure - 配置プロパティを設定するビルダー関数
|
|
2694
|
+
*
|
|
2695
|
+
* @example
|
|
2696
|
+
* ```ts
|
|
2697
|
+
* maker.placeRelativeWith(b => {
|
|
2698
|
+
* b.top(10, 'px').left(10, 'px');
|
|
2699
|
+
* });
|
|
2700
|
+
* ```
|
|
2701
|
+
*/
|
|
2702
|
+
placeRelativeWith(closure: (builder: CssLayoutBuilder) => void): void;
|
|
2703
|
+
/**
|
|
2704
|
+
* 通常配置を設定する
|
|
2705
|
+
*
|
|
2706
|
+
* position: static を設定する(デフォルトのドキュメントフロー)。
|
|
2707
|
+
*
|
|
2708
|
+
* @param closure - 配置プロパティを設定するビルダー関数
|
|
2709
|
+
*/
|
|
2710
|
+
placeStaticWith(closure: (builder: CssLayoutBuilder) => void): void;
|
|
2711
|
+
/**
|
|
2712
|
+
* 固定配置を設定する
|
|
2713
|
+
*
|
|
2714
|
+
* position: fixed を設定し、ビルダーで配置プロパティを指定する。
|
|
2715
|
+
* 固定配置はビューポートを基準とする。
|
|
2716
|
+
*
|
|
2717
|
+
* @param closure - 配置プロパティを設定するビルダー関数
|
|
2718
|
+
*
|
|
2719
|
+
* @example
|
|
2720
|
+
* ```ts
|
|
2721
|
+
* maker.placeFixedWith(b => {
|
|
2722
|
+
* b.top(0, 'px').right(0, 'px').width(200, 'px');
|
|
2723
|
+
* });
|
|
2724
|
+
* ```
|
|
2725
|
+
*/
|
|
2726
|
+
placeFixedWith(closure: (builder: CssLayoutBuilder) => void): void;
|
|
2727
|
+
/**
|
|
2728
|
+
* 配置プロパティをCSS文字列としてレンダリングする
|
|
2729
|
+
*
|
|
2730
|
+
* 設定されたプロパティのみをアルファベット順にソートして出力する。
|
|
2731
|
+
*
|
|
2732
|
+
* @returns CSS文字列(未設定の場合は空文字列)
|
|
2733
|
+
*/
|
|
2734
|
+
render(): string;
|
|
2735
|
+
private placeWith;
|
|
2736
|
+
private collectProperties;
|
|
2737
|
+
}
|
|
2738
|
+
|
|
2739
|
+
/**
|
|
2740
|
+
* CSSスタイル管理クラス
|
|
2741
|
+
*
|
|
2742
|
+
* {@link HtmlStyle} インスタンスを保持し、13種類のCSSプロパティクラスへの
|
|
2743
|
+
* アクセスとレンダリング機能を提供する。
|
|
2744
|
+
*
|
|
2745
|
+
* ## 管理するプロパティカテゴリ
|
|
2746
|
+
*
|
|
2747
|
+
* - フォント ({@link CSSFont})
|
|
2748
|
+
* - 背景 ({@link CSSBackground})
|
|
2749
|
+
* - テキスト ({@link CSSText})
|
|
2750
|
+
* - 余白 ({@link CSSSpacing})
|
|
2751
|
+
* - 枠線 ({@link CSSBorder})
|
|
2752
|
+
* - 表示制御 ({@link CSSVisibility})
|
|
2753
|
+
* - Flexbox ({@link CSSFlex})
|
|
2754
|
+
* - Grid ({@link CSSGrid})
|
|
2755
|
+
* - 視覚効果 ({@link CSSVisual})
|
|
2756
|
+
* - 変形 ({@link CSSTransform})
|
|
2757
|
+
* - アニメーション ({@link CSSAnimation})
|
|
2758
|
+
* - テーブル ({@link CSSTable})
|
|
2759
|
+
* - リスト ({@link CSSList})
|
|
2760
|
+
*
|
|
2761
|
+
* @example
|
|
2762
|
+
* ```ts
|
|
2763
|
+
* const manager = new CssStyleManager();
|
|
2764
|
+
* manager.style.font.setFontSize('16px').setColor('#333');
|
|
2765
|
+
* manager.style.spacing.setMarginTop('10px');
|
|
2766
|
+
*
|
|
2767
|
+
* console.log(manager.render());
|
|
2768
|
+
* // → "color: #333;\nfont-size: 16px;\nmargin-top: 10px;"
|
|
2769
|
+
* ```
|
|
2770
|
+
*
|
|
2771
|
+
* @see {@link CssStyleManagerType}
|
|
2772
|
+
* @see {@link HtmlStyle}
|
|
2773
|
+
*/
|
|
2774
|
+
|
|
2775
|
+
declare class CssStyleManager implements CssStyleManagerType {
|
|
2776
|
+
/** HtmlStyle インスタンス(13種類のプロパティクラスを統合管理) */
|
|
2777
|
+
readonly style: HtmlStyle;
|
|
2778
|
+
/**
|
|
2779
|
+
* すべてのスタイルプロパティをCSS文字列としてレンダリングする
|
|
2780
|
+
*
|
|
2781
|
+
* @returns CSS文字列(設定されたプロパティがない場合は空文字列)
|
|
2782
|
+
*/
|
|
2783
|
+
render(): string;
|
|
2784
|
+
/**
|
|
2785
|
+
* 設定されたフォントサイズを HlUnit として取得する
|
|
2786
|
+
*
|
|
2787
|
+
* コンテキスト伝播(em単位の計算など)に使用される。
|
|
2788
|
+
*
|
|
2789
|
+
* @returns フォントサイズの HlUnit、または undefined(未設定時)
|
|
2790
|
+
*/
|
|
2791
|
+
getFontSizeUnit(): HlUnit | undefined;
|
|
2792
|
+
}
|
|
2793
|
+
|
|
2794
|
+
/**
|
|
2795
|
+
* CSS中央管理クラス
|
|
2796
|
+
*
|
|
2797
|
+
* CssStyleManager と CssPositionMaker を統合的に保持し、
|
|
2798
|
+
* CSS文字列の統合出力とスコープドCSS出力を提供する。
|
|
2799
|
+
*
|
|
2800
|
+
* ## 主な機能
|
|
2801
|
+
*
|
|
2802
|
+
* - **スタイル管理**: {@link CssStyleManager} を通じて13種類のCSSプロパティを管理
|
|
2803
|
+
* - **レイアウト管理**: {@link CssPositionMaker} を通じて要素の配置を管理
|
|
2804
|
+
* - **スコープドCSS**: タグパスに基づくハッシュクラス名の自動生成
|
|
2805
|
+
* - **遅延レイアウト**: {@link LazyLayoutManager} との連携による依存関係の解決
|
|
2806
|
+
*
|
|
2807
|
+
* ## レンダリング
|
|
2808
|
+
*
|
|
2809
|
+
* - {@link render}(): スタイルCSS + レイアウトCSS の結合文字列
|
|
2810
|
+
* - {@link renderCss}(): スコープドCSS形式(`._{hash}` { ... })またはインラインスタイル
|
|
2811
|
+
*
|
|
2812
|
+
* @example
|
|
2813
|
+
* ```ts
|
|
2814
|
+
* const manager = new CssManager('html>body>div');
|
|
2815
|
+
* manager.styleManager.style.font.setFontSize('16px');
|
|
2816
|
+
* manager.layout.placeAbsoluteWith(b => b.top(0, 'px').left(0, 'px'));
|
|
2817
|
+
*
|
|
2818
|
+
* // インラインスタイル出力
|
|
2819
|
+
* console.log(manager.render());
|
|
2820
|
+
* // → "font-size: 16px;\nleft: 0px;\nposition: absolute;\ntop: 0px;"
|
|
2821
|
+
*
|
|
2822
|
+
* // スコープドCSS出力
|
|
2823
|
+
* console.log(manager.renderCss());
|
|
2824
|
+
* // → "._a1b2c3d4 {\nfont-size: 16px;\nleft: 0px;\nposition: absolute;\ntop: 0px;\n}"
|
|
2825
|
+
* ```
|
|
2826
|
+
*
|
|
2827
|
+
* @see {@link CssManagerInstance}
|
|
2828
|
+
* @see {@link CssStyleManager}
|
|
2829
|
+
* @see {@link CssPositionMaker}
|
|
2830
|
+
* @see {@link CssConfig}
|
|
2831
|
+
*/
|
|
2832
|
+
|
|
2833
|
+
declare class CssManager implements CssManagerInstance {
|
|
2834
|
+
/** レイアウト管理インスタンス */
|
|
2835
|
+
readonly layout: CssPositionMaker;
|
|
2836
|
+
/** スタイル管理インスタンス */
|
|
2837
|
+
readonly styleManager: CssStyleManager;
|
|
2838
|
+
/** CSS出力設定 */
|
|
2839
|
+
readonly config: CssConfig;
|
|
2840
|
+
/** タグの階層パス(例: 'html>body>div') */
|
|
2841
|
+
tagPath: string;
|
|
2842
|
+
/**
|
|
2843
|
+
* `scopedCssEnabled=false` モードで擬似クラススタイルを検出した際に、
|
|
2844
|
+
* 当該 manager インスタンスで既に警告を発火したかを示すフラグ。
|
|
2845
|
+
* 同一要素からの重複警告を抑止するために用いる。
|
|
2846
|
+
*/
|
|
2847
|
+
private _pseudoWarningEmitted;
|
|
2848
|
+
/**
|
|
2849
|
+
* `registerTemplate` で蓄積された (className, template) エントリ列。
|
|
2850
|
+
*
|
|
2851
|
+
* **render-phase only**:`registerTemplate` は `HtmlTag.protoRender` 内
|
|
2852
|
+
* (tagPath 確定後)でのみ呼ばれる。属性パース時には呼ばれない。
|
|
2853
|
+
* 同一 `(tagPath, template.bodyHash)` 重複登録は冪等で、
|
|
2854
|
+
* このバッファに同じエントリを 2 度蓄積しない。
|
|
2855
|
+
*
|
|
2856
|
+
* 出力順は登録順を保持する(`renderCss()` で順序保持)。
|
|
2857
|
+
*
|
|
2858
|
+
* @internal
|
|
2859
|
+
*/
|
|
2860
|
+
private readonly _registeredTemplates;
|
|
2861
|
+
/**
|
|
2862
|
+
* 同一 `(tagPath, bodyHash)` の冪等性判定用キーセット。
|
|
2863
|
+
* @internal
|
|
2864
|
+
*/
|
|
2865
|
+
private readonly _registeredKeys;
|
|
2866
|
+
/**
|
|
2867
|
+
* @media ルールの内部ストレージ。
|
|
2868
|
+
*
|
|
2869
|
+
* キー: ブレークポイント(px 値)
|
|
2870
|
+
* 値: プロパティ名 → 値 のマップ
|
|
2871
|
+
*
|
|
2872
|
+
* 同一ブレークポイントへの `addMediaRule` 呼び出しはプロパティをマージする。
|
|
2873
|
+
* レンダリングは Task 4.2 で実装する。
|
|
2874
|
+
*
|
|
2875
|
+
* @internal
|
|
2876
|
+
*/
|
|
2877
|
+
private readonly _mediaRules;
|
|
2878
|
+
/**
|
|
2879
|
+
* CssManager を構築する
|
|
2880
|
+
*
|
|
2881
|
+
* @param tagPath - タグの階層パス(デフォルト: '')
|
|
2882
|
+
* @param config - CSS出力設定(省略時はデフォルト設定)
|
|
2883
|
+
*/
|
|
2884
|
+
constructor(tagPath?: string, config?: CssConfig);
|
|
2885
|
+
/**
|
|
2886
|
+
* タグパスを更新し、レイアウトマネージャーにも伝播する
|
|
2887
|
+
*
|
|
2888
|
+
* @param newPath - 新しいタグパス
|
|
2889
|
+
*/
|
|
2890
|
+
updateTagPath(newPath: string): void;
|
|
2891
|
+
/**
|
|
2892
|
+
* 遅延レイアウトレジスタを更新する
|
|
2893
|
+
*
|
|
2894
|
+
* @param register - 遅延レイアウトレジスタ(undefined で解除)
|
|
2895
|
+
*/
|
|
2896
|
+
updateLazyLayoutRegister(register: LazyLayoutRegister | undefined): void;
|
|
2897
|
+
/**
|
|
2898
|
+
* `StyleTemplate` を内部バッファに登録し、解決済みクラス名を返す。
|
|
2899
|
+
*
|
|
2900
|
+
* **契約(design.md "registerTemplate の Pre/Post 条件" を参照)**:
|
|
2901
|
+
*
|
|
2902
|
+
* - Pre: `tagPath` は非空。`registerTemplate` は **render フェーズでのみ呼ばれる**
|
|
2903
|
+
* (属性パース時には呼ばれない)。
|
|
2904
|
+
* - Post: 戻り値の `className` は
|
|
2905
|
+
* `resolver.resolveClassName(tagPath, template.bodyHash, template.debugVarName)` と同値。
|
|
2906
|
+
* `template.debugVarName` が未設定の場合は従来の bodyHash 経路と同一形式となる。
|
|
2907
|
+
* 内部バッファに `(className, template)` を登録順で追加する。
|
|
2908
|
+
* 同一 `(tagPath, template.bodyHash)` の重複登録は冪等で、
|
|
2909
|
+
* 同じ className を返し、バッファに重複追加しない。
|
|
2910
|
+
*
|
|
2911
|
+
* `renderCss()` 出力には登録された rule が登録順で含まれる。
|
|
2912
|
+
*
|
|
2913
|
+
* @param template - 登録対象の StyleTemplate
|
|
2914
|
+
* @param resolver - クラス名解決に用いる IdentifierResolver
|
|
2915
|
+
* @param tagPath - 要素の構造パス(非空)
|
|
2916
|
+
* @returns 解決済みクラス名
|
|
2917
|
+
*
|
|
2918
|
+
* Requirements: 1.1, 1.2, 1.3, 1.4, 1.7
|
|
2919
|
+
*/
|
|
2920
|
+
registerTemplate(template: StyleTemplate, resolver: IdentifierResolver, tagPath: string): string;
|
|
2921
|
+
/**
|
|
2922
|
+
* スタイルCSSとレイアウトCSSを結合して返す
|
|
2923
|
+
*
|
|
2924
|
+
* スコープクラスなしのインラインスタイル形式で出力する。
|
|
2925
|
+
*
|
|
2926
|
+
* @returns CSS文字列(両方とも空の場合は空文字列)
|
|
2927
|
+
*/
|
|
2928
|
+
render(): string;
|
|
2929
|
+
/**
|
|
2930
|
+
* スコープドCSSまたはインラインスタイルとして出力する
|
|
2931
|
+
*
|
|
2932
|
+
* {@link CssConfig.scopedCssEnabled} が true の場合、
|
|
2933
|
+
* タグパスから生成したハッシュクラス名で CSS をラップする。
|
|
2934
|
+
*
|
|
2935
|
+
* `resolver` が指定された場合、wrapper class 名は `resolver.resolveClassName(tagPath)`
|
|
2936
|
+
* から取得する(minify モード等が反映される)。省略時は従来通り
|
|
2937
|
+
* `generateScopedClassName(tagPath)` を直接呼ぶ(既存挙動とバイト等価)。
|
|
2938
|
+
*
|
|
2939
|
+
* 設計: minify 状態の単一情報源は `IdentifierResolver`。`this.config.minifyClassNames`
|
|
2940
|
+
* は本メソッドからは参照しない(css-config-pipeline-wiring spec)。
|
|
2941
|
+
*
|
|
2942
|
+
* @param resolver - クラス名解決に用いる IdentifierResolver(省略可)
|
|
2943
|
+
* @returns スコープドCSS文字列またはインラインスタイル
|
|
2944
|
+
*
|
|
2945
|
+
* @example
|
|
2946
|
+
* ```ts
|
|
2947
|
+
* // scopedCssEnabled = true の場合
|
|
2948
|
+
* // "._a1b2c3d4 {\nfont-size: 16px;\n}"
|
|
2949
|
+
*
|
|
2950
|
+
* // scopedCssEnabled = false の場合
|
|
2951
|
+
* // "font-size: 16px;"
|
|
2952
|
+
* ```
|
|
2953
|
+
*/
|
|
2954
|
+
renderCss(resolver?: IdentifierResolver): string;
|
|
2955
|
+
/**
|
|
2956
|
+
* @media ルールを内部マップに追加する。
|
|
2957
|
+
*
|
|
2958
|
+
* 同一ブレークポイントに対して複数回呼び出した場合、プロパティはマージされる。
|
|
2959
|
+
* 同一プロパティ名が既に存在する場合は上書きされる。
|
|
2960
|
+
*
|
|
2961
|
+
* @param breakpointPx - ブレークポイント(px 値)
|
|
2962
|
+
* @param props - 追加するCSSプロパティのマップ
|
|
2963
|
+
*
|
|
2964
|
+
* Requirements: 9.1, 9.4
|
|
2965
|
+
*/
|
|
2966
|
+
addMediaRule(breakpointPx: number, props: Record<string, string>): void;
|
|
2967
|
+
/**
|
|
2968
|
+
* `_mediaRules` を `@media (min-width: {bp}px) { .{className} { ... } }` ブロックの配列に展開する。
|
|
2969
|
+
*
|
|
2970
|
+
* ブレークポイントの昇順でブロックを生成する。
|
|
2971
|
+
* プロパティ名は kebab-case に変換する。
|
|
2972
|
+
*
|
|
2973
|
+
* @param className - スコープドクラス名(`_` プレフィックス付きハッシュ)
|
|
2974
|
+
* @internal
|
|
2975
|
+
*/
|
|
2976
|
+
private _renderMediaBlocks;
|
|
2977
|
+
/**
|
|
2978
|
+
* 登録済みテンプレートを登録順に CSS ブロック文字列の配列に展開する。
|
|
2979
|
+
* @internal
|
|
2980
|
+
*/
|
|
2981
|
+
private _renderRegisteredBlocks;
|
|
2982
|
+
}
|
|
2983
|
+
|
|
2984
|
+
/**
|
|
2985
|
+
* デフォルトCSS管理クラス(no-op実装)
|
|
2986
|
+
*
|
|
2987
|
+
* {@link CssManagerInstance} のデフォルト実装で、すべてのメソッドが
|
|
2988
|
+
* 空文字列または空操作を返す。CSS が設定されていない {@link HtmlTag} に
|
|
2989
|
+
* 注入され、Null Objectパターンとして機能する。
|
|
2990
|
+
*
|
|
2991
|
+
* ## 用途
|
|
2992
|
+
*
|
|
2993
|
+
* - CSS未設定のタグに対する安全なデフォルト実装
|
|
2994
|
+
* - CSS機能を使用しない場合のオーバーヘッド削減
|
|
2995
|
+
* - Null Objectパターンによる条件分岐の削減
|
|
2996
|
+
*
|
|
2997
|
+
* @example
|
|
2998
|
+
* ```ts
|
|
2999
|
+
* const tag = new HtmlTag('div');
|
|
3000
|
+
* // tag.css は内部的に DefaultCssManager のインスタンス
|
|
3001
|
+
*
|
|
3002
|
+
* tag.css.render(); // → ''
|
|
3003
|
+
* tag.css.renderCss(); // → ''
|
|
3004
|
+
* tag.css.layout.render(); // → ''
|
|
3005
|
+
* ```
|
|
3006
|
+
*
|
|
3007
|
+
* @see {@link CssManagerInstance}
|
|
3008
|
+
* @see {@link CssManager}
|
|
3009
|
+
*/
|
|
3010
|
+
|
|
3011
|
+
declare class DefaultCssManager implements CssManagerInstance {
|
|
3012
|
+
/** タグの階層パス(常に空文字列) */
|
|
3013
|
+
tagPath: string;
|
|
3014
|
+
/** no-opレイアウトマネージャー */
|
|
3015
|
+
readonly layout: CssPositionMakerType;
|
|
3016
|
+
/** no-opスタイルマネージャー */
|
|
3017
|
+
readonly styleManager: CssStyleManagerType;
|
|
3018
|
+
/**
|
|
3019
|
+
* タグパスを更新する(no-op)
|
|
3020
|
+
* @param newPath - 新しいタグパス
|
|
3021
|
+
*/
|
|
3022
|
+
updateTagPath(newPath: string): void;
|
|
3023
|
+
/**
|
|
3024
|
+
* 遅延レイアウトレジスタを更新する(no-op)
|
|
3025
|
+
* @param _register - 遅延レイアウトレジスタ
|
|
3026
|
+
*/
|
|
3027
|
+
updateLazyLayoutRegister(_register: LazyLayoutRegister | undefined): void;
|
|
3028
|
+
/**
|
|
3029
|
+
* CSS文字列をレンダリングする(常に空文字列を返す)
|
|
3030
|
+
* @returns 空文字列
|
|
3031
|
+
*/
|
|
3032
|
+
render(): string;
|
|
3033
|
+
/**
|
|
3034
|
+
* スコープドCSS文字列をレンダリングする(常に空文字列を返す)
|
|
3035
|
+
* @returns 空文字列
|
|
3036
|
+
*/
|
|
3037
|
+
renderCss(): string;
|
|
3038
|
+
/**
|
|
3039
|
+
* @media ルールを追加する(no-op)
|
|
3040
|
+
* @param _breakpointPx - ブレークポイント(px 値)
|
|
3041
|
+
* @param _props - 追加するCSSプロパティのマップ
|
|
3042
|
+
*/
|
|
3043
|
+
addMediaRule(_breakpointPx: number, _props: Record<string, string>): void;
|
|
3044
|
+
}
|
|
3045
|
+
|
|
3046
|
+
/**
|
|
3047
|
+
* CSSプロパティキー定数
|
|
3048
|
+
*
|
|
3049
|
+
* camelCase形式のJavaScriptプロパティ名からハイフネーション付きCSS標準名への
|
|
3050
|
+
* マッピングを提供する。Swift版の CSSPropertyKey enum の rawValue と完全一致する。
|
|
3051
|
+
*
|
|
3052
|
+
* ## プロパティカテゴリと数
|
|
3053
|
+
*
|
|
3054
|
+
* | カテゴリ | プロパティ数 | 例 |
|
|
3055
|
+
* |---------|-------------|-----|
|
|
3056
|
+
* | Font | 7 | font-size, color, line-height |
|
|
3057
|
+
* | Background | 5 | background-color, background-image |
|
|
3058
|
+
* | Spacing | 10 | margin, padding |
|
|
3059
|
+
* | Border | 20 | border-width, border-radius |
|
|
3060
|
+
* | Flex | 12 | flex-direction, justify-content |
|
|
3061
|
+
* | Grid | 14 | grid-template-columns, grid-gap |
|
|
3062
|
+
* | Visual | 6 | box-shadow, opacity, cursor |
|
|
3063
|
+
* | Text | 13 | text-align, text-decoration |
|
|
3064
|
+
* | Transform | 6 | transform, filter |
|
|
3065
|
+
* | Animation | 14 | animation, transition |
|
|
3066
|
+
* | Table | 5 | border-collapse, table-layout |
|
|
3067
|
+
* | List | 4 | list-style-type |
|
|
3068
|
+
* | Visibility | 31 | display, width, height, position |
|
|
3069
|
+
*
|
|
3070
|
+
* **合計: 148プロパティ**
|
|
3071
|
+
*
|
|
3072
|
+
* ## 使用例
|
|
3073
|
+
*
|
|
3074
|
+
* @example
|
|
3075
|
+
* ```ts
|
|
3076
|
+
* // プロパティキーの使用
|
|
3077
|
+
* CSSPropertyKey.fontSize // → "font-size"
|
|
3078
|
+
* CSSPropertyKey.backgroundColor // → "background-color"
|
|
3079
|
+
* CSSPropertyKey.marginTop // → "margin-top"
|
|
3080
|
+
*
|
|
3081
|
+
* // プロパティクラスでの使用
|
|
3082
|
+
* const properties = new Map<string, string>();
|
|
3083
|
+
* properties.set(CSSPropertyKey.fontSize, '16px');
|
|
3084
|
+
* properties.set(CSSPropertyKey.color, '#333');
|
|
3085
|
+
* ```
|
|
3086
|
+
*
|
|
3087
|
+
* @see {@link CSSPropertyKeyValue}
|
|
3088
|
+
*/
|
|
3089
|
+
declare const CSSPropertyKey: {
|
|
3090
|
+
readonly fontFamily: "font-family";
|
|
3091
|
+
readonly fontSize: "font-size";
|
|
3092
|
+
readonly fontWeight: "font-weight";
|
|
3093
|
+
readonly fontStyle: "font-style";
|
|
3094
|
+
readonly color: "color";
|
|
3095
|
+
readonly lineHeight: "line-height";
|
|
3096
|
+
readonly letterSpacing: "letter-spacing";
|
|
3097
|
+
readonly background: "background";
|
|
3098
|
+
readonly backgroundColor: "background-color";
|
|
3099
|
+
readonly backgroundImage: "background-image";
|
|
3100
|
+
readonly backgroundSize: "background-size";
|
|
3101
|
+
readonly backgroundPosition: "background-position";
|
|
3102
|
+
readonly backgroundRepeat: "background-repeat";
|
|
3103
|
+
readonly marginTop: "margin-top";
|
|
3104
|
+
readonly marginRight: "margin-right";
|
|
3105
|
+
readonly marginBottom: "margin-bottom";
|
|
3106
|
+
readonly marginLeft: "margin-left";
|
|
3107
|
+
readonly margin: "margin";
|
|
3108
|
+
readonly paddingTop: "padding-top";
|
|
3109
|
+
readonly paddingRight: "padding-right";
|
|
3110
|
+
readonly paddingBottom: "padding-bottom";
|
|
3111
|
+
readonly paddingLeft: "padding-left";
|
|
3112
|
+
readonly padding: "padding";
|
|
3113
|
+
readonly borderWidth: "border-width";
|
|
3114
|
+
readonly borderStyle: "border-style";
|
|
3115
|
+
readonly borderColor: "border-color";
|
|
3116
|
+
readonly borderRadius: "border-radius";
|
|
3117
|
+
readonly borderTopWidth: "border-top-width";
|
|
3118
|
+
readonly borderTopStyle: "border-top-style";
|
|
3119
|
+
readonly borderTopColor: "border-top-color";
|
|
3120
|
+
readonly borderRightWidth: "border-right-width";
|
|
3121
|
+
readonly borderRightStyle: "border-right-style";
|
|
3122
|
+
readonly borderRightColor: "border-right-color";
|
|
3123
|
+
readonly borderBottomWidth: "border-bottom-width";
|
|
3124
|
+
readonly borderBottomStyle: "border-bottom-style";
|
|
3125
|
+
readonly borderBottomColor: "border-bottom-color";
|
|
3126
|
+
readonly borderLeftWidth: "border-left-width";
|
|
3127
|
+
readonly borderLeftStyle: "border-left-style";
|
|
3128
|
+
readonly borderLeftColor: "border-left-color";
|
|
3129
|
+
readonly borderTopLeftRadius: "border-top-left-radius";
|
|
3130
|
+
readonly borderTopRightRadius: "border-top-right-radius";
|
|
3131
|
+
readonly borderBottomRightRadius: "border-bottom-right-radius";
|
|
3132
|
+
readonly borderBottomLeftRadius: "border-bottom-left-radius";
|
|
3133
|
+
readonly flex: "flex";
|
|
3134
|
+
readonly flexDirection: "flex-direction";
|
|
3135
|
+
readonly justifyContent: "justify-content";
|
|
3136
|
+
readonly alignItems: "align-items";
|
|
3137
|
+
readonly gap: "gap";
|
|
3138
|
+
readonly flexWrap: "flex-wrap";
|
|
3139
|
+
readonly flexGrow: "flex-grow";
|
|
3140
|
+
readonly flexShrink: "flex-shrink";
|
|
3141
|
+
readonly flexBasis: "flex-basis";
|
|
3142
|
+
readonly alignSelf: "align-self";
|
|
3143
|
+
readonly order: "order";
|
|
3144
|
+
readonly alignContent: "align-content";
|
|
3145
|
+
readonly gridTemplateColumns: "grid-template-columns";
|
|
3146
|
+
readonly gridTemplateRows: "grid-template-rows";
|
|
3147
|
+
readonly gridGap: "grid-gap";
|
|
3148
|
+
readonly gridColumn: "grid-column";
|
|
3149
|
+
readonly gridRow: "grid-row";
|
|
3150
|
+
readonly gridColumnStart: "grid-column-start";
|
|
3151
|
+
readonly gridColumnEnd: "grid-column-end";
|
|
3152
|
+
readonly gridRowStart: "grid-row-start";
|
|
3153
|
+
readonly gridRowEnd: "grid-row-end";
|
|
3154
|
+
readonly gridTemplateAreas: "grid-template-areas";
|
|
3155
|
+
readonly gridArea: "grid-area";
|
|
3156
|
+
readonly gridAutoFlow: "grid-auto-flow";
|
|
3157
|
+
readonly gridAutoColumns: "grid-auto-columns";
|
|
3158
|
+
readonly gridAutoRows: "grid-auto-rows";
|
|
3159
|
+
readonly boxShadow: "box-shadow";
|
|
3160
|
+
readonly opacity: "opacity";
|
|
3161
|
+
readonly cursor: "cursor";
|
|
3162
|
+
readonly overflow: "overflow";
|
|
3163
|
+
readonly overflowX: "overflow-x";
|
|
3164
|
+
readonly overflowY: "overflow-y";
|
|
3165
|
+
readonly textAlign: "text-align";
|
|
3166
|
+
readonly textDecoration: "text-decoration";
|
|
3167
|
+
readonly textTransform: "text-transform";
|
|
3168
|
+
readonly textIndent: "text-indent";
|
|
3169
|
+
readonly wordSpacing: "word-spacing";
|
|
3170
|
+
readonly whiteSpace: "white-space";
|
|
3171
|
+
readonly textOverflow: "text-overflow";
|
|
3172
|
+
readonly textDecorationColor: "text-decoration-color";
|
|
3173
|
+
readonly textDecorationStyle: "text-decoration-style";
|
|
3174
|
+
readonly textDecorationLine: "text-decoration-line";
|
|
3175
|
+
readonly wordBreak: "word-break";
|
|
3176
|
+
readonly overflowWrap: "overflow-wrap";
|
|
3177
|
+
readonly textShadow: "text-shadow";
|
|
3178
|
+
readonly transform: "transform";
|
|
3179
|
+
readonly transformOrigin: "transform-origin";
|
|
3180
|
+
readonly filter: "filter";
|
|
3181
|
+
readonly backdropFilter: "backdrop-filter";
|
|
3182
|
+
readonly perspective: "perspective";
|
|
3183
|
+
readonly perspectiveOrigin: "perspective-origin";
|
|
3184
|
+
readonly animationName: "animation-name";
|
|
3185
|
+
readonly animationDuration: "animation-duration";
|
|
3186
|
+
readonly animationTimingFunction: "animation-timing-function";
|
|
3187
|
+
readonly animationDelay: "animation-delay";
|
|
3188
|
+
readonly animationIterationCount: "animation-iteration-count";
|
|
3189
|
+
readonly animationDirection: "animation-direction";
|
|
3190
|
+
readonly animationFillMode: "animation-fill-mode";
|
|
3191
|
+
readonly animationPlayState: "animation-play-state";
|
|
3192
|
+
readonly animation: "animation";
|
|
3193
|
+
readonly transitionProperty: "transition-property";
|
|
3194
|
+
readonly transitionDuration: "transition-duration";
|
|
3195
|
+
readonly transitionTimingFunction: "transition-timing-function";
|
|
3196
|
+
readonly transitionDelay: "transition-delay";
|
|
3197
|
+
readonly transition: "transition";
|
|
3198
|
+
readonly borderCollapse: "border-collapse";
|
|
3199
|
+
readonly borderSpacing: "border-spacing";
|
|
3200
|
+
readonly tableLayout: "table-layout";
|
|
3201
|
+
readonly captionSide: "caption-side";
|
|
3202
|
+
readonly emptyCells: "empty-cells";
|
|
3203
|
+
readonly listStyleType: "list-style-type";
|
|
3204
|
+
readonly listStylePosition: "list-style-position";
|
|
3205
|
+
readonly listStyleImage: "list-style-image";
|
|
3206
|
+
readonly listStyle: "list-style";
|
|
3207
|
+
readonly display: "display";
|
|
3208
|
+
readonly visibility: "visibility";
|
|
3209
|
+
readonly zIndex: "z-index";
|
|
3210
|
+
readonly cssFloat: "float";
|
|
3211
|
+
readonly clear: "clear";
|
|
3212
|
+
readonly position: "position";
|
|
3213
|
+
readonly top: "top";
|
|
3214
|
+
readonly right: "right";
|
|
3215
|
+
readonly bottom: "bottom";
|
|
3216
|
+
readonly left: "left";
|
|
3217
|
+
readonly width: "width";
|
|
3218
|
+
readonly height: "height";
|
|
3219
|
+
readonly minWidth: "min-width";
|
|
3220
|
+
readonly maxWidth: "max-width";
|
|
3221
|
+
readonly minHeight: "min-height";
|
|
3222
|
+
readonly maxHeight: "max-height";
|
|
3223
|
+
readonly objectFit: "object-fit";
|
|
3224
|
+
readonly objectPosition: "object-position";
|
|
3225
|
+
readonly verticalAlign: "vertical-align";
|
|
3226
|
+
readonly content: "content";
|
|
3227
|
+
readonly pointerEvents: "pointer-events";
|
|
3228
|
+
readonly userSelect: "user-select";
|
|
3229
|
+
readonly resize: "resize";
|
|
3230
|
+
readonly outline: "outline";
|
|
3231
|
+
readonly outlineColor: "outline-color";
|
|
3232
|
+
readonly outlineStyle: "outline-style";
|
|
3233
|
+
readonly outlineWidth: "outline-width";
|
|
3234
|
+
readonly outlineOffset: "outline-offset";
|
|
3235
|
+
readonly boxSizing: "box-sizing";
|
|
3236
|
+
readonly clip: "clip";
|
|
3237
|
+
readonly clipPath: "clip-path";
|
|
3238
|
+
};
|
|
3239
|
+
|
|
3240
|
+
/**
|
|
3241
|
+
* 遅延レイアウト解決管理クラス
|
|
3242
|
+
*
|
|
3243
|
+
* 要素間の位置関係を登録し、依存関係のある配置計算を遅延評価で解決する。
|
|
3244
|
+
* 循環依存を検出し、エラーをスローすることで無限ループを防止する。
|
|
3245
|
+
*
|
|
3246
|
+
* ## 主な機能
|
|
3247
|
+
*
|
|
3248
|
+
* - **レイアウトアイテムの登録**: 要素間の位置関係を記述
|
|
3249
|
+
* - **遅延評価**: 依存関係を持つ配置値の段階的な解決
|
|
3250
|
+
* - **循環依存検出**: Set による訪問済みパスの追跡
|
|
3251
|
+
* - **CSS出力**: 解決済みレイアウトのCSS文字列生成
|
|
3252
|
+
*
|
|
3253
|
+
* ## 使用例
|
|
3254
|
+
*
|
|
3255
|
+
* @example
|
|
3256
|
+
* ```ts
|
|
3257
|
+
* const manager = new LazyLayoutManager();
|
|
3258
|
+
*
|
|
3259
|
+
* // 要素Aの配置を登録
|
|
3260
|
+
* manager.registerItem({
|
|
3261
|
+
* relationShip: 'absolute',
|
|
3262
|
+
* baseTagPath: 'html>body>div.a',
|
|
3263
|
+
* basePosition: 'left',
|
|
3264
|
+
* targetTagPath: undefined,
|
|
3265
|
+
* targetPosition: 'none',
|
|
3266
|
+
* value: { value: 0, unit: 'px' }
|
|
3267
|
+
* });
|
|
3268
|
+
*
|
|
3269
|
+
* // 要素Bの配置を要素Aに依存させる
|
|
3270
|
+
* manager.registerItem({
|
|
3271
|
+
* relationShip: 'absolute',
|
|
3272
|
+
* baseTagPath: 'html>body>div.b',
|
|
3273
|
+
* basePosition: 'left',
|
|
3274
|
+
* targetTagPath: 'html>body>div.a', // 要素Aを参照
|
|
3275
|
+
* targetPosition: 'left',
|
|
3276
|
+
* value: undefined // 遅延評価で解決される
|
|
3277
|
+
* });
|
|
3278
|
+
*
|
|
3279
|
+
* // すべての遅延レイアウトを解決
|
|
3280
|
+
* manager.resolveAllLayout();
|
|
3281
|
+
*
|
|
3282
|
+
* // 要素Bのレイアウトを出力
|
|
3283
|
+
* console.log(manager.renderItemsBy('html>body>div.b'));
|
|
3284
|
+
* // → "left: 0px;"
|
|
3285
|
+
* ```
|
|
3286
|
+
*
|
|
3287
|
+
* @see {@link LazyLayoutRegister}
|
|
3288
|
+
* @see {@link LayoutRegisteredItem}
|
|
3289
|
+
* @see {@link CssPositionMaker}
|
|
3290
|
+
*/
|
|
3291
|
+
|
|
3292
|
+
declare class LazyLayoutManager implements LazyLayoutRegister {
|
|
3293
|
+
private items;
|
|
3294
|
+
/**
|
|
3295
|
+
* レイアウトアイテムを登録する
|
|
3296
|
+
*
|
|
3297
|
+
* @param item - 登録するレイアウトアイテム
|
|
3298
|
+
*/
|
|
3299
|
+
registerItem(item: LayoutRegisteredItem): void;
|
|
3300
|
+
/**
|
|
3301
|
+
* 指定されたタグパスの position 値を取得する
|
|
3302
|
+
*
|
|
3303
|
+
* @param tagPath - タグの階層パス
|
|
3304
|
+
* @returns position 値('static' | 'relative' | 'absolute' | 'fixed')、または undefined
|
|
3305
|
+
*/
|
|
3306
|
+
getRelationShip(tagPath: string): RelationShip | undefined;
|
|
3307
|
+
/**
|
|
3308
|
+
* すべての遅延レイアウトを解決する
|
|
3309
|
+
*
|
|
3310
|
+
* 未解決の値(value が undefined)を持つアイテムを検索し、
|
|
3311
|
+
* 依存関係を辿って値を解決する。循環依存が検出された場合は Error をスローする。
|
|
3312
|
+
*
|
|
3313
|
+
* @throws {Error} 循環依存が検出された場合
|
|
3314
|
+
*/
|
|
3315
|
+
resolveAllLayout(): void;
|
|
3316
|
+
/**
|
|
3317
|
+
* 指定されたタグパスのレイアウトアイテムをCSS文字列として出力する
|
|
3318
|
+
*
|
|
3319
|
+
* position プロパティは出力されない(個別要素用)。
|
|
3320
|
+
*
|
|
3321
|
+
* @param tagPath - タグの階層パス
|
|
3322
|
+
* @returns CSS文字列(アイテムがない場合は空文字列)
|
|
3323
|
+
*/
|
|
3324
|
+
renderItemsBy(tagPath: string): string;
|
|
3325
|
+
/**
|
|
3326
|
+
* すべてのレイアウトアイテムをCSS文字列として出力する
|
|
3327
|
+
*
|
|
3328
|
+
* position プロパティを含む完全なCSS出力(static 以外)。
|
|
3329
|
+
*
|
|
3330
|
+
* @returns CSS文字列(アイテムがない場合は空文字列)
|
|
3331
|
+
*/
|
|
3332
|
+
renderAllItems(): string;
|
|
3333
|
+
private getItemsBy;
|
|
3334
|
+
private getValue;
|
|
3335
|
+
private renderLayoutByRegisteredItem;
|
|
3336
|
+
}
|
|
3337
|
+
|
|
3338
|
+
/**
|
|
3339
|
+
* スコープドCSSクラス名生成ユーティリティ
|
|
3340
|
+
*
|
|
3341
|
+
* タグパスから決定的なハッシュを生成し、デバッグ可能なユニークCSSクラス名を作成する。
|
|
3342
|
+
* djb2 アルゴリズムによりタグパス全体の衝突耐性を担保しつつ、
|
|
3343
|
+
* タグパスを正規化した人間可読 prefix を組み合わせる。
|
|
3344
|
+
*
|
|
3345
|
+
* ## 出力フォーマット (新フォーマット)
|
|
3346
|
+
*
|
|
3347
|
+
* - 非空 prefix: `_<prefix>__<hash>` (例: `_html-body-div-p-span__a1b2c3d4`)
|
|
3348
|
+
* - 空 prefix: `_<hash>` (例: `_a1b2c3d4`)
|
|
3349
|
+
*
|
|
3350
|
+
* prefix は tagPath を lower-case kebab に正規化したもの。最大 32 文字、
|
|
3351
|
+
* 末尾要素を優先して残す。連結子は二重アンダースコア `__`。
|
|
3352
|
+
*
|
|
3353
|
+
* ## 特徴
|
|
3354
|
+
*
|
|
3355
|
+
* - **決定的**: 同じ入力に対して常に同じ出力
|
|
3356
|
+
* - **デバッグ可能**: prefix から元のタグパス末尾を視認できる
|
|
3357
|
+
* - **衝突耐性**: djb2 ハッシュは tagPath 全体に対して計算するため、
|
|
3358
|
+
* prefix が同一に切り詰まっても全体クラス名は衝突しない
|
|
3359
|
+
*
|
|
3360
|
+
* @module scoped-css-generator
|
|
3361
|
+
*/
|
|
3362
|
+
/**
|
|
3363
|
+
* djb2ハッシュアルゴリズム
|
|
3364
|
+
*
|
|
3365
|
+
* Dan Bernstein のハッシュ関数。文字列から32ビットの符号なし整数ハッシュを計算し、
|
|
3366
|
+
* 8文字の16進数文字列として返す。
|
|
3367
|
+
*
|
|
3368
|
+
* ## アルゴリズムの詳細
|
|
3369
|
+
*
|
|
3370
|
+
* 1. 初期値 5381 から開始
|
|
3371
|
+
* 2. 各文字に対して: `hash = (hash << 5) + hash + charCode`
|
|
3372
|
+
* 3. 符号なし32ビット整数に変換(`>>> 0`)
|
|
3373
|
+
* 4. 16進数8桁の文字列に変換
|
|
3374
|
+
*
|
|
3375
|
+
* @param str - ハッシュ対象の文字列
|
|
3376
|
+
* @returns 8文字の16進数文字列
|
|
3377
|
+
*
|
|
3378
|
+
* @example
|
|
3379
|
+
* ```ts
|
|
3380
|
+
* djb2Hash('html>body>div');
|
|
3381
|
+
* // → "a1b2c3d4" (例)
|
|
3382
|
+
*
|
|
3383
|
+
* djb2Hash('html>body>span');
|
|
3384
|
+
* // → "e5f6a7b8" (例、異なる値)
|
|
3385
|
+
* ```
|
|
3386
|
+
*/
|
|
3387
|
+
declare function djb2Hash(str: string): string;
|
|
3388
|
+
/**
|
|
3389
|
+
* スコープドCSSクラス名を生成する (新フォーマット)
|
|
3390
|
+
*
|
|
3391
|
+
* tagPath を正規化した prefix と djb2 ハッシュを組み合わせ、
|
|
3392
|
+
* デバッグ可能かつ衝突耐性のあるクラス名を返す。
|
|
3393
|
+
*
|
|
3394
|
+
* ## 出力仕様
|
|
3395
|
+
*
|
|
3396
|
+
* - 非空 prefix: `_<prefix>__<hash>` (例: `_html-body-div-p-span__a1b2c3d4`)
|
|
3397
|
+
* - 空 prefix: `_<hash>` (例: `_a1b2c3d4`)
|
|
3398
|
+
*
|
|
3399
|
+
* prefix は最大 32 文字、末尾要素を優先して残す。連結子は二重アンダースコア `__`。
|
|
3400
|
+
* 正規化結果が空文字になった場合は `__` ごと省略し従来形式に縮退する。
|
|
3401
|
+
*
|
|
3402
|
+
* @param tagPath - タグの階層パス(例: 'html>body>div')
|
|
3403
|
+
* @returns スコープドCSSクラス名
|
|
3404
|
+
*
|
|
3405
|
+
* @example
|
|
3406
|
+
* ```ts
|
|
3407
|
+
* generateScopedClassName('html>body>div>p>span');
|
|
3408
|
+
* // → "_html-body-div-p-span__a1b2c3d4"
|
|
3409
|
+
*
|
|
3410
|
+
* generateScopedClassName('');
|
|
3411
|
+
* // → "_a1b2c3d4" (空 prefix 縮退)
|
|
3412
|
+
*
|
|
3413
|
+
* generateScopedClassName('>>>');
|
|
3414
|
+
* // → "_xxxxxxxx" (全文字無効 → 空 prefix 縮退)
|
|
3415
|
+
* ```
|
|
3416
|
+
*/
|
|
3417
|
+
declare function generateScopedClassName(tagPath: string, options?: {
|
|
3418
|
+
minify?: boolean;
|
|
3419
|
+
}): string;
|
|
3420
|
+
|
|
3421
|
+
/**
|
|
3422
|
+
* StyleTemplate デバッグ変数名ラベル付けランタイムヘルパー
|
|
3423
|
+
*
|
|
3424
|
+
* ビルド時トランスフォーマー(AST変換)が `createStyle(...)` 呼び出しを
|
|
3425
|
+
* `__draftole_label__(createStyle(...), '<varName>')` の形にラップするために
|
|
3426
|
+
* 使用するランタイム関数。
|
|
3427
|
+
*
|
|
3428
|
+
* - 渡された値が `StyleTemplate` らしき形状(`_kind === 'styleTemplate'` かつ
|
|
3429
|
+
* `bodyHash` プロパティを持つ)であれば、`debugVarName` を付与した
|
|
3430
|
+
* `Object.freeze` 済みコピーを返す。元の `StyleTemplate` は frozen のため
|
|
3431
|
+
* ミューテートしない。
|
|
3432
|
+
* - それ以外の値(プリミティブ、関数、StyleTemplate 以外のオブジェクトなど)は
|
|
3433
|
+
* そのまま返す(防御的 no-op)。
|
|
3434
|
+
*
|
|
3435
|
+
* 型シグネチャは `<T>(value: T, debugVarName: string): T` で、型システム上は
|
|
3436
|
+
* identity(透過)として振る舞う。これにより、ラップ前後で型が変化せず、
|
|
3437
|
+
* 既存のコード補完・型推論に影響を与えない。
|
|
3438
|
+
*
|
|
3439
|
+
* @module css/variables/style-template-label
|
|
3440
|
+
*/
|
|
3441
|
+
/**
|
|
3442
|
+
* StyleTemplate に `debugVarName` を付与するビルド時トランスフォーマー用ラッパー。
|
|
3443
|
+
* StyleTemplate 以外の入力に対しては型透過な identity として動作する。
|
|
3444
|
+
*
|
|
3445
|
+
* @typeParam T - 入力値の型(出力もそのまま `T`)
|
|
3446
|
+
* @param value - ラップ対象の値(通常は `createStyle(...)` の戻り値)
|
|
3447
|
+
* @param debugVarName - 付与するデバッグ用変数名(ビルド時に AST から抽出)
|
|
3448
|
+
* @returns StyleTemplate ならば `debugVarName` を付与した frozen コピー、
|
|
3449
|
+
* それ以外は `value` をそのまま返す
|
|
3450
|
+
*/
|
|
3451
|
+
declare function __draftole_label__<T>(value: T, debugVarName: string): T;
|
|
3452
|
+
|
|
3453
|
+
/**
|
|
3454
|
+
* 統合 createTheme 実装本体
|
|
3455
|
+
*
|
|
3456
|
+
* フラット入力(string か `Record<string, string>` 値)を受け取り、
|
|
3457
|
+
* エントリ単位で値型から「トークン」「クラス」を自動判別する。
|
|
3458
|
+
* トークンは `:root` ブロック + `var(--name)` プロキシとして、
|
|
3459
|
+
* クラスは `SharedStyle` プロキシとして公開し、`theme.css` で全 CSS を結合した
|
|
3460
|
+
* 単一の `GlobalCss` を返す。
|
|
3461
|
+
*
|
|
3462
|
+
* グローバルルール(`*`、HTMLタグセレクタ)は本ファイルでは扱わず、
|
|
3463
|
+
* 既存 `sel.*` 名前空間で担当する(責任分担)。
|
|
3464
|
+
*
|
|
3465
|
+
* @module css/variables/unified-theme
|
|
3466
|
+
*/
|
|
3467
|
+
|
|
3468
|
+
/**
|
|
3469
|
+
* 統合 `createTheme` のフラット入力型。
|
|
3470
|
+
* 各エントリの値は string(トークン)または `Record<string, string>`(クラス)。
|
|
3471
|
+
*/
|
|
3472
|
+
type UnifiedThemeInput = Record<string, string | Record<string, string>>;
|
|
3473
|
+
/**
|
|
3474
|
+
* 統合 `createTheme` の戻り値型。
|
|
3475
|
+
*
|
|
3476
|
+
* 入力 `T` の各キーは値型に応じて以下のように振り分けられる:
|
|
3477
|
+
* - `T[K]` が string → `string`(`var(--K)` 参照)
|
|
3478
|
+
* - `T[K]` が `Record<string, string>` → `SharedStyle`
|
|
3479
|
+
*
|
|
3480
|
+
* 加えて全 CSS を結合した `css: GlobalCss` を持つ。
|
|
3481
|
+
*/
|
|
3482
|
+
type UnifiedTheme<T extends UnifiedThemeInput> = {
|
|
3483
|
+
readonly [K in keyof T as T[K] extends string ? K : never]: string;
|
|
3484
|
+
} & {
|
|
3485
|
+
readonly [K in keyof T as T[K] extends Record<string, string> ? K : never]: SharedStyle;
|
|
3486
|
+
} & {
|
|
3487
|
+
readonly css: GlobalCss;
|
|
3488
|
+
readonly class: ThemeClassMethod;
|
|
3489
|
+
};
|
|
3490
|
+
/**
|
|
3491
|
+
* `theme.class` メソッドの呼び出しシグネチャ。
|
|
3492
|
+
*
|
|
3493
|
+
* - 無名形(properties のみ) → `StyleTemplate`
|
|
3494
|
+
* - 無名形 + selectors → `StyleTemplate`
|
|
3495
|
+
* - 明示名形(name + properties + selectors?) → `SharedStyle`
|
|
3496
|
+
*/
|
|
3497
|
+
type ThemeClassMethod = {
|
|
3498
|
+
(properties: Record<string, string>): StyleTemplate;
|
|
3499
|
+
(properties: Record<string, string>, selectors: StyleSelectors): StyleTemplate;
|
|
3500
|
+
(name: string, properties: Record<string, string>, selectors?: StyleSelectors): SharedStyle;
|
|
3501
|
+
};
|
|
3502
|
+
|
|
3503
|
+
/**
|
|
3504
|
+
* CSS変数テーマ定義(統合 createTheme の公開シグネチャ)
|
|
3505
|
+
*
|
|
3506
|
+
* 型安全な CSS Custom Properties(CSS変数)と再利用可能なクラスを
|
|
3507
|
+
* 1つのフラットオブジェクトで定義する。値の型から自動的に
|
|
3508
|
+
* 「トークン」「クラス」が判別される。
|
|
3509
|
+
*
|
|
3510
|
+
* 実装本体は `unified-theme.ts` の `buildUnifiedTheme` に委譲する。
|
|
3511
|
+
*
|
|
3512
|
+
* クラス名は HTML タグ名と同名でも CSS セレクタとしては衝突しない
|
|
3513
|
+
* (`.ul` は `ul` セレクタとは別物)。グローバルルール(`*`、HTMLタグセレクタ)
|
|
3514
|
+
* は `sel.*` 名前空間を利用すること。
|
|
3515
|
+
*
|
|
3516
|
+
* @example
|
|
3517
|
+
* ```typescript
|
|
3518
|
+
* // 既存形式(全 string 値)
|
|
3519
|
+
* const theme = createTheme({ bg: '#0b1220', accent: '#7c5cff' });
|
|
3520
|
+
* theme.bg // → 'var(--bg)'
|
|
3521
|
+
* theme.css // → ':root { --bg: #0b1220; --accent: #7c5cff; }'
|
|
3522
|
+
*
|
|
3523
|
+
* // 統合形式(混在入力)
|
|
3524
|
+
* const t = createTheme({
|
|
3525
|
+
* bg: '#000',
|
|
3526
|
+
* card: { background: 'bg', padding: '12px' },
|
|
3527
|
+
* });
|
|
3528
|
+
* t.bg // → 'var(--bg)'
|
|
3529
|
+
* t.card // → SharedStyle
|
|
3530
|
+
* t.css // → ':root { ... }\n\n.card { background: var(--bg); padding: 12px; }'
|
|
3531
|
+
* ```
|
|
3532
|
+
*/
|
|
3533
|
+
|
|
3534
|
+
/**
|
|
3535
|
+
* Theme type: each key maps to its var(--key) reference,
|
|
3536
|
+
* plus a .css property for the :root block.
|
|
3537
|
+
*
|
|
3538
|
+
* 既存形式(全 string 入力)の戻り値型として維持。
|
|
3539
|
+
*/
|
|
3540
|
+
type Theme<T extends Record<string, string>> = {
|
|
3541
|
+
readonly [K in keyof T]: string;
|
|
3542
|
+
} & {
|
|
3543
|
+
/** The :root { ... } CSS block with all variable definitions. */
|
|
3544
|
+
readonly css: GlobalCss;
|
|
3545
|
+
};
|
|
3546
|
+
|
|
3547
|
+
/**
|
|
3548
|
+
* Global CSS DSL — セレクタ系・at-rule 系ファクトリ関数
|
|
3549
|
+
*
|
|
3550
|
+
* `root` / `all` / `tag` / `rule` / `media` / `keyframes` の 6関数を提供する。
|
|
3551
|
+
* 各関数は内部ヘルパを経由して `GlobalCss` branded type を生成する。
|
|
3552
|
+
* `brand()` の呼び出しは `selectorRule` / at-rule 各生成箇所に限定し、キャスト漏れを防ぐ。
|
|
3553
|
+
*
|
|
3554
|
+
* @module global-dsl
|
|
3555
|
+
*/
|
|
3556
|
+
|
|
3557
|
+
type Properties = Record<string, string>;
|
|
3558
|
+
/**
|
|
3559
|
+
* `:root { ... }` ブロックを生成する。
|
|
3560
|
+
* CSS カスタムプロパティ(CSS 変数)の定義に用いる。
|
|
3561
|
+
*
|
|
3562
|
+
* @example
|
|
3563
|
+
* root({ '--bg': '#0b1220', '--fg': '#fff' })
|
|
3564
|
+
* // → ":root {\n --bg: #0b1220;\n --fg: #fff;\n}"
|
|
3565
|
+
*/
|
|
3566
|
+
/**
|
|
3567
|
+
* @internal 公開 API ではない(1.0.0 で公開面から除去済み)。利用者は `css.theme` の token エントリ、
|
|
3568
|
+
* または最終手段として `css.raw` を使うこと。本関数は `sel.root` の実装基盤として内部実装で継続使用される。
|
|
3569
|
+
* 詳細は [docs/deprecation-policy.md](../../../docs/deprecation-policy.md) 参照。
|
|
3570
|
+
*/
|
|
3571
|
+
declare function root(properties: Properties): GlobalCss;
|
|
3572
|
+
/**
|
|
3573
|
+
* `* { ... }` ブロックを生成する。
|
|
3574
|
+
* 全要素へのリセットスタイル等に用いる。
|
|
3575
|
+
*
|
|
3576
|
+
* @example
|
|
3577
|
+
* all({ boxSizing: 'border-box' })
|
|
3578
|
+
* // → "* {\n box-sizing: border-box;\n}"
|
|
3579
|
+
*/
|
|
3580
|
+
/**
|
|
3581
|
+
* @internal 公開 API ではない(1.0.0 で公開面から除去済み)。利用者は `css.reset` を使うこと
|
|
3582
|
+
* (最終手段として `css.raw`)。本関数は `sel.all` の実装基盤として内部実装で継続使用される。
|
|
3583
|
+
* 詳細は [docs/deprecation-policy.md](../../../docs/deprecation-policy.md) 参照。
|
|
3584
|
+
*/
|
|
3585
|
+
declare function all(properties: Properties): GlobalCss;
|
|
3586
|
+
/**
|
|
3587
|
+
* HTML タグセレクタブロックを生成する。
|
|
3588
|
+
* `name` は `HTMLElementTagNameMap` のキーに対してリテラル補完が効き、
|
|
3589
|
+
* かつ任意の文字列も受け付ける(`string & {}` パターン)。
|
|
3590
|
+
*
|
|
3591
|
+
* @example
|
|
3592
|
+
* tag('ul', { listStyle: 'none', margin: '0' })
|
|
3593
|
+
* // → "ul {\n list-style: none;\n margin: 0;\n}"
|
|
3594
|
+
*/
|
|
3595
|
+
/**
|
|
3596
|
+
* @internal 公開 API ではない(1.0.0 で公開面から除去済み)。利用者は要素単位クラス合成
|
|
3597
|
+
* (`css.class` + `el.<tag>({ css: ... })`)を使うこと(最終手段として `css.raw`)。
|
|
3598
|
+
* 本関数は `sel.tag` および per-tag shortcuts(`tag-dsl.generated.ts`)の実装基盤として内部実装で継続使用される。
|
|
3599
|
+
* 詳細は [docs/deprecation-policy.md](../../../docs/deprecation-policy.md) 参照。
|
|
3600
|
+
*/
|
|
3601
|
+
declare function tag(name: keyof HTMLElementTagNameMap | (string & {}), properties: Properties): GlobalCss;
|
|
3602
|
+
/**
|
|
3603
|
+
* 任意セレクタブロックを生成する(脱出ハッチ)。
|
|
3604
|
+
* 疑似クラス・疑似要素・複合セレクタなど、専用関数では表現できないセレクタに使用する。
|
|
3605
|
+
* セレクタ文字列の構文検証は行わない(ランタイム no-op)。
|
|
3606
|
+
*
|
|
3607
|
+
* @example
|
|
3608
|
+
* rule('.foo:hover', { color: 'red' })
|
|
3609
|
+
* // → ".foo:hover {\n color: red;\n}"
|
|
3610
|
+
*/
|
|
3611
|
+
/**
|
|
3612
|
+
* @internal 公開 API ではない(1.0.0 で公開面から除去済み)。利用者は `css.raw` または要素単位クラス合成
|
|
3613
|
+
* (`css.class`)を使うこと。本関数は `sel.rule` の実装基盤として内部実装で継続使用される。
|
|
3614
|
+
* 詳細は [docs/deprecation-policy.md](../../../docs/deprecation-policy.md) 参照。
|
|
3615
|
+
*/
|
|
3616
|
+
declare function rule(selector: string, properties: Properties): GlobalCss;
|
|
3617
|
+
/**
|
|
3618
|
+
* `@media (query) { ... }` ブロックを生成する。
|
|
3619
|
+
* 各 `GlobalCss` のすべての行に2スペースのインデントを付与し、
|
|
3620
|
+
* ルール間は空行(`\n\n`)で区切る。
|
|
3621
|
+
*
|
|
3622
|
+
* @example
|
|
3623
|
+
* media("(min-width: 768px)", [tag("body", { fontSize: "18px" })])
|
|
3624
|
+
* // → "@media (min-width: 768px) {\n body {\n font-size: 18px;\n }\n}"
|
|
3625
|
+
*
|
|
3626
|
+
* @param query - メディアクエリ文字列(括弧付き or なし)
|
|
3627
|
+
* @param rules - 内包する GlobalCss ルール配列
|
|
3628
|
+
*/
|
|
3629
|
+
declare function media(query: string, rules: readonly GlobalCss[]): GlobalCss;
|
|
3630
|
+
/**
|
|
3631
|
+
* フレームキーセレクタ型。`from` / `to` または `${number}%` を受け付ける。
|
|
3632
|
+
*/
|
|
3633
|
+
type KeyframeSelector = 'from' | 'to' | `${number}%`;
|
|
3634
|
+
/**
|
|
3635
|
+
* `@keyframes name { ... }` ブロックを生成する。
|
|
3636
|
+
* 各フレームの宣言を `renderProperties` で整形し、2スペースインデント付きブロックで展開する。
|
|
3637
|
+
*
|
|
3638
|
+
* @example
|
|
3639
|
+
* keyframes("fadeIn", { from: { opacity: "0" }, to: { opacity: "1" } })
|
|
3640
|
+
* // → "@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}"
|
|
3641
|
+
*
|
|
3642
|
+
* @param name - アニメーション名
|
|
3643
|
+
* @param frames - フレームキーと CSS プロパティのマップ
|
|
3644
|
+
*/
|
|
3645
|
+
declare function keyframes(name: string, frames: Partial<Record<KeyframeSelector, Properties>>): GlobalCss;
|
|
3646
|
+
|
|
3647
|
+
/**
|
|
3648
|
+
* `css` ネームスペース — CSS 関連 API の単一エントリポイント。
|
|
3649
|
+
*
|
|
3650
|
+
* 既存の `createTheme` / `createStyle` / `sel.media` / `sel.keyframes` への
|
|
3651
|
+
* 薄いエイリアスと、新規 `theme.variant` / `reset` / `raw` を集約する。
|
|
3652
|
+
*
|
|
3653
|
+
* @module css/css
|
|
3654
|
+
*/
|
|
3655
|
+
|
|
3656
|
+
/**
|
|
3657
|
+
* 生 CSS 文字列を `GlobalCss` ブランド型にラップする escape hatch。
|
|
3658
|
+
*
|
|
3659
|
+
* 他 `css.*` で書けない場合の **最終手段**。サニタイズや検証は行わず、
|
|
3660
|
+
* 入力文字列の安全性はユーザの責任に委ねる。
|
|
3661
|
+
*
|
|
3662
|
+
* @param cssString - 任意の CSS 文字列(そのまま `GlobalCss` として返る)
|
|
3663
|
+
*/
|
|
3664
|
+
declare function cssRaw(cssString: string): GlobalCss;
|
|
3665
|
+
/**
|
|
3666
|
+
* リセット CSS を生成する。
|
|
3667
|
+
*
|
|
3668
|
+
* - 引数なし → デフォルト(`* { box-sizing: border-box; }` + `body { margin: 0; }`)
|
|
3669
|
+
* - `Record<string, string>` → `* { <props> }`
|
|
3670
|
+
* - `SharedStyle` / `StyleTemplate` → `properties` を抽出し `* { <props> }`
|
|
3671
|
+
*
|
|
3672
|
+
* 値は `sanitizeCssValue` でサニタイズされる。
|
|
3673
|
+
*/
|
|
3674
|
+
declare function cssReset(): GlobalCss;
|
|
3675
|
+
declare function cssReset(properties: Record<string, string>): GlobalCss;
|
|
3676
|
+
declare function cssReset(style: SharedStyle | StyleTemplate): GlobalCss;
|
|
3677
|
+
/**
|
|
3678
|
+
* 入力 `T` から token キー(値が string であるキー)のみを抽出する補助型。
|
|
3679
|
+
*/
|
|
3680
|
+
type TokenKeysOf<T> = {
|
|
3681
|
+
[K in keyof T as T[K] extends string ? K : never]: string;
|
|
3682
|
+
};
|
|
3683
|
+
declare function variant<T extends UnifiedThemeInput>(_theme: UnifiedTheme<T>, selector: string, overrides: Partial<TokenKeysOf<T>>): GlobalCss;
|
|
3684
|
+
interface CssThemeFn {
|
|
3685
|
+
<T extends Record<string, string>>(vars: T): Theme<T>;
|
|
3686
|
+
<T extends UnifiedThemeInput>(input: T): UnifiedTheme<T>;
|
|
3687
|
+
variant: <T extends UnifiedThemeInput>(theme: UnifiedTheme<T>, selector: string, overrides: Partial<TokenKeysOf<T>>) => GlobalCss;
|
|
3688
|
+
}
|
|
3689
|
+
interface CssClassFn {
|
|
3690
|
+
(name: string, properties: Record<string, string>, selectors?: StyleSelectors): SharedStyle;
|
|
3691
|
+
(properties: Record<string, string>, selectors?: StyleSelectors): StyleTemplate;
|
|
3692
|
+
}
|
|
3693
|
+
/**
|
|
3694
|
+
* CSS 関連 API を集約した単一ネームスペース。
|
|
3695
|
+
*
|
|
3696
|
+
* - `css.theme(input)` — トークン + クラス定義(既存 `createTheme` のエイリアス)
|
|
3697
|
+
* - `css.theme.variant(theme, selector, overrides)` — トークン属性スコープ上書き
|
|
3698
|
+
* - `css.class(name?, properties, selectors?)` — 名前あり/無名クラス(既存 `createStyle`)
|
|
3699
|
+
* - `css.reset(input?)` — リセット CSS
|
|
3700
|
+
* - `css.media(query, rules)` — `@media` ブロック(既存 `sel.media`)
|
|
3701
|
+
* - `css.keyframes(name, frames)` — `@keyframes` ブロック(既存 `sel.keyframes`)
|
|
3702
|
+
* - `css.raw(cssString)` — 生 CSS の escape hatch
|
|
3703
|
+
*/
|
|
3704
|
+
declare const css: {
|
|
3705
|
+
readonly theme: CssThemeFn & {
|
|
3706
|
+
variant: typeof variant;
|
|
3707
|
+
};
|
|
3708
|
+
readonly class: CssClassFn;
|
|
3709
|
+
readonly reset: typeof cssReset;
|
|
3710
|
+
readonly media: typeof media;
|
|
3711
|
+
readonly keyframes: typeof keyframes;
|
|
3712
|
+
readonly raw: typeof cssRaw;
|
|
3713
|
+
};
|
|
3714
|
+
|
|
3715
|
+
/**
|
|
3716
|
+
* JQueryManager - 要素ごとのjQuery風JavaScript操作を蓄積・生成
|
|
3717
|
+
*
|
|
3718
|
+
* DraftOleのHTML要素に対してjQuery風のDOM操作を記録し、
|
|
3719
|
+
* JavaScript文字列として出力するマネージャークラスです。
|
|
3720
|
+
*
|
|
3721
|
+
* @remarks
|
|
3722
|
+
* - 各メソッドは操作をキューに追加し、render()で全操作を出力
|
|
3723
|
+
* - usedMethodsプロパティで使用されたメソッドを追跡(tree-shaking用)
|
|
3724
|
+
* - メソッドチェーンの代わりに、連続呼び出しで操作を蓄積
|
|
3725
|
+
* - Swift版JQueryManagerと互換性のある動作を実現
|
|
3726
|
+
*
|
|
3727
|
+
* @example 基本的な使用方法
|
|
3728
|
+
* ```typescript
|
|
3729
|
+
* const jqm = new JQueryManager('root-0-html-0-body');
|
|
3730
|
+
* jqm.css({ 'font-size': '10px' });
|
|
3731
|
+
* jqm.text('Hello World');
|
|
3732
|
+
* jqm.addClass('active');
|
|
3733
|
+
*
|
|
3734
|
+
* const js = jqm.render();
|
|
3735
|
+
* // → "$('.root-0-html-0-body').css({'font-size': '10px'});\n..."
|
|
3736
|
+
* ```
|
|
3737
|
+
*
|
|
3738
|
+
* @example tree-shaking用のメソッド追跡
|
|
3739
|
+
* ```typescript
|
|
3740
|
+
* const jqm = new JQueryManager('element');
|
|
3741
|
+
* jqm.css({ color: 'blue' });
|
|
3742
|
+
* jqm.text('Text');
|
|
3743
|
+
*
|
|
3744
|
+
* const methods = jqm.usedMethods;
|
|
3745
|
+
* // → Set { 'css', 'text' }
|
|
3746
|
+
*
|
|
3747
|
+
* // JQueryHelperと組み合わせて最小限の$()関数を生成
|
|
3748
|
+
* const helper = JQueryHelper.generateHelper(methods);
|
|
3749
|
+
* ```
|
|
3750
|
+
*
|
|
3751
|
+
* @example イベントハンドリング
|
|
3752
|
+
* ```typescript
|
|
3753
|
+
* const jqm = new JQueryManager('button-element');
|
|
3754
|
+
* jqm.click('handleClick');
|
|
3755
|
+
* jqm.keydown('handleKeyDown');
|
|
3756
|
+
*
|
|
3757
|
+
* console.log(jqm.render());
|
|
3758
|
+
* // → "$('.button-element').on('click', handleClick);\n$('.button-element').on('keydown', handleKeyDown)"
|
|
3759
|
+
* ```
|
|
3760
|
+
*
|
|
3761
|
+
* @example パスの動的更新
|
|
3762
|
+
* ```typescript
|
|
3763
|
+
* const jqm = new JQueryManager('old-path');
|
|
3764
|
+
* jqm.css({ color: 'red' });
|
|
3765
|
+
*
|
|
3766
|
+
* jqm.updatePath('new-path');
|
|
3767
|
+
* jqm.text('Updated');
|
|
3768
|
+
*
|
|
3769
|
+
* // 既存の操作は古いパスを保持し、新しい操作は新しいパスを使用
|
|
3770
|
+
* ```
|
|
3771
|
+
*
|
|
3772
|
+
* @public
|
|
3773
|
+
*/
|
|
3774
|
+
declare class JQueryManager implements JQueryManagerInstance {
|
|
3775
|
+
private _path;
|
|
3776
|
+
private readonly _content;
|
|
3777
|
+
private readonly _usedMethods;
|
|
3778
|
+
constructor(path?: string);
|
|
3779
|
+
get path(): string;
|
|
3780
|
+
get usedMethods(): ReadonlySet<JQueryMethodType>;
|
|
3781
|
+
/**
|
|
3782
|
+
* CSSプロパティ操作のJS文を生成
|
|
3783
|
+
* @param properties - CSS propertyのキーバリューマップ
|
|
3784
|
+
* @returns 生成されたJS文字列
|
|
3785
|
+
*/
|
|
3786
|
+
css(properties: Record<string, string>): string;
|
|
3787
|
+
/**
|
|
3788
|
+
* 高さ操作のJS文を生成
|
|
3789
|
+
* @param value - 高さの値
|
|
3790
|
+
* @param unit - 単位('px', 'vh'等、指定しない場合は数値のみ)
|
|
3791
|
+
* @returns 生成されたJS文字列
|
|
3792
|
+
*/
|
|
3793
|
+
height(value: number, unit?: string): string;
|
|
3794
|
+
/**
|
|
3795
|
+
* 汎用イベントバインディングのJS文を生成
|
|
3796
|
+
* @param eventType - イベント種別('click', 'keydown'等)
|
|
3797
|
+
* @param handler - ハンドラ関数名
|
|
3798
|
+
* @returns 生成されたJS文字列(空ハンドラの場合は空文字列)
|
|
3799
|
+
*/
|
|
3800
|
+
on(eventType: string, handler: string): string;
|
|
3801
|
+
/**
|
|
3802
|
+
* clickイベントハンドラのJS文を生成
|
|
3803
|
+
* @param handler - ハンドラ関数名
|
|
3804
|
+
* @returns 生成されたJS文字列
|
|
3805
|
+
*/
|
|
3806
|
+
click(handler: string): string;
|
|
3807
|
+
/**
|
|
3808
|
+
* keydownイベントハンドラのJS文を生成
|
|
3809
|
+
* @param handler - ハンドラ関数名
|
|
3810
|
+
* @returns 生成されたJS文字列
|
|
3811
|
+
*/
|
|
3812
|
+
keydown(handler: string): string;
|
|
3813
|
+
/**
|
|
3814
|
+
* keyupイベントハンドラのJS文を生成
|
|
3815
|
+
* @param handler - ハンドラ関数名
|
|
3816
|
+
* @returns 生成されたJS文字列
|
|
3817
|
+
*/
|
|
3818
|
+
keyup(handler: string): string;
|
|
3819
|
+
/**
|
|
3820
|
+
* テキストコンテンツ操作のJS文を生成
|
|
3821
|
+
* @param value - テキスト値または変数名
|
|
3822
|
+
* @param isVariable - trueの場合、変数名として扱う(クォートなし)
|
|
3823
|
+
* @returns 生成されたJS文字列
|
|
3824
|
+
*/
|
|
3825
|
+
text(value: string, isVariable?: boolean): string;
|
|
3826
|
+
/**
|
|
3827
|
+
* innerHTML操作のJS文を生成
|
|
3828
|
+
* @param value - HTML文字列
|
|
3829
|
+
* @returns 生成されたJS文字列
|
|
3830
|
+
*/
|
|
3831
|
+
html(value: string): string;
|
|
3832
|
+
/**
|
|
3833
|
+
* クラス追加のJS文を生成
|
|
3834
|
+
* @param className - 追加するクラス名
|
|
3835
|
+
* @returns 生成されたJS文字列
|
|
3836
|
+
*/
|
|
3837
|
+
addClass(className: string): string;
|
|
3838
|
+
/**
|
|
3839
|
+
* クラス削除のJS文を生成
|
|
3840
|
+
* @param className - 削除するクラス名
|
|
3841
|
+
* @returns 生成されたJS文字列
|
|
3842
|
+
*/
|
|
3843
|
+
removeClass(className: string): string;
|
|
3844
|
+
/**
|
|
3845
|
+
* クラストグルのJS文を生成
|
|
3846
|
+
* @param className - トグルするクラス名
|
|
3847
|
+
* @param force - true/falseで強制的に追加/削除
|
|
3848
|
+
* @returns 生成されたJS文字列
|
|
3849
|
+
*/
|
|
3850
|
+
toggleClass(className: string, force?: boolean): string;
|
|
3851
|
+
/**
|
|
3852
|
+
* ヘルパー関数が必要かどうかを判定
|
|
3853
|
+
* @returns usedMethodsが空でない場合true
|
|
3854
|
+
*/
|
|
3855
|
+
needsHelper(): boolean;
|
|
3856
|
+
/**
|
|
3857
|
+
* パスを更新
|
|
3858
|
+
* @param newPath - 新しいCSSセレクタパス
|
|
3859
|
+
*/
|
|
3860
|
+
updatePath(newPath: string): void;
|
|
3861
|
+
/**
|
|
3862
|
+
* 蓄積されたJS文を ";\n" で結合して返す
|
|
3863
|
+
* @returns 統合されたJavaScript文字列(空の場合は空文字列)
|
|
3864
|
+
*/
|
|
3865
|
+
render(): string;
|
|
3866
|
+
}
|
|
3867
|
+
|
|
3868
|
+
/**
|
|
3869
|
+
* JQueryHelper - Tree-shaking対応の$()ヘルパー関数生成
|
|
3870
|
+
*
|
|
3871
|
+
* 使用されたjQueryメソッドのみを含む最小限の$()関数を生成し、
|
|
3872
|
+
* バンドルサイズを最適化します。
|
|
3873
|
+
*
|
|
3874
|
+
* @remarks
|
|
3875
|
+
* DraftOleの主要な機能の一つである**tree-shaking**を実現します。
|
|
3876
|
+
* JQueryManagerで使用されたメソッドのみを含む軽量な$()関数を動的に生成し、
|
|
3877
|
+
* 未使用のメソッドを含まないことでJavaScriptファイルサイズを削減します。
|
|
3878
|
+
*
|
|
3879
|
+
* ### Tree-shakingの仕組み
|
|
3880
|
+
* 1. {@link JQueryManager}が使用されたメソッドを`usedMethods`として追跡
|
|
3881
|
+
* 2. `JQueryHelper.generateHelper(usedMethods)`で必要なメソッドのみを含む$()関数を生成
|
|
3882
|
+
* 3. 出力されるJavaScriptは使用されたメソッドのみを含む
|
|
3883
|
+
*
|
|
3884
|
+
* ### jQueryとの違い
|
|
3885
|
+
* - フルサイズのjQueryライブラリ(約90KB minified)を避ける
|
|
3886
|
+
* - プロジェクトで実際に使用されるメソッドのみを含む(通常1-5KB)
|
|
3887
|
+
* - 依存関係なしで動作(Pure JavaScript)
|
|
3888
|
+
*
|
|
3889
|
+
* @example 基本的な使用方法
|
|
3890
|
+
* ```typescript
|
|
3891
|
+
* const usedMethods = new Set(['css', 'text', 'addClass']);
|
|
3892
|
+
* const helper = JQueryHelper.generateHelper(usedMethods);
|
|
3893
|
+
* // → css, text, addClassメソッドのみを持つ$()関数のJS文字列
|
|
3894
|
+
* ```
|
|
3895
|
+
*
|
|
3896
|
+
* @example JQueryManagerと組み合わせたtree-shaking
|
|
3897
|
+
* ```typescript
|
|
3898
|
+
* // 1. JQueryManagerで操作を記録
|
|
3899
|
+
* const jqm = new JQueryManager('my-element');
|
|
3900
|
+
* jqm.css({ color: 'red' });
|
|
3901
|
+
* jqm.addClass('active');
|
|
3902
|
+
*
|
|
3903
|
+
* // 2. 使用されたメソッドを取得
|
|
3904
|
+
* const usedMethods = jqm.usedMethods;
|
|
3905
|
+
* // → Set { 'css', 'addClass' }
|
|
3906
|
+
*
|
|
3907
|
+
* // 3. 必要最小限の$()関数を生成
|
|
3908
|
+
* const helper = JQueryHelper.generateHelper(usedMethods);
|
|
3909
|
+
*
|
|
3910
|
+
* // 4. 出力されるJavaScriptにはcssとaddClassのみが含まれる
|
|
3911
|
+
* // text, html, removeClassなどの未使用メソッドは含まれない
|
|
3912
|
+
* ```
|
|
3913
|
+
*
|
|
3914
|
+
* @example 複数のマネージャーからメソッドを集約
|
|
3915
|
+
* ```typescript
|
|
3916
|
+
* const managers = [
|
|
3917
|
+
* new JQueryManager('element1'),
|
|
3918
|
+
* new JQueryManager('element2'),
|
|
3919
|
+
* new JQueryManager('element3'),
|
|
3920
|
+
* ];
|
|
3921
|
+
*
|
|
3922
|
+
* managers[0].css({ color: 'red' });
|
|
3923
|
+
* managers[1].text('Hello');
|
|
3924
|
+
* managers[2].addClass('active');
|
|
3925
|
+
*
|
|
3926
|
+
* // 全マネージャーの使用メソッドを集約
|
|
3927
|
+
* const allMethods = new Set<JQueryMethodType>();
|
|
3928
|
+
* managers.forEach(m => {
|
|
3929
|
+
* m.usedMethods.forEach(method => allMethods.add(method));
|
|
3930
|
+
* });
|
|
3931
|
+
*
|
|
3932
|
+
* // 全体で使用されたメソッドのみを含む$()関数を生成
|
|
3933
|
+
* const helper = JQueryHelper.generateHelper(allMethods);
|
|
3934
|
+
* ```
|
|
3935
|
+
*
|
|
3936
|
+
* @example querySelectorAllサポート($$.all)
|
|
3937
|
+
* ```typescript
|
|
3938
|
+
* const usedMethods = new Set(['css', 'addClass']);
|
|
3939
|
+
* const helper = JQueryHelper.generateHelperWithAll(usedMethods);
|
|
3940
|
+
*
|
|
3941
|
+
* // 生成されるコードの例:
|
|
3942
|
+
* // function $(...) { ... }
|
|
3943
|
+
* // const $$ = { all(selector) { return Array.from(document.querySelectorAll(selector)); } };
|
|
3944
|
+
* ```
|
|
3945
|
+
*
|
|
3946
|
+
* @public
|
|
3947
|
+
*/
|
|
3948
|
+
declare class JQueryHelper {
|
|
3949
|
+
/**
|
|
3950
|
+
* 使用メソッドのみを含む$()ヘルパー関数を生成
|
|
3951
|
+
*
|
|
3952
|
+
* @param methods - 使用するJQueryMethodTypeのSet
|
|
3953
|
+
* @returns 生成されたJavaScript文字列(空Setの場合は空文字列)
|
|
3954
|
+
*
|
|
3955
|
+
* @remarks
|
|
3956
|
+
* 生成される$()関数は以下の特徴を持ちます:
|
|
3957
|
+
* - セレクタ文字列またはDOM要素を受け取る
|
|
3958
|
+
* - 指定されたメソッドのみを実装(未使用メソッドは含まれない)
|
|
3959
|
+
* - null要素に対しても安全に動作(メソッドチェーンを壊さない)
|
|
3960
|
+
* - メソッドチェーンをサポート(各メソッドはthisを返す)
|
|
3961
|
+
*
|
|
3962
|
+
* @example 最小限のバンドル(css, textのみ)
|
|
3963
|
+
* ```typescript
|
|
3964
|
+
* const methods = new Set(['css', 'text']);
|
|
3965
|
+
* const helper = JQueryHelper.generateHelper(methods);
|
|
3966
|
+
*
|
|
3967
|
+
* // 生成されるコード(簡略版):
|
|
3968
|
+
* // function $(selectorOrEl) {
|
|
3969
|
+
* // const el = typeof selectorOrEl === "string" ? document.querySelector(selectorOrEl) : selectorOrEl;
|
|
3970
|
+
* // return {
|
|
3971
|
+
* // css(props) { ... },
|
|
3972
|
+
* // text(value) { ... }
|
|
3973
|
+
* // };
|
|
3974
|
+
* // }
|
|
3975
|
+
* ```
|
|
3976
|
+
*
|
|
3977
|
+
* @example 空のSet(メソッド未使用時)
|
|
3978
|
+
* ```typescript
|
|
3979
|
+
* const methods = new Set<JQueryMethodType>();
|
|
3980
|
+
* const helper = JQueryHelper.generateHelper(methods);
|
|
3981
|
+
* console.log(helper); // → ""(空文字列)
|
|
3982
|
+
* ```
|
|
3983
|
+
*
|
|
3984
|
+
* @public
|
|
3985
|
+
*/
|
|
3986
|
+
static generateHelper(methods: ReadonlySet<JQueryMethodType>): string;
|
|
3987
|
+
/**
|
|
3988
|
+
* $()関数に加えて$$.all()関数も生成
|
|
3989
|
+
*
|
|
3990
|
+
* @param methods - 使用するJQueryMethodTypeのSet
|
|
3991
|
+
* @returns 生成されたJavaScript文字列(空Setの場合は空文字列)
|
|
3992
|
+
*
|
|
3993
|
+
* @remarks
|
|
3994
|
+
* `generateHelper()`に加えて、`$$.all(selector)`ヘルパーを追加します。
|
|
3995
|
+
* `$$.all()`は`document.querySelectorAll()`のラッパーで、配列として結果を返します。
|
|
3996
|
+
*
|
|
3997
|
+
* @example 複数要素の一括操作
|
|
3998
|
+
* ```typescript
|
|
3999
|
+
* const methods = new Set(['addClass']);
|
|
4000
|
+
* const helper = JQueryHelper.generateHelperWithAll(methods);
|
|
4001
|
+
*
|
|
4002
|
+
* // 生成されるコード(簡略版):
|
|
4003
|
+
* // function $(...) { ... }
|
|
4004
|
+
* // const $$ = {
|
|
4005
|
+
* // all(selector) {
|
|
4006
|
+
* // return Array.from(document.querySelectorAll(selector));
|
|
4007
|
+
* // }
|
|
4008
|
+
* // };
|
|
4009
|
+
*
|
|
4010
|
+
* // 使用例:
|
|
4011
|
+
* // $$.all('.item').forEach(el => $(el).addClass('active'));
|
|
4012
|
+
* ```
|
|
4013
|
+
*
|
|
4014
|
+
* @public
|
|
4015
|
+
*/
|
|
4016
|
+
static generateHelperWithAll(methods: ReadonlySet<JQueryMethodType>): string;
|
|
4017
|
+
}
|
|
4018
|
+
|
|
4019
|
+
/**
|
|
4020
|
+
* jsTemplate: HTMLTagProtocol ツリーから DOM 生成 JavaScript コードを生成する
|
|
4021
|
+
*
|
|
4022
|
+
* param() でマーカーオブジェクトを作成し、jsTemplate() でタグツリーを走査して
|
|
4023
|
+
* document.createElement / appendChild を使った JS 関数コードを出力する。
|
|
4024
|
+
*/
|
|
4025
|
+
|
|
4026
|
+
/**
|
|
4027
|
+
* JsParam マーカーオブジェクトを作成する。
|
|
4028
|
+
*
|
|
4029
|
+
* jsTemplate() に渡すタグツリー内の属性値として使用することで、
|
|
4030
|
+
* 生成される JS コード内で文字列リテラルではなく変数参照になる。
|
|
4031
|
+
*
|
|
4032
|
+
* @param name - JS 関数の引数名
|
|
4033
|
+
* @returns JsParam マーカーオブジェクト
|
|
4034
|
+
*
|
|
4035
|
+
* @example
|
|
4036
|
+
* ```typescript
|
|
4037
|
+
* const result = jsTemplate('createLabel', ['text'],
|
|
4038
|
+
* span({ textContent: param('text') })
|
|
4039
|
+
* );
|
|
4040
|
+
* result.render();
|
|
4041
|
+
* // → "el0.textContent = text;" (クォートなし)
|
|
4042
|
+
* ```
|
|
4043
|
+
*/
|
|
4044
|
+
declare function param(name: string): JsParam;
|
|
4045
|
+
/**
|
|
4046
|
+
* jsTemplate() の戻り値。name・params・render() を持つ。
|
|
4047
|
+
*/
|
|
4048
|
+
interface JsTemplateResult {
|
|
4049
|
+
/** 生成する JS 関数名 */
|
|
4050
|
+
readonly name: string;
|
|
4051
|
+
/** JS 関数の引数名リスト */
|
|
4052
|
+
readonly params: readonly string[];
|
|
4053
|
+
/** JS コード文字列を生成する */
|
|
4054
|
+
render(): string;
|
|
4055
|
+
}
|
|
4056
|
+
/**
|
|
4057
|
+
* HTMLTagProtocol タグツリーから DOM 生成 JS 関数を生成する。
|
|
4058
|
+
*
|
|
4059
|
+
* @param name - 生成する JS 関数名
|
|
4060
|
+
* @param params - 関数引数名のリスト
|
|
4061
|
+
* @param rootElement - DraftOle タグツリーのルート要素
|
|
4062
|
+
* @param afterCreate - オプション。{ jsName: varName } のマップを受け取り
|
|
4063
|
+
* return 文の直前に挿入する生 JS コードを返すコールバック
|
|
4064
|
+
* @returns render() メソッドを持つ JsTemplateResult
|
|
4065
|
+
*
|
|
4066
|
+
* @example
|
|
4067
|
+
* ```typescript
|
|
4068
|
+
* const result = jsTemplate('createBox', [], div({ className: 'box' }));
|
|
4069
|
+
* console.log(result.render());
|
|
4070
|
+
* // function createBox() {
|
|
4071
|
+
* // const el0 = document.createElement("div");
|
|
4072
|
+
* // el0.className = "box";
|
|
4073
|
+
* // return el0;
|
|
4074
|
+
* // }
|
|
4075
|
+
* ```
|
|
4076
|
+
*/
|
|
4077
|
+
declare function jsTemplate(name: string, params: string[], rootElement: HTMLTagProtocol, afterCreate?: (refs: Record<string, string>) => string): JsTemplateResult;
|
|
4078
|
+
|
|
4079
|
+
/**
|
|
4080
|
+
* `ElementRef` / `ElementListRef` と生成関数 (`ref` / `fromSelector` / `fromExpr`)、
|
|
4081
|
+
* および `JsExpr` チェーンヘルパ(`eq` / `ne` / `or` / `trim` / `isFalsy` / `isTruthy`)の実装。
|
|
4082
|
+
*
|
|
4083
|
+
* 設計書 `design.md` の「element-ref」「types: JsExpr / JsBoolExpr」節に対応。
|
|
4084
|
+
* 値オブジェクトとして扱い、メソッドは新しいオブジェクトを返す純関数。
|
|
4085
|
+
*/
|
|
4086
|
+
|
|
4087
|
+
/**
|
|
4088
|
+
* `jsName` 由来の変数名(または既に存在する JS 識別子)を指す `ElementRef` を生成する。
|
|
4089
|
+
*
|
|
4090
|
+
* @param varName - JS 識別子として有効な名前(空文字・無効識別子は `Error`)。
|
|
4091
|
+
* @returns `kind: 'var'`、`code === varName` の新しい `ElementRef`。
|
|
4092
|
+
* @throws 空文字・無効 JS 識別子のとき `Error`。
|
|
4093
|
+
*/
|
|
4094
|
+
declare function ref<E extends Element = HTMLElement>(varName: string): ElementRef<E>;
|
|
4095
|
+
|
|
4096
|
+
/**
|
|
4097
|
+
* トランスフォーマーなし環境でイベントハンドラを定義するユーティリティ。
|
|
4098
|
+
*
|
|
4099
|
+
* `.on()` に渡すハンドラの定形パターンをライブラリ側で吸収する。
|
|
4100
|
+
* トランスフォーマー使用時は不要(自動変換される)。
|
|
4101
|
+
*
|
|
4102
|
+
* @example
|
|
4103
|
+
* button.on('click', emitHandler(`__draftole__.state('${id}').set([])`))
|
|
4104
|
+
*/
|
|
4105
|
+
declare function emitHandler(code: string, params?: readonly string[]): ((s: ScriptScope) => void) & {
|
|
4106
|
+
_draftoleEmitted: true;
|
|
4107
|
+
};
|
|
4108
|
+
|
|
4109
|
+
/**
|
|
4110
|
+
* MVP-3.3: DOMContentLoaded ラッパー
|
|
4111
|
+
*
|
|
4112
|
+
* JS コードを document.addEventListener("DOMContentLoaded", ...) でラップする。
|
|
4113
|
+
* 既にラップ済みの場合は二重ラップしない。
|
|
4114
|
+
*/
|
|
4115
|
+
/**
|
|
4116
|
+
* JS コードを DOMContentLoaded イベントリスナーでラップする。
|
|
4117
|
+
* 空文字列や既にラップ済みのコードはそのまま返す。
|
|
4118
|
+
*/
|
|
4119
|
+
declare function wrapDOMReady(js: string): string;
|
|
4120
|
+
|
|
4121
|
+
/**
|
|
4122
|
+
* ファイルエクスポート時のエラー
|
|
4123
|
+
*
|
|
4124
|
+
* {@link FileExporter}でのファイル書き込み失敗時にスローされる専用エラークラスです。
|
|
4125
|
+
*
|
|
4126
|
+
* @remarks
|
|
4127
|
+
* {@link DraftOleError}を継承し、DraftOleのエラー型階層に統合されています(タスク3.3)。
|
|
4128
|
+
* エラーコードとファイルパスを保持し、デバッグを容易にします。
|
|
4129
|
+
*
|
|
4130
|
+
* ### エラーコード
|
|
4131
|
+
* - `invalidPath`: 出力パスが空または無効
|
|
4132
|
+
* - `writeFailed`: ファイル書き込みまたはディレクトリ作成失敗
|
|
4133
|
+
*
|
|
4134
|
+
* ### プロパティ
|
|
4135
|
+
* - `code`: {@link ExportableErrorCode} - エラーの種類を識別
|
|
4136
|
+
* - `module`: 常に `'publisher'` - エラーが発生したモジュール
|
|
4137
|
+
* - `filePath`: エラーが発生したファイルパス
|
|
4138
|
+
* - `message`: エラーメッセージ(カスタマイズ可能)
|
|
4139
|
+
*
|
|
4140
|
+
* @example 基本的なスロー
|
|
4141
|
+
* ```typescript
|
|
4142
|
+
* throw new ExportableError('writeFailed', '/output/file.html', 'Disk full');
|
|
4143
|
+
* ```
|
|
4144
|
+
*
|
|
4145
|
+
* @example エラーコードによるハンドリング
|
|
4146
|
+
* ```typescript
|
|
4147
|
+
* try {
|
|
4148
|
+
* exporter.export(html, css, js, '');
|
|
4149
|
+
* } catch (error) {
|
|
4150
|
+
* if (error instanceof ExportableError) {
|
|
4151
|
+
* switch (error.code) {
|
|
4152
|
+
* case 'invalidPath':
|
|
4153
|
+
* console.error('Please provide a valid output path');
|
|
4154
|
+
* break;
|
|
4155
|
+
* case 'writeFailed':
|
|
4156
|
+
* console.error('Failed to write files:', error.message);
|
|
4157
|
+
* console.error('Target path:', error.filePath);
|
|
4158
|
+
* break;
|
|
4159
|
+
* }
|
|
4160
|
+
* }
|
|
4161
|
+
* }
|
|
4162
|
+
* ```
|
|
4163
|
+
*
|
|
4164
|
+
* @example デフォルトメッセージ
|
|
4165
|
+
* ```typescript
|
|
4166
|
+
* // カスタムメッセージを省略した場合
|
|
4167
|
+
* throw new ExportableError('invalidPath', '/output');
|
|
4168
|
+
* // → message: 'ExportableError [invalidPath]: Failed to process file at "/output"'
|
|
4169
|
+
* ```
|
|
4170
|
+
*
|
|
4171
|
+
* @example DraftOleErrorとしてキャッチ
|
|
4172
|
+
* ```typescript
|
|
4173
|
+
* try {
|
|
4174
|
+
* exporter.export(html, css, js, outputPath);
|
|
4175
|
+
* } catch (error) {
|
|
4176
|
+
* if (error instanceof DraftOleError) {
|
|
4177
|
+
* console.error(`Module: ${error.module}`);
|
|
4178
|
+
* console.error(`Error: ${error.message}`);
|
|
4179
|
+
*
|
|
4180
|
+
* // ExportableErrorの場合のみ追加情報を表示
|
|
4181
|
+
* if (error instanceof ExportableError) {
|
|
4182
|
+
* console.error(`Code: ${error.code}`);
|
|
4183
|
+
* console.error(`File: ${error.filePath}`);
|
|
4184
|
+
* }
|
|
4185
|
+
* }
|
|
4186
|
+
* }
|
|
4187
|
+
* ```
|
|
4188
|
+
*
|
|
4189
|
+
* @example ログ記録
|
|
4190
|
+
* ```typescript
|
|
4191
|
+
* function logExportError(error: ExportableError): void {
|
|
4192
|
+
* const logEntry = {
|
|
4193
|
+
* timestamp: new Date().toISOString(),
|
|
4194
|
+
* module: error.module,
|
|
4195
|
+
* code: error.code,
|
|
4196
|
+
* filePath: error.filePath,
|
|
4197
|
+
* message: error.message,
|
|
4198
|
+
* stack: error.stack,
|
|
4199
|
+
* };
|
|
4200
|
+
* console.error(JSON.stringify(logEntry, null, 2));
|
|
4201
|
+
* }
|
|
4202
|
+
* ```
|
|
4203
|
+
*
|
|
4204
|
+
* @public
|
|
4205
|
+
*/
|
|
4206
|
+
declare class ExportableError extends DraftOleError {
|
|
4207
|
+
/**
|
|
4208
|
+
* Publisher エラーコード
|
|
4209
|
+
*/
|
|
4210
|
+
readonly code: ExportableErrorCode;
|
|
4211
|
+
/**
|
|
4212
|
+
* エラーが発生したモジュール(常に 'publisher')
|
|
4213
|
+
*/
|
|
4214
|
+
readonly module: "publisher";
|
|
4215
|
+
/**
|
|
4216
|
+
* エラーが発生したファイルパス
|
|
4217
|
+
*/
|
|
4218
|
+
readonly filePath: string;
|
|
4219
|
+
/**
|
|
4220
|
+
* ExportableError のコンストラクタ
|
|
4221
|
+
*
|
|
4222
|
+
* @param code - エラーコード
|
|
4223
|
+
* @param filePath - エラーが発生したファイルパス
|
|
4224
|
+
* @param message - カスタムエラーメッセージ(オプション)
|
|
4225
|
+
*/
|
|
4226
|
+
constructor(code: ExportableErrorCode, filePath: string, message?: string);
|
|
4227
|
+
}
|
|
4228
|
+
|
|
4229
|
+
/**
|
|
4230
|
+
* layout-factories.ts
|
|
4231
|
+
*
|
|
4232
|
+
* SwiftUI ライクなレイアウトコンテナファクトリ関数。
|
|
4233
|
+
* hstack / vstack / zstack / spacer / divider を提供する。
|
|
4234
|
+
*
|
|
4235
|
+
* Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 2.1, 2.2, 2.3, 2.4, 3.1, 3.2, 3.3, 3.4,
|
|
4236
|
+
* 4.1, 4.2, 4.3, 4.4, 5.1, 5.2, 5.3, 5.4
|
|
4237
|
+
*/
|
|
4238
|
+
|
|
4239
|
+
/**
|
|
4240
|
+
* 水平スタックコンテナ(display: flex; flex-direction: row)を生成するファクトリ。
|
|
4241
|
+
*
|
|
4242
|
+
* **呼び出しパターン:**
|
|
4243
|
+
* ```typescript
|
|
4244
|
+
* hstack() // 空コンテナ
|
|
4245
|
+
* hstack(child1, child2) // 子要素のみ
|
|
4246
|
+
* hstack({ spacing: 12 }) // オプションのみ
|
|
4247
|
+
* hstack({ spacing: 8, alignment: 'center' }, child1, child2) // オプション + 子要素
|
|
4248
|
+
* ```
|
|
4249
|
+
*
|
|
4250
|
+
* **生成 CSS:**
|
|
4251
|
+
* - `display: flex; flex-direction: row`
|
|
4252
|
+
* - `spacing` → `gap: {n}px`
|
|
4253
|
+
* - `alignment` → `align-items: {value}`
|
|
4254
|
+
* - `wrap: true` → `flex-wrap: wrap`
|
|
4255
|
+
*
|
|
4256
|
+
* Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6
|
|
4257
|
+
*
|
|
4258
|
+
* @param optionsOrChild - StackOptions または最初の子要素(省略可)
|
|
4259
|
+
* @param children - 追加の子要素
|
|
4260
|
+
* @returns display:flex; flex-direction:row が設定された PairType
|
|
4261
|
+
*/
|
|
4262
|
+
declare function hstack(optionsOrChild?: StackOptions | LayoutChild, ...children: LayoutChild[]): PairType;
|
|
4263
|
+
/**
|
|
4264
|
+
* 垂直スタックコンテナ(display: flex; flex-direction: column)を生成するファクトリ。
|
|
4265
|
+
*
|
|
4266
|
+
* **呼び出しパターン:**
|
|
4267
|
+
* ```typescript
|
|
4268
|
+
* vstack() // 空コンテナ
|
|
4269
|
+
* vstack(child1, child2) // 子要素のみ
|
|
4270
|
+
* vstack({ spacing: 14 }) // オプションのみ
|
|
4271
|
+
* vstack({ spacing: 8, alignment: 'center' }, child1, child2) // オプション + 子要素
|
|
4272
|
+
* ```
|
|
4273
|
+
*
|
|
4274
|
+
* **生成 CSS:**
|
|
4275
|
+
* - `display: flex; flex-direction: column`
|
|
4276
|
+
* - `spacing` → `gap: {n}px`
|
|
4277
|
+
* - `alignment` → `align-items: {value}`
|
|
4278
|
+
* - `wrap: true` → `flex-wrap: wrap`
|
|
4279
|
+
*
|
|
4280
|
+
* Requirements: 2.1, 2.2, 2.3, 2.4
|
|
4281
|
+
*
|
|
4282
|
+
* @param optionsOrChild - StackOptions または最初の子要素(省略可)
|
|
4283
|
+
* @param children - 追加の子要素
|
|
4284
|
+
* @returns display:flex; flex-direction:column が設定された PairType
|
|
4285
|
+
*/
|
|
4286
|
+
declare function vstack(optionsOrChild?: StackOptions | LayoutChild, ...children: LayoutChild[]): PairType;
|
|
4287
|
+
/**
|
|
4288
|
+
* 重ね合わせスタックコンテナ(CSS Grid overlap 方式)を生成するファクトリ。
|
|
4289
|
+
*
|
|
4290
|
+
* **呼び出しパターン:**
|
|
4291
|
+
* ```typescript
|
|
4292
|
+
* zstack() // 空コンテナ(デフォルト: center/center)
|
|
4293
|
+
* zstack(child1, child2) // 子要素のみ
|
|
4294
|
+
* zstack({ alignment: 'topLeading' }) // オプションのみ
|
|
4295
|
+
* zstack({ alignment: 'center' }, child1) // オプション + 子要素
|
|
4296
|
+
* ```
|
|
4297
|
+
*
|
|
4298
|
+
* **生成 CSS:**
|
|
4299
|
+
* - `display: grid`
|
|
4300
|
+
* - `grid-template-areas: "stack"`
|
|
4301
|
+
* - `grid-template-rows: 1fr`
|
|
4302
|
+
* - `grid-template-columns: 1fr`
|
|
4303
|
+
* - `align-items: center`(デフォルト)
|
|
4304
|
+
* - `justify-content: center`(デフォルト)
|
|
4305
|
+
*
|
|
4306
|
+
* **注意:** 子要素への `grid-area: stack` の自動適用は行わない。
|
|
4307
|
+
*
|
|
4308
|
+
* Requirements: 3.1, 3.2, 3.3, 3.4
|
|
4309
|
+
*
|
|
4310
|
+
* @param optionsOrChild - ZStackOptions または最初の子要素(省略可)
|
|
4311
|
+
* @param children - 追加の子要素
|
|
4312
|
+
* @returns CSS Grid overlap が設定された PairType
|
|
4313
|
+
*/
|
|
4314
|
+
declare function zstack(optionsOrChild?: ZStackOptions | LayoutChild, ...children: LayoutChild[]): PairType;
|
|
4315
|
+
/**
|
|
4316
|
+
* フレキシブルスペーサー(flex:1 1 auto)を生成するファクトリ。
|
|
4317
|
+
*
|
|
4318
|
+
* **呼び出しパターン:**
|
|
4319
|
+
* ```typescript
|
|
4320
|
+
* spacer() // flex:1 1 auto のみ
|
|
4321
|
+
* spacer({ minLength: 8 }) // flex:1 1 auto; min-width:8px
|
|
4322
|
+
* ```
|
|
4323
|
+
*
|
|
4324
|
+
* **生成 CSS:**
|
|
4325
|
+
* - `flex: 1 1 auto`
|
|
4326
|
+
* - `minLength` → `min-width: {n}px`
|
|
4327
|
+
*
|
|
4328
|
+
* Requirements: 4.1, 4.2, 4.3, 4.4
|
|
4329
|
+
*
|
|
4330
|
+
* @param options - SpacerOptions(省略可)
|
|
4331
|
+
* @returns flex:1 1 auto が設定された PairType
|
|
4332
|
+
*/
|
|
4333
|
+
declare function spacer(options?: SpacerOptions): PairType;
|
|
4334
|
+
/**
|
|
4335
|
+
* 区切り線(水平または垂直)を生成するファクトリ。
|
|
4336
|
+
*
|
|
4337
|
+
* **呼び出しパターン:**
|
|
4338
|
+
* ```typescript
|
|
4339
|
+
* divider() // 水平区切り線(デフォルト)
|
|
4340
|
+
* divider('horizontal') // 水平区切り線
|
|
4341
|
+
* divider('vertical') // 垂直区切り線
|
|
4342
|
+
* ```
|
|
4343
|
+
*
|
|
4344
|
+
* **生成 CSS:**
|
|
4345
|
+
* - 水平: `height:1px; background:currentColor; opacity:0.15; width:100%`
|
|
4346
|
+
* - 垂直: `width:1px; background:currentColor; opacity:0.15; align-self:stretch`
|
|
4347
|
+
*
|
|
4348
|
+
* Requirements: 5.1, 5.2, 5.3, 5.4
|
|
4349
|
+
*
|
|
4350
|
+
* @param direction - 'horizontal'(デフォルト)または 'vertical'
|
|
4351
|
+
* @returns 区切り線 CSS が設定された PairType
|
|
4352
|
+
*/
|
|
4353
|
+
declare function divider(direction?: 'horizontal' | 'vertical'): PairType;
|
|
4354
|
+
|
|
4355
|
+
declare const sel: {
|
|
4356
|
+
readonly tagA: (properties: {
|
|
4357
|
+
[x: string]: string;
|
|
4358
|
+
}) => GlobalCss;
|
|
4359
|
+
readonly tagAbbr: (properties: {
|
|
4360
|
+
[x: string]: string;
|
|
4361
|
+
}) => GlobalCss;
|
|
4362
|
+
readonly tagAddress: (properties: {
|
|
4363
|
+
[x: string]: string;
|
|
4364
|
+
}) => GlobalCss;
|
|
4365
|
+
readonly tagArea: (properties: {
|
|
4366
|
+
[x: string]: string;
|
|
4367
|
+
}) => GlobalCss;
|
|
4368
|
+
readonly tagArticle: (properties: {
|
|
4369
|
+
[x: string]: string;
|
|
4370
|
+
}) => GlobalCss;
|
|
4371
|
+
readonly tagAside: (properties: {
|
|
4372
|
+
[x: string]: string;
|
|
4373
|
+
}) => GlobalCss;
|
|
4374
|
+
readonly tagAudio: (properties: {
|
|
4375
|
+
[x: string]: string;
|
|
4376
|
+
}) => GlobalCss;
|
|
4377
|
+
readonly tagB: (properties: {
|
|
4378
|
+
[x: string]: string;
|
|
4379
|
+
}) => GlobalCss;
|
|
4380
|
+
readonly tagBase: (properties: {
|
|
4381
|
+
[x: string]: string;
|
|
4382
|
+
}) => GlobalCss;
|
|
4383
|
+
readonly tagBdi: (properties: {
|
|
4384
|
+
[x: string]: string;
|
|
4385
|
+
}) => GlobalCss;
|
|
4386
|
+
readonly tagBdo: (properties: {
|
|
4387
|
+
[x: string]: string;
|
|
4388
|
+
}) => GlobalCss;
|
|
4389
|
+
readonly tagBlockquote: (properties: {
|
|
4390
|
+
[x: string]: string;
|
|
4391
|
+
}) => GlobalCss;
|
|
4392
|
+
readonly tagBody: (properties: {
|
|
4393
|
+
[x: string]: string;
|
|
4394
|
+
}) => GlobalCss;
|
|
4395
|
+
readonly tagBr: (properties: {
|
|
4396
|
+
[x: string]: string;
|
|
4397
|
+
}) => GlobalCss;
|
|
4398
|
+
readonly tagButton: (properties: {
|
|
4399
|
+
[x: string]: string;
|
|
4400
|
+
}) => GlobalCss;
|
|
4401
|
+
readonly tagCanvas: (properties: {
|
|
4402
|
+
[x: string]: string;
|
|
4403
|
+
}) => GlobalCss;
|
|
4404
|
+
readonly tagCaption: (properties: {
|
|
4405
|
+
[x: string]: string;
|
|
4406
|
+
}) => GlobalCss;
|
|
4407
|
+
readonly tagCite: (properties: {
|
|
4408
|
+
[x: string]: string;
|
|
4409
|
+
}) => GlobalCss;
|
|
4410
|
+
readonly tagCode: (properties: {
|
|
4411
|
+
[x: string]: string;
|
|
4412
|
+
}) => GlobalCss;
|
|
4413
|
+
readonly tagCol: (properties: {
|
|
4414
|
+
[x: string]: string;
|
|
4415
|
+
}) => GlobalCss;
|
|
4416
|
+
readonly tagColgroup: (properties: {
|
|
4417
|
+
[x: string]: string;
|
|
4418
|
+
}) => GlobalCss;
|
|
4419
|
+
readonly tagData: (properties: {
|
|
4420
|
+
[x: string]: string;
|
|
4421
|
+
}) => GlobalCss;
|
|
4422
|
+
readonly tagDatalist: (properties: {
|
|
4423
|
+
[x: string]: string;
|
|
4424
|
+
}) => GlobalCss;
|
|
4425
|
+
readonly tagDd: (properties: {
|
|
4426
|
+
[x: string]: string;
|
|
4427
|
+
}) => GlobalCss;
|
|
4428
|
+
readonly tagDel: (properties: {
|
|
4429
|
+
[x: string]: string;
|
|
4430
|
+
}) => GlobalCss;
|
|
4431
|
+
readonly tagDetails: (properties: {
|
|
4432
|
+
[x: string]: string;
|
|
4433
|
+
}) => GlobalCss;
|
|
4434
|
+
readonly tagDfn: (properties: {
|
|
4435
|
+
[x: string]: string;
|
|
4436
|
+
}) => GlobalCss;
|
|
4437
|
+
readonly tagDialog: (properties: {
|
|
4438
|
+
[x: string]: string;
|
|
4439
|
+
}) => GlobalCss;
|
|
4440
|
+
readonly tagDiv: (properties: {
|
|
4441
|
+
[x: string]: string;
|
|
4442
|
+
}) => GlobalCss;
|
|
4443
|
+
readonly tagDl: (properties: {
|
|
4444
|
+
[x: string]: string;
|
|
4445
|
+
}) => GlobalCss;
|
|
4446
|
+
readonly tagDt: (properties: {
|
|
4447
|
+
[x: string]: string;
|
|
4448
|
+
}) => GlobalCss;
|
|
4449
|
+
readonly tagEm: (properties: {
|
|
4450
|
+
[x: string]: string;
|
|
4451
|
+
}) => GlobalCss;
|
|
4452
|
+
readonly tagEmbed: (properties: {
|
|
4453
|
+
[x: string]: string;
|
|
4454
|
+
}) => GlobalCss;
|
|
4455
|
+
readonly tagFieldset: (properties: {
|
|
4456
|
+
[x: string]: string;
|
|
4457
|
+
}) => GlobalCss;
|
|
4458
|
+
readonly tagFigcaption: (properties: {
|
|
4459
|
+
[x: string]: string;
|
|
4460
|
+
}) => GlobalCss;
|
|
4461
|
+
readonly tagFigure: (properties: {
|
|
4462
|
+
[x: string]: string;
|
|
4463
|
+
}) => GlobalCss;
|
|
4464
|
+
readonly tagFooter: (properties: {
|
|
4465
|
+
[x: string]: string;
|
|
4466
|
+
}) => GlobalCss;
|
|
4467
|
+
readonly tagForm: (properties: {
|
|
4468
|
+
[x: string]: string;
|
|
4469
|
+
}) => GlobalCss;
|
|
4470
|
+
readonly tagH1: (properties: {
|
|
4471
|
+
[x: string]: string;
|
|
4472
|
+
}) => GlobalCss;
|
|
4473
|
+
readonly tagH2: (properties: {
|
|
4474
|
+
[x: string]: string;
|
|
4475
|
+
}) => GlobalCss;
|
|
4476
|
+
readonly tagH3: (properties: {
|
|
4477
|
+
[x: string]: string;
|
|
4478
|
+
}) => GlobalCss;
|
|
4479
|
+
readonly tagH4: (properties: {
|
|
4480
|
+
[x: string]: string;
|
|
4481
|
+
}) => GlobalCss;
|
|
4482
|
+
readonly tagH5: (properties: {
|
|
4483
|
+
[x: string]: string;
|
|
4484
|
+
}) => GlobalCss;
|
|
4485
|
+
readonly tagH6: (properties: {
|
|
4486
|
+
[x: string]: string;
|
|
4487
|
+
}) => GlobalCss;
|
|
4488
|
+
readonly tagHead: (properties: {
|
|
4489
|
+
[x: string]: string;
|
|
4490
|
+
}) => GlobalCss;
|
|
4491
|
+
readonly tagHeader: (properties: {
|
|
4492
|
+
[x: string]: string;
|
|
4493
|
+
}) => GlobalCss;
|
|
4494
|
+
readonly tagHgroup: (properties: {
|
|
4495
|
+
[x: string]: string;
|
|
4496
|
+
}) => GlobalCss;
|
|
4497
|
+
readonly tagHr: (properties: {
|
|
4498
|
+
[x: string]: string;
|
|
4499
|
+
}) => GlobalCss;
|
|
4500
|
+
readonly tagHtml: (properties: {
|
|
4501
|
+
[x: string]: string;
|
|
4502
|
+
}) => GlobalCss;
|
|
4503
|
+
readonly tagI: (properties: {
|
|
4504
|
+
[x: string]: string;
|
|
4505
|
+
}) => GlobalCss;
|
|
4506
|
+
readonly tagIframe: (properties: {
|
|
4507
|
+
[x: string]: string;
|
|
4508
|
+
}) => GlobalCss;
|
|
4509
|
+
readonly tagImg: (properties: {
|
|
4510
|
+
[x: string]: string;
|
|
4511
|
+
}) => GlobalCss;
|
|
4512
|
+
readonly tagInput: (properties: {
|
|
4513
|
+
[x: string]: string;
|
|
4514
|
+
}) => GlobalCss;
|
|
4515
|
+
readonly tagIns: (properties: {
|
|
4516
|
+
[x: string]: string;
|
|
4517
|
+
}) => GlobalCss;
|
|
4518
|
+
readonly tagKbd: (properties: {
|
|
4519
|
+
[x: string]: string;
|
|
4520
|
+
}) => GlobalCss;
|
|
4521
|
+
readonly tagLabel: (properties: {
|
|
4522
|
+
[x: string]: string;
|
|
4523
|
+
}) => GlobalCss;
|
|
4524
|
+
readonly tagLegend: (properties: {
|
|
4525
|
+
[x: string]: string;
|
|
4526
|
+
}) => GlobalCss;
|
|
4527
|
+
readonly tagLi: (properties: {
|
|
4528
|
+
[x: string]: string;
|
|
4529
|
+
}) => GlobalCss;
|
|
4530
|
+
readonly tagLink: (properties: {
|
|
4531
|
+
[x: string]: string;
|
|
4532
|
+
}) => GlobalCss;
|
|
4533
|
+
readonly tagMain: (properties: {
|
|
4534
|
+
[x: string]: string;
|
|
4535
|
+
}) => GlobalCss;
|
|
4536
|
+
readonly tagMap: (properties: {
|
|
4537
|
+
[x: string]: string;
|
|
4538
|
+
}) => GlobalCss;
|
|
4539
|
+
readonly tagMark: (properties: {
|
|
4540
|
+
[x: string]: string;
|
|
4541
|
+
}) => GlobalCss;
|
|
4542
|
+
readonly tagMenu: (properties: {
|
|
4543
|
+
[x: string]: string;
|
|
4544
|
+
}) => GlobalCss;
|
|
4545
|
+
readonly tagMeta: (properties: {
|
|
4546
|
+
[x: string]: string;
|
|
4547
|
+
}) => GlobalCss;
|
|
4548
|
+
readonly tagMeter: (properties: {
|
|
4549
|
+
[x: string]: string;
|
|
4550
|
+
}) => GlobalCss;
|
|
4551
|
+
readonly tagNav: (properties: {
|
|
4552
|
+
[x: string]: string;
|
|
4553
|
+
}) => GlobalCss;
|
|
4554
|
+
readonly tagNoscript: (properties: {
|
|
4555
|
+
[x: string]: string;
|
|
4556
|
+
}) => GlobalCss;
|
|
4557
|
+
readonly tagObject: (properties: {
|
|
4558
|
+
[x: string]: string;
|
|
4559
|
+
}) => GlobalCss;
|
|
4560
|
+
readonly tagOl: (properties: {
|
|
4561
|
+
[x: string]: string;
|
|
4562
|
+
}) => GlobalCss;
|
|
4563
|
+
readonly tagOptgroup: (properties: {
|
|
4564
|
+
[x: string]: string;
|
|
4565
|
+
}) => GlobalCss;
|
|
4566
|
+
readonly tagOption: (properties: {
|
|
4567
|
+
[x: string]: string;
|
|
4568
|
+
}) => GlobalCss;
|
|
4569
|
+
readonly tagOutput: (properties: {
|
|
4570
|
+
[x: string]: string;
|
|
4571
|
+
}) => GlobalCss;
|
|
4572
|
+
readonly tagP: (properties: {
|
|
4573
|
+
[x: string]: string;
|
|
4574
|
+
}) => GlobalCss;
|
|
4575
|
+
readonly tagPicture: (properties: {
|
|
4576
|
+
[x: string]: string;
|
|
4577
|
+
}) => GlobalCss;
|
|
4578
|
+
readonly tagPre: (properties: {
|
|
4579
|
+
[x: string]: string;
|
|
4580
|
+
}) => GlobalCss;
|
|
4581
|
+
readonly tagProgress: (properties: {
|
|
4582
|
+
[x: string]: string;
|
|
4583
|
+
}) => GlobalCss;
|
|
4584
|
+
readonly tagQ: (properties: {
|
|
4585
|
+
[x: string]: string;
|
|
4586
|
+
}) => GlobalCss;
|
|
4587
|
+
readonly tagRp: (properties: {
|
|
4588
|
+
[x: string]: string;
|
|
4589
|
+
}) => GlobalCss;
|
|
4590
|
+
readonly tagRt: (properties: {
|
|
4591
|
+
[x: string]: string;
|
|
4592
|
+
}) => GlobalCss;
|
|
4593
|
+
readonly tagRuby: (properties: {
|
|
4594
|
+
[x: string]: string;
|
|
4595
|
+
}) => GlobalCss;
|
|
4596
|
+
readonly tagS: (properties: {
|
|
4597
|
+
[x: string]: string;
|
|
4598
|
+
}) => GlobalCss;
|
|
4599
|
+
readonly tagSamp: (properties: {
|
|
4600
|
+
[x: string]: string;
|
|
4601
|
+
}) => GlobalCss;
|
|
4602
|
+
readonly tagScript: (properties: {
|
|
4603
|
+
[x: string]: string;
|
|
4604
|
+
}) => GlobalCss;
|
|
4605
|
+
readonly tagSearch: (properties: {
|
|
4606
|
+
[x: string]: string;
|
|
4607
|
+
}) => GlobalCss;
|
|
4608
|
+
readonly tagSection: (properties: {
|
|
4609
|
+
[x: string]: string;
|
|
4610
|
+
}) => GlobalCss;
|
|
4611
|
+
readonly tagSelect: (properties: {
|
|
4612
|
+
[x: string]: string;
|
|
4613
|
+
}) => GlobalCss;
|
|
4614
|
+
readonly tagSlot: (properties: {
|
|
4615
|
+
[x: string]: string;
|
|
4616
|
+
}) => GlobalCss;
|
|
4617
|
+
readonly tagSmall: (properties: {
|
|
4618
|
+
[x: string]: string;
|
|
4619
|
+
}) => GlobalCss;
|
|
4620
|
+
readonly tagSource: (properties: {
|
|
4621
|
+
[x: string]: string;
|
|
4622
|
+
}) => GlobalCss;
|
|
4623
|
+
readonly tagSpan: (properties: {
|
|
4624
|
+
[x: string]: string;
|
|
4625
|
+
}) => GlobalCss;
|
|
4626
|
+
readonly tagStrong: (properties: {
|
|
4627
|
+
[x: string]: string;
|
|
4628
|
+
}) => GlobalCss;
|
|
4629
|
+
readonly tagStyle: (properties: {
|
|
4630
|
+
[x: string]: string;
|
|
4631
|
+
}) => GlobalCss;
|
|
4632
|
+
readonly tagSub: (properties: {
|
|
4633
|
+
[x: string]: string;
|
|
4634
|
+
}) => GlobalCss;
|
|
4635
|
+
readonly tagSummary: (properties: {
|
|
4636
|
+
[x: string]: string;
|
|
4637
|
+
}) => GlobalCss;
|
|
4638
|
+
readonly tagSup: (properties: {
|
|
4639
|
+
[x: string]: string;
|
|
4640
|
+
}) => GlobalCss;
|
|
4641
|
+
readonly tagTable: (properties: {
|
|
4642
|
+
[x: string]: string;
|
|
4643
|
+
}) => GlobalCss;
|
|
4644
|
+
readonly tagTbody: (properties: {
|
|
4645
|
+
[x: string]: string;
|
|
4646
|
+
}) => GlobalCss;
|
|
4647
|
+
readonly tagTd: (properties: {
|
|
4648
|
+
[x: string]: string;
|
|
4649
|
+
}) => GlobalCss;
|
|
4650
|
+
readonly tagTemplate: (properties: {
|
|
4651
|
+
[x: string]: string;
|
|
4652
|
+
}) => GlobalCss;
|
|
4653
|
+
readonly tagTextarea: (properties: {
|
|
4654
|
+
[x: string]: string;
|
|
4655
|
+
}) => GlobalCss;
|
|
4656
|
+
readonly tagTfoot: (properties: {
|
|
4657
|
+
[x: string]: string;
|
|
4658
|
+
}) => GlobalCss;
|
|
4659
|
+
readonly tagTh: (properties: {
|
|
4660
|
+
[x: string]: string;
|
|
4661
|
+
}) => GlobalCss;
|
|
4662
|
+
readonly tagThead: (properties: {
|
|
4663
|
+
[x: string]: string;
|
|
4664
|
+
}) => GlobalCss;
|
|
4665
|
+
readonly tagTime: (properties: {
|
|
4666
|
+
[x: string]: string;
|
|
4667
|
+
}) => GlobalCss;
|
|
4668
|
+
readonly tagTitle: (properties: {
|
|
4669
|
+
[x: string]: string;
|
|
4670
|
+
}) => GlobalCss;
|
|
4671
|
+
readonly tagTr: (properties: {
|
|
4672
|
+
[x: string]: string;
|
|
4673
|
+
}) => GlobalCss;
|
|
4674
|
+
readonly tagTrack: (properties: {
|
|
4675
|
+
[x: string]: string;
|
|
4676
|
+
}) => GlobalCss;
|
|
4677
|
+
readonly tagU: (properties: {
|
|
4678
|
+
[x: string]: string;
|
|
4679
|
+
}) => GlobalCss;
|
|
4680
|
+
readonly tagUl: (properties: {
|
|
4681
|
+
[x: string]: string;
|
|
4682
|
+
}) => GlobalCss;
|
|
4683
|
+
readonly tagVar: (properties: {
|
|
4684
|
+
[x: string]: string;
|
|
4685
|
+
}) => GlobalCss;
|
|
4686
|
+
readonly tagVideo: (properties: {
|
|
4687
|
+
[x: string]: string;
|
|
4688
|
+
}) => GlobalCss;
|
|
4689
|
+
readonly tagWbr: (properties: {
|
|
4690
|
+
[x: string]: string;
|
|
4691
|
+
}) => GlobalCss;
|
|
4692
|
+
readonly root: typeof root;
|
|
4693
|
+
readonly all: typeof all;
|
|
4694
|
+
readonly tag: typeof tag;
|
|
4695
|
+
readonly rule: typeof rule;
|
|
4696
|
+
readonly media: typeof media;
|
|
4697
|
+
readonly keyframes: typeof keyframes;
|
|
4698
|
+
};
|
|
4699
|
+
|
|
4700
|
+
export { ARIA_ATTRIBUTE_KEYS, type AriaAttributeKey, type AttributeBuilderProtocol, type AttributeMap, BOOLEAN_ATTRIBUTE_KEYS, BUTTON_TYPES, BaseAttributeBuilder, type BooleanAttributeKey, ButtonAttributeBuilder, type ButtonType, CSSPropertyKey, type ChildArg, CssConfig, type CssErrorCode, CssLayoutBuilder, CssManager, CssManagerInstance, CssPlaceDescription, CssPositionMaker, CssPositionMakerType, CssStyleManager, CssStyleManagerType, DefaultCssManager, DraftOleError, type DraftOleErrorCode, DuplicateCssPropertyError, ExportableError, type ExportableErrorCode, FormAttributeBuilder, GlobalCss, HTMLFormatter, HTMLTagProtocol, HlUnit, HtmlAttribute, type HtmlAttributeManagerProtocol, HtmlAttributeShape, HtmlAttributeValue, type HtmlErrorCode, HtmlStyle, HtmlTag, HtmlTagOptions, INPUT_TYPES, ImageAttributeBuilder, InputAttributeBuilder, type InputType, JQueryHelper, JQueryManager, JQueryManagerInstance, JQueryMethodType, type JsErrorCode, type JsParam, type JsTemplateResult, KEY_VALUE_ATTRIBUTE_KEYS, type KeyValueAttributeKey, LayoutChild, LayoutRegisteredItem, LazyLayoutManager, LazyLayoutRegister, LinkAttributeBuilder, PairType, RelationShip, ScriptScope, SelfClosingType, SharedStyle, SpacerOptions, StackOptions, type TagGenerateProtocol, TagType, Text, TextType, type Theme, type UnifiedTheme, type UnifiedThemeInput, ZStackOptions, __draftole_label__, a, abbr, address, area, article, aside, audio, b, base, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, css, datalist, dd, details, dialog, div, divider, djb2Hash, dl, dt, tags as el, em, embed, emitHandler, escapeHtml, fieldset, figcaption, figure, footer, form, generateScopedClassName, guardDuplicateCssProperty, h1, h2, h3, h4, h5, h6, head, header, hr, hstack, html, i, iframe, img, input, isJsParam, jsTemplate, kbd, keyframes, label, legend, li, link, main, mark, media, meta, nav, normalizeClassNames, noscript, ol, optgroup, option, output, p, param, picture, pre, q, ref, s, samp, script, section, sel, select, small, source, spacer, span, strong, sub, summary, sup, svg, table, tags, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, varTag, video, vstack, wbr, wrapDOMReady, zstack };
|