@timus-networks/theme 1.0.8 → 1.0.10

package/components-js/ThemeButtons.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Fill</h1>
+      <p class="p-lg my-6">
+        "Fill" stili butonlar, içeriği tamamen kaplayan renge sahip butonlardır. Bu butonlar, kullanıcının dikkatini çekmek ve önemli eylemleri
+        vurgulamak için idealdir.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max">
+        <el-button :type="item" v-for="(item, index) in colors" :key="index">{{ item }}</el-button>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          Örnek kullanım:
+          <code>&lt;el-button :type="'primary'"&gt;Primary&lt;/el-button&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Outline</h1>
+      <p class="p-lg my-6">Çevresi çizgili ve içi transparan olan 'outline' butonlarımız, daha hafif bir tasarım dili sunar.</p>
+      <div class="grid grid-flow-col auto-cols-max">
+        <el-button :type="item" v-for="(item, index) in colors" :key="index" class="outline" plain>{{ item }}</el-button>
+      </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>Ghost</h1>
+      <p class="p-lg my-6">Hemen hemen şeffaf 'ghost' butonlarımız, minimalist tasarımlar için uygundur ve arka planla uyum sağlar.</p>
+      <div class="grid grid-flow-col auto-cols-max">
+        <el-button :type="item" v-for="(item, index) in colors" :key="index" class="ghost">{{ item }}</el-button>
+      </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>Size</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">
+        <el-button :size="item" v-for="(item, index) in sizes" :key="index" type="primary">{{ item }}</el-button>
+      </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> ya da
+          <code>&lt;el-button :size="'small'"&gt;Button&lt;/el-button&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Disabled</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">
+        <el-button :type="item" v-for="(item, index) in colors" :key="index" disabled>{{ item }}</el-button>
+      </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>Icons</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">
+        <el-button type="primary" class="isax-trash"></el-button>
+        <el-button type="primary" class="isax-chart"></el-button>
+        <el-button type="primary" class="isax-clipboard-text icon-right">icon-right</el-button>
+        <el-button type="primary" :class="item" v-for="(item, index) in icons" :key="index">{{ item }}</el-button>
+      </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>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>
+      <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>
+      </el-button-group>
+      <el-button-group>
+        <el-button type="primary" icon="isax-textalign-justifyleft"></el-button>
+        <el-button type="primary" icon="isax-textalign-center"></el-button>
+        <el-button type="primary" icon="isax-textalign-justifyright"></el-button>
+      </el-button-group>
+      <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 {
+      colors: ['primary', 'secondary', 'gray', 'info', 'success', 'wanring', 'danger'],
+      status: ['outline', 'ghost', 'rounder', 'disabled'],
+      sizes: ['large', 'medium', 'small', 'mini'],
+      icons: ['isax-bag', 'isax-calculator'],
+    };
+  },
+  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/ThemeInputs.vue

