@timus-networks/theme 1.0.161 → 1.0.162

package/components-js/ThemeAlert.vue

@@ -4,7 +4,7 @@
       <h1>Alert</h1>
       <p class="p-lg-c my-6">Uyarı bileşenleri, sayfada otomatik olarak kaybolmayan non-overlay mesajlarını görüntülemek için kullanılır.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-alert :title="`${item}`" :type="item" class="isax-activity" v-for="(item, key) in colors" :key="key"></el-alert>
+        <el-alert v-for="(item, key) in colors" :key="key" :title="`${item}`" :type="item" class="isax-activity" />
       </div>
       <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
         <p class="text-xs">
@@ -15,10 +15,15 @@
   </div>
 </template>
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'ThemeTable',
+  data() {
+    return {
+      colors: ['primary', 'secondary', 'gray', 'warning', 'danger', 'info', 'success'],
+    };
+  },
   computed: {
     gridSize() {
       const grids = {
@@ -27,14 +32,10 @@ export default Vue.extend({
         7: 'grid-cols-7',
         8: 'grid-cols-8',
       };
+
       return grids;
     },
   },
-  data() {
-    return {
-      colors: ['primary', 'secondary', 'gray', 'warning', 'danger', 'info', 'success'],
-    };
-  },
   methods: {
     toggleSelection(rows) {
       if (rows) {
@@ -62,7 +63,8 @@ export default Vue.extend({
     },
     filterHandler(value, row, column) {
       console.log(row, column, value);
-      const property = column['property'];
+      const { property } = column;
+
       return row[property] === value;
     },
     handleSizeChange(val) {

package/components-js/ThemeAvatar.vue

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

package/components-js/ThemeBadge.vue

@@ -13,16 +13,18 @@
         </el-badge>
         <el-dropdown trigger="click">
           <span class="el-dropdown-link"> Beni Tıkla<i class="el-icon-caret-bottom el-icon--right" /> </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item class="clearfix">
-              Yorumlar
-              <el-badge class="mark" :value="12" />
-            </el-dropdown-item>
-            <el-dropdown-item class="clearfix">
-              Yanıtlar
-              <el-badge class="mark" :value="3" />
-            </el-dropdown-item>
-          </el-dropdown-menu>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item class="clearfix">
+                Yorumlar
+                <el-badge class="mark" :value="12" />
+              </el-dropdown-item>
+              <el-dropdown-item class="clearfix">
+                Yanıtlar
+                <el-badge class="mark" :value="3" />
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
         </el-dropdown>
       </div>
       <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
@@ -74,9 +76,9 @@
 </template>
 
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusCascader',
   data() {
     return {

package/components-js/ThemeButtons.vue

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

package/components-js/ThemeCascader.vue

@@ -4,8 +4,8 @@
       <h1>Basic usage</h1>
       <p class="p-lg my-6">There are two ways to expand child option items.</p>
       <div class="grid grid-flow-col auto-cols-max gap-4">
-        <el-cascader v-model="value" :options="options" @change="handleChange" clearable></el-cascader>
-        <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
+        <el-cascader v-model="value" :options="options" clearable @change="handleChange" />
+        <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange" />
       </div>
       <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
         <p class="text-xs">
@@ -20,14 +20,14 @@
         Cascader container contains two different component in it inside. Left one is Cascader and right one is Select dropdown.
       </p>
       <div class="el-cascader-container">
-        <el-cascader v-model="value" :options="options" @change="handleChange" clearable></el-cascader>
-        <el-cascader v-model="value" :options="options" @change="handleChange" clearable></el-cascader>
+        <el-cascader v-model="value" :options="options" clearable @change="handleChange" />
+        <el-cascader v-model="value" :options="options" clearable @change="handleChange" />
         <el-select v-model="value" placeholder="Select">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
-        <el-input v-show="false"></el-input>
+        <el-input v-show="false" />
         <el-select v-model="value" placeholder="Select" class="grow">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <el-button class="isax-add-circle grow-0">Add</el-button>
       </div>
@@ -39,8 +39,8 @@
         `collapse-tags = true` to fold selected tags.
       </p>
       <div class="flex gap-4">
-        <el-cascader :options="options" :props="props" clearable></el-cascader>
-        <el-cascader :options="options" :props="props" collapse-tags clearable></el-cascader>
+        <el-cascader :options="options" :props="props" clearable />
+        <el-cascader :options="options" :props="props" collapse-tags clearable />
       </div>
       <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
         <p class="text-xs">
@@ -55,8 +55,8 @@
         eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.
       </p>
       <div class="flex gap-4">
-        <el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader>
-        <el-cascader :options="options" :props="{ multiple: true, checkStrictly: true }" clearable></el-cascader>
+        <el-cascader :options="options" :props="{ checkStrictly: true }" clearable />
+        <el-cascader :options="options" :props="{ multiple: true, checkStrictly: true }" clearable />
       </div>
       <div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
         <p class="text-xs">
@@ -68,9 +68,9 @@
 </template>
 
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusCascader',
   data() {
     return {

package/components-js/ThemeCheckbox.vue

@@ -115,9 +115,9 @@
     </section>
   </div>
 </template>
-<script>import Vue from 'vue';
+<script>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-js/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-js/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-js/ThemeForm.vue

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

package/components-js/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-js/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-js/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-js/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-js/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>