componenteshospitais 1.0.8 → 1.1.0

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 (5) hide show
  1. package/dist/cjs/index.js +3 -3
  2. package/dist/esm/index.js +3 -3
  3. package/package.json +1 -1
  4. package/src/components/Busca.tsx +2 -1
  5. package/src/styles/busca.module.css +35 -12
package/dist/cjs/index.js CHANGED
@@ -139,12 +139,12 @@ var SelectField = function (_a) {
139
139
  options.map(function (option) { return (React.createElement("option", { key: option.value, value: option.value }, option.description)); }))));
140
140
  };
141
141
 
142
- var css_248z = ".busca-module_search__xf4qJ{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:1rem}.busca-module_searchContainer__jhcnm{height:20px;margin-top:-4px;max-width:600px}.busca-module_searchIcon__FPl1-{height:20px;margin-left:.5rem;margin-top:1.2rem;position:absolute;transform:translateY(-50%);width:20px}.busca-module_searchInput__GjG8B{background-color:var(--lightGray);border:none;border-radius:50px;color:var(--gray);height:100%;outline:none;padding:10px 15px 10px 35px;width:35rem;z-index:1001}.busca-module_suggestionsWrapper__vbmxG{background:#fff;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:0 4px 6px rgba(0,0,0,.1);color:var(--blue);margin-left:1rem;position:absolute;top:100%;width:600px;z-index:1000}.busca-module_suggestions__pYBV1{border-bottom-left-radius:20px;border-bottom-right-radius:20px;max-height:500px;overflow-y:auto}.busca-module_suggestion__V-d8T{cursor:pointer;padding:10px}.busca-module_suggestion__V-d8T:hover{background-color:var(--blue);color:#fff}.busca-module_suggestion__V-d8T:not(:first-child){border-top:1px solid var(--lightGray);padding-top:8px}";
142
+ var css_248z = ".busca-module_search__xf4qJ{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:2rem 0;width:100%}.busca-module_searchContainer__jhcnm{align-items:center;display:flex;max-width:600px;position:relative;width:100%}.busca-module_searchIcon__FPl1-{height:20px;left:10px;position:absolute;width:20px}.busca-module_searchInput__GjG8B{background-color:var(--lightGray);border:none;border-radius:50px;box-sizing:border-box;color:var(--gray);height:100%;outline:none;padding:10px 15px 10px 35px;width:100%;z-index:1001}.busca-module_suggestionsWrapper__vbmxG{background:#fff;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:0 4px 6px rgba(0,0,0,.1);color:var(--blue);margin-top:1.8rem;position:absolute;top:40px;width:45%;z-index:1000}.busca-module_suggestions__pYBV1{border-bottom-left-radius:20px;border-bottom-right-radius:20px;max-height:500px;overflow-y:auto}.busca-module_suggestion__V-d8T{cursor:pointer;padding:10px}.busca-module_suggestion__V-d8T:hover{background-color:var(--blue);color:#fff}.busca-module_suggestion__V-d8T:not(:first-child){border-top:1px solid var(--lightGray);padding-top:8px}@media (max-width:768px){.busca-module_searchInput__GjG8B{padding:10px 15px 10px 30px}.busca-module_suggestionsWrapper__vbmxG{top:35px}}@media (max-width:500px){.busca-module_searchContainer__jhcnm{width:90%}.busca-module_searchInput__GjG8B{padding:10px;width:100%}}";
143
143
  var styles = {"search":"busca-module_search__xf4qJ","searchContainer":"busca-module_searchContainer__jhcnm","searchIcon":"busca-module_searchIcon__FPl1-","searchInput":"busca-module_searchInput__GjG8B","suggestionsWrapper":"busca-module_suggestionsWrapper__vbmxG","suggestions":"busca-module_suggestions__pYBV1","suggestion":"busca-module_suggestion__V-d8T"};
144
144
  styleInject(css_248z);
145
145
 
