wertyz-vue

Interná knižnica Vue 3 komponentov pre Wertyz aplikácie — menu, tabuľky, formuláre, modály, grafy, plus pár pomocných tried pre volanie backend API a prácu s mapami. Tento dokument je jediná dokumentácia, ktorá k balíku existuje — je vygenerovaná priamo zo zdrojového kódu (src/), nie odhadnutá z package.json (ktorý je na viacerých miestach zavádzajúci, pozri sekciu Pasce nižšie).

Verzia zdokumentovaná tu: 3.11.3 (stav zdrojového kódu k 2026-09-25). Čo sa zmenilo oproti predchádzajúcej verzii tohto dokumentu (3.10.38), nájdeš v sekcii Zoznam zmien.

Obsah

1. Inštalácia a základné zapojenie
2. Čo si musíš doinštalovať sám
3. Pasce — prečítaj pred písaním kódu
4. Prehľad komponentov
5. Layout / Navigácia
6. Formuláre / Vstupy
7. Tabuľky
8. Spätná väzba / Prekrytia
9. Grafy
10. Pomocné nástroje: wMixin, wAjax, wMap
11. Dizajnové tokeny (CSS premenné)
12. Zoznam zmien

1. Inštalácia a základné zapojenie

npm install wertyz-vue

// main.js
import { createApp } from 'vue';
import wertyzVue from 'wertyz-vue';
import mitt from 'mitt';

const app = createApp(RootComponent);
app.provide('emitter', mitt());   // POVINNÉ — pozri bod 5 v Pasciach
app.use(wertyzVue);
app.mount('#app');

app.use(wertyzVue) reálne robí len dve veci:

1. Zlúči malý objekt wGlobals (nižšie) do app.config.globalProperties, takže napr. this.IS_MOBILE funguje v každom komponente bez importu.
2. Zaregistruje vue-cookies s {expires: Infinity} → this.$cookies je dostupné všade.

Neregistruje žiadne komponenty globálne. Všetkých 39 exportovaných členov (32 komponentov + wMixin, wAjax, wMap, wExport, wRouteDiagram, WebPushService, wRouteDiagramStyle) sú pomenované ES exporty — importuješ ich a pridáš do vlastného components: {}:

import { WertyzTable, WertyzModal, wMixin, wAjax } from 'wertyz-vue';

Importovanie čohokoľvek z 'wertyz-vue' má vedľajší efekt — natiahne 3 globálne CSS súbory (global.css, globalMobile.css, globalPrint.css). Pri bežnom webpack/vite bundlingu sa to deje automaticky, netreba nič robiť navyše.

wGlobals — presne toto (a nič iné) je dostupné ako this.X

| Property | Popis | |---|---| | IS_MOBILE | boolean, vypočíta sa raz pri načítaní modulu (window.matchMedia('(max-width: 767px)')) — nie je reaktívne, nečakaj že sa zmení pri zmene veľkosti okna | | DATEPICKER_LANG | { formatLocale: { firstDayOfWeek: 1 } } | | COLORS | 8-farebná brand paleta ({0:'#009999', 1:'#D5EEE8', ...}) — pozor, žiadny grafový komponent na ňu nedefaultuje (pozri Pasce, bod 7) | | MONTH_NAMES | {0:'January', ..., 11:'December'} | | BACK_BTN_IMG, MINIMALIZE_IMG, MAXIMALIZE_IMG | importnuté SVG ikonky |

BASE_PATH nie je súčasťou wertyz-vue — je to konvencia niektorých existujúcich appiek, nie niečo čo dostaneš zadarmo inštaláciou balíka.

2. Čo si musíš doinštalovať sám

Balík viacero vecí len predpokladá že už existujú globálne — nič z nasledovného nie je súčasťou wertyz-vue a nič ťa na to neupozorní inak, než chybou za behu:

