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. cyberscopes example site - use petite-vue in Hugo-generated sites.
{{< pv/input-textline name="firstname" >}} {{< pv/input-textline name="firstname" attrs="autofocus" >}}
{{< pv/input-textline name="lastname" >}} {{< pv/input-textline name="lastname" onchange="save" >}}
{{< pv/display expr="`${data.firstname} ${data.lastname}`" >}} {{< pv/display expr="`${data.firstname} ${data.lastname}`" >}}

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

@ -1,5 +1,7 @@
{{- $expr := .Get "expr" | default "data" -}} {{- $name := .Get "name" | default "textline" -}}
<div v-scope @vue:mounted="mounted('data')"> {{- $expr := .Get "expr" | default (printf "data.%s" $name) -}}
{{- $default := .Get "default" | default "" -}}
<div v-scope @vue:mounted="mounted('{{ $expr }}')">
<pre v-text="{{ $expr }}"></pre> <pre v-text="{{ $expr }}"></pre>
</div> </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> <div v-scope>
<input type="text" name="{{ $name }}" autofocus <input type="{{ $type }}" name="{{ $name }}" {{ $attrs }}
v-model="data.{{ $name }}" v-model="data.{{ $name }}"
@vue:mounted="data.{{ $name }} = ''" @vue:mounted="data.{{ $name }} = '{{ $default }}'"
@change="save()" /> @change="{{ $onchange }}" />
</div> </div>