@itfin/components 1.3.96 → 2.0.1

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 (85) hide show
  1. package/package.json +1 -1
  2. package/src/assets/scss/_css_variables.scss +2 -2
  3. package/src/assets/scss/_variables.scss +18 -7
  4. package/src/assets/scss/components/_button.scss +10 -0
  5. package/src/assets/scss/components/_pagination.scss +4 -1
  6. package/src/assets/scss/components/_select.scss +1 -3
  7. package/src/assets/scss/components/_text-field.scss +17 -7
  8. package/src/assets/scss/main.scss +36 -2
  9. package/src/components/app/message.js +1 -1
  10. package/src/components/button/Button.vue +4 -2
  11. package/src/components/filter/FilterAmountRange.vue +50 -42
  12. package/src/components/filter/FilterBadge.vue +25 -22
  13. package/src/components/filter/FilterFacetsList.vue +1 -1
  14. package/src/components/filter/FilterPanel.vue +82 -27
  15. package/src/components/filter/index.stories.js +0 -2
  16. package/src/components/icon/Icon.vue +3 -1
  17. package/src/components/icon/components/fi_fingerprint.vue +4 -0
  18. package/src/components/icon/components/nomi-arrow-down.vue +4 -0
  19. package/src/components/icon/components/nomi-arrow-right-top.vue +4 -0
  20. package/src/components/icon/components/nomi-arrow-up.vue +4 -0
  21. package/src/components/icon/components/nomi-arrows.vue +7 -0
  22. package/src/components/icon/components/nomi-calendar-alt.vue +4 -0
  23. package/src/components/icon/components/nomi-calendar.vue +11 -0
  24. package/src/components/icon/components/nomi-card.vue +4 -0
  25. package/src/components/icon/components/nomi-close.vue +5 -0
  26. package/src/components/icon/components/nomi-eye-close.vue +4 -0
  27. package/src/components/icon/components/nomi-eye-open.vue +4 -0
  28. package/src/components/icon/components/nomi-filter.vue +4 -0
  29. package/src/components/icon/components/nomi-hide.vue +4 -0
  30. package/src/components/icon/components/nomi-money.vue +4 -0
  31. package/src/components/icon/components/nomi-move-left.vue +4 -0
  32. package/src/components/icon/components/nomi-move-right.vue +4 -0
  33. package/src/components/icon/components/nomi-person.vue +5 -0
  34. package/src/components/icon/components/nomi-pin.vue +7 -0
  35. package/src/components/icon/components/nomi-sort-asc.vue +7 -0
  36. package/src/components/icon/components/nomi-sort-desc.vue +7 -0
  37. package/src/components/icon/components/nomi-table-view.vue +4 -0
  38. package/src/components/icon/components/nomi-tag.vue +4 -0
  39. package/src/components/icon/components/nomi-target.vue +4 -0
  40. package/src/components/icon/components/nomi-text.vue +6 -0
  41. package/src/components/icon/components/nomi-unpin.vue +7 -0
  42. package/src/components/icon/convert-icons.js +11 -0
  43. package/src/components/icon/icons.js +302 -277
  44. package/src/components/icon/new-icons/arrow-down.svg +3 -0
  45. package/src/components/icon/new-icons/arrow-right-top.svg +3 -0
  46. package/src/components/icon/new-icons/arrow-up.svg +3 -0
  47. package/src/components/icon/new-icons/arrows.svg +6 -0
  48. package/src/components/icon/new-icons/calendar-alt.svg +3 -0
  49. package/src/components/icon/new-icons/calendar.svg +10 -0
  50. package/src/components/icon/new-icons/card.svg +3 -0
  51. package/src/components/icon/new-icons/clear.svg +3 -0
  52. package/src/components/icon/new-icons/close.svg +4 -0
  53. package/src/components/icon/new-icons/eye-close.svg +3 -0
  54. package/src/components/icon/new-icons/eye-open.svg +3 -0
  55. package/src/components/icon/new-icons/filter.svg +3 -0
  56. package/src/components/icon/new-icons/hide.svg +3 -0
  57. package/src/components/icon/new-icons/money.svg +3 -0
  58. package/src/components/icon/new-icons/move-left.svg +3 -0
  59. package/src/components/icon/new-icons/move-right.svg +3 -0
  60. package/src/components/icon/new-icons/person.svg +4 -0
  61. package/src/components/icon/new-icons/pin.svg +6 -0
  62. package/src/components/icon/new-icons/sort-asc.svg +6 -0
  63. package/src/components/icon/new-icons/sort-desc.svg +6 -0
  64. package/src/components/icon/new-icons/table-view.svg +3 -0
  65. package/src/components/icon/new-icons/tag.svg +3 -0
  66. package/src/components/icon/new-icons/target.svg +3 -0
  67. package/src/components/icon/new-icons/text.svg +5 -0
  68. package/src/components/icon/new-icons/unpin.svg +6 -0
  69. package/src/components/pagination/Pagination.vue +3 -2
  70. package/src/components/pagination/Pagination2.vue +176 -0
  71. package/src/components/sortable/draggable.js +2 -1
  72. package/src/components/table/Table2.vue +24 -1
  73. package/src/components/table/TableBody.vue +7 -2
  74. package/src/components/table/TableGroup.vue +8 -4
  75. package/src/components/table/TableHeader.vue +101 -24
  76. package/src/components/table/TableRows.vue +3 -1
  77. package/src/components/table/index.stories.js +22 -200
  78. package/src/components/table/table2.scss +178 -49
  79. package/src/components/text-field/TextField.vue +12 -8
  80. package/src/components/view/View.vue +119 -0
  81. package/src/components/view/index.stories.js +588 -0
  82. package/src/helpers/formatters.js +14 -1
  83. package/src/locales/en.js +13 -0
  84. package/src/locales/uk.js +11 -0
  85. package/src/components/table/TableRow.vue +0 -221
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12ZM12 8.4C12.3314 8.4 12.6 8.66863 12.6 9L12.6 13.5515L14.5757 11.5757C14.8101 11.3414 15.1899 11.3414 15.4243 11.5757C15.6586 11.8101 15.6586 12.1899 15.4243 12.4243L12.4246 15.4239L12.4243 15.4243C12.3667 15.4818 12.3004 15.5252 12.2297 15.5545C12.1589 15.5838 12.0814 15.6 12 15.6C11.9186 15.6 11.8411 15.5838 11.7703 15.5545C11.7012 15.5259 11.6363 15.4838 11.5797 15.4282M11.4 13.5515L9.42426 11.5757C9.18995 11.3414 8.81005 11.3414 8.57574 11.5757C8.34142 11.8101 8.34142 12.1899 8.57574 12.4243L11.5754 15.4239M11.4 13.5515V9C11.4 8.66863 11.6686 8.4 12 8.4" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.8337 10.0003C15.8337 13.222 13.222 15.8337 10.0003 15.8337C6.77866 15.8337 4.16699 13.222 4.16699 10.0003C4.16699 6.77866 6.77866 4.16699 10.0003 4.16699C13.222 4.16699 15.8337 6.77866 15.8337 10.0003ZM7.31699 7.91699C7.31699 7.58562 7.58562 7.31699 7.91699 7.31699H12.0837C12.415 7.31699 12.6837 7.58562 12.6837 7.91699V12.0837C12.6837 12.415 12.415 12.6837 12.0837 12.6837C11.7523 12.6837 11.4837 12.415 11.4837 12.0837V9.36552L8.34126 12.5079C8.10694 12.7422 7.72704 12.7422 7.49273 12.5079C7.25841 12.2736 7.25841 11.8937 7.49273 11.6594L10.6351 8.51699H7.91699C7.58562 8.51699 7.31699 8.24836 7.31699 7.91699Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 8.4C12.0813 8.4 12.1589 8.41619 12.2297 8.44553C12.3004 8.47481 12.3667 8.51821 12.4243 8.57574L12.4245 8.57598L15.4243 11.5757C15.6586 11.8101 15.6586 12.19 15.4243 12.4243C15.1899 12.6586 14.81 12.6586 14.5757 12.4243L12.6 10.4485V15C12.6 15.3314 12.3314 15.6 12 15.6C11.6686 15.6 11.4 15.3314 11.4 15L11.4 10.4485L9.42426 12.4243C9.18994 12.6586 8.81004 12.6586 8.57573 12.4243C8.34142 12.19 8.34142 11.8101 8.57573 11.5757L11.5755 8.57598L11.5757 8.57574C11.6333 8.51821 11.6996 8.47481 11.7703 8.44553C11.8411 8.41619 11.9186 8.4 12 8.4Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14 7.33301L6 7.33301" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
3
+ <path d="M8 5.33301L6 7.33301L8 9.33301" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M12 10.667L14 12.667L12 14.667" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <path d="M14 12.667L6 12.667" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
6
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M7.26667 5.00039C7.26667 4.66902 6.99804 4.40039 6.66667 4.40039C6.3353 4.40039 6.06667 4.66902 6.06667 5.00039L6.06667 6.77507C5.80493 6.83948 5.60345 6.94228 5.43934 7.1064C5.13269 7.41304 5.04008 7.85013 5.0121 8.56706L14.9879 8.56706C14.9599 7.85013 14.8673 7.41304 14.5607 7.1064C14.3965 6.94228 14.1951 6.83948 13.9333 6.77507V5.00039C13.9333 4.66902 13.6647 4.40039 13.3333 4.40039C13.002 4.40039 12.7333 4.66902 12.7333 5.00039L12.7333 6.67008C12.5125 6.66706 12.269 6.66706 12 6.66706H8C7.73098 6.66706 7.48754 6.66706 7.26667 6.67008L7.26667 5.00039ZM15 9.76706L5 9.76706L5 12.0004C5 13.4146 5 14.1217 5.43934 14.5611C5.87868 15.0004 6.58579 15.0004 8 15.0004H12C13.4142 15.0004 14.1213 15.0004 14.5607 14.5611C15 14.1217 15 13.4146 15 12.0004V9.76706Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,10 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_1129_19696)">
3
+ <path d="M13.5 5.33341H12.9167V4.75008C12.9167 4.59537 12.8552 4.447 12.7458 4.3376C12.6364 4.22821 12.488 4.16675 12.3333 4.16675C12.1786 4.16675 12.0303 4.22821 11.9209 4.3376C11.8115 4.447 11.75 4.59537 11.75 4.75008V5.33341H8.25V4.75008C8.25 4.59537 8.18854 4.447 8.07915 4.3376C7.96975 4.22821 7.82138 4.16675 7.66667 4.16675C7.51196 4.16675 7.36358 4.22821 7.25419 4.3376C7.14479 4.447 7.08333 4.59537 7.08333 4.75008V5.33341H6.5C6.03587 5.33341 5.59075 5.51779 5.26256 5.84598C4.93437 6.17417 4.75 6.61929 4.75 7.08342V14.0834C4.75 14.5475 4.93437 14.9927 5.26256 15.3209C5.59075 15.649 6.03587 15.8334 6.5 15.8334H13.5C13.9641 15.8334 14.4092 15.649 14.7374 15.3209C15.0656 14.9927 15.25 14.5475 15.25 14.0834V7.08342C15.25 6.61929 15.0656 6.17417 14.7374 5.84598C14.4092 5.51779 13.9641 5.33341 13.5 5.33341ZM7.66667 12.9167C7.55129 12.9167 7.43851 12.8825 7.34258 12.8184C7.24666 12.7543 7.17189 12.6632 7.12774 12.5566C7.08359 12.4501 7.07203 12.3328 7.09454 12.2196C7.11705 12.1065 7.17261 12.0025 7.25419 11.9209C7.33577 11.8394 7.43971 11.7838 7.55286 11.7613C7.66602 11.7388 7.78331 11.7503 7.8899 11.7945C7.99649 11.8386 8.08759 11.9134 8.15169 12.0093C8.21579 12.1053 8.25 12.218 8.25 12.3334C8.25 12.4881 8.18854 12.6365 8.07915 12.7459C7.96975 12.8553 7.82138 12.9167 7.66667 12.9167ZM12.3333 12.9167H10C9.84529 12.9167 9.69692 12.8553 9.58752 12.7459C9.47812 12.6365 9.41667 12.4881 9.41667 12.3334C9.41667 12.1787 9.47812 12.0303 9.58752 11.9209C9.69692 11.8115 9.84529 11.7501 10 11.7501H12.3333C12.488 11.7501 12.6364 11.8115 12.7458 11.9209C12.8552 12.0303 12.9167 12.1787 12.9167 12.3334C12.9167 12.4881 12.8552 12.6365 12.7458 12.7459C12.6364 12.8553 12.488 12.9167 12.3333 12.9167ZM14.0833 9.41675H5.91667V7.08342C5.91667 6.92871 5.97812 6.78033 6.08752 6.67094C6.19692 6.56154 6.34529 6.50008 6.5 6.50008H7.08333V7.08342C7.08333 7.23812 7.14479 7.3865 7.25419 7.49589C7.36358 7.60529 7.51196 7.66675 7.66667 7.66675C7.82138 7.66675 7.96975 7.60529 8.07915 7.49589C8.18854 7.3865 8.25 7.23812 8.25 7.08342V6.50008H11.75V7.08342C11.75 7.23812 11.8115 7.3865 11.9209 7.49589C12.0303 7.60529 12.1786 7.66675 12.3333 7.66675C12.488 7.66675 12.6364 7.60529 12.7458 7.49589C12.8552 7.3865 12.9167 7.23812 12.9167 7.08342V6.50008H13.5C13.6547 6.50008 13.8031 6.56154 13.9125 6.67094C14.0219 6.78033 14.0833 6.92871 14.0833 7.08342V9.41675Z" fill="currentColor"/>
4
+ </g>
5
+ <defs>
6
+ <clipPath id="clip0_1129_19696">
7
+ <rect width="14" height="14" fill="white" transform="translate(3 3)"/>
8
+ </clipPath>
9
+ </defs>
10
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M4.16699 9.76634L4.16699 11.1663C4.16699 12.5806 4.16699 13.2877 4.60633 13.727C5.04567 14.1663 5.75278 14.1663 7.16699 14.1663H12.8337C14.2479 14.1663 14.955 14.1663 15.3943 13.727C15.8337 13.2877 15.8337 12.5806 15.8337 11.1663V11.1663V9.76634L4.16699 9.76634ZM15.8335 8.56634C15.8318 7.32809 15.8051 6.68316 15.3943 6.27235C14.955 5.83301 14.2479 5.83301 12.8337 5.83301H7.16699C5.75278 5.83301 5.04567 5.83301 4.60633 6.27235C4.19552 6.68316 4.16884 7.32809 4.16711 8.56634L15.8335 8.56634Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M10 4.16675C10.4602 4.16675 10.8333 4.53984 10.8333 5.00008L10.8333 7.91675C10.8333 8.14687 11.0199 8.33341 11.25 8.33341H14.1667C14.6269 8.33341 15 8.70651 15 9.16675V9.91674C15 10.1469 14.8135 10.3334 14.5833 10.3334H5.41667C5.18655 10.3334 5 10.1469 5 9.91674V9.16675C5 8.70651 5.3731 8.33341 5.83333 8.33341H8.75C8.98012 8.33341 9.16667 8.14687 9.16667 7.91675V5.00008C9.16667 4.53984 9.53976 4.16675 10 4.16675ZM5.41667 11.3334C5.18655 11.3334 5 11.52 5 11.7501V15.3663C5 15.566 5.22254 15.6851 5.38868 15.5743L5.78775 15.3082C6.06767 15.1216 6.43233 15.1216 6.71225 15.3082L7.03775 15.5252C7.31767 15.7119 7.68233 15.7119 7.96225 15.5252L8.28775 15.3082C8.56767 15.1216 8.93233 15.1216 9.21225 15.3082L9.53775 15.5252C9.81767 15.7119 10.1823 15.7119 10.4623 15.5252L10.7877 15.3082C11.0677 15.1216 11.4323 15.1216 11.7123 15.3082L12.0377 15.5252C12.3177 15.7119 12.6823 15.7119 12.9623 15.5252L13.2877 15.3082C13.5677 15.1216 13.9323 15.1216 14.2122 15.3082L14.6113 15.5743C14.7775 15.6851 15 15.566 15 15.3663V11.7501C15 11.52 14.8135 11.3334 14.5833 11.3334H5.41667Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5.83301 14.1667L14.1664 5.83347" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M5.83301 5.83325L14.1664 14.1665" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
4
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M19.4247 4.57564C19.659 4.80995 19.659 5.18985 19.4247 5.42417L16.2752 8.5736C16.2758 8.57399 16.2764 8.57438 16.277 8.57478L8.8151 16.0367C8.81442 16.0364 8.81375 16.0361 8.81307 16.0357L5.42465 19.4242C5.19034 19.6585 4.81044 19.6585 4.57613 19.4242C4.34181 19.1899 4.34181 18.81 4.57613 18.5756L7.7237 15.4281C6.589 14.6675 5.67201 13.6126 5.08459 12.3742C4.97229 12.1374 4.97228 11.8626 5.08458 11.6259C6.3033 9.05619 8.94082 7.27686 11.9981 7.27686C13.1362 7.27686 14.2161 7.52341 15.1863 7.9655L18.5761 4.57564C18.8104 4.34132 19.1903 4.34132 19.4247 4.57564ZM10.0692 16.4796C10.6853 16.6384 11.3317 16.7229 11.998 16.7229C15.0554 16.7229 17.6929 14.9436 18.9116 12.3739C19.0239 12.1372 19.0239 11.8624 18.9116 11.6256C18.4988 10.7553 17.9232 9.97567 17.2237 9.32511L10.0692 16.4796Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M5.08422 11.6259C4.97192 11.8626 4.97193 12.1374 5.08423 12.3742C6.303 14.9437 8.94045 16.7229 11.9977 16.7229C15.055 16.7229 17.6925 14.9436 18.9112 12.3739C19.0235 12.1372 19.0235 11.8624 18.9112 11.6256C17.6924 9.05608 15.055 7.27686 11.9978 7.27686C8.94046 7.27686 6.30294 9.05618 5.08422 11.6259ZM15 11.9999C15 13.6568 13.6569 14.9999 12 14.9999C10.3432 14.9999 9.00003 13.6568 9.00003 11.9999C9.00003 10.343 10.3432 8.9999 12 8.9999C12.3075 8.9999 12.6042 9.04615 12.8834 9.13208C12.3625 9.36726 12 9.89124 12 10.4999C12 11.3283 12.6716 11.9999 13.5 11.9999C14.1087 11.9999 14.6327 11.6374 14.8678 11.1165C14.9538 11.3958 15 11.6924 15 11.9999Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M18 5H6C5.44772 5 5 5.44772 5 6V7.17157C5 7.70201 5.21071 8.21071 5.58579 8.58579L9.41421 12.4142C9.78929 12.7893 10 13.298 10 13.8284V18C10 18.5523 10.4477 19 11 19H13C13.5523 19 14 18.5523 14 18V13.8284C14 13.298 14.2107 12.7893 14.5858 12.4142L18.4142 8.58579C18.7893 8.21071 19 7.70201 19 7.17157V6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M19.4247 4.57613C19.659 4.81044 19.659 5.19034 19.4247 5.42465L16.2752 8.57408C16.2758 8.57448 16.2764 8.57487 16.277 8.57527L8.8151 16.0372C8.81442 16.0369 8.81375 16.0365 8.81307 16.0362L5.42465 19.4247C5.19034 19.659 4.81044 19.659 4.57613 19.4247C4.34181 19.1903 4.34181 18.8104 4.57613 18.5761L7.7237 15.4285C6.589 14.668 5.67201 13.6131 5.08459 12.3747C4.97229 12.1379 4.97228 11.8631 5.08458 11.6263C6.3033 9.05668 8.94082 7.27735 11.9981 7.27735C13.1362 7.27735 14.2161 7.5239 15.1863 7.96599L18.5761 4.57613C18.8104 4.34181 19.1903 4.34181 19.4247 4.57613ZM10.0692 16.4801C10.6853 16.6389 11.3317 16.7234 11.998 16.7234C15.0554 16.7234 17.6929 14.9441 18.9116 12.3744C19.0239 12.1376 19.0239 11.8629 18.9116 11.6261C18.4988 10.7558 17.9232 9.97616 17.2237 9.32559L10.0692 16.4801Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99935 15.8327C13.2211 15.8327 15.8327 13.2211 15.8327 9.99935C15.8327 6.7776 13.2211 4.16602 9.99935 4.16602C6.7776 4.16602 4.16602 6.7776 4.16602 9.99935C4.16602 13.2211 6.7776 15.8327 9.99935 15.8327ZM10.3087 6.18999C10.2267 6.10794 10.1154 6.06185 9.99935 6.06185C9.88332 6.06185 9.77204 6.10794 9.68999 6.18999C9.60794 6.27204 9.56185 6.38332 9.56185 6.49935V6.68427C8.61102 6.8546 7.81185 7.56918 7.81185 8.54102C7.81185 9.51285 8.61102 10.2274 9.56185 10.3978V12.4213C9.01585 12.2726 8.68685 11.8532 8.68685 11.4577C8.68685 11.3416 8.64076 11.2304 8.55871 11.1483C8.47666 11.0663 8.36538 11.0202 8.24935 11.0202C8.13332 11.0202 8.02204 11.0663 7.93999 11.1483C7.85794 11.2304 7.81185 11.3416 7.81185 11.4577C7.81185 12.4295 8.61102 13.1441 9.56185 13.3144V13.4993C9.56185 13.6154 9.60794 13.7267 9.68999 13.8087C9.77204 13.8908 9.88332 13.9368 9.99935 13.9368C10.1154 13.9368 10.2267 13.8908 10.3087 13.8087C10.3908 13.7267 10.4368 13.6154 10.4368 13.4993V13.3144C11.3877 13.1441 12.1868 12.4295 12.1868 11.4577C12.1868 10.4858 11.3877 9.77127 10.4368 9.60093V7.57677C10.9828 7.7261 11.3118 8.14552 11.3118 8.54102C11.3118 8.65705 11.3579 8.76833 11.44 8.85037C11.522 8.93242 11.6333 8.97852 11.7493 8.97852C11.8654 8.97852 11.9767 8.93242 12.0587 8.85037C12.1408 8.76833 12.1868 8.65705 12.1868 8.54102C12.1868 7.56918 11.3877 6.8546 10.4368 6.68427V6.49935C10.4368 6.38332 10.3908 6.27204 10.3087 6.18999ZM8.68669 8.54091C8.68669 8.14541 9.01569 7.72599 9.56169 7.57666V9.50458C9.01569 9.35583 8.68669 8.93641 8.68669 8.54091ZM11.3117 11.4576C11.3117 11.8531 10.9827 12.2725 10.4367 12.4212V10.4939C10.9827 10.6427 11.3117 11.0621 11.3117 11.4576Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M4.44592 12.2296C4.4752 12.3003 4.5186 12.3666 4.57613 12.4242L10.5761 18.4242C10.8104 18.6585 11.1903 18.6585 11.4247 18.4242C11.659 18.1899 11.659 17.81 11.4247 17.5756L6.44892 12.5999L19.0004 12.5999C19.3318 12.5999 19.6004 12.3313 19.6004 11.9999C19.6004 11.6685 19.3318 11.3999 19.0004 11.3999L6.44892 11.3999L11.4247 6.42417C11.659 6.18985 11.659 5.80995 11.4247 5.57564C11.1903 5.34132 10.8104 5.34132 10.5761 5.57564L4.57707 11.5747C4.57447 11.5773 4.57189 11.5799 4.56933 11.5825C4.46475 11.6905 4.40039 11.8377 4.40039 11.9999C4.40039 12.0813 4.41658 12.1588 4.44592 12.2296Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5549 12.2296C19.5256 12.3003 19.4822 12.3666 19.4247 12.4242L13.4247 18.4242C13.1903 18.6585 12.8104 18.6585 12.5761 18.4242C12.3418 18.1899 12.3418 17.81 12.5761 17.5756L17.5519 12.5999L5.00039 12.5999C4.66902 12.5999 4.40039 12.3313 4.40039 11.9999C4.40039 11.6685 4.66902 11.3999 5.00039 11.3999L17.5519 11.3999L12.5761 6.42417C12.3418 6.18985 12.3418 5.80995 12.5761 5.57564C12.8104 5.34132 13.1903 5.34132 13.4247 5.57564L19.4237 11.5747C19.4263 11.5773 19.4289 11.5799 19.4315 11.5825C19.536 11.6905 19.6004 11.8377 19.6004 11.9999C19.6004 12.0813 19.5842 12.1588 19.5549 12.2296Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="10.0003" cy="7.08333" r="2.08333" fill="currentColor"/>
3
+ <path d="M6.62838 15C5.80763 15 5.39726 15 5.1452 14.65C4.89314 14.3 5.00241 13.988 5.22095 13.364C5.25366 13.2706 5.2892 13.1781 5.32754 13.0866C5.5817 12.48 5.95423 11.9288 6.42386 11.4645C6.89348 11.0002 7.45101 10.6319 8.06461 10.3806C8.6782 10.1293 9.33585 10 10 10C10.6642 10 11.3218 10.1293 11.9354 10.3806C12.549 10.6319 13.1065 11.0002 13.5761 11.4645C14.0458 11.9288 14.4183 12.48 14.6725 13.0866C14.7108 13.1781 14.7463 13.2706 14.779 13.364C14.9976 13.988 15.1069 14.3 14.8548 14.65C14.6027 15 14.1924 15 13.3716 15L6.62838 15Z" fill="currentColor"/>
4
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12 12L5 19" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M17 9L15 7L7 11L13 17L17 9Z" fill="currentColor"/>
4
+ <path d="M6.70711 9.29289L7.29289 8.70711C7.68342 8.31658 8.31658 8.31658 8.70711 8.70711L15.2929 15.2929C15.6834 15.6834 15.6834 16.3166 15.2929 16.7071L14.7071 17.2929C14.3166 17.6834 13.6834 17.6834 13.2929 17.2929L6.70711 10.7071C6.31658 10.3166 6.31658 9.68342 6.70711 9.29289Z" fill="currentColor"/>
5
+ <path d="M13.2071 5.79289L13.7929 5.20711C14.1834 4.81658 14.8166 4.81658 15.2071 5.20711L18.7929 8.79289C19.1834 9.18342 19.1834 9.81658 18.7929 10.2071L18.2071 10.7929C17.8166 11.1834 17.1834 11.1834 16.7929 10.7929L13.2071 7.20711C12.8166 6.81658 12.8166 6.18342 13.2071 5.79289Z" fill="currentColor"/>
6
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12 12L12 18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
3
+ <path d="M8 15L8 18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
4
+ <path d="M13 9L16 6L19 9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <path d="M16 6L16 18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
6
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12 6L12 12" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
3
+ <path d="M8 6L8 9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
4
+ <path d="M13 15L16 18L19 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <path d="M16 6L16 18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
6
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M5.43934 6.43934C5 6.87868 5 7.58579 5 9V9.4L8.4 9.4L8.4 6H8C6.58579 6 5.87868 6 5.43934 6.43934ZM5 10.6L8.4 10.6L8.4 13.4H5V10.6ZM5 14.6V15C5 16.4142 5 17.1213 5.43934 17.5607C5.87868 18 6.58579 18 8 18H8.4L8.4 14.6H5ZM9.6 14.6V18H16C17.4142 18 18.1213 18 18.5607 17.5607C19 17.1213 19 16.4142 19 15V14.6L9.6 14.6ZM19 13.4V10.6L9.6 10.6V13.4L19 13.4ZM9.6 6V9.4L19 9.4V9C19 7.58579 19 6.87868 18.5607 6.43934C18.1213 6 17.4142 6 16 6H9.6Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M14.8335 4.16699H12.0053C11.7401 4.16699 11.4857 4.27235 11.2982 4.45989L4.87395 10.8841C4.48342 11.2747 4.48342 11.9078 4.87395 12.2983L7.70216 15.1266C8.09268 15.5171 8.72585 15.5171 9.11637 15.1266L15.5406 8.70231C15.7282 8.51477 15.8335 8.26042 15.8335 7.9952V5.16699C15.8335 4.61471 15.3858 4.16699 14.8335 4.16699ZM13.3335 7.50033C13.7937 7.50033 14.1668 7.12723 14.1668 6.66699C14.1668 6.20676 13.7937 5.83366 13.3335 5.83366C12.8733 5.83366 12.5002 6.20676 12.5002 6.66699C12.5002 7.12723 12.8733 7.50033 13.3335 7.50033Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0003 15.8337C13.222 15.8337 15.8337 13.222 15.8337 10.0003C15.8337 6.77866 13.222 4.16699 10.0003 4.16699C6.77866 4.16699 4.16699 6.77866 4.16699 10.0003C4.16699 13.222 6.77866 15.8337 10.0003 15.8337ZM7.91697 10.0003C7.91697 8.84973 8.84971 7.91699 10.0003 7.91699C11.1509 7.91699 12.0836 8.84973 12.0836 10.0003C12.0836 11.1509 11.1509 12.0837 10.0003 12.0837C8.84971 12.0837 7.91697 11.1509 7.91697 10.0003ZM10.0003 6.25032C7.92924 6.25032 6.25031 7.92925 6.25031 10.0003C6.25031 12.0714 7.92924 13.7503 10.0003 13.7503C12.0714 13.7503 13.7503 12.0714 13.7503 10.0003C13.7503 7.92925 12.0714 6.25032 10.0003 6.25032Z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5 7L15 7" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
3
+ <path d="M5 10L15 10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
4
+ <path d="M5 13H8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
5
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12.0429 10.0178L12.0429 19.9173" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M13.4571 4.36092H10.6287L7.80025 12.8462L16.2855 12.8462L13.4571 4.36092Z" fill="currentColor"/>
4
+ <path d="M6.38604 11.8462L6.38604 11.0178C6.38604 10.4655 6.83375 10.0178 7.38604 10.0178L16.6997 10.0178C17.252 10.0178 17.6997 10.4655 17.6997 11.0178V11.8462C17.6997 12.3985 17.252 12.8462 16.6997 12.8462L7.38604 12.8462C6.83375 12.8462 6.38604 12.3985 6.38604 11.8462Z" fill="currentColor"/>
5
+ <path d="M8.50736 4.77513L8.50736 3.9467C8.50736 3.39442 8.95507 2.9467 9.50736 2.9467L14.5784 2.9467C15.1307 2.9467 15.5784 3.39442 15.5784 3.9467V4.77513C15.5784 5.32741 15.1307 5.77513 14.5784 5.77513L9.50736 5.77513C8.95507 5.77513 8.50736 5.32741 8.50736 4.77513Z" fill="currentColor"/>
6
+ </svg>
@@ -11,14 +11,14 @@
11
11
  >
