Skip to content

Instantly share code, notes, and snippets.

@SH8GH
Last active February 3, 2023 03:08
Show Gist options
  • Save SH8GH/b75cb70ddd8d2adc1fec187c2d41510f to your computer and use it in GitHub Desktop.
Save SH8GH/b75cb70ddd8d2adc1fec187c2d41510f to your computer and use it in GitHub Desktop.
make headlessui vue like headlessui react
import {
Combobox as VueCombobox,
ComboboxButton as VueComboboxButton,
ComboboxInput as VueComboboxInput,
ComboboxLabel as VueComboboxLabel,
ComboboxOption as VueComboboxOption,
ComboboxOptions as VueComboboxOptions,
Dialog as VueDialog,
DialogBackdrop as VueDialogBackdrop,
DialogDescription as VueDialogDescription,
DialogOverlay as VueDialogOverlay,
DialogPanel as VueDialogPanel,
DialogTitle as VueDialogTitle,
Disclosure as VueDisclosure,
DisclosureButton as VueDisclosureButton,
DisclosurePanel as VueDisclosurePanel,
FocusTrap as VueFocusTrap,
Listbox as VueListbox,
ListboxButton as VueListboxButton,
ListboxLabel as VueListboxLabel,
ListboxOption as VueListboxOption,
ListboxOptions as VueListboxOptions,
Menu as VueMenu,
MenuButton as VueMenuButton,
MenuItem as VueMenuItem,
MenuItems as VueMenuItems,
Popover as VuePopover,
PopoverButton as VuePopoverButton,
PopoverGroup as VuePopoverGroup,
PopoverOverlay as VuePopoverOverlay,
PopoverPanel as VuePopoverPanel,
Portal as VuePortal,
PortalGroup as VuePortalGroup,
RadioGroup as VueRadioGroup,
RadioGroupDescription as VueRadioGroupDescription,
RadioGroupLabel as VueRadioGroupLabel,
RadioGroupOption as VueRadioGroupOption,
Switch as VueSwitch,
SwitchDescription as VueSwitchDescription,
SwitchGroup as VueSwitchGroup,
SwitchLabel as VueSwitchLabel,
Tab as VueTab,
TabGroup as VueTabGroup,
TabList as VueTabList,
TabPanel as VueTabPanel,
TabPanels as VueTabPanels,
TransitionChild as VueTransitionChild,
TransitionRoot as VueTransitionRoot,
} from "@headlessui/vue";
export const Combobox = Object.assign(VueCombobox, {
Button: VueComboboxButton,
Input: VueComboboxInput,
Label: VueComboboxLabel,
Option: VueComboboxOption,
Options: VueComboboxOptions,
});
export const Dialog = Object.assign(VueDialog, {
Backdrop: VueDialogBackdrop,
Description: VueDialogDescription,
Overlay: VueDialogOverlay,
Panel: VueDialogPanel,
Title: VueDialogTitle,
});
export const Disclosure = Object.assign(VueDisclosure, {
Button: VueDisclosureButton,
Panel: VueDisclosurePanel,
});
export const FocusTrap = VueFocusTrap;
export const Tab = Object.assign(VueTab, {
Group: VueTabGroup,
List: VueTabList,
Panel: VueTabPanel,
Panels: VueTabPanels,
});
export const Portal = Object.assign(VuePortal, {
Group: VuePortalGroup,
});
export const RadioGroup = Object.assign(VueRadioGroup, {
Description: VueRadioGroupDescription,
Label: VueRadioGroupLabel,
Option: VueRadioGroupOption,
});
export const Switch = Object.assign(VueSwitch, {
Description: VueSwitchDescription,
Group: VueSwitchGroup,
Label: VueSwitchLabel,
});
export const Transition = Object.assign(VueTransitionRoot, {
Child: VueTransitionChild,
Root: VueTransitionRoot,
});
export const Popover = Object.assign(VuePopover, {
Button: VuePopoverButton,
Group: VuePopoverGroup,
Overlay: VuePopoverOverlay,
Panel: VuePopoverPanel,
});
export const Menu = Object.assign(VueMenu, {
Button: VueMenuButton,
Item: VueMenuItem,
Items: VueMenuItems,
});
export const Listbox = Object.assign(VueListbox, {
Button: VueListboxButton,
Label: VueListboxLabel,
Option: VueListboxOption,
Options: VueListboxOptions,
});
export {
Combobox as TemplateCombobox,
ComboboxButton as TemplateComboboxButton,
ComboboxInput as TemplateComboboxInput,
ComboboxLabel as TemplateComboboxLabel,
ComboboxOption as TemplateComboboxOption,
ComboboxOptions as TemplateComboboxOptions,
Dialog as TemplateDialog,
DialogBackdrop as TemplateDialogBackdrop,
DialogDescription as TemplateDialogDescription,
DialogOverlay as TemplateDialogOverlay,
DialogPanel as TemplateDialogPanel,
DialogTitle as TemplateDialogTitle,
Disclosure as TemplateDisclosure,
DisclosureButton as TemplateDisclosureButton,
DisclosurePanel as TemplateDisclosurePanel,
FocusTrap as TemplateFocusTrap,
Listbox as TemplateListbox,
ListboxButton as TemplateListboxButton,
ListboxLabel as TemplateListboxLabel,
ListboxOption as TemplateListboxOption,
ListboxOptions as TemplateListboxOptions,
Menu as TemplateMenu,
MenuButton as TemplateMenuButton,
MenuItem as TemplateMenuItem,
MenuItems as TemplateMenuItems,
Popover as TemplatePopover,
PopoverButton as TemplatePopoverButton,
PopoverGroup as TemplatePopoverGroup,
PopoverOverlay as TemplatePopoverOverlay,
PopoverPanel as TemplatePopoverPanel,
Portal as TemplatePortal,
PortalGroup as TemplatePortalGroup,
RadioGroup as TemplateRadioGroup,
RadioGroupDescription as TemplateRadioGroupDescription,
RadioGroupLabel as TemplateRadioGroupLabel,
RadioGroupOption as TemplateRadioGroupOption,
Switch as TemplateSwitch,
SwitchDescription as TemplateSwitchDescription,
SwitchGroup as TemplateSwitchGroup,
SwitchLabel as TemplateSwitchLabel,
Tab as TemplateTab,
TabGroup as TemplateTabGroup,
TabList as TemplateTabList,
TabPanel as TemplateTabPanel,
TabPanels as TemplateTabPanels,
TransitionChild as TemplateTransitionChild,
TransitionRoot as TemplateTransitionRoot,
} from "@headlessui/vue";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment