funda-ui 1.1.182 → 1.1.185

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 (15) hide show
  1. package/CascadingSelect/index.css +69 -65
  2. package/CascadingSelect/index.js +29 -20
  3. package/CascadingSelectE2E/index.css +69 -65
  4. package/CascadingSelectE2E/index.js +30 -21
  5. package/lib/cjs/CascadingSelect/index.js +29 -20
  6. package/lib/cjs/CascadingSelectE2E/index.js +30 -21
  7. package/lib/css/CascadingSelect/index.css +69 -65
  8. package/lib/css/CascadingSelectE2E/index.css +69 -65
  9. package/lib/esm/CascadingSelect/Group.tsx +2 -2
  10. package/lib/esm/CascadingSelect/index.scss +50 -46
  11. package/lib/esm/CascadingSelect/index.tsx +33 -20
  12. package/lib/esm/CascadingSelectE2E/Group.tsx +2 -2
  13. package/lib/esm/CascadingSelectE2E/index.scss +50 -46
  14. package/lib/esm/CascadingSelectE2E/index.tsx +34 -21
  15. package/package.json +1 -1
package/CascadingSelect/index.css CHANGED
@@ -1,48 +1,49 @@
1
1
  /* ======================================================
2
2
  <!-- Cascading Select -->
3
3
  /* ====================================================== */
