@timus-networks/theme 1.0.184 → 2.0.16

package/components-ts/ThemeDialog.vue

@@ -1,49 +0,0 @@
-<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">
-        <el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
-        <el-dialog v-model:visible="dialogVisible" title="Tips" :before-close="handleClose">
-          <span>This is a message</span>
-          <template #footer>
-            <span class="dialog-footer">
-              <el-button @click="dialogVisible = false">Cancel</el-button>
-              <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
-            </span>
-          </template>
-        </el-dialog>
-      </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>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  data() {
-    return {
-      dialogVisible: false,
-    };
-  },
-  methods: {
-    handleClose(done) {
-      this.$confirm('Are you sure to close this dialog?')
-        .then((_) => {
-          done();
-        })
-        .catch((_) => {});
-    },
-  },
-});
-</script>

package/components-ts/ThemeForm.vue

@@ -1,137 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <h1>Form</h1>
-
-    <section class="flex gap-8 flex-col">
-      <h2>Etiket Konumu: {{ labelPosition }}</h2>
-      <div class="p-4 border-l-4 border-info-600 bg-info-100">
-        Birkaç custom class ekledim. <b>`class='bordered'`</b> eklerseniz &lt;el-form class="bordered"> itemlar arasında border çıkar, `info` derseniz
-        info tipinde bir forma dönüşür (title ve content daha soft renkte oluşur, ayrıca content sağa yaslı olur), `info left` eklerseniz itemlar sola
-        yaslı çıkar.
-      </div>
-      <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-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>
-      <div class="grid grid-flow-col">
-        <el-form
-          ref="ruleForm"
-          :model="ruleForm"
-          :rules="rules"
-          label-width="150px"
-          class="bordered info"
-          :label-position="labelPosition"
-          size="mini"
-        >
-          <el-form-item label="Activity name" prop="name">
-            <el-input v-model="ruleForm.name" />
-          </el-form-item>
-          <el-form-item label="Activity zone" prop="region">
-            <el-select v-model="ruleForm.region" placeholder="Activity zone">
-              <el-option label="Zone one" value="shanghai" />
-              <el-option label="Zone two" value="beijing" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="Activity time" required class="form-content-left">
-            <el-date-picker v-model="ruleForm.date1" type="date" placeholder="Pick a date" style="width: 100%" />
-            <el-time-picker v-model="ruleForm.date2" placeholder="Pick a time" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="Instant delivery" prop="delivery">
-            <el-switch v-model="ruleForm.delivery" />
-          </el-form-item>
-          <el-form-item label="Activity type" prop="type">
-            <el-checkbox-group v-model="ruleForm.type">
-              <el-checkbox label="Online activities" name="type" />
-              <el-checkbox label="Promotion activities" name="type" />
-              <el-checkbox label="Offline activities" name="type" />
-              <el-checkbox label="Simple brand exposure" name="type" />
-            </el-checkbox-group>
-          </el-form-item>
-          <el-form-item label="Resources" prop="resource">
-            <el-radio-group v-model="ruleForm.resource">
-              <el-radio label="Sponsorship" />
-              <el-radio label="Venue" />
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="Activity form" prop="desc">
-            <el-input v-model="ruleForm.desc" type="textarea" />
-          </el-form-item>
-          <el-form-item class="form-content-left">
-            <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
-            <el-button @click="resetForm('ruleForm')">Reset</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-    </section>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
-
-export default defineComponent({
-  data() {
-    return {
-      labelPosition: 'right',
-      count: '9',
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-      },
-      ruleForm: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: '',
-      },
-      rules: {
-        name: [
-          { required: true, message: 'Please input Activity name', trigger: 'blur' },
-          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
-        ],
-        region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
-        date1: [{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }],
-        date2: [{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }],
-        type: [{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }],
-        resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
-        desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
-      },
-    };
-  },
-  methods: {
-    showAgreementDialog(type: string) {
-      console.log('agreement: ', type);
-    },
-    submit() {},
-    onSubmit() {
-      console.log('submit!');
-    },
-    submitForm(formName: any) {
-      console.log('submit');
-    },
-    resetForm(formName: any): void {
-      console.log('reset');
-    },
-  },
-});
-</script>

package/components-ts/ThemeInformation.vue