12
12
  <a v-if="page.type === 'prev'" href="" class="page-link" :aria-label="$t('components.pagination.previous')" @click.prevent="onPage(page.number)">
13
13
  <itf-icon name="chevron_left" aria-hidden="true" />
14
- <span class="sr-only">{{$t('components.pagination.previous')}}</span>
14
+ <span class="visually-hidden">{{$t('components.pagination.previous')}}</span>
15
15
  </a>
16
16
  <a v-else-if="page.type === 'first'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
17
17
  <a v-else-if="page.type === 'page'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
18
18
  <a v-else-if="page.type === 'last'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
19
19
  <span v-else-if="page.type === 'more'" class="page-link">&hellip;</span>
20
20
  <a v-if="page.type === 'next'" href="" class="page-link" :aria-label="$t('components.pagination.previous')" @click.prevent="onPage(page.number)">
21
- <span class="sr-only">{{$t('components.pagination.next')}}</span>
21
+ <span class="visually-hidden">{{$t('components.pagination.next')}}</span>
22
22
  <itf-icon name="chevron_right" aria-hidden="true" />
23
23
  </a>
24
24
  </li>
@@ -32,6 +32,7 @@
32
32
  <span>{{$t('components.pagination.itemsPerPage')}}</span>
33
33
  <itf-dropdown
