@keenmate/pure-admin-core 1.0.0-rc02 → 1.0.0-rc04
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 +14 -26
- package/dist/css/main.css +1143 -202
- package/package.json +1 -1
- package/snippets/badges.html +7 -6
- package/snippets/buttons.html +15 -13
- package/snippets/callouts.html +129 -0
- package/snippets/profile.html +115 -6
- package/snippets/tabs.html +47 -17
- package/snippets/tooltips.html +1 -1
- package/src/scss/_base-css-variables.scss +14 -0
- package/src/scss/_core.scss +3 -0
- package/src/scss/core-components/_buttons.scss +0 -54
- package/src/scss/core-components/_callouts.scss +139 -0
- package/src/scss/core-components/_profile.scss +39 -13
- package/src/scss/core-components/_tables.scss +0 -13
- package/src/scss/core-components/_tabs.scss +16 -83
- package/src/scss/core-components/_utilities.scss +53 -0
- package/src/scss/core-components/badges/_badge-base.scss +0 -21
- package/src/scss/utilities.scss +260 -84
- package/src/scss/variables/_colors.scss +15 -0
- package/src/scss/variables/_components.scss +19 -15
package/README.md
CHANGED
|
@@ -45,18 +45,6 @@ $btn-primary-bg: #your-button-color;
|
|
|
45
45
|
@import '@keenmate/pure-admin-core/src/scss/main';
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
-
### JavaScript Utilities
|
|
49
|
-
|
|
50
|
-
```js
|
|
51
|
-
import { createToast, openModal, closeModal } from '@pure-admin/core';
|
|
52
|
-
|
|
53
|
-
// Show a success toast
|
|
54
|
-
createToast('top-right', 'success', 'Success!', 'Operation completed');
|
|
55
|
-
|
|
56
|
-
// Open a modal
|
|
57
|
-
openModal('myModal');
|
|
58
|
-
```
|
|
59
|
-
|
|
60
48
|
## Using HTML Snippets
|
|
61
49
|
|
|
62
50
|
The `snippets/` directory contains clean HTML patterns for all components:
|
|
@@ -64,11 +52,13 @@ The `snippets/` directory contains clean HTML patterns for all components:
|
|
|
64
52
|
- `alerts.html` - Alert components
|
|
65
53
|
- `badges.html` - Badge and composite badge patterns
|
|
66
54
|
- `buttons.html` - All button variants and patterns
|
|
55
|
+
- `callouts.html` - Documentation-style callouts with left border accent
|
|
67
56
|
- `cards.html` - Card layouts
|
|
68
57
|
- `checkbox-lists.html` - Checkbox list patterns
|
|
69
58
|
- `code.html` - Code display blocks
|
|
70
59
|
- `command-palette.html` - Command palette (Ctrl+K)
|
|
71
60
|
- `comparison.html` - Comparison tables
|
|
61
|
+
- `customization.html` - Theme customization examples
|
|
72
62
|
- `forms.html` - Form elements and validation
|
|
73
63
|
- `grid.html` - Grid system layouts
|
|
74
64
|
- `layout.html` - Page layout structure
|
|
@@ -83,25 +73,14 @@ The `snippets/` directory contains clean HTML patterns for all components:
|
|
|
83
73
|
- `timeline.html` - Timeline components
|
|
84
74
|
- `toasts.html` - Toast notifications
|
|
85
75
|
- `tooltips.html` - Tooltips and popovers
|
|
76
|
+
- `typography.html` - Typography styles and headings
|
|
86
77
|
- `utilities.html` - Utility classes
|
|
87
78
|
- `virtual-scroll.html` - Virtual scrolling
|
|
79
|
+
- `web-daterangepicker.html` - Date range picker web component
|
|
80
|
+
- `web-multiselect.html` - Multiselect web component
|
|
88
81
|
|
|
89
82
|
These snippets are the canonical reference for building framework components in any frontend framework (React, Vue, Svelte, etc.).
|
|
90
83
|
|
|
91
|
-
## Framework Integration
|
|
92
|
-
|
|
93
|
-
### Svelte
|
|
94
|
-
|
|
95
|
-
See `@pure-admin/svelte` package for Svelte component wrappers.
|
|
96
|
-
|
|
97
|
-
### React
|
|
98
|
-
|
|
99
|
-
See `@pure-admin/react` package for React component wrappers.
|
|
100
|
-
|
|
101
|
-
### Vue
|
|
102
|
-
|
|
103
|
-
See `@pure-admin/vue` package for Vue component wrappers.
|
|
104
|
-
|
|
105
84
|
## Themes
|
|
106
85
|
|
|
107
86
|
Themes are available as separate npm packages:
|
|
@@ -165,6 +144,14 @@ The Dark theme supports color accent variants:
|
|
|
165
144
|
- `.pa-alert--primary/success/danger/warning/info` - Variants
|
|
166
145
|
- `.pa-alert--dismissible` - Closeable alerts
|
|
167
146
|
|
|
147
|
+
### Callouts
|
|
148
|
+
- `.pa-callout` - Base callout (documentation-style with left border)
|
|
149
|
+
- `.pa-callout--primary/secondary/success/danger/warning/info` - Variants
|
|
150
|
+
- `.pa-callout--sm/lg` - Sizes
|
|
151
|
+
- `.pa-callout__icon` - Icon container
|
|
152
|
+
- `.pa-callout__heading` - Callout heading
|
|
153
|
+
- `.pa-callout__content` - Content wrapper (for icon + text layout)
|
|
154
|
+
|
|
168
155
|
### Modals
|
|
169
156
|
- `.pa-modal` - Base modal
|
|
170
157
|
- `.pa-modal__container--sm/md/lg/xl/xxl` - Sizes
|
|
@@ -188,6 +175,7 @@ The Dark theme supports color accent variants:
|
|
|
188
175
|
- `.pa-profile-panel` - Slide-in profile panel
|
|
189
176
|
- `.pa-profile-panel--open` - Open state
|
|
190
177
|
- `.pa-profile-panel__header` - Header with avatar and user info
|
|
178
|
+
- `.pa-profile-panel__header--no-avatar` - Header variant without avatar (for corporate apps)
|
|
191
179
|
- `.pa-profile-panel__tabs` - Tab navigation (Profile/Favorites)
|
|
192
180
|
- `.pa-profile-panel__nav-item` - Navigation link
|
|
193
181
|
- `.pa-profile-panel__favorite-item` - Favorite link (with remove button)
|