@timus-networks/theme 1.0.183 → 2.0.0

package/components-ts/ThemeTag.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Basic</h1>
-      <p class="p-lg my-6">
-        Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-tag :disable-transitions="true">default</el-tag>
-        <el-tag type="success">success</el-tag>
-        <el-tag type="info">info</el-tag>
-        <el-tag type="warning">warning</el-tag>
-        <el-tag type="danger">danger</el-tag>
-        <el-tag type="gray">gray</el-tag>
-        <el-tag type="secondary">secondary</el-tag>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-tag type="gray" size="medium"&gt;content&lt;/el-tag&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Removable</h1>
-      <p class="p-lg my-6">
-        Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
-      </p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
-          {{ tag.name }}
-        </el-tag>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-tag&gt;content&lt;/el-tag&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Sizes</h1>
-      <p class="p-lg my-6">Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-tag>Default</el-tag>
-        <el-tag size="large">Large</el-tag>
-        <el-tag size="medium">Medium</el-tag>
-        <el-tag size="small">Small</el-tag>
-        <el-tag size="mini">Mini</el-tag>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-tag size="medium"&gt;content&lt;/el-tag&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Edit Dynamically</h1>
-      <p class="p-lg my-6">You can use the close event to add and remove tag dynamically.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="true" size="mini" @close="handleClose(tag)">
-          {{ tag }}
-        </el-tag>
-        <el-input
-          v-if="inputVisible"
-          ref="saveTagInput"
-          v-model="inputValue"
-          class="input-new-tag"
-          size="mini"
-          @keyup.enter="handleInputConfirm"
-          @blur="handleInputConfirm"
-        />
-        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-tag&gt;content&lt;/el-tag&gt;</code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TimusButtonSample',
-  data() {
-    return {
-      dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
-      inputVisible: false,
-      inputValue: '',
-      tags: [
-        { name: 'Tag 1', type: '' },
-        { name: 'Tag 2', type: 'success' },
-        { name: 'Tag 3', type: 'info' },
-        { name: 'Tag 4', type: 'warning' },
-        { name: 'Tag 5', type: 'danger' },
-      ],
-      items: [
-        { type: '', label: 'Tag 1' },
-        { type: 'success', label: 'Tag 2' },
-        { type: 'info', label: 'Tag 3' },
-        { type: 'danger', label: 'Tag 4' },
-        { type: 'warning', label: 'Tag 5' },
-      ],
-    };
-  },
-  computed: {
-    gridSize() {
-      const grids = {
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-      };
-
-      return grids;
-    },
-  },
-  methods: {
-    handleClose(tag) {
-      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
-    },
-
-    showInput() {
-      this.inputVisible = true;
-      this.$nextTick((_) => {
-        this.$refs.saveTagInput.$refs.input.focus();
-      });
-    },
-
-    handleInputConfirm() {
-      const { inputValue } = this;
-
-      if (inputValue) {
-        this.dynamicTags.push(inputValue);
-      }
-      this.inputVisible = false;
-      this.inputValue = '';
-    },
-  },
-});
-</script>

package/components-ts/ThemeToggle.vue

@@ -1,123 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <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 gap-4">
-        <el-switch v-model="value1" />
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Custom Color</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 gap-4">
-        <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949" />
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&gt;</code>
-        </p>
-      </div>
-    </section>
-
-    <section>
-      <h1>Text description</h1>
-      <p class="p-lg my-6">You can add active-text and inactive-text attribute to show texts.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-switch v-model="value1" active-text="Pay by month" inactive-text="Pay by year" />
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <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">Standart metin girişi için temel <code>el-input</code> bileşenini kullanabilirsiniz.</p>
-      <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-switch v-model="value1" disabled inactive-text="Pay by year" />
-        <el-switch v-model="value2" disabled inactive-text="Pay by year" />
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>&lt;el-input placeholder="Please input" v-model="input"&gt;&lt;/el-input&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/ThemeTooltip.vue

