@alebtz/redm-vue-ui 1.1.0 → 1.1.2

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.
Files changed (6) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +125 -122
  3. package/dist/redm-vue-ui.js +308 -269
  4. package/dist/redm-vue-ui.umd.cjs +1 -1
  5. package/dist/style.css +1 -1
  6. package/package.json +46 -45
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Alessandro Bertozzi
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,122 +1,125 @@
1
- # RedM Vue UI
2
-
3
- A Vue 3 UI Component Library inspired by Red Dead Redemption styling for RedM NUI interfaces.
4
-
5
- ## 📦 Installation
6
-
7
- ```bash
8
- npm install @alebtz/redm-vue-ui
9
- ```
10
-
11
- ## 🚀 Quick Start
12
-
13
- ```js
14
- import { createApp } from 'vue'
15
- import RedmVueUI from '@alebtz/redm-vue-ui'
16
- import '@alebtz/redm-vue-ui/style.css'
17
-
18
- const app = createApp(App)
19
- app.use(RedmVueUI)
20
- app.mount('#app')
21
- ```
22
-
23
- ### Or import components individually
24
-
25
- ```js
26
- import { RdrButton, RdrCard, RdrInput } from '@alebtz/redm-vue-ui'
27
- import '@alebtz/redm-vue-ui/style.css'
28
- ```
29
-
30
- ## 📚 Components
31
-
32
- ### Base Components
33
- - **RdrButton** - Styled button with RDR textures
34
- - **RdrInput** - Text input field
35
- - **RdrTextarea** - Multi-line text area
36
- - **RdrCard** - Content card with vintage styling
37
- - **RdrHeader** - Header with decorative red divider
38
- - **RdrDivider** - Horizontal separator
39
- - **RdrSlider** - Range slider control
40
-
41
- ### Layout Components
42
- - **RdrPanel** - Main panel with background texture
43
- - **RdrModal** - Centered modal with backdrop
44
- - **RdrScrollArea** - Scrollable area with custom scrollbar
45
-
46
- ### Transitions
47
- - **RdrZoomTransition** - Zoom and fade animation
48
- - **RdrSlideTransition** - Slide from bottom animation
49
- - **RdrFadeTransition** - Simple fade animation
50
-
51
- ### Composables
52
- - **useRdrTheme** - Access theme colors and variables
53
- - **useRdrAnimations** - Animation utilities
54
-
55
- ## 🎨 Customization
56
-
57
- The library uses CSS custom properties for easy theming:
58
-
59
- ```css
60
- :root {
61
- --rdr-color-primary: #B62A2A;
62
- --rdr-color-text: #fafafa;
63
- --rdr-color-overlay: rgba(33, 33, 33, 0.3);
64
- --rdr-font-title: 'Chinese Rocks', serif;
65
- --rdr-font-heading: 'RDR Lino Regular', serif;
66
- --rdr-font-body: 'Hapna Slab Serif', serif;
67
- }
68
- ```
69
-
70
- ## 📖 Usage Examples
71
-
72
- ### Button
73
- ```vue
74
- <RdrButton @click="handleClick">
75
- Click Me
76
- </RdrButton>
77
- ```
78
-
79
- ### Card with Header
80
- ```vue
81
- <RdrCard>
82
- <RdrHeader>Patient Details</RdrHeader>
83
- <p>Card content here...</p>
84
- </RdrCard>
85
- ```
86
-
87
- ### Modal
88
- ```vue
89
- <RdrModal v-model="isOpen">
90
- <RdrHeader>Confirmation</RdrHeader>
91
- <p>Are you sure?</p>
92
- <RdrButton @click="isOpen = false">Close</RdrButton>
93
- </RdrModal>
94
- ```
95
-
96
- ### Input
97
- ```vue
98
- <RdrInput
99
- v-model="text"
100
- placeholder="Enter text..."
101
- />
102
- ```
103
-
104
- ## 🛠️ Development
105
-
106
- ```bash
107
- # Install dependencies
108
- npm install
109
-
110
- # Start development server
111
- npm run dev
112
-
113
- # Build library
114
- npm run build
115
-
116
- # Build in watch mode
117
- npm run build:watch
118
- ```
119
-
120
- ## 📄 License
121
-
122
- MIT License - feel free to use in your RedM projects!
1
+ # RedM Vue UI
2
+
3
+ A Vue 3 UI Component Library inspired by Red Dead Redemption styling for RedM NUI interfaces.
4
+
5
+ ## 🌐 Demo page
6
+ Take a look at the demo [here](https://alebertz.github.io/redm-vue-ui)
7
+
8
+ ## 📦 Installation
9
+
10
+ ```bash
11
+ npm install @alebtz/redm-vue-ui
12
+ ```
13
+
14
+ ## 🚀 Quick Start
15
+
16
+ ```js
17
+ import { createApp } from 'vue'
18
+ import RedmVueUI from '@alebtz/redm-vue-ui'
19
+ import '@alebtz/redm-vue-ui/style.css'
20
+
21
+ const app = createApp(App)
22
+ app.use(RedmVueUI)
23
+ app.mount('#app')
24
+ ```
25
+
26
+ ### Or import components individually
27
+
28
+ ```js
29
+ import { RdrButton, RdrCard, RdrInput } from '@alebtz/redm-vue-ui'
30
+ import '@alebtz/redm-vue-ui/style.css'
31
+ ```
32
+
33
+ ## 📚 Components
34
+
35
+ ### Base Components
36
+ - **RdrButton** - Styled button with RDR textures
37
+ - **RdrInput** - Text input field
38
+ - **RdrTextarea** - Multi-line text area
39
+ - **RdrCard** - Content card with vintage styling
40
+ - **RdrHeader** - Header with decorative red divider
41
+ - **RdrDivider** - Horizontal separator
42
+ - **RdrSlider** - Range slider control
43
+
44
+ ### Layout Components
45
+ - **RdrPanel** - Main panel with background texture
46
+ - **RdrModal** - Centered modal with backdrop
47
+ - **RdrScrollArea** - Scrollable area with custom scrollbar
48
+
49
+ ### Transitions
50
+ - **RdrZoomTransition** - Zoom and fade animation
51
+ - **RdrSlideTransition** - Slide from bottom animation
52
+ - **RdrFadeTransition** - Simple fade animation
53
+
54
+ ### Composables
55
+ - **useRdrTheme** - Access theme colors and variables
56
+ - **useRdrAnimations** - Animation utilities
57
+
58
+ ## 🎨 Customization
59
+
60
+ The library uses CSS custom properties for easy theming:
61
+
62
+ ```css
63
+ :root {
64
+ --rdr-color-primary: #B62A2A;
65
+ --rdr-color-text: #fafafa;
66
+ --rdr-color-overlay: rgba(33, 33, 33, 0.3);
67
+ --rdr-font-title: 'Chinese Rocks', serif;
68
+ --rdr-font-heading: 'RDR Lino Regular', serif;
69
+ --rdr-font-body: 'Hapna Slab Serif', serif;
70
+ }
71
+ ```
72
+
73
+ ## 📖 Usage Examples
74
+
75
+ ### Button
76
+ ```vue
77
+ <RdrButton @click="handleClick">
78
+ Click Me
79
+ </RdrButton>
80
+ ```
81
+
82
+ ### Card with Header
83
+ ```vue
84
+ <RdrCard>
85
+ <RdrHeader>Patient Details</RdrHeader>
86
+ <p>Card content here...</p>
87
+ </RdrCard>
88
+ ```
89
+
90
+ ### Modal
91
+ ```vue
92
+ <RdrModal v-model="isOpen">
93
+ <RdrHeader>Confirmation</RdrHeader>
94
+ <p>Are you sure?</p>
95
+ <RdrButton @click="isOpen = false">Close</RdrButton>
96
+ </RdrModal>
97
+ ```
98
+
99
+ ### Input
100
+ ```vue
101
+ <RdrInput
102
+ v-model="text"
103
+ placeholder="Enter text..."
104
+ />
105
+ ```
106
+
107
+ ## 🛠️ Development
108
+
109
+ ```bash
110
+ # Install dependencies
111
+ npm install
112
+
113
+ # Start development server
114
+ npm run dev
115
+
116
+ # Build library
117
+ npm run build
118
+
119
+ # Build in watch mode
120
+ npm run build:watch
121
+ ```
122
+
123
+ ## 📄 License
124
+
125
+ MIT License - feel free to use in your RedM projects!