# Document Components

## Typowy format dokumentu

```html
<w-document>
  <w-p center>UMOWA NR ………….</w-p>
  <w-p>o realizację Inicjatywy zleconego w ramach Programu NOWEFIO - zachowując historię społeczności</w-p>

  <w-contract-part title="Obowiązki i uprawnienia informacyjne">
    <w-ol>
      <w-li
        >Ustep 1
        <w-ol>
          <w-li>
            Punkt 1
            <w-ol>
              <w-li>Podpunkt sfsdfdf</w-li>
              <w-li>Podpunkt</w-li>
            </w-ol>
          </w-li>
          <w-li>Punkt 2</w-li>
        </w-ol>
      </w-li>
      <w-li
        >Ustep 2
        <w-ol>
          <w-li>Punkt 1</w-li>
          <w-li>Punkt 2</w-li>
        </w-ol>
      </w-li>
    </w-ol>
  </w-contract-part>
  <w-contract-part title="Zakres umowy"> .... </w-contract-part>
</w-document>
```

wygeneruje

```
§ 1
Obowiązki i uprawnienia informacyjne

1. Ustep 1
   1) Punkt 1
      a) Podpunkt sfsdfdf
      b) Podpunkt
   2) Punkt 2
2. Ustęp 2
   1) Punkt 1
   2) Punkt 2

§ 2
Zakres umowy
```

# Tagi pdstawowe

## ~~`<Umowa>`~~ <w-document>

Nadrzędny element dokumentu

- `start` - od jakiego numeru numerować paragrafy, domyśnie jeden
- `watermark` - tresć znaku wodnego
- `settings` - ustawienia dla dokumentu (można je zmieniać w dokumencie przez `w-settings` lub `w-section`)

  - `justify` - czy justować tekst w paragrafach
  - `lang` - język dokumentu (ma wpływ na np. nazwy miesięcy, formatowanie liczb), domyślnie `pl`
  - `dateFormat` - okresla domyslny format daty dla tagu `w-date`, domyślnie wynika z języka
  - `inline` - czy numery paragrafów i ich tytuły mają być generowane w jednej lini
  - `level1` - format numerowania ustępów, domyślnie `1.`
  - `level2` - format numerowania punktów, domyślnie `1)`
  - `level3` - format numerowania podpunktów, domyślnie `a)`
  - `unordered` - format numerowania list `w-ul`, domyślnie `*`
  - `moneySpaces` - wszystkie kwoty wyswietla z sepearatorem tysięczny, (zależnym od języka)
  - `currency` - automatycznie dodaje walutę do formatownych kwot, np. `zł`
  - `colors` - definicja własnych kolorów których potem mozna używać np. jako tło komórki np. `"{'td1': 'yellow'}"`
  - `bg` - skrót do `colors.bg`, tło dla komórek z parametrem `bg`
  - `fg` - skrót do `colors.fg`, kolor czcionki dla elementów z parametrem `fg`

  - `fontFamily` - nazwa czcionki, domyśl;nie Arial
  - `fontSize` - rozwmiar czcionki, domyslnie 9
  - `dataPath` - generuje `data-path` dla elementów wynikających z jSchema
  - `class` - klasy dopisywane automatycznie do elelemtnów html
    - można zdefiniować własne z prefiksem `$` czyli np. `$bold: 'text-bold'` i potem użyć ich w parametrze `class` elementu: `class="$bold"`
  - `showFooters` - czy generować przypisy, domyślnie `true`

## `<w-section>` - od wersji 0.2.0

Sekcja dokumentu, może mieć inne nagłówki i stopki oraz rozmiar i orientację

- `landscape` - czy orientacja pozioma
- `format` - np. `a5`, domyślnie jest `a4`
- `margin-right`, `margin-left`, `margin-top`, `margin-bottom` - marginesy, można podać jednostkę np. `1.5cm`
- `settings` - nadpisanie ustawień z dokumentu

## `<w-contract-part>`

Element określający paragraf umowy

parametry

- `title` - tytuł paragrafu
- `name` - nazwa paragrafu, przydatna gdy trzeba pobrać wygenerowany numer (gdy brak nazwy mona to zrobić po tytule)
- `number` - można wymusić numer, domyślnie generuje się automatycznie

