From ad1c48b7eda578589d1774b1c5b913a448bd8b63 Mon Sep 17 00:00:00 2001
From: Helmut Merz <helmutm@cy55.de>
Date: Sun, 19 Feb 2023 12:39:20 +0100
Subject: [PATCH] getting on with petite vue <-> Hugo shortcodes

---
 assets/js/main.ts                | 20 ++++++++------------
 layouts/shortcodes/input.html    | 11 +++++++++++
 layouts/shortcodes/pv-count.html |  9 ++++++---
 3 files changed, 25 insertions(+), 15 deletions(-)
 create mode 100644 layouts/shortcodes/input.html

diff --git a/assets/js/main.ts b/assets/js/main.ts
index 693eed5..76d4991 100644
--- a/assets/js/main.ts
+++ b/assets/js/main.ts
@@ -3,20 +3,16 @@ import { createApp } from './lib/petite-vue.es.js'
 createApp({
 	$delimiters: ['{|', '|}'],
 	urlParams: new URL(location.href).searchParams,
-	save
+	mydata: Data(),
 }).mount()
 
-function save(text: string) {
-	console.log(text)
-}
-
-const s: string = 'test-string'
-save(s)
-
-for (let i = 0; i < 10; i++) {
-	  setTimeout(function () {
-		      console.log(i);
-	  }, 100 * i);
+function Data() {
+	return {
+		data: '',
+		save(txt: string) {
+			this.data += '\n' + txt
+		}
+	}
 }
 
 // p = new URL(location.href).searchParams
diff --git a/layouts/shortcodes/input.html b/layouts/shortcodes/input.html
new file mode 100644
index 0000000..50dd27c
--- /dev/null
+++ b/layouts/shortcodes/input.html
@@ -0,0 +1,11 @@
+<div v-scope>
+  <input type="text" name="txt"
+ 		 @change="mydata.save($el.value)" />
+</div>
+
+<div v-scope>
+  <pre>id = {| urlParams.get('id') |}</pre>
+  <pre v-effect="$el.textContent = mydata.data" ></pre>
+</div>
+
+
diff --git a/layouts/shortcodes/pv-count.html b/layouts/shortcodes/pv-count.html
index bfaa168..24da48a 100644
--- a/layouts/shortcodes/pv-count.html
+++ b/layouts/shortcodes/pv-count.html
@@ -1,4 +1,7 @@
-<div v-scope="{ count: 0 }">
-	  {| count |}
-	    <button @click="count++">inc</button>
+{{- $initval := default 0 (.Get "init") -}}
+{{- $expr := .Get "expr" | default "count++" -}}
+{{- $label := or (.Get "label") "inc" -}}
+<div v-scope="{ count: {{ $initval }} }">
+  {| count |}
+  <button @click="{{ $expr }}">{{ $label }}</button>
 </div>