glass-studio-ui-pro 1.1.2 → 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.
Files changed (13) hide show
  1. package/README.md +113 -38
  2. package/dist/components/CmButton.vue.d.ts +4 -2
  3. package/dist/components/CmCard.vue.d.ts +1 -1
  4. package/dist/components/CmModal.vue.d.ts +3 -1
  5. package/dist/components/CmToolbar.vue.d.ts +6 -2
  6. package/dist/liquid-glass-ui.es.js +292 -250
  7. package/dist/liquid-glass-ui.umd.js +1 -1
  8. package/dist/style.css +1 -1
  9. package/package.json +3 -2
  10. package/src/lib/styles/_mixins.scss +11 -0
  11. package/src/lib/styles/components/_button.scss +21 -1
  12. package/src/lib/styles/components/_card.scss +3 -0
  13. package/src/lib/styles/main.scss +13 -0
package/README.md CHANGED
@@ -2,35 +2,40 @@
2
2
 
3
3
  **Premium Liquid Glass UI Library for Vue 3**
4
4
 
5
+ > [!IMPORTANT]
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
+
5
9
  ![Glass Studio Preview](https://i.ibb.co/yc8QmHwZ/Screenshot-2026-03-27-154613.png)
6
10
 
7
- `glass-studio-ui-pro` là thư viện UI chuyên về hiệu ứng kính mờ (Glassmorphism) hiệu năng cao cho Vue 3. Thư viện cung cấp các bộ lọc biến dạng lỏng (Liquid Distortion), hệ thống đổ bóng đa tầng và các preset chuyên nghiệp giúp tạo ra giao diện sang trọng, đẳng cấp.
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.
8
12
 
9
13
  ---
10
14
 
11
- ## ✨ Tính năng nổi bật
15
+ ## ✨ Key Features
12
16
 
13
- - **Liquid Glass Distortion**: Tích hợp các bộ lọc biến dạng kính chân thực (Mist, Grain, Frosted, Ripple).
14
- - **Pro Presets**: Hơn 10 mã thiết kế kính được tinh chỉnh sẵn (Heavy-frost, Crystal, Deep-velvet...).
15
- - **Advanced Shadow Engine**: Hệ thống đổ bóng phản xạ (Reflex) và bóng mờ (Mist) tạo độ sâu vật lý.
16
- - **License Guard**: Hệ thống bảo mật và quản lý bản quyền thời gian thực.
17
- - **TypeScript First**: Hỗ trợ đầy đủ kiểu dữ liệu, tối ưu cho DX (Developer Experience).
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).
18
23
 
19
24
  ---
20
25
 
21
- ## 🚀 Bắt đầu sử dụng
26
+ ## 🚀 Getting Started
22
27
 
23
- ### 1. Cài đặt
28
+ ### 1. Installation
24
29
 
25
30
  ```bash
26
31
  npm install glass-studio-ui-pro
27
- # hoặc
32
+ # or
28
33
  yarn add glass-studio-ui-pro
29
34
  ```
30
35
 
31
- ### 2. Cấu hình Plugin (main.ts)
36
+ ### 2. Plugin Configuration (`main.ts`)
32
37
 
33
- Để kích hoạt đầy đủ tính năng Pro, bạn cần đăng ký plugin và truyền vào **License Key**:
38
+ To unlock all Pro features, register the plugin and provide your **License Key**:
34
39
 
35
40
  ```typescript
36
41
  import { createApp } from "vue";
@@ -39,7 +44,7 @@ import "glass-studio-ui-pro/style.css";
39
44
 
40
45
  const app = createApp(App);
41
46
 
42
- // Khởi tạo GlassUI với License Key của bạn
47
+ // Initialize GlassUI with your Pro License Key
43
48
  app.use(GlassUI, {
44
49
  licenseKey: "YOUR-PRO-LICENSE-KEY",
45
50
  });
@@ -47,9 +52,9 @@ app.use(GlassUI, {
47
52
  app.mount("#app");
48
53
  ```
49
54
 
50
- ### 3. Cài đặt SVG Filters (Root App)
55
+ ### 3. Global SVG Filters (`App.vue`)
51
56
 
52
- Để các hiệu ứng biến dạng (Distortion) hoạt động, bạn **bắt buộc** phải đặt `CmFilters` tại file root (thường là `App.vue`):
57
+ The liquid distortion engine requires the `CmFilters` component to be present at the root level (usually in `App.vue`):
53
58
 
