@timus-networks/theme 1.0.23 → 1.0.24

package/components-js/ThemeTable.vue

@@ -1,211 +1,245 @@
 <template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Fixed Height</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="grid flex-column">
-        <div class="table-container mb-4">
-          <el-table
-            :data="tableData"
-            :default-sort="{ prop: 'date', order: 'descending' }"
-            @selection-change="handleSelectionChange"
-            ref="multipleTable"
-            height="360px"
-            style="width: 100%"
-          >
-            <el-table-column type="selection" width="55"> </el-table-column>
-            <el-table-column
-              fixed
-              prop="date"
-              label="Date"
-              sortable
-              column-key="date"
-              :filters="[
-                { text: '2016-05-01', value: '2016-05-01' },
-                { text: '2016-05-02', value: '2016-05-02' },
-                { text: '2016-05-03', value: '2016-05-03' },
-                { text: '2016-05-04', value: '2016-05-04' },
-              ]"
-              :filter-method="filterHandler"
-            >
-            </el-table-column>
-            <el-table-column prop="name" label="Name" width="180"> </el-table-column>
-            <el-table-column prop="address" label="Address" :formatter="formatter"> </el-table-column>
-            <el-table-column
-              prop="tag"
-              label="Tag"
-              :filters="[
-                { text: 'Home', value: 'Home' },
-                { text: 'Office', value: 'Office' },
-                { text: 'Patates', value: 'Patates' },
-              ]"
-              :filter-method="filterTag"
-              filter-placement="top-start"
-            >
-            </el-table-column>
-            <el-table-column prop="name" label="Name" width="120"> </el-table-column>
-            <el-table-column prop="state" label="State" width="120"> </el-table-column>
-            <el-table-column prop="city" label="City" width="120"> </el-table-column>
-            <el-table-column prop="address" label="Address" width="300"> </el-table-column>
-            <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
-            <el-table-column fixed="right" label="Operations" width="120">
-              <template slot-scope="scope">
-                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> Remove </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page.sync="currentPage4"
-          :page-sizes="[100, 200, 300, 400]"
-          :page-size="100"
-          layout="total, prev, pager, next, jumper, sizes"
-          :total="400"
-        >
-        </el-pagination>
-      </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>
+    <div class="pt-8 pb-16 flex gap-12 flex-col">
+        <section>
+            <h1>Fixed Height</h1>
+            <p class="p-md-c my-6">
+                This example demonstrates the basic usage of creating a data table using the `el-table` component provided by Element UI. Please note
+                that the outer border is applied with `table-container`.
+            </p>
+            <div class="grid flex-column">
+                <div class="table-container mb-4">
+                    <el-table
+                        :data="tableData"
+                        :default-sort="{ prop: 'date', order: 'descending' }"
+                        @selection-change="handleSelectionChange"
+                        ref="multipleTable"
+                        height="360px"
+                        style="width: 100%"
+                    >
+                        <el-table-column type="selection" width="55"> </el-table-column>
+                        <el-table-column
+                            fixed
+                            prop="date"
+                            label="Date"
+                            sortable
+                            column-key="date"
+                            :filters="[
+                                { text: '2016-05-01', value: '2016-05-01' },
+                                { text: '2016-05-02', value: '2016-05-02' },
+                                { text: '2016-05-03', value: '2016-05-03' },
+                                { text: '2016-05-04', value: '2016-05-04' },
+                            ]"
+                            :filter-method="filterHandler"
+                        >
+                        </el-table-column>
+                        <el-table-column prop="name" label="Name" width="180"> </el-table-column>
+                        <el-table-column prop="address" label="Address" :formatter="formatter"> </el-table-column>
+                        <el-table-column
+                            prop="tag"
+                            label="Tag"
+                            :filters="[
+                                { text: 'Home', value: 'Home' },
+                                { text: 'Office', value: 'Office' },
+                                { text: 'Potato', value: 'Potato' },
+                            ]"
+                            :filter-method="filterTag"
+                            filter-placement="top-start"
+                        >
+                        </el-table-column>
+                        <el-table-column prop="name" label="Name" width="120"> </el-table-column>
+                        <el-table-column prop="state" label="State" width="120"> </el-table-column>
+                        <el-table-column prop="city" label="City" width="120"> </el-table-column>
+                        <el-table-column prop="address" label="Address" width="300"> </el-table-column>
+                        <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
+                        <el-table-column fixed="right" label="Operations" width="120">
+                            <template slot-scope="scope">
+                                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> Remove </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+                <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :current-page.sync="currentPage4"
+                    :page-sizes="[100, 200, 300, 400]"
+                    :page-size="100"
+                    layout="total, prev, pager, next, jumper, sizes"
+                    :total="400"
+                >
+                </el-pagination>
+            </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>
+
+        <section>
+            <h1>Expandable Row</h1>
+            <p class="p-md-c my-6">
+                When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.
+                Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of
+                the expanded row, and you can access the same attributes as when you are using Scoped slot in custom column templates.
+            </p>
+            <div class="grid grid-flow-col auto-cols-max gap-4">
+                <div class="table-container mb-4">
+                    <el-table :data="tableData" style="width: 100%">
+                        <el-table-column type="expand">
+                            <template slot-scope="props">
+                                <p>State: {{ props.row.state }}</p>
+                                <p>City: {{ props.row.city }}</p>
+                                <p>Address: {{ props.row.address }}</p>
+                                <p>Zip: {{ props.row.zip }}</p>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="Date" prop="date"> </el-table-column>
+                        <el-table-column label="Name" prop="name"> </el-table-column>
+                    </el-table>
+                </div>
+            </div>
+            <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+                <p class="text-xs">
+                    <code>
+                        &lt;el-table :data="tableData"&gt; &lt;el-table-column type="expand"&gt; &lt;template v-slot="props"&gt; &lt;p&gt;State: {
+                        props.row.state } &lt;/p&gt; &lt;/template&gt; &lt;/el-table-column&gt; &lt;/el-table&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;
+    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',
+                },
+            ],
+        };
     },
-  },
-  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',
+    methods: {
+        toggleSelection(rows) {
+            if (rows) {
+                rows.forEach((row) => {
+                    this.$refs.multipleTable.toggleRowSelection(row);
+                });
+            } else {
+                this.$refs.multipleTable.clearSelection();
+            }
         },
-        {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
         },
-        {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home',
+        resetDateFilter() {
+            this.$refs.filterTable.clearFilter('date');
         },
-        {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
+        clearFilter() {
+            this.$refs.filterTable.clearFilter();
         },
-        {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
+        formatter(row, column) {
+            return row.address;
         },
-        {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home',
+        filterTag(value, row) {
+            return row.tag === value;
         },
-        {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
+        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}`);
         },
-      ],
-    };
-  },
-  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,38 +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="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-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>