@timus-networks/theme 1.0.21 → 1.0.23

package/components-ts/ThemeForm.vue

@@ -1,153 +1,56 @@
 <template>
-  <div>
-    <section>
-      <h1>Checkbox</h1>
-      <p class="p-lg my-6">
-        Tarih aralığı seçici, kullanıcının bir başlangıç ve bitiş tarihi seçmesine olanak tanır, bu da planlama ve raporlama işlemleri için idealdir.
-      </p>
-      <el-checkbox-group v-model="checkList" class="mb-6">
-        <el-checkbox label="Option A"></el-checkbox>
-        <el-checkbox label="Option B"></el-checkbox>
-        <el-checkbox label="Option C"></el-checkbox>
-        <el-checkbox label="disabled" disabled></el-checkbox>
-        <el-checkbox label="selected and disabled" disabled></el-checkbox>
-      </el-checkbox-group>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <h1>Form</h1>
 
-      <el-checkbox-group v-model="checkboxGroup1">
-        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
-      </el-checkbox-group>
-
-      <el-checkbox-group v-model="checkboxGroup1" size="mini" disabled>
-        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
-      </el-checkbox-group>
-
-      <el-checkbox-group v-model="checkboxGroup1" size="small">
-        <el-checkbox label="Option1" border></el-checkbox>
-        <el-checkbox label="Option2" border disabled></el-checkbox>
-      </el-checkbox-group>
-
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+    <section class="flex gap-8 flex-col">
+      <h2>Etiket Konumu: {{ labelPosition }}</h2>
+      <el-radio-group v-model="labelPosition" size="small">
+        <el-radio-button label="left">Sol</el-radio-button>
+        <el-radio-button label="right">Sağ</el-radio-button>
+        <el-radio-button label="top">Üst</el-radio-button>
+      </el-radio-group>
+      <p class="p-lg-c">Form elemanlarının etiketlerinin konumunu belirlemek için kullanılır. Etiketler sol, sağ veya üst tarafında olabilir.</p>
+      <div class="p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
-          <code
-            >&lt;el-date-picker v-model="input" type="daterange" align="left" start-placeholder="Start" end-placeholder="End"
-            default-value=""&gt;&lt;/el-date-picker&gt;</code
-          >
+          <code>
+            &lt;el-form :model="sizeForm" label-width="120px" label-position="{{ labelPosition }}">&lt;el-form-item label="Title">&lt;el-input
+            v-model="form.name">&lt;/el-input>&lt;/el-form-item>&lt;/el-form>
+          </code>
         </p>
       </div>
