slidev-addon-infographic 1.0.0

package/README.md

@@ -0,0 +1,44 @@
+# slidev-addon-infographic
+
+[@antv/infographic](https://infographic.antv.vision/) component for slidev
+
+``` sh
+pnpm i slidev-addon-infographic --save
+```
+
+Add the following to your `slides.md`:
+
+``` md
+---
+layout: center
+addons:
+    - slidev-addon-infographic
+---
+
+<RenderWhen
+  :context="['visible', 'print', 'slide', 'overview', 'presenter', 'previewNext']"
+  style="height: 100%;">
+  <Infographic :data="`infographic list-row-simple-horizontal-arrow
+    data
+      items
+        - label 步骤 1
+          desc 开始
+        - label 步骤 2
+          desc 进行中
+        - label 步骤 3
+          desc 完成
+    `"></Infographic>
+</RenderWhen>
+```
+
+- **Infographic component must be used with RenderWhen component to show infographic in slidev**
+- **The Infographic component must occupy the entire page or be contained within elements with dimensions**
+- **Temporarily supports exporting in PPTX and PNG formats**
+
+1. **Infographic组件必须与RenderWhen组件一起使用，才能在幻灯片中显示信息图**
+2. **Infographic组件必须占用整个页面或被包含在带尺寸的元素中**
+3. **暂时支持导出 PPTX, PNG 格式**
+
+Edit the [slides.md](./slides.md) to see the changes.
+
+Learn more about Slidev at the [documentation](https://sli.dev/).

package/components/Infographic.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="containerRef" style="width: 100%;height: 100%;"></div>
+</template>
+
+<script setup>
+import { useDarkMode } from '@slidev/client'
+import {ref, watch, onMounted, onUnmounted} from 'vue'
+import {Infographic} from '@antv/infographic'
+
+const props = defineProps(['data'])
+
+const containerRef = ref(null)
+let infographic = null
+const { isDark } = useDarkMode()
+
+function initInfographic(data) {
+  if (infographic) infographic.destroy()
+  infographic = new Infographic({
+    container: containerRef.value,
+    width: '100%',
+    height: '100%',
+  })
+  data && infographic.render(data)
+}
+
+onMounted(() => {
+  initInfographic(props.data)
+})
+
+onUnmounted(() => {
+  if (infographic) {
+    infographic.destroy()
+  }
+})
+
+watch(() => props.data, (newData) => {
+  newData && initInfographic(newData)
+})
+watch(() => isDark.value, (newDark) => {
+  if (newDark) {
+    infographic.update({
+      theme: 'dark',
+    })
+  } else {
+    infographic.update({
+      theme: 'light',
+    })
+  }
+})
+</script>

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "slidev-addon-infographic",
+  "version": "1.0.0",
+  "type": "module",
+  "author": "fxss5201",
+  "description": "@antv/infographic component for slidev",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:fxss5201/slidev-addon-infographic.git"
+  },
+  "scripts": {
+    "build": "slidev build",
+    "dev": "slidev --open",
+    "export": "slidev export"
+  },
+  "dependencies": {
+    "@antv/infographic": "^0.2.7"
+  },
+  "devDependencies": {
+    "@slidev/cli": "^52.11.2",
+    "@slidev/theme-default": "^0.25.0",
+    "@slidev/theme-seriph": "^0.25.0",
+    "vue": "^3.5.26"
+  },
+  "keywords": [
+    "slidev",
+    "slidev-addon",
+    "@antv/infographic"
+  ],
+  "files": [
+    "components/Infographic.vue"
+  ]
+}