@stacksjs/desktop 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +563 -0
- package/dist/alerts.d.ts +164 -0
- package/dist/components.d.ts +942 -0
- package/dist/dialogs.d.ts +213 -0
- package/dist/index.d.ts +183 -0
- package/dist/index.js +3015 -0
- package/dist/index.js.map +15 -0
- package/dist/modals.d.ts +201 -0
- package/dist/system-tray.d.ts +121 -0
- package/dist/types.d.ts +171 -0
- package/dist/window.d.ts +111 -0
- package/package.json +63 -0
|
@@ -0,0 +1,942 @@
|
|
|
1
|
+
import type { ComponentProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Create a Button component
|
|
4
|
+
*/
|
|
5
|
+
export declare function createButton(props: ButtonProps): string;
|
|
6
|
+
/**
|
|
7
|
+
* Create a TextInput component
|
|
8
|
+
*/
|
|
9
|
+
export declare function createTextInput(props: TextInputProps): string;
|
|
10
|
+
/**
|
|
11
|
+
* Create a Checkbox component
|
|
12
|
+
*/
|
|
13
|
+
export declare function createCheckbox(props: CheckboxProps): string;
|
|
14
|
+
/**
|
|
15
|
+
* Create a Slider component
|
|
16
|
+
*/
|
|
17
|
+
export declare function createSlider(props: SliderProps): string;
|
|
18
|
+
/**
|
|
19
|
+
* Create a ProgressBar component
|
|
20
|
+
*/
|
|
21
|
+
export declare function createProgressBar(props: ProgressBarProps): string;
|
|
22
|
+
/**
|
|
23
|
+
* Create a Badge component
|
|
24
|
+
*/
|
|
25
|
+
export declare function createBadge(props: BadgeProps): string;
|
|
26
|
+
/**
|
|
27
|
+
* Create an Avatar component
|
|
28
|
+
*/
|
|
29
|
+
export declare function createAvatar(props: AvatarProps): string;
|
|
30
|
+
/**
|
|
31
|
+
* Create a Card component
|
|
32
|
+
*/
|
|
33
|
+
export declare function createCard(props: CardProps): string;
|
|
34
|
+
/**
|
|
35
|
+
* Create a Tabs component
|
|
36
|
+
*/
|
|
37
|
+
export declare function createTabs(props: TabsProps): string;
|
|
38
|
+
/**
|
|
39
|
+
* Create a Dropdown/Select component
|
|
40
|
+
*/
|
|
41
|
+
export declare function createDropdown(props: DropdownProps): string;
|
|
42
|
+
/**
|
|
43
|
+
* Create a Rating component
|
|
44
|
+
*/
|
|
45
|
+
export declare function createRating(props: RatingProps): string;
|
|
46
|
+
/**
|
|
47
|
+
* Create a RadioButton component
|
|
48
|
+
*/
|
|
49
|
+
export declare function createRadioButton(props: RadioButtonProps): string;
|
|
50
|
+
/**
|
|
51
|
+
* Create a ColorPicker component
|
|
52
|
+
*/
|
|
53
|
+
export declare function createColorPicker(props: ColorPickerProps): string;
|
|
54
|
+
/**
|
|
55
|
+
* Create a DatePicker component
|
|
56
|
+
*/
|
|
57
|
+
export declare function createDatePicker(props: DatePickerProps): string;
|
|
58
|
+
/**
|
|
59
|
+
* Create a TimePicker component
|
|
60
|
+
*/
|
|
61
|
+
export declare function createTimePicker(props: TimePickerProps): string;
|
|
62
|
+
/**
|
|
63
|
+
* Create an Autocomplete component
|
|
64
|
+
*/
|
|
65
|
+
export declare function createAutocomplete(props: AutocompleteProps): string;
|
|
66
|
+
/**
|
|
67
|
+
* Create a Label component
|
|
68
|
+
*/
|
|
69
|
+
export declare function createLabel(props: LabelProps): string;
|
|
70
|
+
/**
|
|
71
|
+
* Create an ImageView component
|
|
72
|
+
*/
|
|
73
|
+
export declare function createImageView(props: ImageViewProps): string;
|
|
74
|
+
/**
|
|
75
|
+
* Create a Chip component
|
|
76
|
+
*/
|
|
77
|
+
export declare function createChip(props: ChipProps): string;
|
|
78
|
+
/**
|
|
79
|
+
* Create a Tooltip component
|
|
80
|
+
*/
|
|
81
|
+
export declare function createTooltip(props: TooltipProps): string;
|
|
82
|
+
/**
|
|
83
|
+
* Create a ScrollView component
|
|
84
|
+
*/
|
|
85
|
+
export declare function createScrollView(props: ScrollViewProps): string;
|
|
86
|
+
/**
|
|
87
|
+
* Create a SplitView component
|
|
88
|
+
*/
|
|
89
|
+
export declare function createSplitView(props: SplitViewProps): string;
|
|
90
|
+
/**
|
|
91
|
+
* Create an Accordion component
|
|
92
|
+
*/
|
|
93
|
+
export declare function createAccordion(props: AccordionProps): string;
|
|
94
|
+
/**
|
|
95
|
+
* Create a Stepper component
|
|
96
|
+
*/
|
|
97
|
+
export declare function createStepper(props: StepperProps): string;
|
|
98
|
+
/**
|
|
99
|
+
* Create a Modal component (as a component, not a dialog function)
|
|
100
|
+
*/
|
|
101
|
+
export declare function createModalComponent(props: ModalComponentProps): string;
|
|
102
|
+
/**
|
|
103
|
+
* Create a ListView component
|
|
104
|
+
*/
|
|
105
|
+
export declare function createListView(props: ListViewProps): string;
|
|
106
|
+
/**
|
|
107
|
+
* Create a Table component
|
|
108
|
+
*/
|
|
109
|
+
export declare function createTable(props: TableProps): string;
|
|
110
|
+
/**
|
|
111
|
+
* Create a TreeView component
|
|
112
|
+
*/
|
|
113
|
+
export declare function createTreeView(props: TreeViewProps): string;
|
|
114
|
+
/**
|
|
115
|
+
* Create a DataGrid component
|
|
116
|
+
*/
|
|
117
|
+
export declare function createDataGrid(props: DataGridProps): string;
|
|
118
|
+
/**
|
|
119
|
+
* Create a Chart component (placeholder for integration with charting library)
|
|
120
|
+
*/
|
|
121
|
+
export declare function createChart(props: ChartProps): string;
|
|
122
|
+
/**
|
|
123
|
+
* Create a CodeEditor component
|
|
124
|
+
*/
|
|
125
|
+
export declare function createCodeEditor(props: CodeEditorProps): string;
|
|
126
|
+
/**
|
|
127
|
+
* Create a MediaPlayer component
|
|
128
|
+
*/
|
|
129
|
+
export declare function createMediaPlayer(props: MediaPlayerProps): string;
|
|
130
|
+
/**
|
|
131
|
+
* Create a FileExplorer component
|
|
132
|
+
*/
|
|
133
|
+
export declare function createFileExplorer(props: FileExplorerProps): string;
|
|
134
|
+
/**
|
|
135
|
+
* Create a WebView component
|
|
136
|
+
*/
|
|
137
|
+
export declare function createWebView(props: WebViewProps): string;
|
|
138
|
+
/**
|
|
139
|
+
* List of all 35 available components
|
|
140
|
+
*/
|
|
141
|
+
export declare const AVAILABLE_COMPONENTS: readonly [unknown, 'TextInput', 'Checkbox', 'RadioButton', 'Slider', 'ColorPicker', 'DatePicker', 'TimePicker', 'Autocomplete', unknown, 'ImageView', 'ProgressBar', 'Avatar', 'Badge', 'Chip', 'Card', 'Tooltip', 'Toast', unknown, 'SplitView', 'Accordion', 'Stepper', 'Modal', 'Tabs', 'Dropdown', unknown, 'Table', 'TreeView', 'DataGrid', 'Chart', unknown, 'CodeEditor', 'MediaPlayer', 'FileExplorer', 'WebView'];
|
|
142
|
+
/**
|
|
143
|
+
* CSS styles for all components
|
|
144
|
+
*/
|
|
145
|
+
export declare const COMPONENT_STYLES: `
|
|
146
|
+
/* Button */
|
|
147
|
+
.stx-button {
|
|
148
|
+
display: inline-flex;
|
|
149
|
+
align-items: center;
|
|
150
|
+
justify-content: center;
|
|
151
|
+
gap: 8px;
|
|
152
|
+
padding: 8px 16px;
|
|
153
|
+
border: none;
|
|
154
|
+
border-radius: 6px;
|
|
155
|
+
font-size: 14px;
|
|
156
|
+
font-weight: 500;
|
|
157
|
+
cursor: pointer;
|
|
158
|
+
transition: all 0.15s;
|
|
159
|
+
}
|
|
160
|
+
.stx-button--primary { background: #3498db; color: #fff; }
|
|
161
|
+
.stx-button--primary:hover { background: #2980b9; }
|
|
162
|
+
.stx-button--secondary { background: #6c757d; color: #fff; }
|
|
163
|
+
.stx-button--outline { background: transparent; border: 1px solid #3498db; color: #3498db; }
|
|
164
|
+
.stx-button--ghost { background: transparent; color: #3498db; }
|
|
165
|
+
.stx-button--destructive { background: #e74c3c; color: #fff; }
|
|
166
|
+
.stx-button--small { padding: 4px 8px; font-size: 12px; }
|
|
167
|
+
.stx-button--large { padding: 12px 24px; font-size: 16px; }
|
|
168
|
+
.stx-button--disabled { opacity: 0.5; cursor: not-allowed; }
|
|
169
|
+
.stx-button--loading { pointer-events: none; }
|
|
170
|
+
.stx-button-spinner { width: 16px; height: 16px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.6s linear infinite; }
|
|
171
|
+
@keyframes spin { to { transform: rotate(360deg); } }
|
|
172
|
+
|
|
173
|
+
/* Input */
|
|
174
|
+
.stx-input-wrapper { display: flex; flex-direction: column; gap: 4px; }
|
|
175
|
+
.stx-input-label { font-size: 14px; font-weight: 500; color: #333; }
|
|
176
|
+
.stx-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; transition: border-color 0.15s; }
|
|
177
|
+
.stx-input:focus { outline: none; border-color: #3498db; }
|
|
178
|
+
.stx-input--error { border-color: #e74c3c; }
|
|
179
|
+
.stx-input-error { font-size: 12px; color: #e74c3c; }
|
|
180
|
+
.stx-input-hint { font-size: 12px; color: #666; }
|
|
181
|
+
|
|
182
|
+
/* Checkbox */
|
|
183
|
+
.stx-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
|
|
184
|
+
.stx-checkbox input { display: none; }
|
|
185
|
+
.stx-checkbox-box { width: 18px; height: 18px; border: 2px solid #ddd; border-radius: 4px; transition: all 0.15s; }
|
|
186
|
+
.stx-checkbox input:checked + .stx-checkbox-box { background: #3498db; border-color: #3498db; }
|
|
187
|
+
.stx-checkbox--disabled { opacity: 0.5; cursor: not-allowed; }
|
|
188
|
+
|
|
189
|
+
/* Progress */
|
|
190
|
+
.stx-progress { height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; position: relative; }
|
|
191
|
+
.stx-progress-bar { height: 100%; background: #3498db; transition: width 0.3s; }
|
|
192
|
+
.stx-progress--success .stx-progress-bar { background: #27ae60; }
|
|
193
|
+
.stx-progress--warning .stx-progress-bar { background: #f39c12; }
|
|
194
|
+
.stx-progress--error .stx-progress-bar { background: #e74c3c; }
|
|
195
|
+
.stx-progress--indeterminate .stx-progress-bar { animation: progress-indeterminate 1.5s infinite; }
|
|
196
|
+
@keyframes progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
|
|
197
|
+
|
|
198
|
+
/* Badge */
|
|
199
|
+
.stx-badge { display: inline-flex; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }
|
|
200
|
+
.stx-badge--default { background: #e0e0e0; color: #333; }
|
|
201
|
+
.stx-badge--primary { background: #3498db; color: #fff; }
|
|
202
|
+
.stx-badge--success { background: #27ae60; color: #fff; }
|
|
203
|
+
.stx-badge--warning { background: #f39c12; color: #fff; }
|
|
204
|
+
.stx-badge--error { background: #e74c3c; color: #fff; }
|
|
205
|
+
|
|
206
|
+
/* Avatar */
|
|
207
|
+
.stx-avatar { display: inline-flex; align-items: center; justify-content: center; background: #3498db; color: #fff; overflow: hidden; }
|
|
208
|
+
.stx-avatar--circle { border-radius: 50%; }
|
|
209
|
+
.stx-avatar--square { border-radius: 0; }
|
|
210
|
+
.stx-avatar--rounded { border-radius: 8px; }
|
|
211
|
+
.stx-avatar--small { width: 32px; height: 32px; font-size: 12px; }
|
|
212
|
+
.stx-avatar--medium { width: 40px; height: 40px; font-size: 14px; }
|
|
213
|
+
.stx-avatar--large { width: 56px; height: 56px; font-size: 18px; }
|
|
214
|
+
.stx-avatar-img { width: 100%; height: 100%; object-fit: cover; }
|
|
215
|
+
|
|
216
|
+
/* Card */
|
|
217
|
+
.stx-card { background: #fff; border-radius: 8px; overflow: hidden; }
|
|
218
|
+
.stx-card--outlined { border: 1px solid #e0e0e0; }
|
|
219
|
+
.stx-card--elevated { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
|
220
|
+
.stx-card-image img { width: 100%; display: block; }
|
|
221
|
+
.stx-card-body { padding: 16px; }
|
|
222
|
+
.stx-card-title { margin: 0 0 4px; font-size: 18px; }
|
|
223
|
+
.stx-card-subtitle { margin: 0 0 8px; color: #666; font-size: 14px; }
|
|
224
|
+
.stx-card-footer { padding: 12px 16px; border-top: 1px solid #e0e0e0; }
|
|
225
|
+
|
|
226
|
+
/* Tabs */
|
|
227
|
+
.stx-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e0e0e0; }
|
|
228
|
+
.stx-tab { padding: 8px 16px; border: none; background: none; cursor: pointer; color: #666; border-bottom: 2px solid transparent; transition: all 0.15s; }
|
|
229
|
+
.stx-tab:hover { color: #333; }
|
|
230
|
+
.stx-tab--active { color: #3498db; border-bottom-color: #3498db; }
|
|
231
|
+
.stx-tab--disabled { opacity: 0.5; cursor: not-allowed; }
|
|
232
|
+
.stx-tabs--pills { border-bottom: none; }
|
|
233
|
+
.stx-tabs--pills .stx-tab { border-radius: 20px; border-bottom: none; }
|
|
234
|
+
.stx-tabs--pills .stx-tab--active { background: #3498db; color: #fff; }
|
|
235
|
+
|
|
236
|
+
/* Dropdown */
|
|
237
|
+
.stx-dropdown { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; background: #fff; cursor: pointer; min-width: 150px; }
|
|
238
|
+
.stx-dropdown:focus { outline: none; border-color: #3498db; }
|
|
239
|
+
.stx-dropdown--disabled { opacity: 0.5; cursor: not-allowed; }
|
|
240
|
+
|
|
241
|
+
/* Rating */
|
|
242
|
+
.stx-rating { display: inline-flex; gap: 4px; }
|
|
243
|
+
.stx-star { color: #ddd; cursor: pointer; transition: color 0.15s; }
|
|
244
|
+
.stx-star--filled { color: #f1c40f; }
|
|
245
|
+
.stx-star--half { background: linear-gradient(90deg, #f1c40f 50%, #ddd 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
246
|
+
.stx-rating--readonly .stx-star { cursor: default; }
|
|
247
|
+
.stx-rating--small .stx-star { font-size: 16px; }
|
|
248
|
+
.stx-rating--medium .stx-star { font-size: 24px; }
|
|
249
|
+
.stx-rating--large .stx-star { font-size: 32px; }
|
|
250
|
+
|
|
251
|
+
/* Slider */
|
|
252
|
+
.stx-slider { display: flex; align-items: center; gap: 12px; }
|
|
253
|
+
.stx-slider-track { flex: 1; }
|
|
254
|
+
.stx-slider input[type="range"] { width: 100%; }
|
|
255
|
+
.stx-slider-value { min-width: 40px; text-align: right; font-size: 14px; }
|
|
256
|
+
|
|
257
|
+
/* Radio Button */
|
|
258
|
+
.stx-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
|
|
259
|
+
.stx-radio input { display: none; }
|
|
260
|
+
.stx-radio-circle { width: 18px; height: 18px; border: 2px solid #ddd; border-radius: 50%; position: relative; transition: all 0.15s; }
|
|
261
|
+
.stx-radio input:checked + .stx-radio-circle { border-color: #3498db; }
|
|
262
|
+
.stx-radio input:checked + .stx-radio-circle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; background: #3498db; border-radius: 50%; }
|
|
263
|
+
.stx-radio--disabled { opacity: 0.5; cursor: not-allowed; }
|
|
264
|
+
|
|
265
|
+
/* Color Picker */
|
|
266
|
+
.stx-color-picker { display: flex; flex-direction: column; gap: 8px; }
|
|
267
|
+
.stx-color-picker-input { display: flex; align-items: center; gap: 8px; }
|
|
268
|
+
.stx-color-picker-input input[type="color"] { width: 40px; height: 40px; border: none; cursor: pointer; }
|
|
269
|
+
.stx-color-picker-value { font-family: monospace; }
|
|
270
|
+
.stx-color-picker-presets { display: flex; gap: 4px; flex-wrap: wrap; }
|
|
271
|
+
.stx-color-preset { width: 24px; height: 24px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; }
|
|
272
|
+
.stx-color-preset:hover { border-color: #333; }
|
|
273
|
+
|
|
274
|
+
/* Date/Time Picker */
|
|
275
|
+
.stx-date-picker, .stx-time-picker { display: flex; flex-direction: column; gap: 4px; }
|
|
276
|
+
.stx-date-picker-input, .stx-time-picker-input { display: flex; align-items: center; gap: 4px; }
|
|
277
|
+
.stx-date-picker-input input, .stx-time-picker-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
|
|
278
|
+
.stx-date-picker-clear { background: none; border: none; cursor: pointer; font-size: 16px; }
|
|
279
|
+
|
|
280
|
+
/* Autocomplete */
|
|
281
|
+
.stx-autocomplete { position: relative; }
|
|
282
|
+
.stx-autocomplete-input-wrapper { position: relative; }
|
|
283
|
+
.stx-autocomplete-input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
|
|
284
|
+
.stx-autocomplete-spinner { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid #ddd; border-top-color: #3498db; border-radius: 50%; animation: spin 0.6s linear infinite; }
|
|
285
|
+
.stx-autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 6px; max-height: 200px; overflow-y: auto; display: none; z-index: 10; }
|
|
286
|
+
.stx-autocomplete:focus-within .stx-autocomplete-list { display: block; }
|
|
287
|
+
.stx-autocomplete-item { padding: 8px 12px; cursor: pointer; }
|
|
288
|
+
.stx-autocomplete-item:hover { background: #f5f5f5; }
|
|
289
|
+
.stx-autocomplete-item--selected { background: #e8f4fc; }
|
|
290
|
+
|
|
291
|
+
/* Label */
|
|
292
|
+
.stx-label { display: inline-block; font-weight: 500; }
|
|
293
|
+
.stx-label--small { font-size: 12px; }
|
|
294
|
+
.stx-label--medium { font-size: 14px; }
|
|
295
|
+
.stx-label--large { font-size: 16px; }
|
|
296
|
+
.stx-label-required { color: #e74c3c; margin-left: 2px; }
|
|
297
|
+
|
|
298
|
+
/* Image */
|
|
299
|
+
.stx-image { display: block; max-width: 100%; }
|
|
300
|
+
|
|
301
|
+
/* Chip */
|
|
302
|
+
.stx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 16px; font-size: 13px; }
|
|
303
|
+
.stx-chip--default { background: #e0e0e0; color: #333; }
|
|
304
|
+
.stx-chip--primary { background: #e8f4fc; color: #3498db; }
|
|
305
|
+
.stx-chip--success { background: #e8f8f0; color: #27ae60; }
|
|
306
|
+
.stx-chip--warning { background: #fef5e7; color: #f39c12; }
|
|
307
|
+
.stx-chip--error { background: #fdebeb; color: #e74c3c; }
|
|
308
|
+
.stx-chip--small { padding: 2px 8px; font-size: 11px; }
|
|
309
|
+
.stx-chip--large { padding: 6px 16px; font-size: 15px; }
|
|
310
|
+
.stx-chip-remove { background: none; border: none; cursor: pointer; opacity: 0.6; padding: 0 2px; }
|
|
311
|
+
.stx-chip-remove:hover { opacity: 1; }
|
|
312
|
+
|
|
313
|
+
/* Tooltip */
|
|
314
|
+
.stx-tooltip-wrapper { position: relative; display: inline-block; }
|
|
315
|
+
.stx-tooltip { position: absolute; background: #333; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; z-index: 1000; }
|
|
316
|
+
.stx-tooltip-wrapper:hover .stx-tooltip { opacity: 1; visibility: visible; }
|
|
317
|
+
.stx-tooltip--top { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; }
|
|
318
|
+
.stx-tooltip--bottom { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; }
|
|
319
|
+
.stx-tooltip--left { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px; }
|
|
320
|
+
.stx-tooltip--right { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; }
|
|
321
|
+
|
|
322
|
+
/* Scroll View */
|
|
323
|
+
.stx-scroll-view { overflow: auto; }
|
|
324
|
+
.stx-scroll-view--vertical { overflow-x: hidden; overflow-y: auto; }
|
|
325
|
+
.stx-scroll-view--horizontal { overflow-x: auto; overflow-y: hidden; }
|
|
326
|
+
.stx-scroll-view--hide-scrollbar::-webkit-scrollbar { display: none; }
|
|
327
|
+
.stx-scroll-view--hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
328
|
+
.stx-scroll-view--smooth { scroll-behavior: smooth; }
|
|
329
|
+
|
|
330
|
+
/* Split View */
|
|
331
|
+
.stx-split-view { display: flex; }
|
|
332
|
+
.stx-split-view--horizontal { flex-direction: row; }
|
|
333
|
+
.stx-split-view--vertical { flex-direction: column; }
|
|
334
|
+
.stx-split-pane { overflow: auto; }
|
|
335
|
+
.stx-split-divider { background: #e0e0e0; flex-shrink: 0; }
|
|
336
|
+
.stx-split-view--horizontal .stx-split-divider { width: 4px; cursor: col-resize; }
|
|
337
|
+
.stx-split-view--vertical .stx-split-divider { height: 4px; cursor: row-resize; }
|
|
338
|
+
.stx-split-divider:hover { background: #3498db; }
|
|
339
|
+
|
|
340
|
+
/* Accordion */
|
|
341
|
+
.stx-accordion { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
|
|
342
|
+
.stx-accordion-item { border-bottom: 1px solid #e0e0e0; }
|
|
343
|
+
.stx-accordion-item:last-child { border-bottom: none; }
|
|
344
|
+
.stx-accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: none; border: none; cursor: pointer; font-size: 14px; }
|
|
345
|
+
.stx-accordion-header:hover { background: #f5f5f5; }
|
|
346
|
+
.stx-accordion-icon { transition: transform 0.2s; }
|
|
347
|
+
.stx-accordion-item--open .stx-accordion-icon { transform: rotate(180deg); }
|
|
348
|
+
.stx-accordion-content { padding: 0 16px 16px; }
|
|
349
|
+
.stx-accordion-item--disabled { opacity: 0.5; }
|
|
350
|
+
.stx-accordion-item--disabled .stx-accordion-header { cursor: not-allowed; }
|
|
351
|
+
|
|
352
|
+
/* Stepper */
|
|
353
|
+
.stx-stepper { display: flex; }
|
|
354
|
+
.stx-stepper--horizontal { flex-direction: row; align-items: flex-start; }
|
|
355
|
+
.stx-stepper--vertical { flex-direction: column; }
|
|
356
|
+
.stx-step { display: flex; align-items: center; }
|
|
357
|
+
.stx-stepper--vertical .stx-step { flex-direction: row; }
|
|
358
|
+
.stx-step-indicator { width: 32px; height: 32px; border-radius: 50%; background: #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; flex-shrink: 0; }
|
|
359
|
+
.stx-step--completed .stx-step-indicator { background: #27ae60; color: #fff; }
|
|
360
|
+
.stx-step--active .stx-step-indicator { background: #3498db; color: #fff; }
|
|
361
|
+
.stx-step-content { margin-left: 12px; }
|
|
362
|
+
.stx-step-label { font-size: 14px; font-weight: 500; }
|
|
363
|
+
.stx-step-description { font-size: 12px; color: #666; }
|
|
364
|
+
.stx-step-connector { flex: 1; height: 2px; background: #e0e0e0; margin: 0 8px; min-width: 20px; }
|
|
365
|
+
.stx-stepper--vertical .stx-step-connector { width: 2px; height: 20px; margin: 8px 0 8px 15px; }
|
|
366
|
+
|
|
367
|
+
/* Modal Component */
|
|
368
|
+
.stx-modal-component--hidden { display: none; }
|
|
369
|
+
.stx-modal-component-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; }
|
|
370
|
+
.stx-modal-component-dialog { background: #fff; border-radius: 12px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
|
|
371
|
+
.stx-modal-component--small .stx-modal-component-dialog { width: 300px; }
|
|
372
|
+
.stx-modal-component--medium .stx-modal-component-dialog { width: 500px; }
|
|
373
|
+
.stx-modal-component--large .stx-modal-component-dialog { width: 800px; }
|
|
374
|
+
.stx-modal-component--fullscreen .stx-modal-component-dialog { width: 100%; height: 100%; border-radius: 0; }
|
|
375
|
+
.stx-modal-component-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #e0e0e0; }
|
|
376
|
+
.stx-modal-component-title { margin: 0; font-size: 18px; }
|
|
377
|
+
.stx-modal-component-close { background: none; border: none; font-size: 24px; cursor: pointer; opacity: 0.6; }
|
|
378
|
+
.stx-modal-component-close:hover { opacity: 1; }
|
|
379
|
+
.stx-modal-component-body { padding: 16px; overflow-y: auto; flex: 1; }
|
|
380
|
+
.stx-modal-component-footer { padding: 16px; border-top: 1px solid #e0e0e0; display: flex; justify-content: flex-end; gap: 8px; }
|
|
381
|
+
|
|
382
|
+
/* List View */
|
|
383
|
+
.stx-list-view { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
|
|
384
|
+
.stx-list-view-items { list-style: none; margin: 0; padding: 0; }
|
|
385
|
+
.stx-list-view-item { padding: 12px 16px; border-bottom: 1px solid #e0e0e0; }
|
|
386
|
+
.stx-list-view-item:last-child { border-bottom: none; }
|
|
387
|
+
.stx-list-view--selectable .stx-list-view-item { cursor: pointer; }
|
|
388
|
+
.stx-list-view--selectable .stx-list-view-item:hover { background: #f5f5f5; }
|
|
389
|
+
.stx-list-view-item--selected { background: #e8f4fc; }
|
|
390
|
+
.stx-list-view-empty { padding: 24px; text-align: center; color: #666; }
|
|
391
|
+
|
|
392
|
+
/* Table */
|
|
393
|
+
.stx-table { overflow-x: auto; }
|
|
394
|
+
.stx-table table { width: 100%; border-collapse: collapse; }
|
|
395
|
+
.stx-table th, .stx-table td { padding: 12px; text-align: left; }
|
|
396
|
+
.stx-table th { font-weight: 600; background: #f5f5f5; }
|
|
397
|
+
.stx-table--bordered th, .stx-table--bordered td { border: 1px solid #e0e0e0; }
|
|
398
|
+
.stx-table--striped tbody tr:nth-child(even) { background: #f9f9f9; }
|
|
399
|
+
.stx-table--hoverable tbody tr:hover { background: #f5f5f5; }
|
|
400
|
+
.stx-table th[data-sortable] { cursor: pointer; }
|
|
401
|
+
.stx-table-sort-icon::after { content: '⇅'; margin-left: 4px; opacity: 0.3; }
|
|
402
|
+
.stx-table-sorted .stx-table-sort-icon::after { opacity: 1; }
|
|
403
|
+
.stx-table-sorted--asc .stx-table-sort-icon::after { content: '↑'; }
|
|
404
|
+
.stx-table-sorted--desc .stx-table-sort-icon::after { content: '↓'; }
|
|
405
|
+
|
|
406
|
+
/* Tree View */
|
|
407
|
+
.stx-tree-view { font-size: 14px; }
|
|
408
|
+
.stx-tree-node { padding-left: 20px; }
|
|
409
|
+
.stx-tree-node-content { display: flex; align-items: center; gap: 4px; padding: 4px; cursor: pointer; border-radius: 4px; }
|
|
410
|
+
.stx-tree-node-content:hover { background: #f5f5f5; }
|
|
411
|
+
.stx-tree-node--selected > .stx-tree-node-content { background: #e8f4fc; }
|
|
412
|
+
.stx-tree-node--disabled { opacity: 0.5; }
|
|
413
|
+
.stx-tree-toggle { width: 16px; cursor: pointer; transition: transform 0.2s; }
|
|
414
|
+
.stx-tree-toggle--expanded { transform: rotate(90deg); }
|
|
415
|
+
.stx-tree-toggle-placeholder { width: 16px; }
|
|
416
|
+
.stx-tree-children { padding-left: 8px; }
|
|
417
|
+
|
|
418
|
+
/* Data Grid */
|
|
419
|
+
.stx-data-grid { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
|
|
420
|
+
.stx-data-grid-table-wrapper { overflow-x: auto; }
|
|
421
|
+
.stx-data-grid-table { width: 100%; border-collapse: collapse; }
|
|
422
|
+
.stx-data-grid-table th, .stx-data-grid-table td { padding: 12px; text-align: left; border-bottom: 1px solid #e0e0e0; }
|
|
423
|
+
.stx-data-grid-table th { background: #f5f5f5; }
|
|
424
|
+
.stx-data-grid-header-cell { display: flex; align-items: center; gap: 8px; }
|
|
425
|
+
.stx-data-grid-sort, .stx-data-grid-filter { background: none; border: none; cursor: pointer; opacity: 0.5; }
|
|
426
|
+
.stx-data-grid-sort:hover, .stx-data-grid-filter:hover { opacity: 1; }
|
|
427
|
+
.stx-data-grid-pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid #e0e0e0; }
|
|
428
|
+
.stx-data-grid-page-buttons { display: flex; gap: 4px; }
|
|
429
|
+
.stx-data-grid-page-btn { padding: 4px 8px; border: 1px solid #e0e0e0; background: #fff; cursor: pointer; border-radius: 4px; }
|
|
430
|
+
.stx-data-grid-page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
431
|
+
|
|
432
|
+
/* Chart */
|
|
433
|
+
.stx-chart { background: #f9f9f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
|
434
|
+
.stx-chart-placeholder { text-align: center; padding: 20px; }
|
|
435
|
+
.stx-chart-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
|
|
436
|
+
.stx-chart-type { font-size: 14px; color: #666; }
|
|
437
|
+
.stx-chart-info { font-size: 12px; color: #999; margin-top: 4px; }
|
|
438
|
+
|
|
439
|
+
/* Code Editor */
|
|
440
|
+
.stx-code-editor { display: flex; font-family: 'Monaco', 'Menlo', monospace; font-size: 13px; line-height: 1.5; overflow: hidden; border-radius: 8px; }
|
|
441
|
+
.stx-code-editor--dark { background: #1e1e1e; color: #d4d4d4; }
|
|
442
|
+
.stx-code-editor--light { background: #fff; color: #333; border: 1px solid #e0e0e0; }
|
|
443
|
+
.stx-code-editor-gutter { padding: 12px 8px; background: rgba(0,0,0,0.1); text-align: right; user-select: none; }
|
|
444
|
+
.stx-code-editor-line-number { color: #858585; }
|
|
445
|
+
.stx-code-editor-content { flex: 1; padding: 12px; overflow: auto; }
|
|
446
|
+
.stx-code-editor-content pre { margin: 0; }
|
|
447
|
+
.stx-code-editor--wrap .stx-code-editor-content { white-space: pre-wrap; word-wrap: break-word; }
|
|
448
|
+
|
|
449
|
+
/* Media Player */
|
|
450
|
+
.stx-media-player video, .stx-media-player audio { width: 100%; display: block; }
|
|
451
|
+
.stx-media-player--video { background: #000; }
|
|
452
|
+
|
|
453
|
+
/* File Explorer */
|
|
454
|
+
.stx-file-explorer { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
|
|
455
|
+
.stx-file-explorer-list { width: 100%; border-collapse: collapse; }
|
|
456
|
+
.stx-file-explorer-list th { text-align: left; padding: 8px 12px; background: #f5f5f5; font-weight: 500; }
|
|
457
|
+
.stx-file-explorer-list td { padding: 8px 12px; border-top: 1px solid #e0e0e0; }
|
|
458
|
+
.stx-file-explorer-item--selectable { cursor: pointer; }
|
|
459
|
+
.stx-file-explorer-item--selectable:hover { background: #f5f5f5; }
|
|
460
|
+
.stx-file-explorer-icon { margin-right: 8px; }
|
|
461
|
+
.stx-file-explorer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 16px; padding: 16px; }
|
|
462
|
+
.stx-file-explorer--grid .stx-file-explorer-item { text-align: center; padding: 12px; border-radius: 8px; }
|
|
463
|
+
.stx-file-explorer--grid .stx-file-explorer-icon { font-size: 32px; display: block; margin-bottom: 8px; }
|
|
464
|
+
.stx-file-explorer--grid .stx-file-explorer-name { font-size: 12px; word-break: break-all; }
|
|
465
|
+
|
|
466
|
+
/* WebView */
|
|
467
|
+
.stx-webview { border: none; display: block; }
|
|
468
|
+
|
|
469
|
+
/* Dark mode support */
|
|
470
|
+
@media (prefers-color-scheme: dark) {
|
|
471
|
+
.stx-input-label { color: #eee; }
|
|
472
|
+
.stx-input { background: #333; border-color: #555; color: #fff; }
|
|
473
|
+
.stx-card { background: #2d2d2d; color: #fff; }
|
|
474
|
+
.stx-card-subtitle { color: #aaa; }
|
|
475
|
+
.stx-progress { background: #444; }
|
|
476
|
+
.stx-dropdown { background: #333; border-color: #555; color: #fff; }
|
|
477
|
+
.stx-accordion { border-color: #444; }
|
|
478
|
+
.stx-accordion-item { border-color: #444; }
|
|
479
|
+
.stx-accordion-header:hover { background: #333; }
|
|
480
|
+
.stx-list-view { border-color: #444; }
|
|
481
|
+
.stx-list-view-item { border-color: #444; }
|
|
482
|
+
.stx-list-view--selectable .stx-list-view-item:hover { background: #333; }
|
|
483
|
+
.stx-table th { background: #333; }
|
|
484
|
+
.stx-table--bordered th, .stx-table--bordered td { border-color: #444; }
|
|
485
|
+
.stx-tree-node-content:hover { background: #333; }
|
|
486
|
+
.stx-data-grid { border-color: #444; }
|
|
487
|
+
.stx-data-grid-table th, .stx-data-grid-table td { border-color: #444; }
|
|
488
|
+
.stx-data-grid-table th { background: #333; }
|
|
489
|
+
.stx-modal-component-dialog { background: #2d2d2d; color: #fff; }
|
|
490
|
+
.stx-modal-component-header, .stx-modal-component-footer { border-color: #444; }
|
|
491
|
+
.stx-file-explorer { border-color: #444; }
|
|
492
|
+
.stx-file-explorer-list th { background: #333; }
|
|
493
|
+
.stx-file-explorer-list td { border-color: #444; }
|
|
494
|
+
.stx-autocomplete-list { background: #333; border-color: #444; }
|
|
495
|
+
.stx-autocomplete-item:hover { background: #444; }
|
|
496
|
+
.stx-chip--default { background: #444; color: #eee; }
|
|
497
|
+
.stx-chip--primary { background: #1a3a52; }
|
|
498
|
+
.stx-chip--success { background: #1a3a2a; }
|
|
499
|
+
.stx-chip--warning { background: #3a2a1a; }
|
|
500
|
+
.stx-chip--error { background: #3a1a1a; }
|
|
501
|
+
}
|
|
502
|
+
`;
|
|
503
|
+
/**
|
|
504
|
+
* Native Components for Desktop Applications
|
|
505
|
+
*
|
|
506
|
+
* This module provides TypeScript wrappers for native UI components.
|
|
507
|
+
* Components work in both browser (web-based) and desktop (native) environments.
|
|
508
|
+
*
|
|
509
|
+
* Categories:
|
|
510
|
+
* - Input: Button, TextInput, Checkbox, RadioButton, Slider, ColorPicker, DatePicker, TimePicker, Autocomplete
|
|
511
|
+
* - Display: Label, ImageView, ProgressBar, Avatar, Badge, Chip, Card, Tooltip, Toast
|
|
512
|
+
* - Layout: ScrollView, SplitView, Accordion, Stepper, Modal, Tabs, Dropdown
|
|
513
|
+
* - Data: ListView, Table, TreeView, DataGrid, Chart
|
|
514
|
+
* - Advanced: Rating, CodeEditor, MediaPlayer, FileExplorer, WebView
|
|
515
|
+
*/
|
|
516
|
+
/**
|
|
517
|
+
* Button component properties
|
|
518
|
+
*/
|
|
519
|
+
export declare interface ButtonProps extends ComponentProps {
|
|
520
|
+
text: string
|
|
521
|
+
onClick?: () => void
|
|
522
|
+
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
|
|
523
|
+
size?: 'small' | 'medium' | 'large'
|
|
524
|
+
disabled?: boolean
|
|
525
|
+
loading?: boolean
|
|
526
|
+
icon?: string
|
|
527
|
+
iconPosition?: 'left' | 'right'
|
|
528
|
+
}
|
|
529
|
+
/**
|
|
530
|
+
* TextInput component properties
|
|
531
|
+
*/
|
|
532
|
+
export declare interface TextInputProps extends ComponentProps {
|
|
533
|
+
value?: string
|
|
534
|
+
placeholder?: string
|
|
535
|
+
onChange?: (value: string) => void
|
|
536
|
+
onSubmit?: (value: string) => void
|
|
537
|
+
type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'url' | 'tel'
|
|
538
|
+
disabled?: boolean
|
|
539
|
+
readonly?: boolean
|
|
540
|
+
maxLength?: number
|
|
541
|
+
minLength?: number
|
|
542
|
+
pattern?: string
|
|
543
|
+
required?: boolean
|
|
544
|
+
autocomplete?: string
|
|
545
|
+
label?: string
|
|
546
|
+
error?: string
|
|
547
|
+
hint?: string
|
|
548
|
+
}
|
|
549
|
+
/**
|
|
550
|
+
* Checkbox component properties
|
|
551
|
+
*/
|
|
552
|
+
export declare interface CheckboxProps extends ComponentProps {
|
|
553
|
+
checked?: boolean
|
|
554
|
+
onChange?: (checked: boolean) => void
|
|
555
|
+
label?: string
|
|
556
|
+
disabled?: boolean
|
|
557
|
+
indeterminate?: boolean
|
|
558
|
+
}
|
|
559
|
+
/**
|
|
560
|
+
* RadioButton component properties
|
|
561
|
+
*/
|
|
562
|
+
export declare interface RadioButtonProps extends ComponentProps {
|
|
563
|
+
value: string
|
|
564
|
+
name: string
|
|
565
|
+
checked?: boolean
|
|
566
|
+
onChange?: (value: string) => void
|
|
567
|
+
label?: string
|
|
568
|
+
disabled?: boolean
|
|
569
|
+
}
|
|
570
|
+
/**
|
|
571
|
+
* Slider component properties
|
|
572
|
+
*/
|
|
573
|
+
export declare interface SliderProps extends ComponentProps {
|
|
574
|
+
value?: number
|
|
575
|
+
min?: number
|
|
576
|
+
max?: number
|
|
577
|
+
step?: number
|
|
578
|
+
onChange?: (value: number) => void
|
|
579
|
+
disabled?: boolean
|
|
580
|
+
label?: string
|
|
581
|
+
showValue?: boolean
|
|
582
|
+
}
|
|
583
|
+
/**
|
|
584
|
+
* ProgressBar component properties
|
|
585
|
+
*/
|
|
586
|
+
export declare interface ProgressBarProps extends ComponentProps {
|
|
587
|
+
value: number
|
|
588
|
+
max?: number
|
|
589
|
+
variant?: 'default' | 'success' | 'warning' | 'error'
|
|
590
|
+
size?: 'small' | 'medium' | 'large'
|
|
591
|
+
showLabel?: boolean
|
|
592
|
+
indeterminate?: boolean
|
|
593
|
+
}
|
|
594
|
+
/**
|
|
595
|
+
* Card component properties
|
|
596
|
+
*/
|
|
597
|
+
export declare interface CardProps extends ComponentProps {
|
|
598
|
+
title?: string
|
|
599
|
+
subtitle?: string
|
|
600
|
+
content?: string
|
|
601
|
+
image?: string
|
|
602
|
+
footer?: string
|
|
603
|
+
onClick?: () => void
|
|
604
|
+
variant?: 'default' | 'outlined' | 'elevated'
|
|
605
|
+
}
|
|
606
|
+
/**
|
|
607
|
+
* Badge component properties
|
|
608
|
+
*/
|
|
609
|
+
export declare interface BadgeProps extends ComponentProps {
|
|
610
|
+
text: string
|
|
611
|
+
variant?: 'default' | 'primary' | 'success' | 'warning' | 'error'
|
|
612
|
+
size?: 'small' | 'medium' | 'large'
|
|
613
|
+
}
|
|
614
|
+
/**
|
|
615
|
+
* Avatar component properties
|
|
616
|
+
*/
|
|
617
|
+
export declare interface AvatarProps extends ComponentProps {
|
|
618
|
+
src?: string
|
|
619
|
+
alt?: string
|
|
620
|
+
name?: string
|
|
621
|
+
size?: 'small' | 'medium' | 'large' | number
|
|
622
|
+
shape?: 'circle' | 'square' | 'rounded'
|
|
623
|
+
}
|
|
624
|
+
/**
|
|
625
|
+
* Tabs component properties
|
|
626
|
+
*/
|
|
627
|
+
export declare interface TabsProps extends ComponentProps {
|
|
628
|
+
tabs: Array<{ label: string, value: string, disabled?: boolean }>
|
|
629
|
+
activeTab?: string
|
|
630
|
+
onChange?: (value: string) => void
|
|
631
|
+
variant?: 'default' | 'pills' | 'underline'
|
|
632
|
+
}
|
|
633
|
+
/**
|
|
634
|
+
* Dropdown component properties
|
|
635
|
+
*/
|
|
636
|
+
export declare interface DropdownProps extends ComponentProps {
|
|
637
|
+
options: Array<{ label: string, value: string, disabled?: boolean }>
|
|
638
|
+
value?: string
|
|
639
|
+
placeholder?: string
|
|
640
|
+
onChange?: (value: string) => void
|
|
641
|
+
disabled?: boolean
|
|
642
|
+
searchable?: boolean
|
|
643
|
+
multiple?: boolean
|
|
644
|
+
}
|
|
645
|
+
/**
|
|
646
|
+
* Rating component properties
|
|
647
|
+
*/
|
|
648
|
+
export declare interface RatingProps extends ComponentProps {
|
|
649
|
+
value?: number
|
|
650
|
+
max?: number
|
|
651
|
+
onChange?: (value: number) => void
|
|
652
|
+
readonly?: boolean
|
|
653
|
+
size?: 'small' | 'medium' | 'large'
|
|
654
|
+
allowHalf?: boolean
|
|
655
|
+
}
|
|
656
|
+
/**
|
|
657
|
+
* ColorPicker component properties
|
|
658
|
+
*/
|
|
659
|
+
export declare interface ColorPickerProps extends ComponentProps {
|
|
660
|
+
value?: string
|
|
661
|
+
onChange?: (color: string) => void
|
|
662
|
+
disabled?: boolean
|
|
663
|
+
label?: string
|
|
664
|
+
format?: 'hex' | 'rgb' | 'hsl'
|
|
665
|
+
showAlpha?: boolean
|
|
666
|
+
presetColors?: string[]
|
|
667
|
+
}
|
|
668
|
+
/**
|
|
669
|
+
* DatePicker component properties
|
|
670
|
+
*/
|
|
671
|
+
export declare interface DatePickerProps extends ComponentProps {
|
|
672
|
+
value?: string | Date
|
|
673
|
+
onChange?: (date: Date | null) => void
|
|
674
|
+
min?: string | Date
|
|
675
|
+
max?: string | Date
|
|
676
|
+
disabled?: boolean
|
|
677
|
+
label?: string
|
|
678
|
+
placeholder?: string
|
|
679
|
+
format?: string
|
|
680
|
+
showClear?: boolean
|
|
681
|
+
}
|
|
682
|
+
/**
|
|
683
|
+
* TimePicker component properties
|
|
684
|
+
*/
|
|
685
|
+
export declare interface TimePickerProps extends ComponentProps {
|
|
686
|
+
value?: string
|
|
687
|
+
onChange?: (time: string) => void
|
|
688
|
+
disabled?: boolean
|
|
689
|
+
label?: string
|
|
690
|
+
format?: '12h' | '24h'
|
|
691
|
+
step?: number
|
|
692
|
+
min?: string
|
|
693
|
+
max?: string
|
|
694
|
+
}
|
|
695
|
+
/**
|
|
696
|
+
* Autocomplete component properties
|
|
697
|
+
*/
|
|
698
|
+
export declare interface AutocompleteProps extends ComponentProps {
|
|
699
|
+
options: Array<{ label: string, value: string }>
|
|
700
|
+
value?: string
|
|
701
|
+
placeholder?: string
|
|
702
|
+
onChange?: (value: string) => void
|
|
703
|
+
onSearch?: (query: string) => void
|
|
704
|
+
disabled?: boolean
|
|
705
|
+
label?: string
|
|
706
|
+
loading?: boolean
|
|
707
|
+
minChars?: number
|
|
708
|
+
maxResults?: number
|
|
709
|
+
}
|
|
710
|
+
/**
|
|
711
|
+
* Label component properties
|
|
712
|
+
*/
|
|
713
|
+
export declare interface LabelProps extends ComponentProps {
|
|
714
|
+
text: string
|
|
715
|
+
htmlFor?: string
|
|
716
|
+
required?: boolean
|
|
717
|
+
size?: 'small' | 'medium' | 'large'
|
|
718
|
+
}
|
|
719
|
+
/**
|
|
720
|
+
* ImageView component properties
|
|
721
|
+
*/
|
|
722
|
+
export declare interface ImageViewProps extends ComponentProps {
|
|
723
|
+
src: string
|
|
724
|
+
alt?: string
|
|
725
|
+
width?: number | string
|
|
726
|
+
height?: number | string
|
|
727
|
+
objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
|
|
728
|
+
fallback?: string
|
|
729
|
+
loading?: 'eager' | 'lazy'
|
|
730
|
+
onClick?: () => void
|
|
731
|
+
}
|
|
732
|
+
/**
|
|
733
|
+
* Chip component properties
|
|
734
|
+
*/
|
|
735
|
+
export declare interface ChipProps extends ComponentProps {
|
|
736
|
+
text: string
|
|
737
|
+
variant?: 'default' | 'primary' | 'success' | 'warning' | 'error'
|
|
738
|
+
size?: 'small' | 'medium' | 'large'
|
|
739
|
+
removable?: boolean
|
|
740
|
+
onRemove?: () => void
|
|
741
|
+
icon?: string
|
|
742
|
+
onClick?: () => void
|
|
743
|
+
}
|
|
744
|
+
/**
|
|
745
|
+
* Tooltip component properties
|
|
746
|
+
*/
|
|
747
|
+
export declare interface TooltipProps extends ComponentProps {
|
|
748
|
+
text: string
|
|
749
|
+
position?: 'top' | 'right' | 'bottom' | 'left'
|
|
750
|
+
trigger?: 'hover' | 'click' | 'focus'
|
|
751
|
+
delay?: number
|
|
752
|
+
children: string
|
|
753
|
+
}
|
|
754
|
+
/**
|
|
755
|
+
* ScrollView component properties
|
|
756
|
+
*/
|
|
757
|
+
export declare interface ScrollViewProps extends ComponentProps {
|
|
758
|
+
direction?: 'vertical' | 'horizontal' | 'both'
|
|
759
|
+
showScrollbar?: boolean
|
|
760
|
+
smooth?: boolean
|
|
761
|
+
height?: string | number
|
|
762
|
+
width?: string | number
|
|
763
|
+
children: string
|
|
764
|
+
}
|
|
765
|
+
/**
|
|
766
|
+
* SplitView component properties
|
|
767
|
+
*/
|
|
768
|
+
export declare interface SplitViewProps extends ComponentProps {
|
|
769
|
+
direction?: 'horizontal' | 'vertical'
|
|
770
|
+
sizes?: [number, number]
|
|
771
|
+
minSizes?: [number, number]
|
|
772
|
+
resizable?: boolean
|
|
773
|
+
children: [string, string]
|
|
774
|
+
}
|
|
775
|
+
/**
|
|
776
|
+
* Accordion component properties
|
|
777
|
+
*/
|
|
778
|
+
export declare interface AccordionProps extends ComponentProps {
|
|
779
|
+
items: Array<{ title: string, content: string, disabled?: boolean }>
|
|
780
|
+
multiple?: boolean
|
|
781
|
+
defaultOpen?: number[]
|
|
782
|
+
}
|
|
783
|
+
/**
|
|
784
|
+
* Stepper component properties
|
|
785
|
+
*/
|
|
786
|
+
export declare interface StepperProps extends ComponentProps {
|
|
787
|
+
steps: Array<{ label: string, description?: string }>
|
|
788
|
+
currentStep: number
|
|
789
|
+
orientation?: 'horizontal' | 'vertical'
|
|
790
|
+
onStepClick?: (step: number) => void
|
|
791
|
+
}
|
|
792
|
+
/**
|
|
793
|
+
* ModalComponent properties (different from modals.ts dialog)
|
|
794
|
+
*/
|
|
795
|
+
export declare interface ModalComponentProps extends ComponentProps {
|
|
796
|
+
open?: boolean
|
|
797
|
+
title?: string
|
|
798
|
+
size?: 'small' | 'medium' | 'large' | 'fullscreen'
|
|
799
|
+
closable?: boolean
|
|
800
|
+
onClose?: () => void
|
|
801
|
+
children: string
|
|
802
|
+
footer?: string
|
|
803
|
+
}
|
|
804
|
+
/**
|
|
805
|
+
* ListView component properties
|
|
806
|
+
*/
|
|
807
|
+
export declare interface ListViewProps extends ComponentProps {
|
|
808
|
+
items: Array<{ id: string, content: string, selected?: boolean }>
|
|
809
|
+
selectable?: boolean
|
|
810
|
+
multiSelect?: boolean
|
|
811
|
+
onSelect?: (ids: string[]) => void
|
|
812
|
+
emptyMessage?: string
|
|
813
|
+
}
|
|
814
|
+
/**
|
|
815
|
+
* Table component properties
|
|
816
|
+
*/
|
|
817
|
+
export declare interface TableProps extends ComponentProps {
|
|
818
|
+
columns: Array<{ key: string, label: string, width?: string, sortable?: boolean }>
|
|
819
|
+
data: Array<Record<string, unknown>>
|
|
820
|
+
striped?: boolean
|
|
821
|
+
bordered?: boolean
|
|
822
|
+
hoverable?: boolean
|
|
823
|
+
sortBy?: string
|
|
824
|
+
sortOrder?: 'asc' | 'desc'
|
|
825
|
+
onSort?: (column: string) => void
|
|
826
|
+
}
|
|
827
|
+
/**
|
|
828
|
+
* TreeView component properties
|
|
829
|
+
*/
|
|
830
|
+
export declare interface TreeViewProps extends ComponentProps {
|
|
831
|
+
nodes: TreeNode[]
|
|
832
|
+
expandedKeys?: string[]
|
|
833
|
+
selectedKeys?: string[]
|
|
834
|
+
checkable?: boolean
|
|
835
|
+
onExpand?: (keys: string[]) => void
|
|
836
|
+
onSelect?: (keys: string[]) => void
|
|
837
|
+
}
|
|
838
|
+
export declare interface TreeNode {
|
|
839
|
+
key: string
|
|
840
|
+
label: string
|
|
841
|
+
children?: TreeNode[]
|
|
842
|
+
icon?: string
|
|
843
|
+
disabled?: boolean
|
|
844
|
+
}
|
|
845
|
+
/**
|
|
846
|
+
* DataGrid component properties
|
|
847
|
+
*/
|
|
848
|
+
export declare interface DataGridProps extends ComponentProps {
|
|
849
|
+
columns: Array<{ key: string, label: string, width?: string, sortable?: boolean, filterable?: boolean }>
|
|
850
|
+
data: Array<Record<string, unknown>>
|
|
851
|
+
pagination?: { page: number, pageSize: number, total: number }
|
|
852
|
+
selectable?: boolean
|
|
853
|
+
onPageChange?: (page: number) => void
|
|
854
|
+
onSort?: (column: string, order: 'asc' | 'desc') => void
|
|
855
|
+
}
|
|
856
|
+
/**
|
|
857
|
+
* Chart component properties
|
|
858
|
+
*/
|
|
859
|
+
export declare interface ChartProps extends ComponentProps {
|
|
860
|
+
type: 'line' | 'bar' | 'pie' | 'doughnut' | 'area'
|
|
861
|
+
data: ChartData
|
|
862
|
+
options?: ChartOptions
|
|
863
|
+
width?: number | string
|
|
864
|
+
height?: number | string
|
|
865
|
+
}
|
|
866
|
+
export declare interface ChartData {
|
|
867
|
+
labels: string[]
|
|
868
|
+
datasets: Array<{
|
|
869
|
+
label: string
|
|
870
|
+
data: number[]
|
|
871
|
+
backgroundColor?: string | string[]
|
|
872
|
+
borderColor?: string
|
|
873
|
+
}>
|
|
874
|
+
}
|
|
875
|
+
export declare interface ChartOptions {
|
|
876
|
+
title?: string
|
|
877
|
+
legend?: boolean
|
|
878
|
+
animation?: boolean
|
|
879
|
+
}
|
|
880
|
+
/**
|
|
881
|
+
* CodeEditor component properties
|
|
882
|
+
*/
|
|
883
|
+
export declare interface CodeEditorProps extends ComponentProps {
|
|
884
|
+
value?: string
|
|
885
|
+
language?: string
|
|
886
|
+
theme?: 'light' | 'dark'
|
|
887
|
+
lineNumbers?: boolean
|
|
888
|
+
readOnly?: boolean
|
|
889
|
+
onChange?: (value: string) => void
|
|
890
|
+
height?: string | number
|
|
891
|
+
tabSize?: number
|
|
892
|
+
wordWrap?: boolean
|
|
893
|
+
}
|
|
894
|
+
/**
|
|
895
|
+
* MediaPlayer component properties
|
|
896
|
+
*/
|
|
897
|
+
export declare interface MediaPlayerProps extends ComponentProps {
|
|
898
|
+
src: string
|
|
899
|
+
type?: 'video' | 'audio'
|
|
900
|
+
poster?: string
|
|
901
|
+
autoplay?: boolean
|
|
902
|
+
loop?: boolean
|
|
903
|
+
muted?: boolean
|
|
904
|
+
controls?: boolean
|
|
905
|
+
width?: string | number
|
|
906
|
+
height?: string | number
|
|
907
|
+
onPlay?: () => void
|
|
908
|
+
onPause?: () => void
|
|
909
|
+
onEnded?: () => void
|
|
910
|
+
}
|
|
911
|
+
/**
|
|
912
|
+
* FileExplorer component properties
|
|
913
|
+
*/
|
|
914
|
+
export declare interface FileExplorerProps extends ComponentProps {
|
|
915
|
+
files: FileNode[]
|
|
916
|
+
viewMode?: 'list' | 'grid'
|
|
917
|
+
showHidden?: boolean
|
|
918
|
+
selectable?: boolean
|
|
919
|
+
onSelect?: (path: string) => void
|
|
920
|
+
onOpen?: (path: string) => void
|
|
921
|
+
}
|
|
922
|
+
export declare interface FileNode {
|
|
923
|
+
name: string
|
|
924
|
+
path: string
|
|
925
|
+
type: 'file' | 'folder'
|
|
926
|
+
size?: number
|
|
927
|
+
modified?: Date
|
|
928
|
+
icon?: string
|
|
929
|
+
}
|
|
930
|
+
/**
|
|
931
|
+
* WebView component properties
|
|
932
|
+
*/
|
|
933
|
+
export declare interface WebViewProps extends ComponentProps {
|
|
934
|
+
url: string
|
|
935
|
+
width?: string | number
|
|
936
|
+
height?: string | number
|
|
937
|
+
sandbox?: boolean
|
|
938
|
+
allowScripts?: boolean
|
|
939
|
+
onLoad?: () => void
|
|
940
|
+
onError?: (error: Error) => void
|
|
941
|
+
}
|
|
942
|
+
export type ComponentName = typeof AVAILABLE_COMPONENTS[number]
|