Fix/pos modal mouse focus

POS/components.d.ts

@@ -38,6 +38,7 @@ declare module 'vue' {
     PartialPayments: typeof import('./src/components/partials/PartialPayments.vue')['default']
     PaymentDialog: typeof import('./src/components/sale/PaymentDialog.vue')['default']
     PhoneInput: typeof import('./src/components/common/PhoneInput.vue')['default']
+    POSDialog: typeof import('./src/components/common/POSDialog.vue')['default']
     POSFooter: typeof import('./src/components/common/POSFooter.vue')['default']
     POSHeader: typeof import('./src/components/pos/POSHeader.vue')['default']
     POSSettings: typeof import('./src/components/settings/POSSettings.vue')['default']

POS/src/components/ShiftClosingDialog.vue

@@ -504,7 +504,8 @@
 </template>
 
 <script setup>
-import { Button, Dialog, FeatherIcon, Input } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button, FeatherIcon, Input } from "frappe-ui"
 import { computed, onBeforeUnmount, reactive, ref, watch } from "vue"
 import { storeToRefs } from "pinia"
 import { useShift, shiftState } from "../composables/useShift"

POS/src/components/ShiftOpeningDialog.vue

@@ -190,7 +190,8 @@
 </template>
 
 <script setup>
-import { Button, Dialog, Input } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button, Input } from "frappe-ui"
 import { createResource } from "frappe-ui"
 import { computed, ref, watch } from "vue"
 import { useShift } from "../composables/useShift"

POS/src/components/common/POSDialog.vue

@@ -0,0 +1,47 @@
+<template>
+	<Dialog v-bind="$attrs">
+		<template v-if="$slots.body" #body>
+			<div class="pos-dialog-interactive-area" @pointerdown.stop @dragstart.prevent>
+				<slot name="body" />
+			</div>
+		</template>
+
+		<template v-if="$slots['body-title']" #body-title>
+			<slot name="body-title" />
+		</template>
+
+		<template v-if="$slots['body-content']" #body-content>
+			<div class="pos-dialog-interactive-area" @pointerdown.stop @dragstart.prevent>
+				<slot name="body-content" />
+			</div>
+		</template>
+
+		<template v-if="$slots.actions" #actions="slotProps">
+			<div class="pos-dialog-interactive-area" @pointerdown.stop @dragstart.prevent>
+				<slot name="actions" v-bind="slotProps" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script setup>
+import { Dialog } from "frappe-ui"
+
+defineOptions({
+	inheritAttrs: false,
+})
+</script>
+
+<style scoped>
+.pos-dialog-interactive-area {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.pos-dialog-interactive-area :deep(input),
+.pos-dialog-interactive-area :deep(textarea),
+.pos-dialog-interactive-area :deep([contenteditable="true"]) {
+	-webkit-user-select: text;
+	user-select: text;
+}
+</style>

POS/src/components/invoices/InvoiceDetailDialog.vue

@@ -281,7 +281,8 @@ import { DEFAULT_CURRENCY, formatCurrency as formatCurrencyUtil } from "@/utils/
 import { getInvoiceStatusColor } from "@/utils/invoice"
 import { logger } from "@/utils/logger"
 import { hydrateLocalOnlyInvoice, isLocalOnlyInvoiceName } from "@/utils/printInvoice"
-import { Button, Dialog, call } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button, call } from "frappe-ui"
 import { ref, watch, nextTick, computed } from "vue"
 
 const log = logger.create('InvoiceDetailDialog')
@@ -411,4 +412,3 @@ function handlePrint() {
 	emit("print-invoice", invoiceData.value)
 }
 </script>
-

POS/src/components/sale/BatchSerialDialog.vue

@@ -198,7 +198,8 @@
 </template>
 
 <script setup>
-import { Button, Dialog, createResource } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button, createResource } from "frappe-ui"
 import { computed, ref, watch } from "vue"
 import { useSerialNumberStore } from "@/stores/serialNumber"
 import { usePOSCartStore } from "@/stores/posCart"

POS/src/components/sale/CouponDialog.vue

@@ -146,7 +146,8 @@
 
 <script setup>
 import { DEFAULT_CURRENCY, formatCurrency as formatCurrencyUtil } from "@/utils/currency"
-import { Button, Dialog, Input, createResource } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button, Input, createResource } from "frappe-ui"
 import { ref, watch } from "vue"
 import { useInvoice } from "@/composables/useInvoice"
 import { useToast } from "@/composables/useToast"

POS/src/components/sale/CreateCustomerDialog.vue

@@ -187,7 +187,8 @@ import { usePOSPermissions } from "@/composables/usePermissions"
 import { useToast } from "@/composables/useToast"
 import { useCountriesStore } from "@/stores/countries"
 import { logger } from "@/utils/logger"
-import { Button, Dialog, Input, createResource } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button, Input, createResource } from "frappe-ui"
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"
 
 const log = logger.create("CreateCustomerDialog")