-    </section>
-
-    <el-time-select
-      v-model="time"
-      :picker-options="{
-        start: '08:30',
-        step: '00:15',
-        end: '18:30',
-      }"
-      placeholder="Select time"
-    >
-    </el-time-select>
-    <el-time-picker
-      v-model="time"
-      :picker-options="{
-        selectableRange: '18:30:00 - 20:30:00',
-      }"
-      placeholder="Arbitrary time"
-    >
-    </el-time-picker>
-    <el-time-picker
-      arrow-control
-      v-model="time"
-      :picker-options="{
-        selectableRange: '18:30:00 - 20:30:00',
-      }"
-      placeholder="Arbitrary time"
-    >
-    </el-time-picker>
-    <el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
-      <el-form-item label="Activity name bazen uzun olabilir">
-        <el-input v-model="sizeForm.name"></el-input>
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="sizeForm.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai"></el-option>
-          <el-option label="Zone two" value="beijing"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%"></el-date-picker>
-        </el-col>
-        <el-col class="line" :span="2">-</el-col>
-        <el-col :span="11">
-          <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%"></el-time-picker>
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="sizeForm.type">
-          <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
-          <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="sizeForm.resource" size="medium">
-          <el-radio border label="Sponsor"></el-radio>
-          <el-radio border label="Venue"></el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item size="large">
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button>Cancel</el-button>
-      </el-form-item>
-    </el-form>
-    <el-form
-      data-testid="pages-login-gczfftvrml"
-      :rules="rules"
-      ref="form"
-      :model="form"
-      label-position="left"
-      label-width="120px"
-      @submit.native.prevent="submit"
-    >
-      <el-form-item data-testid="pages-login-irbdfwxfbt" :label="$t('login.email')" prop="email">
-        <el-input v-model="form.email" :disabled="loading ? 'disabled' : false" data-testid="login-email-input"></el-input>
-      </el-form-item>
-      <el-form-item data-testid="pages-login-brtpgzfwqb" :label="$t('login.password')" prop="password">
-        <el-input
-          data-testid="pages-login-niigwirnsa"
-          type="password"
-          autocomplete="off"
-          v-model="form.password"
-          :disabled="loading ? 'disabled' : false"
-          show-password
-        ></el-input>
-      </el-form-item>
-      <el-row data-testid="pages-login-leusdzih">
-        <el-col data-testid="pages-login-wakdcwpdgr" :span="12">
-          <el-checkbox v-model="form.remember" data-testid="login-remember-me-checkbox">{{ $t('login.remember_me') }}</el-checkbox>
-        </el-col>
-        <el-col data-testid="pages-login-lngmwepdom" :span="12">
-          <nuxt-link to="/forgot-password" data-testid="login-forgot-password">{{ $t('login.forgot_password') }}</nuxt-link>
-        </el-col>
-      </el-row>
-      <div data-testid="pages-login-labwsipjet" style="margin-top: 10px; color: grey; font-size: 12px; text-align: left">
-        {{ $t('register.by_register_text') }}
-        <b class="agreement_text" @click="showAgreementDialog('privacy_policy')" data-testid="register-terms-of-use">{{
-          $t('register.privacy_policy')
-        }}</b>
-        {{ $t('messages.and') }}
-        <b class="agreement_text" @click="showAgreementDialog('terms_of_use')" data-testid="register-terms-of-use">{{
-          $config.TP === 'berqnet' ? $t('register.terms_of_use') : $t('register.terms_of_service')
-        }}</b>
-        {{ $t('register.by_register_text2') }}
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-form ref="form" :model="form" label-width="130px" class="gap-4 flex flex-col" :label-position="labelPosition">
+          <el-form-item label="Aktivite Adı">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="Aktivite Bölgesi">
+            <el-select v-model="form.region" placeholder="Lütfen bölgenizi seçin" class="w-full">
+              <el-option label="Bölge Bir" value="shanghai"></el-option>
+              <el-option label="Bölge İki" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="Aktivite Zamanı">
+            <el-col :span="11">
+              <el-date-picker type="date" placeholder="Tarih seçin" v-model="form.date1" style="width: 100%"></el-date-picker>
+            </el-col>
+            <el-col class="text-center" :span="1">-</el-col>
+            <el-col :span="12">
+              <el-time-picker placeholder="Saat seçin" v-model="form.date2" style="width: 100%"></el-time-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="Kaynaklar">
+            <el-radio-group v-model="form.resource" size="medium" class="flex gap-4">
+              <el-radio label="Sponsor"></el-radio>
+              <el-radio label="Mekan"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="outline">İptal Et</el-button>
+            <el-button type="primary" @click="onSubmit">Oluştur</el-button>
+          </el-form-item>
+        </el-form>
       </div>
-      <el-form-item data-testid="pages-login-lunbdhbztj">
-        <el-button type="danger" native-type="submit" :loading="loading" data-testid="login-continue">{{ $t('login.continue') }}</el-button>
-        <br />
-        <el-button @click="$router.push('/register')" type="primary" data-testid="login-create-account" :loading="loading">{{
-          $t('login.register')
-        }}</el-button>
-      </el-form-item>
-    </el-form>
+    </section>
   </div>
 </template>
 <script lang="ts">
