@iankibetsh/shframework 4.7.8 → 4.8.0

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 (4) hide show
  1. package/dist/dist/library.mjs.css +32 -32
  2. package/dist/library.js +133 -97
  3. package/dist/library.mjs +133 -97
  4. package/package.json +1 -1
package/dist/dist/library.mjs.css CHANGED
@@ -1,36 +1,4 @@
1
1
 
2
- .colored-toast.swal2-icon-success {
3
- background-color: #a5dc86 !important;
4
- }
5
-
6
- .colored-toast.swal2-icon-error {
7
- background-color: #f27474 !important;
8
- }
9
-
10
- .colored-toast.swal2-icon-warning {
11
- background-color: #f8bb86 !important;
12
- }
13
-
14
- .colored-toast.swal2-icon-info {
15
- background-color: #3fc3ee !important;
16
- }
17
-
18
- .colored-toast.swal2-icon-question {
19
- background-color: #87adbd !important;
20
- }
21
-
22
- .colored-toast .swal2-title {
23
- color: white;
24
- }
25
-
26
- .colored-toast .swal2-close {
27
- color: white;
28
- }
29
-
30
- .colored-toast .swal2-html-container {
31
- color: white;
32
- }
33
-
34
2
  .sh-phone{
35
3
  display: flex;
36
4
  width: 100%;
@@ -63,6 +31,38 @@
63
31
  opacity: 0.5;
64
32
  }
65
33
 
34
+ .colored-toast.swal2-icon-success {
35
+ background-color: #a5dc86 !important;
36
+ }
37
+
38
+ .colored-toast.swal2-icon-error {
39
+ background-color: #f27474 !important;
40
+ }
41
+
42
+ .colored-toast.swal2-icon-warning {
43
+ background-color: #f8bb86 !important;
44
+ }
45
+
46
+ .colored-toast.swal2-icon-info {
47
+ background-color: #3fc3ee !important;
48
+ }
49
+
50
+ .colored-toast.swal2-icon-question {
51
+ background-color: #87adbd !important;
52
+ }
53
+
54
+ .colored-toast .swal2-title {
55
+ color: white;
56
+ }
57
+
58
+ .colored-toast .swal2-close {
59
+ color: white;
60
+ }
61
+
62
+ .colored-toast .swal2-html-container {
63
+ color: white;
64
+ }
65
+
66
66
  .permissions-main {
67
67
  background: #edeff2;
68
68
  }
package/dist/library.js CHANGED
@@ -3630,7 +3630,7 @@ return (_ctx, _cache) => {
3630
3630
  : vue.createCommentVNode("v-if", true)
3631
3631
  ], 2 /* CLASS */))
3632
3632
  : vue.createCommentVNode("v-if", true),
