minor improvements; component init: provide $.Params as conf

assets/js/comp-data.ts

@@ -4,12 +4,13 @@ import { sendMsg } from './common'
 
 // Data component
 
-export function Data(name, action, domain: string): object {
-	domain = domain || this.conf.domain
+//export function Data(name, action, domain: string): object {
+export function Data(name: string, conf: any): object {
+	const domain = conf.domain || this.conf.domain
 	const comp = {
 		id: this.conf.itemid,
 		name: name, // also used as class of incoming/outgoing message
-		action: action, // (default) action of outgoing message
+		action: conf.action, // (default) action of outgoing message
 		domain: domain, // domain of incoming/outgoing message
 		data: {}, 	// model (2-way data store)
 		data_bak: {}, // backup copy when leaving view or edit mode

assets/js/comp-list.ts

@@ -4,12 +4,13 @@ import { sendMsg } from './common'
 
 // List component
 
-export function List(name, action, domain: string): object {
-	domain = domain || this.conf.domain
+//export function List(name, action, domain: string): object {
+export function List(name: string, conf: any): object {
+	const domain = conf.domain || this.conf.domain
 	const comp = {
 		id: this.conf.itemid,
 		name: name, // also used as class of incoming/outgoing message
-		action: action, // (default) action of outgoing message
+		action: conf.action, // (default) action of outgoing message
 		domain: domain, // domain of incoming/outgoing message
 		data: [], 	// model = list of rows
 		meta: {},	// metadata (params) for each field (table column)
@@ -26,7 +27,7 @@ export function List(name, action, domain: string): object {
 function handle(domain, action, class_, item: string, payload) {
 	if (action == 'list') {
 		const rows = payload.split('\n')
-		//this.data = []
+		this.data.length = 0
 		for (const row of rows) {
 			this.data.push(JSON.parse(row))
 		}

exampleSite/content/app/person-list.md

@@ -17,5 +17,6 @@ cyberscopes example site - list person (user) data.
 
   {{< pv/list-column name="firstname" label="First Name" >}}
   {{< pv/list-column name="lastname" label="Last Name" >}}
+  {{< pv/list-column name="email" label="Email Address" >}}
 
 {{< /pv/list >}}

layouts/shortcodes/pv/fieldset.html

@@ -2,6 +2,8 @@
 {{- $action := .Get "action" | default "data" -}}
 {{- $domain := .Get "domain" | default $.Page.Params.api.domain -}}
 {{- $comp := .Get "component" | default "Data" -}}
-<div v-scope="{{ $comp }}('{{ $name }}', '{{ $action }}', '{{ $domain }}')">
+{{- $conf := merge $.Params (dict "domain" $domain "action" $action) 
+	| jsonify -}}
+<div v-scope="{{ $comp }}('{{ $name }}', {{ $conf }})">
 	{{ .Inner }}
 </div>

layouts/shortcodes/pv/list-column.html

@@ -1,4 +1,4 @@
 {{- $name := .Get "name" | default "column" -}}
 {{- $label := .Get "label" | default "Column" -}}
 {{- $meta := $.Params | jsonify -}}
-<td @vue:mounted="initField('{{ $name }}', {{ $meta }})">{{ $label }}</td>
+<th @vue:mounted="initField('{{ $name }}', {{ $meta }})">{{ $label }}</th>

layouts/shortcodes/pv/list.html

@@ -2,11 +2,14 @@
 {{- $action := .Get "action" | default "query" -}}
 {{- $domain := .Get "domain" | default $.Page.Params.api.domain -}}
 {{- $comp := .Get "component" | default "List" -}}
-<table v-scope="{{ $comp }}('{{ $name }}', '{{ $action }}', '{{ $domain }}')">
+{{- $conf := merge $.Params (dict "domain" $domain "action" $action) 
+	| jsonify -}}
+<table class="table"
+	   v-scope="{{ $comp }}('{{ $name }}', {{ $conf }})">
   <tr>{{- .Inner -}}</tr>
   <tr v-for="item in data" :key="item._item">
-	<td v-for="col in meta">
-		<a :href="`../${name}/?id=${item._item}`">{| item[col.name] |}</p>
+	<td v-for="(col, fname) in meta">
+		<a :href="`../${name}/?id=${item._item}`">{| item[fname] |}</a>
 	</td>
   </tr>
 </table>