chore: npm deps, vite 8 upgrade, lightningcss (#28183)
This commit is contained in:
Michael Geers
GitHub
parent
e269de1a7b
commit
661fd5f86e
15 changed files with 1269 additions and 1037 deletions
|
|
@ -1,3 +1,5 @@
|
|||
@import "./breakpoints.css";
|
||||
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
src: url("../font/Montserrat-Medium.woff2") format("woff2");
|
||||
|
|
@ -11,16 +13,6 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Bootstrap Breakpoints as Custom Media Queries */
|
||||
@custom-media --sm-and-up (min-width: 576px);
|
||||
@custom-media --md-and-up (min-width: 768px);
|
||||
@custom-media --lg-and-up (min-width: 992px);
|
||||
@custom-media --xl-and-up (min-width: 1200px);
|
||||
@custom-media --xxl-and-up (min-width: 1400px);
|
||||
|
||||
@custom-media --light-mode (prefers-color-scheme: light);
|
||||
@custom-media --dark-mode (prefers-color-scheme: dark);
|
||||
|
||||
:root {
|
||||
--evcc-green: #baffcb;
|
||||
--evcc-dark-green: #0fde41ff;
|
||||
|
|
@ -380,7 +372,7 @@ a:hover {
|
|||
}
|
||||
|
||||
/* breakpoint lg */
|
||||
@media (min-width: 992px) {
|
||||
@media (--lg-and-up) {
|
||||
.modal-lg,
|
||||
.modal-xl {
|
||||
--bs-modal-width: 850px;
|
||||
|
|
@ -441,7 +433,7 @@ a:hover {
|
|||
}
|
||||
|
||||
/* breakpoint sm */
|
||||
@media (min-width: 576px) {
|
||||
@media (--sm-and-up) {
|
||||
.modal-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
@ -662,7 +654,7 @@ input[list]::-webkit-list-button {
|
|||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
@media (--sm-and-up) {
|
||||
.w-sm-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
|
@ -777,7 +769,7 @@ input::-webkit-date-and-time-value {
|
|||
font-size: 8px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
@media (--sm-and-up) {
|
||||
.textarea--tiny {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
|
|
|||
9
assets/css/breakpoints.css
Normal file
9
assets/css/breakpoints.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/* Bootstrap Breakpoints as Custom Media Queries */
|
||||
@custom-media --sm-and-up (min-width: 576px);
|
||||
@custom-media --md-and-up (min-width: 768px);
|
||||
@custom-media --lg-and-up (min-width: 992px);
|
||||
@custom-media --xl-and-up (min-width: 1200px);
|
||||
@custom-media --xxl-and-up (min-width: 1400px);
|
||||
|
||||
@custom-media --light-mode (prefers-color-scheme: light);
|
||||
@custom-media --dark-mode (prefers-color-scheme: dark);
|
||||
|
|
@ -50,17 +50,21 @@ const colors: {
|
|||
],
|
||||
});
|
||||
|
||||
export const dimColor = (color: string | null) => {
|
||||
return color?.toLowerCase().replace(/ff$/, "20");
|
||||
// normalize 6-digit hex to 8-digit, then replace alpha
|
||||
const setAlpha = (color: string | null, alpha: string): string | undefined => {
|
||||
if (!color) return undefined;
|
||||
const c = color.trim().toLowerCase();
|
||||
// #rrggbb → append alpha, #rrggbbaa → replace alpha
|
||||
if (c.length === 7) return c + alpha;
|
||||
if (c.length === 9) return c.slice(0, 7) + alpha;
|
||||
return c;
|
||||
};
|
||||
|
||||
export const lighterColor = (color: string | null) => {
|
||||
return color?.toLowerCase().replace(/ff$/, "aa");
|
||||
};
|
||||
export const dimColor = (color: string | null) => setAlpha(color, "20");
|
||||
|
||||
export const fullColor = (color: string | null) => {
|
||||
return color?.toLowerCase().replace(/20$/, "ff");
|
||||
};
|
||||
export const lighterColor = (color: string | null) => setAlpha(color, "aa");
|
||||
|
||||
export const fullColor = (color: string | null) => setAlpha(color, "ff");
|
||||
|
||||
function updateCssColors() {
|
||||
const style = window.getComputedStyle(document.documentElement);
|
||||
|
|
|
|||
|
|
@ -52,13 +52,15 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../../../css/breakpoints.css";
|
||||
|
||||
.editor-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0 -1rem 0 -1.25rem;
|
||||
}
|
||||
/* reset margins on lg */
|
||||
@media (min-width: 992px) {
|
||||
@media (--lg-and-up) {
|
||||
.editor-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -414,6 +414,8 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../../../css/breakpoints.css";
|
||||
|
||||
.loadpoint {
|
||||
border-radius: 2rem;
|
||||
color: var(--evcc-default-text);
|
||||
|
|
@ -445,7 +447,7 @@ export default defineComponent({
|
|||
margin: 0 -1rem;
|
||||
}
|
||||
/* breakpoint sm */
|
||||
@media (min-width: 576px) {
|
||||
@media (--sm-and-up) {
|
||||
.divider {
|
||||
margin: 0 -1.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -190,6 +190,8 @@ export default defineComponent({
|
|||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import "../../../css/breakpoints.css";
|
||||
|
||||
.container--loadpoint:not(:empty) {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
|
@ -271,7 +273,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
/* breakpoint lg, 2-col grid */
|
||||
@media (min-width: 992px) {
|
||||
@media (--lg-and-up) {
|
||||
.carousel {
|
||||
display: grid !important;
|
||||
grid-gap: 2rem;
|
||||
|
|
|
|||
|
|
@ -135,6 +135,8 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../../../css/breakpoints.css";
|
||||
|
||||
.title-icon {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
|
@ -149,7 +151,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
/* breakpoint sm */
|
||||
@media (min-width: 576px) {
|
||||
@media (--sm-and-up) {
|
||||
.confetti-button,
|
||||
.become-sponsor {
|
||||
width: 75%;
|
||||
|
|
@ -157,7 +159,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
/* breakpoint lg */
|
||||
@media (min-width: 992px) {
|
||||
@media (--lg-and-up) {
|
||||
.confetti-button,
|
||||
.become-sponsor {
|
||||
width: 40%;
|
||||
|
|
|
|||
|
|
@ -63,13 +63,15 @@ export default defineComponent({
|
|||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import "../../../css/breakpoints.css";
|
||||
|
||||
.tile-icon {
|
||||
width: 40px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* breakpoint lg */
|
||||
@media (min-width: 992px) {
|
||||
@media (--lg-and-up) {
|
||||
.tile-icon {
|
||||
width: 70px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -436,6 +436,8 @@ export default defineComponent({
|
|||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@import "../../../css/breakpoints.css";
|
||||
|
||||
.table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
|
|
@ -461,7 +463,7 @@ export default defineComponent({
|
|||
.sticky-top {
|
||||
top: 7rem;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
@media (--lg-and-up) {
|
||||
.sticky-top {
|
||||
top: 4.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -613,12 +613,14 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../../css/breakpoints.css";
|
||||
|
||||
.log-count-input::-webkit-outer-spin-button,
|
||||
.log-count-input::-webkit-inner-spin-button {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (--md-and-up) {
|
||||
.log-lines-input {
|
||||
width: 170px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -740,6 +740,8 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../../css/breakpoints.css";
|
||||
|
||||
.header-outer {
|
||||
--vertical-shift: 0rem;
|
||||
left: 0;
|
||||
|
|
@ -752,31 +754,31 @@ export default defineComponent({
|
|||
box-shadow: 0 1px 8px 0px var(--evcc-background);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
@media (--sm-and-up) {
|
||||
.header-outer {
|
||||
--vertical-shift: calc((100vw - 560px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (--md-and-up) {
|
||||
.header-outer {
|
||||
--vertical-shift: calc((100vw - 740px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (--lg-and-up) {
|
||||
.header-outer {
|
||||
--vertical-shift: calc((100vw - 980px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (--xl-and-up) {
|
||||
.header-outer {
|
||||
--vertical-shift: calc((100vw - 1160px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
@media (--xxl-and-up) {
|
||||
.header-outer {
|
||||
--vertical-shift: calc((100vw - 1340px) / 2);
|
||||
}
|
||||
|
|
|
|||
2181
package-lock.json
generated
2181
package-lock.json
generated
File diff suppressed because it is too large
Load diff
22
package.json
22
package.json
|
|
@ -31,14 +31,14 @@
|
|||
"chart.js": "^4.5.1",
|
||||
"chartjs-adapter-dayjs-4": "^1.0.4",
|
||||
"chartjs-plugin-datalabels": "^2.2.0",
|
||||
"countup.js": "^2.9.0",
|
||||
"countup.js": "^2.10.0",
|
||||
"dayjs": "^1.11.19",
|
||||
"monaco-editor": "0.52.2",
|
||||
"smoothscroll-polyfill": "^0.4.4",
|
||||
"snarkdown": "^2.0.0",
|
||||
"vue": "^3.2.29",
|
||||
"vue-chartjs": "^5.3.3",
|
||||
"vue-i18n": "^11.2.2",
|
||||
"vue-i18n": "^11.3.0",
|
||||
"vue-router": "^5.0.2"
|
||||
},
|
||||
"overrides": {
|
||||
|
|
@ -55,8 +55,8 @@
|
|||
"@eslint/js": "^9.13.0",
|
||||
"@jest/types": "^30.2.0",
|
||||
"@playwright/test": "^1.57.0",
|
||||
"@storybook/vue3": "^10.0.8",
|
||||
"@storybook/vue3-vite": "^10.1.10",
|
||||
"@storybook/vue3": "^10.2.19",
|
||||
"@storybook/vue3-vite": "^10.2.19",
|
||||
"@types/body-parser": "^1.19.6",
|
||||
"@types/bootstrap": "^5.2.10",
|
||||
"@types/canvas-confetti": "^1.9.0",
|
||||
|
|
@ -64,13 +64,13 @@
|
|||
"@types/smoothscroll-polyfill": "^0.3.4",
|
||||
"@types/wait-on": "^5.3.4",
|
||||
"@types/ws": "^8.18.1",
|
||||
"@vitejs/plugin-legacy": "^7.2.1",
|
||||
"@vitejs/plugin-vue": "^6.0.3",
|
||||
"@vitejs/plugin-legacy": "^8.0.0",
|
||||
"@vitejs/plugin-vue": "^6.0.5",
|
||||
"@vue/compiler-sfc": "^3.2.30",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
"@vue/eslint-config-typescript": "^14.6.0",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"@vue/tsconfig": "^0.9.0",
|
||||
"body-parser": "^2.2.1",
|
||||
"cross-env": "^10.1.0",
|
||||
"eslint": "^9.39.2",
|
||||
|
|
@ -89,14 +89,14 @@
|
|||
"prettier": "^3.7.4",
|
||||
"prettier-plugin-sh": "^0.18.0",
|
||||
"prettier-plugin-sort-json": "^4.1.1",
|
||||
"rollup-plugin-visualizer": "^6.0.5",
|
||||
"storybook": "^10.1.10",
|
||||
"rollup-plugin-visualizer": "^7.0.1",
|
||||
"storybook": "^10.2.19",
|
||||
"terser": "^5.44.1",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "^5.9.3",
|
||||
"typescript-eslint-language-service": "^5.0.5",
|
||||
"vite": "^7.3.0",
|
||||
"vitest": "^4.0.16",
|
||||
"vite": "^8.0.0",
|
||||
"vitest": "^4.1.0",
|
||||
"vue-eslint-parser": "^10.2.0",
|
||||
"vue-hot-reload-api": "^2.3.4",
|
||||
"vue-tsc": "^3.1.8",
|
||||
|
|
|
|||
|
|
@ -3,10 +3,6 @@ import vue from "@vitejs/plugin-vue";
|
|||
import api from "./api";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
// @ts-expect-error the in api() declared 'enforce' property is not supported in TypeScript but in JavaScript
|
||||
api(),
|
||||
],
|
||||
plugins: [vue(), api()],
|
||||
server: { port: 7072, host: true },
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,6 +13,12 @@ export default defineConfig({
|
|||
"@": path.resolve(__dirname, "./assets/js"),
|
||||
},
|
||||
},
|
||||
css: {
|
||||
transformer: "lightningcss",
|
||||
lightningcss: {
|
||||
drafts: { customMedia: true },
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: "../dist/",
|
||||
emptyOutDir: true,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue