@iankibetsh/shframework 4.7.8 → 4.7.9

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 +131 -94
  3. package/dist/library.mjs +131 -94
  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,54 @@ 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))
5416
+ : vue.createCommentVNode("v-if", true),
5417
+ (typeof title === 'object')
5418
+ ? (vue.openBlock(), vue.createElementBlock("a", {
5419
+ key: 1,
5420
+ class: "text-capitalize",
5421
+ onClick: $event => (_ctx.changeKey('order_by',title.key))
5422
+ }, vue.toDisplayString(title.label ?? title.key.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
5409
5423
  : (typeof title === 'function')
5410
5424
  ? (vue.openBlock(), vue.createElementBlock("a", {
5411
- key: 1,
5425
+ key: 2,
5412
5426
  class: "text-capitalize",
5413
5427
  onClick: $event => (_ctx.changeKey('order_by',title(null)))
5414
- }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
5428
+ }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
5415
5429
  : (typeof title !== 'undefined')
5416
5430
  ? (vue.openBlock(), vue.createElementBlock("a", {
5417
- key: 2,
5431
+ key: 3,
5418
5432
  class: "text-capitalize",
5419
5433
  onClick: $event => (_ctx.changeKey('order_by',title))
5420
- }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
5434
+ }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_26))
5421
5435
  : vue.createCommentVNode("v-if", true)
5422
5436
  ]))
5423
5437
  }), 128 /* KEYED_FRAGMENT */)),
5424
5438
  (__props.actions)
5425
- ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_26, vue.toDisplayString(__props.actions.label), 1 /* TEXT */))
5439
+ ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_27, vue.toDisplayString(__props.actions.label), 1 /* TEXT */))
5426
5440
  : vue.createCommentVNode("v-if", true)
5427
5441
  ])
5428
5442
  ]),
5429
- vue.createElementVNode("tbody", _hoisted_27, [
5443
+ vue.createElementVNode("tbody", _hoisted_28, [
5430
5444
  (_ctx.loading === 'loading')
5431
- ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_28, [
5445
+ ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_29, [
5432
5446
  vue.createElementVNode("td", {
5433
5447
  colspan: _ctx.tableHeaders.length
5434
- }, [..._hoisted_31], 8 /* PROPS */, _hoisted_29)
5448
+ }, [..._hoisted_32], 8 /* PROPS */, _hoisted_30)
5435
5449
  ]))
5436
5450
  : (_ctx.loading === 'error')
5437
- ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_32, [
5451
+ ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_33, [
5438
5452
  vue.createElementVNode("td", {
5439
5453
  colspan: _ctx.tableHeaders.length
5440
- }, vue.toDisplayString(_ctx.loading_error), 9 /* TEXT, PROPS */, _hoisted_33)
5454
+ }, vue.toDisplayString(_ctx.loading_error), 9 /* TEXT, PROPS */, _hoisted_34)
5441
5455
  ]))
5442
5456
  : (_ctx.records.length === 0)
5443
- ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_34, [
5457
+ ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_35, [
5444
5458
  vue.createElementVNode("td", {
5445
5459
  colspan: __props.actions ? _ctx.tableHeaders.length + 1 : _ctx.tableHeaders.length
5446
5460
  }, [
5447
- _hoisted_36,
5461
+ _hoisted_37,
5448
5462
  vue.createTextVNode(" No records found ")
5449
- ], 8 /* PROPS */, _hoisted_35)
5463
+ ], 8 /* PROPS */, _hoisted_36)
5450
5464
  ]))
5451
5465
  : (_ctx.loading === 'done')
5452
5466
  ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 3 }, vue.renderList(_ctx.records, (record, index) => {
@@ -5466,29 +5480,39 @@ return (_ctx, _cache) => {
5466
5480
  innerHTML: record[key]
5467
5481
  }, null, 8 /* PROPS */, ["target", "to", "class", "innerHTML"]))
5468
5482
  : (_ctx.getFieldType(key) === 'numeric')
5469
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_38, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5483
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_39, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5470
5484
  : (_ctx.getFieldType(key) === 'money')
5471
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_39, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5485
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_40, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5472
5486
  : (_ctx.getFieldType(key) === 'date')
5473
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_40, vue.toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5487
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_41, vue.toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5474
5488
  : (typeof key === 'string')