## `<w-p>`

Element określający blok tekstu

- `right` - wyrównanie tekstu do prawej
- `left` - wyrównanie tekstu do lewej
- `center` - wyśrodkowanie
- `schema` - model z jSchema

```html
<w-p right>To jtest blok tekstu wyrównany do prawej</w-p>
```

## `<w-line>`

Element określający linię tekstu

```html
<w-p>
  <w-line>Witkac sp. z o.o.</w-line>
  <w-line>Słupsk, Sienkiewicza 5a</w-line>
  <w-line>NIP: 234234234</w-line>
</w-p>
```

## `<w-ol>` / `<w-li>`

Listy numerowane

## `<w-ul>` / `<w-li>`

Listy nienumerowane

## `<w-footnote>`

Pozwala umieścić przypis w tekście, domyślnie generowany jako indeks górny, treśc przypisu nie jest generowana

parametry:

- `number` - numer przypisu

```html
<w-footnote number="1">To jest wyjaśnienie przypisu</w-footnote>
```

## `<w-footnotes>`

Generuje przypisy wygenerowane tagami `w-footnote`

```html
<w-footnotes></w-footnotes>
```

da taki efekt

```
-----------------------------
1) To jest wyjaśnienie przypisu
```

# `<w-img>`

tag grafiki

parametry:

- `height` - wysokosc genrowanej grafiki
- `src` - dane lub adres url grafiki, lepiej dane w formacie `data:image/jpeg;base64,/9j/4AAQ....`

```html
<w-img height="40" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABA ..." />
```

# `<w-row>` i `<w-col>`

Treśc mozna umieszac w wielu kolumnach, najczesciej w dwoch do tego sluza tagi `<w-row>` i `<w-col>`

parametry tagu `<w-col>`

- `right` - wyrównanie tekstu do prawej
- `left` - wyrównanie tekstu do lewej
- `center` - wyśrodkowanie
- `money` - do prawej i formatowanie jako kwoty
- `width` - szerokość kolumny, mozna w %

```html
<w-row>
  <w-col>Umowa numer 3/45/2024</w-col>
  <w-col right>Słupsk, dnia 20.04.2024</w-col>
</w-row>

<w-row>
  <w-col>Umowa numer 3/45/2024</w-col>
  <w-col width="30%">
    <w-p>Witkac sp. z o.o.</w-p>
    <w-p>Słupsk, Sienkiewicza 5a</w-p>
    <w-p>NIP: 234234234</w-p>
  </w-col>
</w-row>
```

# `<w-table>`

Tabelka z obramowaniem skladajaca się z wierszy `<w-tr>` i kolumn `<w-td>`

własciwosci tagu `<w-tr>`

- `header` - oznacza ze kolumny są nagłowkami (generowane jako `<th>`)
- `bg` - kolor tła komórek

dodatkowe właściwosci tagu `<w-td>`

- `colspan` - ile kolumn połaczyć w poziomie
- `rowspan` - ile kolumn połaczyć w pionie

```html
<w-table>
  <w-tr header>
    <w-td width="10%">Lp</w-td>
    <w-td right>Netto</w-td>
    <w-td right>Brutto</w-td>
  </w-tr>
  <w-tr v-for="Koszt in Umowa.Kosztorys">
    <w-td center>{{ Koszt.Lp }}</w-td>
    <w-td money>{{ Koszt.Netto }}</w-td>
    <w-td money>{{ Koszt.Brutto }}</w-td>
  </w-tr>
</w-table>
```

# Treści dynamiczne

Gdy chcemy umieścić w umowie dane z Umowy lub Oferty musimy skorzystać ze specjalnej składni ze znakami `{{` `}}`, przykładowo

```html
<w-item> Umowa numer <b>{{ Umowa.Numer }}</b> dla <b>{{ Oferta.NazwaFirmy }}</b> </w-item>
```

w przypadku gdy dane są uzywane w parametrach jak np. `warunek` etedy nazwe parametru nalezy poprzedzic znakiem `:`

```html
<Paragraf :warunek="Oferta.IloscOferentow>1"> </Paragraf>
<ListaNumerowana :tablica="Oferta.Oferenci" szablon="<b>{Nazwa}</b> {NumerRachunku}"></ListaNumerowana>
```

