Skip to content

Commit 52a53fd

Browse files
linspwlinspw
committed
feat: try use rollup
1 parent ee5fb14 commit 52a53fd

File tree

19 files changed

+1047
-20
lines changed

19 files changed

+1047
-20
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"@babel/plugin-transform-runtime": "^7.16.7",
3232
"@babel/preset-env": "^7.16.7",
3333
"@rollup/plugin-alias": "^3.1.9",
34+
"@rollup/plugin-image": "^2.1.1",
3435
"@rollup/plugin-node-resolve": "^13.1.3",
3536
"@storybook/addon-actions": "^6.4.9",
3637
"@storybook/addon-essentials": "^6.4.9",

‎rollup.config.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@ import vue from "rollup-plugin-vue";
22
import peerDepsExternal from "rollup-plugin-peer-deps-external";
33
import { nodeResolve } from "@rollup/plugin-node-resolve";
44
import RollupAlias from "@rollup/plugin-alias";
5-
const { alias } = require("./configs/.project/alias-config");
5+
const { alias } = require("./configs/project/alias-config");
66
import scss from "rollup-plugin-scss";
7+
import image from '@rollup/plugin-image';
8+
9+
// const customResolver = nodeResolve({
10+
// extensions: ['.mjs', '.js', '.jsx', '.json', '.sass', '.scss']
11+
// });
712

813
export default [
914
{
@@ -19,11 +24,12 @@ export default [
1924
},
2025
],
2126
plugins: [
27+
RollupAlias({ entries: alias }),
28+
image(),
2229
vue(),
2330
peerDepsExternal(),
24-
nodeResolve(),
25-
RollupAlias({ entries: alias }),
2631
scss(),
32+
nodeResolve(),
2733
],
2834
},
2935
];

‎src/components/atoms/avatar/avatar.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,3 +97,98 @@ export default {
9797
},
9898
};
9999
</script>
100+
101+
<style lang="scss">
102+
.h-avatar {
103+
--h-avatar-width: none;
104+
--h-avatar-height: none;
105+
--h-avatar-border-radius: none;
106+
--h-avatar-overflow: hidden;
107+
--h-avatar-marging: 0;
108+
--a-avatar__figcaption-background-color: black;
109+
--a-avatar__figcaption-color: white;
110+
--a-avatar__figcaption-text-align: center;
111+
112+
border-radius: var(--h-avatar-border-radius);
113+
height: var(--h-avatar-height);
114+
margin: var(--h-avatar-marging);
115+
overflow: var(--h-avatar-overflow);
116+
position: relative;
117+
width: var(--h-avatar-width);
118+
119+
&__image {
120+
height:100%;
121+
width:100%;
122+
}
123+
124+
&__figcaption {
125+
background-color: var(--a-avatar__figcaption-background-color);
126+
bottom: 0;
127+
color: var(--a-avatar__figcaption-color);
128+
left: 0;
129+
position: absolute;
130+
text-align: var(--a-avatar__figcaption-text-align);
131+
width: 100%;
132+
}
133+
134+
&--behavior {
135+
&-rounded {
136+
--h-avatar-border-radius: var(--border-radius-circle);
137+
}
138+
&-square {
139+
--h-avatar-border-radius: none;
140+
}
141+
}
142+
143+
&--size {
144+
&-medium {
145+
--h-avatar-width: var(--size-base-medium);
146+
--h-avatar-height: var(--size-base-medium);
147+
}
148+
&-large {
149+
--h-avatar-width: var(--size-base-large);
150+
--h-avatar-height: var(--size-base-large);
151+
}
152+
&-extra-large {
153+
--h-avatar-width: var(--size-base-extra-large);
154+
--h-avatar-height: var(--size-base-extra-large);
155+
}
156+
&-jumbo {
157+
--h-avatar-width: var(--size-base-jumbo);
158+
--h-avatar-height: var(--size-base-jumbo);
159+
}
160+
&-extra-jumbo {
161+
--h-avatar-width: var(--size-base-extra-jumbo);
162+
--h-avatar-height: var(--size-base-extra-jumbo);
163+
}
164+
&-giant {
165+
--h-avatar-width: var(--size-base-giant);
166+
--h-avatar-height: var(--size-base-giant);
167+
}
168+
&-extra-giant {
169+
--h-avatar-width: var(--size-base-extra-giant);
170+
--h-avatar-height: var(--size-base-extra-giant);
171+
}
172+
&-colossal {
173+
--h-avatar-width: var(--size-base-colossal);
174+
--h-avatar-height: var(--size-base-colossal);
175+
}
176+
&-extra-colossal {
177+
--h-avatar-width: var(--size-base-extra-colossal);
178+
--h-avatar-height: var(--size-base-extra-colossal);
179+
}
180+
&-mega {
181+
--h-avatar-width: var(--size-base-mega);
182+
--h-avatar-height: var(--size-base-mega);
183+
}
184+
&-extra-mega {
185+
--h-avatar-width: var(--size-base-extra-mega);
186+
--h-avatar-height: var(--size-base-extra-mega);
187+
}
188+
&-immense {
189+
--h-avatar-width: var(--size-base-immense);
190+
--h-avatar-height: var(--size-base-immense);
191+
}
192+
}
193+
}
194+
</style>

