@timus-networks/theme 1.0.183 → 2.0.0

package/components-ts/ThemeRadio.vue

@@ -1,169 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <h1>Radio</h1>
-
-    <section>
-      <h2>Temel Kullanım</h2>
-      <p class="p-lg-c my-6">El Radio, çok fazla seçeneğe sahip olmamalıdır. Aksi takdirde, Select bileşenini kullanmalısınız.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-radio v-model="radio" :label="0">Seçenek A</el-radio>
-        <el-radio v-model="radio" :label="1">Seçenek B</el-radio>
-        <el-radio v-model="radio" :label="2" disabled>Seçenek C (Devre Dışı)</el-radio>
-        <el-radio :value="false" disabled>Seçili Olmayan ve Devre Dışı</el-radio>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          Örnek Kullanım:
-          <code> &lt;el-radio :value="true" disabled&gt;Seçili & Devre Dışı&lt;/el-radio&gt; </code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h2>Radio group</h2>
-      <p class="p-lg-c my-6">
-        `el-radio-group` ile `el-radio` bileşenini bir araya getirerek bir radyo grubu görüntüleyebilirsiniz. el-radio-group elementinin v-model ile
-        bağlı olduğu bir değişkeni belirleyin ve el-radio içindeki etiket değerini ayarlayın. Ayrıca, mevcut değeri parametre olarak alan bir
-        değişiklik olayı sağlar.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-radio-group v-model="radio">
-          <el-radio :label="3">Seçenek A</el-radio>
-          <el-radio :label="6">Seçenek B</el-radio>
-          <el-radio :label="9">Seçenek C</el-radio>
-        </el-radio-group>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          Örnek Kullanım:
-          <code>
-            &lt;el-radio-group v-model="radio"&gt; &lt;el-radio :label="3"&gt;Seçenek A&lt;/el-radio&gt; &lt;el-radio :label="6"&gt;Seçenek
-            B&lt;/el-radio&gt; &lt;/el-radio-group&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <div>
-        <el-radio-group v-model="radio1">
-          <el-radio-button label="New York" />
-          <el-radio-button label="Washington" />
-          <el-radio-button label="Los Angeles" />
-          <el-radio-button label="Chicago" />
-        </el-radio-group>
-      </div>
-      <div style="margin-top: 20px">
-        <el-radio-group v-model="radio2" size="medium">
-          <el-radio-button label="New York" />
-          <el-radio-button label="Washington" />
-          <el-radio-button label="Los Angeles" />
-          <el-radio-button label="Chicago" />
-        </el-radio-group>
-      </div>
-      <div style="margin-top: 20px">
-        <el-radio-group v-model="radio3" size="small">
-          <el-radio-button label="New York" />
-          <el-radio-button label="Washington" disabled />
-          <el-radio-button label="Los Angeles" />
-          <el-radio-button label="Chicago" />
-        </el-radio-group>
-      </div>
-      <div style="margin-top: 20px">
-        <el-radio-group v-model="radio4" disabled size="mini">
-          <el-radio-button label="New York" />
-          <el-radio-button label="Washington" />
-          <el-radio-button label="Los Angeles" />
-          <el-radio-button label="Chicago" />
-        </el-radio-group>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
-
-export default defineComponent({
-  data() {
-    return {
-      checked: true,
-      radio: 2,
-      radio1: 'New York',
-      radio2: 'New York',
-      radio3: 'New York',
-      radio4: 'New York',
-      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[]) {
-      const 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>

package/components-ts/ThemeSelect.vue

@@ -1,237 +0,0 @@
-<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-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-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-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-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">
-        {{ JSON.stringify(value1) }}
-        <el-select v-model="value1" multiple placeholder="Select" :disabled="false">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-        <el-select v-model="value1" multiple placeholder="Select" :disabled="true">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-        <el-select v-model="value2" multiple collapse-tags placeholder="Select" type="primary" :disabled="true">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </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-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 { defineComponent } from 'vue';
-
-export default defineComponent({
-  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: ['Option2', 'Option4', 'Option5'],
-      value2: ['Option2', 'Option4', 'Option5'],
-    };
-  },
-  computed: {
-    gridSize() {
-      const grids = {
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-      };
-
-      return grids;
-    },
-  },
-});
-</script>