@timus-networks/theme 1.0.21 → 1.0.24

package/components-ts/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 lang="ts">
@@ -157,11 +60,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: '',
@@ -169,37 +69,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'),
-            }),
-          },
-        ],
       },
     };
   },
@@ -207,9 +76,7 @@ export default Vue.extend({
     showAgreementDialog(type: string) {
       console.log('agreement: ', type);
     },
-    submit() {
-      this.$emit('submit', this.form);
-    },
+    submit() {},
     onSubmit() {
       console.log('submit!');
     },

package/components-ts/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-ts/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-ts/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-ts/ThemeRadio.vue

@@ -0,0 +1,127 @@
+<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>
+  </div>
+</template>
+<script lang="ts">
+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: string) {
+      this.checkedCities = val ? cityOptions : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value: string[]) {
+      let 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>