Skip to content

Commit 697cd5e

Browse files
shishkevichdshishkevichd
authored
Code refactoring (#2739)
* refactor: switching to the use of typed props * refactor: `password-input` -> `a-password-input` * fix: qr modal copy error
1 parent c6d27a4 commit 697cd5e

13 files changed

+136
-66
lines changed

‎web/html/common/qrcode_modal.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010
<a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}}</span></a-tag>
1111
<tr-qr-bg class="qr-bg-sub">
1212
<tr-qr-bg-inner class="qr-bg-sub-inner">
13-
<canvas @click="qrModal.copy(genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
13+
<canvas @click="copy(genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
1414
</tr-qr-bg-inner>
1515
</tr-qr-bg>
1616
</tr-qr-box>
1717
<tr-qr-box class="qr-box">
1818
<a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}} Json</span></a-tag>
1919
<tr-qr-bg class="qr-bg-sub">
2020
<tr-qr-bg-inner class="qr-bg-sub-inner">
21-
<canvas @click="qrModal.copy(genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
21+
<canvas @click="copy(genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
2222
</tr-qr-bg-inner>
2323
</tr-qr-bg>
2424
</tr-qr-box>
@@ -27,7 +27,7 @@
2727
<tr-qr-box class="qr-box">
2828
<a-tag color="green" class="qr-tag"><span>[[ row.remark ]]</span></a-tag>
2929
<tr-qr-bg class="qr-bg">
30-
<canvas @click="qrModal.copy(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
30+
<canvas @click="copy(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
3131
</tr-qr-bg>
3232
</tr-qr-box>
3333
</template>

‎web/html/login.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -422,16 +422,16 @@ <h1 class="title headline zoom">
422422
</a-input>
423423
</a-form-item>
424424
<a-form-item>
425-
<password-input autocomplete="password" name="password" icon="lock" v-model.trim="user.password"
425+
<a-password-input autocomplete="password" name="password" icon="lock" v-model.trim="user.password"
426426
placeholder='{{ i18n "password" }}'
427427
@keydown.enter.native="login">
428-
</password-input>
428+
</a-password-input>
429429
</a-form-item>
430430
<a-form-item v-if="secretEnable">
431-
<password-input autocomplete="secret" name="secret" icon="key" v-model.trim="user.loginSecret"
431+
<a-password-input autocomplete="secret" name="secret" icon="key" v-model.trim="user.loginSecret"
432432
placeholder='{{ i18n "secretToken" }}'
433433
@keydown.enter.native="login">
434-
</password-input>
434+
</a-password-input>
435435
</a-form-item>
436436
<a-form-item>
437437
<a-row justify="center" class="centered">
@@ -461,7 +461,7 @@ <h1 class="title headline zoom">
461461
</a-form-item>
462462
<a-form-item>
463463
<a-row justify="center" class="centered">
464-
<theme-switch-login></theme-switch-login>
464+
<a-theme-switch-login></a-theme-switch-login>
465465
</a-row>
466466
</a-form-item>
467467
</a-form>

‎web/html/xui/client_bulk_modal.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,9 @@
106106
<a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
107107
format="YYYY-MM-DD HH:mm:ss" :dropdown-class-name="themeSwitcher.currentTheme"
108108
v-model="clientsBulkModal.expiryTime"></a-date-picker>
109-
<persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
109+
<a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
110110
value="clientsBulkModal.expiryTime" v-model="clientsBulkModal.expiryTime">
111-
</persian-datepicker>
111+
</a-persian-datepicker>
112112
</a-form-item>
113113
<a-form-item v-if="clientsBulkModal.expiryTime != 0">
114114
<template slot="label">

‎web/html/xui/common_sider.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
{{define "commonSider"}}
3636
<a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md">
37-
<theme-switch></theme-switch>
37+
<a-theme-switch></a-theme-switch>
3838
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']" @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
3939
{{template "menuItems" .}}
4040
</a-menu>
@@ -43,7 +43,7 @@
4343
<div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
4444
<a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
4545
</div>
46-
<theme-switch></theme-switch>
46+
<a-theme-switch></a-theme-switch>
4747
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']" @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
4848
{{template "menuItems" .}}
4949
</a-menu>

‎web/html/xui/component/password.html