@@ -1,191 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Tooltip</h1>
-      <p class="p-lg-c my-6">
-        Bu örnek, Element UI tarafından sağlanan <code>el-table</code> bileşenini kullanarak bir veri tablosu oluşturmanın temel bir örneğini
-        göstermektedir. `table-container` ile dışarıya border verildiğini unutmamanızı tavsiye ediyoruz.
-      </p>
-      <div class="flex flex-wrap gap-4">
-        <el-tooltip class="item h-24 outline" effect="dark" content="Top Left prompts info" placement="top-start">
-          <el-button size="large">top-start</el-button>
-        </el-tooltip>
-        <el-tooltip class="item h-24 outline" effect="dark" content="Top Center prompts info" placement="top">
-          <el-button size="large">top</el-button>
-        </el-tooltip>
-        <el-tooltip class="item h-24 outline" effect="dark" content="Top Right prompts info" placement="top-end">
-          <el-button size="large">top-end</el-button>
-        </el-tooltip>
-
-        <el-tooltip class="item h-24 outline" effect="dark" content="Left Top prompts info" placement="left-start">
-          <el-button size="large">left-start</el-button>
-        </el-tooltip>
-        <el-tooltip class="item h-24 outline" effect="dark" content="Left Center prompts info" placement="left">
-          <el-button size="large">left</el-button>
-        </el-tooltip>
-        <el-tooltip class="item h-24 outline" effect="dark" content="Left Bottom prompts info" placement="left-end">
-          <el-button size="large">left-end</el-button>
-        </el-tooltip>
-
-        <el-tooltip class="item h-24 outline" effect="dark" content="Right Top prompts info" placement="right-start">
-          <el-button size="large">right-start</el-button>
-        </el-tooltip>
-        <el-tooltip class="item h-24 outline" effect="dark" content="Right Center prompts info" placement="right">
-          <el-button size="large">right</el-button>
-        </el-tooltip>
-        <el-tooltip class="item h-24 outline" effect="dark" content="Right Bottom prompts info" placement="right-end">
-          <el-button size="large">right-end</el-button>
-        </el-tooltip>
-
-        <el-tooltip class="item h-24 outline" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
-          <el-button size="large">bottom-start</el-button>
-        </el-tooltip>
-        <el-tooltip class="item h-24 outline" effect="dark" content="Bottom Center prompts info" placement="bottom">
-          <el-button size="large">bottom</el-button>
-        </el-tooltip>
-        <el-tooltip class="item h-24 outline" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
-          <el-button size="large">bottom-end</el-button>
-        </el-tooltip>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>
-            &lt;div class="table-container">&lt;el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending'
-            }"&gt;&lt;/el-table&gt;&lt;/div&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ThemeTable',
-  data() {
-    return {
-      multipleSelection: [],
-      currentPage1: 5,
-      currentPage2: 5,
-      currentPage3: 5,
-      currentPage4: 4,
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home',
-        },
-        {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
-        },
-        {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home',
-        },
-        {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
-        },
-        {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
-        },
-        {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home',
-        },
-        {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office',
-        },
-      ],
-    };
-  },
-  computed: {
-    gridSize() {
-      const grids = {
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-      };
-
-      return grids;
-    },
-  },
-  methods: {
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach((row) => {
-          this.$refs.multipleTable.toggleRowSelection(row);
-        });
-      } else {
-        this.$refs.multipleTable.clearSelection();
-      }
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    resetDateFilter() {
-      this.$refs.filterTable.clearFilter('date');
-    },
-    clearFilter() {
-      this.$refs.filterTable.clearFilter();
-    },
-    formatter(row, column) {
-      return row.address;
-    },
-    filterTag(value, row) {
-      return row.tag === value;
-    },
-    filterHandler(value, row, column) {
-      console.log(row, column, value);
-      const { property } = column;
-
-      return row[property] === value;
-    },
-    handleSizeChange(val) {
-      console.log(`${val} items per page`);
-    },
-    handleCurrentChange(val) {
-      console.log(`current page: ${val}`);
-    },
-  },
-});
-</script>

package/components-ts/ThemeTypo.vue

@@ -1,65 +0,0 @@
-<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" :key="item.name + '-heading-' + index + 1" class="flex items-center text-gray-800">{{ item.name }}</component>
-        <div :key="item.name + '-heading-' + index + 2" class="flex items-center">{{ item.fontSize }}</div>
-        <div :key="item.name + '-heading-' + index + 3" 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 :key="item.name + '-helper-' + index + 1" class="flex items-center text-gray-800" :class="item.name">{{ item.name }}</div>
-        <div :key="item.name + '-helper-' + index + 2" class="flex items-center">{{ item.fontSize }}</div>
-        <div :key="item.name + '-helper-' + index + 3" class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TimusTypoSample',
-  data() {
-    return {
-      headingClasses: [
-        { name: 'h1', fontSize: '22px', lineHeight: '30px' },
-        { name: 'h2', fontSize: '20px', lineHeight: '24px' },
-        { name: 'h3', fontSize: '18px', lineHeight: '22px' },
-        { name: 'h4', fontSize: '14px', lineHeight: '18px' },
-        { name: 'h5', fontSize: '12px', lineHeight: '16px' },
-        { name: 'h6', fontSize: '10px', lineHeight: '14px' },
-      ],
-      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-ts/ThemeUpload.vue

@@ -1,92 +0,0 @@
-<template>
-  <div class="pt-8 pb-16 flex gap-12 flex-col">
-    <section>
-      <h1>Basic</h1>
-      <p class="p-lg my-6">
-        Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.
-      </p>
-      <div class="grid grid-flow-col gap-4">
-        <el-upload
-          class="el-upload-container"
-          drag
-          action="https://jsonplaceholder.typicode.com/posts/"
-          :on-preview="handlePreview"
-          :on-remove="handleRemove"
-          :file-list="fileList"
-          multiple
-        >
-          <i class="el-icon-upload" />
-          <!-- <img src="~/assets/images/upload-drop.svg" alt="upload" class="w-[56px] h-[56px]" /> -->
-          <div class="el-upload__text">
-            <span class="title">Drag CSV here</span>
-            <span class="description">or click to browse (5MB Max)</span>
-          </div>
-          <div slot="tip" class="el-upload__tip">
-            Category: Maximum 30 characters. Domain: Valid domain value (wildcard domains are acceptable).You can upload up to 1000 domains at a time.
-            Categories that are not in the system will be created as new custom categories.
-          </div>
-        </el-upload>
-      </div>
-      <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
-        <p class="text-xs">
-          <code>
-            &lt;el-upload class=&quot;el-upload-container&quot; drag multiple&gt;&lt;i class=&quot;el-icon-upload&quot;&gt;&lt;/i&gt;&lt;div
-            class=&quot;el-upload__text&quot;&gt;&lt;span class=&quot;title&quot;&gt;Drop file here or&lt;/span&gt;&lt;span
-            class=&quot;description&quot;&gt;click to upload&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;el-upload__tip&quot;
-            slot=&quot;tip&quot;&gt;description&lt;/div&gt;&lt;/el-upload&gt;
-          </code>
-        </p>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TimusUpload',
-  data() {
-    return {
-      imageUrl: '',
-      fileList: [
-        {
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-        },
-        {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-        },
-      ],
-    };
-  },
-  methods: {
-    handleAvatarSuccess(res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw);
-    },
-    handleChange(file, fileList) {
-      this.fileList = fileList.slice(-3);
-    },
-    handleRemove(file, fileList) {
-      console.log(file, fileList);
-    },
-    handlePreview(file) {
-      console.log(file);
-    },
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg';
-      const isLt2M = file.size / 1024 / 1024 < 2;
-
-      if (!isJPG) {
-        this.$message.error('Avatar picture must be JPG format!');
-      }
-      if (!isLt2M) {
-        this.$message.error('Avatar picture size can not exceed 2MB!');
-      }
-
-      return isJPG && isLt2M;
-    },
-  },
-});
-</script>

