toggle-components-library 1.33.0-beta.12 → 1.33.0-beta.13

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 (16) hide show
  1. package/dist/toggle-components-library.common.js +7171 -33060
  2. package/dist/toggle-components-library.common.js.map +1 -1
  3. package/dist/toggle-components-library.css +1 -1
  4. package/dist/toggle-components-library.umd.js +7171 -33060
  5. package/dist/toggle-components-library.umd.js.map +1 -1
  6. package/dist/toggle-components-library.umd.min.js +8 -285
  7. package/dist/toggle-components-library.umd.min.js.map +1 -1
  8. package/package.json +1 -2
  9. package/src/components/forms/ToggleDatePicker.vue +138 -228
  10. package/src/components/forms/ToggleInputSelect.vue +13 -7
  11. package/src/components/forms/ToggleInputText.vue +15 -6
  12. package/src/components/tables/ToggleTable.vue +114 -49
  13. package/src/index.js +3 -1
  14. package/src/sass/includes/_as_inputs.scss +832 -832
  15. package/src/sass/includes/_as_table.scss +176 -176
  16. package/package-lock.json +0 -20279
package/src/sass/includes/_as_table.scss CHANGED
@@ -16,37 +16,37 @@ table.toggle-table {
16
16
  border-radius:0;
17
17
  border:none;
18
18
  .toggle-input{
19
- margin-top:11px;
20
- padding:1px 3px 1px 3px;
21
- font-size:14px;
22
- height:1.5rem;
19
+ margin-top:11px;
20
+ padding:1px 3px 1px 3px;
21
+ font-size:14px;
22
+ height:1.5rem;
23
23
  }
24
24
  .toggle-input-label{
25
- display: none;
25
+ display: none;
26
26
  }
27
27
  .toggle-date-input-container{
28
- .toggle-date-input-calendar-icon{
29
- .toggle-input{
30
- background:transparent;
31
- padding:3px 1rem 3px 0.1rem;
32
- margin-top: 10px;
33
- }
34
- }
35
- .toggle-clear{
36
- display: none;
28
+ .toggle-date-input-calendar-icon{
29
+ .toggle-input{
30
+ background:transparent;
31
+ padding:3px 1rem 3px 0.1rem;
32
+ margin-top: 10px;
37
33
  }
34
+ }
35
+ .toggle-clear{
36
+ display: none;
37
+ }
38
38
  }
39
39
 
40
40
  }
41
41
 
42
42
  thead {
43
43
  th.toggle-table-th {
44
- padding: 0 10px 20px 0;
44
+ padding: 0;
45
45
  border: none;
46
46
  text-align: left;
47
- @include toggle-global-font-config;
48
- font-weight: bold;
49
- font-size: $toggle-font-size-small;
47
+ @include toggle-global-font-config;
48
+ font-weight: bold;
49
+ font-size: $toggle-font-size-small;
50
50
 
51
51
  &:hover {
52
52
  .search {
@@ -54,7 +54,7 @@ table.toggle-table {
54
54
  }
55
55
  }
56
56
 
57
-
57
+
58
58
  }
59
59
 
60
60
 
@@ -75,7 +75,6 @@ table.toggle-table {
75
75
  text-indent: 1px;
76
76
  text-overflow: '';
77
77
 
78
- background: url(/img/icons/arrow-down-blue-tiny.svg) center right no-repeat;
79
78
  background-size: 15px;
80
79
  padding : 0.5rem 0rem 0.5rem 1rem;
81
80
  }
@@ -97,208 +96,209 @@ table.toggle-table {
97
96
  }
98
97
 
99
98
  td.toggle-tablee-td {
100
- @include toggle-global-font-config;
101
-
102
- font-size: $toggle-font-size-small;
103
- padding: 1rem 0;
104
- padding-left:1rem;
99
+ @include toggle-global-font-config;
105
100
 
106
- cursor: pointer;
107
- vertical-align: middle;
108
- text-overflow: ellipsis;
109
- overflow: hidden;
110
- max-width: 80px;
111
- border: none;
112
- text-align: left;
101
+ font-size: $toggle-font-size-small;
102
+ padding: 1rem 0;
103
+ padding-left:1rem;
113
104
 
114
- &:has(.toggle-three-dots-container) {
115
- overflow: inherit;
116
- text-align: right;
117
- }
105
+ cursor: pointer;
106
+ vertical-align: middle;
107
+ text-overflow: ellipsis;
108
+ overflow: hidden;
109
+ max-width: 80px;
110
+ border: none;
111
+ text-align: left;
112
+
113
+ &:has(.toggle-three-dots-container) {
114
+ overflow: inherit;
115
+ text-align: right;
116
+ }
118
117
  }
119
118
 
120
119
 
121
120
  tr.toggle-tablee-tr {
122
121
 
123
- &:hover {
124
- background-color: #FFF;
125
- .arrow-order {
126
- display: block;
127
- }
128
- }
129
- td.toggle-tablee-td:first-child {
130
- border-top-left-radius: 10px;
131
- border-bottom-left-radius: 10px;
122
+ &:hover {
123
+ background-color: #FFF;
124
+ .arrow-order {
125
+ display: block;
132
126
  }
127
+ }
128
+ td.toggle-tablee-td:first-child {
129
+ border-top-left-radius: 10px;
130
+ border-bottom-left-radius: 10px;
131
+ }
133
132
 
134
- td.toggle-tablee-td:last-child {
135
- border-top-right-radius: 10px;
136
- border-bottom-right-radius: 10px;
137
- }
133
+ td.toggle-tablee-td:last-child {
134
+ border-top-right-radius: 10px;
135
+ border-bottom-right-radius: 10px;
136
+ }
138
137
 
139
- td.toggle-tablee-td {
140
- .toggle-button {
141
- &.neutral {
142
- padding: 0.2rem 0.9rem 0.2rem 0.9rem;
143
- }
144
- }
138
+ td.toggle-tablee-td {
139
+ .toggle-button {
140
+ &.neutral {
141
+ padding: 0.2rem 0.9rem 0.2rem 0.9rem;
142
+ }
145
143
  }
144
+ }
146
145
 
147
146
 
148
147
  }
149
-
148
+
150
149
  }
151
150
 
152
151
  .toggle-date-input-calendar-icon{
153
152
  &:after{
154
- content: '';
155
- }
153
+ content: '';
154
+ }
156
155
  .toggle-input{
157
- font-size: 12px;
158
- padding-right:0px !important;
156
+ font-size: 12px;
157
+ padding-right:0px !important;
159
158
  }
160
- }
161
-
159
+ }
160
+
162
161
  }
163
162
 
164
163
 
165
164
 
166
165
 
167
166
  .toggle-table-any-search-active {
168
- .toggle-table-th-inner {
169
- height:74px;
170
- }
167
+ .toggle-table-th-inner {
168
+ height:74px;
169
+ }
171
170
  }
172
171
  .toggle-table-th-inner {
173
- line-height: 1em;
174
- position: relative;
175
- display: block;
176
- height: 20px;
177
- margin: 0 4px 8px 4px;
178
- padding: 10px;
179
- border:1px solid transparent;
180
- border-radius: 4px;
181
- box-sizing:border-box;
182
- transition: height .5s;
183
-
184
- .toggle-table-search-active & {
185
- z-index: 25;
186
- //overflow: hidden;
187
- background-color: white;
188
- border:1px solid #FFA300;
189
- input {
190
- cursor: text;
191
- pointer-events: auto;
192
- }
193
- .toggle-table-close-search {
194
- display: inline-block;
195
- }
172
+ line-height: 1em;
173
+ position: relative;
174
+ display: block;
175
+ height: 50px;
176
+ margin: 0 4px 8px 4px;
177
+ padding: 10px;
178
+ border:1px solid transparent;
179
+ border-radius: 4px;
180
+ box-sizing:border-box;
181
+ transition: height .5s;
182
+
183
+ .toggle-table-search-active & {
184
+ z-index: 25;
185
+ //overflow: hidden;
186
+ background-color: white;
187
+ border:1px solid #FFA300;
188
+ input {
189
+ cursor: text;
190
+ pointer-events: auto;
196
191
  }
197
- .toggle-table-searchable & {
198
- .toggle-table-th-title {
199
- position: relative;
200
- display: inline-block;
201
- &:after {
202
- display: block;
203
- content:'';
204
- position: absolute;
205
- right: -15px;
206
- top: 3px;
207
- background: url(../assets/icons/search.svg) no-repeat;
208
- width: 10px;
209
- height: 10px;
210
- opacity: 0.3;
211
- }
212
- }
213
- &:hover .toggle-table-th-title:after {
214
- opacity: 1;
215
- }
192
+ .toggle-table-close-search {
193
+ display: inline-block;
216
194
  }
217
- .toggle-table-searchable.toggle-table-search-active & {
218
- .toggle-table-th-title:after {
219
- display: none;
220
- }
195
+ }
196
+ .toggle-table-searchable & {
197
+ cursor: pointer;
198
+ .toggle-table-th-title {
199
+ position: relative;
200
+ display: inline-block;
201
+ &:after {
202
+ display: block;
203
+ content:'';
204
+ position: absolute;
205
+ right: -15px;
206
+ top: 3px;
207
+ background: url(../assets/icons/search.svg) no-repeat;
208
+ width: 10px;
209
+ height: 10px;
210
+ opacity: 0.3;
211
+ }
221
212
  }
213
+ &:hover .toggle-table-th-title:after {
214
+ opacity: 1;
215
+ }
216
+ }
217
+ .toggle-table-searchable.toggle-table-search-active & {
218
+ .toggle-table-th-title:after {
219
+ display: none;
220
+ }
221
+ }
222
222
  }
223
223
 
224
224
 
225
225
  .toggle-table-close-search {
226
- position: absolute;
227
- top: 12px;
228
- right: 10px;
229
- display: block;
230
- opacity: 0.3;
231
- cursor:pointer;
226
+ position: absolute;
227
+ top: 12px;
228
+ right: 10px;
229
+ display: block;
230
+ opacity: 0.3;
231
+ cursor:pointer;
232
232
  }
233
233
  .toggle-table-close-search {
234
- background: url(../assets/icons/grey_cross.svg) no-repeat;
235
- width: 12px;
236
- height: 12px;
237
- display: none;
238
- float: right;
239
- &:hover {
240
- opacity: 1;
241
- }
234
+ background: url(../assets/icons/grey_cross.svg) no-repeat;
235
+ width: 12px;
236
+ height: 12px;
237
+ display: none;
238
+ float: right;
239
+ &:hover {
240
+ opacity: 1;
241
+ }
242
242
  }
243
243
 
244
244
  .arrow-order {
245
- background: url(/img/icons/arrow-right-blue-small.svg);
246
- position: absolute;
247
- top: 50%;
248
- margin-top: -10px;
249
- right: 15px;
250
- width: 20px;
251
- height: 20px;
252
- display: none;
245
+ background: url(/img/icons/arrow-right-blue-small.svg);
246
+ position: absolute;
247
+ top: 50%;
248
+ margin-top: -10px;
249
+ right: 15px;
250
+ width: 20px;
251
+ height: 20px;
252
+ display: none;
253
253
  }
254
254
 
255
255
 
256
256
 
257
257
  .toggle-pagination {
258
258
 
259
- ul, li {
260
- list-style: none;
261
- }
262
- ul {
263
- margin: 0;
264
- padding: 0;
265
- li {
266
- float: left;
267
-
268
- button {
269
- border: none;
270
- cursor: pointer;
271
- padding: 0 10px;
272
- color: #354B64;
273
- background-color: transparent;
274
- &:disabled {
275
- color: rgba(24, 158, 209, 0.7);
276
- font-weight: bold;
277
- }
278
- }
279
-
280
- .toggle-pagination-prev, .toggle-pagination-next {
281
- text-indent: -99999px;
282
- width: 25px;
283
- height: 25px;
284
- }
285
-
286
- .toggle-pagination-prev{
287
- background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
288
- margin-right: 10px;
289
-
290
- &:hover {
291
- background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
292
- }
293
- }
294
-
295
- .toggle-pagination-next{
296
- background: url(../assets/icons/arrow-right-blue.svg) no-repeat;
297
- margin-left: 10px;
298
- &:hover {
299
- background: url(../assets/icons/arrow-right-blue-hover.svg) no-repeat;
300
- }
301
- }
259
+ ul, li {
260
+ list-style: none;
261
+ }
262
+ ul {
263
+ margin: 0;
264
+ padding: 0;
265
+ li {
266
+ float: left;
267
+
268
+ button {
269
+ border: none;
270
+ cursor: pointer;
271
+ padding: 0 10px;
272
+ color: #354B64;
273
+ background-color: transparent;
274
+ &:disabled {
275
+ color: rgba(24, 158, 209, 0.7);
276
+ font-weight: bold;
302
277
  }
278
+ }
279
+
280
+ .toggle-pagination-prev, .toggle-pagination-next {
281
+ text-indent: -99999px;
282
+ width: 25px;
283
+ height: 25px;
284
+ }
285
+
286
+ .toggle-pagination-prev{
287
+ background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
288
+ margin-right: 10px;
289
+
290
+ &:hover {
291
+ background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
292
+ }
293
+ }
294
+
295
+ .toggle-pagination-next{
296
+ background: url(../assets/icons/arrow-right-blue.svg) no-repeat;
297
+ margin-left: 10px;
298
+ &:hover {
299
+ background: url(../assets/icons/arrow-right-blue-hover.svg) no-repeat;
300
+ }
301
+ }
303
302
  }
303
+ }
304
304
  }