Merge branch 'master' of github.com:lissy93/dashy

src/components/Widgets/CustomSearch.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="custom-search">
+    <input type="text" v-model="query"
+      @keyup.enter="search(defaultEngine)"
+      @keyup.stop @keydown.stop
+      :placeholder="placeholder">
+    <div class="buttons">
+      <button
+        v-for="(engine, key) in engines" :key="key"
+        v-on:click="search(engine)">
+        {{ engine.title }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      query: '',
+    };
+  },
+  computed: {
+    placeholder() {
+      return this.options.placeholder || '';
+    },
+    engines() {
+      return this.options.engines || [];
+    },
+    defaultEngine() {
+      return this.engines[0];
+    },
+  },
+  methods: {
+    search(engine) {
+      if (engine !== undefined && this.query !== '') {
+        window.open(engine.url + this.query, '_blank');
+      }
+    },
+  },
+};
+
+</script>
+
+<style scoped lang="scss">
+
+.custom-search {
+  font-size: 1.2rem;
+  input {
+    width: 80%;
+    margin: 1rem 10%;
+    padding: 0.5rem;
+    font-size: 1.2rem;
+  }
+  .buttons {
+    text-align:center;
+    button{
+      margin: 0.5rem;
+      padding: 0.5rem;
+      border: none;
+      color: var(--item-text-color);
+      background: var(--item-background);
+      font-size: 1.2rem;
+    }
+
+  }
+
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -52,6 +52,7 @@ const COMPAT = {
   clock: 'Clock',
   'crypto-price-chart': 'CryptoPriceChart',
   'crypto-watch-list': 'CryptoWatchList',
+  'custom-search': 'CustomSearch',
   'cve-vulnerabilities': 'CveVulnerabilities',
   'domain-monitor': 'DomainMonitor',
   'code-stats': 'CodeStats',