@timus-networks/theme 1.0.21 → 1.0.23

package/components-js/ThemeRadio.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <h1>Radio</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-radio v-model="radio" :label="0">Option A</el-radio>
+        <el-radio v-model="radio" :label="1">Option B</el-radio>
+        <el-radio v-model="radio" :label="2" disabled>Option C</el-radio>
+        <el-radio :value="false" disabled>unselected & disabled</el-radio>
+      </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>import Vue from 'vue';
+const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+export default Vue.extend({
+    data() {
+        return {
+            checked: true,
+            radio: 2,
+            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) {
+            this.checkedCities = val ? cityOptions : [];
+            this.isIndeterminate = false;
+        },
+        handleCheckedCitiesChange(value) {
+            let checkedCount = value.length;
+            this.checkAll = checkedCount === this.cities.length;
+            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+        },
+        showAgreementDialog(type) {
+            console.log('agreement: ', type);
+        },
+        submit() {
+            this.$emit('submit', this.form);
+        },
+        onSubmit() {
+            console.log('submit!');
+        },
+    },
+});
+</script>

package/components-js/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-js/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>