@eturnity/eturnity_reusable_components 9.25.12 → 9.25.14

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 (13) hide show
  1. package/package.json +1 -1
  2. package/src/assets/svgIcons/activities_check.svg +3 -0
  3. package/src/assets/svgIcons/add_checklist.svg +3 -0
  4. package/src/assets/svgIcons/checklists.svg +3 -0
  5. package/src/assets/svgIcons/collapse_all.svg +4 -4
  6. package/src/assets/svgIcons/expand_all.svg +2 -3
  7. package/src/assets/svgIcons/pin.svg +2 -4
  8. package/src/assets/svgIcons/warning_triangle_outline.svg +3 -0
  9. package/src/components/filterComponent/viewFilter.vue +41 -9
  10. package/src/components/filterComponent/viewSettings.vue +5 -0
  11. package/src/components/filterComponent/viewSort.vue +5 -0
  12. package/src/components/inputs/select/index.vue +44 -36
  13. package/src/components/tabsHeader/index.vue +4 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "9.25.12",
3
+ "version": "9.25.14",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
package/src/assets/svgIcons/activities_check.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5.58682 0.176177C7.09426 -0.164409 8.67225 -0.00847912 10.0839 0.620513C10.3358 0.73294 10.4489 1.02861 10.3368 1.28067C10.2245 1.5328 9.92883 1.64672 9.67666 1.53458C8.462 0.993353 7.10462 0.858707 5.80752 1.15176C4.51042 1.44483 3.34242 2.14968 2.47842 3.16055C1.61461 4.17133 1.10111 5.43442 1.01358 6.76114C0.926082 8.08805 1.26929 9.40826 1.99307 10.5238C2.7168 11.6393 3.78199 12.4907 5.0292 12.9516C6.27658 13.4124 7.63974 13.4575 8.91495 13.0805C10.19 12.7035 11.3092 11.9246 12.1054 10.8598C12.9015 9.79488 13.332 8.50084 13.3329 7.17129V6.55801C13.3329 6.28198 13.5569 6.05819 13.8329 6.05801C14.1091 6.05801 14.3329 6.28187 14.3329 6.55801V7.17129C14.332 8.71668 13.8315 10.2206 12.9062 11.4584C11.9808 12.696 10.68 13.6013 9.19815 14.0395C7.71624 14.4775 6.13208 14.4256 4.68252 13.89C3.23296 13.3544 1.99531 12.3642 1.1542 11.0678C0.313118 9.77137 -0.0861088 8.23771 0.0155315 6.69571C0.117209 5.15373 0.714679 3.6859 1.71866 2.51114C2.7227 1.3364 4.07948 0.516797 5.58682 0.176177ZM13.4794 1.47989C13.6745 1.28475 13.9911 1.28493 14.1864 1.47989C14.3817 1.67495 14.3823 1.99153 14.1874 2.18692L7.52041 8.86075C7.42672 8.95448 7.29943 9.00715 7.1669 9.00723C7.03436 9.00727 6.90716 8.95439 6.81338 8.86075L4.81338 6.86075C4.61812 6.66549 4.61812 6.34898 4.81338 6.15372C5.00865 5.95853 5.32518 5.95848 5.52041 6.15372L7.16592 7.79922L13.4794 1.47989Z" fill="#00B0EB"/>
3
+ </svg>
package/src/assets/svgIcons/add_checklist.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 1C10.7761 1 11 1.22386 11 1.5V8.5C11 8.77614 10.7761 9 10.5 9H3.5C3.22386 9 3 8.77614 3 8.5V1.5C3 1.22386 3.22386 1 3.5 1H10.5ZM11 9.91465C11.5826 9.70873 12 9.15311 12 8.5V1.5C12 0.671573 11.3284 0 10.5 0H3.5C2.84689 0 2.29127 0.417404 2.08535 1H1.5C0.671573 1 0 1.67157 0 2.5V10.5C0 11.3284 0.671573 12 1.5 12H9.5C10.3284 12 11 11.3284 11 10.5V9.91465ZM10 10H3.5C2.67157 10 2 9.32843 2 8.5V2H1.5C1.22386 2 1 2.22386 1 2.5V10.5C1 10.7761 1.22386 11 1.5 11H9.5C9.77614 11 10 10.7761 10 10.5V10ZM6.5 2.5V4.5H4.5C4.22386 4.5 4 4.72386 4 5C4 5.27614 4.22386 5.5 4.5 5.5H6.5V7.5C6.5 7.77614 6.72386 8 7 8C7.27614 8 7.5 7.77614 7.5 7.5V5.5H9.5C9.77614 5.5 10 5.27614 10 5C10 4.72386 9.77614 4.5 9.5 4.5H7.5V2.5C7.5 2.22386 7.27614 2 7 2C6.72386 2 6.5 2.22386 6.5 2.5Z" fill="#6F20DC"/>
3
+ </svg>
package/src/assets/svgIcons/checklists.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5.58682 0.176177C7.09426 -0.164409 8.67225 -0.00847912 10.0839 0.620513C10.3358 0.73294 10.4489 1.02861 10.3368 1.28067C10.2245 1.5328 9.92883 1.64672 9.67666 1.53458C8.462 0.993353 7.10462 0.858707 5.80752 1.15176C4.51042 1.44483 3.34242 2.14968 2.47842 3.16055C1.61461 4.17133 1.10111 5.43442 1.01358 6.76114C0.926082 8.08805 1.26929 9.40826 1.99307 10.5238C2.7168 11.6393 3.78199 12.4907 5.0292 12.9516C6.27658 13.4124 7.63974 13.4575 8.91495 13.0805C10.19 12.7035 11.3092 11.9246 12.1054 10.8598C12.9015 9.79488 13.332 8.50084 13.3329 7.17129V6.55801C13.3329 6.28198 13.5569 6.05819 13.8329 6.05801C14.1091 6.05801 14.3329 6.28187 14.3329 6.55801V7.17129C14.332 8.71668 13.8315 10.2206 12.9062 11.4584C11.9808 12.696 10.68 13.6013 9.19815 14.0395C7.71624 14.4775 6.13208 14.4256 4.68252 13.89C3.23296 13.3544 1.99531 12.3642 1.1542 11.0678C0.313118 9.77137 -0.0861088 8.23771 0.0155315 6.69571C0.117209 5.15373 0.714679 3.6859 1.71866 2.51114C2.7227 1.3364 4.07948 0.516797 5.58682 0.176177ZM13.4794 1.47989C13.6745 1.28475 13.9911 1.28493 14.1864 1.47989C14.3817 1.67495 14.3823 1.99153 14.1874 2.18692L7.52041 8.86075C7.42672 8.95448 7.29943 9.00715 7.1669 9.00723C7.03436 9.00727 6.90716 8.95439 6.81338 8.86075L4.81338 6.86075C4.61812 6.66549 4.61812 6.34898 4.81338 6.15372C5.00865 5.95853 5.32518 5.95848 5.52041 6.15372L7.16592 7.79922L13.4794 1.47989Z" fill="#263238"/>
3
+ </svg>
package/src/assets/svgIcons/collapse_all.svg CHANGED
@@ -1,4 +1,4 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
2
- <path d="M3 2L7 5L11 2" stroke="white" stroke-width="1.27273" class="fix"/>
3
- <path d="M3 12L7 9L11 12" stroke="white" stroke-width="1.27273" class="fix"/>
4
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
2
+ <path d="M7.50484 2.78704C7.74396 2.54792 8.11304 2.51799 8.38472 2.6972L8.49507 2.78704L11.3535 5.64544C11.5487 5.84071 11.5487 6.15723 11.3535 6.35247C11.1582 6.5477 10.8417 6.54768 10.6464 6.35247L7.99996 3.70599L5.35347 6.35247C5.15822 6.5477 4.8417 6.54768 4.64644 6.35247C4.45118 6.15722 4.45119 5.84071 4.64644 5.64544L7.50484 2.78704Z" transform="translate(0, 9) scale(1, -1)" fill="#263238"/>
3
+ <path d="M10.6464 9.64544C10.8417 9.45018 11.1582 9.45018 11.3535 9.64544C11.5487 9.84071 11.5487 10.1572 11.3535 10.3525L8.49507 13.2109L8.38472 13.3007C8.11306 13.4799 7.74396 13.4499 7.50484 13.2109L4.64644 10.3525C4.45118 10.1572 4.45119 9.84071 4.64644 9.64544C4.8417 9.45018 5.15821 9.45018 5.35347 9.64544L7.99996 12.2919L10.6464 9.64544Z" transform="translate(0, 23) scale(1, -1)" fill="#263238"/>
4
+ </svg>
package/src/assets/svgIcons/expand_all.svg CHANGED
@@ -1,4 +1,3 @@
1
- <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M6.99998 1.20459L11.3818 4.49095L10.6182 5.50914L6.99998 2.7955L3.3818 5.50914L2.61816 4.49095L6.99998 1.20459Z" fill="#263238"/>
3
- <path fill-rule="evenodd" clip-rule="evenodd" d="M6.99998 12.7954L11.3818 9.50905L10.6182 8.49086L6.99998 11.2045L3.3818 8.49086L2.61816 9.50905L6.99998 12.7954Z" fill="#263238"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
2
+ <path d="M10.6464 9.64544C10.8417 9.45018 11.1582 9.45018 11.3535 9.64544C11.5487 9.84071 11.5487 10.1572 11.3535 10.3525L8.49507 13.2109L8.38472 13.3007C8.11306 13.4799 7.74396 13.4499 7.50484 13.2109L4.64644 10.3525C4.45118 10.1572 4.45119 9.84071 4.64644 9.64544C4.8417 9.45018 5.15821 9.45018 5.35347 9.64544L7.99996 12.2919L10.6464 9.64544ZM7.50484 2.78704C7.74396 2.54792 8.11304 2.51799 8.38472 2.6972L8.49507 2.78704L11.3535 5.64544C11.5487 5.84071 11.5487 6.15723 11.3535 6.35247C11.1582 6.5477 10.8417 6.54768 10.6464 6.35247L7.99996 3.70599L5.35347 6.35247C5.15822 6.5477 4.8417 6.54768 4.64644 6.35247C4.45118 6.15722 4.45119 5.84071 4.64644 5.64544L7.50484 2.78704Z" fill="#263238"/>
4
3
  </svg>