+36-16
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,46 @@
11
{{define "component/passwordInput"}}
22
<template>
3-
<a-input :value="value" :type="showPassword ? 'text' : 'password'"
4-
:placeholder="placeholder"
5-
:autocomplete="autocomplete"
6-
:name="name"
7-
@input="$emit('input', $event.target.value)">
8-
<template v-if="icon" #prefix>
9-
<a-icon :type="icon" style="font-size: 16px;" />
10-
</template>
11-
<template #addonAfter>
12-
<a-icon :type="showPassword ? 'eye-invisible' : 'eye'"
13-
@click="toggleShowPassword"
14-
style="font-size: 16px;" />
15-
</template>
16-
</a-input>
3+
<a-input :value="value" :type="showPassword ? 'text' : 'password'" :placeholder="placeholder"
4+
:autocomplete="autocomplete" :name="name" @input="$emit('input', $event.target.value)">
5+
<template v-if="icon" #prefix>
6+
<a-icon :type="icon" style="font-size: 16px;" />
7+
</template>
8+
<template #addonAfter>
9+
<a-icon :type="showPassword ? 'eye-invisible' : 'eye'" @click="toggleShowPassword" style="font-size: 16px;" />
10+
</template>
11+
</a-input>
1712
</template>
1813
{{end}}
1914

