@timus-networks/theme 1.0.23 → 1.0.24

package/components-js/ThemeLink.vue

@@ -1,84 +1,82 @@
 <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>
+      <h1>Link</h1>
+      <p class="p-lg my-6">
+        `el-link` bileşeni, sayfadaki metni veya bağlantıyı temsil eder ve stil ve davranışlarını özelleştirmenize olanak tanır.
+      </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>
+        <el-link :type="item" v-for="(item, index) in colors" :key="index">{{ item }}</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>
+          <code>&lt;el-link type="primary"&gt;Bağlantı&lt;/el-link&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>
+      <h1>Nuxt Link ile Kullanım</h1>
+      <p class="p-lg my-6">El Link bileşenini Nuxt Link ile kullanabilirsiniz. Bu, Nuxt.js projelerinde sayfa geçişlerini kolaylaştırır.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <NuxtLink to="/"><el-link type="primary">Nuxt Link</el-link></NuxtLink>
+        <NuxtLink to="/" v-for="(item, index) in colors" :key="index">
+          <el-link :type="item">Router: {{ item }}</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>
+          <code>&lt;NuxtLink to="/"&gt;&lt;el-link type="primary"&gt;Bağlantı&lt;/el-link&gt;&lt;/NuxtLink&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>
+      <h1>Devre Dışı Bırakılmış Durum</h1>
+      <p class="p-lg my-6">El Link bileşenini devre dışı bırakmak için <code>disabled</code> özelliğini 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>
+        <el-link :type="item" v-for="(item, index) in colors" :key="index" disabled>{{ item }}</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>
+          <code>&lt;el-link disabled&gt;Devre Dışı&lt;/el-link&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>
+      <h1>Alt Çizgi</h1>
+      <p class="p-lg my-6">
+        El Link bileşeninin alt çizgisini göstermek veya gizlemek için <code>:underline="false"</code> özelliğini 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>
+        <el-link type="primary" :underline="false">Alt Çizgi Yok</el-link>
+        <el-link type="primary">Alt Çizgiyle</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>
+          <code>&lt;el-link :underline="false"&gt;Alt Çizgi Yok&lt;/el-link&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>
+      <h1>İkon</h1>
+      <p class="p-lg my-6">El Link bileşeni, metin veya bağlantı ile birlikte ikonlar eklemenize olanak tanır.</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>
+        <el-link type="primary" icon="el-icon-edit">Düzenle</el-link>
+        <el-link type="primary">Onayla<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>
+          <code>&lt;el-link icon="el-icon-edit"&gt;Düzenle&lt;/el-link&gt;</code>
         </p>
       </div>
     </section>
   </div>
 </template>
+
 <script>
 import Vue from 'vue';
 
@@ -86,76 +84,8 @@ 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,
+      colors: ['primary', 'secondary', 'gray', 'info', 'success', 'warning', 'danger'],
     };
   },
-  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/ThemeLogo.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="pt-8 pb-16 flex gap-12 flex-col">
+        <section>
+            <h1>Sizes</h1>
+            <p class="p-md-c my-6">
+                Our logos are available in three sizes: small, medium, and large. To tailor your choice, use the size tags
+                <b>'small', 'medium', 'large'</b> to determine the appropriate size for your needs.
+            </p>
+            <div class="grid grid-flow-col auto-cols-max gap-6 items-center">
+                <div class="logo-icon-small"></div>
+                <div class="logo-icon-medium"></div>
+                <div class="logo-icon-large"></div>
+                <el-divider direction="vertical" content-position="center"></el-divider>
+                <div class="logo-small"></div>
+                <div class="logo-medium"></div>
+                <div class="logo-large"></div>
+            </div>
+            <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+                <p class="text-xs">
+                    <code>&lt;div class="logo-medium"&gt;&lt;/div&gt;</code>
+                </p>
+            </div>
+        </section>
+
+        <section>
+            <h1>Types</h1>
+            <p class="p-md-c my-6">
+                There are two different types of logo usage available: <b>"icon"</b> or <b>"logo"</b>. When used as a <b>"logo"</b>, an additional
+                icon along with the word <b>"timus"</b> will be displayed.
+            </p>
+            <div class="grid grid-flow-col auto-cols-max gap-6 items-center">
+                <div class="logo-icon-small"></div>
+                <el-divider direction="vertical" content-position="center"></el-divider>
+                <div class="logo-small"></div>
+            </div>
+            <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+                <p class="text-xs">
+                    <code>&lt;div class="logo-icon-medium"&gt;&lt;/div&gt; | &lt;div class="logo-medium"&gt;&lt;/div&gt;</code>
+                </p>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+    name: 'TimusCascader',
+    data() {
+        return {
+            url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
+            sizeList: ['xlarge', 'large', 'medium', 'small', 'xsmall'],
+        };
+    },
+});
+</script>

package/components-js/ThemeRadio.vue

@@ -3,63 +3,42 @@
     <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>
+      <h2>Temel Kullanım</h2>
+      <p class="p-lg-c my-6">El Radio, çok fazla seçeneğe sahip olmamalıdır. Aksi takdirde, Select bileşenini kullanmalısınız.</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>
+        <el-radio v-model="radio" :label="0">Seçenek A</el-radio>
+        <el-radio v-model="radio" :label="1">Seçenek B</el-radio>
+        <el-radio v-model="radio" :label="2" disabled>Seçenek C (Devre Dışı)</el-radio>
+        <el-radio :value="false" disabled>Seçili Olmayan ve Devre Dışı</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>
+          Örnek Kullanım:
+          <code> &lt;el-radio :value="true" disabled&gt;Seçili & Devre Dışı&lt;/el-radio&gt; </code>
         </p>
       </div>
     </section>
 
     <section>
-      <h2>Checkbox group</h2>
+      <h2>Radio 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.
+        `el-radio-group` ile `el-radio` bileşenini bir araya getirerek bir radyo grubu görüntüleyebilirsiniz. el-radio-group elementinin v-model ile
+        bağlı olduğu bir değişkeni belirleyin ve el-radio içindeki etiket değerini ayarlayın. Ayrıca, mevcut değeri parametre olarak alan bir
+        değişiklik olayı sağlar.
       </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>
+        <el-radio-group v-model="radio">
+          <el-radio :label="3">Seçenek A</el-radio>
+          <el-radio :label="6">Seçenek B</el-radio>
+          <el-radio :label="9">Seçenek C</el-radio>
+        </el-radio-group>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
         <p class="text-xs">
+          Örnek Kullanım:
           <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;
+            &lt;el-radio-group v-model="radio"&gt; &lt;el-radio :label="3"&gt;Seçenek A&lt;/el-radio&gt; &lt;el-radio :label="6"&gt;Seçenek
+            B&lt;/el-radio&gt; &lt;/el-radio-group&gt;
           </code>
         </p>
       </div>