glass-studio-ui-pro 1.1.3 → 1.1.4
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 +100 -49
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,38 +3,39 @@
|
|
|
3
3
|
**Premium Liquid Glass UI Library for Vue 3**
|
|
4
4
|
|
|
5
5
|
> [!IMPORTANT]
|
|
6
|
-
> **
|
|
7
|
-
> **
|
|
6
|
+
> **UNDER ACTIVE DEVELOPMENT**: This library is currently in Beta and is not yet available for public use.
|
|
7
|
+
> **Official Launch Date: May 1st, 2026**.
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
`glass-studio-ui-pro`
|
|
11
|
+
`glass-studio-ui-pro` is a high-performance Vue 3 UI library specialized in advanced Glassmorphism effects. It features real-time Liquid Distortion filters, multi-layered reflection systems, and professional-grade presets for crafting state-of-the-art premium interfaces.
|
|
12
12
|
|
|
13
13
|
---
|
|
14
14
|
|
|
15
|
-
## ✨
|
|
15
|
+
## ✨ Key Features
|
|
16
16
|
|
|
17
|
-
- **Liquid Glass Distortion**:
|
|
18
|
-
- **
|
|
19
|
-
- **Advanced Shadow Engine**:
|
|
20
|
-
- **
|
|
21
|
-
- **
|
|
17
|
+
- **Liquid Glass Distortion**: Physically accurate glass distortion filters (Mist, Grain, Frosted, Ripple, Wavy).
|
|
18
|
+
- **Professional Presets**: 6 specialized material presets (Glass Frost, Grain Frost, Soft Mist, Light Frost, Fine Frost, Heavy Frost).
|
|
19
|
+
- **Advanced Shadow Engine**: Realistic elevation-based reflections (Reflex) and ambient glints (Mist).
|
|
20
|
+
- **Neon Glow System**: Integrated liquid glow effects for buttons and interactive states.
|
|
21
|
+
- **License Guard**: Real-time security and license verification system for enterprise use.
|
|
22
|
+
- **TypeScript Native**: Full type safety and optimized Developer Experience (DX).
|
|
22
23
|
|
|
23
24
|
---
|
|
24
25
|
|
|
25
|
-
## 🚀
|
|
26
|
+
## 🚀 Getting Started
|
|
26
27
|
|
|
27
|
-
### 1.
|
|
28
|
+
### 1. Installation
|
|
28
29
|
|
|
29
30
|
```bash
|
|
30
31
|
npm install glass-studio-ui-pro
|
|
31
|
-
#
|
|
32
|
+
# or
|
|
32
33
|
yarn add glass-studio-ui-pro
|
|
33
34
|
```
|
|
34
35
|
|
|
35
|
-
### 2.
|
|
36
|
+
### 2. Plugin Configuration (`main.ts`)
|
|
36
37
|
|
|
37
|
-
|
|
38
|
+
To unlock all Pro features, register the plugin and provide your **License Key**:
|
|
38
39
|
|
|
39
40
|
```typescript
|
|
40
41
|
import { createApp } from "vue";
|
|
@@ -43,7 +44,7 @@ import "glass-studio-ui-pro/style.css";
|
|
|
43
44
|
|
|
44
45
|
const app = createApp(App);
|
|
45
46
|
|
|
46
|
-
//
|
|
47
|
+
// Initialize GlassUI with your Pro License Key
|
|
47
48
|
app.use(GlassUI, {
|
|
48
49
|
licenseKey: "YOUR-PRO-LICENSE-KEY",
|
|
49
50
|
});
|
|
@@ -51,9 +52,9 @@ app.use(GlassUI, {
|
|
|
51
52
|
app.mount("#app");
|
|
52
53
|
```
|
|
53
54
|
|
|
54
|
-
### 3.
|
|
55
|
+
### 3. Global SVG Filters (`App.vue`)
|
|
55
56
|
|
|
56
|
-
|
|
57
|
+
The liquid distortion engine requires the `CmFilters` component to be present at the root level (usually in `App.vue`):
|
|
57
58
|
|
|
58
59
|
```vue
|
|
59
60
|
<script setup>
|
|
@@ -64,93 +65,143 @@ import { CmFilters } from "glass-studio-ui-pro";
|
|
|
64
65
|
<div id="app">
|
|
65
66
|
<router-view />
|
|
66
67
|
<CmFilters />
|
|
67
|
-
<!--
|
|
68
|
+
<!-- The core engine for glass distortion effects -->
|
|
68
69
|
</div>
|
|
69
70
|
</template>
|
|
70
71
|
```
|
|
71
72
|
|
|
72
73
|
---
|
|
73
74
|
|
|
74
|
-
##
|
|
75
|
+
## 🔑 PRO License Registration
|
|
75
76
|
|
|
76
|
-
|
|
77
|
+
To purchase a PRO license and unlock all premium glass effects, please visit [https://finzo.duckdns.org/](https://finzo.duckdns.org/) and follow these steps:
|
|
78
|
+
|
|
79
|
+
1. **Register an account**: Create your developer account on the platform.
|
|
80
|
+
2. **Purchase**: Navigate to the **NPM Libraries** section, select **Glass Studio UI Pro**, and complete the payment process.
|
|
81
|
+
3. **Get your Key**: After successful payment, you will receive a unique `licenseKey`.
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## 🎨 Component Usage
|
|
86
|
+
|
|
87
|
+
### CmCard (Glass Surface)
|
|
88
|
+
A versatile container with backdrop blur and texture.
|
|
77
89
|
|
|
78
90
|
```vue
|
|
79
91
|
<template>
|
|
80
92
|
<CmCard type="heavy-frost" shadow="mist" distortion="wavy">
|
|
81
93
|
<h3>Liquid Glass Performance</h3>
|
|
82
|
-
<p>
|
|
94
|
+
<p>Content rendered with premium glass optics.</p>
|
|
83
95
|
</CmCard>
|
|
84
96
|
</template>
|
|
85
97
|
```
|
|
86
98
|
|
|
87
|
-
### CmButton (
|
|
99
|
+
### CmButton (Glass Controls)
|
|
100
|
+
Interactive buttons with material presets and liquid glow.
|
|
88
101
|
|
|
89
102
|
```vue
|
|
90
103
|
<template>
|
|
91
104
|
<CmButton variant="primary" glow :blur="20" distortion="frosted">
|
|
92
|
-
|
|
105
|
+
Explore Pro
|
|
93
106
|
</CmButton>
|
|
94
107
|
</template>
|
|
95
108
|
```
|
|
96
109
|
|
|
110
|
+
### CmCheckbox (Liquid Selection)
|
|
111
|
+
Neon-lit checkboxes with animated state transitions.
|
|
112
|
+
|
|
113
|
+
```vue
|
|
114
|
+
<template>
|
|
115
|
+
<CmCheckbox v-model="isChecked" label="Enable Reflections" />
|
|
116
|
+
</template>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### CmToolbar (Adaptive Navigation)
|
|
120
|
+
Glass toolbars with multiple layout modes (Full, Floating, Fit).
|
|
121
|
+
|
|
122
|
+
```vue
|
|
123
|
+
<template>
|
|
124
|
+
<CmToolbar width="floating" type="fine-frost" shadow="reflex">
|
|
125
|
+
<template #left><span>Logo</span></template>
|
|
126
|
+
<CmButton variant="ghost">Home</CmButton>
|
|
127
|
+
<template #right><CmButton variant="primary">Login</CmButton></template>
|
|
128
|
+
</CmToolbar>
|
|
129
|
+
</template>
|
|
130
|
+
```
|
|
131
|
+
|
|
97
132
|
---
|
|
98
133
|
|
|
99
|
-
## 📖
|
|
134
|
+
## 📖 API Reference
|
|
100
135
|
|
|
101
136
|
### CmCard Props
|
|
102
137
|
|
|
103
138
|
| Prop | Type | Default | Description |
|
|
104
|
-
|
|
|
105
|
-
| `type` | `
|
|
106
|
-
| `blur` | `number` | `12` |
|
|
107
|
-
| `opacity` | `number` | `0.12` |
|
|
108
|
-
| `distortion
|
|
109
|
-
| `shadow` | `string`
|
|
139
|
+
| :--- | :--- | :--- | :--- |
|
|
140
|
+
| `type` | `Preset` | `'glass-frost'` | Material type: `glass-frost`, `grain-frost`, `soft-mist`, `light-frost`, `fine-frost`, `heavy-frost`. |
|
|
141
|
+
| `blur` | `number` | `12` | Backdrop blur radius (px). |
|
|
142
|
+
| `opacity` | `number` | `0.12` | Background surface opacity (0-1). |
|
|
143
|
+
| `distortion`| `string` | `'none'` | Filter style: `wavy`, `frosted`, `grain`, `ripple`, `mist`. |
|
|
144
|
+
| `shadow` | `string` | `'none'` | Shadow style: `mist`, `reflex`. |
|
|
145
|
+
|
|
146
|
+
### CmButton Props
|
|
147
|
+
|
|
148
|
+
| Prop | Type | Default | Description |
|
|
149
|
+
| :--- | :--- | :--- | :--- |
|
|
150
|
+
| `variant` | `string` | `'default'` | Visual style: `default`, `primary`, `ghost`, `solid`. |
|
|
151
|
+
| `glow` | `boolean` | `false` | Enables the liquid neon glow effect. |
|
|
152
|
+
| `type` | `Preset` | `'glass-frost'` | Material surface preset. |
|
|
153
|
+
| `blur` | `number` | `12` | Backdrop blur intensity. |
|
|
154
|
+
| `active` | `boolean` | `false` | Visual active state toggle. |
|
|
155
|
+
|
|
156
|
+
### CmCheckbox Props
|
|
157
|
+
|
|
158
|
+
| Prop | Type | Default | Description |
|
|
159
|
+
| :--- | :--- | :--- | :--- |
|
|
160
|
+
| `v-model` | `boolean` | `false` | Two-way binding state. |
|
|
161
|
+
| `label` | `string` | `''` | Optional label text. |
|
|
162
|
+
| `disabled` | `boolean` | `false` | Prevents user interaction. |
|
|
110
163
|
|
|
111
164
|
### CmModal Props
|
|
112
165
|
|
|
113
166
|
| Prop | Type | Default | Description |
|
|
114
167
|
| :--- | :--- | :--- | :--- |
|
|
115
|
-
| `v-model` | `boolean` | `false` |
|
|
116
|
-
| `title` | `string` | `''` |
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `showClose` | `boolean` | `true` | Hiển thị nút đóng (X). |
|
|
168
|
+
| `v-model` | `boolean` | `false` | Controls visibility (Required). |
|
|
169
|
+
| `title` | `string` | `''` | Header title text. |
|
|
170
|
+
| `type` | `Preset` | `'heavy-frost'` | Modal material style. |
|
|
171
|
+
| `shadow` | `string` | `'reflex'` | Surface reflection mode. |
|
|
120
172
|
|
|
121
173
|
### CmToolbar Props
|
|
122
174
|
|
|
123
175
|
| Prop | Type | Default | Description |
|
|
124
176
|
| :--- | :--- | :--- | :--- |
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `shadow` | `string` | `'reflex'`| Hiệu ứng đổ bóng đặc thù. |
|
|
177
|
+
| `width` | `string` | `'full'` | Width mode: `full`, `floating`, `fit`. |
|
|
178
|
+
| `type` | `Preset` | `'glass-frost'` | Material surface preset. |
|
|
179
|
+
| `shadow` | `string` | `'reflex'` | Surface glint intensity. |
|
|
180
|
+
| `position` | `string` | `'static'` | CSS Position: `static`, `top`, `bottom`. |
|
|
130
181
|
|
|
131
182
|
---
|
|
132
183
|
|
|
133
|
-
## 🔐
|
|
184
|
+
## 🔐 Security & License Guard
|
|
134
185
|
|
|
135
|
-
|
|
186
|
+
This is the **Pro** version of the library. If a valid License Key is not detected or has expired:
|
|
136
187
|
|
|
137
|
-
-
|
|
138
|
-
-
|
|
139
|
-
-
|
|
188
|
+
- Components will enter **Secure Lock** state (Blackout/Restricted UI).
|
|
189
|
+
- Console warnings will be triggered (e.g., **"LICENSE_REQUIRED"**).
|
|
190
|
+
- Advanced SVG Filters and material presets will be disabled to protect intellectual property.
|
|
140
191
|
|
|
141
|
-
|
|
192
|
+
You can check the current license status programmatically:
|
|
142
193
|
|
|
143
194
|
```typescript
|
|
144
195
|
import { getLicenseStatus } from "glass-studio-ui-pro";
|
|
145
196
|
|
|
146
197
|
const status = getLicenseStatus();
|
|
147
198
|
if (!status.isValid) {
|
|
148
|
-
console.
|
|
199
|
+
console.warn("License Issue:", status.message);
|
|
149
200
|
}
|
|
150
201
|
```
|
|
151
202
|
|
|
152
203
|
---
|
|
153
204
|
|
|
154
|
-
## 📄
|
|
205
|
+
## 📄 License
|
|
155
206
|
|
|
156
|
-
(C) 2026 Glass Studio & CM Team.
|
|
207
|
+
(C) 2026 Glass Studio & CM Team. All rights reserved. Intellectual Property under private commercial license.
|