4
- .cascading-select__wrapper {
5
- --cascading-select-opt-header-border-color: rgba(1, 1, 1, .2);
6
- --cascading-select-opt-hover-bg: #f7f7f7;
7
- --cascading-select-opt-active-bg: #eeeeee;
8
- --cascading-select-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
9
- --cascading-select-items-bg: #fff;
10
- --cascading-select-items-color: inherit;
11
- --cascading-select-items-border-color: rgba(0, 0, 0, .1);
12
- --cascading-select-items-li-border-color: #eee;
13
- --cascading-select-arrow-fill: #a5a5a5;
14
- --cascading-select-result-arrow-fill: #a5a5a5;
15
- --cascading-select-result-font-size: 1rem;
16
- --cascading-select-result-padding-x: 0.75rem;
17
- --cascading-select-result-padding-y: 0.375rem;
18
- --cascading-select-opt-font-size: 0.875rem;
19
- --cascading-select-opt-padding-x: .4rem;
20
- --cascading-select-opt-padding-y: .3rem;
21
- }
22
- .cascading-select__wrapper .cascading-select__result {
4
+ .c-select__wrapper {
5
+ --c-select-opt-header-border-color: rgba(1, 1, 1, .2);
6
+ --c-select-opt-header-text-color: #999;
7
+ --c-select-opt-hover-bg: #f7f7f7;
8
+ --c-select-opt-active-bg: #eeeeee;
9
+ --c-select-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
10
+ --c-select-items-bg: #fff;
11
+ --c-select-items-color: inherit;
12
+ --c-select-items-border-color: rgba(0, 0, 0, .1);
13
+ --c-select-items-li-border-color: #eee;
14
+ --c-select-arrow-fill: #a5a5a5;
15
+ --c-select-result-arrow-fill: #a5a5a5;
16
+ --c-select-result-font-size: 1rem;
17
+ --c-select-result-padding-x: 0.75rem;
18
+ --c-select-result-padding-y: 0.375rem;
19
+ --c-select-opt-font-size: 0.875rem;
20
+ --c-select-opt-padding-x: .4rem;
21
+ --c-select-opt-padding-y: .3rem;
22
+ }
23
+ .c-select__wrapper .c-select__result {
23
24
  position: absolute;
24
25
  left: auto;
25
26
  z-index: 1;
26
27
  top: 0;
27
- padding: var(--cascading-select-result-padding-y) var(--cascading-select-result-padding-x);
28
- font-size: var(--cascading-select-result-font-size);
28
+ padding: var(--c-select-result-padding-y) var(--c-select-result-padding-x);
29
+ font-size: var(--c-select-result-font-size);
29
30
  font-weight: 400;
30
31
  line-height: 1.5;
31
32
  color: inherit;
32
33
  }
33
- .cascading-select__wrapper .cascading-select__result div {
34
+ .c-select__wrapper .c-select__result div {
34
35
  display: inline;
35
36
  }
36
- .cascading-select__wrapper .cascading-select__result span {
37
+ .c-select__wrapper .c-select__result span {
37
38
  padding: 3px;
38
39
  }
39
- .cascading-select__wrapper .cascading-select__result svg {
40
+ .c-select__wrapper .c-select__result svg {
40
41
  margin: 0 0.3rem;
41
42
  }
42
- .cascading-select__wrapper .cascading-select__result svg path {
43
- fill: var(--cascading-select-result-arrow-fill);
43
+ .c-select__wrapper .c-select__result svg path {
44
+ fill: var(--c-select-result-arrow-fill);
44
45
  }
45
- .cascading-select__wrapper .cascading-select__closemask {
46
+ .c-select__wrapper .c-select__closemask {
46
47
  position: absolute;
47
48
  z-index: 1;
48
49
  top: 0;
@@ -52,48 +53,48 @@
52
53
  background: rgba(0, 0, 0, 0);
53
54
  user-select: none;
54
55
  }
55
- .cascading-select__wrapper .cascading-select__val {
56
+ .c-select__wrapper .c-select__val {
56
57
  position: relative;
57
58
  }
58
- .cascading-select__wrapper .cascading-select__val input {
59
+ .c-select__wrapper .c-select__val input {
59
60
  cursor: pointer;
60
61
  color: transparent !important;
61
62
  }
62
- .cascading-select__wrapper .cascading-select__val input:focus {
63
+ .c-select__wrapper .c-select__val input:focus {
63
64
  color: transparent !important;
64
65
  }
65
- .cascading-select__wrapper .cascading-select__val .arrow {
66
+ .c-select__wrapper .c-select__val .arrow {
66
67
  position: absolute;
67
68
  top: 0;
68
69
  margin-top: 0.3rem;
69
70
  right: 0.5rem;
70
71
  }
71
- .cascading-select__wrapper .cascading-select__val .arrow svg .arrow-fill-g {
72
- fill: var(--cascading-select-arrow-fill);
72
+ .c-select__wrapper .c-select__val .arrow svg .arrow-fill-g {
73
+ fill: var(--c-select-arrow-fill);
73
74
  }
74
- .cascading-select__wrapper .cascading-select {
75
+ .c-select__wrapper .c-select {
75
76
  display: flex;
76
77
  align-items: center;
77
78
  position: relative;
78
79
  z-index: 1;
79
80
  }
80
- .cascading-select__wrapper .cascading-select ul,
81
- .cascading-select__wrapper .cascading-select li {
81
+ .c-select__wrapper .c-select ul,
82
+ .c-select__wrapper .c-select li {
82
83
  list-style: none;
83
84
  margin: 0;
84
85
  padding: 0;
85
86
  }
86
- .cascading-select__wrapper .cascading-select .cascading-select__trigger {
87
+ .c-select__wrapper .c-select .c-select__trigger {
87
88
  position: relative;
88
89
  z-index: 0;
89
90
  }
90
- .cascading-select__wrapper .cascading-select .cascading-select__items {
91
- box-shadow: var(--cascading-select-items-box-shadow);
91
+ .c-select__wrapper .c-select .c-select__items {
92
+ box-shadow: var(--c-select-items-box-shadow);
92
93
  position: absolute;
93
94
  left: auto;
94
95
  max-height: 350px;
95
- border: 1px solid var(--cascading-select-items-border-color);
96
- background: var(--cascading-select-items-bg);
96
+ border: 1px solid var(--c-select-items-border-color);
97
+ background: var(--c-select-items-bg);
97
98
  padding: 10px;
98
99
  overflow-y: auto;
99
100
  box-sizing: border-box;
@@ -102,58 +103,61 @@
102
103
  border-radius: 5px;
103
104
  width: max-content;
104
105
  /* required -> the content will not wrap at all even if it causes overflows*/
105
- color: var(--cascading-select-items-color);
106
+ color: var(--c-select-items-color);
106
107
  /* each item */
107
108
  }
108
- .cascading-select__wrapper .cascading-select .cascading-select__items.bottom-0 {
109
+ .c-select__wrapper .c-select .c-select__items.bottom-0 {
109
110
  top: auto;
110
111
  }
111
- .cascading-select__wrapper .cascading-select .cascading-select__items .cascading-select__close svg {
112
+ .c-select__wrapper .c-select .c-select__items .c-select__close svg {
112
113
  opacity: 0.4;
113
114
  }
114
- .cascading-select__wrapper .cascading-select .cascading-select__items .cascading-select__close:hover svg {
115
+ .c-select__wrapper .c-select .c-select__items .c-select__close:hover svg {
115
116
  transition: 0.2s ease-out;
116
117
  opacity: 0.7;
117
118
  }
118
- .cascading-select__wrapper .cascading-select .cascading-select__items ul {
119
+ .c-select__wrapper .c-select .c-select__items ul {
119
120
  transition: 0.2s ease-out;
120
121
  min-width: 8px;
121
122
  min-height: 9px;
122
123
  }
123
- .cascading-select__wrapper .cascading-select .cascading-select__items ul > li {
124
+ .c-select__wrapper .c-select .c-select__items ul > li {
124
125
  position: relative;
125
126
  cursor: pointer;
126
127
  float: left;
127
128
  padding: 0 10px;
128
129
  margin-right: 15px;
129
- border-right: 1px dotted var(--cascading-select-items-li-border-color);
130
+ border-right: 1px dotted var(--c-select-items-li-border-color);
130
131
  transition: 0.2s ease-out;
131
132
  }
132
- .cascading-select__wrapper .cascading-select .cascading-select__items ul > li:last-child {
133
+ .c-select__wrapper .c-select .c-select__items ul > li:last-child {
133
134
  margin-right: 0;
134
135
  border-right: none;
135
136
  }
136
- .cascading-select__wrapper .cascading-select .cascading-select__opt {
137
- padding: var(--cascading-select-opt-padding-y) var(--cascading-select-opt-padding-x);
138
- font-size: var(--cascading-select-opt-font-size);
137
+ .c-select__wrapper .c-select .c-select__opt {
138
+ padding: var(--c-select-opt-padding-y) var(--c-select-opt-padding-x);
139
+ font-size: var(--c-select-opt-font-size);
139
140
  border-radius: 2px;
140
141
  }
141
- .cascading-select__wrapper .cascading-select .cascading-select__opt:hover {
142
- background: var(--cascading-select-opt-hover-bg);
142
+ .c-select__wrapper .c-select .c-select__opt:hover {
143
+ background: var(--c-select-opt-hover-bg);
143
144
  }
144
- .cascading-select__wrapper .cascading-select .cascading-select__opt.active {
145
- background: var(--cascading-select-opt-active-bg);
145
+ .c-select__wrapper .c-select .c-select__opt.active {
146
+ background: var(--c-select-opt-active-bg);
146
147
  }
147
- .cascading-select__wrapper .cascading-select .cascading-select__opt-header {
148
- padding: var(--cascading-select-opt-padding-y) var(--cascading-select-opt-padding-x);
149
- font-size: var(--cascading-select-opt-font-size);
150
- opacity: 0.5;
151
- border-bottom: 1px dotted var(--cascading-select-opt-header-border-color);
148
+ .c-select__wrapper .c-select .c-select__opt-header {
149
+ padding: var(--c-select-opt-padding-y) var(--c-select-opt-padding-x);
150
+ font-size: var(--c-select-opt-font-size);
151
+ border-bottom: 1px dotted var(--c-select-opt-header-border-color);
152
152
  border-radius: 2px;
153
+ position: sticky;
154
+ top: calc(var(--c-select-opt-font-size) * -1);
155
+ background: var(--c-select-items-bg);
156
+ color: var(--c-select-opt-header-text-color);
153
157
  }
154
- .cascading-select__wrapper .cascading-select .cascading-select__opt-header:hover {
155
- background: var(--cascading-select-opt-hover-bg);
158
+ .c-select__wrapper .c-select .c-select__opt-header:hover {
159
+ background: var(--c-select-opt-hover-bg);
156
160
  }
157
- .cascading-select__wrapper .cascading-select .cascading-select__opt-header.active {
158
- background: var(--cascading-select-opt-active-bg);
161
+ .c-select__wrapper .c-select .c-select__opt-header.active {
162
+ background: var(--c-select-opt-active-bg);
159
163
  }
package/CascadingSelect/index.js CHANGED
@@ -296,7 +296,7 @@ function Group(props) {
296
296
  key: index,
297
297
  "data-index": index,
298
298
  "data-value": item.id,
299
- className: "cascading-select__opt ".concat(item.current ? 'active' : ''),
299
+ className: "c-select__opt ".concat(item.current ? 'active' : ''),
300
300
  onClick: function onClick(e) {
301
301
  return selectEv(e, item, index);
302
302
  },
@@ -312,7 +312,7 @@ function Group(props) {
312
312
  onClick: function onClick(e) {
313
313
  return selectEv(e, item, index);
314
314
  },
315
- className: "cascading-select__opt-header ".concat(item.current ? 'active' : ''),
315
+ className: "c-select__opt-header ".concat(item.current ? 'active' : ''),
316
316
  dangerouslySetInnerHTML: {
317
317
  __html: columnTitle[level]
318
318
  }
@@ -446,21 +446,30 @@ var CascadingSelect = function CascadingSelect(props) {
446
446
  var PLACEMENT_BOTTOMEND = 'bottom-0';
447
447
  var PLACEMENT_RIGHT = 'end-0';
448
448
  var PLACEMENT_LEFT = 'start-0';
449
-
450
- //restore position
451
- if (restorePos) {
452
- if (isInViewport(el)) {
453
- el.classList.remove(PLACEMENT_BOTTOMEND);
454
- el.style.removeProperty('bottom');
455
- }
456
- return;
449
+ if (valRef.current === null) return;
450
+
451
+ // STEP 1:
452
+ //-----------
453
+ // Detect position
454
+ var targetPos = '';
455
+ var _triggerBox = valRef.current.getBoundingClientRect();
456
+ if (window.innerHeight - _triggerBox.top > 100) {
457
+ targetPos = 'bottom';
458
+ } else {
459
+ targetPos = 'top';
457
460
  }
458
461
 
462
+ // STEP 2:
463
+ //-----------
459
464
  // Adjust position
460
- if (!isInViewport(el)) {
465
+ if (targetPos === 'top') {
461
466
  el.classList.add(PLACEMENT_BOTTOMEND);
462
467
  el.style.setProperty('bottom', -1 + 'px', "important");
463
468
  }
469
+ if (targetPos === 'bottom') {
470
+ el.classList.remove(PLACEMENT_BOTTOMEND);
471
+ el.style.removeProperty('bottom');
472
+ }
464
473
  }
465
474
  function fetchData(_x2) {
466
475
  return _fetchData.apply(this, arguments);
@@ -547,7 +556,7 @@ var CascadingSelect = function CascadingSelect(props) {
547
556
  function handleClickOutside(event) {
548
557
  // svg element
549
558
  if (_typeof(event.target.className) === 'object') return;
550
- if (event.target.className != '' && event.target.className.indexOf('cascading-select__wrapper') < 0 && event.target.className.indexOf('form-control') < 0 && event.target.className.indexOf('cascading-select__trigger') < 0 && event.target.className.indexOf('cascading-select__items') < 0 && event.target.className.indexOf('cascading-select__opt') < 0) {
559
+ if (event.target.className != '' && event.target.className.indexOf('c-select__wrapper') < 0 && event.target.className.indexOf('form-control') < 0 && event.target.className.indexOf('c-select__trigger') < 0 && event.target.className.indexOf('c-select__items') < 0 && event.target.className.indexOf('c-select__opt') < 0) {
551
560
  setIsShow(false);
552
561
  }
553
562
  }
@@ -972,7 +981,7 @@ var CascadingSelect = function CascadingSelect(props) {
972
981
  };
973
982
  }, [value]);
974
983
  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
975
- className: wrapperClassName || wrapperClassName === '' ? "cascading-select__wrapper ".concat(wrapperClassName) : "cascading-select__wrapper mb-3 position-relative",
984
+ className: wrapperClassName || wrapperClassName === '' ? "c-select__wrapper ".concat(wrapperClassName) : "c-select__wrapper mb-3 position-relative",
976
985
  ref: rootRef
977
986
  }, label ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("label", {
978
987
  htmlFor: idRes,
@@ -981,16 +990,16 @@ var CascadingSelect = function CascadingSelect(props) {
981
990
  __html: "".concat(label)
982
991
  }
983
992
  })) : null, triggerContent ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
984
- className: triggerClassName ? "cascading-select__trigger ".concat(triggerClassName) : "cascading-select__trigger d-inline w-auto",
993
+ className: triggerClassName ? "c-select__trigger ".concat(triggerClassName) : "c-select__trigger d-inline w-auto",
985
994
  onClick: handleDisplayOptions
986
995
  }, triggerContent)) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
987
- className: "cascading-select",
996
+ className: "c-select",
988
997
  style: {
989
998
  zIndex: depth ? depth : 100
990
999
  }
991
1000
  }, isShow && !hasErr ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
992
1001
  ref: listRef,
993
- className: "cascading-select__items shadow"
1002
+ className: "c-select__items shadow"
994
1003
  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("ul", null, showCloseBtn ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
995
1004
  href: "#",
996
1005
  tabIndex: -1,
@@ -998,7 +1007,7 @@ var CascadingSelect = function CascadingSelect(props) {
998
1007
  e.preventDefault();
999
1008
  setIsShow(false);
1000
1009
  },
1001
- className: "cascading-select__close position-absolute top-0 end-0 mt-0 mx-1"
1010
+ className: "c-select__close position-absolute top-0 end-0 mt-0 mx-1"
1002
1011
  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
1003
1012
  width: "10px",
1004
1013
  height: "10px",
@@ -1022,12 +1031,12 @@ var CascadingSelect = function CascadingSelect(props) {
1022
1031
  return null;
1023
1032
  }
1024
1033
  }))) : null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
1025
- className: "cascading-select__val",
1034
+ className: "c-select__val",
1026
1035
  onClick: handleDisplayOptions
1027
1036
  }, loading ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
1028
1037
  className: "position-absolute top-0 start-0 mt-2 mx-2"
1029
1038
  }, loader)) : null, displayResult ? selectedData.labels && selectedData.labels.length > 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
1030
- className: "cascading-select__result"
1039
+ className: "c-select__result"
1031
1040
  }, displayInfo()) : null : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
1032
1041
  ref: valRef,
1033
1042
  id: idRes,
@@ -1044,7 +1053,7 @@ var CascadingSelect = function CascadingSelect(props) {
1044
1053
  tabIndex: tabIndex || 0,
1045
1054
  readOnly: true
1046
1055
  }, attributes)), isShow ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
1047
- className: "cascading-select__closemask",
1056
+ className: "c-select__closemask",
1048
1057
  onClick: function onClick(e) {
1049
1058
  e.preventDefault();
1050
1059
  setIsShow(false);
package/CascadingSelectE2E/index.css CHANGED
@@ -1,48 +1,49 @@
1
1
  /* ======================================================
2
2
  <!-- Cascading Select End-to-end -->
3
3
  /* ====================================================== */
4
- .cascading-select-e2e__wrapper {
5
- --cascading-select-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
6
- --cascading-select-e2e-opt-hover-bg: #f7f7f7;
7
- --cascading-select-e2e-opt-active-bg: #eeeeee;
8
- --cascading-select-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
9
- --cascading-select-e2e-items-bg: #fff;
10
- --cascading-select-e2e-items-color: inherit;
11
- --cascading-select-e2e-items-border-color: rgba(0, 0, 0, .1);
12
- --cascading-select-e2e-items-li-border-color: #eee;
13
- --cascading-select-e2e-arrow-fill: #a5a5a5;
14
- --cascading-select-e2e-result-arrow-fill: #a5a5a5;
15
- --cascading-select-e2e-result-font-size: 1rem;
16
- --cascading-select-e2e-result-padding-x: 0.75rem;
17
- --cascading-select-e2e-result-padding-y: 0.375rem;
18
- --cascading-select-e2e-opt-font-size: 0.875rem;
19
- --cascading-select-e2e-opt-padding-x: .4rem;
20
- --cascading-select-e2e-opt-padding-y: .3rem;
21
- }
22
- .cascading-select-e2e__wrapper .cascading-select-e2e__result {
4
+ .c-select-e2e__wrapper {
5
+ --c-select-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
6
+ --c-select-e2e-opt-header-text-color: #999;
7
+ --c-select-e2e-opt-hover-bg: #f7f7f7;
8
+ --c-select-e2e-opt-active-bg: #eeeeee;
9
+ --c-select-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
10
+ --c-select-e2e-items-bg: #fff;
11
+ --c-select-e2e-items-color: inherit;
12
+ --c-select-e2e-items-border-color: rgba(0, 0, 0, .1);
13
+ --c-select-e2e-items-li-border-color: #eee;
14
+ --c-select-e2e-arrow-fill: #a5a5a5;
15
+ --c-select-e2e-result-arrow-fill: #a5a5a5;
16
+ --c-select-e2e-result-font-size: 1rem;
17
+ --c-select-e2e-result-padding-x: 0.75rem;
18
+ --c-select-e2e-result-padding-y: 0.375rem;
19
+ --c-select-e2e-opt-font-size: 0.875rem;
20
+ --c-select-e2e-opt-padding-x: .4rem;
21
+ --c-select-e2e-opt-padding-y: .3rem;
22
+ }
23
+ .c-select-e2e__wrapper .c-select-e2e__result {
23
24
  position: absolute;
24
25
  left: auto;
25
26
  z-index: 1;
26
27
  top: 0;
27
- padding: var(--cascading-select-e2e-result-padding-y) var(--cascading-select-e2e-result-padding-x);
28
- font-size: var(--cascading-select-e2e-result-font-size);
28
+ padding: var(--c-select-e2e-result-padding-y) var(--c-select-e2e-result-padding-x);
29
+ font-size: var(--c-select-e2e-result-font-size);
29
30
  font-weight: 400;
30
31
  line-height: 1.5;
31
32
  color: inherit;
32
33
  }
33
- .cascading-select-e2e__wrapper .cascading-select-e2e__result div {
34
+ .c-select-e2e__wrapper .c-select-e2e__result div {
34
35
  display: inline;
35
36
  }
36
- .cascading-select-e2e__wrapper .cascading-select-e2e__result span {
37
+ .c-select-e2e__wrapper .c-select-e2e__result span {
37
38
  padding: 3px;
38
39
  }
39
- .cascading-select-e2e__wrapper .cascading-select-e2e__result svg {
40
+ .c-select-e2e__wrapper .c-select-e2e__result svg {
40
41
  margin: 0 0.3rem;
41
42
  }
42
- .cascading-select-e2e__wrapper .cascading-select-e2e__result svg path {
43
- fill: var(--cascading-select-e2e-result-arrow-fill);
43
+ .c-select-e2e__wrapper .c-select-e2e__result svg path {
44
+ fill: var(--c-select-e2e-result-arrow-fill);
44
45
  }
45
- .cascading-select-e2e__wrapper .cascading-select-e2e__closemask {
46
+ .c-select-e2e__wrapper .c-select-e2e__closemask {
46
47
  position: absolute;
47
48
  z-index: 1;
48
49
  top: 0;
@@ -52,48 +53,48 @@
52
53
  background: rgba(0, 0, 0, 0);
53
54
  user-select: none;
54
55
  }
55
- .cascading-select-e2e__wrapper .cascading-select-e2e__val {
56
+ .c-select-e2e__wrapper .c-select-e2e__val {
56
57
  position: relative;
57
58
  }
58
- .cascading-select-e2e__wrapper .cascading-select-e2e__val input {
59
+ .c-select-e2e__wrapper .c-select-e2e__val input {
59
60
  cursor: pointer;
60
61
  color: transparent !important;
61
62
  }
62
- .cascading-select-e2e__wrapper .cascading-select-e2e__val input:focus {
63
+ .c-select-e2e__wrapper .c-select-e2e__val input:focus {
63
64
  color: transparent !important;
64
65
  }
65
- .cascading-select-e2e__wrapper .cascading-select-e2e__val .arrow {
66
+ .c-select-e2e__wrapper .c-select-e2e__val .arrow {
66
67
  position: absolute;
67
68
  top: 0;
68
69
  margin-top: 0.3rem;
69
70
  right: 0.5rem;
70
71
  }
71
- .cascading-select-e2e__wrapper .cascading-select-e2e__val .arrow svg .arrow-fill-g {
72
- fill: var(--cascading-select-e2e-arrow-fill);
72
+ .c-select-e2e__wrapper .c-select-e2e__val .arrow svg .arrow-fill-g {
73
+ fill: var(--c-select-e2e-arrow-fill);
73
74
  }
74
- .cascading-select-e2e__wrapper .cascading-select-e2e {
75
+ .c-select-e2e__wrapper .c-select-e2e {
75
76
  display: flex;
76
77
  align-items: center;
77
78
  position: relative;
78
79
  z-index: 1;
79
80
  }
80
- .cascading-select-e2e__wrapper .cascading-select-e2e ul,
81
- .cascading-select-e2e__wrapper .cascading-select-e2e li {
81
+ .c-select-e2e__wrapper .c-select-e2e ul,
82
+ .c-select-e2e__wrapper .c-select-e2e li {
82
83
  list-style: none;
83
84
  margin: 0;
84
85
  padding: 0;
85
86
  }
86
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__trigger {
87
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__trigger {
87
88
  position: relative;
88
89
  z-index: 0;
89
90
  }
90
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items {
91
- box-shadow: var(--cascading-select-e2e-items-box-shadow);
91
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__items {
92
+ box-shadow: var(--c-select-e2e-items-box-shadow);
92
93
  position: absolute;
93
94
  left: auto;
94
95
  max-height: 350px;
95
- border: 1px solid var(--cascading-select-e2e-items-border-color);
96
- background: var(--cascading-select-e2e-items-bg);
96
+ border: 1px solid var(--c-select-e2e-items-border-color);
97
+ background: var(--c-select-e2e-items-bg);
97
98
  padding: 10px;
98
99
  overflow-y: auto;
99
100
  box-sizing: border-box;
@@ -102,58 +103,61 @@
102
103
  border-radius: 5px;
103
104
  width: max-content;
104
105
  /* required -> the content will not wrap at all even if it causes overflows*/
105
- color: var(--cascading-select-e2e-items-color);
106
+ color: var(--c-select-e2e-items-color);
106
107
  /* each item */
107
108
  }
108
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items.bottom-0 {
109
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__items.bottom-0 {
109
110
  top: auto;
110
111
  }
111
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items .cascading-select-e2e__close svg {
112
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__items .c-select-e2e__close svg {
112
113
  opacity: 0.4;
113
114
  }
114
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items .cascading-select-e2e__close:hover svg {
115
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__items .c-select-e2e__close:hover svg {
115
116
  transition: 0.2s ease-out;
116
117
  opacity: 0.7;
117
118
  }
118
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items ul {
119
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__items ul {
119
120
  transition: 0.2s ease-out;
120
121
  min-width: 8px;
121
122
  min-height: 9px;
122
123
  }
123
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items ul > li {
124
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__items ul > li {
124
125
  position: relative;
125
126
  cursor: pointer;
126
127
  float: left;
127
128
  padding: 0 10px;
128
129
  margin-right: 15px;
129
- border-right: 1px dotted var(--cascading-select-e2e-items-li-border-color);
130
+ border-right: 1px dotted var(--c-select-e2e-items-li-border-color);
130
131
  transition: 0.2s ease-out;
131
132
  }
132
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__items ul > li:last-child {
133
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__items ul > li:last-child {
133
134
  margin-right: 0;
134
135
  border-right: none;
135
136
  }
136
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt {
137
- padding: var(--cascading-select-e2e-opt-padding-y) var(--cascading-select-e2e-opt-padding-x);
138
- font-size: var(--cascading-select-e2e-opt-font-size);
137
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__opt {
138
+ padding: var(--c-select-e2e-opt-padding-y) var(--c-select-e2e-opt-padding-x);
139
+ font-size: var(--c-select-e2e-opt-font-size);
139
140
  border-radius: 2px;
140
141
  }
141
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt:hover {
142
- background: var(--cascading-select-e2e-opt-hover-bg);
142
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__opt:hover {
143
+ background: var(--c-select-e2e-opt-hover-bg);
143
144
  }
144
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt.active {
145
- background: var(--cascading-select-e2e-opt-active-bg);
145
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__opt.active {
146
+ background: var(--c-select-e2e-opt-active-bg);
146
147
  }
147
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt-header {
148
- padding: var(--cascading-select-e2e-opt-padding-y) var(--cascading-select-e2e-opt-padding-x);
149
- font-size: var(--cascading-select-e2e-opt-font-size);
150
- opacity: 0.5;
151
- border-bottom: 1px dotted var(--cascading-select-e2e-opt-header-border-color);
148
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__opt-header {
149
+ padding: var(--c-select-e2e-opt-padding-y) var(--c-select-e2e-opt-padding-x);
150
+ font-size: var(--c-select-e2e-opt-font-size);
151
+ border-bottom: 1px dotted var(--c-select-e2e-opt-header-border-color);
152
152
  border-radius: 2px;
153
+ position: sticky;
154
+ top: calc(var(--c-select-e2e-opt-font-size) * -1);
155
+ background: var(--c-select-e2e-items-bg);
156
+ color: var(--c-select-e2e-opt-header-text-color);
153
157
  }
154
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt-header:hover {
155
- background: var(--cascading-select-e2e-opt-hover-bg);
158
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__opt-header:hover {
159
+ background: var(--c-select-e2e-opt-hover-bg);
156
160
  }
157
- .cascading-select-e2e__wrapper .cascading-select-e2e .cascading-select-e2e__opt-header.active {
158
- background: var(--cascading-select-e2e-opt-active-bg);
161
+ .c-select-e2e__wrapper .c-select-e2e .c-select-e2e__opt-header.active {
162
+ background: var(--c-select-e2e-opt-active-bg);
159
163
  }