3633
- (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field)), vue.mergeProps(getComponentProps(field), {
3633
+ (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field)), vue.mergeProps({ ref_for: true }, getComponentProps(field), {
3634
3634
  isInvalid: typeof validationErrors.value[field.field] !== 'undefined',
3635
3635
  onClick: $event => (fieldChanged(field.field)),
3636
3636
  "onUpdate:modelValue": [$event => (fieldChanged(field.field)), $event => ((formFields.value[index].value) = $event)],
@@ -4866,17 +4866,18 @@ const _hoisted_22 = { class: "sh-thead" };
4866
4866
  const _hoisted_23 = ["onClick"];
4867
4867
  const _hoisted_24 = ["onClick"];
4868
4868
  const _hoisted_25 = ["onClick"];
4869
- const _hoisted_26 = {
4869
+ const _hoisted_26 = ["onClick"];
4870
+ const _hoisted_27 = {
4870
4871
  key: 0,
4871
4872
  class: "text-capitalize"
4872
4873
  };
4873
- const _hoisted_27 = { class: "sh-tbody" };
4874
- const _hoisted_28 = {
4874
+ const _hoisted_28 = { class: "sh-tbody" };
4875
+ const _hoisted_29 = {
4875
4876
  key: 0,
4876
4877
  class: "text-center"
4877
4878
  };
4878
- const _hoisted_29 = ["colspan"];
4879
- const _hoisted_30 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
4879
+ const _hoisted_30 = ["colspan"];
4880
+ const _hoisted_31 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
4880
4881
  /*#__PURE__*/vue.createElementVNode("div", {
4881
4882
  class: "spinner-border",
4882
4883
  role: "status"
@@ -4884,42 +4885,43 @@ const _hoisted_30 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-ce
4884
4885
  /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
4885
4886
  ])
4886
4887
  ], -1 /* HOISTED */);
4887
- const _hoisted_31 = [
4888
- _hoisted_30
4888
+ const _hoisted_32 = [
4889
+ _hoisted_31
4889
4890
  ];
4890
- const _hoisted_32 = {
4891
+ const _hoisted_33 = {
4891
4892
  key: 1,
4892
4893
  class: "text-center alert alert-danger"
4893
4894
  };
4894
- const _hoisted_33 = ["colspan"];
4895
- const _hoisted_34 = {
4895
+ const _hoisted_34 = ["colspan"];
4896
+ const _hoisted_35 = {
4896
4897
  key: 2,
4897
4898
  class: "text-center alert alert-info no_records"
4898
4899
  };
4899
- const _hoisted_35 = ["colspan"];
4900
- const _hoisted_36 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
4901
- const _hoisted_37 = ["onClick"];
4902
- const _hoisted_38 = { key: 1 };
4903
- const _hoisted_39 = {
4900
+ const _hoisted_36 = ["colspan"];
4901
+ const _hoisted_37 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
4902
+ const _hoisted_38 = ["onClick"];
4903
+ const _hoisted_39 = { key: 1 };
4904
+ const _hoisted_40 = {
4904
4905
  key: 2,
4905
4906
  class: "text-success fw-bold"
4906
4907
  };
4907
- const _hoisted_40 = { key: 3 };
4908
- const _hoisted_41 = ["innerHTML"];
4908
+ const _hoisted_41 = { key: 3 };
4909
4909
  const _hoisted_42 = ["innerHTML"];
4910
4910
  const _hoisted_43 = ["innerHTML"];
4911
- const _hoisted_44 = {
4911
+ const _hoisted_44 = ["innerHTML"];
4912
+ const _hoisted_45 = ["innerHTML"];
4913
+ const _hoisted_46 = {
4912
4914
  key: 0,
4913
4915
  style: {"white-space":"nowrap"}
4914
4916
  };
4915
- const _hoisted_45 = ["href"];
4916
- const _hoisted_46 = ["title", "onClick"];
4917
- const _hoisted_47 = { key: 5 };
4918
- const _hoisted_48 = {
4917
+ const _hoisted_47 = ["href"];
4918
+ const _hoisted_48 = ["title", "onClick"];
4919
+ const _hoisted_49 = { key: 5 };
4920
+ const _hoisted_50 = {
4919
4921
  key: 0,
4920
4922
  class: "text-center"
4921
4923
  };
4922
- const _hoisted_49 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
4924
+ const _hoisted_51 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
4923
4925
  /*#__PURE__*/vue.createElementVNode("div", {
4924
4926
  class: "spinner-border",
4925
4927
  role: "status"
@@ -4927,44 +4929,49 @@ const _hoisted_49 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-ce
4927
4929
  /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
4928
4930
  ])
4929
4931
  ], -1 /* HOISTED */);
4930
- const _hoisted_50 = [
4931
- _hoisted_49
4932
+ const _hoisted_52 = [
4933
+ _hoisted_51
4932
4934
  ];
4933
- const _hoisted_51 = { key: 1 };
4934
- const _hoisted_52 = {
4935
+ const _hoisted_53 = { key: 1 };
4936
+ const _hoisted_54 = {
4935
4937
  key: 2,
4936
4938
  class: "mobile-list-items"
4937
4939
  };
4938
- const _hoisted_53 = ["onClick"];
4939
- const _hoisted_54 = {
4940
+ const _hoisted_55 = ["onClick"];
4941
+ const _hoisted_56 = {
4940
4942
  key: 0,
4941
4943
  class: "mb-1 font-weight-bold text-capitalize profile-form-title"
4942
4944
  };
4943
- const _hoisted_55 = {
4945
+ const _hoisted_57 = {
4944
4946
  key: 1,
4945
4947
  class: "mb-1 font-weight-bold text-capitalize profile-form-title"
4946
4948
  };
4947
- const _hoisted_56 = {
4949
+ const _hoisted_58 = {
4948
4950
  key: 2,
4949
4951
  class: "mb-1 font-weight-bold text-capitalize profile-form-title"
4950
4952
  };
4951
- const _hoisted_57 = { key: 1 };
4952
- const _hoisted_58 = {
4953
+ const _hoisted_59 = {
4954
+ key: 3,
4955
+ class: "mb-1 font-weight-bold text-capitalize profile-form-title"
4956
+ };
4957
+ const _hoisted_60 = { key: 1 };
4958
+ const _hoisted_61 = {
4953
4959
  key: 2,
4954
4960
  class: "text-primary fw-bold"
4955
4961
  };
4956
- const _hoisted_59 = { key: 3 };
4957
- const _hoisted_60 = ["innerHTML"];
4958
- const _hoisted_61 = ["innerHTML"];
4959
- const _hoisted_62 = ["innerHTML"];
4960
- const _hoisted_63 = /*#__PURE__*/vue.createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
4961
- const _hoisted_64 = { key: 0 };
4962
- const _hoisted_65 = ["href"];
4963
- const _hoisted_66 = ["title", "onClick"];
4962
+ const _hoisted_62 = { key: 3 };
4963
+ const _hoisted_63 = ["innerHTML"];
4964
+ const _hoisted_64 = ["innerHTML"];
4965
+ const _hoisted_65 = ["innerHTML"];
4966
+ const _hoisted_66 = ["innerHTML"];
4967
+ const _hoisted_67 = /*#__PURE__*/vue.createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
4968
+ const _hoisted_68 = { key: 0 };
4969
+ const _hoisted_69 = ["href"];
4970
+ const _hoisted_70 = ["title", "onClick"];
4964
4971
 
4965
4972
  const __default__ = {
4966
4973
  name: 'sh-table',
4967
- props: ['endPoint', 'headers', 'cacheKey', 'query', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle', 'hasRange','selectedRange','noRecordsMessage'],
4974
+ props: ['endPoint', 'headers','disableMobileResponsive', 'cacheKey', 'query', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle', 'hasRange','selectedRange','noRecordsMessage'],
4968
4975
  data(){
4969
4976
  return {
4970
4977
  order_by: '',
@@ -5391,7 +5398,7 @@ return (_ctx, _cache) => {
5391
5398
  ], 64 /* STABLE_FRAGMENT */))
5392
5399
  : vue.createCommentVNode("v-if", true)
5393
5400
  ], 64 /* STABLE_FRAGMENT */))
5394
- : (_ctx.windowWidth > 700)
5401
+ : (_ctx.windowWidth > 700 || __props.disableMobileResponsive)
5395
5402
  ? (vue.openBlock(), vue.createElementBlock("table", {
5396
5403
  key: 4,
5397
5404
  class: vue.normalizeClass(["table sh-table", __props.tableHover ? 'table-hover':''])
@@ -5406,47 +5413,53 @@ return (_ctx, _cache) => {
5406
5413
  class: "text-capitalize",
5407
5414
  onClick: $event => (_ctx.changeKey('order_by',title))
5408
5415
  }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_23))
5409
- : (typeof title === 'function')
5416
+ : (typeof title === 'object')
5410
5417
  ? (vue.openBlock(), vue.createElementBlock("a", {
5411
5418
  key: 1,
5412
5419
  class: "text-capitalize",
5413
- onClick: $event => (_ctx.changeKey('order_by',title(null)))
5414
- }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
5415
- : (typeof title !== 'undefined')
5420
+ onClick: $event => (_ctx.changeKey('order_by',title.key))
5421
+ }, vue.toDisplayString(title.label ?? title.key.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
5422
+ : (typeof title === 'function')
5416
5423
  ? (vue.openBlock(), vue.createElementBlock("a", {
5417
5424
  key: 2,
5418
5425
  class: "text-capitalize",
5419
- onClick: $event => (_ctx.changeKey('order_by',title))
5420
- }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
5421
- : vue.createCommentVNode("v-if", true)
5426
+ onClick: $event => (_ctx.changeKey('order_by',title(null)))
5427
+ }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
5428
+ : (typeof title !== 'undefined')
5429
+ ? (vue.openBlock(), vue.createElementBlock("a", {
5430
+ key: 3,
5431
+ class: "text-capitalize",
5432
+ onClick: $event => (_ctx.changeKey('order_by',title))
5433
+ }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_26))
5434
+ : vue.createCommentVNode("v-if", true)
5422
5435
  ]))
5423
5436
  }), 128 /* KEYED_FRAGMENT */)),
5424
5437
  (__props.actions)
5425
- ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_26, vue.toDisplayString(__props.actions.label), 1 /* TEXT */))
5438
+ ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_27, vue.toDisplayString(__props.actions.label), 1 /* TEXT */))
5426
5439
  : vue.createCommentVNode("v-if", true)
5427
5440
  ])
5428
5441
  ]),
5429
- vue.createElementVNode("tbody", _hoisted_27, [
5442
+ vue.createElementVNode("tbody", _hoisted_28, [
5430
5443
  (_ctx.loading === 'loading')
5431
- ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_28, [
5444
+ ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_29, [
5432
5445
  vue.createElementVNode("td", {
5433
5446
  colspan: _ctx.tableHeaders.length
5434
- }, [..._hoisted_31], 8 /* PROPS */, _hoisted_29)
5447
+ }, [..._hoisted_32], 8 /* PROPS */, _hoisted_30)
5435
5448
  ]))
5436
5449
  : (_ctx.loading === 'error')
5437
- ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_32, [
5450
+ ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_33, [
5438
5451
  vue.createElementVNode("td", {
5439
5452
  colspan: _ctx.tableHeaders.length
5440
- }, vue.toDisplayString(_ctx.loading_error), 9 /* TEXT, PROPS */, _hoisted_33)
5453
+ }, vue.toDisplayString(_ctx.loading_error), 9 /* TEXT, PROPS */, _hoisted_34)
5441
5454
  ]))