@@ -1,127 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Custom Tag</h1>
-      <p class="p-lg my-6">Standart metin girişi için temel <code>el-input</code> bileşenini kullanabilirsiniz.</p>
-      <div class="flex gap-4">
-        <div class="el-custom-tag">
-          Ahmet Polat MacBook Pro, Ahmet Fatih Sez...
-          <span class="suffix">23</span>
-        </div>
-
-        <div class="el-custom-tag">
-          Ahmet Polat MacBook Pro, Ahmet Fatih Sez...
-          <span class="suffix">23</span>
-        </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=&quot;el-custom-tag&quot;&gt;Ahmet Polat MacBook Pro, Ahmet Fatih Sez...&lt;span
-            class=&quot;suffix&quot;&gt;23&lt;/span&gt;&lt;/div&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="flex gap-4">
-        <div class="el-information">
-          <div class="title">Text</div>
-          <div class="description">Description</div>
-        </div>
-
-        <div class="el-information vertical">
-          <div class="title">Text</div>
-          <div class="description">Description</div>
-        </div>
-
-        <div class="el-information">
-          <div class="title">Text</div>
-          <div class="description">Description</div>
-        </div>
-
-        <div class="el-information">
-          <div class="title">Text</div>
-          <div class="description">Description</div>
-        </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=&quot;information&quot;&gt;&lt;div class=&quot;title&quot;&gt;Text&lt;/div&gt;&lt;div
-            class=&quot;description&quot;&gt;Description&lt;/div&gt;&lt;/div&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TimusButtonSample',
-  data() {
-    return {
-      value1: true,
-      value2: true,
-    };
-  },
-  computed: {
-    gridSize() {
-      const grids = {
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-      };
-
-      return grids;
-    },
-  },
-  mounted() {
-    this.links = this.loadAll();
-  },
-  methods: {
-    querySearch(queryString, cb) {
-      const { links } = this;
-      const results = queryString ? links.filter(this.createFilter(queryString)) : links;
-
-      // call callback function to return suggestions
-      cb(results);
-    },
-    querySearchAsync(queryString, cb) {
-      const { links } = this;
-      const results = queryString ? links.filter(this.createFilter(queryString)) : links;
-
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => {
-        cb(results);
-      }, 3000 * Math.random());
-    },
-    createFilter(queryString) {
-      return (link) => 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);
-    },
-  },
-});
-</script>

package/components-ts/ThemeInputNumbers.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Controls Position</h1>
-      <p class="p-lg my-6">Bu örnek, farklı boyutlarda ve konfigürasyonlarda bir sayı giriş bileşeni olan el-input-number'ı göstermektedir.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
-        <el-input-number v-model="input" controls-position="right" disabled @change="handleChange" />
-        <el-input-number v-model="input" size="large" controls-position="right" @change="handleChange" />
-        <el-input-number v-model="input" size="medium" controls-position="right" @change="handleChange" />
-        <el-input-number v-model="input" size="small" controls-position="right" @change="handleChange" />
-        <el-input-number v-model="input" size="mini" controls-position="right" @change="handleChange" />
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          <code>
-            &lt;el-input-number v-model=&quot;input&quot; size=&quot;large&quot; controls-position=&quot;right&quot;
-            @change=&quot;handleChange&quot;&gt;&lt;/el-input-number&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Basic usage</h1>
-      <p class="p-lg my-6">Bu örnek, minimum ve maksimum değerlerle sınırlı bir el-input-number bileşenini göstermektedir.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4 items-center">
-        <el-input-number v-model="num" :min="1" :max="10000" disabled @change="handleChange" />
-        <el-input-number v-model="num" size="large" :min="1" :max="10000" @change="handleChange" />
-        <el-input-number v-model="num" size="medium" :min="1" :max="10000" @change="handleChange" />
-        <el-input-number v-model="num" size="small" :min="1" :max="10000" @change="handleChange" />
-        <el-input-number v-model="num" size="mini" :min="1" :max="10000" @change="handleChange" />
-      </div>
-      <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
-        <p class="text-xs">
-          <code>
-            &lt;el-input-number v-model=&quot;num&quot; @change=&quot;handleChange&quot; :min=&quot;1&quot;
-            :max=&quot;10000&quot;&gt;&lt;/el-input-number&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TimusButtonSample',
-  data() {
-    return {
-      input: 3532,
-      num: 213,
-    };
-  },
-  computed: {
-    gridSize() {
-      const grids = {
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-      };
-
-      return grids;
-    },
-  },
-  methods: {
-    handleChange(value) {
-      console.log(value);
-    },
-  },
-});
-</script>