feat: revamp demo

demo/examples/PolarChart.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use } from "echarts/core";
 import { LineChart } from "echarts/charts";
 import {
@@ -7,10 +7,12 @@ import {
   LegendComponent,
   TooltipComponent,
 } from "echarts/components";
-import { computed, shallowRef } from "vue";
+import { computed, shallowRef, watch } from "vue";
+import type { LoadingOptions, Option, Theme } from "../../src/types";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import getData from "../data/polar";
+import { useDemoDark } from "../composables/useDemoDark";
 
 use([
   LineChart,
@@ -20,47 +22,61 @@ use([
   TooltipComponent,
 ]);
 
-const option = shallowRef(getData());
-const theme = shallowRef("dark");
+const isDark = useDemoDark();
+const themeSelection = shallowRef<"dark" | "default">(
+  isDark.value ? "dark" : "default",
+);
+const option = shallowRef<Option>(getData());
 const loading = shallowRef(false);
-const loadingOptions = computed(() =>
-  theme.value === "dark"
+
+const theme = computed<Theme | undefined>(() =>
+  themeSelection.value === "dark" ? "dark" : undefined,
+);
+
+const loadingOptions = computed<LoadingOptions | undefined>(() =>
+  themeSelection.value === "dark"
     ? {
         color: "#fff",
         textColor: "#fff",
         maskColor: "rgba(0, 0, 0, 0.7)",
       }
-    : null,
+    : undefined,
 );
-const style = computed(() => {
-  return theme.value === "dark"
-    ? loading.value
-      ? "background-color: #05040d"
-      : "background-color: #100c2a"
-    : "";
+
+const chartStyle = computed(() => {
+  if (themeSelection.value !== "dark") {
+    return "";
+  }
+  return loading.value
+    ? "background-color: #05040d"
+    : "background-color: #100c2a";
+});
+
+watch(isDark, (value) => {
+  themeSelection.value = value ? "dark" : "default";
 });
 </script>
 
 <template>
-  <v-example id="polar" title="Polar plot" desc="(with built-in theme)">
-    <v-chart
+  <VExample id="polar" title="Polar plot" desc="built-in theme">
+    <VChart
       :option="option"
       autoresize
       :loading="loading"
       :loading-options="loadingOptions"
       :theme="theme"
-      :style="style"
+      :style="chartStyle"
     />
     <template #extra>
       <p class="actions">
         Theme
-        <select v-model="theme">
-          <option :value="null">Default</option>
+        <select v-model="themeSelection">
+          <option value="default">Default</option>
           <option value="dark">Dark</option>
         </select>
-        <input id="loading-check" type="checkbox" v-model="loading" />
+        <input id="loading-check" v-model="loading" type="checkbox" />
         <label for="loading-check">Loading</label>
       </p>
     </template>
-  </v-example>
+  </VExample>
 </template>