Werken met Vue Core Components

Inleiding

Vue Core Components is een verzameling van Vue.js componenten die je kan gebruiken in je Vue.js projecten. Deze componenten zijn ontwikkeld door Justitiële ICT Organisatie onderdeel van de Rijksoverheid en zijn gebaseerd op de Rijkshuisstijl. De componenten zijn ontwikkeld met het doel om de ontwikkeling van webapplicaties te versnellen en te standaardiseren. De componenten zijn ontwikkeld met Vue.js en zijn eenvoudig te integreren in je Vue.js projecten.

Benodigdheden

Om gebruik te maken van Vue Core Components heb je een aantal zaken nodig:

• Een Vue.js project
• Node.js LTS/Hydrogen of hoger
• NPM
• Bundler zoals Webpack of Rollup
• JIO Developer account in Azure AD

Node Version Manager (NVM)

Het is aan te raden om Node.js te installeren met Node Version Manager (NVM). Hiermee kan je eenvoudig switchen tussen verschillende versies van Node.js. Je kan NVM installeren met de volgende commando's:

Linux/macOS

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

Node.js versie vastleggen voor het project in een .nvmrc bestand

echo "lts/iron" > .nvmrc

Gebruik maken van de Node.js versie in het project

nvm use

Als je geen versie hebt gespecificeerd in het .nvmrc bestand, dan zal NVM de versie gebruiken die je hebt ingesteld als fallback.

JIO Developer account in Azure AD

Vraag je teamleider, projectleider of de beheerder van je Azure AD om een JIO Developer account aan te maken. Met dit account kan je gebruik maken van de Vue Core Components, GitLab en andere diensten van Justitiële ICT Organisatie gehost in de Azure Trusted Cloud.

Installatie

Om Vue Core Components te installeren in je Vue.js project kan je de volgende stappen volgen:

1. Voeg de Justitiële ICT Organisatie NPM registry toe aan je project door een .npmrc bestand aan te maken in de root van je project met de volgende inhoud:

@djiapps:registry=https://nexus.gki.aks.containers.vernieuwingsdomein.nl/repository/npm-dji/
//nexus.gki.aks.containers.vernieuwingsdomein.nl/repository/npm-dji/:_auth=${NPM_TOKEN}

2. Voeg NPM_TOKEN toe aan je bashrc, bash_profile of zshrc bestand:

• Ga naar https://nexus.gki.aks.containers.vernieuwingsdomein.nl/
• Log in met je JIO Developer account
• Klik op je naam rechtsboven en ga naar 'User Token'
• Klik op Access Tokens of Generate Access Token
• Scroll naar beneden en kopieer de token met de base64 encoded user:password.
• Voeg de token toe aan je bashrc, bash_profile of zshrc bestand:

export NPM_TOKEN=#paste-some-token#

3. Installeer Vue Core Components in je Vue.js project:

npm install @djiapps/vue-core-components

Als het NPM_TOKEN correct is ingesteld, dan zal de installatie succesvol zijn.

4. Rijkshuisstijl Bootstrap thema configureren

De juiste volgorde van SCSS bestanden inladen is belangrijk voor het correct functioneren van het thema. Ook wordt het hierdoor mogelijk uitbreidingen te maken op het thema of de onderliggende Bootstrap componenten.

// scss/app.scss
//Load project variables and mixins followed by Core variables and mixins(_main)
@import "@djiapps/vue-core-components/src/scss/_core-math";
@import "@djiapps/vue-core-components/src/scss/_core-variables";
@import "@djiapps/vue-core-components/src/scss/_core-fonts";
@import "@djiapps/vue-core-components/src/scss/_core-colors";
@import "_variables"; //Project variables - overrides
@import "_mixins"; //Project mixins - overrides

//Builds Bootstrap call after loading all vars & modifiers for our bootstrap theme.
@import "bootstrap/scss/bootstrap";

.sr-only {
  @extend .visually-hidden !optional;
}

@each $state, $data in $form-validation-states {
  @include input-validation-state($state, $data...);
}
html,
body,
#app {
  min-height: 100vh;
  display: flex;
  flex-grow: 1;
  background-color: #f5f5f5;
}

.table tbody tr:hover {
  background-color: #e9f4fa;
  cursor: pointer;
}

