@esvndev/es-react-config-setting 1.0.18 → 1.0.20
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/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +33 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +33 -9
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--layer-background-selected:#dbebff;--layer-background:#fff;--divider-bold:rgba(0,0,0,.15);--surface-background-subtle:#ebecf0;--layer-background-hover:#f1f2f4
|
|
1
|
+
:root{--layer-background-selected:#dbebff;--text-primary:#081b3a;--layer-background:#fff;--divider-bold:rgba(0,0,0,.15);--surface-background-subtle:#ebecf0;--layer-background-hover:#f1f2f4}.setting-modal .modal-title{color:var(--text-primary);display:block;font-size:1.125rem;font-weight:700;line-height:1.5}.setting-modal-body-custom{height:calc(100vh - 3.5rem - 55px)}.setting-menu,.stack-navigation{margin-top:0!important}.stack-navigation{background-color:#ebecf0}.setting-section{padding-left:12px;padding-right:12px}.setting-menu__item{align-items:center;color:var(--text-primary);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;font-weight:700;height:50px;justify-content:space-between;line-height:1.5;margin-top:0!important;padding:0 16px!important}.setting-menu__item:hover{background-color:var(--layer-background-hover)}.setting-menu__item.selected{background-color:var(--layer-background-selected)}.setting-menu__wrapper-content{align-items:center;display:flex;margin-right:2px}.setting-menu{background-color:var(--layer-background);border-right:1px solid var(--divider-bold);padding-left:0!important;padding-right:0!important}.setting-right,.setting-right .stack-page{background-color:var(--surface-background-subtle)}.stack-navigation .stack-page{background:var(--layer-background);inset:0;position:absolute}.setting-menu__icon{font-size:1.125rem;height:1.125rem;line-height:0;margin-right:10px;width:1.125rem}.setting-menu__name{margin:0}.truncate{word-wrap:break-word;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-section-label{color:var(--text-primary);display:flex;font-size:1rem;font-weight:500;height:32px;line-height:1.5;line-height:32px;padding:0 16px}.setting-section-content{background-color:transparent;margin:8px 0 24px}.setting-section-content__item.first{border-radius:8px 8px 0 0}.setting-section-content__item{background-color:var(--layer-background);box-sizing:border-box;cursor:pointer;padding:12px 16px 0}.setting-section-content__item.last{border-radius:0 0 8px 8px;padding:12px 16px}.setting-section-content__description,.setting-section-desc{color:var(--text-secondary);font-size:.8125rem;font-weight:400;line-height:1.5;line-height:1.4}.setting-section-desc{padding:0 16px}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA,MACE,mCAAoC,
|
|
1
|
+
{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA,MACE,mCAAoC,CACpC,sBAAuB,CACvB,uBAAwB,CACxB,8BAAmC,CACnC,mCAAoC,CACpC,gCACF,CAEA,4BAKE,yBAA0B,CAF1B,aAAc,CAFd,kBAAmB,CAGnB,eAAiB,CAFjB,eAIF,CAEA,2BACE,kCACF,CAEA,gCAEE,sBACF,CAEA,kBACE,wBACF,CAEA,iBACE,iBAAkB,CAClB,kBACF,CAEA,oBAUE,kBAAmB,CAPnB,yBAA0B,CAC1B,cAAe,CAIf,YAAa,CAHb,iBAAmB,CACnB,eAAgB,CAKhB,eAAiB,CAVjB,WAAY,CAQZ,6BAA8B,CAF9B,eAAgB,CAKhB,sBAAwB,CAVxB,wBAWF,CAEA,0BACE,8CACF,CAEA,6BACE,iDACF,CAEA,+BAEE,kBAAmB,CADnB,YAAa,CAEb,gBACF,CAEA,cAEE,wCAAyC,CADzC,0CAA2C,CAE3C,wBAA0B,CAC1B,yBACF,CAEA,0CAEE,iDACF,CAEA,8BAGE,kCAAmC,CADnC,OAAQ,CADR,iBAGF,CAEA,oBACE,kBAAmB,CAEnB,eAAgB,CAChB,aAAc,CACd,iBAAkB,CAHlB,cAIF,CAEA,oBACE,QACF,CAEA,UAIE,oBAAqB,CADrB,eAAgB,CAFhB,sBAAuB,CACvB,kBAGF,CAEA,uBACE,yBAA0B,CAO1B,YAAa,CANb,cAAe,CACf,eAAgB,CAIhB,WAAY,CAHZ,eAAgB,CAEhB,gBAAiB,CADjB,cAIF,CAEA,yBACE,4BAA6B,CAC7B,iBACF,CAEA,qCACE,yBACF,CAEA,+BACE,wCAAyC,CACzC,qBAAsB,CACtB,cAAe,CACf,mBACF,CAEA,oCAEE,yBAA0B,CAD1B,iBAEF,CAUA,4DAHE,2BAA4B,CAJ5B,kBAAoB,CACpB,eAAgB,CAChB,eAAgB,CAChB,eAWF,CAPA,sBAEE,cAKF","file":"index.css","sourcesContent":[":root {\n --layer-background-selected: #dbebff;\n --text-primary: #081b3a;\n --layer-background: #fff;\n --divider-bold: rgba(0, 0, 0, 0.15);\n --surface-background-subtle: #ebecf0;\n --layer-background-hover: #f1f2f4;\n}\n\n.setting-modal .modal-title {\n font-size: 1.125rem;\n line-height: 1.5;\n display: block;\n font-weight: bold;\n color: var(--text-primary);\n}\n\n.setting-modal-body-custom {\n height: calc(100vh - 3.5rem - 55px);\n}\n\n.setting-menu,\n.stack-navigation {\n margin-top: 0px !important;\n}\n\n.stack-navigation {\n background-color: #ebecf0;\n}\n\n.setting-section {\n padding-left: 12px;\n padding-right: 12px;\n}\n\n.setting-menu__item {\n height: 50px;\n padding: 0 16px !important;\n color: var(--text-primary);\n cursor: pointer;\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.5;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: bold;\n margin-top: 0 !important;\n}\n\n.setting-menu__item:hover {\n background-color: var(--layer-background-hover);\n}\n\n.setting-menu__item.selected {\n background-color: var(--layer-background-selected);\n}\n\n.setting-menu__wrapper-content {\n display: flex;\n align-items: center;\n margin-right: 2px;\n}\n\n.setting-menu {\n border-right: 1px solid var(--divider-bold);\n background-color: var(--layer-background);\n padding-left: 0 !important;\n padding-right: 0 !important;\n}\n\n.setting-right,\n.setting-right .stack-page {\n background-color: var(--surface-background-subtle);\n}\n\n.stack-navigation .stack-page {\n position: absolute;\n inset: 0;\n background: var(--layer-background);\n}\n\n.setting-menu__icon {\n font-size: 1.125rem;\n width: 1.125rem;\n height: 1.125rem;\n line-height: 0;\n margin-right: 10px;\n}\n\n.setting-menu__name {\n margin: 0;\n}\n\n.truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n word-wrap: break-word;\n}\n\n.setting-section-label {\n color: var(--text-primary);\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.5;\n padding: 0 16px;\n line-height: 32px;\n height: 32px;\n display: flex;\n}\n\n.setting-section-content {\n background-color: transparent;\n margin: 8px 0 24px;\n}\n\n.setting-section-content__item.first {\n border-radius: 8px 8px 0 0;\n}\n\n.setting-section-content__item {\n background-color: var(--layer-background);\n box-sizing: border-box;\n cursor: pointer;\n padding: 12px 16px 0;\n}\n\n.setting-section-content__item.last {\n padding: 12px 16px;\n border-radius: 0 0 8px 8px;\n}\n\n.setting-section-content__description {\n font-size: 0.8125rem;\n font-weight: 400;\n line-height: 1.5;\n line-height: 1.4;\n color: var(--text-secondary);\n}\n\n.setting-section-desc {\n color: var(--text-secondary);\n padding: 0 16px;\n font-size: 0.8125rem;\n font-weight: 400;\n line-height: 1.5;\n line-height: 1.4;\n}"]}
|
package/dist/index.js
CHANGED
|
@@ -11456,14 +11456,25 @@ const SettingApp = (props) => {
|
|
|
11456
11456
|
return l;
|
|
11457
11457
|
};
|
|
11458
11458
|
const DynamicIcon = ({ name, className }) => {
|
|
11459
|
-
const LucideIcon = Icon[name];
|
|
11459
|
+
const LucideIcon = Icon[name];
|
|
11460
11460
|
return LucideIcon ? jsxRuntime.jsx(LucideIcon, { className: className }) : null;
|
|
11461
11461
|
};
|
|
11462
|
-
|
|
11462
|
+
//#endregion
|
|
11463
|
+
const [settingData, setSettingData] = React.useState([]);
|
|
11464
|
+
const [dataSettingGroup, setDataSettingGroup] = React.useState([{
|
|
11463
11465
|
id: 1,
|
|
11464
11466
|
name: t('Cài đặt chung'),
|
|
11465
11467
|
active: true,
|
|
11466
|
-
icon: 'Settings'
|
|
11468
|
+
icon: 'Settings',
|
|
11469
|
+
data: [{
|
|
11470
|
+
name: "Danh bạ",
|
|
11471
|
+
description: "Danh sách danh sách danh sách danh sách",
|
|
11472
|
+
data: [{
|
|
11473
|
+
name: "Hiển thị trạng thái truy cập",
|
|
11474
|
+
desciption: "Ai được phép truy cập",
|
|
11475
|
+
type: "checkbox"
|
|
11476
|
+
}]
|
|
11477
|
+
}]
|
|
11467
11478
|
}, {
|
|
11468
11479
|
id: 2,
|
|
11469
11480
|
name: t('Quyền riêng tư'),
|
|
@@ -11489,19 +11500,32 @@ const SettingApp = (props) => {
|
|
|
11489
11500
|
name: t('Tiện ích'),
|
|
11490
11501
|
icon: "BookOpen"
|
|
11491
11502
|
}]);
|
|
11492
|
-
//Sự kiện chọn
|
|
11503
|
+
//Sự kiện chọn nhóm cài đặt
|
|
11493
11504
|
const switchSettingTab = (data) => {
|
|
11494
|
-
const updated =
|
|
11505
|
+
const updated = dataSettingGroup.map((item) => ({
|
|
11495
11506
|
...item,
|
|
11496
11507
|
active: item.id === data.id
|
|
11497
11508
|
}));
|
|
11498
|
-
|
|
11509
|
+
settingData(data);
|
|
11510
|
+
setDataSettingGroup(updated);
|
|
11511
|
+
};
|
|
11512
|
+
//hàm tạo các thông số cấu hình và cài đặt
|
|
11513
|
+
const _renderView = () => {
|
|
11514
|
+
return (settingData && settingData.data && settingData.data.length > 0 ? settingData.data.map((item, index) => {
|
|
11515
|
+
jsxRuntime.jsxs("div", { className: "setting-section", children: [jsxRuntime.jsx("div", { className: "setting-section-label", children: jsxRuntime.jsx("div", { className: "badge", children: jsxRuntime.jsx("span", { children: item.name }) }) }), item.desrciption ?
|
|
11516
|
+
jsxRuntime.jsx("div", { className: "setting-section-desc", children: jsxRuntime.jsx("div", { className: "", children: jsxRuntime.jsx("span", { children: item.desrciption }) }) })
|
|
11517
|
+
: null, item.data && item.data.length > 0 ? item.data.map((_item, _index) => {
|
|
11518
|
+
return (jsxRuntime.jsx("div", { className: "setting-section-content ", children: jsxRuntime.jsxs("div", { className: 'flx flx-al-c flx-sp-btw setting-section-content__item' + (_index === 0 ? 'first' : (_index === _item.data.length - 1 ? 'last' : '')), children: [jsxRuntime.jsxs("div", { className: "flx flx-col", style: { flex: "0 0 fit-content" }, children: [jsxRuntime.jsx("span", { children: _item.name }), jsxRuntime.jsx("span", { className: "setting-section-content__description", children: _item.description })] }), jsxRuntime.jsx("div", { style: { maxWidth: "50%" }, children: jsxRuntime.jsx("div", { style: { width: "100%", boxSizing: "border-box" }, children: jsxRuntime.jsxs("div", { className: "flx flx-al-c z-dropdown-preview --square --l", style: { width: "100%", boxSizing: "border-box" }, children: [jsxRuntime.jsx("div", { className: "truncate flx-1" }), jsxRuntime.jsx("i", { className: "fa fa-Chevron_Down_24_Line margin-left-24" })] }) }) })] }) }));
|
|
11519
|
+
})
|
|
11520
|
+
: null] });
|
|
11521
|
+
})
|
|
11522
|
+
: null);
|
|
11499
11523
|
};
|
|
11500
11524
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isOpen ?
|
|
11501
|
-
jsxRuntime.jsx(Modal$1, { isOpen: true, toggle: handleModal, className: 'modal-dialog-centered modal-lg setting-modal', contentClassName: 'p-0', onOpened: handleFormOpened, onClosed: handleFormClosed, backdrop: backdrop, children: jsxRuntime.jsx(Form$1, { id: 'form-modal-globalzone', className: 'todo-modal', onSubmit: handleSubmit, children: jsxRuntime.jsxs("div", { className: "", children: [jsxRuntime.jsx(ModalHeader, { handleModal: handleModal, title: 'C\u00E0i \u0111\u1EB7t' }), jsxRuntime.jsxs(Row, { className: "m-0 gy-1 setting-modal-body-custom", children: [jsxRuntime.jsx(Col, { md: 4, xs: 12, className: "setting-menu", children: jsxRuntime.jsx(lib.Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 180, children: jsxRuntime.jsx(Row, { className: "m-0 gy-1 mb-2", children:
|
|
11502
|
-
|
|
11525
|
+
jsxRuntime.jsx(Modal$1, { isOpen: true, toggle: handleModal, className: 'modal-dialog-centered modal-lg setting-modal', contentClassName: 'p-0', onOpened: handleFormOpened, onClosed: handleFormClosed, backdrop: backdrop, children: jsxRuntime.jsx(Form$1, { id: 'form-modal-globalzone', className: 'todo-modal', onSubmit: handleSubmit, children: jsxRuntime.jsxs("div", { className: "", children: [jsxRuntime.jsx(ModalHeader, { handleModal: handleModal, title: 'C\u00E0i \u0111\u1EB7t' }), jsxRuntime.jsxs(Row, { className: "m-0 gy-1 setting-modal-body-custom", children: [jsxRuntime.jsx(Col, { md: 4, xs: 12, className: "setting-menu", children: jsxRuntime.jsx(lib.Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 180, children: jsxRuntime.jsx(Row, { className: "m-0 gy-1 mb-2", children: dataSettingGroup && dataSettingGroup.length > 0 ?
|
|
11526
|
+
dataSettingGroup.map((item) => {
|
|
11503
11527
|
return (jsxRuntime.jsx("div", { className: 'setting-menu__item ' + (item.active ? 'selected' : ''), onClick: () => { switchSettingTab(item); }, children: jsxRuntime.jsxs("div", { className: "setting-menu__wrapper-content truncate", children: [jsxRuntime.jsx(DynamicIcon, { name: item.icon, className: "setting-menu__icon" }), jsxRuntime.jsx("p", { className: "setting-menu__name truncate", children: jsxRuntime.jsx("span", { children: item.name }) })] }) }, item.id));
|
|
11504
|
-
}) : null }) }) }), jsxRuntime.jsx(Col, { md: 8, xs: 12, className: "stack-navigation stack-page", children: jsxRuntime.jsx(lib.Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 180, children: jsxRuntime.jsx(ModalBody, { children:
|
|
11528
|
+
}) : null }) }) }), jsxRuntime.jsx(Col, { md: 8, xs: 12, className: "stack-navigation stack-page", children: jsxRuntime.jsx(lib.Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 180, children: jsxRuntime.jsx(ModalBody, { children: _renderView() }) }) })] })] }) }) })
|
|
11505
11529
|
: null }));
|
|
11506
11530
|
};
|
|
11507
11531
|
|