refactor(frontend): カスタムディレクティブの型付け (#16659)

* refactor(frontend): カスタムディレクティブの型付け

* fix

1 files changed, 41 insertions, 25 deletions

diff --git a/packages/frontend/src/directives/index.ts b/packages/frontend/src/directives/index.ts
index 9555045afe..07b756b95d 100644
--- a/packages/frontend/src/directives/index.ts
+++ b/packages/frontend/src/directives/index.ts
@@ -3,19 +3,19 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type { App } from 'vue';
+import type { App, Directive } from 'vue';
 
-import userPreview from './user-preview.js';
-import getSize from './get-size.js';
-import ripple from './ripple.js';
-import tooltip from './tooltip.js';
-import hotkey from './hotkey.js';
-import appear from './appear.js';
-import anim from './anim.js';
-import clickAnime from './click-anime.js';
-import panel from './panel.js';
-import adaptiveBorder from './adaptive-border.js';
-import adaptiveBg from './adaptive-bg.js';
+import { userPreviewDirective } from './user-preview.js';
+import { getSizeDirective } from './get-size.js';
+import { rippleDirective } from './ripple.js';
+import { tooltipDirective } from './tooltip.js';
+import { hotkeyDirective } from './hotkey.js';
+import { appearDirective } from './appear.js';
+import { animDirective } from './anim.js';
+import { clickAnimeDirective } from './click-anime.js';
+import { panelDirective } from './panel.js';
+import { adaptiveBorderDirective } from './adaptive-border.js';
+import { adaptiveBgDirective } from './adaptive-bg.js';
 
 export default function(app: App) {
 	for (const [key, value] of Object.entries(directives)) {
@@ -24,16 +24,32 @@ export default function(app: App) {
 }
 
 export const directives = {
-	'userPreview': userPreview,
-	'user-preview': userPreview,
-	'get-size': getSize,
-	'ripple': ripple,
-	'tooltip': tooltip,
-	'hotkey': hotkey,
-	'appear': appear,
-	'anim': anim,
-	'click-anime': clickAnime,
-	'panel': panel,
-	'adaptive-border': adaptiveBorder,
-	'adaptive-bg': adaptiveBg,
-};
+	'userPreview': userPreviewDirective,
+	'user-preview': userPreviewDirective,
+	'get-size': getSizeDirective,
+	'ripple': rippleDirective,
+	'tooltip': tooltipDirective,
+	'hotkey': hotkeyDirective,
+	'appear': appearDirective,
+	'anim': animDirective,
+	'click-anime': clickAnimeDirective,
+	'panel': panelDirective,
+	'adaptive-border': adaptiveBorderDirective,
+	'adaptive-bg': adaptiveBgDirective,
+} as Record<string, Directive>;
+
+declare module 'vue' {
+	export interface ComponentCustomProperties {
+		vUserPreview: typeof userPreviewDirective;
+		vGetSize: typeof getSizeDirective;
+		vRipple: typeof rippleDirective;
+		vTooltip: typeof tooltipDirective;
+		vHotkey: typeof hotkeyDirective;
+		vAppear: typeof appearDirective;
+		vAnim: typeof animDirective;
+		vClickAnime: typeof clickAnimeDirective;
+		vPanel: typeof panelDirective;
+		vAdaptiveBorder: typeof adaptiveBorderDirective;
+		vAdaptiveBg: typeof adaptiveBgDirective;
+	}
+}