arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 11:20:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(ComponentExample): add overflow hidden and props as search params

Browse Source
This commit is contained in:
Sébastien Chopin
2024-12-11 12:43:48 +01:00
parent 7ee733e82b
commit 5a6a165a8d
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/app/components/content/ComponentExample.vue
View File

@@ -47,6 +47,10 @@ const props = withDefaults(defineProps<{
* A list of line numbers to highlight in the code block * A list of line numbers to highlight in the code block
*/ */
highlights?: number[] highlights?: number[]
/**
* Whether to add overflow-hidden to wrapper
*/
overflowHidden?: boolean
}>(), { }>(), {
preview: true, preview: true,
source: true source: true
@@ -119,13 +123,13 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
return acc return acc
}, {} as Record<string, any>) || {}) }, {} as Record<string, any>) || {})
const urlSearchParams = computed(() => new URLSearchParams(optionsValues.value).toString()) const urlSearchParams = computed(() => new URLSearchParams({ ...optionsValues.value, ...componentProps }).toString())
</script> </script>
<template> <template>
<div class="my-5"> <div class="my-5">
<template v-if="preview"> <template v-if="preview">
<div class="border border-[var(--ui-border-muted)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source }]"> <div class="border border-[var(--ui-border-muted)] relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source, 'overflow-hidden': props.overflowHidden }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-border-muted)]"> <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-[var(--ui-border-muted)]">
<slot name="options" /> <slot name="options" />