add 'action' parameter to exec() for overriding default action

assets/js/common.ts

@@ -60,13 +60,14 @@ function Data(name, action, domain: string): object {
 		data: {}, 	// model (2-way data store)
 		exec		// default function to execute upon button click
 	}
-	appdata.components[name] = comp
+	this.components[name] = comp
 	return comp
 }
 
 // appdata and component method definitions
 
-function exec() {
+function exec(action: string) {
+	action = action || this.action
 	const data = this.data
 	const conf = this.conf
 	let value = ''
@@ -75,14 +76,13 @@ function exec() {
 	}
 	this.output += '\n' + value
 	console.log('exec:', value)
-	sendMsg(conf, [this.domain, this.action, this.name, data.id], data)
+	sendMsg(conf, [this.domain, action, this.name, data.id], data)
 }
 
 function handle(msg) {
 	const data = JSON.parse(msg.payload)
 	const [ domain, action, class_, item ] = msg.path.split('/')
-	//console.log('msgbase: ', domain, action, class_, item)
+	// TODO: check action => select handler fct
-	// TODO: check message parts (using default values), select handler fct
 	const comp = this.components[class_ || 'data']
 	if (domain && domain != comp.domain) {
 		return

exampleSite/content/app/test1.md

@@ -19,7 +19,7 @@ cyberscopes example site - use petite-vue in Hugo-generated sites.
   First Name: {{< pv/input-textline name="firstname" attrs="autofocus" >}}
   Last Name: {{< pv/input-textline name="lastname" >}}
   Email: {{< pv/input-textline name="email" default="hm@cy55.de" >}}
-  {{< pv/button >}}
+  {{< pv/button action="save" >}}
 
   {{< pv/display linkto="data.id"
         expr="`${data.firstname} ${data.lastname}`.trim() || '???'" >}}

layouts/shortcodes/pv/button.html

@@ -2,8 +2,9 @@
 {{- $name := .Get "name" | default "submit" -}}
 {{- $label := .Get "label" | default (title $name) -}}
 {{- $exec := .Get "exec" | default "exec" -}}
+{{- $action := .Get "action" | default "" -}}
 <div v-scope>
   <button type="{{ $type }}" name="{{$name}}"
-		  @click="{{ $exec }}">{{$label}}</button>
+		  @click="{{ $exec }}('{{ $action }}')">{{$label}}</button>
 </div>