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

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

@@ -28,26 +28,29 @@ const model = computed({
   set: value => emit('update:modelValue', value),
 })
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 const contentClass = computed(() =>
   cn(
     `
-      flex h-9 items-center rounded-md border border-input shadow-xs
-      transition-[color,box-shadow]
+      h-9 rounded-md border-input shadow-xs
       dark:bg-input/30
+      flex items-center border transition-[color,box-shadow]
     `,
     `
       has-[[data-slot=input]:focus-visible]:border-ring
-      has-[[data-slot=input]:focus-visible]:ring-[3px]
       has-[[data-slot=input]:focus-visible]:ring-ring/50
+      has-[[data-slot=input]:focus-visible]:ring-[3px]
     `,
-    props.invalid && `
+    isInvalid.value && `
       border-destructive ring-destructive/20
       dark:ring-destructive/40
     `,
   ),
 )
 
-const inputClass = 'flex-1 border-0 shadow-none focus-visible:ring-0 rounded-none'
+const buttonClass = 'static translate-y-0 shrink-0 cursor-pointer'
+const inputClass = 'flex-1 min-w-0 border-0 shadow-none focus-visible:ring-0 rounded-none'
 </script>
 
 <template>
@@ -61,7 +64,7 @@ const inputClass = 'flex-1 border-0 shadow-none focus-visible:ring-0 rounded-non
     <NumberFieldContent :class="contentClass">
       <NumberFieldDecrement
         v-if="showButtons"
-        class="cursor-pointer"
+        :class="buttonClass"
       />
       <NumberFieldInput
         :placeholder="placeholder"
@@ -69,7 +72,7 @@ const inputClass = 'flex-1 border-0 shadow-none focus-visible:ring-0 rounded-non
       />
       <NumberFieldIncrement
         v-if="showButtons"
-        class="cursor-pointer"
+        :class="buttonClass"
       />
     </NumberFieldContent>
   </NumberField>

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

@@ -10,11 +10,13 @@ const meta = {
     modelValue: { control: 'text' },
     length: { control: 'number' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
   },
   args: {
     modelValue: '',
     length: 6,
     disabled: false,
+    invalid: false,
   },
   render: args => {
     const onUpdate = useArgsModel()
@@ -53,6 +55,14 @@ export const Disabled: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+    modelValue: '123456',
+  },
+}
+
 export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({

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

@@ -6,10 +6,11 @@ import {
 } from '../../shadcn/pin-input'
 import type { InputOtpProps } from './types'
 
-withDefaults(defineProps<InputOtpProps>(), {
+const props = withDefaults(defineProps<InputOtpProps>(), {
   modelValue: '',
   length: 6,
   disabled: false,
+  invalid: false,
 })
 
 const emit = defineEmits<{
@@ -17,6 +18,8 @@ const emit = defineEmits<{
   'complete': [value: string]
 }>()
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 function handleComplete (values: string[]) {
   emit('complete', values.join(''))
 }
@@ -39,6 +42,7 @@ function handleUpdate (value: string[]) {
         v-for="(_, index) in length"
         :key="index"
         :index="index"
+        :aria-invalid="isInvalid || undefined"
       />
     </PinInputGroup>
   </PinInput>

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

@@ -2,4 +2,5 @@ export interface InputOtpProps {
   modelValue?: string
   length?: number
   disabled?: boolean
+  invalid?: boolean
 }

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

@@ -7,9 +7,11 @@ const meta = {
   component: InputPercent as any,
   argTypes: {
     modelValue: { control: 'number' },
+    invalid: { control: 'boolean' },
   },
   args: {
     modelValue: 0.5,
+    invalid: false,
   },
   render: args => {
     const onUpdate = useArgsModel()
@@ -29,4 +31,13 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
+
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}

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

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import type { InputPercentProps } from './types'
+
+defineProps<InputPercentProps>()
+</script>
+
 <template>
   <InputNumber
     :formatOptions="{ style: 'percent' }"

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

@@ -0,0 +1,3 @@
+import type { InputNumberProps } from '../InputNumber/types'
+
+export interface InputPercentProps extends /* @vue-ignore */ Pick<InputNumberProps, 'invalid'> {}

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

@@ -15,6 +15,7 @@ const meta = {
     startPlaceholder: { control: 'text' },
     endPlaceholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     as: { control: false },
   },
   args: {
@@ -25,6 +26,7 @@ const meta = {
     startPlaceholder: '',
     endPlaceholder: '',
     disabled: false,
+    invalid: false,
     as: undefined,
   },
   render: args => {
@@ -71,6 +73,15 @@ export const Disabled: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+    start: 20,
+    end: 80,
+  },
+}
+
 export const CustomInput: Story = {
   parameters: {
     ...noControls,

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/app/components/ui/RadioCardGroup/index.stories.ts

@@ -43,11 +43,13 @@ const meta = {
     modelValue: { control: 'text' },
     options: { control: 'object' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
   },
   args: {
     modelValue: 'current',
     options,
     disabled: false,
+    invalid: false,
   },
   render: args => {
     const onUpdate = useArgsModel()
@@ -106,6 +108,13 @@ export const Disabled: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const EventHandling: Story = {
   parameters: {
     ...noControls,

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

@@ -8,9 +8,12 @@ import type { RadioCardGroupProps } from './types'
 const props = withDefaults(defineProps<RadioCardGroupProps>(), {
   modelValue: undefined,
   disabled: false,
+  invalid: false,
   class: undefined,
 })
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
@@ -47,6 +50,7 @@ const mergedClass = computed(() => cn('gap-3', props.class))
       <ShadcnRadioGroupItem
         :value="option.value"
         :disabled="option.disabled"
+        :aria-invalid="isInvalid || undefined"
       />
       <div class="gap-0.5 grid flex-1">
         <span class="text-sm font-medium">

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

@@ -9,5 +9,6 @@ export interface RadioCardGroupProps {
   modelValue?: string
   options: RadioCardGroupOption[]
   disabled?: boolean
+  invalid?: boolean
   class?: ClassValue
 }

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

@@ -23,12 +23,14 @@ const meta = {
     items: { control: 'object' },
     modelValue: { control: 'text' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     orientation: { control: 'inline-radio', options: [ 'vertical', 'horizontal' ]},
   },
   args: {
     items: options,
     modelValue: 'option1',
     disabled: false,
+    invalid: false,
     orientation: 'vertical',
   },
   render: args => {
@@ -70,6 +72,13 @@ export const Disabled: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const CustomSlots: Story = {
   parameters: {
     ...noControls,

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

@@ -9,10 +9,13 @@ const props = withDefaults(defineProps<RadioGroupProps>(), {
   items: () => [],
   modelValue: undefined,
   disabled: false,
+  invalid: false,
   orientation: 'vertical',
   class: undefined,
 })
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
@@ -58,6 +61,7 @@ const mergedClass = computed(() => cn(
       <ShadcnRadioGroupItem
         :value="item.value"
         :disabled="item.disabled"
+        :aria-invalid="isInvalid || undefined"
       />
       <slot
         name="label"

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

@@ -8,6 +8,7 @@ export interface RadioGroupProps {
   modelValue?: string
   items?: RadioGroupItem[]
   disabled?: boolean
+  invalid?: boolean
   orientation?: 'vertical' | 'horizontal'
   class?: ClassValue
 }

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

@@ -52,6 +52,7 @@ const meta = {
     loadLimit: { control: 'number' },
     autoLoad: { control: 'boolean' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
   },
   args: {
     modelValue: undefined,
@@ -64,6 +65,7 @@ const meta = {
     loadLimit: 20,
     autoLoad: false,
     disabled: false,
+    invalid: false,
   },
   render: args => {
     const onUpdate = useArgsModel()
@@ -182,6 +184,13 @@ export const Disabled: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const EventHandling: Story = {
   parameters: {
     ...noControls,

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

@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<SearchSelectProps<TValue, TMeta>>(), {
   loadLimit: 20,
   placeholder: undefined,
   disabled: false,
+  invalid: false,
   searchPlaceholder: undefined,
   emptyText: undefined,
   searchEmptyText: undefined,
@@ -191,6 +192,7 @@ defineExpose({ refresh: resetAndLoad })
     :searchPlaceholder="searchPlaceholder"
     :emptyText="computedEmptyText"
     :disabled="disabled"
+    :invalid="invalid"
     :loading="isLoading"
     @search="handleSearch"
     @open="handleOpen"

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

@@ -27,6 +27,7 @@ export interface SearchSelectProps<V extends string | number = string, M = unkno
   loadLimit?: number
   placeholder?: string
   disabled?: boolean
+  invalid?: boolean
   searchPlaceholder?: string
   /** Message when no options available (no search keyword) */
   emptyText?: string

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

@@ -38,6 +38,7 @@ const meta = {
     modelValue: { control: 'text' },
     placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
     loading: { control: 'boolean' },
     filter: { control: 'boolean' },
     multiple: { control: 'boolean' },
@@ -48,6 +49,7 @@ const meta = {
     modelValue: undefined,
     placeholder: 'Select an option',
     disabled: false,
+    invalid: false,
     loading: false,
     filter: false,
     multiple: false,
@@ -290,6 +292,13 @@ export const Loading: Story = {
   },
 }
 
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+  },
+}
+
 export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({

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

@@ -29,6 +29,7 @@ const props = withDefaults(defineProps<SelectProps<TValue, TMeta>>(), {
   modelValue: undefined,
   placeholder: undefined,
   disabled: false,
+  invalid: false,
   loading: false,
   filter: false,
   searchPlaceholder: undefined,
@@ -36,6 +37,8 @@ const props = withDefaults(defineProps<SelectProps<TValue, TMeta>>(), {
   multiple: false,
 })
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 const emit = defineEmits<{
   'update:modelValue': [value: TValue | TValue[]]
   'search': [value: string]
@@ -154,10 +157,13 @@ function handleClear (event: MouseEvent) {
         role="combobox"
         tabindex="0"
         :aria-expanded="open"
+        :aria-invalid="isInvalid || undefined"
         :data-disabled="disabled || undefined"
         :data-state="open ? 'open' : 'closed'"
         class="
           data-[state=open]:border-ring data-[state=open]:ring-ring/50
+          aria-invalid:ring-destructive/20 aria-invalid:border-destructive
+          dark:aria-invalid:ring-destructive/40
           cursor-pointer
           data-[state=open]:ring-[3px]
         "

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

@@ -13,6 +13,7 @@ export type SelectBaseProps<V extends string | number = string, M = unknown> = {
   options?: SelectOption<V, M>[]
   placeholder?: string
   disabled?: boolean
+  invalid?: boolean
   /** Show a spinner in place of the chevron */
   loading?: boolean
   /** true: enable client-side label filter; function: custom filter (disables internal filter) */

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

@@ -17,6 +17,8 @@ const emit = defineEmits<{
   'change': [value: string]
 }>()
 
+const isInvalid = useFormItemInvalid(() => props.invalid)
+
 function handleInput (event: Event) {
   const target = event.target as HTMLTextAreaElement
   emit('update:modelValue', target.value)
@@ -40,7 +42,7 @@ const mergedClass = computed(() =>
     :modelValue="modelValue"
     :rows="rows"
     :class="mergedClass"
-    :aria-invalid="invalid || undefined"
+    :aria-invalid="isInvalid || undefined"
     :data-1p-ignore="autocomplete === 'off' || !autocomplete ? true : undefined"
     :autocomplete="autocomplete || 'off'"
     v-bind="$attrs"