@@ -0,0 +1,361 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Date Range Picker</h1>
+      <p class="p-lg my-6">
+        Tarih aralığı seçici, kullanıcının bir başlangıç ve bitiş tarihi seçmesine olanak tanır, bu da planlama ve raporlama işlemleri için idealdir.
+      </p>
+      <el-date-picker
+        v-model="input"
+        type="daterange"
+        align="right"
+        start-placeholder="Start Date"
+        end-placeholder="End Date"
+        default-value="2010-10-01"
+      ></el-date-picker>
+      <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>
+
+    <section>
+      <h1>Time Select</h1>
+      <p class="p-lg my-6">
+        Zaman seçici, kullanıcının belirli bir zaman aralığından bir zaman dilimi seçmesine imkan tanır. Bu, randevu veya rezervasyon gibi zaman
+        belirli işlemler için kullanışlıdır.
+      </p>
+      <el-time-select
+        v-model="input"
+        :picker-options="{
+          start: '08:30',
+          step: '00:15',
+          end: '18:30',
+        }"
+        placeholder="Select time"
+      ></el-time-select>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Zaman seçimi için:
+          <code
+            >&lt;el-time-select v-model="input" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="Select
+            time"&gt;&lt;/el-time-select&gt;</code
+          >
+        </p>
+      </div>
+    </section>
+
+    <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">
+        <el-input placeholder="Please input" v-model="input"></el-input>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          Örnek kullanım:
+          <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">Kullanıcı etkileşimini engellemek için giriş bileşenini devre dışı bırakabilirsiniz.</p>
+      <div class="grid grid-flow-col auto-cols-max">
+        <el-input placeholder="Please input" v-model="input" :disabled="true"> </el-input>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Devre dışı bırakmak için, <code>disabled</code> özelliğini ekleyin. Örnek:
+          <code>&lt;el-input placeholder="Please input" v-model="input" disabled&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Clearable</h1>
+      <p class="p-lg my-6">Kullanıcıların girdikleri metni tek bir tıklamayla silmelerini sağlayan temizlenebilir giriş bileşeni.</p>
+      <div class="grid grid-flow-col auto-cols-max">
+        <el-input placeholder="Please input" v-model="input" clearable> </el-input>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Temizlenebilir bir giriş için, <code>clearable</code> özelliğini ekleyin. Örnek:
+          <code>&lt;el-input placeholder="Please input" v-model="input" clearable&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Password</h1>
+      <p class="p-lg my-6">Şifre girişi için kullanılan giriş bileşeni, metni gizler ve şifre gösterme/ gizleme seçeneği sunar.</p>
+      <div class="grid grid-flow-col auto-cols-max items-center">
+        <el-input placeholder="Please input password" v-model="input" show-password></el-input>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Örnekler:
+          <code>&lt;el-input placeholder="Please input password" v-model="input" show-password&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Input with icon</h1>
+      <p class="p-lg my-6">İkonlarla zenginleştirilmiş giriş bileşenleri, görsel bir ipucu sunar ve kullanıcı deneyimini artırır.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-input placeholder="Type something" prefix-icon="el-icon-search" v-model="input2"> </el-input>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Bir ikon ile giriş için, <code>prefix-icon</code> veya <code>suffix-icon</code> özelliklerini kullanın. Örnek:
+          <code>&lt;el-input placeholder="Type something" prefix-icon="el-icon-search" v-model="input2"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Textarea</h1>
+      <p class="p-lg my-6">Metin alanı girişi, birden fazla satırı destekleyen ve daha büyük metin bloklarını girmek için kullanılır.</p>
+      <el-input type="textarea" :rows="2" placeholder="Please input" v-model="textarea"></el-input>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Textarea kullanımı için:
+          <code>&lt;el-input type="textarea" :rows="2" placeholder="Please input" v-model="textarea"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Autosize Textarea</h1>
+      <p class="p-lg my-6">Otomatik boyutlandırma özelliği, içeriğe bağlı olarak yüksekliği otomatik olarak ayarlayan bir metin alanıdır.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-input type="textarea" autosize placeholder="Please input" v-model="textarea1"></el-input>
+        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Please input" v-model="textarea2"></el-input>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Autosize Textarea için:
+          <code>&lt;el-input type="textarea" autosize placeholder="Please input" v-model="textarea1"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Mixed input</h1>
+      <p class="p-lg my-6">Ön ek veya son ek içeren giriş bileşenleri, giriş alanlarına ekstra içerik ekleyerek daha açıklayıcı olabilir.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-input placeholder="Please input" v-model="input1">
+          <template slot="prepend">Http://</template>
+        </el-input>
+        <el-input placeholder="Please input" v-model="input2">
+          <template slot="append">.com</template>
+        </el-input>
+        <el-input placeholder="Please input" v-model="input3" class="input-with-select">
+          <el-select v-model="select" slot="prepend" placeholder="Select">
+            <el-option label="Restaurant" value="1"></el-option>
+            <el-option label="Order No." value="2"></el-option>
+            <el-option label="Tel" value="3"></el-option>
+          </el-select>
+          <el-button slot="append" icon="el-icon-search"></el-button>
+        </el-input>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Ön ek veya son ek içeren giriş bileşenleri için:
+          <code>&lt;el-input placeholder="Please input"&gt;&lt;template slot="prepend"&gt;Http://&lt;/template&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Sizes</h1>
+      <p class="p-lg my-6">Farklı boyutlardaki giriş bileşenleri, ç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-input size="large" placeholder="Please Input" v-model="input1"> </el-input>
+        <el-input size="medium" placeholder="Please Input" v-model="input2"> </el-input>
+        <el-input size="small" placeholder="Please Input" v-model="input3"> </el-input>
+        <el-input size="mini" placeholder="Please Input" v-model="input4"> </el-input>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Farklı boyutlardaki giriş bileşenleri için:
+          <code>&lt;el-input size="large" placeholder="Please Input" v-model="input1"&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Autocomplete</h1>
+      <p class="p-lg my-6">Otomatik tamamlama bileşeni, kullanıcıların yazarken öneriler almasını sağlar ve verimliliği artırır.</p>
+      <div class="grid grid-flow-col auto-cols-max items-center gap-4">
+        <el-autocomplete
+          class="inline-input"
+          v-model="state1"
+          :fetch-suggestions="querySearch"
+          placeholder="Please Input"
+          @select="handleSelect"
+        ></el-autocomplete>
+        <el-autocomplete
+          class="inline-input"
+          v-model="state2"
+          :fetch-suggestions="querySearch"
+          placeholder="Please Input"
+          :trigger-on-focus="false"
+          @select="handleSelect"
+        ></el-autocomplete>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Otomatik tamamlama bileşeni için:
+          <code>
+            &lt;el-autocomplete v-model="state1" :fetch-suggestions="querySearch" placeholder="Please Input"
+            @select="handleSelect"&gt;&lt;/el-autocomplete&gt;
+          </code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Custom template</h1>
+      <p class="p-lg my-6">Otomatik tamamlama bileşeni, özel şablonlar ile özelleştirilebilir, böylece daha fazla bilgi gösterebilirsiniz.</p>
+      <el-autocomplete
+        popper-class="my-autocomplete"
+        v-model="state"
+        :fetch-suggestions="querySearch"
+        placeholder="Please input"
+        @select="handleSelect"
+      >
+        <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"></i>
+        <template slot-scope="{ item }">
+          <div class="value">{{ item.value }}</div>
+          <span class="link">{{ item.link }}</span>
+        </template>
+      </el-autocomplete>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Özel şablon kullanımı için:
+          <code>
+            &lt;el-autocomplete v-model="state" :fetch-suggestions="querySearch" @select="handleSelect"&gt;&lt;!-- slotlar
+            --&gt;&lt;/el-autocomplete&gt;
+          </code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Remote search</h1>
+      <p class="p-lg my-6">Uzaktan arama ile otomatik tamamlama, sunucu tarafında gerçek zamanlı arama sonuçları getirir.</p>
+      <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Please input" @select="handleSelect"></el-autocomplete>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Uzaktan arama için:
+          <code>
+            &lt;el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Please input"
+            @select="handleSelect"&gt;&lt;/el-autocomplete&gt;
+          </code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Limit length</h1>
+      <p class="p-lg my-6">Uzunluk sınırı, kullanıcıların girebileceği karakter sayısını sınırlar ve aşırı uzun girişleri önler.</p>
+      <div class="grid grid-flow-col auto-cols-max items-center gap-4">
+        <el-input type="text" placeholder="Please input" v-model="text" maxlength="10" show-word-limit></el-input>
+        <el-input type="textarea" placeholder="Please input" v-model="textarea" maxlength="30" show-word-limit></el-input>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+        <p class="text-xs">
+          Uzunluk sınırı için:
+          <code>&lt;el-input type="text" placeholder="Please input" v-model="text" maxlength="10" show-word-limit&gt;&lt;/el-input&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusButtonSample',
+  data() {
+    return {
+      inputNumber: '',
+      input: '',
+      input1: '',
+      input2: '',
+      input3: '',
+      input4: '',
+      select: '',
+      links: [],
+      state: '',
+      state1: '',
+      state2: '',
+      text: '',
+      textarea: '',
+      textarea1: '',
+      textarea2: '',
+      timeout: null,
+    };
+  },
+  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/ThemeTypo.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="mb-16">
+    <h1 class="mt-12">Headins</h1>
+    <p class="p-lg my-6">Aşağıda heading örnekleri yer almaktadır.</p>
+
+    <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-4 text-gray-500">
+      <div class="h2 text-gray-600">Class Name</div>
+      <div class="h2 text-gray-600">FontSize</div>
+      <div class="h2 text-gray-600 hidden md:block">LineHeight</div>
+      <template v-for="(item, index) in headingClasses">
+        <component :is="item.name" class="flex items-center text-gray-800">{{ item.name }}</component>
+        <div class="flex items-center">{{ item.fontSize }}</div>
+        <div class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
+      </template>
+    </div>
+
+    <h1 class="mt-12">Others</h1>
+    <p class="p-lg my-6">Aşağıda paragraflar ve diğer html elementleri için kullanılabilecek ön tanımlı class nameler yer almaktadır.</p>
+
+    <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-4 text-gray-500">
+      <div class="h2 text-gray-600">Class Name</div>
+      <div class="h2 text-gray-600">FontSize</div>
+      <div class="h2 text-gray-600 hidden md:block">LineHeight</div>
+      <template v-for="(item, index) in helperClasses">
+        <div class="flex items-center text-gray-800" :class="item.name">{{ item.name }}</div>
+        <div class="flex items-center">{{ item.fontSize }}</div>
+        <div class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusTypoSample',
+  data() {
+    return {
+      headingClasses: [
+        { name: 'h1', fontSize: '24px', lineHeight: '30px' },
+        { name: 'h2', fontSize: '20px', lineHeight: '24px' },
+        { name: 'h3', fontSize: '18px', lineHeight: '22px' },
+        { name: 'h4', fontSize: '14px', lineHeight: '18px' },
+      ],
+      helperClasses: [
+        { name: 'p-lg', fontSize: '16px', lineHeight: '18px' },
+        { name: 'p-md', fontSize: '14px', lineHeight: '16px' },
+        { name: 'p-md-c', fontSize: '14px', lineHeight: '24px' },
+        { name: 'p-sm', fontSize: '12px', lineHeight: '14px' },
+        { name: 'p-xs', fontSize: '10px', lineHeight: '14px' },
+        { name: 'p-xxs', fontSize: '8px', lineHeight: '10px' },
+        { name: 'b-md', fontSize: '16px', lineHeight: '24px' },
+        { name: 'b-lg', fontSize: '16px', lineHeight: '24px' },
+        { name: 'b-sm', fontSize: '14px', lineHeight: '18px' },
+        { name: 'b-md-u', fontSize: '16px', lineHeight: '24px' },
+        { name: 'b-lg-u', fontSize: '16px', lineHeight: '24px' },
+        { name: 'b-sm-u', fontSize: '14px', lineHeight: '18px' },
+      ],
+    };
+  },
+});
+</script>

package/components-js/TimusSamples.vue

@@ -0,0 +1,27 @@
+<template>
+  <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="Task" name="fourth">Task</el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import ThemeInputs from './ThemeInputs.vue';
+
+export default {
+  data() {
+    return {
+      activeName: 'first',
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+  components: { ThemeInputs },
+};
+</script>