glass-studio-ui-pro 0.1.30 → 0.1.31
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 -85
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,118 +1,47 @@
|
|
|
1
|
-
# 💎 Glass Studio UI
|
|
1
|
+
# 💎 Glass Studio UI Pro
|
|
2
2
|
|
|
3
|
-
**Liquid Glass UI Library for Vue 3**
|
|
3
|
+
**Premium Liquid Glass UI Library for Vue 3**
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
|
|
7
|
-
`glass-studio-ui` is a high-fidelity glassmorphism UI library designed for modern Vue 3 applications.
|
|
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
|
-
- **Vue 3 First**: Built using `<script setup>` and TypeScript for a modern DX.
|
|
17
|
-
- **Lightweight**: Optimized CSS and ES modules for minimal performance impact.
|
|
18
|
-
|
|
19
|
-
---
|
|
7
|
+
`glass-studio-ui-pro` is a high-fidelity glassmorphism UI library designed for modern Vue 3 applications.
|
|
20
8
|
|
|
21
9
|
## 🚀 Getting Started
|
|
22
10
|
|
|
23
|
-
### Installation
|
|
24
|
-
|
|
25
|
-
Install the library using npm or yarn:
|
|
26
|
-
|
|
27
11
|
```bash
|
|
28
12
|
npm install glass-studio-ui-pro
|
|
29
|
-
# OR
|
|
30
|
-
yarn add glass-studio-ui-pro
|
|
31
13
|
```
|
|
32
14
|
|
|
33
15
|
### Global Setup
|
|
34
16
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
```javascript
|
|
17
|
+
```typescript
|
|
38
18
|
import { createApp } from "vue";
|
|
39
|
-
import
|
|
40
|
-
import "glass-studio-ui/
|
|
19
|
+
import { GlassUI } from "glass-studio-ui-pro";
|
|
20
|
+
import "glass-studio-ui-pro/style.css";
|
|
41
21
|
|
|
42
22
|
const app = createApp(App);
|
|
23
|
+
app.use(GlassUI, {
|
|
24
|
+
licenseKey: 'YOUR-LICENSE-KEY'
|
|
25
|
+
});
|
|
43
26
|
app.mount("#app");
|
|
44
27
|
```
|
|
45
28
|
|
|
46
|
-
### SVG Filters Setup
|
|
29
|
+
### SVG Filters Setup (Required)
|
|
47
30
|
|
|
48
|
-
|
|
31
|
+
Add `CmFilters` to your root `App.vue`:
|
|
49
32
|
|
|
50
33
|
```vue
|
|
51
34
|
<script setup>
|
|
52
|
-
import { CmFilters } from "glass-studio-ui";
|
|
35
|
+
import { CmFilters } from "glass-studio-ui-pro";
|
|
53
36
|
</script>
|
|
54
37
|
|
|
55
38
|
<template>
|
|
56
39
|
<div id="app">
|
|
57
40
|
<router-view />
|
|
58
41
|
<CmFilters />
|
|
59
|
-
<!-- Central Filter Engine -->
|
|
60
42
|
</div>
|
|
61
43
|
</template>
|
|
62
44
|
```
|
|
63
45
|
|
|
64
46
|
---
|
|
65
|
-
|
|
66
|
-
## 🎨 Usage
|
|
67
|
-
|
|
68
|
-
### Basic Glass Card
|
|
69
|
-
|
|
70
|
-
```vue
|
|
71
|
-
<script setup>
|
|
72
|
-
import { CmCard } from "glass-studio-ui";
|
|
73
|
-
</script>
|
|
74
|
-
|
|
75
|
-
<template>
|
|
76
|
-
<CmCard type="heavy-frost" shadow="mist">
|
|
77
|
-
<h3>Liquid Glass Title</h3>
|
|
78
|
-
<p>This card features deep blur and high-fidelity frost texture.</p>
|
|
79
|
-
</CmCard>
|
|
80
|
-
</template>
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### Advanced Presets
|
|
84
|
-
|
|
85
|
-
| Preset | Description |
|
|
86
|
-
| :------------ | :----------------------------------------------- |
|
|
87
|
-
| `glass-frost` | Crystal clear glass with subtle distortion. |
|
|
88
|
-
| `light-frost` | Clean, subtle frozen texture. |
|
|
89
|
-
| `heavy-frost` | Deep 24px blur with intense frosted deformation. |
|
|
90
|
-
| `grain-frost` | High-frequency sand-blasted grain texture. |
|
|
91
|
-
| `fine-frost` | Elegant light refraction and mist. |
|
|
92
|
-
| `soft-mist` | Luminous glowing fog with deep mist shadows. |
|
|
93
|
-
|
|
94
|
-
---
|
|
95
|
-
|
|
96
|
-
## 📖 API Reference
|
|
97
|
-
|
|
98
|
-
### CmCard Props
|
|
99
|
-
|
|
100
|
-
| Prop | Type | Default | Description |
|
|
101
|
-
| :----------- | :----------------------------------- | :------- | :-------------------------------------- |
|
|
102
|
-
| `type` | `string` | `'none'` | Preset glass style (see table above). |
|
|
103
|
-
| `blur` | `number` | `12` | Backdrop blur radius in pixels. |
|
|
104
|
-
| `opacity` | `number` | `0.12` | Background transparency (0-1). |
|
|
105
|
-
| `distortion` | `'none'\|'mist'\|'grain'\|'frosted'` | `'none'` | Custom surface distortion texture. |
|
|
106
|
-
| `shadow` | `'mist'\|'reflex'\|boolean` | `false` | Apply specialized glass shadow effects. |
|
|
107
|
-
|
|
108
|
-
---
|
|
109
|
-
|
|
110
|
-
## 🌍 Localization (Việt Nam)
|
|
111
|
-
|
|
112
|
-
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.
|
|
113
|
-
|
|
114
|
-
---
|
|
115
|
-
|
|
116
|
-
## 📄 License
|
|
117
|
-
|
|
118
|
-
MIT © 2026 Glass Studio & CM Team
|
|
47
|
+
(C) 2026 Glass Studio All Rights Reserved.
|