2015
{{define "component/password"}}
2116
<script>
22-
Vue.component('password-input', {
23-
props: ["title", "value", "placeholder", "icon", "autocomplete", "name"],
17+
Vue.component('a-password-input', {
18+
props: {
19+
'title': {
20+
type: String,
21+
required: false,
22+
},
23+
'value': {
24+
type: String,
25+
required: false,
26+
},
27+
'placeholder': {
28+
type: String,
29+
required: false,
30+
},
31+
'autocomplete': {
32+
type: String,
33+
required: false,
34+
},
35+
'name': {
36+
type: String,
37+
required: false,
38+
},
39+
'icon': {
40+
type: undefined,
41+
required: false
42+
}
43+
},
2444
template: `{{template "component/passwordInput"}}`,
2545
data() {
2646
return {

‎web/html/xui/component/persianDatepicker.html

+20-8
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,38 @@
22
<template>
33
<div>
44
<a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
5-
@input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
6-
:placeholder="placeholder">
5+
@input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
6+
:placeholder="placeholder">
77
<template #addonAfter>
8-
<a-icon type="calendar" style="font-size: 14px; opacity: 0.5;"/>
8+
<a-icon type="calendar" style="font-size: 14px; opacity: 0.5;" />
99
</template>
1010
</a-input>
1111
</div>
1212
</template>
1313
{{end}}
1414

1515
{{define "component/persianDatepicker"}}
16-
<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}"/>
16+
<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}" />
1717
<script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
1818
<script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js?{{ .cur_ver }}"></script>
1919
<script>
20-
2120
const persianDatepicker = {};
2221

23-
Vue.component('persian-datepicker', {
24-
props: ['placeholder', 'format', 'value'],
22+
Vue.component('a-persian-datepicker', {
23+
props: {
24+
'format': {
25+
type: undefined,
26+
required: false,
27+
},
28+
'value': {
29+
type: String,
30+
required: false,
31+
},
32+
'placeholder': {
33+
type: String,
34+
required: false,
35+
},
36+
},
2537
template: `{{template "component/persianDatepickerTemplate"}}`,
2638
data() {
2739
return {
@@ -57,4 +69,4 @@
5769
}
5870
});
5971
</script>
60-
{{end}}
72+
{{end}}

‎web/html/xui/component/setting.html

+19-2
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,32 @@
2121
{{define "component/setting"}}
2222
<script>
2323
Vue.component('a-setting-list-item', {
24-
props: ["title", "description", "paddings"],
24+
props: {
25+
'title': {
26+
type: String,
27+
required: true,
28+
},
29+
'description': {
30+
type: String,
31+
required: false,
32+
},
33+
'paddings': {
34+
type: String,
35+
required: false,
36+
defaultValue: "default",
37+
validator: function (value) {
38+
return ['small', 'default'].includes(value)
39+
}
40+
}
41+
},
2542
template: `{{ template "component/settingListItem" }}`,
2643
computed: {
2744
padding() {
2845
switch (this.paddings) {
2946
case "small":
3047
return "10px 20px !important"
3148
break;
32-
default:
49+
case "default":
3350
return "20px !important"
3451
break;
3552
}

‎web/html/xui/component/sortableTable.html

+27-11
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
{{define "component/sortableTableTrigger"}}
2-
<a-icon type="drag"
3-
class="sortable-icon"
4-
style="cursor: move;"
5-
@mouseup="mouseUpHandler"
6-
@mousedown="mouseDownHandler"
2+
<a-icon type="drag" class="sortable-icon" style="cursor: move;" @mouseup="mouseUpHandler" @mousedown="mouseDownHandler"
73
@click="clickHandler" />
84
{{end}}
95

@@ -28,7 +24,16 @@
2824
newElementIndex: null,
2925
};
3026
},
31-
props: ['data-source', 'customRow'],
27+
props: {
28+
'data-source': {
29+
type: undefined,
30+
required: false,
31+
},
32+
'customRow': {
33+
type: undefined,
34+
required: false,
35+
}
36+
},
3237
inheritAttrs: false,
3338
provide() {
3439
const sortable = {}
@@ -44,7 +49,7 @@
4449
sortable,
4550
}
4651
},
47-
render: function(createElement) {
52+
render: function (createElement) {
4853
return createElement('a-table', {
4954
class: {
5055
'ant-table-is-sorting': this.isDragging(),
@@ -59,7 +64,7 @@
5964
drop: (e) => this.dropHandler(e),
6065
},
6166
scopedSlots: this.$scopedSlots,
62-
}, this.$slots.default, )
67+
}, this.$slots.default,)
6368
},
6469
created() {
6570
this.$memoSort = {};
@@ -163,9 +168,14 @@
163168
}
164169
}
165170
});
166-
Vue.component('table-sort-trigger', {
171+
Vue.component('a-table-sort-trigger', {
167172
template: `{{template "component/sortableTableTrigger"}}`,
168-
props: ['item-index'],
173+
props: {
174+
'item-index': {
175+
type: undefined,
176+
required: false
177+
}
178+
},
169179
inject: ['sortable'],
170180
methods: {
171181
mouseDownHandler(e) {
@@ -190,27 +200,33 @@
190200
display: none;
191201
}
192202
}
203+
193204
.ant-table-is-sorting .draggable-row td {
194205
background-color: #ffffff !important;
195206
}
207+
196208
.dark .ant-table-is-sorting .draggable-row td {
197209
background-color: var(--dark-color-surface-100) !important;
198210
}
211+
199212
.ant-table-is-sorting .dragging td {
200213
background-color: rgb(232 244 242) !important;
201214
color: rgba(0, 0, 0, 0.3);
202215
}
216+
203217
.dark .ant-table-is-sorting .dragging td {
204218
background-color: var(--dark-color-table-hover) !important;
205219
color: rgba(255, 255, 255, 0.3);
206220
}
221+
207222
.ant-table-is-sorting .dragging {
208223
opacity: 1;
209224
box-shadow: 1px -2px 2px #008771;
210225
transition: all 0.2s;
211226
}
227+
212228
.ant-table-is-sorting .dragging .ant-table-row-index {
213229
opacity: 0.3;
214230
}
215231
</style>
216-
{{end}}
232+
{{end}}

‎web/html/xui/component/themeSwitch.html

+15-10
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@
66
<a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
77
<span>Theme</span>
88
</span>
9-
<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>
9+
<a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()"> Dark
10+
<a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme"
11+
@change="themeSwitcher.toggleTheme()"></a-switch>
1012
</a-menu-item>
11-
<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>
13+
<a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch"
14+
@mousedown="themeSwitcher.animationsOffUltra()"> Ultra <a-checkbox style="margin-left: 2px;"
15+
:checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
1216
</a-menu-item>
1317
</a-sub-menu>
1418
</a-menu>
@@ -17,12 +21,15 @@
1721

1822
{{define "component/themeSwitchTemplateLogin"}}
1923
<template>
20-
<a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
24+
<a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline"
25+
selected-keys="">
2126
<a-menu-item mode="inline" class="ant-menu-theme-switch">
2227
<a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
23-
<a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
28+
<a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
29+
@change="themeSwitcher.toggleTheme()"></a-switch>
2430
<template v-if="themeSwitcher.isDarkTheme">
25-
<a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
31+
<a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra"
32+
@click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
2633
</template>
2734
</a-menu-item>
2835
</a-menu>
@@ -83,8 +90,7 @@
8390
};
8491
}
8592
const themeSwitcher = createThemeSwitcher();
86-
Vue.component('theme-switch', {
87-
props: [],
93+
Vue.component('a-theme-switch', {
8894
template: `{{template "component/themeSwitchTemplate"}}`,
8995
data: () => ({
9096
themeSwitcher
@@ -96,8 +102,7 @@
96102
document.getElementById('message').className = themeSwitcher.currentTheme;
97103
}
98104
});
99-
Vue.component('theme-switch-login', {
100-
props: [],
105+
Vue.component('a-theme-switch-login', {
101106
template: `{{template "component/themeSwitchTemplateLogin"}}`,
102107
data: () => ({
103108
themeSwitcher
@@ -110,4 +115,4 @@
110115
}
111116
});
112117
</script>
113-
{{end}}
118+
{{end}}

0 commit comments

Comments
 (0)