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

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

@@ -10,6 +10,7 @@ const meta = {
     defaultValue: { control: 'select', options: [ true, false, 'indeterminate' ]},
     disabled: { control: 'boolean' },
     required: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     name: { control: 'text' },
     value: { control: 'text' },
   },
@@ -18,6 +19,7 @@ const meta = {
     defaultValue: false,
     disabled: false,
     required: false,
+    invalid: false,
     name: '',
     value: '',
   },
@@ -104,6 +106,13 @@ export const Indeterminate: Story = {
   }),
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const Disabled: Story = {
   parameters: {
     ...noControls,

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

@@ -2,12 +2,15 @@
 import { Checkbox as ShadcnCheckbox } from '../../shadcn/checkbox'
 import type { CheckboxProps } from './types'
 
-defineProps<CheckboxProps>()
+const props = defineProps<CheckboxProps>()
+
+const isInvalid = useFormItemInvalid(() => props.invalid)
 </script>
 
 <template>
   <ShadcnCheckbox
     v-slot="{ state }"
+    :aria-invalid="isInvalid || undefined"
     class="
       data-[state=indeterminate]:border-primary
       data-[state=indeterminate]:bg-primary

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

@@ -1,3 +1,5 @@
 import type { CheckboxRootProps } from 'reka-ui'
 
-export interface CheckboxProps extends /* @vue-ignore */ CheckboxRootProps {}
+export interface CheckboxProps extends /* @vue-ignore */ CheckboxRootProps {
+  invalid?: boolean
+}

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

@@ -16,6 +16,7 @@ const meta = {
     showTime: { control: 'boolean' },
     disabled: { control: 'boolean' },
     readonly: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     placeholder: { control: 'text' },
     minDate: { control: 'date' },
     maxDate: { control: 'date' },
@@ -29,6 +30,7 @@ const meta = {
     showTime: false,
     disabled: false,
     readonly: false,
+    invalid: false,
     placeholder: '',
     minDate: undefined,
     maxDate: undefined,
@@ -224,6 +226,13 @@ export const Readonly: Story = {
   }),
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const InModal: Story = {
   parameters: {
     ...noControls,

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

@@ -20,6 +20,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   showTime: false,
   disabled: false,
   readonly: false,
+  invalid: false,
   placeholder: undefined,
   minDate: undefined,
   maxDate: undefined,
@@ -28,6 +29,8 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   class: undefined,
 })
 
+useFormItemInvalid(() => props.invalid)
+
 const emit = defineEmits<{
   'update:modelValue': [value: Date | string | number | null]
 }>()

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

@@ -27,6 +27,8 @@ export interface DatePickerProps {
   disabled?: boolean
   /** Readonly mode */
   readonly?: boolean
+  /** Mark the field as invalid (renders the inner Input with destructive styling) */
+  invalid?: boolean
   /** Placeholder text */
   placeholder?: string
   /** Minimum selectable date */

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

@@ -13,6 +13,7 @@ const meta = {
     showTime: { control: 'boolean' },
     disabled: { control: 'boolean' },
     readonly: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     startPlaceholder: { control: 'text' },
     endPlaceholder: { control: 'text' },
     maxSpanDays: { control: 'number' },
@@ -28,6 +29,7 @@ const meta = {
     showTime: false,
     disabled: false,
     readonly: false,
+    invalid: false,
     startPlaceholder: '',
     endPlaceholder: '',
     maxSpanDays: undefined,
@@ -196,3 +198,10 @@ export const Readonly: Story = {
     `,
   }),
 }
+
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}

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

@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<DateRangePickerProps>(), {
   showTime: false,
   disabled: false,
   readonly: false,
+  invalid: false,
   startPlaceholder: undefined,
   endPlaceholder: undefined,
   minDate: undefined,
@@ -20,6 +21,8 @@ const props = withDefaults(defineProps<DateRangePickerProps>(), {
   class: undefined,
 })
 
+useFormItemInvalid(() => props.invalid)
+
 const emit = defineEmits<{
   'update:start': [value: Date | string | number | null]
   'update:end': [value: Date | string | number | null]

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

@@ -21,6 +21,8 @@ export interface DateRangePickerProps {
   disabled?: boolean
   /** Readonly mode */
   readonly?: boolean
+  /** Mark the field as invalid (renders both inputs with destructive styling) */
+  invalid?: boolean
   /** Placeholder for start date input */
   startPlaceholder?: string
   /** Placeholder for end date input */

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/FormItem/index.stories.ts

@@ -1,5 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { RadioCardGroupOption } from '../RadioCardGroup/types'
+import type { RadioGroupItem } from '../RadioGroup/types'
+import type { SelectOption } from '../Select/types'
+import type {
+  SearchSelectLoadMethodParams,
+  SearchSelectLoadMethodResult,
+} from '../SearchSelect/types'
+import Checkbox from '../Checkbox/index.vue'
+import DatePicker from '../DatePicker/index.vue'
+import DateRangePicker from '../DateRangePicker/index.vue'
 import Input from '../Input/index.vue'
+import InputCurrency from '../InputCurrency/index.vue'
+import InputNumber from '../InputNumber/index.vue'
+import InputOtp from '../InputOtp/index.vue'
+import InputPercent from '../InputPercent/index.vue'
+import InputRange from '../InputRange/index.vue'
+import RadioCardGroup from '../RadioCardGroup/index.vue'
+import RadioGroup from '../RadioGroup/index.vue'
+import SearchSelect from '../SearchSelect/index.vue'
+import Select from '../Select/index.vue'
+import Textarea from '../Textarea/index.vue'
 import FormItem from './index.vue'
 
 const orientations = [ 'vertical', 'horizontal', 'responsive' ] as const
@@ -51,15 +71,6 @@ export const Required: Story = {
   },
 }
 
-export const WithError: Story = {
-  parameters: noControls,
-  args: {
-    label: 'Username',
-    required: true,
-    error: 'Username is already taken',
-  },
-}
-
 export const WithDescription: Story = {
   parameters: noControls,
   args: {
@@ -76,6 +87,122 @@ export const Horizontal: Story = {
   },
 }
 
+const selectOptions: SelectOption[] = [
+  { label: 'React', value: 'react' },
+  { label: 'Vue', value: 'vue' },
+  { label: 'Angular', value: 'angular' },
+]
+
+const radioOptions: RadioGroupItem[] = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B' },
+]
+
+const radioCardOptions: RadioCardGroupOption[] = [
+  { value: 'card-a', title: 'Card A', description: 'First option' },
+  { value: 'card-b', title: 'Card B', description: 'Second option' },
+]
+
+function mockLoadMethod (params: SearchSelectLoadMethodParams): Promise<SearchSelectLoadMethodResult<string>> {
+  const items = selectOptions.slice(params.offset, params.offset + params.limit)
+  return Promise.resolve({ items, total: selectOptions.length })
+}
+
+export const InvalidControls: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      description: {
+        story: 'Every input-like control automatically inherits the surrounding `FormItem`\'s error state via provide/inject — no need to wire `invalid` on each control. The same destructive styling appears whether the error comes from `<FormItem :error>` or the control\'s own `invalid` prop.',
+      },
+      source: {
+        code: `
+<template>
+  <FormItem required label="Username" error="Required">
+    <Input placeholder="Type your username" />
+  </FormItem>
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      FormItem,
+      Input,
+      Textarea,
+      InputNumber,
+      InputCurrency,
+      InputPercent,
+      InputRange,
+      InputOtp,
+      Select,
+      SearchSelect,
+      DatePicker,
+      DateRangePicker,
+      Checkbox,
+      RadioGroup,
+      RadioCardGroup,
+    },
+    setup: () => ({
+      error: 'This field is required',
+      selectOptions,
+      radioOptions,
+      radioCardOptions,
+      mockLoadMethod,
+    }),
+    template: `
+      <div class="max-w-md space-y-4">
+        <FormItem required label="Input" :error="error">
+          <Input placeholder="Type something" />
+        </FormItem>
+        <FormItem required label="Textarea" :error="error">
+          <Textarea placeholder="Long text" />
+        </FormItem>
+        <FormItem required label="InputNumber" :error="error">
+          <InputNumber />
+        </FormItem>
+        <FormItem required label="InputCurrency" :error="error">
+          <InputCurrency :modelValue="1000" currency="JPY" />
+        </FormItem>
+        <FormItem required label="InputPercent" :error="error">
+          <InputPercent :modelValue="0.5" />
+        </FormItem>
+        <FormItem required label="InputRange" :error="error">
+          <InputRange />
+        </FormItem>
+        <FormItem required label="InputOtp" :error="error">
+          <InputOtp />
+        </FormItem>
+        <FormItem required label="Select" :error="error">
+          <Select :options="selectOptions" placeholder="Pick a framework" />
+        </FormItem>
+        <FormItem required label="SearchSelect" :error="error">
+          <SearchSelect :loadMethod="mockLoadMethod" autoLoad />
+        </FormItem>
+        <FormItem required label="DatePicker" :error="error">
+          <DatePicker />
+        </FormItem>
+        <FormItem required label="DateRangePicker" :error="error">
+          <DateRangePicker />
+        </FormItem>
+        <FormItem required label="Checkbox" :error="error">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <Checkbox />
+            <span class="text-sm">Accept terms</span>
+          </label>
+        </FormItem>
+        <FormItem required label="RadioGroup" :error="error">
+          <RadioGroup :items="radioOptions" />
+        </FormItem>
+        <FormItem required label="RadioCardGroup" :error="error">
+          <RadioCardGroup :options="radioCardOptions" />
+        </FormItem>
+      </div>
+    `,
+  }),
+}
+
 export const Responsive: Story = {
   parameters: {
     ...noControls,
@@ -98,7 +225,7 @@ export const Responsive: Story = {
     template: `
       <div class="max-w-md">
         <div class="@container/field-group resize-x overflow-auto rounded border border-dashed border-border bg-card p-4" style="min-width: 200px;">
-          <FormItem label="Address" orientation="responsive" description="Your mailing address">
+          <FormItem required label="Address" orientation="responsive" description="Your mailing address">
             <Input placeholder="Enter address" />
           </FormItem>
         </div>

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

@@ -10,15 +10,22 @@ import type { FormItemProps } from './types'
 
 const props = defineProps<FormItemProps>()
 
+useFormItemInvalid(() => !!props.error)
+
 const errorArray = computed(() => {
   if (!props.error) return undefined
   return [{ message: props.error }]
 })
 
 const labelClass = computed(() => {
-  if (props.orientation === 'horizontal') return 'justify-end text-right mt-2'
-  if (props.orientation === 'responsive') return '@md/field-group:justify-end @md/field-group:text-right @md/field-group:mt-2'
-  return undefined
+  const base = 'group-data-[invalid=true]/field:text-foreground'
+  if (props.orientation === 'horizontal') return cn(base, `
+    mt-2 justify-end text-right
+  `)
+  if (props.orientation === 'responsive') return cn(base, `
+    @md/field-group:justify-end @md/field-group:text-right @md/field-group:mt-2
+  `)
+  return base
 })
 </script>
 

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

@@ -16,6 +16,8 @@ const emit = defineEmits<{
   'change': [value: string | undefined]
 }>()
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 const $slots = defineSlots<{
   prefix?: () => unknown
   suffix?: () => unknown
@@ -65,7 +67,7 @@ function clearInput () {
       v-bind="$attrs"
       :readonly="readonly"
       :disabled="disabled"
-      :aria-invalid="invalid || undefined"
+      :aria-invalid="isInvalid || undefined"
       :data-1p-ignore="autocomplete === 'off' || !autocomplete ? true : undefined"
       :autocomplete="autocomplete || 'off'"
       @input="handleInput"

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

@@ -11,11 +11,13 @@ const meta = {
     modelValue: { control: 'number' },
     currency: { control: 'text' },
     currencyDisplay: { control: 'select', options: currencyDisplays },
+    invalid: { control: 'boolean' },
   },
   args: {
     modelValue: 1000,
     currency: 'JPY',
     currencyDisplay: 'symbol',
+    invalid: false,
   },
   render: args => {
     const onUpdate = useArgsModel()
@@ -78,3 +80,10 @@ export const JpyNameDisplay: Story = {
     currencyDisplay: 'name',
   },
 }
+
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}

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

@@ -1,4 +1,6 @@
-export interface InputCurrencyProps {
+import type { InputNumberProps } from '../InputNumber/types'
+
+export interface InputCurrencyProps extends /* @vue-ignore */ Pick<InputNumberProps, 'invalid'> {
   currency?: string
   currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name'
 }