funda-ui 4.4.15 → 4.4.35

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 (50) hide show
  1. package/EventCalendar/index.css +114 -114
  2. package/EventCalendar/index.d.ts +1 -0
  3. package/EventCalendar/index.js +116 -84
  4. package/EventCalendarTimeline/index.css +274 -270
  5. package/EventCalendarTimeline/index.d.ts +3 -0
  6. package/EventCalendarTimeline/index.js +641 -224
  7. package/MultipleCheckboxes/index.js +11 -11
  8. package/MultipleSelect/index.js +11 -11
  9. package/NativeSelect/index.js +11 -11
  10. package/Radio/index.js +11 -11
  11. package/Select/index.js +11 -11
  12. package/Table/index.css +1 -0
  13. package/Table/index.js +36 -7
  14. package/TagInput/index.d.ts +1 -0
  15. package/TagInput/index.js +20 -2
  16. package/Tree/index.js +11 -11
  17. package/Utils/object.js +11 -11
  18. package/Utils/os.d.ts +2 -0
  19. package/Utils/os.js +104 -0
  20. package/lib/cjs/EventCalendar/index.d.ts +1 -0
  21. package/lib/cjs/EventCalendar/index.js +116 -84
  22. package/lib/cjs/EventCalendarTimeline/index.d.ts +3 -0
  23. package/lib/cjs/EventCalendarTimeline/index.js +641 -224
  24. package/lib/cjs/MultipleCheckboxes/index.js +11 -11
  25. package/lib/cjs/MultipleSelect/index.js +11 -11
  26. package/lib/cjs/NativeSelect/index.js +11 -11
  27. package/lib/cjs/Radio/index.js +11 -11
  28. package/lib/cjs/Select/index.js +11 -11
  29. package/lib/cjs/Table/index.js +36 -7
  30. package/lib/cjs/TagInput/index.d.ts +1 -0
  31. package/lib/cjs/TagInput/index.js +20 -2
  32. package/lib/cjs/Tree/index.js +11 -11
  33. package/lib/cjs/Utils/object.js +11 -11
  34. package/lib/cjs/Utils/os.d.ts +2 -0
  35. package/lib/cjs/Utils/os.js +104 -0
  36. package/lib/css/EventCalendar/index.css +114 -114
  37. package/lib/css/EventCalendarTimeline/index.css +274 -270
  38. package/lib/css/Table/index.css +1 -0
  39. package/lib/esm/EventCalendar/index.scss +81 -81
  40. package/lib/esm/EventCalendar/index.tsx +136 -98
  41. package/lib/esm/EventCalendarTimeline/index.scss +226 -221
  42. package/lib/esm/EventCalendarTimeline/index.tsx +445 -207
  43. package/lib/esm/ModalDialog/index.tsx +0 -1
  44. package/lib/esm/Table/Table.tsx +0 -1
  45. package/lib/esm/Table/index.scss +2 -0
  46. package/lib/esm/Table/utils/hooks/useTableDraggable.tsx +47 -6
  47. package/lib/esm/TagInput/index.tsx +23 -1
  48. package/lib/esm/Utils/libs/object.ts +67 -67
  49. package/lib/esm/Utils/libs/os.ts +63 -0
  50. package/package.json +1 -1
package/lib/css/Table/index.css CHANGED
@@ -17,6 +17,7 @@
17
17
  }
18
18
  .syntable__wrapper.table-responsive {
19
19
  overflow-x: auto;
20
+ overflow-y: hidden;
20
21
  }
21
22
  .syntable__wrapper.table-responsive::-webkit-scrollbar {
22
23
  height: var(--syntable-scrollbar-h);
package/lib/esm/EventCalendar/index.scss CHANGED
@@ -11,39 +11,39 @@
11
11
  pointer-events: none;
12
12
  }
13
13
 
