You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
1.8 KiB
Plaintext
97 lines
1.8 KiB
Plaintext
search-results
|
|
.result(each="{result, i in opts.results}", class="{active: i === currentSelection}")
|
|
h2
|
|
| {result.name}
|
|
span.version v{result.latestVersion || "..."}
|
|
.deprecated(if="{result.deprecated}")
|
|
strong Deprecated
|
|
span.reason {result.deprecated}
|
|
.deprecated(if="{result.reserved}")
|
|
strong Reserved
|
|
span.reason {result.reserved}
|
|
.description {result.description || "(no description)"}
|
|
|
|
script.
|
|
let lastResults;
|
|
|
|
Object.assign(this, {
|
|
currentSelection: 0,
|
|
moveSelectionDown: function() {
|
|
if (this.currentSelection + 1 < opts.results.length) {
|
|
this.currentSelection += 1;
|
|
this.update();
|
|
}
|
|
},
|
|
moveSelectionUp: function() {
|
|
if (this.currentSelection >= 1) {
|
|
this.currentSelection -= 1;
|
|
this.update();
|
|
}
|
|
}
|
|
})
|
|
|
|
this.on("update", () => {
|
|
/* Reset the cursor/selection state... */
|
|
if (lastResults !== opts.results) {
|
|
lastResults = opts.results;
|
|
this.currentSelection = 0;
|
|
}
|
|
});
|
|
|
|
style(scoped, type="scss").
|
|
.result {
|
|
background-color: white;
|
|
color: #333333;
|
|
padding: 9px;
|
|
border-top: 1px solid #2a333c;
|
|
|
|
&:first-child {
|
|
border-top: 0px;
|
|
}
|
|
|
|
&.active {
|
|
background-color: #e2e2e2;
|
|
}
|
|
|
|
h2 {
|
|
color: black;
|
|
font-size: 21px;
|
|
margin: 2px 0px;
|
|
}
|
|
|
|
.description {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.version {
|
|
margin-left: 8px;
|
|
color: gray;
|
|
font-style: italic;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.deprecated {
|
|
display: inline-block;
|
|
background-color: #b9b9b9;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
margin: 2px 0px;
|
|
overflow: hidden;
|
|
margin-left: -2px;
|
|
|
|
strong, .reason {
|
|
display: inline-block;
|
|
}
|
|
|
|
strong {
|
|
padding: 4px 6px;
|
|
background-color: #c70000;
|
|
color: #dedede;
|
|
}
|
|
|
|
.reason {
|
|
padding: 4px 8px;
|
|
color: black;
|
|
}
|
|
}
|
|
} |