incr: simplify barcode widget

- update exchange rate widget ui
- set default outline colour

src/components/Controls/Barcode.vue

@@ -1,94 +1,46 @@
 <template>
-  <div>
-    <Button :icon="true" @click="openModal = true">{{
-      t`Scan Barcode`
-    }}</Button>
-    <Modal :open-modal="openModal" @closemodal="openModal = false">
-      <FormHeader :form-title="t`Barcode Scanner`" />
-      <hr />
-      <div class="p-4">
-        <div class="w-full flex flex-col justify-center items-center">
-          <input
-            type="text"
-            class="
-              border
-              w-96
-              rounded
-              text-base
-              px-3
-              py-2
-              placeholder-gray-600
-              bg-gray-50
-              focus-within:bg-gray-100
-            "
-            @change="(e) => getItem((e.target as HTMLInputElement)?.value)"
-            :placeholder="t`Enter barcode`"
-          />
-          <div v-if="error" class="text-sm text-red-600 mt-4 w-96 text-center">
-            {{ error }}
-          </div>
-          <div
-            v-if="success"
-            class="text-sm text-green-600 mt-4 w-96 text-center"
-          >
-            {{ success }}
-          </div>
-        </div>
-      </div>
-    </Modal>
+  <div
+    class="
+      flex
+      items-center
+      border
+      w-36
+      rounded
+      px-2
+      bg-gray-50
+      focus-within:bg-gray-100
+    "
+  >
+    <input
+      ref="scanner"
+      type="text"
+      class="text-base placeholder-gray-600 w-full bg-transparent outline-none"
+      @change="handleChange"
+      :placeholder="t`Enter barcode`"
+    />
+    <feather-icon
+      name="maximize"
+      class="w-3 h-3 text-gray-600 cursor-text"
+      @click="() => ($refs.scanner as HTMLInputElement).focus()"
+    />
   </div>
 </template>
+
 <script lang="ts">
+import { showToast } from 'src/utils/ui';
 import { defineComponent } from 'vue';
-import Button from '../Button.vue';
-import FormHeader from '../FormHeader.vue';
-import Modal from '../Modal.vue';
 export default defineComponent({
-  components: { Button, Modal, FormHeader },
   emits: ['item-selected'],
-  watch: {
-    openModal(value: boolean) {
-      if (value) {
-        return;
-      }
-
-      this.clear();
-    },
-    error(value: string) {
-      if (!value) {
-        return;
-      }
-
-      this.success = '';
-    },
-    success(value: string) {
-      if (!value) {
-        return;
-      }
-
-      this.error = '';
-    },
-  },
-  data() {
-    return {
-      openModal: false,
-      error: '',
-      success: '',
-    } as {
-      openModal: boolean;
-      error: string;
-      success: string;
-    };
-  },
   methods: {
-    clear() {
-      this.error = '';
-      this.success = '';
+    handleChange(e: Event) {
+      const elem = e.target as HTMLInputElement;
+      this.getItem(elem.value);
+      elem.value = '';
     },
     async getItem(code: string) {
       const barcode = code.trim();
       if (!/\d{12,}/.test(barcode)) {
-        return (this.error = this.t`Invalid barcode ${barcode}.`);
+        return this.error(this.t`Invalid barcode value ${barcode}.`);
       }
 
       const items = (await this.fyo.db.getAll('Item', {
@@ -98,12 +50,18 @@ export default defineComponent({
 
       const name = items?.[0]?.name;
       if (!name) {
-        return (this.error = this.t`Item with barcode ${barcode} not found.`);
+        return this.error(this.t`Item with barcode ${barcode} not found.`);
       }
 
-      this.success = this.t`Quantity 1 of ${name} added.`;
+      this.success(this.t`${name} added.`);
       this.$emit('item-selected', name);
     },
+    error(message: string) {
+      showToast({ type: 'error', message });
+    },
+    success(message: string) {
+      showToast({ type: 'success', message });
+    },
   },
 });
 </script>

src/components/Controls/ExchangeRate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center bg-gray-100 rounded-md textsm px-1">
+  <div class="flex items-center bg-gray-50 rounded-md textsm px-1 border">
     <div
       class="rate-container"
       :class="disabled ? 'bg-gray-100' : 'bg-gray-25'"
@@ -89,12 +89,11 @@ export default defineComponent({
 </script>
 <style scoped>
 input[type='number'] {
-  @apply w-12 outline-none bg-transparent p-0.5;
+  @apply w-12 bg-transparent p-0.5;
 }
 
 .rate-container {
-  @apply flex items-center rounded-md border  border-gray-100 text-gray-900
-   text-sm outline-none focus-within:bg-gray-50 px-1  focus-within:border-gray-200;
+  @apply flex items-center rounded-md  border-gray-100 text-gray-900 text-sm  px-1  focus-within:border-gray-200 bg-transparent;
 }
 
 .rate-container > p {

src/styles/index.css

@@ -7,6 +7,7 @@
 }
 
 * {
+  outline-color: theme('colors.pink.500');
   font-variation-settings: 'slnt' 0deg;
 }
 .italic {