Skip to content

[BREAKING CHANGES] New base setup #391

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

[BREAKING CHANGES] New base setup #391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
101aa0f
refactor variables to use styling repository
mob8607 Mar 18, 2025
077f221
fix variable names
mob8607 Mar 18, 2025
366efb2
update scss utils
mob8607 Mar 18, 2025
c5286af
fix color variable
mob8607 Mar 18, 2025
8c4409a
replaced styleguide with new library
Mar 18, 2025
a97bcbf
updated to latest styleguide
Mar 25, 2025
84b99ce
updated to latest versions
Mar 25, 2025
e3d89f0
fix linting issue
mob8607 Apr 30, 2025
589c1df
update dependencies
mob8607 Apr 30, 2025
caad33f
fix review issues
mob8607 May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions .github/workflows/test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
name: 🚀 Test project on push

on: push

jobs:
lint:
runs-on: ubuntu-latest

steps:
- name: 🚚 Get latest code
uses: actions/checkout@v3

- name: Install FE Node.js
uses: actions/setup-node@v2
with:
node-version: '22'

- name: 🔨Build Project
run: |
npm ci
npm run test
2 changes: 1 addition & 1 deletion .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
20
22
2 changes: 1 addition & 1 deletion eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default [
...eslintConfigValanticPrettier,
eslintConfigPrettier,
{
ignores: ['dist/', 'node_modules/', 'public/', '**/.DS_Store'],
ignores: ['dist/', 'node_modules/', 'public/', '**/.DS_Store', 'src/styleguide/translations.json'],
},
{
languageOptions: {
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</script>
<link
rel="stylesheet"
href="/src/setup/scss/themes/theme-01.scss"
href="/src/setup/scss/themes/theme-default.scss"
/>
<script
type="module"
Expand Down
8,227 changes: 5,166 additions & 3,061 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"url": "git+https://github.com/valantic/vue-template.git"
},
"engines": {
"node": ">=20.10 <21",
"node": ">=22 <23",
"npm": ">=10 <11"
},
"keywords": [
Expand All @@ -46,6 +46,7 @@
"homepage": "https://github.com/valantic/vue-template",
"dependencies": {
"@popperjs/core": "~2.11.8",
"@valantic/scss-utils": "github:valantic/scss-utils#main",
"@vuelidate/core": "~2.0.3",
"@vuelidate/validators": "~2.0.4",
"axios": "~1.7.9",
Expand Down Expand Up @@ -79,6 +80,7 @@
"@types/node": "~22.14.1",
"@types/pikaday": "~1.7.9",
"@types/resize-observer-browser": "~0.1.11",
"@valantic/vue-styleguide": "github:valantic/vue-styleguide#main",
"@vitejs/plugin-vue": "~5.2.1",
"@vue/test-utils": "~2.4.6",
"autoprefixer": "~10.4.20",
Expand Down
6 changes: 3 additions & 3 deletions public/mockServiceWorker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* - Please do NOT serve this file on production.
*/

const PACKAGE_VERSION = '2.7.3';
const PACKAGE_VERSION = '2.7.5';
const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f';
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse');
const activeClientIds = new Set();
Expand Down Expand Up @@ -145,7 +145,7 @@ async function handleRequest(event, requestId) {
headers: Object.fromEntries(responseClone.headers.entries()),
},
},
[responseClone.body]
[responseClone.body],
);
})();
}
Expand Down Expand Up @@ -250,7 +250,7 @@ async function getResponse(event, client, requestId) {
keepalive: request.keepalive,
},
},
[requestBuffer]
[requestBuffer],
);