54
59
  ```vue
55
60
  <script setup>
@@ -60,73 +65,143 @@ import { CmFilters } from "glass-studio-ui-pro";
60
65
  <div id="app">
61
66
  <router-view />
62
67
  <CmFilters />
63
- <!-- Engine xử lý hiệu ứng kính -->
68
+ <!-- The core engine for glass distortion effects -->
64
69
  </div>
65
70
  </template>
66
71
  ```
67
72
 
68
73
  ---
69
74
 
70
- ## 🎨 Sử dụng linh kiện
75
+ ## 🔑 PRO License Registration
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
+ ---
71
84
 
72
- ### CmCard (Thẻ kính)
85
+ ## 🎨 Component Usage
86
+
87
+ ### CmCard (Glass Surface)
88
+ A versatile container with backdrop blur and texture.
73
89
 
74
90
  ```vue
75
91
  <template>
76
92
  <CmCard type="heavy-frost" shadow="mist" distortion="wavy">
77
93
  <h3>Liquid Glass Performance</h3>
78
- <p>Nội dung hiển thị với hiệu ứng kính cao cấp.</p>
94
+ <p>Content rendered with premium glass optics.</p>
79
95
  </CmCard>
80
96
  </template>
81
97
  ```
82
98
 
83
- ### CmButton (Nút bấm thủy tinh)
99
+ ### CmButton (Glass Controls)
100
+ Interactive buttons with material presets and liquid glow.
84
101
 
85
102
  ```vue
86
103
  <template>
87
104
  <CmButton variant="primary" glow :blur="20" distortion="frosted">
88
- Bắt đầu ngay
105
+ Explore Pro
89
106
  </CmButton>
90
107
  </template>
91
108
  ```
92
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
+
93
132
  ---
94
133
 
95
- ## 📖 Bảng thông số (API Reference)
134
+ ## 📖 API Reference
96
135
 
97
136
  ### CmCard Props
98
137
 
99
- | Prop | Type | Default | Description |
100
- | :----------- | :----------- | :------- | :------------------------------------------------------------ | ------------------------------- |
101
- | `type` | `CardPreset` | `'none'` | Các preset sẵn có: `glass-frost`, `heavy-frost`, `crystal`... |
102
- | `blur` | `number` | `12` | Độ mờ của lớp kính (px). |
103
- | `opacity` | `number` | `0.12` | Độ trong suốt của nền (0-1). |
104
- | `distortion` | `string` | `'none'` | Kiểu biến dạng: `wavy`, `frosted`, `grain`, `ripple`, `mist`. |
105
- | `shadow` | `string | boolean` | `false` | Kiểu đổ bóng: `mist`, `reflex`. |
138
+ | Prop | Type | Default | Description |
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. |
163
+
164
+ ### CmModal Props
165
+
166
+ | Prop | Type | Default | Description |
167
+ | :--- | :--- | :--- | :--- |
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. |
172
+
173
+ ### CmToolbar Props
174
+
175
+ | Prop | Type | Default | Description |
176
+ | :--- | :--- | :--- | :--- |
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`. |
106
181
 
107
182
  ---
108
183
 
109
- ## 🔐 Bảo mật & Bản quyền
184
+ ## 🔐 Security & License Guard
110
185
 
111
- Đây là phiên bản **Pro**. Nếu không có License Key hợp lệ hoặc bản quyền hết hạn:
186
+ This is the **Pro** version of the library. If a valid License Key is not detected or has expired:
112
187
 
113
- - Linh kiện sẽ chuyển sang trạng thái **Secure Lock** (Giao diện tối giản).
114
- - Hiển thị thông báo lỗi trực tiếp từ hệ thống (Vd: **"LICENSE HAS EXPIRED"**).
115
- - Các bộ lọc cao cấp sẽ bị vô hiệu hóa để bảo vệ tài sản trí tuệ.
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.
116
191
 
117
- Bạn có thể kiểm tra trạng thái bản quyền:
192
+ You can check the current license status programmatically:
118
193
 
119
194
  ```typescript
120
195
  import { getLicenseStatus } from "glass-studio-ui-pro";
121
196
 
122
197
  const status = getLicenseStatus();
123
198
  if (!status.isValid) {
124
- console.error("Lỗi bản quyền:", status.message);
199
+ console.warn("License Issue:", status.message);
125
200
  }
