@eturnity/eturnity_reusable_components 1.2.64 → 1.2.65
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.
- package/package.json +1 -1
- package/src/assets/svgIcons/co_branding.svg +6 -0
- package/src/assets/svgIcons/e_signature.svg +5 -0
- package/src/assets/svgIcons/finance.svg +3 -0
- package/src/assets/svgIcons/free_technology.svg +5 -0
- package/src/assets/svgIcons/workflow_template.svg +12 -0
- package/src/components/inputs/select/index.vue +426 -342
package/package.json
CHANGED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="18" height="18" viewBox="5 6 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="14" y="14" width="5" height="5" rx="1" transform="rotate(-180 14 14)" fill="white"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 16C24.1046 16 25 15.1046 25 14L25 9C25 7.89543 24.1046 7 23 7L18 7C16.8954 7 16 7.89543 16 9L16 14C16 15.1046 16.8954 16 18 16L23 16ZM22 14C22.5523 14 23 13.5523 23 13L23 10C23 9.44772 22.5523 9 22 9L19 9C18.4477 9 18 9.44771 18 10L18 13C18 13.5523 18.4477 14 19 14L22 14Z" fill="white"/>
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 25C15.1046 25 16 24.1046 16 23L16 18C16 16.8954 15.1046 16 14 16L9 16C7.89543 16 7 16.8954 7 18L7 23C7 24.1046 7.89543 25 9 25L14 25ZM13 23C13.5523 23 14 22.5523 14 22L14 19C14 18.4477 13.5523 18 13 18L10 18C9.44772 18 9 18.4477 9 19L9 22C9 22.5523 9.44771 23 10 23L13 23Z" fill="white"/>
|
|
5
|
+
<rect x="23" y="23" width="5" height="5" rx="1" transform="rotate(-180 23 23)" fill="white"/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="18" height="18" viewBox="5 6 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 9.6C9.83721 9.6 9.29995 10.1373 9.29995 10.8V11.8H7.69995V10.8C7.69995 9.2536 8.95355 8 10.5 8H21.5C23.0463 8 24.3 9.2536 24.3 10.8V11.8H22.7V10.8C22.7 10.1373 22.1627 9.6 21.5 9.6H10.5Z" fill="white"/>
|
|
3
|
+
<path d="M8.24473 16.6764C8.8516 16.6764 9.08831 16.3059 9.08831 15.6718C9.08831 15.0379 8.81148 14.5959 8.26252 14.5959H7.64726V16.6764H8.24473ZM7 14.0424H8.34289C9.19529 14.0424 9.74425 14.7299 9.74425 15.6718C9.74425 16.1896 9.57013 16.6451 9.2354 16.9264C8.99883 17.1227 8.69085 17.2344 8.28926 17.2344H7V14.0424ZM11.5929 16.0916C11.5929 15.6451 11.3832 15.3415 11.0127 15.3415C10.6378 15.3415 10.4323 15.6451 10.4323 16.0916C10.4323 16.538 10.6378 16.837 11.0127 16.837C11.3832 16.837 11.5929 16.538 11.5929 16.0916ZM9.81651 16.0916C9.81651 15.4085 10.303 14.8817 11.0127 14.8817C11.7223 14.8817 12.2088 15.4085 12.2088 16.0916C12.2088 16.7744 11.7223 17.3014 11.0127 17.3014C10.3029 17.3014 9.81637 16.7746 9.81637 16.0916M12.3091 16.0916C12.3091 15.4085 12.7555 14.8817 13.4517 14.8817C14.0455 14.8817 14.4114 15.2256 14.4917 15.721H13.8981C13.858 15.5202 13.7018 15.3682 13.4786 15.3682C13.1126 15.3682 12.9252 15.6496 12.9252 16.0916C12.9252 16.5246 13.0992 16.8148 13.4696 16.8148C13.7152 16.8148 13.8893 16.6854 13.9294 16.4265H14.5141C14.474 16.913 14.0944 17.3014 13.483 17.3014C12.7601 17.3014 12.3091 16.7746 12.3091 16.0916ZM16.0945 17.2345V16.9666H16.0812C15.925 17.1765 15.7464 17.2969 15.4251 17.2969C14.9162 17.2969 14.6306 16.9712 14.6306 16.471V14.9442H15.233V16.3683C15.233 16.6362 15.3537 16.7835 15.6124 16.7835C15.8981 16.7835 16.0722 16.5693 16.0722 16.2657V14.9442H16.6792V17.2345H16.0945ZM19.6365 17.2345H20.2434V14.9442H19.6365V17.2345ZM19.6365 14.6241H20.2434V14.0565H19.6365V14.6241ZM22.0976 15.9888C22.0976 15.654 21.919 15.3684 21.553 15.3684C21.245 15.3684 21.0398 15.6094 21.0398 15.9933C21.0398 16.3817 21.245 16.6094 21.5576 16.6094C21.9414 16.6094 22.0976 16.3282 22.0976 15.9889M20.4952 17.3014H21.0975C21.1467 17.4442 21.276 17.5558 21.5573 17.5558C21.901 17.5558 22.0661 17.3907 22.0661 17.0782V16.8281H22.0528C21.9187 16.9799 21.7448 17.0959 21.4546 17.0959C20.9459 17.0959 20.446 16.6942 20.446 16.0023C20.446 15.3192 20.8565 14.8817 21.4368 14.8817C21.7224 14.8817 21.9321 14.9933 22.0705 15.1853H22.0795V14.9442H22.6642V17.0602C22.6642 17.3817 22.5615 17.6004 22.3919 17.7567C22.1998 17.9352 21.9054 18.0156 21.5662 18.0156C20.9413 18.0156 20.5575 17.7478 20.4951 17.3014M23.5183 15.2567H23.5316C23.6878 15.0112 23.8977 14.8817 24.2101 14.8817C24.6832 14.8817 25 15.2388 25 15.7388V17.2344H24.393V15.8282C24.393 15.5826 24.2502 15.4085 23.9958 15.4085C23.728 15.4085 23.5316 15.6227 23.5316 15.9353V17.2344H22.9246V14.9442H23.5183V15.2567ZM18.2533 15.3102C17.7801 15.2078 17.5569 15.1318 17.5569 14.8728C17.5569 14.6452 17.7845 14.4978 18.1328 14.4978C18.4504 14.4978 18.6933 14.6469 18.743 14.9442H19.3655C19.3022 14.3244 18.8423 13.9844 18.1372 13.9844C17.4276 13.9844 16.9142 14.3103 16.9142 14.9398C16.9142 15.605 17.4364 15.7567 18.0077 15.8862C18.4942 15.9979 18.7978 16.0603 18.7978 16.3727C18.7978 16.6675 18.5076 16.7835 18.1774 16.7835C17.7222 16.7835 17.5034 16.6318 17.4588 16.2478H16.825C16.8473 16.922 17.3383 17.3058 18.2042 17.3058C18.9227 17.3058 19.4449 16.9443 19.4449 16.2969C19.4449 15.6094 18.9093 15.4532 18.2533 15.3102Z" fill="white"/>
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5 22.4C22.1628 22.4 22.7 21.8627 22.7 21.2L22.7 20.2L24.3 20.2L24.3 21.2C24.3 22.7464 23.0464 24 21.5 24L10.5 24C8.95365 24 7.70005 22.7464 7.70005 21.2L7.70005 20.2L9.30005 20.2L9.30005 21.2C9.30005 21.8627 9.83731 22.4 10.5 22.4L21.5 22.4Z" fill="white"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M18 1.72728C18 2.62728 17.2636 3.36364 16.3636 3.36364C16.2164 3.36364 16.0773 3.34728 15.9464 3.30637L13.0336 6.21091C13.0745 6.34182 13.0909 6.48909 13.0909 6.63637C13.0909 7.53637 12.3545 8.27273 11.4545 8.27273C10.5545 8.27273 9.81818 7.53637 9.81818 6.63637C9.81818 6.48909 9.83455 6.34182 9.87545 6.21091L7.78909 4.12455C7.65818 4.16546 7.51091 4.18182 7.36364 4.18182C7.21636 4.18182 7.06909 4.16546 6.93818 4.12455L3.21545 7.85546C3.25636 7.98637 3.27273 8.12546 3.27273 8.27273C3.27273 9.17273 2.53636 9.90909 1.63636 9.90909C0.736364 9.90909 0 9.17273 0 8.27273C0 7.37273 0.736364 6.63637 1.63636 6.63637C1.78364 6.63637 1.92273 6.65273 2.05364 6.69364L5.78454 2.97091C5.74364 2.84 5.72727 2.69273 5.72727 2.54546C5.72727 1.64546 6.46364 0.909094 7.36364 0.909094C8.26364 0.909094 9 1.64546 9 2.54546C9 2.69273 8.98364 2.84 8.94273 2.97091L11.0291 5.05728C11.16 5.01637 11.3073 5 11.4545 5C11.6018 5 11.7491 5.01637 11.88 5.05728L14.7845 2.14455C14.7436 2.01364 14.7273 1.87455 14.7273 1.72728C14.7273 0.827275 15.4636 0.0909119 16.3636 0.0909119C17.2636 0.0909119 18 0.827275 18 1.72728Z" fill="#B2B9C5"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M5.4208 17.0714C5.07385 17.4184 4.65101 17.6802 4.18561 17.836C3.72021 17.9918 3.22497 18.0374 2.73892 17.9693C2.64284 17.9574 2.5521 17.9185 2.47718 17.8572C2.40225 17.796 2.34619 17.7147 2.31546 17.623L3.88096 16.0324C3.94692 15.9668 3.99926 15.8889 4.03498 15.803C4.07069 15.7172 4.08908 15.6251 4.08908 15.5321C4.08908 15.4392 4.07069 15.3471 4.03498 15.2612C3.99926 15.1754 3.94692 15.0974 3.88096 15.0319L2.98272 14.134C2.91714 14.068 2.83916 14.0157 2.75327 13.98C2.66739 13.9443 2.57529 13.9259 2.48228 13.9259C2.38926 13.9259 2.29716 13.9443 2.21128 13.98C2.12539 14.0157 2.04742 14.068 1.98183 14.134L0.403492 15.6989C0.30691 15.6723 0.220215 15.6181 0.154091 15.5429C0.0879669 15.4677 0.0453052 15.3748 0.0313641 15.2756C-0.0421363 14.7583 0.0140257 14.2308 0.194808 13.7405C0.375591 13.2503 0.675336 12.8126 1.06713 12.4667C1.45893 12.1208 1.93052 11.8776 2.43956 11.7589C2.9486 11.6402 3.47917 11.6497 3.98362 11.7866L11.7855 4.0005C11.6417 3.46439 11.6419 2.89985 11.7861 2.36384C11.9303 1.82784 12.2133 1.33933 12.6067 0.947627C12.9516 0.600307 13.3715 0.336502 13.8341 0.176419C14.2967 0.0163361 14.7899 -0.0357774 15.2758 0.0240696C15.3719 0.0360022 15.4626 0.0748519 15.5375 0.136134C15.6124 0.197416 15.6685 0.278631 15.6992 0.370404L14.1466 1.98663C14.0806 2.05219 14.0283 2.13014 13.9926 2.21599C13.9568 2.30185 13.9384 2.39391 13.9384 2.48689C13.9384 2.57987 13.9568 2.67193 13.9926 2.75779C14.0283 2.84364 14.0806 2.92159 14.1466 2.98715L15.0705 3.91071C15.1361 3.97664 15.214 4.02896 15.2999 4.06466C15.3858 4.10037 15.4779 4.11875 15.5709 4.11875C15.6639 4.11875 15.756 4.10037 15.8419 4.06466C15.9278 4.02896 16.0058 3.97664 16.0714 3.91071L17.624 2.33296C17.7158 2.36368 17.7971 2.41972 17.8584 2.49462C17.9197 2.56952 17.9586 2.66022 17.9705 2.75626C18.0416 3.2726 17.9837 3.79851 17.8019 4.287C17.62 4.77549 17.32 5.21136 16.9285 5.55566C16.5371 5.89995 16.0664 6.14196 15.5586 6.26006C15.0507 6.37815 14.5215 6.36866 14.0182 6.23243L6.22922 14.0185C6.37463 14.5535 6.37647 15.1174 6.23455 15.6533C6.09263 16.1893 5.81196 16.6784 5.4208 17.0714Z" fill="#B2B9C5"/>
|
|
3
|
+
<path d="M17.855 13.8903C17.6574 13.2689 17.2729 12.7236 16.7539 12.3288C16.2349 11.934 15.6067 11.7088 14.955 11.684C14.6385 11.6713 14.3221 11.7103 14.0182 11.7994L11.978 9.75991L9.74519 11.9918L11.7855 14.0314C11.6963 14.3351 11.6573 14.6514 11.67 14.9677C11.6902 15.4151 11.8053 15.8531 12.0079 16.2525C12.2105 16.6519 12.4958 17.0037 12.8448 17.2844C13.1939 17.5651 13.5987 17.7683 14.0324 17.8805C14.4661 17.9928 14.9188 18.0114 15.3602 17.9353C15.8017 17.8591 16.2219 17.6899 16.5929 17.4389C16.9639 17.1879 17.2772 16.8608 17.512 16.4794C17.7467 16.098 17.8976 15.671 17.9545 15.2268C18.0115 14.7826 17.9732 14.3313 17.8422 13.9031L17.855 13.8903ZM15.8661 16.2633L14.7112 16.5711C14.6219 16.597 14.5274 16.5987 14.4372 16.5762C14.3471 16.5537 14.2645 16.5077 14.1979 16.4429L13.351 15.5963C13.2839 15.531 13.2355 15.4491 13.2107 15.3589C13.1859 15.2687 13.1856 15.1735 13.2098 15.0832L13.5178 13.9159C13.5417 13.8267 13.5887 13.7454 13.654 13.6801C13.7193 13.6148 13.8007 13.5678 13.8899 13.5439L15.0448 13.2361C15.1371 13.2108 15.2345 13.2105 15.327 13.2353C15.4195 13.2601 15.5037 13.3091 15.5709 13.3772L16.4178 14.2238C16.4805 14.2891 16.5252 14.3694 16.5476 14.4571C16.5701 14.5447 16.5696 14.6367 16.5462 14.724L16.2253 15.8913C16.2026 15.979 16.1575 16.0593 16.0946 16.1245C16.0316 16.1897 15.9529 16.2375 15.8661 16.2633Z" fill="#B2B9C5"/>
|
|
4
|
+
<path d="M6.22922 3.97484C6.37597 3.43993 6.37847 2.87572 6.23648 2.33953C6.0945 1.80334 5.81308 1.31426 5.4208 0.921973C4.81778 0.350896 4.01871 0.0326054 3.18804 0.0326054C2.35737 0.0326054 1.55829 0.350896 0.955268 0.921973C0.462665 1.41231 0.145763 2.05149 0.0537508 2.7403C-0.0382615 3.4291 0.0997623 4.129 0.446399 4.73137C0.793035 5.33373 1.3289 5.80487 1.97081 6.07165C2.61272 6.33843 3.32477 6.38593 3.99645 6.20678L6.03674 8.27195L8.26951 6.04002L6.22922 3.97484ZM4.16327 4.55207L2.99556 4.87275C2.90518 4.89698 2.80997 4.89668 2.71975 4.87188C2.62952 4.84708 2.54755 4.79867 2.48228 4.73165L1.6482 3.87223C1.58224 3.80896 1.53438 3.72923 1.50956 3.64129C1.48475 3.55334 1.48388 3.46036 1.50704 3.37197L1.82784 2.20469C1.85174 2.11549 1.89871 2.03414 1.96404 1.96884C2.02936 1.90354 2.11073 1.85659 2.19997 1.8327L3.36768 1.51202C3.45683 1.4848 3.5517 1.48236 3.64213 1.50496C3.73256 1.52756 3.81512 1.57434 3.88096 1.6403L4.72788 2.48689C4.79383 2.55288 4.84151 2.63486 4.86625 2.7248C4.89099 2.81474 4.89195 2.90956 4.86903 2.99998L4.54823 4.16725C4.52433 4.25646 4.47736 4.3378 4.41204 4.4031C4.34671 4.4684 4.26534 4.51535 4.1761 4.53924L4.16327 4.55207Z" fill="#B2B9C5"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg width="18" height="18" viewBox="10 7 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M9.4 9.2C9.4 9.86274 8.86274 10.4 8.2 10.4C7.53726 10.4 7 9.86274 7 9.2C7 8.53726 7.53726 8 8.2 8C8.86274 8 9.4 8.53726 9.4 9.2Z" fill="white"/>
|
|
3
|
+
<path d="M13 9.2C13 9.86274 12.4627 10.4 11.8 10.4C11.1373 10.4 10.6 9.86274 10.6 9.2C10.6 8.53726 11.1373 8 11.8 8C12.4627 8 13 8.53726 13 9.2Z" fill="white"/>
|
|
4
|
+
<path d="M9.4 12.8C9.4 13.4627 8.86274 14 8.2 14C7.53726 14 7 13.4627 7 12.8C7 12.1373 7.53726 11.6 8.2 11.6C8.86274 11.6 9.4 12.1373 9.4 12.8Z" fill="white"/>
|
|
5
|
+
<path d="M13 12.8C13 13.4627 12.4627 14 11.8 14C11.1373 14 10.6 13.4627 10.6 12.8C10.6 12.1373 11.1373 11.6 11.8 11.6C12.4627 11.6 13 12.1373 13 12.8Z" fill="white"/>
|
|
6
|
+
<rect x="15" y="9" width="10" height="4" rx="2" fill="white"/>
|
|
7
|
+
<path d="M9.4 19.2C9.4 19.8627 8.86274 20.4 8.2 20.4C7.53726 20.4 7 19.8627 7 19.2C7 18.5373 7.53726 18 8.2 18C8.86274 18 9.4 18.5373 9.4 19.2Z" fill="white"/>
|
|
8
|
+
<path d="M13 19.2C13 19.8627 12.4627 20.4 11.8 20.4C11.1373 20.4 10.6 19.8627 10.6 19.2C10.6 18.5373 11.1373 18 11.8 18C12.4627 18 13 18.5373 13 19.2Z" fill="white"/>
|
|
9
|
+
<path d="M9.4 22.8C9.4 23.4627 8.86274 24 8.2 24C7.53726 24 7 23.4627 7 22.8C7 22.1373 7.53726 21.6 8.2 21.6C8.86274 21.6 9.4 22.1373 9.4 22.8Z" fill="white"/>
|
|
10
|
+
<path d="M13 22.8C13 23.4627 12.4627 24 11.8 24C11.1373 24 10.6 23.4627 10.6 22.8C10.6 22.1373 11.1373 21.6 11.8 21.6C12.4627 21.6 13 22.1373 13 22.8Z" fill="white"/>
|
|
11
|
+
<rect x="15" y="19" width="10" height="4" rx="2" fill="white"/>
|
|
12
|
+
</svg>
|
|
@@ -1,101 +1,135 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
<Container
|
|
3
|
+
:selectWidth="selectWidth"
|
|
4
|
+
@mouseenter="mouseEnterHandler"
|
|
5
|
+
@mouseleave="mouseLeaveHandler"
|
|
6
|
+
>
|
|
7
|
+
<input-wrapper
|
|
8
|
+
:hasLabel="!!label && label.length > 0"
|
|
9
|
+
:alignItems="alignItems"
|
|
10
|
+
>
|
|
11
|
+
<label-wrapper v-if="label">
|
|
12
|
+
<input-label
|
|
13
|
+
:fontColor="
|
|
14
|
+
labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
|
|
15
|
+
"
|
|
16
|
+
:fontSize="fontSize"
|
|
17
|
+
>{{ label }}</input-label
|
|
6
18
|
>
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
19
|
+
<info-text
|
|
20
|
+
v-if="infoTextMessage"
|
|
21
|
+
:text="infoTextMessage"
|
|
22
|
+
borderColor="#ccc"
|
|
23
|
+
:size="fontSize ? fontSize : '16px'"
|
|
24
|
+
:alignText="infoTextAlign"
|
|
25
|
+
/>
|
|
26
|
+
</label-wrapper>
|
|
27
|
+
<select-button-wrapper :disabled="disabled">
|
|
28
|
+
<selectButton
|
|
29
|
+
ref="select"
|
|
30
|
+
@click="toggleDropdown"
|
|
31
|
+
:selectHeight="selectHeight"
|
|
32
|
+
:bgColor="
|
|
33
|
+
buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
|
|
34
|
+
"
|
|
35
|
+
:fontColor="
|
|
36
|
+
buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
|
|
37
|
+
"
|
|
38
|
+
:hasError="hasError"
|
|
39
|
+
:isSearchBarVisible="isSearchBarVisible"
|
|
40
|
+
:disabled="disabled"
|
|
41
|
+
@keydown.native="onKeyDown"
|
|
10
42
|
>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
</
|
|
72
|
-
|
|
73
|
-
|
|
43
|
+
<inputText
|
|
44
|
+
v-if="isSearchBarVisible"
|
|
45
|
+
ref="searchInput"
|
|
46
|
+
tabindex="0"
|
|
47
|
+
:noBorder="true"
|
|
48
|
+
:fontSize="fontSize"
|
|
49
|
+
backgroundColor="transparent"
|
|
50
|
+
:fontColor="
|
|
51
|
+
buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
|
|
52
|
+
"
|
|
53
|
+
:value="textSearch"
|
|
54
|
+
@keydown.stop="onKeyDown"
|
|
55
|
+
@input-change="searchChange"
|
|
56
|
+
@click.native.stop
|
|
57
|
+
/>
|
|
58
|
+
<selector v-else>
|
|
59
|
+
<slot name="selector" :selectedValue="selectedValue"></slot>
|
|
60
|
+
</selector>
|
|
61
|
+
<Caret @click.stop="toggleCaretDropdown">
|
|
62
|
+
<icon
|
|
63
|
+
v-if="isDropdownOpen"
|
|
64
|
+
name="arrow_up"
|
|
65
|
+
size="12px"
|
|
66
|
+
:color="
|
|
67
|
+
caretColor || colorMode == 'dark'
|
|
68
|
+
? 'white'
|
|
69
|
+
: 'transparentBlack1'
|
|
70
|
+
"
|
|
71
|
+
/>
|
|
72
|
+
<icon
|
|
73
|
+
v-else
|
|
74
|
+
name="arrow_down"
|
|
75
|
+
size="12px"
|
|
76
|
+
:color="
|
|
77
|
+
caretColor || colorMode == 'dark'
|
|
78
|
+
? 'white'
|
|
79
|
+
: 'transparentBlack1'
|
|
80
|
+
"
|
|
81
|
+
/>
|
|
82
|
+
</Caret>
|
|
83
|
+
</selectButton>
|
|
84
|
+
<DropdownWrapper>
|
|
85
|
+
<selectDropdown
|
|
86
|
+
ref="dropdown"
|
|
87
|
+
v-show="isDropdownOpen"
|
|
88
|
+
:hoveredIndex="hoveredIndex"
|
|
89
|
+
:isActive="isActive"
|
|
90
|
+
:optionWidth="optionWidth"
|
|
91
|
+
:bgColor="
|
|
92
|
+
dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
|
|
93
|
+
"
|
|
94
|
+
:fontColor="
|
|
95
|
+
dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
|
|
96
|
+
"
|
|
97
|
+
:selectedValue="selectedValue"
|
|
98
|
+
@option-selected="optionSelected"
|
|
99
|
+
@option-hovered="optionHovered"
|
|
100
|
+
>
|
|
101
|
+
<slot name="dropdown"></slot>
|
|
102
|
+
</selectDropdown>
|
|
103
|
+
</DropdownWrapper>
|
|
104
|
+
</select-button-wrapper>
|
|
105
|
+
</input-wrapper>
|
|
106
|
+
</Container>
|
|
107
|
+
</template>
|
|
74
108
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
109
|
+
<script>
|
|
110
|
+
//How to use it
|
|
111
|
+
// <Select
|
|
112
|
+
// hoverDropdown="true"
|
|
113
|
+
// selectWidth="100%"
|
|
114
|
+
// optionWidth="50%"
|
|
115
|
+
// label="that is a label"
|
|
116
|
+
// alignItems="vertical"
|
|
117
|
+
// >
|
|
118
|
+
// <template #selector="{selectedValue}">
|
|
119
|
+
// value selected: {{selectedValue}}
|
|
120
|
+
// </template>
|
|
121
|
+
// <template #dropdown>
|
|
122
|
+
// <Option value="1">value one</Option>
|
|
123
|
+
// <Option value="2">value two</Option>
|
|
124
|
+
// <Option value="3">value three</Option>
|
|
125
|
+
// <Option value="4">value four</Option>
|
|
126
|
+
// </template>
|
|
127
|
+
// </Select>
|
|
94
128
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
129
|
+
import styled from 'vue-styled-components'
|
|
130
|
+
import InfoText from '../../infoText'
|
|
131
|
+
import icon from '../../icon'
|
|
132
|
+
import inputText from '../inputText'
|
|
99
133
|
|
|
100
134
|
const Caret = styled.div`
|
|
101
135
|
display: flex;
|
|
@@ -114,17 +148,20 @@ const Selector = styled.div`
|
|
|
114
148
|
width: 100%;
|
|
115
149
|
`
|
|
116
150
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
color
|
|
151
|
+
const labelAttrs = { fontSize: String }
|
|
152
|
+
const InputLabel = styled('div', labelAttrs)`
|
|
153
|
+
color: ${(props) =>
|
|
154
|
+
props.theme.colors[props.fontColor]
|
|
155
|
+
? props.theme.colors[props.fontColor]
|
|
156
|
+
: props.fontColor};
|
|
120
157
|
font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
|
|
121
158
|
font-weight: 700;
|
|
122
159
|
`
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
160
|
+
const inputProps = { selectWidth: String, optionWidth: String }
|
|
161
|
+
const Container = styled('div', inputProps)`
|
|
162
|
+
width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
|
|
163
|
+
position: relative;
|
|
164
|
+
display: inline-block;
|
|
128
165
|
`
|
|
129
166
|
const LabelWrapper = styled.div`
|
|
130
167
|
display: inline-grid;
|
|
@@ -138,10 +175,10 @@ const SelectButtonWrapperAttrs = {
|
|
|
138
175
|
disabled: Boolean
|
|
139
176
|
}
|
|
140
177
|
const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
|
|
141
|
-
${(props) => props.disabled ? 'cursor: not-allowed' : ''
|
|
178
|
+
${(props) => (props.disabled ? 'cursor: not-allowed' : '')};
|
|
142
179
|
`
|
|
143
180
|
|
|
144
|
-
const selectButtonAttrs={
|
|
181
|
+
const selectButtonAttrs = {
|
|
145
182
|
bgColor: String,
|
|
146
183
|
fontColor: String,
|
|
147
184
|
hasError: Boolean,
|
|
@@ -149,30 +186,47 @@ const selectButtonAttrs={
|
|
|
149
186
|
selectHeight: String,
|
|
150
187
|
isSearchBarVisible: Boolean
|
|
151
188
|
}
|
|
152
|
-
const selectButton = styled('div',selectButtonAttrs)`
|
|
189
|
+
const selectButton = styled('div', selectButtonAttrs)`
|
|
153
190
|
position:relative;
|
|
154
191
|
box-sizing: border-box;
|
|
155
192
|
border-radius:4px;
|
|
156
|
-
padding: ${(props) =>
|
|
193
|
+
padding: ${(props) =>
|
|
194
|
+
props.isSearchBarVisible ? '0 10px 0 0' : '0px 10px'};
|
|
157
195
|
text-align:left;
|
|
158
196
|
border-radius:4px;
|
|
159
197
|
min-height:36px;
|
|
160
198
|
display: flex;
|
|
161
199
|
align-items: center;
|
|
162
|
-
max-height:${props=>props.selectHeight};
|
|
163
|
-
border:1px solid ${(props) =>
|
|
164
|
-
|
|
165
|
-
color:${(props) =>
|
|
166
|
-
|
|
200
|
+
max-height:${(props) => props.selectHeight};
|
|
201
|
+
border:1px solid ${(props) =>
|
|
202
|
+
props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
|
|
203
|
+
background-color:${(props) =>
|
|
204
|
+
props.disabled
|
|
205
|
+
? props.theme.colors.grey5
|
|
206
|
+
: props.theme.colors[props.bgColor]
|
|
207
|
+
? props.theme.colors[props.bgColor]
|
|
208
|
+
: props.bgColor};
|
|
209
|
+
color:${(props) =>
|
|
210
|
+
props.theme.colors[props.fontColor]
|
|
211
|
+
? props.theme.colors[props.fontColor]
|
|
212
|
+
: props.fontColor};
|
|
213
|
+
${(props) => (props.disabled ? 'pointer-events: none' : '')};
|
|
167
214
|
`
|
|
168
|
-
const selectDropdownAttrs={
|
|
169
|
-
|
|
215
|
+
const selectDropdownAttrs = {
|
|
216
|
+
bgColor: String,
|
|
217
|
+
fontColor: String,
|
|
218
|
+
selectWidth: String,
|
|
219
|
+
optionWidth: String,
|
|
220
|
+
hoveredIndex: Number,
|
|
221
|
+
selectedValue: Number | String
|
|
222
|
+
}
|
|
223
|
+
const selectDropdown = styled('div', selectDropdownAttrs)`
|
|
170
224
|
box-sizing: border-box;
|
|
171
|
-
z-index:${props=>props.isActive?'2':'1'};
|
|
225
|
+
z-index:${(props) => (props.isActive ? '2' : '1')};
|
|
172
226
|
position:absolute;
|
|
173
227
|
top:5px;
|
|
174
228
|
padding:10px;
|
|
175
|
-
border:1px solid ${(props)=>props.theme.colors.grey4}
|
|
229
|
+
border:1px solid ${(props) => props.theme.colors.grey4}
|
|
176
230
|
border-radius:4px;
|
|
177
231
|
display: flex;
|
|
178
232
|
flex-direction: column;
|
|
@@ -180,21 +234,27 @@ const selectDropdown = styled('div',selectDropdownAttrs)`
|
|
|
180
234
|
padding: 0px;
|
|
181
235
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
182
236
|
width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
|
|
183
|
-
background-color:${(props) =>
|
|
184
|
-
|
|
237
|
+
background-color:${(props) =>
|
|
238
|
+
props.theme.colors[props.bgColor]
|
|
239
|
+
? props.theme.colors[props.bgColor]
|
|
240
|
+
: props.bgColor};
|
|
241
|
+
color:${(props) =>
|
|
242
|
+
props.theme.colors[props.fontColor]
|
|
243
|
+
? props.theme.colors[props.fontColor]
|
|
244
|
+
: props.fontColor};
|
|
185
245
|
max-height:300px;
|
|
186
246
|
overflow-y:auto;
|
|
187
|
-
& [data-value="${props=>props.selectedValue}"]{
|
|
247
|
+
& [data-value="${(props) => props.selectedValue}"]{
|
|
188
248
|
backdrop-filter: brightness(1.4);
|
|
189
249
|
}
|
|
190
|
-
&>div:nth-child(${props=>props.hoveredIndex}){
|
|
250
|
+
&>div:nth-child(${(props) => props.hoveredIndex}){
|
|
191
251
|
backdrop-filter: brightness(1.2);
|
|
192
252
|
}
|
|
193
253
|
`
|
|
194
|
-
|
|
195
|
-
position:relative;
|
|
196
|
-
|
|
197
|
-
|
|
254
|
+
const DropdownWrapper = styled('div')`
|
|
255
|
+
position: relative;
|
|
256
|
+
`
|
|
257
|
+
const inputAttrs = { alignItems: String, hasLabel: Boolean }
|
|
198
258
|
const InputWrapper = styled('div', inputAttrs)`
|
|
199
259
|
position: relative;
|
|
200
260
|
display: grid;
|
|
@@ -203,231 +263,255 @@ const InputWrapper = styled('div', inputAttrs)`
|
|
|
203
263
|
grid-template-columns: ${(props) =>
|
|
204
264
|
props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
|
|
205
265
|
`
|
|
206
|
-
|
|
207
|
-
|
|
266
|
+
export default {
|
|
267
|
+
name: 'RCselect',
|
|
208
268
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
},
|
|
214
|
-
fontSize:{
|
|
215
|
-
required:false,
|
|
216
|
-
default: null
|
|
217
|
-
},
|
|
218
|
-
label:{
|
|
219
|
-
required:false
|
|
220
|
-
},
|
|
221
|
-
infoTextMessage:{
|
|
222
|
-
required:false
|
|
223
|
-
},
|
|
224
|
-
infoTextAlign:{
|
|
225
|
-
required:false
|
|
226
|
-
},
|
|
227
|
-
selectWidth: {
|
|
228
|
-
required: false,
|
|
229
|
-
default: null
|
|
230
|
-
},
|
|
231
|
-
selectHeight: {
|
|
232
|
-
required: false,
|
|
233
|
-
default: null
|
|
234
|
-
},
|
|
235
|
-
optionWidth: {
|
|
236
|
-
required: false,
|
|
237
|
-
default: null
|
|
238
|
-
},
|
|
239
|
-
hoverDropdown: {
|
|
240
|
-
required: false,
|
|
241
|
-
default: false
|
|
242
|
-
},
|
|
243
|
-
alignItems:{
|
|
244
|
-
required: false,
|
|
245
|
-
default: 'horizontal'
|
|
246
|
-
},
|
|
247
|
-
buttonBgColor:{
|
|
248
|
-
required: false,
|
|
249
|
-
},
|
|
250
|
-
buttonFontColor:{
|
|
251
|
-
required: false,
|
|
252
|
-
},
|
|
253
|
-
dropdownBgColor:{
|
|
254
|
-
required: false,
|
|
255
|
-
},
|
|
256
|
-
dropdownFontColor:{
|
|
257
|
-
required: false,
|
|
258
|
-
},
|
|
259
|
-
caretColor:{
|
|
260
|
-
required:false,
|
|
261
|
-
},
|
|
262
|
-
labelFontColor:{
|
|
263
|
-
required:false
|
|
264
|
-
},
|
|
265
|
-
colorMode:{
|
|
266
|
-
required:false,
|
|
267
|
-
default:'light'
|
|
268
|
-
},
|
|
269
|
-
isSearchable:{
|
|
270
|
-
required:false,
|
|
271
|
-
default:true
|
|
272
|
-
},
|
|
273
|
-
hasError: {
|
|
274
|
-
required: false,
|
|
275
|
-
default: false
|
|
276
|
-
},
|
|
277
|
-
disabled: {
|
|
278
|
-
required: false,
|
|
279
|
-
default: false
|
|
280
|
-
},
|
|
281
|
-
isAutoSearch:{
|
|
282
|
-
required:false,
|
|
283
|
-
default:true
|
|
284
|
-
}
|
|
269
|
+
props: {
|
|
270
|
+
value: {
|
|
271
|
+
required: false,
|
|
272
|
+
default: null
|
|
285
273
|
},
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
274
|
+
fontSize: {
|
|
275
|
+
required: false,
|
|
276
|
+
default: null
|
|
277
|
+
},
|
|
278
|
+
label: {
|
|
279
|
+
required: false
|
|
280
|
+
},
|
|
281
|
+
infoTextMessage: {
|
|
282
|
+
required: false
|
|
283
|
+
},
|
|
284
|
+
infoTextAlign: {
|
|
285
|
+
required: false
|
|
286
|
+
},
|
|
287
|
+
selectWidth: {
|
|
288
|
+
required: false,
|
|
289
|
+
default: null
|
|
290
|
+
},
|
|
291
|
+
selectHeight: {
|
|
292
|
+
required: false,
|
|
293
|
+
default: null
|
|
294
|
+
},
|
|
295
|
+
optionWidth: {
|
|
296
|
+
required: false,
|
|
297
|
+
default: null
|
|
298
|
+
},
|
|
299
|
+
hoverDropdown: {
|
|
300
|
+
required: false,
|
|
301
|
+
default: false
|
|
301
302
|
},
|
|
303
|
+
alignItems: {
|
|
304
|
+
required: false,
|
|
305
|
+
default: 'horizontal'
|
|
306
|
+
},
|
|
307
|
+
buttonBgColor: {
|
|
308
|
+
required: false
|
|
309
|
+
},
|
|
310
|
+
buttonFontColor: {
|
|
311
|
+
required: false
|
|
312
|
+
},
|
|
313
|
+
dropdownBgColor: {
|
|
314
|
+
required: false
|
|
315
|
+
},
|
|
316
|
+
dropdownFontColor: {
|
|
317
|
+
required: false
|
|
318
|
+
},
|
|
319
|
+
caretColor: {
|
|
320
|
+
required: false
|
|
321
|
+
},
|
|
322
|
+
labelFontColor: {
|
|
323
|
+
required: false
|
|
324
|
+
},
|
|
325
|
+
colorMode: {
|
|
326
|
+
required: false,
|
|
327
|
+
default: 'light'
|
|
328
|
+
},
|
|
329
|
+
isSearchable: {
|
|
330
|
+
required: false,
|
|
331
|
+
default: true
|
|
332
|
+
},
|
|
333
|
+
hasError: {
|
|
334
|
+
required: false,
|
|
335
|
+
default: false
|
|
336
|
+
},
|
|
337
|
+
disabled: {
|
|
338
|
+
required: false,
|
|
339
|
+
default: false
|
|
340
|
+
},
|
|
341
|
+
isAutoSearch: {
|
|
342
|
+
required: false,
|
|
343
|
+
default: true
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
|
|
347
|
+
components: {
|
|
348
|
+
selectButton,
|
|
349
|
+
SelectButtonWrapper,
|
|
350
|
+
selectDropdown,
|
|
351
|
+
Container,
|
|
352
|
+
InputLabel,
|
|
353
|
+
LabelWrapper,
|
|
354
|
+
InfoText,
|
|
355
|
+
InputWrapper,
|
|
356
|
+
DropdownWrapper,
|
|
357
|
+
icon,
|
|
358
|
+
Caret,
|
|
359
|
+
Selector,
|
|
360
|
+
inputText
|
|
361
|
+
},
|
|
302
362
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
363
|
+
data() {
|
|
364
|
+
return {
|
|
365
|
+
selectedValue: null,
|
|
366
|
+
isDropdownOpen: false,
|
|
367
|
+
isActive: false,
|
|
368
|
+
textSearch: '',
|
|
369
|
+
hoveredIndex: 0,
|
|
370
|
+
isClickOutsideActive: false
|
|
371
|
+
}
|
|
372
|
+
},
|
|
373
|
+
mounted() {
|
|
374
|
+
this.selectedValue = this.value
|
|
375
|
+
document.addEventListener('click', this.clickOutside)
|
|
376
|
+
},
|
|
377
|
+
beforeDestroy() {
|
|
378
|
+
document.removeEventListener('click', this.clickOutside)
|
|
379
|
+
},
|
|
380
|
+
methods: {
|
|
381
|
+
focus() {
|
|
382
|
+
this.isActive = true
|
|
383
|
+
},
|
|
384
|
+
blur() {
|
|
385
|
+
this.isActive = false
|
|
386
|
+
},
|
|
387
|
+
toggleDropdown() {
|
|
388
|
+
this.isDropdownOpen = !this.isDropdownOpen
|
|
389
|
+
},
|
|
390
|
+
toggleCaretDropdown() {
|
|
391
|
+
this.isDropdownOpen = !this.isDropdownOpen
|
|
392
|
+
},
|
|
393
|
+
openDropdown() {
|
|
394
|
+
this.focus()
|
|
395
|
+
this.isDropdownOpen = true
|
|
396
|
+
},
|
|
397
|
+
closeDropdown() {
|
|
398
|
+
this.blur()
|
|
399
|
+
this.isDropdownOpen = false
|
|
400
|
+
},
|
|
401
|
+
optionSelected(e) {
|
|
402
|
+
this.selectedValue = e
|
|
403
|
+
this.closeDropdown()
|
|
404
|
+
this.blur()
|
|
405
|
+
this.$emit('input-change', e)
|
|
406
|
+
},
|
|
407
|
+
optionHovered(e) {
|
|
408
|
+
const optionElement = this.$el.querySelector(`[data-value="${e}"]`)
|
|
409
|
+
if (this.$refs.dropdown) {
|
|
410
|
+
this.hoveredIndex =
|
|
411
|
+
this.$refs.dropdown.$children
|
|
412
|
+
.map((component) => component.$el)
|
|
413
|
+
.indexOf(optionElement) + 1
|
|
311
414
|
}
|
|
312
415
|
},
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
},
|
|
412
|
-
watch:{
|
|
413
|
-
value(val){
|
|
414
|
-
this.selectedValue=val
|
|
415
|
-
},
|
|
416
|
-
isDropdownOpen(val){
|
|
417
|
-
this.$emit('is-dropdown-open', val)
|
|
418
|
-
if(val){
|
|
419
|
-
setTimeout(()=>{
|
|
420
|
-
this.isClickOutsideActive=true
|
|
421
|
-
},10)
|
|
422
|
-
}else{
|
|
423
|
-
setTimeout(()=>{
|
|
424
|
-
this.isClickOutsideActive=false
|
|
425
|
-
},10)
|
|
426
|
-
}
|
|
427
|
-
if(val && this.isSearchable){
|
|
428
|
-
this.$nextTick(()=>{if(this.$refs.searchInput){this.$refs.searchInput.$el.querySelector('input').focus()}})
|
|
429
|
-
}
|
|
430
|
-
}
|
|
416
|
+
mouseEnterHandler() {
|
|
417
|
+
if (this.hoverDropdown) {
|
|
418
|
+
this.focus()
|
|
419
|
+
this.isDropdownOpen = true
|
|
420
|
+
}
|
|
421
|
+
},
|
|
422
|
+
mouseLeaveHandler() {
|
|
423
|
+
if (this.hoverDropdown) {
|
|
424
|
+
this.blur()
|
|
425
|
+
}
|
|
426
|
+
},
|
|
427
|
+
searchChange(value) {
|
|
428
|
+
this.textSearch = value
|
|
429
|
+
this.$emit('search-change', value)
|
|
430
|
+
this.$refs.dropdown.$children
|
|
431
|
+
.map((component) => component.$el)
|
|
432
|
+
.forEach((el) => {
|
|
433
|
+
if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
|
|
434
|
+
el.style.display = 'none'
|
|
435
|
+
} else {
|
|
436
|
+
el.style.display = 'inherit'
|
|
437
|
+
}
|
|
438
|
+
})
|
|
439
|
+
},
|
|
440
|
+
onSelectSlotClick() {
|
|
441
|
+
this.toggleDropdown()
|
|
442
|
+
},
|
|
443
|
+
clickOutside(event) {
|
|
444
|
+
if (!this.isClickOutsideActive) return
|
|
445
|
+
if (
|
|
446
|
+
this.$refs.select.$el == event.target ||
|
|
447
|
+
this.$refs.select.$el.contains(event.target)
|
|
448
|
+
) {
|
|
449
|
+
return
|
|
450
|
+
} else {
|
|
451
|
+
this.closeDropdown()
|
|
452
|
+
}
|
|
453
|
+
},
|
|
454
|
+
onKeyDown(e) {
|
|
455
|
+
if (e.key == 'ArrowDown') {
|
|
456
|
+
this.onArrowPress(1)
|
|
457
|
+
} else if (e.key == 'ArrowUp') {
|
|
458
|
+
this.onArrowPress(-1)
|
|
459
|
+
} else if (e.key == 'Enter') {
|
|
460
|
+
const optionHoveredComponent =
|
|
461
|
+
this.$refs.dropdown.$children[
|
|
462
|
+
(this.hoveredIndex - 1 + this.optionLength) % this.optionLength
|
|
463
|
+
]
|
|
464
|
+
this.optionSelected(optionHoveredComponent.$el.dataset.value)
|
|
465
|
+
}
|
|
466
|
+
},
|
|
467
|
+
onArrowPress(dir) {
|
|
468
|
+
this.hoveredIndex =
|
|
469
|
+
((this.hoveredIndex + dir + this.optionLength - 1) %
|
|
470
|
+
this.optionLength) +
|
|
471
|
+
1
|
|
472
|
+
const optionHoveredComponent =
|
|
473
|
+
this.$refs.dropdown.$children[
|
|
474
|
+
(this.hoveredIndex - 1 + this.optionLength) % this.optionLength
|
|
475
|
+
]
|
|
476
|
+
const topPos = optionHoveredComponent.$el.offsetTop
|
|
477
|
+
this.$refs.dropdown.$el.scrollTop = topPos
|
|
478
|
+
}
|
|
479
|
+
},
|
|
480
|
+
computed: {
|
|
481
|
+
optionLength() {
|
|
482
|
+
if (this.isDropdownOpen) {
|
|
483
|
+
return this.$refs.dropdown.$children.length
|
|
484
|
+
} else {
|
|
485
|
+
return 0
|
|
486
|
+
}
|
|
487
|
+
},
|
|
488
|
+
isSearchBarVisible() {
|
|
489
|
+
return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
|
|
490
|
+
}
|
|
491
|
+
},
|
|
492
|
+
watch: {
|
|
493
|
+
value(val) {
|
|
494
|
+
this.selectedValue = val
|
|
495
|
+
},
|
|
496
|
+
isDropdownOpen(val) {
|
|
497
|
+
this.$emit('is-dropdown-open', val)
|
|
498
|
+
if (val) {
|
|
499
|
+
setTimeout(() => {
|
|
500
|
+
this.isClickOutsideActive = true
|
|
501
|
+
}, 10)
|
|
502
|
+
} else {
|
|
503
|
+
setTimeout(() => {
|
|
504
|
+
this.isClickOutsideActive = false
|
|
505
|
+
}, 10)
|
|
506
|
+
}
|
|
507
|
+
if (val && this.isSearchable) {
|
|
508
|
+
this.$nextTick(() => {
|
|
509
|
+
if (this.$refs.searchInput) {
|
|
510
|
+
this.$refs.searchInput.$el.querySelector('input').focus()
|
|
511
|
+
}
|
|
512
|
+
})
|
|
513
|
+
}
|
|
431
514
|
}
|
|
432
515
|
}
|
|
433
|
-
|
|
516
|
+
}
|
|
517
|
+
</script>
|