switch (clientMessage.type) {
Expand Down
10 changes: 5 additions & 5 deletions src/components/c-breadcrumb.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,21 +71,21 @@
@use '@/setup/scss/mixins';

.c-breadcrumb {
@include mixins.font(variables.$font-size--12, 20px);
@include mixins.font(variables.$va-font-size--12, 20px);

color: variables.$color-grayscale--400;
color: var(--theme-color-grayscale--400);

&__item {
display: inline-block;

&::after {
content: '|';
padding: 0 variables.$spacing--5;
padding: 0 variables.$va-spacing--5;
}
}

&__item:last-child {
color: variables.$color-grayscale--200;
color: var(--theme-color-grayscale--200);

&::after {
content: '';
Expand All @@ -100,7 +100,7 @@
}

&__link:hover {
color: variables.$color-secondary--1;
color: var(--theme-color-secondary--1);
}
}
</style>
62 changes: 33 additions & 29 deletions src/components/c-date-picker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,39 +456,39 @@
&__calendar-wrapper {
position: absolute;
min-width: 100%; // Width of anchor.
margin-top: variables.$spacing--10;
background: variables.$color-grayscale--1000;
margin-top: variables.$va-spacing--10;
background: var(--theme-color-grayscale--1000);

@include mixins.media(sm) {
min-width: 500px;
margin-top: variables.$spacing--15;
margin-top: variables.$va-spacing--15;
}
}

&__calendar-header {
position: relative;
display: flex;
gap: variables.$spacing--5;
gap: variables.$va-spacing--5;
justify-content: center;
padding: variables.$spacing--15;
border-bottom: 1px solid variables.$color-grayscale--0;
padding: variables.$va-spacing--15;
border-bottom: 1px solid var(--theme-color-grayscale--0);
text-align: center;
}

&__close {
top: 50%;
right: variables.$spacing--15;
right: variables.$va-spacing--15;
cursor: pointer;
}

&__calendar {
display: flex;
justify-content: center;
padding-block: variables.$spacing--20;
padding-block: variables.$va-spacing--20;
}

&__title {
@include mixins.font(variables.$font-size--18, variables.$line-height--20);
@include mixins.font(variables.$va-font-size--18, variables.$va-line-height--20);
}

&__backdrop {
Expand All @@ -497,7 +497,7 @@
left: 0;
width: 100%;
height: 100%;
background: rgba(variables.$color-grayscale--0, 0.85);
background: rgba(var(--theme-color-grayscale--0), 0.85);
}

&--range {
Expand All @@ -506,13 +506,13 @@
grid-template-areas: 'start' 'end';
grid-template-columns: 1fr;
grid-template-rows: auto auto;
row-gap: variables.$spacing--10;
row-gap: variables.$va-spacing--10;

@include mixins.media(xs) {
grid-template-areas: 'start end';
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
column-gap: variables.$spacing--25;
column-gap: variables.$va-spacing--25;
}
}

Expand Down Expand Up @@ -540,15 +540,15 @@

.e-date {
&__icon {
color: variables.$color-grayscale--1000;
color: var(--theme-color-grayscale--1000);
}

.e-input__field {
&,
&:focus,
&:hover {
border-bottom-color: variables.$color-grayscale--1000;
background-color: variables.$color-grayscale--1000;
border-bottom-color: var(--theme-color-grayscale--1000);
background-color: var(--theme-color-grayscale--1000);
}
}
}
Expand All @@ -557,7 +557,7 @@
&__transition {
&--fade-enter-active,
&--fade-leave-active {
transition: opacity variables.$transition-duration--200 ease;
transition: opacity variables.$va-transition-duration--200 ease;
}

&--fade-enter-from,
Expand All @@ -570,8 +570,8 @@
@include mixins.z-index(datePicker);

border: none;
color: variables.$color-grayscale--0;
font-family: variables.$font-family--primary;
color: var(--theme-color-grayscale--0);
font-family: variables.$va-font-family--text;

.pika-lendar {
width: 100%;
Expand All @@ -580,7 +580,11 @@

.pika-title {
.pika-label {
@include mixins.font(variables.$font-size--18, variables.$line-height--20, variables.$font-weight--bold);
@include mixins.font(
variables.$va-font-size--18,
variables.$va-line-height--20,
variables.$va-font-weight--bold
);
}

.pika-prev,
Expand All @@ -599,24 +603,24 @@

thead th abbr {
// Unfortunately no classes available
@include mixins.font(variables.$font-size--14, variables.$line-height--18);
@include mixins.font(variables.$va-font-size--14, variables.$va-line-height--18);

color: variables.$color-grayscale--0;
color: var(--theme-color-grayscale--0);
}

.pika-button.pika-day {
@include mixins.font(variables.$font-size--16, variables.$line-height--18);
@include mixins.font(variables.$va-font-size--16, variables.$va-line-height--18);

position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: variables.$spacing--10;
padding: variables.$va-spacing--10;
border: initial !important; // stylelint-disable-line declaration-no-important
border-radius: initial !important; // stylelint-disable-line declaration-no-important
background: none;
box-shadow: initial !important; // stylelint-disable-line declaration-no-important
color: variables.$color-grayscale--0;
color: var(--theme-color-grayscale--0);
}

.is-today {
Expand All @@ -630,24 +634,24 @@
.is-outside-current-month {
.pika-button.pika-day {
opacity: 1;
color: variables.$color-grayscale--400;
color: var(--theme-color-grayscale--400);
}
}

.is-startrange,
.is-endrange,
.is-selected {
.pika-button.pika-day {
background: variables.$color-primary--1;
color: variables.$color-grayscale--1000;
background: var(--theme-color-primary--1);
color: var(--theme-color-grayscale--1000);
font-weight: initial;
}
}

.is-inrange {
.pika-button.pika-day {
background: none;
color: variables.$color-grayscale--0;
color: var(--theme-color-grayscale--0);

&::before {
@include mixins.z-index(back);
Expand All @@ -659,7 +663,7 @@
width: 100%;
height: 100%;
opacity: 0.3;
background-color: variables.$color-primary--1;
background-color: var(--theme-color-primary--1);
}
}
}
Expand Down
20 changes: 10 additions & 10 deletions src/components/c-form-notification.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,29 +67,29 @@
@use '@/setup/scss/variables';

.c-form-notification {
@include mixins.font(variables.$font-size--14, 18px);
@include mixins.font(variables.$va-font-size--14, 18px);

display: block;
padding: variables.$spacing--10 35px variables.$spacing--10 variables.$spacing--5;
border-bottom-right-radius: variables.$border-radius--500;
border-bottom-left-radius: variables.$border-radius--500;
padding: variables.$va-spacing--10 35px variables.$va-spacing--10 variables.$va-spacing--5;
border-bottom-right-radius: variables.$va-border-radius--100;
border-bottom-left-radius: variables.$va-border-radius--100;
background-repeat: no-repeat;
background-position-x: calc(100% - 5px);
background-position-y: calc(#{variables.$font-size--18} / 2 - 2px);
background-position-y: calc(#{variables.$va-font-size--18} / 2 - 2px);
background-size: 20px;
box-shadow: 0 4px 10px 1px rgba(variables.$color-grayscale--400, 0.3);
color: variables.$color-grayscale--1000;
box-shadow: 0 4px 10px 1px rgba(var(--theme-color-grayscale--400), 0.3);
color: var(--theme-color-grayscale--1000);

&--state-error {
background-color: variables.$color-status--error;
background-color: var(--theme-color-status--error);
}

&--state-info {
background-color: variables.$color-status--info;
background-color: var(--theme-color-status--error) tatus--info;
}

&--state-success {
background-color: variables.$color-status--success;
background-color: var(--theme-color-status--success);
}
}
</style>
8 changes: 4 additions & 4 deletions src/components/c-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@

.c-form {
&__field + &__field {
margin-top: variables.$spacing--20;
margin-top: variables.$va-spacing--20;
}

&__actions {
margin-top: variables.$spacing--60;
margin-top: variables.$va-spacing--60;

.e-button {
@include mixins.media(sm) {
Expand All @@ -17,10 +17,10 @@
}

.e-button + .e-button {
margin-top: variables.$spacing--20;
margin-top: variables.$va-spacing--20;

@include mixins.media(sm) {
margin: 0 0 0 variables.$spacing--20;
margin: 0 0 0 variables.$va-spacing--20;
}
}
}
Expand Down
Loading