create-slidev 0.48.9 → 0.49.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-slidev",
   "type": "module",
-  "version": "0.48.9",
+  "version": "0.49.0-beta.2",
   "description": "Create starter template for Slidev",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",

package/template/package.json

@@ -8,7 +8,7 @@
     "export": "slidev export"
   },
   "dependencies": {
-    "@slidev/cli": "^0.48.9",
+    "@slidev/cli": "^0.49.0-beta.2",
     "@slidev/theme-default": "latest",
     "@slidev/theme-seriph": "latest",
     "vue": "^3.4.21"

package/template/slides.md

@@ -559,6 +559,43 @@ database "MySql" {
 
 [Learn More](https://sli.dev/guide/syntax.html#diagrams)
 
+---
+foo: bar
+dragPos:
+  square: 691,33,167,_,-16
+---
+
+# Draggable Elements
+
+Double-click on the draggable elements to edit their positions.
+
+<br>
+
+###### Directive Usage
+
+```md
+<img v-drag="'square'" src="https://sli.dev/logo.png">
+```
+
+<br>
+
+###### Component Usage
+
+```md
+<v-drag text-3xl>
+  <carbon:arrow-up />
+  Use the `v-drag` component to have a draggable container!
+</v-drag>
+```
+
+<v-drag pos="671,205,253,_,-15">
+  <div text-center text-3xl border border-main rounded>
+    Double-click me!
+  </div>
+</v-drag>
+
+<img v-drag="'square'" src="https://sli.dev/logo.png">
+
 ---
 src: ./pages/multiple-entries.md
 hide: false
@@ -574,23 +611,20 @@ Add `{monaco}` to the code block to turn it into an editor:
 
 ```ts {monaco}
 import { ref } from 'vue'
-import hello from './external'
+import { emptyArray } from './external'
 
-const code = ref(hello())
+const arr = ref(emptyArray(10))
 ```
 
 Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
 
 ```ts {monaco-run}
 import { version } from 'vue'
+import { emptyArray, sayHello } from './external'
 
-function fibonacci(n: number): number {
-  return n <= 1
-    ? n
-    : fibonacci(n - 1) + fibonacci(n - 2) // you know, this is NOT the best way to do it :P
-}
-
-console.log(version, Array.from({ length: 10 }, (_, i) => fibonacci(i + 1)))
+sayHello()
+console.log(`vue ${version}`)
+console.log(emptyArray<number>(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1]))
 ```
 
 ---

package/template/snippets/external.ts

@@ -1,9 +1,12 @@
 /* eslint-disable no-console */
 
 // #region snippet
-function hello() {
-  console.log('Hello from snippets/external.ts')
+// Inside ./snippets/external.ts
+export function emptyArray<T>(length: number) {
+  return Array.from<T>({ length })
 }
 // #endregion snippet
 
-export default hello
+export function sayHello() {
+  console.log('Hello from snippets/external.ts')
+}