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

docs: add Input with Icon Example

Browse Source
This commit is contained in:
hrynevych.romann 2024-02-15 14:30:23 +02:00
parent 5cc6ef1e9d
commit c156d5d261
5 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/www/__registry__/index.ts
View File

@ -443,6 +443,13 @@ export const Index = {
component: () => import('../src/lib/registry/default/example/InputWithButton.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/InputWithButton.vue'],
},
InputWithIcon: {
name: 'InputWithIcon',
type: 'components:example',
registryDependencies: ['input'],
component: () => import('../src/lib/registry/default/example/InputWithIcon.vue').then(m => m.default),
files: ['../src/lib/registry/default/example/InputWithIcon.vue'],
},
InputWithLabel: {
name: 'InputWithLabel',
type: 'components:example',
@ -1362,6 +1369,13 @@ export const Index = {
component: () => import('../src/lib/registry/new-york/example/InputWithButton.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/InputWithButton.vue'],
},
InputWithIcon: {
name: 'InputWithIcon',
type: 'components:example',
registryDependencies: ['input'],
component: () => import('../src/lib/registry/new-york/example/InputWithIcon.vue').then(m => m.default),
files: ['../src/lib/registry/new-york/example/InputWithIcon.vue'],
},
InputWithLabel: {
name: 'InputWithLabel',
type: 'components:example',

4
apps/www/src/content/docs/components/input.md
View File

@ -63,6 +63,10 @@ import { Input } from '@/components/ui/input'
<ComponentPreview name="InputWithButton" class="max-w-xs" />
### With Icon
<ComponentPreview name="InputWithIcon" class="max-w-xs" />
### Form
<ComponentPreview name="InputForm" />

13
apps/www/src/lib/registry/default/example/InputWithIcon.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import { MagnifyingGlassIcon } from '@radix-icons/vue'
import { Input } from '@/lib/registry/default/ui/input'
</script>
<template>
<div class="relative w-full max-w-sm items-center">
<Input id="search" type="text" placeholder="Search..." class="pl-10" />
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
<MagnifyingGlassIcon class="size-6 text-muted-foreground" />
</span>
</div>
</template>

13
apps/www/src/lib/registry/new-york/example/InputWithIcon.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import { MagnifyingGlassIcon } from '@radix-icons/vue'
import { Input } from '@/lib/registry/new-york/ui/input'
</script>
<template>
<div class="relative w-full max-w-sm items-center">
<Input id="search" type="text" placeholder="Search..." class="pl-10" />
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
<MagnifyingGlassIcon class="size-6 text-muted-foreground" />
</span>
</div>
</template>

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

@ -19,7 +19,7 @@
},
{
"name": "SelectItem.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n useForwardProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectItem\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\n \"\n >\n <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectItemIndicator>\n <Check class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n useForwardProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectItem\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\n \"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectItemIndicator>\n <Check class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
},
{
"name": "SelectItemText.vue",