@esvndev/es-react-config-setting 1.0.6 → 1.0.8
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 +61 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +61 -9
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -2
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--layer-background-selected:#dbebff;--text-primary:#081b3a;--layer-background:#fff;--divider-bold:rgba(0,0,0,.15);--surface-background-subtle:#ebecf0}.setting-menu__item{align-items:center;color:var(--text-primary);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;height:40px;justify-content:space-between;line-height:1.5;padding:0 16px}.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)}.setting-right,.setting-right .stack-page{background-color:var(--surface-background-subtle)}.stack-navigation .stack-page{background:var(--layer-background);inset:0;position:absolute}
|
|
1
|
+
:root{--layer-background-selected:#dbebff;--text-primary:#081b3a;--layer-background:#fff;--divider-bold:rgba(0,0,0,.15);--surface-background-subtle:#ebecf0}.setting-menu,.stack-navigation{margin-top:0}.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;height:40px;justify-content:space-between;line-height:1.5;padding:0 16px}.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)}.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}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA,MACE,mCAAoC,CACpC,sBAAuB,CACvB,uBAAwB,CACxB,8BAAmC,CACnC,mCACF,CAEA,gCAEE,YACF,CAEA,kBACE,wBACF,CAEA,iBACE,iBAAkB,CAClB,kBACF,CAEA,oBAUE,kBAAmB,CAPnB,yBAA0B,CAC1B,cAAe,CAIf,YAAa,CAHb,iBAAmB,CACnB,eAAgB,CALhB,WAAY,CAQZ,6BAA8B,CAF9B,eAAgB,CALhB,cASF,CAEA,6BACE,iDACF,CAEA,+BAEE,kBAAmB,CADnB,YAAa,CAEb,gBACF,CAEA,cAEE,wCAAyC,CADzC,0CAEF,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","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}\n\n.setting-menu,\n.stack-navigation {\n margin-top: 0px;\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: 40px;\n padding: 0 16px;\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}\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}\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}"]}
|
package/dist/index.js
CHANGED
|
@@ -4320,6 +4320,21 @@ function __rest(s, e) {
|
|
|
4320
4320
|
return t;
|
|
4321
4321
|
}
|
|
4322
4322
|
|
|
4323
|
+
var SvgBecoxyNotification = function (_a) {
|
|
4324
|
+
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
4325
|
+
return (React__namespace.createElement("svg", __assign({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
|
|
4326
|
+
title ? React__namespace.createElement("title", { id: titleId }, title) : null,
|
|
4327
|
+
React__namespace.createElement("path", { d: "M22.5 10.5a.5.5 0 0 1-.5-.5c0-2.938-1.144-5.701-3.222-7.778a.5.5 0 0 1 .707-.707A11.917 11.917 0 0 1 23 10a.5.5 0 0 1-.5.5ZM1.5 10.5A.5.5 0 0 1 1 10c0-3.206 1.248-6.22 3.515-8.485a.5.5 0 0 1 .707.707A10.925 10.925 0 0 0 2 10a.5.5 0 0 1-.5.5ZM13.5 4.18a.5.5 0 0 1-.5-.5V2c0-.551-.449-1-1-1-.551 0-1 .449-1 1v1.68a.5.5 0 0 1-1 0V2c0-1.103.897-2 2-2s2 .897 2 2v1.68a.5.5 0 0 1-.5.5ZM12 24c-1.93 0-3.5-1.57-3.5-3.5a.5.5 0 0 1 1 0c0 1.378 1.122 2.5 2.5 2.5s2.5-1.122 2.5-2.5a.5.5 0 0 1 1 0c0 1.93-1.57 3.5-3.5 3.5Z", fill: props.color || "currentColor" }),
|
|
4328
|
+
React__namespace.createElement("path", { d: "M20.5 21h-17a1.502 1.502 0 0 1-.975-2.64A6.952 6.952 0 0 0 5 13.038V10c0-3.86 3.14-7 7-7s7 3.14 7 7v3.038c0 2.053.899 3.99 2.467 5.315A1.501 1.501 0 0 1 20.5 21ZM12 4c-3.309 0-6 2.691-6 6v3.038a7.944 7.944 0 0 1-2.821 6.079A.5.5 0 0 0 3.5 20h17a.5.5 0 0 0 .325-.88A7.95 7.95 0 0 1 18 13.038V10c0-3.309-2.691-6-6-6Z", fill: props.color || "currentColor" })));
|
|
4329
|
+
};
|
|
4330
|
+
|
|
4331
|
+
var SvgBookOpen = function (_a) {
|
|
4332
|
+
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
4333
|
+
return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "book-open_svg__feather book-open_svg__feather-book-open", "aria-labelledby": titleId }, props),
|
|
4334
|
+
title ? React__namespace.createElement("title", { id: titleId }, title) : null,
|
|
4335
|
+
React__namespace.createElement("path", { d: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" })));
|
|
4336
|
+
};
|
|
4337
|
+
|
|
4323
4338
|
var SvgCopy = function (_a) {
|
|
4324
4339
|
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
4325
4340
|
return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "copy_svg__feather copy_svg__feather-copy", "aria-labelledby": titleId }, props),
|
|
@@ -4344,6 +4359,21 @@ var SvgInfo = function (_a) {
|
|
|
4344
4359
|
React__namespace.createElement("path", { d: "M12 16v-4M12 8h.01" })));
|
|
4345
4360
|
};
|
|
4346
4361
|
|
|
4362
|
+
var SvgLock = function (_a) {
|
|
4363
|
+
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
4364
|
+
return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "lock_svg__feather lock_svg__feather-lock", "aria-labelledby": titleId }, props),
|
|
4365
|
+
title ? React__namespace.createElement("title", { id: titleId }, title) : null,
|
|
4366
|
+
React__namespace.createElement("rect", { x: 3, y: 11, width: 18, height: 11, rx: 2, ry: 2 }),
|
|
4367
|
+
React__namespace.createElement("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })));
|
|
4368
|
+
};
|
|
4369
|
+
|
|
4370
|
+
var SvgMessageCircle = function (_a) {
|
|
4371
|
+
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
4372
|
+
return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "message-circle_svg__feather message-circle_svg__feather-message-circle", "aria-labelledby": titleId }, props),
|
|
4373
|
+
title ? React__namespace.createElement("title", { id: titleId }, title) : null,
|
|
4374
|
+
React__namespace.createElement("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" })));
|
|
4375
|
+
};
|
|
4376
|
+
|
|
4347
4377
|
var SvgPlus = function (_a) {
|
|
4348
4378
|
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
4349
4379
|
return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "plus_svg__feather plus_svg__feather-plus", "aria-labelledby": titleId }, props),
|
|
@@ -4351,6 +4381,21 @@ var SvgPlus = function (_a) {
|
|
|
4351
4381
|
React__namespace.createElement("path", { d: "M12 5v14M5 12h14" })));
|
|
4352
4382
|
};
|
|
4353
4383
|
|
|
4384
|
+
var SvgSettings = function (_a) {
|
|
4385
|
+
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
4386
|
+
return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "settings_svg__feather settings_svg__feather-settings", "aria-labelledby": titleId }, props),
|
|
4387
|
+
title ? React__namespace.createElement("title", { id: titleId }, title) : null,
|
|
4388
|
+
React__namespace.createElement("circle", { cx: 12, cy: 12, r: 3 }),
|
|
4389
|
+
React__namespace.createElement("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })));
|
|
4390
|
+
};
|
|
4391
|
+
|
|
4392
|
+
var SvgThermometer = function (_a) {
|
|
4393
|
+
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
4394
|
+
return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "thermometer_svg__feather thermometer_svg__feather-thermometer", "aria-labelledby": titleId }, props),
|
|
4395
|
+
title ? React__namespace.createElement("title", { id: titleId }, title) : null,
|
|
4396
|
+
React__namespace.createElement("path", { d: "M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z" })));
|
|
4397
|
+
};
|
|
4398
|
+
|
|
4354
4399
|
var SvgX = function (_a) {
|
|
4355
4400
|
var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
|
|
4356
4401
|
return (React__namespace.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "x_svg__feather x_svg__feather-x", "aria-labelledby": titleId }, props),
|
|
@@ -6210,28 +6255,35 @@ const SettingApp = (props) => {
|
|
|
6210
6255
|
};
|
|
6211
6256
|
const [dataSetting, setDataSetting] = React.useState([{
|
|
6212
6257
|
id: 1,
|
|
6213
|
-
name: 'Cài đặt chung'
|
|
6258
|
+
name: t('Cài đặt chung'),
|
|
6259
|
+
active: true,
|
|
6260
|
+
icon: jsxRuntime.jsx(SvgSettings, { className: "setting-menu__icon" })
|
|
6214
6261
|
}, {
|
|
6215
6262
|
id: 2,
|
|
6216
|
-
name: 'Quyền riêng tư'
|
|
6263
|
+
name: t('Quyền riêng tư'),
|
|
6264
|
+
icon: jsxRuntime.jsx(SvgLock, { className: "setting-menu__icon" })
|
|
6217
6265
|
}, {
|
|
6218
6266
|
id: 3,
|
|
6219
|
-
name: 'Giao diện'
|
|
6267
|
+
name: t('Giao diện'),
|
|
6268
|
+
icon: jsxRuntime.jsx(SvgThermometer, { className: "setting-menu__icon" })
|
|
6220
6269
|
}, {
|
|
6221
6270
|
id: 4,
|
|
6222
|
-
name: 'Thông báo'
|
|
6271
|
+
name: t('Thông báo'),
|
|
6272
|
+
icon: jsxRuntime.jsx(SvgBecoxyNotification, { className: "setting-menu__icon" })
|
|
6223
6273
|
}, {
|
|
6224
6274
|
id: 5,
|
|
6225
|
-
name: 'Tin nhắn'
|
|
6275
|
+
name: t('Tin nhắn'),
|
|
6276
|
+
icon: jsxRuntime.jsx(SvgMessageCircle, { className: "setting-menu__icon" })
|
|
6226
6277
|
}, {
|
|
6227
6278
|
id: 6,
|
|
6228
|
-
name: 'Tiện ích'
|
|
6279
|
+
name: t('Tiện ích'),
|
|
6280
|
+
icon: jsxRuntime.jsx(SvgBookOpen, { className: "setting-menu__icon" })
|
|
6229
6281
|
}]);
|
|
6230
6282
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isOpen ?
|
|
6231
|
-
jsxRuntime.jsx(Modal$1, { isOpen: true, toggle: handleModal, className: 'modal-dialog-centered modal-lg', 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, typeModal: "typeModal", title: 'C\u00E0i \u0111\u1EB7t' }), jsxRuntime.jsxs(Row, { className: "m-0 gy-1", 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
|
|
6283
|
+
jsxRuntime.jsx(Modal$1, { isOpen: true, toggle: handleModal, className: 'modal-dialog-centered modal-lg', 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, typeModal: "typeModal", title: 'C\u00E0i \u0111\u1EB7t' }), jsxRuntime.jsxs(Row, { className: "m-0 gy-1", 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: dataSetting && dataSetting.length > 0 ?
|
|
6232
6284
|
dataSetting.map((item) => {
|
|
6233
|
-
return (jsxRuntime.jsx(
|
|
6234
|
-
}) : 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: jsxRuntime.jsx("div", {
|
|
6285
|
+
return (jsxRuntime.jsx("div", { className: 'setting-menu__item' + (item.active ? 'selected' : ''), children: jsxRuntime.jsxs("div", { className: "setting-menu__wrapper-content truncate", children: [item.icon, jsxRuntime.jsx("p", { className: "setting-menu__name truncate", children: jsxRuntime.jsx("span", { children: item.name }) })] }) }, item.id));
|
|
6286
|
+
}) : 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: jsxRuntime.jsx("div", { className: "setting-section" }) }) }) })] })] }) }) })
|
|
6235
6287
|
: null }));
|
|
6236
6288
|
};
|
|
6237
6289
|
|