glass-studio-ui-pro 1.1.1 → 1.1.3

package/README.md

@@ -2,17 +2,39 @@
 
 **Premium Liquid Glass UI Library for Vue 3**
 
+> [!IMPORTANT]
+> **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.
+> **Ngày ra mắt chính thức: 01/05/2026**.
+
 ![Glass Studio Preview](https://i.ibb.co/yc8QmHwZ/Screenshot-2026-03-27-154613.png)
 
-`glass-studio-ui-pro` is a high-fidelity glassmorphism UI library designed for modern Vue 3 applications.
+`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.
+
+---
+
+## ✨ Tính năng nổi bật
+
+- **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).
+- **Pro Presets**: Hơn 10 mã thiết kế kính được tinh chỉnh sẵn (Heavy-frost, Crystal, Deep-velvet...).
+- **Advanced Shadow Engine**: Hệ thống đổ bóng phản xạ (Reflex) và bóng mờ (Mist) tạo độ sâu vật lý.
+- **License Guard**: Hệ thống bảo mật và quản lý bản quyền thời gian thực.
+- **TypeScript First**: Hỗ trợ đầy đủ kiểu dữ liệu, tối ưu cho DX (Developer Experience).
+
+---
+
+## 🚀 Bắt đầu sử dụng
 
-## 🚀 Getting Started
+### 1. Cài đặt
 
 ```bash
 npm install glass-studio-ui-pro
+# hoặc
+yarn add glass-studio-ui-pro
 ```
 
-### Global Setup
+### 2. Cấu hình Plugin (main.ts)
+
+Để kích hoạt đầy đủ tính năng Pro, bạn cần đăng ký plugin và truyền vào **License Key**:
 
 ```typescript
 import { createApp } from "vue";
@@ -20,15 +42,18 @@ import { GlassUI } from "glass-studio-ui-pro";
 import "glass-studio-ui-pro/style.css";
 
 const app = createApp(App);
+
+// Khởi tạo GlassUI với License Key của bạn
 app.use(GlassUI, {
-  licenseKey: "YOUR-LICENSE-KEY",
+  licenseKey: "YOUR-PRO-LICENSE-KEY",
 });
+
 app.mount("#app");
 ```
 
-### SVG Filters Setup (Required)
+### 3. Cài đặt SVG Filters (Root App)
 
-Add `CmFilters` to your root `App.vue`:
+Để 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`):
 
 ```vue
 <script setup>
@@ -39,10 +64,93 @@ import { CmFilters } from "glass-studio-ui-pro";
   <div id="app">
     <router-view />
     <CmFilters />
+    <!-- Engine xử lý hiệu ứng kính -->
   </div>
 </template>
 ```
 
 ---
 
-(C) 2026 Glass Studio All Rights Reserved.
+## 🎨 Sử dụng linh kiện
+
+### CmCard (Thẻ kính)
+
+```vue
+<template>
+  <CmCard type="heavy-frost" shadow="mist" distortion="wavy">
+    <h3>Liquid Glass Performance</h3>
+    <p>Nội dung hiển thị với hiệu ứng kính cao cấp.</p>
+  </CmCard>
+</template>
+```
+
+### CmButton (Nút bấm thủy tinh)
+
+```vue
+<template>
+  <CmButton variant="primary" glow :blur="20" distortion="frosted">
+    Bắt đầu ngay
+  </CmButton>
+</template>
+```
+
+---
+
+## 📖 Bảng thông số (API Reference)
+
+### CmCard Props
+
+| Prop | Type | Default | Description |
+| :----------- | :----------- | :------- | :------------------------------------------------------------- |
+| `type` | `CardPreset` | `'none'` | Các preset sẵn có: `glass-frost`, `heavy-frost`, `crystal`... |
+| `blur` | `number` | `12` | Độ mờ của lớp kính (px). |
+| `opacity` | `number` | `0.12` | Độ trong suốt của nền (0-1). |
+| `distortion` | `string` | `'none'` | Kiểu biến dạng: `wavy`, `frosted`, `grain`, `ripple`, `mist`. |
+| `shadow` | `string` \| `boolean` | `false` | Kiểu đổ bóng: `mist`, `reflex`. |
+
+### CmModal Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `v-model` | `boolean` | `false` | Trạng thái hiển thị (Bắt buộc). |
+| `title` | `string` | `''` | Tiêu đề của Modal. |
+| `width` | `string` | `'500px'` | Chiều rộng tối đa của Modal. |
+| `distortion`| `string` | `'frosted'`| Kiểu biến dạng bề mặt kính. |
+| `showClose` | `boolean` | `true` | Hiển thị nút đóng (X). |
+
+### CmToolbar Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `position` | `string` | `'static'`| Vị trí: `top`, `bottom`, `static`. |
+| `floating` | `boolean` | `false` | Hiển thị dạng trôi nổi (có margin). |
+| `narrow` | `boolean` | `false` | Giảm kích thước padding dọc. |
+| `distortion`| `string` | `'mist'` | Kiểu biến dạng bề mặt kính. |
+| `shadow` | `string` | `'reflex'`| Hiệu ứng đổ bóng đặc thù. |
+
+---
+
+## 🔐 Bảo mật & Bản quyền
+
+Đâ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:
+
+- Linh kiện sẽ chuyển sang trạng thái **Secure Lock** (Giao diện tối giản).
+- Hiển thị thông báo lỗi trực tiếp từ hệ thống (Vd: **"LICENSE HAS EXPIRED"**).
+- Các bộ lọc cao cấp sẽ bị vô hiệu hóa để bảo vệ tài sản trí tuệ.
+
+Bạn có thể kiểm tra trạng thái bản quyền:
+
+```typescript
+import { getLicenseStatus } from "glass-studio-ui-pro";
+
+const status = getLicenseStatus();
+if (!status.isValid) {
+  console.error("Lỗi bản quyền:", status.message);
+}
+```
+
+---
+
+## 📄 Bản quyền
+
+(C) 2026 Glass Studio & CM Team. Mọi quyền được bảo lưu.

