feat: support isOkDisabled

.changeset/polite-seas-live.md

@@ -0,0 +1,6 @@
+---
+"vue-playground": patch
+"@modalor/vue": patch
+---
+
+feat: support isOkDisabled

apps/vue-playground/src/App.vue

@@ -8,13 +8,11 @@ import NormalPlayground from './views/Normal.vue'
 <template>
   <div>
     <div class="flex gap-4">
-      <v-btn>123</v-btn>
       <div class="w-1/2 border border-gray-200 rounded-lg p-4">
         <NormalPlayground />
       </div>
       <div class="w-1/2 border border-gray-200 rounded-lg p-4">
         <ModalorPlayground />
-
         <UserProfile name="John Doe" />
       </div>
     </div>

apps/vue-playground/src/components/Confirm.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useModalor } from '@modalor/vue'
+import { ref, watch } from 'vue'
+
+const text = ref('')
+
+const { onOk, resolve, isOkLoading, isOkDisabled } = useModalor()
+
+watch(text, (value) => {
+  isOkDisabled.value = value !== 'confirm'
+
+  console.log(isOkDisabled.value)
+}, {
+  immediate: true,
+})
+
+onOk(() => {
+  isOkLoading.value = true
+  setTimeout(() => {
+    isOkLoading.value = false
+    resolve(null)
+  }, 2000)
+})
+</script>
+
+<template>
+  <div>
+    type "confirm" to confirm:
+
+    <br>
+
+    <v-text-field v-model="text" label="text" />
+  </div>
+</template>

apps/vue-playground/src/components/Modal.vue

@@ -4,6 +4,7 @@ import { computed, ref, watch } from 'vue'
 const props = defineProps<{
   open: boolean
   isOkLoading?: boolean
+  isOkDisabled?: boolean
   title: string
   description: string
 }>()
@@ -67,6 +68,7 @@ watch(() => [props.open, dialogRef.value] as const, ([open, dialog]) => {
           <v-btn
             text="OK"
             :loading="props.isOkLoading"
+            :disabled="props.isOkDisabled"
             color="primary"
             variant="outlined"
             @click="ok"

apps/vue-playground/src/modal.ts

@@ -2,14 +2,15 @@ import { create } from '@modalor/vue'
 import { h } from 'vue'
 import Modal from './components/Modal.vue'
 
-export const createModal = create<{ title: string, description: string }>(({ onCancel, onOk, open, isOkLoading, props }) => {
+export const createModal = create<{ title: string, description: string }>(({ onCancel, onOk, open, isOkLoading, isOkDisabled, props }) => {
   return h(Modal, {
     open,
     onCancel,
     onOk,
     title: props.title,
     description: props.description,
     isOkLoading,
+    isOkDisabled,
   }, props.renderChildren)
 }, {
   removeDelay: 1000,

apps/vue-playground/src/modals/confirm.ts

@@ -0,0 +1,10 @@
+import { h } from 'vue'
+import Confirm from '../components/Confirm.vue'
+import { createModal } from '../modal'
+
+export const confirmModal = createModal(() => {
+  return h(Confirm)
+}, {
+  title: 'Confirm',
+  description: 'This is a confirm',
+})

apps/vue-playground/src/views/Modalor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { userProfileModal } from '../modals/userProfile'
+import { confirmModal } from '../modals/confirm'
 
 async function showUserProfile() {
   const [isOk, result] = await userProfileModal.show({
@@ -13,12 +14,21 @@ async function showUserProfile() {
     console.log(result)
   }
 }
+
+async function showConfirm() {
+  const [isOk, result] = await confirmModal.show()
+
+  console.log(isOk, result)
+}
 </script>
 
 <template>
-  <div>
+  <div class="flex flex-col gap-4">
     <button @click="showUserProfile">
       Show User Profile
     </button>
+    <button @click="showConfirm">
+      Show Confirm
+    </button>
   </div>
 </template>

packages/vue/src/create.ts

@@ -7,6 +7,7 @@ import { provideModalor } from './useModalor'
 interface ModalOptions<T extends AnyObject> {
   open: boolean
   isOkLoading: boolean
+  isOkDisabled: boolean
   onOk: () => void
   onCancel: () => void
   onRemove: () => void
@@ -68,7 +69,7 @@ export function create<ModalProps extends AnyObject>(
       },
       setup(props, { emit }) {
         const open = ref(true)
-        const { emit: emitModalor, isResolved, isOkLoading, resolvedValues } = provideModalor()
+        const { emit: emitModalor, isResolved, isOkLoading, resolvedValues, isOkDisabled } = provideModalor()
 
         const handleClose = () => {
           open.value = false
@@ -133,6 +134,7 @@ export function create<ModalProps extends AnyObject>(
             onCancel: handleCancel,
             onRemove: handleRemove,
             isOkLoading: isOkLoading.value,
+            isOkDisabled: isOkDisabled.value,
             props: {
               ...modalProps,
               renderChildren,

packages/vue/src/useModalor.ts

@@ -6,6 +6,7 @@ interface ModalorCtx<T = any> {
   onCancel: (fn: () => void) => void
   resolve: (values: T) => void
   isOkLoading: Ref<boolean>
+  isOkDisabled: Ref<boolean>
 }
 
 export function useModalor<T = any>() {
@@ -18,6 +19,7 @@ export function provideModalor() {
   const okQueue: (() => (void | Promise<void>))[] = []
   const cancelQueue: (() => (void | Promise<void>))[] = []
   const isOkLoading = ref(false)
+  const isOkDisabled = ref(false)
 
   const onOk = (fn: () => (void | Promise<void>)) => {
     okQueue.push(fn)
@@ -50,6 +52,7 @@ export function provideModalor() {
     onCancel,
     resolve,
     isOkLoading,
+    isOkDisabled,
   } satisfies ModalorCtx
 
   provide('MODALOR', ctx)
@@ -64,13 +67,15 @@ export function provideModalor() {
 
 function injectModalor<T = any>(): ModalorCtx<T> {
   const isOkLoading = ref(false)
+  const isOkDisabled = ref(false)
   const defaultValue = {
     onOk: () => { },
     onCancel: () => { },
     resolve: () => {
       isOkLoading.value = false
     },
     isOkLoading,
+    isOkDisabled,
   } as ModalorCtx
 
   return inject<ModalorCtx>('MODALOR', defaultValue)!