@polymarbot/nuxt-layer-shadcn-ui 0.8.7 → 0.8.8

package/app/components/ui/Drawer/index.stories.ts

@@ -4,7 +4,7 @@ import { useArgsModel } from '#storybook/argsModel'
 import Button from '../Button/index.vue'
 import Input from '../Input/index.vue'
 import type { ButtonVariant } from '../Button/types'
-import type { DrawerSide } from './types'
+import type { DrawerAction, DrawerSide } from './types'
 import Drawer from './index.vue'
 
 const sides: DrawerSide[] = [ 'top', 'right', 'bottom', 'left' ]
@@ -257,6 +257,83 @@ export const WithTrigger: Story = {
   }),
 }
 
+export const PreventClose: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Drawer
+    v-model:visible="visible"
+    title="Type to Continue"
+    description="beforeClose intercepts the confirm action; cancel/X/ESC close normally."
+    showCancel
+    confirmText="Submit"
+    :beforeClose="onBeforeClose"
+  >
+    <Input v-model="value" placeholder="Type 'confirm' to close" />
+    <p v-if="error" class="mt-2 text-sm text-destructive">{{ error }}</p>
+  </Drawer>
+</template>
+
+<script setup lang="ts">
+import type { DrawerAction } from '#components'
+
+const visible = ref(false)
+const value = ref('')
+const error = ref('')
+
+function onBeforeClose (action: DrawerAction) {
+  if (action === 'cancel') return
+  if (value.value !== 'confirm') {
+    error.value = "Value must be 'confirm' to close."
+    return false
+  }
+  error.value = ''
+  return new Promise(resolve => setTimeout(resolve, 1000))
+}
+</script>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Drawer, Button, Input },
+    setup () {
+      const visible = ref(false)
+      const value = ref('')
+      const error = ref('')
+      function onBeforeClose (action: DrawerAction) {
+        if (action === 'cancel') return
+        if (value.value !== 'confirm') {
+          error.value = 'Value must be "confirm" to close.'
+          return false
+        }
+        error.value = ''
+        return new Promise<void>(resolve => setTimeout(resolve, 1000))
+      }
+      return { visible, value, error, onBeforeClose }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Drawer</Button>
+        <Drawer
+          v-model:visible="visible"
+          title="Type to Continue"
+          description="beforeClose intercepts the confirm action; cancel/X/ESC close normally."
+          showCancel
+          confirmText="Submit"
+          :beforeClose="onBeforeClose"
+        >
+          <Input v-model="value" placeholder="Type 'confirm' to close" />
+          <p v-if="error" class="mt-2 text-sm text-destructive">{{ error }}</p>
+        </Drawer>
+      </div>
+    `,
+  }),
+}
+
 export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({

package/app/components/ui/Drawer/index.vue

@@ -9,7 +9,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '../../shadcn/sheet'
-import type { DrawerProps } from './types'
+import type { DrawerAction, DrawerProps } from './types'
 
 defineOptions({ inheritAttrs: false })
 
@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<DrawerProps>(), {
   cancelText: undefined,
   confirmVariant: 'default',
   cancelVariant: 'outline',
+  beforeClose: undefined,
   class: undefined,
 })
 
@@ -47,6 +48,8 @@ const resolvedCancelText = computed(
 )
 
 const sheetOpen = ref(props.visible ?? false)
+const internalLoading = ref(false)
+const isLoading = computed(() => internalLoading.value || props.loading)
 
 watch(() => props.visible, value => {
   if (value !== undefined) sheetOpen.value = value
@@ -59,18 +62,37 @@ watch(sheetOpen, value => {
 })
 
 function onOpenUpdate (value: boolean) {
-  if (!value && props.loading) return
+  if (!value && isLoading.value) return
   if (value) sheetOpen.value = true
-  else onCancel()
+  else handleClose('cancel')
 }
 
 function onConfirm () {
   emit('confirm')
-  sheetOpen.value = false
+  handleClose('confirm')
 }
 
 function onCancel () {
   emit('cancel')
+  handleClose('cancel')
+}
+
+function handleClose (action: DrawerAction) {
+  if (!props.beforeClose) {
+    sheetOpen.value = false
+    return
+  }
+  const result = props.beforeClose(action)
+  if (result === false) return
+  if (result instanceof Promise) {
+    internalLoading.value = true
+    result.then(() => {
+      sheetOpen.value = false
+    }).finally(() => {
+      internalLoading.value = false
+    })
+    return
+  }
   sheetOpen.value = false
 }
 
@@ -136,8 +158,8 @@ const contentClass = computed(() =>
         class="min-h-0 flex-1"
       >
         <div
-          :inert="loading || disabled || undefined"
-          :class="[ loading || disabled ? 'opacity-50' : undefined ]"
+          :inert="isLoading || disabled || undefined"
+          :class="[ isLoading || disabled ? 'opacity-50' : undefined ]"
           class="p-4"
         >
           <slot />
@@ -159,7 +181,7 @@ const contentClass = computed(() =>
               v-if="showCancel"
               class="min-w-24"
               :variant="cancelVariant"
-              :disabled="loading"
+              :disabled="isLoading"
               @click="onCancel"
             >
               {{ resolvedCancelText }}
@@ -167,7 +189,7 @@ const contentClass = computed(() =>
             <Button
               :class="showCancel ? 'min-w-24' : 'min-w-32'"
               :variant="confirmVariant"
-              :loading="loading"
+              :loading="isLoading"
               :disabled="disabled || confirmDisabled"
               @click="onConfirm"
             >
@@ -179,7 +201,7 @@ const contentClass = computed(() =>
 
       <SheetClose
         v-if="showClose"
-        :disabled="loading"
+        :disabled="isLoading"
         class="
           top-3 right-3 size-8 text-muted-foreground ring-offset-background
           hover:bg-accent/50 hover:text-foreground

package/app/components/ui/Drawer/types.ts

@@ -2,6 +2,10 @@ import type { ButtonVariants } from '../../shadcn/button'
 
 export type DrawerSide = 'top' | 'right' | 'bottom' | 'left'
 
+export type DrawerAction = 'confirm' | 'cancel'
+
+export type DrawerBeforeClose = (action: DrawerAction) => boolean | undefined | Promise<unknown>
+
 export interface DrawerProps {
   visible?: boolean
   loading?: boolean
@@ -20,5 +24,6 @@ export interface DrawerProps {
   cancelText?: string
   confirmVariant?: ButtonVariants['variant']
   cancelVariant?: ButtonVariants['variant']
+  beforeClose?: DrawerBeforeClose
   class?: ClassValue
 }

package/app/components/ui/Modal/index.stories.ts

@@ -4,6 +4,7 @@ import EventLog from '#storybook/EventLog.vue'
 import { useArgsModel } from '#storybook/argsModel'
 import Button from '../Button/index.vue'
 import Input from '../Input/index.vue'
+import type { ModalAction } from './types'
 import Modal from './index.vue'
 
 const types: ModalContentType[] = [ 'default', 'success', 'info', 'help', 'warn', 'danger', 'error' ]
@@ -255,6 +256,83 @@ export const WithTrigger: Story = {
   }),
 }
 
+export const PreventClose: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Modal
+    v-model:visible="visible"
+    title="Type to Continue"
+    description="beforeClose intercepts the confirm action; cancel/X/ESC close normally."
+    showCancel
+    confirmText="Submit"
+    :beforeClose="onBeforeClose"
+  >
+    <Input v-model="value" placeholder="Type 'confirm' to close" />
+    <p v-if="error" class="mt-2 text-sm text-destructive">{{ error }}</p>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import type { ModalAction } from '#components'
+
+const visible = ref(false)
+const value = ref('')
+const error = ref('')
+
+function onBeforeClose (action: ModalAction) {
+  if (action === 'cancel') return
+  if (value.value !== 'confirm') {
+    error.value = "Value must be 'confirm' to close."
+    return false
+  }
+  error.value = ''
+  return new Promise(resolve => setTimeout(resolve, 1000))
+}
+</script>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Modal, Button, Input },
+    setup () {
+      const visible = ref(false)
+      const value = ref('')
+      const error = ref('')
+      function onBeforeClose (action: ModalAction) {
+        if (action === 'cancel') return
+        if (value.value !== 'confirm') {
+          error.value = 'Value must be "confirm" to close.'
+          return false
+        }
+        error.value = ''
+        return new Promise<void>(resolve => setTimeout(resolve, 1000))
+      }
+      return { visible, value, error, onBeforeClose }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Modal</Button>
+        <Modal
+          v-model:visible="visible"
+          title="Type to Continue"
+          description="beforeClose intercepts the confirm action; cancel/X/ESC close normally."
+          showCancel
+          confirmText="Submit"
+          :beforeClose="onBeforeClose"
+        >
+          <Input v-model="value" placeholder="Type 'confirm' to close" />
+          <p v-if="error" class="mt-2 text-sm text-destructive">{{ error }}</p>
+        </Modal>
+      </div>
+    `,
+  }),
+}
+
 export const EventHandling: Story = {
   parameters: {
     ...noControls,

package/app/components/ui/Modal/index.vue

@@ -9,7 +9,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '../../shadcn/dialog'
-import type { ModalProps } from './types'
+import type { ModalAction, ModalProps } from './types'
 
 defineOptions({ inheritAttrs: false })
 
@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<ModalProps>(), {
   content: undefined,
   confirmVariant: 'default',
   cancelVariant: 'outline',
+  beforeClose: undefined,
   type: undefined,
   class: undefined,
 })
@@ -48,6 +49,8 @@ const resolvedCancelText = computed(
 )
 
 const dialogOpen = ref(props.visible ?? false)
+const internalLoading = ref(false)
+const isLoading = computed(() => internalLoading.value || props.loading)
 
 watch(() => props.visible, value => {
   if (value !== undefined) dialogOpen.value = value
@@ -60,18 +63,37 @@ watch(dialogOpen, value => {
 })
 
 function onOpenUpdate (value: boolean) {
-  if (!value && props.loading) return
+  if (!value && isLoading.value) return
   if (value) dialogOpen.value = true
-  else onCancel()
+  else handleClose('cancel')
 }
 
 function onConfirm () {
   emit('confirm')
-  dialogOpen.value = false
+  handleClose('confirm')
 }
 
 function onCancel () {
   emit('cancel')
+  handleClose('cancel')
+}
+
+function handleClose (action: ModalAction) {
+  if (!props.beforeClose) {
+    dialogOpen.value = false
+    return
+  }
+  const result = props.beforeClose(action)
+  if (result === false) return
+  if (result instanceof Promise) {
+    internalLoading.value = true
+    result.then(() => {
+      dialogOpen.value = false
+    }).finally(() => {
+      internalLoading.value = false
+    })
+    return
+  }
   dialogOpen.value = false
 }
 
@@ -143,8 +165,8 @@ const contentClass = computed(() =>
         <ModalContent
           :type="type"
           :content="content"
-          :inert="loading || disabled || undefined"
-          :class="[ loading || disabled ? 'opacity-50' : undefined ]"
+          :inert="isLoading || disabled || undefined"
+          :class="[ isLoading || disabled ? 'opacity-50' : undefined ]"
           class="p-1"
         >
           <slot />
@@ -171,7 +193,7 @@ const contentClass = computed(() =>
               v-if="showCancel"
               class="min-w-32"
               :variant="cancelVariant"
-              :disabled="loading"
+              :disabled="isLoading"
               @click="onCancel"
             >
               {{ resolvedCancelText }}
@@ -179,7 +201,7 @@ const contentClass = computed(() =>
             <Button
               :class="showCancel ? 'min-w-32' : 'min-w-48'"
               :variant="confirmVariant"
-              :loading="loading"
+              :loading="isLoading"
               :disabled="disabled || confirmDisabled"
               @click="onConfirm"
             >
@@ -191,7 +213,7 @@ const contentClass = computed(() =>
 
       <DialogClose
         v-if="showClose"
-        :disabled="loading"
+        :disabled="isLoading"
         class="
           top-3 right-3 size-8 text-muted-foreground ring-offset-background
           hover:bg-accent/50 hover:text-foreground

package/app/components/ui/Modal/types.ts

@@ -1,6 +1,10 @@
 import type { ButtonVariants } from '../../shadcn/button'
 import type { ModalContentProps } from '../ModalContent/types'
 
+export type ModalAction = 'confirm' | 'cancel'
+
+export type ModalBeforeClose = (action: ModalAction) => boolean | undefined | Promise<unknown>
+
 export interface ModalProps {
   visible?: boolean
   loading?: boolean
@@ -20,6 +24,7 @@ export interface ModalProps {
   cancelText?: string
   confirmVariant?: ButtonVariants['variant']
   cancelVariant?: ButtonVariants['variant']
+  beforeClose?: ModalBeforeClose
   type?: ModalContentProps['type']
   class?: ClassValue
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "1f8a4521c7e52de4063c33f47888be48cc99329b"
+  "gitHead": "802c526041ac9f00b5c54357d6a36fe4e549929c"
 }