Svelte component

README.md

Svelte component

This gist was generated by the Svelte REPL. Visit https://svelte.technology/repl?gist=this_gist_id to see it.

App.html

<div class="filtering-list">
    <div class="filter-search">
        <input bind:value="q" type="text" class="search">
    </div>

    <ul class="filter-list">
        {{#each filteredList as name}}
        <li>#{{name}}</li>
        {{/each}}
    </ul>
    {{#if filteredList == ''}}
        <p class="filter-no-match">There is no item matching '{{q}}' that can be displayed.</p>
    {{/if}}
</div>

<script>
    var startsWith = function (item, query) {
        return item.toLowerCase().indexOf(query.toLowerCase()) != -1;
    };

    export default {
        data: function () {
            return {
                q: '',
                list: ['angular', 'backbone', 'ember', 'glimmer', 'react', 'svelte', 'vue']
            }
        },
        computed: {
            filteredList: function(q, list) {
                return q && q.length 
                    ? list.filter(item => startsWith(item, q)) : list;
            }
        }
    }
</script>

<style>
    .filtering-list {
        font-size: 18px;
        padding: 10px;
    }
    .search {
        border: 1px solid #ccc;
        border-radius: 10px;
        font-size: 18px;
        padding: 15px 12px;
        outline: none;
        width: 100%;
    }
    .filter-list {
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
    }
		.filter-list li:first-child {
        border-top-left-radius: 5px;
				border-top-right-radius: 5px;
    }
		.filter-list li:last-child {
        border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
    }
    .filter-list li {
				margin-bottom: -1px;
        padding: 10px;
        background-color: #fff;
				border: 1px solid #ddd;
        color: #333;
    }
    .filter-no-match {
        background-color: #ddd;
        padding: 15px;
    }
</style>

data.json

{
  "name": "world"
}