@timus-networks/theme 1.0.161 → 1.0.163

package/components-ts/ThemeCheckbox.vue

@@ -116,11 +116,11 @@
   </div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       colors: ['default', 'primary', 'secondary', 'gray', 'light', 'success', 'danger', 'info', 'warning'],

package/components-ts/ThemeCollapse.vue

@@ -41,11 +41,17 @@
     </section>
   </div>
 </template>
+
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusButtonSample',
+  data() {
+    return {
+      activeNames: ['1'],
+    };
+  },
   computed: {
     gridSize() {
       const grids = {
@@ -54,14 +60,10 @@ export default Vue.extend({
         7: 'grid-cols-7',
         8: 'grid-cols-8',
       };
+
       return grids;
     },
   },
-  data() {
-    return {
-      activeNames: ['1'],
-    };
-  },
   methods: {
     handleChange(val) {
       console.log(val);

package/components-ts/ThemeDialog.vue

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

@@ -76,11 +76,11 @@
   </div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       labelPosition: 'right',

package/components-ts/ThemeInformation.vue

@@ -60,9 +60,9 @@
   </div>
 </template>
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusButtonSample',
   data() {
     return {
@@ -78,19 +78,24 @@ export default Vue.extend({
         7: 'grid-cols-7',
         8: 'grid-cols-8',
       };
+
       return grids;
     },
   },
+  mounted() {
+    this.links = this.loadAll();
+  },
   methods: {
     querySearch(queryString, cb) {
-      var links = this.links;
-      var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+      const { links } = this;
+      const 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;
+      const { links } = this;
+      const results = queryString ? links.filter(this.createFilter(queryString)) : links;
 
       clearTimeout(this.timeout);
       this.timeout = setTimeout(() => {
@@ -98,9 +103,7 @@ export default Vue.extend({
       }, 3000 * Math.random());
     },
     createFilter(queryString) {
-      return (link) => {
-        return link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
-      };
+      return (link) => link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
     },
     loadAll() {
       return [
@@ -120,8 +123,5 @@ export default Vue.extend({
       console.log(ev);
     },
   },
-  mounted() {
-    this.links = this.loadAll();
-  },
 });
 </script>

package/components-ts/ThemeInputNumbers.vue

@@ -4,11 +4,11 @@
       <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" @change="handleChange" disabled></el-input-number>
-        <el-input-number v-model="input" size="large" controls-position="right" @change="handleChange"></el-input-number>
-        <el-input-number v-model="input" size="medium" controls-position="right" @change="handleChange"></el-input-number>
-        <el-input-number v-model="input" size="small" controls-position="right" @change="handleChange"></el-input-number>
-        <el-input-number v-model="input" size="mini" controls-position="right" @change="handleChange"></el-input-number>
+        <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">
@@ -24,11 +24,11 @@
       <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" @change="handleChange" :min="1" :max="10000" disabled></el-input-number>
-        <el-input-number size="large" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
-        <el-input-number size="medium" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
-        <el-input-number size="small" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
-        <el-input-number size="mini" v-model="num" @change="handleChange" :min="1" :max="10000"></el-input-number>
+        <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">
@@ -41,10 +41,11 @@
     </section>
   </div>
 </template>
+
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusButtonSample',
   data() {
     return {
@@ -52,11 +53,6 @@ export default Vue.extend({
       num: 213,
     };
   },
-  methods: {
-    handleChange(value) {
-      console.log(value);
-    },
-  },
   computed: {
     gridSize() {
       const grids = {
@@ -65,8 +61,14 @@ export default Vue.extend({
         7: 'grid-cols-7',
         8: 'grid-cols-8',
       };
+
       return grids;
     },
   },
+  methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+  },
 });
 </script>

package/components-ts/ThemeInputs.vue

@@ -111,12 +111,16 @@
         </el-input>
 
         <el-input v-model="input3" placeholder="Please input" class="input-with-select">
-          <el-select slot="prepend" v-model="select" placeholder="Select">
-            <el-option label="Restaurant" value="1" />
-            <el-option label="Order No." value="2" />
-            <el-option label="Tel" value="3" />
-          </el-select>
-          <el-button slot="append" icon="el-icon-search" />
+          <template #prepend>
+            <el-select v-model="select" placeholder="Select">
+              <el-option label="Restaurant" value="1" />
+              <el-option label="Order No." value="2" />
+              <el-option label="Tel" value="3" />
+            </el-select>
+          </template>
+          <template #append>
+            <el-button icon="el-icon-search" />
+          </template>
         </el-input>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
@@ -179,7 +183,9 @@
         placeholder="Please input"
         @select="handleSelect"
       >
-        <i slot="suffix" class="el-icon-edit el-input__icon" @click="handleIconClick" />
+        <template #suffix>
+          <i class="el-icon-edit el-input__icon" @click="handleIconClick" />
+        </template>
         <template #default="{ item }">
           <div class="value">{{ item.value }}</div>
           <span class="link">{{ item.link }}</span>
@@ -227,10 +233,11 @@
     </section>
   </div>
 </template>
+
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusButtonSample',
   data() {
     return {

package/components-ts/ThemeLink.vue

@@ -97,9 +97,9 @@
 </template>
 
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusButtonSample',
   data() {
     return {

package/components-ts/ThemeLogo.vue

@@ -1,57 +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>
+  <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 class="logo-icon-medium" />
+        <div class="logo-icon-large" />
+        <el-divider direction="vertical" content-position="center" />
+        <div class="logo-small" />
+        <div class="logo-medium" />
+        <div class="logo-large" />
+      </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>
+    <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" />
+        <el-divider direction="vertical" content-position="center" />
+        <div class="logo-small" />
+      </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';
+import { defineComponent } 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'],
-        };
-    },
+export default defineComponent({
+  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/ThemeMessageBox.vue

@@ -16,10 +16,11 @@
     </section>
   </div>
 </template>
+
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusMessageBox',
   methods: {
     open() {

package/components-ts/ThemePopover.vue

@@ -7,33 +7,39 @@
       <div class="grid grid-flow-col auto-cols-max gap-4">
         <el-dropdown trigger="click">
           <span class="el-dropdown-link"> Dropdown List<i class="el-icon-arrow-down el-icon--right" /> </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item>Action 1</el-dropdown-item>
-            <el-dropdown-item>Action 2</el-dropdown-item>
-            <el-dropdown-item>Action 3</el-dropdown-item>
-            <el-dropdown-item disabled>Action 4</el-dropdown-item>
-            <el-dropdown-item divided>Action 5</el-dropdown-item>
-          </el-dropdown-menu>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>Action 1</el-dropdown-item>
+              <el-dropdown-item>Action 2</el-dropdown-item>
+              <el-dropdown-item>Action 3</el-dropdown-item>
+              <el-dropdown-item disabled>Action 4</el-dropdown-item>
+              <el-dropdown-item divided>Action 5</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
         </el-dropdown>
         <el-dropdown trigger="click">
           <el-button type="primary"> Dropdown List<i class="el-icon-arrow-down el-icon--right" /> </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item>Action 1</el-dropdown-item>
-            <el-dropdown-item>Action 2</el-dropdown-item>
-            <el-dropdown-item>Action 3</el-dropdown-item>
-            <el-dropdown-item>Action 4</el-dropdown-item>
-            <el-dropdown-item>Action 5</el-dropdown-item>
-          </el-dropdown-menu>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>Action 1</el-dropdown-item>
+              <el-dropdown-item>Action 2</el-dropdown-item>
+              <el-dropdown-item>Action 3</el-dropdown-item>
+              <el-dropdown-item>Action 4</el-dropdown-item>
+              <el-dropdown-item>Action 5</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
         </el-dropdown>
         <el-dropdown split-button type="success" class="outline" size="small">
           Dropdown List
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item>Action 1</el-dropdown-item>
-            <el-dropdown-item>Action 2</el-dropdown-item>
-            <el-dropdown-item>Action 3</el-dropdown-item>
-            <el-dropdown-item>Action 4</el-dropdown-item>
-            <el-dropdown-item>Action 5</el-dropdown-item>
-          </el-dropdown-menu>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>Action 1</el-dropdown-item>
+              <el-dropdown-item>Action 2</el-dropdown-item>
+              <el-dropdown-item>Action 3</el-dropdown-item>
+              <el-dropdown-item>Action 4</el-dropdown-item>
+              <el-dropdown-item>Action 5</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
         </el-dropdown>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
@@ -60,7 +66,9 @@
             <el-button>Cancel</el-button>
             <el-button>Save</el-button>
           </div>
-          <el-button slot="reference" type="primary" size="small">Click to activate</el-button>
+          <template #reference>
+            <el-button type="primary" size="small">Click to activate</el-button>
+          </template>
         </el-popover>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
@@ -88,16 +96,24 @@
       </p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
         <el-popover placement="right" title="Başlık" width="200" trigger="click" content="Bu içerik, bu içerik, bu içerik">
-          <el-button slot="reference">Sağ</el-button>
+          <template #reference>
+            <el-button>Sağ</el-button>
+          </template>
         </el-popover>
         <el-popover placement="bottom" title="Başlık" width="200" trigger="click" content="Bu içerik, bu içerik, bu içerik">
-          <el-button slot="reference">Alt</el-button>
+          <template #reference>
+            <el-button>Alt</el-button>
+          </template>
         </el-popover>
         <el-popover placement="top" title="Başlık" width="200" trigger="click" content="Bu içerik, bu içerik, bu içerik">
-          <el-button slot="reference">Üst</el-button>
+          <template #reference>
+            <el-button>Üst</el-button>
+          </template>
         </el-popover>
         <el-popover placement="left" title="Başlık" width="200" trigger="click" content="Bu içerik, bu içerik, bu içerik">
-          <el-button slot="reference">Sol</el-button>
+          <template #reference>
+            <el-button>Sol</el-button>
+          </template>
         </el-popover>
       </div>
       <div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
@@ -348,10 +364,11 @@
     </section>
   </div>
 </template>
+
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusButtonSample',
   data() {
     return {