@@ -157,11 +60,8 @@ const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
 export default Vue.extend({
   data() {
     return {
-      checkboxGroup1: ['Shanghai'],
-      cities: cityOptions,
-      checkList: ['selected and disabled', 'Option A'],
-      time: '',
-      sizeForm: {
+      labelPosition: 'right',
+      form: {
         name: '',
         region: '',
         date1: '',
@@ -169,37 +69,6 @@ export default Vue.extend({
         delivery: false,
         type: [],
         resource: '',
-        desc: '',
-      },
-      loading: false,
-
-      form: {
-        email: '',
-        password: '',
-        remember: false,
-        token: null,
-        correlation_id: null,
-        action: null,
-        platform: 'manager',
-        version: '1.0.10',
-      },
-      rules: {
-        email: [
-          {
-            validator: 'validateEmail',
-            trigger: 'submit',
-            message: this.$t('messages.please_provide_valid_email'),
-          },
-        ],
-        password: [
-          {
-            required: true,
-            trigger: 'submit',
-            message: this.$t('messages.please_fill', {
-              field: this.$t('login.password'),
-            }),
-          },
-        ],
       },
     };
   },
@@ -207,9 +76,7 @@ export default Vue.extend({
     showAgreementDialog(type: string) {
       console.log('agreement: ', type);
     },
-    submit() {
-      this.$emit('submit', this.form);
-    },
+    submit() {},
     onSubmit() {
       console.log('submit!');
     },

package/components-ts/ThemeInputs.vue

@@ -1,56 +1,5 @@
 <template>
   <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Date Range Picker</h1>
-      <p class="p-lg my-6">
-        Tarih aralığı seçici, kullanıcının bir başlangıç ve bitiş tarihi seçmesine olanak tanır, bu da planlama ve raporlama işlemleri için idealdir.
-      </p>
-      <el-date-picker
-        v-model="input"
-        type="daterange"
-        align="right"
-        start-placeholder="Start Date"
-        end-placeholder="End Date"
-        default-value="2010-10-01"
-        class="danger"
-      >
-      </el-date-picker>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          <code
-            >&lt;el-date-picker v-model="input" type="daterange" align="left" start-placeholder="Start" end-placeholder="End"
-            default-value=""&gt;&lt;/el-date-picker&gt;</code
-          >
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Time Select</h1>
-      <p class="p-lg my-6">
-        Zaman seçici, kullanıcının belirli bir zaman aralığından bir zaman dilimi seçmesine imkan tanır. Bu, randevu veya rezervasyon gibi zaman
-        belirli işlemler için kullanışlıdır.
-      </p>
-      <el-time-select
-        v-model="input"
-        :picker-options="{
-          start: '08:30',
-          step: '00:15',
-          end: '18:30',
-        }"
-        placeholder="Select time"
-      ></el-time-select>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          Zaman seçimi için:
-          <code
-            >&lt;el-time-select v-model="input" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="Select
-            time"&gt;&lt;/el-time-select&gt;</code
-          >
-        </p>
-      </div>
-    </section>
-
     <section>
       <h1>Basic</h1>
       <p class="p-lg my-6">Standart metin girişi için temel <code>el-input</code> bileşenini kullanabilirsiniz.</p>

package/components-ts/ThemeLink.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Basic</h1>
+      <p class="p-lg my-6">Standart metin girişi için temel <code>el-input</code> bileşenini kullanabilirsiniz.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-link href="https://element.eleme.io" target="_blank">default</el-link>
+        <el-link type="primary">primary</el-link>
+        <el-link type="secondary">secondary</el-link>
+        <el-link type="success">success</el-link>
+        <el-link type="warning">warning</el-link>
+        <el-link type="danger">danger</el-link>
+        <el-link type="info">info</el-link>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>With Nuxt Link</h1>
+      <p class="p-lg my-6">Standart metin girişi için temel <code>el-input</code> bileşenini kullanabilirsiniz.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <NuxtLink to="/"><el-link type="primary">Nuxt Link</el-link></NuxtLink>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Disabled</h1>
+      <p class="p-lg my-6">Standart metin girişi için temel <code>el-input</code> bileşenini kullanabilirsiniz.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-link disabled>default</el-link>
+        <el-link type="primary" disabled>primary</el-link>
+        <el-link type="success" disabled>success</el-link>
+        <el-link type="warning" disabled>warning</el-link>
+        <el-link type="danger" disabled>danger</el-link>
+        <el-link type="info" disabled>info</el-link>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Underline</h1>
+      <p class="p-lg my-6">Standart metin girişi için temel <code>el-input</code> bileşenini kullanabilirsiniz.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-link :underline="false">Without Underline</el-link>
+        <el-link>With Underline</el-link>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Icon</h1>
+      <p class="p-lg my-6">Standart metin girişi için temel <code>el-input</code> bileşenini kullanabilirsiniz.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-link icon="el-icon-edit">Edit</el-link>
+        <el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusButtonSample',
+  data() {
+    return {
+      inputNumber: '',
+      input: '',
+      input1: '',
+      input2: '',
+      input3: '',
+      input4: '',
+      select: '',
+      links: [],
+      state: '',
+      state1: '',
+      state2: '',
+      text: '',
+      textarea: '',
+      textarea1: '',
+      textarea2: '',
+      timeout: null,
+    };
+  },
+  computed: {
+    gridSize() {
+      const grids = {
+        5: 'grid-cols-5',
+        6: 'grid-cols-6',
+        7: 'grid-cols-7',
+        8: 'grid-cols-8',
+      };
+      return grids;
+    },
+  },
+  methods: {
+    querySearch(queryString, cb) {
+      var links = this.links;
+      var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+      // call callback function to return suggestions
+      cb(results);
+    },
+    querySearchAsync(queryString, cb) {
+      var links = this.links;
+      var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        cb(results);
+      }, 3000 * Math.random());
+    },
+    createFilter(queryString) {
+      return (link) => {
+        return link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+      };
+    },
+    loadAll() {
+      return [
+        { value: 'vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'element', link: 'https://github.com/ElemeFE/element' },
+        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+        { value: 'babel', link: 'https://github.com/babel/babel' },
+      ];
+    },
+    handleSelect(item) {
+      console.log(item);
+    },
+    handleIconClick(ev) {
+      console.log(ev);
+    },
+  },
+  mounted() {
+    this.links = this.loadAll();
+  },
+});
+</script>

package/components-ts/ThemeRadio.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <h1>Radio</h1>
+
+    <section>
+      <h2>Basic Usage</h2>
+      <p class="p-lg-c my-6">Checkbox, iki durum arasında geçiş yapmak için kullanılır. Checkbox için devre dışı bırakılmış durum da mevcuttur.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-radio v-model="radio" :label="0">Option A</el-radio>
+        <el-radio v-model="radio" :label="1">Option B</el-radio>
+        <el-radio v-model="radio" :label="2" disabled>Option C</el-radio>
+        <el-radio :value="false" disabled>unselected & disabled</el-radio>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <code> &lt;el-checkbox :value="true" disabled&gt;Seçili & Devre Dışı&lt;/el-checkbox&gt; </code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h2>Checkbox group</h2>
+      <p class="p-lg-c my-6">
+        Checkbox grubu, birden fazla seçeneği bir arada sunarak kullanıcının birden çok seçim yapmasına olanak tanır. Bu grup içerisindeki
+        seçeneklerden bazıları devre dışı bırakılabilir veya önceden seçilmiş ve devre dışı bırakılmış olabilir.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-checkbox-group v-model="checkList" class="mb-6">
+          <el-checkbox label="Option A"></el-checkbox>
+          <el-checkbox label="Option B"></el-checkbox>
+          <el-checkbox label="Option C"></el-checkbox>
+          <el-checkbox label="disabled" disabled></el-checkbox>
+          <el-checkbox label="selected and disabled" disabled></el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <code>
+            &lt;el-checkbox-group v-model="checkList"&gt; &lt;el-checkbox label="Seçenek A"&gt;&lt;/el-checkbox&gt; &lt;el-checkbox label="Seçenek
+            B"&gt;&lt;/el-checkbox&gt; &lt;/el-checkbox-group&gt;
+          </code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h2>Indeterminate</h2>
+      <p class="p-lg-c my-6">
+        Belirsiz durum (indeterminate) checkbox, tüm seçeneklerin seçili olup olmadığını belirsiz bırakır. Bu durum, özellikle kullanıcının bir grup
+        içerisindeki tüm seçenekleri aynı anda kontrol etmesini sağlamak için kullanışlıdır.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
+        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+          <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <code>
+            &lt;el-date-picker v-model="input" type="daterange" align="left" start-placeholder="Start" end-placeholder="End"
+            default-value=""&gt;&lt;/el-date-picker&gt;
+          </code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+
+export default Vue.extend({
+  data() {
+    return {
+      checked: true,
+      radio: 2,
+      checkboxGroup1: ['Shanghai'],
+      cities: cityOptions,
+      checkList: ['selected and disabled', 'Option A'],
+      checkAll: false,
+      checkedCities: ['Shanghai', 'Beijing'],
+      isIndeterminate: true,
+      time: '',
+      sizeForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: '',
+      },
+      loading: false,
+
+      form: {
+        email: '',
+        password: '',
+        remember: false,
+        token: null,
+        correlation_id: null,
+        action: null,
+        platform: 'manager',
+        version: '1.0.10',
+      },
+      rules: {
+        email: [
+          {
+            validator: 'validateEmail',
+            trigger: 'submit',
+            message: this.$t('messages.please_provide_valid_email'),
+          },
+        ],
+        password: [
+          {
+            required: true,
+            trigger: 'submit',
+            message: this.$t('messages.please_fill', {
+              field: this.$t('login.password'),
+            }),
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleCheckAllChange(val: string) {
+      this.checkedCities = val ? cityOptions : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value: string[]) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    showAgreementDialog(type: string) {
+      console.log('agreement: ', type);
+    },
+    submit() {
+      this.$emit('submit', this.form);
+    },
+    onSubmit() {
+      console.log('submit!');
+    },
+  },
+});
+</script>