add button

exampleSite/content/app/test1.md

@@ -5,7 +5,7 @@ img:
 pageid: test1
 domains: []
 topics: []
-date:   2023-02-28
+date:   2023-03-01
 author: helmutm
 draft:  false
 weight: 10
@@ -15,8 +15,9 @@ jsModule: main.ts
 cyberscopes example site - use petite-vue in Hugo-generated sites.
 
 {{< pv/input-textline name="firstname" attrs="autofocus" >}}
-{{< pv/input-textline name="lastname" onchange="save" >}}
+{{< pv/input-textline name="lastname" >}}
+{{< pv/button >}}
 
-{{< pv/display expr="`${data.firstname} ${data.lastname}`" >}}
+{{< pv/display expr="`${data.firstname} ${data.lastname}`.trim() || '???'" >}}
 
 {{< pv/debug >}}

layouts/shortcodes/pv/button.html

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

layouts/shortcodes/pv/display.html

@@ -1,7 +1,7 @@
 {{- $name := .Get "name" | default "textline" -}}
 {{- $expr := .Get "expr" | default (printf "data.%s" $name) -}}
 {{- $default := .Get "default" | default "" -}}
-<div v-scope @vue:mounted="mounted('{{ $expr }}')">
+<div v-scope>
   <pre v-text="{{ $expr }}"></pre>
 </div>