package/components-ts/TimusSamples.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="container py-16">
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="Button" name="first"><ThemeButtons /></el-tab-pane>
-      <el-tab-pane label="Typo" name="second"><ThemeTypo /></el-tab-pane>
-      <el-tab-pane label="Input" name="third"><ThemeInputs /></el-tab-pane>
-      <el-tab-pane label="Checkbox" name="fourth"><ThemeCheckbox /></el-tab-pane>
-      <el-tab-pane label="Radio" name="five"><ThemeRadio /></el-tab-pane>
-      <el-tab-pane label="Number" name="six"><ThemeInputNumbers /></el-tab-pane>
-      <el-tab-pane label="Popover & Dropdown" name="seven"><ThemePopover /></el-tab-pane>
-      <el-tab-pane label="Select" name="eight"><ThemeSelect /></el-tab-pane>
-      <el-tab-pane label="Form" name="nine"><ThemeForm /></el-tab-pane>
-      <el-tab-pane label="Link" name="ten"><ThemeLink /></el-tab-pane>
-      <el-tab-pane label="Tag" name="eleven"><ThemeTag /></el-tab-pane>
-      <el-tab-pane label="Switch" name="twelve"><ThemeToggle /></el-tab-pane>
-      <el-tab-pane label="Table" name="thirteen"><ThemeTable /></el-tab-pane>
-      <el-tab-pane label="Tooltip" name="fourteen"><ThemeTooltip /></el-tab-pane>
-      <el-tab-pane label="Alert" name="fifteen"><ThemeAlert /></el-tab-pane>
-      <el-tab-pane label="Cascader" name="sixteen"><ThemeCascader /></el-tab-pane>
-      <el-tab-pane label="Badge" name="seventeen"><ThemeBadge /></el-tab-pane>
-      <el-tab-pane label="Avatar" name="eighteen"><ThemeAvatar /></el-tab-pane>
-      <el-tab-pane label="Logo" name="nineteen"><ThemeLogo /></el-tab-pane>
-      <el-tab-pane label="Dialog" name="twenty"><ThemeDialog /></el-tab-pane>
-      <el-tab-pane label="Sidebar" name="twenty-one"><ThemeSidebar /></el-tab-pane>
-      <el-tab-pane label="Upload" name="twenty-two"><ThemeUpload /></el-tab-pane>
-      <el-tab-pane label="MessageBox" name="twenty-three"><ThemeMessageBox /></el-tab-pane>
-      <el-tab-pane label="Information" name="twenty-four"><ThemeInformation /></el-tab-pane>
-      <el-tab-pane label="Collapse" name="twenty-five"><ThemeCollapse /></el-tab-pane>
-      <el-tab-pane label="Breadcrumb" name="twenty-six"><ThemeBreadcrumb /></el-tab-pane>
-      <el-tab-pane label="Message" name="twenty-seven"><ThemeMessage /></el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-<script>
-import { defineComponent } from 'vue';
-
-import ThemeInputNumbers from './ThemeInputNumbers.vue';
-import ThemeInputs from './ThemeInputs.vue';
-import ThemePopover from './ThemePopover.vue';
-
-export default defineComponent({
-  components: { ThemeInputs, ThemeInputNumbers, ThemePopover },
-  data() {
-    return {
-      activeName: 'fifteen',
-    };
-  },
-  methods: {
-    handleClick(tab, event) {
-      console.log(tab, event);
-    },
-  },
-});
-</script>