vue components refactoring

resources/js/components/Inputs/SearchInput.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="search-bar">
+        <div v-if="!query" class="icon">
+            <search-icon size="19" />
+        </div>
+        <div @click="clearInput" v-if="query" class="icon">
+            <x-icon class="pointer" size="19"></x-icon>
+        </div>
+        <input
+            v-model="query"
+            @input="$emit('input', query)"
+            class="query focus-border-theme"
+            type="text"
+            name="searchInput"
+            :placeholder="$t('search_translations')"
+        />
+    </div>
+</template>
+
+<script>
+import { SearchIcon, XIcon } from 'vue-feather-icons'
+
+export default {
+    name: 'SearchInput',
+    components: {
+        SearchIcon,
+        XIcon,
+    },
+    data() {
+        return {
+            query: undefined,
+        }
+    },
+    methods: {
+        clearInput() {
+            this.query = undefined
+            this.$emit('reset-query')
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/forms';
+
+.search-bar {
+    position: relative;
+    width: 100%;
+    border-radius: 8px;
+
+    input {
+        background: $light_background;
+        border-radius: 8px;
+        outline: 0;
+        padding: 9px 20px 9px 43px;
+        font-weight: 700;
+        @include font-size(16);
+        width: 100%;
+        height: 50px;
+        min-width: 175px;
+        transition: 0.15s all ease;
+        border: 1px solid transparent;
+        -webkit-appearance: none;
+        box-shadow: none;
+
+        &::placeholder {
+            color: $light_text;
+            @include font-size(14);
+            font-weight: 700;
+        }
+
+        &:focus {
+            border-width: 1px;
+            border-style: solid;
+        }
+
+        &:focus + .icon {
+            path {
+                color: inherit;
+            }
+        }
+    }
+
+    .icon {
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 11px 15px;
+        display: flex;
+        align-items: center;
+
+        circle,
+        line {
+            color: $light_text;
+        }
+
+        .pointer {
+            cursor: pointer;
+        }
+    }
+}
+
+.dark {
+    .search-bar {
+        input {
+            background: $dark_mode_foreground;
+        }
+    }
+}
+</style>