glass-studio-ui-pro 1.1.2 → 1.1.3

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 +31 -7
  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,6 +2,10 @@
2
2
 
3
3
  **Premium Liquid Glass UI Library for Vue 3**
4
4
 
5
+ > [!IMPORTANT]
6
+ > **DỰ ÁN ĐANG PHÁT TRIỂN**: Thư viện hiện tại đang trong giai đoạn Beta và chưa mở công khai cho mọi người sử dụng.
7
+ > **Ngày ra mắt chính thức: 01/05/2026**.
8
+
5
9
  ![Glass Studio Preview](https://i.ibb.co/yc8QmHwZ/Screenshot-2026-03-27-154613.png)
6
10
 
7
11
  `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.
@@ -96,13 +100,33 @@ import { CmFilters } from "glass-studio-ui-pro";
96
100
 
97
101
  ### CmCard Props
98
102
 
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`. |
103
+ | Prop | Type | Default | Description |
104
+ | :----------- | :----------- | :------- | :------------------------------------------------------------- |
105
+ | `type` | `CardPreset` | `'none'` | Các preset sẵn có: `glass-frost`, `heavy-frost`, `crystal`... |
106
+ | `blur` | `number` | `12` | Độ mờ của lớp kính (px). |
107
+ | `opacity` | `number` | `0.12` | Độ trong suốt của nền (0-1). |
108
+ | `distortion` | `string` | `'none'` | Kiểu biến dạng: `wavy`, `frosted`, `grain`, `ripple`, `mist`. |
109
+ | `shadow` | `string` \| `boolean` | `false` | Kiểu đổ bóng: `mist`, `reflex`. |
110
+
111
+ ### CmModal Props
112
+
113
+ | Prop | Type | Default | Description |
114
+ | :--- | :--- | :--- | :--- |
115
+ | `v-model` | `boolean` | `false` | Trạng thái hiển thị (Bắt buộc). |
116
+ | `title` | `string` | `''` | Tiêu đề của Modal. |
117
+ | `width` | `string` | `'500px'` | Chiều rộng tối đa của Modal. |
118
+ | `distortion`| `string` | `'frosted'`| Kiểu biến dạng bề mặt kính. |
119
+ | `showClose` | `boolean` | `true` | Hiển thị nút đóng (X). |
120
+
121
+ ### CmToolbar Props
122
+
123
+ | Prop | Type | Default | Description |
124
+ | :--- | :--- | :--- | :--- |
125
+ | `position` | `string` | `'static'`| Vị trí: `top`, `bottom`, `static`. |
126
+ | `floating` | `boolean` | `false` | Hiển thị dạng trôi nổi (có margin). |
127
+ | `narrow` | `boolean` | `false` | Giảm kích thước padding dọc. |
128
+ | `distortion`| `string` | `'mist'` | Kiểu biến dạng bề mặt kính. |
129
+ | `shadow` | `string` | `'reflex'`| Hiệu ứng đổ bóng đặc thù. |
106
130
 
107
131
  ---
108
132
 
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>;