package/src/assets/svgIcons/pin.svg CHANGED
@@ -1,5 +1,3 @@
1
- <svg fill="none" height="16" viewbox="16 12 8 16" width="8" xmlns="http://www.w3.org/2000/svg">
2
- <rect fill="#263238" height="2" width="6" x="17" y="13"></rect>
3
- <path d="M18 15H22L23 21H17L18 15Z" fill="#263238"></path>
4
- <path d="M19 21H21L20 27L19 21Z" fill="#263238"></path>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
2
+ <path d="M8.87495 1.28502C9.11118 1.16144 9.38385 1.12224 9.64741 1.17564C9.86691 1.22014 10.0401 1.33885 10.1806 1.45592C10.3201 1.57216 10.4783 1.73214 10.6582 1.91197L14.0869 5.34068C14.2667 5.52052 14.4267 5.67877 14.5429 5.81822C14.6307 5.92358 14.7195 6.04735 14.7773 6.19517L14.8232 6.35142L14.8408 6.46471C14.8679 6.73007 14.8028 6.99852 14.6552 7.2235C14.5324 7.41053 14.358 7.52725 14.1972 7.61412C14.0375 7.70043 13.8304 7.78835 13.5966 7.88853L11.9335 8.60045C11.8963 8.6164 11.8757 8.62564 11.8603 8.63267C11.8502 8.63726 11.8457 8.63951 11.8457 8.63951C11.8384 8.64368 11.8317 8.64893 11.8251 8.65416C11.8251 8.65416 11.8228 8.65505 11.8124 8.6649L10.7158 9.76158C10.6711 9.80625 10.646 9.83099 10.6279 9.85045C10.6123 9.86718 10.6113 9.86998 10.6113 9.86998C10.6038 9.88066 10.5975 9.89204 10.5927 9.90416C10.5927 9.90416 10.591 9.90687 10.5859 9.92857C10.5798 9.9545 10.5729 9.98955 10.5605 10.0516L10.0722 12.494C10.0107 12.8017 9.95815 13.0669 9.89741 13.2713C9.83811 13.471 9.74752 13.7007 9.55561 13.871C9.30046 14.0973 8.9589 14.201 8.62104 14.1542C8.36714 14.1189 8.16482 13.9777 8.00483 13.8446C7.84087 13.7081 7.64956 13.5167 7.42768 13.2948L5.41889 11.286L2.0019 14.704C1.80664 14.8992 1.49013 14.8992 1.29487 14.704C1.09964 14.5087 1.09962 14.1922 1.29487 13.9969L4.71186 10.579L2.70405 8.57115C2.48217 8.34927 2.29068 8.15797 2.15424 7.994C2.02115 7.83401 1.87989 7.63168 1.84467 7.37779C1.79783 7.03994 1.90153 6.69837 2.12788 6.44322L2.19428 6.37584C2.35506 6.22913 2.5528 6.15332 2.72749 6.10142C2.93196 6.04068 3.19714 5.98816 3.50483 5.92662L5.94819 5.43834C6.00997 5.42598 6.0444 5.41906 6.07026 5.41295C6.09224 5.40775 6.09467 5.40611 6.09467 5.40611C6.1068 5.40135 6.11816 5.395 6.12885 5.38756C6.12885 5.38756 6.13172 5.3865 6.14838 5.37096C6.16785 5.35279 6.19258 5.32774 6.23725 5.28307L7.27827 4.24303C7.30673 4.21457 7.32223 4.19862 7.33393 4.18639C7.34374 4.17612 7.34467 4.17369 7.34467 4.17369C7.34991 4.16709 7.35515 4.16049 7.35932 4.15318C7.35932 4.15318 7.36162 4.14849 7.36616 4.13853C7.37319 4.12309 7.38243 4.10252 7.39838 4.06529L8.1103 2.40221C8.21049 2.16843 8.29938 1.96135 8.38569 1.80162C8.47261 1.64084 8.58916 1.46637 8.77631 1.34361L8.87495 1.28502ZM9.44428 2.15514C9.404 2.14812 9.36282 2.15603 9.32807 2.1776C9.32039 2.18651 9.29906 2.21343 9.2646 2.27721C9.20495 2.38759 9.13795 2.54538 9.03022 2.79674L8.31733 4.45885C8.29137 4.51941 8.26379 4.58574 8.22749 4.64928C8.19814 4.70062 8.16465 4.74945 8.12788 4.79576C8.08238 4.85304 8.03188 4.90348 7.9853 4.95006L6.94428 5.9901C6.87158 6.0628 6.79406 6.14304 6.70112 6.20787C6.62608 6.2602 6.54507 6.30335 6.45991 6.33678C6.3544 6.37816 6.24434 6.39864 6.1435 6.41881L3.70112 6.90709C3.37408 6.9725 3.16272 7.01584 3.01264 7.06041C2.92304 7.08703 2.88368 7.10607 2.87104 7.11314C2.84399 7.14674 2.83107 7.18933 2.83491 7.23228C2.84143 7.24507 2.86316 7.28263 2.9228 7.35435C3.02295 7.4747 3.17515 7.62819 3.41108 7.86412L5.76753 10.2206C5.76934 10.2223 5.77159 10.2237 5.77338 10.2254C5.77484 10.2269 5.77585 10.2289 5.77729 10.2303L8.13471 12.5878C8.37064 12.8237 8.52413 12.9759 8.64448 13.076C8.71401 13.1339 8.75166 13.1557 8.76557 13.1629C8.80866 13.1671 8.8509 13.1548 8.88471 13.1278C8.8916 13.1156 8.91153 13.0767 8.93842 12.9862C8.98298 12.8361 9.02635 12.6247 9.09174 12.2977L9.58003 9.85533C9.60019 9.7545 9.62067 9.64443 9.66206 9.53892C9.69548 9.45378 9.73864 9.37274 9.79096 9.29771C9.85579 9.20478 9.93604 9.12725 10.0087 9.05455L11.0488 8.01353C11.0954 7.96695 11.1458 7.91645 11.2031 7.87096C11.2494 7.83418 11.2982 7.80069 11.3496 7.77135C11.4131 7.73505 11.4794 7.70746 11.54 7.6815L13.2031 6.96861C13.4541 6.86103 13.6113 6.79384 13.7216 6.73424C13.7841 6.70048 13.8108 6.67882 13.8203 6.67076C13.842 6.6359 13.8508 6.59502 13.8437 6.55455C13.8384 6.54431 13.8211 6.51488 13.7744 6.45885C13.694 6.36247 13.5732 6.24109 13.3798 6.04771L9.95112 2.619C9.75776 2.42564 9.63636 2.30481 9.53999 2.22447C9.48382 2.17766 9.45441 2.16036 9.44428 2.15514Z" fill="#263238"/>
5
3
  </svg>
