diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue index 1c971c27..8840db64 100644 --- a/docs/app/components/content/ComponentCode.vue +++ b/docs/app/components/content/ComponentCode.vue @@ -16,6 +16,8 @@ const props = defineProps<{ hide?: string[] /** List of props to externalize in script setup */ external?: string[] + /** List of props to use with `v-model` */ + model?: string[] /** List of items for each prop */ items?: { [key: string]: string[] } props?: { [key: string]: any } @@ -39,6 +41,10 @@ const camelName = camelCase(props.slug ?? route.params.slug?.[route.params.slug. const name = `U${upperFirst(camelName)}` const componentProps = reactive({ ...(props.props || {}) }) +const componentEvents = reactive({ + ...Object.fromEntries((props.model || []).map(key => [`onUpdate:${key}`, (e: any) => setComponentProp(key, e)])), + ...(componentProps.modelValue ? { [`onUpdate:modelValue`]: (e: any) => setComponentProp('modelValue', e) } : {}) +}) function getComponentProp(name: string) { return get(componentProps, name) || undefined @@ -122,6 +128,11 @@ const code = computed(() => { continue } + if (props.model?.includes(key)) { + code += ` v-model:${key}="${key}"` + continue + } + if (value === undefined || value === null || value === '' || props.hide?.includes(key)) { continue } @@ -253,7 +264,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props: