@cashub/ui 0.22.2 → 0.22.4

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/table/Table.js +27 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cashub/ui",
3
- "version": "0.22.2",
3
+ "version": "0.22.4",
4
4
  "private": false,
5
5
  "author": "CASHUB Team",
6
6
  "description": "CASHUB UI components library",
package/table/Table.js CHANGED
@@ -16,7 +16,7 @@ var _Paginate = _interopRequireDefault(require("../paginate/Paginate"));
16
16
  var _Select = _interopRequireDefault(require("../select/Select"));
17
17
  var _Popover = _interopRequireDefault(require("../popover/Popover"));
18
18
  var _jsxRuntime = require("react/jsx-runtime");
19
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
19
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
22
22
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -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
@@ -189,6 +190,7 @@ const Table = _ref => {
189
190
  clickable: onRowClick,
190
191
  active: active,
191
192
  primary: rowConfig.primary,
193
+ border: rowConfig.border,
192
194
  backgroundReverse: backgroundReverse,
193
195
  onClick: event => {
194
196
  handleRowClick(event, row);
@@ -260,7 +262,7 @@ const Table = _ref => {
260
262
  };
261
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"])));
262
264
  const TableHead = _styledComponents.default.thead(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n"])), _media.default.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: none;\n "]))));
263
- const BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n &:hover {\n > td {\n border-color: var(--color-primary);\n }\n }\n\n ", "\n\n ", "\n \n ", "\n"])), _ref2 => {
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 => {
264
266
  let {
265
267
  active,
266
268
  primary
@@ -271,7 +273,7 @@ const BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject
271
273
  clickable
272
274
  } = _ref3;
273
275
  return clickable && 'pointer: cursor;';
274
- }, _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 "])), _ref4 => {
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 => {
275
277
  let {
276
278
  backgroundReverse
277
279
  } = _ref4;
@@ -284,29 +286,39 @@ const BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject
284
286
  return (active || primary) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background: var(--color-background3);\n "])));
285
287
  }, _ref6 => {
286
288
  let {
287
- noData
289
+ border
288
290
  } = _ref6;
289
- return noData && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 168px;\n\n > td {\n &:first-child:before {\n display: none;\n }\n }\n "])));
291
+ return border && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-color: var(--color-white);\n border-width: 3px;\n "])));
292
+ }, _ref7 => {
293
+ let {
294
+ noData
295
+ } = _ref7;
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 "])));
290
297
  }));
291
- const TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 48px;\n background: ", ";\n padding: 0 var(--spacing-xs);\n max-width: 0px;\n text-align: ", ";\n vertical-align: middle;\n border-top: var(--border-width) solid transparent;\n border-bottom: var(--border-width) solid transparent;\n transition: border-color 0.3s;\n\n &:first-child {\n border-left: var(--border-width) solid transparent;\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: var(--border-width) solid transparent;\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\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"])), _ref7 => {
298
+ const TableDataCell = _styledComponents.default.td(_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 border-top: var(--border-width) solid transparent;\n border-bottom: var(--border-width) solid transparent;\n transition: border-color 0.3s;\n\n &:first-child {\n border-left: var(--border-width) solid transparent;\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: var(--border-width) solid transparent;\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\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"])), _ref8 => {
292
299
  let {
293
300
  backgroundReverse
294
- } = _ref7;
301
+ } = _ref8;
295
302
  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
296
- }, _ref8 => {
303
+ }, _ref9 => {
297
304
  let {
298
305
  center
299
- } = _ref8;
306
+ } = _ref9;
300
307
  return center ? 'center' : 'left';
301
- }, _ref9 => {
308
+ }, _ref10 => {
309
+ let {
310
+ border
311
+ } = _ref10;
312
+ return border && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n border-top: 3px solid var(--color-white);\n border-bottom: 3px solid var(--color-white);\n &:first-child {\n border-left: 3px solid var(--color-white);\n }\n &:last-child {\n border-right: 3px solid var(--color-white);\n }\n "])));
313
+ }, _ref11 => {
302
314
  let {
303
315
  noData
304
- } = _ref9;
305
- return noData && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n padding: 20px 0;\n "])));
306
- }, _media.default.mobile(_templateObject11 || (_templateObject11 = _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 "])), _ref10 => {
316
+ } = _ref11;
317
+ return noData && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n padding: 20px 0;\n "])));
318
+ }, _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 "])), _ref12 => {
307
319
  let {
308
320
  custom
309
- } = _ref10;
310
- return custom && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _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 "])));
321
+ } = _ref12;
322
+ 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 "])));
311
323
  }));
312
324
  var _default = exports.default = Table;