@timus-networks/theme 1.0.21 → 1.0.24

package/components-js/ThemeCheckbox.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <h1>Checkbox</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-checkbox v-model="checked">Option</el-checkbox>
+        <el-checkbox :value="true" disabled>selected & disabled</el-checkbox>
+        <el-checkbox :value="false" disabled>unselected & disabled</el-checkbox>
+      </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,
+            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/ThemeForm.vue

@@ -1,153 +1,56 @@
 <template>
-  <div>
-    <section>
-      <h1>Checkbox</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-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 class="pt-8 pb-16 flex gap-12 flex-col">
+    <h1>Form</h1>
 
-      <el-checkbox-group v-model="checkboxGroup1">
-        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
-      </el-checkbox-group>
-
-      <el-checkbox-group v-model="checkboxGroup1" size="mini" disabled>
-        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
-      </el-checkbox-group>
-
-      <el-checkbox-group v-model="checkboxGroup1" size="small">
-        <el-checkbox label="Option1" border></el-checkbox>
-        <el-checkbox label="Option2" border disabled></el-checkbox>
-      </el-checkbox-group>
-
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
+    <section class="flex gap-8 flex-col">
+      <h2>Etiket Konumu: {{ labelPosition }}</h2>
+      <el-radio-group v-model="labelPosition" size="small">
+        <el-radio-button label="left">Sol</el-radio-button>
+        <el-radio-button label="right">Sağ</el-radio-button>
+        <el-radio-button label="top">Üst</el-radio-button>
+      </el-radio-group>
+      <p class="p-lg-c">Form elemanlarının etiketlerinin konumunu belirlemek için kullanılır. Etiketler sol, sağ veya üst tarafında olabilir.</p>
+      <div class="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
-          >
+          <code>
+            &lt;el-form :model="sizeForm" label-width="120px" label-position="{{ labelPosition }}">&lt;el-form-item label="Title">&lt;el-input
+            v-model="form.name">&lt;/el-input>&lt;/el-form-item>&lt;/el-form>
+          </code>
         </p>
       </div>
