@sunggang/ui-lib 0.4.36 → 0.4.37
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/CkEditor.cjs.js +70 -9
- package/CkEditor.esm.js +70 -9
- package/button.cjs.js +2 -1
- package/button.esm.js +2 -1
- package/index.cjs.css +24 -0
- package/index.esm.css +24 -0
- package/package.json +1 -1
- package/src/components/ui/button.d.ts +1 -1
- package/src/lib/Ckeditor/index.d.ts +11 -4
- package/src/lib/Form/types.d.ts +1 -0
package/CkEditor.cjs.js
CHANGED
|
@@ -12,17 +12,78 @@ require('./FieldLabel.cjs.js');
|
|
|
12
12
|
require('@iconify/react');
|
|
13
13
|
require('./common.cjs.js');
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
15
|
+
function _define_property(obj, key, value) {
|
|
16
|
+
if (key in obj) {
|
|
17
|
+
Object.defineProperty(obj, key, {
|
|
18
|
+
value: value,
|
|
19
|
+
enumerable: true,
|
|
20
|
+
configurable: true,
|
|
21
|
+
writable: true
|
|
22
|
+
});
|
|
23
|
+
} else {
|
|
24
|
+
obj[key] = value;
|
|
25
|
+
}
|
|
26
|
+
return obj;
|
|
27
|
+
}
|
|
28
|
+
function _object_spread(target) {
|
|
29
|
+
for(var i = 1; i < arguments.length; i++){
|
|
30
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
|
31
|
+
var ownKeys = Object.keys(source);
|
|
32
|
+
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
33
|
+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
34
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
35
|
+
}));
|
|
23
36
|
}
|
|
37
|
+
ownKeys.forEach(function(key) {
|
|
38
|
+
_define_property(target, key, source[key]);
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
return target;
|
|
42
|
+
}
|
|
43
|
+
var Ckeditor = function(param) {
|
|
44
|
+
var item = param.item, _param_config = param.config, config = _param_config === void 0 ? {} : _param_config;
|
|
45
|
+
// 確保配置對象是安全的
|
|
46
|
+
var safeConfig = _object_spread({
|
|
47
|
+
uploadUrl: "",
|
|
48
|
+
fieldName: "custom_image",
|
|
49
|
+
authToken: "custom_image_token"
|
|
50
|
+
}, config);
|
|
51
|
+
// 確保 customUpload 配置是一個有效對象
|
|
52
|
+
var editorConfig = {
|
|
53
|
+
customUpload: (item === null || item === void 0 ? void 0 : item.config) || safeConfig
|
|
54
|
+
};
|
|
55
|
+
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
56
|
+
className: [
|
|
57
|
+
item === null || item === void 0 ? void 0 : item.className
|
|
58
|
+
].join(" "),
|
|
59
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(BaseCkeditor.dist.exports.CKEditor, {
|
|
60
|
+
editor: BaseCkeditor.Editor,
|
|
61
|
+
data: (item === null || item === void 0 ? void 0 : item.defaultValue) || "",
|
|
62
|
+
config: editorConfig,
|
|
63
|
+
onChange: function(_, editor) {
|
|
64
|
+
var data = editor.getData();
|
|
65
|
+
if (item === null || item === void 0 ? void 0 : item.onChange) {
|
|
66
|
+
item.onChange(data);
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
onReady: function(editor) {
|
|
70
|
+
if ((item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)) {
|
|
71
|
+
editor.enableReadOnlyMode((item === null || item === void 0 ? void 0 : item.name) || "custom_editor");
|
|
72
|
+
}
|
|
73
|
+
var editorElement = editor.ui.view.editable.element;
|
|
74
|
+
if (editorElement) {
|
|
75
|
+
editorElement.style.height = (item === null || item === void 0 ? void 0 : item.height) || "300px";
|
|
76
|
+
editorElement.style.backgroundColor = (item === null || item === void 0 ? void 0 : item.bgColor) || "white";
|
|
77
|
+
// Focus時高度維持一樣
|
|
78
|
+
editor.ui.view.editable.on("change:isFocused", function() {
|
|
79
|
+
editorElement.style.height = (item === null || item === void 0 ? void 0 : item.height) || "300px";
|
|
80
|
+
editorElement.style.backgroundColor = (item === null || item === void 0 ? void 0 : item.bgColor) || "white";
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
})
|
|
24
85
|
});
|
|
25
86
|
};
|
|
26
87
|
|
|
27
88
|
exports.BaseCkeditor = BaseCkeditor.BaseCkeditor;
|
|
28
|
-
exports.CkEditor =
|
|
89
|
+
exports.CkEditor = Ckeditor;
|
package/CkEditor.esm.js
CHANGED
|
@@ -9,16 +9,77 @@ import './FieldLabel.esm.js';
|
|
|
9
9
|
import '@iconify/react';
|
|
10
10
|
import './common.esm.js';
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
function _define_property(obj, key, value) {
|
|
13
|
+
if (key in obj) {
|
|
14
|
+
Object.defineProperty(obj, key, {
|
|
15
|
+
value: value,
|
|
16
|
+
enumerable: true,
|
|
17
|
+
configurable: true,
|
|
18
|
+
writable: true
|
|
19
|
+
});
|
|
20
|
+
} else {
|
|
21
|
+
obj[key] = value;
|
|
22
|
+
}
|
|
23
|
+
return obj;
|
|
24
|
+
}
|
|
25
|
+
function _object_spread(target) {
|
|
26
|
+
for(var i = 1; i < arguments.length; i++){
|
|
27
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
|
28
|
+
var ownKeys = Object.keys(source);
|
|
29
|
+
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
30
|
+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
31
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
32
|
+
}));
|
|
20
33
|
}
|
|
34
|
+
ownKeys.forEach(function(key) {
|
|
35
|
+
_define_property(target, key, source[key]);
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
return target;
|
|
39
|
+
}
|
|
40
|
+
var Ckeditor = function(param) {
|
|
41
|
+
var item = param.item, _param_config = param.config, config = _param_config === void 0 ? {} : _param_config;
|
|
42
|
+
// 確保配置對象是安全的
|
|
43
|
+
var safeConfig = _object_spread({
|
|
44
|
+
uploadUrl: "",
|
|
45
|
+
fieldName: "custom_image",
|
|
46
|
+
authToken: "custom_image_token"
|
|
47
|
+
}, config);
|
|
48
|
+
// 確保 customUpload 配置是一個有效對象
|
|
49
|
+
var editorConfig = {
|
|
50
|
+
customUpload: (item === null || item === void 0 ? void 0 : item.config) || safeConfig
|
|
51
|
+
};
|
|
52
|
+
return /*#__PURE__*/ jsx("div", {
|
|
53
|
+
className: [
|
|
54
|
+
item === null || item === void 0 ? void 0 : item.className
|
|
55
|
+
].join(" "),
|
|
56
|
+
children: /*#__PURE__*/ jsx(dist.exports.CKEditor, {
|
|
57
|
+
editor: Editor,
|
|
58
|
+
data: (item === null || item === void 0 ? void 0 : item.defaultValue) || "",
|
|
59
|
+
config: editorConfig,
|
|
60
|
+
onChange: function(_, editor) {
|
|
61
|
+
var data = editor.getData();
|
|
62
|
+
if (item === null || item === void 0 ? void 0 : item.onChange) {
|
|
63
|
+
item.onChange(data);
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
onReady: function(editor) {
|
|
67
|
+
if ((item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)) {
|
|
68
|
+
editor.enableReadOnlyMode((item === null || item === void 0 ? void 0 : item.name) || "custom_editor");
|
|
69
|
+
}
|
|
70
|
+
var editorElement = editor.ui.view.editable.element;
|
|
71
|
+
if (editorElement) {
|
|
72
|
+
editorElement.style.height = (item === null || item === void 0 ? void 0 : item.height) || "300px";
|
|
73
|
+
editorElement.style.backgroundColor = (item === null || item === void 0 ? void 0 : item.bgColor) || "white";
|
|
74
|
+
// Focus時高度維持一樣
|
|
75
|
+
editor.ui.view.editable.on("change:isFocused", function() {
|
|
76
|
+
editorElement.style.height = (item === null || item === void 0 ? void 0 : item.height) || "300px";
|
|
77
|
+
editorElement.style.backgroundColor = (item === null || item === void 0 ? void 0 : item.bgColor) || "white";
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
})
|
|
21
82
|
});
|
|
22
83
|
};
|
|
23
84
|
|
|
24
|
-
export { CkEditor };
|
|
85
|
+
export { Ckeditor as CkEditor };
|
package/button.cjs.js
CHANGED
|
@@ -114,7 +114,8 @@ var buttonVariants = classVarianceAuthority.cva("inline-flex items-center justif
|
|
|
114
114
|
outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
|
115
115
|
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
|
116
116
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
117
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
117
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
118
|
+
gradient: "bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white shadow-lg hover:shadow-xl hover:scale-105 transform transition-all duration-200"
|
|
118
119
|
},
|
|
119
120
|
size: {
|
|
120
121
|
default: "h-9 px-4 py-2",
|
package/button.esm.js
CHANGED
|
@@ -92,7 +92,8 @@ var buttonVariants = cva("inline-flex items-center justify-center whitespace-now
|
|
|
92
92
|
outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
|
93
93
|
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
|
94
94
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
95
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
95
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
96
|
+
gradient: "bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white shadow-lg hover:shadow-xl hover:scale-105 transform transition-all duration-200"
|
|
96
97
|
},
|
|
97
98
|
size: {
|
|
98
99
|
default: "h-9 px-4 py-2",
|
package/index.cjs.css
CHANGED
|
@@ -2351,6 +2351,10 @@ video {
|
|
|
2351
2351
|
.border-\[top\2c left\2c right\2c bottom\] {
|
|
2352
2352
|
border-color: top,left,right,bottom;
|
|
2353
2353
|
}
|
|
2354
|
+
.border-blue-500 {
|
|
2355
|
+
--tw-border-opacity: 1;
|
|
2356
|
+
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
|
|
2357
|
+
}
|
|
2354
2358
|
.border-gray-200 {
|
|
2355
2359
|
--tw-border-opacity: 1;
|
|
2356
2360
|
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
|
@@ -2613,6 +2617,9 @@ video {
|
|
|
2613
2617
|
.bg-gradient-to-br {
|
|
2614
2618
|
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
|
|
2615
2619
|
}
|
|
2620
|
+
.bg-gradient-to-r {
|
|
2621
|
+
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
2622
|
+
}
|
|
2616
2623
|
.from-blue-500 {
|
|
2617
2624
|
--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
|
|
2618
2625
|
--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
|
|
@@ -2638,6 +2645,10 @@ video {
|
|
|
2638
2645
|
--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
|
|
2639
2646
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
2640
2647
|
}
|
|
2648
|
+
.via-pink-500 {
|
|
2649
|
+
--tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
|
|
2650
|
+
--tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to);
|
|
2651
|
+
}
|
|
2641
2652
|
.to-blue-600 {
|
|
2642
2653
|
--tw-gradient-to: #2563eb var(--tw-gradient-to-position);
|
|
2643
2654
|
}
|
|
@@ -2647,6 +2658,9 @@ video {
|
|
|
2647
2658
|
.to-purple-600 {
|
|
2648
2659
|
--tw-gradient-to: #9333ea var(--tw-gradient-to-position);
|
|
2649
2660
|
}
|
|
2661
|
+
.to-red-500 {
|
|
2662
|
+
--tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
|
|
2663
|
+
}
|
|
2650
2664
|
.to-red-600 {
|
|
2651
2665
|
--tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
|
|
2652
2666
|
}
|
|
@@ -3478,6 +3492,11 @@ video {
|
|
|
3478
3492
|
.focus-within\:z-20:focus-within {
|
|
3479
3493
|
z-index: 20;
|
|
3480
3494
|
}
|
|
3495
|
+
.hover\:scale-105:hover {
|
|
3496
|
+
--tw-scale-x: 1.05;
|
|
3497
|
+
--tw-scale-y: 1.05;
|
|
3498
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
3499
|
+
}
|
|
3481
3500
|
.hover\:border-gray-400:hover {
|
|
3482
3501
|
--tw-border-opacity: 1;
|
|
3483
3502
|
border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
|
|
@@ -3707,6 +3726,11 @@ video {
|
|
|
3707
3726
|
.hover\:opacity-100:hover {
|
|
3708
3727
|
opacity: 1;
|
|
3709
3728
|
}
|
|
3729
|
+
.hover\:shadow-xl:hover {
|
|
3730
|
+
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
3731
|
+
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
|
3732
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
3733
|
+
}
|
|
3710
3734
|
.focus\:border-amber-500:focus {
|
|
3711
3735
|
--tw-border-opacity: 1;
|
|
3712
3736
|
border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
|
package/index.esm.css
CHANGED
|
@@ -2351,6 +2351,10 @@ video {
|
|
|
2351
2351
|
.border-\[top\2c left\2c right\2c bottom\] {
|
|
2352
2352
|
border-color: top,left,right,bottom;
|
|
2353
2353
|
}
|
|
2354
|
+
.border-blue-500 {
|
|
2355
|
+
--tw-border-opacity: 1;
|
|
2356
|
+
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
|
|
2357
|
+
}
|
|
2354
2358
|
.border-gray-200 {
|
|
2355
2359
|
--tw-border-opacity: 1;
|
|
2356
2360
|
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
|
@@ -2613,6 +2617,9 @@ video {
|
|
|
2613
2617
|
.bg-gradient-to-br {
|
|
2614
2618
|
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
|
|
2615
2619
|
}
|
|
2620
|
+
.bg-gradient-to-r {
|
|
2621
|
+
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
2622
|
+
}
|
|
2616
2623
|
.from-blue-500 {
|
|
2617
2624
|
--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
|
|
2618
2625
|
--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
|
|
@@ -2638,6 +2645,10 @@ video {
|
|
|
2638
2645
|
--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
|
|
2639
2646
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
2640
2647
|
}
|
|
2648
|
+
.via-pink-500 {
|
|
2649
|
+
--tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
|
|
2650
|
+
--tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to);
|
|
2651
|
+
}
|
|
2641
2652
|
.to-blue-600 {
|
|
2642
2653
|
--tw-gradient-to: #2563eb var(--tw-gradient-to-position);
|
|
2643
2654
|
}
|
|
@@ -2647,6 +2658,9 @@ video {
|
|
|
2647
2658
|
.to-purple-600 {
|
|
2648
2659
|
--tw-gradient-to: #9333ea var(--tw-gradient-to-position);
|
|
2649
2660
|
}
|
|
2661
|
+
.to-red-500 {
|
|
2662
|
+
--tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
|
|
2663
|
+
}
|
|
2650
2664
|
.to-red-600 {
|
|
2651
2665
|
--tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
|
|
2652
2666
|
}
|
|
@@ -3478,6 +3492,11 @@ video {
|
|
|
3478
3492
|
.focus-within\:z-20:focus-within {
|
|
3479
3493
|
z-index: 20;
|
|
3480
3494
|
}
|
|
3495
|
+
.hover\:scale-105:hover {
|
|
3496
|
+
--tw-scale-x: 1.05;
|
|
3497
|
+
--tw-scale-y: 1.05;
|
|
3498
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
3499
|
+
}
|
|
3481
3500
|
.hover\:border-gray-400:hover {
|
|
3482
3501
|
--tw-border-opacity: 1;
|
|
3483
3502
|
border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
|
|
@@ -3707,6 +3726,11 @@ video {
|
|
|
3707
3726
|
.hover\:opacity-100:hover {
|
|
3708
3727
|
opacity: 1;
|
|
3709
3728
|
}
|
|
3729
|
+
.hover\:shadow-xl:hover {
|
|
3730
|
+
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
3731
|
+
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
|
3732
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
3733
|
+
}
|
|
3710
3734
|
.focus\:border-amber-500:focus {
|
|
3711
3735
|
--tw-border-opacity: 1;
|
|
3712
3736
|
border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "custom" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
4
|
+
variant?: "custom" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "gradient" | null | undefined;
|
|
5
5
|
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
7
7
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { FormItem } from '../Form/types';
|
|
3
|
+
interface CkEditorConfig {
|
|
4
|
+
uploadUrl?: string;
|
|
5
|
+
fieldName?: string;
|
|
6
|
+
authToken?: string;
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}
|
|
2
9
|
interface CkEditorProps {
|
|
3
|
-
|
|
4
|
-
|
|
10
|
+
item: FormItem;
|
|
11
|
+
config?: CkEditorConfig;
|
|
5
12
|
}
|
|
6
|
-
declare const
|
|
7
|
-
export default
|
|
13
|
+
declare const Ckeditor: React.FC<CkEditorProps>;
|
|
14
|
+
export default Ckeditor;
|