@timus-networks/theme 1.0.100 → 1.0.102

package/components-ts/ThemeInputs.vue

@@ -4,7 +4,7 @@
       <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">
-        <el-input placeholder="Please input" v-model="input" class="danger"></el-input>
+        <el-input v-model="input" placeholder="Please input" class="danger" />
       </div>
       <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
         <p class="text-xs">
@@ -17,8 +17,9 @@
     <section>
       <h1>Disabled</h1>
       <p class="p-lg my-6">Kullanıcı etkileşimini engellemek için giriş bileşenini devre dışı bırakabilirsiniz.</p>
-      <div class="grid grid-flow-col auto-cols-max">
-        <el-input placeholder="Please input" v-model="input" :disabled="true"> </el-input>
+      <div class="grid grid-flow-col auto-cols-max gap-7">
+        <el-input v-model="input" placeholder="Please input" :disabled="true" />
+        <el-input value="some input value" placeholder="Please input" :disabled="true" />
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
@@ -32,7 +33,7 @@
       <h1>Clearable</h1>
       <p class="p-lg my-6">Kullanıcıların girdikleri metni tek bir tıklamayla silmelerini sağlayan temizlenebilir giriş bileşeni.</p>
       <div class="grid grid-flow-col auto-cols-max">
-        <el-input placeholder="Please input" v-model="input" clearable> </el-input>
+        <el-input v-model="input" placeholder="Please input" clearable />
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
@@ -46,7 +47,7 @@
       <h1>Password</h1>
       <p class="p-lg my-6">Şifre girişi için kullanılan giriş bileşeni, metni gizler ve şifre gösterme/ gizleme seçeneği sunar.</p>
       <div class="grid grid-flow-col auto-cols-max items-center">
-        <el-input placeholder="Please input password" v-model="input" show-password></el-input>
+        <el-input v-model="input" placeholder="Please input password" show-password />
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
@@ -60,7 +61,7 @@
       <h1>Input with icon</h1>
       <p class="p-lg my-6">İkonlarla zenginleştirilmiş giriş bileşenleri, görsel bir ipucu sunar ve kullanıcı deneyimini artırır.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-input placeholder="Type something" prefix-icon="el-icon-search" v-model="input2"> </el-input>
+        <el-input v-model="input2" placeholder="Type something" prefix-icon="el-icon-search" />
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
@@ -73,7 +74,7 @@
     <section>
       <h1>Textarea</h1>
       <p class="p-lg my-6">Metin alanı girişi, birden fazla satırı destekleyen ve daha büyük metin bloklarını girmek için kullanılır.</p>
-      <el-input type="textarea" :rows="2" placeholder="Please input" v-model="textarea"></el-input>
+      <el-input v-model="textarea" type="textarea" :rows="2" placeholder="Please input" />
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
           Textarea kullanımı için:
@@ -86,8 +87,8 @@
       <h1>Autosize Textarea</h1>
       <p class="p-lg my-6">Otomatik boyutlandırma özelliği, içeriğe bağlı olarak yüksekliği otomatik olarak ayarlayan bir metin alanıdır.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-input type="textarea" autosize placeholder="Please input" v-model="textarea1"></el-input>
-        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Please input" v-model="textarea2"></el-input>
+        <el-input v-model="textarea1" type="textarea" autosize placeholder="Please input" />
+        <el-input v-model="textarea2" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Please input" />
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
@@ -101,21 +102,21 @@
       <h1>Mixed input</h1>
       <p class="p-lg my-6">Ön ek veya son ek içeren giriş bileşenleri, giriş alanlarına ekstra içerik ekleyerek daha açıklayıcı olabilir.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-input placeholder="Please input" v-model="input1" type="success">
-          <template slot="prepend">Http://</template>
+        <el-input v-model="input1" placeholder="Please input" type="success">
+          <template #prepend>Http://</template>
         </el-input>
 
-        <el-input placeholder="Please input" v-model="input2">
-          <template slot="append">.com</template>
+        <el-input v-model="input2" placeholder="Please input">
+          <template #append>.com</template>
         </el-input>
 