5475
5489
  ? (vue.openBlock(), vue.createElementBlock("span", {
5476
5490
  key: 4,
5477
5491
  innerHTML: record[key]
5478
- }, null, 8 /* PROPS */, _hoisted_41))
5492
+ }, null, 8 /* PROPS */, _hoisted_42))
5479
5493
  : (typeof key === 'function')
5480
5494
  ? (vue.openBlock(), vue.createElementBlock("span", {
5481
5495
  key: 5,
5482
5496
  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
5497
  }, null, 8 /* PROPS */, _hoisted_43))
5498
+ : (typeof key === 'object' && key.component)
5499
+ ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(key.component), {
5500
+ key: 6,
5501
+ item: record
5502
+ }, null, 8 /* PROPS */, ["item"]))
5503
+ : (typeof key === 'object')
5504
+ ? (vue.openBlock(), vue.createElementBlock("span", {
5505
+ key: 7,
5506
+ innerHTML: record[key.key ?? key.field]
5507
+ }, null, 8 /* PROPS */, _hoisted_44))
5508
+ : (vue.openBlock(), vue.createElementBlock("span", {
5509
+ key: 8,
5510
+ innerHTML: record[key[0]]
5511
+ }, null, 8 /* PROPS */, _hoisted_45))
5488
5512
  ]))
5489
5513
  }), 128 /* KEYED_FRAGMENT */)),
5490
5514
  (__props.actions)
5491
- ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_44, [
5515
+ ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_46, [
5492
5516
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.actions.actions, (act) => {
5493
5517
  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
5494
5518
  key: act.path
@@ -5553,7 +5577,7 @@ return (_ctx, _cache) => {
5553
5577
  }, null, 2 /* CLASS */))
5554
5578
  : vue.createCommentVNode("v-if", true),
5555
5579
  vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
5556
- ], 10 /* CLASS, PROPS */, _hoisted_45))
5580
+ ], 10 /* CLASS, PROPS */, _hoisted_47))
5557
5581
  : (act.emits)
5558
5582
  ? (vue.openBlock(), vue.createElementBlock("button", {
5559
5583
  key: 3,
@@ -5568,7 +5592,7 @@ return (_ctx, _cache) => {
5568
5592
  }, null, 2 /* CLASS */))
5569
5593
  : vue.createCommentVNode("v-if", true),
5570
5594
  vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
5571
- ], 10 /* CLASS, PROPS */, _hoisted_46))
5595
+ ], 10 /* CLASS, PROPS */, _hoisted_48))
5572
5596
  : (!act.emits)
5573
5597
  ? (vue.openBlock(), vue.createBlock(_component_router_link, {
5574
5598
  key: 4,
@@ -5596,20 +5620,20 @@ return (_ctx, _cache) => {
5596
5620
  }), 128 /* KEYED_FRAGMENT */))
5597
5621
  ]))
5598
5622
  : vue.createCommentVNode("v-if", true)
5599
- ], 10 /* CLASS, PROPS */, _hoisted_37))
5623
+ ], 10 /* CLASS, PROPS */, _hoisted_38))
5600
5624
  }), 128 /* KEYED_FRAGMENT */))
5601
5625
  : vue.createCommentVNode("v-if", true)
5602
5626
  ])
5603
5627
  ], 2 /* CLASS */))