package/src/assets/svgIcons/warning_triangle_outline.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6.19728 0.499997C6.58218 -0.166668 7.5448 -0.166663 7.9297 0.499997L13.9912 11C14.352 11.6249 13.9523 12.3961 13.2666 12.4902L13.126 12.5H1.00099C0.279555 12.4998 -0.188025 11.7677 0.0732541 11.127L0.135754 11L6.19728 0.499997ZM1.00099 11.5H13.126L7.06349 0.999997L1.00099 11.5ZM7.06349 9.5C7.33963 9.5 7.56349 9.72386 7.56349 10C7.56349 10.2761 7.33963 10.5 7.06349 10.5C6.78735 10.5 6.56349 10.2761 6.56349 10C6.56349 9.72386 6.78735 9.50001 7.06349 9.5ZM7.06349 4C7.33963 4 7.56349 4.22385 7.56349 4.5V7.5C7.56349 7.77614 7.33963 8 7.06349 8C6.78735 7.99999 6.56349 7.77613 6.56349 7.5V4.5C6.56349 4.22386 6.78735 4 7.06349 4Z" fill="#FF6565"/>
3
+ </svg>
package/src/components/filterComponent/viewFilter.vue CHANGED
@@ -107,7 +107,7 @@
107
107
  </SelectOption>
