summaryrefslogtreecommitdiff
path: root/source/_assets/js/components/Search.vue
diff options
context:
space:
mode:
authorDavid T. Sadler <davidtsadler@googlemail.com>2020-03-08 02:47:30 +0000
committerDavid T. Sadler <davidtsadler@googlemail.com>2020-03-08 02:47:30 +0000
commit22657d7a8268d703b3461bdcbd508a897ade9966 (patch)
tree314b54e681473586b83479324905e1f1f2385a18 /source/_assets/js/components/Search.vue
parent8ee2f1b17cb2b95454e6686d9fe32dbcadcdb9dd (diff)
Remove un-needed files
Diffstat (limited to 'source/_assets/js/components/Search.vue')
-rw-r--r--source/_assets/js/components/Search.vue133
1 files changed, 0 insertions, 133 deletions
diff --git a/source/_assets/js/components/Search.vue b/source/_assets/js/components/Search.vue
deleted file mode 100644
index c5715a9..0000000
--- a/source/_assets/js/components/Search.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
- <div class="flex flex-1 justify-end items-center text-right px-4">
- <div
- class="absolute md:relative w-full justify-end bg-white left-0 top-0 z-10 mt-7 md:mt-0 px-4 md:px-0"
- :class="{'hidden md:flex': ! searching}"
- >
- <label for="search" class="hidden">Search</label>
-
- <input
- id="search"
- v-model="query"
- ref="search"
- class="transition-fast relative block h-10 w-full lg:w-1/2 lg:focus:w-3/4 bg-gray-100 border border-gray-500 focus:border-blue-400 outline-none cursor-pointer text-gray-700 px-4 pb-0 pt-px"
- :class="{ 'transition-border': query }"
- autocomplete="off"
- name="search"
- placeholder="Search"
- type="text"
- @keyup.esc="reset"
- @blur="reset"
- >
-
- <button
- v-if="query || searching"
- class="absolute top-0 right-0 leading-snug font-400 text-3xl text-blue-500 hover:text-blue-600 focus:outline-none pr-7 md:pr-3"
- @click="reset"
- >&times;</button>
-
- <transition name="fade">
- <div v-if="query" class="absolute left-0 right-0 md:inset-auto w-full lg:w-3/4 text-left mb-4 md:mt-10">
- <div class="flex flex-col bg-white border border-b-0 border-t-0 border-blue-400 rounded-b-lg shadow-lg mx-4 md:mx-0">
- <a
- v-for="(result, index) in results"
- class="bg-white hover:bg-blue-100 border-b border-blue-400 text-xl cursor-pointer p-4"
- :class="{ 'rounded-b-lg' : (index === results.length - 1) }"
- :href="result.link"
- :title="result.title"
- :key="result.link"
- @mousedown.prevent
- >
- {{ result.title }}
-
- <span class="block font-normal text-gray-700 text-sm my-1" v-html="result.snippet"></span>
- </a>
-
- <div
- v-if="! results.length"
- class="bg-white w-full hover:bg-blue-100 border-b border-blue-400 rounded-b-lg shadow cursor-pointer p-4"
- >
- <p class="my-0">No results for <strong>{{ query }}</strong></p>
- </div>
- </div>
- </div>
- </transition>
- </div>
-
- <button
- title="Start searching"
- type="button"
- class="flex md:hidden bg-gray-100 hover:bg-blue-100 justify-center items-center border border-gray-500 rounded-full focus:outline-none h-10 px-3"
- @click.prevent="showInput"
- >
- <img src="/assets/img/magnifying-glass.svg" alt="search icon" class="h-4 w-4 max-w-none">
- </button>
- </div>
-</template>
-
-<script>
-export default {
- data() {
- return {
- fuse: null,
- searching: false,
- query: '',
- };
- },
- computed: {
- results() {
- return this.query ? this.fuse.search(this.query) : [];
- },
- },
- methods: {
- showInput() {
- this.searching = true;
- this.$nextTick(() => {
- this.$refs.search.focus();
- })
- },
- reset() {
- this.query = '';
- this.searching = false;
- },
- },
- created() {
- axios('/index.json').then(response => {
- this.fuse = new fuse(response.data, {
- minMatchCharLength: 6,
- keys: ['title', 'snippet', 'categories'],
- });
- });
- },
-};
-</script>
-
-<style>
-input[name='search'] {
- background-image: url('/assets/img/magnifying-glass.svg');
- background-position: 0.8em;
- background-repeat: no-repeat;
- border-radius: 25px;
- text-indent: 1.2em;
-}
-
-input[name='search'].transition-border {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- border-top-left-radius: .5rem;
- border-top-right-radius: .5rem;
-}
-
-.fade-enter-active {
- transition: opacity .5s;
-}
-
-.fade-leave-active {
- transition: opacity 0s;
-}
-
-.fade-enter,
-.fade-leave-to {
- opacity: 0;
-}
-</style>