# Document Components ## Typowy format dokumentu ```html UMOWA NR …………. o realizację Inicjatywy zleconego w ramach Programu NOWEFIO - zachowując historię społeczności Ustep 1 Punkt 1 Podpunkt sfsdfdf Podpunkt Punkt 2 Ustep 2 Punkt 1 Punkt 2 .... ``` 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 ## ~~``~~ Nadrzędny element dokumentu parametry - `start` - od jakiego numeru numerować paragrafy, domyśnie jeden - `showFooters` - czy generować przypisy, domyślnie `true` - `justify` - czy justować tekst w paragrafach - `lang` - język umowy (ma wpływ na np. nazwy miesięcy, formatowanie liczb), domyślnie `pl` - `dateFormat` - okresla domyslny format daty dla tagu ``, domyślnie wynika z języka - `wlini` - 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)` - `kwotaspacje` - wszystkie kwoty wyswietla ze spacją tysięczną - `stopka` - dodaje domyślą stopkę, odpowiada dodanu do umowy pustego tagu `` - `colors` - definicja własnych kolorów których potem mozna używać np. jako tło komórki np. `"{'td1': 'yellow'}"` - `znakwodny` - tresć znaku wodnego - `fontFamily` - nazwa czcionki, domyśl;nie Arial - `fontSize` - rozwmiar czcionki, domyslnie 9 - `dataPath` - generuje `data-path` dla elementów wynikających z jSchema ## `` - 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` - `right`, `left`, `top`, `bottom` - marginesy, można podać jednostkę np. `1.5cm` ## `` Element określający paragraf umowy parametry - `warunek` - czy generaować paragraf, domyślnie `true` - `tytul` - tytuł paragrafu - `nazwa` - nazwa paragrafu, przydatna gdy trzeba pobrać wygenerowany numer (gdy brak nazwy mona to zrobić po tytule) ## `` Blok wstepny umowy, przed apragrafami ## `` Blok koncowy umowy, po paragrafach ## `` 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 To jtest blok tekstu wyrównany do prawej ``` ## `` Element określający linię tekstu ```html Witkac sp. z o.o. Słupsk, Sienkiewicza 5a NIP: 234234234 ``` ## `` / `` Listy numerowane ## `` Pozwala umieścić przypis w takescie, domyślnie generowany jako indeks górny, treśc przypisu nie jest generowana parametry: - `number` - numer przypisu ```html To jest wyjaśnienie przypisu ``` ## `` Generuje przypisy wygenerowane tagami `w-footnote` ```html ``` da taki efekt ``` ----------------------------- 1) To jest wyjaśnienie przypisu ``` # `` tag grafiki parametry: - `height` - wysokosc genrowanej grafiki - `src` - dane lub adres url grafiki, lepiej dane w formacie `data:image/jpeg;base64,/9j/4AAQ....` ```html ``` # `` i `` Treśc mozna umieszac w wielu kolumnach, najczesciej w dwoch do tego sluza tagi `` i `` parametry tagu `` - `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 Umowa numer 3/45/2024 Słupsk, dnia 20.04.2024 Umowa numer 3/45/2024 Witkac sp. z o.o. Słupsk, Sienkiewicza 5a NIP: 234234234 ``` # `` Tabelka z obramowaniem skladajaca się z wierszy `` i kolumn `` własciwosci tagu `` - `header` - oznacza ze kolumny są nagłowkami (generowane jako ``) dodatkowe właściwosci tagu `` - `colspan` - ile kolumn połaczyć w poziomie - `rowspan` - ile kolumn połaczyć w pionie ```html Lp Netto Brutto {{ Koszt.Lp }} {{ Koszt.Netto }} {{ Koszt.Brutto }} ``` # 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 Umowa numer {{ Umowa.Numer }} dla {{ Oferta.NazwaFirmy }} ``` w przypadku gdy dane są uzywane w parametrach jak np. `warunek` etedy nazwe parametru nalezy poprzedzic znakiem `:` ```html ``` # Tagi specjalne ## `` Wybiera odmianę w przypadku gdy liczba jest pojedyncza czy mnoga. W przypadku braku podania argumentu `liczba` jest pobierana z `Oferta.IloscOferentow`. Przykłady: ```html oferenta/oferentów oferenta/oferentów jeden/wiele ``` ## `` Generuje tekst przekreślony, ale w przypadku gry podany zostanie warunek robi to warunkowo lub wybiera z dwóch opcji ```html tekst wielu/jeden ``` ## `` Oblicza numer paragrafu na podstawie jego tytułu lub nazwy (gdy podano) ```html § Obowiązki i uprawnienia informacyjne § ``` ## `w-money` Formatuje liczbę jako kwotę i dodaje `zł` chyba, ze parametr `waluta` jest ustawiony inaczej parametry - `currency` - `smaces` - dodaje spacje miedzy tysiącami (w języku polskim dopiero od 10 000) - `schema` - model z jSchema ```html 10.456 {{ Oferta.ZrodlaFinansowaniaSuma.WkladOsobowy }} 10.456 ``` ## `` Zamienia na słownie złotych parametry - `fraction` - czy zawsze wyswietlac grosze nawet jak jest ich 0 - `schema` - model z jSchema ```html 10.456 10 10 ``` ## `` formatuje datę do formau wyniakącego z języka dokumnetu, domyślnie polskiego `D.MM.YYYY` - `schema` - model z jSchema - `date` - wartośc daty ```html 2024-04-03 {{ Oferta.DataStart }} ``` ## `` koloruje tekst na wybrany kolor, obsługiwane bezpośrednio są 3 kolory: `blue` `red` i `green`, obsługuje zdefiniowane kolory w komponencie `w-document` ```html To jest mój adres email daniel.jursza@witkac.pl Kategorycznie NIE wolno !!! BIOdegradowalne Żółty Jasnozielony ``` # Tagi html ## `` pogrubienie ```html To jest pogrubiony tekst ``` ## `` pochylenie ```html To jest pochylony tekst ``` ## `` podkreślenie ```html To jest podkreślony tekst ``` ## `` przekreślenie, ale lepiej uywać `` ```html To jest przekreślony tekst ``` ## `
` przejście do nowej lini, lepiej uywać tagu `` ```html pierwsza linia
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 Jeden Oferent Dwóch oferentów Więcej niz dwóch oferentów ``` gdy chcemy warunkowo generować więcej tagów to mozna je polaczyc tagiem `