Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge 7f1a4d54a8 into 3eaef4a748

Browse Source
This commit is contained in:
Damien Roche 2024-12-17 09:37:33 +01:00 committed by GitHub
commit 1fbf52fe8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 54 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldBoolean.vue
View File

@ -5,7 +5,7 @@ import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '
import { Switch } from '@/lib/registry/default/ui/switch'
import { computed } from 'vue'
import AutoFormLabel from './AutoFormLabel.vue'
import { beautifyObjectName } from './utils'
import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
const props = defineProps<FieldProps>()
@ -21,7 +21,7 @@ const booleanComponent = computed(() => props.config?.component === 'switch' ? S
<component
:is="booleanComponent"
v-bind="{ ...slotProps.componentField }"
:disabled="disabled"
:disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled"
:checked="slotProps.componentField.modelValue"
@update:checked="slotProps.componentField['onUpdate:modelValue']"
/>

4
apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldDate.vue
View File

@ -9,7 +9,7 @@ import { cn } from '@/lib/utils'
import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
import { CalendarIcon } from 'lucide-vue-next'
import AutoFormLabel from './AutoFormLabel.vue'
import { beautifyObjectName } from './utils'
import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
defineProps<FieldProps>()
@ -28,7 +28,7 @@ const df = new DateFormatter('en-US', {
<slot v-bind="slotProps">
<div>
<Popover>
<PopoverTrigger as-child :disabled="disabled">
<PopoverTrigger as-child :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled">
<Button
variant="outline"
:class="cn(

6
apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue
View File

@ -5,7 +5,7 @@ import { Label } from '@/lib/registry/default/ui/label'
import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'
import AutoFormLabel from './AutoFormLabel.vue'
import { beautifyObjectName } from './utils'
import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
defineProps<FieldProps & {
options?: string[]
@ -20,14 +20,14 @@ defineProps<FieldProps & {
</AutoFormLabel>
<FormControl>
<slot v-bind="slotProps">
<RadioGroup v-if="config?.component === 'radio'" :disabled="disabled" :orientation="'vertical'" v-bind="{ ...slotProps.componentField }">
<RadioGroup v-if="config?.component === 'radio'" :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled" :orientation="'vertical'" v-bind="{ ...slotProps.componentField }">
<div v-for="(option, index) in options" :key="option" class="mb-2 flex items-center gap-3 space-y-0">
<RadioGroupItem :id="`${option}-${index}`" :value="option" />
<Label :for="`${option}-${index}`">{{ beautifyObjectName(option) }}</Label>
</div>
</RadioGroup>
<Select v-else :disabled="disabled" v-bind="{ ...slotProps.componentField }">
<Select v-else :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled" v-bind="{ ...slotProps.componentField }">
<SelectTrigger class="w-full">
<SelectValue :placeholder="config?.inputProps?.placeholder" />
</SelectTrigger>

2
apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldFile.vue
View File

@ -39,7 +39,7 @@ async function parseFileAsString(file: File | undefined): Promise<string> {
v-if="!inputFile"
type="file"
v-bind="{ ...config?.inputProps }"
:disabled="disabled"
:disabled="config?.inputProps?.disabled ?? disabled"
@change="async (ev: InputEvent) => {
const file = (ev.target as HTMLInputElement).files?.[0]
inputFile = file

2
apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldInput.vue
View File

@ -23,7 +23,7 @@ const inputComponent = computed(() => props.config?.component === 'textarea' ? T
:is="inputComponent"
type="text"
v-bind="{ ...slotProps.componentField, ...config?.inputProps }"
:disabled="disabled"
:disabled="config?.inputProps?.disabled ?? disabled"
/>
</slot>
</FormControl>

2
apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldNumber.vue
View File

@ -20,7 +20,7 @@ defineProps<FieldProps>()
</AutoFormLabel>
<FormControl>
<slot v-bind="slotProps">
<Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" :disabled="disabled" />
<Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" :disabled="config?.inputProps?.disabled ?? disabled" />
</slot>
</FormControl>
<FormDescription v-if="config?.description">

17
apps/www/src/lib/registry/default/ui/auto-form/utils.ts
View File

@ -169,3 +169,20 @@ export function getFromPath<TValue = unknown, TFallback = TValue>(
return resolvedValue as TValue | undefined
}
type Booleanish = boolean | 'true' | 'false'
export function booleanishToBoolean(value: Booleanish) {
switch (value) {
case 'true':
case true:
return true
case 'false':
case false:
return false
}
}
export function maybeBooleanishToBoolean(value?: Booleanish) {
return value ? booleanishToBoolean(value) : undefined
}

4
apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldBoolean.vue
View File

@ -5,7 +5,7 @@ import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '
import { Switch } from '@/lib/registry/new-york/ui/switch'
import { computed } from 'vue'
import AutoFormLabel from './AutoFormLabel.vue'
import { beautifyObjectName } from './utils'
import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
const props = defineProps<FieldProps>()
@ -21,7 +21,7 @@ const booleanComponent = computed(() => props.config?.component === 'switch' ? S
<component
:is="booleanComponent"
v-bind="{ ...slotProps.componentField }"
:disabled="disabled"
:disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled"
:checked="slotProps.componentField.modelValue"
@update:checked="slotProps.componentField['onUpdate:modelValue']"
/>

4
apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
View File

@ -9,7 +9,7 @@ import { cn } from '@/lib/utils'
import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
import { CalendarIcon } from '@radix-icons/vue'
import AutoFormLabel from './AutoFormLabel.vue'
import { beautifyObjectName } from './utils'
import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
defineProps<FieldProps>()
@ -28,7 +28,7 @@ const df = new DateFormatter('en-US', {
<slot v-bind="slotProps">
<div>
<Popover>
<PopoverTrigger as-child :disabled="disabled">
<PopoverTrigger as-child :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled">
<Button
variant="outline"
:class="cn(

6
apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
View File

@ -5,7 +5,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
import AutoFormLabel from './AutoFormLabel.vue'
import { beautifyObjectName } from './utils'
import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
defineProps<FieldProps & {
options?: string[]
@ -20,14 +20,14 @@ defineProps<FieldProps & {
</AutoFormLabel>
<FormControl>
<slot v-bind="slotProps">
<RadioGroup v-if="config?.component === 'radio'" :disabled="disabled" :orientation="'vertical'" v-bind="{ ...slotProps.componentField }">
<RadioGroup v-if="config?.component === 'radio'" :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled" :orientation="'vertical'" v-bind="{ ...slotProps.componentField }">
<div v-for="(option, index) in options" :key="option" class="mb-2 flex items-center gap-3 space-y-0">
<RadioGroupItem :id="`${option}-${index}`" :value="option" />
<Label :for="`${option}-${index}`">{{ beautifyObjectName(option) }}</Label>
</div>
</RadioGroup>
<Select v-else :disabled="disabled" v-bind="{ ...slotProps.componentField }">
<Select v-else :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled" v-bind="{ ...slotProps.componentField }">
<SelectTrigger class="w-full">
<SelectValue :placeholder="config?.inputProps?.placeholder" />
</SelectTrigger>

2
apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
View File

@ -39,7 +39,7 @@ async function parseFileAsString(file: File | undefined): Promise<string> {
v-if="!inputFile"
type="file"
v-bind="{ ...config?.inputProps }"
:disabled="disabled"
:disabled="config?.inputProps?.disabled ?? disabled"
@change="async (ev: InputEvent) => {
const file = (ev.target as HTMLInputElement).files?.[0]
inputFile = file

2
apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
View File

@ -23,7 +23,7 @@ const inputComponent = computed(() => props.config?.component === 'textarea' ? T
:is="inputComponent"
type="text"
v-bind="{ ...slotProps.componentField, ...config?.inputProps }"
:disabled="disabled"
:disabled="config?.inputProps?.disabled ?? disabled"
/>
</slot>
</FormControl>

2
apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
View File

@ -20,7 +20,7 @@ defineProps<FieldProps>()
</AutoFormLabel>
<FormControl>
<slot v-bind="slotProps">
<Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" :disabled="disabled" />
<Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" :disabled="config?.inputProps?.disabled ?? disabled" />
</slot>
</FormControl>
<FormDescription v-if="config?.description">

17
apps/www/src/lib/registry/new-york/ui/auto-form/utils.ts
View File

@ -169,3 +169,20 @@ export function getFromPath<TValue = unknown, TFallback = TValue>(
return resolvedValue as TValue | undefined
}
type Booleanish = boolean | 'true' | 'false'
export function booleanishToBoolean(value: Booleanish) {
switch (value) {
case 'true':
case true:
return true
case 'false':
case false:
return false
}
}
export function maybeBooleanishToBoolean(value?: Booleanish) {
return value ? booleanishToBoolean(value) : undefined
}