|
| 1 | +<script setup lang="ts"> |
| 2 | +import { ref } from 'vue' |
| 3 | +import { ComboboxAnchor, ComboboxCancel, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from '..' |
| 4 | +import { Icon } from '@iconify/vue' |
| 5 | +
|
| 6 | +const modelValue = ref('Banana') |
| 7 | +
|
| 8 | +const options = [ |
| 9 | + { name: 'Fruit', children: [ |
| 10 | + { name: 'Apple' }, |
| 11 | + { name: 'Banana' }, |
| 12 | + { name: 'Orange' }, |
| 13 | + { name: 'Honeydew' }, |
| 14 | + { name: 'Grapes' }, |
| 15 | + { name: 'Watermelon' }, |
| 16 | + { name: 'Cantaloupe' }, |
| 17 | + { name: 'Pear' }, |
| 18 | + ] }, |
| 19 | + { name: 'Vegetable', children: [ |
| 20 | + { name: 'Cabbage' }, |
| 21 | + { name: 'Broccoli' }, |
| 22 | + { name: 'Carrots' }, |
| 23 | + { name: 'Lettuce' }, |
| 24 | + { name: 'Spinach' }, |
| 25 | + { name: 'Bok Choy' }, |
| 26 | + { name: 'Cauliflower' }, |
| 27 | + { name: 'Potatoes' }, |
| 28 | + ] }, |
| 29 | +] |
| 30 | +</script> |
| 31 | + |
| 32 | +<template> |
| 33 | + <Story |
| 34 | + title="Combobox/Cancel" |
| 35 | + :layout="{ type: 'single', iframe: false }" |
| 36 | + > |
| 37 | + <Variant title="default"> |
| 38 | + <ComboboxRoot |
| 39 | + v-model="modelValue" |
| 40 | + > |
| 41 | + <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"> |
| 42 | + <ComboboxInput |
| 43 | + class="bg-transparent outline-none text-grass11 placeholder-gray-400" |
| 44 | + placeholder="Test" |
| 45 | + /> |
| 46 | + <ComboboxCancel>Clear input</ComboboxCancel> |
| 47 | + <ComboboxTrigger> |
| 48 | + <Icon |
| 49 | + icon="radix-icons:chevron-down" |
| 50 | + class="h-4 w-4 text-grass11" |
| 51 | + /> |
| 52 | + </ComboboxTrigger> |
| 53 | + </ComboboxAnchor> |
| 54 | + <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"> |
| 55 | + <ComboboxViewport class="p-[5px]"> |
| 56 | + <ComboboxEmpty class="text-mauve8 text-xs font-medium text-center py-2" /> |
| 57 | + |
| 58 | + <template |
| 59 | + v-for="(group, index) in options" |
| 60 | + :key="group.name" |
| 61 | + > |
| 62 | + <ComboboxGroup> |
| 63 | + <ComboboxSeparator |
| 64 | + v-if="index !== 0" |
| 65 | + class="h-[1px] bg-grass6 m-[5px]" |
| 66 | + /> |
| 67 | + |
| 68 | + <ComboboxLabel class="px-[25px] text-xs leading-[25px] text-mauve11"> |
| 69 | + {{ group.name }} |
| 70 | + </ComboboxLabel> |
| 71 | + |
| 72 | + <ComboboxItem |
| 73 | + v-for="option in group.children" |
| 74 | + :key="option.name" |
| 75 | + :value="option.name" |
| 76 | + class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1" |
| 77 | + > |
| 78 | + <ComboboxItemIndicator |
| 79 | + class="absolute left-0 w-[25px] inline-flex items-center justify-center" |
| 80 | + > |
| 81 | + <Icon icon="radix-icons:check" /> |
| 82 | + </ComboboxItemIndicator> |
| 83 | + <span> |
| 84 | + {{ option.name }} |
| 85 | + </span> |
| 86 | + </ComboboxItem> |
| 87 | + </ComboboxGroup> |
| 88 | + </template> |
| 89 | + </ComboboxViewport> |
| 90 | + </ComboboxContent> |
| 91 | + </ComboboxRoot> |
| 92 | + </Variant> |
| 93 | + </Story> |
| 94 | +</template> |
0 commit comments