@timus-networks/theme 1.0.20 → 1.0.23

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

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

package/components-ts/ThemeCheckbox.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <h1>Checkbox</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>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-checkbox v-model="checked">Option</el-checkbox>
+        <el-checkbox :value="true" disabled>selected & disabled</el-checkbox>
+        <el-checkbox :value="false" disabled>unselected & disabled</el-checkbox>
+      </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>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h2>Checkbox 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.
+      </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>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          <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;
+          </code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+
+export default Vue.extend({
+  data() {
+    return {
+      checked: true,
+      checkboxGroup1: ['Shanghai'],
+      cities: cityOptions,
+      checkList: ['selected and disabled', 'Option A'],
+      checkAll: false,
+      checkedCities: ['Shanghai', 'Beijing'],
+      isIndeterminate: true,
+      time: '',
+      sizeForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: '',
+      },
+      loading: false,
+
+      form: {
+        email: '',
+        password: '',
+        remember: false,
+        token: null,
+        correlation_id: null,
+        action: null,
+        platform: 'manager',
+        version: '1.0.10',
+      },
+      rules: {
+        email: [
+          {
+            validator: 'validateEmail',
+            trigger: 'submit',
+            message: this.$t('messages.please_provide_valid_email'),
+          },
+        ],
+        password: [
+          {
+            required: true,
+            trigger: 'submit',
+            message: this.$t('messages.please_fill', {
+              field: this.$t('login.password'),
+            }),
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleCheckAllChange(val: string) {
+      this.checkedCities = val ? cityOptions : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value: string[]) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    showAgreementDialog(type: string) {
+      console.log('agreement: ', type);
+    },
+    submit() {
+      this.$emit('submit', this.form);
+    },
+    onSubmit() {
+      console.log('submit!');
+    },
+  },
+});
+</script>