add Data component, use via fieldset shortcode

assets/js/common.ts

@@ -15,18 +15,6 @@ export function config (api, polling): confdata {
 	return { apiurl: api.path, pollurl: pu, itemid: urlparams.get('id') }
 }
 
-const appdata = {
-	$delimiters: ['{|', '|}'],
-	conf: {} as confdata,
-	data: {},
-	output: '',
-	save,
-	poll,
-	mounted(name: string) {
-		console.log('app mounted: ', name)
-	}
-}
-
 export const pvapp = {
 	run(conf: confdata) {
 		appdata.conf = conf
@@ -37,6 +25,18 @@ export const pvapp = {
 	}
 }
 
+const appdata = {
+	$delimiters: ['{|', '|}'],
+	conf: {} as confdata,
+	output: '',
+	poll,
+	mounted(name: string) {
+		console.log('app mounted: ', name)
+	},
+	Data
+}
+
+
 // components
 
 function Data() {
@@ -46,7 +46,7 @@ function Data() {
 	}
 }
 
-// appdata method definitions
+// appdata and component method definitions
 
 function save() {
 	let value = ''

exampleSite/content/app/test1.md

@@ -5,7 +5,7 @@ img:
 pageid: test1
 domains: [App]
 topics: [Examples]
-date:   2023-03-01
+date:   2023-03-02
 author: helmutm
 draft:  false
 weight: 10
@@ -14,12 +14,17 @@ jsModule: main.ts
 
 cyberscopes example site - use petite-vue in Hugo-generated sites.
 
-{{< pv/input-textline name="firstname" attrs="autofocus" >}}
-{{< pv/input-textline name="lastname" >}}
-{{< pv/button >}}
+{{< pv/fieldset >}}
 
-{{< pv/display expr="`${data.firstname} ${data.lastname}`.trim() || '???'" >}}
+  {{< pv/input-textline name="firstname" attrs="autofocus" >}}
+  {{< pv/input-textline name="lastname" >}}
+  {{< pv/button >}}
 
-{{< pv/display name="email" >}}
+  {{< pv/display expr="`${data.firstname} ${data.lastname}`.trim() || '???'" >}}
+
+  {{< pv/display name="email" >}}
+
+{{< /pv/fieldset >}}
 
 {{< pv/debug >}}
+

layouts/shortcodes/pv/debug.html

@@ -1,8 +1,11 @@
 <div v-scope>
+
+<div @vue:mounted="mounted('itemid')">
   <div>id = {| conf.itemid |}</div>
 </div>
 
-<div v-scope @vue:mounted="mounted('output')">
+<div @vue:mounted="mounted('output')">
   <pre v-text="output"></pre>
 </div>
 
+</div>

layouts/shortcodes/pv/display.html

@@ -1,6 +1,6 @@
 {{- $name := .Get "name" | default "textline" -}}
 {{- $expr := .Get "expr" | default (printf "data.%s" $name) -}}
 {{- $default := .Get "default" | default "" -}}
-<div v-scope>
+<div>
   <pre v-text="{{ $expr }}"></pre>
 </div>

layouts/shortcodes/pv/explore.html

@@ -1,19 +1,19 @@
-<div v-scope>
+<div v-scope="Data()">
   <input type="text" name="txt" autofocus
 		 v-model="data.txt"
 		 @vue:mounted="$el.value = ''"
  		 @change="save($el.value)" />
-</div>
 
-<div v-scope @vue:mounted="mounted('data')">
-  <pre v-text="data"></pre>
-</div>
+  <div @vue:mounted="mounted('data')">
+	<pre v-text="data"></pre>
+  </div>
 
-<div v-scope @vue:mounted="mounted('output')">
-  <pre v-text="output"></pre>
-</div>
+  <div @vue:mounted="mounted('output')">
+    <pre v-text="output"></pre>
+  </div>
 
-<div v-scope>
-  <div>id = {| conf.itemid |}</div>
-</div>
+  <div>
+    <div>id = {| conf.itemid |}</div>
+  </div>
 
+</div>

layouts/shortcodes/pv/fieldset.html

@@ -0,0 +1,3 @@
+<div v-scope="Data()">
+	{{ .Inner }}
+</div>

layouts/shortcodes/pv/input-textline.html

@@ -3,7 +3,7 @@
 {{- $default := .Get "default" | default "" -}}
 {{- $attrs := .Get "attrs" | default "" -}}
 {{- $onchange := .Get "onchange" | default "" -}}
-<div v-scope>
+<div>
   <input type="{{ $type }}" name="{{ $name }}" {{ $attrs }}
 		 v-model="data.{{ $name }}"
 		 @vue:mounted="data.{{ $name }} = '{{ $default }}'"