108
108
  </template>
109
109
  </SelectComponent>
110
- <template v-if="item.column === 'updated'">
110
+ <template v-if="isDateColumn(item.column)">
111
111
  <DatePickerContainer
112
112
  :data-id="
113
113
  rowDataId.dataId
@@ -149,7 +149,7 @@
149
149
  </DatePickerContainer>
150
150
  </template>
151
151
  <SelectComponent
152
- v-else
152
+ v-else-if="!isBooleanColumn(item.column)"
153
153
  ref="selectSortDropdown"
154
154
  align-items="vertical"
155
155
  class="sort-dropdown"
@@ -512,7 +512,30 @@
512
512
  document.removeEventListener('click', this.handleClickOutside)
513
513
  },
514
514
  methods: {
515
+ isDateColumn(column) {
516
+ if (column === 'updated') {
517
+ return true
518
+ }
519
+ const category = this.filterCategories.find(
520
+ (cat) => cat.name === column
521
+ )
522
+ return ['date', 'datetime', 'date_range'].includes(
523
+ category?.filter_type
524
+ )
525
+ },
526
+ isBooleanColumn(column) {
527
+ const category = this.filterCategories.find(
528
+ (cat) => cat.name === column
529
+ )
530
+ return category?.filter_type === 'boolean'
531
+ },
515
532
  handleClickOutside(event) {
533
+ // A target detached by a re-render (e.g. the select trigger when its
534
+ // dropdown opens) has lost its ancestry — it cannot be attributed as
535
+ // an outside click
536
+ if (!event.target.isConnected) {
537
+ return
538
+ }
516
539
  const isClickInSelect =
517
540
  event.target.closest('.sort-dropdown') ||
518
541
  event.target.closest('.rc-select-dropdown') ||
@@ -546,10 +569,12 @@
546
569
  return this.selectedSort.filter((item) => {
547
570
  const hasColumn = !!item.column
548
571
  const hasConstraint = !!item.constraint
549
- const hasSelectedOptions =
550
- item.column === 'updated'
551
- ? !!item.selectedDate
552
- : !!item.selectedOptions?.length
572
+ if (this.isBooleanColumn(item.column)) {
573
+ return hasColumn && hasConstraint
574
+ }
575
+ const hasSelectedOptions = this.isDateColumn(item.column)
576
+ ? !!item.selectedDate
577
+ : !!item.selectedOptions?.length
553
578
  return hasColumn && hasConstraint && hasSelectedOptions
554
579
  }).length
555
580
  },
@@ -588,10 +613,17 @@
588
613
  },
