# wzor-base

## Testowanie wzoru na Ĺźywo
```
npm run serve
```

## Kompilowanie wzoru i schematĂłw 
```
npm run build
```

## Pulikacja na cdn

Wystarczy zrobiÄ `commit` na mastera

## PrzykĹad uĹźycia gotowego wzoru

`./distexample/Wzor.html`

```html
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />

  <title>Witkac Forms Test</title>
  <!-- smartadmin -->

  <link rel="stylesheet" href="../node_modules/@witkac/smartadmin-components/public/css/bootstrap3.css" />
  <link rel="stylesheet" href="../node_modules/@witkac/smartadmin-components/public/css/smartadmin-production.css" />
  <link rel="stylesheet" href="../node_modules/@witkac/smartadmin-components/public/css/smartadmin-skins.css" />

  <link rel="stylesheet" href="../node_modules/@witkac/smartadmin-components/public/css/font-awesome.min.css" />
  <link rel="stylesheet" href="../node_modules/@witkac/smartadmin-components/public/css/style.css" />
  <link rel="stylesheet" href="../node_modules/@witkac/smartadmin-components/public/css/vue-styles.css" />
  <!-- Ĺadowanie VUE -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <!-- komponenty klienta, fc, formMixin -->
  <script src="../node_modules/@witkac/smartadmin-components/dist/client.umd.min.js"></script>
  <!-- style klienta -->
  <link rel="stylesheet" href="../node_modules/@witkac/smartadmin-components/dist/client.css" />
</head>

<body>
  <noscript> <strong>We're sorry but client2 doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong> </noscript>
  <!-- Ĺadowanie zmiennej WzorSchema -->
  <script src="../dist/WzorSchema.js"></script>
  <!-- Ĺadowanie funkcji Wzor -->
  <script src="../dist/Wzor.js"></script>
  <!-- Ĺadowanie zmiennej KonkursData -->
  <script src="./KonkursData.js"></script>
  <script>
    var wzor = 'nowy_mrpips';
    var vm;
    //zapamiÄtanie danych modelu


  </script>

  <script>
    console.log('formComponents', fc);
    console.log('formMixin', formMixin);
    console.log('schema', WzorSchema);
    var schemas = [WzorSchema];
    var model = {};
    var external = {
      $konkurs: KonkursData,
      $settings: {
        count: 2,
        wojewodztwa: [
          'dolnoĹlÄskie',
          'kujawsko-pomorskie',
          'lubelskie',
          'lubuskie',
          'ĹĂłdzkie',
          'maĹopolskie',
          'mazowieckie',
          'opolskie',
          'podkarpackie',
          'podlaskie',
          'pomorskie',
          'ĹlÄskie',
          'ĹwiÄtokrzyskie',
          'warmiĹsko-mazurskie',
          'wielkopolskie',
          'zachodniopomorskie'
        ],
        offerStatus: 1,
        offerStatusMery: 100,
        offerStatusForm: 100
      }
    };
  </script>
  <div>
    <aside id="left-panel">

    </aside>

    <div id="main" role="main">
      <div id="content">
        <div id="wzorapp"></div>
      </div>
    </div>
  </div>


  <script>
    // console.log('Wzor', Wzor);

    new Vue({
      render: h =>
        h(Wzor(formMixin, schemas, fc), {
          props: {
            datamodel: model,
            external: external
          }
        })
    }).$mount('#wzorapp');
  </script>
</body>

</html>
```

## PrzykĹad uĹźycia z dodatkowym temaplate Vue

`./distexample/WzorTemplate.html`

```html
    <div id="main" role="main">
      <div id="content">
        <div id="wzorapp">
          <w-form :datamodel="model" :external="external"></w-form>
        </div>

      </div>
    </div>
```
```JavaScript
    new Vue({
      el: '#wzorapp',
      components: { WForm: Wzor(formMixin, schemas, fc) },
      data: {
        model,
        external
      }

    });
```