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

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

@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: Date | string | null]
+  'update:modelValue': [value: Date | string | number | null]
 }>()
 
 const model = computed({

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

@@ -18,7 +18,7 @@ export interface DatePickerTimeConfig {
 export type DatePickerType = 'date' | 'month' | 'year'
 
 export interface DatePickerProps {
-  modelValue?: Date | string | null
+  modelValue?: Date | string | number | null
   /** Picker type: date (default), month, or year */
   type?: DatePickerType
   /** Enable time selection, or pass DatePickerTimeConfig for fine-grained control */
@@ -33,7 +33,11 @@ export interface DatePickerProps {
   minDate?: Date | string
   /** Maximum selectable date */
   maxDate?: Date | string
-  /** v-model output format (e.g. 'yyyy-MM-dd', 'timestamp', 'iso') */
+  /**
+   * v-model output format. Accepts any VueDatePicker `model-type` value:
+   * `'iso'`, `'timestamp'`, or a date-fns pattern (e.g. `'yyyy-MM-dd'`).
+   * Omit to bind a `Date` object.
+   */
   valueFormat?: string
   /** Auto apply selection without confirm button */
   autoApply?: boolean

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { DateRangePickerProps } from './types'
+import { format as formatDate, parse as parseDate } from 'date-fns'
 
 defineOptions({ inheritAttrs: false })
 
@@ -20,30 +21,65 @@ const props = withDefaults(defineProps<DateRangePickerProps>(), {
 })
 
 const emit = defineEmits<{
-  'update:start': [value: Date | string | null]
-  'update:end': [value: Date | string | null]
+  'update:start': [value: Date | string | number | null]
+  'update:end': [value: Date | string | number | null]
 }>()
 
 const { t } = useI18n()
 const T = useTranslations('components.ui.DateRangePicker')
 
+// Convert a v-model value (whose shape depends on valueFormat) into a Date for manipulation.
+function parseValue (value: Date | string | number): Date | null {
+  if (value instanceof Date) return new Date(value)
+  if (typeof value === 'number') return new Date(value)
+  const fmt = props.valueFormat
+  if (!fmt || fmt === 'iso') return new Date(value)
+  if (fmt === 'timestamp') return new Date(Number(value))
+  if (fmt === 'format') return null // uses VueDatePicker `format` prop, not exposed here
+  try {
+    return parseDate(value, fmt, new Date())
+  } catch {
+    return null
+  }
+}
+
+// Convert a Date back to the same shape as the original value.
+function formatValue (date: Date, original: Date | string | number): Date | string | number {
+  if (original instanceof Date) return date
+  if (typeof original === 'number') return date.getTime()
+  const fmt = props.valueFormat
+  if (!fmt || fmt === 'iso') return date.toISOString()
+  if (fmt === 'timestamp') return date.getTime()
+  if (fmt === 'format') return original
+  try {
+    return formatDate(date, fmt)
+  } catch {
+    return original
+  }
+}
+
+// Normalize the time portion to start/end of day so the range is inclusive.
+// For date-only patterns (e.g. 'yyyy-MM-dd') the output is unchanged since the
+// formatted string carries no time component — the round-trip just preserves it.
+function normalizeTimeOfDay (
+  value: Date | string | number | null,
+  end: boolean,
+): Date | string | number | null {
+  if (value == null) return value
+  const date = parseValue(value)
+  if (!date || Number.isNaN(date.getTime())) return value
+  date.setHours(end ? 23 : 0, end ? 59 : 0, end ? 59 : 0, end ? 999 : 0)
+  return formatValue(date, value)
+}
+
 const start = computed({
   get: () => props.start,
-  set: value => emit('update:start', value),
+  set: value => emit('update:start', props.showTime ? value : normalizeTimeOfDay(value, false)),
 })
 
 const end = computed({
   get: () => props.end,
-  set: value => {
-    // When time is disabled, normalize end to end of day so range is inclusive
-    if (value instanceof Date && !props.showTime) {
-      const adjusted = new Date(value)
-      adjusted.setHours(23, 59, 59, 999)
-      emit('update:end', adjusted)
-    } else {
-      emit('update:end', value)
-    }
-  },
+  set: value => emit('update:end', props.showTime ? value : normalizeTimeOfDay(value, true)),
 })
 
 function addDays (date: Date, days: number): Date {
@@ -52,9 +88,10 @@ function addDays (date: Date, days: number): Date {
   return result
 }
 
-function toDate (value: Date | string | null | undefined): Date | undefined {
-  if (!value) return undefined
-  return value instanceof Date ? value : new Date(value)
+function toDate (value: Date | string | number | null | undefined): Date | undefined {
+  if (value == null) return undefined
+  if (value instanceof Date) return value
+  return parseValue(value) ?? undefined
 }
 
 const startMinDate = computed(() => {

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

@@ -1,8 +1,16 @@
 import type { DatePickerTimeConfig } from '../DatePicker/types'
 
 export interface DateRangePickerProps {
-  start?: Date | string | null
-  end?: Date | string | null
+  /**
+   * Range start. When `showTime` is false, the emitted value is normalized to
+   * the start of the day (00:00:00.000) so the range is inclusive.
+   */
+  start?: Date | string | number | null
+  /**
+   * Range end. When `showTime` is false, the emitted value is normalized to
+   * the end of the day (23:59:59.999) so the range is inclusive.
+   */
+  end?: Date | string | number | null
   /** Minimum selectable date */
   minDate?: Date | string
   /** Maximum selectable date */
@@ -19,7 +27,11 @@ export interface DateRangePickerProps {
   endPlaceholder?: string
   /** Maximum span in days between start and end date */
   maxSpanDays?: number
-  /** v-model output format (e.g. 'yyyy-MM-dd', 'timestamp', 'iso') */
+  /**
+   * v-model output format. Accepts any VueDatePicker `model-type` value:
+   * `'iso'`, `'timestamp'`, or a date-fns pattern (e.g. `'yyyy-MM-dd'`).
+   * Omit to bind a `Date` object.
+   */
   valueFormat?: string
   /** Auto apply selection without confirm button */
   autoApply?: boolean

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.6",
+  "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": "c2aa82c36486efc10b9d5723fcd49bb764f473d9"
+  "gitHead": "802c526041ac9f00b5c54357d6a36fe4e549929c"
 }