docs: update demo

abichinger · abichinger · commit d455eace84c2 · 2024-11-14T17:09:26.000+01:00
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -17,7 +17,8 @@
     "@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/naive-ui": "file:../naive-ui",
+    "@vue-js-cron/prime": "file:../prime"
   },
   "devDependencies": {
     "@tsconfig/node18": "^18.2.2",
diff --git a/demo/prime/index.html b/demo/prime/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/prime-main.ts"></script>
+  </body>
+</html>
diff --git a/demo/src/presets/Noir.ts b/demo/src/presets/Noir.ts
@@ -0,0 +1,50 @@
+import { definePreset } from '@primevue/themes'
+import Aura from '@primevue/themes/aura'
+
+export const Noir = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '{surface.50}',
+      100: '{surface.100}',
+      200: '{surface.200}',
+      300: '{surface.300}',
+      400: '{surface.400}',
+      500: '{surface.500}',
+      600: '{surface.600}',
+      700: '{surface.700}',
+      800: '{surface.800}',
+      900: '{surface.900}',
+      950: '{surface.950}',
+    },
+    colorScheme: {
+      light: {
+        primary: {
+          color: '{primary.950}',
+          contrastColor: '#ffffff',
+          hoverColor: '{primary.900}',
+          activeColor: '{primary.800}',
+        },
+        highlight: {
+          background: '{primary.950}',
+          focusBackground: '{primary.700}',
+          color: '#ffffff',
+          focusColor: '#ffffff',
+        },
+      },
+      dark: {
+        primary: {
+          color: '{primary.50}',
+          contrastColor: '{primary.950}',
+          hoverColor: '{primary.100}',
+          activeColor: '{primary.200}',
+        },
+        highlight: {
+          background: '{primary.50}',
+          focusBackground: '{primary.300}',
+          color: '{primary.950}',
+          focusColor: '{primary.950}',
+        },
+      },
+    },
+  },
+})
diff --git a/demo/src/prime-main.ts b/demo/src/prime-main.ts
@@ -0,0 +1,28 @@
+// 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'
+
+export async function setup(app: VueApp) {
+  // imports
+  await import('primeicons/primeicons.css')
+
+  // uses
+  let module = null
+
+  // register cron component
+  await import('@vue-js-cron/prime/dist/prime.css')
+  module = await import('@vue-js-cron/prime')
+  app.component('cron-editor', module['CronPrime'])
+}
+
+async function main() {
+  const app = createApp(App)
+  await setup(app)
+  await customSetup('prime', app)
+  app.mount('#app')
+}
+
+main()
diff --git a/demo/src/setup.ts b/demo/src/setup.ts
@@ -28,6 +28,22 @@ async function customAntSetup() {
   }
 }
 
+async function customPrimeSetup(app: App) {
+  const PrimeVue = await import('primevue/config')
+  const { Noir } = await import('@/presets/Noir')
+
+  app.use(PrimeVue.default, {
+    theme: {
+      preset: Noir,
+      options: {
+        prefix: 'p',
+        darkModeSelector: '.p-dark',
+        cssLayer: false,
+      },
+    },
+  })
+}
+
 export const customSetup = async (flavor: string, app: App) => {
   switch (flavor) {
     case 'ant':
@@ -45,5 +61,8 @@ export const customSetup = async (flavor: string, app: App) => {
       break
     case 'naive-ui':
       break
+    case 'prime':
+      await customPrimeSetup(app)
+      break
   }
 }
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
@@ -22,6 +22,7 @@ export default defineConfig({
         light: resolve(__dirname, 'light/index.html'),
         'element-plus': resolve(__dirname, 'element-plus/index.html'),
         'naive-ui': resolve(__dirname, 'naive-ui/index.html'),
+        prime: resolve(__dirname, 'prime/index.html'),
         quasar: resolve(__dirname, 'quasar/index.html'),
         vuetify: resolve(__dirname, 'vuetify/index.html'),
       },
