boursecu_user/src/views/base/priceTrigger/index.vue

<template>
  <div class="price-trigger-page-root">
    <DesktopPriceTriggerView v-show="isDesktop" />
    <MobilePriceTriggerView v-show="!isDesktop" />

    <BasicActionSheet v-if="!isDesktop" v-model:show="addTriggerVisible" teleport="body">
      <div class="font-bold text-lg mb-2">هشدار قیمت</div>
      <PriceTriggerForm />
    </BasicActionSheet>
  </div>
</template>

<script lang="ts" setup>
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
import { usePriceTriggerPage } from './composables/usePriceTriggerPage'
import DesktopPriceTriggerView from './desktop/DesktopPriceTriggerView.vue'
import MobilePriceTriggerView from './mobile/MobilePriceTriggerView.vue'
import PriceTriggerForm from './components/PriceTriggerForm.vue'

const isDesktop = useDesktopBreakpoint()

const { addTriggerVisible } = usePriceTriggerPage()
</script>

<style scoped>
.price-trigger-page-root {
  min-height: 100%;
  height: 100%;
}
</style>