5604
- : (vue.openBlock(), vue.createElementBlock("div", _hoisted_47, [
5628
+ : (vue.openBlock(), vue.createElementBlock("div", _hoisted_49, [
5605
5629
  (_ctx.loading === 'loading')
5606
- ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_48, [..._hoisted_50]))
5630
+ ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_50, [..._hoisted_52]))
5607
5631
  : (_ctx.loading === 'error')
5608
- ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_51, [
5632
+ ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_53, [
5609
5633
  vue.createElementVNode("span", null, vue.toDisplayString(_ctx.loading_error), 1 /* TEXT */)
5610
5634
  ]))
5611
5635
  : (_ctx.loading === 'done')
5612
- ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_52, [
5636
+ ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_54, [
5613
5637
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.records, (record, index) => {
5614
5638
  return (vue.openBlock(), vue.createElementBlock("div", {
5615
5639
  key: record.id,
@@ -5621,10 +5645,12 @@ return (_ctx, _cache) => {
5621
5645
  key: key[0]
5622
5646
  }, [
5623
5647
  (typeof key === 'string' )
5624
- ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_54, vue.toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
5648
+ ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_56, vue.toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
5625
5649
  : (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 */)),
5650
+ ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_57, vue.toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
5651
+ : (typeof key === 'object')
5652
+ ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_58, vue.toDisplayString(key.label ?? key.key.replace(/_/g, ' ')), 1 /* TEXT */))
5653
+ : (vue.openBlock(), vue.createElementBlock("p", _hoisted_59, vue.toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
5628
5654
  vue.createElementVNode("span", null, [
5629
5655
  (typeof key === 'string' && __props.links && __props.links[key])
5630
5656
  ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -5634,31 +5660,41 @@ return (_ctx, _cache) => {
5634
5660
  innerHTML: record[key]
5635
5661
  }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
5636
5662
  : (_ctx.getFieldType(key) === 'numeric')
5637
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_57, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5663
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_60, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5638
5664
  : (_ctx.getFieldType(key) === 'money')
5639
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_58, "KES " + vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5665
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_61, "KES " + vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5640
5666
  : (_ctx.getFieldType(key) === 'date')
5641
- ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_59, vue.toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5667
+ ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_62, vue.toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5642
5668
  : (typeof key === 'string')
5643
5669
  ? (vue.openBlock(), vue.createElementBlock("span", {
5644
5670
  key: 4,
5645
5671
  innerHTML: record[key]
5646
- }, null, 8 /* PROPS */, _hoisted_60))
5647
- : (typeof key === 'function')
5648
- ? (vue.openBlock(), vue.createElementBlock("span", {
5672
+ }, null, 8 /* PROPS */, _hoisted_63))
5673
+ : (typeof key === 'object' && key.component)
5674
+ ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(key.component), {
5649
5675
  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))
5676
+ item: record
5677
+ }, null, 8 /* PROPS */, ["item"]))
5678
+ : (typeof key === 'object')
5679
+ ? (vue.openBlock(), vue.createElementBlock("span", {
5680
+ key: 6,
5681
+ innerHTML: record[key.key ?? key.field]
5682
+ }, null, 8 /* PROPS */, _hoisted_64))
5683
+ : (typeof key === 'function')
5684
+ ? (vue.openBlock(), vue.createElementBlock("span", {
5685
+ key: 7,
5686
+ innerHTML: key(record, index )
5687
+ }, null, 8 /* PROPS */, _hoisted_65))
5688
+ : (vue.openBlock(), vue.createElementBlock("span", {
5689
+ key: 8,
5690
+ innerHTML: record[key[0]]
5691
+ }, null, 8 /* PROPS */, _hoisted_66))
5656
5692
  ]),
5657
- _hoisted_63
5693
+ _hoisted_67
5658
5694
  ], 64 /* STABLE_FRAGMENT */))
5659
5695
  }), 128 /* KEYED_FRAGMENT */)),
5660
5696
  (__props.actions)
5661
- ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_64, [
5697
+ ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_68, [
5662
5698
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.actions.actions, (act) => {
5663
5699
  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
5664
5700
  key: act.path
@@ -5681,7 +5717,7 @@ return (_ctx, _cache) => {
5681
5717
  }, null, 2 /* CLASS */))
5682
5718
  : vue.createCommentVNode("v-if", true),
5683
5719
  vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
5684
- ], 10 /* CLASS, PROPS */, _hoisted_65))
5720
+ ], 10 /* CLASS, PROPS */, _hoisted_69))
5685
5721
  : (act.emits)
5686
5722
  ? (vue.openBlock(), vue.createElementBlock("button", {
5687
5723
  key: 1,
@@ -5696,7 +5732,7 @@ return (_ctx, _cache) => {
5696
5732
  }, null, 2 /* CLASS */))
5697
5733
  : vue.createCommentVNode("v-if", true),
5698
5734
  vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
5699
- ], 10 /* CLASS, PROPS */, _hoisted_66))
5735
+ ], 10 /* CLASS, PROPS */, _hoisted_70))
5700
5736
  : (!act.emits)
5701
5737
  ? (vue.openBlock(), vue.createBlock(_component_router_link, {
5702
5738
  key: 2,
@@ -5724,7 +5760,7 @@ return (_ctx, _cache) => {
5724
5760
  }), 128 /* KEYED_FRAGMENT */))
5725
5761
  ]))