34
34
  toggle
35
+ shadow
35
36
  :button-options="{ secondary: true, small: true }"
36
37
  class="itf-pagination-select"
37
38
  :value="size"
@@ -0,0 +1,176 @@
1
+ <template>
2
+
3
+ <nav aria-label="Page navigation example" class="d-flex justify-content-between align-items-center">
4
+ <div class="d-flex gap-2 align-items-center">
5
+ <ul class="pagination itf-pagination mb-0">
6
+ <li
7
+ v-for="(page, n) in pagesArr"
8
+ :key="n"
9
+ class="page-item"
10
+ :class="{'active': page.current, 'disabled': !page.active && !page.current }"
11
+ >
12
+ <a v-if="page.type === 'prev'" href="" class="page-link" :aria-label="$t('components.pagination.previous')" @click.prevent="onPage(page.number)">
13
+ <itf-icon name="chevron_left" aria-hidden="true" />
14
+ <span class="visually-hidden">{{$t('components.pagination.previous')}}</span>
15
+ </a>
16
+
17
+ <div v-if="page.type === 'page'" class="d-flex flex-nowrap text-nowrap align-items-center gap-1 text-muted">
18
+ <itf-text-field :invalid="!isValid" type="number" small :min="1" :max="9999" :value="value" @change="onPageChange" />
19
+ / {{pages}}
20
+ </div>
21
+ <a v-if="page.type === 'next'" href="" class="page-link" :aria-label="$t('components.pagination.previous')" @click.prevent="onPage(page.number)">
22
+ <span class="visually-hidden">{{$t('components.pagination.next')}}</span>
23
+ <itf-icon name="chevron_right" aria-hidden="true" />
24
+ </a>
25
+ </li>
26
+ </ul>
27
+ <!--div>
28
+ 1-25 of {{length}} items
29
+ </div-->
30
+ </div>
31
+
32
+ <div><slot name="center"></slot></div>
33
+
34
+ <div v-if="showSize" class="d-flex gap-2 align-items-center">
35
+ <span>{{$t('components.pagination.itemsPerPage')}}</span>
36
+ <itf-dropdown
37
+ toggle
38
+ shadow
39
+ :button-options="{ secondary: true, small: true }"
40
+ class="itf-pagination-select"
41
+ :value="size"
42
+ >
43
+ <template #button>
44
+ <span>{{size}}</span>
45
+ </template>
46
+ <div class="dropdown-item" v-for="option in perPageOptions" :key="option.value" @click="onPerPage(option.value)">
47
+ {{option.title}}
48
+ </div>
49
+ </itf-dropdown>
50
+ </div>
51
+ </nav>
52
+
53
+ </template>
54
+ <style lang="scss">
55
+ .itf-pagination {
56
+ .itf-text-field__input {
57
+ text-align: center;
58
+ width: 48px;
59
+ }
60
+ }
61
+ </style>
62
+ <script>
63
+ import { Vue, Component, Model, Prop } from 'vue-property-decorator';
64
+ import itfIcon from '../icon/Icon.vue';
65
+ import itfDropdown from "../dropdown/Dropdown.vue";
66
+ import itfTextField from "../text-field/TextField.vue";
67
+
68
+ const MIN_PAGES_BLOCKS = 2;
69
+ const MAX_PAGES_BLOCKS = 6;
70
+ const PER_PAGE_OPTIONS = [
71
+ { title: '20', value: 20 },
72
+ { title: '50', value: 50 },
73
+ { title: '100', value: 100 }
74
+ ];
75
+
76
+ export default @Component({
77
+ name: 'itfPagination',
78
+ components: {
79
+ itfTextField,
80
+ itfDropdown,
81
+ itfIcon
82
+ }
83
+ })
84
+ class itfPagination extends Vue {
85
+ @Model('input') value;
86
+ @Prop({ type: [String, Number], default: 0 }) length;
87
+ @Prop({ type: [String, Number], default: 20 }) size;
88
+ @Prop({ type: [String, Number] }) pages;
89
+ @Prop({ type: [String, Number], default: MIN_PAGES_BLOCKS }) minBlocks;
90
+ @Prop({ type: [String, Number], default: MAX_PAGES_BLOCKS }) maxBlocks;
91
+ @Prop({type: Array, default: () => PER_PAGE_OPTIONS}) perPageOptions;
92
+ @Prop(Boolean) showSize;
93
+
94
+ isValid = true;
95
+
96
+ onPage(page) {
97
+ this.$emit('input', page);
98
+ }
99
+
100
+ onPageChange(page) {
101
+ const numPage = parseInt(page);
102
+ if (numPage > 0 && numPage <= this.pages) {
103
+ this.isValid = true;
104
+ this.$emit('input', numPage);
105
+ } else {
106
+ this.isValid = false;
107
+ }
108
+ }
109
+
110
+ onPerPage(size) {
111
+ this.$emit('per-page', size);
112
+ }
113
+
114
+ get pagesArr () {
115
+ const pageSize = Number(this.size);
116
+ const totalItems = Number(this.length);
117
+ const currentPage = this.value;
118
+ let maxBlocks = Number(this.maxBlocks);
119
+ maxBlocks = maxBlocks && maxBlocks < MAX_PAGES_BLOCKS ? MAX_PAGES_BLOCKS : maxBlocks;
120
+ const minBlocks = Number(this.minBlocks);
121
+
122
+ const pages = [];
123
+ const numPages = this.pages ? Number(this.pages) : Math.ceil(totalItems / pageSize);
124
+
125
+ if (numPages > 1) {
126
+ pages.push({
127
+ type: 'prev',
128
+ number: Math.max(1, currentPage - 1),
129
+ active: currentPage > 1
130
+ });
131
+ // pages.push({
132
+ // type: 'first',
133
+ // number: 1,
134
+ // active: currentPage > 1,
135
+ // current: currentPage === 1
136
+ // });
137
+ pages.push({
138
+ type: 'page'
139
+ });
140
+ // const maxPivotPages = Math.round((maxBlocks - minBlocks) / 2);
141
+ // let minPage = Math.max(2, currentPage - maxPivotPages);
142
+ // const maxPage = Math.min(numPages - 1, currentPage + maxPivotPages * 2 - (currentPage - minPage));
143
+ // minPage = Math.max(2, minPage - (maxPivotPages * 2 - (maxPage - minPage)));
144
+ // let i = minPage;
145
+ // while (i <= maxPage) {
146
+ // if ((i === minPage && i !== 2) || (i === maxPage && i !== numPages - 1)) {
147
+ // pages.push({
148
+ // type: 'more',
149
+ // active: false
150
+ // });
151
+ // } else {
152
+ // pages.push({
153
+ // type: 'page',
154
+ // number: i,
155
+ // active: currentPage !== i,
156
+ // current: currentPage === i
157
+ // });
158
+ // }
159
+ // i++;
160
+ // }
161
+ // pages.push({
162
+ // type: 'last',
163
+ // number: numPages,
164
+ // active: currentPage !== numPages,
165
+ // current: currentPage === numPages
166
+ // });
167
+ pages.push({
168
+ type: 'next',
169
+ number: Math.min(numPages, currentPage + 1),
170
+ active: currentPage < numPages
171
+ });
172
+ }
173
+ return pages;
174
+ }
175
+ }
176
+ </script>
@@ -7,13 +7,14 @@ const SORTABLE_ATTRIBUTES = ['drag-ignore-handle', 'scrollable'];
7
7
 