5442
5455
  : (_ctx.records.length === 0)
5443
- ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_34, [
5456
+ ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_35, [
5444
5457
  vue.createElementVNode("td", {
5445
5458
  colspan: __props.actions ? _ctx.tableHeaders.length + 1 : _ctx.tableHeaders.length
5446
5459
  }, [
5447
- _hoisted_36,
5460
+ _hoisted_37,
5448
5461
  vue.createTextVNode(" No records found ")
5449
- ], 8 /* PROPS */, _hoisted_35)
5462
+ ], 8 /* PROPS */, _hoisted_36)
5450
5463
  ]))
5451
5464
  : (_ctx.loading === 'done')
5452
5465
  ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 3 }, vue.renderList(_ctx.records, (record, index) => {
@@ -5466,29 +5479,39 @@ return (_ctx, _cache) => {
5466
5479
  innerHTML: record[key]
5467
5480
  }, null, 8 /* PROPS */, ["target", "to", "class", "innerHTML"]))
5468
5481
  : (_ctx.getFieldType(key) === 'numeric')
5469
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_38, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5482
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_39, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5470
5483
  : (_ctx.getFieldType(key) === 'money')
5471
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_39, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5484
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_40, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5472
5485
  : (_ctx.getFieldType(key) === 'date')
5473
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_40, vue.toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5486
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_41, vue.toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5474
5487
  : (typeof key === 'string')
5475
5488
  ? (vue.openBlock(), vue.createElementBlock("span", {
5476
5489
  key: 4,
5477
5490
  innerHTML: record[key]
5478
- }, null, 8 /* PROPS */, _hoisted_41))
5491
+ }, null, 8 /* PROPS */, _hoisted_42))
5479
5492
  : (typeof key === 'function')
5480
5493
  ? (vue.openBlock(), vue.createElementBlock("span", {
5481
5494
  key: 5,
5482
5495
  innerHTML: key(record, index)
5483
- }, null, 8 /* PROPS */, _hoisted_42))
5484
- : (vue.openBlock(), vue.createElementBlock("span", {
5485
- key: 6,
5486
- innerHTML: record[key[0]]
5487
5496
  }, null, 8 /* PROPS */, _hoisted_43))
5497
+ : (typeof key === 'object' && key.component)
5498
+ ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(key.component), {
5499
+ key: 6,
5500
+ item: record
5501
+ }, null, 8 /* PROPS */, ["item"]))
5502
+ : (typeof key === 'object')
5503
+ ? (vue.openBlock(), vue.createElementBlock("span", {
5504
+ key: 7,
5505
+ innerHTML: record[key.key ?? key.field]
5506
+ }, null, 8 /* PROPS */, _hoisted_44))
5507
+ : (vue.openBlock(), vue.createElementBlock("span", {
5508
+ key: 8,
5509
+ innerHTML: record[key[0]]
5510
+ }, null, 8 /* PROPS */, _hoisted_45))
5488
5511
  ]))
5489
5512
  }), 128 /* KEYED_FRAGMENT */)),
5490
5513
  (__props.actions)
5491
- ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_44, [
5514
+ ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_46, [
5492
5515
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.actions.actions, (act) => {
5493
5516
  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
5494
5517
  key: act.path
@@ -5553,7 +5576,7 @@ return (_ctx, _cache) => {
5553
5576
  }, null, 2 /* CLASS */))
5554
5577
  : vue.createCommentVNode("v-if", true),
5555
5578
  vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
5556
- ], 10 /* CLASS, PROPS */, _hoisted_45))
5579
+ ], 10 /* CLASS, PROPS */, _hoisted_47))
5557
5580
  : (act.emits)
5558
5581
  ? (vue.openBlock(), vue.createElementBlock("button", {
5559
5582
  key: 3,
@@ -5568,7 +5591,7 @@ return (_ctx, _cache) => {
5568
5591
  }, null, 2 /* CLASS */))
5569
5592
  : vue.createCommentVNode("v-if", true),
5570
5593
  vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
5571
- ], 10 /* CLASS, PROPS */, _hoisted_46))
5594
+ ], 10 /* CLASS, PROPS */, _hoisted_48))
5572
5595
  : (!act.emits)
5573
5596
  ? (vue.openBlock(), vue.createBlock(_component_router_link, {
5574
5597
  key: 4,
@@ -5596,20 +5619,20 @@ return (_ctx, _cache) => {
5596
5619
  }), 128 /* KEYED_FRAGMENT */))
5597
5620
  ]))
5598
5621
  : vue.createCommentVNode("v-if", true)
5599
- ], 10 /* CLASS, PROPS */, _hoisted_37))
5622
+ ], 10 /* CLASS, PROPS */, _hoisted_38))
5600
5623
  }), 128 /* KEYED_FRAGMENT */))
5601
5624
  : vue.createCommentVNode("v-if", true)
5602
5625
  ])
5603
5626
  ], 2 /* CLASS */))