‎src/components/atoms/badge/badge.vue‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,140 @@ export default {
6868
},
6969
};
7070
</script>
71+
72+
<style lang="scss">
73+
.h-badge {
74+
--h-badge--width: fit-content;
75+
--h-badge--height: fit-content;
76+
77+
align-items: center;
78+
background-color: var(--h-badge--background-color);
79+
border-radius: 50%;
80+
color: var(--h-badge--color);
81+
display: flex;
82+
font-size: var(--h-badge--font-size);
83+
font-weight: bold;
84+
min-height: var(--h-badge--height);
85+
max-height: fit-content;
86+
justify-content: center;
87+
max-width: fit-content;
88+
min-width: var(--h-badge--width);
89+
padding: var(--h-badge--padding);
90+
position: relative;
91+
92+
&--size {
93+
&-medium {
94+
--h-badge--font-size: calc(var(--size-base-medium) / 2);
95+
--h-badge--padding: calc(var(--size-base-medium) / 8);
96+
--h-badge--width: var(--size-base-medium);
97+
--h-badge--height: var(--size-base-medium);
98+
}
99+
&-large {
100+
--h-badge--font-size: calc(var(--size-base-large) / 2);
101+
--h-badge--padding: calc(var(--size-base-large) / 8);
102+
--h-badge--width: var(--size-base-large);
103+
--h-badge--height: var(--size-base-large);
104+
}
105+
&-extra-large {
106+
--h-badge--font-size: calc(var(--size-base-extra-large) / 2);
107+
--h-badge--padding: calc(var(--size-base-extra-large) / 8);
108+
--h-badge--width: var(--size-base-extra-large);
109+
--h-badge--height: var(--size-base-extra-large);
110+
}
111+
&-jumbo {
112+
--h-badge--font-size: calc(var(--size-base-jumbo) / 2);
113+
--h-badge--padding: calc(var(--size-base-jumbo) / 8);
114+
--h-badge--width: var(--size-base-jumbo);
115+
--h-badge--height: var(--size-base-jumbo);
116+
}
117+
&-extra-jumbo {
118+
--h-badge--font-size: calc(var(--size-base-extra-jumbo) / 2);
119+
--h-badge--padding: calc(var(--size-base-extra-jumbo) / 8);
120+
--h-badge--width: var(--size-base-extra-jumbo);
121+
--h-badge--height: var(--size-base-extra-jumbo);
122+
}
123+
&-giant {
124+
--h-badge--font-size: calc(var(--size-base-giant) / 2);
125+
--h-badge--padding: calc(var(--size-base-giant) / 8);
126+
--h-badge--width: var(--size-base-giant);
127+
--h-badge--height: var(--size-base-giant);
128+
}
129+
&-extra-giant {
130+
--h-badge--font-size: calc(var(--size-base-extra-giant) / 2);
131+
--h-badge--padding: calc(var(--size-base-extra-giant) / 8);
132+
--h-badge--width: var(--size-base-extra-giant);
133+
--h-badge--height: var(--size-base-extra-giant);
134+
}
135+
&-colossal {
136+
--h-badge--font-size: calc(var(--size-base-colossal) / 2);
137+
--h-badge--padding: calc(var(--size-base-colossal) / 8);
138+
--h-badge--width: var(--size-base-colossal);
139+
--h-badge--height: var(--size-base-colossal);
140+
}
141+
&-extra-colossal {
142+
--h-badge--font-size: calc(var(--size-base-extra-colossal) / 2);
143+
--h-badge--padding: calc(var(--size-base-extra-colossal) / 8);
144+
--h-badge--width: var(--size-base-extra-colossal);
145+
--h-badge--height: var(--size-base-extra-colossal);
146+
}
147+
&-mega {
148+
--h-badge--font-size: calc(var(--size-base-mega) / 2);
149+
--h-badge--padding: calc(var(--size-base-mega) / 8);
150+
--h-badge--width: var(--size-base-mega);
151+
--h-badge--height: var(--size-base-mega);
152+
}
153+
&-extra-mega {
154+
--h-badge--font-size: calc(var(--size-base-extra-mega) / 2);
155+
--h-badge--padding: calc(var(--size-base-extra-mega) / 8);
156+
--h-badge--width: var(--size-base-extra-mega);
157+
--h-badge--height: var(--size-base-extra-mega);
158+
}
159+
&-immense {
160+
--h-badge--font-size: calc(var(--size-base-immense) / 2);
161+
--h-badge--padding: calc(var(--size-base-immense) / 8);
162+
--h-badge--width: var(--size-base-immense);
163+
--h-badge--height: var(--size-base-immense);
164+
}
165+
}
166+
167+
&--variant {
168+
&-default {
169+
--h-badge--background-color: var(--color-theme-secondary);
170+
--h-badge--color: var(--colors-original-white);
171+
}
172+
173+
&-success {
174+
--h-badge--background-color: var(--color-theme-success);
175+
}
176+
177+
&-info {
178+
--h-badge--background-color: var(--color-theme-info);
179+
}
180+
181+
&-danger {
182+
--h-badge--background-color: var(--color-theme-danger);
183+
}
184+
185+
&-warn {
186+
--h-badge--background-color: var(--color-theme-warn);
187+
}
188+
189+
&-primary {
190+
--h-badge--background-color: var(--color-theme-primary);
191+
--h-badge--color: var(--colors-original-white);
192+
}
193+
194+
&-secondary {
195+
--h-badge--background-color: var(--color-theme-secondary);
196+
}
197+
198+
&-tertiary {
199+
--h-badge--background-color: var(--color-theme-tertiary);
200+
}
201+
}
202+
}
203+
204+
.h-badge__icon {
205+
margin-left: var(--size-base-extra-small);
206+
}
207+
</style>

0 commit comments

Comments
 (0)