# Tagi specjalne

## `<w-plural>`

Wybiera odmianę w przypadku gdy liczba jest pojedyncza czy mnoga. W przypadku braku podania argumentu `value` jest pobierana z `settings.plural`, a jeśli nie jest ustawione to szuka pola `Oferta.IloscOferentow`. Przykłady:

```html
<w-plural one="oferenta" multi="oferentów"></w-plural>
<!--oferenta-->
<w-plural>oferenta/oferentów</w-plural>
<!--oferenta-->
<w-plural :value="2">oferenta/oferentów</w-plural>
<!--oferentów-->
<w-plural>jeden/wiele</w-plural>
<!--jeden-->
```

## `<w-stroke>`

Generuje tekst przekreślony, ale w przypadku gry podany zostanie warunek robi to warunkowo lub wybiera z dwóch opcji

```html
<w-stroke>tekst</w-stroke>
<!-- tekst (przekreślony) -->
<w-stroke :value="Oferta.IloscOferentow>1">wielu/jeden</w-stroke>
<!-- wielu (przekreslony) / jeden -->
```

## `<w-next-number>`

Oblicza numer paragrafu na podstawie jego tytułu lub nazwy (gdy podano)

```html
<w-document>
  <w-contract-part title="Obowiązki i uprawnienia informacyjne"></w-contract-part>

  <w-contract-part v-if="false" title="Kontrola zadania publicznego"></w-contract-part>
  <w-contract-part name="rozw" title="Rozwiązanie umowy za porozumieniem Stron"></w-contract-part>
  <w-contract-part title="Postanowienia końcowe">
    <w-ol>
      <w-li>
        § <w-get-number>Obowiązki i uprawnienia informacyjne</w-get-number>
        <!-- § 1 -->
        § <w-get-number name="rozw"></w-get-number>
        <!-- § 2 -->
      </w-li>
    </w-ol>
  </w-contract-part>
</w-document>
```

## `<w-money>`

Formatuje liczbę jako kwotę

parametry

- `currency` - waluta, domylsnie `currency` z ustawień
- `spaces` - dodaje separator tysięcy (w języku polskim dopiero od 10 000)
- `schema` - model z jSchema

```html
<w-money>10.456</w-money>
<!-- 10,46 zł -->
<w-money>{{ Oferta.ZrodlaFinansowaniaSuma.WkladOsobowy }}</w-money>
<!-- 0,00 zł -->
<w-money :value="Oferta.ZrodlaFinansowaniaSuma.WkladOsobowy"></w-money>
<!-- 0,00 zł -->
<w-money currency="euro">10.456</w-money>
<!-- 10,46 euro -->
```

## `<w-money-words>`

Zamienia na słownie złotych
parametry

- `fraction` - czy zawsze wyswietlac grosze nawet jak jest ich 0
- `schema` - model z jSchema

```html
<w-money-words>10.456</w-amount-words>
<!-- dziesięć złotych 46/100 -->
<w-money-words>10</w-amount-words>
<!-- dziesięć złotych -->
<w-money-words fraction>10</w-amount-words>
<!-- dziesięć złotych 00/100 -->
```

## `<w-date>`

formatuje datę do formau wyniakącego z języka dokumentu, domyślnie polskiego `D.MM.YYYY`

- `schema` - model z jSchema
- `date` - wartośc daty

```html
<w-date>2024-04-03</w-date>
<!-- 3.04.2024 -->
<w-date date="2024-04-03"></w-date>
<!-- 3.04.2024 -->
<w-date :date="Oferta.DataStart"></w-date>
<!-- 3.04.2024 -->
<w-date>{{ Oferta.DataStart }}</w-date>
<!-- 3.04.2024 -->
```

## `<w-color>`

koloruje tekst na wybrany kolor, obsługiwane bezpośrednio są 3 kolory: `blue` `red` i `green`, obsługuje zdefiniowane kolory w ustawieniach `w-document`

```html
To jest mój adres email <Kolor blue>daniel.jursza@witkac.pl</w-color>
<w-color red><w-strong>Kategorycznie NIE wolno !!!</w-strong></w-color>
<w-color green>BIO</Kolor>degradowalne
<w-color color="yellow">Żółty</w-color>
<w-color color="#00FF00">Jasnozielony</w-color>
```

