Design systém gov.cz4.7.0

Použití s Vue

Pro Vue existuje balíček @gov-design-system-ce/vue. Obsahuje generované obaly nad Web Components, takže se komponenty chovají stejně jako v čistém HTML — včetně slotů.

Skeleton

Funkční projekt k naklonování: starters/vue.

1. Instalace ​

shell
npm install @gov-design-system-ce/vue \
            @gov-design-system-ce/components \
            @gov-design-system-ce/styles \
            @gov-design-system-ce/icons \
            @gov-design-system-ce/fonts

2. Nastavení kompilátoru šablon ​

Bez isCustomElement bude Vue hlásit chybu u každé komponenty

Elementy gov-* jsou Web Components, ne Vue komponenty. Pokud to kompilátoru šablon neřeknete, vypíše pro každý z nich varování Failed to resolve component.

typescript
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("gov-"),
        },
      },
    }),
  ],
});

3. Styly, ikony a fonty ​

Postupujte podle stránky Pro vývojáře.

Ikony zkopírujte se zachováním podadresářů components, complex a colored (v opačném případě skončí každá ikona chybou 404 bez jakéhokoli výpisu v konzoli):

typescript
// vite.config.ts
viteStaticCopy({
  targets: [
    {src: "node_modules/@gov-design-system-ce/icons/lib/components/*", dest: "assets/icons/components"},
    {src: "node_modules/@gov-design-system-ce/icons/lib/complex/*", dest: "assets/icons/complex"},
    {src: "node_modules/@gov-design-system-ce/icons/lib/colored/*", dest: "assets/icons/colored"},
    {src: "node_modules/@gov-design-system-ce/fonts/lib/*.woff2", dest: "assets/fonts"},
  ],
})

4. Vstupní bod aplikace ​

typescript
// main.ts

// 1. Konfigurace — před registrací komponent.
window.GOV_DS_CONFIG = {
  iconsPath: "/assets/icons",
};

// 2. Styly (kořenové varianty).
import "@gov-design-system-ce/styles/tokens.css";
import "@gov-design-system-ce/styles/styles.css";
import "@gov-design-system-ce/styles/layout.css";
import "@gov-design-system-ce/styles/components.css";
import "@gov-design-system-ce/styles/animations.css";

import { createApp } from "vue";
import { defineCustomElements } from "@gov-design-system-ce/components/loader";
import App from "./App.vue";

// 3. Registrace Web Components.
defineCustomElements(window);

createApp(App).mount("#app");

Volitelně: globální registrace komponent ​

Pokud nechcete komponenty importovat v každém souboru, můžete použít plugin, který je zaregistruje globálně:

typescript
import { ComponentLibrary } from "@gov-design-system-ce/vue/plugin";

createApp(App)
  .use(ComponentLibrary)
  .mount("#app");

Změna cesty k pluginu

Do verze 4.6.5 byl plugin dostupný pouze hlubokým importem @gov-design-system-ce/vue/dist/plugin. Od verze 4.7.0 má balíček mapu exports a správná cesta je @gov-design-system-ce/vue/plugin. Starší zápis nadále funguje, ale nedoporučuje se.

5. Použití komponent ​

Komponenty se importují jmenovitě. Sloty fungují stejně jako v čistém HTML:

vue
<script setup lang="ts">
import {
  GovButton,
  GovCard,
  GovContainer,
  GovFormControl,
  GovFormInput,
  GovFormLabel,
  GovIcon,
} from "@gov-design-system-ce/vue";
</script>

<template>
  <GovContainer>
    <GovCard>
      <h3 slot="headline">Nadpis karty</h3>
      <p>Obsah karty.</p>
    </GovCard>

    <GovFormControl>
      <GovFormLabel identifier="jmeno">Jméno</GovFormLabel>
      <GovFormInput identifier="jmeno" placeholder="Jan Novák" />
    </GovFormControl>

    <GovButton type="solid" color="primary" size="m">
      Odeslat
      <GovIcon slot="icon-end" name="chevron-right" />
    </GovButton>
  </GovContainer>
</template>

Obousměrná vazba ​

Formulářové komponenty podporují v-model:

vue
<script setup lang="ts">
import { ref } from "vue";
import { GovFormInput } from "@gov-design-system-ce/vue";

const jmeno = ref("");
</script>

<template>
  <GovFormInput v-model="jmeno" identifier="jmeno" />
</template>

Na co si dát pozor ​

  • Varianty tlačítka se nastavují přes type a color; prop variant neexistuje.
  • Nadpis karty patří do slotu headline, nikoli title.
  • Formulářová pole nemají prop label — popisek řeší GovFormControl a GovFormLabel spojené shodným identifier.

Podporované verze Vue ​

Balíček vyžaduje Vue 3.4 nebo novější (peerDependencies: vue ^3.4.0).