14
- .e-cal-normal__wrapper {
15
- --e-cal-normal-wrapper-min-width: 400px;
16
- --e-cal-normal-body-bg: #fff;
17
- --e-cal-normal-border-color: #ddd;
18
- --e-cal-normal-border-color-hover: #333;
19
- --e-cal-normal-header-fs: 1.125rem;
20
- --e-cal-normal-default-border-color: #eee;
21
- --e-cal-normal-day-border-color: #ddd;
22
- --e-cal-normal-day-hover-bg: #f6f6f6;
23
- --e-cal-normal-dayselected-bg: #0b5ed7;
24
- --e-cal-normal-dayselected-text-color: #fff;
25
- --e-cal-normal-year-month-btn-border-color: #ddd;
26
- --e-cal-normal-year-month-btn-hover-bg: rgba(0, 58, 166, .1);
27
- --e-cal-normal-year-month-btn-selected-bg: rgba(0, 58, 166, 1);
28
- --e-cal-normal-year-month-btn-selected-color: #fff;
29
- --e-cal-normal-month-wrapper-w: 18.75rem;
30
- --e-cal-normal-year-wrapper-w: 18.75rem;
31
- --e-cal-normal-header-arrow-bg: #000;
32
- --e-cal-normal-header-text-color: #000;
33
- --e-cal-normal-header-prevnext-btn-bg: transparent;
34
- --e-cal-normal-header-prevnext-btn-color: #000;
35
- --e-cal-normal-header-prevnext-btn-radius: 0.25rem;
36
- --e-cal-normal-table-add-btn-color: #0b5ed7;
37
- --e-cal-normal-delete-btn-color: #ee4949;
38
- --e-cal-normal-footer-today-btn-bg: rgba(0, 58, 166, 1);
39
- --e-cal-normal-footer-today-btn-color: #fff;
40
- --e-cal-normal-event-default-bg: rgb(255, 240, 227);
41
- --e-cal-normal-table-event-font-size: 0.75rem;
14
+ .custom-event-cal__wrapper {
15
+ --custom-event-cal-wrapper-min-width: 400px;
16
+ --custom-event-cal-body-bg: #fff;
17
+ --custom-event-cal-border-color: #ddd;
18
+ --custom-event-cal-border-color-hover: #333;
19
+ --custom-event-cal-header-fs: 1.125rem;
20
+ --custom-event-cal-default-border-color: #eee;
21
+ --custom-event-cal-day-border-color: #ddd;
22
+ --custom-event-cal-day-hover-bg: #f6f6f6;
23
+ --custom-event-cal-dayselected-bg: #0b5ed7;
24
+ --custom-event-cal-dayselected-text-color: #fff;
25
+ --custom-event-cal-year-month-btn-border-color: #ddd;
26
+ --custom-event-cal-year-month-btn-hover-bg: rgba(0, 58, 166, .1);
27
+ --custom-event-cal-year-month-btn-selected-bg: rgba(0, 58, 166, 1);
28
+ --custom-event-cal-year-month-btn-selected-color: #fff;
29
+ --custom-event-cal-month-wrapper-w: 18.75rem;
30
+ --custom-event-cal-year-wrapper-w: 18.75rem;
31
+ --custom-event-cal-header-arrow-bg: #000;
32
+ --custom-event-cal-header-text-color: #000;
33
+ --custom-event-cal-header-prevnext-btn-bg: transparent;
34
+ --custom-event-cal-header-prevnext-btn-color: #000;
35
+ --custom-event-cal-header-prevnext-btn-radius: 0.25rem;
36
+ --custom-event-cal-table-add-btn-color: #0b5ed7;
37
+ --custom-event-cal-delete-btn-color: #ee4949;
38
+ --custom-event-cal-footer-today-btn-bg: rgba(0, 58, 166, 1);
39
+ --custom-event-cal-footer-today-btn-color: #fff;
40
+ --custom-event-cal-event-default-bg: rgb(255, 240, 227);
41
+ --custom-event-cal-table-event-font-size: 0.75rem;
42
42
 
43
43
 
44
44
  position: relative;
45
- min-width: var(--e-cal-normal-wrapper-min-width);
46
- border: 1px solid var(--e-cal-normal-border-color);
45
+ min-width: var(--custom-event-cal-wrapper-min-width);
46
+ border: 1px solid var(--custom-event-cal-border-color);
47
47
 
48
48
 
49
49
  /* Required when using onKeyDown */
@@ -52,23 +52,23 @@
52
52
  }
53
53
 
54
54
  /* --HEADER --*/
55
- .e-cal-normal__header {
56
- font-size: var(--e-cal-normal-header-fs);
55
+ .custom-event-cal__header {
56
+ font-size: var(--custom-event-cal-header-fs);
57
57
  font-weight: bold;
58
58
  padding: 10px 10px 5px 10px;
59
59
  display: flex;
60
60
  justify-content: space-between;
61
61
 
62
- .e-cal-normal__header__btns {
63
- .e-cal-normal__btn {
62
+ .custom-event-cal__header__btns {
63
+ .custom-event-cal__btn {
64
64
  margin-right: 1rem;
65
- color: var(--e-cal-normal-header-text-color);
65
+ color: var(--custom-event-cal-header-text-color);
66
66
 
67
67
  svg {
68
68
  margin-left: .3rem;
69
69
 
70
70
  path {
71
- fill: var(--e-cal-normal-header-arrow-bg);
71
+ fill: var(--custom-event-cal-header-arrow-bg);
72
72
  }
73
73
  }
74
74
 
@@ -85,19 +85,19 @@
85
85
 
86
86
 
87
87
  /*-- BODY --*/
88
- .e-cal-normal__body {
89
- background: var(--e-cal-normal-body-bg);
88
+ .custom-event-cal__body {
89
+ background: var(--custom-event-cal-body-bg);
90
90
  width: 100%;
91
91
  display: flex;
92
92
  flex-wrap: wrap;
93
93
  }
94
94
 
95
95
  /*-- CELL --*/
96
- .e-cal-normal__row {
96
+ .custom-event-cal__row {
97
97
  display: flex;
98
98
  width: 100%;
99
99
 
100
- .e-cal-normal__cell {
100
+ .custom-event-cal__cell {
101
101
  flex: 1;
102
102
  position: relative;
103
103
  height: auto;
@@ -108,7 +108,7 @@
108
108
  flex-direction: column;
109
109
  text-align: center;
110
110
  border-width: 0;
111
- border-color: var(--e-cal-normal-default-border-color);
111
+ border-color: var(--custom-event-cal-default-border-color);
112
112
  border-style: solid;
113
113
  border-top-width: 1px;
114
114
  border-right-width: 1px;
@@ -125,20 +125,20 @@
125
125
  border-bottom-width: 1px;
126
126
  }
127
127
 
128
- &.e-cal-normal__day--week {
128
+ &.custom-event-cal__day--week {
129
129
  min-height: 2.75em;
130
130
  align-items: end;
131
131
  padding-inline-end: .75rem;
132
132
  }
133
133
 
134
134
  &:not(.empty):hover {
135
- background-color: var(--e-cal-normal-day-hover-bg);
135
+ background-color: var(--custom-event-cal-day-hover-bg);
136
136
  }
137
137
 
138
- .e-cal-normal__day__event {
138
+ .custom-event-cal__day__event {
139
139
  margin-bottom: 1px;
140
- font-size: var(--e-cal-normal-table-event-font-size);
141
- background-color: var(--e-cal-normal-event-default-bg);
140
+ font-size: var(--custom-event-cal-table-event-font-size);
141
+ background-color: var(--custom-event-cal-event-default-bg);
142
142
  text-align: left;
143
143
 
144
144
  &:hover {
@@ -147,26 +147,26 @@
147
147
  }
148
148
  }
149
149
 
150
- .e-cal-normal__cell-item.first {
150
+ .custom-event-cal__cell-item.first {
151
151
  margin-top: 2.5rem;
152
152
  }
153
153
 
154
154
 
155
155
  /* Delete button */
156
- .e-cal-normal__day__eventdel {
156
+ .custom-event-cal__day__eventdel {
157
157
  position: absolute;
158
158
  z-index: 1;
159
159
  right: -5px;
160
160
  top: 0;
161
161
  display: none;
162
- color: var(--e-cal-normal-delete-btn-color);
162
+ color: var(--custom-event-cal-delete-btn-color);
163
163
 
164
164
  svg {
165
165
  width: 10px;
166
- fill: var(--e-cal-normal-delete-btn-color);
166
+ fill: var(--custom-event-cal-delete-btn-color);
167
167
 
168
168
  path {
169
- fill: var(--e-cal-normal-delete-btn-color);
169
+ fill: var(--custom-event-cal-delete-btn-color);
170
170
  }
171
171
  }
172
172
 
@@ -177,8 +177,8 @@
177
177
  }
178
178
  }
179
179
 
180
- &:not(.empty) .e-cal-normal__cell-item:hover {
181
- .e-cal-normal__day__eventdel {
180
+ &:not(.empty) .custom-event-cal__cell-item:hover {
181
+ .custom-event-cal__day__eventdel {
182
182
  display: block;
183
183
  }
184
184
 
@@ -186,14 +186,14 @@
186
186
 
187
187
 
188
188
  /* Add button */
189
- .e-cal-normal__day__eventadd {
189
+ .custom-event-cal__day__eventadd {
190
190
  position: absolute;
191
191
  z-index: 1;
192
192
  left: 0;
193
193
  bottom: -8.5px;
194
194
  display: none;
195
195
  width: 20px;
196
- color: var(--e-cal-normal-table-add-btn-color);
196
+ color: var(--custom-event-cal-table-add-btn-color);
197
197
  text-align: left;
198
198
  pointer-events: none;
199
199
 
@@ -203,10 +203,10 @@
203
203
 
204
204
  svg {
205
205
  width: 15px;
206
- fill: var(--e-cal-normal-table-add-btn-color);
206
+ fill: var(--custom-event-cal-table-add-btn-color);
207
207
 
208
208
  path {
209
- fill: var(--e-cal-normal-table-add-btn-color);
209
+ fill: var(--custom-event-cal-table-add-btn-color);
210
210
  }
211
211
  }
212
212
 
@@ -218,7 +218,7 @@
218
218
  }
219
219
 
220
220
  &:hover {
221
- .e-cal-normal__day__eventadd {
221
+ .custom-event-cal__day__eventadd {
222
222
  display: block;
223
223
  }
224
224
 
@@ -265,8 +265,8 @@
265
265
 
266
266
  &.selected {
267
267
  >span {
268
- color: var(--e-cal-normal-dayselected-text-color);
269
- background-color: var(--e-cal-normal-dayselected-bg);
268
+ color: var(--custom-event-cal-dayselected-text-color);
269
+ background-color: var(--custom-event-cal-dayselected-bg);
270
270
  }
271
271
  }
272
272
 
@@ -277,9 +277,9 @@
277
277
 
278
278
 
279
279
  /*-- SELECTION --*/
280
- .e-cal-normal__month-wrapper {
280
+ .custom-event-cal__month-wrapper {
281
281
  position: absolute;
282
- width: var(--e-cal-normal-month-wrapper-w);
282
+ width: var(--custom-event-cal-month-wrapper-w);
283
283
  height: auto;
284
284
  z-index: 1;
285
285
  top: calc(1rem + 22px);
@@ -292,7 +292,7 @@
292
292
  }
293
293
 
294
294
 
295
- .e-cal-normal__month-container {
295
+ .custom-event-cal__month-container {
296
296
  display: grid;
297
297
  grid-template-columns: repeat(3, 1fr);
298
298
  grid-template-rows: repeat(4, 2.5em);
@@ -303,9 +303,9 @@
303
303
  }
304
304
 
305
305
 
306
- .e-cal-normal__year-wrapper {
306
+ .custom-event-cal__year-wrapper {
307
307
  position: absolute;
308
- width: var(--e-cal-normal-year-wrapper-w);
308
+ width: var(--custom-event-cal-year-wrapper-w);
309
309
  height: auto;
310
310
  z-index: 1;
311
311
  top: calc(1rem + 22px);
@@ -317,7 +317,7 @@
317
317
  display: block;
318
318
  }
319
319
 
320
- .e-cal-normal__year-container {
320
+ .custom-event-cal__year-container {
321
321
  display: grid;
322
322
  grid-template-columns: repeat(4, 1fr);
323
323
  grid-template-rows: repeat(5, 2.5em);
@@ -326,24 +326,24 @@
326
326
  }
327
327
 
328
328
 
329
- .e-cal-normal__year,
330
- .e-cal-normal__month {
329
+ .custom-event-cal__year,
330
+ .custom-event-cal__month {
331
331
  display: flex;
332
332
  align-items: center;
333
333
  justify-content: center;
334
334
  padding: 5px;
335
335
  font-size: 0.875em;
336
- border: 1px solid var(--e-cal-normal-year-month-btn-border-color);
336
+ border: 1px solid var(--custom-event-cal-year-month-btn-border-color);
337
337
  border-radius: 0.25rem;
338
338
  cursor: pointer;
339
339
 
340
340
  &:hover {
341
- background-color: var(--e-cal-normal-year-month-btn-hover-bg);
341
+ background-color: var(--custom-event-cal-year-month-btn-hover-bg);
342
342
  }
343
343
 
344
344
  &.selected {
345
- background-color: var(--e-cal-normal-year-month-btn-selected-bg);
346
- color: var(--e-cal-normal-year-month-btn-selected-color);
345
+ background-color: var(--custom-event-cal-year-month-btn-selected-bg);
346
+ color: var(--custom-event-cal-year-month-btn-selected-color);
347
347
  }
348
348
 
349
349
  &.disabled {
@@ -356,7 +356,7 @@
356
356
 
357
357
 
358
358
  /* --BUTTON --*/
359
- .e-cal-normal__btn {
359
+ .custom-event-cal__btn {
360
360
  border: none;
361
361
  outline: none;
362
362
  background: none;
@@ -371,7 +371,7 @@
371
371
 
372
372
  svg {
373
373
  path {
374
- fill: var(--e-cal-normal-header-arrow-bg);
374
+ fill: var(--custom-event-cal-header-arrow-bg);
375
375
  }
376
376
  }
377
377
 
@@ -381,25 +381,25 @@
381
381
 
382
382
  &--prev,
383
383
  &--next {
384
- border-radius: var(--e-cal-normal-header-prevnext-btn-radius);
385
- color: var(--e-cal-normal-header-prevnext-btn-color);
386
- background-color: var(--e-cal-normal-header-prevnext-btn-bg);
384
+ border-radius: var(--custom-event-cal-header-prevnext-btn-radius);
385
+ color: var(--custom-event-cal-header-prevnext-btn-color);
386
+ background-color: var(--custom-event-cal-header-prevnext-btn-bg);
387
387
 
388
388
  svg {
389
389
  path {
390
- fill: var(--e-cal-normal-header-prevnext-btn-color);
390
+ fill: var(--custom-event-cal-header-prevnext-btn-color);
391
391
  }
392
392
  }
393
393
 
394
394
  }
395
395
 
396
396
  &--today {
397
- border: 1px solid var(--e-cal-normal-border-color);
397
+ border: 1px solid var(--custom-event-cal-border-color);
398
398
  border-radius: 0.25rem;
399
399
  font-size: 0.875em;
400
400
  padding: .2rem 1rem;
401
- color: var(--e-cal-normal-footer-today-btn-color);
402
- background-color: var(--e-cal-normal-footer-today-btn-bg);
401
+ color: var(--custom-event-cal-footer-today-btn-color);
402
+ background-color: var(--custom-event-cal-footer-today-btn-bg);
403
403
  }
404
404
  }
405
405