chore: fix demo

Author: abichinger

demo/package-lock.json

@@ -11,25 +11,25 @@
     "generate": "npx cron-cli demo-setup ."
   },
   "dependencies": {
-    "vue": "^3.3.4",
     "@vue-js-cron/ant": "file:../ant",
     "@vue-js-cron/core": "file:../core",
     "@vue-js-cron/element-plus": "file:../element-plus",
     "@vue-js-cron/light": "file:../light",
-    "@vue-js-cron/vuetify": "file:../vuetify",
     "@vue-js-cron/naive-ui": "file:../naive-ui",
-    "@vue-js-cron/prime": "file:../prime"
+    "@vue-js-cron/prime": "file:../prime",
+    "@vue-js-cron/vuetify": "file:../vuetify",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@tsconfig/node18": "^18.2.2",
     "@types/node": "^18.18.5",
     "@vitejs/plugin-vue": "^4.4.0",
+    "@vue-js-cron/generated": "file:../generated",
     "@vue/tsconfig": "^0.4.0",
+    "naive-ui": "^2.35.0",
     "npm-run-all2": "^6.1.1",
     "typescript": "~5.2.0",
     "vite": "^4.4.11",
-    "vue-tsc": "^1.8.19",
-    "@vue-js-cron/generated": "file:../generated",
-    "naive-ui": "^2.35.0"
+    "vue-tsc": "^1.8.19"
   }
 }

demo/package.json

@@ -1,35 +1,28 @@
 <template>
-  <n-config-provider :theme="theme">
-    <main class="cron-demo" :dir="dir">
-      <cron-editor v-bind="props" v-model="value"></cron-editor>
-      <p>cron expression: {{ value }}</p>
-    </main>
-  </n-config-provider>
+  <main class="cron-demo" :class="{ dark: prefersDark() }" :dir="dir">
+    <cron-editor v-bind="props" v-model="value"></cron-editor>
+    <p>cron expression: {{ value }}</p>
+  </main>
 </template>
 
 <script lang="ts">
-import { NConfigProvider, darkTheme, lightTheme } from 'naive-ui'
 import { defineComponent, ref } from 'vue'
 import { prefersDark } from './util'
 
 export default defineComponent({
-  components: {
-    NConfigProvider,
-  },
   setup() {
     const query = window.location.search
     const params = new URLSearchParams(query)
     const props = Object.fromEntries(params.entries())
 
     const value = ref(params.get('initial-value') ?? '* * * * *')
-    const theme = prefersDark() ? darkTheme : lightTheme
     const dir = ['he'].includes(params.get('locale') ?? '') ? 'rtl' : 'ltr'
 
     return {
       props: props,
       value: ref(value),
-      theme,
       dir,
+      prefersDark,
     }
   },
 })

demo/src/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <n-config-provider :theme="theme">
+    <App />
+  </n-config-provider>
+</template>
+
+<script setup lang="ts">
+import { NConfigProvider, darkTheme, lightTheme } from 'naive-ui'
+import App from './App.vue'
+import { prefersDark } from './util'
+
+const theme = prefersDark() ? darkTheme : lightTheme
+</script>
+
+<style>
+.cron-demo p {
+  margin-top: 1rem;
+}
+</style>

demo/src/NaiveUIApp.vue

@@ -1,9 +1,9 @@
 // Generated file, do not modify
 import './assets/main.css'
 import { createApp } from 'vue'
-import App from './App.vue'
 import type { App as VueApp } from 'vue'
 import { customSetup } from './setup'
+import App from './App.vue'
 
 export async function setup(app: VueApp) {
   // imports

demo/src/ant-main.ts

@@ -1,9 +1,9 @@
 // Generated file, do not modify
 import './assets/main.css'
 import { createApp } from 'vue'
-import App from './App.vue'
 import type { App as VueApp } from 'vue'
 import { customSetup } from './setup'
+import App from './App.vue'
 
 export async function setup(app: VueApp) {
   // imports

demo/src/element-plus-main.ts

@@ -1,9 +1,9 @@
 // Generated file, do not modify
 import './assets/main.css'
 import { createApp } from 'vue'
-import App from './App.vue'
 import type { App as VueApp } from 'vue'
 import { customSetup } from './setup'
+import App from './App.vue'
 
 export async function setup(app: VueApp) {
   // imports

demo/src/light-main.ts

@@ -1,9 +1,9 @@
 // Generated file, do not modify
 import './assets/main.css'
 import { createApp } from 'vue'
-import App from './App.vue'
 import type { App as VueApp } from 'vue'
 import { customSetup } from './setup'
+import App from './NaiveUIApp.vue'
 
 export async function setup(app: VueApp) {
   // imports

demo/src/naive-ui-main.ts

@@ -1,9 +1,9 @@
 // Generated file, do not modify
 import './assets/main.css'
 import { createApp } from 'vue'
-import App from './App.vue'
 import type { App as VueApp } from 'vue'
 import { customSetup } from './setup'
+import App from './App.vue'
 
 export async function setup(app: VueApp) {
   // imports

demo/src/prime-main.ts

@@ -1,9 +1,9 @@
 // Generated file, do not modify
 import './assets/main.css'
 import { createApp } from 'vue'
-import App from './App.vue'
 import type { App as VueApp } from 'vue'
 import { customSetup } from './setup'
+import App from './App.vue'
 
 export async function setup(app: VueApp) {
   // imports