@timus-networks/theme 1.0.161 → 1.0.163

package/components-ts/ThemeRadio.vue

@@ -47,34 +47,34 @@
     <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>
@@ -82,10 +82,11 @@
 </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 {
       checked: true,
@@ -149,7 +150,8 @@ export default Vue.extend({
       this.isIndeterminate = false;
     },
     handleCheckedCitiesChange(value: string[]) {
-      let checkedCount = value.length;
+      const checkedCount = value.length;
+
       this.checkAll = checkedCount === this.cities.length;
       this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
     },

package/components-ts/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-ts/ThemeSidebar.vue

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

package/components-ts/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-ts/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-ts/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-ts/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-ts/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-ts/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-ts/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/fonts/poppins-font-face/README.md

@@ -0,0 +1,106 @@
+# Poppins
+
+<a href="https://wess.tistory.com" target="_blank">
+    <img src="https://webfontworld.github.io/Poppins/Poppins.jpg" alt="Poppins" style="width:300px">
+</a>
+<pre>
+@font-face {
+    font-family: 'Poppins';
+    font-weight: 100;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.eot');
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.eot?#iefix') format('embedded-opentype'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Thin.ttf') format("truetype");
+    font-display: swap;
+} 
+@font-face {
+    font-family: 'Poppins';
+    font-weight: 200;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.eot');
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.eot?#iefix') format('embedded-opentype'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraLight.ttf') format("truetype");
+    font-display: swap;
+} 
+@font-face {
+    font-family: 'Poppins';
+    font-weight: 300;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.eot');
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.eot?#iefix') format('embedded-opentype'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Light.ttf') format("truetype");
+    font-display: swap;
+} 
+@font-face {
+    font-family: 'Poppins';
+    font-weight: 400;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.eot');
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Regular.ttf') format("truetype");
+    font-display: swap;
+} 
+@font-face {
+    font-family: 'Poppins';
+    font-weight: 500;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.eot');
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Medium.ttf') format("truetype");
+    font-display: swap;
+} 
+@font-face {
+    font-family: 'Poppins';
+    font-weight: 600;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.eot');
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-SemiBold.ttf') format("truetype");
+    font-display: swap;
+} 
+@font-face {
+    font-family: 'Poppins';
+    font-weight: 700;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.eot');
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Bold.ttf') format("truetype");
+    font-display: swap;
+} 
+@font-face {
+    font-family: 'Poppins';
+    font-weight: 800;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.eot');
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.eot?#iefix') format('embedded-opentype'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-ExtraBold.ttf') format("truetype");
+    font-display: swap;
+} 
+@font-face {
+    font-family: 'Poppins';
+    font-weight: 900;
+    font-style: normal;
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.eot');
+    src: url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.eot?#iefix') format('embedded-opentype'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.woff2') format('woff2'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.woff') format('woff'),
+         url('https://cdn.jsdelivr.net/gh/webfontworld/Poppins/Poppins-Black.ttf') format("truetype");
+    font-display: swap;
+} 
+</pre>