feat: add playground

zyyv · Mar 4, 2024 · a700366 · a700366
1 parent 02f0105
commit a700366
Show file tree

Hide file tree

Showing 15 changed files with 2,239 additions and 54 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/package.json b/playground/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "playground",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.9.0",
+    "vue": "^3.4.19"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "magic-color": "workspace:*",
+    "typescript": "^5.2.2",
+    "unocss": "^0.58.5",
+    "unocss-preset-useful": "^0.4.1",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.1.4",
+    "vue-tsc": "^2.0.4"
+  }
+}
diff --git a/playground/public/vite.svg b/playground/public/vite.svg
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+
+
+</script>
+
+<template>
+  <Toggle />
+</template>
+
+
diff --git a/playground/src/auto-imports.d.ts b/playground/src/auto-imports.d.ts
diff --git a/playground/src/components.d.ts b/playground/src/components.d.ts
@@ -0,0 +1,14 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Item: typeof import('./components/ListColor.vue')['default']
+    ListColor: typeof import('./components/ListColor.vue')['default']
+    Toggle: typeof import('./components/Toggle.vue')['default']
+  }
+}
diff --git a/playground/src/components/ListColor.vue b/playground/src/components/ListColor.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { theme as themes } from 'magic-color'
+
+defineProps<{
+  theme: ReturnType<typeof themes>
+}>()
+</script>
+
+<template>
+  <ul fcc text-white gap-8 mt-10>
+    <li fccc v-for="(v, k) in theme" :key="k">
+      <div w-10 h-10 :style="{ backgroundColor: v }"></div>
+      <span>{{ k }}</span>
+    </li>
+  </ul>
+</template>
diff --git a/playground/src/components/Toggle.vue b/playground/src/components/Toggle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { theme } from 'magic-color'
+const color = ref('#d6bbff')
+
+const results = computed(() => {
+  try {
+    return theme(color.value)
+  } catch (e) {
+    return {} as any
+  }
+})
+
+</script>
+
+<template>
+  <h1>Magic Color</h1>
+  <input type="text" v-model="color">
+
+  <ListColor :theme="results" />
+</template>
diff --git a/playground/src/main.ts b/playground/src/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import 'uno.css'
+import './style.css'
+
+createApp(App).mount('#app')
diff --git a/playground/src/style.css b/playground/src/style.css
@@ -0,0 +1,3 @@
+html,body{
+  background: #222;
+}
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["esnext", "dom"],
+    "types": [
+      "vite/client"
+    ]
+  }
+}
diff --git a/playground/uno.config.ts b/playground/uno.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'unocss'
+import { presetUseful } from 'unocss-preset-useful'
+
+export default defineConfig({
+  presets: [
+    presetUseful(),
+  ],
+})
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import Components from 'unplugin-vue-components/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    UnoCSS(),
+    AutoImport({
+      imports: [
+        'vue',
+        '@vueuse/core',
+      ],
+      dirs: [
+        'src/composables',
+      ],
+      vueTemplate: true,
+      dts: 'src/auto-imports.d.ts',
+    }),
+    Components({
+      dts: 'src/components.d.ts',
+    }),
+  ],
+})