@energie360/ui-library 0.1.43 → 0.1.45

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 (43) hide show
  1. package/components/accordion-item/u-accordion-item.vue +2 -1
  2. package/components/card-amount-illustrated/u-card-amount-illustrated.vue +4 -3
  3. package/components/card-footer/u-card-footer.vue +25 -8
  4. package/components/card-group/card-group.scss +22 -0
  5. package/components/card-group/u-card-group.vue +3 -3
  6. package/components/card-header/u-card-header.vue +4 -2
  7. package/components/collapsible/u-collapsible.vue +7 -2
  8. package/components/download-list-item/u-download-list-item.vue +1 -1
  9. package/components/file-upload/u-file-upload.vue +3 -3
  10. package/components/hint/hint.scss +5 -0
  11. package/components/hint/u-hint.vue +1 -1
  12. package/components/index.ts +78 -0
  13. package/components/inline-edit/u-inline-edit.vue +1 -1
  14. package/components/navigation-panel-tile/navigation-panel-tile.scss +7 -0
  15. package/components/portal-logo/u-portal-logo.vue +1 -1
  16. package/components/slider/u-slider.vue +4 -2
  17. package/components/slider-progress-animation/u-slider-progress-animation.vue +3 -3
  18. package/components/table/table-cell.mixins.scss +2 -2
  19. package/components/table/u-table-cell.vue +1 -3
  20. package/components/welcome/u-welcome.vue +1 -1
  21. package/dist/layout/form-grid.css +43 -145
  22. package/dist/layout/form-grid.css.map +1 -1
  23. package/dist/layout/grid.css +780 -2951
  24. package/dist/layout/grid.css.map +1 -1
  25. package/elements/icon/u-icon.vue +1 -1
  26. package/elements/index.ts +24 -0
  27. package/elements/radio-group/radio-group-composables.ts +4 -1
  28. package/elements/select/select.scss +8 -2
  29. package/elements/select/u-select.vue +6 -2
  30. package/elements/select-tile/select-tile.scss +5 -0
  31. package/elements/select-tile/u-select-tile.vue +16 -6
  32. package/elements/textarea/u-textarea.vue +4 -4
  33. package/layout/grid/grid.mixin.scss +69 -50
  34. package/main.ts +2 -0
  35. package/modules/content-title/content-title.scss +6 -0
  36. package/modules/content-title/u-content-title.vue +1 -1
  37. package/modules/navigation-toolbar-side/u-navigation-toolbar-side.vue +1 -1
  38. package/modules/navigation-toolbar-top/u-navigation-toolbar-top.vue +12 -4
  39. package/package.json +11 -3
  40. package/tsconfig.build.json +14 -0
  41. package/tsconfig.json +4 -1
  42. package/vite.config.js +32 -0
  43. package/wizard/wizard-intro/u-wizard-intro.vue +4 -6
package/dist/layout/form-grid.css CHANGED
@@ -17,167 +17,65 @@ $columns: Grid size (in columns). Default is set by global variable $grid-column
17
17
  .form-row {
18
18
  display: flex;
19
19
  flex-wrap: wrap;
20
- gap: 2.6315789474%;
21
- }
22
- @media (max-width: 1020px) {
23
- .form-row {
24
- gap: 2.5531914894%;
25
- }
26
- }
27
- @media (max-width: 740px) {
28
- .form-row {
29
- gap: 3.6363636364%;
30
- }
31
- }
32
- @media (max-width: 520px) {
33
- .form-row {
34
- gap: 4.1666666667%;
35
- }
20
+ gap: clamp(20px, 0px + 2.778vw, 40px);
36
21
  }
37
22
  .form-row .form-col {
38
- flex: 0 0 48.6842105263%;
39
- max-width: 48.6842105263%;
40
- }
41
- @media (max-width: 1020px) {
42
- .form-row .form-col {
43
- flex: 0 0 48.7234042553%;
44
- max-width: 48.7234042553%;
45
- }
46
- }
47
- @media (max-width: 740px) {
48
- .form-row .form-col {
49
- flex: 0 0 48.1818181818%;
50
- max-width: 48.1818181818%;
51
- }
52
- }
53
- @media (max-width: 520px) {
54
- .form-row .form-col {
55
- flex: 0 0 47.9166666667%;
56
- max-width: 47.9166666667%;
57
- }
23
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
24
+ --col-width: calc(
25
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 6 +
26
+ ((5) * var(--gutter))
27
+ );
28
+ flex: 0 0 var(--col-width);
29
+ max-width: var(--col-width);
58
30
  }
