Skip to content

Commit 92bd835

Browse files
CorentinThCorentinTh
committed
feat(ui-lib): demo pages for c-lib components
1 parent e88c1d5 commit 92bd835

File tree

14 files changed

+286
-240
lines changed

14 files changed

+286
-240
lines changed

‎components.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,21 @@ declare module '@vue/runtime-core' {
2121
Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
2222
CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
2323
CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
24+
'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default']
2425
CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
26+
'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default']
2527
ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
2628
Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
2729
CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
30+
'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default']
2831
CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
2932
ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
3033
ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
3134
CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']
3235
CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
3336
DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
37+
'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default']
38+
DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
3439
DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
3540
DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default']
3641
DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']

‎src/config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ export const config = figue({
2323
env: {
2424
doc: 'Application current env',
2525
format: 'enum',
26-
values: ['production', 'development', 'test'],
26+
values: ['production', 'development', 'preview', 'test'],
2727
default: 'development',
28-
env: 'MODE',
28+
env: 'VITE_VERCEL_ENV',
2929
},
3030
},
3131
plausible: {

‎src/router.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import HomePage from './pages/Home.page.vue';
44
import NotFound from './pages/404.page.vue';
55
import { tools } from './tools';
66
import { config } from './config';
7+
import { routes as demoRoutes } from './ui/demo/demo.routes';
78

89
const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({
910
path,
@@ -32,6 +33,7 @@ const router = createRouter({
3233
},
3334
...toolsRoutes,
3435
...toolsRedirectRoutes,
36+
...(config.app.env === 'development' ? demoRoutes : []),
3537
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
3638
],
3739
});

‎src/ui/c-button/c-button.demo.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div v-for="buttonVariant of buttonVariants" :key="buttonVariant">
3+
<h2>{{ _.capitalize(buttonVariant) }}</h2>
4+
5+
<c-button v-for="buttonType of buttonTypes" :key="buttonType" :variant="buttonVariant" :type="buttonType" mx-1>
6+
Button
7+
</c-button>
8+
9+
<c-button
10+
v-for="buttonType of buttonTypes"
11+
:key="buttonType"
12+
:variant="buttonVariant"
13+
:type="buttonType"
14+
circle
15+
mx-1
16+
>
17+
A
18+
</c-button>
19+
</div>
20+
</template>
21+
22+
<script lang="ts" setup>
23+
import _ from 'lodash';
24+
25+
const buttonVariants = ['basic', 'text'];
26+
const buttonTypes = ['default', 'primary'];
27+
</script>
28+
29+
<style lang="less" scoped></style>

‎src/ui/c-button/c-button.theme.ts‎

Lines changed: 64 additions & 228 deletions
Original file line numberDiff line numberDiff line change
@@ -1,240 +1,76 @@
1+
import { darken, lighten } from '../color/color.models';
12
import { defineThemes } from '../theme/theme.models';
23
import { appThemes } from '../theme/themes';
34

4-
export const { useTheme } = defineThemes({
5-
dark: {
6-
basic: {
7-
default: {
8-
textColor: appThemes.dark.text.baseColor,
9-
backgroundColor: 'rgba(255, 255, 255, 0.08)',
10-
11-
hover: {
12-
textColor: appThemes.dark.text.baseColor,
13-
backgroundColor: 'rgba(255, 255, 255, 0.12)',
14-
},
15-
16-
pressed: {
17-
textColor: appThemes.dark.text.baseColor,
18-
backgroundColor: 'rgba(255, 255, 255, 0.24)',
19-
},
20-
21-
outline: {
22-
color: appThemes.dark.primary.color,
23-
},
24-
},
25-
26-
primary: {
27-
textColor: appThemes.dark.text.baseColor,
28-
backgroundColor: appThemes.dark.primary.color,
29-
30-
hover: {
31-
textColor: appThemes.dark.text.baseColor,
32-
backgroundColor: appThemes.dark.primary.colorHover,
33-
},
34-
35-
pressed: {
36-
textColor: appThemes.dark.text.baseColor,
37-
backgroundColor: appThemes.dark.primary.colorPressed,
38-
},
39-
40-
outline: {
41-
color: appThemes.dark.primary.color,
42-
},
43-
},
44-
45-
warning: {
46-
textColor: appThemes.dark.text.baseColor,
47-
backgroundColor: appThemes.dark.warning.color,
48-
49-
hover: {
50-
textColor: appThemes.dark.text.baseColor,
51-
backgroundColor: appThemes.dark.warning.colorHover,
52-
},
53-
54-
pressed: {
55-
textColor: appThemes.dark.text.baseColor,
56-
backgroundColor: appThemes.dark.warning.colorPressed,
57-
},
58-
59-
outline: {
60-
color: appThemes.dark.warning.color,
61-
},
62-
},
63-
},
64-
65-
text: {
66-
default: {
67-
textColor: appThemes.dark.text.baseColor,
68-
backgroundColor: 'transparent',
69-
70-
hover: {
71-
textColor: appThemes.dark.text.baseColor,
72-
backgroundColor: 'rgba(255, 255, 255, 0.12)',
73-
},
74-
75-
pressed: {
76-
textColor: appThemes.dark.text.baseColor,
77-
backgroundColor: 'rgba(255, 255, 255, 0.82)',
78-
},
79-
80-
outline: {
81-
color: appThemes.dark.primary.color,
82-
},
83-
},
84-
85-
primary: {
86-
textColor: appThemes.dark.text.baseColor,
87-
backgroundColor: appThemes.dark.primary.color,
88-
89-
hover: {
90-
textColor: appThemes.dark.text.baseColor,
91-
backgroundColor: appThemes.dark.primary.colorHover,
92-
},
93-
94-
pressed: {
95-
textColor: appThemes.dark.text.baseColor,
96-
backgroundColor: appThemes.dark.primary.colorPressed,
97-
},
98-
99-
outline: {
100-
color: appThemes.dark.primary.color,
101-
},
102-
},
103-
104-
warning: {
105-
textColor: appThemes.dark.text.baseColor,
106-
backgroundColor: appThemes.dark.warning.color,
107-
108-
hover: {
109-
textColor: appThemes.dark.text.baseColor,
110-
backgroundColor: appThemes.dark.warning.colorHover,
111-
},
5+
const createState = ({
6+
textColor,
7+
backgroundColor,
8+
hoverBackground,
9+
hoveredTextColor = textColor,
10+
pressedBackground,
11+
pressedTextColor = textColor,
12+
}: {
13+
textColor: string;
14+
backgroundColor: string;
15+
hoverBackground: string;
16+
hoveredTextColor?: string;
17+
pressedBackground: string;
18+
pressedTextColor?: string;
19+
}) => ({
20+
textColor,
21+
backgroundColor,
22+
hover: { textColor: hoveredTextColor, backgroundColor: hoverBackground },
23+
pressed: { textColor: pressedTextColor, backgroundColor: pressedBackground },
24+
});
11225

113-
pressed: {
114-
textColor: appThemes.dark.text.baseColor,
115-
backgroundColor: appThemes.dark.warning.colorPressed,
116-
},
26+
const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
27+
const theme = appThemes[style];
11728

118-
outline: {
119-
color: appThemes.dark.warning.color,
120-
},
121-
},
122-
},
123-
},
124-
light: {
29+
return {
12530
basic: {
126-
default: {
127-
textColor: appThemes.light.text.baseColor,
128-
backgroundColor: 'rgba(46, 51, 56, 0.05)',
129-
130-
hover: {
131-
textColor: appThemes.light.text.baseColor,
132-
backgroundColor: 'rgba(46, 51, 56, 0.09)',
133-
},
134-
135-
pressed: {
136-
textColor: appThemes.light.text.baseColor,
137-
backgroundColor: 'rgba(46, 51, 56, 0.22)',
138-
},
139-
140-
outline: {
141-
color: appThemes.light.primary.color,
142-
},
143-
},
144-
145-
primary: {
146-
textColor: appThemes.dark.text.baseColor,
147-
backgroundColor: appThemes.light.primary.color,
148-
149-
hover: {
150-
textColor: appThemes.dark.text.baseColor,
151-
backgroundColor: appThemes.light.primary.colorHover,
152-
},
153-
154-
pressed: {
155-
textColor: appThemes.dark.text.baseColor,
156-
backgroundColor: appThemes.light.primary.colorPressed,
157-
},
158-
159-
outline: {
160-
color: appThemes.light.primary.color,
161-
},
162-
},
163-
164-
warning: {
165-
textColor: appThemes.dark.text.baseColor,
166-
backgroundColor: appThemes.light.warning.color,
167-
168-
hover: {
169-
textColor: appThemes.dark.text.baseColor,
170-
backgroundColor: appThemes.light.warning.colorHover,
171-
},
172-
173-
pressed: {
174-
textColor: appThemes.dark.text.baseColor,
175-
backgroundColor: appThemes.light.warning.colorPressed,
176-
},
177-
178-
outline: {
179-
color: appThemes.light.warning.color,
180-
},
181-
},
31+
default: createState({
32+
textColor: theme.text.baseColor,
33+
backgroundColor: theme.default.color,
34+
hoverBackground: theme.default.colorHover,
35+
pressedBackground: theme.default.colorPressed,
36+
}),
37+
primary: createState({
38+
textColor: theme.primary.color,
39+
backgroundColor: theme.primary.colorFaded,
40+
hoverBackground: lighten(theme.primary.colorFaded, 30),
41+
pressedBackground: darken(theme.primary.colorFaded, 30),
42+
}),
43+
warning: createState({
44+
textColor: theme.text.baseColor,
45+
backgroundColor: theme.warning.color,
46+
hoverBackground: theme.warning.colorHover,
47+
pressedBackground: theme.warning.colorPressed,
48+
}),
18249
},
18350
text: {
184-
default: {
185-
textColor: appThemes.light.text.baseColor,
51+
default: createState({
52+
textColor: theme.text.baseColor,
18653
backgroundColor: 'transparent',
187-
188-
hover: {
189-
textColor: appThemes.light.text.baseColor,
190-
backgroundColor: 'rgba(46, 51, 56, 0.09)',
191-
},
192-
193-
pressed: {
194-
textColor: appThemes.light.text.baseColor,
195-
backgroundColor: 'rgba(46, 51, 56, 0.13)',
196-
},
197-
198-
outline: {
199-
color: appThemes.light.primary.color,
200-
},
201-
},
202-
primary: {
203-
textColor: appThemes.light.primary.color,
204-
backgroundColor: 'transparent',
205-
206-
hover: {
207-
textColor: appThemes.light.primary.colorHover,
208-
backgroundColor: 'rgba(46, 51, 56, 0.09)',
209-
},
210-
211-
pressed: {
212-
textColor: appThemes.light.primary.colorPressed,
213-
backgroundColor: 'rgba(46, 51, 56, 0.13)',
214-
},
215-
216-
outline: {
217-
color: appThemes.light.primary.color,
218-
},
219-
},
220-
warning: {
221-
textColor: appThemes.light.warning.color,
54+
hoverBackground: theme.default.colorHover,
55+
pressedBackground: theme.default.colorPressed,
56+
}),
57+
primary: createState({
58+
textColor: theme.primary.color,
22259
backgroundColor: 'transparent',
223-
224-
hover: {
225-
textColor: appThemes.light.warning.colorHover,
226-
backgroundColor: 'rgba(46, 51, 56, 0.09)',
227-
},
228-
229-
pressed: {
230-
textColor: appThemes.light.warning.colorPressed,
231-
backgroundColor: 'rgba(46, 51, 56, 0.13)',
232-
},
233-
234-
outline: {
235-
color: appThemes.light.warning.color,
236-
},
237-
},
60+
hoverBackground: theme.primary.colorFaded,
61+
pressedBackground: darken(theme.primary.colorFaded, 30),
62+
}),
63+
warning: createState({
64+
textColor: theme.text.baseColor,
65+
backgroundColor: theme.warning.color,
66+
hoverBackground: theme.warning.colorHover,
67+
pressedBackground: theme.warning.colorPressed,
68+
}),
23869
},
239-
},
70+
};
71+
};
72+
73+
export const { useTheme } = defineThemes({
74+
dark: createTheme({ style: 'dark' }),
75+
light: createTheme({ style: 'light' }),
24076
});

0 commit comments

Comments
 (0)