feat: leaferApp

Author: FliPPeDround

docs/.vitepress/config.ts

@@ -20,7 +20,7 @@ export default defineConfig({
         text: '应用组件',
         items: [
           {
-            text: 'App',
+            text: 'LeaferApp',
             link: '/guide/components/app/app',
           },
           {

docs/guide/components/app/app.md

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import code from './leaferApp.vue?raw'
+</script>
+
 # lfApp 应用
 >
 > 用于创建应用的根组件，子组件只能为[lfLeafer](leafer.md)，详情查看[APP](https://www.leaferjs.com/ui/guide/display/App.html)。
@@ -15,3 +19,4 @@ import { lfApp, lfLeafer } from 'leafer-vue'
   </lfApp>
 </template>
 ```
+<Repl :code="code"  />

docs/guide/components/app/leaferApp.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { LeaferApp } from 'leafer-vue'
+import { ref } from 'vue'
+
+const rotation = ref(0)
+function animate() {
+  rotation.value += 1
+  requestAnimationFrame(animate)
+}
+animate()
+
+const fill = ref('#32cd79')
+function changeColor() {
+  fill.value = `#${Math.floor(Math.random() * 0xFFFFFF).toString(16)}`
+}
+</script>
+
+<template>
+  <LeaferApp :width="650" :height="340">
+    <Leafer @tap="changeColor">
+      <template
+        v-for="row in 33"
+        :key="row"
+      >
+        <Rect
+          v-for="col in 17"
+          :key="col"
+          :rotation="rotation"
+          :x="(row - 1) * 20" :y="(col - 1) * 20"
+          :width="15" :height="15"
+          :fill="fill"
+          :draggable="true"
+          @tap="changeColor"
+        />
+      </template>
+    </Leafer>
+  </LeaferApp>
+</template>

packages/vue3/types/index.ts

@@ -1,7 +1,8 @@
-import type { IRectInputData } from '@leafer-ui/interface'
+import type { ILeaferConfig, IRectInputData } from '@leafer-ui/interface'
 import type { LeaferVueComponent } from './LeaferVueComponent'
 
 interface LeaferVueComponents {
+  LeaferApp: LeaferVueComponent<ILeaferConfig>
   Rect: LeaferVueComponent<IRectInputData>
 }