cco/hugo-theme-cyberscopes
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more functionality for input and display shortcodes

Browse source
This commit is contained in:
Helmut Merz 2023-03-01 09:42:21 +01:00
parent 65d31a543f
commit 2874234980
3 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
exampleSite/content/app/test1.md
View file

@ -14,8 +14,8 @@ jsModule: main.ts
cyberscopes example site - use petite-vue in Hugo-generated sites.
{{< pv/input-textline name="firstname" >}}
{{< pv/input-textline name="lastname" >}}
{{< pv/input-textline name="firstname" attrs="autofocus" >}}
{{< pv/input-textline name="lastname" onchange="save" >}}
{{< pv/display expr="`${data.firstname} ${data.lastname}`" >}}

6
layouts/shortcodes/pv/display.html
View file

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

14
layouts/shortcodes/pv/input-textline.html
View file

@ -1,7 +1,11 @@
{{- $name := default "textline" (.Get "name") }}
{{- $type := .Get "type" | default "text" -}}
{{- $name := .Get "name" | default "textline" -}}
{{- $default := .Get "default" | default "" -}}
{{- $attrs := .Get "attrs" | default "" -}}
{{- $onchange := .Get "onchange" | default "" -}}
<div v-scope>
<input type="text" name="{{ $name }}" autofocus
v-model="data.{{ $name }}"
@vue:mounted="data.{{ $name }} = ''"
@change="save()" />
<input type="{{ $type }}" name="{{ $name }}" {{ $attrs }}
v-model="data.{{ $name }}"
@vue:mounted="data.{{ $name }} = '{{ $default }}'"
@change="{{ $onchange }}" />
</div>