@energie360/ui-library 0.1.19 → 0.1.20

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 (10) hide show
  1. package/components/card-price/u-card-price.vue +8 -4
  2. package/components/download-list-item/download-list-item.scss +36 -36
  3. package/components/hint/hint.scss +85 -91
  4. package/components/hint/u-hint.vue +0 -2
  5. package/components/index.js +0 -6
  6. package/components/inline-edit/inline-edit.scss +2 -2
  7. package/components/inline-edit/u-inline-edit.vue +0 -1
  8. package/elements/numeric-stepper/u-numeric-stepper.vue +2 -0
  9. package/layout/portal/portal.scss +2 -2
  10. package/package.json +1 -1
package/components/card-price/u-card-price.vue CHANGED
@@ -18,12 +18,16 @@ defineProps<Props>()
18
18
  {{ priceText }}
19
19
  </div>
20
20
 
21
- <div v-if="priceSubtext" class="card-price__subtext">
22
- {{ priceSubtext }}
21
+ <div v-if="$slots.priceSubtext || priceSubtext" class="card-price__subtext">
22
+ <slot name="priceSubtext">
23
+ <div v-html="priceSubtext"></div>
24
+ </slot>
23
25
  </div>
24
26
 
25
- <div v-if="description" class="card-price__description">
26
- {{ description }}
27
+ <div v-if="$slots.description || description" class="card-price__description">
28
+ <slot name="description">
29
+ <div v-html="description"></div>
30
+ </slot>
27
31
  </div>
28
32
  </div>
29
33
 
package/components/download-list-item/download-list-item.scss CHANGED
@@ -1,51 +1,51 @@
1
1
  @use '../../base/abstracts' as a;
2
2
 
