Fix incorrect checkbox behaviors in the dashboard repolist's filter (#23147)

Co-author: yp05327 , this PR is based on yp05327's #22813.

The problems of the old DashboardRepoList / repolist.tmpl: 

* It mixes many different frameworks together
* It "just works", bug on bug
* It uses many anti-pattern of Vue

This PR:

* Fix bugs and close #22800
* Decouple the "checkbox" elements from Fomantic UI (only use CSS
styles)
* Simplify the HTML layout
* Simplify JS logic
* Make it easier to refactor the DashboardRepoList into a pure Vue
component in the future.

### Screenshots

#### Default

![image](https://user-images.githubusercontent.com/2114189/221355768-a3eb5b23-85b4-4e3d-b906-844d8b15539d.png)

####  Click "Archived" to make it checked

![image](https://user-images.githubusercontent.com/2114189/221355777-9a104ddf-52a7-4504-869a-43a73827d802.png)

####  Click "Archived" to make it intermediate

![image](https://user-images.githubusercontent.com/2114189/221355802-0f67a073-67ad-4e92-84a6-558c432103a5.png)

####  Click "Archived" to make it unchecked

![image](https://user-images.githubusercontent.com/2114189/221355810-acf1d9d8-ccce-47fe-a02e-70cf4e666331.png)

---------

Co-authored-by: yp05327 <576951401@qq.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

1 files changed, 32 insertions, 50 deletions

diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index 22af578fc..97234176b 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -46,56 +46,38 @@
 					<div class="ui dropdown icon button" title="{{.locale.Tr "home.filter"}}">
 						<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
 						<div class="menu">
-							<div class="item">
-								<a @click="toggleArchivedFilter()">
-									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_both_archived_unarchived"}}" v-if="archivedFilter === 'both'">
-										<input type="checkbox">
-										<label>
-											{{svg "octicon-archive" 16 "gt-mr-2"}}
-											{{.locale.Tr "home.show_archived"}}
-										</label>
-									</div>
-									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_unarchived"}}" v-if="archivedFilter === 'unarchived'">
-										<input type="checkbox">
-										<label>
-											{{svg "octicon-archive" 16 "gt-mr-2"}}
-											{{.locale.Tr "home.show_archived"}}
-										</label>
-									</div>
-									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_archived"}}" v-if="archivedFilter === 'archived'">
-										<input type="checkbox">
-										<label>
-											{{svg "octicon-archive" 16 "gt-mr-2"}}
-											{{.locale.Tr "home.show_archived"}}
-										</label>
-									</div>
-								</a>
-							</div>
-							<div class="item">
-								<a @click="togglePrivateFilter()">
-									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'">
-										<input type="checkbox">
-										<label>
-											{{svg "octicon-lock" 16 "gt-mr-2"}}
-											{{.locale.Tr "home.show_private"}}
-										</label>
-									</div>
-									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'">
-										<input type="checkbox">
-										<label>
-											{{svg "octicon-lock" 16 "gt-mr-2"}}
-											{{.locale.Tr "home.show_private"}}
-										</label>
-									</div>
-									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'">
-										<input type="checkbox">
-											<label>
-												{{svg "octicon-lock" 16 "gt-mr-2"}}
-												{{.locale.Tr "home.show_private"}}
-											</label>
-									</div>
-								</a>
-							</div>
+							<a class="item" @click="toggleArchivedFilter()">
+								<div class="ui checkbox"
+											ref="checkboxArchivedFilter"
+											data-title-both="{{.locale.Tr "home.show_both_archived_unarchived"}}"
+											data-title-unarchived="{{.locale.Tr "home.show_only_unarchived"}}"
+											data-title-archived="{{.locale.Tr "home.show_only_archived"}}"
+											:title="checkboxArchivedFilterTitle"
+								>
+									<!--the "hidden" is necessary to make the checkbox work without Fomantic UI js,
+											otherwise if the "input" handles click event for intermediate status, it breaks the internal state-->
+									<input type="checkbox" class="hidden" v-bind.prop="checkboxArchivedFilterProps">
+									<label>
+										{{svg "octicon-archive" 16 "gt-mr-2"}}
+										{{.locale.Tr "home.show_archived"}}
+									</label>
+								</div>
+							</a>
+							<a class="item" @click="togglePrivateFilter()">
+								<div class="ui checkbox"
+											ref="checkboxPrivateFilter"
+											data-title-both="{{.locale.Tr "home.show_both_private_public"}}"
+											data-title-public="{{.locale.Tr "home.show_only_public"}}"
+											data-title-private="{{.locale.Tr "home.show_only_private"}}"
+											:title="checkboxPrivateFilterTitle"
+								>
+									<input type="checkbox" class="hidden" v-bind.prop="checkboxPrivateFilterProps">
+									<label>
+										{{svg "octicon-lock" 16 "gt-mr-2"}}
+										{{.locale.Tr "home.show_private"}}
+									</label>
+								</div>
+							</a>
 						</div>
 					</div>
 				</div>