POS/src/components/sale/CustomerDialog.vue

@@ -181,7 +181,8 @@
 
 <script setup>
 import { useCustomerSearchStore } from "@/stores/customerSearch"
-import { Button, Dialog } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button } from "frappe-ui"
 import { storeToRefs } from "pinia"
 import { computed, onMounted, ref, watch } from "vue"
 import CreateCustomerDialog from "./CreateCustomerDialog.vue"

POS/src/components/sale/DraftInvoicesDialog.vue

@@ -169,7 +169,8 @@ import { clearAllDrafts, deleteDraft, getAllDrafts } from "@/utils/draftManager"
 import { printInvoiceCustom } from "@/utils/printInvoice"
 import { useToast } from "@/composables/useToast"
 import { usePOSShiftStore } from "@/stores/posShift"
-import { Button, Dialog } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button } from "frappe-ui"
 import { onMounted, ref, watch } from "vue"
 
 const { showSuccess, showError } = useToast()

POS/src/components/sale/InvoiceHistoryDialog.vue

@@ -152,7 +152,8 @@
 import { useToast } from "@/composables/useToast"
 import { DEFAULT_CURRENCY, DEFAULT_LOCALE, formatCurrency as formatCurrencyUtil } from "@/utils/currency"
 import { getInvoiceStatusColor } from "@/utils/invoice"
-import { Button, Dialog, Input, createResource } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button, Input, createResource } from "frappe-ui"
 import { computed, ref, watch } from "vue"
 import ReturnInvoiceDialog from "./ReturnInvoiceDialog.vue"
 

POS/src/components/sale/ItemSelectionDialog.vue

@@ -235,7 +235,8 @@
 
 <script setup>
 import { DEFAULT_CURRENCY, formatCurrency as formatCurrencyUtil } from "@/utils/currency"
-import { Button, Dialog } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button } from "frappe-ui"
 import { createResource } from "frappe-ui"
 import { computed, nextTick, ref, watch } from "vue"
 import TranslatedHTML from "../common/TranslatedHTML.vue"

POS/src/components/sale/OffersDialog.vue

@@ -201,7 +201,8 @@
 <script setup>
 import { usePOSOffersStore } from "@/stores/posOffers"
 import { DEFAULT_CURRENCY, DEFAULT_LOCALE, formatCurrency as formatCurrencyUtil } from "@/utils/currency"
-import { Button, Dialog } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button } from "frappe-ui"
 import { computed, ref, watch } from "vue"
 
 // Use Pinia stores

POS/src/components/sale/OfflineInvoicesDialog.vue

@@ -245,7 +245,8 @@
 
 <script setup>
 import { DEFAULT_CURRENCY, formatCurrency as formatCurrencyUtil } from "@/utils/currency"
-import { Button, Dialog } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button } from "frappe-ui"
 import { computed, ref, watch } from "vue"
 
 const props = defineProps({

POS/src/components/sale/PaymentDialog.vue

@@ -1059,7 +1059,8 @@ import {
 import { getPaymentIcon } from "@/utils/payment"
 import { offlineWorker } from "@/utils/offline/workerClient"
 import { logger } from "@/utils/logger"
-import { Dialog, createResource, call } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { createResource, call } from "frappe-ui"
 import { computed, ref, watch, nextTick } from "vue"
 import { useToast } from "@/composables/useToast"
 import { useLongPress } from "@/composables/useLongPress"

POS/src/components/sale/ReturnInvoiceDialog.vue

@@ -768,7 +768,8 @@ import {
 	roundCurrency,
 } from "@/utils/currency"
 import { getInvoiceStatusColor } from "@/utils/invoice"
-import { Button, Dialog, FeatherIcon, createResource } from "frappe-ui"
+import Dialog from "@/components/common/POSDialog.vue"
+import { Button, FeatherIcon, createResource } from "frappe-ui"
 import { computed, onMounted, onUnmounted, reactive, ref, watch } from "vue"
 
 const { showSuccess, showError, showWarning } = useToast()

POS/src/components/sale/WarehouseAvailabilityDialog.vue

@@ -499,7 +499,8 @@
  * Translations: All user-facing strings use __() for i18n
  */
 import { ref, computed, watch, nextTick } from 'vue'
-import { call, Dialog } from 'frappe-ui'
+import Dialog from "@/components/common/POSDialog.vue"
+import { call } from 'frappe-ui'
 import { __ } from '@/utils/translation'
 
 const props = defineProps({

POS/src/pages/POSSale.vue

@@ -1042,7 +1042,8 @@ import {
 } from "@/utils/printInvoice";
 import { qzConnected, connect as qzConnect, disconnect as qzDisconnect } from "@/utils/qzTray";
 
-import { Button, Dialog, createResource } from "frappe-ui";
+import Dialog from "@/components/common/POSDialog.vue";
+import { Button, createResource } from "frappe-ui";
 import { call } from "@/utils/apiWrapper";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useToast } from "@/composables/useToast";