safavi works

src/components/BasicPacks/BasicActionSheet.vue

@@ -16,8 +16,8 @@
 
 </style>-->
 <template>
-  <VanActionSheet teleport="body" :z-index="zIndex">
-    <div class="justify-center cursor-pointer flex mt-1" @click="$emit('update:show', false)">
+  <VanActionSheet v-model:show="show" teleport="body" :z-index="zIndex">
+    <div class="justify-center cursor-pointer flex mt-1" @click="show = false">
       <span class="rounded-sm w-12 border-t-2 border-t-solid  border-t-gray-500 mt-2"></span>
     </div>
     <div class="mx-4 mb-5 mt-3">
@@ -54,7 +54,10 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
+
 interface Props {
+  show?: boolean
   cancelText?: string
   showButton?: boolean
   showCancel?: boolean
@@ -65,6 +68,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  show: false,
   cancelText: 'بازگشت',
   showButton: false,
   showCancel: true,
@@ -72,6 +76,17 @@ const props = withDefaults(defineProps<Props>(), {
   okText: 'ثبت',
   zIndex: 5200, // --app-z-action-sheet
 })
+
+const emit = defineEmits<{
+  cancel: []
+  ok: []
+  'update:show': [value: boolean]
+}>()
+
+const show = computed({
+  get: () => props.show,
+  set: (value: boolean) => emit('update:show', value),
+})
 </script>
 
 <style lang="less"></style>

src/components/BasicPacks/BasicSelect.vue

@@ -15,6 +15,8 @@
       :placeholder="props.placeholder"
       :allowClear="props.allowClear"
       :filter-option="filterOption"
+      :get-popup-container="getPopupContainer"
+      :dropdown-style="dropdownStyle"
       class="w-full"
     >
       <template #notFoundContent v-if="noData">
@@ -60,12 +62,15 @@ interface Prop {
   allowClear?: boolean
   hasTooltip?: boolean
   noData?: string
+  /** بالاتر از action sheet / modal برای نمایش درست dropdown */
+  inOverlay?: boolean
 }
 
 const props = withDefaults(defineProps<Prop>(), {
   allowClear: true,
   hasTooltip: true,
-  showSearch: true
+  showSearch: true,
+  inOverlay: true,
 })
 
 // console.log('props.items ====>', props.items)
@@ -94,6 +99,17 @@ const handleChange = (e: any) => {
   )
 }
 
+const dropdownStyle = computed(() =>
+  props.inOverlay ? { zIndex: 5300 } : undefined,
+)
+
+function getPopupContainer(triggerNode: HTMLElement) {
+  if (!props.inOverlay) {
+    return triggerNode.parentElement ?? document.body
+  }
+  return document.body
+}
+
 //css style
 // const { prefixCls } = usePrefix('select')
 </script>