Skip to content

Commit

Permalink
Fix the bug of initial selection of <select> element in all sample apps
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tao-VanJS
Tao-VanJS committed Oct 14, 2024
1 parent f64b05c commit 498fcfd
Show file tree
Hide file tree
Showing 16 changed files with 83 additions and 68 deletions.
14 changes: 8 additions & 6 deletions advanced.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,10 +142,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
return div(
div(
"formula: ",
select({value: formula, oninput: e =&gt; formula.val = e.target.value},
option("a + b"), option("c + d"),
select({oninput: e =&gt; formula.val = e.target.value},
option({selected: () =&gt; formula.val === "a + b"}, "a + b"),
option({selected: () =&gt; formula.val === "c + d"}, "c + d"),
),
" a: ",
" a: ",
input({type: "number", min: 0, max: 9, value: a, oninput: e =&gt; a.val = Number(e.target.value)}),
" b: ",
input({type: "number", min: 0, max: 9, value: b, oninput: e =&gt; b.val = Number(e.target.value)}),
Expand Down Expand Up @@ -173,10 +174,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
return div(
div(
"formula: ",
select({value: formula, oninput: e =&gt; formula.val = e.target.value},
option("a + b"), option("c + d"),
select({oninput: e =&gt; formula.val = e.target.value},
option({selected: () =&gt; formula.val === "a + b"}, "a + b"),
option({selected: () =&gt; formula.val === "c + d"}, "c + d"),
),
" a: ",
" a: ",
input({type: "number", min: 0, max: 9, value: a, oninput: e =&gt; a.val = Number(e.target.value)}),
" b: ",
input({type: "number", min: 0, max: 9, value: b, oninput: e =&gt; b.val = Number(e.target.value)}),
Expand Down
10 changes: 6 additions & 4 deletions advanced.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@
return div(
div(
"formula: ",
select({value: formula, oninput: e => formula.val = e.target.value},
option("a + b"), option("c + d"),
select({oninput: e => formula.val = e.target.value},
option({selected: () => formula.val === "a + b"}, "a + b"),
option({selected: () => formula.val === "c + d"}, "c + d"),
),
" a: ",
input({type: "number", min: 0, max: 9, value: a, oninput: e => a.val = Number(e.target.value)}),
Expand Down Expand Up @@ -61,8 +62,9 @@
return div(
div(
"formula: ",
select({value: formula, oninput: e => formula.val = e.target.value},
option("a + b"), option("c + d"),
select({oninput: e => formula.val = e.target.value},
option({selected: () => formula.val === "a + b"}, "a + b"),
option({selected: () => formula.val === "c + d"}, "c + d"),
),
" a: ",
input({type: "number", min: 0, max: 9, value: a, oninput: e => a.val = Number(e.target.value)}),
Expand Down
14 changes: 8 additions & 6 deletions advanced/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,10 +142,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
return div(
div(
"formula: ",
select({value: formula, oninput: e =&gt; formula.val = e.target.value},
option("a + b"), option("c + d"),
select({oninput: e =&gt; formula.val = e.target.value},
option({selected: () =&gt; formula.val === "a + b"}, "a + b"),
option({selected: () =&gt; formula.val === "c + d"}, "c + d"),
),
" a: ",
" a: ",
input({type: "number", min: 0, max: 9, value: a, oninput: e =&gt; a.val = Number(e.target.value)}),
" b: ",
input({type: "number", min: 0, max: 9, value: b, oninput: e =&gt; b.val = Number(e.target.value)}),
Expand Down Expand Up @@ -173,10 +174,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
return div(
div(
"formula: ",
select({value: formula, oninput: e =&gt; formula.val = e.target.value},
option("a + b"), option("c + d"),
select({oninput: e =&gt; formula.val = e.target.value},
option({selected: () =&gt; formula.val === "a + b"}, "a + b"),
option({selected: () =&gt; formula.val === "c + d"}, "c + d"),
),
" a: ",
" a: ",
input({type: "number", min: 0, max: 9, value: a, oninput: e =&gt; a.val = Number(e.target.value)}),
" b: ",
input({type: "number", min: 0, max: 9, value: b, oninput: e =&gt; b.val = Number(e.target.value)}),
Expand Down
7 changes: 4 additions & 3 deletions jsfiddle/advanced/conditional-binding/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ const ConditionalBinding = () => {
return div(
div(
"formula: ",
select({value: formula, oninput: e => formula.val = e.target.value},
option("a + b"), option("c + d"),
select({oninput: e => formula.val = e.target.value},
option({selected: () => formula.val === "a + b"}, "a + b"),
option({selected: () => formula.val === "c + d"}, "c + d"),
),
" a: ",
" a: ",
input({type: "number", min: 0, max: 9, value: a, oninput: e => a.val = Number(e.target.value)}),
" b: ",
input({type: "number", min: 0, max: 9, value: b, oninput: e => b.val = Number(e.target.value)}),
Expand Down
7 changes: 4 additions & 3 deletions jsfiddle/advanced/conditional-derive/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ const ConditionalDerive = () => {
return div(
div(
"formula: ",
select({value: formula, oninput: e => formula.val = e.target.value},
option("a + b"), option("c + d"),
select({oninput: e => formula.val = e.target.value},
option({selected: () => formula.val === "a + b"}, "a + b"),
option({selected: () => formula.val === "c + d"}, "c + d"),
),
" a: ",
" a: ",
input({type: "number", min: 0, max: 9, value: a, oninput: e => a.val = Number(e.target.value)}),
" b: ",
input({type: "number", min: 0, max: 9, value: b, oninput: e => b.val = Number(e.target.value)}),
Expand Down
5 changes: 3 additions & 2 deletions jsfiddle/tutorial/escape-derived-prop/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ const Counter = () => {
const action = van.state("👍")
return span(
"❤️ ", counter, " ",
select({oninput: e => action.val = e.target.value, value: action},
option({value: "👍"}, "👍"), option({value: "👎"}, "👎"),
select({oninput: e => action.val = e.target.value},
option({selected: () => action.val === "👍"}, "👍"),
option({selected: () => action.val === "👎"}, "👎"),
), " ",
button({onclick: van.derive(() => action.val === "👍" ?
() => ++counter.val : () => --counter.val)}, "Run"),
Expand Down
6 changes: 3 additions & 3 deletions jsfiddle/tutorial/font-preview/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ const FontPreview = () => {
input({type: "range", min: 10, max: 36, value: size,
oninput: e => size.val = e.target.value}),
" Color: ",
select({oninput: e => color.val = e.target.value, value: color},
select({oninput: e => color.val = e.target.value},
["black", "blue", "green", "red", "brown"]
.map(c => option({value: c}, c)),
.map(c => option({selected: () => color.val === c}, c)),
),
// The <span> element below has a state-derived property `style`
// The <span> element below has a state-derived property `style`
span({style: () => `font-size: ${size.val}px; color: ${color.val};`}, " Hello 🍦VanJS"),
)
}
Expand Down
6 changes: 3 additions & 3 deletions jsfiddle/tutorial/sorted-list/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ const SortedList = () => {
"Comma-separated list: ",
input({oninput: e => items.val = e.target.value,
type: "text", value: items}), " ",
select({oninput: e => sortedBy.val = e.target.value, value: sortedBy},
option({value: "Ascending"}, "Ascending"),
option({value: "Descending"}, "Descending"),
select({oninput: e => sortedBy.val = e.target.value},
option({selected: () => sortedBy.val === "Ascending", value: "Ascending"}, "Ascending"),
option({selected: () => sortedBy.val === "Descending", value: "Descending"}, "Descending"),
),
// A State-derived child node
() => sortedBy.val === "Ascending" ?
Expand Down
7 changes: 4 additions & 3 deletions sample-code/conditional-binding.code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ const ConditionalBinding = () => {
return div(
div(
"formula: ",
select({value: formula, oninput: e => formula.val = e.target.value},
option("a + b"), option("c + d"),
select({oninput: e => formula.val = e.target.value},
option({selected: () => formula.val === "a + b"}, "a + b"),
option({selected: () => formula.val === "c + d"}, "c + d"),
),
" a: ",
" a: ",
input({type: "number", min: 0, max: 9, value: a, oninput: e => a.val = Number(e.target.value)}),
" b: ",
input({type: "number", min: 0, max: 9, value: b, oninput: e => b.val = Number(e.target.value)}),
Expand Down
7 changes: 4 additions & 3 deletions sample-code/conditional-derive.code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ const ConditionalDerive = () => {
return div(
div(
"formula: ",
select({value: formula, oninput: e => formula.val = e.target.value},
option("a + b"), option("c + d"),
select({oninput: e => formula.val = e.target.value},
option({selected: () => formula.val === "a + b"}, "a + b"),
option({selected: () => formula.val === "c + d"}, "c + d"),
),
" a: ",
" a: ",
input({type: "number", min: 0, max: 9, value: a, oninput: e => a.val = Number(e.target.value)}),
" b: ",
input({type: "number", min: 0, max: 9, value: b, oninput: e => b.val = Number(e.target.value)}),
Expand Down
6 changes: 3 additions & 3 deletions sample-code/font-preview.code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ const FontPreview = () => {
input({type: "range", min: 10, max: 36, value: size,
oninput: e => size.val = e.target.value}),
" Color: ",
select({oninput: e => color.val = e.target.value, value: color},
select({oninput: e => color.val = e.target.value},
["black", "blue", "green", "red", "brown"]
.map(c => option({value: c}, c)),
.map(c => option({selected: () => color.val === c}, c)),
),
// The <span> element below has a state-derived property `style`
// The <span> element below has a state-derived property `style`
span({style: () => `font-size: ${size.val}px; color: ${color.val};`}, " Hello 🍦VanJS"),
)
}
Expand Down
5 changes: 3 additions & 2 deletions sample-code/state-derived-event-handler.code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ const Counter = () => {
const action = van.state("👍")
return span(
"❤️ ", counter, " ",
select({oninput: e => action.val = e.target.value, value: action},
option({value: "👍"}, "👍"), option({value: "👎"}, "👎"),
select({oninput: e => action.val = e.target.value},
option({selected: () => action.val === "👍"}, "👍"),
option({selected: () => action.val === "👎"}, "👎"),
), " ",
button({onclick: van.derive(() => action.val === "👍" ?
() => ++counter.val : () => --counter.val)}, "Run"),
Expand Down
6 changes: 3 additions & 3 deletions sitegen/tutorial.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,9 +257,9 @@ const SortedList = () => {
"Comma-separated list: ",
input({oninput: e => items.val = e.target.value,
type: "text", value: items}), " ",
select({oninput: e => sortedBy.val = e.target.value, value: sortedBy},
option({value: "Ascending"}, "Ascending"),
option({value: "Descending"}, "Descending"),
select({oninput: e => sortedBy.val = e.target.value},
option({selected: () => sortedBy.val === "Ascending", value: "Ascending"}, "Ascending"),
option({selected: () => sortedBy.val === "Descending", value: "Descending"}, "Descending"),
),
// A State-derived child node
() => sortedBy.val === "Ascending" ?
Expand Down
17 changes: 9 additions & 8 deletions tutorial.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,11 +202,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
input({type: "range", min: 10, max: 36, value: size,
oninput: e =&gt; size.val = e.target.value}),
" Color: ",
select({oninput: e =&gt; color.val = e.target.value, value: color},
select({oninput: e =&gt; color.val = e.target.value},
["black", "blue", "green", "red", "brown"]
.map(c =&gt; option({value: c}, c)),
.map(c =&gt; option({selected: () =&gt; color.val === c}, c)),
),
// The &lt;span&gt; element below has a state-derived property `style`
// The &lt;span&gt; element below has a state-derived property `style`
span({style: () =&gt; `font-size: ${size.val}px; color: ${color.val};`}, " Hello 🍦VanJS"),
)
}
Expand All @@ -219,8 +219,9 @@ <h1 class="w3-padding-16 w3-xxxlarge">
const action = van.state("👍")
return span(
"❤️ ", counter, " ",
select({oninput: e =&gt; action.val = e.target.value, value: action},
option({value: "👍"}, "👍"), option({value: "👎"}, "👎"),
select({oninput: e =&gt; action.val = e.target.value},
option({selected: () =&gt; action.val === "👍"}, "👍"),
option({selected: () =&gt; action.val === "👎"}, "👎"),
), " ",
button({onclick: van.derive(() =&gt; action.val === "👍" ?
() =&gt; ++counter.val : () =&gt; --counter.val)}, "Run"),
Expand All @@ -236,9 +237,9 @@ <h1 class="w3-padding-16 w3-xxxlarge">
"Comma-separated list: ",
input({oninput: e =&gt; items.val = e.target.value,
type: "text", value: items}), " ",
select({oninput: e =&gt; sortedBy.val = e.target.value, value: sortedBy},
option({value: "Ascending"}, "Ascending"),
option({value: "Descending"}, "Descending"),
select({oninput: e =&gt; sortedBy.val = e.target.value},
option({selected: () =&gt; sortedBy.val === "Ascending", value: "Ascending"}, "Ascending"),
option({selected: () =&gt; sortedBy.val === "Descending", value: "Descending"}, "Descending"),
),
// A State-derived child node
() =&gt; sortedBy.val === "Ascending" ?
Expand Down
17 changes: 9 additions & 8 deletions tutorial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,9 @@
input({type: "range", min: 10, max: 36, value: size,
oninput: e => size.val = e.target.value}),
" Color: ",
select({oninput: e => color.val = e.target.value, value: color},
select({oninput: e => color.val = e.target.value},
["black", "blue", "green", "red", "brown"]
.map(c => option({value: c}, c)),
.map(c => option({selected: () => color.val === c}, c)),
),
// The <span> element below has a state-derived property `style`
span({style: () => `font-size: ${size.val}px; color: ${color.val};`}, " Hello 🍦VanJS"),
Expand All @@ -133,8 +133,9 @@
const action = van.state("👍")
return span(
"❤️ ", counter, " ",
select({oninput: e => action.val = e.target.value, value: action},
option({value: "👍"}, "👍"), option({value: "👎"}, "👎"),
select({oninput: e => action.val = e.target.value},
option({selected: () => action.val === "👍"}, "👍"),
option({selected: () => action.val === "👎"}, "👎"),
), " ",
button({onclick: van.derive(() => action.val === "👍" ?
() => ++counter.val : () => --counter.val)}, "Run"),
Expand All @@ -153,11 +154,11 @@
"Comma-separated list: ",
input({oninput: e => items.val = e.target.value,
type: "text", value: items}), " ",
select({oninput: e => sortedBy.val = e.target.value, value: sortedBy},
option({value: "Ascending"}, "Ascending"),
option({value: "Descending"}, "Descending"),
select({oninput: e => sortedBy.val = e.target.value},
option({selected: () => sortedBy.val === "Ascending", }, "Ascending"),
option({selected: () => sortedBy.val === "Descending", }, "Descending"),
),
// A State-derived child node
// A State-derived child node
() => sortedBy.val === "Ascending" ?
ul(items.val.split(",").sort().map(i => li(i))) :
ul(items.val.split(",").sort().reverse().map(i => li(i))),
Expand Down
17 changes: 9 additions & 8 deletions tutorial/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,11 +202,11 @@ <h1 class="w3-padding-16 w3-xxxlarge">
input({type: "range", min: 10, max: 36, value: size,
oninput: e =&gt; size.val = e.target.value}),
" Color: ",
select({oninput: e =&gt; color.val = e.target.value, value: color},
select({oninput: e =&gt; color.val = e.target.value},
["black", "blue", "green", "red", "brown"]
.map(c =&gt; option({value: c}, c)),
.map(c =&gt; option({selected: () =&gt; color.val === c}, c)),
),
// The &lt;span&gt; element below has a state-derived property `style`
// The &lt;span&gt; element below has a state-derived property `style`
span({style: () =&gt; `font-size: ${size.val}px; color: ${color.val};`}, " Hello 🍦VanJS"),
)
}
Expand All @@ -219,8 +219,9 @@ <h1 class="w3-padding-16 w3-xxxlarge">
const action = van.state("👍")
return span(
"❤️ ", counter, " ",
select({oninput: e =&gt; action.val = e.target.value, value: action},
option({value: "👍"}, "👍"), option({value: "👎"}, "👎"),
select({oninput: e =&gt; action.val = e.target.value},
option({selected: () =&gt; action.val === "👍"}, "👍"),
option({selected: () =&gt; action.val === "👎"}, "👎"),
), " ",
button({onclick: van.derive(() =&gt; action.val === "👍" ?
() =&gt; ++counter.val : () =&gt; --counter.val)}, "Run"),
Expand All @@ -236,9 +237,9 @@ <h1 class="w3-padding-16 w3-xxxlarge">
"Comma-separated list: ",
input({oninput: e =&gt; items.val = e.target.value,
type: "text", value: items}), " ",
select({oninput: e =&gt; sortedBy.val = e.target.value, value: sortedBy},
option({value: "Ascending"}, "Ascending"),
option({value: "Descending"}, "Descending"),
select({oninput: e =&gt; sortedBy.val = e.target.value},
option({selected: () =&gt; sortedBy.val === "Ascending", value: "Ascending"}, "Ascending"),
option({selected: () =&gt; sortedBy.val === "Descending", value: "Descending"}, "Descending"),
),
// A State-derived child node
() =&gt; sortedBy.val === "Ascending" ?
Expand Down

0 comments on commit 498fcfd

Please sign in to comment.