Code refactoring (#2739)

* refactor: switching to the use of typed props

* refactor: `password-input` -> `a-password-input`

* fix: qr modal copy error

5 files changed, 117 insertions, 47 deletions

diff --git a/web/html/xui/component/password.html b/web/html/xui/component/password.html
index 37e4c793..0fea1430 100644
--- a/web/html/xui/component/password.html
+++ b/web/html/xui/component/password.html
@@ -1,26 +1,46 @@
 {{define "component/passwordInput"}}
 <template>
-    <a-input :value="value" :type="showPassword ? 'text' : 'password'"
-             :placeholder="placeholder"
-             :autocomplete="autocomplete"
-             :name="name"
-             @input="$emit('input', $event.target.value)">
-        <template v-if="icon" #prefix>
-            <a-icon :type="icon" style="font-size: 16px;" />
-        </template>
-        <template #addonAfter>
-            <a-icon :type="showPassword ? 'eye-invisible' : 'eye'"
-                    @click="toggleShowPassword"
-                    style="font-size: 16px;" />
-        </template>
-    </a-input>
+  <a-input :value="value" :type="showPassword ? 'text' : 'password'" :placeholder="placeholder"
+    :autocomplete="autocomplete" :name="name" @input="$emit('input', $event.target.value)">
+    <template v-if="icon" #prefix>
+      <a-icon :type="icon" style="font-size: 16px;" />
+    </template>
+    <template #addonAfter>
+      <a-icon :type="showPassword ? 'eye-invisible' : 'eye'" @click="toggleShowPassword" style="font-size: 16px;" />
+    </template>
+  </a-input>
 </template>
 {{end}}
 
 {{define "component/password"}}
 <script>
-  Vue.component('password-input', {
-    props: ["title", "value", "placeholder", "icon", "autocomplete", "name"],
+  Vue.component('a-password-input', {
+    props: {
+      'title': {
+        type: String,
+        required: false,
+      },
+      'value': {
+        type: String,
+        required: false,
+      },
+      'placeholder': {
+        type: String,
+        required: false,
+      },
+      'autocomplete': {
+        type: String,
+        required: false,
+      },
+      'name': {
+        type: String,
+        required: false,
+      },
+      'icon': {
+        type: undefined,
+        required: false
+      }
+    },
     template: `{{template "component/passwordInput"}}`,
     data() {
       return {
diff --git a/web/html/xui/component/persianDatepicker.html b/web/html/xui/component/persianDatepicker.html
index df47c4f3..2df79a06 100644
--- a/web/html/xui/component/persianDatepicker.html
+++ b/web/html/xui/component/persianDatepicker.html
@@ -2,10 +2,10 @@
 <template>
     <div>
         <a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
-                 @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
-                 :placeholder="placeholder">
+            @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
+            :placeholder="placeholder">
             <template #addonAfter>
-                <a-icon type="calendar" style="font-size: 14px; opacity: 0.5;"/>
+                <a-icon type="calendar" style="font-size: 14px; opacity: 0.5;" />
             </template>
         </a-input>
     </div>
@@ -13,15 +13,27 @@
 {{end}}
 
 {{define "component/persianDatepicker"}}
-<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}"/>
+<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}" />
 <script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js?{{ .cur_ver }}"></script>
 <script>
-
     const persianDatepicker = {};
 
-    Vue.component('persian-datepicker', {
-        props: ['placeholder', 'format', 'value'],
+    Vue.component('a-persian-datepicker', {
+        props: {
+            'format': {
+                type: undefined,
+                required: false,
+            },
+            'value': {
+                type: String,
+                required: false,
+            },
+            'placeholder': {
+                type: String,
+                required: false,
+            },
+        },
         template: `{{template "component/persianDatepickerTemplate"}}`,
         data() {
             return {
@@ -57,4 +69,4 @@
         }
     });
 </script>
-{{end}}
+{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/setting.html b/web/html/xui/component/setting.html
index bc2c6e42..85220d25 100644
--- a/web/html/xui/component/setting.html
+++ b/web/html/xui/component/setting.html
@@ -21,7 +21,24 @@
 {{define "component/setting"}}
 <script>
     Vue.component('a-setting-list-item', {
-        props: ["title", "description", "paddings"],
+        props: {
+            'title': {
+                type: String,
+                required: true,
+            },
+            'description': {
+                type: String,
+                required: false,
+            },
+            'paddings': {
+                type: String,
+                required: false,
+                defaultValue: "default",
+                validator: function (value) {
+                    return ['small', 'default'].includes(value)
+                }
+            }
+        },
         template: `{{ template "component/settingListItem" }}`,
         computed: {
             padding() {
@@ -29,7 +46,7 @@
                     case "small":
                         return "10px 20px !important"
                         break;
-                    default:
+                    case "default":
                         return "20px !important"
                         break;
                 }
diff --git a/web/html/xui/component/sortableTable.html b/web/html/xui/component/sortableTable.html
index f62eba44..67bbcee2 100644
--- a/web/html/xui/component/sortableTable.html
+++ b/web/html/xui/component/sortableTable.html
@@ -1,9 +1,5 @@
 {{define "component/sortableTableTrigger"}}
-<a-icon type="drag"
-  class="sortable-icon"
-  style="cursor: move;"
-  @mouseup="mouseUpHandler"
-  @mousedown="mouseDownHandler"
+<a-icon type="drag" class="sortable-icon" style="cursor: move;" @mouseup="mouseUpHandler" @mousedown="mouseDownHandler"
   @click="clickHandler" />
 {{end}}
 
@@ -28,7 +24,16 @@
         newElementIndex: null,
       };
     },
-    props: ['data-source', 'customRow'],
+    props: {
+      'data-source': {
+        type: undefined,
+        required: false,
+      },
+      'customRow': {
+        type: undefined,
+        required: false,
+      }
+    },
     inheritAttrs: false,
     provide() {
       const sortable = {}
@@ -44,7 +49,7 @@
         sortable,
       }
     },
-    render: function(createElement) {
+    render: function (createElement) {
       return createElement('a-table', {
         class: {
           'ant-table-is-sorting': this.isDragging(),
@@ -59,7 +64,7 @@
           drop: (e) => this.dropHandler(e),
         },
         scopedSlots: this.$scopedSlots,
-      }, this.$slots.default, )
+      }, this.$slots.default,)
     },
     created() {
       this.$memoSort = {};
@@ -163,9 +168,14 @@
       }
     }
   });
-  Vue.component('table-sort-trigger', {
+  Vue.component('a-table-sort-trigger', {
     template: `{{template "component/sortableTableTrigger"}}`,
-    props: ['item-index'],
+    props: {
+      'item-index': {
+        type: undefined,
+        required: false
+      }
+    },
     inject: ['sortable'],
     methods: {
       mouseDownHandler(e) {
@@ -190,27 +200,33 @@
       display: none;
     }
   }
+
   .ant-table-is-sorting .draggable-row td {
     background-color: #ffffff !important;
   }
+
   .dark .ant-table-is-sorting .draggable-row td {
     background-color: var(--dark-color-surface-100) !important;
   }
+
   .ant-table-is-sorting .dragging td {
     background-color: rgb(232 244 242) !important;
     color: rgba(0, 0, 0, 0.3);
   }
+
   .dark .ant-table-is-sorting .dragging td {
     background-color: var(--dark-color-table-hover) !important;
     color: rgba(255, 255, 255, 0.3);
   }
+
   .ant-table-is-sorting .dragging {
     opacity: 1;
     box-shadow: 1px -2px 2px #008771;
     transition: all 0.2s;
   }
+
   .ant-table-is-sorting .dragging .ant-table-row-index {
     opacity: 0.3;
   }
 </style>
-{{end}}
+{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
index 0de64a84..28cb79b1 100644
--- a/web/html/xui/component/themeSwitch.html
+++ b/web/html/xui/component/themeSwitch.html
@@ -6,9 +6,13 @@
         <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
         <span>Theme</span>
       </span>
-      <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()"> Dark <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
+      <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()"> Dark
+        <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme"
+          @change="themeSwitcher.toggleTheme()"></a-switch>
       </a-menu-item>
-      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOffUltra()"> Ultra <a-checkbox style="margin-left: 2px;" :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
+      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch"
+        @mousedown="themeSwitcher.animationsOffUltra()"> Ultra <a-checkbox style="margin-left: 2px;"
+          :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
       </a-menu-item>
     </a-sub-menu>
   </a-menu>
@@ -17,12 +21,15 @@
 
 {{define "component/themeSwitchTemplateLogin"}}
 <template>
-  <a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
+  <a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline"
+    selected-keys="">
     <a-menu-item mode="inline" class="ant-menu-theme-switch">
       <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
+      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
+        @change="themeSwitcher.toggleTheme()"></a-switch>
       <template v-if="themeSwitcher.isDarkTheme">
-        <a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
+        <a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra"
+          @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
       </template>
     </a-menu-item>
   </a-menu>
@@ -83,8 +90,7 @@
     };
   }
   const themeSwitcher = createThemeSwitcher();
-  Vue.component('theme-switch', {
-    props: [],
+  Vue.component('a-theme-switch', {
     template: `{{template "component/themeSwitchTemplate"}}`,
     data: () => ({
       themeSwitcher
@@ -96,8 +102,7 @@
       document.getElementById('message').className = themeSwitcher.currentTheme;
     }
   });
-  Vue.component('theme-switch-login', {
-    props: [],
+  Vue.component('a-theme-switch-login', {
     template: `{{template "component/themeSwitchTemplateLogin"}}`,
     data: () => ({
       themeSwitcher
@@ -110,4 +115,4 @@
     }
   });
 </script>
-{{end}}
+{{end}}
\ No newline at end of file