fix inkDialog open issue

Author: xiaoland

.changeset/major-lands-sing.md

@@ -0,0 +1,5 @@
+---
+"@inkcre/web-design": patch
+---
+
+Fix: InkDialog open issue

packages/web-design/src/components/AGENTS.comp-scss.md

@@ -2,7 +2,9 @@
 
 ## Best Practices
 
-- Use UnoCSS when style is simple (e.g. layout, animation)
+- Use UnoCSS for simple styles (e.g. layout)
+- Make use of morden CSS features
+  - Parent selectors (eg. `.card:has(input:checked)`)
 
 ### Use Design Tokens
 

packages/web-design/src/components/inkDialog/inkDialog.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, watch, provide, readonly } from "vue";
-import { useAsyncState } from "@vueuse/core";
+import { ref, computed, watch, provide, readonly } from "vue";
 import {
   inkDialogProps,
   inkDialogEmits,
@@ -14,31 +13,28 @@ const props = defineProps(inkDialogProps);
 const emit = defineEmits(inkDialogEmits);
 const i18n = useOptionalI18n();
 
-const {
-  state: currentValue,
-  isLoading: isDialogLoading,
-  execute,
-} = useAsyncState(
-  async () => {
-    const value = props.modelValue;
-    return value instanceof Promise ? await value : value;
-  },
-  false,
-  {
-    immediate: true,
-    resetOnExecute: false,
+const currentValue = ref(false);
+const isPromiseLoading = ref(false);
+
+const updateCurrentValue = async (value: boolean | Promise<boolean>) => {
+  if (value instanceof Promise) {
+    isPromiseLoading.value = true;
+    try {
+      currentValue.value = await value;
+    } finally {
+      isPromiseLoading.value = false;
+    }
+  } else {
+    currentValue.value = value;
   }
-);
+};
 
 watch(
   () => props.modelValue,
-  async () => {
-    if (props.modelValue instanceof Promise) {
-      await execute();
-    } else {
-      currentValue.value = props.modelValue;
-    }
-  }
+  (val) => {
+    updateCurrentValue(val);
+  },
+  { immediate: true }
 );
 
 const open = computed({
@@ -48,7 +44,7 @@ const open = computed({
   },
 });
 
-const isLoading = computed(() => isDialogLoading.value);
+const isLoading = computed(() => isPromiseLoading.value);
 
 // Provide loading state to buttons via inject
 provide("isLoading", readonly(isLoading));

packages/web-design/src/components/inkPopup/inkPopup.scss

@@ -1,5 +1,5 @@
 .ink-popup-overlay {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -9,7 +9,7 @@
 }
 
 .ink-popup {
-  position: absolute;
+  position: fixed;
   z-index: 10;
   background-color: sys-var(color, surface, base);
   padding: sys-var(space, md);