8
8
  const DEFAULT_OPTIONS = {
9
9
  draggableClass: DRAGGABLE_CLASS,
10
- dragHandleClass: DRAG_HANDLE_CLASS,
10
+ // dragHandleClass: DRAG_HANDLE_CLASS,
11
11
  delay: 200,
12
12
  tresholdDistance: 2,
13
13
  draggable: `.${DRAGGABLE_CLASS}`,
14
14
  handle: `.${DRAG_HANDLE_CLASS}`,
15
15
  ignoreHandleClassList: SORTABLE_ATTRIBUTES,
16
16
  mirror: {
17
+ // appendTo: '.itf-table2 .itf-table2__header',
17
18
  yAxis: false,
18
19
  constrainDimensions: true
19
20
  },
@@ -55,6 +55,7 @@
55
55
  :active="active"
56
56
  @update:expanded-ids="$emit('update:expanded-ids', $event)"
57
57
  @new="$emit('new', $event)"
58
+ @filter="$emit('filter', $event)"
58
59
  @add-column="$emit('add-column', $event)"
59
60
  >
60
61
  <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -139,6 +140,28 @@ class itfTable2 extends Vue {
139
140
  return !!this.$slots['group-operations'] && this.selectedIds.length > 0;
140
141
  }
141
142
 
143
+ resetSettings() {
144
+ const list = this.schema?.properties || [];
145
+ this.state = {
146
+ selectedIds: [],
147
+ columns: [...list]
148
+ };
149
+ this.saveTableState();
150
+ this.onSchemaUpdate();
151
+ }
152
+
153
+ getColumnVisibility(property) {
154
+ return this.state.columns.find(i => i.property === property)?.visible ?? true;
155
+ }
156
+
157
+ toggleVisibility(property) {
158
+ const column = this.state.columns.find(i => i.property === property);
159
+ if (column) {
160
+ column.visible = !column.visible;
161
+ }
162
+ this.onColumnsUpdate(this.columns);
163
+ }
164
+
142
165
  getTableState() {
143
166
  const list = this.schema?.properties || [];
144
167
  let state = this.stateName ? JSON.parse(localStorage.getItem(this.stateKey) || 'null') : null;
@@ -151,6 +174,7 @@ class itfTable2 extends Vue {
151
174
  state.selectedIds = [];
152
175
  for (const column of list) {
153
176
  const stateColumnIndex = state.columns.findIndex(i => i.property === column.property);
177
+ column.visible = (typeof column.visible === 'undefined') ? true : !!column.visible;
154
178
  if (stateColumnIndex === -1) {
155
179
  state.columns.push(column);
156
180
  } else {
@@ -179,7 +203,6 @@ class itfTable2 extends Vue {
179
203
  }
180
204
 
181
205
  mounted() {
182
- console.info(this.$scopedSlots)
183
206
  this.onSchemaUpdate();
184
207
  }
185
208
 
@@ -69,7 +69,7 @@
69
69
 
70
70
  .scroller > .table-view-item:last-child {
71
71
  .table-item-inner, .indicator {
72
- border-bottom: 1px solid var(--itf-table-border-color);
72
+ border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
73
73
  }
74
74
  }
75
75
 
@@ -96,11 +96,16 @@
96
96
 
97
97
  .table-row-template, .table-view-header-value {
98
98
  .form-check {
99
+ font-size: 16px;
99
100
  padding: 0;
100
101
  margin-bottom: 0;
102
+ display: flex;
103
+ align-items: center;
101
104
 
102
105
  .form-check-input {
103
- margin-left: 0;
106
+ --bs-form-check-bg: #fff;
107
+ margin: 0;
108
+ border: 1px solid #0000001A;
104
109
  }
105
110
  }
106
111
  }
@@ -49,6 +49,7 @@
49
49
  :sorting.sync="_sorting"
50
50
  @update:selectedIds="$emit('update:selectedIds', $event)"
51
51
  @update:columns="$emit('update:columns', $event)"
52
+ @filter="$emit('filter', $event)"
52
53
  @add-column="$emit('add-column', $event)"
53
54
  />
54
55
  </div>
@@ -153,7 +154,7 @@
153
154
 
154
155
  &.no-indicator {
155
156
  .shadow-area + .table-view-header-value, .table-item-inner {
156
- border-left: 1px solid var(--itf-table-border-color);
157
+ border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-color);
157
158
  }
158
159
  }
159
160
 
@@ -263,15 +264,18 @@
263
264
  }
264
265
 
265
266
  .table-add-new-item {
266
- border-right: 1px solid var(--itf-table-border-color);
267
- border-bottom: 1px solid var(--itf-table-border-color);
267
+ border-right:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
268
+ border-left:var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
269
+ border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
268
270
  outline: none;
271
+ border-bottom-left-radius: var(--itf-table-table-border-radius);
272
+ border-bottom-right-radius: var(--itf-table-table-border-radius);
269
273
 
270
274
  & > span {
271
275
  left: var(--shadow-area-width);
272
276
  position: sticky;
273
277
  padding-left: var(--shadow-area-width);
274
- border-left: 1px solid var(--itf-table-border-color);
278
+ //border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
275
279
  height: 100%;
276
280
  }
277
281
  &:hover, &:active {