package/dist/components/CmButton.vue.d.ts

@@ -1,5 +1,6 @@
 interface Props {
-    variant?: 'default' | 'primary' | 'ghost';
+    variant?: 'default' | 'primary' | 'ghost' | 'solid';
+    type?: 'glass-frost' | 'light-frost' | 'heavy-frost' | 'grain-frost' | 'fine-frost' | 'soft-mist';
     active?: boolean;
     glow?: boolean;
     blur?: number;
@@ -21,11 +22,12 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
+    type: "glass-frost" | "light-frost" | "heavy-frost" | "grain-frost" | "fine-frost" | "soft-mist";
     blur: number;
     opacity: number;
     distortion: "none" | "wavy" | "frosted" | "grain" | "ripple" | "mist";
     shadow: boolean | string;
-    variant: "default" | "primary" | "ghost";
+    variant: "default" | "primary" | "ghost" | "solid";
     active: boolean;
     glow: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;

package/dist/components/CmCard.vue.d.ts

@@ -1,4 +1,4 @@
-export type CardPreset = 'glass-frost' | 'light-frost' | 'heavy-frost' | 'grain-frost' | 'fine-frost' | 'soft-mist' | 'crystal' | 'deep-velvet' | 'frosted' | 'none' | 'glass';
+export type CardPreset = 'glass-frost' | 'light-frost' | 'heavy-frost' | 'grain-frost' | 'fine-frost' | 'soft-mist';
 export type DistortionType = 'none' | 'wavy' | 'frosted' | 'grain' | 'ripple' | 'mist';
 interface Props {
     type?: CardPreset;

package/dist/components/CmModal.vue.d.ts

@@ -0,0 +1,45 @@
+interface Props {
+    modelValue: boolean;
+    title?: string;
+    width?: string;
+    blur?: number;
+    opacity?: number;
+    distortion?: "none" | "wavy" | "frosted" | "grain" | "ripple" | "mist";
+    shadow?: boolean | string;
+    showClose?: boolean;
+    type?: "none" | "glass-frost" | "light-frost" | "heavy-frost" | "grain-frost" | "fine-frost" | "soft-mist" | "crystal";
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: "none" | "glass-frost" | "light-frost" | "heavy-frost" | "grain-frost" | "fine-frost" | "soft-mist" | "crystal";
+    blur: number;
+    opacity: number;
+    distortion: "none" | "wavy" | "frosted" | "grain" | "ripple" | "mist";
+    shadow: boolean | string;
+    title: string;
+    width: string;
+    showClose: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/CmToolbar.vue.d.ts

@@ -0,0 +1,42 @@
+interface Props {
+    position?: "top" | "bottom" | "static";
+    floating?: boolean;
+    width?: "full" | "fit" | "floating";
+    type?: "glass-frost" | "light-frost" | "heavy-frost" | "grain-frost" | "fine-frost" | "soft-mist";
+    blur?: number;
+    opacity?: number;
+    distortion?: "none" | "wavy" | "frosted" | "grain" | "ripple" | "mist";
+    shadow?: boolean | string;
+    height?: string;
+    narrow?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        left?(_: {}): any;
+        default?(_: {}): any;
+        right?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    type: "glass-frost" | "light-frost" | "heavy-frost" | "grain-frost" | "fine-frost" | "soft-mist";
+    blur: number;
+    opacity: number;
+    distortion: "none" | "wavy" | "frosted" | "grain" | "ripple" | "mist";
+    shadow: boolean | string;
+    position: "top" | "bottom" | "static";
+    height: string;
+    width: "full" | "fit" | "floating";
+    floating: boolean;
+    narrow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -2,8 +2,10 @@ import { default as CmCard } from './components/CmCard.vue';
 import { default as CmButton } from './components/CmButton.vue';
 import { default as CmCheckbox } from './components/CmCheckbox.vue';
 import { default as CmFilters } from './components/CmFilters.vue';
+import { default as CmModal } from './components/CmModal.vue';
+import { default as CmToolbar } from './components/CmToolbar.vue';
 import { getLicenseStatus } from './core/license';
-export { CmCard, CmButton, CmCheckbox, CmFilters, getLicenseStatus };
+export { CmCard, CmButton, CmCheckbox, CmFilters, CmModal, CmToolbar, getLicenseStatus };
 export interface GlassUIOptions {
     licenseKey?: string;
 }