@timus-networks/theme 1.0.23 → 1.0.24

package/components-ts/ThemeAvatar.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Sizes</h1>
+      <p class="p-md-c my-6">
+        Avatarlar, resimler, ikonlar veya alfanumerik karakterleri destekler. Avatar'ın şeklini ve boyutunu ayarlamak için `shape` ve `size`
+        özelliklerini kullanabilirsiniz. Ayrıca avatarın resim kaynağını belirlemek için `src` özelliğini kullanabilirsiniz. Şekil tipleri
+        <b>'circle | square'</b> şeklindedir. Boyutlar ise <b>'xlarge', 'large', 'medium', 'small', 'xsmall'</b> şeklindedir. Veya boyutu manuel
+        olarak `size` özelliğini kullanarak belirleyebilirsiniz, örneğin <b>size='50'</b>.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
+        <el-avatar :size="50">SK</el-avatar>
+        <el-avatar :size="size" v-for="size in sizeList" :key="size + ''">SK</el-avatar>
+        <el-divider direction="vertical" content-position="center"></el-divider>
+        <el-avatar shape="square" :size="50" :src="url"></el-avatar>
+        <el-avatar shape="square" :size="size" :src="url" v-for="size in sizeList" :key="size"></el-avatar>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-avatar :size="50"&gt;SK&lt;/el-avatar&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Types</h1>
+      <p class="p-md-c my-6">Resimler, ikonlar veya alfanumerik karakterleri destekler</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
+        <el-avatar icon="isax-add-circle"></el-avatar>
+        <el-avatar icon="isax-add-circle" size="xlarge"></el-avatar>
+        <el-avatar :src="url"></el-avatar>
+        <el-avatar>SK</el-avatar>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-avatar icon="isax-add-circle" size="xlarge"&gt;&lt;/el-avatar&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-ts/ThemeBadge.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Temel Kullanım</h1>
+      <p class="p-md-c my-6">
+        Butonlar ve simgeler üzerinde sayı veya durum işareti. Yeni mesajların miktarını görüntüler. Miktar, `Number` veya `String` kabul eden `value`
+        ile tanımlanır.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-badge :value="12"> <el-button size="small">Yorumlar</el-button> </el-badge>
+        <el-badge :value="randomNumber()" :type="item" v-for="(item, key) in colors" :key="key">
+          <el-button size="small" :class="randomButtonType()" :type="randomColor()">{{ item }}</el-button>
+        </el-badge>
+        <el-dropdown trigger="click">
+          <span class="el-dropdown-link"> Beni Tıkla<i class="el-icon-caret-bottom el-icon--right"></i> </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item class="clearfix">
+              Yorumlar
+              <el-badge class="mark" :value="12" />
+            </el-dropdown-item>
+            <el-dropdown-item class="clearfix">
+              Yanıtlar
+              <el-badge class="mark" :value="3" />
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-badge :value="12"&gt; &lt;el-button size="small"&gt;Comments&lt;/el-button&gt; &lt;/el-badge&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Max Değer</h1>
+      <p class="p-md-c my-6">
+        Maksimum değer, bir Sayı (Number) olan max özelliği ile belirlenir. Unutmayın ki, bu özellik yalnızca value özelliği de bir Sayı (Number)
+        olduğunda çalışır.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-badge :value="200" :max="99" class="item">
+          <el-button size="small">Yorumlar</el-button>
+        </el-badge>
+        <el-badge :value="100" :max="10" class="item">
+          <el-button size="small">Yanıtlar</el-button>
+        </el-badge>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-badge :value="12"&gt; &lt;el-button size="small"&gt;Yorumlar&lt;/el-button&gt; &lt;/el-badge&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusCascader',
+  data() {
+    return {
+      colors: ['primary', 'secondary', 'gray', 'info', 'success', 'warning', 'danger'],
+    };
+  },
+  methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+  },
+  methods: {
+    randomNumber() {
+      return Math.round(Math.random() * 1000);
+    },
+    randomColor() {
+      return this.colors[Math.round(Math.random() * 7)];
+    },
+    randomButtonType() {
+      const type = ['outline'];
+      return type[Math.round(Math.random() * 2)];
+    },
+  },
+});
+</script>

