|
1 |
| -export * from "./anatomy" |
| 1 | +import { anatomy } from '@chakra-ui/vue-theme-tools'; |
| 2 | + |
| 3 | +/** |
| 4 | + * Hey! Welcome to @chakra-ui/vue-next Anatomy |
| 5 | + * |
| 6 | + * The anatomy of all chakra components |
| 7 | + * |
| 8 | + * @see Docs https://next.vue.chakra-ui.com/vue-anatomy |
| 9 | + * @see Source https://github.com/chakra-ui/chakra-ui-vue-next/blob/master/packages/vue-anatomy/src/vue-anatomy/vue-anatomy.ts |
| 10 | + * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2 |
| 11 | + */ |
| 12 | +/** |
| 13 | + * **Accordion anatomy** |
| 14 | + * - Root: the root container of the accordion |
| 15 | + * - Container: the accordion item contains the button and panel |
| 16 | + * - Button: the button is the trigger for the panel |
| 17 | + * - Panel: the panel is the content of the accordion item |
| 18 | + * - Icon: the expanded/collapsed icon |
| 19 | + */ |
| 20 | + |
| 21 | +var accordionAnatomy = anatomy("accordion").parts("root", "container", "button", "panel").extend("icon"); |
| 22 | +/** |
| 23 | + * **Alert anatomy** |
| 24 | + * - Title: the alert's title |
| 25 | + * - Description: the alert's description |
| 26 | + * - Icon: the alert's icon |
| 27 | + */ |
| 28 | + |
| 29 | +var alertAnatomy = anatomy("alert").parts("title", "description", "container").extend("icon", "spinner"); |
| 30 | +/** |
| 31 | + * **Avatar anatomy** |
| 32 | + * - Container: the container for the avatar |
| 33 | + * - Label: the avatar initials text |
| 34 | + * - Excess Label: the label or text that represents excess avatar count. |
| 35 | + * Typically used in avatar groups. |
| 36 | + * - Group: the container for the avatar group |
| 37 | + */ |
| 38 | + |
| 39 | +var avatarAnatomy = anatomy("avatar").parts("label", "badge", "container").extend("excessLabel", "group"); |
| 40 | +/** |
| 41 | + * **Breadcrumb anatomy** |
| 42 | + * - Item: the container for a breadcrumb item |
| 43 | + * - Link: the element that represents the breadcrumb link |
| 44 | + * - Container: the container for the breadcrumb items |
| 45 | + * - Separator: the separator between breadcrumb items |
| 46 | + */ |
| 47 | + |
| 48 | +var breadcrumbAnatomy = anatomy("breadcrumb").parts("link", "item", "container").extend("separator"); |
| 49 | +var buttonAnatomy = anatomy("button").parts(); |
| 50 | +var checkboxAnatomy = anatomy("checkbox").parts("control", "icon", "container").extend("label"); |
| 51 | +var circularProgressAnatomy = anatomy("progress").parts("track", "filledTrack").extend("label"); |
| 52 | +var drawerAnatomy = anatomy("drawer").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer"); |
| 53 | +var editableAnatomy = anatomy("editable").parts("preview", "input", "textarea"); |
| 54 | +var formAnatomy = anatomy("form").parts("container", "requiredIndicator", "helperText"); |
| 55 | +var formErrorAnatomy = anatomy("formError").parts("text", "icon"); |
| 56 | +var inputAnatomy = anatomy("input").parts("addon", "field", "element"); |
| 57 | +var listAnatomy = anatomy("list").parts("container", "item", "icon"); |
| 58 | +var menuAnatomy = anatomy("menu").parts("button", "list", "item").extend("groupTitle", "command", "divider"); |
| 59 | +var modalAnatomy = anatomy("modal").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer"); |
| 60 | +var numberInputAnatomy = anatomy("numberinput").parts("root", "field", "stepperGroup", "stepper"); |
| 61 | +var pinInputAnatomy = anatomy("pininput").parts("field"); |
| 62 | +var popoverAnatomy = anatomy("popover").parts("content", "header", "body", "footer").extend("popper", "arrow", "closeButton"); |
| 63 | +var progressAnatomy = anatomy("progress").parts("label", "filledTrack", "track"); |
| 64 | +var radioAnatomy = anatomy("radio").parts("container", "control", "label"); |
| 65 | +var selectAnatomy = anatomy("select").parts("field", "icon"); |
| 66 | +var sliderAnatomy = anatomy("slider").parts("container", "track", "thumb", "filledTrack"); |
| 67 | +var statAnatomy = anatomy("stat").parts("container", "label", "helpText", "number", "icon"); |
| 68 | +var switchAnatomy = anatomy("switch").parts("container", "track", "thumb"); |
| 69 | +var tableAnatomy = anatomy("table").parts("table", "thead", "tbody", "tr", "th", "td", "tfoot", "caption"); |
| 70 | +var tabsAnatomy = anatomy("tabs").parts("root", "tab", "tablist", "tabpanel", "tabpanels", "indicator"); |
| 71 | +/** |
| 72 | + * **Tag anatomy** |
| 73 | + * - Container: the container for the tag |
| 74 | + * - Label: the text content of the tag |
| 75 | + * - closeButton: the close button for the tag |
| 76 | + */ |
| 77 | + |
| 78 | +var tagAnatomy = anatomy("tag").parts("container", "label", "closeButton"); |
| 79 | + |
| 80 | +export { accordionAnatomy, alertAnatomy, avatarAnatomy, breadcrumbAnatomy, buttonAnatomy, checkboxAnatomy, circularProgressAnatomy, drawerAnatomy, editableAnatomy, formAnatomy, formErrorAnatomy, inputAnatomy, listAnatomy, menuAnatomy, modalAnatomy, numberInputAnatomy, pinInputAnatomy, popoverAnatomy, progressAnatomy, radioAnatomy, selectAnatomy, sliderAnatomy, statAnatomy, switchAnatomy, tableAnatomy, tabsAnatomy, tagAnatomy }; |
0 commit comments