Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
4ab1cd69b6 |
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
<svg
|
<svg
|
||||||
version="1.1"
|
|
||||||
id="Layer_1"
|
id="Layer_1"
|
||||||
|
version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
x="0px"
|
x="0px"
|
||||||
|
|
|
@ -1,45 +1,33 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="is-multiline">
|
<div class="is-multiline">
|
||||||
<!-- <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px"> -->
|
|
||||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
|
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
|
||||||
<div class="search-box mx-auto">
|
<div class="search-box mx-auto">
|
||||||
<div class="field has-addons main-search-from-bg">
|
<div class="field has-addons main-search-from-bg">
|
||||||
<div class="control is-expanded">
|
<div class="control is-expanded">
|
||||||
<input
|
<input
|
||||||
id="search_query"
|
id="search_query"
|
||||||
v-model="display"
|
v-model="searchTerm"
|
||||||
class="input is-medium"
|
class="input is-medium"
|
||||||
type="text"
|
type="text"
|
||||||
name="q"
|
name="q"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
v-bind:placeholder="placeholder"
|
v-bind:placeholder="placeholder"
|
||||||
@input="searchChanged"
|
@input="searchChanged"
|
||||||
@keydown.down="onArrowDown"
|
|
||||||
@keydown.up="onArrowUp"
|
|
||||||
@keydown.enter="onEnter"
|
|
||||||
@keydown.tab="close"
|
|
||||||
@focus="focus"
|
|
||||||
/>
|
/>
|
||||||
<!-- <p>Display is: {{ display }}</p> -->
|
|
||||||
<!-- v-on:input="searchChanged" -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<button class="button input is-medium search-button-icon" @click="search()">
|
<button class="button input is-medium search-button-icon" @click="search()">
|
||||||
<!-- <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" /> -->
|
|
||||||
<i class="fas fa-search text-white"></i>
|
<i class="fas fa-search text-white"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="column is-half is-offset-one-quarter"> -->
|
|
||||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
|
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
|
||||||
<ul v-show="showResults" class="autocomplete-results pure-u-23-24">
|
<ul v-show="showResults" class="autocomplete-results pure-u-23-24">
|
||||||
<li v-if="isLoading" class="loading">Loading results...</li>
|
<li v-if="isLoading" class="loading">Loading results...</li>
|
||||||
|
|
||||||
<li
|
<li
|
||||||
v-for="(result, i) in suggestions"
|
v-for="(result, i) in searchResults"
|
||||||
v-else
|
v-else
|
||||||
v-bind:key="i"
|
v-bind:key="i"
|
||||||
v-bind:ref="setItemRef"
|
v-bind:ref="setItemRef"
|
||||||
|
@ -48,7 +36,7 @@
|
||||||
@click.prevent="select(result)"
|
@click.prevent="select(result)"
|
||||||
>
|
>
|
||||||
<div class="small-label">
|
<div class="small-label">
|
||||||
<label>{{ result.value }} ({{ result.type }})</label>
|
<label>{{ result.title }}</label>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -56,6 +44,22 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchTerm: "",
|
||||||
|
searchResults: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
searchChanged() {
|
||||||
|
//...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import VsInput from "./vs-input";
|
import VsInput from "./vs-input";
|
||||||
export default VsInput;
|
export default VsInput;
|
||||||
|
|
|
@ -2,11 +2,11 @@
|
||||||
const webpack = require("webpack");
|
const webpack = require("webpack");
|
||||||
// const { defineConfig } = require("@vue/cli-service");
|
// const { defineConfig } = require("@vue/cli-service");
|
||||||
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
|
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
|
||||||
const { VueLoaderPlugin } = require('vue-loader');
|
const { VueLoaderPlugin } = require("vue-loader");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
publicPath: "/",
|
publicPath: "/",
|
||||||
chainWebpack: config => {
|
chainWebpack: (config) => {
|
||||||
const vueRule = config.module.rule("vue");
|
const vueRule = config.module.rule("vue");
|
||||||
vueRule.uses.clear();
|
vueRule.uses.clear();
|
||||||
// const tsRule = config.module.rule("ts");
|
// const tsRule = config.module.rule("ts");
|
||||||
|
@ -37,14 +37,14 @@ module.exports = {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
test: /\.vue$/,
|
test: /\.vue$/,
|
||||||
loader: 'vue-loader',
|
loader: "vue-loader",
|
||||||
options: {
|
options: {
|
||||||
// loaders: {
|
// loaders: {
|
||||||
// ts: 'ts-loader',
|
// ts: 'ts-loader',
|
||||||
// },
|
// },
|
||||||
cacheDirectory: 'C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader',
|
cacheDirectory: "C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader",
|
||||||
cacheIdentifier: '39baf1b4',
|
cacheIdentifier: "39baf1b4",
|
||||||
babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'],
|
babelParserPlugins: ["jsx", "classProperties", "decorators-legacy"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
|
@ -76,9 +76,9 @@ module.exports = {
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
vue$: 'vue/dist/vue.runtime.esm-bundler.js'
|
vue$: "vue/dist/vue.runtime.esm-bundler.js",
|
||||||
},
|
},
|
||||||
extensions : ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'],
|
extensions: [".tsx", ".ts", ".mjs", ".js", ".jsx", ".vue", ".json", ".wasm"],
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
// new VueLoaderPlugin(),
|
// new VueLoaderPlugin(),
|
||||||
|
|
Loading…
Reference in New Issue
Block a user