use regex for search
This commit is contained in:
parent
6725f820a4
commit
3733b5f5ae
|
@ -29,6 +29,7 @@
|
||||||
|
|
||||||
$: categories = Object.entries(groupBy("category", bindings))
|
$: categories = Object.entries(groupBy("category", bindings))
|
||||||
$: value && checkValid()
|
$: value && checkValid()
|
||||||
|
$: searchRgx = new RegExp(search, "ig")
|
||||||
|
|
||||||
function onClickBinding(binding) {
|
function onClickBinding(binding) {
|
||||||
const position = getCaretPosition()
|
const position = getCaretPosition()
|
||||||
|
@ -61,7 +62,7 @@
|
||||||
<Heading extraSmall>{categoryName}</Heading>
|
<Heading extraSmall>{categoryName}</Heading>
|
||||||
<Spacer extraSmall />
|
<Spacer extraSmall />
|
||||||
{#each bindings.filter(binding =>
|
{#each bindings.filter(binding =>
|
||||||
binding.label.startsWith(search)
|
binding.label.match(searchRgx)
|
||||||
) as binding}
|
) as binding}
|
||||||
<div class="binding" on:click={() => onClickBinding(binding)}>
|
<div class="binding" on:click={() => onClickBinding(binding)}>
|
||||||
<span class="binding__label">{binding.label}</span>
|
<span class="binding__label">{binding.label}</span>
|
||||||
|
@ -75,9 +76,7 @@
|
||||||
{/each}
|
{/each}
|
||||||
<Heading extraSmall>Helpers</Heading>
|
<Heading extraSmall>Helpers</Heading>
|
||||||
<Spacer extraSmall />
|
<Spacer extraSmall />
|
||||||
{#each helpers.filter(binding =>
|
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
||||||
binding.label.startsWith(search)
|
|
||||||
) as helper}
|
|
||||||
<div class="binding" on:click={() => onClickBinding(helper)}>
|
<div class="binding" on:click={() => onClickBinding(helper)}>
|
||||||
<span class="binding__label">{helper.label}</span>
|
<span class="binding__label">{helper.label}</span>
|
||||||
<br />
|
<br />
|
||||||
|
|
|
@ -29,6 +29,7 @@
|
||||||
)
|
)
|
||||||
$: dispatch("update", value)
|
$: dispatch("update", value)
|
||||||
$: ({ instance, context } = groupBy("type", bindableProperties))
|
$: ({ instance, context } = groupBy("type", bindableProperties))
|
||||||
|
$: searchRgx = new RegExp(search, "ig")
|
||||||
|
|
||||||
function checkValid() {
|
function checkValid() {
|
||||||
// TODO: need to convert the value to the runtime binding
|
// TODO: need to convert the value to the runtime binding
|
||||||
|
@ -69,7 +70,7 @@
|
||||||
<Spacer small />
|
<Spacer small />
|
||||||
<ul>
|
<ul>
|
||||||
{#each context.filter(context =>
|
{#each context.filter(context =>
|
||||||
context.readableBinding.startsWith(search)
|
context.readableBinding.match(searchRgx)
|
||||||
) as { readableBinding }}
|
) as { readableBinding }}
|
||||||
<li on:click={() => addToText(readableBinding)}>
|
<li on:click={() => addToText(readableBinding)}>
|
||||||
{readableBinding}
|
{readableBinding}
|
||||||
|
@ -83,7 +84,7 @@
|
||||||
<Spacer small />
|
<Spacer small />
|
||||||
<ul>
|
<ul>
|
||||||
{#each instance.filter(instance =>
|
{#each instance.filter(instance =>
|
||||||
instance.readableBinding.startsWith(search)
|
instance.readableBinding.match(searchRgx)
|
||||||
) as { readableBinding }}
|
) as { readableBinding }}
|
||||||
<li on:click={() => addToText(readableBinding)}>
|
<li on:click={() => addToText(readableBinding)}>
|
||||||
{readableBinding}
|
{readableBinding}
|
||||||
|
@ -95,13 +96,13 @@
|
||||||
<Heading extraSmall>Helpers</Heading>
|
<Heading extraSmall>Helpers</Heading>
|
||||||
<Spacer small />
|
<Spacer small />
|
||||||
<ul>
|
<ul>
|
||||||
{#each helpers.filter(helper =>
|
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
||||||
helper.label.startsWith(search)
|
|
||||||
) as helper}
|
|
||||||
<li on:click={() => addToText(helper.text)}>
|
<li on:click={() => addToText(helper.text)}>
|
||||||
<div>
|
<div>
|
||||||
<Label extraSmall>{helper.displayText}</Label>
|
<Label extraSmall>{helper.displayText}</Label>
|
||||||
<div class="description">{@html helper.description}</div>
|
<div class="description">
|
||||||
|
{@html helper.description}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
Loading…
Reference in New Issue