Skip to content

Commit

Permalink
feat(separator): add label props on separator component (#626)
Browse files Browse the repository at this point in the history
  • Loading branch information
imkhoat authored Jun 23, 2024
1 parent eeca60d commit f597d25
Show file tree
Hide file tree
Showing 11 changed files with 63 additions and 30 deletions.
10 changes: 5 additions & 5 deletions apps/www/.vitepress/theme/components/theming/utils/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ export const allColors: Color[] = [
'violet',
]

interface Payment {
status: string
email: string
amount: number
}
// interface Payment {
// status: string
// email: string
// amount: number
// }

interface TeamMember {
name: string
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/content/docs/components/separator.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,6 @@ import { Separator } from '@/components/ui/separator'
</script>
<template>
<Separator />
<Separator label="Or" />
</template>
```
24 changes: 12 additions & 12 deletions apps/www/src/content/docs/installation/vite.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,12 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
#### `vite.config`

```typescript {5,6,9-13}
import path from "path"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import path from 'node:path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import tailwind from "tailwindcss"
import autoprefixer from "autoprefixer"
import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'

export default defineConfig({
css: {
Expand All @@ -61,7 +61,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
'@': path.resolve(__dirname, './src'),
},
},
})
Expand Down Expand Up @@ -116,12 +116,12 @@ npm i -D @types/node
```

```typescript {15-19}
import path from "path"
import vue from "@vitejs/plugin-vue"
import { defineConfig } from "vite"
import path from 'node:path'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

import tailwind from "tailwindcss"
import autoprefixer from "autoprefixer"
import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'

export default defineConfig({
css: {
Expand All @@ -132,7 +132,7 @@ export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
'@': path.resolve(__dirname, './src'),
},
},
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const { handleSubmit } = useForm({
},
})
const onSubmit = handleSubmit((values, { resetForm }) => {
const onSubmit = handleSubmit((values) => {
toast({
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))),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const statuses: Status[] = [
]
const open = ref(false)
const value = ref<typeof statuses[number]>()
// const value = ref<typeof statuses[number]>()
const selectedStatus = ref<Status>()
</script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Separator } from '@/lib/registry/default/ui/separator'
An open-source UI component library.
</p>
</div>
<Separator class="my-4" />
<Separator class="my-4" label="Or" />
<div class="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
Expand Down
21 changes: 18 additions & 3 deletions apps/www/src/lib/registry/default/ui/separator/Separator.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import { type HTMLAttributes, computed } from 'vue'
import { Separator, type SeparatorProps } from 'radix-vue'
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 { class: _, ...delegated } = props
Expand All @@ -15,6 +17,19 @@ const delegatedProps = computed(() => {
<template>
<Separator
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>
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
An open-source UI component library.
</p>
</div>
<Separator class="my-4" />
<Separator class="my-4" label="Or" />
<div class="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
Expand Down
24 changes: 21 additions & 3 deletions apps/www/src/lib/registry/new-york/ui/separator/Separator.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import { type HTMLAttributes, computed } from 'vue'
import { Separator, type SeparatorProps } from 'radix-vue'
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 { class: _, ...delegated } = props
Expand All @@ -15,6 +17,22 @@ const delegatedProps = computed(() => {
<template>
<Separator
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>
2 changes: 1 addition & 1 deletion apps/www/src/public/registry/styles/default/separator.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"files": [
{
"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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"files": [
{
"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",
Expand Down

0 comments on commit f597d25

Please sign in to comment.