589
614
  ]
590
615
 
591
- if (this.selectedSort?.[index]?.column === 'updated') {
616
+ if (this.isDateColumn(this.selectedSort?.[index]?.column)) {
592
617
  return dateOptions
593
618
  }
594
619
 
620
+ if (this.isBooleanColumn(this.selectedSort?.[index]?.column)) {
621
+ return [
622
+ { value: 'is_true', label: this.$gettext('Yes') },
623
+ { value: 'is_false', label: this.$gettext('No') },
624
+ ]
625
+ }
626
+
595
627
  if (this.selectedSort?.[index]?.column === 'project_status') {
596
628
  return generalOptions.filter(
597
629
  (option) => option.value !== 'contains_none'
@@ -617,12 +649,12 @@
617
649
  if (type === 'column') {
618
650
  const categoryName = this.filterCategories.find(
619
651
  (option) => option.name === value
620
- ).text
652
+ )?.text
621
653
  return this.$gettext(categoryName) || '-'
622
654
  } else if (type === 'constraint') {
623
655
  return this.constraintOptions(index).find(
624
656
  (option) => option.value === value
625
- ).label
657
+ )?.label
626
658
  } else if (type === 'selectedOptions') {
627
659
  const selectedOptions =
628
660
  this.selectedSort[index]?.selectedOptions || []
package/src/components/filterComponent/viewSettings.vue CHANGED
@@ -261,6 +261,11 @@
261
261
  }
262
262
  },
