@timus-networks/theme 1.0.21 → 1.0.24

package/components-js/ThemeToggle.vue

@@ -0,0 +1,122 @@
+<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-switch v-model="value1"> </el-switch>
+      </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>Custom Color</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-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
+      </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>Text description</h1>
+      <p class="p-lg my-6">You can add active-text and inactive-text attribute to show texts.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-switch v-model="value1" active-text="Pay by month" inactive-text="Pay by year"> </el-switch>
+      </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-switch v-model="value1" disabled inactive-text="Pay by year"></el-switch>
+        <el-switch v-model="value2" disabled inactive-text="Pay by year"></el-switch>
+      </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 {
+      value1: true,
+      value2: true,
+    };
+  },
+  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/ThemeTooltip.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Tooltip</h1>
+      <p class="p-lg-c my-6">
+        Bu örnek, Element UI tarafından sağlanan <code>el-table</code> bileşenini kullanarak bir veri tablosu oluşturmanın temel bir örneğini
+        göstermektedir. `table-container` ile dışarıya border verildiğini unutmamanızı tavsiye ediyoruz.
+      </p>
+      <div class="flex flex-wrap gap-4">
+        <el-tooltip class="item h-24 outline" effect="dark" content="Top Left prompts info" placement="top-start">
+          <el-button size="large">top-start</el-button>
+        </el-tooltip>
+        <el-tooltip class="item h-24 outline" effect="dark" content="Top Center prompts info" placement="top">
+          <el-button size="large">top</el-button>
+        </el-tooltip>
+        <el-tooltip class="item h-24 outline" effect="dark" content="Top Right prompts info" placement="top-end">
+          <el-button size="large">top-end</el-button>
+        </el-tooltip>
+
+        <el-tooltip class="item h-24 outline" effect="dark" content="Left Top prompts info" placement="left-start">
+          <el-button size="large">left-start</el-button>
+        </el-tooltip>
+        <el-tooltip class="item h-24 outline" effect="dark" content="Left Center prompts info" placement="left">
+          <el-button size="large">left</el-button>
+        </el-tooltip>
+        <el-tooltip class="item h-24 outline" effect="dark" content="Left Bottom prompts info" placement="left-end">
+          <el-button size="large">left-end</el-button>
+        </el-tooltip>
+
+        <el-tooltip class="item h-24 outline" effect="dark" content="Right Top prompts info" placement="right-start">
+          <el-button size="large">right-start</el-button>
+        </el-tooltip>
+        <el-tooltip class="item h-24 outline" effect="dark" content="Right Center prompts info" placement="right">
+          <el-button size="large">right</el-button>
+        </el-tooltip>
+        <el-tooltip class="item h-24 outline" effect="dark" content="Right Bottom prompts info" placement="right-end">
+          <el-button size="large">right-end</el-button>
+        </el-tooltip>
+
+        <el-tooltip class="item h-24 outline" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
+          <el-button size="large">bottom-start</el-button>
+        </el-tooltip>
+        <el-tooltip class="item h-24 outline" effect="dark" content="Bottom Center prompts info" placement="bottom">
+          <el-button size="large">bottom</el-button>
+        </el-tooltip>
+        <el-tooltip class="item h-24 outline" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
+          <el-button size="large">bottom-end</el-button>
+        </el-tooltip>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>
+            &lt;div class="table-container">&lt;el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending'
+            }"&gt;&lt;/el-table&gt;&lt;/div&gt;
+          </code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'ThemeTable',
+  computed: {
+    gridSize() {
+      const grids = {
+        5: 'grid-cols-5',
+        6: 'grid-cols-6',
+        7: 'grid-cols-7',
+        8: 'grid-cols-8',
+      };
+      return grids;
+    },
+  },
+  data() {
+    return {
+      multipleSelection: [],
+      currentPage1: 5,
+      currentPage2: 5,
+      currentPage3: 5,
+      currentPage4: 4,
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home',
+        },
+        {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office',
+        },
+        {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home',
+        },
+        {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office',
+        },
+        {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office',
+        },
+        {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home',
+        },
+        {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office',
+        },
+      ],
+    };
+  },
+  methods: {
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter('date');
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      console.log(row, column, value);
+      const property = column['property'];
+      return row[property] === value;
+    },
+    handleSizeChange(val) {
+      console.log(`${val} items per page`);
+    },
+    handleCurrentChange(val) {
+      console.log(`current page: ${val}`);
+    },
+  },
+});
+</script>

package/components-js/TimusSamples.vue

@@ -1,30 +1,43 @@
 <template>