5726
5762
  : vue.createCommentVNode("v-if", true)
5727
- ], 8 /* PROPS */, _hoisted_53))
5763
+ ], 8 /* PROPS */, _hoisted_55))
5728
5764
  }), 128 /* KEYED_FRAGMENT */))
5729
5765
  ]))
5730
5766
  : vue.createCommentVNode("v-if", true)
@@ -5759,7 +5795,8 @@ return (_ctx, _cache) => {
5759
5795
  (_ctx.selectedRecord)
5760
5796
  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(action.canvasComponent), vue.mergeProps({
5761
5797
  key: 0,
5762
- onRecordUpdated: _ctx.reloadData
5798
+ onRecordUpdated: _ctx.reloadData,
5799
+ ref_for: true
5763
5800
  }, _ctx.cleanCanvasProps(action), { record: _ctx.selectedRecord }), null, 16 /* FULL_PROPS */, ["onRecordUpdated", "record"]))
5764
5801
  : vue.createCommentVNode("v-if", true)
5765
5802
  ]),
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,54 @@ 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))
5404
+ : createCommentVNode("v-if", true),
5405
+ (typeof title === 'object')
5406
+ ? (openBlock(), createElementBlock("a", {
5407
+ key: 1,
5408
+ class: "text-capitalize",
5409
+ onClick: $event => (_ctx.changeKey('order_by',title.key))
5410
+ }, toDisplayString(title.label ?? title.key.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
5397
5411
  : (typeof title === 'function')
5398
5412
  ? (openBlock(), createElementBlock("a", {
5399
- key: 1,
5413
+ key: 2,
5400
5414
  class: "text-capitalize",
5401
5415
  onClick: $event => (_ctx.changeKey('order_by',title(null)))
5402
- }, toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
5416
+ }, toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
5403
5417
  : (typeof title !== 'undefined')
5404
5418
  ? (openBlock(), createElementBlock("a", {
5405
- key: 2,
5419
+ key: 3,
5406
5420
  class: "text-capitalize",
5407
5421
  onClick: $event => (_ctx.changeKey('order_by',title))
5408
- }, toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
5422
+ }, toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_26))
5409
5423
  : createCommentVNode("v-if", true)
5410
5424
  ]))
5411
5425
  }), 128 /* KEYED_FRAGMENT */)),
5412
5426
  (__props.actions)
5413
- ? (openBlock(), createElementBlock("th", _hoisted_26, toDisplayString(__props.actions.label), 1 /* TEXT */))
5427
+ ? (openBlock(), createElementBlock("th", _hoisted_27, toDisplayString(__props.actions.label), 1 /* TEXT */))
5414
5428
  : createCommentVNode("v-if", true)
5415
5429
  ])
5416
5430
  ]),
