npm - @timus-networks/theme - Versions diffs - 1.0.20 → 1.0.23 - Mend

@timus-networks/theme 1.0.20 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/components-js/ThemeButtons.vue +2 -2
package/components-js/ThemeCheckbox.d.ts +2 -0
package/components-js/ThemeCheckbox.vue +143 -0
package/components-js/ThemeForm.vue +50 -182
package/components-js/ThemeInputs.vue +0 -51
package/components-js/ThemeLink.vue +161 -0
package/components-js/ThemeRadio.d.ts +2 -0
package/components-js/ThemeRadio.vue +145 -0
package/components-js/ThemeSelect.vue +232 -0
package/components-js/ThemeTable.vue +211 -0
package/components-js/ThemeTag.vue +142 -0
package/components-js/ThemeTimePicker.vue +376 -43
package/components-js/ThemeToggle.vue +122 -0
package/components-js/ThemeTooltip.vue +189 -0
package/components-js/TimusSamples.vue +13 -5
package/components-ts/ThemeButtons.vue +2 -2
package/components-ts/ThemeCheckbox.vue +146 -0
package/components-ts/ThemeForm.vue +50 -183
package/components-ts/ThemeInputs.vue +0 -51
package/components-ts/ThemeLink.vue +161 -0
package/components-ts/ThemeRadio.vue +148 -0
package/components-ts/ThemeSelect.vue +232 -0
package/components-ts/ThemeTable.vue +211 -0
package/components-ts/ThemeTag.vue +142 -0
package/components-ts/ThemeTimePicker.vue +376 -43
package/components-ts/ThemeToggle.vue +122 -0
package/components-ts/ThemeTooltip.vue +189 -0
package/components-ts/TimusSamples.vue +13 -5
package/index.d.ts +3 -1
package/module.js +17 -12
package/output/main.css +1 -1
package/package.json +1 -1

package/components-js/ThemeButtons.vue CHANGED Viewed

@@ -97,7 +97,7 @@
     <section>
       <h1>Groups</h1>
       <p class="p-lg my-6">Buton gruplarımız, ilgili işlemleri bir arada toplayarak kullanıcı arayüzünü düzenler.</p>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+      <div class="grid grid-flow-col auto-cols-max gap-4">
         <el-button-group>
           <el-button type="primary" class="isax-arrow-left">Previous Page</el-button>
           <el-button type="primary" class="isax-arrow-right-1 icon-right">Next Page</el-button>
@@ -121,7 +121,7 @@ export default Vue.extend({
   name: 'TimusButtonSample',
   data() {
     return {
-      colors: ['primary', 'secondary', 'gray', 'info', 'success', 'wanring', 'danger'],
+      colors: ['primary', 'secondary', 'gray', 'info', 'success', 'warning', 'danger'],
       status: ['outline', 'ghost', 'rounder', 'disabled'],
       sizes: ['large', 'medium', 'small', 'mini'],
       icons: ['isax-bag', 'isax-calculator'],

package/components-js/ThemeCheckbox.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const _default: any;
2	+ export default _default;

package/components-js/ThemeCheckbox.vue ADDED Viewed

@@ -0,0 +1,143 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <h1>Checkbox</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-checkbox v-model="checked">Option</el-checkbox>
+        <el-checkbox :value="true" disabled>selected & disabled</el-checkbox>
+        <el-checkbox :value="false" disabled>unselected & disabled</el-checkbox>
+      </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>import Vue from 'vue';
+const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+export default Vue.extend({
+    data() {
+        return {
+            checked: true,
+            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) {
+            this.checkedCities = val ? cityOptions : [];
+            this.isIndeterminate = false;
+        },
+        handleCheckedCitiesChange(value) {
+            let checkedCount = value.length;
+            this.checkAll = checkedCount === this.cities.length;
+            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+        },
+        showAgreementDialog(type) {
+            console.log('agreement: ', type);
+        },
+        submit() {
+            this.$emit('submit', this.form);
+        },
+        onSubmit() {
+            console.log('submit!');
+        },
+    },
+});
+</script>

package/components-js/ThemeForm.vue CHANGED Viewed

@@ -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>import Vue from 'vue';
@@ -155,11 +58,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: '',
@@ -167,36 +67,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'),
-                        }),
-                    },
-                ],
             },
         };
     },
@@ -204,9 +74,7 @@ export default Vue.extend({
         showAgreementDialog(type) {
             console.log('agreement: ', type);
         },
-        submit() {
-            this.$emit('submit', this.form);
-        },
+        submit() { },
         onSubmit() {
             console.log('submit!');
         },

package/components-js/ThemeInputs.vue CHANGED Viewed

@@ -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-js/ThemeLink.vue ADDED Viewed

@@ -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-js/ThemeRadio.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const _default: any;
2	+ export default _default;