5604
- : (vue.openBlock(), vue.createElementBlock("div", _hoisted_47, [
5627
+ : (vue.openBlock(), vue.createElementBlock("div", _hoisted_49, [
5605
5628
  (_ctx.loading === 'loading')
5606
- ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_48, [..._hoisted_50]))
5629
+ ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_50, [..._hoisted_52]))
5607
5630
  : (_ctx.loading === 'error')
5608
- ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_51, [
5631
+ ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_53, [
5609
5632
  vue.createElementVNode("span", null, vue.toDisplayString(_ctx.loading_error), 1 /* TEXT */)
5610
5633
  ]))
5611
5634
  : (_ctx.loading === 'done')
5612
- ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_52, [
5635
+ ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_54, [
5613
5636
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.records, (record, index) => {
5614
5637
  return (vue.openBlock(), vue.createElementBlock("div", {
5615
5638
  key: record.id,
@@ -5621,10 +5644,12 @@ return (_ctx, _cache) => {
5621
5644
  key: key[0]
5622
5645
  }, [
5623
5646
  (typeof key === 'string' )
5624
- ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_54, vue.toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
5647
+ ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_56, vue.toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
5625
5648
  : (typeof key === 'function')
5626
- ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_55, vue.toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
5627
- : (vue.openBlock(), vue.createElementBlock("p", _hoisted_56, vue.toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
5649
+ ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_57, vue.toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
5650
+ : (typeof key === 'object')
5651
+ ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_58, vue.toDisplayString(key.label ?? key.key.replace(/_/g, ' ')), 1 /* TEXT */))
5652
+ : (vue.openBlock(), vue.createElementBlock("p", _hoisted_59, vue.toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
5628
5653
  vue.createElementVNode("span", null, [
5629
5654
  (typeof key === 'string' && __props.links && __props.links[key])
5630
5655
  ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -5634,31 +5659,41 @@ return (_ctx, _cache) => {
5634
5659
  innerHTML: record[key]
5635
5660
  }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
5636
5661
  : (_ctx.getFieldType(key) === 'numeric')
5637
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_57, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5662
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_60, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5638
5663
  : (_ctx.getFieldType(key) === 'money')
5639
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_58, "KES " + vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5664
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_61, "KES " + vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5640
5665
  : (_ctx.getFieldType(key) === 'date')
5641
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_59, vue.toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5666
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_62, vue.toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5642
5667
  : (typeof key === 'string')
5643
5668
  ? (vue.openBlock(), vue.createElementBlock("span", {
5644
5669
  key: 4,
5645
5670
  innerHTML: record[key]
5646
- }, null, 8 /* PROPS */, _hoisted_60))
5647
- : (typeof key === 'function')
5648
- ? (vue.openBlock(), vue.createElementBlock("span", {
5671
+ }, null, 8 /* PROPS */, _hoisted_63))
5672
+ : (typeof key === 'object' && key.component)
5673
+ ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(key.component), {
5649
5674
  key: 5,
5650
- innerHTML: key(record, index )
5651
- }, null, 8 /* PROPS */, _hoisted_61))
5652
- : (vue.openBlock(), vue.createElementBlock("span", {
5653
- key: 6,
5654
- innerHTML: record[key[0]]
5655
- }, null, 8 /* PROPS */, _hoisted_62))
5675
+ item: record
5676
+ }, null, 8 /* PROPS */, ["item"]))
5677
+ : (typeof key === 'object')
5678
+ ? (vue.openBlock(), vue.createElementBlock("span", {
5679
+ key: 6,
5680
+ innerHTML: record[key.key ?? key.field]
5681
+ }, null, 8 /* PROPS */, _hoisted_64))
5682
+ : (typeof key === 'function')
5683
+ ? (vue.openBlock(), vue.createElementBlock("span", {
5684
+ key: 7,
5685
+ innerHTML: key(record, index )
5686
+ }, null, 8 /* PROPS */, _hoisted_65))
5687
+ : (vue.openBlock(), vue.createElementBlock("span", {
5688
+ key: 8,
5689
+ innerHTML: record[key[0]]
5690
+ }, null, 8 /* PROPS */, _hoisted_66))
5656
5691
  ]),
5657
- _hoisted_63
5692
+ _hoisted_67
5658
5693
  ], 64 /* STABLE_FRAGMENT */))
5659
5694
  }), 128 /* KEYED_FRAGMENT */)),
5660
5695
  (__props.actions)
5661
- ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_64, [
5696
+ ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_68, [
5662
5697
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.actions.actions, (act) => {
5663
5698
  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
5664
5699
  key: act.path
@@ -5681,7 +5716,7 @@ return (_ctx, _cache) => {
5681
5716
  }, null, 2 /* CLASS */))
5682
5717
  : vue.createCommentVNode("v-if", true),
5683
5718
  vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
5684
- ], 10 /* CLASS, PROPS */, _hoisted_65))
5719
+ ], 10 /* CLASS, PROPS */, _hoisted_69))
5685
5720
  : (act.emits)
5686
5721
  ? (vue.openBlock(), vue.createElementBlock("button", {
5687
5722
  key: 1,
@@ -5696,7 +5731,7 @@ return (_ctx, _cache) => {
5696
5731
  }, null, 2 /* CLASS */))
5697
5732
  : vue.createCommentVNode("v-if", true),
5698
5733
  vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
5699
- ], 10 /* CLASS, PROPS */, _hoisted_66))
5734
+ ], 10 /* CLASS, PROPS */, _hoisted_70))
5700
5735
  : (!act.emits)
5701
5736
  ? (vue.openBlock(), vue.createBlock(_component_router_link, {
5702
5737
  key: 2,
@@ -5724,7 +5759,7 @@ return (_ctx, _cache) => {
5724
5759
  }), 128 /* KEYED_FRAGMENT */))
5725
5760
  ]))
5726
5761
  : vue.createCommentVNode("v-if", true)
5727
- ], 8 /* PROPS */, _hoisted_53))
5762
+ ], 8 /* PROPS */, _hoisted_55))
5728
5763
  }), 128 /* KEYED_FRAGMENT */))
5729
5764
  ]))
5730
5765
  : vue.createCommentVNode("v-if", true)
@@ -5759,7 +5794,8 @@ return (_ctx, _cache) => {
5759
5794
  (_ctx.selectedRecord)
5760
5795
  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(action.canvasComponent), vue.mergeProps({
5761
5796
  key: 0,
5762
- onRecordUpdated: _ctx.reloadData
5797
+ onRecordUpdated: _ctx.reloadData,
5798
+ ref_for: true
5763
5799
  }, _ctx.cleanCanvasProps(action), { record: _ctx.selectedRecord }), null, 16 /* FULL_PROPS */, ["onRecordUpdated", "record"]))
5764
5800
  : vue.createCommentVNode("v-if", true)
5765
5801
  ]),
package/dist/library.mjs CHANGED
@@ -3618,7 +3618,7 @@ return (_ctx, _cache) => {
3618
3618
  : createCommentVNode("v-if", true)
3619
3619
  ], 2 /* CLASS */))
