# smartadmin-components

## Komponenty

### `w-radio-list`, `WRadioList`

Lista radio, na podstawie property `values`

Lista radio

```HTML
<w-radio-list :model="$schema.FormaPrawna" title="To jest tytuł" :values="values"></w-radio-list>
```

Lista radio z polem do wpisania własnej wartości, pod etykietą `other-label`

```HTML
<w-radio-list other-label="Inne" :model="$schema.FormaPrawna" title="To jest tytuł" :values="values"></w-radio-list>
```

values są tablicą:

```JavaScript
values: [
    {
        value: 'Stowarzyszenie Rejestrowe',
        text: 'Stowarzyszenie rejestrowe'
    },
    {
        value: 'Stowarzyszenie Zwykłe',
        text: 'Stowarzyszenie zwykłe'
    }
]
```

Można również elementy wrzucić jako tagi `<item>`:

```HTML
<w-radio-list model="$schema.FormaPrawna" title="To jest tytuł">
  <item :value="Stowarzyszenie Rejestrowe">Stowarzyszenie rejestrowe</item>
  <item :value="Stowarzyszenie Zwykłe">Stowarzyszenie zwykłe</item>
  <item :value="Inne" disabled>Opcja wyłączona</item>
</w-radio-list>
```

## _Tabele_

_Komponenty używane wyłącznie do konstrukcji tabel bazujące na `$schema`_

## `w-lp-cell`

Pozwala wygenerować wiersz lp po podaniu `:index`

## `w-table-cell`

Generuje `td` wraz z polem input, textarea, select itd. wewnątrz.

## `w-tblock`

Generuje wiersz na bazie schemy. Automatycznie tworzy `w-lp-cell` lub wiersz z tytułem ze schemy. Użycie slotów czyt. [w-schema-title sloty dynamiczne](w-schema-table).
`:prefix` jest dodawany na początek nazwy dynamicznych slotów - domyślnie `""`.  
Aby wiersz z tytułem miał odpowiednią ilość column należy podać sumę colspanów używaną w naszej tabeli w `:properties-count`.  
`:index` jest przekazywany do `w-lp-cell`.  
Przycisk usuwania w `w-row-buttons` ukrywa się, gdy w schemie zadeklarowano `length`.

## `w-thead`

Działanie takie jak w `w-block` z tą różnicą, że zamiast pól generuje tytuły z schemy.
Użycie slotów czyt. [w-schema-title sloty dynamiczne](w-schema-table).

## `w-tbody`

Wielokrotnie wypisuje `w-block` używając `v-for`.  
Dodatkowo generuje wiersz zawierający `w-add-row`, którego liczbę kolumn możemy zmienić przez `:colspan`.  
`:add-row` pozwala na zmianę treści przycisku, gdy parametr zawiera `false` cały wiersz się nie pokaże. Wiersz nie pokaże się również, gdy w schemie znajdzie się pole `length`. Ukryje się on również, gdy ilość wierszy osiągnie wartość `maxItems` ze schemy.
Użycie slotów czyt. [w-schema-title sloty dynamiczne](w-schema-table).

## `w-form-table`

Podstawowy komponent budujący tabelę. Jako najprostszy element względem slotów pola `:model` używa opcjonalnie w celu wyświetlenia `w-error` nad tabelą.

## `w-schema-table`

Bazuje na wszystkich wcześniejszych komponentach, które generuje na bazie schemy.  
Wymagane jest przekazanie pola typu `array` ze schemy do property `:model`.  
Opcjonalnie, aby wygenerować wiersz w podsumowaniu należy przekazać obiekt ze schemy do property `:modelSum`  
Ilość kolumn, oraz ich nagłówki w `thead` bazują na property itemów przekazanych w `:model`. Nagłówki są zaciągane z pola `title`.
Kolejność kolumn wynika z kolejności pól w schemie.
Pola `disabled: true` oraz zawierające `guid` w nazwie są pomijane w wyświetlaniu.
Użycie szerokości kolumn czyt. [w-thead](w-thead).  
Schema-table używa pływającego thead.

**Sloty statyczne**

- `beforeThead` - w celu umieszczenia własnego thead przed głównym
- `thead` - w celu podmiany głównego thead
- `beforeTbody` - w celu umieszczenia własnego tbody przed generowanym
- `tbody` - w celu podmiany głównego tbody
- `afterTbody` - w celu umieszczenia własnego tbody po generowanym
- `tfoot` - w celu podmiany tfoot

**Sloty dynamiczne**  
Każde pole można podmienić używając slota o nazwie identycznej z nazwą property w schemie np:

```html
<template v-slot:Nazwisko><td>Pole zawierające Nazwisko</td></template>
```

Sloty mogą zwracać zmienne `item` (_z wyjątkiem slotów w `thead`_), `property`, `propertyName`.
Aby umieścić slot w nagłówku lub stopce należy nazwę property poprzedzić odpowiedno:  
`th_` dla th wewnątrz `thead` oraz `tf_` dla `tfoot`.

```html
<template slot="th_Imie" slot-scope="{ propertyName, property }">
  <th>Pole zawierające {{propertyName}} - {{property.$schema.title}}</th>
</template>
```

**Przekazywanie atrybutów**  
Do każdego automatycznie wygenerowanego pola możemy dodać własne atrybuty poprzez property `:fields`, w którym należy umieścić obiekt zawierający property o tej samej nazwie co nasze pole ze schemy (ew. poprzedzone prefiksem czyt. użycie **slot**)

```html
<w-schema-table :fields="{ th_Nazwisko: {colspan: 2}, Nazwisko: {field: 'w-textarea', colspan: 2}, tf_Lp: {class: 'text-italic', colspan: 2}}" :add-row-colspan="4" />
```

Aby zmienić colspan w wierszu zawierającym `w-add-row` należy użyć `:add-row-colspan`.

## Project setup

```
npm install
```

### Kompilacja komponentów

```
npm run build
```

### Przeglądanie komponentów, storybook

```
npm run storybook
```

### Testy jednostkowe jest

```
npm run test:unit
```

### Budowanie i publikcaja

```
npm run fullPublish
```

### Run your unit tests

```
npm run test:unit
```