@cashub/ui 0.22.3 → 0.22.5
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/package.json +1 -1
- package/table/Table.js +31 -21
package/package.json
CHANGED
package/table/Table.js
CHANGED
|
@@ -180,6 +180,7 @@ const Table = _ref => {
|
|
|
180
180
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableDataCell, {
|
|
181
181
|
"data-label": title,
|
|
182
182
|
backgroundReverse: backgroundReverse,
|
|
183
|
+
border: rowConfig.border,
|
|
183
184
|
custom: isCustom,
|
|
184
185
|
...props,
|
|
185
186
|
children: renderedData
|
|
@@ -261,45 +262,48 @@ const Table = _ref => {
|
|
|
261
262
|
};
|
|
262
263
|
const ResponsiveTable = _styledComponents.default.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n border-collapse: separate;\n margin-top: calc(var(--spacing-s) * -1);\n border-spacing: 0 var(--spacing-s);\n color: var(--font-on-background);\n table-layout: fixed;\n"])));
|
|
263
264
|
const TableHead = _styledComponents.default.thead(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n"])), _media.default.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: none;\n "]))));
|
|
264
|
-
const BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n &:hover {\n > td {\n border-color: var(--color-primary);\n border-width: var(--border-width);\n }\n }\n\n ", "\n\n ", "\n
|
|
265
|
+
const BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n &:hover {\n > td {\n border-color: var(--color-primary);\n border-width: var(--border-width);\n }\n }\n\n ", "\n\n ", "\n \n ", "\n"])), _ref2 => {
|
|
265
266
|
let {
|
|
266
267
|
active,
|
|
267
268
|
primary
|
|
268
269
|
} = _ref2;
|
|
269
270
|
return (active || primary) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n > td {\n background: var(--color-background3);\n }\n "])));
|
|
270
271
|
}, _ref3 => {
|
|
271
|
-
let {
|
|
272
|
-
border
|
|
273
|
-
} = _ref3;
|
|
274
|
-
return border && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n > td {\n border-color: var(--color-white);\n border-width: 3px;\n }\n "])));
|
|
275
|
-
}, _ref4 => {
|
|
276
272
|
let {
|
|
277
273
|
clickable
|
|
278
|
-
} =
|
|
274
|
+
} = _ref3;
|
|
279
275
|
return clickable && 'pointer: cursor;';
|
|
280
|
-
}, _media.default.mobile(
|
|
276
|
+
}, _media.default.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n overflow: hidden;\n position: relative;\n transition: .3s;\n display: block;\n margin-bottom: 0.75rem;\n padding: var(--spacing-xs) var(--spacing-s);\n background: var(\n --color-background", "\n );\n border-radius: var(--border-radius);\n transition: .3s;\n border: 1px solid transparent;\n\n &:hover {\n border: var(--border-width) solid var(--color-primary);\n }\n\n ", "\n\n ", "\n\n ", "\n "])), _ref4 => {
|
|
281
277
|
let {
|
|
282
278
|
backgroundReverse
|
|
283
|
-
} =
|
|
279
|
+
} = _ref4;
|
|
284
280
|
return backgroundReverse ? 1 : 2;
|
|
285
|
-
},
|
|
281
|
+
}, _ref5 => {
|
|
286
282
|
let {
|
|
287
283
|
active,
|
|
288
284
|
primary
|
|
285
|
+
} = _ref5;
|
|
286
|
+
return (active || primary) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background: var(--color-background3);\n "])));
|
|
287
|
+
}, _ref6 => {
|
|
288
|
+
let {
|
|
289
|
+
border
|
|
289
290
|
} = _ref6;
|
|
290
|
-
return
|
|
291
|
+
return border && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-color: var(--color-white);\n border-width: 3px;\n "])));
|
|
291
292
|
}, _ref7 => {
|
|
292
293
|
let {
|
|
293
|
-
|
|
294
|
+
noData
|
|
294
295
|
} = _ref7;
|
|
295
|
-
return
|
|
296
|
-
}
|
|
296
|
+
return noData && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 168px;\n\n > td {\n &:first-child:before {\n display: none;\n }\n }\n "])));
|
|
297
|
+
}));
|
|
298
|
+
const TableDataCell = _styledComponents.default.td.attrs(_ref8 => {
|
|
297
299
|
let {
|
|
298
|
-
|
|
300
|
+
border
|
|
299
301
|
} = _ref8;
|
|
300
|
-
return
|
|
301
|
-
|
|
302
|
-
|
|
302
|
+
return {
|
|
303
|
+
borderWidth: border ? '3px' : 'var(--border-width)',
|
|
304
|
+
borderColor: border ? 'var(--color-white)' : 'transparent'
|
|
305
|
+
};
|
|
306
|
+
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n height: 48px;\n background: ", ";\n padding: 0 var(--spacing-xs);\n max-width: 0px;\n text-align: ", ";\n vertical-align: middle;\n transition: border-color 0.3s;\n\n ", "\n > span {\n display: inline-block;\n width: 100%;\n overflow: hidden;\n white-space: pre;\n text-overflow: ellipsis;\n }\n\n ", "\n\n ", "\n"])), _ref9 => {
|
|
303
307
|
let {
|
|
304
308
|
backgroundReverse
|
|
305
309
|
} = _ref9;
|
|
@@ -311,13 +315,19 @@ const TableDataCell = _styledComponents.default.td(_templateObject11 || (_templa
|
|
|
311
315
|
return center ? 'center' : 'left';
|
|
312
316
|
}, _ref11 => {
|
|
313
317
|
let {
|
|
314
|
-
|
|
318
|
+
borderWidth,
|
|
319
|
+
borderColor
|
|
315
320
|
} = _ref11;
|
|
321
|
+
return (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n border-top: ", " solid ", ";\n border-bottom: ", " solid ", ";\n &:first-child {\n border-left: ", " solid ", ";\n border-top-left-radius: var(--border-radius-l);\n border-bottom-left-radius: var(--border-radius-l);\n padding-left: var(--spacing);\n }\n\n &:last-child {\n border-right: ", " solid ", ";\n border-top-right-radius: var(--border-radius-l);\n border-bottom-right-radius: var(--border-radius-l);\n padding-right: var(--spacing);\n }\n "])), borderWidth, borderColor, borderWidth, borderColor, borderWidth, borderColor, borderWidth, borderColor);
|
|
322
|
+
}, _ref12 => {
|
|
323
|
+
let {
|
|
324
|
+
noData
|
|
325
|
+
} = _ref12;
|
|
316
326
|
return noData && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n padding: 20px 0;\n "])));
|
|
317
|
-
}, _media.default.mobile(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n height: auto;\n margin-bottom: var(--spacing-xs);\n background: transparent !important;\n border: none !important;\n min-width: 100%;\n \n &:first-child {\n padding: var(--spacing-xs) 0 0 var(--spacing-xs);\n }\n\n &:last-child {\n padding-right: var(--spacing-xs);\n }\n\n &:before {\n content: attr(data-label) \": \";\n font-weight: bold;\n padding-right: var(--spacing-xs);\n }\n\n > span {\n flex: 1;\n }\n \n ", "\n "])),
|
|
327
|
+
}, _media.default.mobile(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n height: auto;\n margin-bottom: var(--spacing-xs);\n background: transparent !important;\n border: none !important;\n min-width: 100%;\n \n &:first-child {\n padding: var(--spacing-xs) 0 0 var(--spacing-xs);\n }\n\n &:last-child {\n padding-right: var(--spacing-xs);\n }\n\n &:before {\n content: attr(data-label) \": \";\n font-weight: bold;\n padding-right: var(--spacing-xs);\n }\n\n > span {\n flex: 1;\n }\n \n ", "\n "])), _ref13 => {
|
|
318
328
|
let {
|
|
319
329
|
custom
|
|
320
|
-
} =
|
|
330
|
+
} = _ref13;
|
|
321
331
|
return custom && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n &:last-child:before {\n display: none;\n }\n\n &:last-child {\n padding: 0;\n position: absolute;\n right: 0.75rem;\n top: var(--spacing-xs);\n justify-content: flex-end;\n }\n "])));
|
|
322
332
|
}));
|
|
323
333
|
var _default = exports.default = Table;
|