3620
3620
  : createCommentVNode("v-if", true),
3621
- (openBlock(), createBlock(resolveDynamicComponent(getFieldComponent(field)), mergeProps(getComponentProps(field), {
3621
+ (openBlock(), createBlock(resolveDynamicComponent(getFieldComponent(field)), mergeProps({ ref_for: true }, getComponentProps(field), {
3622
3622
  isInvalid: typeof validationErrors.value[field.field] !== 'undefined',
3623
3623
  onClick: $event => (fieldChanged(field.field)),
3624
3624
  "onUpdate:modelValue": [$event => (fieldChanged(field.field)), $event => ((formFields.value[index].value) = $event)],
@@ -4854,17 +4854,18 @@ const _hoisted_22 = { class: "sh-thead" };
4854
4854
  const _hoisted_23 = ["onClick"];
4855
4855
  const _hoisted_24 = ["onClick"];
4856
4856
  const _hoisted_25 = ["onClick"];
4857
- const _hoisted_26 = {
4857
+ const _hoisted_26 = ["onClick"];
4858
+ const _hoisted_27 = {
4858
4859
  key: 0,
4859
4860
  class: "text-capitalize"
4860
4861
  };
4861
- const _hoisted_27 = { class: "sh-tbody" };
4862
- const _hoisted_28 = {
4862
+ const _hoisted_28 = { class: "sh-tbody" };
4863
+ const _hoisted_29 = {
4863
4864
  key: 0,
4864
4865
  class: "text-center"
4865
4866
  };
4866
- const _hoisted_29 = ["colspan"];
4867
- const _hoisted_30 = /*#__PURE__*/createElementVNode("div", { class: "text-center" }, [
4867
+ const _hoisted_30 = ["colspan"];
4868
+ const _hoisted_31 = /*#__PURE__*/createElementVNode("div", { class: "text-center" }, [
4868
4869
  /*#__PURE__*/createElementVNode("div", {
4869
4870
  class: "spinner-border",
4870
4871
  role: "status"
@@ -4872,42 +4873,43 @@ const _hoisted_30 = /*#__PURE__*/createElementVNode("div", { class: "text-center
4872
4873
  /*#__PURE__*/createElementVNode("span", { class: "visually-hidden" }, "Loading...")
4873
4874
  ])
4874
4875
  ], -1 /* HOISTED */);
4875
- const _hoisted_31 = [
4876
- _hoisted_30
4876
+ const _hoisted_32 = [
4877
+ _hoisted_31
4877
4878
  ];
4878
- const _hoisted_32 = {
4879
+ const _hoisted_33 = {
4879
4880
  key: 1,
4880
4881
  class: "text-center alert alert-danger"
4881
4882
  };
4882
- const _hoisted_33 = ["colspan"];
4883
- const _hoisted_34 = {
4883
+ const _hoisted_34 = ["colspan"];
4884
+ const _hoisted_35 = {
4884
4885
  key: 2,
4885
4886
  class: "text-center alert alert-info no_records"
4886
4887
  };
4887
- const _hoisted_35 = ["colspan"];
4888
- const _hoisted_36 = /*#__PURE__*/createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
4889
- const _hoisted_37 = ["onClick"];
4890
- const _hoisted_38 = { key: 1 };
4891
- const _hoisted_39 = {
4888
+ const _hoisted_36 = ["colspan"];
4889
+ const _hoisted_37 = /*#__PURE__*/createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
4890
+ const _hoisted_38 = ["onClick"];
4891
+ const _hoisted_39 = { key: 1 };
4892
+ const _hoisted_40 = {
4892
4893
  key: 2,
4893
4894
  class: "text-success fw-bold"
4894
4895
  };
4895
- const _hoisted_40 = { key: 3 };
4896
- const _hoisted_41 = ["innerHTML"];
4896
+ const _hoisted_41 = { key: 3 };
4897
4897
  const _hoisted_42 = ["innerHTML"];
4898
4898
  const _hoisted_43 = ["innerHTML"];
4899
- const _hoisted_44 = {
4899
+ const _hoisted_44 = ["innerHTML"];
4900
+ const _hoisted_45 = ["innerHTML"];
4901
+ const _hoisted_46 = {
4900
4902
  key: 0,
4901
4903
  style: {"white-space":"nowrap"}
4902
4904
  };
4903
- const _hoisted_45 = ["href"];
4904
- const _hoisted_46 = ["title", "onClick"];
4905
- const _hoisted_47 = { key: 5 };
4906
- const _hoisted_48 = {
4905
+ const _hoisted_47 = ["href"];
4906
+ const _hoisted_48 = ["title", "onClick"];
4907
+ const _hoisted_49 = { key: 5 };
4908
+ const _hoisted_50 = {
4907
4909
  key: 0,
4908
4910
  class: "text-center"
4909
4911
  };
4910
- const _hoisted_49 = /*#__PURE__*/createElementVNode("div", { class: "text-center" }, [
4912
+ const _hoisted_51 = /*#__PURE__*/createElementVNode("div", { class: "text-center" }, [
4911
4913
  /*#__PURE__*/createElementVNode("div", {
4912
4914
  class: "spinner-border",
4913
4915
  role: "status"
@@ -4915,44 +4917,49 @@ const _hoisted_49 = /*#__PURE__*/createElementVNode("div", { class: "text-center
4915
4917
  /*#__PURE__*/createElementVNode("span", { class: "visually-hidden" }, "Loading...")
4916
4918
  ])
4917
4919
  ], -1 /* HOISTED */);
4918
- const _hoisted_50 = [
4919
- _hoisted_49
4920
+ const _hoisted_52 = [
4921
+ _hoisted_51
4920
4922
  ];
4921
- const _hoisted_51 = { key: 1 };
4922
- const _hoisted_52 = {
4923
+ const _hoisted_53 = { key: 1 };
4924
+ const _hoisted_54 = {
4923
4925
  key: 2,
4924
4926
  class: "mobile-list-items"
4925
4927
  };
4926
- const _hoisted_53 = ["onClick"];
4927
- const _hoisted_54 = {
4928
+ const _hoisted_55 = ["onClick"];
4929
+ const _hoisted_56 = {
4928
4930
  key: 0,
4929
4931
  class: "mb-1 font-weight-bold text-capitalize profile-form-title"
4930
4932
  };
4931
- const _hoisted_55 = {
4933
+ const _hoisted_57 = {
4932
4934
  key: 1,
4933
4935
  class: "mb-1 font-weight-bold text-capitalize profile-form-title"
4934
4936
  };
4935
- const _hoisted_56 = {
4937
+ const _hoisted_58 = {
4936
4938
  key: 2,
4937
4939
  class: "mb-1 font-weight-bold text-capitalize profile-form-title"
4938
4940
  };
4939
- const _hoisted_57 = { key: 1 };
4940
- const _hoisted_58 = {
4941
+ const _hoisted_59 = {
4942
+ key: 3,
4943
+ class: "mb-1 font-weight-bold text-capitalize profile-form-title"
4944
+ };
4945
+ const _hoisted_60 = { key: 1 };
4946
+ const _hoisted_61 = {
4941
4947
  key: 2,
4942
4948
  class: "text-primary fw-bold"
4943
4949
  };
4944
- const _hoisted_59 = { key: 3 };
4945
- const _hoisted_60 = ["innerHTML"];
4946
- const _hoisted_61 = ["innerHTML"];
4947
- const _hoisted_62 = ["innerHTML"];
4948
- const _hoisted_63 = /*#__PURE__*/createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
4949
- const _hoisted_64 = { key: 0 };
4950
- const _hoisted_65 = ["href"];
4951
- const _hoisted_66 = ["title", "onClick"];
4950
+ const _hoisted_62 = { key: 3 };
4951
+ const _hoisted_63 = ["innerHTML"];
4952
+ const _hoisted_64 = ["innerHTML"];
4953
+ const _hoisted_65 = ["innerHTML"];
4954
+ const _hoisted_66 = ["innerHTML"];
4955
+ const _hoisted_67 = /*#__PURE__*/createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
4956
+ const _hoisted_68 = { key: 0 };
4957
+ const _hoisted_69 = ["href"];
4958
+ const _hoisted_70 = ["title", "onClick"];
4952
4959
 
4953
4960
  const __default__ = {
4954
4961
  name: 'sh-table',
4955
- props: ['endPoint', 'headers', 'cacheKey', 'query', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle', 'hasRange','selectedRange','noRecordsMessage'],
4962
+ props: ['endPoint', 'headers','disableMobileResponsive', 'cacheKey', 'query', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle', 'hasRange','selectedRange','noRecordsMessage'],
4956
4963
  data(){
4957
4964
  return {
4958
4965
  order_by: '',
@@ -5379,7 +5386,7 @@ return (_ctx, _cache) => {
5379
5386
  ], 64 /* STABLE_FRAGMENT */))
5380
5387
  : createCommentVNode("v-if", true)
5381
5388
  ], 64 /* STABLE_FRAGMENT */))
5382
- : (_ctx.windowWidth > 700)
5389
+ : (_ctx.windowWidth > 700 || __props.disableMobileResponsive)
5383
5390
  ? (openBlock(), createElementBlock("table", {
5384
5391
  key: 4,
5385
5392
  class: normalizeClass(["table sh-table", __props.tableHover ? 'table-hover':''])
@@ -5394,47 +5401,53 @@ return (_ctx, _cache) => {
5394
5401
  class: "text-capitalize",
5395
5402
  onClick: $event => (_ctx.changeKey('order_by',title))
5396
5403
  }, toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_23))
5397
- : (typeof title === 'function')
5404
+ : (typeof title === 'object')
5398
5405
  ? (openBlock(), createElementBlock("a", {
5399
5406
  key: 1,
5400
5407
  class: "text-capitalize",
5401
- onClick: $event => (_ctx.changeKey('order_by',title(null)))
5402
- }, toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
5403
- : (typeof title !== 'undefined')
5408
+ onClick: $event => (_ctx.changeKey('order_by',title.key))
5409
+ }, toDisplayString(title.label ?? title.key.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
5410
+ : (typeof title === 'function')
5404
5411
  ? (openBlock(), createElementBlock("a", {
5405
5412
  key: 2,
5406
5413
  class: "text-capitalize",
5407
- onClick: $event => (_ctx.changeKey('order_by',title))
5408
- }, toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
5409
- : createCommentVNode("v-if", true)
5414
+ onClick: $event => (_ctx.changeKey('order_by',title(null)))
5415
+ }, toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
5416
+ : (typeof title !== 'undefined')
5417
+ ? (openBlock(), createElementBlock("a", {
5418
+ key: 3,
5419
+ class: "text-capitalize",
5420
+ onClick: $event => (_ctx.changeKey('order_by',title))
5421
+ }, toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_26))
5422
+ : createCommentVNode("v-if", true)
5410
5423
  ]))
5411
5424
  }), 128 /* KEYED_FRAGMENT */)),
5412
5425
  (__props.actions)
5413
- ? (openBlock(), createElementBlock("th", _hoisted_26, toDisplayString(__props.actions.label), 1 /* TEXT */))
5426
+ ? (openBlock(), createElementBlock("th", _hoisted_27, toDisplayString(__props.actions.label), 1 /* TEXT */))
5414
5427
  : createCommentVNode("v-if", true)
5415
5428
  ])
5416
5429
  ]),
5417
- createElementVNode("tbody", _hoisted_27, [
5430
+ createElementVNode("tbody", _hoisted_28, [
5418
5431
  (_ctx.loading === 'loading')
5419
- ? (openBlock(), createElementBlock("tr", _hoisted_28, [
5432
+ ? (openBlock(), createElementBlock("tr", _hoisted_29, [
5420
5433
  createElementVNode("td", {
5421
5434
  colspan: _ctx.tableHeaders.length
5422
- }, [..._hoisted_31], 8 /* PROPS */, _hoisted_29)
5435
+ }, [..._hoisted_32], 8 /* PROPS */, _hoisted_30)
5423
5436
  ]))
5424
5437
  : (_ctx.loading === 'error')
5425
- ? (openBlock(), createElementBlock("tr", _hoisted_32, [
5438
+ ? (openBlock(), createElementBlock("tr", _hoisted_33, [
5426
5439
  createElementVNode("td", {
5427
5440
  colspan: _ctx.tableHeaders.length
5428
- }, toDisplayString(_ctx.loading_error), 9 /* TEXT, PROPS */, _hoisted_33)
5441
+ }, toDisplayString(_ctx.loading_error), 9 /* TEXT, PROPS */, _hoisted_34)
5429
5442
  ]))
5430
5443
  : (_ctx.records.length === 0)
5431
- ? (openBlock(), createElementBlock("tr", _hoisted_34, [
5444
+ ? (openBlock(), createElementBlock("tr", _hoisted_35, [
5432
5445
  createElementVNode("td", {
5433
5446
  colspan: __props.actions ? _ctx.tableHeaders.length + 1 : _ctx.tableHeaders.length
5434
5447
  }, [
5435
- _hoisted_36,
5448
+ _hoisted_37,
5436
5449
  createTextVNode(" No records found ")
5437
- ], 8 /* PROPS */, _hoisted_35)
5450
+ ], 8 /* PROPS */, _hoisted_36)
5438
5451
  ]))
5439
5452
  : (_ctx.loading === 'done')
5440
5453
  ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(_ctx.records, (record, index) => {
@@ -5454,29 +5467,39 @@ return (_ctx, _cache) => {
5454
5467
  innerHTML: record[key]
5455
5468
  }, null, 8 /* PROPS */, ["target", "to", "class", "innerHTML"]))
5456
5469
  : (_ctx.getFieldType(key) === 'numeric')
5457
- ? (openBlock(), createElementBlock("span", _hoisted_38, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5470
+ ? (openBlock(), createElementBlock("span", _hoisted_39, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5458
5471
  : (_ctx.getFieldType(key) === 'money')
5459
- ? (openBlock(), createElementBlock("span", _hoisted_39, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5472
+ ? (openBlock(), createElementBlock("span", _hoisted_40, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5460
5473
  : (_ctx.getFieldType(key) === 'date')
5461
- ? (openBlock(), createElementBlock("span", _hoisted_40, toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5474
+ ? (openBlock(), createElementBlock("span", _hoisted_41, toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5462
5475
  : (typeof key === 'string')
5463
5476
  ? (openBlock(), createElementBlock("span", {
5464
5477
  key: 4,
5465
5478
  innerHTML: record[key]
5466
- }, null, 8 /* PROPS */, _hoisted_41))
5479
+ }, null, 8 /* PROPS */, _hoisted_42))
5467
5480
  : (typeof key === 'function')
5468
5481
  ? (openBlock(), createElementBlock("span", {
5469
5482
  key: 5,
5470
5483
  innerHTML: key(record, index)
5471
- }, null, 8 /* PROPS */, _hoisted_42))
5472
- : (openBlock(), createElementBlock("span", {
5473
- key: 6,
5474
- innerHTML: record[key[0]]
5475
5484
  }, null, 8 /* PROPS */, _hoisted_43))
5485
+ : (typeof key === 'object' && key.component)
5486
+ ? (openBlock(), createBlock(resolveDynamicComponent(key.component), {
5487
+ key: 6,
5488
+ item: record
5489
+ }, null, 8 /* PROPS */, ["item"]))
5490
+ : (typeof key === 'object')
5491
+ ? (openBlock(), createElementBlock("span", {
5492
+ key: 7,
5493
+ innerHTML: record[key.key ?? key.field]
5494
+ }, null, 8 /* PROPS */, _hoisted_44))
5495
+ : (openBlock(), createElementBlock("span", {
5496
+ key: 8,
5497
+ innerHTML: record[key[0]]
5498
+ }, null, 8 /* PROPS */, _hoisted_45))
5476
5499
  ]))
5477
5500
  }), 128 /* KEYED_FRAGMENT */)),
5478
5501
  (__props.actions)
5479
- ? (openBlock(), createElementBlock("td", _hoisted_44, [
5502
+ ? (openBlock(), createElementBlock("td", _hoisted_46, [
5480
5503
  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions.actions, (act) => {
5481
5504
  return (openBlock(), createElementBlock(Fragment, {
5482
5505
  key: act.path
@@ -5541,7 +5564,7 @@ return (_ctx, _cache) => {
5541
5564
  }, null, 2 /* CLASS */))
5542
5565
  : createCommentVNode("v-if", true),
5543
5566
  createTextVNode(" " + toDisplayString(act.label), 1 /* TEXT */)
5544
- ], 10 /* CLASS, PROPS */, _hoisted_45))
5567
+ ], 10 /* CLASS, PROPS */, _hoisted_47))
5545
5568
  : (act.emits)
5546
5569
  ? (openBlock(), createElementBlock("button", {
5547
5570
  key: 3,
@@ -5556,7 +5579,7 @@ return (_ctx, _cache) => {
5556
5579
  }, null, 2 /* CLASS */))
5557
5580
  : createCommentVNode("v-if", true),
5558
5581
  createTextVNode(" " + toDisplayString(act.label), 1 /* TEXT */)
5559
- ], 10 /* CLASS, PROPS */, _hoisted_46))
5582
+ ], 10 /* CLASS, PROPS */, _hoisted_48))
5560
5583
  : (!act.emits)
5561
5584
  ? (openBlock(), createBlock(_component_router_link, {
5562
5585
  key: 4,
@@ -5584,20 +5607,20 @@ return (_ctx, _cache) => {
5584
5607
  }), 128 /* KEYED_FRAGMENT */))
5585
5608
  ]))
5586
5609
  : createCommentVNode("v-if", true)
5587
- ], 10 /* CLASS, PROPS */, _hoisted_37))
5610
+ ], 10 /* CLASS, PROPS */, _hoisted_38))
5588
5611
  }), 128 /* KEYED_FRAGMENT */))
5589
5612
  : createCommentVNode("v-if", true)
5590
5613
  ])
5591
5614
  ], 2 /* CLASS */))
5592
- : (openBlock(), createElementBlock("div", _hoisted_47, [
5615
+ : (openBlock(), createElementBlock("div", _hoisted_49, [
5593
5616
  (_ctx.loading === 'loading')
5594
- ? (openBlock(), createElementBlock("div", _hoisted_48, [..._hoisted_50]))
5617
+ ? (openBlock(), createElementBlock("div", _hoisted_50, [..._hoisted_52]))
5595
5618
  : (_ctx.loading === 'error')
5596
- ? (openBlock(), createElementBlock("div", _hoisted_51, [
5619
+ ? (openBlock(), createElementBlock("div", _hoisted_53, [
5597
5620
  createElementVNode("span", null, toDisplayString(_ctx.loading_error), 1 /* TEXT */)
5598
5621
  ]))
5599
5622
  : (_ctx.loading === 'done')
5600
- ? (openBlock(), createElementBlock("div", _hoisted_52, [
5623
+ ? (openBlock(), createElementBlock("div", _hoisted_54, [
5601
5624
  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.records, (record, index) => {
5602
5625
  return (openBlock(), createElementBlock("div", {
5603
5626
  key: record.id,
@@ -5609,10 +5632,12 @@ return (_ctx, _cache) => {
5609
5632
  key: key[0]
5610
5633
  }, [
5611
5634
  (typeof key === 'string' )
5612
- ? (openBlock(), createElementBlock("p", _hoisted_54, toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
5635
+ ? (openBlock(), createElementBlock("p", _hoisted_56, toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
5613
5636
  : (typeof key === 'function')
5614
- ? (openBlock(), createElementBlock("p", _hoisted_55, toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
5615
- : (openBlock(), createElementBlock("p", _hoisted_56, toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
5637
+ ? (openBlock(), createElementBlock("p", _hoisted_57, toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
5638
+ : (typeof key === 'object')
5639
+ ? (openBlock(), createElementBlock("p", _hoisted_58, toDisplayString(key.label ?? key.key.replace(/_/g, ' ')), 1 /* TEXT */))
5640
+ : (openBlock(), createElementBlock("p", _hoisted_59, toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
5616
5641
  createElementVNode("span", null, [
5617
5642
  (typeof key === 'string' && __props.links && __props.links[key])
5618
5643
  ? (openBlock(), createBlock(_component_router_link, {
@@ -5622,31 +5647,41 @@ return (_ctx, _cache) => {
5622
5647
  innerHTML: record[key]
5623
5648
  }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
5624
5649
  : (_ctx.getFieldType(key) === 'numeric')
5625
- ? (openBlock(), createElementBlock("span", _hoisted_57, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5650
+ ? (openBlock(), createElementBlock("span", _hoisted_60, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5626
5651
  : (_ctx.getFieldType(key) === 'money')
5627
- ? (openBlock(), createElementBlock("span", _hoisted_58, "KES " + toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5652
+ ? (openBlock(), createElementBlock("span", _hoisted_61, "KES " + toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5628
5653
  : (_ctx.getFieldType(key) === 'date')
5629
- ? (openBlock(), createElementBlock("span", _hoisted_59, toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5654
+ ? (openBlock(), createElementBlock("span", _hoisted_62, toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5630
5655
  : (typeof key === 'string')
5631
5656
  ? (openBlock(), createElementBlock("span", {
5632
5657
  key: 4,
5633
5658
  innerHTML: record[key]
5634
- }, null, 8 /* PROPS */, _hoisted_60))
5635
- : (typeof key === 'function')
5636
- ? (openBlock(), createElementBlock("span", {
5659
+ }, null, 8 /* PROPS */, _hoisted_63))
5660
+ : (typeof key === 'object' && key.component)
5661
+ ? (openBlock(), createBlock(resolveDynamicComponent(key.component), {
5637
5662
  key: 5,
5638
- innerHTML: key(record, index )
5639
- }, null, 8 /* PROPS */, _hoisted_61))
5640
- : (openBlock(), createElementBlock("span", {
5641
- key: 6,
5642
- innerHTML: record[key[0]]
5643
- }, null, 8 /* PROPS */, _hoisted_62))
5663
+ item: record
5664
+ }, null, 8 /* PROPS */, ["item"]))
5665
+ : (typeof key === 'object')
5666
+ ? (openBlock(), createElementBlock("span", {
5667
+ key: 6,
5668
+ innerHTML: record[key.key ?? key.field]
5669
+ }, null, 8 /* PROPS */, _hoisted_64))
5670
+ : (typeof key === 'function')
5671
+ ? (openBlock(), createElementBlock("span", {
5672
+ key: 7,
5673
+ innerHTML: key(record, index )
5674
+ }, null, 8 /* PROPS */, _hoisted_65))
5675
+ : (openBlock(), createElementBlock("span", {
5676
+ key: 8,
5677
+ innerHTML: record[key[0]]
5678
+ }, null, 8 /* PROPS */, _hoisted_66))
5644
5679
  ]),
5645
- _hoisted_63
5680
+ _hoisted_67
5646
5681
  ], 64 /* STABLE_FRAGMENT */))
5647
5682
  }), 128 /* KEYED_FRAGMENT */)),
5648
5683
  (__props.actions)
5649
- ? (openBlock(), createElementBlock("div", _hoisted_64, [
5684
+ ? (openBlock(), createElementBlock("div", _hoisted_68, [
5650
5685
  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions.actions, (act) => {
5651
5686
  return (openBlock(), createElementBlock(Fragment, {
5652
5687
  key: act.path
@@ -5669,7 +5704,7 @@ return (_ctx, _cache) => {
5669
5704
  }, null, 2 /* CLASS */))
5670
5705
  : createCommentVNode("v-if", true),
5671
5706
  createTextVNode(" " + toDisplayString(act.label), 1 /* TEXT */)
5672
- ], 10 /* CLASS, PROPS */, _hoisted_65))
5707
+ ], 10 /* CLASS, PROPS */, _hoisted_69))
5673
5708
  : (act.emits)
5674
5709
  ? (openBlock(), createElementBlock("button", {
5675
5710
  key: 1,
@@ -5684,7 +5719,7 @@ return (_ctx, _cache) => {
5684
5719
  }, null, 2 /* CLASS */))
5685
5720
  : createCommentVNode("v-if", true),
5686
5721
  createTextVNode(" " + toDisplayString(act.label), 1 /* TEXT */)
5687
- ], 10 /* CLASS, PROPS */, _hoisted_66))
5722
+ ], 10 /* CLASS, PROPS */, _hoisted_70))
5688
5723
  : (!act.emits)
5689
5724
  ? (openBlock(), createBlock(_component_router_link, {
5690
5725
  key: 2,
@@ -5712,7 +5747,7 @@ return (_ctx, _cache) => {
5712
5747
  }), 128 /* KEYED_FRAGMENT */))
5713
5748
  ]))
5714
5749
  : createCommentVNode("v-if", true)
5715
- ], 8 /* PROPS */, _hoisted_53))
5750
+ ], 8 /* PROPS */, _hoisted_55))
5716
5751
  }), 128 /* KEYED_FRAGMENT */))
5717
5752
  ]))
5718
5753
  : createCommentVNode("v-if", true)
@@ -5747,7 +5782,8 @@ return (_ctx, _cache) => {
5747
5782
  (_ctx.selectedRecord)
5748
5783
  ? (openBlock(), createBlock(resolveDynamicComponent(action.canvasComponent), mergeProps({
5749
5784
  key: 0,
5750
- onRecordUpdated: _ctx.reloadData
5785
+ onRecordUpdated: _ctx.reloadData,
5786
+ ref_for: true
5751
5787
  }, _ctx.cleanCanvasProps(action), { record: _ctx.selectedRecord }), null, 16 /* FULL_PROPS */, ["onRecordUpdated", "record"]))
5752
5788
  : createCommentVNode("v-if", true)
5753
5789
  ]),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iankibetsh/shframework",
3
- "version": "4.7.8",
3
+ "version": "4.8.0",
4
4
  "description": "Vue library for handling laravel backend",
5
5
  "main": "dist/library.js",
6
6
  "module": "dist/library.mjs",