glass-studio-ui-pro 0.1.25 → 0.1.27
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 +13 -104
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,121 +1,30 @@
|
|
|
1
|
-
#
|
|
1
|
+
# glass-studio-ui-pro
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Premium Liquid Glass UI Library for Vue 3.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
## ✨ Features
|
|
12
|
-
|
|
13
|
-
- **Liquid Glass Distortion**: Real-time high-fidelity glass distortion effects (Mist, Grain, Frosted).
|
|
14
|
-
- **Pro Presets**: 10+ professionally tuned glass styles (Glass-frost, Light-frost, Heavy-frost, etc.).
|
|
15
|
-
- **Advanced Shadow Engine**: Multi-layered reflection and mist shadows for physical depth.
|
|
16
|
-
- **License Guard**: Secure component locking with real-time error messaging from API.
|
|
17
|
-
- **Vue 3 First**: Built using `<script setup>` and TypeScript for a modern DX.
|
|
18
|
-
|
|
19
|
-
---
|
|
20
|
-
|
|
21
|
-
## 🚀 Getting Started
|
|
22
|
-
|
|
23
|
-
### 1. Installation
|
|
24
|
-
|
|
25
|
-
Install the library using npm or yarn:
|
|
5
|
+
## Features
|
|
6
|
+
- Liquid Glass Distortion
|
|
7
|
+
- Pro Presets
|
|
8
|
+
- License Guard
|
|
9
|
+
- Vue 3 Support
|
|
26
10
|
|
|
11
|
+
## Installation
|
|
27
12
|
```bash
|
|
28
13
|
npm install glass-studio-ui-pro
|
|
29
|
-
# OR
|
|
30
|
-
yarn add glass-studio-ui-pro
|
|
31
14
|
```
|
|
32
15
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
In your `main.ts` or `main.js`, register the plugin and provide your **License Key**:
|
|
36
|
-
|
|
16
|
+
## Global Setup
|
|
37
17
|
```typescript
|
|
38
18
|
import { createApp } from "vue";
|
|
39
|
-
import App from "./App.vue";
|
|
40
19
|
import { GlassUI } from "glass-studio-ui-pro";
|
|
41
|
-
import "glass-studio-ui-pro/style.css";
|
|
20
|
+
import "glass-studio-ui-pro/style.css";
|
|
42
21
|
|
|
43
22
|
const app = createApp(App);
|
|
44
|
-
|
|
45
|
-
// Initialize GlassUI with your Pro License Key
|
|
46
23
|
app.use(GlassUI, {
|
|
47
|
-
licenseKey: 'YOUR-
|
|
24
|
+
licenseKey: 'YOUR-LICENSE-KEY'
|
|
48
25
|
});
|
|
49
|
-
|
|
50
26
|
app.mount("#app");
|
|
51
27
|
```
|
|
52
28
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
To enable liquid glass textures, you **must** include the `CmFilters` component once in your root `App.vue`:
|
|
56
|
-
|
|
57
|
-
```vue
|
|
58
|
-
<script setup>
|
|
59
|
-
import { CmFilters } from "glass-studio-ui-pro";
|
|
60
|
-
</script>
|
|
61
|
-
|
|
62
|
-
<template>
|
|
63
|
-
<div id="app">
|
|
64
|
-
<router-view />
|
|
65
|
-
<CmFilters /> <!-- Central Filter Engine (Required for distortions) -->
|
|
66
|
-
</div>
|
|
67
|
-
</template>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
---
|
|
71
|
-
|
|
72
|
-
## 🎨 Usage
|
|
73
|
-
|
|
74
|
-
### Basic Glass Card
|
|
75
|
-
|
|
76
|
-
```vue
|
|
77
|
-
<script setup>
|
|
78
|
-
import { CmCard, CmButton } from "glass-studio-ui-pro";
|
|
79
|
-
</script>
|
|
80
|
-
|
|
81
|
-
<template>
|
|
82
|
-
<CmCard type="heavy-frost" shadow="mist">
|
|
83
|
-
<h3>Liquid Glass Title</h3>
|
|
84
|
-
<p>This card features deep blur and high-fidelity frost texture.</p>
|
|
85
|
-
|
|
86
|
-
<CmButton variant="primary" glow>
|
|
87
|
-
Action Button
|
|
88
|
-
</CmButton>
|
|
89
|
-
</CmCard>
|
|
90
|
-
</template>
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
---
|
|
94
|
-
|
|
95
|
-
## 🔐 License & Security
|
|
96
|
-
|
|
97
|
-
This is a **Pro** version of the library. If a valid license is not detected, components will enter a "Secure Lock" state:
|
|
98
|
-
- Visuals will revert to a simplified dark aesthetic.
|
|
99
|
-
- A descriptive error message (e.g., **"LICENSE HAS EXPIRED"**) will be displayed over the components.
|
|
100
|
-
- Advanced filters and distortions will be disabled.
|
|
101
|
-
|
|
102
|
-
You can verify your license status using the provided helper:
|
|
103
|
-
```typescript
|
|
104
|
-
import { getLicenseStatus } from "glass-studio-ui-pro";
|
|
105
|
-
|
|
106
|
-
const status = getLicenseStatus();
|
|
107
|
-
console.log(status.isValid); // true / false
|
|
108
|
-
console.log(status.message); // Error message from API
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
---
|
|
112
|
-
|
|
113
|
-
## 🌍 Localization (Việt Nam)
|
|
114
|
-
|
|
115
|
-
Sản phẩm được tối ưu giao diện kính lỏng (Liquid Glass) mang lại trải nghiệm thị giác cao cấp. Hệ thống hỗ trợ đầy đủ các hiệu ứng bề mặt kính mờ, kính nhám và phản xạ ánh sáng đa tầng cùng cơ chế bảo mật bản quyền chuyên nghiệp.
|
|
116
|
-
|
|
117
|
-
---
|
|
118
|
-
|
|
119
|
-
## 📄 License
|
|
120
|
-
|
|
121
|
-
(C) 2026 Glass Studio & CM Team. All Rights Reserved.
|
|
29
|
+
## License
|
|
30
|
+
(C) 2026 Glass Studio All Rights Reserved.
|