@udi-organization/udi-package 1.0.36 → 1.0.41
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 +65 -90
- package/dist/index.cjs.css +1 -0
- package/dist/index.cjs.js +2458 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.esm.css +1 -0
- package/dist/index.esm.js +2453 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +37 -63
- package/dist/udi-package.js +0 -2
- package/dist/udi-package.js.LICENSE.txt +0 -1
package/README.md
CHANGED
|
@@ -1,127 +1,102 @@
|
|
|
1
|
-
#
|
|
1
|
+
# test1202
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
測試用的 npm 套件，包含 React Button component 和實用工具函數。
|
|
4
4
|
|
|
5
5
|
## 安裝
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install
|
|
8
|
+
npm install test1202
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## 使用方式
|
|
12
12
|
|
|
13
|
-
###
|
|
13
|
+
### Button Component
|
|
14
14
|
|
|
15
|
-
```
|
|
16
|
-
import
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
// 使用輔助功能
|
|
20
|
-
const isObj = UdiPackage.isObject({}); // true
|
|
21
|
-
await UdiPackage.sleep(1000); // 延遲 1 秒
|
|
15
|
+
```jsx
|
|
16
|
+
import { Button } from 'test1202';
|
|
22
17
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
18
|
+
function App() {
|
|
19
|
+
return (
|
|
20
|
+
<div>
|
|
21
|
+
<Button onClick={() => alert('Clicked!')}>
|
|
22
|
+
Primary Button
|
|
23
|
+
</Button>
|
|
26
24
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
### 具名匯入
|
|
25
|
+
<Button variant="secondary" onClick={() => console.log('Secondary')}>
|
|
26
|
+
Secondary Button
|
|
27
|
+
</Button>
|
|
32
28
|
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
<Button variant="success">
|
|
30
|
+
Success Button
|
|
31
|
+
</Button>
|
|
35
32
|
|
|
33
|
+
<Button variant="danger">
|
|
34
|
+
Danger Button
|
|
35
|
+
</Button>
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
<Button disabled>
|
|
38
|
+
Disabled Button
|
|
39
|
+
</Button>
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
40
43
|
```
|
|
41
44
|
|
|
42
|
-
|
|
45
|
+
#### Props
|
|
43
46
|
|
|
44
|
-
|
|
47
|
+
| Prop | Type | Default | Description |
|
|
48
|
+
|------|------|---------|-------------|
|
|
49
|
+
| `children` | `ReactNode` | - | 按鈕內容 |
|
|
50
|
+
| `onClick` | `Function` | - | 點擊事件處理函數 |
|
|
51
|
+
| `variant` | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` | `'primary'` | 按鈕樣式變體 |
|
|
52
|
+
| `disabled` | `boolean` | `false` | 是否禁用按鈕 |
|
|
53
|
+
| `className` | `string` | `''` | 自訂 CSS class |
|
|
45
54
|
|
|
46
|
-
###
|
|
55
|
+
### 工具函數
|
|
47
56
|
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
npm run build
|
|
51
|
-
|
|
52
|
-
# 開發環境打包
|
|
53
|
-
npm run build:dev
|
|
54
|
-
|
|
55
|
-
# 啟動開發伺服器
|
|
56
|
-
npm run dev
|
|
57
|
-
```
|
|
57
|
+
```javascript
|
|
58
|
+
import { greet, add } from 'test1202';
|
|
58
59
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
- `udi-package.js` - 生產環境版本（已壓縮）
|
|
64
|
-
- `udi-package.dev.js` - 開發環境版本（包含 source map）
|
|
65
|
-
|
|
66
|
-
### 瀏覽器使用
|
|
67
|
-
|
|
68
|
-
```html
|
|
69
|
-
<!DOCTYPE html>
|
|
70
|
-
<html>
|
|
71
|
-
<head>
|
|
72
|
-
<title>UDI Package 測試</title>
|
|
73
|
-
</head>
|
|
74
|
-
<body>
|
|
75
|
-
<script src="dist/udi-package.js"></script>
|
|
76
|
-
<script>
|
|
77
|
-
// 全域變數 UdiPackage 可用
|
|
78
|
-
console.log(UdiPackage.add(5, 3));
|
|
79
|
-
UdiPackage.notify('測試通知', 'success');
|
|
80
|
-
</script>
|
|
81
|
-
</body>
|
|
82
|
-
</html>
|
|
60
|
+
console.log(greet('World')); // "Hello, World! 103"
|
|
61
|
+
console.log(add(2, 3)); // 5
|
|
62
|
+
console.log(add(10, 25)); // 35
|
|
83
63
|
```
|
|
84
64
|
|
|
85
|
-
##
|
|
86
|
-
|
|
87
|
-
### 數學功能
|
|
88
|
-
- `add(a, b)` - 加法運算
|
|
89
|
-
- `subtract(a, b)` - 減法運算
|
|
90
|
-
|
|
91
|
-
### 輔助功能
|
|
92
|
-
- `isObject(value)` - 檢查是否為物件
|
|
93
|
-
- `sleep(ms)` - 延遲執行
|
|
65
|
+
## 功能特色
|
|
94
66
|
|
|
95
|
-
|
|
96
|
-
-
|
|
97
|
-
-
|
|
98
|
-
|
|
99
|
-
### 通知功能
|
|
100
|
-
- `notify(message, type, options)` - 顯示通知
|
|
67
|
+
- ✅ 同時支援 CommonJS 和 ES Modules
|
|
68
|
+
- ✅ 包含多種按鈕樣式變體
|
|
69
|
+
- ✅ 輕量且無額外依賴（除了 React peer dependency）
|
|
101
70
|
|
|
102
71
|
## 開發
|
|
103
72
|
|
|
104
|
-
### 安裝依賴
|
|
105
|
-
|
|
106
73
|
```bash
|
|
74
|
+
# 安裝依賴
|
|
107
75
|
npm install
|
|
108
|
-
```
|
|
109
76
|
|
|
110
|
-
|
|
77
|
+
# 啟動開發環境
|
|
78
|
+
npm run dev
|
|
111
79
|
|
|
112
|
-
|
|
113
|
-
npm
|
|
80
|
+
# 建置套件
|
|
81
|
+
npm run build
|
|
114
82
|
```
|
|
115
83
|
|
|
116
|
-
|
|
84
|
+
開發環境會在 `http://localhost:3000` 啟動，您可以在瀏覽器中即時預覽和測試 component。
|
|
117
85
|
|
|
118
|
-
|
|
119
|
-
# 打包
|
|
120
|
-
npm run build
|
|
86
|
+
## 專案結構
|
|
121
87
|
|
|
122
|
-
|
|
88
|
+
```
|
|
89
|
+
npmPackageTest/
|
|
90
|
+
├── dev/ # 開發測試環境
|
|
91
|
+
├── src/ # 原始碼
|
|
92
|
+
│ ├── Button.jsx # Button component
|
|
93
|
+
│ └── index.js # 主入口
|
|
94
|
+
├── dist/ # 建置輸出
|
|
95
|
+
│ ├── index.cjs.js # CommonJS 版本
|
|
96
|
+
│ └── index.esm.js # ES Module 版本
|
|
97
|
+
└── package.json
|
|
123
98
|
```
|
|
124
99
|
|
|
125
|
-
##
|
|
100
|
+
## License
|
|
126
101
|
|
|
127
|
-
|
|
102
|
+
ISC
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.udi-table td,.udi-table th{border-left:none!important;border-right:none!important}.udi-table-container{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;width:100%}.udi-table-container .error-message{background:#f8d7da;border-left:4px solid #dc3545;border-radius:4px;color:#721c24;font-weight:500;margin-bottom:16px;padding:12px 16px}@media (max-width:768px){.udi-table-container .error-message{font-size:14px;margin:8px}}.udi-table-filter{background:#f8f9fa;border-bottom:1px solid #e9ecef}.udi-table-filter .filter-section .basic-filter{align-items:center;display:flex;flex-wrap:wrap;gap:12px;padding:16px}.udi-table-filter .filter-section .basic-filter .filter-column-selector{align-items:center;display:flex;gap:8px;white-space:nowrap}.udi-table-filter .filter-section .basic-filter .filter-column-selector label{color:#495057;font-size:14px;font-weight:500}.udi-table-filter .filter-section .basic-filter .filter-column-selector .filter-column-select{background:#fff;border:1px solid #ced4da;border-radius:4px;cursor:pointer;font-size:14px;min-width:120px;outline:none;padding:8px 12px;transition:border-color .15s ease-in-out}.udi-table-filter .filter-section .basic-filter .filter-column-selector .filter-column-select:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.udi-table-filter .filter-section .basic-filter .filter-column-selector .filter-column-select:hover{border-color:#adb5bd}.udi-table-filter .filter-section .basic-filter .filter-input{border:1px solid #ced4da;border-radius:4px;flex:1;font-size:14px;min-width:200px;outline:none;padding:8px 12px;transition:border-color .15s ease-in-out}.udi-table-filter .filter-section .basic-filter .filter-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.udi-table-filter .filter-section .basic-filter .advanced-filter-toggle{background:#007bff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:8px 16px;transition:background-color .15s ease-in-out;white-space:nowrap}.udi-table-filter .filter-section .basic-filter .advanced-filter-toggle:hover{background:#0056b3}.udi-table-filter .filter-section .basic-filter .reset-button{background:#6c757d;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:8px 16px;transition:background-color .15s ease-in-out;white-space:nowrap}.udi-table-filter .filter-section .basic-filter .reset-button:hover{background:#5a6268}.udi-table-filter .filter-section .advanced-filter{background:#f1f3f4;border-top:1px solid #e9ecef;padding:16px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-header h4{color:#495057;font-size:16px;font-weight:600;margin:0}.udi-table-filter .filter-section .advanced-filter .advanced-filter-header .clear-advanced-button{background:#dc3545;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;padding:6px 12px;transition:background-color .15s ease-in-out}.udi-table-filter .filter-section .advanced-filter .advanced-filter-header .clear-advanced-button:hover{background:#c82333}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid .advanced-filter-item{display:flex;flex-direction:column;gap:4px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid .advanced-filter-item label{color:#495057;font-size:13px;font-weight:500}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid .advanced-filter-item .advanced-filter-input{background:#fff;border:1px solid #ced4da;border-radius:4px;font-size:14px;outline:none;padding:8px 12px;transition:border-color .15s ease-in-out}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid .advanced-filter-item .advanced-filter-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid .advanced-filter-item .advanced-filter-input:hover{border-color:#adb5bd}.scroll-position-indicator{background:#e3f2fd;border-bottom:1px solid #bbdefb;color:#1565c0;font-family:Courier New,monospace;font-size:12px;padding:8px 16px;text-align:center}.udi-table-wrapper{-webkit-overflow-scrolling:touch;border:1px solid #e9ecef;height:300px;overflow-x:auto;overflow-y:auto}.udi-table-wrapper::-webkit-scrollbar{height:8px;width:8px}.udi-table-wrapper::-webkit-scrollbar-track{background:#f8f9fa;border-radius:4px}.udi-table-wrapper::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.udi-table-wrapper::-webkit-scrollbar-thumb:hover{background:#a0aec0}.udi-table{border-collapse:collapse;font-size:14px;min-width:800px}.udi-table td,.udi-table th{border-bottom:1px solid #e9ecef;max-width:300px;overflow:hidden;padding:12px 16px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.udi-table th{background:#f8f9fa;border-bottom:2px solid #dee2e6;color:#495057;font-weight:600;position:sticky;top:0;z-index:10}.udi-table th.sortable{cursor:pointer;transition:background-color .15s ease-in-out;user-select:none}.udi-table th.sortable:hover{background:#e9ecef}.udi-table th.sortable .sort-icon{opacity:.4}.udi-table th.sorted{background:#e3f2fd;color:#1976d2}.udi-table th.sorted .sort-icon{opacity:1}.udi-table th .th-content{align-items:center;display:flex;justify-content:space-between;min-width:0}.udi-table th .sort-icon{flex-shrink:0;font-size:12px;margin-left:8px;opacity:.7}.udi-table tbody tr{transition:background-color .15s ease-in-out}.udi-table tbody tr:hover{background:#f8f9fa}.udi-table tbody tr:nth-child(2n){background:#fdfdfe}.udi-table tbody tr:nth-child(2n):hover{background:#f8f9fa}.udi-table tbody td:first-child{background:inherit;border-right:1px solid #e9ecef;left:0;z-index:5}.udi-table .no-data{color:#6c757d;font-style:italic;padding:32px;text-align:center}.udi-table .loading-state{padding:40px 20px;text-align:center}.udi-table .loading-state .loading-spinner{align-items:center;display:flex;flex-direction:column;gap:12px}.udi-table .loading-state .loading-spinner .spinner{animation:spin 1s linear infinite;border:3px solid #f3f3f3;border-radius:50%;border-top-color:#007bff;height:32px;width:32px}.udi-table .loading-state .loading-spinner span{color:#868e96;font-size:14px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.udi-table-pagination{align-items:center;background:#f8f9fa;border-top:1px solid #e9ecef;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:16px}.udi-table-pagination .pagination-info{color:#6c757d;display:flex;flex-direction:column;font-size:14px;gap:8px}.udi-table-pagination .pagination-info .page-size-selector{align-items:center;display:flex;gap:8px}.udi-table-pagination .pagination-info .page-size-selector label{color:#495057;font-weight:500}.udi-table-pagination .pagination-info .page-size-selector .page-size-select{background:#fff;border:1px solid #ced4da;border-radius:4px;cursor:pointer;font-size:14px;outline:none;padding:4px 8px;transition:border-color .15s ease-in-out}.udi-table-pagination .pagination-info .page-size-selector .page-size-select:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.udi-table-pagination .pagination-info .page-size-selector .page-size-select:hover{border-color:#adb5bd}.udi-table-pagination .pagination-info .page-size-selector span{color:#495057}.udi-table-pagination .pagination-info .pagination-summary{font-size:13px}.udi-table-pagination .pagination-controls{align-items:center;display:flex;gap:4px}.udi-table-pagination .pagination-controls .current-page-mobile{background:#007bff;border:1px solid #007bff;border-radius:4px;color:#fff;font-size:14px;font-weight:500;min-width:60px;padding:8px 12px;text-align:center}.udi-table-pagination .pagination-controls .pagination-button{background:#fff;border:1px solid #ced4da;border-radius:4px;color:#495057;cursor:pointer;font-size:14px;min-width:40px;padding:6px 12px;transition:all .15s ease-in-out}.udi-table-pagination .pagination-controls .pagination-button:hover:not(:disabled){background:#e9ecef;border-color:#adb5bd}.udi-table-pagination .pagination-controls .pagination-button:disabled{background:#f8f9fa;color:#6c757d;cursor:not-allowed;opacity:.6}.udi-table-pagination .pagination-controls .pagination-button.disabled{background:#f1f3f4;border-color:#dadce0;color:#9aa0a6;cursor:not-allowed;opacity:.5}.udi-table-pagination .pagination-controls .pagination-button.disabled:hover{background:#f1f3f4;border-color:#dadce0}.udi-table-pagination .pagination-controls .pagination-button.active{background:#007bff;border-color:#007bff;color:#fff}.udi-table-pagination .pagination-controls .pagination-button.active:hover{background:#0056b3;border-color:#0056b3}@media (min-width:1200px){.udi-table-wrapper{height:400px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:1199px) and (min-width:992px){.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:991px) and (min-width:768px){.udi-table-container{border-radius:6px}.udi-table-wrapper{height:350px}.udi-table{min-width:600px}.udi-table td,.udi-table th{font-size:13px;max-width:200px;padding:10px 12px}.udi-table-filter .filter-section .basic-filter{flex-wrap:wrap;gap:10px}.udi-table-filter .filter-section .basic-filter .filter-input{min-width:180px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid{gap:10px;grid-template-columns:repeat(2,1fr)}.udi-table-pagination{padding:12px}.udi-table-pagination .pagination-info .page-size-selector{align-items:flex-start;flex-direction:column;gap:4px}}@media (max-width:767px) and (min-width:481px){.udi-table-container{border-radius:4px;margin:0 4px}.udi-table-wrapper{height:300px}.udi-table{min-width:500px}.udi-table td,.udi-table th{font-size:12px;max-width:150px;padding:8px 10px}.udi-table tbody td:first-child,.udi-table th:first-child{background:inherit;border-right:2px solid #e9ecef;font-weight:600;left:0;position:sticky;z-index:5}.scroll-position-indicator{font-size:11px;padding:6px 12px}.udi-table-filter .filter-section .basic-filter{align-items:stretch;flex-direction:column;gap:8px;padding:12px}.udi-table-filter .filter-section .basic-filter .filter-column-selector{justify-content:flex-start}.udi-table-filter .filter-section .basic-filter .filter-column-selector label{font-size:13px}.udi-table-filter .filter-section .basic-filter .filter-column-selector .filter-column-select{flex:1;font-size:14px;min-width:100px}.udi-table-filter .filter-section .basic-filter .filter-input{font-size:16px;min-width:auto}.udi-table-filter .filter-section .basic-filter .advanced-filter-toggle,.udi-table-filter .filter-section .basic-filter .reset-button{align-self:stretch;font-size:14px}.udi-table-filter .filter-section .advanced-filter{padding:12px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-header{align-items:stretch;flex-direction:column;gap:8px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-header h4{font-size:14px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-header .clear-advanced-button{align-self:flex-end}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid{gap:8px;grid-template-columns:1fr}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid .advanced-filter-item label{font-size:12px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid .advanced-filter-item .advanced-filter-input{font-size:16px}.udi-table-pagination{align-items:stretch;flex-direction:column;gap:8px;padding:12px}.udi-table-pagination .pagination-info{text-align:center}.udi-table-pagination .pagination-info .page-size-selector{flex-wrap:wrap;justify-content:center}.udi-table-pagination .pagination-controls{justify-content:center}.udi-table-pagination .pagination-controls .pagination-button{font-size:13px;min-width:36px;padding:8px 12px}}@media (max-width:480px){.udi-table-container{border-left:1px solid #e9ecef;border-radius:0;border-right:1px solid #e9ecef;box-shadow:none;margin:0}.udi-table-wrapper{border:none;height:250px}.udi-table{font-size:11px;min-width:400px}.udi-table td,.udi-table th{font-size:11px;max-width:120px;padding:6px 8px}.udi-table tbody td:first-child,.udi-table th:first-child{min-width:60px}.scroll-position-indicator{font-size:10px;padding:4px 8px}.udi-table-filter .filter-section .basic-filter{gap:6px;padding:8px}.udi-table-filter .filter-section .basic-filter .filter-column-selector label{font-size:12px}.udi-table-filter .filter-section .basic-filter .filter-column-selector .filter-column-select{font-size:13px;padding:6px 8px}.udi-table-filter .filter-section .basic-filter .filter-input{font-size:16px;padding:8px 10px}.udi-table-filter .filter-section .basic-filter .advanced-filter-toggle,.udi-table-filter .filter-section .basic-filter .reset-button{font-size:13px;padding:8px 12px}.udi-table-filter .filter-section .advanced-filter{padding:8px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-header h4{font-size:13px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-header .clear-advanced-button{font-size:11px;padding:4px 8px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid{gap:6px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid .advanced-filter-item label{font-size:11px}.udi-table-filter .filter-section .advanced-filter .advanced-filter-grid .advanced-filter-item .advanced-filter-input{font-size:16px;padding:6px 8px}.udi-table-pagination{gap:6px;padding:8px}.udi-table-pagination .pagination-info{font-size:12px}.udi-table-pagination .pagination-info .page-size-selector{gap:4px}.udi-table-pagination .pagination-info .page-size-selector label{font-size:11px}.udi-table-pagination .pagination-info .page-size-selector .page-size-select{font-size:12px;padding:4px 6px}.udi-table-pagination .pagination-info .pagination-summary{font-size:11px}.udi-table-pagination .pagination-controls{flex-wrap:wrap;gap:2px}.udi-table-pagination .pagination-controls .pagination-button{font-size:11px;min-width:28px;padding:6px 8px}}.udi-table-header{margin:30px 8px}.udi-table-name{display:inline-block;margin-right:auto;vertical-align:middle}.udi-table-name h3{color:#1f2937;font-size:18px;font-weight:600;line-height:1.4;margin:0}.udi-table-free-actions{align-items:center;display:inline-flex!important;flex-wrap:wrap;gap:8px;margin-left:auto;vertical-align:middle}.udi-table-name+.udi-table-free-actions{float:right}.udi-table-free-action-button{align-items:center;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;color:#374151;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:6px;justify-content:center;min-height:36px;min-width:36px;outline:none;padding:8px 12px;transition:all .2s ease}.udi-table-free-action-button:hover{background-color:#f3f4f6;border-color:#9ca3af;box-shadow:0 2px 4px rgba(0,0,0,.1);color:#1f2937;transform:translateY(-1px)}.udi-table-free-action-button:active{background-color:#e5e7eb;box-shadow:0 1px 2px rgba(0,0,0,.1);transform:translateY(0)}.udi-table-free-action-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.udi-table-free-action-button:disabled{background-color:#f9fafb;border-color:#e5e7eb;color:#9ca3af;cursor:not-allowed;opacity:.5}.udi-table-free-action-button:disabled:hover{background-color:#f9fafb;border-color:#e5e7eb;box-shadow:none;transform:none}.udi-table-free-action-button svg{flex-shrink:0;height:18px;width:18px}.udi-table-free-action-button:has(svg:only-child){min-width:36px;padding:8px}.udi-table-free-action-button.primary{background-color:#3b82f6;border-color:#3b82f6;color:#fff}.udi-table-free-action-button.primary:hover{background-color:#2563eb;border-color:#2563eb}.udi-table-free-action-button.success{background-color:#10b981;border-color:#10b981;color:#fff}.udi-table-free-action-button.success:hover{background-color:#059669;border-color:#059669}.udi-table-free-action-button.warning{background-color:#f59e0b;border-color:#f59e0b;color:#fff}.udi-table-free-action-button.warning:hover{background-color:#d97706;border-color:#d97706}.udi-table-free-action-button.danger{background-color:#ef4444;border-color:#ef4444;color:#fff}.udi-table-free-action-button.danger:hover{background-color:#dc2626;border-color:#dc2626}.udi-table-free-action-button.ghost{background-color:transparent;border-color:transparent}.udi-table-free-action-button.ghost:hover{background-color:#f3f4f6;border-color:#e5e7eb}@media (max-width:768px){.udi-table-free-actions-container{gap:6px}.udi-table-free-action-button{font-size:13px;min-height:32px;min-width:32px;padding:6px 10px}.udi-table-free-action-button svg{height:16px;width:16px}}@media (orientation:landscape) and (max-height:500px){.udi-table-wrapper{height:200px}.udi-table-filter .filter-section .basic-filter{flex-direction:row;flex-wrap:wrap}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.udi-table td,.udi-table th{border-width:.5px}}
|