3
- .download-list-item {
4
- @keyframes arrow-anim {
5
- 0% {
6
- transform: translateY(-30%);
7
- opacity: 0.2;
8
- }
3
+ @keyframes arrow-anim {
4
+ 0% {
5
+ transform: translateY(-30%);
6
+ opacity: 0.2;
7
+ }
9
8
 
10
- 80% {
11
- transform: translateY(0);
12
- opacity: 1;
13
- }
9
+ 80% {
10
+ transform: translateY(0);
11
+ opacity: 1;
12
+ }
14
13
 
15
- 100% {
16
- transform: translateY(2%);
17
- opacity: 1;
18
- }
14
+ 100% {
15
+ transform: translateY(2%);
16
+ opacity: 1;
19
17
  }
18
+ }
20
19
 
21
- @keyframes hide-download {
22
- 0% {
23
- transform: none;
24
- transform-origin: bottom center;
25
- opacity: 1;
26
- }
20
+ @keyframes hide-download {
21
+ 0% {
22
+ transform: none;
23
+ transform-origin: bottom center;
24
+ opacity: 1;
25
+ }
27
26
 
28
- 100% {
29
- transform: rotate(60deg);
30
- transform-origin: bottom center;
31
- opacity: 0;
32
- }
27
+ 100% {
28
+ transform: rotate(60deg);
29
+ transform-origin: bottom center;
30
+ opacity: 0;
33
31
  }
32
+ }
34
33
 
35
- @keyframes show-check {
36
- 0% {
37
- transform: rotate(-60deg);
38
- transform-origin: bottom center;
39
- opacity: 0;
40
- }
34
+ @keyframes show-check {
35
+ 0% {
36
+ transform: rotate(-60deg);
37
+ transform-origin: bottom center;
38
+ opacity: 0;
39
+ }
41
40
 
42
- 100% {
43
- transform: rotate(0);
44
- transform-origin: bottom center;
45
- opacity: 1;
46
- }
41
+ 100% {
42
+ transform: rotate(0);
43
+ transform-origin: bottom center;
44
+ opacity: 1;
47
45
  }
46
+ }
48
47
 
48
+ .download-list-item {
49
49
  position: relative;
50
50
  transform: scale(1); // Safari hack
51
51
  height: a.rem(64);
package/components/hint/hint.scss CHANGED
@@ -3,66 +3,57 @@
3
3
  @use '../../base/abstracts' as a;
4
4
  @use '../../elements/text-link/text-link.scss' as t;
5
5
 
6
- .hint {
7
- @mixin type-neutral {
8
- background-color: var(--e-c-secondary-05-100);
9
- color: var(--e-c-secondary-05-900);
6
+ @mixin type-neutral {
7
+ background-color: var(--e-c-secondary-05-100);
8
+ color: var(--e-c-secondary-05-900);
10
9
 
11
- &::before {
12
- background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8h-2V7h2v2Z' fill='%230096DC'/%3E%3C/svg%3E");
13
- }
10
+ &::before {
11
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8h-2V7h2v2Z' fill='%230096DC'/%3E%3C/svg%3E");
12
+ }
14
13
 
15
- .hint__richtext {
16
- margin-left: var(--e-space-9);
14
+ .hint__richtext {
15
+ margin-left: var(--e-space-9);
17
16
 
18
- @include a.bp(lg) {
19
- margin-left: 0;
20
- }
17
+ @include a.bp(lg) {
18
+ margin-left: 0;
21
19
  }
20
+ }
22
21
 
23
- // override some richtext styles.
24
- .richtext {
25
- a {
26
- font-size: 100px;
27
- color: inherit;
22
+ // override some richtext styles.
23
+ .richtext {
24
+ a {
25
+ font-size: 100px;
26
+ color: inherit;
28
27
 
29
- &:active,
30
- &:hover {
31
- text-decoration-color: var(--e-c-secondary-05-200);
32
- }
28
+ &:active,
29
+ &:hover {
30
+ text-decoration-color: var(--e-c-secondary-05-200);
33
31
  }
34
32
  }
35
33
  }
34
+ }
36
35
 
37
- @mixin type-warning {
38
- background-color: var(--e-c-signal-02-100);
39
- color: var(--e-c-signal-02-900);
36
+ @mixin type-warning {
37
+ background-color: var(--e-c-signal-02-100);
38
+ color: var(--e-c-signal-02-900);
40
39
 
41
- &::before {
42
- background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21 12 2l11 19H1Zm11-3c.283 0 .52-.096.713-.288A.968.968 0 0 0 13 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 12 16a.968.968 0 0 0-.713.288A.968.968 0 0 0 11 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm-1-3h2v-5h-2v5Z' fill='%23FF9800'/%3E%3C/svg%3E");
43
- }
40
+ &::before {
41
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21 12 2l11 19H1Zm11-3c.283 0 .52-.096.713-.288A.968.968 0 0 0 13 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 12 16a.968.968 0 0 0-.713.288A.968.968 0 0 0 11 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm-1-3h2v-5h-2v5Z' fill='%23FF9800'/%3E%3C/svg%3E");
42
+ }
44
43
 
45
- .hint__richtext {
46
- margin-left: var(--e-space-9);
44
+ .hint__richtext {
45
+ margin-left: var(--e-space-9);
47
46
 
48
- @include a.bp(lg) {
49
- margin-left: 0;
50
- }
47
+ @include a.bp(lg) {
48
+ margin-left: 0;
51
49
  }
50
+ }
52
51
 
53
- // override some richtext styles.
54
- .richtext {
55
- a {
56
- color: inherit;
57
-
58
- &:active,
59
- &:hover {
60
- text-decoration-color: var(--e-c-signal-02-100);
61
- }
62
- }
63
- }
52
+ // override some richtext styles.
53
+ .richtext {
54
+ a {
55
+ color: inherit;
64
56
 
65
- .hint__link {
66
57
  &:active,
67
58
  &:hover {
68
59
  text-decoration-color: var(--e-c-signal-02-100);
@@ -70,47 +61,63 @@
70
61
  }
71
62
  }
72
63
 
73
- @mixin type-legal {
74
- background-color: var(--e-c-mono-00);
75
- border: 1px solid var(--e-c-mono-500);
76
- border-left-width: 4px;
77
- border-left-color: var(--e-c-mono-700);
78
- color: var(--e-c-mono-900);
79
-
80
- &::before {
81
- background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12.86 3.404-.81.81 3.352 3.352.81-.81-3.353-3.352Zm.707-1.697a1 1 0 0 0-1.415 0l-1.8 1.8a1 1 0 0 0-.01 1.404L6.952 8.303a1 1 0 0 0-1.404.01l-1.84 1.84a1 1 0 0 0 0 1.414l4.342 4.342a1 1 0 0 0 1.414 0l1.84-1.84a1 1 0 0 0 0-1.414l-.092-.092.93-.93L20.6 20l1.4-1.4-8.46-8.366 1.063-1.062.091.091a1 1 0 0 0 1.415 0l1.8-1.8a1 1 0 0 0 0-1.414l-4.342-4.342ZM6.253 10.01l-.85.85 3.352 3.352.85-.85-3.352-3.352Zm1.975-.581 3.235-3.235L13.32 8.05l-3.235 3.235L8.23 9.429ZM16 21H4v-2h12v2Z' fill='%236B6B6B'/%3E%3C/svg%3E");
82
- top: 0;
83
- left: calc(
84
- -24px - 12px - 4px
85
- ); // 24px: icon width, 12px: distance to box, 4px: additonal border-width
64
+ .hint__link {
65
+ &:active,
66
+ &:hover {
67
+ text-decoration-color: var(--e-c-signal-02-100);
86
68
  }
69
+ }
70
+ }
87
71
 
88
- > p,
89
- .richtext {
90
- margin-left: 0;
91
- }
72
+ @mixin type-legal {
73
+ background-color: var(--e-c-mono-00);
74
+ border: 1px solid var(--e-c-mono-500);
75
+ border-left-width: 4px;
76
+ border-left-color: var(--e-c-mono-700);
77
+ color: var(--e-c-mono-900);
92
78
 
93
- .hint__link {
94
- &:active,
95
- &:hover {
96
- text-decoration-color: var(--e-c-mono-100);
97
- }
79
+ &::before {
80
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12.86 3.404-.81.81 3.352 3.352.81-.81-3.353-3.352Zm.707-1.697a1 1 0 0 0-1.415 0l-1.8 1.8a1 1 0 0 0-.01 1.404L6.952 8.303a1 1 0 0 0-1.404.01l-1.84 1.84a1 1 0 0 0 0 1.414l4.342 4.342a1 1 0 0 0 1.414 0l1.84-1.84a1 1 0 0 0 0-1.414l-.092-.092.93-.93L20.6 20l1.4-1.4-8.46-8.366 1.063-1.062.091.091a1 1 0 0 0 1.415 0l1.8-1.8a1 1 0 0 0 0-1.414l-4.342-4.342ZM6.253 10.01l-.85.85 3.352 3.352.85-.85-3.352-3.352Zm1.975-.581 3.235-3.235L13.32 8.05l-3.235 3.235L8.23 9.429ZM16 21H4v-2h12v2Z' fill='%236B6B6B'/%3E%3C/svg%3E");
81
+ top: 0;
82
+ left: calc(
83
+ -24px - 12px - 4px
84
+ ); // 24px: icon width, 12px: distance to box, 4px: additonal border-width
85
+ }
86
+
87
+ > p,
88
+ .richtext {
89
+ margin-left: 0;
90
+ }
91
+
92
+ .hint__link {
93
+ &:active,
94
+ &:hover {
95
+ text-decoration-color: var(--e-c-mono-100);
98
96
  }
97
+ }
99
98
 
100
- @include a.bp(lg) {
101
- margin-top: calc(4px + 4px + 24px);
102
- border: 1px solid var(--e-c-mono-500);
103
- border-top-width: 4px;
104
- border-top-color: var(--e-c-mono-700);
105
-
106
- &::before {
107
- left: 0;
108
- top: calc(
109
- -24px - 4px - 4px
110
- ); // 24px: icon height, 12px: distance to box, 4px: additonal border-width
111
- }
99
+ @include a.bp(lg) {
100
+ margin-top: calc(4px + 4px + 24px);
101
+ border: 1px solid var(--e-c-mono-500);
102
+ border-top-width: 4px;
103
+ border-top-color: var(--e-c-mono-700);
104
+
105
+ &::before {
106
+ left: 0;
107
+ top: calc(
108
+ -24px - 4px - 4px
109
+ ); // 24px: icon height, 12px: distance to box, 4px: additonal border-width
112
110
  }
113
111
  }
112
+ }
113
+
114
+ .hint {
115
+ position: relative;
116
+ padding: var(--e-space-5) var(--e-space-4);
117
+ border-radius: var(--e-brd-radius-1);
118
+
119
+ // Default type
120
+ @include type-neutral;
114
121
 
115
122
  .hint__link {
116
123
  @include t.text-link;
@@ -130,13 +137,6 @@
130
137
  }
131
138
  }
132
139
 
133
- // Default type
134
- @include type-neutral;
135
-
136
- position: relative;
137
- padding: var(--e-space-5) var(--e-space-4);
138
- border-radius: var(--e-brd-radius-1);
139
-
140
140
  .hint__label {
141
141
  + .hint__richtext {
142
142
  margin-top: var(--e-space-1);
@@ -160,12 +160,6 @@
160
160
  @include a.type(200, strong);
161
161
 
162
162
  margin-left: var(--e-space-9);
163
-
164
- // margin-bottom: var(--e-space-1);
165
-
166
- // @include a.bp(lg) {
167
- // margin-bottom: var(--e-space-2);
168
- // }
169
163
  }
170
164
 
171
165
  @include a.bp(lg) {
package/components/hint/u-hint.vue CHANGED
@@ -1,5 +1,4 @@
1
1
  <script setup lang="ts">
2
- import { useSlots } from 'vue'
3
2
  import { URichtext } from '../'
4
3
  import { Cta } from '../../elements/types'
5
4
 
@@ -11,7 +10,6 @@ interface Props {
11
10
  }
12
11
 
13
12
  const { type = 'neutral' } = defineProps<Props>()
14
- const slots = useSlots()
15
13
  </script>
16
14
 
17
15
  <template>
package/components/index.js CHANGED
@@ -1,9 +1,3 @@
1
- /**
2
- * It's not recommended to import components from this file, because tree-shaking won't work then.
3
- * -> https://vite.dev/guide/performance#avoid-barrel-files
4
- */
5
- import exp from 'node:constants'
6
-
7
1
  export { default as UAccordionItem } from './accordion-item/u-accordion-item.vue'
8
2
 
9
3
  // Cards
package/components/inline-edit/inline-edit.scss CHANGED
@@ -35,12 +35,12 @@
35
35
 
36
36
  .inline-edit__description,
37
37
  .inline-edit__summary {
38
+ color: var(--e-c-mono-700);
39
+
38
40
  @include a.type(300);
39
41
 
40
42
  // We don't need a full richtext implementation. The spacings are enough.
41
43
  @include r.richtext-spacing-rules;
42
-
43
- color: var(--e-c-mono-700);
44
44
  }
45
45
 
46
46
  .inline-edit__description {
package/components/inline-edit/u-inline-edit.vue CHANGED
@@ -1,7 +1,6 @@
1
1
  <script setup lang="ts">
2
2
  import { ref, inject, useId, watch, useTemplateRef } from 'vue'
3
3
  import { UButton } from '../../elements'
4
- import { URichtext } from '../../components'
5
4
  import { getTranslation } from '../../utils/translations/translate'
6
5
 
7
6
  interface Props {
package/elements/numeric-stepper/u-numeric-stepper.vue CHANGED
@@ -125,6 +125,7 @@ onMounted(() => {
125
125
 
126
126
  <button
127
127
  ref="stepDownButton"
128
+ type="button"
128
129
  class="stepper-button dec"
129
130
  :aria-disabled="stepButtonDownDisabled ? 'true' : 'false'"
130
131
  :disabled="stepButtonDownDisabled"
@@ -136,6 +137,7 @@ onMounted(() => {
136
137
 
137
138
  <button
138
139
  ref="stepUpButton"
140
+ type="button"
139
141
  class="stepper-button inc"
140
142
  :aria-disabled="stepButtonUpDisabled ? 'true' : 'false'"
141
143
  :disabled="stepButtonUpDisabled"
package/layout/portal/portal.scss CHANGED
@@ -30,11 +30,11 @@
30
30
  }
31
31
 
32
32
  .portal__content-container {
33
- @include c.portal-content-container;
34
-
35
33
  padding-top: var(--e-space-10);
36
34
  padding-bottom: var(--e-space-10);
37
35
 
36
+ @include c.portal-content-container;
37
+
38
38
  @include a.bp(lg) {
39
39
  padding-top: var(--e-space-8);
40
40
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@energie360/ui-library",
3
- "version": "0.1.19",
3
+ "version": "0.1.20",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",