# Vue 2 + TypeScript + Vite

https://www.mathew-paul.nz/posts/how-to-use-vue2-with-vite/

## Uruchamianie (dev)

`npm run dev`

## Konfiguracja w trybie dev

dane, external ale również schema musimy podać w routerze, zeminiony został formMixin który przepisuje schemę w odpowiednie miejsce

```JS
      props: {
        datamodel: offerModel,
        schema: [wzorSchema],
        external,
      },
```

## Definiowanie schematów

- Folder `./src/schema`;
- Schemat z zasady musi być zdefinioowany w jednym pliku, można częsci schematów współdzielić w wydzielonym subfolderze (np. `./src/schema/shared`)
- Przy definowaniu schematów dobrze podać typ `$root` i `$external` do funkcji `predefineSchema`
  ```TypeScript
     const def = predefineSchema<typeof sprModel, External>();
  ```
- enumy MUSZA być zdefiniowane w tym samym pliku co schemat
- schemat MUSI (ze względu na kompilacje) stanowić domyślny export
  ```TypeScript
     export default wzorSchema;
  ```
- ZABRONIONE jest stosowanie:
  - `$ref` i `allOf` - schemay łaczy się funkcją do definiowania schematu lub klasycznie przez spread
  - `aggreagate` - należy zastąpić przez `calc()` i funkcje agregujące z `this.$methods` np:
    ```TypeScript
    calc() {
        return this.$methods.sum(this.$root.Kosztorys, 'Dotacja');
    }
    ```
- `this.$obj.$parent` może być null, wieć TypeScript zaproponuje `this.$obj.$parent?` ale jeśli jedeśmy pewni to lepiej zapisać `this.$obj.$parent!`, łądniej się skompiluje

## Definioowanie formularzy

- Folder `./src/views`
- Subkomponenty nalezy umieścić w innym folderze
- Typowanie jest zrealizowane poprzez typowanie `foromMixin` i typ `FormMixinType`

  ```TypeScript
  // import samego formMixin
  import { formMixin } from '@witkac/smartadmin-components';
  // import typowania (musi być osobno, bo to trochę kombinowany typ)
  import type { FormMixinType, SectionType } from '@witkac/smartadmin-components/src/typings';
  // typowanie z Vue 2.7
  import { defineComponent } from 'vue';

  // typ danych $external
  import type { External } from '../data/external';
  // typ schematu
  import type { WzorSchema } from '../schema/WzorSchema';

  export default defineComponent({
    mixins: [formMixin as FormMixinType<WzorSchema, External>],
    ...
   })

  ```

- Dzięki temu typowane na template są zmienne `$schema` `$external` i `model`
- Funkcje/computed z `formMixin` i `schemaMixin` również są typowane (np. `prevStep()`)

## Kompilowanie

- skrypt kompilujący jest umieszczony w źródłach `smartadmin-components`
- kompilowane są wszystkie schematy (pliki `.ts` z folderu `./src/schema`) i tworzone są pliki `.json` i `.js`, czyste bez żadanych `defineSchema`, enumy kompilowane są do liczb, a funkcje kompilowane do tekstów lub tablic
- kompilowane są wszystkie widoki (pliki `.vue` z folderu `./src/views`)
  - jesli w widoku zdefiniowana jest zmienna `sections` to jest ona zamieniana na JSON i zapisywana w pliku `{ViewName}Sections.json`
  - sam widok jest kompilowany do funkcji formularza zgodnej z tym co jest aktualnie w witkacu