@libs-ui/components-buttons-select-color 0.2.355-0 → 0.2.355-10

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 (2) hide show
  1. package/package.json +4 -4
  2. package/README.md +0 -148
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@libs-ui/components-buttons-select-color",
3
- "version": "0.2.355-0",
3
+ "version": "0.2.355-10",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/components-buttons-button": "0.2.355-0",
7
- "@libs-ui/components-color-picker": "0.2.355-0",
8
- "@libs-ui/components-popover": "0.2.355-0",
6
+ "@libs-ui/components-buttons-button": "0.2.355-10",
7
+ "@libs-ui/components-color-picker": "0.2.355-10",
8
+ "@libs-ui/components-popover": "0.2.355-10",
9
9
  "@ngx-translate/core": "^15.0.0"
10
10
  },
11
11
  "sideEffects": false,
package/README.md DELETED
@@ -1,148 +0,0 @@
1
- # Buttons Select Color
2
-
3
- ## Giới thiệu
4
-
5
- `select-color` là một component nút kết hợp bộ chọn màu (Color Picker) cho Angular. Cho phép người dùng chọn màu sắc từ popover, hỗ trợ cấu hình tùy chỉnh, áp dụng ngay hoặc chờ xác nhận, và tùy chỉnh hiển thị nút.
6
-
7
- ## Tính năng
8
-
9
- - Mở popover Color Picker khi click vào nút tùy chỉnh
10
- - Tùy chỉnh trigger button (nhãn, icon, kiểu, class)
11
- - Hỗ trợ cấu hình `customOptions` cho Color Picker
12
- - Hỗ trợ `applyNow`: tự động emit khi chọn màu nếu `true`
13
- - Hỗ trợ `externalContent`: sử dụng nội dung bên ngoài làm trigger
14
- - Tùy chọn hướng hiển thị `direction` và `zIndex` của popover
15
- - Phát sự kiện `outColorChange` và `outColorChangeMultipleType` khi màu thay đổi
16
-
17
- ## Cài đặt
18
-
19
- ### Yêu cầu
20
-
21
- - Angular 18.0.0 trở lên
22
- - Tailwind CSS 3.3.0 trở lên
23
-
24
- ### Hướng dẫn
25
-
26
- Để cài đặt component `select-color`, sử dụng npm hoặc yarn:
27
-
28
- ```bash
29
- npm install @libs-ui/components-buttons-select-color
30
- ```
31
-
32
- hoặc
33
-
34
- ```bash
35
- yarn add @libs-ui/components-buttons-select-color
36
- ```
37
-
38
- ## Sử dụng
39
-
40
- ### Cách 1: Import inline template
41
-
42
- ```typescript
43
- import { Component } from '@angular/core';
44
- import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
45
-
46
- @Component({
47
- selector: 'app-example',
48
- standalone: true,
49
- imports: [LibsUiComponentsButtonsSelectColorComponent],
50
- template: `
51
- <libs_ui-components-buttons-select_color
52
- [button]="{ label: 'Chọn màu', type: 'button-primary' }"
53
- [customOptions]="{ /* cấu hình picker */ }"
54
- [applyNow]="false"
55
- (outColorChange)="onColorChange($event)"></libs_ui-components-buttons-select_color>
56
- `,
57
- })
58
- export class ExampleComponent {
59
- onColorChange(color: string) {
60
- console.log('Màu đã chọn:', color);
61
- }
62
- }
63
- ```
64
-
65
- ### Cách 2: Sử dụng file HTML riêng biệt
66
-
67
- ```html
68
- <!-- example.component.html -->
69
- <libs_ui-components-buttons-select_color
70
- [button]="{ label: 'Chọn màu', classIconLeft: 'text-red-500', type: 'button-outline' }"
71
- [direction]="'top'"
72
- [externalContent]="false"
73
- [zIndex]="1500"
74
- (outColorChangeMultipleType)="onMultiColorChange($event)"></libs_ui-components-buttons-select_color>
75
- ```
76
-
77
- ```typescript
78
- // example.component.ts
79
- import { Component } from '@angular/core';
80
- import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
81
-
82
- @Component({
83
- selector: 'app-example',
84
- standalone: true,
85
- imports: [LibsUiComponentsButtonsSelectColorComponent],
86
- templateUrl: './example.component.html',
87
- })
88
- export class ExampleComponent {}
89
- ```
90
-
91
- ## Công nghệ sử dụng
92
-
93
- - **Angular 18**: standalone components, signals, control flow
94
- - **Tailwind CSS**: quản lý style, tiện lợi để xây dựng demo
95
-
96
- ## API Reference
97
-
98
- ### Inputs
99
-
100
- | Tên | Kiểu dữ liệu | Mặc định | Mô tả |
101
- | --------------- | ------------------------ | ---------- | ----------------------------------------------------------- |
102
- | button | `IButton` | - | Cấu hình trigger button (label, icon, class, popover, ...). |
103
- | customOptions | `IPickerCustomOptions` | - | Tùy chọn cấu hình cho Color Picker. |
104
- | applyNow | `boolean` | `false` | Nếu `true`, emit `outColorChange` ngay khi chọn màu. |
105
- | externalContent | `boolean` | `false` | Sử dụng nội dung bên ngoài làm trigger. |
106
- | direction | `TYPE_POPOVER_DIRECTION` | `'bottom'` | Hướng hiển thị của popover. |
107
- | zIndex | `number` | `1200` | Z-index của popover. |
108
-
109
- ### Outputs
110
-
111
- | Tên | Kiểu dữ liệu | Mô tả |
112
- | -------------------------- | -------------------------------- | ------------------------------------------- |
113
- | outColorChange | `string` | Sự kiện emit màu khi chọn (dạng hex). |
114
- | outColorChangeMultipleType | `IOutputColorChangeMultipleType` | Sự kiện emit nhiều định dạng màu khác nhau. |
115
-
116
- ### Interfaces
117
-
118
- #### IPickerCustomOptions
119
-
120
- ```typescript
121
- export interface IPickerCustomOptions {
122
- slBarSize?: number[];
123
- hueBarSize?: number[];
124
- alphaBarSize?: number[];
125
- showHsl?: boolean;
126
- showRgb?: boolean;
127
- showHex?: boolean;
128
- showAlpha?: boolean;
129
- color?: string | number[];
130
- format?: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'color';
131
- }
132
- ```
133
-
134
- Mô tả: Tùy chọn cấu hình cho Color Picker.
135
-
136
- #### IOutputColorChangeMultipleType
137
-
138
- ```typescript
139
- export interface IOutputColorChangeMultipleType {
140
- rgba: string;
141
- rgb: string;
142
- hex: string;
143
- hsl: string;
144
- hsla: string;
145
- }
146
- ```
147
-
148
- Mô tả: Đối tượng chứa nhiều định dạng giá trị màu khi chọn.