-        <el-input placeholder="Please input" v-model="input3" class="input-with-select">
-          <el-select v-model="select" slot="append" placeholder="Select">
-            <el-option label="Restaurant" value="1"></el-option>
-            <el-option label="Order No." value="2"></el-option>
-            <el-option label="Tel" value="3"></el-option>
+        <el-input v-model="input3" placeholder="Please input" class="input-with-select">
+          <el-select slot="append" v-model="select" placeholder="Select">
+            <el-option label="Restaurant" value="1" />
+            <el-option label="Order No." value="2" />
+            <el-option label="Tel" value="3" />
           </el-select>
-          <el-button slot="prepend" icon="el-icon-search"></el-button>
+          <el-button slot="prepend" icon="el-icon-search" />
         </el-input>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
@@ -130,10 +131,10 @@
       <h1>Sizes</h1>
       <p class="p-lg my-6">Farklı boyutlardaki giriş bileşenleri, çeşitli arayüz ihtiyaçlarına yanıt vermek için tasarlanmıştır.</p>
       <div class="grid grid-flow-col auto-cols-max items-center gap-4">
-        <el-input size="large" placeholder="Please Input" v-model="input1"> </el-input>
-        <el-input size="medium" placeholder="Please Input" v-model="input2"> </el-input>
-        <el-input size="small" placeholder="Please Input" v-model="input3"> </el-input>
-        <el-input size="mini" placeholder="Please Input" v-model="input4"> </el-input>
+        <el-input v-model="input1" size="large" placeholder="Please Input" />
+        <el-input v-model="input2" size="medium" placeholder="Please Input" />
+        <el-input v-model="input3" size="small" placeholder="Please Input" />
+        <el-input v-model="input4" size="mini" placeholder="Please Input" />
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
@@ -147,17 +148,15 @@
       <h1>Autocomplete</h1>
       <p class="p-lg my-6">Otomatik tamamlama bileşeni, kullanıcıların yazarken öneriler almasını sağlar ve verimliliği artırır.</p>
       <div class="grid grid-flow-col auto-cols-max items-center gap-4">
-        <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="Please Input" @select="handleSelect">
-        </el-autocomplete>
+        <el-autocomplete v-model="state1" class="inline-input" :fetch-suggestions="querySearch" placeholder="Please Input" @select="handleSelect" />
         <el-autocomplete
-          class="inline-input"
           v-model="state2"
+          class="inline-input"
           :fetch-suggestions="querySearch"
           placeholder="Please Input"
           :trigger-on-focus="false"
           @select="handleSelect"
-        >
-        </el-autocomplete>
+        />
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
@@ -174,14 +173,14 @@
       <h1>Custom template</h1>
       <p class="p-lg my-6">Otomatik tamamlama bileşeni, özel şablonlar ile özelleştirilebilir, böylece daha fazla bilgi gösterebilirsiniz.</p>
       <el-autocomplete
-        popper-class="my-autocomplete"
         v-model="state"
+        popper-class="my-autocomplete"
         :fetch-suggestions="querySearch"
         placeholder="Please input"
         @select="handleSelect"
       >
-        <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"></i>
-        <template slot-scope="{ item }">
+        <i slot="suffix" class="el-icon-edit el-input__icon" @click="handleIconClick" />
+        <template #default="{ item }">
           <div class="value">{{ item.value }}</div>
           <span class="link">{{ item.link }}</span>
         </template>
@@ -200,7 +199,7 @@
     <section>
       <h1>Remote search</h1>
       <p class="p-lg my-6">Uzaktan arama ile otomatik tamamlama, sunucu tarafında gerçek zamanlı arama sonuçları getirir.</p>
-      <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Please input" @select="handleSelect"></el-autocomplete>
+      <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Please input" @select="handleSelect" />
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
           Uzaktan arama için:
@@ -216,8 +215,8 @@
       <h1>Limit length</h1>
       <p class="p-lg my-6">Uzunluk sınırı, kullanıcıların girebileceği karakter sayısını sınırlar ve aşırı uzun girişleri önler.</p>
       <div class="grid grid-flow-col auto-cols-max items-center gap-4">