146
146
  var Busca = function (_a) {
147
- var allItems = _a.allItems, _b = _a.placeholder, placeholder = _b === void 0 ? "Pesquisar..." : _b, onItemClick = _a.onItemClick;
147
+ var allItems = _a.allItems; _a.placeholder; var onItemClick = _a.onItemClick;
148
148
  var _c = React.useState(''), searchValue = _c[0], setSearchValue = _c[1];
149
149
  var _d = React.useState(allItems), filteredItems = _d[0], setFilteredItems = _d[1];
150
150
  var _e = React.useState(false), isInputFocused = _e[0], setIsInputFocused = _e[1];
@@ -169,7 +169,7 @@ var Busca = function (_a) {
169
169
  };
170
170
  return (React.createElement("div", { className: styles.search },
171
171
  React.createElement("div", { className: styles.searchContainer },
172
- React.createElement("input", { type: "text", className: styles.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, onFocus: handleInputFocus, onBlur: handleInputBlur })),
172
+ React.createElement("input", { type: "text", className: styles.searchInput, placeholder: "Pesquisar...", value: searchValue, onChange: handleSearchChange, onFocus: handleInputFocus, onBlur: handleInputBlur })),
173
173
  isInputFocused && filteredItems.length > 0 && (React.createElement("div", { className: styles.suggestionsWrapper },
174
174
  React.createElement("div", { className: styles.suggestions }, filteredItems.map(function (item, index) { return (React.createElement("div", { key: index, className: styles.suggestion, onClick: function () { return onItemClick(item.path); } }, item.id)); }))))));
175
175
  };
package/dist/esm/index.js CHANGED
@@ -137,12 +137,12 @@ var SelectField = function (_a) {
137
137
  options.map(function (option) { return (React.createElement("option", { key: option.value, value: option.value }, option.description)); }))));
138
138
  };
139
139
 
140
- var css_248z = ".busca-module_search__xf4qJ{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:1rem}.busca-module_searchContainer__jhcnm{height:20px;margin-top:-4px;max-width:600px}.busca-module_searchIcon__FPl1-{height:20px;margin-left:.5rem;margin-top:1.2rem;position:absolute;transform:translateY(-50%);width:20px}.busca-module_searchInput__GjG8B{background-color:var(--lightGray);border:none;border-radius:50px;color:var(--gray);height:100%;outline:none;padding:10px 15px 10px 35px;width:35rem;z-index:1001}.busca-module_suggestionsWrapper__vbmxG{background:#fff;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:0 4px 6px rgba(0,0,0,.1);color:var(--blue);margin-left:1rem;position:absolute;top:100%;width:600px;z-index:1000}.busca-module_suggestions__pYBV1{border-bottom-left-radius:20px;border-bottom-right-radius:20px;max-height:500px;overflow-y:auto}.busca-module_suggestion__V-d8T{cursor:pointer;padding:10px}.busca-module_suggestion__V-d8T:hover{background-color:var(--blue);color:#fff}.busca-module_suggestion__V-d8T:not(:first-child){border-top:1px solid var(--lightGray);padding-top:8px}";
140
+ var css_248z = ".busca-module_search__xf4qJ{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:2rem 0;width:100%}.busca-module_searchContainer__jhcnm{align-items:center;display:flex;max-width:600px;position:relative;width:100%}.busca-module_searchIcon__FPl1-{height:20px;left:10px;position:absolute;width:20px}.busca-module_searchInput__GjG8B{background-color:var(--lightGray);border:none;border-radius:50px;box-sizing:border-box;color:var(--gray);height:100%;outline:none;padding:10px 15px 10px 35px;width:100%;z-index:1001}.busca-module_suggestionsWrapper__vbmxG{background:#fff;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:0 4px 6px rgba(0,0,0,.1);color:var(--blue);margin-top:1.8rem;position:absolute;top:40px;width:45%;z-index:1000}.busca-module_suggestions__pYBV1{border-bottom-left-radius:20px;border-bottom-right-radius:20px;max-height:500px;overflow-y:auto}.busca-module_suggestion__V-d8T{cursor:pointer;padding:10px}.busca-module_suggestion__V-d8T:hover{background-color:var(--blue);color:#fff}.busca-module_suggestion__V-d8T:not(:first-child){border-top:1px solid var(--lightGray);padding-top:8px}@media (max-width:768px){.busca-module_searchInput__GjG8B{padding:10px 15px 10px 30px}.busca-module_suggestionsWrapper__vbmxG{top:35px}}@media (max-width:500px){.busca-module_searchContainer__jhcnm{width:90%}.busca-module_searchInput__GjG8B{padding:10px;width:100%}}";
141
141
  var styles = {"search":"busca-module_search__xf4qJ","searchContainer":"busca-module_searchContainer__jhcnm","searchIcon":"busca-module_searchIcon__FPl1-","searchInput":"busca-module_searchInput__GjG8B","suggestionsWrapper":"busca-module_suggestionsWrapper__vbmxG","suggestions":"busca-module_suggestions__pYBV1","suggestion":"busca-module_suggestion__V-d8T"};
142
142
  styleInject(css_248z);
143
143
 
