@timus-networks/theme 1.0.20 → 1.0.23

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

@@ -2,11 +2,19 @@
   <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-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>
 </template>

package/index.d.ts

@@ -1,2 +1,4 @@
 export * from './components-js/utils';
-export * from './components-js/ThemeForm';
+export * from './components-js/ThemeRadio';
+export * from './components-js/ThemeForm';
+export * from './components-js/ThemeCheckbox';

package/module.js

@@ -27,22 +27,27 @@ export default function (moduleOptions) {
 
   this.nuxt.hook('build:before', async (nuxt) => {
     const directories = [{source: 'output', target: 'static/'}, {source: 'fonts', target: 'static/fonts'}];
-    directories.forEach(async directory => {
+
+    // Kopyalama işlemlerini Promise.all ile sarmalayın
+    await Promise.all(directories.map(async (directory) => {
       const sourceDir = resolve(__dirname, `./${directory.source}/`);
       const destDir = resolve(this.options.srcDir, `./${directory.target}/`);
       await copyDirectory(sourceDir, destDir);
-    });
+    }));
 
-    this.options.css.push('@/static/fonts/poppins/100.css');
-    this.options.css.push('@/static/fonts/poppins/200.css');
-    this.options.css.push('@/static/fonts/poppins/300.css');
-    this.options.css.push('@/static/fonts/poppins/400.css');
-    this.options.css.push('@/static/fonts/poppins/500.css');
-    this.options.css.push('@/static/fonts/poppins/600.css');
-    this.options.css.push('@/static/fonts/poppins/700.css');
-    this.options.css.push('@/static/fonts/poppins/800.css');
-    this.options.css.push('@/static/fonts/poppins/900.css');
-    this.options.css.push('@/static/main.css');
+    // Tüm kopyalama işlemleri tamamlandığında CSS dosyalarını ekleyin
+    this.options.css.push(
+      '@/static/fonts/poppins/100.css',
+      '@/static/fonts/poppins/200.css',
+      '@/static/fonts/poppins/300.css',
+      '@/static/fonts/poppins/400.css',
+      '@/static/fonts/poppins/500.css',
+      '@/static/fonts/poppins/600.css',
+      '@/static/fonts/poppins/700.css',
+      '@/static/fonts/poppins/800.css',
+      '@/static/fonts/poppins/900.css',
+      '@/static/main.css'
+    );
   });
 
   // Assest'si, static fonts altına iconsax olarak gönderiyorum ve nuxt.config'in css'ine ekliyorum