From d316cf3a12e635655688ea265d67dc270e965b15 Mon Sep 17 00:00:00 2001 From: Ilya Artamonov Date: Mon, 23 Oct 2023 18:23:14 +0300 Subject: [PATCH] Components renaming (#225) * refactor: eslint config adjusted for better diff's * refactor: stricter linting + dependencies updated * refactoring: paragraph component - component - docs * refactoring: heading component - component - docs * Update docs/components/heading.md Co-authored-by: Ilya Artamonov * refactoring: link component - component - docs * refactoring: image component - component - docs * refactoring: alert component - component - docs * refactoring: avatar component - component - docs * refactoring: removed unnecessary code - component names come from the file name * refactoring: breadcrumb component - component - docs * refactoring: accordion component - component - docs * refactoring: buttom component - component - docs * refactoring: badge component - component - docs * refactoring: card component - component - docs * refactoring: order of components in docs updated * refactoring: unnecessary semicolons removed * refactoring: button group component - component - docs * refactoring: carousel component - component - docs * refactoring: dropdown component - component - docs * refactoring: footer component - component - docs * refactoring:list-group component - component - docs * refactoring: modal component - component - docs * refactoring: navbar component - component - docs * refactoring: pagination component - component - docs * refactoring: progress component - component - docs * refactoring: rating component - component - docs * refactoring: spinner component - component - docs * refactoring: table component - component - docs * refactoring: tabs component - component - docs * feat: Updated pagination examples * lint: Lister fixes * feat: Sidebar component and some fixes * feat: Input component * feat: Some fixes * feat: Some fixes * chore: update deps * refactor: removed old Modal component * refactor: radio component and some fixes * fix: fixed path error * refactor: Range component * refactoring: timeline component - component - docs * refactor: Select component * refactoring: toast component - component - docs * refactoring: tooltip component - component - docs * refactoring: sidebar component - component - docs * refactoring: input component - component - docs * refactoring: fileInput component - component - docs * refactoring: select component - component - docs * refactoring: textarea component - component - docs * refactoring: checkbox component - component - docs * refactoring: radio component - component - docs * refactoring: toggle component - component - docs * refactoring: range component - component - docs * local configs linted * documentation quick start updated * flowbite-themable refactored to fit new linters and style guide * random linter fixes * refactoring: toast-provider component - component - docs * final linter fixes * lint: Linter fixes * fix: Fixed types * fix: Fixed card component * docs: Updated card examples * fix: Fixed tabs * refactor: Heading component refactoring * Fwb rename - few fixes after component review (#237) * fix: button documentation * fix: model type in range examples * chore: Toast marked as WIP --------- Co-authored-by: Sqrcz Co-authored-by: Sqrcz --- .eslintrc.js | 22 +- docs/.vitepress/config.mts | 12 +- .../examples/SlotListenerExample.vue | 13 +- docs/components/accordion.md | 397 +- .../examples/AccordionAlwaysOpenExample.vue | 35 - .../accordion/examples/AccordionExample.vue | 52 - .../examples/AccordionFlushExample.vue | 35 - .../AccordionOpenFirstItemExample.vue | 52 - .../AccordionStyledHeadersExample.vue | 35 - .../examples/FwbAccordionExample.vue | 61 + .../FwbAccordionExampleAlwaysOpen.vue | 58 + .../FwbAccordionExampleFirstItemClosed.vue | 61 + .../examples/FwbAccordionExampleFlush.vue | 58 + .../FwbAccordionExampleStyledHeaders.vue | 60 + docs/components/alert.md | 260 +- .../examples/AlertBorderAccentExample.vue | 12 - .../alert/examples/AlertBorderExample.vue | 12 - .../alert/examples/AlertClosableExample.vue | 12 - .../alert/examples/AlertIconExample.vue | 12 - .../alert/examples/AlertTypeExample.vue | 12 - .../alert/examples/FwbAlertExampleBorder.vue | 38 + .../examples/FwbAlertExampleBorderAccent.vue | 43 + ...e.vue => FwbAlertExampleCustomContent.vue} | 31 +- .../examples/FwbAlertExampleDismissable.vue | 43 + .../alert/examples/FwbAlertExampleIcon.vue | 38 + ...tleExample.vue => FwbAlertExampleList.vue} | 13 +- .../alert/examples/FwbAlertExampleType.vue | 23 + docs/components/avatar.md | 285 +- .../AvatarAlternativePlaceholderExample.vue | 21 - .../examples/AvatarAlternativeTextExample.vue | 8 - .../avatar/examples/AvatarBorderedExample.vue | 9 - .../examples/AvatarDotIndicatorExample.vue | 11 - .../AvatarDotIndicatorPositionExample.vue | 15 - .../avatar/examples/AvatarExample.vue | 9 - .../examples/AvatarPlaceholderExample.vue | 9 - .../AvatarPlaceholderInitialsExample.vue | 9 - .../avatar/examples/AvatarSizeExample.vue | 14 - .../avatar/examples/FwbAvatarExample.vue | 15 + .../avatar/examples/FwbAvatarExampleAlt.vue | 12 + .../examples/FwbAvatarExampleBordered.vue | 17 + .../avatar/examples/FwbAvatarExampleIcon.vue | 44 + .../examples/FwbAvatarExampleInitials.vue | 13 + .../examples/FwbAvatarExamplePlaceholder.vue | 10 + .../avatar/examples/FwbAvatarExampleSize.vue | 28 + .../avatar/examples/FwbAvatarExampleStack.vue | 61 + .../examples/FwbAvatarExampleStatus.vue | 24 + .../FwbAvatarExampleStatusPosition.vue | 52 + .../avatar/examples/StackedAvatarsExample.vue | 21 - docs/components/badge.md | 149 +- .../badge/examples/BadgeIconsExample.vue | 19 - .../badge/examples/BadgeLinksExample.vue | 9 - .../badge/examples/BadgeOnlyIconsExample.vue | 22 - .../badge/examples/BadgeSizesExample.vue | 15 - .../badge/examples/BadgeTypesExample.vue | 15 - .../badge/examples/FwbBadgeExample.vue | 32 + .../badge/examples/FwbBadgeExampleIcon.vue | 43 + .../examples/FwbBadgeExampleIconOnly.vue | 56 + .../badge/examples/FwbBadgeExampleLink.vue | 17 + .../badge/examples/FwbBadgeExampleSize.vue | 53 + docs/components/breadcrumb.md | 106 +- .../examples/BreadcrumbCustomIconsExample.vue | 26 - .../breadcrumb/examples/BreadcrumbExample.vue | 18 - .../examples/BreadcrumbSolidExample.vue | 18 - .../examples/FwbBreadcrumbExample.vue | 22 + .../FwbBreadcrumbExampleCustomIcons.vue | 64 + .../examples/FwbBreadcrumbExampleSolid.vue | 22 + docs/components/button-group.md | 56 +- docs/components/button.md | 567 ++- .../button/examples/ButtonColorExample.vue | 16 - .../button/examples/ButtonDisabledExample.vue | 12 - .../examples/ButtonGradientDuotoneExample.vue | 14 - .../ButtonGradientMonochromeExample.vue | 15 - .../examples/ButtonGradientShadowExample.vue | 18 - .../button/examples/ButtonIconExample.vue | 22 - .../button/examples/ButtonLinkExample.vue | 17 +- .../button/examples/ButtonLoadingExample.vue | 32 - .../examples/ButtonOutlineColorExample.vue | 13 - .../examples/ButtonOutlineGradientExample.vue | 14 - .../button/examples/ButtonPillExample.vue | 15 - .../button/examples/ButtonPrefixExample.vue | 13 - .../button/examples/ButtonSizeExample.vue | 12 - .../button/examples/ButtonSquareExample.vue | 19 - .../button/examples/ButtonSuffixExample.vue | 13 - .../button/examples/FwbButtonExampleColor.vue | 35 + .../examples/FwbButtonExampleDisabled.vue | 40 + .../FwbButtonExampleGradientDuotone.vue | 29 + .../FwbButtonExampleGradientMonochrome.vue | 32 + .../button/examples/FwbButtonExampleLink.vue | 21 + .../examples/FwbButtonExampleLoading.vue | 68 + .../examples/FwbButtonExampleOutline.vue | 44 + .../FwbButtonExampleOutlineGradient.vue | 50 + .../button/examples/FwbButtonExamplePill.vue | 56 + .../examples/FwbButtonExampleShadow.vue | 74 + .../button/examples/FwbButtonExampleSize.vue | 23 + .../button/examples/FwbButtonExampleSlot.vue | 65 + .../examples/FwbButtonExampleSlotPrefix.vue | 21 + .../examples/FwbButtonExampleSlotSuffix.vue | 25 + .../examples/FwbButtonExampleSquare.vue | 72 + .../examples/ButtonGroupBasicExample.vue | 13 - .../examples/ButtonGroupIconExample.vue | 18 - .../examples/FwbButtonGroupExample.vue | 20 + .../examples/FwbButtonGroupExampleIcon.vue | 34 + docs/components/card.md | 92 +- .../card/examples/CardDefaultExample.vue | 12 - .../card/examples/CardHorizontalExample.vue | 11 - .../card/examples/CardImageExample.vue | 11 - .../card/examples/FwbCardExample.vue | 18 + .../examples/FwbCardExampleHorizontal.vue | 22 + .../card/examples/FwbCardExampleImage.vue | 22 + docs/components/carousel.md | 256 +- .../CarouselAutomaticSlideExample.vue | 8 - .../examples/CarouselDefaultExample.vue | 8 - .../carousel/examples/CarouselExample.vue | 8 - .../examples/CarouselNoControlsExample.vue | 8 - .../examples/CarouselNoIndicatorsExample.vue | 8 - .../examples/CarouselPicturesExample.vue | 30 - .../examples/CarouselSlideExample.vue | 8 - .../examples/CarouselSlideIntervalExample.vue | 8 - .../carousel/examples/FwbCarouselExample.vue | 24 + .../examples/FwbCarouselExamplePictures.vue | 32 + .../examples/FwbCarouselExampleSlide.vue | 27 + .../FwbCarouselExampleSlideInterval.vue | 28 + .../FwbCarouselExampleWithoutControls.vue | 27 + .../FwbCarouselExampleWithoutIndicators.vue | 27 + docs/components/checkbox.md | 84 +- .../checkbox/examples/CheckboxChecked.vue | 12 - .../checkbox/examples/CheckboxDefault.vue | 12 - .../checkbox/examples/CheckboxDisabled.vue | 12 - .../checkbox/examples/CheckboxLink.vue | 14 - .../checkbox/examples/FwbCheckboxExample.vue | 15 + .../examples/FwbCheckboxExampleChecked.vue | 15 + .../examples/FwbCheckboxExampleDisabled.vue | 16 + .../examples/FwbCheckboxExampleLink.vue | 14 + docs/components/dropdown.md | 113 +- .../examples/DropdownListGroupExample.vue | 53 - .../examples/DropdownPlacementExample.vue | 27 - .../examples/DropdownTriggerExample.vue | 56 - .../examples/FwbDropdownExampleListGroup.vue | 24 + .../examples/FwbDropdownExamplePlacement.vue | 37 + .../examples/FwbDropdownExampleTrigger.vue | 27 + docs/components/fileInput.md | 120 +- .../fileInput/examples/FileInpDefault.vue | 12 - .../fileInput/examples/FileInpDropZone.vue | 12 - .../fileInput/examples/FileInpHelper.vue | 14 - .../fileInput/examples/FileInpSize.vue | 13 - .../examples/FwbFileInputExample.vue | 15 + .../examples/FwbFileInputExampleDropZone.vue | 15 + .../examples/FwbFileInputExampleHelper.vue | 19 + .../examples/FwbFileInputExampleMultiple.vue | 27 + .../examples/FwbFileInputExampleSize.vue | 26 + .../fileInput/examples/MultipleFile.vue | 17 - .../FlowbiteThemableExampleButton.vue | 30 + .../FlowbiteThemableExampleDropdown.vue | 52 + .../examples/FlowbiteThemableExampleTabs.vue | 89 + .../button/FlowbiteThemableButtonExample.vue | 25 - .../FlowbiteThemableDropdownExample.vue | 29 - .../FlowbiteThemableTabsDefaultExample.vue | 34 - .../tabs/FlowbiteThemableTabsPillsExample.vue | 34 - .../FlowbiteThemableTabsUnderlineExample.vue | 34 - .../flowbiteThemable/flowbiteThemable.md | 102 +- docs/components/footer.md | 461 ++- .../footer/examples/FooterExample.vue | 17 - .../examples/FooterSitemapLinksExample.vue | 91 - .../footer/examples/FooterWithLogoExample.vue | 23 - .../footer/examples/FwbFooterExample.vue | 34 + .../examples/FwbFooterExampleSitemapLinks.vue | 233 ++ ...e => FwbFooterExampleSocialMediaIcons.vue} | 152 +- .../examples/FwbFooterExampleSticky.vue | 51 + .../examples/FwbFooterExampleWithLogo.vue | 45 + .../footer/examples/StickyFooterExample.vue | 18 - docs/components/heading.md | 82 +- docs/components/image.md | 80 +- docs/components/input.md | 225 +- .../input/examples/FwbInputExample.vue | 16 + .../examples/FwbInputExampleDisabled.vue | 15 + .../input/examples/FwbInputExampleHelper.vue | 26 + .../input/examples/FwbInputExamplePrefix.vue | 34 + .../examples/FwbInputExampleRequired.vue | 17 + .../input/examples/FwbInputExampleSize.vue | 29 + .../input/examples/FwbInputExampleSuffix.vue | 38 + .../examples/FwbInputExampleValidation.vue | 30 + .../input/examples/InputDisabledExample.vue | 6 - .../input/examples/InputExample.vue | 9 - .../input/examples/InputHelperExample.vue | 15 - .../input/examples/InputPrefixExample.vue | 15 - .../input/examples/InputRequiredExample.vue | 12 - .../input/examples/InputSizeExample.vue | 12 - .../input/examples/InputSuffixExample.vue | 18 - .../input/examples/InputValidationExample.vue | 17 - docs/components/link.md | 35 +- docs/components/list-group.md | 164 +- .../examples/FwbListGroupExample.vue | 25 + .../examples/FwbListGroupExampleDisabled.vue | 66 + .../examples/FwbListGroupExampleHover.vue | 25 + .../examples/FwbListGroupExampleIcon.vue | 66 + .../listGroup/examples/ListGroupExample.vue | 14 - .../examples/ListGroupHoverExample.vue | 14 - .../ListGroupHoverIconDisabledExample.vue | 33 - .../examples/ListGroupHoverIconExample.vue | 33 - docs/components/modal.md | 149 +- .../{ModalExample.vue => FwbModalExample.vue} | 45 +- .../examples/FwbModalExampleEscapable.vue | 13 + .../examples/FwbModalExamplePersistent.vue | 12 + .../modal/examples/FwbModalExampleSize.vue | 32 + .../modal/examples/ModalEscapableExample.vue | 13 - .../modal/examples/ModalPersistentExample.vue | 8 - .../modal/examples/ModalSizeExample.vue | 19 - docs/components/navbar.md | 251 +- .../navbar/examples/FwbNavbarExample.vue | 43 + .../examples/FwbNavbarExampleActionButton.vue | 49 + .../FwbNavbarExampleCustomMobileIcon.vue | 59 + .../navbar/examples/FwbNavbarExampleSolid.vue | 43 + .../examples/NavbarActionButtonExample.vue | 25 - .../NavbarCustomMobileIconExample.vue | 25 - .../navbar/examples/NavbarExample.vue | 22 - .../navbar/examples/NavbarSolidExample.vue | 22 - docs/components/pagination.md | 50 +- .../examples/FwbPaginationExample.vue | 20 + .../FwbPaginationExampleNavigation.vue | 16 + ...mple.vue => FwbPaginationExampleSlots.vue} | 22 +- .../examples/FwbPaginationExampleTable.vue | 25 + .../FwbPaginationExampleWithCustomSlice.vue | 16 + .../FwbPaginationExampleWithCustomText.vue | 17 + .../FwbPaginationExampleWithIcons.vue | 96 + .../pagination/examples/PaginationExample.vue | 12 - .../examples/PaginationNavigationExample.vue | 11 - .../examples/PaginationTableExample.vue | 12 - .../examples/PaginationWithCustomSlice.vue | 11 - .../PaginationWithCustomTextExample.vue | 11 - .../examples/PaginationWithIconsExample.vue | 38 - docs/components/paragraph.md | 88 +- docs/components/progress.md | 117 +- .../progress/examples/FwbProgressExample.vue | 9 + .../examples/FwbProgressExampleColor.vue | 47 + .../FwbProgressExampleLabelInside.vue | 12 + .../FwbProgressExampleLabelOutside.vue | 12 + .../examples/FwbProgressExampleSize.vue | 28 + .../examples/ProgressColorExample.vue | 15 - .../progress/examples/ProgressExample.vue | 8 - .../examples/ProgressInsideLabelExample.vue | 6 - .../examples/ProgressOutsideLabelExample.vue | 6 - .../progress/examples/ProgressSizeExample.vue | 11 - docs/components/radio.md | 277 +- .../radio/examples/BorderedRadio.vue | 17 - .../radio/examples/DefaultRadio.vue | 13 - .../radio/examples/DisabledRadio.vue | 13 - .../radio/examples/FwbRadioExample.vue | 23 + .../examples/FwbRadioExampleBordered.vue | 27 + .../examples/FwbRadioExampleDisabled.vue | 25 + .../radio/examples/FwbRadioExampleInline.vue | 31 + .../radio/examples/FwbRadioExampleLink.vue | 22 + .../radio/examples/FwbRadioExampleList.vue | 49 + .../FwbRadioExampleListHorizontal.vue | 48 + .../radio/examples/HorizontalListRadio.vue | 28 - .../components/radio/examples/InlineRadio.vue | 15 - docs/components/radio/examples/LinkRadio.vue | 12 - docs/components/radio/examples/ListRadio.vue | 28 - docs/components/range.md | 48 +- .../range/examples/DefaultRange.vue | 12 - .../range/examples/DisabledRange.vue | 12 - .../range/examples/FwbRangeExample.vue | 13 + .../examples/FwbRangeExampleDisabled.vue | 16 + .../range/examples/FwbRangeExampleMinMax.vue | 18 + .../range/examples/FwbRangeExampleSize.vue | 28 + .../range/examples/FwbRangeExampleSteps.vue | 17 + .../components/range/examples/MinMaxRange.vue | 12 - docs/components/range/examples/SizeRange.vue | 16 - docs/components/range/examples/StepsRange.vue | 12 - docs/components/rating.md | 121 +- .../rating/examples/FwbRatingExample.vue | 9 + ...tExample.vue => FwbRatingExampleCount.vue} | 15 +- .../examples/FwbRatingExampleStarSizes.vue | 20 + .../examples/FwbRatingExampleWithText.vue | 15 + .../rating/examples/RatingExample.vue | 8 - .../examples/RatingStarSizesExample.vue | 13 - .../rating/examples/RatingWithTextExample.vue | 12 - docs/components/select.md | 114 +- .../select/examples/DisabledSelect.vue | 17 - .../select/examples/FwbSelectExample.vue | 21 + .../examples/FwbSelectExampleDisabled.vue | 23 + .../select/examples/FwbSelectExampleSize.vue | 34 + .../examples/FwbSelectExampleUnderlined.vue | 22 + .../select/examples/SelectExample.vue | 17 - .../components/select/examples/SelectSize.vue | 19 - .../select/examples/UnderlinedSelect.vue | 17 - docs/components/sidebar.md | 208 +- ...taExample.vue => FwbSidebarCtaExample.vue} | 89 +- ...mple.vue => FwbSidebarDropdownExample.vue} | 44 +- ...rLogoExample.vue => FwbSidebarExample.vue} | 71 +- ...Example.vue => FwbSidebarGroupExample.vue} | 106 +- ...rExample.vue => FwbSidebarLogoExample.vue} | 75 +- docs/components/spinner.md | 97 +- .../spinner/examples/FwbSpinnerExample.vue | 9 + .../examples/FwbSpinnerExampleColor.vue | 16 + .../examples/FwbSpinnerExampleSize.vue | 13 + .../spinner/examples/SpinnerBasicExample.vue | 8 - .../spinner/examples/SpinnerColorExample.vue | 15 - .../spinner/examples/SpinnerSizeExample.vue | 12 - docs/components/table.md | 407 +- .../table/examples/FwbTableExample.vue | 62 + .../examples/FwbTableExampleHoverable.vue | 62 + .../table/examples/FwbTableExampleStriped.vue | 62 + .../FwbTableExampleStripedColumns.vue | 60 + .../table/examples/TableExample.vue | 43 - .../table/examples/TableHoverableExample.vue | 43 - .../examples/TableStripedColumnsExample.vue | 43 - .../table/examples/TableStripedExample.vue | 43 - docs/components/tabs.md | 226 +- .../tabs/examples/FwbTabsExample.vue | 41 + .../tabs/examples/FwbTabsExampleDirective.vue | 42 + .../examples/FwbTabsExampleInteraction.vue | 46 + ...ineExample.vue => FwbTabsExamplePills.vue} | 41 +- ...xample.vue => FwbTabsExampleUnderline.vue} | 41 +- .../tabs/examples/TabsDefaultExample.vue | 23 - docs/components/textarea.md | 60 +- .../textarea/examples/CommentTextarea.vue | 27 - .../textarea/examples/DefaultTextarea.vue | 12 - .../textarea/examples/FwbTextareaExample.vue | 17 + .../examples/FwbTextareaExampleComment.vue | 99 + docs/components/timeline.md | 390 +- .../timeline/examples/FwbTimelineExample.vue | 60 + .../examples/FwbTimelineExampleHorizontal.vue | 100 + .../examples/FwbTimelineExampleWithIcons.vue | 96 + .../timeline/examples/TimelineExample.vue | 52 - .../examples/TimelineHorizontalExample.vue | 55 - .../examples/TimelineWithIconsExample.vue | 55 - docs/components/toast.md | 219 +- .../toast/examples/FwbToastExample.vue | 20 + .../examples/FwbToastExampleClosable.vue | 29 + .../toast/examples/FwbToastExampleDivide.vue | 29 + .../toast/examples/FwbToastExampleIcon.vue | 63 + .../examples/FwbToastExampleInteractive.vue | 43 + .../toast/examples/FwbToastExampleMessage.vue | 30 + .../toast/examples/ToastClosableExample.vue | 19 - .../toast/examples/ToastDivideExample.vue | 19 - .../toast/examples/ToastIconExample.vue | 36 - .../examples/ToastInteractiveExample.vue | 20 - .../toast/examples/ToastMessageExample.vue | 15 - .../toast/examples/ToastTypeExample.vue | 19 - .../examples/FwbToastProviderExample.vue | 40 + ...d.vue => FwbToastProviderExampleChild.vue} | 47 +- .../examples/ToastProviderExample.vue | 22 - .../toastProvider/examples/UpdateToast.vue | 40 +- .../components/toastProvider/toastProvider.md | 9 +- docs/components/toggle.md | 81 +- .../toggle/examples/CheckedToggle.vue | 12 - .../toggle/examples/ColorsToggle.vue | 22 - .../toggle/examples/DefaultToggle.vue | 12 - .../toggle/examples/DisabledToggle.vue | 12 - .../toggle/examples/FwbToggleExample.vue | 15 + .../examples/FwbToggleExampleChecked.vue | 15 + .../examples/FwbToggleExampleColors.vue | 46 + .../examples/FwbToggleExampleDisabled.vue | 16 + .../toggle/examples/FwbToggleExampleSize.vue | 20 + .../components/toggle/examples/SizeToggle.vue | 12 - docs/components/tooltip.md | 263 +- .../tooltip/examples/FwbTooltipExample.vue | 18 + .../examples/FwbTooltipExamplePosition.vue | 48 + .../examples/FwbTooltipExampleStyle.vue | 28 + .../examples/FwbTooltipExampleTrigger.vue | 28 + .../tooltip/examples/TooltipExample.vue | 19 - .../examples/TooltipPositionExample.vue | 64 - .../tooltip/examples/TooltipStyleExample.vue | 36 - .../examples/TooltipTriggerExample.vue | 45 - .../typography/heading/FwbHExampleColor.vue | 9 + .../typography/heading/FwbHExampleCustom.vue | 9 + .../typography/heading/FwbHExampleLevel1.vue | 9 + .../typography/heading/FwbHExampleLevel2.vue | 9 + .../typography/heading/FwbHExampleLevel3.vue | 9 + .../typography/heading/FwbHExampleLevel4.vue | 9 + .../typography/heading/FwbHExampleLevel5.vue | 9 + .../typography/heading/FwbHExampleLevel6.vue | 9 + docs/components/typography/heading/H1.vue | 7 - docs/components/typography/heading/H2.vue | 7 - docs/components/typography/heading/H3.vue | 7 - docs/components/typography/heading/H4.vue | 7 - docs/components/typography/heading/H5.vue | 7 - docs/components/typography/heading/H6.vue | 7 - docs/components/typography/heading/HColor.vue | 7 - .../components/typography/heading/HCustom.vue | 7 - .../typography/image/FwbImgExample.vue | 10 + .../typography/image/FwbImgExampleAlign.vue | 12 + .../typography/image/FwbImgExampleCaption.vue | 11 + .../typography/image/FwbImgExampleCustom.vue | 13 + ...ImgBlur.vue => FwbImgExampleGrayscale.vue} | 8 +- .../typography/image/FwbImgExampleSize.vue | 11 + docs/components/typography/image/Img.vue | 7 - docs/components/typography/image/ImgAlign.vue | 7 - docs/components/typography/image/ImgCap.vue | 7 - .../components/typography/image/ImgCustom.vue | 7 - docs/components/typography/image/ImgSize.vue | 7 - docs/components/typography/link/A.vue | 7 - docs/components/typography/link/ACustom.vue | 7 - docs/components/typography/link/APara.vue | 11 - .../typography/link/FwbAExample.vue | 9 + .../typography/link/FwbAExampleCustom.vue | 14 + .../typography/link/FwbAExampleParagraph.vue | 16 + .../typography/p/{P.vue => FwbPExample.vue} | 10 +- .../typography/p/FwbPExampleAlign.vue | 26 + .../p/{PCustom.vue => FwbPExampleCustom.vue} | 9 +- .../typography/p/FwbPExampleWeight.vue | 17 + docs/components/typography/p/PAlign.vue | 12 - docs/components/typography/p/PWeight.vue | 16 - docs/pages/getting-started.md | 17 +- package-lock.json | 3380 +++++++++++++---- package.json | 14 +- src/components/Avatar/Avatar.vue | 71 - .../Avatar/StackedAvatarsCounter.vue | 17 - .../Avatar/composables/useAvatarClasses.ts | 112 - src/components/Breadcrumb/BreadcrumbItem.vue | 35 - .../composables/useBreadcrumbClasses.ts | 35 - .../composables/useBreadcrumbItemClasses.ts | 26 - .../Button/composables/useButtonSpinner.ts | 44 - src/components/Button/tests/Button.spec.ts | 45 - .../Card/composables/useCardClasses.ts | 34 - src/components/Carousel/Carousel.vue | 124 - src/components/Carousel/types.ts | 4 - src/components/Dropdown/Dropdown.css | 41 - src/components/Dropdown/Dropdown.vue | 78 - .../composables/useDropdownClasses.ts | 67 - .../composables/useFileInputClasses.ts | 40 - .../FwbAccordion.vue} | 4 +- .../FwbAccordionContent.vue} | 10 +- .../FwbAccordionHeader.vue} | 32 +- .../FwbAccordionPanel.vue} | 9 +- .../composables/useAccordionContentClasses.ts | 5 +- .../composables/useAccordionHeaderClasses.ts | 5 +- .../composables/useAccordionState.ts | 9 +- .../{Accordion => FwbAccordion}/types.ts | 4 + .../Alert.vue => FwbAlert/FwbAlert.vue} | 64 +- src/components/{Alert => FwbAlert}/types.ts | 2 +- src/components/FwbAvatar/FwbAvatar.vue | 108 + .../FwbAvatarStack.vue} | 0 .../FwbAvatar/FwbAvatarStackCounter.vue | 19 + .../FwbAvatar/composables/useAvatarClasses.ts | 113 + src/components/{Avatar => FwbAvatar}/types.ts | 0 .../Badge.vue => FwbBadge/FwbBadge.vue} | 11 +- .../composables/useBadgeClasses.ts | 6 +- src/components/{Badge => FwbBadge}/types.ts | 0 .../FwbBreadcrumb.vue} | 10 +- .../FwbBreadcrumb/FwbBreadcrumbItem.vue | 55 + .../composables/useBreadcrumbClasses.ts | 28 + .../composables/useBreadcrumbItemClasses.ts | 24 + .../{Breadcrumb => FwbBreadcrumb}/types.ts | 0 .../Button.vue => FwbButton/FwbButton.vue} | 74 +- .../composables/useButtonClasses.ts | 28 +- .../FwbButton/composables/useButtonSpinner.ts | 51 + src/components/FwbButton/tests/Button.spec.ts | 45 + src/components/{Button => FwbButton}/types.ts | 2 +- .../FwbButtonGroup.vue} | 10 +- .../{Card/TheCard.vue => FwbCard/FwbCard.vue} | 19 +- .../FwbCard/composables/useCardClasses.ts | 33 + src/components/{Card => FwbCard}/types.ts | 0 src/components/FwbCarousel/FwbCarousel.vue | 164 + src/components/FwbCarousel/types.ts | 4 + .../FwbCheckbox.vue} | 31 +- .../composables/useCheckboxClasses.ts | 15 +- src/components/FwbDropdown/FwbDropdown.vue | 150 + .../composables/useDropdownClasses.ts | 67 + .../{Dropdown => FwbDropdown}/types.ts | 2 +- .../FwbFileInput.vue} | 67 +- .../composables/useFileInputClasses.ts | 28 + .../Footer.vue => FwbFooter/FwbFooter.vue} | 31 +- .../FwbFooterBrand.vue} | 41 +- .../FwbFooterCopyright.vue} | 34 +- .../FwbFooterIcon.vue} | 35 +- .../FwbFooterLink.vue} | 34 +- .../FwbFooterLinkGroup.vue} | 17 +- src/components/FwbInput/FwbInput.vue | 86 + .../composables/useInputClasses.ts | 37 +- src/components/FwbInput/types.ts | 10 + .../FwbListGroup.vue} | 1 + .../FwbListGroupItem.vue} | 17 +- .../composables/useListGroupClasses.ts | 18 + .../composables/useListGroupItemClasses.ts | 27 + src/components/FwbModal/FwbModal.vue | 114 + src/components/{Modal => FwbModal}/types.ts | 0 src/components/FwbNavbar/FwbNavbar.vue | 83 + .../FwbNavbarCollapse.vue} | 17 +- src/components/FwbNavbar/FwbNavbarLink.ts | 0 src/components/FwbNavbar/FwbNavbarLink.vue | 50 + src/components/FwbNavbar/FwbNavbarLogo.vue | 38 + .../FwbPagination.vue} | 119 +- .../{Pagination => FwbPagination}/types.ts | 0 src/components/FwbProgress/FwbProgress.vue | 61 + .../composables/useProgressClasses.ts | 31 +- .../{Progress => FwbProgress}/types.ts | 4 +- src/components/FwbRadio/FwbRadio.vue | 54 + .../FwbRadio/composables/useRadioClasses.ts | 0 src/components/FwbRange/FwbRange.vue | 66 + .../composables/useRangeClasses.ts | 21 +- .../Rating.vue => FwbRating/FwbRating.vue} | 66 +- .../composables/useRatingClasses.ts | 19 +- src/components/FwbRating/types.ts | 1 + src/components/FwbSelect/FwbSelect.vue | 86 + .../FwbSelect/composables/useSelectClasses.ts | 0 src/components/{Select => FwbSelect}/types.ts | 2 +- .../Sidebar.vue => FwbSidebar/FwbSidebar.vue} | 6 +- .../FwbSidebarCta.vue} | 61 +- .../FwbSidebarDropdownItem.vue} | 38 +- .../FwbSidebarItem.vue} | 27 +- .../FwbSidebarItemGroup.vue} | 12 +- .../FwbSidebarLogo.vue} | 23 +- src/components/FwbSpinner/FwbSpinner.vue | 36 + .../composables/useSpinnerClasses.ts | 53 + src/components/FwbSpinner/types.ts | 3 + .../Table.vue => FwbTable/FwbTable.vue} | 5 +- src/components/FwbTable/FwbTableBody.vue | 5 + .../FwbTableCell.vue} | 6 +- .../FwbTableHead.vue} | 4 +- src/components/FwbTable/FwbTableHeadCell.vue | 14 + .../TableRow.vue => FwbTable/FwbTableRow.vue} | 5 +- .../composables/useTableCellClasses.ts | 18 +- .../composables/useTableHeadCellClasses.ts | 16 + .../composables/useTableRowClasses.ts | 20 +- .../Tab/Tab.vue => FwbTabs/FwbTab.vue} | 38 +- .../TabPane.vue => FwbTabs/FwbTabPane.vue} | 27 +- .../{Tabs/Tabs.vue => FwbTabs/FwbTabs.vue} | 87 +- .../FwbTabs/composables/useTabClasses.ts | 75 + .../FwbTabs/composables/useTabsClasses.ts | 35 + .../{Tabs => FwbTabs}/injection/config.ts | 4 +- src/components/FwbTabs/types.ts | 1 + .../FwbTextarea.vue} | 30 +- .../composables/useTextareaClasses.ts | 25 + .../FwbTimeline.vue} | 21 +- .../FwbTimeline/FwbTimelineBody.vue | 5 + .../FwbTimelineContent.vue} | 4 +- .../FwbTimelineItem.vue} | 2 +- .../FwbTimelinePoint.vue} | 33 +- .../FwbTimeline/FwbTimelineTime.vue | 5 + .../FwbTimeline/FwbTimelineTitle.vue | 5 + src/components/FwbToast/FwbToast.vue | 127 + src/components/FwbToast/FwbToastProvider.vue | 169 + .../FwbToast/composables/useToast.ts | 38 + .../FwbToast/composables/useToastClasses.ts | 58 + .../injection/config.ts | 0 src/components/FwbToast/types.ts | 24 + .../Toggle.vue => FwbToggle/FwbToggle.vue} | 39 +- .../composables/useToggleClasses.ts | 33 +- .../Tooltip.vue => FwbTooltip/FwbTooltip.vue} | 20 +- .../{Tooltip => FwbTooltip}/types.ts | 4 +- src/components/Input/Input.vue | 81 - src/components/Input/types.ts | 6 - .../composables/useListGroupItemClasses.ts | 29 - .../composables/useListGroupClasses.ts | 20 - src/components/Modal/Modal.vue | 87 - src/components/Navbar/Navbar.vue | 64 - src/components/Navbar/NavbarLink.ts | 61 - src/components/Navbar/NavbarLogo.ts | 60 - src/components/Progress/Progress.vue | 53 - src/components/Radio/Radio.vue | 40 - .../Radio/composables/useRadioClasses.ts | 20 - src/components/Range/Range.vue | 44 - src/components/Rating/types.ts | 1 - src/components/Select/Select.vue | 49 - .../Select/composables/useSelectClasses.ts | 43 - src/components/Spinner/Spinner.vue | 25 - .../Spinner/composables/useSpinnerClasses.ts | 61 - src/components/Spinner/types.ts | 2 - src/components/Table/TableBody.vue | 7 - src/components/Table/TableHeadCell.vue | 10 - .../composables/useTableHeadCellClasses.ts | 20 - .../TabPane/composables/useTabClasses.ts | 63 - .../Tabs/composables/useTabsClasses.ts | 34 - src/components/Tabs/types.ts | 1 - .../composables/useTextareaClasses.ts | 33 - src/components/Timeline/TimelineBody.vue | 3 - src/components/Timeline/TimelineTime.vue | 5 - src/components/Timeline/TimelineTitle.vue | 5 - src/components/Toast/Toast.vue | 62 - .../ToastProvider/ToastProvider.css | 49 - .../ToastProvider/ToastProvider.vue | 105 - .../ToastProvider/composables/useToast.ts | 29 - .../Toast/components/ToastProvider/types.ts | 22 - .../Toast/composables/useToastClasses.ts | 58 - src/components/Toast/types.ts | 2 - src/components/Typography/{A.vue => FwbA.vue} | 5 +- .../{Heading.vue => FwbHeading.vue} | 26 +- .../Typography/{Img.vue => FwbImg.vue} | 22 +- src/components/Typography/{P.vue => FwbP.vue} | 0 .../FlowbiteThemable/FlowbiteThemable.vue | 19 +- .../FlowbiteThemableChild.vue | 36 + .../FlowbiteThemableChild.vue | 40 - .../useFlowbiteThemableChildClasses.ts | 37 - .../components/FlowbiteThemableChild/types.ts | 1 - .../composables/useFlowbiteThemable.ts | 96 +- .../useFlowbiteThemableChildClasses.ts | 62 + .../FlowbiteThemable/injection/config.ts | 2 +- .../utils/FlowbiteThemable/types.d.ts | 5 - .../utils/FlowbiteThemable/types.ts | 7 + .../FwbSlotListener.vue} | 35 +- src/components/utils/FwbSlotListener/types.ts | 9 + src/components/utils/SlotListener/types.ts | 10 - src/composables.ts | 6 +- src/composables/useClasses.ts | 4 +- src/index.ts | 156 +- src/utils/flatten.ts | 68 +- src/utils/getFirstSlotNode.ts | 32 +- src/utils/simplifyTailwindClasses.ts | 66 +- vitest.config.ts | 16 +- 600 files changed, 16349 insertions(+), 10239 deletions(-) delete mode 100644 docs/components/accordion/examples/AccordionAlwaysOpenExample.vue delete mode 100644 docs/components/accordion/examples/AccordionExample.vue delete mode 100644 docs/components/accordion/examples/AccordionFlushExample.vue delete mode 100644 docs/components/accordion/examples/AccordionOpenFirstItemExample.vue delete mode 100644 docs/components/accordion/examples/AccordionStyledHeadersExample.vue create mode 100644 docs/components/accordion/examples/FwbAccordionExample.vue create mode 100644 docs/components/accordion/examples/FwbAccordionExampleAlwaysOpen.vue create mode 100644 docs/components/accordion/examples/FwbAccordionExampleFirstItemClosed.vue create mode 100644 docs/components/accordion/examples/FwbAccordionExampleFlush.vue create mode 100644 docs/components/accordion/examples/FwbAccordionExampleStyledHeaders.vue delete mode 100644 docs/components/alert/examples/AlertBorderAccentExample.vue delete mode 100644 docs/components/alert/examples/AlertBorderExample.vue delete mode 100644 docs/components/alert/examples/AlertClosableExample.vue delete mode 100644 docs/components/alert/examples/AlertIconExample.vue delete mode 100644 docs/components/alert/examples/AlertTypeExample.vue create mode 100644 docs/components/alert/examples/FwbAlertExampleBorder.vue create mode 100644 docs/components/alert/examples/FwbAlertExampleBorderAccent.vue rename docs/components/alert/examples/{AlertCustomContentExample.vue => FwbAlertExampleCustomContent.vue} (72%) create mode 100644 docs/components/alert/examples/FwbAlertExampleDismissable.vue create mode 100644 docs/components/alert/examples/FwbAlertExampleIcon.vue rename docs/components/alert/examples/{AlertTitleExample.vue => FwbAlertExampleList.vue} (79%) create mode 100644 docs/components/alert/examples/FwbAlertExampleType.vue delete mode 100644 docs/components/avatar/examples/AvatarAlternativePlaceholderExample.vue delete mode 100644 docs/components/avatar/examples/AvatarAlternativeTextExample.vue delete mode 100644 docs/components/avatar/examples/AvatarBorderedExample.vue delete mode 100644 docs/components/avatar/examples/AvatarDotIndicatorExample.vue delete mode 100644 docs/components/avatar/examples/AvatarDotIndicatorPositionExample.vue delete mode 100644 docs/components/avatar/examples/AvatarExample.vue delete mode 100644 docs/components/avatar/examples/AvatarPlaceholderExample.vue delete mode 100644 docs/components/avatar/examples/AvatarPlaceholderInitialsExample.vue delete mode 100644 docs/components/avatar/examples/AvatarSizeExample.vue create mode 100644 docs/components/avatar/examples/FwbAvatarExample.vue create mode 100644 docs/components/avatar/examples/FwbAvatarExampleAlt.vue create mode 100644 docs/components/avatar/examples/FwbAvatarExampleBordered.vue create mode 100644 docs/components/avatar/examples/FwbAvatarExampleIcon.vue create mode 100644 docs/components/avatar/examples/FwbAvatarExampleInitials.vue create mode 100644 docs/components/avatar/examples/FwbAvatarExamplePlaceholder.vue create mode 100644 docs/components/avatar/examples/FwbAvatarExampleSize.vue create mode 100644 docs/components/avatar/examples/FwbAvatarExampleStack.vue create mode 100644 docs/components/avatar/examples/FwbAvatarExampleStatus.vue create mode 100644 docs/components/avatar/examples/FwbAvatarExampleStatusPosition.vue delete mode 100644 docs/components/avatar/examples/StackedAvatarsExample.vue delete mode 100644 docs/components/badge/examples/BadgeIconsExample.vue delete mode 100644 docs/components/badge/examples/BadgeLinksExample.vue delete mode 100644 docs/components/badge/examples/BadgeOnlyIconsExample.vue delete mode 100644 docs/components/badge/examples/BadgeSizesExample.vue delete mode 100644 docs/components/badge/examples/BadgeTypesExample.vue create mode 100644 docs/components/badge/examples/FwbBadgeExample.vue create mode 100644 docs/components/badge/examples/FwbBadgeExampleIcon.vue create mode 100644 docs/components/badge/examples/FwbBadgeExampleIconOnly.vue create mode 100644 docs/components/badge/examples/FwbBadgeExampleLink.vue create mode 100644 docs/components/badge/examples/FwbBadgeExampleSize.vue delete mode 100644 docs/components/breadcrumb/examples/BreadcrumbCustomIconsExample.vue delete mode 100644 docs/components/breadcrumb/examples/BreadcrumbExample.vue delete mode 100644 docs/components/breadcrumb/examples/BreadcrumbSolidExample.vue create mode 100644 docs/components/breadcrumb/examples/FwbBreadcrumbExample.vue create mode 100644 docs/components/breadcrumb/examples/FwbBreadcrumbExampleCustomIcons.vue create mode 100644 docs/components/breadcrumb/examples/FwbBreadcrumbExampleSolid.vue delete mode 100644 docs/components/button/examples/ButtonColorExample.vue delete mode 100644 docs/components/button/examples/ButtonDisabledExample.vue delete mode 100644 docs/components/button/examples/ButtonGradientDuotoneExample.vue delete mode 100644 docs/components/button/examples/ButtonGradientMonochromeExample.vue delete mode 100644 docs/components/button/examples/ButtonGradientShadowExample.vue delete mode 100644 docs/components/button/examples/ButtonIconExample.vue delete mode 100644 docs/components/button/examples/ButtonLoadingExample.vue delete mode 100644 docs/components/button/examples/ButtonOutlineColorExample.vue delete mode 100644 docs/components/button/examples/ButtonOutlineGradientExample.vue delete mode 100644 docs/components/button/examples/ButtonPillExample.vue delete mode 100644 docs/components/button/examples/ButtonPrefixExample.vue delete mode 100644 docs/components/button/examples/ButtonSizeExample.vue delete mode 100644 docs/components/button/examples/ButtonSquareExample.vue delete mode 100644 docs/components/button/examples/ButtonSuffixExample.vue create mode 100644 docs/components/button/examples/FwbButtonExampleColor.vue create mode 100644 docs/components/button/examples/FwbButtonExampleDisabled.vue create mode 100644 docs/components/button/examples/FwbButtonExampleGradientDuotone.vue create mode 100644 docs/components/button/examples/FwbButtonExampleGradientMonochrome.vue create mode 100644 docs/components/button/examples/FwbButtonExampleLink.vue create mode 100644 docs/components/button/examples/FwbButtonExampleLoading.vue create mode 100644 docs/components/button/examples/FwbButtonExampleOutline.vue create mode 100644 docs/components/button/examples/FwbButtonExampleOutlineGradient.vue create mode 100644 docs/components/button/examples/FwbButtonExamplePill.vue create mode 100644 docs/components/button/examples/FwbButtonExampleShadow.vue create mode 100644 docs/components/button/examples/FwbButtonExampleSize.vue create mode 100644 docs/components/button/examples/FwbButtonExampleSlot.vue create mode 100644 docs/components/button/examples/FwbButtonExampleSlotPrefix.vue create mode 100644 docs/components/button/examples/FwbButtonExampleSlotSuffix.vue create mode 100644 docs/components/button/examples/FwbButtonExampleSquare.vue delete mode 100644 docs/components/buttonGroup/examples/ButtonGroupBasicExample.vue delete mode 100644 docs/components/buttonGroup/examples/ButtonGroupIconExample.vue create mode 100644 docs/components/buttonGroup/examples/FwbButtonGroupExample.vue create mode 100644 docs/components/buttonGroup/examples/FwbButtonGroupExampleIcon.vue delete mode 100644 docs/components/card/examples/CardDefaultExample.vue delete mode 100644 docs/components/card/examples/CardHorizontalExample.vue delete mode 100644 docs/components/card/examples/CardImageExample.vue create mode 100644 docs/components/card/examples/FwbCardExample.vue create mode 100644 docs/components/card/examples/FwbCardExampleHorizontal.vue create mode 100644 docs/components/card/examples/FwbCardExampleImage.vue delete mode 100644 docs/components/carousel/examples/CarouselAutomaticSlideExample.vue delete mode 100644 docs/components/carousel/examples/CarouselDefaultExample.vue delete mode 100644 docs/components/carousel/examples/CarouselExample.vue delete mode 100644 docs/components/carousel/examples/CarouselNoControlsExample.vue delete mode 100644 docs/components/carousel/examples/CarouselNoIndicatorsExample.vue delete mode 100644 docs/components/carousel/examples/CarouselPicturesExample.vue delete mode 100644 docs/components/carousel/examples/CarouselSlideExample.vue delete mode 100644 docs/components/carousel/examples/CarouselSlideIntervalExample.vue create mode 100644 docs/components/carousel/examples/FwbCarouselExample.vue create mode 100644 docs/components/carousel/examples/FwbCarouselExamplePictures.vue create mode 100644 docs/components/carousel/examples/FwbCarouselExampleSlide.vue create mode 100644 docs/components/carousel/examples/FwbCarouselExampleSlideInterval.vue create mode 100644 docs/components/carousel/examples/FwbCarouselExampleWithoutControls.vue create mode 100644 docs/components/carousel/examples/FwbCarouselExampleWithoutIndicators.vue delete mode 100644 docs/components/checkbox/examples/CheckboxDisabled.vue delete mode 100644 docs/components/checkbox/examples/CheckboxLink.vue create mode 100644 docs/components/checkbox/examples/FwbCheckboxExample.vue create mode 100644 docs/components/checkbox/examples/FwbCheckboxExampleChecked.vue create mode 100644 docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue create mode 100644 docs/components/checkbox/examples/FwbCheckboxExampleLink.vue delete mode 100644 docs/components/dropdown/examples/DropdownListGroupExample.vue delete mode 100644 docs/components/dropdown/examples/DropdownPlacementExample.vue delete mode 100644 docs/components/dropdown/examples/DropdownTriggerExample.vue create mode 100644 docs/components/dropdown/examples/FwbDropdownExampleListGroup.vue create mode 100644 docs/components/dropdown/examples/FwbDropdownExamplePlacement.vue create mode 100644 docs/components/dropdown/examples/FwbDropdownExampleTrigger.vue delete mode 100644 docs/components/fileInput/examples/FileInpDefault.vue delete mode 100644 docs/components/fileInput/examples/FileInpDropZone.vue delete mode 100644 docs/components/fileInput/examples/FileInpHelper.vue delete mode 100644 docs/components/fileInput/examples/FileInpSize.vue create mode 100644 docs/components/fileInput/examples/FwbFileInputExample.vue create mode 100644 docs/components/fileInput/examples/FwbFileInputExampleDropZone.vue create mode 100644 docs/components/fileInput/examples/FwbFileInputExampleHelper.vue create mode 100644 docs/components/fileInput/examples/FwbFileInputExampleMultiple.vue create mode 100644 docs/components/fileInput/examples/FwbFileInputExampleSize.vue delete mode 100644 docs/components/fileInput/examples/MultipleFile.vue create mode 100644 docs/components/flowbiteThemable/examples/FlowbiteThemableExampleButton.vue create mode 100644 docs/components/flowbiteThemable/examples/FlowbiteThemableExampleDropdown.vue create mode 100644 docs/components/flowbiteThemable/examples/FlowbiteThemableExampleTabs.vue delete mode 100644 docs/components/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue delete mode 100644 docs/components/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue delete mode 100644 docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue delete mode 100644 docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue delete mode 100644 docs/components/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue delete mode 100644 docs/components/footer/examples/FooterExample.vue delete mode 100644 docs/components/footer/examples/FooterSitemapLinksExample.vue delete mode 100644 docs/components/footer/examples/FooterWithLogoExample.vue create mode 100644 docs/components/footer/examples/FwbFooterExample.vue create mode 100644 docs/components/footer/examples/FwbFooterExampleSitemapLinks.vue rename docs/components/footer/examples/{FooterSocialMediaIconsExample.vue => FwbFooterExampleSocialMediaIcons.vue} (68%) create mode 100644 docs/components/footer/examples/FwbFooterExampleSticky.vue create mode 100644 docs/components/footer/examples/FwbFooterExampleWithLogo.vue delete mode 100644 docs/components/footer/examples/StickyFooterExample.vue create mode 100644 docs/components/input/examples/FwbInputExample.vue create mode 100644 docs/components/input/examples/FwbInputExampleDisabled.vue create mode 100644 docs/components/input/examples/FwbInputExampleHelper.vue create mode 100644 docs/components/input/examples/FwbInputExamplePrefix.vue create mode 100644 docs/components/input/examples/FwbInputExampleRequired.vue create mode 100644 docs/components/input/examples/FwbInputExampleSize.vue create mode 100644 docs/components/input/examples/FwbInputExampleSuffix.vue create mode 100644 docs/components/input/examples/FwbInputExampleValidation.vue delete mode 100644 docs/components/input/examples/InputDisabledExample.vue delete mode 100644 docs/components/input/examples/InputExample.vue delete mode 100644 docs/components/input/examples/InputHelperExample.vue delete mode 100644 docs/components/input/examples/InputPrefixExample.vue delete mode 100644 docs/components/input/examples/InputRequiredExample.vue delete mode 100644 docs/components/input/examples/InputSizeExample.vue delete mode 100644 docs/components/input/examples/InputSuffixExample.vue delete mode 100644 docs/components/input/examples/InputValidationExample.vue create mode 100644 docs/components/listGroup/examples/FwbListGroupExample.vue create mode 100644 docs/components/listGroup/examples/FwbListGroupExampleDisabled.vue create mode 100644 docs/components/listGroup/examples/FwbListGroupExampleHover.vue create mode 100644 docs/components/listGroup/examples/FwbListGroupExampleIcon.vue delete mode 100644 docs/components/listGroup/examples/ListGroupExample.vue delete mode 100644 docs/components/listGroup/examples/ListGroupHoverExample.vue delete mode 100644 docs/components/listGroup/examples/ListGroupHoverIconDisabledExample.vue delete mode 100644 docs/components/listGroup/examples/ListGroupHoverIconExample.vue rename docs/components/modal/examples/{ModalExample.vue => FwbModalExample.vue} (51%) create mode 100644 docs/components/modal/examples/FwbModalExampleEscapable.vue create mode 100644 docs/components/modal/examples/FwbModalExamplePersistent.vue create mode 100644 docs/components/modal/examples/FwbModalExampleSize.vue delete mode 100644 docs/components/modal/examples/ModalEscapableExample.vue delete mode 100644 docs/components/modal/examples/ModalPersistentExample.vue delete mode 100644 docs/components/modal/examples/ModalSizeExample.vue create mode 100644 docs/components/navbar/examples/FwbNavbarExample.vue create mode 100644 docs/components/navbar/examples/FwbNavbarExampleActionButton.vue create mode 100644 docs/components/navbar/examples/FwbNavbarExampleCustomMobileIcon.vue create mode 100644 docs/components/navbar/examples/FwbNavbarExampleSolid.vue delete mode 100644 docs/components/navbar/examples/NavbarActionButtonExample.vue delete mode 100644 docs/components/navbar/examples/NavbarCustomMobileIconExample.vue delete mode 100644 docs/components/navbar/examples/NavbarExample.vue delete mode 100644 docs/components/navbar/examples/NavbarSolidExample.vue create mode 100644 docs/components/pagination/examples/FwbPaginationExample.vue create mode 100644 docs/components/pagination/examples/FwbPaginationExampleNavigation.vue rename docs/components/pagination/examples/{PaginationSlotsExample.vue => FwbPaginationExampleSlots.vue} (64%) create mode 100644 docs/components/pagination/examples/FwbPaginationExampleTable.vue create mode 100644 docs/components/pagination/examples/FwbPaginationExampleWithCustomSlice.vue create mode 100644 docs/components/pagination/examples/FwbPaginationExampleWithCustomText.vue create mode 100644 docs/components/pagination/examples/FwbPaginationExampleWithIcons.vue delete mode 100644 docs/components/pagination/examples/PaginationExample.vue delete mode 100644 docs/components/pagination/examples/PaginationNavigationExample.vue delete mode 100644 docs/components/pagination/examples/PaginationTableExample.vue delete mode 100644 docs/components/pagination/examples/PaginationWithCustomSlice.vue delete mode 100644 docs/components/pagination/examples/PaginationWithCustomTextExample.vue delete mode 100644 docs/components/pagination/examples/PaginationWithIconsExample.vue create mode 100644 docs/components/progress/examples/FwbProgressExample.vue create mode 100644 docs/components/progress/examples/FwbProgressExampleColor.vue create mode 100644 docs/components/progress/examples/FwbProgressExampleLabelInside.vue create mode 100644 docs/components/progress/examples/FwbProgressExampleLabelOutside.vue create mode 100644 docs/components/progress/examples/FwbProgressExampleSize.vue delete mode 100644 docs/components/progress/examples/ProgressColorExample.vue delete mode 100644 docs/components/progress/examples/ProgressExample.vue delete mode 100644 docs/components/progress/examples/ProgressInsideLabelExample.vue delete mode 100644 docs/components/progress/examples/ProgressOutsideLabelExample.vue delete mode 100644 docs/components/progress/examples/ProgressSizeExample.vue delete mode 100644 docs/components/radio/examples/DefaultRadio.vue delete mode 100644 docs/components/radio/examples/DisabledRadio.vue create mode 100644 docs/components/radio/examples/FwbRadioExample.vue create mode 100644 docs/components/radio/examples/FwbRadioExampleBordered.vue create mode 100644 docs/components/radio/examples/FwbRadioExampleDisabled.vue create mode 100644 docs/components/radio/examples/FwbRadioExampleInline.vue create mode 100644 docs/components/radio/examples/FwbRadioExampleLink.vue create mode 100644 docs/components/radio/examples/FwbRadioExampleList.vue create mode 100644 docs/components/radio/examples/FwbRadioExampleListHorizontal.vue delete mode 100644 docs/components/radio/examples/HorizontalListRadio.vue delete mode 100644 docs/components/radio/examples/InlineRadio.vue delete mode 100644 docs/components/radio/examples/LinkRadio.vue delete mode 100644 docs/components/radio/examples/ListRadio.vue delete mode 100644 docs/components/range/examples/DefaultRange.vue delete mode 100644 docs/components/range/examples/DisabledRange.vue create mode 100644 docs/components/range/examples/FwbRangeExample.vue create mode 100644 docs/components/range/examples/FwbRangeExampleDisabled.vue create mode 100644 docs/components/range/examples/FwbRangeExampleMinMax.vue create mode 100644 docs/components/range/examples/FwbRangeExampleSize.vue create mode 100644 docs/components/range/examples/FwbRangeExampleSteps.vue delete mode 100644 docs/components/range/examples/MinMaxRange.vue delete mode 100644 docs/components/range/examples/SizeRange.vue delete mode 100644 docs/components/range/examples/StepsRange.vue create mode 100644 docs/components/rating/examples/FwbRatingExample.vue rename docs/components/rating/examples/{RatingCountExample.vue => FwbRatingExampleCount.vue} (64%) create mode 100644 docs/components/rating/examples/FwbRatingExampleStarSizes.vue create mode 100644 docs/components/rating/examples/FwbRatingExampleWithText.vue delete mode 100644 docs/components/rating/examples/RatingExample.vue delete mode 100644 docs/components/rating/examples/RatingStarSizesExample.vue delete mode 100644 docs/components/rating/examples/RatingWithTextExample.vue delete mode 100644 docs/components/select/examples/DisabledSelect.vue create mode 100644 docs/components/select/examples/FwbSelectExample.vue create mode 100644 docs/components/select/examples/FwbSelectExampleDisabled.vue create mode 100644 docs/components/select/examples/FwbSelectExampleSize.vue create mode 100644 docs/components/select/examples/FwbSelectExampleUnderlined.vue delete mode 100644 docs/components/select/examples/SelectExample.vue delete mode 100644 docs/components/select/examples/SelectSize.vue delete mode 100644 docs/components/select/examples/UnderlinedSelect.vue rename docs/components/sidebar/examples/{SidebarCtaExample.vue => FwbSidebarCtaExample.vue} (77%) rename docs/components/sidebar/examples/{SidebarDropdownExample.vue => FwbSidebarDropdownExample.vue} (76%) rename docs/components/sidebar/examples/{SidebarLogoExample.vue => FwbSidebarExample.vue} (83%) rename docs/components/sidebar/examples/{SidebarGroupExample.vue => FwbSidebarGroupExample.vue} (84%) rename docs/components/sidebar/examples/{SidebarExample.vue => FwbSidebarLogoExample.vue} (81%) create mode 100644 docs/components/spinner/examples/FwbSpinnerExample.vue create mode 100644 docs/components/spinner/examples/FwbSpinnerExampleColor.vue create mode 100644 docs/components/spinner/examples/FwbSpinnerExampleSize.vue delete mode 100644 docs/components/spinner/examples/SpinnerBasicExample.vue delete mode 100644 docs/components/spinner/examples/SpinnerColorExample.vue delete mode 100644 docs/components/spinner/examples/SpinnerSizeExample.vue create mode 100644 docs/components/table/examples/FwbTableExample.vue create mode 100644 docs/components/table/examples/FwbTableExampleHoverable.vue create mode 100644 docs/components/table/examples/FwbTableExampleStriped.vue create mode 100644 docs/components/table/examples/FwbTableExampleStripedColumns.vue delete mode 100644 docs/components/table/examples/TableExample.vue delete mode 100644 docs/components/table/examples/TableHoverableExample.vue delete mode 100644 docs/components/table/examples/TableStripedColumnsExample.vue delete mode 100644 docs/components/table/examples/TableStripedExample.vue create mode 100644 docs/components/tabs/examples/FwbTabsExample.vue create mode 100644 docs/components/tabs/examples/FwbTabsExampleDirective.vue create mode 100644 docs/components/tabs/examples/FwbTabsExampleInteraction.vue rename docs/components/tabs/examples/{TabsUnderlineExample.vue => FwbTabsExamplePills.vue} (67%) rename docs/components/tabs/examples/{TabsPillsExample.vue => FwbTabsExampleUnderline.vue} (67%) delete mode 100644 docs/components/tabs/examples/TabsDefaultExample.vue delete mode 100644 docs/components/textarea/examples/CommentTextarea.vue delete mode 100644 docs/components/textarea/examples/DefaultTextarea.vue create mode 100644 docs/components/textarea/examples/FwbTextareaExample.vue create mode 100644 docs/components/textarea/examples/FwbTextareaExampleComment.vue create mode 100644 docs/components/timeline/examples/FwbTimelineExample.vue create mode 100644 docs/components/timeline/examples/FwbTimelineExampleHorizontal.vue create mode 100644 docs/components/timeline/examples/FwbTimelineExampleWithIcons.vue delete mode 100644 docs/components/timeline/examples/TimelineExample.vue delete mode 100644 docs/components/timeline/examples/TimelineHorizontalExample.vue delete mode 100644 docs/components/timeline/examples/TimelineWithIconsExample.vue create mode 100644 docs/components/toast/examples/FwbToastExample.vue create mode 100644 docs/components/toast/examples/FwbToastExampleClosable.vue create mode 100644 docs/components/toast/examples/FwbToastExampleDivide.vue create mode 100644 docs/components/toast/examples/FwbToastExampleIcon.vue create mode 100644 docs/components/toast/examples/FwbToastExampleInteractive.vue create mode 100644 docs/components/toast/examples/FwbToastExampleMessage.vue delete mode 100644 docs/components/toast/examples/ToastClosableExample.vue delete mode 100644 docs/components/toast/examples/ToastDivideExample.vue delete mode 100644 docs/components/toast/examples/ToastIconExample.vue delete mode 100644 docs/components/toast/examples/ToastInteractiveExample.vue delete mode 100644 docs/components/toast/examples/ToastMessageExample.vue delete mode 100644 docs/components/toast/examples/ToastTypeExample.vue create mode 100644 docs/components/toastProvider/examples/FwbToastProviderExample.vue rename docs/components/toastProvider/examples/{ToastProviderExampleChild.vue => FwbToastProviderExampleChild.vue} (59%) delete mode 100644 docs/components/toastProvider/examples/ToastProviderExample.vue delete mode 100644 docs/components/toggle/examples/CheckedToggle.vue delete mode 100644 docs/components/toggle/examples/ColorsToggle.vue delete mode 100644 docs/components/toggle/examples/DefaultToggle.vue delete mode 100644 docs/components/toggle/examples/DisabledToggle.vue create mode 100644 docs/components/toggle/examples/FwbToggleExample.vue create mode 100644 docs/components/toggle/examples/FwbToggleExampleChecked.vue create mode 100644 docs/components/toggle/examples/FwbToggleExampleColors.vue create mode 100644 docs/components/toggle/examples/FwbToggleExampleDisabled.vue create mode 100644 docs/components/toggle/examples/FwbToggleExampleSize.vue delete mode 100644 docs/components/toggle/examples/SizeToggle.vue create mode 100644 docs/components/tooltip/examples/FwbTooltipExample.vue create mode 100644 docs/components/tooltip/examples/FwbTooltipExamplePosition.vue create mode 100644 docs/components/tooltip/examples/FwbTooltipExampleStyle.vue create mode 100644 docs/components/tooltip/examples/FwbTooltipExampleTrigger.vue delete mode 100644 docs/components/tooltip/examples/TooltipExample.vue delete mode 100644 docs/components/tooltip/examples/TooltipPositionExample.vue delete mode 100644 docs/components/tooltip/examples/TooltipStyleExample.vue delete mode 100644 docs/components/tooltip/examples/TooltipTriggerExample.vue create mode 100644 docs/components/typography/heading/FwbHExampleColor.vue create mode 100644 docs/components/typography/heading/FwbHExampleCustom.vue create mode 100644 docs/components/typography/heading/FwbHExampleLevel1.vue create mode 100644 docs/components/typography/heading/FwbHExampleLevel2.vue create mode 100644 docs/components/typography/heading/FwbHExampleLevel3.vue create mode 100644 docs/components/typography/heading/FwbHExampleLevel4.vue create mode 100644 docs/components/typography/heading/FwbHExampleLevel5.vue create mode 100644 docs/components/typography/heading/FwbHExampleLevel6.vue delete mode 100644 docs/components/typography/heading/H1.vue delete mode 100644 docs/components/typography/heading/H2.vue delete mode 100644 docs/components/typography/heading/H3.vue delete mode 100644 docs/components/typography/heading/H4.vue delete mode 100644 docs/components/typography/heading/H5.vue delete mode 100644 docs/components/typography/heading/H6.vue delete mode 100644 docs/components/typography/heading/HColor.vue delete mode 100644 docs/components/typography/heading/HCustom.vue create mode 100644 docs/components/typography/image/FwbImgExample.vue create mode 100644 docs/components/typography/image/FwbImgExampleAlign.vue create mode 100644 docs/components/typography/image/FwbImgExampleCaption.vue create mode 100644 docs/components/typography/image/FwbImgExampleCustom.vue rename docs/components/typography/image/{ImgBlur.vue => FwbImgExampleGrayscale.vue} (75%) create mode 100644 docs/components/typography/image/FwbImgExampleSize.vue delete mode 100644 docs/components/typography/image/Img.vue delete mode 100644 docs/components/typography/image/ImgAlign.vue delete mode 100644 docs/components/typography/image/ImgCap.vue delete mode 100644 docs/components/typography/image/ImgCustom.vue delete mode 100644 docs/components/typography/image/ImgSize.vue delete mode 100644 docs/components/typography/link/A.vue delete mode 100644 docs/components/typography/link/ACustom.vue delete mode 100644 docs/components/typography/link/APara.vue create mode 100644 docs/components/typography/link/FwbAExample.vue create mode 100644 docs/components/typography/link/FwbAExampleCustom.vue create mode 100644 docs/components/typography/link/FwbAExampleParagraph.vue rename docs/components/typography/p/{P.vue => FwbPExample.vue} (85%) create mode 100644 docs/components/typography/p/FwbPExampleAlign.vue rename docs/components/typography/p/{PCustom.vue => FwbPExampleCustom.vue} (63%) create mode 100644 docs/components/typography/p/FwbPExampleWeight.vue delete mode 100644 docs/components/typography/p/PAlign.vue delete mode 100644 docs/components/typography/p/PWeight.vue delete mode 100644 src/components/Avatar/Avatar.vue delete mode 100644 src/components/Avatar/StackedAvatarsCounter.vue delete mode 100644 src/components/Avatar/composables/useAvatarClasses.ts delete mode 100644 src/components/Breadcrumb/BreadcrumbItem.vue delete mode 100644 src/components/Breadcrumb/composables/useBreadcrumbClasses.ts delete mode 100644 src/components/Breadcrumb/composables/useBreadcrumbItemClasses.ts delete mode 100644 src/components/Button/composables/useButtonSpinner.ts delete mode 100644 src/components/Button/tests/Button.spec.ts delete mode 100644 src/components/Card/composables/useCardClasses.ts delete mode 100644 src/components/Carousel/Carousel.vue delete mode 100644 src/components/Carousel/types.ts delete mode 100644 src/components/Dropdown/Dropdown.css delete mode 100644 src/components/Dropdown/Dropdown.vue delete mode 100644 src/components/Dropdown/composables/useDropdownClasses.ts delete mode 100644 src/components/FileInput/composables/useFileInputClasses.ts rename src/components/{Accordion/Accordion.vue => FwbAccordion/FwbAccordion.vue} (83%) rename src/components/{Accordion/AccordionContent.vue => FwbAccordion/FwbAccordionContent.vue} (61%) rename src/components/{Accordion/AccordionHeader.vue => FwbAccordion/FwbAccordionHeader.vue} (62%) rename src/components/{Accordion/AccordionPanel.vue => FwbAccordion/FwbAccordionPanel.vue} (80%) rename src/components/{Accordion => FwbAccordion}/composables/useAccordionContentClasses.ts (88%) rename src/components/{Accordion => FwbAccordion}/composables/useAccordionHeaderClasses.ts (92%) rename src/components/{Accordion => FwbAccordion}/composables/useAccordionState.ts (85%) rename src/components/{Accordion => FwbAccordion}/types.ts (98%) rename src/components/{Alert/Alert.vue => FwbAlert/FwbAlert.vue} (74%) rename src/components/{Alert => FwbAlert}/types.ts (85%) create mode 100644 src/components/FwbAvatar/FwbAvatar.vue rename src/components/{Avatar/StackedAvatars.vue => FwbAvatar/FwbAvatarStack.vue} (100%) create mode 100644 src/components/FwbAvatar/FwbAvatarStackCounter.vue create mode 100644 src/components/FwbAvatar/composables/useAvatarClasses.ts rename src/components/{Avatar => FwbAvatar}/types.ts (100%) rename src/components/{Badge/Badge.vue => FwbBadge/FwbBadge.vue} (74%) rename src/components/{Badge => FwbBadge}/composables/useBadgeClasses.ts (94%) rename src/components/{Badge => FwbBadge}/types.ts (100%) rename src/components/{Breadcrumb/Breadcrumb.vue => FwbBreadcrumb/FwbBreadcrumb.vue} (56%) create mode 100644 src/components/FwbBreadcrumb/FwbBreadcrumbItem.vue create mode 100644 src/components/FwbBreadcrumb/composables/useBreadcrumbClasses.ts create mode 100644 src/components/FwbBreadcrumb/composables/useBreadcrumbItemClasses.ts rename src/components/{Breadcrumb => FwbBreadcrumb}/types.ts (100%) rename src/components/{Button/Button.vue => FwbButton/FwbButton.vue} (59%) rename src/components/{Button => FwbButton}/composables/useButtonClasses.ts (87%) create mode 100644 src/components/FwbButton/composables/useButtonSpinner.ts create mode 100644 src/components/FwbButton/tests/Button.spec.ts rename src/components/{Button => FwbButton}/types.ts (88%) rename src/components/{ButtonGroup/ButtonGroup.vue => FwbButtonGroup/FwbButtonGroup.vue} (75%) rename src/components/{Card/TheCard.vue => FwbCard/FwbCard.vue} (69%) create mode 100644 src/components/FwbCard/composables/useCardClasses.ts rename src/components/{Card => FwbCard}/types.ts (100%) create mode 100644 src/components/FwbCarousel/FwbCarousel.vue create mode 100644 src/components/FwbCarousel/types.ts rename src/components/{Checkbox/Checkbox.vue => FwbCheckbox/FwbCheckbox.vue} (66%) rename src/components/{Checkbox => FwbCheckbox}/composables/useCheckboxClasses.ts (63%) create mode 100644 src/components/FwbDropdown/FwbDropdown.vue create mode 100644 src/components/FwbDropdown/composables/useDropdownClasses.ts rename src/components/{Dropdown => FwbDropdown}/types.ts (94%) rename src/components/{FileInput/FileInput.vue => FwbFileInput/FwbFileInput.vue} (73%) create mode 100644 src/components/FwbFileInput/composables/useFileInputClasses.ts rename src/components/{Footer/Footer.vue => FwbFooter/FwbFooter.vue} (92%) rename src/components/{Footer/FooterBrand.vue => FwbFooter/FwbFooterBrand.vue} (81%) rename src/components/{Footer/FooterCopyright.vue => FwbFooter/FwbFooterCopyright.vue} (83%) rename src/components/{Footer/FooterIcon.vue => FwbFooter/FwbFooterIcon.vue} (82%) rename src/components/{Footer/FooterLink.vue => FwbFooter/FwbFooterLink.vue} (82%) rename src/components/{Footer/FooterLinkGroup.vue => FwbFooter/FwbFooterLinkGroup.vue} (83%) create mode 100644 src/components/FwbInput/FwbInput.vue rename src/components/{Input => FwbInput}/composables/useInputClasses.ts (55%) create mode 100644 src/components/FwbInput/types.ts rename src/components/{ListGroup/ListGroup.vue => FwbListGroup/FwbListGroup.vue} (99%) rename src/components/{ListGroup/components/ListGroupItem/ListGroupItem.vue => FwbListGroup/FwbListGroupItem.vue} (64%) create mode 100644 src/components/FwbListGroup/composables/useListGroupClasses.ts create mode 100644 src/components/FwbListGroup/composables/useListGroupItemClasses.ts create mode 100644 src/components/FwbModal/FwbModal.vue rename src/components/{Modal => FwbModal}/types.ts (100%) create mode 100644 src/components/FwbNavbar/FwbNavbar.vue rename src/components/{Navbar/NavbarCollapse.vue => FwbNavbar/FwbNavbarCollapse.vue} (77%) create mode 100644 src/components/FwbNavbar/FwbNavbarLink.ts create mode 100644 src/components/FwbNavbar/FwbNavbarLink.vue create mode 100644 src/components/FwbNavbar/FwbNavbarLogo.vue rename src/components/{Pagination/Pagination.vue => FwbPagination/FwbPagination.vue} (70%) rename src/components/{Pagination => FwbPagination}/types.ts (100%) create mode 100644 src/components/FwbProgress/FwbProgress.vue rename src/components/{Progress => FwbProgress}/composables/useProgressClasses.ts (58%) rename src/components/{Progress => FwbProgress}/types.ts (100%) create mode 100644 src/components/FwbRadio/FwbRadio.vue create mode 100644 src/components/FwbRadio/composables/useRadioClasses.ts create mode 100644 src/components/FwbRange/FwbRange.vue rename src/components/{Range => FwbRange}/composables/useRangeClasses.ts (57%) rename src/components/{Rating/Rating.vue => FwbRating/FwbRating.vue} (66%) rename src/components/{Rating => FwbRating}/composables/useRatingClasses.ts (50%) create mode 100644 src/components/FwbRating/types.ts create mode 100644 src/components/FwbSelect/FwbSelect.vue create mode 100644 src/components/FwbSelect/composables/useSelectClasses.ts rename src/components/{Select => FwbSelect}/types.ts (100%) rename src/components/{Sidebar/Sidebar.vue => FwbSidebar/FwbSidebar.vue} (85%) rename src/components/{Sidebar/SidebarCta.vue => FwbSidebar/FwbSidebarCta.vue} (60%) rename src/components/{Sidebar/SidebarDropdownItem.vue => FwbSidebar/FwbSidebarDropdownItem.vue} (75%) rename src/components/{Sidebar/SidebarItem.vue => FwbSidebar/FwbSidebarItem.vue} (63%) rename src/components/{Sidebar/SidebarItemGroup.vue => FwbSidebar/FwbSidebarItemGroup.vue} (100%) rename src/components/{Sidebar/SidebarLogo.vue => FwbSidebar/FwbSidebarLogo.vue} (73%) create mode 100644 src/components/FwbSpinner/FwbSpinner.vue create mode 100644 src/components/FwbSpinner/composables/useSpinnerClasses.ts create mode 100644 src/components/FwbSpinner/types.ts rename src/components/{Table/Table.vue => FwbTable/FwbTable.vue} (96%) create mode 100644 src/components/FwbTable/FwbTableBody.vue rename src/components/{Table/TableCell.vue => FwbTable/FwbTableCell.vue} (58%) rename src/components/{Table/TableHead.vue => FwbTable/FwbTableHead.vue} (73%) create mode 100644 src/components/FwbTable/FwbTableHeadCell.vue rename src/components/{Table/TableRow.vue => FwbTable/FwbTableRow.vue} (58%) rename src/components/{Table => FwbTable}/composables/useTableCellClasses.ts (50%) create mode 100644 src/components/FwbTable/composables/useTableHeadCellClasses.ts rename src/components/{Table => FwbTable}/composables/useTableRowClasses.ts (63%) rename src/components/{Tabs/components/Tab/Tab.vue => FwbTabs/FwbTab.vue} (52%) rename src/components/{Tabs/components/TabPane/TabPane.vue => FwbTabs/FwbTabPane.vue} (68%) rename src/components/{Tabs/Tabs.vue => FwbTabs/FwbTabs.vue} (51%) create mode 100644 src/components/FwbTabs/composables/useTabClasses.ts create mode 100644 src/components/FwbTabs/composables/useTabsClasses.ts rename src/components/{Tabs => FwbTabs}/injection/config.ts (95%) create mode 100644 src/components/FwbTabs/types.ts rename src/components/{Textarea/Textarea.vue => FwbTextarea/FwbTextarea.vue} (63%) create mode 100644 src/components/FwbTextarea/composables/useTextareaClasses.ts rename src/components/{Timeline/Timeline.vue => FwbTimeline/FwbTimeline.vue} (64%) create mode 100644 src/components/FwbTimeline/FwbTimelineBody.vue rename src/components/{Timeline/TimelineContent.vue => FwbTimeline/FwbTimelineContent.vue} (84%) rename src/components/{Timeline/TimelineItem.vue => FwbTimeline/FwbTimelineItem.vue} (96%) rename src/components/{Timeline/TimelinePoint.vue => FwbTimeline/FwbTimelinePoint.vue} (71%) create mode 100644 src/components/FwbTimeline/FwbTimelineTime.vue create mode 100644 src/components/FwbTimeline/FwbTimelineTitle.vue create mode 100644 src/components/FwbToast/FwbToast.vue create mode 100644 src/components/FwbToast/FwbToastProvider.vue create mode 100644 src/components/FwbToast/composables/useToast.ts create mode 100644 src/components/FwbToast/composables/useToastClasses.ts rename src/components/{Toast/components/ToastProvider => FwbToast}/injection/config.ts (100%) create mode 100644 src/components/FwbToast/types.ts rename src/components/{Toggle/Toggle.vue => FwbToggle/FwbToggle.vue} (58%) rename src/components/{Toggle => FwbToggle}/composables/useToggleClasses.ts (73%) rename src/components/{Tooltip/Tooltip.vue => FwbTooltip/FwbTooltip.vue} (90%) rename src/components/{Tooltip => FwbTooltip}/types.ts (68%) delete mode 100644 src/components/Input/Input.vue delete mode 100644 src/components/Input/types.ts delete mode 100644 src/components/ListGroup/components/ListGroupItem/composables/useListGroupItemClasses.ts delete mode 100644 src/components/ListGroup/composables/useListGroupClasses.ts delete mode 100644 src/components/Modal/Modal.vue delete mode 100644 src/components/Navbar/Navbar.vue delete mode 100644 src/components/Navbar/NavbarLink.ts delete mode 100644 src/components/Navbar/NavbarLogo.ts delete mode 100644 src/components/Progress/Progress.vue delete mode 100644 src/components/Radio/Radio.vue delete mode 100644 src/components/Radio/composables/useRadioClasses.ts delete mode 100644 src/components/Range/Range.vue delete mode 100644 src/components/Rating/types.ts delete mode 100644 src/components/Select/Select.vue delete mode 100644 src/components/Select/composables/useSelectClasses.ts delete mode 100644 src/components/Spinner/Spinner.vue delete mode 100644 src/components/Spinner/composables/useSpinnerClasses.ts delete mode 100644 src/components/Spinner/types.ts delete mode 100644 src/components/Table/TableBody.vue delete mode 100644 src/components/Table/TableHeadCell.vue delete mode 100644 src/components/Table/composables/useTableHeadCellClasses.ts delete mode 100644 src/components/Tabs/components/TabPane/composables/useTabClasses.ts delete mode 100644 src/components/Tabs/composables/useTabsClasses.ts delete mode 100644 src/components/Tabs/types.ts delete mode 100644 src/components/Textarea/composables/useTextareaClasses.ts delete mode 100644 src/components/Timeline/TimelineBody.vue delete mode 100644 src/components/Timeline/TimelineTime.vue delete mode 100644 src/components/Timeline/TimelineTitle.vue delete mode 100644 src/components/Toast/Toast.vue delete mode 100644 src/components/Toast/components/ToastProvider/ToastProvider.css delete mode 100644 src/components/Toast/components/ToastProvider/ToastProvider.vue delete mode 100644 src/components/Toast/components/ToastProvider/composables/useToast.ts delete mode 100644 src/components/Toast/components/ToastProvider/types.ts delete mode 100644 src/components/Toast/composables/useToastClasses.ts delete mode 100644 src/components/Toast/types.ts rename src/components/Typography/{A.vue => FwbA.vue} (72%) rename src/components/Typography/{Heading.vue => FwbHeading.vue} (50%) rename src/components/Typography/{Img.vue => FwbImg.vue} (58%) rename src/components/Typography/{P.vue => FwbP.vue} (100%) create mode 100644 src/components/utils/FlowbiteThemable/FlowbiteThemableChild.vue delete mode 100644 src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue delete mode 100644 src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts delete mode 100644 src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types.ts create mode 100644 src/components/utils/FlowbiteThemable/composables/useFlowbiteThemableChildClasses.ts delete mode 100644 src/components/utils/FlowbiteThemable/types.d.ts create mode 100644 src/components/utils/FlowbiteThemable/types.ts rename src/components/utils/{SlotListener/SlotListener.vue => FwbSlotListener/FwbSlotListener.vue} (85%) create mode 100644 src/components/utils/FwbSlotListener/types.ts delete mode 100644 src/components/utils/SlotListener/types.ts diff --git a/.eslintrc.js b/.eslintrc.js index bfe268c..f20cd73 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,25 +1,29 @@ +require('@rushstack/eslint-patch/modern-module-resolution') + module.exports = { env: { browser: true, es2021: true, node: true, }, - parser: 'vue-eslint-parser', - extends: ['eslint:recommended', 'plugin:vue/essential', 'plugin:@typescript-eslint/recommended'], + extends: [ + 'eslint:recommended', + 'standard', + 'plugin:vue/vue3-recommended', + 'plugin:vue-scoped-css/vue3-recommended', + '@vue/eslint-config-typescript/recommended', + ], parserOptions: { ecmaVersion: 12, - parser: '@typescript-eslint/parser', sourceType: 'module', }, - plugins: ['vue', '@typescript-eslint'], rules: { - 'linebreak-style': ['error', 'unix'], - quotes: ['error', 'single'], - semi: ['error', 'never'], - 'vue/multi-word-component-names': 'off', 'comma-dangle': ['error', 'always-multiline'], + 'linebreak-style': ['error', 'unix'], 'no-multiple-empty-lines': 'error', 'object-curly-spacing': ['error', 'always'], - 'vue/no-v-model-argument': 'off', + 'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }], + 'vue/block-order': ['error', { order: ['template', 'script', 'style'] }], + 'vue/component-name-in-template-casing': ['error', 'kebab-case'], }, } diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 6a2b2db..90ac918 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -38,20 +38,20 @@ function getComponents() { { text: 'Accordion', link: '/components/accordion' }, { text: 'Alert', link: '/components/alert' }, { text: 'Avatar', link: '/components/avatar' }, + { text: 'Badge', link: '/components/badge' }, { text: 'Breadcrumb', link: '/components/breadcrumb' }, { text: 'Button', link: '/components/button' }, - { text: 'Badge', link: '/components/badge' }, { text: 'Button Group', link: '/components/button-group' }, { text: 'Card', link: '/components/card.md' }, { text: 'Carousel', link: '/components/carousel' }, { text: 'Dropdown', link: '/components/dropdown' }, + { text: 'ListGroup', link: '/components/list-group' }, { text: 'Pagination', link: '/components/pagination' }, { text: 'Progress', link: '/components/progress' }, { text: 'Rating', link: '/components/rating' }, { text: 'Spinner', link: '/components/spinner' }, { text: 'Table', link: '/components/table' }, { text: 'Tabs', link: '/components/tabs' }, - { text: 'ListGroup', link: '/components/list-group' }, { text: 'Timeline', link: '/components/timeline' }, { text: 'Toast', link: '/components/toast' }, { text: 'Tooltip', link: '/components/tooltip' }, @@ -65,13 +65,13 @@ function getComponents() { function getFormComponents() { return [ { text: 'Input', link: '/components/input' }, - { text: 'FileInput', link: '/components/fileInput' }, - { text: 'Checkbox', link: '/components/checkbox' }, + { text: 'File Input', link: '/components/fileInput' }, { text: 'Select', link: '/components/select' }, - { text: 'Toggle', link: '/components/toggle' }, { text: 'Textarea', link: '/components/textarea' }, - { text: 'Range', link: '/components/range' }, + { text: 'Checkbox', link: '/components/checkbox' }, { text: 'Radio', link: '/components/radio' }, + { text: 'Toggle', link: '/components/toggle' }, + { text: 'Range', link: '/components/range' }, ] } diff --git a/docs/components/PLAYGROUND/examples/SlotListenerExample.vue b/docs/components/PLAYGROUND/examples/SlotListenerExample.vue index 91969bf..ee9a2d3 100644 --- a/docs/components/PLAYGROUND/examples/SlotListenerExample.vue +++ b/docs/components/PLAYGROUND/examples/SlotListenerExample.vue @@ -1,10 +1,15 @@ + # Vue Accordion - Flowbite @@ -16,216 +16,297 @@ Original reference: [https://flowbite.com/docs/components/accordion/](https://fl ## Default accordion Use this example to basic accordion. -```vue - + +```vue -``` + - +``` ## Always open accordion Always open prop to makes accordion able to open multiple elements. -```vue - + +```vue + ``` - - ## Flush accordion Flush prop removes side borders, and rounded corners -```vue - + +```vue + ``` - - ## Styling accordion You can style accordion content and headers by passing tailwind classes into them. -```vue - + +```vue + ``` - - - ## Closed first item -```vue - + +```vue + ``` - - - diff --git a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue deleted file mode 100644 index 10f8f2e..0000000 --- a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue deleted file mode 100644 index 8438c12..0000000 --- a/docs/components/accordion/examples/AccordionExample.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - diff --git a/docs/components/accordion/examples/AccordionFlushExample.vue b/docs/components/accordion/examples/AccordionFlushExample.vue deleted file mode 100644 index 363e44a..0000000 --- a/docs/components/accordion/examples/AccordionFlushExample.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - diff --git a/docs/components/accordion/examples/AccordionOpenFirstItemExample.vue b/docs/components/accordion/examples/AccordionOpenFirstItemExample.vue deleted file mode 100644 index 614cd97..0000000 --- a/docs/components/accordion/examples/AccordionOpenFirstItemExample.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - diff --git a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue deleted file mode 100644 index 63f3474..0000000 --- a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - diff --git a/docs/components/accordion/examples/FwbAccordionExample.vue b/docs/components/accordion/examples/FwbAccordionExample.vue new file mode 100644 index 0000000..27f15ad --- /dev/null +++ b/docs/components/accordion/examples/FwbAccordionExample.vue @@ -0,0 +1,61 @@ + + + diff --git a/docs/components/accordion/examples/FwbAccordionExampleAlwaysOpen.vue b/docs/components/accordion/examples/FwbAccordionExampleAlwaysOpen.vue new file mode 100644 index 0000000..4a65bb7 --- /dev/null +++ b/docs/components/accordion/examples/FwbAccordionExampleAlwaysOpen.vue @@ -0,0 +1,58 @@ + + + diff --git a/docs/components/accordion/examples/FwbAccordionExampleFirstItemClosed.vue b/docs/components/accordion/examples/FwbAccordionExampleFirstItemClosed.vue new file mode 100644 index 0000000..9849e75 --- /dev/null +++ b/docs/components/accordion/examples/FwbAccordionExampleFirstItemClosed.vue @@ -0,0 +1,61 @@ + + + diff --git a/docs/components/accordion/examples/FwbAccordionExampleFlush.vue b/docs/components/accordion/examples/FwbAccordionExampleFlush.vue new file mode 100644 index 0000000..16ee2d0 --- /dev/null +++ b/docs/components/accordion/examples/FwbAccordionExampleFlush.vue @@ -0,0 +1,58 @@ + + + diff --git a/docs/components/accordion/examples/FwbAccordionExampleStyledHeaders.vue b/docs/components/accordion/examples/FwbAccordionExampleStyledHeaders.vue new file mode 100644 index 0000000..c0791ef --- /dev/null +++ b/docs/components/accordion/examples/FwbAccordionExampleStyledHeaders.vue @@ -0,0 +1,60 @@ + + + diff --git a/docs/components/alert.md b/docs/components/alert.md index 4bd765d..a8c291c 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -1,11 +1,11 @@ # Vue Alert - Flowbite @@ -15,198 +15,268 @@ The alert component can be used to provide information to your users such as suc ## Default alert Use the following examples of alert components to show messages as feedback to your users. - + ```vue - + + ``` + ## Alerts with icon You can also include a descriptive icon to complement the message inside the alert component with the following example. - - + ```vue - + + ``` ## Bordered alerts Use this example to add a border accent to the alert component instead of just a plain background. - - + ```vue - + + ``` ## Border accent Use this example to add a border accent on top of the alert component for further visual distinction. - - + ```vue - + + ``` ## Alerts with list Use this example to show a list and a description inside an alert component. - - + ```vue - + + ``` ## Dismissing Use the following alert elements that are also dismissable. - - + ```vue + + ``` ## Additional content The following alert components can be used if you wish to disclose more information inside the element. - + ```vue -