From 4d2236a06c858ef6f0c8998b3884b5113d8ad551 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Wed, 14 Aug 2024 10:36:12 +0800
Subject: [PATCH] chore: Add TS Enum Util page and update index-page.vue

---
 src/pages/index-page.vue   |  1 +
 src/pages/ts-enum-util.vue | 57 ++++++++++++++++++++++++++++++++++++++
 typed-router.d.ts          |  1 +
 3 files changed, 59 insertions(+)
 create mode 100644 src/pages/ts-enum-util.vue

diff --git a/src/pages/index-page.vue b/src/pages/index-page.vue
index d516d90..cfaa0e6 100644
--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@@ -7,4 +7,5 @@ definePage({
 <template>
   <h1>Index Page</h1>
   <router-link :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link>
+  <router-link :to="{ name: 'TsEnumUtil' }">TS Enum Util</router-link>
 </template>
diff --git a/src/pages/ts-enum-util.vue b/src/pages/ts-enum-util.vue
new file mode 100644
index 0000000..94bc4ef
--- /dev/null
+++ b/src/pages/ts-enum-util.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { $enum } from 'ts-enum-util';
+enum Direction {
+  Up = 'UP',
+  Down = 'DOWN',
+  Left = 'LEFT',
+  Right = 'RIGHT',
+}
+
+enum TestEnum {
+  A,
+  B,
+}
+
+const visitValue = (value: any) => {
+  $enum.visitValue(value).with({
+    [Direction.Up]: () => {},
+    [Direction.Down]: () => {},
+    [Direction.Left]: () => {},
+    [Direction.Right]: () => {},
+    [$enum.handleNull]: () => {},
+    [$enum.handleUndefined]: () => {},
+    [$enum.handleUnexpected]: () => {},
+  });
+};
+
+const mapValue = (value: any) => {
+  return $enum.mapValue(value).with({
+    [Direction.Up]: 'Up',
+    [Direction.Down]: 'Down',
+    [Direction.Left]: 'Left',
+    [Direction.Right]: 'Right',
+    [$enum.handleNull]: 'Null',
+    [$enum.handleUndefined]: 'Undefined',
+    [$enum.handleUnexpected]: 'Unexpected',
+  });
+};
+</script>
+
+<template>
+  <h1>TS Enum Util</h1>
+  <div flex="~ row">
+    <button @click="$router.back()">Back</button>
+  </div>
+  <main>
+    <p>TestEnum: {{ TestEnum }}</p>
+    <p>Direction: {{ Direction }}</p>
+    <ul list-circle>
+      <li>{{ `.getKeys(): ${$enum(Direction).getKeys()}` }}</li>
+      <li>{{ `.getValues(): ${$enum(Direction).getValues()}` }}</li>
+      <li><button @click="visitValue(Direction.Up)">Visit Value</button></li>
+      <li>{{ `.mapValue(null): ${mapValue(null)}` }}</li>
+      <li>getKeyOrDefault</li>
+      <li>getValueOrDefault</li>
+    </ul>
+  </main>
+</template>
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 3195871..9b941ed 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -20,5 +20,6 @@ declare module 'vue-router/auto-routes' {
   export interface RouteNamedMap {
     'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'IndexPage': RouteRecordInfo<'IndexPage', '/index-page', Record<never, never>, Record<never, never>>,
+    'TsEnumUtil': RouteRecordInfo<'TsEnumUtil', '/ts-enum-util', Record<never, never>, Record<never, never>>,
   }
 }