package/components-ts/ThemeCascader.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Basic usage</h1>
+      <p class="p-lg my-6">There are two ways to expand child option items.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-cascader v-model="value" :options="options" @change="handleChange" clearable></el-cascader>
+        <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-cascader v-model="value" :options="options" @change="handleChange"&gt;&lt;/el-cascader&gt;</code>
+        </p>
+      </div>
+    </section>
+    <section>
+      <h1>Multiple Selection</h1>
+      <p class="p-lg my-6">
+        Set `props.multiple = true` to use multiple selection. When using multiple selection, all selected tags will display by default, You can set
+        `collapse-tags = true` to fold selected tags.
+      </p>
+      <div class="flex gap-4">
+        <el-cascader :options="options" :props="props" clearable></el-cascader>
+        <el-cascader :options="options" :props="props" collapse-tags clearable></el-cascader>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-cascader v-model="value" :options="options" @change="handleChange"&gt;&lt;/el-cascader&gt;</code>
+        </p>
+      </div>
+    </section>
+    <section>
+      <h1>Select any level of options</h1>
+      <p class="p-lg my-6">
+        In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked
+        eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.
+      </p>
+      <div class="flex gap-4">
+        <el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader>
+        <el-cascader :options="options" :props="{ multiple: true, checkStrictly: true }" clearable></el-cascader>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-cascader v-model="value" :options="options" @change="handleChange"&gt;&lt;/el-cascader&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusCascader',
+  data() {
+    return {
+      props: { multiple: true },
+      value: [],
+      options: [
+        {
+          value: 'guide',
+          label: 'Guide',
+          disabled: true,
+          children: [
+            {
+              value: 'disciplines',
+              label: 'Disciplines',
+              children: [
+                {
+                  value: 'consistency',
+                  label: 'Consistency',
+                },
+                {
+                  value: 'feedback',
+                  label: 'Feedback',
+                },
+                {
+                  value: 'efficiency',
+                  label: 'Efficiency',
+                },
+                {
+                  value: 'controllability',
+                  label: 'Controllability',
+                },
+              ],
+            },
+            {
+              value: 'navigation',
+              label: 'Navigation',
+              children: [
+                {
+                  value: 'side nav',
+                  label: 'Side Navigation',
+                },
+                {
+                  value: 'top nav',
+                  label: 'Top Navigation',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: 'component',
+          label: 'Component',
+          children: [
+            {
+              value: 'basic',
+              label: 'Basic',
+              children: [
+                {
+                  value: 'layout',
+                  label: 'Layout',
+                },
+                {
+                  value: 'color',
+                  label: 'Color',
+                },
+                {
+                  value: 'typography',
+                  label: 'Typography',
+                },
+                {
+                  value: 'icon',
+                  label: 'Icon',
+                },
+                {
+                  value: 'button',
+                  label: 'Button',
+                },
+              ],
+            },
+            {
+              value: 'form',
+              label: 'Form',
+              children: [
+                {
+                  value: 'radio',
+                  label: 'Radio',
+                },
+                {
+                  value: 'checkbox',
+                  label: 'Checkbox',
+                },
+                {
+                  value: 'input',
+                  label: 'Input',
+                },
+                {
+                  value: 'input-number',
+                  label: 'InputNumber',
+                },
+                {
+                  value: 'select',
+                  label: 'Select',
+                },
+                {
+                  value: 'cascader',
+                  label: 'Cascader',
+                },
+                {
+                  value: 'switch',
+                  label: 'Switch',
+                },
+                {
+                  value: 'slider',
+                  label: 'Slider',
+                },
+                {
+                  value: 'time-picker',
+                  label: 'TimePicker',
+                },
+                {
+                  value: 'date-picker',
+                  label: 'DatePicker',
+                },
+                {
+                  value: 'datetime-picker',
+                  label: 'DateTimePicker',
+                },
+                {
+                  value: 'upload',
+                  label: 'Upload',
+                },
+                {
+                  value: 'rate',
+                  label: 'Rate',
+                },
+                {
+                  value: 'form',
+                  label: 'Form',
+                },
+              ],
+            },
+            {
+              value: 'data',
+              label: 'Data',
+              children: [
+                {
+                  value: 'table',
+                  label: 'Table',
+                },
+                {
+                  value: 'tag',
+                  label: 'Tag',
+                },
+                {
+                  value: 'progress',
+                  label: 'Progress',
+                },
+                {
+                  value: 'tree',
+                  label: 'Tree',
+                },
+                {
+                  value: 'pagination',
+                  label: 'Pagination',
+                },
+                {
+                  value: 'badge',
+                  label: 'Badge',
+                },
+              ],
+            },
+            {
+              value: 'notice',
+              label: 'Notice',
+              children: [
+                {
+                  value: 'alert',
+                  label: 'Alert',
+                },
+                {
+                  value: 'loading',
+                  label: 'Loading',
+                },
+                {
+                  value: 'message',
+                  label: 'Message',
+                },
+                {
+                  value: 'message-box',
+                  label: 'MessageBox',
+                },
+                {
+                  value: 'notification',
+                  label: 'Notification',
+                },
+              ],
+            },
+            {
+              value: 'navigation',
+              label: 'Navigation',
+              children: [
+                {
+                  value: 'menu',
+                  label: 'NavMenu',
+                },
+                {
+                  value: 'tabs',
+                  label: 'Tabs',
+                },
+                {
+                  value: 'breadcrumb',
+                  label: 'Breadcrumb',
+                },
+                {
+                  value: 'dropdown',
+                  label: 'Dropdown',
+                },
+                {
+                  value: 'steps',
+                  label: 'Steps',
+                },
+              ],
+            },
+            {
+              value: 'others',
+              label: 'Others',
+              children: [
+                {
+                  value: 'dialog',
+                  label: 'Dialog',
+                },
+                {
+                  value: 'tooltip',
+                  label: 'Tooltip',
+                },
+                {
+                  value: 'popover',
+                  label: 'Popover',
+                },
+                {
+                  value: 'card',
+                  label: 'Card',
+                },
+                {
+                  value: 'carousel',
+                  label: 'Carousel',
+                },
+                {
+                  value: 'collapse',
+                  label: 'Collapse',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: 'resource',
+          label: 'Resource',
+          children: [
+            {
+              value: 'axure',
+              label: 'Axure Components',
+            },
+            {
+              value: 'sketch',
+              label: 'Sketch Templates',
+            },
+            {
+              value: 'docs',
+              label: 'Design Documentation',
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+  },
+});
+</script>

package/components-ts/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>