From c1019a006bfa48ba7398daa02788c50be0bfb35a Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 18 Jan 2024 18:21:33 +0900
Subject: feat(frontend): 横スワイプでタブを切り替える機能 (#13011)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* (add) 横スワイプでタブを切り替える機能

* Change Changelog

* y方向の移動が一定量を超えたらスワイプを中断するように

* Update swipe distance thresholds

* Remove console.log

* adjust threshold

* rename, use v-model

* fix

* Update MkHorizontalSwipe.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

* use css module

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/frontend/src/pages/explore.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

(limited to 'packages/frontend/src/pages/explore.vue')

diff --git a/packages/frontend/src/pages/explore.vue b/packages/frontend/src/pages/explore.vue
index f068de8880..1b80014366 100644
--- a/packages/frontend/src/pages/explore.vue
+++ b/packages/frontend/src/pages/explore.vue
@@ -6,17 +6,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div>
-		<div v-if="tab === 'featured'">
+	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+		<div v-if="tab === 'featured'" key="featured">
 			<XFeatured/>
 		</div>
-		<div v-else-if="tab === 'users'">
+		<div v-else-if="tab === 'users'" key="users">
 			<XUsers/>
 		</div>
-		<div v-else-if="tab === 'roles'">
+		<div v-else-if="tab === 'roles'" key="roles">
 			<XRoles/>
 		</div>
-	</div>
+	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>
 
@@ -26,6 +26,7 @@ import XFeatured from './explore.featured.vue';
 import XUsers from './explore.users.vue';
 import XRoles from './explore.roles.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 
-- 
cgit v1.2.3-freya