5417
- createElementVNode("tbody", _hoisted_27, [
5431
+ createElementVNode("tbody", _hoisted_28, [
5418
5432
  (_ctx.loading === 'loading')
5419
- ? (openBlock(), createElementBlock("tr", _hoisted_28, [
5433
+ ? (openBlock(), createElementBlock("tr", _hoisted_29, [
5420
5434
  createElementVNode("td", {
5421
5435
  colspan: _ctx.tableHeaders.length
5422
- }, [..._hoisted_31], 8 /* PROPS */, _hoisted_29)
5436
+ }, [..._hoisted_32], 8 /* PROPS */, _hoisted_30)
5423
5437
  ]))
5424
5438
  : (_ctx.loading === 'error')
5425
- ? (openBlock(), createElementBlock("tr", _hoisted_32, [
5439
+ ? (openBlock(), createElementBlock("tr", _hoisted_33, [
5426
5440
  createElementVNode("td", {
5427
5441
  colspan: _ctx.tableHeaders.length
5428
- }, toDisplayString(_ctx.loading_error), 9 /* TEXT, PROPS */, _hoisted_33)
5442
+ }, toDisplayString(_ctx.loading_error), 9 /* TEXT, PROPS */, _hoisted_34)
5429
5443
  ]))
5430
5444
  : (_ctx.records.length === 0)
5431
- ? (openBlock(), createElementBlock("tr", _hoisted_34, [
5445
+ ? (openBlock(), createElementBlock("tr", _hoisted_35, [
5432
5446
  createElementVNode("td", {
5433
5447
  colspan: __props.actions ? _ctx.tableHeaders.length + 1 : _ctx.tableHeaders.length
5434
5448
  }, [
5435
- _hoisted_36,
5449
+ _hoisted_37,
5436
5450
  createTextVNode(" No records found ")
5437
- ], 8 /* PROPS */, _hoisted_35)
5451
+ ], 8 /* PROPS */, _hoisted_36)
5438
5452
  ]))
5439
5453
  : (_ctx.loading === 'done')
5440
5454
  ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(_ctx.records, (record, index) => {
@@ -5454,29 +5468,39 @@ return (_ctx, _cache) => {
5454
5468
  innerHTML: record[key]
5455
5469
  }, null, 8 /* PROPS */, ["target", "to", "class", "innerHTML"]))
5456
5470
  : (_ctx.getFieldType(key) === 'numeric')
5457
- ? (openBlock(), createElementBlock("span", _hoisted_38, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5471
+ ? (openBlock(), createElementBlock("span", _hoisted_39, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5458
5472
  : (_ctx.getFieldType(key) === 'money')
5459
- ? (openBlock(), createElementBlock("span", _hoisted_39, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5473
+ ? (openBlock(), createElementBlock("span", _hoisted_40, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5460
5474
  : (_ctx.getFieldType(key) === 'date')
5461
- ? (openBlock(), createElementBlock("span", _hoisted_40, toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5475
+ ? (openBlock(), createElementBlock("span", _hoisted_41, toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5462
5476
  : (typeof key === 'string')
5463
5477
  ? (openBlock(), createElementBlock("span", {
5464
5478
  key: 4,
5465
5479
  innerHTML: record[key]
5466
- }, null, 8 /* PROPS */, _hoisted_41))
5480
+ }, null, 8 /* PROPS */, _hoisted_42))
5467
5481
  : (typeof key === 'function')
5468
5482
  ? (openBlock(), createElementBlock("span", {
5469
5483
  key: 5,
5470
5484
  innerHTML: key(record, index)
5471
- }, null, 8 /* PROPS */, _hoisted_42))
5472
- : (openBlock(), createElementBlock("span", {
5473
- key: 6,
5474
- innerHTML: record[key[0]]
5475
5485
  }, null, 8 /* PROPS */, _hoisted_43))
5486
+ : (typeof key === 'object' && key.component)
5487
+ ? (openBlock(), createBlock(resolveDynamicComponent(key.component), {
5488
+ key: 6,
5489
+ item: record
5490
+ }, null, 8 /* PROPS */, ["item"]))
5491
+ : (typeof key === 'object')
5492
+ ? (openBlock(), createElementBlock("span", {
5493
+ key: 7,
5494
+ innerHTML: record[key.key ?? key.field]
5495
+ }, null, 8 /* PROPS */, _hoisted_44))
5496
+ : (openBlock(), createElementBlock("span", {
5497
+ key: 8,
5498
+ innerHTML: record[key[0]]
5499
+ }, null, 8 /* PROPS */, _hoisted_45))
5476
5500
  ]))
5477
5501
  }), 128 /* KEYED_FRAGMENT */)),
5478
5502
  (__props.actions)
5479
- ? (openBlock(), createElementBlock("td", _hoisted_44, [
5503
+ ? (openBlock(), createElementBlock("td", _hoisted_46, [
5480
5504
  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions.actions, (act) => {
5481
5505
  return (openBlock(), createElementBlock(Fragment, {
5482
5506
  key: act.path
@@ -5541,7 +5565,7 @@ return (_ctx, _cache) => {
5541
5565
  }, null, 2 /* CLASS */))
5542
5566
  : createCommentVNode("v-if", true),
5543
5567
  createTextVNode(" " + toDisplayString(act.label), 1 /* TEXT */)
5544
- ], 10 /* CLASS, PROPS */, _hoisted_45))
5568
+ ], 10 /* CLASS, PROPS */, _hoisted_47))
5545
5569
  : (act.emits)
5546
5570
  ? (openBlock(), createElementBlock("button", {
5547
5571
  key: 3,
@@ -5556,7 +5580,7 @@ return (_ctx, _cache) => {
5556
5580
  }, null, 2 /* CLASS */))
5557
5581
  : createCommentVNode("v-if", true),
5558
5582
  createTextVNode(" " + toDisplayString(act.label), 1 /* TEXT */)
5559
- ], 10 /* CLASS, PROPS */, _hoisted_46))
5583
+ ], 10 /* CLASS, PROPS */, _hoisted_48))
5560
5584
  : (!act.emits)
5561
5585
  ? (openBlock(), createBlock(_component_router_link, {
5562
5586
  key: 4,
@@ -5584,20 +5608,20 @@ return (_ctx, _cache) => {
5584
5608
  }), 128 /* KEYED_FRAGMENT */))
5585
5609
  ]))
5586
5610
  : createCommentVNode("v-if", true)
5587
- ], 10 /* CLASS, PROPS */, _hoisted_37))
5611
+ ], 10 /* CLASS, PROPS */, _hoisted_38))
5588
5612
  }), 128 /* KEYED_FRAGMENT */))
