rename shortcodes; back to ?id=<item> (instead of #<item>)

assets/js/app-demo.ts

@@ -1,7 +1,7 @@
 // app-demo.ts - petite-vue application using dummy localStorage backend
 
 import { createApp } from 'petite-vue'
-import { Config, register, handle, createRandString, sleep} from './common'
+import { Config, register, handle, createRandString} from './common'
 
 export const pvapp = {
 	run(conf: Config, components: any[]) {
@@ -27,7 +27,6 @@ const store_prefix = 'api.storage'
 // methods
 
 async function sendMsg(basemsg: string[], data: any) {
-	await sleep(50)
 	const [ domain, action, class_, item ] = basemsg
 	switch (action) {
 		case 'data':

assets/js/common.ts

@@ -13,9 +13,11 @@ export type Config = {
 
 export function config (api): Config {
 	const pu = api.polling ? `${api.path}/${api.polling.msgbase.join('/')}` : ''
+	const urlparams = new URL(location.href).searchParams
 	return { 
 		domain: domain,
-		itemid: location.hash.substring(1),
+		//itemid: location.hash.substring(1),
+		itemid: urlparams.get('id'),
 		sid: getSid(),
 		iid: createRandString(1),
 		apiurl: api.path, 
@@ -27,6 +29,7 @@ export function config (api): Config {
 
 export function register(name: string, comp: any) {
 	this.components[name] = comp
+	comp.initialize()
 }
 
 // common functions
@@ -34,12 +37,13 @@ export function register(name: string, comp: any) {
 export function handle(app, msg) {
 	const [ domain, action, class_, item ] = msg.path.split('/')
 	const comp = app.components[class_ || 'data']
+	if (!comp) {
+		msg.log(`**** handle: component ${class_} not found.`)
+	}
 	if (domain && domain !== comp.domain) {
 		return
 	}
-	if (comp) {
-		comp.handle(domain, action, class_, item, msg.payload)
-	}
+	comp.handle(domain, action, class_, item, msg.payload)
 }
 
 export function createRandString(size: number): string {

assets/js/comp-data.ts

@@ -12,21 +12,25 @@ export function Data(name: string, conf: any): object {
 		domain: domain, // domain of incoming/outgoing message
 		data: {}, 	// model (2-way data store)
 		meta: {},	// metadata (params) for each data field
+		initialize,
 		handle,		// handle incoming messages
 		exec,		// default function to execute upon button click
-		initField,	// initialize field (= @mounted)
+		initField,	// initialize field (= @mounted), collect metadata
 		chmode,
 		copynew
 	}
 	//this.components[name] = comp
-	if (comp.state.id) {
-		this.sendMsg([domain, 'query', name, comp.state.id], {})
-	}
 	return comp
 }
 
 // Data methods
 
+function initialize() {
+	if (this.state.id) {
+		this.sendMsg([this.domain, 'query', this.name, this.state.id], {})
+	}
+}
+
 function handle(domain, action, class_, item, payload: string) {
 	const data = JSON.parse(payload)
 	console.log('handle - action: ', action, ', data: ', data)
@@ -35,8 +39,9 @@ function handle(domain, action, class_, item, payload: string) {
 		this.state.mode = 'view'
 	} else if (action === 'response') { // && data.rc == 3) {
 		this.state.id = item
-		window.location.hash = item
-		this.sendMsg([this.domain, 'query', this.name, item], {})
+		//window.location.hash = item
+		window.location.assign(`?id=${item}`)
+		//this.sendMsg([this.domain, 'query', this.name, item], {})
 	}
 }
 

assets/js/comp-list.ts

@@ -12,16 +12,19 @@ export function List(name: string, conf: any): object {
 		domain: domain, // domain of incoming/outgoing message
 		data: [], 	// model = list of rows
 		meta: {},	// metadata (params) for each field (table column)
+		initialize,
 		handle,		// handle incoming messages
 		initField	// initialize field (= @mounted)
 	}
-	//this.components[name] = comp
-	this.sendMsg([domain, 'query', name], {})
 	return comp
 }
 
 // Data methods
 
+function initialize() {
+	this.sendMsg([this.domain, 'query', this.name], {})
+}
+
 function handle(domain, action, class_, item: string, payload) {
 	if (action == 'list') {
 		const rows = payload.split('\n')

exampleSite/content/app/login.md

@@ -5,23 +5,22 @@ img:
 pageid: app-login
 domains: [App]
 topics: [Examples]
-date:   2023-03-14
-author: helmutm
+date:   2023-03-27
 draft:  false
-weight: 100
+weight: 400
 api:
   domain: system
 ---
 
 cyberscopes example site - Login Form
 
-{{< pv/fieldset name="login" >}}
+{{< pv/data name="login" >}}
 
-  Login: {{< pv/input-textline name="login" attrs="autofocus" >}}
-  Password: {{< pv/input-textline type="password" name="password" >}}
+  Login: {{< pv/data-field-line name="login" attrs="autofocus" >}}
+  Password: {{< pv/data-field-line type="password" name="password" >}}
   {{< pv/button label="Login" action="login" >}}
 
-{{< /pv/fieldset >}}
+{{< /pv/data >}}
 
 ---
 

exampleSite/content/app/person-list.md

@@ -5,8 +5,7 @@ img:
 pageid: app_list_person
 domains: [App]
 topics: [Examples]
-date:   2023-03-22
-author: helmutm
+date:   2023-03-27
 draft:  false
 weight: 100
 ---

exampleSite/content/app/person.md

@@ -5,21 +5,20 @@ img:
 pageid: app_form_person
 domains: [App]
 topics: [Examples]
-date:   2023-03-19
-author: helmutm
+date:   2023-03-27
 draft:  false
 weight: 100
 ---
 
 cyberscopes example site - view / edit person (user) data.
 
-{{< pv/fieldset name="person" >}}
+{{< pv/data name="person" >}}
 
-  {{< pv/tabs-mode >}}
+  {{< pv/data-tabs >}}
 
-  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" >}}
+  First Name: {{< pv/data-field-line name="firstname" attrs="autofocus" >}}
+  Last Name: {{< pv/data-field-line name="lastname" >}}
+  Email: {{< pv/data-field-line name="email" default="hm@cy55.de" >}}
 
   {{< pv/button mode="edit" label="Save Changes" >}}
   {{< pv/button mode="edit" exec="copynew" label="Copy Data" >}}
@@ -27,14 +26,15 @@ cyberscopes example site - view / edit person (user) data.
   {{< pv/button mode="new" label="Create Item" >}}
 
 <br>
-  {{< pv/display linkto="state.id"
+  {{< pv/data-display
         expr="`${data.firstname} ${data.lastname}`.trim() || '???'" >}}
+  {{< pv/data-display expr="state.id ? ` (Id: ${state.id})` : ''" >}} 
 <br>
   {{< pv/link >}}
-    Reload page with id {{< pv/display expr="state.id" >}}
+    Reload page with id {{< pv/data-display expr="state.id" >}}
   {{< /pv/link >}}
 
-{{< /pv/fieldset >}}
+{{< /pv/data >}}
 
 {{< pv/debug >}}
 

exampleSite/content/app/test0.md

@@ -5,18 +5,17 @@ img:
 pageid: test0
 domains: [App]
 topics: [Examples]
-date:   2023-03-12
-author: helmutm
+date:   2023-03-27
 draft:  false
-weight: 110
+weight: 510
 ---
 
 cyberscopes example site - use petite-vue in Hugo-generated sites.
 
-{{< pv/count >}}
+{{< pv/xplore/count >}}
 
-{{< pv/count init="7" expr="count--" label="dec" >}}
+{{< pv/xplore/count init="7" expr="count--" label="dec" >}}
 
-{{< pv/count init="99" expr="save()" label="log" >}}
+{{< pv/xplore/count init="99" expr="save()" label="log" >}}
 
-{{< pv/explore >}}
+{{< pv/xplore/explore >}}

layouts/shortcodes/pv/data-display.html

@@ -1,6 +1,3 @@
 {{- $name := .Get "name" | default "textline" -}}
 {{- $expr := .Get "expr" | default (printf "data.%s" $name) -}}
-{{- $linkto := .Get "linkto" -}}
-{{- if $linkto }}<a :href="'#' + {{ $linkto }}">{{ end -}}
 <span v-text="{{ $expr }}"></span>
-{{- if $linkto }}</a>{{ end -}}

layouts/shortcodes/pv/link.html

@@ -1,3 +1,3 @@
 {{- $target := .Get "target" | default "state.id" -}}
-{{- $prefix := .Get "prefix" | default "#" -}}
+{{- $prefix := .Get "prefix" | default "?id=" -}}
 <a :href="'{{ $prefix }}' + {{ $target }}">{{ .Inner }}</a>

layouts/shortcodes/pv/list.html

@@ -10,7 +10,7 @@
   <tr>{{- .Inner -}}</tr>
   <tr v-for="item in data" :key="item._item">
 	<td v-for="(col, fname) in meta">
-		<a :href="`../${name}/#${item._item}`">{| item[fname] |}</a>
+		<a :href="`../${name}/?id=${item._item}`">{| item[fname] |}</a>
 	</td>
   </tr>
 </table>