@timus-networks/theme 1.0.21 → 1.0.24

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,245 @@
+<template>
+    <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;
+        },
+    },
+    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>