-    </section>
-
-    <el-time-select
-      v-model="time"
-      :picker-options="{
-        start: '08:30',
-        step: '00:15',
-        end: '18:30',
-      }"
-      placeholder="Select time"
-    >
-    </el-time-select>
-    <el-time-picker
-      v-model="time"
-      :picker-options="{
-        selectableRange: '18:30:00 - 20:30:00',
-      }"
-      placeholder="Arbitrary time"
-    >
-    </el-time-picker>
-    <el-time-picker
-      arrow-control
-      v-model="time"
-      :picker-options="{
-        selectableRange: '18:30:00 - 20:30:00',
-      }"
-      placeholder="Arbitrary time"
-    >
-    </el-time-picker>
-    <el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
-      <el-form-item label="Activity name bazen uzun olabilir">
-        <el-input v-model="sizeForm.name"></el-input>
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="sizeForm.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai"></el-option>
-          <el-option label="Zone two" value="beijing"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%"></el-date-picker>
-        </el-col>
-        <el-col class="line" :span="2">-</el-col>
-        <el-col :span="11">
-          <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%"></el-time-picker>
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="sizeForm.type">
-          <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
-          <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="sizeForm.resource" size="medium">
-          <el-radio border label="Sponsor"></el-radio>
-          <el-radio border label="Venue"></el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item size="large">
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button>Cancel</el-button>
-      </el-form-item>
-    </el-form>
-    <el-form
-      data-testid="pages-login-gczfftvrml"
-      :rules="rules"
-      ref="form"
-      :model="form"
-      label-position="left"
-      label-width="120px"
-      @submit.native.prevent="submit"
-    >
-      <el-form-item data-testid="pages-login-irbdfwxfbt" :label="$t('login.email')" prop="email">
-        <el-input v-model="form.email" :disabled="loading ? 'disabled' : false" data-testid="login-email-input"></el-input>
-      </el-form-item>
-      <el-form-item data-testid="pages-login-brtpgzfwqb" :label="$t('login.password')" prop="password">
-        <el-input
-          data-testid="pages-login-niigwirnsa"
-          type="password"
-          autocomplete="off"
-          v-model="form.password"
-          :disabled="loading ? 'disabled' : false"
-          show-password
-        ></el-input>
-      </el-form-item>
-      <el-row data-testid="pages-login-leusdzih">
-        <el-col data-testid="pages-login-wakdcwpdgr" :span="12">
-          <el-checkbox v-model="form.remember" data-testid="login-remember-me-checkbox">{{ $t('login.remember_me') }}</el-checkbox>
-        </el-col>
-        <el-col data-testid="pages-login-lngmwepdom" :span="12">
-          <nuxt-link to="/forgot-password" data-testid="login-forgot-password">{{ $t('login.forgot_password') }}</nuxt-link>
-        </el-col>
-      </el-row>
-      <div data-testid="pages-login-labwsipjet" style="margin-top: 10px; color: grey; font-size: 12px; text-align: left">
-        {{ $t('register.by_register_text') }}
-        <b class="agreement_text" @click="showAgreementDialog('privacy_policy')" data-testid="register-terms-of-use">{{
-          $t('register.privacy_policy')
-        }}</b>
-        {{ $t('messages.and') }}
-        <b class="agreement_text" @click="showAgreementDialog('terms_of_use')" data-testid="register-terms-of-use">{{
-          $config.TP === 'berqnet' ? $t('register.terms_of_use') : $t('register.terms_of_service')
-        }}</b>
-        {{ $t('register.by_register_text2') }}
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-form ref="form" :model="form" label-width="130px" class="gap-4 flex flex-col" :label-position="labelPosition">
+          <el-form-item label="Aktivite Adı">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="Aktivite Bölgesi">
+            <el-select v-model="form.region" placeholder="Lütfen bölgenizi seçin" class="w-full">
+              <el-option label="Bölge Bir" value="shanghai"></el-option>
+              <el-option label="Bölge İki" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="Aktivite Zamanı">
+            <el-col :span="11">
+              <el-date-picker type="date" placeholder="Tarih seçin" v-model="form.date1" style="width: 100%"></el-date-picker>
+            </el-col>
+            <el-col class="text-center" :span="1">-</el-col>
+            <el-col :span="12">
+              <el-time-picker placeholder="Saat seçin" v-model="form.date2" style="width: 100%"></el-time-picker>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="Kaynaklar">
+            <el-radio-group v-model="form.resource" size="medium" class="flex gap-4">
+              <el-radio label="Sponsor"></el-radio>
+              <el-radio label="Mekan"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="outline">İptal Et</el-button>
+            <el-button type="primary" @click="onSubmit">Oluştur</el-button>
+          </el-form-item>
+        </el-form>
       </div>
-      <el-form-item data-testid="pages-login-lunbdhbztj">
-        <el-button type="danger" native-type="submit" :loading="loading" data-testid="login-continue">{{ $t('login.continue') }}</el-button>
-        <br />
-        <el-button @click="$router.push('/register')" type="primary" data-testid="login-create-account" :loading="loading">{{
-          $t('login.register')
-        }}</el-button>
-      </el-form-item>
-    </el-form>
+    </section>
   </div>
 </template>
 <script>import Vue from 'vue';