59
31
  .form-row .form-col-1\/4 {
60
- flex: 0 0 23.0263157895%;
61
- max-width: 23.0263157895%;
62
- }
63
- @media (max-width: 1020px) {
64
- .form-row .form-col-1\/4 {
65
- flex: 0 0 23.085106383%;
66
- max-width: 23.085106383%;
67
- }
68
- }
69
- @media (max-width: 740px) {
70
- .form-row .form-col-1\/4 {
71
- flex: 0 0 22.2727272727%;
72
- max-width: 22.2727272727%;
73
- }
74
- }
75
- @media (max-width: 520px) {
76
- .form-row .form-col-1\/4 {
77
- flex: 0 0 21.875%;
78
- max-width: 21.875%;
79
- }
32
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
33
+ --col-width: calc(
34
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 3 +
35
+ ((2) * var(--gutter))
36
+ );
37
+ flex: 0 0 var(--col-width);
38
+ max-width: var(--col-width);
80
39
  }
81
40
  .form-row .form-col-2\/4 {
82
- flex: 0 0 48.6842105263%;
83
- max-width: 48.6842105263%;
84
- }
85
- @media (max-width: 1020px) {
86
- .form-row .form-col-2\/4 {
87
- flex: 0 0 48.7234042553%;
88
- max-width: 48.7234042553%;
89
- }
90
- }
91
- @media (max-width: 740px) {
92
- .form-row .form-col-2\/4 {
93
- flex: 0 0 48.1818181818%;
94
- max-width: 48.1818181818%;
95
- }
96
- }
97
- @media (max-width: 520px) {
98
- .form-row .form-col-2\/4 {
99
- flex: 0 0 47.9166666667%;
100
- max-width: 47.9166666667%;
101
- }
41
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
42
+ --col-width: calc(
43
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 6 +
44
+ ((5) * var(--gutter))
45
+ );
46
+ flex: 0 0 var(--col-width);
47
+ max-width: var(--col-width);
102
48
  }
103
49
  .form-row .form-col-3\/4 {
104
- flex: 0 0 74.3421052632%;
105
- max-width: 74.3421052632%;
106
- }
107
- @media (max-width: 1020px) {
108
- .form-row .form-col-3\/4 {
109
- flex: 0 0 74.3617021277%;
110
- max-width: 74.3617021277%;
111
- }
112
- }
113
- @media (max-width: 740px) {
114
- .form-row .form-col-3\/4 {
115
- flex: 0 0 74.0909090909%;
116
- max-width: 74.0909090909%;
117
- }
118
- }
119
- @media (max-width: 520px) {
120
- .form-row .form-col-3\/4 {
121
- flex: 0 0 73.9583333333%;
122
- max-width: 73.9583333333%;
123
- }
50
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
51
+ --col-width: calc(
52
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 9 +
53
+ ((8) * var(--gutter))
54
+ );
55
+ flex: 0 0 var(--col-width);
56
+ max-width: var(--col-width);
124
57
  }
125
58
  .form-row .form-col-4\/4 {
126
- flex: 0 0 100%;
127
- max-width: 100%;
128
- }
129
- @media (max-width: 1020px) {
130
- .form-row .form-col-4\/4 {
131
- flex: 0 0 100%;
132
- max-width: 100%;
133
- }
134
- }
135
- @media (max-width: 740px) {
136
- .form-row .form-col-4\/4 {
137
- flex: 0 0 100%;
138
- max-width: 100%;
139
- }
140
- }
141
- @media (max-width: 520px) {
142
- .form-row .form-col-4\/4 {
143
- flex: 0 0 100%;
144
- max-width: 100%;
145
- }
59
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
60
+ --col-width: calc(
61
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 12 +
62
+ ((11) * var(--gutter))
63
+ );
64
+ flex: 0 0 var(--col-width);
65
+ max-width: var(--col-width);
146
66
  }
