Compare commits

...

1 Commits

Author SHA1 Message Date
MAB
4ab1cd69b6 lint 2023-10-13 11:12:00 +02:00
3 changed files with 41 additions and 37 deletions

View File

@ -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"

View File

@ -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;

View File

@ -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(),