263
263
  handleClickOutside(event) {
264
+ // Detached targets (removed by a re-render mid-click) cannot be
265
+ // attributed as outside clicks
266
+ if (!event.target.isConnected) {
267
+ return
268
+ }
264
269
  const buttonIcon = this.$el.querySelector('.button-icon')
265
270
  const boxContainer = this.$el.querySelector('.box-container')
266
271
 
package/src/components/filterComponent/viewSort.vue CHANGED
@@ -266,6 +266,11 @@
266
266
  },
267
267
  methods: {
268
268
  handleClickOutside(event) {
269
+ // Detached targets (removed by a re-render mid-click) cannot be
270
+ // attributed as outside clicks
271
+ if (!event.target.isConnected) {
272
+ return
273
+ }
269
274
  const buttonIcon = this.$el.querySelector('.button-icon')
270
275
  const boxContainer = this.$el.querySelector('.box-container')
271
276
  const isClickInSelect =
package/src/components/inputs/select/index.vue CHANGED
@@ -49,10 +49,10 @@
49
49
  buttonBgColor
50
50
  ? buttonBgColor
51
51
  : colorMode == 'dark'
52
- ? 'transparent'
53
- : colorMode == 'transparent'
54
- ? 'transparent'
55
- : 'white'
52
+ ? 'transparent'
53
+ : colorMode == 'transparent'
54
+ ? 'transparent'
55
+ : 'white'
56
56
  "
57
57
  class="select-button"
58
58
  :color-mode="colorMode"
@@ -169,8 +169,8 @@
169
169
  colorMode == 'dark'
170
170
  ? '#000000'
171
171
  : colorMode == 'transparent'
172
- ? 'grey6'
173
- : dropdownBgColor
172
+ ? 'grey6'
173
+ : dropdownBgColor
174
174
  "
175
175
  :hovered-index="hoveredIndex"
176
176
  :hovered-value="hoveredValueDomAttr"
@@ -307,14 +307,14 @@
307
307
  props.sidebarCaret
308
308
  ? '24px'
309
309
  : props.colorMode === 'transparent'
310
- ? '15px'
311
- : CARET_WIDTH};
310
+ ? '15px'
311
+ : CARET_WIDTH};
312
312
  min-width: ${(props) =>
313
313
  props.sidebarCaret
314
314
  ? '24px'
315
315
  : props.colorMode === 'transparent'
316
- ? '15px'
317
- : CARET_WIDTH};
316
+ ? '15px'
317
+ : CARET_WIDTH};
318
318
  height: 100%;