.jio-core {
  // Changed to match closer to CORE design
  .jio-form-feedback {
    font-size: 1rem;
    // set vertical margin to 6px in rem
    margin: 0.375rem 0;
  }

  // Changed button styles to match closer to CORE design
  .jio-button {
    transition: background-color 0.2s;
  }

  button.jio-button.btn.btn-primary {
    box-sizing: border-box;
    border-radius: 6px;
    padding: 11px 20px;
    font-size: 1.25em;
    font-weight: 700 !important;
    text-decoration: none;

    &:disabled {
      cursor: not-allowed;
      font-weight: 700 !important;
    }

    .jio-button-label {
      display: inline-block;
    }

    .jio-button-icon {
      display: inline-block;
    }
  }

  @each $name, $palette in $jio-color-palettes {
    .jio-palette-#{$name}.jio-button.jio-button-primary.btn.btn-primary {
      $outline-width: 1px;
      background-color: meta.call($palette);
      color: jio-font-color-auto(meta.call($palette));

      &:hover {
        background-color: transparent;
        color: meta.call($palette);
        outline: $outline-width solid meta.call($palette);
        outline-offset: -$outline-width;
      }

      &:active {
        background-color: meta.call($palette);
        color: jio-font-color-auto(meta.call($palette));
      }

      &:disabled {
        background-color: meta.call($palette, 15%);
        color: jio-font-color-auto(meta.call($palette, 15%));
      }
    }

    .jio-palette-#{$name}.jio-button.jio-button-outline.btn.btn-primary {
      $outline-width: 1px;
      outline: $outline-width solid meta.call($palette) !important;
      outline-offset: -$outline-width;
      background-color: transparent;
      color: meta.call($palette);
      font-weight: 700;

      &:hover {
        outline: $outline-width * 2 solid meta.call($palette) !important;
        outline-offset: -$outline-width * 2;
        background-color: transparent !important;
        color: meta.call($palette) !important;
      }

      &:disabled {
        background-color: meta.call($palette, 15%);
        color: jio-font-color-auto(meta.call($palette, 15%));
      }
    }

    .jio-palette-#{$name}.jio-button-icon.btn.btn-primary {
      background-color: transparent;
      margin: 0;
      padding: 0;
      color: $jio-font-color-dark;
    }
  }

  // Remove conflicting styles from breadcrumb link items
  .jio-breadcrumb {
    .breadcrumb-item {
      a {
        font-size: 1rem;
        padding: 0;
        color: $jio-font-color-link;
        display: inline-block;

        &:hover {
          color: $jio-font-color-link-hover-focus;
        }
      }

      & + .breadcrumb-item::before {
        content: ">";
        font-weight: 700;
        color: $jio-font-color-dark;
      }

      &.active {
        color: $jio-font-color-dark;
        font-weight: 700;
      }
    }
  }

  .jio-card.jio-card-interactive {
    cursor: pointer;
  }

  .jio-form-input {
    &:focus {
      outline: 2px solid meta.call($jio-palette-hemelblauw);
      outline-offset: -2px;
    }
  }
  .jio-select {
    border-radius: 2px;
    border-color: map-get($jio-palette-grijs, "grijs-5");
    &:focus {
      outline: 2px solid meta.call($jio-palette-hemelblauw);
      outline-offset: -2px;
      box-shadow: none;
    }
  }
}

// src/main.ts
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import { Icons, Components } from "@djiapps/vue-core-components"; // Import the Vue Core Components

import "./scss/app.scss"; // Import the Bootstrap theme

Icons.setupIcons();

const pinia = createPinia();
const app = createApp(App);

app.use(pinia as any);
app.use(router as any);
Components.setupComponents(app as any); // Setup the Vue Core Components
app.mount("#app");

Bundler configuratie

Om de juiste SCSS variables en potentieele overrides te gebruiken voor Vue Core Components of jou eigen Single File Components, is het belangrijk dat de SCSS bestanden worden ingeladen in de juiste volgorde. Dit kan worden gedaan door de volgende configuratie toe te voegen aan je bundler css preprocessor configuratie. Voor Webpack zal de syntax iets anders zijn dan voor Vite.

