@timus-networks/theme 1.0.21 → 1.0.23

package/components-ts/ThemeSelect.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Basic usage</h1>
+      <p class="p-lg my-6">v-model is the value of el-option that is currently selected.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-select v-model="value" placeholder="Select">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        </el-select>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-button :type="'primary'"&gt;Primary&lt;/el-button&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Disabled option</h1>
+      <p class="p-lg my-6">Set the value of disabled in el-option to true to disable this option.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-select v-model="value" placeholder="Select">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"> </el-option>
+        </el-select>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Outline görünümü için, buton elementinize <code>class="outline"</code> ekleyin. Örnek:
+          <code>&lt;el-button class="outline"&gt;Button&lt;/el-button&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Disabled select</h1>
+      <p class="p-lg my-6">Set disabled of el-select to make it disabled.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-select v-model="value" disabled placeholder="Select">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        </el-select>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Ghost görünümü için, buton elementinize <code>class="ghost"</code> ekleyin. Örnek:
+          <code>&lt;el-button class="ghost"&gt;Button&lt;/el-button&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Clearable single select</h1>
+      <p class="p-lg my-6">Farklı boyutlardaki butonlarımız, çeşitli arayüz ihtiyaçlarına yanıt vermek için tasarlanmıştır.</p>
+      <div class="grid grid-flow-col auto-cols-max items-center gap-4">
+        <el-select v-model="value" clearable placeholder="Select">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        </el-select>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Örnekler:
+          <code>&lt;el-button :size="'large'"&gt;Button&lt;/el-button&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Basic multiple select</h1>
+      <p class="p-lg my-6">Etkileşime kapalı 'disabled' butonlarımız, kullanılamaz durumları göstermek için kullanılır.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
+        <el-select v-model="value1" multiple placeholder="Select">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        </el-select>
+        <el-select v-model="value2" multiple collapse-tags placeholder="Select" type="primary">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        </el-select>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-red-600 bg-red-100">
+        <p class="text-xs">
+          Butonu devre dışı bırakmak için, <code>disabled</code> özelliğini ekleyin. Örnek:
+          <code>&lt;el-button disabled&gt;Button&lt;/el-button&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Custom template</h1>
+      <p class="p-lg my-6">
+        İkonlarla zenginleştirilmiş butonlarımız, görsel bir ipucu sunar ve kullanıcı deneyimini artırır. Tüm ikonlarımızın listesini görmek için
+        <nuxt-link to="/icons" class="text-blue-600 hover:underline">buraya tıklayın</nuxt-link>.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-select v-model="value" placeholder="Select">
+          <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
+            <span style="float: left">{{ item.label }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
+          </el-option>
+        </el-select>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Örnekler:
+          <code>&lt;el-button type="primary" class="isax-trash"&gt;&lt;/el-button&gt;</code>. Sağda ikon için <code>class="icon-right"</code> ekleyin.
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Grouping</h1>
+      <p class="p-lg my-6">Display options in groups.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-select v-model="value" placeholder="Select">
+          <el-option-group v-for="group in groups" :key="group.label" :label="group.label">
+            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-option-group>
+        </el-select>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">Buton grupları için <code>&lt;el-button-group&gt;</code> kullanın.</p>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusButtonSample',
+  data() {
+    return {
+      cities: [
+        {
+          value: 'Beijing',
+          label: 'Beijing',
+        },
+        {
+          value: 'Shanghai',
+          label: 'Shanghai',
+        },
+        {
+          value: 'Nanjing',
+          label: 'Nanjing',
+        },
+        {
+          value: 'Chengdu',
+          label: 'Chengdu',
+        },
+        {
+          value: 'Shenzhen',
+          label: 'Shenzhen',
+        },
+        {
+          value: 'Guangzhou',
+          label: 'Guangzhou',
+        },
+      ],
+      groups: [
+        {
+          label: 'Popular cities',
+          options: [
+            {
+              value: 'Shanghai',
+              label: 'Shanghai',
+            },
+            {
+              value: 'Beijing',
+              label: 'Beijing',
+            },
+          ],
+        },
+        {
+          label: 'City name',
+          options: [
+            {
+              value: 'Chengdu',
+              label: 'Chengdu',
+            },
+            {
+              value: 'Shenzhen',
+              label: 'Shenzhen',
+            },
+            {
+              value: 'Guangzhou',
+              label: 'Guangzhou',
+            },
+            {
+              value: 'Dalian',
+              label: 'Dalian',
+            },
+          ],
+        },
+      ],
+      options: [
+        {
+          value: 'Option1',
+          label: 'Option1',
+        },
+        {
+          value: 'Option2',
+          label: 'Option2',
+          disabled: true,
+        },
+        {
+          value: 'Option3',
+          label: 'Option3',
+        },
+        {
+          value: 'Option4',
+          label: 'Option4',
+        },
+        {
+          value: 'Option5',
+          label: 'Option5',
+        },
+      ],
+      value: '',
+      value1: [],
+      value2: [],
+    };
+  },
+  computed: {
+    gridSize() {
+      const grids = {
+        5: 'grid-cols-5',
+        6: 'grid-cols-6',
+        7: 'grid-cols-7',
+        8: 'grid-cols-8',
+      };
+      return grids;
+    },
+  },
+});
+</script>