319
319
  align-items: center;
320
320
  cursor: pointer;
@@ -402,6 +402,9 @@
402
402
  }
403
403
  const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
404
404
  ${(props) => (props.disabled ? 'cursor: not-allowed' : 'cursor: pointer')};
405
+ /* Grid item: without this, nowrap selector text sets the automatic
406
+ minimum and the wrapper blows out a constrained track. */
407
+ min-width: 0;
405
408
  `
406
409
 
407
410
  const selectButtonAttrs = {
@@ -434,23 +437,23 @@
434
437
  ? 'padding: 10px 15px 10px 5px;'
435
438
  : 'padding: 10px 15px;'
436
439
  : props.isSearchBarVisible
437
- ? ''
438
- : `padding-left: ${
439
- props.hasNoPadding
440
- ? '0'
441
- : props.tablePaddingLeft
442
- ? props.tablePaddingLeft
443
- : props.paddingLeft
444
- }`};
440
+ ? ''
441
+ : `padding-left: ${
442
+ props.hasNoPadding
443
+ ? '0'
444
+ : props.tablePaddingLeft
445
+ ? props.tablePaddingLeft
446
+ : props.paddingLeft
447
+ }`};
445
448
  text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
446
449
  min-height: ${(props) =>
447
450
  props.selectHeight
448
451
  ? props.selectHeight
449
452
  : props.selectMinHeight
450
- ? props.selectMinHeight
451
- : props.height
452
- ? props.height
453
- : '36px'};
453
+ ? props.selectMinHeight
454
+ : props.height
455
+ ? props.height
456
+ : '36px'};
454
457
  display: flex;
455
458
  align-items: center;
456
459
  ${(props) => (props.selectHeight ? `height: ${props.selectHeight};` : '')}
@@ -458,8 +461,8 @@
458
461
  showBorder &&
459
462
  `
