Form Builder
form-builder/FormBuilder.vue
TODO: Używane komponenty z CWBK
- przeniesienie sluga do repo
- usunięcie GridLayout
- usunięcie/przeniesienie BaseHeading
- przeniesienie VExpand
- przeniesienie VBtn
- użycie inputów z repo
Opis
Komponent jest widokiem tworzenia formularza. Dzieli się na 3 sekcje:
- Picker - wybór pól do dodania do formularza
- Form - obszar do tworzenia/wyświetlania formularza
- Options - menu z opcjami dla zaznaczonego pola
Opcje konfiguracji
Gdy żadne pole nie jest zaznaczone wyświetla się przełącznik trybu edycji/podglądu oraz przycisk kopiowania formularza do schowka wraz z pole tekstowym do jego wklejenia. Gdy pole jest zaznaczone dostępne są kategorie z opcjami:
- Sczegóły
- Tytuł pola (name) - label pola
- Przycisk "Prześlij pliki" (assets) - otwiera modal z assetami pola ze statycznymi plikami
- Tekst wewnątrz pola (placeholder) - placeholder pola
- Slug (slug) - unikalny identyfikator pola
- Domyślny slot do dodania kolejnych opcji
- Dane - tylko dla pól jednokrotnego/wielokrotnego wyboru
- Tabsy (api):
- Lista (false):
- Opcja (options[*].name) - nazwa opcji
- Wartość (options[*].value) - wartość opcji
- Przycisk do usunięcia opcji
- Przycisk "Dodaj" - dodaje opcję do listy
- Endpoint ():
- Link do endpointu (endpoint) - np.
/patients/get_patients
- Link do endpointu (endpoint) - np.
- Lista (false):
- Tabsy (api):
- Dekoratory
- Szerokość (width) - szerokość pola (grid span 1-12)
- Wyświetlanie (display) - wybór widgetu z listy w zależności od typu pola np. bool -> switch/checkbox/radio
- Walidacja
- Wymagane (required) - pole wymagane (obecnie nie działa)
- Powtarzalne (repeatable) - kontener powtarzalny
- Zagnieżdżanie (nesting) - kontener zagnieżdżony
- Wiele plików (multiple) - możliwość przesłania wielu plików
- Warunki
- Widoczność pola (visibility) - widoczne jeśli true:
- Widoczne (visible)
- Ukryty (hidden)
- Prosty warunek (simple):
- Pole (field) - sprawdzane pole
- Wartość (value) - wymagana wartość
- Zaawansowany warunek (advanced):
- Przycisk "Zarządzaj warunkami" - otwiera popup z listą warunków
- Pole wyłączone (disabled) - wyłączone jeśli false:
- Włączone (visible)
- Wyłączone (hidden)
- Prosty warunek (simple):
- Pole (field) - sprawdzane pole
- Wartość (value) - wymagana wartość
- Zaawansowany warunek (advanced):
- Przycisk "Zarządzaj warunkami" - otwiera popup z listą warunków
- Pole tylko do odczytu (readonly) - tylko do odczytu jeśli false:
- Edytowalne (visible)
- Tylko do odczytu (hidden)
- Prosty warunek (simple):
- Pole (field) - sprawdzane pole
- Wartość (value) - wymagana wartość
- Zaawansowany warunek (advanced):
- Przycisk "Zarządzaj warunkami" - otwiera popup z listą warunków
- Widoczność pola (visibility) - widoczne jeśli true:
Opis sekcji script
Props
| Nazwa | Typ | Domyślnie | Opis |
|---|---|---|---|
| defaultForm | Array | [] | Tablica z polami i konfiguracji formularza |
| hiddenFields | Array | [] | Tablica z ukrytymi polami do wyboru z pickera |
Stałe
| Nazwa | Opis |
|---|---|
| conditionModes | Tryby zaawansowanych warunków pól (widoczność, wyłączone, tylko do odczytu) |
Zmienne
| Nazwa | Opis |
|---|---|
| form | Pola i konfiguracja formularza |
| mode | Tryb buildera ('edit' lub 'preview') |
| source | Przeciągane pole |
| target | Pole, nad którym znajduje się przeciągane pole |
| activePath | Ścieżka do zaznaczonego pola |
| activeField | Zaznaczone pole |
| copied | Stan skopiowania JSONa formularza |
| formValues | Wartości pól formularza (używany jako v-model FormHandlera) |
| errorMessages | Błędy pól formularza (używany w FormHandler) |
| openedCat | Otwarta kategoria w menu opcji |
| assetModal | Stan modala z assetami pola ze statycznymi plikami |
| conditionModal | Stan modala z warunkami pola |
Computed
| Nazwa | Opis |
|---|---|
| stringForm | Konwertuje formularz ze string na JSON i na odwrót (get/set) |
| flatForm | Sprowadza pola formularza do jednowymiarowej tablicy |
| conditionalFields | Słownik możliwych do wyboru pól do tworzenia warunków wyświetlania pól |
Metody
| Nazwa | Parametry | Opis |
|---|---|---|
| onMounted (Vue) | - | Pushuje pola z propsa defaultForm do zmiennej form |
| onDrag | ev | Ustawia przeciągane pole (source) |
| onDrop | ev | Ustawia pole docelowe (target), wywołuje handleDrop |
| getByPath | path (Array), container (Bool) | Zwraca pole z formularza na podstawie ścieżki |
| handleDrop | src (Array), dest (Array) | Przenosi pole w formularzu na podstawie ścieżki źródłowej i docelowej (source i target) |
| setActiveField | path (Array) | Ustawia activePath i activeField na podstawie ścieżki |
| clone | path (Array) | Klonuje pole w formularzu na podstawie ścieżki |
| remove | path (Array) | Usuwa pole z formularza na podstawie ścieżki |
| changeName | value (String) | Zmienia nazwę zaznaczonego pola i w zależności od typu pola jego slug |
| slugify | value (String) | Zwraca slug na podstawie wartości |
| addFieldOption | - | Dodaje opcje dla zaznaczonego Pola jednokrotnego/wielokrotnego wyboru |
| removeFieldOption | index (Number) | Usuwa opcje dla zaznaczonego Pola jednokrotnego/wielokrotnego wyboru na podstawie indexu |
| changeConditionType | type (String), mode (String) | Ustawia domyślny warunek dla typu warunku (simple, advanced) w odpowiednim trybie (visibility, disabled, readonly) |
| changeSimpleCondition | type (String), value (String), mode (String) | Ustawia prosty warunek w formacie field=value w odpowiednim trybie (visibility, disabled, readonly). Parametr type wstawia value odpowiednio po lewej lub prawej stronie znaku "=" |
| copyForm | - | Kopiuje cały JSON formularza do schowka, ustawia stan copied na true i po 2 sekundach zmienia na false (zmienia to ikonę i kolor) |
| setPreview | - | Przełącza tryb buildera (mode) między "edit" a "preview" |
| returnTemplate | - | Zwraca głęboką kopię formularza (używane w defineExpose) |
| setSlug | value (String) | Ustawia slug dla zaznaczonego pola |