package/components-ts/ThemeTable.vue

@@ -0,0 +1,211 @@
+<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>
+</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/ThemeTag.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Basic</h1>
+      <p class="p-lg my-6">
+        Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-tag :disable-transitions="true">Tag 1</el-tag>
+        <el-tag type="success">Tag 2</el-tag>
+        <el-tag type="info">Tag 3</el-tag>
+        <el-tag type="warning">Tag 4</el-tag>
+        <el-tag type="danger">Tag 5</el-tag>
+      </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>Removable</h1>
+      <p class="p-lg my-6">
+        Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
+          {{ tag.name }}
+        </el-tag>
+      </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>Sizes</h1>
+      <p class="p-lg my-6">Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-tag>Default</el-tag>
+        <el-tag size="large">Large</el-tag>
+        <el-tag size="medium">Medium</el-tag>
+        <el-tag size="small">Small</el-tag>
+        <el-tag size="mini">Mini</el-tag>
+      </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>Edit Dynamically</h1>
+      <p class="p-lg my-6">You can use the close event to add and remove tag dynamically.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="true" @close="handleClose(tag)">
+          {{ tag }}
+        </el-tag>
+        <el-input
+          class="input-new-tag"
+          v-if="inputVisible"
+          v-model="inputValue"
+          ref="saveTagInput"
+          size="mini"
+          @keyup.enter.native="handleInputConfirm"
+          @blur="handleInputConfirm"
+        >
+        </el-input>
+        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+      </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',
+  computed: {
+    gridSize() {
+      const grids = {
+        5: 'grid-cols-5',
+        6: 'grid-cols-6',
+        7: 'grid-cols-7',
+        8: 'grid-cols-8',
+      };
+      return grids;
+    },
+  },
+  data() {
+    return {
+      dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
+      inputVisible: false,
+      inputValue: '',
+      tags: [
+        { name: 'Tag 1', type: '' },
+        { name: 'Tag 2', type: 'success' },
+        { name: 'Tag 3', type: 'info' },
+        { name: 'Tag 4', type: 'warning' },
+        { name: 'Tag 5', type: 'danger' },
+      ],
+      items: [
+        { type: '', label: 'Tag 1' },
+        { type: 'success', label: 'Tag 2' },
+        { type: 'info', label: 'Tag 3' },
+        { type: 'danger', label: 'Tag 4' },
+        { type: 'warning', label: 'Tag 5' },
+      ],
+    };
+  },
+  methods: {
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+    },
+
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick((_) => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        this.dynamicTags.push(inputValue);
+      }
+      this.inputVisible = false;
+      this.inputValue = '';
+    },
+  },
+});
+</script>