126
201
  ```
127
202
 
128
203
  ---
129
204
 
130
- ## 📄 Bản quyền
205
+ ## 📄 License
131
206
 
132
- (C) 2026 Glass Studio & CM Team. Mọi quyền được bảo lưu.
207
+ (C) 2026 Glass Studio & CM Team. All rights reserved. Intellectual Property under private commercial license.
package/dist/components/CmButton.vue.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  interface Props {
2
- variant?: 'default' | 'primary' | 'ghost';
2
+ variant?: 'default' | 'primary' | 'ghost' | 'solid';
3
+ type?: 'glass-frost' | 'light-frost' | 'heavy-frost' | 'grain-frost' | 'fine-frost' | 'soft-mist';
3
4
  active?: boolean;
4
5
  glow?: boolean;
5
6
  blur?: number;
@@ -21,11 +22,12 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
21
22
  }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
22
23
  onClick?: ((...args: any[]) => any) | undefined;
23
24
  }>, {
25
+ type: "glass-frost" | "light-frost" | "heavy-frost" | "grain-frost" | "fine-frost" | "soft-mist";
24
26
  blur: number;
25
27
  opacity: number;
26
28
  distortion: "none" | "wavy" | "frosted" | "grain" | "ripple" | "mist";
27
29
  shadow: boolean | string;
28
- variant: "default" | "primary" | "ghost";
30
+ variant: "default" | "primary" | "ghost" | "solid";
29
31
  active: boolean;
30
32
  glow: boolean;
31
33
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
package/dist/components/CmCard.vue.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type CardPreset = 'glass-frost' | 'light-frost' | 'heavy-frost' | 'grain-frost' | 'fine-frost' | 'soft-mist' | 'crystal' | 'deep-velvet' | 'frosted' | 'none' | 'glass';
1
+ export type CardPreset = 'glass-frost' | 'light-frost' | 'heavy-frost' | 'grain-frost' | 'fine-frost' | 'soft-mist';
2
2
  export type DistortionType = 'none' | 'wavy' | 'frosted' | 'grain' | 'ripple' | 'mist';
3
3
  interface Props {
4
4
  type?: CardPreset;
package/dist/components/CmModal.vue.d.ts CHANGED
@@ -4,9 +4,10 @@ interface Props {
4
4
  width?: string;
5
5
  blur?: number;
6
6
  opacity?: number;
7
- distortion?: 'none' | 'wavy' | 'frosted' | 'grain' | 'ripple' | 'mist';
7
+ distortion?: "none" | "wavy" | "frosted" | "grain" | "ripple" | "mist";
8
8
  shadow?: boolean | string;
9
9
  showClose?: boolean;
10
+ type?: "none" | "glass-frost" | "light-frost" | "heavy-frost" | "grain-frost" | "fine-frost" | "soft-mist" | "crystal";
10
11
  }
11
12
  declare function __VLS_template(): {
12
13
  attrs: Partial<{}>;
@@ -26,6 +27,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
26
27
  onClose?: ((...args: any[]) => any) | undefined;
27
28
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
28
29
  }>, {
30
+ type: "none" | "glass-frost" | "light-frost" | "heavy-frost" | "grain-frost" | "fine-frost" | "soft-mist" | "crystal";
29
31
  blur: number;
30
32
  opacity: number;
31
33
  distortion: "none" | "wavy" | "frosted" | "grain" | "ripple" | "mist";
package/dist/components/CmToolbar.vue.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  interface Props {
2
- position?: 'top' | 'bottom' | 'static';
2
+ position?: "top" | "bottom" | "static";
3
3
  floating?: boolean;
4
+ width?: "full" | "fit" | "floating";
5
+ type?: "glass-frost" | "light-frost" | "heavy-frost" | "grain-frost" | "fine-frost" | "soft-mist";
4
6
  blur?: number;
5
7
  opacity?: number;
6
- distortion?: 'none' | 'wavy' | 'frosted' | 'grain' | 'ripple' | 'mist';
8
+ distortion?: "none" | "wavy" | "frosted" | "grain" | "ripple" | "mist";
7
9
  shadow?: boolean | string;
8
10
  height?: string;
9
11
  narrow?: boolean;
@@ -20,12 +22,14 @@ declare function __VLS_template(): {
20
22
  };
21
23
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
22
24
  declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
25
+ type: "glass-frost" | "light-frost" | "heavy-frost" | "grain-frost" | "fine-frost" | "soft-mist";
23
26
  blur: number;
24
27
  opacity: number;
25
28
  distortion: "none" | "wavy" | "frosted" | "grain" | "ripple" | "mist";
26
29
  shadow: boolean | string;
27
30
  position: "top" | "bottom" | "static";
28
31
  height: string;
32
+ width: "full" | "fit" | "floating";
29
33
  floating: boolean;
30
34
  narrow: boolean;
31
35
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;