work in progress: data modes with tabs and buttons

assets/js/common.ts

@@ -58,7 +58,9 @@ function Data(name, action, domain: string): object {
 		action: action, // (default) action of outgoing message
 		domain: domain, // domain of incoming/outgoing message
 		data: {}, 	// model (2-way data store)
-		exec		// default function to execute upon button click
+		mode: 'view',
+		exec,		// default function to execute upon button click
+		chmode
 	}
 	this.components[name] = comp
 	return comp
@@ -66,6 +68,10 @@ function Data(name, action, domain: string): object {
 
 // appdata and component method definitions
 
+function chmode(action: string) {
+	this.mode = action
+}
+
 function exec(action: string) {
 	action = action || this.action
 	const data = this.data

assets/js/main-xp-bootstrap.ts

@@ -0,0 +1,7 @@
+import * as bootstrap from 'bootstrap'
+export { bootstrap }
+import { api, polling } from './settings'
+import { config, pvapp } from './common'
+
+pvapp.run(config(api, polling))
+

assets/js/main-xp-mermaid.ts

@@ -0,0 +1,7 @@
+import mermaid from 'mermaid'
+import { api, polling } from './settings'
+import { config, pvapp } from './common'
+
+mermaid.initialize({ startOnLoad: true })
+pvapp.run(config(api, polling))
+

exampleSite/content/app/login.md

@@ -19,7 +19,7 @@ cyberscopes example site - Login Form
 
   Login: {{< pv/input-textline name="login" attrs="autofocus" >}}
   Password: {{< pv/input-textline type="password" name="password" >}}
-  {{< pv/button label="Login" >}}
+  {{< pv/button label="Login" action="login" >}}
 
 {{< /pv/fieldset >}}
 

exampleSite/content/app/person.md

@@ -5,7 +5,7 @@ img:
 pageid: app_form_person
 domains: [App]
 topics: [Examples]
-date:   2023-03-16
+date:   2023-03-19
 author: helmutm
 draft:  false
 weight: 100
@@ -13,14 +13,17 @@ weight: 100
 
 cyberscopes example site - view / edit person (user) data.
 
-{{< pv/fieldset >}}
+{{< pv/fieldset name="person" >}}
 
+  {{< pv/tabs-mode >}}
   Id: {{< pv/input-textline name="id" defexpr="conf.itemid" >}}
   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 action="save" >}}
+  {{< pv/button mode="edit" >}}
+  {{< pv/button mode="query" action="query" label="Query" >}}
 
+<br>
   {{< pv/display linkto="data.id"
         expr="`${data.firstname} ${data.lastname}`.trim() || '???'" >}}
 <br>

layouts/shortcodes/pv/button.html

@@ -3,8 +3,10 @@
 {{- $label := .Get "label" | default (title $name) -}}
 {{- $exec := .Get "exec" | default "exec" -}}
 {{- $action := .Get "action" | default "" -}}
-<div v-scope>
+{{- $mode := .Get "mode" | default "view" -}}
 <button type="{{ $type }}" name="{{ $name }}" 
+		{{ with $mode -}}
+		  :style="{ display: mode == '{{ . }}' ? 'inline' : 'none' }"
+		{{- end }}
 	    @click="{{ $exec }}('{{ $action }}')">{{$label}}</button>
-</div>
 

layouts/shortcodes/pv/input-textline.html

@@ -5,6 +5,7 @@
 <div>
   <input type="{{ $type }}" name="{{ $name }}" 
 		 {{- with .Get "attrs" }} {{ . }}{{ end }}
+		 :readonly="mode == 'view' ? '' : null"
 		 v-model="data.{{ $name }}"
 		 @vue:mounted="data.{{ $name }} = {{ $defexpr }}"
 		 {{- with .Get "onchange" }} @change="{{ . }}"{{ end }} />

layouts/shortcodes/pv/tabs-mode.md

@@ -0,0 +1,15 @@
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link" @click="chmode('view')"
+       :class="mode == 'view' ? 'active' : null">View</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" @click="chmode('query')"
+       :class="mode == 'query' ? 'active' : null">Query</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" @click="chmode('edit')"
+       :class="mode == 'edit' ? 'active' : null">Edit</a>
+  </li>
+</ul>
+</ul>