reorganize stuff/app pages; Data component: make action configurable

assets/js/common.ts

@@ -50,11 +50,12 @@ const appdata = {
 
 // components
 
-function Data(name: string): object {
+function Data(name: string, action: string): object {
 	const comp = {
-		name: name,
-		data: {},
-		save
+		name: name, // matches/determines class of incoming/outgoing message
+		action: action, // (default) action of outgoing message
+		data: {}, 	// model (2-way data store)
+		exec		// default function to execute upon button click
 	}
 	appdata.components[name] = comp
 	return comp
@@ -62,7 +63,7 @@ function Data(name: string): object {
 
 // appdata and component method definitions
 
-function save() {
+function exec() {
 	const data = this.data
 	const conf = this.conf
 	let value = ''
@@ -70,8 +71,8 @@ function save() {
 		value += `${k}: ${data[k]}, `
 	}
 	this.output += '\n' + value
-	console.log('save:', value)
-	sendMsg(conf, [conf.domain, 'data', this.name, data.id], data)
+	console.log('exec:', value)
+	sendMsg(conf, [conf.domain, this.action, this.name, data.id], data)
 }
 
 function poll() {
@@ -83,7 +84,7 @@ function handle(msg) {
 	const [ domain, action, class_, item ] = msg.path.split('/')
 	//console.log('msgbase: ', domain, action, class_, item)
 	// TODO: check message parts (using default values), select handler fct
-	Object.assign(this.components[class_].data, data)
+	Object.assign(this.components[class_ || 'data'].data, data)
 }
 
 // basic functions - move to api.ts

exampleSite/config.yaml

@@ -1,6 +1,7 @@
 baseurl: /
 DefaultContentLanguage: en
 title: cyberscopes example site
+summary: explore petite-vue in a Hugo-generated site.
 paginate: 6
 theme: 
 - cyberscopes
@@ -9,6 +10,9 @@ themesDir: themes
 pygmentsUseClasses: true
 
 params:
+
+  homeSection: app
+
   #defaultImage: 9609-motor2.jpg
   logo: cc-logo.png
   favicon: icon-star-bl.png
@@ -35,16 +39,12 @@ frontmatter:
 related:
   _merge: shallow
 
-taxonomies:
-  domain: domains
-  topic: topics
-
 menu:
   main:
   - identifier: home
     name: Home
     title: Home
-    url: /app
+    url: /
     weight: 10
   - identifier: topics
     name: Topics

exampleSite/content/_index.md

@@ -1,23 +1,15 @@
 ---
-title:  "example"
-summary: ""
+title:  "cyberscopes"
 img:
-pageid: 
+pageid: index
 domains: []
 topics: []
-date:   2023-02-16
+date:   2023-03-12
 author: helmutm
 draft:  false
-weight: 10
-jsModule: main.ts
+weight: 110
 ---
 
 cyberscopes example site - use petite-vue in Hugo-generated sites.
 
-{{< pv/count >}}
 
-{{< pv/count init="7" expr="count--" label="dec" >}}
-
-{{< pv/count init="99" expr="save()" label="log" >}}
-
-{{< pv/explore >}}

exampleSite/content/app/test0.md

@@ -0,0 +1,22 @@
+---
+title:  "test0"
+summary: "Explore petit-vue features"
+img:
+pageid: test0
+domains: [App]
+topics: [Examples]
+date:   2023-03-12
+author: helmutm
+draft:  false
+weight: 110
+---
+
+cyberscopes example site - use petite-vue in Hugo-generated sites.
+
+{{< pv/count >}}
+
+{{< pv/count init="7" expr="count--" label="dec" >}}
+
+{{< pv/count init="99" expr="save()" label="log" >}}
+
+{{< pv/explore >}}

exampleSite/content/app/test1.md

@@ -1,14 +1,14 @@
 ---
-title:  "example"
+title:  "test1"
 summary: "Test Page #1"
 img:
 pageid: test1
 domains: [App]
 topics: [Examples]
-date:   2023-03-10
+date:   2023-03-12
 author: helmutm
 draft:  false
-weight: 10
+weight: 100
 api:
   domain: test
 ---

layouts/shortcodes/pv/button.html

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

layouts/shortcodes/pv/fieldset.html

@@ -1,5 +1,6 @@
 {{- $name := .Get "name" | default "data" -}}
+{{- $action := .Get "action" | default "data" -}}
 {{- $comp := .Get "component" | default "Data" -}}
-<div v-scope="{{ $comp }}('{{ $name }}')">
+<div v-scope="{{ $comp }}('{{ $name }}', '{{ $action }}')">
 	{{ .Inner }}
 </div>