-        <el-input type="text" placeholder="Please input" v-model="text" maxlength="10" show-word-limit></el-input>
-        <el-input type="textarea" placeholder="Please input" v-model="textarea" maxlength="30" show-word-limit></el-input>
+        <el-input v-model="text" type="text" placeholder="Please input" maxlength="10" show-word-limit />
+        <el-input v-model="textarea" type="textarea" placeholder="Please input" maxlength="30" show-word-limit />
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
@@ -261,19 +260,24 @@ export default Vue.extend({
         7: 'grid-cols-7',
         8: 'grid-cols-8',
       };
+
       return grids;
     },
   },
+  mounted() {
+    this.links = this.loadAll();
+  },
   methods: {
     querySearch(queryString, cb) {
-      var links = this.links;
-      var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+      const { links } = this;
+      const 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;
+      const { links } = this;
+      const results = queryString ? links.filter(this.createFilter(queryString)) : links;
 
       clearTimeout(this.timeout);
       this.timeout = setTimeout(() => {
@@ -281,9 +285,7 @@ export default Vue.extend({
       }, 3000 * Math.random());
     },
     createFilter(queryString) {
-      return (link) => {
-        return link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
-      };
+      return (link) => link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
     },
     loadAll() {
       return [
@@ -303,8 +305,5 @@ export default Vue.extend({
       console.log(ev);
     },
   },
-  mounted() {
-    this.links = this.loadAll();
-  },
 });
 </script>

package/components-ts/ThemeSelect.vue

@@ -5,7 +5,7 @@
       <p class="p-lg my-6">v-model is the value of el-option that is currently selected.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
         <el-select v-model="value" placeholder="Select">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
       <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
@@ -20,7 +20,7 @@
       <p class="p-lg my-6">Set the value of disabled in el-option to true to disable this option.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
         <el-select v-model="value" placeholder="Select">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"> </el-option>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
         </el-select>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
@@ -36,7 +36,7 @@
       <p class="p-lg my-6">Set disabled of el-select to make it disabled.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
         <el-select v-model="value" disabled placeholder="Select">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
@@ -52,7 +52,7 @@
       <p class="p-lg my-6">Farklı boyutlardaki butonlarımız, çeşitli arayüz ihtiyaçlarına yanıt vermek için tasarlanmıştır.</p>
       <div class="grid grid-flow-col auto-cols-max items-center gap-4">
         <el-select v-model="value" clearable placeholder="Select">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
@@ -67,11 +67,12 @@
       <h1>Basic multiple select</h1>
       <p class="p-lg my-6">Etkileşime kapalı 'disabled' butonlarımız, kullanılamaz durumları göstermek için kullanılır.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
-        <el-select v-model="value1" multiple placeholder="Select">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        {{ JSON.stringify(value1) }}
+        <el-select v-model="value1" multiple placeholder="Select" :disabled="true">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
-        <el-select v-model="value2" multiple collapse-tags placeholder="Select" type="primary">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        <el-select v-model="value2" multiple collapse-tags placeholder="Select" type="primary" :disabled="true">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
       <div class="my-4 p-4 border-l-4 border-red-600 bg-red-100">
@@ -110,7 +111,7 @@
       <div class="grid grid-flow-col auto-cols-max gap-4">
         <el-select v-model="value" placeholder="Select">
           <el-option-group v-for="group in groups" :key="group.label" :label="group.label">
-            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
           </el-option-group>
         </el-select>
       </div>
@@ -213,8 +214,8 @@ export default Vue.extend({
         },
       ],
       value: '',
-      value1: [],
-      value2: [],
+      value1: ['Option2', 'Option4', 'Option5'],
+      value2: ['Option2', 'Option4', 'Option5'],
     };
   },
   computed: {
@@ -225,6 +226,7 @@ export default Vue.extend({
         7: 'grid-cols-7',
         8: 'grid-cols-8',
       };
+
       return grids;
     },
   },