144
144
  var Busca = function (_a) {
145
- var allItems = _a.allItems, _b = _a.placeholder, placeholder = _b === void 0 ? "Pesquisar..." : _b, onItemClick = _a.onItemClick;
145
+ var allItems = _a.allItems; _a.placeholder; var onItemClick = _a.onItemClick;
146
146
  var _c = useState(''), searchValue = _c[0], setSearchValue = _c[1];
147
147
  var _d = useState(allItems), filteredItems = _d[0], setFilteredItems = _d[1];
148
148
  var _e = useState(false), isInputFocused = _e[0], setIsInputFocused = _e[1];
@@ -167,7 +167,7 @@ var Busca = function (_a) {
167
167
  };
168
168
  return (React.createElement("div", { className: styles.search },
169
169
  React.createElement("div", { className: styles.searchContainer },
170
- React.createElement("input", { type: "text", className: styles.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, onFocus: handleInputFocus, onBlur: handleInputBlur })),
170
+ React.createElement("input", { type: "text", className: styles.searchInput, placeholder: "Pesquisar...", value: searchValue, onChange: handleSearchChange, onFocus: handleInputFocus, onBlur: handleInputBlur })),
171
171
  isInputFocused && filteredItems.length > 0 && (React.createElement("div", { className: styles.suggestionsWrapper },
172
172
  React.createElement("div", { className: styles.suggestions }, filteredItems.map(function (item, index) { return (React.createElement("div", { key: index, className: styles.suggestion, onClick: function () { return onItemClick(item.path); } }, item.id)); }))))));
173
173
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "componenteshospitais",
3
- "version": "1.0.8",
3
+ "version": "1.1.0",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/types/index.d.ts",
package/src/components/Busca.tsx CHANGED
@@ -48,7 +48,7 @@ const Busca: React.FC<SearchComponentProps> = ({ allItems, placeholder = "Pesqui
48
48
  <input
49
49
  type="text"
50
50
  className={styles.searchInput}
51
- placeholder={placeholder}
51
+ placeholder="Pesquisar..."
52
52
  value={searchValue}
53
53
  onChange={handleSearchChange}
54
54
  onFocus={handleInputFocus}
@@ -71,6 +71,7 @@ const Busca: React.FC<SearchComponentProps> = ({ allItems, placeholder = "Pesqui
71
71
  </div>
72
72
  )}
73
73
  </div>
74
+
74
75
  );
75
76
  };
76
77
 
package/src/styles/busca.module.css CHANGED
@@ -1,24 +1,25 @@
1
1
  .search {
2
2
  display: flex;
3
3
  justify-content: center;
4
- margin-bottom: 1rem;
5
- flex-direction: column;
6
4
  align-items: center;
5
+ flex-direction: column;
6
+ margin: 2rem 0;
7
+ width: 100%;
7
8
  }
8
9
 
9
10
  .searchContainer {
10
- height: 20px;
11
+ display: flex;
12
+ align-items: center;
13
+ width: 100%;
11
14
  max-width: 600px;
12
- margin-top: -4px;
15
+ position: relative;
13
16
  }
14
17
 
15
18
  .searchIcon {
16
19
  position: absolute;
17
- transform: translateY(-50%);
20
+ left: 10px;
18
21
  width: 20px;
19
22
  height: 20px;
20
- margin-top: 1.2rem;
21
- margin-left: 0.5rem;
22
23
  }
23
24
 
24
25
  .searchInput {
@@ -28,16 +29,17 @@
28
29
  outline: none;
29
30
  background-color: var(--lightGray);
30
31
  color: var(--gray);
31
- width: 35rem;
32
+ width: 100%;
32
33
  height: 100%;
33
- z-index: 1001
34
+ box-sizing: border-box;
35
+ z-index: 1001;
34
36
  }
35
37
 
36
38
  .suggestionsWrapper {
37
39
  position: absolute;
38
- top: 100%;
39
- width: 600px;
40
- margin-left: 1rem;
40
+ top: 40px;
41
+ margin-top: 1.8rem;
42
+ width: 45%;
41
43
  z-index: 1000;
42
44
  background: white;
43
45
  color: var(--blue);
@@ -66,4 +68,25 @@
66
68
  .suggestion:not(:first-child) {
67
69
  border-top: 1px solid var(--lightGray);
68
70
  padding-top: 8px;
71
+ }
72
+
73
+ @media (max-width: 768px) {
74
+ .searchInput {
75
+ padding: 10px 15px 10px 30px;
76
+ }
77
+
78
+ .suggestionsWrapper {
79
+ top: 35px;
80
+ }
81
+ }
82
+
83
+ @media (max-width: 500px) {
84
+ .searchContainer {
85
+ width: 90%;
86
+ }
87
+
88
+ .searchInput {
89
+ width: 100%;
90
+ padding: 10px;
91
+ }
69
92
  }