// vite.config.ts
css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@use "sass:meta";@import "src/scss/_inject-vite.scss";`,
    },
  },
},

// scss/_inject-vite.scss
@import "bootstrap/scss/_functions.scss";
@import "bootstrap/scss/_variables.scss";
@import "bootstrap/scss/_mixins.scss";

$huisstijl-font-folder: "$font-path";

@import "@djiapps/vue-core-components/src/scss/_core-math.scss";
@import "@djiapps/vue-core-components/src/scss/_core-variables.scss";
@import "@djiapps/vue-core-components/src/scss/_core-fonts.scss";
@import "@djiapps/vue-core-components/src/scss/_core-colors.scss";
@import "_mixins.scss"; //Project mixins - overrides
@import "_variables.scss"; //Project variables - overrides

SCSS Variabelen en Mixins

In scss/_variables.scss en scss/_mixins.scss kan je project specifieke variabelen en mixins toevoegen die je wilt gebruiken in je project. Deze bestanden worden ingeladen voor de Vue Core Components en Bootstrap SCSS bestanden.

Voorbeeld van een project specifieke variabelen bestand:

// scss/_variables.scss
@use "sass:meta";
@use "sass:color";

$jio-palette-primary: meta.get-function(jio-palette-robijnrood);
$jio-palette-secondary: meta.get-function(jio-palette-geel);
$jio-palette-primary-dark: meta.get-function(jio-palette-donkergeel);
$jio-palette-secondary-dark: meta.get-function(jio-palette-donkergroen);
$jio-palette-hemelblauw: meta.get-function(jio-palette-hemelblauw);

$enable-rounded: true;

$theme-colors: (
  "primary": meta.call($jio-palette-primary),
  "black": $black,
  "lgrey": #e5e5e5,
  "danger": $danger,
);

$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: (
    $spacer * 3.125,
  ),
);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1500px,
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1440px,
);

$link-color: meta.call($jio-palette-hemelblauw);
$link-hover-color: shift-color($link-color, $link-shade-percentage);

$paragraph-margin-bottom: 1rem;

$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-lg: $font-size-base * 1.25;
$font-size-sm: $font-size-base * 0.875;

$font-weight-base: $font-weight-normal;
$line-height-base: 1.4375;

$h1-font-size: 36px;
$h2-font-size: 30px;
$h3-font-size: 26px;
$h4-font-size: 20px;
$h5-font-size: 16px;
$h6-font-size: 16px;

$headings-margin-bottom: 10px;
// $headings-font-family: null !default;
$headings-font-weight: 700;
$headings-line-height: 1.2;
// $headings-color: null !default;

$display1-size: $h1-font-size;
$display2-size: $h2-font-size;
$display3-size: $h3-font-size;
$display4-size: $h4-font-size;

$display1-weight: 300;
$display2-weight: 300;
$display3-weight: 300;
$display4-weight: 300;
$display-line-height: $headings-line-height;

$lead-font-size: 28px;
$lead-font-weight: 300;

$small-font-size: 0.875em;

$btn-padding-y: 0.6875rem;
$btn-padding-x: 1.25rem;
// $btn-font-family:             $input-btn-font-family !default;
$btn-font-size: 20px;
$btn-line-height: 1.178;
$btn-font-weight: 700;

// Allows for customizing button radius independently from global border radius
$btn-border-radius: 6px;
// $btn-border-radius-lg: $border-radius-lg;
// $btn-border-radius-sm: $border-radius-sm;

$input-padding-y: 8px;
$input-padding-x: 12px;
$input-border-color: #999999;
$input-border-radius: 2px;
$input-placeholder-color: rgba(0, 0, 0, 0.4);

$input-group-addon-border-color: $input-border-color;

$table-cell-padding-y: 1.5rem;
$table-cell-padding-x: 1.625rem;
$table-cell-padding-y-sm: 0.25rem;
$table-cell-padding-x-sm: 0.25rem;
$table-hover-bg: #e9f4fa;

$card-border-radius: 0;
$card-inner-border-radius: 0;

// checkbox overwrites
$form-check-input-width: 0.938rem;
$form-check-min-height: 0.938rem;
$form-check-padding-start: $form-check-input-width + 0.5em !default;
$form-check-margin-bottom: 0.125rem !default;

$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-border: 1px solid #696969;
$form-check-input-border-radius: 0.125rem;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;

$form-check-input-checked-bg-color: meta.call($jio-palette-hemelblauw);
$form-check-input-checked-bg-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.81489 1.04056C8.53264 0.832058 8.13909 0.872308 7.90569 1.13331L3.93549 5.57521L1.54879 3.50781C1.29634 3.28956 0.923787 3.28661 0.669387 3.50101C0.413987 3.71511 0.352487 4.08276 0.523387 4.36841L3.41449 9.19336C3.53654 9.39696 3.75629 9.52196 3.99359 9.52271C3.99459 9.52271 3.99504 9.52271 3.99604 9.52271C4.23234 9.52271 4.45209 9.39941 4.57514 9.19701L8.99019 1.93701C9.17229 1.63771 9.09614 1.24901 8.81489 1.04056Z' fill='%23D9EBF7'/%3E%3C/svg%3E%0A");
$form-check-radio-checked-bg-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.81489 1.04056C8.53264 0.832058 8.13909 0.872308 7.90569 1.13331L3.93549 5.57521L1.54879 3.50781C1.29634 3.28956 0.923787 3.28661 0.669387 3.50101C0.413987 3.71511 0.352487 4.08276 0.523387 4.36841L3.41449 9.19336C3.53654 9.39696 3.75629 9.52196 3.99359 9.52271C3.99459 9.52271 3.99504 9.52271 3.99604 9.52271C4.23234 9.52271 4.45209 9.39941 4.57514 9.19701L8.99019 1.93701C9.17229 1.63771 9.09614 1.24901 8.81489 1.04056Z' fill='%23D9EBF7'/%3E%3C/svg%3E%0A");

$jio-font-color-link: meta.call($jio-palette-hemelblauw);
$jio-font-color-link-hover-focus: shift-color(
  $jio-font-color-link,
  $link-shade-percentage
);