5589
5613
  : createCommentVNode("v-if", true)
5590
5614
  ])
5591
5615
  ], 2 /* CLASS */))
5592
- : (openBlock(), createElementBlock("div", _hoisted_47, [
5616
+ : (openBlock(), createElementBlock("div", _hoisted_49, [
5593
5617
  (_ctx.loading === 'loading')
5594
- ? (openBlock(), createElementBlock("div", _hoisted_48, [..._hoisted_50]))
5618
+ ? (openBlock(), createElementBlock("div", _hoisted_50, [..._hoisted_52]))
5595
5619
  : (_ctx.loading === 'error')
5596
- ? (openBlock(), createElementBlock("div", _hoisted_51, [
5620
+ ? (openBlock(), createElementBlock("div", _hoisted_53, [
5597
5621
  createElementVNode("span", null, toDisplayString(_ctx.loading_error), 1 /* TEXT */)
5598
5622
  ]))
5599
5623
  : (_ctx.loading === 'done')
5600
- ? (openBlock(), createElementBlock("div", _hoisted_52, [
5624
+ ? (openBlock(), createElementBlock("div", _hoisted_54, [
5601
5625
  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.records, (record, index) => {
5602
5626
  return (openBlock(), createElementBlock("div", {
5603
5627
  key: record.id,
@@ -5609,10 +5633,12 @@ return (_ctx, _cache) => {
5609
5633
  key: key[0]
5610
5634
  }, [
5611
5635
  (typeof key === 'string' )
5612
- ? (openBlock(), createElementBlock("p", _hoisted_54, toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
5636
+ ? (openBlock(), createElementBlock("p", _hoisted_56, toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
5613
5637
  : (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 */)),
5638
+ ? (openBlock(), createElementBlock("p", _hoisted_57, toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
5639
+ : (typeof key === 'object')
5640
+ ? (openBlock(), createElementBlock("p", _hoisted_58, toDisplayString(key.label ?? key.key.replace(/_/g, ' ')), 1 /* TEXT */))
5641
+ : (openBlock(), createElementBlock("p", _hoisted_59, toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
5616
5642
  createElementVNode("span", null, [
5617
5643
  (typeof key === 'string' && __props.links && __props.links[key])
5618
5644
  ? (openBlock(), createBlock(_component_router_link, {
@@ -5622,31 +5648,41 @@ return (_ctx, _cache) => {
5622
5648
  innerHTML: record[key]
5623
5649
  }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
5624
5650
  : (_ctx.getFieldType(key) === 'numeric')
5625
- ? (openBlock(), createElementBlock("span", _hoisted_57, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5651
+ ? (openBlock(), createElementBlock("span", _hoisted_60, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5626
5652
  : (_ctx.getFieldType(key) === 'money')
5627
- ? (openBlock(), createElementBlock("span", _hoisted_58, "KES " + toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5653
+ ? (openBlock(), createElementBlock("span", _hoisted_61, "KES " + toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
5628
5654
  : (_ctx.getFieldType(key) === 'date')
5629
- ? (openBlock(), createElementBlock("span", _hoisted_59, toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5655
+ ? (openBlock(), createElementBlock("span", _hoisted_62, toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
5630
5656
  : (typeof key === 'string')
5631
5657
  ? (openBlock(), createElementBlock("span", {
5632
5658
  key: 4,
5633
5659
  innerHTML: record[key]
5634
- }, null, 8 /* PROPS */, _hoisted_60))
5635
- : (typeof key === 'function')
5636
- ? (openBlock(), createElementBlock("span", {
5660
+ }, null, 8 /* PROPS */, _hoisted_63))
5661
+ : (typeof key === 'object' && key.component)
5662
+ ? (openBlock(), createBlock(resolveDynamicComponent(key.component), {
5637
5663
  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))
5664
+ item: record
5665
+ }, null, 8 /* PROPS */, ["item"]))
5666
+ : (typeof key === 'object')
5667
+ ? (openBlock(), createElementBlock("span", {
5668
+ key: 6,
5669
+ innerHTML: record[key.key ?? key.field]
5670
+ }, null, 8 /* PROPS */, _hoisted_64))
5671
+ : (typeof key === 'function')
5672
+ ? (openBlock(), createElementBlock("span", {
5673
+ key: 7,
5674
+ innerHTML: key(record, index )
5675
+ }, null, 8 /* PROPS */, _hoisted_65))
5676
+ : (openBlock(), createElementBlock("span", {
5677
+ key: 8,
5678
+ innerHTML: record[key[0]]
5679
+ }, null, 8 /* PROPS */, _hoisted_66))
5644
5680
  ]),
5645
- _hoisted_63
5681
+ _hoisted_67
5646
5682
  ], 64 /* STABLE_FRAGMENT */))
5647
5683
  }), 128 /* KEYED_FRAGMENT */)),
5648
5684
  (__props.actions)
5649
- ? (openBlock(), createElementBlock("div", _hoisted_64, [
5685
+ ? (openBlock(), createElementBlock("div", _hoisted_68, [
5650
5686
  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions.actions, (act) => {
5651
5687
  return (openBlock(), createElementBlock(Fragment, {
5652
5688
  key: act.path
@@ -5669,7 +5705,7 @@ return (_ctx, _cache) => {
5669
5705
  }, null, 2 /* CLASS */))
5670
5706
  : createCommentVNode("v-if", true),
5671
5707
  createTextVNode(" " + toDisplayString(act.label), 1 /* TEXT */)
5672
- ], 10 /* CLASS, PROPS */, _hoisted_65))
5708
+ ], 10 /* CLASS, PROPS */, _hoisted_69))
5673
5709
  : (act.emits)
5674
5710
  ? (openBlock(), createElementBlock("button", {
5675
5711
  key: 1,
@@ -5684,7 +5720,7 @@ return (_ctx, _cache) => {
5684
5720
  }, null, 2 /* CLASS */))
5685
5721
  : createCommentVNode("v-if", true),
5686
5722
  createTextVNode(" " + toDisplayString(act.label), 1 /* TEXT */)
5687
- ], 10 /* CLASS, PROPS */, _hoisted_66))
5723
+ ], 10 /* CLASS, PROPS */, _hoisted_70))
5688
5724
  : (!act.emits)
5689
5725
  ? (openBlock(), createBlock(_component_router_link, {
5690
5726
  key: 2,
@@ -5712,7 +5748,7 @@ return (_ctx, _cache) => {
5712
5748
  }), 128 /* KEYED_FRAGMENT */))
5713
5749
  ]))
5714
5750
  : createCommentVNode("v-if", true)
5715
- ], 8 /* PROPS */, _hoisted_53))
5751
+ ], 8 /* PROPS */, _hoisted_55))
5716
5752
  }), 128 /* KEYED_FRAGMENT */))
5717
5753
  ]))
5718
5754
  : createCommentVNode("v-if", true)
@@ -5747,7 +5783,8 @@ return (_ctx, _cache) => {
5747
5783
  (_ctx.selectedRecord)
5748
5784
  ? (openBlock(), createBlock(resolveDynamicComponent(action.canvasComponent), mergeProps({
5749
5785
  key: 0,
5750
- onRecordUpdated: _ctx.reloadData
5786
+ onRecordUpdated: _ctx.reloadData,
5787
+ ref_for: true
5751
5788
  }, _ctx.cleanCanvasProps(action), { record: _ctx.selectedRecord }), null, 16 /* FULL_PROPS */, ["onRecordUpdated", "record"]))
5752
5789
  : createCommentVNode("v-if", true)
5753
5790
  ]),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iankibetsh/shframework",
3
- "version": "4.7.8",
3
+ "version": "4.7.9",
4
4
  "description": "Vue library for handling laravel backend",
5
5
  "main": "dist/library.js",
6
6
  "module": "dist/library.mjs",