147
67
  @media (max-width: 1020px) {
148
68
  .form-row .form-col,
149
69
  .form-row .form-col-1\/4,
150
70
  .form-row .form-col-2\/4,
151
71
  .form-row .form-col-3\/4 {
152
- flex: 0 0 100%;
153
- max-width: 100%;
154
- }
155
- }
156
- @media (max-width: 1020px) and (max-width: 1020px) {
157
- .form-row .form-col,
158
- .form-row .form-col-1\/4,
159
- .form-row .form-col-2\/4,
160
- .form-row .form-col-3\/4 {
161
- flex: 0 0 100%;
162
- max-width: 100%;
163
- }
164
- }
165
- @media (max-width: 1020px) and (max-width: 740px) {
166
- .form-row .form-col,
167
- .form-row .form-col-1\/4,
168
- .form-row .form-col-2\/4,
169
- .form-row .form-col-3\/4 {
170
- flex: 0 0 100%;
171
- max-width: 100%;
172
- }
173
- }
174
- @media (max-width: 1020px) and (max-width: 520px) {
175
- .form-row .form-col,
176
- .form-row .form-col-1\/4,
177
- .form-row .form-col-2\/4,
178
- .form-row .form-col-3\/4 {
179
- flex: 0 0 100%;
180
- max-width: 100%;
72
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
73
+ --col-width: calc(
74
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 12 +
75
+ ((11) * var(--gutter))
76
+ );
77
+ flex: 0 0 var(--col-width);
78
+ max-width: var(--col-width);
181
79
  }
182
80
  }
183
81
  .form-row + .form-row {
package/dist/layout/form-grid.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/grid/grid.mixin.scss","../../layout/form-grid/form-grid.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACFA;AAAA;AAAA;AAAA;AA0BA;AAAA;;AAAA;AAAA;AAAA;ACvBA;EACE;;;AAGF;EDEE;EACA;EACA,KFgBgB;;AIThB;EDXF;IDOI,KFca;;;AIVf;EDXF;IDWI,KFWY;;;AIXd;EDXF;IDeI,KFQY;;;AGpBd;EDyBA;EACA,WAHY;;AEfZ;EDRA;ID+BE;IACA,WAHW;;;AErBb;EDRA;IDsCE;IACA,WAHU;;;AE5BZ;EDRA;ID6CE;IACA,WAHU;;;ACtCZ;EDoBA;EACA,WAHY;;AEfZ;EDHA;ID0BE;IACA,WAHW;;;AErBb;EDHA;IDiCE;IACA,WAHU;;;AE5BZ;EDHA;IDwCE;IACA,WAHU;;;AClCZ;EDgBA;EACA,WAHY;;AEfZ;EDCA;IDsBE;IACA,WAHW;;;AErBb;EDCA;ID6BE;IACA,WAHU;;;AE5BZ;EDCA;IDoCE;IACA,WAHU;;;AC7BZ;EDWA;EACA,WAHY;;AEfZ;EDMA;IDiBE;IACA,WAHW;;;AErBb;EDMA;IDwBE;IACA,WAHU;;;AE5BZ;EDMA;ID+BE;IACA,WAHU;;;ACzBZ;EDOA;EACA,WAHY;;AEfZ;EDUA;IDaE;IACA,WAHW;;;AErBb;EDUA;IDoBE;IACA,WAHU;;;AE5BZ;EDUA;ID2BE;IACA,WAHU;;;AEnCZ;EDcA;AAAA;AAAA;AAAA;IDGA;IACA,WAHY;;;AEfZ;EDcA;AAAA;AAAA;AAAA;IDSE;IACA,WAHW;;;AErBb;EDcA;AAAA;AAAA;AAAA;IDgBE;IACA,WAHU;;;AE5BZ;EDcA;AAAA;AAAA;AAAA;IDuBE;IACA,WAHU;;;ACZZ;EACE","file":"form-grid.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/grid/grid.mixin.scss","../../layout/form-grid/form-grid.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACFA;AAAA;AAAA;AAAA;AA+BA;AAAA;;AAAA;AAAA;AAAA;AC5BA;EACE;;;AAGF;EDIE;EACA;EAIA;;ACNA;EDiCA;EACA;AAAA;AAAA;AAAA;EAKA;EACA;;ACnCA;ED4BA;EACA;AAAA;AAAA;AAAA;EAKA;EACA;;AC/BA;EDwBA;EACA;AAAA;AAAA;AAAA;EAKA;EACA;;AC1BA;EDmBA;EACA;AAAA;AAAA;AAAA;EAKA;EACA;;ACtBA;EDeA;EACA;AAAA;AAAA;AAAA;EAKA;EACA;;AEhCA;EDcA;AAAA;AAAA;AAAA;IDWA;IACA;AAAA;AAAA;AAAA;IAKA;IACA;;;ACTA;EACE","file":"form-grid.css"}