-  <div class="container">
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="Button" name="first"><ThemeButtons></ThemeButtons></el-tab-pane>
-      <el-tab-pane label="Typography" name="second"><ThemeTypo></ThemeTypo></el-tab-pane>
-      <el-tab-pane label="Inputs" name="third"><ThemeInputs></ThemeInputs></el-tab-pane>
-      <el-tab-pane label="Numbers" name="fourth"><ThemeInputNumbers></ThemeInputNumbers></el-tab-pane>
-      <el-tab-pane label="TimePicker" name="five"><ThemeTimePicker></ThemeTimePicker></el-tab-pane>
-      <el-tab-pane label="Form" name="six"><ThemeForm></ThemeForm>></el-tab-pane>
-    </el-tabs>
-  </div>
+    <div class="container">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="Button" name="first"><ThemeButtons></ThemeButtons></el-tab-pane>
+            <el-tab-pane label="Typo" name="second"><ThemeTypo></ThemeTypo></el-tab-pane>
+            <el-tab-pane label="Input" name="third"><ThemeInputs></ThemeInputs></el-tab-pane>
+            <el-tab-pane label="Checkbox" name="fourth"><ThemeCheckbox></ThemeCheckbox></el-tab-pane>
+            <el-tab-pane label="Radio" name="five"><ThemeRadio></ThemeRadio></el-tab-pane>
+            <el-tab-pane label="Number" name="six"><ThemeInputNumbers></ThemeInputNumbers></el-tab-pane>
+            <el-tab-pane label="Picker" name="seven"><ThemeTimePicker></ThemeTimePicker></el-tab-pane>
+            <el-tab-pane label="Select" name="eight"><ThemeSelect></ThemeSelect></el-tab-pane>
+            <el-tab-pane label="Form" name="nine"><ThemeForm></ThemeForm></el-tab-pane>
+            <el-tab-pane label="Link" name="ten"><ThemeLink></ThemeLink></el-tab-pane>
+            <el-tab-pane label="Tag" name="eleven"><ThemeTag></ThemeTag></el-tab-pane>
+            <el-tab-pane label="Switch" name="twelve"><ThemeToggle></ThemeToggle></el-tab-pane>
+            <el-tab-pane label="Table" name="thirteen"><ThemeTable></ThemeTable></el-tab-pane>
+            <el-tab-pane label="Tooltip" name="fourteen"><ThemeTooltip></ThemeTooltip></el-tab-pane>
+            <el-tab-pane label="Alert" name="fifteen"><ThemeAlert></ThemeAlert></el-tab-pane>
+            <el-tab-pane label="Cascader" name="sixteen"><ThemeCascader></ThemeCascader></el-tab-pane>
+            <el-tab-pane label="Badge" name="seventeen"><ThemeBadge></ThemeBadge></el-tab-pane>
+            <el-tab-pane label="Avatar" name="eighteen"><ThemeAvatar></ThemeAvatar></el-tab-pane>
+            <el-tab-pane label="Logo" name="nineteen"><ThemeLogo></ThemeLogo></el-tab-pane>
+        </el-tabs>
+    </div>
 </template>
 <script>
 import ThemeInputNumbers from './ThemeInputNumbers.vue';
 import ThemeInputs from './ThemeInputs.vue';
 
 export default {
-  data() {
-    return {
-      activeName: 'first',
-    };
-  },
-  methods: {
-    handleClick(tab, event) {
-      console.log(tab, event);
+    data() {
+        return {
+            activeName: 'first',
+        };
     },
-  },
-  components: { ThemeInputs, ThemeInputNumbers },
+    methods: {
+        handleClick(tab, event) {
+            console.log(tab, event);
+        },
+    },
+    components: { ThemeInputs, ThemeInputNumbers },
 };
 </script>

package/components-js/exporter.js

@@ -1,9 +1,9 @@
 const components = {};
 const requireComponent = require.context(
-  '.', // bu klasördeki bileşenleri oku
-  false, // alt klasörleri okuma
-  /[A-Z]\w+\.(vue)$/, // Vue bileşenlerini al
-  // EXPERIMENTAL: /[A-Z]\w+\.(vue|js)$/, // Vue bileşenlerini veya JS dosyalarını al
+  '.', // read from current directory
+  false, // don't look in subdirectories
+  /[A-Z]\w+\.(vue)$/, // only look for Vue files
+  // EXPERIMENTAL: /[A-Z]\w+\.(vue|js)$/, // only look for Vue or JS files
 );
 
 requireComponent.keys().forEach((fileName) => {
@@ -11,7 +11,7 @@ requireComponent.keys().forEach((fileName) => {
   const componentName = fileName
     .split('/')
     .pop()
-    .replace(/\.\w+$/, ''); // Dosya adını bileşen adı olarak al
+    .replace(/\.\w+$/, ''); // remove file extension and set file name as component name
 
   components[componentName] = componentConfig.default || componentConfig;
 });

package/components-ts/ThemeAlert.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Alert</h1>
+      <p class="p-lg-c my-6">Uyarı bileşenleri, sayfada otomatik olarak kaybolmayan non-overlay mesajlarını görüntülemek için kullanılır.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-alert :title="`${item}`" :type="item" class="isax-activity" v-for="(item, key) in colors" :key="key"></el-alert>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-alert title="Success alert" type="success" class="isax-activity"&gt;&lt;/el-alert&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'ThemeTable',
+  computed: {
+    gridSize() {
+      const grids = {
+        5: 'grid-cols-5',
+        6: 'grid-cols-6',
+        7: 'grid-cols-7',
+        8: 'grid-cols-8',
+      };
+      return grids;
+    },
+  },
+  data() {
+    return {
+      colors: ['primary', 'secondary', 'gray', 'warning', 'danger', 'info', 'success'],
+    };
+  },
+  methods: {
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    resetDateFilter() {
+      this.$refs.filterTable.clearFilter('date');
+    },
+    clearFilter() {
+      this.$refs.filterTable.clearFilter();
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    filterTag(value, row) {
+      return row.tag === value;
+    },
+    filterHandler(value, row, column) {
+      console.log(row, column, value);
+      const property = column['property'];
+      return row[property] === value;
+    },
+    handleSizeChange(val) {
+      console.log(`${val} items per page`);
+    },
+    handleCurrentChange(val) {
+      console.log(`current page: ${val}`);
+    },
+  },
+});
+</script>

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/ThemeButtons.vue

@@ -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'],