整理

src/pages/Tool/ts-enum-util.page.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { $enum } from 'ts-enum-util';
+
+enum Direction {
+  Down = 'DOWN',
+  Left = 'LEFT',
+  Right = 'RIGHT',
+  Up = 'UP',
+}
+
+enum TestEnum {
+  A,
+  B,
+}
+
+const visitValue = (value: Direction | null | undefined) => {
+  $enum.visitValue(value).with({
+    [$enum.handleNull]: () => {},
+    [$enum.handleUndefined]: () => {},
+    [$enum.handleUnexpected]: () => {},
+    [Direction.Down]: () => {},
+    [Direction.Left]: () => {},
+    [Direction.Right]: () => {},
+    [Direction.Up]: () => {},
+  });
+};
+
+const mapValue = (value: Direction | null | undefined) => {
+  return $enum.mapValue(value).with({
+    [$enum.handleNull]: 'Null',
+    [$enum.handleUndefined]: 'Undefined',
+    [$enum.handleUnexpected]: 'Unexpected',
+    [Direction.Down]: 'Down',
+    [Direction.Left]: 'Left',
+    [Direction.Right]: 'Right',
+    [Direction.Up]: 'Up',
+  });
+};
+</script>
+
+<template>
+  <h1>TS Enum Util</h1>
+  <div flex="~ row">
+    <button class="green" @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 class="green" @click="visitValue(Direction.Up)">Visit Value</button></li>
+      <li>{{ `.mapValue(null): ${mapValue(null)}` }}</li>
+      <li>getKeyOrDefault</li>
+      <li>getValueOrDefault</li>
+    </ul>
+  </main>
+</template>