| Závislosť | Prečo ju potrebuješ | Kto ju vyžaduje | |---|---|---| | jQuery (window.$) | Všetky AJAX volania cez wAjax; interné DOM operácie | wAjax, WertyzTable (WertyzMenu ho používa len ak existuje — pozri nižšie) | | datatables.net (jQuery-plugin balík, nie datatables.net-vue3) | Vykresľovanie samotnej tabuľky | WertyzTable | | select2 (JS + CSS) | Selector počtu záznamov na stránku | WertyzTable | | vue-router | <router-link>, this.$router | WertyzMenu, WertyzDetailHeader | | i18n plugin (napr. vue-i18n) s $t() | Popisky tlačidiel/labelov (RealTime, From, To, AreYouSure?, Yes, No, search, CountOfResults, AllRows, back, ...) | WertyzIntervalPanel, WertyzTable, WertyzListNavbar, WertyzConfirmationWindow, WertyzDetailHeader | | vue-spinner | PulseLoader komponent | WertyzSmallLoader (a všetko čo ho vnútri používa: WertyzModal, WertyzConfirmationWindow, WertyzChartContent) | | pdfmake | Export do PDF | wExport.exportPDF(pdfMake, ...) — musíš doň poslať vlastnú pdfMake inštanciu | | Bootstrap-like CSS triedy (form-control, input-group, table, btn-*) | Štýlovanie | WertyzInput, WertyzSelectList, WertyzTable | | **ol ≥ 8.0.0 + ol-ext ≥ 4.0.0** (peer dependencies) | OpenLayers mapy | wMap/wertyz-vue/wMapNext | | **ol-contextmenu** (nikde nedeklarované, ani ako peer dep) | Kontextové menu na mape | len wertyz-vue/wMapNext` |

Naopak chart.js, vue-chartjs a chartjs-adapter-moment sú v package.json uvedené len ako devDependencies, ale v skutočnosti sú zabalené priamo do dist/wertyzVue.js — tie inštalovať netreba (overené priamym prezretím buildu, nie len package.json).

3. Pasce — prečítaj pred písaním kódu

1. Nič nie je globálne zaregistrované. Každý komponent treba importovať menom.

2. CSS je vedľajší efekt importu. Ak sa štýly zdajú rozbité naprieč všetkými komponentami, over že bundler skutočne spracoval CSS importy z node_modules (pri netradičnom bundler setupe sa to môže stratiť).

3. chart.js/vue-chartjs/chartjs-adapter-moment netreba inštalovať (sú zabalené), naopak vue-spinner treba (je explicitne externalizovaný vo webpack configu balíka) — presný opak toho, čo by si čakal z devDependencies v package.json.

4. datatables.net-vue3 je síce v package.json ako bežná (bundlovaná) závislosť, ale reálne ju používa iba interný, needportovaný testovací komponent. WertyzTable potrebuje obyčajný jQuery-plugin balík datatables.net.

5. mitt() event bus musí byť poskytnutý (provide) v roote appky ako emitter. Bez neho WertyzMenu, WertyzMobileMenu, WertyzTable a všetky grafové komponenty pri mountnutí spadnú.

6. WertyzIntervalPanel emituje raz update:dateRange (camelCase), inokedy update:date-range (kebab-case). Kebab-case ide pri „RealTime", pri „Custom" rozsahu z modálu a pri sub-iteme bez hodnoty; camelCase pri presetoch a bežnom kliku na sub-item. Vue 3 pri $emit skúša aj camelCase podobu handlera, takže stačí jeden listener (v-model:date-range / @update:dateRange) — kebab-case varianta len v dev režime vypíše varovanie o nedeklarovanom evente. Ak však počúvaš cez natívny DOM / in-DOM šablónu, over si obe.

7. WertyzChartRowLegend volá this.randomColor() ako fallback, ale nemá mixins: [wMixin] — samostatne použitý bez colors prop spadne za behu (vnútri WertyzChartContent sa vykreslí len keď legendColors nie je prázdne, takže tam problém nenastane). Žiadny grafový komponent navyše nedefaultuje na wGlobals.COLORS — vždy pošli vlastné colors.

8. WertyzHeader-ov search prop je mŕtvy kód — nepoužíva sa v šablóne, použi sloty search-slot/search.

9. WertyzTable nemá žiadny built-in row-click event. Ak chceš po kliknutí na riadok otvoriť detail, naviaž si vlastný delegovaný jQuery listener (<table> má :id="tableId"):

   $('#' + this.tableId + ' tbody').on('click', 'tr', (event) => {
     const rowData = $('#' + this.tableId).DataTable().row(event.currentTarget).data();
     this.$router.push({ name: 'vehicle-detail', params: { id: rowData.id } });
   });

10. WertyzTable-ov tableColumns (popisky hlavičky) a tableOptions.columns (mapovanie dát, DataTables.net formát) sú dve paralelné polia, ktoré si musia sedieť poradím aj dĺžkou — najčastejší spôsob, ako sa dáta zobrazia v nesprávnom stĺpci. Navyše column.name (a group.name v tableColumnGroups) sa používajú ako Vue :key — musia byť v rámci tabuľky unikátne, inak Vue hlási duplicitné kľúče a hlavička sa môže zle prekresliť.

11. WertyzMenu zvýrazňuje aktívnu položku výlučne podľa routerName / routerNameChilds / routeParam — active-class z <router-link> sa už nepoužíva. Položka, ktorá má len to bez routerName, sa po navigácii nezvýrazní. Menu navyše pri zbalení siaha priamo na #main-content a #right-content (bez null kontroly) — tieto id-čka musia v layoute existovať.

12. WertyzSwitchButton emituje update:modelValue (a position-1/position-2) už pri mounted(), bez interakcie používateľa — watcher/handler na rodičovi sa teda spustí hneď po vykreslení.

13. BASE_PATH nie je súčasťou wertyz-vue (pozri sekciu 1).

4. Prehľad komponentov

| Komponent | Kategória | Na čo slúži | |---|---|---| | WertyzContent | Layout | 4 stackované sloty (header/before-content/content/footer) | | WertyzHeader | Layout | Nadpis stránky + až 3 akčné tlačidlá | | WertyzMenu | Layout | Fixný vertikálny sidebar s vyhľadávaním a podpoložkami | | WertyzMobileMenu | Layout | Hamburger/close prepínač mobilného menu | | WertyzVerticalNavbar | Layout | Vertikálne ikona+label taby s animovaným obsahom | | WertyzListNavbar | Layout | Horizontálne taby nad tabuľkou + počet záznamov | | WertyzDetailNavbar | Layout | Horizontálne taby pre detail stránky | | WertyzDetailHeader | Layout | Responzívna hlavička detailu (späť, ikona, titulok, tlačidlá) | | WertyzDetailContent | Layout | Kompletný layout detail stránky | | WertyzListContent | Layout | Kompletný layout list stránky (hlavička + tabuľka) | | WertyzDetailContentItem | Layout | Biela "karta" pre obsah detailu | | WertyzInput | Formuláre | Textový/číselný input s labelom a popisom | | WertyzRadio / WertyzRadioGroup | Formuláre | Radio button / skupina z poľa | | WertyzCheckbox | Formuláre | Štýlovaný checkbox | | WertyzSwitchButton | Formuláre | Prepínač on/off | | WertyzSelectList | Formuláre | Vyhľadateľná vyberateľná tabuľka s checkboxami | | WertyzQuickFilter | Formuláre | Riadok klikateľných "chip" filtrov | | WertyzIntervalPanel | Formuláre | Rýchly výber časového rozsahu (Today/Week/Month/Custom) | | WertyzTable | Tabuľky | DataTables.net tabuľka s panelom a stránkovaním | | WertyzModal | Spätná väzba | Generický overlay modál | | WertyzConfirmationWindow | Spätná väzba | Áno/Nie potvrdzovací dialóg | | WertyzLoader | Spätná väzba | Celostránkový loader | | WertyzSmallLoader | Spätná väzba | Malý inline loader (pulse dots) | | WertyzProgressBar | Spätná väzba | Horizontálny progress bar | | WertyzChartContent | Grafy | Layout shell pre graf (hlavička + legenda) | | WertyzPieChart / WertyzBarChart / WertyzLineChart / WertyzScatterChart | Grafy | Chart.js wrappery | | WertyzChartLegend / WertyzChartRowLegend | Grafy | Legendy synchronizované s grafom | | wMixin | Pomocník | Formátovanie dátumov/farieb, fuzzy search | | wAjax | Pomocník | Bázová trieda pre API service triedy | | wMap / wMap next | Pomocník | OpenLayers geo pomocníci |

5. Layout / Navigácia

WertyzContent

Generický wrapper stránky so 4 stackovanými slotmi.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | contentStyle | String, '' | Reťazec sa vloží priamo do :style koreňového <div id="wertyz-content"> — dá sa ním prebiť/doplniť predvolený padding 15px (0px v .map__detail layoute) definovaný v scoped CSS komponentu, napr. na nastavenie min-height. |

Emits: žiadne. Sloty: header, before-content, content, footer (všetky default, unscoped). Závislosti: žiadne mimo globálneho CSS. Predok s triedou .map__detail prepne na zero-padding "map detail" layout (zdieľaná konvencia s wMixin-ovým windowSize).

<template>
  <WertyzContent content-style="min-height: 100vh;">
    <template #header><MyPageHeader /></template>
    <template #content><MyPageBody /></template>
  </WertyzContent>
</template>
<script>
import { WertyzContent } from 'wertyz-vue';
export default { components: { WertyzContent } };
</script>

WertyzHeader

Hlavička stránky/sekcie s titulkom a až 3 akčnými tlačidlami, odlišný desktop/mobile layout.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | name | String, '' | Text titulku — vykreslí sa do <h2> (desktop) / <h3> (mobil, s :title="name" pre tooltip pri orezaní textu). | | btn | Object {name,class}, null | Ak nie je null, vykreslí najpravejšie (desktop) / posledné (mobil) tlačidlo — btn.name ako text, btn.class ako CSS trieda; klik emituje btn-action. Ak null, tlačidlo sa vôbec nevykreslí a headerTextClass computed rozšíri stĺpec s titulkom. | | secondBtn | Object {name,class}, null | Rovnaká logika ako btn, vykresľuje sa ako prostredné (desktop) / prvé (mobil) tlačidlo; klik emituje second-btn-action. Ak null, tlačidlo sa nevykreslí. | | thirdBtn | Object {name,class}, null | Rovnaká logika, ale vykresľuje sa len na desktope (mobilný layout preň nemá stĺpec vôbec); klik emituje third-btn-action. Ak null, stĺpec sa nerenderuje. | | search | Object, default {id:null,value:null} | Nepoužíva sa v šablóne vôbec (mŕtvy prop, pozri Pasce bod 8) — pre vyhľadávací input použi sloty search-slot (desktop) / search (mobil). |

Emits: btn-action, second-btn-action, third-btn-action (len desktop — mobil nemá tretie tlačidlo). Sloty: search-slot (desktop), other-row (desktop, celý riadok pod titulkom), search (mobil). Závislosti: mixins: [wMixin]; číta globálne this.IS_MOBILE.

<template>
  <WertyzHeader name="Vehicles" :btn="{name:'Add', class:'btn-success'}" @btn-action="onAdd">
    <template #search-slot><input v-model="q" /></template>
  </WertyzHeader>
</template>
<script>
import { WertyzHeader } from 'wertyz-vue';
export default { components: { WertyzHeader }, data: () => ({ q: '' }), methods: { onAdd() {} } };
</script>

WertyzMenu

Fixný vertikálny sidebar — zbaliteľný, vyhľadávanie, zvýraznenie aktívnej trasy, vnorené podpoložky.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | items | Array — {name,to,routerName,routerNameChilds,hide,disabled,groupLabel,class,imgText,img,imgActive,fontSize,itemClass,subItems:[...]}, default () => [] | Zoznam položiek menu. Položka s to sa vykreslí ako <router-link> (reálna navigácia); bez to ako obyčajné <li>, ktoré po kliknutí len rozbalí/zbalí svoje subItems (plynulá CSS grid animácia). hide:true položku vynechá z výpisu, disabled:true pridá triedu menu__content__li--disabled. routerName (meno route) a routerNameChilds (pole ďalších mien route, napr. detailov) určujú, pri ktorých route sa položka zvýrazní ako aktívna — bez nich sa položka s to nezvýrazní (pozri Pasce, bod 11). groupLabel vykreslí nad prvou položkou každej súvislej skupiny s rovnakým labelom veľkým písmom nadpis skupiny (v zbalenom menu skrytý). class/imgText vykreslia farebný textový "odznak" namiesto obrázkovej ikony. img/imgActive sú dve verzie ikony — keď je položka aktívna, src sa prepne na imgActive (ak je zadaný). fontSize sa nastaví ako CSS premenná --menu-item-font-size (len top-level položky, podpoložky ho ignorujú). itemClass sa pridá ako extra CSS trieda k riadku. subItems (rovnaká štruktúra, navyše params pre routeParam) sa vykreslia ako vnorený zoznam, viditeľný len keď je rodičovská položka aktívna. Zmena items znovu prepočíta aktívnu položku podľa aktuálnej route. | | appName | String, 'APPNAME' | Text vykreslený v hlavičke menu. | | logo | String, null | URL obrázka vykresleného nad hlavičkou menu; ak null, vykreslí sa <img> bez platného zdroja (rozbitý obrázok, žiadny fallback v kóde). | | routeParam | String, null | Meno route parametra, podľa ktorého sa porovnáva subItem.params[routeParam] s $route.params[routeParam] (porovnanie ako string, takže 1 a '1' sa zhodujú), aby označil správnu podpoložku ako aktívnu aj keď sa to nedá odvodiť len z mena aktuálnej route. Ak null, aktívnosť sa určuje výlučne podľa $route.name cez routerName/routerNameChilds. | | enableSearch | Boolean, false | true vykreslí vyhľadávací input nad zoznamom položiek; písanie doň spúšťa debounced fuzzy vyhľadávanie (searchInData z wMixin, 500ms delay) filtrujúce items podľa poľa name (bez ohľadu na diakritiku a veľkosť písmen, viac výrazov oddeľ ;). false input úplne skryje, vypisujú sa vždy všetky items. |

Emits: žiadne cez $emit; cez injektovaný emitter posiela toggle-menu (zbalenie/rozbalenie) a na mobile hide-menu + hide-mobile-menu (po kliknutí na položku s to alebo na backdrop); počúva na show-menu/hide-menu (listenery sa odpájajú v unmounted). Sloty: item-right (scoped: item), subitem-right (scoped: sub-item), footer. Závislosti: mixins: [wMixin]; inject: ['emitter']; this.$router/this.$route/<router-link>; this.$cookies; voliteľne this.$store (Vuex); this.IS_MOBILE. jQuery + datatables.net sú voliteľné — ak existujú, po zbalení menu sa prepočítajú šírky stĺpcov DataTables tabuliek. Očakáva DOM id-čka #main-content/#right-content v okolitom layoute (#w-menu je koreň samotného menu).

Mobil (≤ 767px): menu sa správa ako drawer cez celú šírku — otvára sa eventom show-menu (typicky z WertyzMobileMenu), pod ním sa zobrazí tmavý backdrop (--scrim-dark), scroll stránky sa zamkne a klik na backdrop alebo na navigačnú položku menu zatvorí. Zbalený režim sa na mobile nepoužíva.

Stav zbalenia sa ukladá do cookie wertyz-vue-<appName bez medzier> (samostatne pre každú appku). Staršie verzie používali spoločnú cookie wertyz-vue-web, ktorá sa už nečíta — po update si používateľ zbalenie nastaví raz nanovo.

Jednotlivé riadky vykresľuje interný (neexportovaný) komponent WertyzMenuEntry — ikona/odznak, názov, slot right a šípka rozbalenia; sloty item-right/subitem-right sa doň len preposielajú.

<template>
  <WertyzMenu :items="menuItems" app-name="Fleet Manager" :logo="logoUrl" enable-search />
</template>
<script>
import { WertyzMenu } from 'wertyz-vue';
export default {
  components: { WertyzMenu },
  inject: ['emitter'],
  data: () => ({
    logoUrl: '/logo.svg',
    menuItems: [
      { name: 'Dashboard', to: { name: 'dashboard' }, routerName: 'dashboard', img: '/icons/home.svg', groupLabel: 'Prehľad' },
      { name: 'Vozidlá', to: { name: 'vehicles' }, routerName: 'vehicles', routerNameChilds: ['vehicle-detail'], groupLabel: 'Evidencia' }
    ]
  })
};
</script>

WertyzMobileMenu

Hamburger/close prepínač mobilného menu, koordinovaný cez zdieľaný event bus.

Props: žiadne — komponent nemá props blok, celé správanie (prepínanie hamburger/close ikony a emitovanie eventov) je riadené len internou dátou isShowMenu a injektovaným emitter. Emits: žiadne cez $emit; posiela show-menu/hide-menu cez emitter; počúva na hide-mobile-menu (ten posiela WertyzMenu, keď sa na mobile zatvorí po kliknutí na položku alebo backdrop — ikona sa tak prepne späť na hamburger). Sloty: žiadne. Závislosti: inject: ['emitter'] (rovnaký bus ako WertyzMenu); mixins: [wMixin]; očakáva globálny glyphicons icon font, ktorý nie je súčasťou balíka.

<template><WertyzMobileMenu /></template>
<script>
import { WertyzMobileMenu } from 'wertyz-vue';
export default { components: { WertyzMobileMenu }, inject: ['emitter'] };
</script>

WertyzVerticalNavbar

Vertikálne ikona+label taby s animovaným obsahom cez scoped slot.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | items | Array — {name,icon,componentName,active}, default [] | Zoznam vertikálnych tabov vľavo. icon zobrazí obrázok nad/vedľa textu (ak chýba, zobrazí sa len text). Prvá položka s active:true sa len raz pri mounted() predvyberie ako selectedItem (neskoršia zmena items toto automaticky neprepočíta). Klik na tab nastaví selectedItem a cez scoped slot item-component odovzdá jeho componentName/item na vykreslenie príslušného obsahu vpravo. | | transition | Boolean, false | true pridá <transition mode="out-in" appear> s name="fade" obaľujúcu slot content (plynulý fade medzi tabmi aj pri prvom zobrazení; triedy .fade-* sú v global.css); false necháva prázdny name — obsah sa prepína okamžite bez CSS triedy prechodu. |

Emits: žiadne. Sloty: item-component (scoped: component-name, item). Závislosti: žiadne mimo core Vue.

<template>
  <WertyzVerticalNavbar :items="tabs" transition>
    <template #item-component="{ componentName, item }">
      <component :is="componentName" v-if="componentName" :item="item" />
    </template>
  </WertyzVerticalNavbar>
</template>

WertyzListNavbar

Horizontálny riadok tabov nad tabuľkami v "list" pohľadoch; zobrazuje aj počet výsledkov a select dĺžky stránky.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | items | Array — {name,clickCallback,active,listId,hide,img,style} | Zoznam horizontálnych tabov nad tabuľkou. clickCallback sa zavolá priamo pri kliku — komponent si sám nespravuje výber, triedu active si musí riadiť volajúci cez vlastné dáta v items. hide:true tab skryje cez v-show (ostáva v DOM). listId nastaví DOM id na <li>. img zobrazí ikonu pred textom. style ide priamo do inline štýlu <a>. | | tableId | String, null | Použije sa len na zostavenie DOM id <select>-u dĺžky stránky (${tableId}-length) — inak nemá vplyv na vzhľad ani správanie. | | tableLength | Number, 10, v-model | Aktuálne vybraná hodnota v <select> dĺžky stránky; zmena vo <select> emituje update:tableLength. | | tableCount | Number, 0 | Zobrazuje sa ako číslo vedľa textu $t('CountOfResults'). Špeciálna hodnota -1 úplne skryje aj počet aj celý <select> dĺžky stránky bez ohľadu na showTableLength. | | showTableLength | Boolean, true | Prepína, či sa vôbec zobrazí blok "počet výsledkov + select dĺžky stránky" (platí len keď navyše nie je mobil a tableCount !== -1). false obe schová. | | scrollbar | Boolean, true | true pridá CSS triedu scrollbar (pravý biely okraj) a inline display:flex na zoznam tabov, čo umožní horizontálny posuv pri veľa tuboch. |

Emits: update:tableLength. Sloty: control. Závislosti: globálne $t('CountOfResults')/$t('AllRows') (i18n); this.IS_MOBILE; CSS select2.

WertyzDetailNavbar

Horizontálny riadok tabov pre "detail" pohľady; prepína obsah vybraného tabu (scoped slot) vnútri WertyzDetailContentItem karty. Prepnutie je animované (predvolene zapnuté):

• Posuvný indikátor — zelená čiara nad aktívnym tabom (--accent-width, --green) sa plynulo presunie a prispôsobí šírku novému tabu (--transition-macro). Prepočítava sa pri kliknutí, zmene veľkosti riadku tabov (ResizeObserver) aj zmene items; pri horizontálne scrollovateľných taboch scrolluje spolu s nimi a kliknutý tab sa posunie do viditeľnej časti.
• Smerový slide + fade obsahu — tab vpravo od aktuálneho: obsah odíde doľava a nový príde sprava (posun 12px); tab vľavo naopak. Odchod .14s ease-in, príchod .2s ease-out, pri prvom zobrazení len fade. Obsah je obalený v <div> s :key = item.name, takže animácia beží aj keď dva taby používajú rovnaký componentName.
• prefers-reduced-motion: reduce → len prelnutie, bez posunu a bez pohybu indikátora.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | items | Array — {name,active,componentName,hide,img,style} | Zoznam tabov detailu. Prvá položka s active:true sa len raz pri mounted() predvyberie ako selectedItem. Klik prepne selectedItem (trieda active sa odvodzuje od neho, item.active sa pri kliku nemení) a cez scoped slot item-component odovzdá componentName/item. Klik na už aktívny tab nič nerobí. hide:true tab skryje (v-show), img zobrazí ikonu, style ide do inline štýlu <a>. name musí byť unikátne (slúži ako :key). | | animated | Boolean, true | false vypne animáciu obsahu (<transition :css="false">) aj plynulý pohyb indikátora — prepnutie je okamžité. | | transition | Boolean, false | Riadi už len to, či sa po odchode starého obsahu okno scrollne na spodok stránky (window.scrollTo, smooth). Samotnú animáciu riadi animated. | | scrollbar | Boolean, true | Pridáva CSS triedu scrollbar + display:flex na zoznam tabov pre horizontálny posuv. |

Emits: žiadne. Sloty: control, item-component (scoped: component-name, item). Závislosti: interne komponuje WertyzDetailContentItem; ResizeObserver (ak nie je dostupný, indikátor sa neprepočíta pri zmene veľkosti okna).

WertyzDetailHeader

Responzívna hlavička detail stránky (späť odkaz, ikona, titulok, až 2 tlačidlá); interne si vyberá medzi needportovanými WertyzDetailHeaderDesktop/WertyzDetailHeaderMobile podľa this.IS_MOBILE.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | backUrl | String\|Object, null | Cieľ (to) odkazu "späť". Ak je null/falsy, created() hook namiesto neho použije router.options.history.state.back (stav histórie prehliadača), takže odkaz funguje aj bez explicitného zadania. | | name | String, null | Titulok stránky, zobrazený v oboch layoutoch. | | secondBtn / firstBtn | Object {name,class}, default () => ({name:null,class:null}) | Ak majú name, vykreslia sa ako tlačidlá v oboch layoutoch; klik emituje first-btn-action / second-btn-action. Ak name chýba/je null, tlačidlo sa nevykreslí. | | img | String, null | URL ikony vykreslenej vedľa titulku. Ak null, ikona sa nevykreslí. | | imgClass | String, null | CSS trieda pridaná k wrapperu ikony — má efekt len keď je zároveň zadaný img. | | showBack | Boolean, true | true vykreslí stĺpec s odkazom "späť" (ikona + text na desktope, len ikona na mobile); false ho úplne odstráni a titulok/tlačidlá zaberú širší stĺpec. |

Emits: first-btn-action, second-btn-action (opravené 2026-09 — predtým boli handlery napojené ako string literály a klik nič neemitoval). Sloty: text-content (obe verzie), content (len desktop — nahradí celý riadok tlačidiel/titulku). Závislosti: this.$router (padá na router.options.history.state.back ak chýba backUrl); this.IS_MOBILE; desktop layout volá $t('back').

WertyzDetailContent

Kompletný layout detail stránky — kombinuje WertyzDetailHeader + info panel + WertyzDetailNavbar.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | headerName | String, 'Header name' | Prechádza do vnoreného WertyzDetailHeader ako name — titulok hlavičky detailu. | | headerImg | String, null | Prechádza ako img do WertyzDetailHeader — ikona vedľa titulku. | | headerFirstBtn / headerSecondBtn | Object {name,class} | Prechádzajú ako first-btn/second-btn do WertyzDetailHeader; klik sa znovu emituje ako header-first-btn-action / header-second-btn-action. | | headerBackUrl | String\|Object, null | Prechádza ako back-url do WertyzDetailHeader. | | headerImgClass | String, null | Prechádza ako img-class do WertyzDetailHeader. | | navbarItems | Array, null | Ak je zadané, vykreslí sa vnorený WertyzDetailNavbar s týmito tabmi pod info panelom; ak null, celá navbar sekcia sa nevykreslí. | | headerShowBack | Boolean, true | Prechádza ako show-back do WertyzDetailHeader — riadi viditeľnosť odkazu "späť". | | headerShow | Boolean, true | true vykreslí WertyzDetailHeader; false ho úplne vynechá a navyše pridá CSS triedu header--no na koreňový div. | | navbarTransition | Boolean, false | Prechádza ako transition do WertyzDetailNavbar — po prepnutí tabu scrollne stránku na spodok. | | navbarAnimated | Boolean, true | Prechádza ako animated do WertyzDetailNavbar — false vypne animáciu prepínania tabov. | | navbarScrollbar | Boolean, true | Prechádza ako scrollbar do WertyzDetailNavbar — zapína horizontálny posuv zoznamu tabov. |

Emits: header-first-btn-action, header-second-btn-action. Sloty: header-text-content, header-content, informations, navbar-item-component (scoped: componentName, item), navbar-control, content.

<template>
  <WertyzDetailContent header-name="Vehicle #123" :navbar-items="tabs">
    <template #informations><VehicleInfoBox /></template>
    <template #navbar-item-component="{ componentName, item }">
      <component :is="componentName" v-if="componentName" :item="item" />
    </template>
  </WertyzDetailContent>
</template>

WertyzListContent

Kompletný layout list stránky — kombinuje WertyzContent + WertyzHeader + WertyzListNavbar + WertyzTable, s v-model search/count/length.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | headerName | String, 'Header name' | Prechádza ako name do predvoleného vnoreného WertyzHeader (default obsah slotu list-header). | | headerBtn / headerSecondBtn | Object, null | Prechádzajú ako btn/second-btn do vnoreného WertyzHeader; klik naň sa znovu emituje z tohto komponentu ako header-btn-action/header-second-btn-action. | | headerShow | Boolean, true | Riadi, či sa vnorený predvolený WertyzHeader vôbec vykreslí. | | navbarItems | Array, null | Ak je zadané, vykreslí vnorený WertyzListNavbar nad tabuľkou; ak null/falsy, navbar sa vôbec nevykreslí — vtedy sa nevykreslí ani samotná tabuľka, keďže je zabalená v tom istom bloku. | | navbarScrollbar | Boolean, true | Prechádza ako scrollbar do WertyzListNavbar. | | tableId | String, 'wertyz-table' | Prechádza do vnoreného WertyzListNavbar (DOM id selectu dĺžky) aj do WertyzTable (DOM id samotného <table>, dôležité napr. pre vlastné jQuery listenery na kliknutie riadku). | | tableCount | Number, 0 | Prechádza do WertyzListNavbar ako zobrazený počet výsledkov a je previazané s v-model:table-count na WertyzTable; zmena z WertyzTable sa emituje von ako update:tableCount. | | tableLength | Number, 10 | Zdieľaná hodnota dĺžky stránky medzi WertyzListNavbar-ovým selectom a WertyzTable-ovým stránkovaním; zmena z ktorejkoľvek strany sa emituje von ako update:tableLength. | | tableOptions | Object, null | Prechádza priamo do WertyzTable ako table-options (DataTables.net konfigurácia) — rovnaký efekt ako v sekcii Tabuľky. | | tableColumns | Array, [] | Prechádza priamo do WertyzTable — popisky hlavičky stĺpcov. | | tableData | Array, [] | Prechádza priamo do WertyzTable — dáta tabuľky (deep-watched, spúšťa reload). | | tableSearch | String, null | Prechádza ako v-model:table-search do WertyzTable; zmena sa emituje von ako update:tableSearch. | | showPanel | Boolean, true | Prechádza ako show-panel do WertyzTable (zobrazenie horného search/count/length panelu); zároveň nastavuje show-table-length na WertyzListNavbar na opačnú hodnotu (!showPanel), takže ovládanie počtu/dĺžky výsledkov sa presunie buď do panelu tabuľky, alebo do navbaru — nikdy nie na oboch miestach naraz. | | tableLengths | Array | Prechádza priamo do WertyzTable — vlastný zoznam možností dĺžky stránky. | | tableColumnGroups | Array, [] | Prechádza priamo do WertyzTable — zoskupený hlavičkový riadok stĺpcov. |

Emits: update:tableSearch, update:tableCount, update:tableLength; header-btn-action, header-second-btn-action. Sloty: list-header (default = vstavaný WertyzHeader), header-search-slot, header-other-row, before-content, navbar-control, before-table, table-panel-first-item, table-panel-second-item, table-footer, table-header. Závislosti: dedí celú WertyzTable-ovú jQuery/datatables.net/select2 požiadavku (pozri sekciu 7).

<template>
  <WertyzListContent header-name="Vehicles" :header-btn="{name:'Add', class:'btn-success'}"
    :table-columns="columns" :table-data="rows" :table-count="rows.length"
    v-model:table-length="length" v-model:table-search="search" @header-btn-action="onAdd" />
</template>

WertyzDetailContentItem

Biela "karta" wrapujúca obsah detail pohľadu (interne používaná WertyzDetailNavbar, dá sa použiť aj samostatne).

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | style | String, '' | Reťazec sa vloží priamo do :style koreňového <div class="w__content__item"> — dá sa ním prebiť/doplniť predvolený vzhľad karty (biele pozadie --surface-raised, padding 10px, --radius-md, tieň --shadow-raised) definovaný v scoped CSS. V .map__detail layoute je karta priehľadná a bez tieňa. Modifikátor w__content__item--bg-transparent (cez class atribút) dá priehľadné pozadie. |

Emits: žiadne. Sloty: content (default).

6. Formuláre / Vstupy

WertyzInput

Jednoriadkový text/number input s labelom, popisným textom a voliteľným prívlastkom (addon).

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | labelClass / labelStyle | String, '' | Viažu sa priamo na <label> cez :class/:style; pri prázdnom reťazci label nemá žiadnu extra triedu ani inline štýl. | | inputClass / inputStyle | String, '' | Viažu sa na <input> cez :class (popri pevnej triede form-control) a :style. | | labelText | String, null | Text vnútri <label>; zároveň riadi v-show — pri null/prázdnej hodnote label zostáva v DOM, ale je skrytý (žiadny nadpis nad inputom). | | inputType | String, 'text' | Nastavuje atribút type na <input> (napr. text, password, number, email), teda typ natívneho HTML poľa a jeho klávesnicu/validáciu v prehliadači. | | modelValue | String\|Number, null, v-model | Hodnota zobrazená v inpute. Aktualizácia sa emituje ako update:modelValue len na natívny event change (nie input) — hodnota sa prenesie von až pri strate fokusu/potvrdení, nie priebežne pri písaní; emitovaná hodnota je vždy string bez ohľadu na deklarovaný typ Number. | | required | Boolean, false | Nastavuje HTML atribút required — zapína natívnu HTML5 validáciu povinného poľa (bez vlastnej vizuálnej chybovej hlášky v komponente). | | descriptionText | String, null | Text v <small class="text-muted"> pod inputom; v-show element skryje, ak je hodnota falsy. | | disabled | Boolean, false | Nastavuje atribút disabled — pole je needitovateľné a nepoužíva sa v odosielaných formulárových dátach. | | appendText | any, null | Keď je pravdivé: obalový <div> dostane triedu input-group a v predvolenom obsahu slotu append sa zobrazí <span class="input-group-addon">{{appendText}}</span>. Ak rodič poskytne vlastný obsah cez <template #append>, text sa nevykreslí, ale trieda input-group na wrapperi sa stále riadi jeho pravdivostnou hodnotou. | | maxLength / max | Number, null | Mapujú sa priamo na HTML atribúty maxlength a max (obmedzenie počtu znakov, resp. maximálnej číselnej hodnoty pri type="number"). |

Emits: update:modelValue — len na natívny change, nie na input (hodnota sa aktualizuje až po strate fokusu alebo Enter, nie pri každom stlačení klávesy). Sloty: append (default: <span class="input-group-addon">{{appendText}}</span>).

<template>
  <WertyzInput v-model="name" label-text="Name" description-text="Enter your full name" :required="true" append-text="kg" />
</template>

WertyzRadio / WertyzRadioGroup

Radio button (samostatný, alebo cez WertyzRadioGroup z poľa items).

WertyzRadio

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | text | String, null | Text zobrazený vedľa radio kruhu. | | value | String\|Number\|Object, null | Hodnota priradená natívnemu radio inputu a zároveň vstup do computed checked (porovnáva sa s modelValue). | | modelValue | (v-model), null | Aktuálna hodnota celej skupiny. checked vracia true, ak modelValue === value (alebo pri compareKey porovnanie podľa kľúča) — od toho závisí, či je radio vizuálne zaškrtnuté. | | name | String, 'wertyz-radio' | Atribút name na radio inpute — natívne HTML zoskupenie: len jeden radio s rovnakým name môže byť naraz zaškrtnutý. | | compareKey | String, null | Ak je nastavený a value je objekt, checked sa počíta ako value[compareKey] === modelValue[compareKey] namiesto striktnej rovnosti. Ak je modelValue null/undefined (počiatočný stav), radio je jednoducho nezaškrtnuté. Pozor ale na value: null spolu s compareKey — value[compareKey] stále vyhodí TypeError. | | icon | String, null | Ak je nastavený, zobrazí sa ikona napravo od labelu; ak null, ikona sa vôbec nerenderuje. |

WertyzRadioGroup

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | headerText | String, null | Text nad skupinou radio buttonov (nadpis skupiny). | | items | Array ({text,value,icon}) | Pre každú položku sa vyrenderuje WertyzRadio s text = item?.text ?? ('Item-'+index), value = item?.value ?? index. Nekonzistencia v zdroji: klik emituje priamo item.value (nie item?.value ?? index) — ak položka nemá vlastnosť value, kliknutím sa modelValue nastaví na undefined, hoci vizuálne porovnanie zaškrtnutia prebieha voči index, čo spôsobí, že radio sa po kliknutí prestane javiť ako zaškrtnuté. Vždy dodávaj value v každej položke — pri zadanom compareKey sa navyše :key počíta ako item.value[compareKey], takže chýbajúce value vyhodí chybu už pri renderi. | | modelValue | (v-model), null | Preposiela sa do každého WertyzRadio ako model-value — určuje, ktorá položka je aktuálne zaškrtnutá. | | groupName | String, 'wertyz-group' | Preposiela sa do každého WertyzRadio ako name. | | inRow | Boolean, true | Ak false, pridá sa trieda not-in-row — položky sa vykreslia pod sebou namiesto v riadku. | | groupClass | String, '' | Pripája sa priamo za prefix 'control-group' bez medzery — napr. groupClass="foo" vyprodukuje triedu control-groupfoo, nie samostatnú foo. Pre samostatnú triedu treba do groupClass dať úvodnú medzeru (" foo"). | | compareKey | String, null | Preposiela sa do každého WertyzRadio ako compare-key; zároveň sa použije pri výpočte :key v v-for. |

<template>
  <WertyzRadioGroup v-model="selected" header-text="Choose one" group-name="fruit-group"
    :items="[{ text: 'Apple', value: 'apple' }, { text: 'Pear', value: 'pear' }]" />
</template>

WertyzCheckbox

Štýlovaný jednoduchý checkbox s voliteľným labelom a ikonou.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | modelValue | any, v-model | Hoci typ nie je obmedzený, v šablóne sa vždy vynucuje na boolean (:checked="modelValue ? true : false"). Pri @input sa emituje update:modelValue so skutočným $event.target.checked, takže akákoľvek "truthy" vstupná hodnota sa po prvej interakcii nahradí čistým true/false. | | labelText | String, null | Text vnútorného <label> vedľa checkboxu. | | disabled | Boolean, false | Nastavuje atribút disabled na <input type="checkbox">. | | icon | String, null | Ak je nastavený, zobrazí sa ikona napravo od checkboxu. |

Emits: update:modelValue (boolean).

WertyzSwitchButton

On/off posuvný prepínač s vlastnými popiskami pozícií.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | id | String, 'id' | Používa sa na zostavenie 'switch-' + id pre atribúty name/id/for — zabezpečuje prepojenie labelu s inputom (klik na label prepne switch) a jedinečnosť pri viacerých switchoch na stránke. | | position1 | String, 'On' | Text zobrazený na ľavej (zapnutej) strane prepínača (cez CSS content pseudo-elementu). | | position2 | String, 'Off' | Text na pravej (vypnutej) strane prepínača. | | width | String, '100px' | Ovplyvňuje CSS šírku celého widgetu a pokojovú pozíciu posúvača. | | modelValue | Boolean, true | Nastavuje počiatočný stav prepínača. Každá zmena emituje update:modelValue, takže v-model funguje obojsmerne. V mounted() sa hneď emituje update:modelValue + position-1 (ak true) alebo position-2 (ak false) aj bez interakcie používateľa (pozri Pasce, bod 12). |

Emits: update:modelValue, position-1, position-2 (všetky aj pri mounted()).

<template>
  <WertyzSwitchButton id="notify" v-model="isOn" position1="On" position2="Off" width="120px" />
</template>

WertyzSelectList

Vyhľadateľná, vyberateľná dátová tabuľka s checkboxami; voliteľné zoskupovanie, limit maximálneho počtu výberov, deaktivácia jednotlivých riadkov. Použi namiesto WertyzTable keď cieľom je "nech si používateľ vyberie riadky", nie "prezerať/stránkovať dataset".

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | columns | Array ({name,dataKey,style}) | Iterované pre hlavičku aj telo tabuľky. column.style sa aplikuje len na <th> hlavičky (nie na <td>). column.dataKey (podporuje bodkovú notáciu, napr. "meta.department") sa použije na vytiahnutie vnorenej hodnoty z položky pre bunku; ak chýba, zobrazí sa celá položka. Slots column-header/column-body môžu vykresľovanie prepísať. | | items | Array (položky s id, voliteľne $isDisabled) | Zdrojové dáta zobrazené v tabuľke. item.id sa používa ako :key. item.$isDisabled === true pridá riadku triedu tr--disabled, vynúti disabled na jeho checkboxe a vylúči ho z hromadného výberu. Zmena referencie celého poľa vynuluje searchText (pozor: text v inpute ostane zobrazený, filter sa však zruší) a z výberu odstráni len položky, ktorých id v novom zozname už nie je — update:selected-items sa emituje len ak sa niečo odstránilo. Vyhľadávanie (debounce 300ms) ignoruje kľúče začínajúce $ a objektové/poľové hodnoty. | | selectedItems | Array, [] | Počiatočný/externe riadený výber — komponent si drží vlastnú kópiu synchronizovanú z tohto propu. | | onlySelectedItems | Boolean, false | Nefiltruje zoznam položiek (napriek názvu) — všetky riadky sa stále zobrazujú. Namiesto toho: žiadny checkbox riadku ani skupiny nejde prekliknúť, checkbox „vybrať všetko" je disabled, a každý riadok, ktorý momentálne nie je vybraný, dostane triedu tr--select-no (opacity 0.5, needá sa kliknúť) — efektívne "zamknutý" pohľad zvýrazňujúci len už vybrané položky. | | maxSelectedCount | Number, null | Ak je nastavený, hromadný výber (checkbox „vybrať všetko") je úplne vypnutý, aj keby limit ešte nebol dosiahnutý. Pre jednotlivé riadky: ak je limit dosiahnutý a daná položka ešte nie je vybraná, jej checkbox sa deaktivuje — používateľ tak môže vyberať po jednej položke max. do tohto počtu. | | groupBy | String, null | Kľúč alebo bodkovaná cesta na zoskupenie riadkov. Ak je nastavený, zobrazí sa hlavičkový riadok skupiny s vlastným checkboxom pre výber celej skupiny (aj čiastočný stav „niektoré vybrané") a počtom položiek v zátvorke. Ak null, renderuje sa plochý zoznam. |

Emits: update:selected-items. Sloty: column-header, column-body, group-header (scoped: group-key, group). Vybrané riadky dostanú triedu tr--selected (pozadie --surface-selected + zelený ľavý akcent).

<template>
  <WertyzSelectList :columns="[{ name: 'Name', dataKey: 'name' }, { name: 'City', dataKey: 'city' }]"
    :items="people" :selected-items="selected" group-by="city" @update:selected-items="selected = $event" />
</template>

WertyzQuickFilter

Riadok klikateľných textových "chip" filtrov, jeden zvýraznený ako vybraný.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | items | Array ({id,name,selected}), null | Iterované pre vykreslenie klikateľných "tabov". Kliknutím sa nastaví interný stav a emituje sa select s celou položkou; aktívna položka dostane triedu filter__item--selected. V mounted() sa jednorazovo prejde items a ak má niektorá položka selected: true, nastaví sa ako počiatočne aktívna — táto vlastnosť sa však po namountovaní ďalej nesleduje (nie je reaktívna). |

Emits: select (pošle kliknutý item).

WertyzIntervalPanel

Rýchly výber časového rozsahu (Today/Week/Month/Year presety, voliteľné podrozsahy, voliteľný Real-Time režim, "Custom" modál s dvomi date pickermi).

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | isDisabled | Boolean, false | Nastavuje :disabled na hlavných tlačidlách filtra aj na tlačidlách pod-položiek. Neovplyvňuje tlačidlo „RealTime" — to zostáva vždy klikateľné. | | dateRange | Object ({from,to,id}), null | Používa sa len jednorazovo v mounted() na obnovenie počiatočného výberu podľa dateRange.id; ak sa zhoda nenájde, vyberie sa prvá položka. Po namountovaní sa prop ďalej nesleduje — externá zmena z rodiča nemá žiadny efekt. | | isRealtime | Boolean, true | Ak true, vykreslí sa tlačidlo „RealTime" a v mounted() (keď nie je zadaný platný dateRange) sa automaticky vyberie ako predvolené. Ak false, tlačidlo sa nevykreslí a namiesto toho sa vyberie prvá položka zoznamu. | | buttonStyle | String, '' | Inline :style aplikovaný na úplne všetky tlačidlá filtra (hlavné aj pod-položkové). | | allowFixed | Boolean, true | Ak true, panel sa "prilepí" navrchu obrazovky pri odscrollovaní za pôvodnú pozíciu (na desktope). Ak false, toto správanie sa nikdy nezapne. | | isSubItems | Boolean, false | Zapína riadok pod-tlačidiel pod hlavným zoznamom (napr. Day/Week/Month/Year namiesto ThisDay/ThisWeek/...). Ovplyvňuje aj logiku počiatočného výberu a texty predvolených položiek. | | customItems | Array, [] | Ak obsahuje aspoň jednu položku, nahrádza celý predvolený zoznam predvolieb vrátane položky „Custom" (vlastný rozsah dátumov cez modal) — zadaním vlastného zoznamu sa teda vlastný date-range modal prestane ponúkať, pokiaľ ho neobsahuje. | | buttonMaxWidth | String, 'auto' | Nastavuje CSS max-width na tlačidlá filtra — obmedzuje ich maximálnu šírku. |

Emits: update:dateRange pri presetoch a kliku na sub-item, update:date-range (kebab-case) pri „RealTime", „Custom" rozsahu a sub-iteme bez hodnoty — vo Vue 3 stačí jeden listener (pozri Pasce, bod 6). Date pickery v „Custom" modáli sa navzájom obmedzujú (Od ≤ Do, obe ≤ dnes). Verejná metóda selectItem(index) bola odstránená. Závislosti: @vuelidate/core/@vuelidate/validators; vue-datepicker-next; ťažké použitie $t(...) pre všetky popisky.

7. Tabuľky

WertyzTable

DataTables.net-poháňaná <table> s voliteľným search/count/length panelom a vlastným stránkovaním.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | tableColumns | Array, [] | Určuje hlavičku tabuľky: v <thead> sa vyrenderuje jeden <th> na každý prvok poľa (column.name = text hlavičky, column.class = CSS trieda stĺpca). Pri prázdnom poli sa nevykreslí žiadny stĺpec hlavičky (pokiaľ nie je nahradený slotom header). | | tableId | String, 'wertyz-table' | Slúži ako HTML id samotného <table> a zároveň ako selektor, cez ktorý sa v mounted() inicializuje DataTables.net. Rovnaká hodnota odvodzuje aj id vyhľadávacieho poľa, selectu dĺžky stránky a kontajnera stránkovania — pri viacerých tabuľkách na stránke musí byť unikátne. | | tableOptions | Object, {} | Odovzdáva sa priamo ako inicializačné options do DataTables.net. Ak je „falsy", celá tabuľka sa vôbec neinicializuje. Kľúčové polia: data (pred inicializáciou sa prepíše hodnotou tableData), columns (natívna DataTables definícia dátových stĺpcov — mapovanie dát na bunky, nie to isté ako tableColumns), serverSide, ajax (server-side zdroj dát, reload cez <tableId>-ajax-reload event), pageLength, numberOfShowingPages (počet viditeľných čísel strán vo vlastnom stránkovači, na mobile default 5), searchCallback (zavolaná po každom vyhľadávaní s odfiltrovanými riadkami), searchInterval (debounce v ms medzi písaním a spustením filtra, default 250). Neinicializuje sa len pri explicitnom null — default {} je truthy. | | tableData | Array, [] — hlboko sledované, vyvolá reload | Zdrojové riadkové dáta. Pri zmene sa tabuľka prekreslí (clear().rows.add(data).draw()), prepočíta sa tableCount a po 100 ms sa prepočíta šírka stĺpcov. | | tablePanelStyle | String, '' | Odovzdáva sa do panelu (vyhľadávanie + počet výsledkov + dĺžka stránky) a naviaže sa priamo na jeho koreňový <div> cez :style. | | showPanel | Boolean, true | Keď false, panel s vyhľadávaním/počtom/dĺžkou sa vôbec nevykreslí (zvyšok tabuľky funguje ďalej). | | showPagination | Boolean, true | Keď false: blok počtu výsledkov v paneli sa rozšíri na celú šírku a select dĺžky stránky sa nevykreslí; samotné stránkovanie (šípky, čísla strán) sa tiež nevykreslí vôbec. | | tableLength | Number, 10, v-model | Počiatočná/aktuálna hodnota počtu riadkov na stránku; po inicializácii DataTables sa prepíše skutočnou hodnotou z tabuľky cez update:tableLength emit. | | tableCount | Number, 0, v-model | Zobrazuje sa v paneli ako „Počet výsledkov"; po inicializácii a po každej zmene tableData sa prepíše na počet riadkov po aplikovaní filtra cez update:tableCount emit. | | tableSearch | String, null, v-model | Naviazané na textový vyhľadávací input v paneli. Samotné filtrovanie DataTables sa spúšťa nezávisle cez natívny event na DOM elemente vyhľadávacieho poľa (s debounce podľa tableOptions.searchInterval), nie priamym watchom na túto prop. | | showSummary | Boolean, false | Keď true, vykreslí sa súhrnný riadok/riadky v <tfoot> zo tableSummaryData (ak nie je použitý slot footer); keď false, žiadne tfoot sa nevytvorí. | | tableSummaryData | Array, [] | Dáta pre súhrnný <tfoot> — pole riadkov, každý riadok pole hodnôt. Zobrazí sa len keď showSummary: true. | | tableClass | String, '' — w__table--hover-cross zapne zvýraznenie stĺpca pri hoveri | Pridáva sa ako CSS trieda na <table>. Ak obsahuje w__table--hover-cross, komponent pripojí na <table> delegované listenery myši, ktoré pri prejdení zvýraznia celý stĺpec vo všetkých riadkoch — funguje aj pre riadky pridané neskôr (reload, stránkovanie, server-side). | | tableLengths | Array | Zoznam možností pre select dĺžky stránky. Hodnota -1 sa zobrazí ako preklad „všetky riadky". | | tableColumnGroups | Array, [] — zoskupený hlavičkový riadok | Keď nie je prázdne, nad bežný riadok hlavičky sa vloží ešte jeden riadok so „skupinovými" hlavičkami (text, voliteľná CSS trieda, voliteľný colspan) — umožňuje vizuálne zoskupiť viacero stĺpcov pod jeden nadpis. | | showTable | Boolean, true | Keď false, samotná tabuľka a stránkovanie sú skryté (display:none), no panel (vyhľadávanie, počet výsledkov) ostáva viditeľný, ak je povolený cez showPanel. |

Emits: update:tableSearch, update:tableCount, update:tableLength. Sloty: header (nahradí <thead>), footer (nahradí <tfoot> summary), panel-first-item/panel-second-item.

Kritické závislosti (pozri sekciu 2): globálne jQuery, datatables.net (nie datatables.net-vue3), select2. Plus emitter na app roote a globálne $t().

Bez built-in row-click eventu — pozri Pasce, bod 9. column.name musí byť unikátne — pozri Pasce, bod 10.

Pri unmount sa korektne upracú interné časovače a registre eventov (wEventRegistrator.destroy()), takže opakované mount/unmount tabuliek už neakumuluje timery v window.eventRegistrators.

<template>
  <WertyzTable table-id="orders-table" :table-columns="[{name:'ID'},{name:'Customer'},{name:'Total'}]"
    :table-data="orders" :table-options="{ columns: [{data:'id'},{data:'customer'},{data:'total'}] }"
    v-model:table-search="search" v-model:table-count="count" v-model:table-length="length" />
</template>

8. Spätná väzba / Prekrytia

WertyzModal

Generický overlay modál s header/body slotmi, vstavaným malým loaderom, slide-in tranzíciou; zamyká scroll stránky kým je otvorený.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | modalClass / modalContentClass / modalHeaderClass / modalBodyClass / modalCloseClass | String, '' | Pridávajú doplnkovú CSS triedu postupne na: koreňový overlay, biely box modálu, zelený hlavičkový pruh, telo so scrollbarom, a ikonu zatvorenia. | | modalStyle / modalContentStyle / modalHeaderStyle / modalBodyStyle / modalCloseStyle | String, '' | Rovnaké cieľové elementy ako vyššie, ale naviazané cez :style (inline CSS reťazec) — napr. WertyzConfirmationWindow takto nastavuje oranžovú farbu hlavičky. | | loader | Boolean, false | Odovzdáva sa ako show do vnoreného WertyzSmallLoader. Keď true, nad obsahom modálu sa zobrazí polopriesvitný overlay s animovaným loaderom; keď false, loader je skrytý. | | enableScroll | Boolean, true | Keď true: po 100 ms sa zablokuje scroll stránky pod modálom (so zachovaním pôvodnej pozície) a spustí sa prechodová animácia zobrazenia obsahu; pri zatvorení sa pôvodná scroll pozícia skutočne obnoví (predtým stránka skočila navrch) a scroll listener aj časovač sa upracú. Keď false: obsah sa zobrazí okamžite bez tohto oneskorenia a scroll stránky sa vôbec neblokuje. | | modalHeaderText | String, null | Predvolený text v hlavičke modálu, použije sa len keď rodič nenahradí slot modal-header vlastným obsahom. |

Emits: close (nie je deklarovaný v emits). Sloty: modal-header, modal-body. Vzhľad: box má zaoblenie 5px (veľký kontajner, zámerne mimo --radius-md) a tieň --shadow-modal. Závislosti: potrebuje vue-spinner (cez interný WertyzSmallLoader).

WertyzConfirmationWindow

Predštýlovaný áno/nie potvrdzovací dialóg postavený na WertyzModal.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | headerText | fallback $t('AreYouSure?') | Text v slote modal-header vnoreného WertyzModal. Ak je „falsy", zobrazí sa preklad $t('AreYouSure?'). | | bodyText | String, '' | Text v tele modálu (predvolený obsah slotu confirmation-body, ak ho volajúci nenahradí). Pri prázdnom reťazci sa zobrazí prázdny odstavec. | | confirmText | fallback $t('Yes') | Text na potvrdzujúcom tlačidle (emituje yes). Ak je „falsy", zobrazí sa preklad $t('Yes'). | | decelineText | String, null — pozor, preklep v názve propu | Text na zamietajúcom tlačidle (emituje no). Ak je „falsy", zobrazí sa preklad $t('No'). |

Emits: close, yes, no. Sloty: confirmation-body.

<template>
  <WertyzConfirmationWindow v-if="showConfirm" body-text="Are you sure you want to delete this record?"
    @yes="onDeleteConfirmed" @no="showConfirm = false" @close="showConfirm = false" />
</template>

WertyzLoader

Celostránkový/celokontajnerový rotujúci loader s voliteľným centrovaným obrázkom.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | imageUrl | String, null | Naviaže sa ako src na <img> v strede rotujúceho CSS prstenca. Ak je null, <img> sa vyrenderuje bez platného src (prázdny priestor uprostred animovaného prstenca). Komponent nemá vlastnú prop na zobrazenie/skrytie — o tom rozhoduje výhradne rodič cez v-if/v-show okolo komponentu. |

WertyzSmallLoader

Malý inline/overlay pulse-dot loader.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | show | Boolean, false | Riadi viditeľnosť koreňového overlay (polopriesvitný cez celého rodiča) a zároveň sa odovzdáva ako :loading do PulseLoader. Keď true, overlay aj animované bodky sú viditeľné/aktívne; keď false, celý overlay je skrytý. |

Vyžaduje vue-spinner (pozri sekciu 2). Renderuje sa position: absolute; z-index: 444 — rodič potrebuje position: relative.

WertyzProgressBar

Jednoduchý horizontálny progress bar (currentValue / maxValue ako percentá).

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | maxValue | Number, null | Menovateľ vo výpočte percenta (currentValue / maxValue * 100). Ak je „falsy" (napr. null alebo 0), výsledné percento je 0 bez ohľadu na currentValue. | | currentValue | Number\|String, null | Čitateľ vo výpočte percenta zaplnenia. Vedľa pruhu sa zobrazuje vypočítané percento (xx.xx %), nie samotná hodnota. Ak je „falsy", výsledné percento je 0 — "0%" a "ešte nezačaté" tak vyzerajú rovnako. | | color | String, '#009999' | Nastavuje farbu pozadia vyplneného pruhu. Šírka pruhu sa počíta samostatne (minimálne 1%, aj keď je vypočítané percento 0 alebo menej), takže je vidieť aspoň tenký prúžok aj pri nulovom priebehu. |

9. Grafy

Spoločné pre všetky grafové komponenty: netreba inštalovať chart.js/vue-chartjs/ chartjs-adapter-moment (sú zabalené priamo v wertyz-vue, pozri sekciu 2). Väčšina má inject: ['emitter'] — bez mitt() na app roote spadnú pri mounte. Žiadny grafový komponent nedefaultuje na wGlobals.COLORS — vždy pošli vlastné colors pole.

WertyzChartContent

Layout shell pre kartu s grafom — hlavička, voliteľný podtitulok, slot na samotný graf, loading overlay, automaticky prepojená legenda (mriežka dole, alebo bočný riadkový zoznam).

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | headerText | String, '' | Text v <h4> v predvolenom obsahu slotu header; ak rodič poskytne vlastný slot header, hodnota sa nepoužije. | | legendLabels | Array, [] | Posiela sa ako labels do legendy (dole alebo bok). Spolu s legendColors riadi, či sa legenda vykreslí vôbec (obe polia musia mať dĺžku > 0). | | legendColors | Array, [] | Posiela sa ako colors do legendy; spolu s legendLabels je podmienkou pre zobrazenie legendy. | | data | Array, [] | Posiela sa iba do bočnej WertyzChartRowLegend (odtiaľ sa počíta súčet hodnôt pre progress bary). Do spodnej WertyzChartLegend sa vôbec neposiela. | | loader | Boolean, false | Priamo show pre vnorený WertyzSmallLoader — true zobrazí malý loader/overlay nad grafom. | | chartId | String, null — musí sa zhodovať s chartId párového grafu | Legenda ním filtruje eventy z busu, aby si napárovala referenciu na správny graf pre hover animácie. Reálne funguje len s WertyzPieChart/WertyzBarChart — tie ako jediné tento event emitujú (Line/Scatter nie). | | chartRefKey | String, null — musí sa zhodovať s chartRef grafu | WertyzChartLegend ho použije ako kľúč, aby získal skutočnú Chart.js inštanciu grafu. Do WertyzChartRowLegend sa síce tiež posiela, ale tá komponenta ho vôbec nedeklaruje — nefunkčný fallthrough atribút. | | chartType | String, 'pie' | Rozhoduje, či WertyzChartLegend použije pri hoveri logiku pre pie (offset výseku) alebo bar (zníženie opacity) graf — podporované len "pie"/"bar". | | legendBottom | Boolean, true | true: legenda sa vykreslí pod grafom cez celú šírku (WertyzChartLegend). false: layout sa prepne na flex-riadok (graf 45 % šírky vľavo, WertyzChartRowLegend 55 % vpravo). |

<template>
  <WertyzChartContent header-text="Sales by Region" :legend-labels="labels" :legend-colors="colors"
    chart-id="sales-pie" chart-ref-key="chart" chart-type="pie">
    <template #chart>
      <WertyzPieChart chart-id="sales-pie" chart-ref="chart" :labels="labels" :data="data" :colors="colors" />
    </template>
  </WertyzChartContent>
</template>

WertyzPieChart

Koláčový graf (vue-chartjs Pie) s hover-animáciou vysunutia výseku a percentuálnymi popiskami.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | labels | Array, [] | Popisky jednotlivých výsekov koláčového grafu. | | data | Array, [] | Číselné hodnoty výsekov. | | colors | Array, [] | Farba výplne výsekov. Dĺžka tohto poľa zároveň určuje dĺžku interného poľa pre hover-animáciu vysúvania výseku — ak colors.length nesedí s data.length, animácia offsetu môže cieliť na nesprávny index. | | chartId | String, 'pie-chart' | Atribút id na canvase a kľúč pri emitovaní eventu na globálny emitter, cez ktorý sa napáruje s WertyzChartLegend/WertyzChartRowLegend rovnakého chartId. | | options | Object, null | Ak je zadaný, vráti sa priamo namiesto vstavaného default objektu — čím sa stratí celá vstavaná logika (legend onClick/hover, datalabels, slice-click, offset-animácia), pokiaľ si ju appka do vlastných options neskopíruje ručne. | | showLegend | Boolean, true | Zobrazenie vstavanej legendy (ignorované, ak je zadaný options prop). | | height | String, '320px' | Priama výška canvasu. | | chartRef | String, 'chart' | Meno Vue ref naviazaného na graf — používa sa interne na prístup k Chart.js inštancii, a rovnaká hodnota sa emituje pre napárovanú legendu. | | animateOffset | Boolean, true | Zapína/vypína celú logiku vysúvania výseku pri hoveri. | | offset | Number, 100 | Hodnota (px), o ktorú sa vysunie hoverovaný výsek. | | offsetAnimationSpeed | Number, 500 | Rýchlosť animácie vysunutia výseku (a všeobecne animácií grafu), v ms. | | label | String, null | Názov datasetu (napr. pre tooltip/legend); ak nie je zadaný, použije sa "Pie chart". |

Emits: slice-click (chartData, slices, slice, event), legend-click (klik na vstavanú legendu).

WertyzBarChart

Stĺpcový graf — stackovanie, horizontálne stĺpce, časová os, scroll pri veľkých dátach, hover-opacity zvýraznenie.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | labels | Array, [] | Popisky na kategóriovej osi. | | data | Array, [] | Pri dataAsDataset=false (default): pole polí, každý vnútorný prvok sa stane samostatným datasetom. Pri dataAsDataset=true: pole už hotových Chart.js dataset objektov. | | dataNames | Array, [] | Názov datasetu (v legende) podľa indexu — používa sa len pri dataAsDataset=false. | | colors | Array, [] | Farba výplne stĺpcov podľa indexu; HEX sa prevedie na RGBA. Ak farba na danom indexe chýba, použije sa náhodná farba z wMixin. Len pri dataAsDataset=false. | | chartId | String, 'bar-chart' | Atribút id canvasu, kľúč pre párovanie s legendou, používa sa aj pri detekcii scroll-overflow. | | options | Object, null | Ak je zadaný, nahradí vstavané options, ALE stacked prop stále ovplyvňuje aj vlastné options (vynúti sa doň). | | showLegend | Boolean, true | Zobrazenie legendy — no vynútene skrytá, keď je graf v stave "overflow" (bez ohľadu na hodnotu tejto prop). | | timeScaleFormat | String, null | Ak je nastavený, os X sa zmení na časovú (vyžaduje chartjs-adapter-moment); formáty popiskov sú napevno dané, hodnota slúži len ako zapínač. | | stacked | Boolean, false | Skladané stĺpce (obe osi). Ak je graf v stave "overflow", obe osi sa automaticky nastavia na stacked: true bez ohľadu na túto prop. | | height | String, '400px' | Výška canvasu. | | overflowLength | Number, null | Ak je zadaný, prepíše vypočítaný počet "stĺpcov" použitý na výpočet nútenej šírky canvasu pri scrollovateľnom overflow režime; inak sa počíta z dĺžky dát. | | dataAsDataset | Boolean, false | Prepína tvar dát medzi „surové polia + colors/dataNames" (false) a „hotové Chart.js dataset objekty" (true). | | dataLimitOverflow | Number, 50 | Prah, po ktorého prekročení sa graf prepne do scrollovateľného "overflow" režimu (vynúti stacked, skryje legendu). | | chartRef | String, 'chart' | Meno Vue ref na graf — používa sa v onClick/onHover/tooltip pozicioneri a emituje sa pre napárovanú legendu. | | useOpacity | Boolean, false | Ak true, stĺpce majú počiatočnú priehľadnosť pozadia; ovplyvňuje aj hover/legend dimming ostatných sérií. | | alphaValue | Number, 20 | Percento (0–100) opacity nezvýraznených/nehoverovaných stĺpcov. | | opacityAnimationSpeed | Number, 700 | Rýchlosť animácie zmeny opacity pri hoveri, v ms. | | enableChartPadding | Boolean, true | Riadi, či sa vnútorný padding grafu nastaví na hodnotu chartPadding, alebo na 0. | | chartPadding | Number, 24 | Hodnota (px) vnútorného paddingu, použije sa len ak enableChartPadding=true. | | yLabelText | String, null | Text popisku Y osi; popisok sa zobrazí len ak je táto hodnota zadaná. | | xLabelText | String, null | To isté pre X os. | | yType | String, null | Ak je zadaný, prepíše typ číselnej osi (nastaví aj minimum na 1) — konkrétne osi X pri horizontálnych stĺpcoch (indexAxis: 'y'), inak osi Y. | | yAutoSkip | Boolean, true | Či smie Chart.js preskakovať popisky na Y osi, keď sa nezmestia. | | indexAxis | String, 'x'|'y' | Vertikálne vs. horizontálne stĺpce; ovplyvňuje aj mód tooltipu a to, na ktorú os sa aplikuje yType. | | maxBarThickness | Number, 30 | Max. šírka stĺpca v px; používa sa aj pri výpočte vynútenej šírky canvasu v overflow režime. |

Emits: legend-click, chart-bar-click.

WertyzLineChart

Čiarový graf — časová os, pan/zoom, vlastný canvas-background/vertical-line plugin.

| Prop | Typ / default | Čo ovplyvňuje | |---|---|---| | labels | Array, [] | Použije sa len pri dataAsDataset=true. Pri predvolenom dataAsDataset=false sa táto prop ignoruje — x-