Skip to content

Commit

Permalink
refactor: rename ComboboxHeader component
Browse files Browse the repository at this point in the history
  • Loading branch information
@zernonia
zernonia committed Oct 15, 2023
1 parent 1090cff commit d6a1329
Show file tree
Hide file tree
Showing 10 changed files with 31 additions and 31 deletions.
6 changes: 3 additions & 3 deletions docs/components/demo/Combobox/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref } from 'vue'
import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from 'radix-vue'
import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from 'radix-vue'
import { Icon } from '@iconify/vue'
const v = ref('')
Expand All @@ -10,12 +10,12 @@ const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']

<template>
<ComboboxRoot v-model="v" class="relative">
<ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxInput class="!bg-transparent outline-none text-grass11 h-full selection:bg-grass5 placeholder-mauve8" placeholder="Placeholder..." />
<ComboboxTrigger>
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
</ComboboxTrigger>
</ComboboxHeader>
</ComboboxAnchor>

<ComboboxContent class="absolute z-10 w-full mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
<ComboboxViewport class="p-[5px]">
Expand Down
6 changes: 3 additions & 3 deletions docs/content/components/combobox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,12 @@ Import all parts and piece them together.
```vue
<script setup lang="ts">
import {
ComboboxAnchor,
ComboboxArrow,
ComboboxCancel,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxHeader,
ComboboxInput,
ComboboxItem,
ComboboxItemIndicator,
Expand All @@ -86,11 +86,11 @@ import {
<template>
<ComboboxRoot>
<ComboboxHeader>
<ComboboxAnchor>
<ComboboxInput />
<ComboboxTrigger />
<ComboboxCancel />
</ComboboxHeader>
</ComboboxAnchor>
<ComboboxPortal>
<ComboboxContent>
Expand Down
2 changes: 1 addition & 1 deletion packages/radix-vue/constant/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const components = {
Combobox: [
'ComboboxRoot',
'ComboboxInput',
'ComboboxHeader',
'ComboboxAnchor',
'ComboboxTrigger',
'ComboboxCancel',
'ComboboxGroup',
Expand Down
4 changes: 2 additions & 2 deletions ...radix-vue/src/Combobox/ComboboxHeader.vue → ...radix-vue/src/Combobox/ComboboxAnchor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
import { Primitive, type PrimitiveProps } from '@/Primitive'
import { PopperAnchor } from '@/Popper'
export interface ComboboxHeaderProps extends PrimitiveProps {}
export interface ComboboxAnchorProps extends PrimitiveProps {}
defineProps<ComboboxHeaderProps>()
defineProps<ComboboxAnchorProps>()
</script>

<template>
Expand Down
6 changes: 3 additions & 3 deletions packages/radix-vue/src/Combobox/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ export {
type ComboboxInputProps,
} from './ComboboxInput.vue'
export {
default as ComboboxHeader,
type ComboboxHeaderProps,
} from './ComboboxHeader.vue'
default as ComboboxAnchor,
type ComboboxAnchorProps,
} from './ComboboxAnchor.vue'
export {
default as ComboboxTrigger,
type ComboboxTriggerProps,
Expand Down
6 changes: 3 additions & 3 deletions packages/radix-vue/src/Combobox/story/ComboboxBasic.story.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref } from 'vue'
import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '../'
import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '../'
import { Icon } from '@iconify/vue'
const v = ref('Apple')
Expand All @@ -12,12 +12,12 @@ const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
<Story title="Combobox/Default" :layout="{ type: 'single', iframe: false }">
<Variant title="default">
<ComboboxRoot v-model="v">
<ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Test" />
<ComboboxTrigger>
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
</ComboboxTrigger>
</ComboboxHeader>
</ComboboxAnchor>
<ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
<ComboboxViewport class="p-[5px]">
<ComboboxEmpty class="text-gray-400 text-xs font-medium text-center py-2" />
Expand Down
6 changes: 3 additions & 3 deletions packages/radix-vue/src/Combobox/story/ComboboxCustom.story.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
import { Icon } from '@iconify/vue'
const links = [
Expand All @@ -26,12 +26,12 @@ const links = [
<Story title="Combobox/Custom" :layout="{ type: 'single', iframe: false }">
<Variant title="default">
<ComboboxRoot>
<ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxInput auto-focus class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Where to go?" />
<ComboboxTrigger>
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
</ComboboxTrigger>
</ComboboxHeader>
</ComboboxAnchor>
<ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
<ComboboxViewport class="p-[5px]">
<ComboboxEmpty class="text-gray-400 text-xs font-medium text-center py-2" />
Expand Down
10 changes: 5 additions & 5 deletions packages/radix-vue/src/Combobox/story/ComboboxMultiple.story.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
import { Icon } from '@iconify/vue'
const people = [
Expand All @@ -25,12 +25,12 @@ function handleUpdate(ev: any) {
<Story title="Combobox/Multiple" :layout="{ type: 'grid', width: '50%' }">
<Variant title="String" auto-props-disabled>
<ComboboxRoot multiple>
<ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Test" />
<ComboboxTrigger>
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
</ComboboxTrigger>
</ComboboxHeader>
</ComboboxAnchor>
<ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
<ComboboxViewport class="p-[5px]">
<ComboboxEmpty class="text-gray-400 text-xs font-medium text-center py-2" />
Expand Down Expand Up @@ -62,12 +62,12 @@ function handleUpdate(ev: any) {

<Variant title="Object" auto-props-disabled>
<ComboboxRoot v-model:search-term="searchTerm" v-model="v" name="test" multiple @update:model-value="handleUpdate">
<ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Test" />
<ComboboxTrigger>
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
</ComboboxTrigger>
</ComboboxHeader>
</ComboboxAnchor>
<ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
<ComboboxViewport class="p-[5px]">
<ComboboxEmpty class="text-gray-400 text-xs font-medium text-center py-2" />
Expand Down
10 changes: 5 additions & 5 deletions packages/radix-vue/src/Combobox/story/ComboboxObject.story.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxTrigger, ComboboxViewport } from '../'
import { Icon } from '@iconify/vue'
const people = [
Expand Down Expand Up @@ -31,12 +31,12 @@ function handleUpdate(ev: any) {
<Story title="Combobox/Object" :layout="{ type: 'grid', width: '50%' }">
<Variant title="Default" auto-props-disabled>
<ComboboxRoot v-model="v" :filter-function="filterFunction" @update:model-value="handleUpdate">
<ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Test" />
<ComboboxTrigger>
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
</ComboboxTrigger>
</ComboboxHeader>
</ComboboxAnchor>
<ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
<ComboboxViewport class="p-[5px]">
<ComboboxEmpty class="text-gray-400 text-xs font-medium text-center py-2" />
Expand Down Expand Up @@ -68,12 +68,12 @@ function handleUpdate(ev: any) {

<Variant title="Manual filtering" auto-props-disabled>
<ComboboxRoot v-model:search-term="searchTerm" v-model="v" @update:model-value="handleUpdate">
<ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Test" />
<ComboboxTrigger>
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
</ComboboxTrigger>
</ComboboxHeader>
</ComboboxAnchor>
<ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
<ComboboxViewport class="p-[5px]">
<ComboboxEmpty class="text-gray-400 text-xs font-medium text-center py-2" />
Expand Down
6 changes: 3 additions & 3 deletions packages/radix-vue/src/Combobox/story/_Combobox.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref } from 'vue'
import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, type ComboboxRootProps, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '../'
import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, type ComboboxRootProps, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '../'
import { Icon } from '@iconify/vue'
const props = defineProps<ComboboxRootProps>()
Expand All @@ -13,12 +13,12 @@ const open = ref(props.open)

<template>
<ComboboxRoot v-bind="props" v-model="v" v-model:open="open" name="test">
<ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxInput class="bg-transparent outline-none text-grass11 placeholder-gray-400" placeholder="Placeholder..." />
<ComboboxTrigger>
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
</ComboboxTrigger>
</ComboboxHeader>
</ComboboxAnchor>
<ComboboxContent class="mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
<ComboboxViewport class="p-[5px]">
<ComboboxEmpty class="text-gray-400 text-xs font-medium text-center py-2" />
Expand Down

0 comments on commit d6a1329

Please sign in to comment.