@patimweb/crtstyleguide 1.0.24 → 1.0.25
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 +65 -31
- package/dist/lib/index.js +1461 -1366
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# CRT Style Guide
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
<img src="https://img.shields.io/badge/version-
|
|
4
|
+
<img src="https://img.shields.io/badge/version-1.0.25-33ff33?style=flat-square&labelColor=0a0a0a" alt="Version">
|
|
5
5
|
<img src="https://img.shields.io/badge/lit-3.1.0-33ff33?style=flat-square&labelColor=0a0a0a" alt="Lit">
|
|
6
6
|
<img src="https://img.shields.io/badge/typescript-5.3-33ff33?style=flat-square&labelColor=0a0a0a" alt="TypeScript">
|
|
7
7
|
<img src="https://img.shields.io/badge/license-Apache%202.0-33ff33?style=flat-square&labelColor=0a0a0a" alt="License">
|
|
@@ -74,7 +74,7 @@ npm install
|
|
|
74
74
|
npm run dev
|
|
75
75
|
```
|
|
76
76
|
|
|
77
|
-
Opens the Style Guide at: **http://localhost:
|
|
77
|
+
Opens the Style Guide at: **http://localhost:5175/styleguide/**
|
|
78
78
|
|
|
79
79
|
---
|
|
80
80
|
|
|
@@ -97,48 +97,82 @@ Opens the Style Guide at: **http://localhost:5173/styleguide/**
|
|
|
97
97
|
|
|
98
98
|
| Component | Tag | Description |
|
|
99
99
|
|------------|-----|-------------|
|
|
100
|
-
| Button | `<crt-button>` | Interactive button
|
|
100
|
+
| Button | `<crt-button>` | Interactive button |
|
|
101
101
|
| Badge | `<crt-badge>` | Status labels and tags |
|
|
102
|
-
|
|
|
102
|
+
| Heading | `<crt-heading>` | Typography headings |
|
|
103
|
+
| Text | `<crt-text>` | Body text |
|
|
104
|
+
| Tabs | `<crt-tabs>` | Tab navigation |
|
|
105
|
+
| Input | `<crt-input>` | Text fields |
|
|
106
|
+
| Textarea | `<crt-textarea>` | Multiline input |
|
|
107
|
+
| Icon | `<crt-icon>` | Icon rendering |
|
|
108
|
+
| Link | `<crt-link>` | Links |
|
|
109
|
+
| FileUpload | `<crt-file-upload>` | File upload |
|
|
110
|
+
| Calendar | `<crt-calendar>` | Date picker |
|
|
103
111
|
| Select | `<crt-select>` | Dropdown selection |
|
|
112
|
+
| Search | `<crt-search>` | Search input |
|
|
104
113
|
| Checkbox | `<crt-checkbox>` | Checkbox input |
|
|
105
|
-
| Radio | `<crt-radio>` | Radio
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
|
109
|
-
|
|
|
110
|
-
|
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
|
|
|
119
|
-
|
|
|
120
|
-
| FileUpload | `<crt-file-upload>` | Datei-Upload |
|
|
114
|
+
| Radio | `<crt-radio>` | Radio button |
|
|
115
|
+
| RadioGroup | `<crt-radio-group>` | Radio group |
|
|
116
|
+
| Progress | `<crt-progress>` | Progress bar |
|
|
117
|
+
| Tooltip | `<crt-tooltip>` | Hover hints |
|
|
118
|
+
| Breadcrumb | `<crt-breadcrumb>` | Breadcrumb navigation |
|
|
119
|
+
| Pagination | `<crt-pagination>` | Pagination |
|
|
120
|
+
| Slider | `<crt-slider>` | Range slider |
|
|
121
|
+
| Toggle | `<crt-toggle>` | On/Off switch |
|
|
122
|
+
| Avatar | `<crt-avatar>` | User avatar |
|
|
123
|
+
| AvatarGroup | `<crt-avatar-group>` | Grouped avatars |
|
|
124
|
+
| Skeleton | `<crt-skeleton>` | Loading placeholder |
|
|
125
|
+
| SkeletonText | `<crt-skeleton-text>` | Text placeholder |
|
|
126
|
+
| SkeletonCard | `<crt-skeleton-card>` | Card placeholder |
|
|
127
|
+
| Alert | `<crt-alert>` | Alert banners |
|
|
128
|
+
| Spinner | `<crt-spinner>` | Loading spinner |
|
|
121
129
|
|
|
122
130
|
### Molecules (Zusammengesetzt)
|
|
123
131
|
|
|
124
132
|
| Komponente | Tag | Beschreibung |
|
|
125
133
|
|------------|-----|-------------|
|
|
126
|
-
| Card | `<crt-card>` |
|
|
127
|
-
| Modal | `<crt-modal>` | Dialog
|
|
128
|
-
| Table | `<crt-table>` |
|
|
129
|
-
| Grid | `<crt-grid>` | Layout
|
|
130
|
-
| Accordion | `<crt-accordion>` |
|
|
131
|
-
|
|
|
132
|
-
|
|
|
133
|
-
|
|
|
134
|
-
|
|
|
135
|
-
|
|
|
134
|
+
| Card | `<crt-card>` | Content container |
|
|
135
|
+
| Modal | `<crt-modal>` | Dialog modal |
|
|
136
|
+
| Table | `<crt-table>` | Data tables |
|
|
137
|
+
| Grid | `<crt-grid>` | Layout grid |
|
|
138
|
+
| Accordion | `<crt-accordion>` | Collapsible sections |
|
|
139
|
+
| AccordionItem | `<crt-accordion-item>` | Accordion item |
|
|
140
|
+
| Toast | `<crt-toast>` | Notifications |
|
|
141
|
+
| CodeExample | `<crt-code-example>` | Code preview |
|
|
142
|
+
| MusicPlayer | `<crt-music-player>` | Audio player |
|
|
143
|
+
| Playlist | `<crt-playlist>` | Playlist view |
|
|
144
|
+
| Visualizer | `<crt-visualizer>` | Audio visualization |
|
|
145
|
+
| Terminal | `<crt-terminal>` | Terminal simulator |
|
|
146
|
+
| Navbar | `<crt-navbar>` | Navigation bar |
|
|
147
|
+
| Header | `<crt-header>` | Header |
|
|
148
|
+
| Footer | `<crt-footer>` | Footer |
|
|
149
|
+
| Menu | `<crt-menu>` | Context menu |
|
|
150
|
+
| CRTScreen | `<crt-screen>` | CRT screen container |
|
|
136
151
|
|
|
137
152
|
### Organisms (Komplex)
|
|
138
153
|
|
|
139
154
|
| Komponente | Tag | Beschreibung |
|
|
140
155
|
|------------|-----|-------------|
|
|
141
|
-
| MusicStation | `<crt-music-station>` |
|
|
156
|
+
| MusicStation | `<crt-music-station>` | Full music station |
|
|
157
|
+
|
|
158
|
+
---
|
|
159
|
+
|
|
160
|
+
## 🎵 Music Player Tracks (Lyrics)
|
|
161
|
+
|
|
162
|
+
Lyrics werden direkt im Track-Objekt übergeben:
|
|
163
|
+
|
|
164
|
+
```html
|
|
165
|
+
<crt-music-player
|
|
166
|
+
.tracks=${[
|
|
167
|
+
{
|
|
168
|
+
title: 'VERROSTETE TERMINALS',
|
|
169
|
+
artist: 'PATIMWEP',
|
|
170
|
+
url: 'patimwep - Verrostete Terminals.mp3',
|
|
171
|
+
lyrics: '[INTRO]\nSTATIC IN THE WIRES\nNEON HISS AND SOFT DESIRES\n\n[HOOK]\nVERROSTETE TERMINALS\nSIGNAL LOST, RETURNING CALLS',
|
|
172
|
+
},
|
|
173
|
+
]}
|
|
174
|
+
></crt-music-player>
|
|
175
|
+
```
|
|
142
176
|
|
|
143
177
|
---
|
|
144
178
|
|