vsm-autocomplete
Version:
Vue-component for term+ID lookup based on a vsm-dictionary
89 lines (75 loc) • 2.46 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>vsm-autocomplete</title>
<style>
body { font-family: sans-serif; font-size: 14px; margin: 0; }
a, a:visited { color: #FF0000; }
#app { padding: 20px 0 18px 50px; background-color: #FFEEDD; min-height: 180px; }
[v-cloak] { display: none; }
.reporter {
color: #bbb; height: 16px; max-width: 350px; font-size: 13px;
margin: 0 0 1px 1px; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; text-align: right; direction: rtl;
}
</style>
<!-- For faster reloads, we include Vue.js in the webpack bundle, during dev.
<script src="https://unpkg.com/vue"></script> -->
</head>
<body>
<div id="app" v-cloak>
<div class="reporter">{{ report || ' ' }}</div>
<vsm-autocomplete
:vsm-dictionary="vsmDictionary"
:autofocus="true"
:placeholder="placeholder"
:query-options="queryOptions"
:max-string-lengths="maxStringLengths"
:fresh-list-delay="freshListDelay"
:custom-item-literal="customItemLiteral"
:custom-item="customItem"
:initial-value="initialValue"
@focus="onFocus"
@blur="onBlur"
@input-change="onInputChange"
@key-esc="onKeyEsc"
@key-bksp="onKeyBksp"
@key-ctrl-enter="onKeyCtrlEnter"
@key-shift-enter="onKeyShiftEnter"
@key-tab="onKeyTab"
@dblclick="onDoubleClick"
@list-open="onListOpen"
@list-close="onListClose"
@item-active-change="onItemActiveChange"
@item-select="onItemSelect"
@item-literal-select="onItemLiteralSelect"
>
</vsm-autocomplete>
</div>
<!-- One can apply CSS-styling to/around a vsm-autocomplete, like:
(add/remove a '>' to toggle the HTML-comment on/off) :
--
<style>
.vsm-autocomplete {
width: 200px;
padding: 0 4px 0 0;
background-color: #f4f4f4;
border: 1px solid #ddd;
}
</style> <!-- -->
<!-- One can also change vsm-autocomplete subcomponents' style. For example,
this makes an item-literal's text dark-red:
--
<style>
.vsm-autocomplete .item.item-type-literal {
color: #800;
}
</style> <!-- -->
<!-- One can also override vsm-autocomplete's CSS-styles,
by declaring CSS _after_ the Vue-activated '#app' div.
E.g. make it larger with this:
--
<link rel="stylesheet" href="vsm-autocomplete-large.css"> <!-- -->
</body>
</html>