refactor(60%): playground

playground/package.json

@@ -8,6 +8,7 @@
  "play:preview": "vite preview"
  },
  "dependencies": {
+ "@vueuse/core": "^10.11.0",
  "ace": "^1.3.0",
  "class-variance-authority": "^0.7.0",
  "clipboard-copy": "^4.0.1",

playground/src/App.vue

@@ -42,7 +42,10 @@ const codes
 // Newcar Playground will help you to do this work.
 export default function (nc, app) {
  const scene = nc.createScene(
- new nc.Circle(100)
+ new nc.Circle(200, {
+ x: 800,
+ y: 450
+ })
  .animate(nc.create().withAttr({ duration: 1 }))
  )
  app.checkout(scene)

playground/src/components/SettingDash.vue

@@ -2,6 +2,7 @@
 import { defineProps, ref } from 'vue'
 import {
  Dialog,
+ DialogClose,
  DialogContent,
  DialogTrigger,
 } from './ui/dialog'
@@ -17,10 +18,12 @@ const props = defineProps<{
 const skia = ref<string>(props.skia)
 const width = ref<string>(props.width.toString())
 const height = ref<string>(props.height.toString())
+
+const dialog = ref<HTMLElement>()
 </script>
 
 <template>
- <Dialog>
+ <Dialog ref="dialog">
  <DialogTrigger as-child>
  <slot />
  </DialogTrigger>
@@ -37,9 +40,11 @@ const height = ref<string>(props.height.toString())
  </div>
  </div>
  <div class="text-center">
- <Button @click="props.action(skia, Number(width), Number(height))">
- Submit
- </Button>
+ <DialogClose as-child>
+ <Button @click="props.action(skia, Number(width), Number(height)); dialog.removeAttribute('open')">
+ Submit
+ </Button>
+ </DialogClose>
  </div>
  </DialogContent>
  </Dialog>

playground/vite.config.ts

@@ -16,5 +16,6 @@ export default defineConfig({
  alias: {
  '@': path.resolve(__dirname, './src'),
  },
+ dedupe: ['vue'],
  },
 })