@@ -155,11 +58,8 @@ const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
 export default Vue.extend({
     data() {
         return {
-            checkboxGroup1: ['Shanghai'],
-            cities: cityOptions,
-            checkList: ['selected and disabled', 'Option A'],
-            time: '',
-            sizeForm: {
+            labelPosition: 'right',
+            form: {
                 name: '',
                 region: '',
                 date1: '',
@@ -167,36 +67,6 @@ export default Vue.extend({
                 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'),
-                        }),
-                    },
-                ],
             },
         };
     },
@@ -204,9 +74,7 @@ export default Vue.extend({
         showAgreementDialog(type) {
             console.log('agreement: ', type);
         },
-        submit() {
-            this.$emit('submit', this.form);
-        },
+        submit() { },
         onSubmit() {
             console.log('submit!');
         },

package/components-js/ThemeInputs.vue

@@ -1,56 +1,5 @@
 <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"
-        class="danger"
-      >
-      </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>

package/components-js/ThemeLink.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="pt-8 pb-16 flex gap-12 flex-col">
+    <section>
+      <h1>Link</h1>
+      <p class="p-lg my-6">
+        `el-link` bileşeni, sayfadaki metni veya bağlantıyı temsil eder ve stil ve davranışlarını özelleştirmenize olanak tanır.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-link href="https://element.eleme.io" target="_blank">default</el-link>
+        <el-link :type="item" v-for="(item, index) in colors" :key="index">{{ item }}</el-link>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-link type="primary"&gt;Bağlantı&lt;/el-link&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Nuxt Link ile Kullanım</h1>
+      <p class="p-lg my-6">El Link bileşenini Nuxt Link ile kullanabilirsiniz. Bu, Nuxt.js projelerinde sayfa geçişlerini kolaylaştırır.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <NuxtLink to="/" v-for="(item, index) in colors" :key="index">
+          <el-link :type="item">Router: {{ item }}</el-link>
+        </NuxtLink>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;NuxtLink to="/"&gt;&lt;el-link type="primary"&gt;Bağlantı&lt;/el-link&gt;&lt;/NuxtLink&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Devre Dışı Bırakılmış Durum</h1>
+      <p class="p-lg my-6">El Link bileşenini devre dışı bırakmak için <code>disabled</code> özelliğini kullanabilirsiniz.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-link disabled>default</el-link>
+        <el-link :type="item" v-for="(item, index) in colors" :key="index" disabled>{{ item }}</el-link>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-link disabled&gt;Devre Dışı&lt;/el-link&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>Alt Çizgi</h1>
+      <p class="p-lg my-6">
+        El Link bileşeninin alt çizgisini göstermek veya gizlemek için <code>:underline="false"</code> özelliğini kullanabilirsiniz.
+      </p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-link type="primary" :underline="false">Alt Çizgi Yok</el-link>
+        <el-link type="primary">Alt Çizgiyle</el-link>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-link :underline="false"&gt;Alt Çizgi Yok&lt;/el-link&gt;</code>
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <h1>İkon</h1>
+      <p class="p-lg my-6">El Link bileşeni, metin veya bağlantı ile birlikte ikonlar eklemenize olanak tanır.</p>
+      <div class="grid grid-flow-col auto-cols-max gap-4">
+        <el-link type="primary" icon="el-icon-edit">Düzenle</el-link>
+        <el-link type="primary">Onayla<i class="el-icon-view el-icon--right"></i> </el-link>
+      </div>
+      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+        <p class="text-xs">
+          <code>&lt;el-link icon="el-icon-edit"&gt;Düzenle&lt;/el-link&gt;</code>
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'TimusButtonSample',
+  data() {
+    return {
+      colors: ['primary', 'secondary', 'gray', 'info', 'success', 'warning', 'danger'],
+    };
+  },
+});
+</script>

package/components-js/ThemeLogo.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="pt-8 pb-16 flex gap-12 flex-col">
+        <section>
+            <h1>Sizes</h1>
+            <p class="p-md-c my-6">
+                Our logos are available in three sizes: small, medium, and large. To tailor your choice, use the size tags
+                <b>'small', 'medium', 'large'</b> to determine the appropriate size for your needs.
+            </p>
+            <div class="grid grid-flow-col auto-cols-max gap-6 items-center">
+                <div class="logo-icon-small"></div>
+                <div class="logo-icon-medium"></div>
+                <div class="logo-icon-large"></div>
+                <el-divider direction="vertical" content-position="center"></el-divider>
+                <div class="logo-small"></div>
+                <div class="logo-medium"></div>
+                <div class="logo-large"></div>
+            </div>
+            <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+                <p class="text-xs">
+                    <code>&lt;div class="logo-medium"&gt;&lt;/div&gt;</code>
+                </p>
+            </div>
+        </section>
+
+        <section>
+            <h1>Types</h1>
+            <p class="p-md-c my-6">
+                There are two different types of logo usage available: <b>"icon"</b> or <b>"logo"</b>. When used as a <b>"logo"</b>, an additional
+                icon along with the word <b>"timus"</b> will be displayed.
+            </p>
+            <div class="grid grid-flow-col auto-cols-max gap-6 items-center">
+                <div class="logo-icon-small"></div>
+                <el-divider direction="vertical" content-position="center"></el-divider>
+                <div class="logo-small"></div>
+            </div>
+            <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
+                <p class="text-xs">
+                    <code>&lt;div class="logo-icon-medium"&gt;&lt;/div&gt; | &lt;div class="logo-medium"&gt;&lt;/div&gt;</code>
+                </p>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.extend({
+    name: 'TimusCascader',
+    data() {
+        return {
+            url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
+            sizeList: ['xlarge', 'large', 'medium', 'small', 'xsmall'],
+        };
+    },
+});
+</script>

package/components-js/ThemeRadio.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;