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

feat(separator): add label props on separator component (#626)

Browse Source
This commit is contained in:
Miguel 2024-06-24 02:23:34 +07:00 committed by GitHub
parent eeca60d09b
commit f597d258b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 63 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/www/.vitepress/theme/components/theming/utils/data.ts
View File

@ -32,11 +32,11 @@ export const allColors: Color[] = [
'violet', 'violet',
] ]
interface Payment { // interface Payment {
status: string // status: string
email: string // email: string
amount: number // amount: number
} // }
interface TeamMember { interface TeamMember {
name: string name: string

2
apps/www/src/content/docs/components/separator.md
View File

@ -44,6 +44,6 @@ import { Separator } from '@/components/ui/separator'
</script> </script>
<template> <template>
<Separator /> <Separator label="Or" />
</template> </template>
``` ```

24
apps/www/src/content/docs/installation/vite.md
View File

@ -45,12 +45,12 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
#### `vite.config` #### `vite.config`
```typescript {5,6,9-13} ```typescript {5,6,9-13}
import path from "path" import path from 'node:path'
import { defineConfig } from "vite" import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue" import vue from '@vitejs/plugin-vue'
import tailwind from "tailwindcss" import tailwind from 'tailwindcss'
import autoprefixer from "autoprefixer" import autoprefixer from 'autoprefixer'
export default defineConfig({ export default defineConfig({
css: { css: {
@ -61,7 +61,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
plugins: [vue()], plugins: [vue()],
resolve: { resolve: {
alias: { alias: {
"@": path.resolve(__dirname, "./src"), '@': path.resolve(__dirname, './src'),
}, },
}, },
}) })
@ -116,12 +116,12 @@ npm i -D @types/node
``` ```
```typescript {15-19} ```typescript {15-19}
import path from "path" import path from 'node:path'
import vue from "@vitejs/plugin-vue" import vue from '@vitejs/plugin-vue'
import { defineConfig } from "vite" import { defineConfig } from 'vite'
import tailwind from "tailwindcss" import tailwind from 'tailwindcss'
import autoprefixer from "autoprefixer" import autoprefixer from 'autoprefixer'
export default defineConfig({ export default defineConfig({
css: { css: {
@ -132,7 +132,7 @@ export default defineConfig({
plugins: [vue()], plugins: [vue()],
resolve: { resolve: {
alias: { alias: {
"@": path.resolve(__dirname, "./src"), '@': path.resolve(__dirname, './src'),
}, },
}, },
}) })

2
apps/www/src/examples/forms/components/NotificationsForm.vue
View File

@ -33,7 +33,7 @@ const { handleSubmit } = useForm({
}, },
}) })
const onSubmit = handleSubmit((values, { resetForm }) => { const onSubmit = handleSubmit((values) => {
toast({ toast({
title: 'You submitted the following values:', title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))), description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),

2
apps/www/src/lib/registry/default/example/ComboboxPopover.vue
View File

@ -60,7 +60,7 @@ const statuses: Status[] = [
] ]
const open = ref(false) const open = ref(false)
const value = ref<typeof statuses[number]>() // const value = ref<typeof statuses[number]>()
const selectedStatus = ref<Status>() const selectedStatus = ref<Status>()
</script> </script>

2
apps/www/src/lib/registry/default/example/SeparatorDemo.vue
View File

@ -12,7 +12,7 @@ import { Separator } from '@/lib/registry/default/ui/separator'
An open-source UI component library. An open-source UI component library.
</p> </p>
</div> </div>
<Separator class="my-4" /> <Separator class="my-4" label="Or" />
<div class="flex h-5 items-center space-x-4 text-sm"> <div class="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div> <div>Blog</div>
<Separator orientation="vertical" /> <Separator orientation="vertical" />

21
apps/www/src/lib/registry/default/ui/separator/Separator.vue
View File

@ -3,7 +3,9 @@ import { type HTMLAttributes, computed } from 'vue'
import { Separator, type SeparatorProps } from 'radix-vue' import { Separator, type SeparatorProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<
SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props
@ -15,6 +17,19 @@ const delegatedProps = computed(() => {
<template> <template>
<Separator <Separator
v-bind="delegatedProps" v-bind="delegatedProps"
:class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)" :class="
/> cn(
'shrink-0 bg-border relative',
props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
props.class,
)
"
>
<span
v-if="props.label"
:class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',
props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
)"
>{{ props.label }}</span>
</Separator>
</template> </template>

2
apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
View File

@ -12,7 +12,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
An open-source UI component library. An open-source UI component library.
</p> </p>
</div> </div>
<Separator class="my-4" /> <Separator class="my-4" label="Or" />
<div class="flex h-5 items-center space-x-4 text-sm"> <div class="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div> <div>Blog</div>
<Separator orientation="vertical" /> <Separator orientation="vertical" />

24
apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
View File

@ -3,7 +3,9 @@ import { type HTMLAttributes, computed } from 'vue'
import { Separator, type SeparatorProps } from 'radix-vue' import { Separator, type SeparatorProps } from 'radix-vue'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<
SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props
@ -15,6 +17,22 @@ const delegatedProps = computed(() => {
<template> <template>
<Separator <Separator
v-bind="delegatedProps" v-bind="delegatedProps"
:class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)" :class="
/> cn(
'shrink-0 bg-border relative',
props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
props.class,
)
"
>
<span
v-if="props.label"
:class="
cn(
'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',
props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
)
"
>{{ props.label }}</span>
</Separator>
</template> </template>

2
apps/www/src/public/registry/styles/default/separator.json
View File

@ -7,7 +7,7 @@
"files": [ "files": [
{ {
"name": "Separator.vue", "name": "Separator.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Separator\n v-bind=\"delegatedProps\"\n :class=\"cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)\"\n />\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<\n SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Separator\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'shrink-0 bg-border relative',\n props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n props.class,\n )\n \"\n >\n <span\n v-if=\"props.label\"\n :class=\"cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',\n props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n )\"\n >{{ props.label }}</span>\n </Separator>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/new-york/separator.json
View File

@ -7,7 +7,7 @@
"files": [ "files": [
{ {
"name": "Separator.vue", "name": "Separator.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Separator\n v-bind=\"delegatedProps\"\n :class=\"cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)\"\n />\n</template>\n" "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<\n SeparatorProps & { class?: HTMLAttributes['class'], label?: string }\n>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n</script>\n\n<template>\n <Separator\n v-bind=\"delegatedProps\"\n :class=\"\n cn(\n 'shrink-0 bg-border relative',\n props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n props.class,\n )\n \"\n >\n <span\n v-if=\"props.label\"\n :class=\"\n cn(\n 'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white flex justify-center items-center',\n props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',\n )\n \"\n >{{ props.label }}</span>\n </Separator>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",