460
463
  border: ${BORDER_WIDTH} solid ${
461
- hasError ? theme.colors.red : theme.colors.grey4
462
- }
464
+ hasError ? theme.colors.red : theme.colors.grey4
465
+ }
463
466
  `}
464
467
  opacity: ${(props) =>
465
468
  props.colorMode === 'transparent' && props.disabled ? '0.4' : '1'};
@@ -467,18 +470,18 @@
467
470
  props.colorMode === 'transparent'
468
471
  ? 'transparent'
469
472
  : props.disabled && props.showDisabledBackground
470
- ? props.theme.colors.grey5
471
- : props.theme.colors[props.bgColor]
472
- ? props.theme.colors[props.bgColor]
473
- : props.bgColor} !important;
473
+ ? props.theme.colors.grey5
474
+ : props.theme.colors[props.bgColor]
475
+ ? props.theme.colors[props.bgColor]
476
+ : props.bgColor} !important;
474
477
  color: ${(props) =>
475
478
  props.colorMode === 'transparent'
476
479
  ? props.theme.colors.white
477
480
  : props.disabled && props.showDisabledBackground
478
- ? props.theme.colors.black
479
- : props.theme.colors[props.fontColor]
480
- ? props.theme.colors[props.fontColor]
481
- : props.fontColor};
481
+ ? props.theme.colors.black
482
+ : props.theme.colors[props.fontColor]
483
+ ? props.theme.colors[props.fontColor]
484
+ : props.fontColor};
482
485
  ${(props) => (props.disabled ? 'pointer-events: none' : '')};
483
486
  overflow: hidden;
484
487
  & > .handle {
@@ -486,8 +489,8 @@
486
489
  props.hasError
487
490
  ? props.theme.colors.red
488
491
  : props.colorMode === 'light'
489
- ? props.theme.colors.grey4
490
- : props.theme.colors.white}
492
+ ? props.theme.colors.grey4
493
+ : props.theme.colors.white}
491
494
  1px solid;
492
495
  }
493
496
  `
@@ -533,8 +536,8 @@
533
536
  props.minWidth
534
537
  ? props.minWidth
535
538
  : props.optionWidth
536
- ? props.optionWidth
537
- : '100%'};
539
+ ? props.optionWidth
540
+ : '100%'};
538
541
  background-color: ${(props) =>
539
542
  props.theme.colors[props.bgColor]
540
543
  ? props.theme.colors[props.bgColor]
@@ -1506,6 +1509,11 @@
1506
1509
  }
1507
1510
  },
1508
1511
  getDistanceBetweenSelectAndDropdownMenu() {
1512
+ // Runs from a delayed watcher callback; the select may have closed or
1513
+ // unmounted by the time it fires
1514
+ if (!this.$refs.select?.$el) {
1515
+ return
1516
+ }
1509
1517
  const wholeSelectTopPosition =
1510
1518
  this.selectTopPosition + this.$refs.select.$el.clientHeight
1511
1519
  this.selectAndDropdownDistance =
package/src/components/tabsHeader/index.vue CHANGED
@@ -183,28 +183,16 @@
183
183
  z-index: ${(props) => (props.isActive ? 1 : 0)};
184
184
  border-bottom: ${(props) => {
185
185
  if (props.scrollOverflow) {
186
- return '1px solid transparent'
186
+ return props.isActive
187
+ ? `1px solid ${props.theme.semanticColors.purple[400]}`
188
+ : '1px solid transparent'
187
189
  }
188
190
  if (props.isActive) {
189
191
  return `2px solid ${props.theme.semanticColors.purple[400]}`
190
192
  }
191
193
  return `2px solid ${props.theme.semanticColors.grey[400]}`
192
194
  }};
193
- ${(props) =>
194
- props.scrollOverflow && props.isActive
195
- ? `
196
- &::after {
197
- content: '';
198
- position: absolute;
199
- left: 0;
200
- right: 0;
201
- bottom: -1px;
202
- height: 2px;
203
- background-color: ${props.theme.semanticColors.purple[400]};
204
- z-index: 1;
205
- }
206
- `
207
- : ''}
195
+ margin-bottom: ${(props) => (props.scrollOverflow && props.isActive ? '-1px' : '0')};
208
196
  &:hover .rc-tabs-header__menu-slot {
209
197
  opacity: 1;
210
198
  pointer-events: auto;