## `<w-fa>`

generuje ikonę FontAwesome

- `icon` - nazwa ikony (https://fontawesome.com/v4/icons/)
- `fw` - ustawia stałą szerokość

```html
<w-fa icon="address-book" />
```

# Tagi html

## `<w-strong>`

pogrubienie

```html
<w-strong>To jest pogrubiony tekst</w-strong>
```

## `<w-em>`

pochylenie

```html
<w-em>To jest pochylony tekst</w-em>
```

## `<w-u>`

podkreślenie

```html
<w-u>To jest podkreślony tekst</w-u>
```

## `<w-s>`

przekreślenie, ale lepiej uywać `<w-stroke>`

```html
<w-s>To jest przekreślony tekst</w-s>
```

## `<br>`

przejście do nowej lini, lepiej uywać tagu `<w-line>`

```html
pierwsza linia<br />druga linia
```

# Struktury programistyczne

## warunkowe: `if` `else` `else if`

do kazego tagu mozna dodac warunek kiedy ma być generowany (dokumentacja: https://vuejs.org/guide/essentials/conditional.html)

- `v-if` - jeśli warunek jest prawdziwy to jest generowany
- `v-else` - jeśli poprzedni tag nie spełaniał warunku `v-if` to ten tag jest generowany
- `v-else-if` - jeśli porzedni tag nie spełniał warunku `v-if` a dodatkowo ten tag spełnia nowy warunek to jest generowany

```html
<w-line v-if="Oferta.IloscOferentow==1">Jeden Oferent</w-line>
<w-line v-else-if="Oferta.IloscOferentow==2">Dwóch oferentów</w-line>
<w-line v-else>Więcej niz dwóch oferentów</w-line>
```

gdy chcemy warunkowo generować więcej tagów to mozna je polaczyc tagiem `<template>`

```html
<template v-if="Oferta.IloscOferentow==1">
  <w-line>Jeden Oferent</w-line>
  <w-line>{{ Oferenci[0].Nazwa }}</w-line>
</template>
```

## pętle: `for`

do kadego tagu mona dodać atrybut `v-for` powodujący ze ten tag bedzie powtarzan
najczesciej uzywane do wyswietlania danych ze struktur tablicowych (dokumentacja: https://vuejs.org/guide/essentials/list)

- `v-for` - definicja petli, składnia `item in items`

```html
<w-ol>
  <w-li v-for="Oferent in Oferta.Oferenci">{{ Oferent.Nazwa }}</w-li>
</w-ol>

<w-table>
  <w-tr v-for="Koszt in Kosztorys">
    <w-td>{{ Koszt.Lp }}</w-td>
    <w-td kwota>{{ Koszt.Netto }}</w-td>
    <w-td kwota>{{ Koszt.Brutto }}</w-td>
  </w-tr>
</w-td>
```

podobnie jak w przypadku `v-if` mozemy więcej tagów połączyć tagiem `<template>`

```html
<w-table>
  <template v-for="Koszt in Kosztorys">
    <w-tr>
      <w-td rowspan="2">{{ Koszt.Lp }}</w-td>
      <w-td kwota>{{ Koszt.Netto }}</w-td>
    </w-tr>
    <w-tr>
      <w-td kwota>{{ Koszt.Brutto }}</w-td>
    </w-tr>
  </template>
</w-table>
```

# Tagi do generowania złozonych informacji

## `w-tr-repeater`

generuje wiersze do tabeli na podstawie tablicy danych

- `schema` - tablica danych ze schematem

## `w-markdown`

generuje treśc na podstawie treści w formacie markdown

- https://www.markdownguide.org/basic-syntax/
- częsciowe wsparcie dla rozszerzeń markdown (Tabelki, Bloki kodu, Przekreślenie, Lista zadań):
  https://www.markdownguide.org/extended-syntax/

- `schema` - dane ze schemy
- `value` - wartość

jeśli chcemy podać treść bezpośrednio najlepiej otoczyć tagiem `<pre>`:

```html
<w-markdown>
  <pre>
1. *jeden*
1. ~~dwa~~
1. trzy
    1. trzy jeden
       1. trzy `code` jeden          
          * [ ] super
          * [x] extra
  </pre>
</w-markdown>
```