@timus-networks/theme 1.0.159 → 1.0.162

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

package/components-js/ThemeRadio.vue

@@ -47,43 +47,43 @@
     <section>
       <div>
         <el-radio-group v-model="radio1">
-          <el-radio-button label="New York"></el-radio-button>
-          <el-radio-button label="Washington"></el-radio-button>
-          <el-radio-button label="Los Angeles"></el-radio-button>
-          <el-radio-button label="Chicago"></el-radio-button>
+          <el-radio-button label="New York" />
+          <el-radio-button label="Washington" />
+          <el-radio-button label="Los Angeles" />
+          <el-radio-button label="Chicago" />
         </el-radio-group>
       </div>
       <div style="margin-top: 20px">
         <el-radio-group v-model="radio2" size="medium">
-          <el-radio-button label="New York"></el-radio-button>
-          <el-radio-button label="Washington"></el-radio-button>
-          <el-radio-button label="Los Angeles"></el-radio-button>
-          <el-radio-button label="Chicago"></el-radio-button>
+          <el-radio-button label="New York" />
+          <el-radio-button label="Washington" />
+          <el-radio-button label="Los Angeles" />
+          <el-radio-button label="Chicago" />
         </el-radio-group>
       </div>
       <div style="margin-top: 20px">
         <el-radio-group v-model="radio3" size="small">
-          <el-radio-button label="New York"></el-radio-button>
-          <el-radio-button label="Washington" disabled></el-radio-button>
-          <el-radio-button label="Los Angeles"></el-radio-button>
-          <el-radio-button label="Chicago"></el-radio-button>
+          <el-radio-button label="New York" />
+          <el-radio-button label="Washington" disabled />
+          <el-radio-button label="Los Angeles" />
+          <el-radio-button label="Chicago" />
         </el-radio-group>
       </div>
       <div style="margin-top: 20px">
         <el-radio-group v-model="radio4" disabled size="mini">
-          <el-radio-button label="New York"></el-radio-button>
-          <el-radio-button label="Washington"></el-radio-button>
-          <el-radio-button label="Los Angeles"></el-radio-button>
-          <el-radio-button label="Chicago"></el-radio-button>
+          <el-radio-button label="New York" />
+          <el-radio-button label="Washington" />
+          <el-radio-button label="Los Angeles" />
+          <el-radio-button label="Chicago" />
         </el-radio-group>
       </div>
     </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 {
             checked: true,
@@ -146,7 +146,7 @@ export default Vue.extend({
             this.isIndeterminate = false;
         },
         handleCheckedCitiesChange(value) {
-            let checkedCount = value.length;
+            const checkedCount = value.length;
             this.checkAll = checkedCount === this.cities.length;
             this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
         },

package/components-js/ThemeSelect.vue

@@ -122,9 +122,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/ThemeSidebar.vue

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

package/components-js/ThemeTable.vue

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

package/components-js/ThemeTag.vue

@@ -82,9 +82,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/ThemeToggle.vue

@@ -4,7 +4,7 @@
       <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"> </el-switch>
+        <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">
@@ -17,7 +17,7 @@
       <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"> </el-switch>
+        <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">
@@ -30,7 +30,7 @@
       <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"> </el-switch>
+        <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">
@@ -43,8 +43,8 @@
       <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>
-        <el-switch v-model="value2" disabled inactive-text="Pay by year"></el-switch>
+        <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">
@@ -54,10 +54,11 @@
     </section>
   </div>
 </template>
+
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusButtonSample',
   data() {
     return {
@@ -73,19 +74,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(() => {
@@ -93,9 +99,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 [
@@ -115,8 +119,5 @@ export default Vue.extend({
       console.log(ev);
     },
   },
-  mounted() {
-    this.links = this.loadAll();
-  },
 });
 </script>

package/components-js/ThemeTooltip.vue

@@ -59,21 +59,10 @@
   </div>
 </template>
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'ThemeTable',
-  computed: {
-    gridSize() {
-      const grids = {
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-        7: 'grid-cols-7',
-        8: 'grid-cols-8',
-      };
-      return grids;
-    },
-  },
   data() {
     return {
       multipleSelection: [],
@@ -148,6 +137,18 @@ export default Vue.extend({
       ],
     };
   },
+  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) {
@@ -175,7 +176,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/ThemeTypo.vue

@@ -22,18 +22,18 @@
       <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 class="flex items-center text-gray-800" :class="item.name">{{ item.name }}</div>
-        <div class="flex items-center">{{ item.fontSize }}</div>
-        <div class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
+        <div :key="item.name" class="flex items-center text-gray-800" :class="item.name">{{ item.name }}</div>
+        <div :key="item.name" class="flex items-center">{{ item.fontSize }}</div>
+        <div :key="item.name" class="flex items-center hidden md:block">{{ item.lineHeight }}</div>
       </template>
     </div>
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusTypoSample',
   data() {
     return {

package/components-js/ThemeUpload.vue

@@ -40,10 +40,11 @@
     </section>
   </div>
 </template>
+
 <script>
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TimusUpload',
   data() {
     return {

package/components-js/TimusSamples.vue

@@ -31,11 +31,13 @@
   </div>
 </template>
 <script>
+import { defineComponent } from 'vue';
+
 import ThemeInputNumbers from './ThemeInputNumbers.vue';
 import ThemeInputs from './ThemeInputs.vue';
 import ThemePopover from './ThemePopover.vue';
 
-export default {
+export default defineComponent({
   components: { ThemeInputs, ThemeInputNumbers, ThemePopover },
   data() {
     return {
@@ -47,5 +49,5 @@ export default {
       console.log(tab, event);
     },
   },
-};
+});
 </script>

package/components-js/interfaces.d.ts

@@ -0,0 +1,10 @@
+export interface ThemeProviderTheme extends Vue {
+    isDarkMode: boolean;
+    isDark: boolean;
+    setDarkMode(value: boolean): void;
+}
+declare module 'vue/types/vue' {
+    interface Vue {
+        $theme: ThemeProviderTheme;
+    }
+}

package/components-ts/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-ts/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-ts/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-ts/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 {