phx-react 1.3.795 → 1.3.798
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/dist/cjs/components/Checkbox/Checkbox.d.ts +1 -0
- package/dist/cjs/components/Checkbox/Checkbox.js +18 -12
- package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/Checkbox/styles/StyleCheckbox.d.ts +1 -1
- package/dist/cjs/components/Checkbox/styles/StyleCheckbox.js +2 -2
- package/dist/cjs/components/Checkbox/styles/StyleCheckbox.js.map +1 -1
- package/dist/cjs/components/LoadingIndicator/loading-indicator.js +6 -1
- package/dist/cjs/components/LoadingIndicator/loading-indicator.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.d.ts +1 -0
- package/dist/esm/components/Checkbox/Checkbox.js +18 -12
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Checkbox/styles/StyleCheckbox.d.ts +1 -1
- package/dist/esm/components/Checkbox/styles/StyleCheckbox.js +2 -2
- package/dist/esm/components/Checkbox/styles/StyleCheckbox.js.map +1 -1
- package/dist/esm/components/LoadingIndicator/loading-indicator.js +6 -1
- package/dist/esm/components/LoadingIndicator/loading-indicator.js.map +1 -1
- package/package.json +2 -2
|
@@ -6,8 +6,8 @@ var react_1 = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
var StyleCheckbox_1 = tslib_1.__importDefault(require("./styles/StyleCheckbox"));
|
|
7
7
|
var types_1 = require("../types");
|
|
8
8
|
var PHXCheckbox = function (_a) {
|
|
9
|
-
var activeData = _a.activeData,
|
|
10
|
-
var
|
|
9
|
+
var activeData = _a.activeData, _b = _a.checkType, checkType = _b === void 0 ? 'default' : _b, children = _a.children, className = _a.className, disabled = _a.disabled, error = _a.error, errorType = _a.errorType, expanded = _a.expanded, helpText = _a.helpText, _c = _a.id, id = _c === void 0 ? 'checkbox' : _c, label = _a.label, onChange = _a.onChange, register = _a.register, _d = _a.isLarge, isLarge = _d === void 0 ? false : _d, title = _a.title, rest = tslib_1.__rest(_a, ["activeData", "checkType", "children", "className", "disabled", "error", "errorType", "expanded", "helpText", "id", "label", "onChange", "register", "isLarge", "title"]);
|
|
10
|
+
var _e = (0, react_1.useState)(false), show = _e[0], setShow = _e[1];
|
|
11
11
|
(0, react_1.useEffect)(function () {
|
|
12
12
|
// @ts-ignore
|
|
13
13
|
setShow(expanded);
|
|
@@ -21,7 +21,9 @@ var PHXCheckbox = function (_a) {
|
|
|
21
21
|
var getBorderClasses = function (type) {
|
|
22
22
|
if (type !== 'with-border')
|
|
23
23
|
return '';
|
|
24
|
-
return (0, types_1.classNames)(
|
|
24
|
+
return (0, types_1.classNames)(isLarge
|
|
25
|
+
? 'py-2.5 rounded-xl border-[0.75px] border-gray-500 px-4 text-sm font-normal shadow-md hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-2 focus:outline-indigo-500 focus:ring-transparent'
|
|
26
|
+
: 'py-1.5 rounded-lg border-[0.5px] border-gray-500 px-3 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error && 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50', disabled && 'bg-gray-50');
|
|
25
27
|
};
|
|
26
28
|
var getColorByActiveData = function (isWithBorder) {
|
|
27
29
|
if (isWithBorder === void 0) { isWithBorder = false; }
|
|
@@ -34,20 +36,24 @@ var PHXCheckbox = function (_a) {
|
|
|
34
36
|
}
|
|
35
37
|
};
|
|
36
38
|
return (react_1["default"].createElement("div", { className: className },
|
|
37
|
-
react_1["default"].createElement(StyleCheckbox_1["default"], { activeData: activeData, id: id }),
|
|
38
|
-
label && react_1["default"].createElement("label", { className: (0, types_1.classNames)(getColorByActiveData(false), 'block text-xs font-normal') }, label),
|
|
39
|
+
react_1["default"].createElement(StyleCheckbox_1["default"], { activeData: activeData, id: id, isLarge: isLarge }),
|
|
40
|
+
label && (react_1["default"].createElement("label", { className: (0, types_1.classNames)(getColorByActiveData(false), isLarge ? 'block text-sm font-normal' : 'block text-xs font-normal') }, label)),
|
|
39
41
|
react_1["default"].createElement("div", { className: (0, types_1.classNames)('flex items-center py-1', getBorderClasses(checkType)) },
|
|
40
42
|
react_1["default"].createElement("div", { className: (0, types_1.classNames)('flex items-center text-xs font-normal leading-5 hover:cursor-pointer', checkType === 'with-border' && 'flex-1', getColorByActiveData(false)) },
|
|
41
|
-
react_1["default"].createElement("input", tslib_1.__assign({}, rest, { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-400 hover:bg-transparent' : getColorByActiveData(true),
|
|
43
|
+
react_1["default"].createElement("input", tslib_1.__assign({}, rest, { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-400 hover:bg-transparent' : getColorByActiveData(true), isLarge
|
|
44
|
+
? 'hidden h-6 w-6 rounded-md border-[0.75px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
|
|
45
|
+
: 'hidden h-4 w-4 rounded border-[0.5px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'), id: id, onChange: handleChange }, register, { disabled: disabled, type: 'checkbox' })),
|
|
42
46
|
react_1["default"].createElement("label", { className: "checkbox ".concat(checkType === 'with-border' && 'flex-1'), htmlFor: id },
|
|
43
|
-
react_1["default"].createElement("span", { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-400 hover:bg-transparent' : getColorByActiveData(true),
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
+
react_1["default"].createElement("span", { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-400 hover:bg-transparent' : getColorByActiveData(true), isLarge
|
|
48
|
+
? 'icon block h-6 w-6 rounded-md border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
|
|
49
|
+
: 'icon block h-4 w-4 rounded border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent') }),
|
|
50
|
+
react_1["default"].createElement("span", { className: (0, types_1.classNames)(isLarge ? 'ml-9 text-sm font-normal' : 'ml-7 font-normal', disabled ? 'text-gray-400 hover:bg-transparent' : getColorByActiveData(false)) }, title)))),
|
|
51
|
+
helpText && show ? (react_1["default"].createElement("div", { className: (0, types_1.classNames)(isLarge ? 'pl-9 text-sm font-light text-gray-400' : 'pl-7 text-xs font-light text-gray-400') }, helpText)) : null,
|
|
52
|
+
show && children ? react_1["default"].createElement("div", { className: (0, types_1.classNames)(isLarge ? 'ml-9' : 'ml-7') }, children) : react_1["default"].createElement(react_1["default"].Fragment, null),
|
|
47
53
|
error && errorType ? (react_1["default"].createElement("div", { className: 'ml-1 mt-1 flex items-center' },
|
|
48
|
-
react_1["default"].createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
54
|
+
react_1["default"].createElement("svg", { className: (0, types_1.classNames)(isLarge ? 'mr-2.5 h-5 w-5 text-red-500' : 'mr-2 h-4 w-4 text-red-500'), fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
49
55
|
react_1["default"].createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
|
|
50
|
-
react_1["default"].createElement("p", { className: 'text-xs text-red-800' }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
56
|
+
react_1["default"].createElement("p", { className: (0, types_1.classNames)(isLarge ? 'text-sm text-red-800' : 'text-xs text-red-800') }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
51
57
|
};
|
|
52
58
|
exports.PHXCheckbox = PHXCheckbox;
|
|
53
59
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;AAAA,qDAAuE;AAEvE,iFAAyD;AACzD,kCAAqC;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,8 +3,8 @@ exports.__esModule = true;
|
|
|
3
3
|
var tslib_1 = require("tslib");
|
|
4
4
|
var react_1 = tslib_1.__importDefault(require("react"));
|
|
5
5
|
var StyledCheckboxLayout = function (_a) {
|
|
6
|
-
var activeData = _a.activeData, id = _a.id;
|
|
7
|
-
return (react_1["default"].createElement("style", null, "\n .checkbox {\n display: inline-block;\n position: relative;\n font-weight: bold;\n cursor: pointer;\n }\n \n .checkbox:active .text {\n transform: scale(0.9);\n }\n \n .checkbox .icon {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n }\n \n .checkbox .icon::before,\n .checkbox .icon::after {\n content: '';\n display: block;\n position: absolute;\n }\n \n .checkbox .icon::before {\n height: 100
|
|
6
|
+
var activeData = _a.activeData, id = _a.id, isLarge = _a.isLarge;
|
|
7
|
+
return (react_1["default"].createElement("style", null, "\n .checkbox {\n display: inline-block;\n position: relative;\n font-weight: bold;\n cursor: pointer;\n }\n \n .checkbox:active .text {\n transform: scale(0.9);\n }\n \n .checkbox .icon {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n }\n \n .checkbox .icon::before,\n .checkbox .icon::after {\n content: '';\n display: block;\n position: absolute;\n }\n \n .checkbox .icon::before {\n height: ".concat(isLarge ? '22px' : '100%', ";\n width: ").concat(isLarge ? '22px' : '100%', ";\n border-radius: ").concat(isLarge ? '5px' : '0px', ";\n background: transparent;\n transition: background 80ms cubic-bezier(0.165, 0.84, 0.44, 1);\n }\n \n .checkbox .icon::after {\n border: 2px solid transparent;\n transition: height 80ms ease-in, width 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms 80ms;\n width: 0px;\n height: 0px;\n bottom: ").concat(isLarge ? '11px' : '7px', ";\n left: ").concat(isLarge ? '2px' : '1px', ";\n border-top-right-radius: 3px;\n border-bottom-right-radius: 2px;\n border-bottom-left-radius: 3px;\n transform-origin: bottom left;\n transform: rotate(45deg);\n }\n \n #").concat(id, ":checked + .checkbox .icon::after {\n width: ").concat(isLarge ? '9px' : '6px', ";\n height: ").concat(isLarge ? '15px' : '10px', ";\n border-right-color: white;\n border-bottom-color: white;\n transition: width 80ms ease-in, height 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms;\n }\n \n #").concat(id, ":checked + .checkbox .icon::before {\n background: ").concat((activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive) ? '#F53E3E' : '#1a1a1a', "\n ")));
|
|
8
8
|
};
|
|
9
9
|
exports["default"] = StyledCheckboxLayout;
|
|
10
10
|
//# sourceMappingURL=StyleCheckbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyleCheckbox.js","sourceRoot":"","sources":["../../../../../src/components/Checkbox/styles/StyleCheckbox.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAEzB,IAAM,oBAAoB,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"StyleCheckbox.js","sourceRoot":"","sources":["../../../../../src/components/Checkbox/styles/StyleCheckbox.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAEzB,IAAM,oBAAoB,GAAG,UAAC,EAAgC;QAA9B,UAAU,gBAAA,EAAE,EAAE,QAAA,EAAE,OAAO,aAAA;IAAY,OAAA,CACjE,gDACG,8rBA2BiB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,mCAC1B,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,2CACjB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,sbAU9B,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,kCAC1B,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,6QAQ9B,EAAE,qEACM,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,oCACtB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,mQAMlC,EAAE,2EACW,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,MAAK,QAAQ,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAA,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,iBAClG,CACD,CACT;AA9DkE,CA8DlE,CAAA;AAED,qBAAe,oBAAoB,CAAA"}
|
|
@@ -5,7 +5,12 @@ var react_1 = tslib_1.__importDefault(require("react"));
|
|
|
5
5
|
var LoadingProvider_1 = require("../LoadingProvider");
|
|
6
6
|
function PHXLoadingIndicator() {
|
|
7
7
|
var progress = (0, LoadingProvider_1.useLoading)().progress;
|
|
8
|
-
return (react_1["default"].createElement(react_1["default"].Fragment, null, progress > 0 && (react_1["default"].createElement("div", { className:
|
|
8
|
+
return (react_1["default"].createElement(react_1["default"].Fragment, null, progress > 0 && (react_1["default"].createElement("div", { className: 'fixed top-0 left-0 h-1 z-[9999] transition-all', style: { width: "".concat(progress, "%") } },
|
|
9
|
+
react_1["default"].createElement("div", { className: 'relative h-full w-full bg-gray-400' },
|
|
10
|
+
react_1["default"].createElement("div", { className: 'absolute right-0 top-1/2 h-full w-[400px] -translate-y-1/2 pointer-events-none', style: {
|
|
11
|
+
background: 'radial-gradient(circle at right, #9ca3af 0%, rgba(156,163,175,0.5) 50%, rgba(156,163,175,0) 100%)',
|
|
12
|
+
filter: 'drop-shadow(0 0 4px #9ca3af) drop-shadow(0 0 8px #9ca3af) drop-shadow(0 0 16px #9ca3af)'
|
|
13
|
+
} }))))));
|
|
9
14
|
}
|
|
10
15
|
exports["default"] = PHXLoadingIndicator;
|
|
11
16
|
//# sourceMappingURL=loading-indicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loading-indicator.js","sourceRoot":"","sources":["../../../../src/components/LoadingIndicator/loading-indicator.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AACzB,sDAA+C;AAE/C,SAAwB,mBAAmB;IACjC,IAAA,QAAQ,GAAK,IAAA,4BAAU,GAAE,SAAjB,CAAiB;IAEjC,OAAO,CACL,oEACG,QAAQ,GAAG,CAAC,IAAI,CACf,
|
|
1
|
+
{"version":3,"file":"loading-indicator.js","sourceRoot":"","sources":["../../../../src/components/LoadingIndicator/loading-indicator.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AACzB,sDAA+C;AAE/C,SAAwB,mBAAmB;IACjC,IAAA,QAAQ,GAAK,IAAA,4BAAU,GAAE,SAAjB,CAAiB;IAEjC,OAAO,CACL,oEACG,QAAQ,GAAG,CAAC,IAAI,CACf,0CAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAG,QAAQ,MAAG,EAAE;QAC9F,0CAAK,SAAS,EAAC,oCAAoC;YACjD,0CACE,SAAS,EAAC,gFAAgF,EAC1F,KAAK,EAAE;oBACL,UAAU,EACR,mGAAmG;oBACrG,MAAM,EAAE,yFAAyF;iBAClG,GACD,CACE,CACF,CACP,CACA,CACJ,CAAA;AACH,CAAC;AArBD,yCAqBC"}
|
|
@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
|
|
|
3
3
|
import StyledCheckboxLayout from './styles/StyleCheckbox';
|
|
4
4
|
import { classNames } from '../types';
|
|
5
5
|
export var PHXCheckbox = function (_a) {
|
|
6
|
-
var activeData = _a.activeData,
|
|
7
|
-
var
|
|
6
|
+
var activeData = _a.activeData, _b = _a.checkType, checkType = _b === void 0 ? 'default' : _b, children = _a.children, className = _a.className, disabled = _a.disabled, error = _a.error, errorType = _a.errorType, expanded = _a.expanded, helpText = _a.helpText, _c = _a.id, id = _c === void 0 ? 'checkbox' : _c, label = _a.label, onChange = _a.onChange, register = _a.register, _d = _a.isLarge, isLarge = _d === void 0 ? false : _d, title = _a.title, rest = __rest(_a, ["activeData", "checkType", "children", "className", "disabled", "error", "errorType", "expanded", "helpText", "id", "label", "onChange", "register", "isLarge", "title"]);
|
|
7
|
+
var _e = useState(false), show = _e[0], setShow = _e[1];
|
|
8
8
|
useEffect(function () {
|
|
9
9
|
// @ts-ignore
|
|
10
10
|
setShow(expanded);
|
|
@@ -18,7 +18,9 @@ export var PHXCheckbox = function (_a) {
|
|
|
18
18
|
var getBorderClasses = function (type) {
|
|
19
19
|
if (type !== 'with-border')
|
|
20
20
|
return '';
|
|
21
|
-
return classNames(
|
|
21
|
+
return classNames(isLarge
|
|
22
|
+
? 'py-2.5 rounded-xl border-[0.75px] border-gray-500 px-4 text-sm font-normal shadow-md hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-2 focus:outline-indigo-500 focus:ring-transparent'
|
|
23
|
+
: 'py-1.5 rounded-lg border-[0.5px] border-gray-500 px-3 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error && 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50', disabled && 'bg-gray-50');
|
|
22
24
|
};
|
|
23
25
|
var getColorByActiveData = function (isWithBorder) {
|
|
24
26
|
if (isWithBorder === void 0) { isWithBorder = false; }
|
|
@@ -31,19 +33,23 @@ export var PHXCheckbox = function (_a) {
|
|
|
31
33
|
}
|
|
32
34
|
};
|
|
33
35
|
return (React.createElement("div", { className: className },
|
|
34
|
-
React.createElement(StyledCheckboxLayout, { activeData: activeData, id: id }),
|
|
35
|
-
label && React.createElement("label", { className: classNames(getColorByActiveData(false), 'block text-xs font-normal') }, label),
|
|
36
|
+
React.createElement(StyledCheckboxLayout, { activeData: activeData, id: id, isLarge: isLarge }),
|
|
37
|
+
label && (React.createElement("label", { className: classNames(getColorByActiveData(false), isLarge ? 'block text-sm font-normal' : 'block text-xs font-normal') }, label)),
|
|
36
38
|
React.createElement("div", { className: classNames('flex items-center py-1', getBorderClasses(checkType)) },
|
|
37
39
|
React.createElement("div", { className: classNames('flex items-center text-xs font-normal leading-5 hover:cursor-pointer', checkType === 'with-border' && 'flex-1', getColorByActiveData(false)) },
|
|
38
|
-
React.createElement("input", __assign({}, rest, { className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-400 hover:bg-transparent' : getColorByActiveData(true),
|
|
40
|
+
React.createElement("input", __assign({}, rest, { className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-400 hover:bg-transparent' : getColorByActiveData(true), isLarge
|
|
41
|
+
? 'hidden h-6 w-6 rounded-md border-[0.75px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
|
|
42
|
+
: 'hidden h-4 w-4 rounded border-[0.5px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'), id: id, onChange: handleChange }, register, { disabled: disabled, type: 'checkbox' })),
|
|
39
43
|
React.createElement("label", { className: "checkbox ".concat(checkType === 'with-border' && 'flex-1'), htmlFor: id },
|
|
40
|
-
React.createElement("span", { className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-400 hover:bg-transparent' : getColorByActiveData(true),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
+
React.createElement("span", { className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-400 hover:bg-transparent' : getColorByActiveData(true), isLarge
|
|
45
|
+
? 'icon block h-6 w-6 rounded-md border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
|
|
46
|
+
: 'icon block h-4 w-4 rounded border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent') }),
|
|
47
|
+
React.createElement("span", { className: classNames(isLarge ? 'ml-9 text-sm font-normal' : 'ml-7 font-normal', disabled ? 'text-gray-400 hover:bg-transparent' : getColorByActiveData(false)) }, title)))),
|
|
48
|
+
helpText && show ? (React.createElement("div", { className: classNames(isLarge ? 'pl-9 text-sm font-light text-gray-400' : 'pl-7 text-xs font-light text-gray-400') }, helpText)) : null,
|
|
49
|
+
show && children ? React.createElement("div", { className: classNames(isLarge ? 'ml-9' : 'ml-7') }, children) : React.createElement(React.Fragment, null),
|
|
44
50
|
error && errorType ? (React.createElement("div", { className: 'ml-1 mt-1 flex items-center' },
|
|
45
|
-
React.createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
51
|
+
React.createElement("svg", { className: classNames(isLarge ? 'mr-2.5 h-5 w-5 text-red-500' : 'mr-2 h-4 w-4 text-red-500'), fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
46
52
|
React.createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
|
|
47
|
-
React.createElement("p", { className: 'text-xs text-red-800' }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
53
|
+
React.createElement("p", { className: classNames(isLarge ? 'text-sm text-red-800' : 'text-xs text-red-800') }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
48
54
|
};
|
|
49
55
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAuB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvE,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
var StyledCheckboxLayout = function (_a) {
|
|
3
|
-
var activeData = _a.activeData, id = _a.id;
|
|
4
|
-
return (React.createElement("style", null, "\n .checkbox {\n display: inline-block;\n position: relative;\n font-weight: bold;\n cursor: pointer;\n }\n \n .checkbox:active .text {\n transform: scale(0.9);\n }\n \n .checkbox .icon {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n }\n \n .checkbox .icon::before,\n .checkbox .icon::after {\n content: '';\n display: block;\n position: absolute;\n }\n \n .checkbox .icon::before {\n height: 100
|
|
3
|
+
var activeData = _a.activeData, id = _a.id, isLarge = _a.isLarge;
|
|
4
|
+
return (React.createElement("style", null, "\n .checkbox {\n display: inline-block;\n position: relative;\n font-weight: bold;\n cursor: pointer;\n }\n \n .checkbox:active .text {\n transform: scale(0.9);\n }\n \n .checkbox .icon {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n }\n \n .checkbox .icon::before,\n .checkbox .icon::after {\n content: '';\n display: block;\n position: absolute;\n }\n \n .checkbox .icon::before {\n height: ".concat(isLarge ? '22px' : '100%', ";\n width: ").concat(isLarge ? '22px' : '100%', ";\n border-radius: ").concat(isLarge ? '5px' : '0px', ";\n background: transparent;\n transition: background 80ms cubic-bezier(0.165, 0.84, 0.44, 1);\n }\n \n .checkbox .icon::after {\n border: 2px solid transparent;\n transition: height 80ms ease-in, width 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms 80ms;\n width: 0px;\n height: 0px;\n bottom: ").concat(isLarge ? '11px' : '7px', ";\n left: ").concat(isLarge ? '2px' : '1px', ";\n border-top-right-radius: 3px;\n border-bottom-right-radius: 2px;\n border-bottom-left-radius: 3px;\n transform-origin: bottom left;\n transform: rotate(45deg);\n }\n \n #").concat(id, ":checked + .checkbox .icon::after {\n width: ").concat(isLarge ? '9px' : '6px', ";\n height: ").concat(isLarge ? '15px' : '10px', ";\n border-right-color: white;\n border-bottom-color: white;\n transition: width 80ms ease-in, height 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms;\n }\n \n #").concat(id, ":checked + .checkbox .icon::before {\n background: ").concat((activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive) ? '#F53E3E' : '#1a1a1a', "\n ")));
|
|
5
5
|
};
|
|
6
6
|
export default StyledCheckboxLayout;
|
|
7
7
|
//# sourceMappingURL=StyleCheckbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyleCheckbox.js","sourceRoot":"","sources":["../../../../../src/components/Checkbox/styles/StyleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,IAAM,oBAAoB,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"StyleCheckbox.js","sourceRoot":"","sources":["../../../../../src/components/Checkbox/styles/StyleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,IAAM,oBAAoB,GAAG,UAAC,EAAgC;QAA9B,UAAU,gBAAA,EAAE,EAAE,QAAA,EAAE,OAAO,aAAA;IAAY,OAAA,CACjE,mCACG,8rBA2BiB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,mCAC1B,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,2CACjB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,sbAU9B,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,kCAC1B,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,6QAQ9B,EAAE,qEACM,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,oCACtB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,mQAMlC,EAAE,2EACW,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,MAAK,QAAQ,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAA,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,iBAClG,CACD,CACT;AA9DkE,CA8DlE,CAAA;AAED,eAAe,oBAAoB,CAAA"}
|
|
@@ -2,6 +2,11 @@ import React from 'react';
|
|
|
2
2
|
import { useLoading } from '../LoadingProvider';
|
|
3
3
|
export default function PHXLoadingIndicator() {
|
|
4
4
|
var progress = useLoading().progress;
|
|
5
|
-
return (React.createElement(React.Fragment, null, progress > 0 && (React.createElement("div", { className:
|
|
5
|
+
return (React.createElement(React.Fragment, null, progress > 0 && (React.createElement("div", { className: 'fixed top-0 left-0 h-1 z-[9999] transition-all', style: { width: "".concat(progress, "%") } },
|
|
6
|
+
React.createElement("div", { className: 'relative h-full w-full bg-gray-400' },
|
|
7
|
+
React.createElement("div", { className: 'absolute right-0 top-1/2 h-full w-[400px] -translate-y-1/2 pointer-events-none', style: {
|
|
8
|
+
background: 'radial-gradient(circle at right, #9ca3af 0%, rgba(156,163,175,0.5) 50%, rgba(156,163,175,0) 100%)',
|
|
9
|
+
filter: 'drop-shadow(0 0 4px #9ca3af) drop-shadow(0 0 8px #9ca3af) drop-shadow(0 0 16px #9ca3af)'
|
|
10
|
+
} }))))));
|
|
6
11
|
}
|
|
7
12
|
//# sourceMappingURL=loading-indicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loading-indicator.js","sourceRoot":"","sources":["../../../../src/components/LoadingIndicator/loading-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/C,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACjC,IAAA,QAAQ,GAAK,UAAU,EAAE,SAAjB,CAAiB;IAEjC,OAAO,CACL,0CACG,QAAQ,GAAG,CAAC,IAAI,CACf,
|
|
1
|
+
{"version":3,"file":"loading-indicator.js","sourceRoot":"","sources":["../../../../src/components/LoadingIndicator/loading-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/C,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACjC,IAAA,QAAQ,GAAK,UAAU,EAAE,SAAjB,CAAiB;IAEjC,OAAO,CACL,0CACG,QAAQ,GAAG,CAAC,IAAI,CACf,6BAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAG,QAAQ,MAAG,EAAE;QAC9F,6BAAK,SAAS,EAAC,oCAAoC;YACjD,6BACE,SAAS,EAAC,gFAAgF,EAC1F,KAAK,EAAE;oBACL,UAAU,EACR,mGAAmG;oBACrG,MAAM,EAAE,yFAAyF;iBAClG,GACD,CACE,CACF,CACP,CACA,CACJ,CAAA;AACH,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "phx-react",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.798",
|
|
4
4
|
"description": "PHX REACT",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@storybook/react-vite": "7.2.3",
|
|
56
56
|
"@storybook/testing-library": "^0.0.14-next.2",
|
|
57
57
|
"@tailwindcss/forms": "^0.5.3",
|
|
58
|
-
"@testing-library/react": "^
|
|
58
|
+
"@testing-library/react": "^15.0.6",
|
|
59
59
|
"@types/crypto-js": "^4.2.2",
|
|
60
60
|
"@types/jest": "^29.5.11",
|
|
61
61
|
"@types/js-cookie": "^3.0.3",
|