tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/src/components/Search/SearchAdvanced/UserAdvanced/UserAdvanced.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchUserAdvanced {
   padding: 10px 20px;
   background-color: var(--bg-color-operate);
@@ -306,4 +303,4 @@
   cursor: pointer;
   background: var(--text-color-link);
   color: #fff;
-} 
+}

package/src/components/Search/SearchBar/SearchBar.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchBar {
   display: flex;
   align-items: center;
@@ -27,7 +24,7 @@
 
     .tui-input {
       width: 100%;
-      
+
       .tui-input__native-input {
         height: 40px;
         padding: 8px 12px 8px 40px;
@@ -91,7 +88,7 @@
 
     .clearIcon {
       color: var(--text-color-disabled);
-      
+
       &:hover {
         color: var(--text-color-secondary);
       }
@@ -117,4 +114,4 @@
   &--h5 {
     padding: 10px;
   }
-} 
+}

package/src/components/StreamMixer/LocalMixer/index.vue

@@ -210,8 +210,13 @@ const re = new ResizeObserver(() => {
 onMounted(() => {
   re.observe(localMixerRef.value);
   TUIRoomEngine.once('ready', async () => {
+    const mixerView = document.getElementById('local-video-mixer');
+    if (!mixerView) {
+      return;
+    }
+
     const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
-    await mediaSourceManager.bindPreviewArea(document.getElementById('local-video-mixer') as HTMLElement);
+    await mediaSourceManager.bindPreviewArea(mixerView as HTMLElement);
     getMixControlStyle();
   });
 

package/src/components/StreamMixer/index.ts

@@ -1,7 +1,10 @@
-import StreamMixer from './index.vue';
 import { addI18n } from '../../i18n';
 import { enUSResource, zhCNResource } from './i18n';
+import StreamMixerComp from './index.vue';
+
 addI18n('en-US', { translation: enUSResource });
 addI18n('zh-CN', { translation: zhCNResource });
 
+const StreamMixer = StreamMixerComp;
+
 export { StreamMixer };

package/src/components/StreamView/Layout/CustomLayout.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="custom-layout-container" ref="streamListContainerRef">
-    <div class="stream-list" ref="streamListRef" :style="streamListStyle">
+  <div ref="streamListContainerRef" class="custom-layout-container">
+    <div
+      ref="streamListRef"
+      class="stream-list"
+      :style="streamListStyle"
+    >
       <StreamRegion
         v-for="(renderUserInfo, index) in renderUserInfoList"
-        class="stream-list-item"
         :key="`${renderUserInfo.userInfo.userId}_${renderUserInfo.streamType}`"
+        class="stream-list-item"
         :userInfo="renderUserInfo.userInfo"
         :stream-type="renderUserInfo.streamType"
         :style="getStreamStyle(index)"
@@ -12,7 +16,7 @@
         @stream-view-dblclick="handleStreamDblClick"
       >
         <template #streamViewUI="slotProps">
-          <slot name="streamViewUI" v-bind="slotProps"></slot>
+          <slot name="streamViewUI" v-bind="slotProps" />
         </template>
       </StreamRegion>
     </div>
@@ -22,13 +26,13 @@
 <script setup lang="ts">
 import { defineProps, ref, computed, onMounted, onBeforeUnmount, defineEmits, watch, withDefaults } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
-import StreamRegion from '../common/StreamRegion';
-import { UserInfo } from '../../../types';
-import useUserState from '../../../states/UserState/index';
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
-import { useRoomState } from '../../../states/RoomState';
-import useLoginState from '../../../states/LoginState';
 import { useLiveListState } from '../../../states/LiveListState';
+import useLoginState from '../../../states/LoginState';
+import { useRoomState } from '../../../states/RoomState';
+import useUserState from '../../../states/UserState/index';
+import StreamRegion from '../common/StreamRegion';
+import type { UserInfo } from '../../../types';
 
 const { userList, localUser, userListOnSeat } = useUserState();
 const { currentRoom } = useRoomState();
@@ -98,17 +102,17 @@ const renderUserInfoList: ComputedRef<{ userInfo: UserInfo; streamType: TUIVideo
   // }
   // return videoUserList;
 
-  if (!totalUserList.value || totalUserList.value.length === 0) return [];
+  if (!totalUserList.value || totalUserList.value.length === 0) {
+    return [];
+  }
 
   return totalUserList.value
     ?.filter(props.filterFn)
     .sort(props.sortFn)
-    .map(item => {
-      return {
-        userInfo: item,
-        streamType: TUIVideoStreamType.kCameraStream,
-      };
-    });
+    .map(item => ({
+      userInfo: item,
+      streamType: TUIVideoStreamType.kCameraStream,
+    }));
 });
 
 const streamListContainerRef = ref();
@@ -116,9 +120,7 @@ const streamListRef = ref();
 
 // ------------ 处理 layout 布局 START ------------
 
-const aspectRatio = computed(() => {
-  return '16:9';
-});
+const aspectRatio = computed(() => '16:9');
 
 // Single video stream window margin size
 // 根据 streamView 的父亲元素 A 大小获取一个流布局的容器 B，容器 B 符合 aspectRatio 比例
@@ -135,20 +137,20 @@ const originStreamListStyle: Ref<Record<string, any>> = ref({
   scale: 1,
 });
 
-const streamListStyle = computed(() => {
-  return {
-    width: `${originStreamListStyle.value.width * originStreamListStyle.value.scale}px`,
-    height: `${originStreamListStyle.value.height * originStreamListStyle.value.scale}px`,
-    transform: `translate(${originStreamListStyle.value.transformX * originStreamListStyle.value.scale}px, ${
-      originStreamListStyle.value.transformY * originStreamListStyle.value.scale
-    }px)`,
-  };
-});
+const streamListStyle = computed(() => ({
+  width: `${originStreamListStyle.value.width * originStreamListStyle.value.scale}px`,
+  height: `${originStreamListStyle.value.height * originStreamListStyle.value.scale}px`,
+  transform: `translate(${originStreamListStyle.value.transformX * originStreamListStyle.value.scale}px, ${
+    originStreamListStyle.value.transformY * originStreamListStyle.value.scale
+  }px)`,
+}));
 
 const customConfig = computed(() => {
   const { layoutList } = JSON.parse(props.config);
-  if (!layoutList) return [];
-  const absoluteLayoutList = layoutList.map(item => {
+  if (!layoutList) {
+    return [];
+  }
+  const absoluteLayoutList = layoutList.map((item) => {
     if (item.width > 1 || item.height > 1) {
       return {
         left: stringToNumber(originStreamListStyle.value.width) * (item.x / 720),
@@ -200,10 +202,10 @@ function handleStreamListTransform() {
   const scaleHeight = containerHeight / streamContainerSize.value.height;
   originStreamListStyle.value.scale = Math.min(scaleWidth, scaleHeight);
 
-  originStreamListStyle.value.transformX =
-    stringToNumber(originStreamListStyle.value.width) / 2 - streamContainerSize.value.centerX;
-  originStreamListStyle.value.transformY =
-    stringToNumber(originStreamListStyle.value.height) / 2 - streamContainerSize.value.centerY;
+  originStreamListStyle.value.transformX
+    = stringToNumber(originStreamListStyle.value.width) / 2 - streamContainerSize.value.centerX;
+  originStreamListStyle.value.transformY
+    = stringToNumber(originStreamListStyle.value.height) / 2 - streamContainerSize.value.centerY;
 }
 
 const widthRatio: ComputedRef<number> = computed(() => {
@@ -252,7 +254,9 @@ function stringToNumber(str: string) {
 
 function getStreamStyle(index: number) {
   const streamLayoutConfig = JSON.parse(props.config).layoutList[index];
-  if (!streamLayoutConfig) return;
+  if (!streamLayoutConfig) {
+    return;
+  }
   // Todo: 暂时兼容绝对值和百分比，后续需要统一
   if (streamLayoutConfig?.width > 1) {
     return {
@@ -281,7 +285,7 @@ watch(
   () => currentLive.value?.layoutTemplate,
   () => {
     handleLayout();
-  }
+  },
 );
 
 const resizeObserver = new ResizeObserver(() => {

package/src/components/StreamView/Layout/GridLayout.vue

@@ -8,15 +8,15 @@
     }"
   >
     <div
-      class="stream-list"
       ref="streamListRef"
+      class="stream-list"
       :style="streamListStyle"
       @wheel="handleWheel"
     >
       <StreamRegion
         v-for="renderUserInfo in renderUserInfoList"
-        class="stream-list-item"
         :key="`${renderUserInfo.userInfo.userId}_${renderUserInfo.streamType}`"
+        class="stream-list-item"
         :userInfo="renderUserInfo.userInfo"
         :stream-type="renderUserInfo.streamType"
         :style="streamStyle"
@@ -42,23 +42,22 @@ import {
   nextTick,
 } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
-import StreamRegion from '../common/StreamRegion';
-import { getContentSize } from '../../../utils/domOperation';
-import { UserInfo, LocalRoomStatus } from '../../../types';
-import useUserState from '../../../states/UserState/index';
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
-import { safelyParse } from '../../../utils/utils';
-import { useRoomState } from '../../../states/RoomState';
 import { useDeviceState } from '../../../states/DeviceState';
 import useLoginState from '../../../states/LoginState';
+import { useRoomState } from '../../../states/RoomState';
+import useUserState from '../../../states/UserState/index';
 import { getNewUserInfo } from '../../../states/UserState/store';
+import { getContentSize } from '../../../utils/domOperation';
+import { safelyParse } from '../../../utils/utils';
+import StreamRegion from '../common/StreamRegion';
+import type { UserInfo } from '../../../types';
 
 const { userList, userListOnSeat, userWithScreenOn } = useUserState();
 const { microphoneStatus, cameraStatus } = useDeviceState();
-const { currentRoom, localRoomStatus } = useRoomState();
+const { currentRoom } = useRoomState();
 const { loginUserInfo } = useLoginState();
 
-
 const emits = defineEmits(['stream-view-dblclick']);
 
 interface Props {
@@ -75,16 +74,14 @@ const props = withDefaults(defineProps<Props>(), {
     columnSpacing: 8,
   })),
   filterFn: () => true,
-  sortFn: () => 0
+  sortFn: () => 0,
 });
 
-const gridConfig = computed(() => {
-  return safelyParse(props.config) || {
-    maxRows: 3,
-    maxColumns: 3,
-    rowSpacing: 8,
-    columnSpacing: 8,
-  };
+const gridConfig = computed(() => safelyParse(props.config) || {
+  maxRows: 3,
+  maxColumns: 3,
+  rowSpacing: 8,
+  columnSpacing: 8,
 });
 
 const localFakeUser = computed(() => {
@@ -92,26 +89,24 @@ const localFakeUser = computed(() => {
   localUser.cameraStatus = cameraStatus.value;
   localUser.microphoneStatus = microphoneStatus.value;
   return localUser;
-})
+});
 
 const totalUserList = computed(() => {
   if (!currentRoom.value && localRoomStatus.value === LocalRoomStatus.IDLE) {
-    return [localFakeUser.value]
+    return [localFakeUser.value];
   }
   return currentRoom.value?.isSeatEnabled ? userListOnSeat.value : userList.value;
 });
 
-const renderUserInfoList: ComputedRef<({ userInfo: UserInfo, streamType: TUIVideoStreamType })[]> = computed(() => {
-  const videoUserList = totalUserList.value.filter(props.filterFn).map(item => {
-    return {
-      userInfo: item,
-      streamType: TUIVideoStreamType.kCameraStream
-    }
-  });
+const renderUserInfoList: ComputedRef<({ userInfo: UserInfo; streamType: TUIVideoStreamType })[]> = computed(() => {
+  const videoUserList = totalUserList.value.filter(props.filterFn).map(item => ({
+    userInfo: item,
+    streamType: TUIVideoStreamType.kCameraStream,
+  }));
   if (userWithScreenOn.value && [userWithScreenOn.value].filter(props.filterFn).length > 0) {
     videoUserList.unshift({
       userInfo: userWithScreenOn.value,
-      streamType: TUIVideoStreamType.kScreenStream
+      streamType: TUIVideoStreamType.kScreenStream,
     });
   }
   return videoUserList;
@@ -123,7 +118,7 @@ const column = computed(() => {
   }
   return Math.min(
     Math.ceil(Math.sqrt(renderUserInfoList.value.length)),
-    gridConfig.value.maxColumns
+    gridConfig.value.maxColumns,
   );
 });
 const row = computed(() => {
@@ -132,7 +127,7 @@ const row = computed(() => {
   }
   return Math.min(
     Math.ceil(renderUserInfoList.value.length / column.value),
-    gridConfig.value.maxRows
+    gridConfig.value.maxRows,
   );
 });
 
@@ -140,7 +135,7 @@ const streamListContainerRef = ref();
 const streamListRef = ref();
 
 const isEqualPointsLayout = computed(
-  () => gridConfig.value.maxRows !== Infinity && gridConfig.value.maxColumns !== Infinity
+  () => gridConfig.value.maxRows !== Infinity && gridConfig.value.maxColumns !== Infinity,
 );
 const isHorizontalInfinityLayout = computed(() => gridConfig.value.maxColumns === Infinity);
 const isVerticalInfinityLayout = computed(() => gridConfig.value.maxRows === Infinity);
@@ -151,7 +146,7 @@ watch(
     await nextTick();
     handleLayout();
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 function handleLayout() {
@@ -165,7 +160,6 @@ function handleLayout() {
   }
   if (isEqualPointsLayout.value) {
     handleEqualPointsLayout();
-    return;
   }
 }
 
@@ -204,10 +198,10 @@ async function handleEqualPointsLayout() {
   const containerWidth = Math.floor(containerRect.width);
   const containerHeight = Math.floor(containerRect.height);
   // Subtract the margin size of a single video stream to ensure that the ratio of width and height is 16:9
-  const contentWidth =
-    (containerWidth - (column.value - 1) * gridConfig.value.columnSpacing) / column.value;
-  const contentHeight =
-    (containerHeight - (row.value - 1) * gridConfig.value.rowSpacing) / row.value;
+  const contentWidth
+    = (containerWidth - (column.value - 1) * gridConfig.value.columnSpacing) / column.value;
+  const contentHeight
+    = (containerHeight - (row.value - 1) * gridConfig.value.rowSpacing) / row.value;
 
   let width = contentWidth;
   let height = contentHeight;
@@ -342,6 +336,3 @@ function handleWheel(event: WheelEvent) {
   }
 }
 </style>
-../../../states/DeviceState
-../../../states/LoginState
-../../../states/RoomState

package/src/components/StreamView/Layout/MeetingLayout.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="streamContainer" :class="streamContainerClass">
     <StreamRegion
-      class="enlarged-stream-container"
       v-if="enlargeStream"
+      class="enlarged-stream-container"
       :user-info="enlargeStream.userInfo"
       :stream-type="enlargeStream.streamType"
       :support-touch-scale="true"
@@ -36,15 +36,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, watch, computed, ComputedRef } from 'vue';
-import ArrowStroke from '../common/ArrowStroke.vue';
-import StreamRegion from '../common/StreamRegion';
-import StreamList from '../common/StreamList/index.vue';
+import type { Ref, ComputedRef } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
-import { StreamPlayMode, StreamPlayQuality } from '../../../types';
-import useUserState from '../../../states/UserState/index';
 import { useRoomState } from '../../../states/RoomState';
-import { DeviceStatus, UserInfo } from '../../../types';
+import useUserState from '../../../states/UserState/index';
+import { StreamPlayMode, StreamPlayQuality, DeviceStatus } from '../../../types';
+import ArrowStroke from '../common/ArrowStroke.vue';
+import StreamList from '../common/StreamList/index.vue';
+import StreamRegion from '../common/StreamRegion';
+import type { UserInfo } from '../../../types';
 
 interface VideoStreamInfo {
   userInfo: UserInfo;
@@ -65,20 +66,20 @@ const localCameraStreamInfo: ComputedRef<VideoStreamInfo | null> = computed(() =
     return {
       userInfo: localUser.value,
       streamType: TUIVideoStreamType.kCameraStream,
-    }
+    };
   }
   return null;
-})
+});
 
 const screenStreamInfo: ComputedRef<VideoStreamInfo | null> = computed(() => {
   if (userWithScreenOn.value) {
     return {
       userInfo: userWithScreenOn.value,
       streamType: TUIVideoStreamType.kScreenStream,
-    }
+    };
   }
   return null;
-})
+});
 
 const allStreamInfoList: ComputedRef<VideoStreamInfo[]> = computed(() => {
   let cameraStreamList = [];
@@ -97,7 +98,7 @@ const allStreamInfoList: ComputedRef<VideoStreamInfo[]> = computed(() => {
     return [screenStreamInfo.value, ...cameraStreamList];
   }
   return cameraStreamList;
-})
+});
 
 const renderStreamInfoList: ComputedRef<VideoStreamInfo[]> = computed(() => {
   if (props.filterFn) {
@@ -109,15 +110,15 @@ const renderStreamInfoList: ComputedRef<VideoStreamInfo[]> = computed(() => {
 const gridLayoutStreamList: ComputedRef<VideoStreamInfo[]> = computed(() => {
   if (currentLayout.value === LAYOUT.NINE_EQUAL_POINTS) {
     return renderStreamInfoList.value;
-  } else {
-    if (enlargeStream.value?.streamType === TUIVideoStreamType.kScreenStream || !userWithScreen.value) {
-      return renderStreamInfoList.value.filter(stream => stream.streamType !== TUIVideoStreamType.kScreenStream);
-    } else if (screenStreamInfo.value) {
-      return renderStreamInfoList.value;
-    }
   }
+  if (enlargeStream.value?.streamType === TUIVideoStreamType.kScreenStream || !userWithScreen.value) {
+    return renderStreamInfoList.value.filter(stream => stream.streamType !== TUIVideoStreamType.kScreenStream);
+  } if (screenStreamInfo.value) {
+    return renderStreamInfoList.value;
+  }
+
   return [];
-})
+});
 
 interface Props {
   config?: string;
@@ -142,10 +143,10 @@ const props = withDefaults(defineProps<Props>(), {
     topLayout: {
       maxColumns: 0,
       maxRows: 1,
-    }
+    },
   })),
   filterFn: (streamInfo: VideoStreamInfo, index: number, list: UserInfo[]) => true,
-  sortFn: (streamInfo: VideoStreamInfo, index: number, list: UserInfo[]) => 0
+  sortFn: (streamInfo: VideoStreamInfo, index: number, list: UserInfo[]) => 0,
 });
 
 const streamListConfig = computed(() => {
@@ -159,7 +160,7 @@ const streamListConfig = computed(() => {
     return JSON.stringify(JSON.parse(props.config).topLayout);
   }
   return JSON.stringify(JSON.parse(props.config).gridLayout);
-})
+});
 
 const showControlBar = computed(() => JSON.parse(props.config)?.showControlBar);
 const preferLayout = computed(() => JSON.parse(props.config)?.preferLayout);
@@ -168,13 +169,12 @@ const currentLayout = ref(preferLayout.value);
 
 watch(preferLayout, (val) => {
   currentLayout.value = val;
-})
-
+});
 
 const isSameStream = (
-    stream1: VideoStreamInfo | null | undefined,
-    stream2: VideoStreamInfo | null | undefined
-  ) => getStreamKey(stream1) === getStreamKey(stream2);
+  stream1: VideoStreamInfo | null | undefined,
+  stream2: VideoStreamInfo | null | undefined,
+) => getStreamKey(stream1) === getStreamKey(stream2);
 
 const getStreamKey = (stream: VideoStreamInfo | null | undefined) =>
   `${stream?.userInfo.userId}_${stream?.streamType}`;
@@ -188,7 +188,7 @@ const getStreamKey = (stream: VideoStreamInfo | null | undefined) =>
 
 const isSideListLayout = computed(
   () =>
-    [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(currentLayout.value) >= 0
+    [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(currentLayout.value) >= 0,
 );
 
 const fixedStream: Ref<VideoStreamInfo | null> = ref(null);
@@ -213,11 +213,11 @@ const enlargeStream = computed(() => {
 
 watch(
   () => allStreamInfoList.value.length,
-  val => {
+  (val) => {
     if (val === 1 && isSideListLayout.value) {
       currentLayout.value = LAYOUT.NINE_EQUAL_POINTS;
     }
-  }
+  },
 );
 
 watch(
@@ -229,7 +229,7 @@ watch(
         currentLayout.value = LAYOUT.RIGHT_SIDE_LIST;
       }
     }
-  }
+  },
 );
 
 watch(
@@ -241,7 +241,7 @@ watch(
         fixedStream.value = null;
       }
     }
-  }
+  },
 );
 
 /**
@@ -281,7 +281,7 @@ watch(
   () => {
     handleLayout();
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const showSideList = ref(true);
@@ -433,4 +433,3 @@ function handleClickIcon() {
   }
 }
 </style>
-../../../states/RoomState

package/src/components/StreamView/index.ts

@@ -1,5 +1,7 @@
-import StreamView from './index.vue'
+import StreamViewComp from './index.vue';
+
+const StreamView = StreamViewComp;
 
 export {
-  StreamView
-}
+  StreamView,
+};

package/src/components/StreamView/manager/mediaManager.ts

@@ -13,14 +13,13 @@ import useRoomEngine from '../../../hooks/useRoomEngine';
 import { useLiveListState } from '../../../states/LiveListState';
 import useUserState from '../../../states/UserState/index';
 import { innerUserStore } from '../../../states/UserState/store';
-import { useVideoMixerState } from '../../../states/VideoMixerState';
+import { useVideoMixerState, isVideoMixerEnabled } from '../../../states/VideoMixerState';
 import { DeviceStatus, StreamPlayStatus } from '../../../types';
 import { isMobile } from '../../../utils/environment';
 import type {
   TUIChangeReason } from '@tencentcloud/tuiroom-engine-js';
 
 const { localUser } = useUserState();
-const { isVideoMixerEnabled } = useVideoMixerState();
 const roomEngine = useRoomEngine();
 const playDomMap = new Map<string, Map<HTMLElement, TUIVideoStreamType>>();
 

package/src/components/UIKitModal/UIKitModal.ts

@@ -0,0 +1,71 @@
+import { createApp } from 'vue';
+import { useUIKitModalState } from '../../states/UIKitModalState';
+import UIKitModalComponent from './index.vue';
+import type { UIKitModalOptions } from './type';
+
+let instance: any = null;
+
+const { openModal: openModalState, closeModal } = useUIKitModalState();
+
+const isLocalEnvironment = (): boolean => {
+  const host = window.location.hostname;
+  const href = window.location.href;
+  if (host === 'localhost' || host === '127.0.0.1' || host.startsWith('192.168.')) {
+    return true;
+  }
+  if (href.startsWith('https://web.sdk.qcloud.com/trtc/livekit')) {
+    return true;
+  }
+  return false;
+};
+
+const cleanup = () => {
+  if (instance) {
+    instance.unmount();
+    instance = null;
+  }
+};
+
+const createUIKitModal = (options: UIKitModalOptions): Promise<{ action: string }> => new Promise((resolve) => {
+  cleanup();
+
+  openModalState({
+    id: options.id,
+    title: options.title,
+    content: options.content,
+    type: options.type,
+    onConfirm: options.onConfirm,
+    onCancel: options.onCancel,
+  });
+
+  if (!isLocalEnvironment()) {
+    resolve({ action: 'confirm' });
+    return;
+  }
+
+  const handleAction = (action: 'confirm' | 'cancel') => {
+    closeModal(action);
+    cleanup();
+    resolve({ action });
+  };
+
+  const props = {
+    ...options,
+    visible: true,
+    onConfirm: () => {
+      options.onConfirm?.();
+      handleAction('confirm');
+    },
+    onCancel: () => {
+      options.onCancel?.();
+      handleAction('cancel');
+    },
+  };
+
+  instance = createApp(UIKitModalComponent, props);
+  instance.mount(document.createElement('div'));
+});
+
+export const UIKitModal = {
+  openModal: (config: UIKitModalOptions) => createUIKitModal(config),
+};