├── .editorconfig ├── .eslintrc.json ├── .github └── dependabot.yml ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── build ├── generate-presets.ts └── lunr.cjs ├── documentation ├── .vitepress │ ├── components │ │ ├── DynamicLayout.vue │ │ └── FrameDefaultLayout.vue │ ├── config.ts │ ├── lunr │ │ ├── VPAlgoliaSearchBox.vue │ │ ├── VPLunrSearchBox.vue │ │ ├── VPNavBarSearch.vue │ │ ├── lunr.stub.cjs │ │ └── search.ts │ ├── miragejs │ │ └── server.ts │ ├── theme │ │ ├── index.ts │ │ └── styles │ │ │ ├── brand.css │ │ │ ├── custom.css │ │ │ ├── tailwind.css │ │ │ └── v-calendar.pcss │ └── tsconfig.json ├── env.d.ts └── src │ ├── components │ ├── DemoComponent.vue │ ├── DemoComponentConfig.ts │ ├── DemoExampleVariant.vue │ ├── ExampleAlert.vue │ ├── ExampleAvatar.vue │ ├── ExampleButton.vue │ ├── ExampleCard.vue │ ├── ExampleCheckbox.vue │ ├── ExampleCheckboxGroup.vue │ ├── ExampleCountryInput.vue │ ├── ExampleDatatable.vue │ ├── ExampleDatetimePicker.vue │ ├── ExampleDialog.vue │ ├── ExampleDropdown.vue │ ├── ExampleFormSections.vue │ ├── ExampleForms.vue │ ├── ExampleFormsInputGroup.vue │ ├── ExampleFormsSection.vue │ ├── ExampleInput.vue │ ├── ExamplePhoneInput.vue │ ├── ExampleRichRadio.vue │ ├── ExampleRichSelect.vue │ ├── ExampleRichSelectPreview.vue │ ├── ExampleSelect.vue │ ├── ExampleSkeleton.vue │ ├── ExampleSlideover.vue │ ├── ExampleStatusIndicator.vue │ ├── ExampleTagsInput.vue │ ├── ExampleTextarea.vue │ ├── ExampleToggle.vue │ ├── ExampleToggleGroup.vue │ └── PreviewWrapper.vue │ ├── frames │ └── default.md │ ├── guide │ ├── advanced-configuration.md │ ├── advanced-ide.md │ ├── advanced-props.md │ ├── changelog.md │ ├── components-list.md │ ├── components │ │ ├── alert.md │ │ ├── avatar.md │ │ ├── button.md │ │ ├── card.md │ │ ├── checkbox.md │ │ ├── country-input.md │ │ ├── datatable.md │ │ ├── datetime-input.md │ │ ├── dialog.md │ │ ├── dropdown.md │ │ ├── forms.md │ │ ├── input.md │ │ ├── phone-input.md │ │ ├── rich-radio.md │ │ ├── rich-select.md │ │ ├── select.md │ │ ├── skeleton.md │ │ ├── slideover.md │ │ ├── status-indicator.md │ │ ├── tags-input.md │ │ ├── textarea.md │ │ └── toggle.md │ ├── configuration.md │ ├── examples-form-sections.md │ ├── integrations-autoimport.md │ ├── integrations-datatables.md │ ├── integrations-nuxt.md │ ├── introduction.md │ └── quick-start.md │ ├── index.md │ ├── json │ ├── demo-config.json │ ├── demo-request.json │ └── demo-response.json │ ├── parts │ ├── default-slots.md │ ├── events-model-value.md │ ├── frame.md │ ├── slots-default-binds.md │ ├── slots-feedback-errors.md │ ├── title-events.md │ ├── title-expose.md │ ├── title-preview.md │ ├── title-props.md │ ├── title-slots.md │ └── title-snippet.md │ ├── presets │ └── tailwind │ │ ├── Alert.json │ │ ├── Avatar.json │ │ ├── Button.json │ │ ├── Card.json │ │ ├── Checkbox.json │ │ ├── CountryInput.json │ │ ├── Datatable.json │ │ ├── DateTimeInput.json │ │ ├── Dialog.json │ │ ├── Dropdown.json │ │ ├── FormErrors.json │ │ ├── FormFeedback.json │ │ ├── FormLabel.json │ │ ├── FormSection.json │ │ ├── Input.json │ │ ├── InputGroup.json │ │ ├── PhoneInput.json │ │ ├── RichRadio.json │ │ ├── RichRadioOption.json │ │ ├── RichSelect.json │ │ ├── RichSelectOptionWithImage.json │ │ ├── RichSelectOptionWithIndicators.json │ │ ├── RichSelectTagWithImage.json │ │ ├── Select.json │ │ ├── SkeletonBar.json │ │ ├── Slideover.json │ │ ├── StatusIndicator.json │ │ ├── TagsInput.json │ │ ├── Textarea.json │ │ ├── Toggle.json │ │ └── all.json │ ├── public │ ├── banner.png │ ├── copy.svg │ ├── favicon.ico │ ├── icon.png │ ├── logo-color.svg │ ├── logo-white.svg │ ├── seo.png │ ├── symbol-bg-dark.svg │ ├── symbol-bg-gradient.svg │ ├── symbol-dark.svg │ ├── symbol-gradient.svg │ └── symbol-white.svg │ └── snippets │ └── tailwind.config.js ├── package.json ├── packages ├── vanilla-components-hybridly │ ├── build.config.ts │ ├── package.json │ └── src │ │ ├── index.ts │ │ └── useHybridlyDatatable.ts ├── vanilla-components-inertia │ ├── build.config.ts │ ├── package.json │ └── src │ │ ├── index.ts │ │ └── useInertiaDatatable.ts └── vanilla-components │ ├── build.config.ts │ ├── package.json │ ├── src │ ├── components.ts │ ├── components │ │ ├── alert │ │ │ ├── alert.vue │ │ │ └── config.ts │ │ ├── avatar │ │ │ ├── avatar.vue │ │ │ └── config.ts │ │ ├── button │ │ │ ├── button.vue │ │ │ └── config.ts │ │ ├── card │ │ │ ├── card-empty.vue │ │ │ ├── card-footer.vue │ │ │ ├── card.vue │ │ │ └── config.ts │ │ ├── checkbox │ │ │ ├── checkbox-group.vue │ │ │ ├── checkbox.vue │ │ │ └── config.ts │ │ ├── country-input │ │ │ ├── config.ts │ │ │ ├── country-input-option.vue │ │ │ └── country-input.vue │ │ ├── datatable │ │ │ ├── config.ts │ │ │ ├── datatable.vue │ │ │ ├── partials │ │ │ │ ├── actions.vue │ │ │ │ ├── dialog-confirm-action.vue │ │ │ │ ├── dialog-filters.vue │ │ │ │ ├── dialog-settings.vue │ │ │ │ ├── empty-state.vue │ │ │ │ ├── filter-badge.vue │ │ │ │ ├── head.vue │ │ │ │ ├── pagination.vue │ │ │ │ ├── row-skeleton.vue │ │ │ │ ├── search-bar.vue │ │ │ │ └── selection-bar.vue │ │ │ └── utils │ │ │ │ ├── configuration-builder.ts │ │ │ │ ├── fetch-data.ts │ │ │ │ ├── index.ts │ │ │ │ ├── inject-configuration.ts │ │ │ │ ├── inject-translations.ts │ │ │ │ └── validator.ts │ │ ├── datetime-input │ │ │ ├── baseProps.ts │ │ │ ├── config.ts │ │ │ └── datetime-input.vue │ │ ├── dialog │ │ │ ├── config.ts │ │ │ ├── dialog.vue │ │ │ └── partials │ │ │ │ └── footer.vue │ │ ├── dropdown │ │ │ ├── config.ts │ │ │ ├── dropdown-menu.vue │ │ │ ├── dropdown-option.vue │ │ │ └── dropdown.vue │ │ ├── forms │ │ │ ├── config.ts │ │ │ ├── form-errors.vue │ │ │ ├── form-feedback.vue │ │ │ ├── form-label.vue │ │ │ └── form-section.vue │ │ ├── icons │ │ │ ├── flag.vue │ │ │ └── flags │ │ │ │ ├── FlagAC.vue │ │ │ │ ├── FlagAD.vue │ │ │ │ ├── FlagAE.vue │ │ │ │ ├── FlagAF.vue │ │ │ │ ├── FlagAG.vue │ │ │ │ ├── FlagAI.vue │ │ │ │ ├── FlagAL.vue │ │ │ │ ├── FlagAM.vue │ │ │ │ ├── FlagAO.vue │ │ │ │ ├── FlagAQ.vue │ │ │ │ ├── FlagAR.vue │ │ │ │ ├── FlagAS.vue │ │ │ │ ├── FlagAT.vue │ │ │ │ ├── FlagAU.vue │ │ │ │ ├── FlagAW.vue │ │ │ │ ├── FlagAX.vue │ │ │ │ ├── FlagAZ.vue │ │ │ │ ├── FlagBA.vue │ │ │ │ ├── FlagBB.vue │ │ │ │ ├── FlagBD.vue │ │ │ │ ├── FlagBE.vue │ │ │ │ ├── FlagBF.vue │ │ │ │ ├── FlagBG.vue │ │ │ │ ├── FlagBH.vue │ │ │ │ ├── FlagBI.vue │ │ │ │ ├── FlagBJ.vue │ │ │ │ ├── FlagBL.vue │ │ │ │ ├── FlagBM.vue │ │ │ │ ├── FlagBN.vue │ │ │ │ ├── FlagBO.vue │ │ │ │ ├── FlagBQ.vue │ │ │ │ ├── FlagBR.vue │ │ │ │ ├── FlagBS.vue │ │ │ │ ├── FlagBT.vue │ │ │ │ ├── FlagBV.vue │ │ │ │ ├── FlagBW.vue │ │ │ │ ├── FlagBY.vue │ │ │ │ ├── FlagBZ.vue │ │ │ │ ├── FlagCA.vue │ │ │ │ ├── FlagCC.vue │ │ │ │ ├── FlagCD.vue │ │ │ │ ├── FlagCF.vue │ │ │ │ ├── FlagCG.vue │ │ │ │ ├── FlagCH.vue │ │ │ │ ├── FlagCI.vue │ │ │ │ ├── FlagCK.vue │ │ │ │ ├── FlagCL.vue │ │ │ │ ├── FlagCM.vue │ │ │ │ ├── FlagCN.vue │ │ │ │ ├── FlagCO.vue │ │ │ │ ├── FlagCR.vue │ │ │ │ ├── FlagCU.vue │ │ │ │ ├── FlagCV.vue │ │ │ │ ├── FlagCW.vue │ │ │ │ ├── FlagCX.vue │ │ │ │ ├── FlagCY.vue │ │ │ │ ├── FlagCZ.vue │ │ │ │ ├── FlagDE.vue │ │ │ │ ├── FlagDJ.vue │ │ │ │ ├── FlagDK.vue │ │ │ │ ├── FlagDM.vue │ │ │ │ ├── FlagDO.vue │ │ │ │ ├── FlagDZ.vue │ │ │ │ ├── FlagEC.vue │ │ │ │ ├── FlagEE.vue │ │ │ │ ├── FlagEG.vue │ │ │ │ ├── FlagEH.vue │ │ │ │ ├── FlagER.vue │ │ │ │ ├── FlagES.vue │ │ │ │ ├── FlagET.vue │ │ │ │ ├── FlagEU.vue │ │ │ │ ├── FlagFI.vue │ │ │ │ ├── FlagFJ.vue │ │ │ │ ├── FlagFK.vue │ │ │ │ ├── FlagFM.vue │ │ │ │ ├── FlagFO.vue │ │ │ │ ├── FlagFR.vue │ │ │ │ ├── FlagGA.vue │ │ │ │ ├── FlagGB.vue │ │ │ │ ├── FlagGD.vue │ │ │ │ ├── FlagGE.vue │ │ │ │ ├── FlagGEAB.vue │ │ │ │ ├── FlagGEOS.vue │ │ │ │ ├── FlagGF.vue │ │ │ │ ├── FlagGG.vue │ │ │ │ ├── FlagGH.vue │ │ │ │ ├── FlagGI.vue │ │ │ │ ├── FlagGL.vue │ │ │ │ ├── FlagGM.vue │ │ │ │ ├── FlagGN.vue │ │ │ │ ├── FlagGP.vue │ │ │ │ ├── FlagGQ.vue │ │ │ │ ├── FlagGR.vue │ │ │ │ ├── FlagGS.vue │ │ │ │ ├── FlagGT.vue │ │ │ │ ├── FlagGU.vue │ │ │ │ ├── FlagGW.vue │ │ │ │ ├── FlagGY.vue │ │ │ │ ├── FlagHK.vue │ │ │ │ ├── FlagHM.vue │ │ │ │ ├── FlagHN.vue │ │ │ │ ├── FlagHR.vue │ │ │ │ ├── FlagHT.vue │ │ │ │ ├── FlagHU.vue │ │ │ │ ├── FlagID.vue │ │ │ │ ├── FlagIE.vue │ │ │ │ ├── FlagIL.vue │ │ │ │ ├── FlagIM.vue │ │ │ │ ├── FlagIN.vue │ │ │ │ ├── FlagIO.vue │ │ │ │ ├── FlagIQ.vue │ │ │ │ ├── FlagIR.vue │ │ │ │ ├── FlagIS.vue │ │ │ │ ├── FlagIT.vue │ │ │ │ ├── FlagJE.vue │ │ │ │ ├── FlagJM.vue │ │ │ │ ├── FlagJO.vue │ │ │ │ ├── FlagJP.vue │ │ │ │ ├── FlagKE.vue │ │ │ │ ├── FlagKG.vue │ │ │ │ ├── FlagKH.vue │ │ │ │ ├── FlagKI.vue │ │ │ │ ├── FlagKM.vue │ │ │ │ ├── FlagKN.vue │ │ │ │ ├── FlagKP.vue │ │ │ │ ├── FlagKR.vue │ │ │ │ ├── FlagKW.vue │ │ │ │ ├── FlagKY.vue │ │ │ │ ├── FlagKZ.vue │ │ │ │ ├── FlagLA.vue │ │ │ │ ├── FlagLB.vue │ │ │ │ ├── FlagLC.vue │ │ │ │ ├── FlagLI.vue │ │ │ │ ├── FlagLK.vue │ │ │ │ ├── FlagLR.vue │ │ │ │ ├── FlagLS.vue │ │ │ │ ├── FlagLT.vue │ │ │ │ ├── FlagLU.vue │ │ │ │ ├── FlagLV.vue │ │ │ │ ├── FlagLY.vue │ │ │ │ ├── FlagMA.vue │ │ │ │ ├── FlagMC.vue │ │ │ │ ├── FlagMD.vue │ │ │ │ ├── FlagME.vue │ │ │ │ ├── FlagMF.vue │ │ │ │ ├── FlagMG.vue │ │ │ │ ├── FlagMH.vue │ │ │ │ ├── FlagMK.vue │ │ │ │ ├── FlagML.vue │ │ │ │ ├── FlagMM.vue │ │ │ │ ├── FlagMN.vue │ │ │ │ ├── FlagMO.vue │ │ │ │ ├── FlagMP.vue │ │ │ │ ├── FlagMQ.vue │ │ │ │ ├── FlagMR.vue │ │ │ │ ├── FlagMS.vue │ │ │ │ ├── FlagMT.vue │ │ │ │ ├── FlagMU.vue │ │ │ │ ├── FlagMV.vue │ │ │ │ ├── FlagMW.vue │ │ │ │ ├── FlagMX.vue │ │ │ │ ├── FlagMY.vue │ │ │ │ ├── FlagMZ.vue │ │ │ │ ├── FlagNA.vue │ │ │ │ ├── FlagNC.vue │ │ │ │ ├── FlagNE.vue │ │ │ │ ├── FlagNF.vue │ │ │ │ ├── FlagNG.vue │ │ │ │ ├── FlagNI.vue │ │ │ │ ├── FlagNL.vue │ │ │ │ ├── FlagNO.vue │ │ │ │ ├── FlagNP.vue │ │ │ │ ├── FlagNR.vue │ │ │ │ ├── FlagNU.vue │ │ │ │ ├── FlagNZ.vue │ │ │ │ ├── FlagOM.vue │ │ │ │ ├── FlagPA.vue │ │ │ │ ├── FlagPE.vue │ │ │ │ ├── FlagPF.vue │ │ │ │ ├── FlagPG.vue │ │ │ │ ├── FlagPH.vue │ │ │ │ ├── FlagPK.vue │ │ │ │ ├── FlagPL.vue │ │ │ │ ├── FlagPM.vue │ │ │ │ ├── FlagPN.vue │ │ │ │ ├── FlagPR.vue │ │ │ │ ├── FlagPS.vue │ │ │ │ ├── FlagPT.vue │ │ │ │ ├── FlagPW.vue │ │ │ │ ├── FlagPY.vue │ │ │ │ ├── FlagQA.vue │ │ │ │ ├── FlagRE.vue │ │ │ │ ├── FlagRO.vue │ │ │ │ ├── FlagRS.vue │ │ │ │ ├── FlagRU.vue │ │ │ │ ├── FlagRW.vue │ │ │ │ ├── FlagSA.vue │ │ │ │ ├── FlagSB.vue │ │ │ │ ├── FlagSC.vue │ │ │ │ ├── FlagSD.vue │ │ │ │ ├── FlagSE.vue │ │ │ │ ├── FlagSG.vue │ │ │ │ ├── FlagSH.vue │ │ │ │ ├── FlagSI.vue │ │ │ │ ├── FlagSJ.vue │ │ │ │ ├── FlagSK.vue │ │ │ │ ├── FlagSL.vue │ │ │ │ ├── FlagSM.vue │ │ │ │ ├── FlagSN.vue │ │ │ │ ├── FlagSO.vue │ │ │ │ ├── FlagSR.vue │ │ │ │ ├── FlagSS.vue │ │ │ │ ├── FlagST.vue │ │ │ │ ├── FlagSV.vue │ │ │ │ ├── FlagSX.vue │ │ │ │ ├── FlagSY.vue │ │ │ │ ├── FlagSZ.vue │ │ │ │ ├── FlagTA.vue │ │ │ │ ├── FlagTC.vue │ │ │ │ ├── FlagTD.vue │ │ │ │ ├── FlagTF.vue │ │ │ │ ├── FlagTG.vue │ │ │ │ ├── FlagTH.vue │ │ │ │ ├── FlagTJ.vue │ │ │ │ ├── FlagTK.vue │ │ │ │ ├── FlagTL.vue │ │ │ │ ├── FlagTM.vue │ │ │ │ ├── FlagTN.vue │ │ │ │ ├── FlagTO.vue │ │ │ │ ├── FlagTR.vue │ │ │ │ ├── FlagTT.vue │ │ │ │ ├── FlagTV.vue │ │ │ │ ├── FlagTW.vue │ │ │ │ ├── FlagTZ.vue │ │ │ │ ├── FlagUA.vue │ │ │ │ ├── FlagUG.vue │ │ │ │ ├── FlagUM.vue │ │ │ │ ├── FlagUS.vue │ │ │ │ ├── FlagUY.vue │ │ │ │ ├── FlagUZ.vue │ │ │ │ ├── FlagVA.vue │ │ │ │ ├── FlagVC.vue │ │ │ │ ├── FlagVE.vue │ │ │ │ ├── FlagVG.vue │ │ │ │ ├── FlagVI.vue │ │ │ │ ├── FlagVN.vue │ │ │ │ ├── FlagVU.vue │ │ │ │ ├── FlagWF.vue │ │ │ │ ├── FlagWS.vue │ │ │ │ ├── FlagXK.vue │ │ │ │ ├── FlagYE.vue │ │ │ │ ├── FlagYT.vue │ │ │ │ ├── FlagZA.vue │ │ │ │ ├── FlagZM.vue │ │ │ │ └── FlagZW.vue │ │ ├── input-group │ │ │ ├── config.ts │ │ │ └── input-group.vue │ │ ├── input │ │ │ ├── config.ts │ │ │ └── input.vue │ │ ├── misc │ │ │ ├── client-only.vue │ │ │ ├── fragment.vue │ │ │ ├── text-placeholder.vue │ │ │ └── transitionable.vue │ │ ├── phone-input │ │ │ ├── config.ts │ │ │ └── phone-input.vue │ │ ├── rich-radio-option │ │ │ ├── config.ts │ │ │ └── rich-radio-option.vue │ │ ├── rich-radio │ │ │ ├── config.ts │ │ │ └── rich-radio.vue │ │ ├── rich-select-option-image │ │ │ ├── config.ts │ │ │ └── rich-select-option-image.vue │ │ ├── rich-select-option-indicator │ │ │ ├── config.ts │ │ │ └── rich-select-option-indicator.vue │ │ ├── rich-select-tag-image │ │ │ ├── config.ts │ │ │ └── rich-select-tag-image.vue │ │ ├── rich-select │ │ │ ├── config.ts │ │ │ ├── partials │ │ │ │ ├── clear-button.vue │ │ │ │ ├── dropdown.vue │ │ │ │ ├── option-list.vue │ │ │ │ ├── option.vue │ │ │ │ ├── rich-select-state.vue │ │ │ │ ├── search.vue │ │ │ │ ├── state.vue │ │ │ │ ├── trigger-tags-tag.vue │ │ │ │ ├── trigger-tags.vue │ │ │ │ └── trigger.vue │ │ │ └── rich-select.vue │ │ ├── select │ │ │ ├── config.ts │ │ │ ├── option.vue │ │ │ └── select.vue │ │ ├── skeleton │ │ │ ├── config.ts │ │ │ └── skeleton.vue │ │ ├── slideover │ │ │ ├── config.ts │ │ │ └── slideover.vue │ │ ├── status-indicator │ │ │ ├── config.ts │ │ │ └── status-indicator.vue │ │ ├── tags-input │ │ │ ├── config.ts │ │ │ └── tags-input.vue │ │ ├── textarea │ │ │ ├── config.ts │ │ │ └── textarea.vue │ │ └── toggle │ │ │ ├── config.ts │ │ │ ├── toggle-group.vue │ │ │ └── toggle.vue │ ├── configuration.ts │ ├── core │ │ ├── config │ │ │ ├── common-classes.ts │ │ │ ├── index.ts │ │ │ ├── popper-options.ts │ │ │ └── transitions.ts │ │ ├── helpers │ │ │ ├── addToArray.ts │ │ │ ├── base64.ts │ │ │ ├── debounce.ts │ │ │ ├── elementIsTargetOrTargetChild.ts │ │ │ ├── filterOptions.ts │ │ │ ├── firstOf.ts │ │ │ ├── flattenOptions.ts │ │ │ ├── get.ts │ │ │ ├── getFocusableElements.ts │ │ │ ├── hasProperty.ts │ │ │ ├── hasSlot.ts │ │ │ ├── index.ts │ │ │ ├── isEqual.ts │ │ │ ├── isNumber.ts │ │ │ ├── isPrimitive.ts │ │ │ ├── isTouchOnlyDevice.ts │ │ │ ├── mergeClasses.ts │ │ │ ├── normalizeMeasure.ts │ │ │ ├── normalizeOptions.ts │ │ │ ├── normalizedOptionIsDisabled.ts │ │ │ ├── objectToArrayMap.ts │ │ │ ├── pick.ts │ │ │ ├── promisify.ts │ │ │ ├── promisifyFunctionResult.ts │ │ │ ├── ssr.ts │ │ │ ├── subtractFromArray.ts │ │ │ ├── throttle.ts │ │ │ ├── uniqueID.ts │ │ │ └── urlHelper.ts │ │ ├── types │ │ │ ├── components.ts │ │ │ ├── css-class.ts │ │ │ ├── index.ts │ │ │ ├── input-options.ts │ │ │ ├── misc.ts │ │ │ ├── options.ts │ │ │ └── variants.ts │ │ ├── use │ │ │ ├── index.ts │ │ │ ├── useActivableOption.ts │ │ │ ├── useAttributesAndProps.ts │ │ │ ├── useConfiguration.ts │ │ │ ├── useDefaultName.ts │ │ │ ├── useDynamicSlots.ts │ │ │ ├── useFetchData.ts │ │ │ ├── useFetchsOptions.ts │ │ │ ├── useInjectsClassesList.ts │ │ │ ├── useInjectsClassesListClass.ts │ │ │ ├── useInjectsConfiguration.ts │ │ │ ├── useMultipleOptions.ts │ │ │ ├── useMultipleVModel.ts │ │ │ ├── useParseVariant.ts │ │ │ ├── useReplacePlaceholders.ts │ │ │ ├── useSelectableOption.ts │ │ │ ├── useVModel.ts │ │ │ └── useVariantProps.ts │ │ └── utils │ │ │ ├── country-codes.ts │ │ │ └── index.ts │ ├── directives │ │ └── eager.ts │ ├── index.ts │ ├── plugin.ts │ └── types.ts │ ├── vite.config.ts │ └── webtypesconfig.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── postcss.config.cjs ├── tailwind.config.cjs └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | end_of_line = lf 3 | insert_final_newline = true 4 | 5 | [*.{js,jsx,ts,tsx,vue}] 6 | indent_style = space 7 | indent_size = 2 8 | trim_trailing_whitespace = true 9 | 10 | [*.{md}] 11 | indent_style = space 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | # Documentation 4 | - package-ecosystem: "npm" 5 | directory: "/packages/documentation" 6 | schedule: 7 | interval: "daily" 8 | 9 | # Vanilla components 10 | - package-ecosystem: "npm" 11 | directory: "/packages/vanilla-components" 12 | schedule: 13 | interval: "daily" 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | *.zip 4 | .idea 5 | .DS_Store 6 | .fleet/* 7 | documentation/.vitepress/dist 8 | documentation/.vitepress/cache 9 | documentation/.vitepress/lunr/lunr.cjs 10 | packages/.DS_Store 11 | packages/documentation/.DS_Store 12 | packages/documentation/src/.DS_Store 13 | packages/vanilla-components/.DS_Store 14 | packages/vanilla-components/presets 15 | packages/vanilla-components/components.d.ts 16 | packages/documentation/.vitepress/.DS_Store 17 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | ignore-workspace-root-check=true 2 | shamefully-hoist=true 3 | strict-peer-dependencies=false 4 | node-linker=hoisted 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flavorly/vanilla-components/f5c8d461acb63e19fc9b8e244599782bd4f2e721/CHANGELOG.md -------------------------------------------------------------------------------- /documentation/.vitepress/components/DynamicLayout.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 | -------------------------------------------------------------------------------- /documentation/.vitepress/components/FrameDefaultLayout.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /documentation/.vitepress/theme/styles/custom.css: -------------------------------------------------------------------------------- 1 | /* Fix for code blocks' one-too-many line */ 2 | .vp-doc pre code > span:last-of-type { 3 | display: none; 4 | } 5 | 6 | /* Add missing PHP in code blocks */ 7 | .vp-doc [class~='language-php']::before { 8 | content: 'php'; 9 | } 10 | 11 | .vp-doc td{ 12 | font-size:13px; 13 | line-height: 13px; 14 | } 15 | 16 | .demo-container{ 17 | border-radius: 4px; 18 | border: 1px solid rgba(0, 0, 0, .1); 19 | -webkit-background-clip: padding-box; 20 | background-clip: padding-box; 21 | overflow: hidden; 22 | } 23 | 24 | pre { 25 | position: relative; 26 | } 27 | 28 | .DocSearch-Input:focus { 29 | -webkit-box-shadow: none; 30 | -moz-box-shadow: none; 31 | box-shadow: none; 32 | outline: none !important; 33 | } 34 | 35 | .DocSearch-Input{ 36 | background-color: unset; 37 | } 38 | 39 | -------------------------------------------------------------------------------- /documentation/.vitepress/theme/styles/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /documentation/.vitepress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "lib": ["esnext", "dom", "dom.iterable"], 6 | "moduleResolution": "node", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "strictNullChecks": true, 10 | "resolveJsonModule": true, 11 | "skipDefaultLibCheck": true, 12 | "types": [ 13 | "vite/client", 14 | "unplugin-icons/types/vue" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /documentation/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '@vue/theme/config' { 4 | import { UserConfig } from 'vitepress' 5 | const config: () => Promise 6 | export default config 7 | } 8 | 9 | declare module '@vue/theme/highlight' { 10 | const createHighlighter: () => Promise<(input: string) => string> 11 | export default createHighlighter 12 | } 13 | -------------------------------------------------------------------------------- /documentation/src/components/DemoComponent.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /documentation/src/components/DemoComponentConfig.ts: -------------------------------------------------------------------------------- 1 | import type { InputHTMLAttributes } from 'vue' 2 | import type { Data, WithVariantPropsAndClassesList } from '@flavorly/vanilla-components' 3 | 4 | export const myOwnComponentConfig = { 5 | fixedClasses: { 6 | someClassYouWant: 'i-will-be-a-fixed-class', 7 | }, 8 | 9 | // Default appearance 10 | classes: { 11 | someClassYouWant: 'bg-indigo-100', 12 | }, 13 | 14 | // Variants 15 | variants: { 16 | 17 | // Used for Errors 18 | error: { 19 | classes: { 20 | someClassYouWant: 'bg-red-100', 21 | }, 22 | }, 23 | 24 | // More variants can go here 25 | }, 26 | } 27 | 28 | export const myOwnComponentClassesKeys = Object.keys(myOwnComponentConfig.classes) 29 | 30 | export declare type MyOwnComponentClassesValidKeys = keyof typeof myOwnComponentConfig.classes 31 | 32 | export declare type MyOwnComponentProps = WithVariantPropsAndClassesList<{ 33 | type?: string 34 | placeholder?: string 35 | } & InputHTMLAttributes & Data, MyOwnComponentClassesValidKeys> 36 | 37 | -------------------------------------------------------------------------------- /documentation/src/components/ExampleAvatar.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | -------------------------------------------------------------------------------- /documentation/src/components/ExampleCountryInput.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 28 | -------------------------------------------------------------------------------- /documentation/src/components/ExampleForms.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /documentation/src/components/ExampleFormsSection.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 31 | -------------------------------------------------------------------------------- /documentation/src/components/ExampleSkeleton.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 20 | -------------------------------------------------------------------------------- /documentation/src/components/ExampleStatusIndicator.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /documentation/src/components/PreviewWrapper.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | -------------------------------------------------------------------------------- /documentation/src/frames/default.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flavorly/vanilla-components/f5c8d461acb63e19fc9b8e244599782bd4f2e721/documentation/src/frames/default.md -------------------------------------------------------------------------------- /documentation/src/guide/advanced-ide.md: -------------------------------------------------------------------------------- 1 | --- 2 | outline: deep 3 | --- 4 | 5 | # IDE Configuration 6 | 7 | If you are using Vscode you should have nothing to worry about, it will automatically detect the components and provide you with the correct intellisense. 8 | But if you are using PHPStorm there is some things you should be aware of. 9 | 10 | ## Vscode / Code 11 | 12 | Nothing to add here, should work out of the box. 13 | 14 | ## PHPStorm 15 | 16 | Sometimes PHPstorm doesnt understand the `components.d.ts` generated by unplugin, specially if you are using `pnpm` as a workaround 17 | please create a file on your project root with the name `.npmrc` and add the following content: 18 | 19 | ```ini 20 | public-hoist-pattern[]=@vue* 21 | shamefully-hoist=true 22 | ``` 23 | 24 | Recently we have added support for [Webtypes](https://github.com/JetBrains/) :pray: so for latest versions of Jetbrains IDE you should get full support for the components when it comes to illentisense and auto import. 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /documentation/src/guide/components/skeleton.md: -------------------------------------------------------------------------------- 1 | --- 2 | outline: deep 3 | --- 4 | 5 | # Skeleton Loaders 6 | 7 | The skeleton loaders are used to display a busy state of your app, and fill the white gaps with a nice animation. 8 | 9 | 10 | 11 | 12 | 13 | :::details :surfer: Click to expand the code 14 | <<< @/components/ExampleSkeleton.vue 15 | ::: 16 | 17 | 18 | 19 | | Prop | Description | Accepted Values | Default | 20 | |:--------|:------------------------------|:----------------|:--------| 21 | | `count` | Number of elements to render | `Number` | `1` | 22 | | `as` | Tag or component to render as | `String` | `div` | 23 | -------------------------------------------------------------------------------- /documentation/src/guide/components/status-indicator.md: -------------------------------------------------------------------------------- 1 | --- 2 | outline: deep 3 | --- 4 | 5 | # Status Indicator 6 | 7 | Little status indicators, with pulse animation, able to be used in any context, like buttons, cards, etc. 8 | 9 | 10 | 11 | 12 | 13 | :::details :surfer: Click to expand the code 14 | <<< @/components/ExampleStatusIndicator.vue 15 | ::: 16 | 17 | 18 | 19 | | Prop | Description | Accepted Values | Default | 20 | |:--------|:-------------------------------|:----------------|:--------| 21 | | `pulse` | Enable/Disable pulse animation | `boolean` | `false` | 22 | -------------------------------------------------------------------------------- /documentation/src/guide/examples-form-sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | outline: deep 3 | --- 4 | 5 | # Form Sections 6 | 7 | 8 | -------------------------------------------------------------------------------- /documentation/src/json/demo-request.json: -------------------------------------------------------------------------------- 1 | { 2 | "search":"An Amazing Search query", 3 | "perPage":5, 4 | "selected":[ 5 | "1", 6 | "2", 7 | "3", 8 | ], 9 | "selectedAll":false, 10 | "filters":{ 11 | "id":"10" 12 | }, 13 | "sorting":[ 14 | { 15 | "column":"gateway", 16 | "direction":"desc", 17 | "sortedTimes":1 18 | } 19 | ], 20 | "action":"delete-items" 21 | } 22 | -------------------------------------------------------------------------------- /documentation/src/parts/events-model-value.md: -------------------------------------------------------------------------------- 1 | | `update:modelValue` | When the value changes | `any` | 2 | -------------------------------------------------------------------------------- /documentation/src/parts/frame.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flavorly/vanilla-components/f5c8d461acb63e19fc9b8e244599782bd4f2e721/documentation/src/parts/frame.md -------------------------------------------------------------------------------- /documentation/src/parts/slots-default-binds.md: -------------------------------------------------------------------------------- 1 | | `errors` | The errors being injected | `[String, Array, Undefined]` | 2 | | `feedback` | The feedback message | `[String, Undefined]` | 3 | | `hasErrors` | If it has errors | `Boolean` | 4 | -------------------------------------------------------------------------------- /documentation/src/parts/slots-feedback-errors.md: -------------------------------------------------------------------------------- 1 | ### Slot `errors` 2 | 3 | Slot that holds the error messages when the component `errors` prop is defined. 4 | 5 | | Attribute | Description | Type | 6 | |:------------|:--------------------------|:-----------------------------| 7 | | `errors` | The errors being injected | `[String, Array, Undefined]` | 8 | | `feedback` | The feedback message | `[String, Undefined]` | 9 | | `hasErrors` | If it has errors | `Boolean` | 10 | 11 | ### Slot `feedback` 12 | 13 | Slot that holds the feedback messages when the component `feedback` prop is defined. 14 | When showing errors the feedback will be hidden by default, and vice-versa. 15 | 16 | | Attribute | Description | Type | 17 | |:------------|:--------------------------|:-----------------------------| 18 | | `errors` | The errors being injected | `[String, Array, Undefined]` | 19 | | `feedback` | The feedback message | `[String, Undefined]` | 20 | | `hasErrors` | If it has errors | `Boolean` | 21 | -------------------------------------------------------------------------------- /documentation/src/parts/title-events.md: -------------------------------------------------------------------------------- 1 | ## Events :metro: 2 | 3 | Here you may find the events emitted by this component. 4 | -------------------------------------------------------------------------------- /documentation/src/parts/title-expose.md: -------------------------------------------------------------------------------- 1 | ## Methods Exposed :surfer: 2 | 3 | Here you may find the list of the methods/functions exposed by the component. 4 | -------------------------------------------------------------------------------- /documentation/src/parts/title-preview.md: -------------------------------------------------------------------------------- 1 | ## Preview & Playground :framed_picture: 2 | 3 | Here you may find a preview of the component, with error & possible variants. 4 | -------------------------------------------------------------------------------- /documentation/src/parts/title-props.md: -------------------------------------------------------------------------------- 1 | ## Props :inbox_tray: 2 | 3 | Props available for this component extending the default variant & global props. 4 | -------------------------------------------------------------------------------- /documentation/src/parts/title-slots.md: -------------------------------------------------------------------------------- 1 | ## Slots :dna: 2 | 3 | Current slots available for this component are the following: 4 | -------------------------------------------------------------------------------- /documentation/src/parts/title-snippet.md: -------------------------------------------------------------------------------- 1 | ## Snippet :surfer: 2 | 3 | Here you may find a preview of the component, with error & possible variants. 4 | -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/DateTimeInput.json: -------------------------------------------------------------------------------- 1 | { 2 | "fixedClasses": { 3 | "wrapper": "relative items-center justify-between focus:z-10", 4 | "clearButton": "absolute flex items-center justify-center dark:text-gray-700 text-gray-300 rounded mr-3 hover:bg-gray-100 hover:text-gray-400 dark:hover:bg-gray-700 focus:ring-opacity-70 top-1/2 right-0 transform -translate-y-1/2 focus:outline-none focus:ring-2 dark:focus:ring-offset-gray-900 focus:ring-primary-600 w-5 h-5 transition duration-100 ease-in-out" 5 | }, 6 | "classes": { 7 | "wrapper": "", 8 | "clearButton": "" 9 | } 10 | } -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/FormErrors.json: -------------------------------------------------------------------------------- 1 | { 2 | "fixedClasses": { 3 | "label": "", 4 | "labelInner": "leading-none", 5 | "errors": "", 6 | "feedback": "", 7 | "section": "", 8 | "sectionDivided": "", 9 | "sectionSpaced": "", 10 | "sectionFilled": "", 11 | "disabled": "opacity-60 select-none cursor-not-allowed " 12 | }, 13 | "classes": { 14 | "label": "block font-medium text-sm text-gray-700 dark:text-white cursor-pointer mb-1 flex items-center justify-center space-x-1", 15 | "labelInner": "", 16 | "errors": "mt-2 text-xs text-red-400 placeholder-red-400", 17 | "feedback": "mt-1 text-xs text-gray-500 opacity-75 dark:text-gray-400 cursor-pointer", 18 | "section": "", 19 | "sectionDivided": "divide-y divide-gray-200 dark:divide-gray-700", 20 | "sectionSpaced": "space-y-2", 21 | "sectionFilled": "bg-gray-50 dark:bg-gray-800/50", 22 | "disabled": "" 23 | } 24 | } -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/FormFeedback.json: -------------------------------------------------------------------------------- 1 | { 2 | "fixedClasses": { 3 | "label": "", 4 | "labelInner": "leading-none", 5 | "errors": "", 6 | "feedback": "", 7 | "section": "", 8 | "sectionDivided": "", 9 | "sectionSpaced": "", 10 | "sectionFilled": "", 11 | "disabled": "opacity-60 select-none cursor-not-allowed " 12 | }, 13 | "classes": { 14 | "label": "block font-medium text-sm text-gray-700 dark:text-white cursor-pointer mb-1 flex items-center justify-center space-x-1", 15 | "labelInner": "", 16 | "errors": "mt-2 text-xs text-red-400 placeholder-red-400", 17 | "feedback": "mt-1 text-xs text-gray-500 opacity-75 dark:text-gray-400 cursor-pointer", 18 | "section": "", 19 | "sectionDivided": "divide-y divide-gray-200 dark:divide-gray-700", 20 | "sectionSpaced": "space-y-2", 21 | "sectionFilled": "bg-gray-50 dark:bg-gray-800/50", 22 | "disabled": "" 23 | } 24 | } -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/FormLabel.json: -------------------------------------------------------------------------------- 1 | { 2 | "fixedClasses": { 3 | "label": "", 4 | "labelInner": "leading-none", 5 | "errors": "", 6 | "feedback": "", 7 | "section": "", 8 | "sectionDivided": "", 9 | "sectionSpaced": "", 10 | "sectionFilled": "", 11 | "disabled": "opacity-60 select-none cursor-not-allowed " 12 | }, 13 | "classes": { 14 | "label": "block font-medium text-sm text-gray-700 dark:text-white cursor-pointer mb-1 flex items-center justify-center space-x-1", 15 | "labelInner": "", 16 | "errors": "mt-2 text-xs text-red-400 placeholder-red-400", 17 | "feedback": "mt-1 text-xs text-gray-500 opacity-75 dark:text-gray-400 cursor-pointer", 18 | "section": "", 19 | "sectionDivided": "divide-y divide-gray-200 dark:divide-gray-700", 20 | "sectionSpaced": "space-y-2", 21 | "sectionFilled": "bg-gray-50 dark:bg-gray-800/50", 22 | "disabled": "" 23 | } 24 | } -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/FormSection.json: -------------------------------------------------------------------------------- 1 | { 2 | "fixedClasses": { 3 | "label": "", 4 | "labelInner": "leading-none", 5 | "errors": "", 6 | "feedback": "", 7 | "section": "", 8 | "sectionDivided": "", 9 | "sectionSpaced": "", 10 | "sectionFilled": "", 11 | "disabled": "opacity-60 select-none cursor-not-allowed " 12 | }, 13 | "classes": { 14 | "label": "block font-medium text-sm text-gray-700 dark:text-white cursor-pointer mb-1 flex items-center justify-center space-x-1", 15 | "labelInner": "", 16 | "errors": "mt-2 text-xs text-red-400 placeholder-red-400", 17 | "feedback": "mt-1 text-xs text-gray-500 opacity-75 dark:text-gray-400 cursor-pointer", 18 | "section": "", 19 | "sectionDivided": "divide-y divide-gray-200 dark:divide-gray-700", 20 | "sectionSpaced": "space-y-2", 21 | "sectionFilled": "bg-gray-50 dark:bg-gray-800/50", 22 | "disabled": "" 23 | } 24 | } -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/PhoneInput.json: -------------------------------------------------------------------------------- 1 | { 2 | "fixedClasses": { 3 | "wrapper": "relative", 4 | "inputsContainer": "rounded-lg -space-y-px", 5 | "input": { 6 | "fixedClasses": { 7 | "addonBeforeInputClasses": "pl-12" 8 | } 9 | } 10 | }, 11 | "classes": { 12 | "wrapper": "", 13 | "inputsContainer": "", 14 | "input": { 15 | "fixedClasses": { 16 | "addonBeforeInputClasses": "" 17 | } 18 | } 19 | }, 20 | "variants": { 21 | "error": { 22 | "input": { 23 | "fixedClasses": { 24 | "addonBeforeInputClasses": "" 25 | } 26 | } 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/RichRadio.json: -------------------------------------------------------------------------------- 1 | { 2 | "fixedClasses": { 3 | "container": "relative flex-1", 4 | "optionContainer": "rounded-lg", 5 | "optionContainerSeparated": "space-y-2", 6 | "optionContainerNonSeparated": "-space-y-px", 7 | "optionWrapper": "outline-none focus:outline-none" 8 | }, 9 | "classes": { 10 | "wrapper": "", 11 | "container": "", 12 | "optionContainer": "", 13 | "optionContainerSeparated": "", 14 | "optionContainerNonSeparated": "", 15 | "optionWrapper": "" 16 | }, 17 | "variants": { 18 | "error": { 19 | "classes": { 20 | "wrapper": "", 21 | "container": "", 22 | "optionContainer": "", 23 | "optionContainerSeparated": "", 24 | "optionContainerNonSeparated": "", 25 | "optionWrapper": "" 26 | } 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/RichSelectOptionWithImage.json: -------------------------------------------------------------------------------- 1 | { 2 | "classes": { 3 | "wrapper": "relative group", 4 | "disabled": "opacity-50 cursor-not-allowed", 5 | "labelAndImageWrapper": "relative", 6 | "labelAndImageContainer": "flex items-center space-x-2 text-sm block", 7 | "labelAndImageContainerSelected": "font-semibold", 8 | "labelAndImageContainerRegular": "font-normal", 9 | "image": "flex-shrink-0 w-6 h-6 bg-gray-500 dark:bg-gray-800 bg-center bg-cover rounded-full border border-gray-300 dark:border-gray-500 shadow", 10 | "label": "block whitespace-nowrap truncate", 11 | "description": "w-100 text-xs text-left mt-1 truncate", 12 | "descriptionSelected": "font-normal opacity-60", 13 | "descriptionRegular": "opacity-60", 14 | "selectedIconContainer": "absolute inset-y-0 right-0 flex items-center pl-3 pr-3 text-primary-600", 15 | "icon": "w-5 h-5" 16 | } 17 | } -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/RichSelectOptionWithIndicators.json: -------------------------------------------------------------------------------- 1 | { 2 | "classes": { 3 | "wrapper": "relative group", 4 | "disabled": "opacity-50 cursor-not-allowed", 5 | "labelAndImageWrapper": "relative", 6 | "labelAndImageContainer": "flex items-center space-x-2 text-sm block", 7 | "labelAndImageContainerSelected": "font-semibold", 8 | "labelAndImageContainerRegular": "font-normal", 9 | "indicator": "flex-shrink-0 inline-block h-2 w-2 rounded-full", 10 | "label": "block whitespace-nowrap truncate", 11 | "description": "w-100 text-xs text-left mt-1", 12 | "descriptionSelected": "font-normal opacity-60", 13 | "descriptionRegular": "opacity-60", 14 | "selectedIconContainer": "absolute inset-y-0 right-0 flex items-center pl-3 pr-3 text-primary-600", 15 | "icon": "w-5 h-5", 16 | "indicatorGreen": "bg-green-400", 17 | "indicatorGray": "bg-gray-200", 18 | "indicatorRed": "bg-red-400", 19 | "indicatorYellow": "bg-yellow-400", 20 | "indicatorBlue": "bg-blue-400" 21 | } 22 | } -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/RichSelectTagWithImage.json: -------------------------------------------------------------------------------- 1 | { 2 | "classes": { 3 | "wrapper": "relative group", 4 | "disabled": "opacity-50 cursor-not-allowed", 5 | "labelAndImageWrapper": "relative", 6 | "labelAndImageContainer": "flex items-center space-x-2 text-sm block", 7 | "labelAndImageContainerSelected": "font-semibold", 8 | "labelAndImageContainerRegular": "font-normal", 9 | "image": "flex-shrink-0 w-6 h-6 bg-gray-500 dark:bg-gray-800 bg-center bg-cover rounded-full border border-gray-300 dark:border-gray-500 shadow", 10 | "label": "block whitespace-nowrap truncate font-semibold" 11 | } 12 | } -------------------------------------------------------------------------------- /documentation/src/presets/tailwind/SkeletonBar.json: -------------------------------------------------------------------------------- 1 | { 2 | "fixedClasses": { 3 | "wrapper": "animate-pulse space-y-1", 4 | "class": "" 5 | }, 6 | "classes": { 7 | "wrapper": "", 8 | "class": "h-5 rounded w-full bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-500 dark:to-gray-700" 9 | }, 10 | "variants": { 11 | "vanilla": { 12 | "classes": { 13 | "class": "bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-500 dark:to-gray-700" 14 | } 15 | }, 16 | "bar": { 17 | "classes": { 18 | "class": "h-5 rounded w-full bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-500 dark:to-gray-700" 19 | } 20 | }, 21 | "circle": { 22 | "classes": { 23 | "wrapper": "", 24 | "class": "h-5 w-5 rounded-full bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-500 dark:to-gray-700" 25 | } 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /documentation/src/public/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flavorly/vanilla-components/f5c8d461acb63e19fc9b8e244599782bd4f2e721/documentation/src/public/banner.png -------------------------------------------------------------------------------- /documentation/src/public/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /documentation/src/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flavorly/vanilla-components/f5c8d461acb63e19fc9b8e244599782bd4f2e721/documentation/src/public/favicon.ico -------------------------------------------------------------------------------- /documentation/src/public/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flavorly/vanilla-components/f5c8d461acb63e19fc9b8e244599782bd4f2e721/documentation/src/public/icon.png -------------------------------------------------------------------------------- /documentation/src/public/seo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flavorly/vanilla-components/f5c8d461acb63e19fc9b8e244599782bd4f2e721/documentation/src/public/seo.png -------------------------------------------------------------------------------- /documentation/src/public/symbol-bg-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /documentation/src/public/symbol-bg-gradient.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /documentation/src/public/symbol-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /documentation/src/public/symbol-gradient.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /documentation/src/public/symbol-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /documentation/src/snippets/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const colors = require('tailwindcss/colors') 2 | 3 | /** @type {import('tailwindcss').Config} */ 4 | module.exports = { 5 | mode: 'jit', 6 | darkMode: 'class', 7 | content: [ 8 | // Add our default tailwind preset to the content list 9 | './node_modules/@flavorly/vanilla-components/dist/presets/tailwind/all.json', // [!code focus:1] 10 | ], 11 | theme: { 12 | extend: { 13 | colors: { 14 | // Set your primary color 15 | primary: colors.indigo, // [!code focus:1] 16 | }, 17 | }, 18 | }, 19 | plugins: [ 20 | require('@tailwindcss/typography'), 21 | require('@tailwindcss/aspect-ratio'), 22 | 23 | // Forms plugin is required if you are using the tailwind preset 24 | require('@tailwindcss/forms'), // [!code focus:1] 25 | ], 26 | } 27 | -------------------------------------------------------------------------------- /packages/vanilla-components-hybridly/build.config.ts: -------------------------------------------------------------------------------- 1 | import { defineBuildConfig } from 'unbuild' 2 | 3 | export default defineBuildConfig({ 4 | entries: [ 5 | { builder: 'mkdist', input: './src/' }, 6 | { builder: 'mkdist', input: './src/', format: 'cjs', ext: 'js' }, 7 | ], 8 | dependencies: [ 9 | '@flavorly/vanilla-components', 10 | 'hybridly', 11 | ], 12 | declaration: true, 13 | clean: true, 14 | }) 15 | -------------------------------------------------------------------------------- /packages/vanilla-components-hybridly/src/index.ts: -------------------------------------------------------------------------------- 1 | export { default as useHybridlyDatatable } from './useHybridlyDatatable' 2 | -------------------------------------------------------------------------------- /packages/vanilla-components-inertia/build.config.ts: -------------------------------------------------------------------------------- 1 | import { defineBuildConfig } from 'unbuild' 2 | 3 | export default defineBuildConfig({ 4 | entries: [ 5 | { builder: 'mkdist', input: './src/' }, 6 | { builder: 'mkdist', input: './src/', format: 'cjs', ext: 'js' }, 7 | ], 8 | dependencies: [ 9 | '@flavorly/vanilla-components', 10 | '@inertiajs/vue3', 11 | ], 12 | declaration: true, 13 | clean: true, 14 | }) 15 | -------------------------------------------------------------------------------- /packages/vanilla-components-inertia/src/index.ts: -------------------------------------------------------------------------------- 1 | export { default as useInertiaDatatable } from './useInertiaDatatable' 2 | -------------------------------------------------------------------------------- /packages/vanilla-components/build.config.ts: -------------------------------------------------------------------------------- 1 | import { defineBuildConfig } from 'unbuild' 2 | 3 | // import DefineOptions from 'unplugin-vue-define-options/rollup' 4 | import * as pkg from './package.json' 5 | 6 | export default defineBuildConfig({ 7 | entries: [ 8 | { builder: 'mkdist', input: './src/' }, 9 | { builder: 'mkdist', input: './src/', format: 'cjs', ext: 'js' }, 10 | ], 11 | dependencies: [...Object.keys(pkg.dependencies || {})], 12 | peerDependencies: [...Object.keys(pkg.peerDependencies || {})], 13 | declaration: true, 14 | clean: true, 15 | externals: [ 16 | 'vue', 17 | 'vite', 18 | 'v-calendar', 19 | '@headlessui/vue', 20 | '@popperjs/core', 21 | ], 22 | hooks: { 23 | 'rollup:options': function (_ctx, options) { 24 | // options.plugins?.push(DefineOptions()) 25 | }, 26 | }, 27 | rollup: { 28 | 29 | }, 30 | }) 31 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/card/card-empty.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 18 | 19 | 26 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/datatable/utils/fetch-data.ts: -------------------------------------------------------------------------------- 1 | import type * as Types from '../config' 2 | import { useFetchData } from '../../../core/use' 3 | 4 | const fetchData = ( 5 | config: T, 6 | data: Data, 7 | options: P, 8 | ): Types.DatatableFetchDataPromise => { 9 | const isAction = data.action !== null 10 | const method = isAction ? config?.actionsMethod : config?.fetchMethod 11 | const url = isAction ? config?.actionsEndpoint : config?.fetchEndpoint 12 | const postParams = method === 'POST' ? data : {} 13 | const queryParams = method === 'GET' ? data : {} 14 | 15 | const finalOptions = { 16 | method, 17 | body: JSON.stringify(postParams), 18 | ...options, 19 | } 20 | return useFetchData(url, queryParams, finalOptions) 21 | } 22 | 23 | export default fetchData 24 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/datatable/utils/index.ts: -------------------------------------------------------------------------------- 1 | export { default as useConfigurationBuilder } from './configuration-builder' 2 | export { default as useValidator } from './validator' 3 | export { default as useFetchData } from './fetch-data' 4 | export { default as useInjectDatatableConfiguration } from './inject-configuration' 5 | export { default as useInjectDatatableTranslations } from './inject-translations' 6 | 7 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/datatable/utils/inject-configuration.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedRef } from 'vue' 2 | import { computed, inject } from 'vue' 3 | import type * as Types from '../config' 4 | 5 | export default function injectDatatableConfiguration(): ComputedRef { 6 | const configuration = inject('datatable_configuration') 7 | return computed((): Types.DatatableConfiguration => configuration) 8 | } 9 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/datatable/utils/inject-translations.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedRef } from 'vue' 2 | import { computed, inject } from 'vue' 3 | import type * as Types from '../config' 4 | 5 | export default function injectTranslations(): ComputedRef { 6 | const configuration = inject('datatable_configuration') 7 | return computed((): Types.DatatableTranslations => configuration.translations || {}) 8 | } 9 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/datatable/utils/validator.ts: -------------------------------------------------------------------------------- 1 | import type * as Types from '../config' 2 | 3 | const validator = (config: Types.DatatableConfiguration) => { 4 | // Validate if columns exists 5 | if (typeof config?.columns === 'undefined' || config?.columns === null || config?.columns.length <= 0) { 6 | throw new Error('You must define the columns for this table') 7 | } 8 | 9 | // Ensure all columns have a name 10 | config?.columns.forEach((column: Types.DatatableColumn) => { 11 | if (!column.name) { 12 | throw new Error(`You must define a name for this column ${column.name}`) 13 | } 14 | }) 15 | 16 | // Ensure we have either a callback for fecth data or endpoints are set 17 | if (config?.fetchData === undefined && (config?.fetchEndpoint === undefined || config?.actionsEndpoint === undefined)) { 18 | throw new Error('You must define fetchData function to fetch the data or fetchEndpoint & actionsEndpoint to allow the default function to take care of it.') 19 | } 20 | } 21 | 22 | export default validator 23 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/datetime-input/baseProps.ts: -------------------------------------------------------------------------------- 1 | import { useVariantProps } from '../../core/use' 2 | import type { DateTimeInputClassesValidKeys, DateTimeInputProps } from './config' 3 | 4 | export const baseProps = { 5 | ...useVariantProps(), 6 | modelValue: { 7 | type: [String, Object, Number, Array, undefined], 8 | }, 9 | color: { 10 | type: String, 11 | default: 'indigo', 12 | }, 13 | placeholder: { 14 | type: String, 15 | default: '', 16 | }, 17 | inline: { 18 | type: Boolean, 19 | default: false, 20 | }, 21 | inputProps: { 22 | type: Object, 23 | default: () => {}, 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAE.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAF.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAG.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAL.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAM.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAQ.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAR.vue: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAS.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAT.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAW.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAX.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagAZ.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBB.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBD.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBE.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBF.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBG.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBH.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBI.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBJ.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBO.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBQ.vue: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBR.vue: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBS.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBT.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBV.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBW.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBY.vue: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagBZ.vue: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCA.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCD.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCF.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCG.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCH.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCI.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCL.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCM.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCN.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCO.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCR.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCU.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCW.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagCZ.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagDE.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagDJ.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagDK.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagDO.vue: -------------------------------------------------------------------------------- 1 | 38 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagDZ.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagEC.vue: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagEE.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagEG.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagEH.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagER.vue: -------------------------------------------------------------------------------- 1 | 44 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagES.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagET.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagFI.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagFJ.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagFM.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagFO.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagFR.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGA.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGE.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGEOS.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGF.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGG.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGH.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGL.vue: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGM.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGN.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGP.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGR.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGT.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGW.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagGY.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagHN.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagHT.vue: -------------------------------------------------------------------------------- 1 | 35 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagHU.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagID.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagIE.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagIL.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagIN.vue: -------------------------------------------------------------------------------- 1 | 32 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagIQ.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagIS.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagIT.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagJE.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagJM.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagJO.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagJP.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagKG.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagKH.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagKN.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagKP.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagKW.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagLA.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagLB.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagLC.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagLI.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagLR.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagLS.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagLT.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagLU.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagLV.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagLY.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMA.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMC.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMD.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMF.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMG.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMH.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMK.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagML.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMM.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMN.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMP.vue: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMR.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMT.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMU.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMV.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMW.vue: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMX.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMY.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagMZ.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagNA.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagNC.vue: -------------------------------------------------------------------------------- 1 | 37 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagNE.vue: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagNF.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagNG.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagNI.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagNL.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagNO.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagNP.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagNR.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagOM.vue: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPA.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPE.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPF.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPH.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPK.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPL.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPM.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPR.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPS.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPT.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPW.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagPY.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagQA.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagRE.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagRO.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagRU.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagRW.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSB.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSC.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSD.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSE.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSI.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSJ.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSL.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSN.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSO.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSR.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSS.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagST.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSV.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSX.vue: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSY.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagSZ.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTD.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTF.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTG.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTH.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTK.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTL.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTN.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTO.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTR.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTT.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTW.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagTZ.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagUA.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagUY.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagVA.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagVC.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagVE.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagVN.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagVU.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagWF.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagWS.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagYE.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagZA.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/icons/flags/FlagZM.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/misc/client-only.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/misc/fragment.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/misc/text-placeholder.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 24 | 25 | 33 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/misc/transitionable.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 24 | 25 | 39 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/rich-select/partials/clear-button.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/components/rich-select/partials/trigger-tags.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 36 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/config/index.ts: -------------------------------------------------------------------------------- 1 | export * from './common-classes' 2 | export * from './popper-options' 3 | export * from './transitions' 4 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/config/transitions.ts: -------------------------------------------------------------------------------- 1 | export const enterAndLeave = { 2 | enterActiveClass: 'transition-opacity duration-100 ease-out', 3 | enterFromClass: 'transform scale-95 opacity-0', 4 | enterToClass: 'transform scale-100 opacity-100', 5 | leaveActiveClass: 'transition-opacity duration-100 ease-in', 6 | leaveFromClass: 'transform scale-100 opacity-100', 7 | leaveToClass: 'transform scale-95 opacity-0', 8 | } 9 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/addToArray.ts: -------------------------------------------------------------------------------- 1 | const addToArray =

>(arr: any, value: any): P => { 2 | if (!Array.isArray(arr)) { 3 | return [value] as P 4 | } 5 | 6 | return [...arr, value] as P 7 | } 8 | 9 | export default addToArray 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/debounce.ts: -------------------------------------------------------------------------------- 1 | import type { DebounceFn, DebouncedFn } from '../types' 2 | 3 | const debounce = (func: (...args: any[]) => void, wait = 200): DebouncedFn => { 4 | let timeout: ReturnType | undefined 5 | 6 | const cancel: () => void = () => { 7 | if (timeout) { 8 | clearTimeout(timeout) 9 | } 10 | } 11 | 12 | const debounceFn: DebounceFn = (...args: any[]) => { 13 | cancel() 14 | 15 | timeout = setTimeout(() => { 16 | timeout = undefined 17 | func(args) 18 | }, wait) 19 | 20 | if (!wait) { 21 | func(args) 22 | } 23 | } 24 | 25 | return Object.assign(debounceFn, { cancel }) 26 | } 27 | 28 | export default debounce 29 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/elementIsTargetOrTargetChild.ts: -------------------------------------------------------------------------------- 1 | const elementIsTargetOrTargetChild = (target: EventTarget | null, wrapper: HTMLElement): boolean => { 2 | if (!(target instanceof Element)) { 3 | return false 4 | } 5 | 6 | return wrapper.contains(target) 7 | } 8 | 9 | export default elementIsTargetOrTargetChild 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/filterOptions.ts: -------------------------------------------------------------------------------- 1 | import type { NormalizedOption, NormalizedOptions } from '../types' 2 | 3 | const filterOptions = (options: NormalizedOptions, query: string): NormalizedOptions => { 4 | if (query === '') { 5 | return options 6 | } 7 | 8 | return options 9 | .map((option: NormalizedOption): NormalizedOption => { 10 | if (option.children) { 11 | const newOption: NormalizedOption = { 12 | ...option, 13 | ...{ 14 | children: filterOptions(option.children, query), 15 | }, 16 | } 17 | return newOption 18 | } 19 | 20 | return option 21 | }).filter((option: NormalizedOption): boolean => { 22 | const foundText = String(option.text) 23 | .toUpperCase() 24 | .trim() 25 | .includes(query.toUpperCase().trim()) 26 | 27 | const hasChildren = option.children && option.children.length > 0 28 | 29 | return hasChildren || foundText 30 | }) 31 | } 32 | 33 | export default filterOptions 34 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/firstOf.ts: -------------------------------------------------------------------------------- 1 | const firstOf = (object: object | string []) => { 2 | // @ts-expect-error 3 | return object[Object.keys(object)[0]] 4 | } 5 | export default firstOf 6 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/flattenOptions.ts: -------------------------------------------------------------------------------- 1 | import type { NormalizedOption, NormalizedOptions } from '../types' 2 | 3 | const flattenOptions = (options: NormalizedOptions): NormalizedOptions => options.flatMap((option: NormalizedOption) => { 4 | if (option.children) { 5 | return flattenOptions(option.children) 6 | } 7 | 8 | return option 9 | }) 10 | 11 | export default flattenOptions 12 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/get.ts: -------------------------------------------------------------------------------- 1 | const get = (object: T, path: string | number | symbol, defaultValue?: unknown): K | undefined => { 2 | const result = String(path) 3 | .replace(/\[/g, '.') 4 | .replace(/\]/g, '') 5 | .split('.') 6 | .reduce((objectSoFar: T | any, step: string) => { 7 | if (typeof objectSoFar === 'object' || Array.isArray(objectSoFar)) { 8 | return objectSoFar[step] 9 | } 10 | 11 | return undefined 12 | }, object) 13 | 14 | return result === undefined ? defaultValue : result 15 | } 16 | 17 | export default get 18 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/getFocusableElements.ts: -------------------------------------------------------------------------------- 1 | const getFocusableElements = (element: HTMLElement): Array => Array 2 | .from(element.querySelectorAll( 3 | 'a, button, input, textarea, select, details, [contenteditable], [tabindex]:not([tabindex="-1"])', 4 | )) 5 | .filter(el => !el.hasAttribute('disabled')) as Array 6 | 7 | export default getFocusableElements 8 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/hasProperty.ts: -------------------------------------------------------------------------------- 1 | const hasProperty = (obj: X | undefined, prop: Y): obj is X & Record => obj !== null && typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, prop) 2 | 3 | export default hasProperty 4 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/hasSlot.ts: -------------------------------------------------------------------------------- 1 | import type { Slot, VNode } from 'vue' 2 | import { Comment, Text } from 'vue' 3 | 4 | export default function hasSlot(slot: Slot | undefined, slotProps = {}): boolean { 5 | if (!slot) 6 | return false 7 | 8 | return slot(slotProps).some((vnode: VNode) => { 9 | if (vnode.type === Comment) 10 | return false 11 | 12 | if (Array.isArray(vnode.children) && !vnode.children.length) 13 | return false 14 | 15 | return ( 16 | vnode.type !== Text 17 | || (typeof vnode.children === 'string' && vnode.children.trim() !== '') 18 | ) 19 | }) 20 | } 21 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/isEqual.ts: -------------------------------------------------------------------------------- 1 | const isEqual = (a: unknown, b: unknown): boolean => JSON.stringify(a) === JSON.stringify(b) 2 | export default isEqual 3 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/isNumber.ts: -------------------------------------------------------------------------------- 1 | const isNumber = (value: unknown): boolean => { 2 | if (value === null) { 3 | return false 4 | } 5 | 6 | return ['number'].includes(typeof value) 7 | } 8 | 9 | export default isNumber 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/isPrimitive.ts: -------------------------------------------------------------------------------- 1 | const isPrimitive = (value: unknown): boolean => { 2 | if (value === null) { 3 | return true 4 | } 5 | 6 | return !['array', 'function', 'object'].includes(typeof value) 7 | } 8 | 9 | export default isPrimitive 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/isTouchOnlyDevice.ts: -------------------------------------------------------------------------------- 1 | const isTouchOnlyDevice = (w?: Window): boolean => { 2 | if (w === undefined) { 3 | if (window === undefined) { 4 | return false 5 | } 6 | 7 | w = window 8 | } 9 | 10 | return !!(w.matchMedia && w.matchMedia('(any-hover: none)').matches) 11 | } 12 | 13 | export default isTouchOnlyDevice 14 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/normalizeMeasure.ts: -------------------------------------------------------------------------------- 1 | import type { Measure } from '../types' 2 | 3 | const normalizeMeasure = (measure?: Measure | null | undefined): string | undefined => { 4 | if (measure === null || measure === undefined) { 5 | return undefined 6 | } 7 | 8 | if (typeof measure === 'number') { 9 | return `${measure}px` 10 | } 11 | 12 | if (String(Number(measure)) === measure) { 13 | return `${Number(measure)}px` 14 | } 15 | 16 | return measure 17 | } 18 | 19 | export default normalizeMeasure 20 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/normalizedOptionIsDisabled.ts: -------------------------------------------------------------------------------- 1 | import type { NormalizedOption } from '../types' 2 | 3 | const normalizedOptionIsDisabled = (option: NormalizedOption): boolean => option.disabled === true || option.disabled === 'disabled' 4 | 5 | export default normalizedOptionIsDisabled 6 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/objectToArrayMap.ts: -------------------------------------------------------------------------------- 1 | const objectToArrayMap = (initialObject: object, toKey: string, toValue: string): { [key: string]: unknown } => { 2 | return Object.fromEntries(Object.entries(initialObject).map(([key, value]) => [value[toKey], value[toValue]])) 3 | } 4 | 5 | export default objectToArrayMap 6 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/pick.ts: -------------------------------------------------------------------------------- 1 | const pick = (object: T, condition: (value: T[K], key: K) => boolean = value => !!value): T => { 2 | const newObject = { ...object } 3 | 4 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 5 | // @ts-expect-error 6 | Object.keys(object) 7 | .filter(key => !condition(newObject[key as K], key as K)) 8 | .forEach(key => delete newObject[key as K]) 9 | 10 | return newObject 11 | } 12 | 13 | export default pick 14 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/promisify.ts: -------------------------------------------------------------------------------- 1 | const promisify =

(value: Promise

| P): Promise

=> { 2 | if (value instanceof Promise) { 3 | return value 4 | } 5 | 6 | return Promise.resolve(value) 7 | } 8 | 9 | export default promisify 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/promisifyFunctionResult.ts: -------------------------------------------------------------------------------- 1 | import promisify from './promisify' 2 | 3 | const promisifyFunctionResult =

(fn: (...args: P) => K | Promise, ...args: P): Promise => { 4 | const result = fn(...args) 5 | 6 | return promisify(result) 7 | } 8 | 9 | export default promisifyFunctionResult 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/ssr.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Check if its not running server side nad window or document are available 3 | * @returns {Boolean} 4 | */ 5 | export const isClient = () => typeof window !== 'undefined' && typeof document !== 'undefined' 6 | 7 | /** 8 | * Check its running server side 9 | * @returns {Boolean} 10 | */ 11 | 12 | export const isServer = () => typeof window === 'undefined' || typeof document === 'undefined' 13 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/subtractFromArray.ts: -------------------------------------------------------------------------------- 1 | import isEqual from './isEqual' 2 | 3 | const subtractFromArray =

(arr: any, value: any): P => { 4 | if (!Array.isArray(arr)) { 5 | return [] as any 6 | } 7 | 8 | const index = arr.findIndex(valueInOriginal => isEqual(valueInOriginal, value)) 9 | 10 | if (index === -1) { 11 | return arr as P 12 | } 13 | 14 | const newArray = [...arr] 15 | 16 | newArray.splice(index, 1) 17 | 18 | return newArray as P 19 | } 20 | 21 | export default subtractFromArray 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/throttle.ts: -------------------------------------------------------------------------------- 1 | const throttle = (func: (...args: any[]) => void, wait = 200): (...args: any[]) => void => { 2 | let isCalled = false 3 | 4 | return (...args: any[]) => { 5 | if (!isCalled) { 6 | func(...args) 7 | isCalled = true 8 | setTimeout(() => { 9 | isCalled = false 10 | }, wait) 11 | } 12 | } 13 | } 14 | 15 | export default throttle 16 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/uniqueID.ts: -------------------------------------------------------------------------------- 1 | const idCounter = {} as string[] | number[] 2 | function uniqueId(prefix: any = '$lodash$') { 3 | if (!idCounter[prefix]) { 4 | idCounter[prefix] = 0 5 | } 6 | 7 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 8 | // @ts-expect-error 9 | const id = ++idCounter[prefix] 10 | if (prefix === '$lodash$') { 11 | return `${id}` 12 | } 13 | 14 | return `${prefix}${id}` 15 | } 16 | export default uniqueId 17 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/helpers/urlHelper.ts: -------------------------------------------------------------------------------- 1 | import { parse, stringify } from 'qs' 2 | 3 | const urlBuilder = (url: string | undefined, query: object | null): string => { 4 | if (!url) { 5 | return '' 6 | } 7 | const isFullQualifiedUrl = url.startsWith('http://') || url.startsWith('https://') 8 | if (!isFullQualifiedUrl) { 9 | console.warn('The URL provided is not a full qualified URL') 10 | return url 11 | } 12 | 13 | const parsedUrl = new URL(url) 14 | if (!query) { 15 | return parsedUrl.toString() 16 | } 17 | const parsedUrlParams = parse(parsedUrl.search, { ignoreQueryPrefix: true }) 18 | parsedUrl.search = stringify({ ...parsedUrlParams, ...query }, { arrayFormat: 'brackets' }) 19 | return parsedUrl.toString() 20 | } 21 | export default urlBuilder 22 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/types/css-class.ts: -------------------------------------------------------------------------------- 1 | export interface CSSClassKeyValuePair { 2 | 3 | [key: string]: any 4 | } 5 | 6 | export type CSSClasses = CssClass[] 7 | 8 | export type CssClass = CSSClassKeyValuePair | string | CSSClasses | undefined 9 | 10 | export type CSSRawClassesList = { 11 | [key in ClassesKeys]?: CssClass 12 | } 13 | 14 | export type CSSClassesList = { 15 | [key in ClassesKeys]?: CssClass 16 | } 17 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './css-class' 2 | export * from './variants' 3 | export * from './input-options' 4 | export * from './misc' 5 | export * from './options' 6 | export * from './components' 7 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/types/input-options.ts: -------------------------------------------------------------------------------- 1 | export type NormalizedOptions = Array 2 | 3 | export type InputOptionValue = string | number | undefined | null | object | boolean 4 | 5 | export type InputOptionText = string | number | undefined 6 | 7 | export interface NormalizedOption { 8 | value: InputOptionValue 9 | text: InputOptionText 10 | description?: InputOptionText 11 | 12 | raw?: any 13 | children?: NormalizedOptions 14 | disabled?: boolean | 'disabled' 15 | } 16 | 17 | export type InputOptions = Array | { [key: string]: InputOptionText } 18 | 19 | export interface InputOptionObject { 20 | value?: InputOptionValue 21 | text?: InputOptionText 22 | description?: InputOptionText 23 | disabled?: boolean | undefined 24 | children?: InputOptions 25 | 26 | [key: string]: any 27 | } 28 | 29 | export type InputOption = InputOptionObject | string | number 30 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/types/options.ts: -------------------------------------------------------------------------------- 1 | export interface PluginOptions { 2 | swapErrorsVariantOnModelValueChanges?: boolean 3 | } 4 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/types/variants.ts: -------------------------------------------------------------------------------- 1 | import type { CSSClassesList, CssClass } from './index' 2 | 3 | export type WithVariantProps

= { 4 | classes: CssClass 5 | fixedClasses: CssClass 6 | variants?: Variants

7 | variant?: string 8 | class?: string 9 | errors?: string 10 | name?: string 11 | feedback?: string 12 | } & P 13 | 14 | export interface Variants

{ 15 | [key: string]: WithVariantProps

| undefined 16 | } 17 | 18 | export interface ObjectWithClassName { 19 | class?: string 20 | } 21 | 22 | export type ObjectWithClassesList = ObjectWithClassName & { 23 | classesList: CSSClassesList 24 | } 25 | 26 | export type WithVariantPropsAndClassesList = WithVariantProps

& { 27 | classesList: CSSClassesList 28 | } 29 | 30 | export interface VariantsWithClassesList { 31 | [key: string]: WithVariantPropsAndClassesList | undefined 32 | } 33 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/use/useAttributesAndProps.ts: -------------------------------------------------------------------------------- 1 | import { getCurrentInstance, unref } from 'vue' 2 | import pick from 'lodash/pick' 3 | import omit from 'lodash/omit' 4 | 5 | export default function useAttributesAndProps(only: string[] = [], except: string[] = []) { 6 | const vm = getCurrentInstance()! 7 | 8 | const props = Object.fromEntries(Object.entries(unref(vm.props)).filter(([v]) => v != null && v !== undefined)) 9 | const attrs = Object.fromEntries(Object.entries(unref(vm.attrs)).filter(([v]) => v != null && v !== undefined)) 10 | 11 | let merge = { 12 | ...props, 13 | ...attrs, 14 | } 15 | 16 | if (only.length) { 17 | merge = pick(merge, only) 18 | } 19 | 20 | if (except.length) { 21 | merge = omit(merge, except) 22 | } 23 | 24 | // Always removed these 25 | const blacklist = ['variant', 'variants', 'classes', 'variants'] 26 | 27 | return omit(merge, blacklist) 28 | } 29 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/use/useDefaultName.ts: -------------------------------------------------------------------------------- 1 | import { getCurrentInstance } from 'vue' 2 | import { uniqueId } from '../helpers' 3 | import type { Data } from '../types' 4 | 5 | /** 6 | * Attempts to set the child name default based on parent label / name 7 | * @param props 8 | */ 9 | export default function useDefaultName(props: Props): string | unknown { 10 | const vm = getCurrentInstance()! 11 | let localName = uniqueId('vc-component-') as string | unknown 12 | 13 | if ( 14 | props.name === undefined 15 | && vm?.parent?.props?.name !== undefined 16 | && vm?.parent?.type?.name === 'VanillaInputGroup' 17 | && vm?.type.name !== 'VanillaInputGroup' 18 | && vm?.type.name !== 'VanillaFormLabel' 19 | ) { 20 | localName = vm.parent?.props?.name 21 | 22 | return localName || uniqueId('vc-component-') 23 | } 24 | return localName 25 | } 26 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/use/useDynamicSlots.ts: -------------------------------------------------------------------------------- 1 | import { camelize, capitalize } from 'vue' 2 | 3 | export default function useDynamicSlots(prefix: string, slotName: string): string { 4 | const lowercaseColumnName = slotName.toLowerCase() 5 | return camelize(prefix + capitalize(lowercaseColumnName.replace(/\.|\_/g, '-'))) 6 | } 7 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/use/useFetchData.ts: -------------------------------------------------------------------------------- 1 | import { useCookies } from '@vueuse/integrations/useCookies' 2 | import merge from 'lodash/merge' 3 | import { urlHelper } from '../helpers' 4 | 5 | export default function useFetchData( 6 | url: string | undefined, 7 | query: null | object = null, 8 | options: RequestInit = {}, 9 | ): Promise { 10 | // Extract proper token from cookies ( Laravel ) 11 | const token = useCookies().get('XSRF-TOKEN') 12 | 13 | // Check for full qualified URL 14 | 15 | const finalUrl = urlHelper(url, query) 16 | 17 | const finalOptions = merge({ 18 | headers: { 19 | 'Content-Type': 'application/json', 20 | 'Accept': 'application/json', 21 | 'X-Requested-With': 'XMLHttpRequest', 22 | 'X-XSRF-TOKEN': token ? decodeURIComponent(token) : '', 23 | }, 24 | credentials: 'include', 25 | ...options, 26 | }) 27 | 28 | return fetch(finalUrl, finalOptions).then(response => response.json()) 29 | } 30 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/use/useInjectsClassesList.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedRef } from 'vue' 2 | import { computed } from 'vue' 3 | import { useInjectsConfiguration } from '../use' 4 | import type { CSSClassesList } from '../types' 5 | 6 | export default function useInjectsClassesList(key = 'configuration_vanilla'): ComputedRef { 7 | const configuration = useInjectsConfiguration(key) 8 | return computed((): CSSClassesList => configuration.classesList || {}) 9 | } 10 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/use/useInjectsClassesListClass.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedRef } from 'vue' 2 | import { computed } from 'vue' 3 | import type { CssClass } from '../types' 4 | import { useInjectsConfiguration } from '../use' 5 | import { get } from '../helpers' 6 | 7 | export default function useInjectsClassesListClass(property: string): ComputedRef { 8 | const configuration = useInjectsConfiguration() 9 | return computed((): CssClass => get(configuration.classesList, property, '')) 10 | } 11 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/use/useInjectsConfiguration.ts: -------------------------------------------------------------------------------- 1 | import { inject } from 'vue' 2 | import type { Data, WithVariantPropsAndClassesList } from '../types' 3 | 4 | export default function useInjectsConfiguration

>(key = 'configuration_vanilla'): P { 5 | return inject

(key, {} as P) 6 | } 7 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/use/useVModel.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from 'vue' 2 | import { getCurrentInstance, ref, watch } from 'vue' 3 | import type { Data } from '../types' 4 | 5 | export default function useVModel

( 6 | props: P, 7 | key: K, 8 | ): Ref { 9 | const vm = getCurrentInstance() 10 | const localValue = ref(props[key]) as Ref 11 | 12 | watch(localValue, (value) => { 13 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 14 | // @ts-expect-error 15 | if (props.disabled) { 16 | return 17 | } 18 | 19 | // @ts-expect-error 20 | vm?.emit(`update:${key}`, value) 21 | }) 22 | 23 | watch(() => props[key], (value) => { 24 | localValue.value = value 25 | }) 26 | 27 | return localValue 28 | } 29 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/core/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './country-codes' 2 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/directives/eager.ts: -------------------------------------------------------------------------------- 1 | import { isServer } from '../core/helpers' 2 | 3 | function event(name: string) { 4 | if (isServer()) { 5 | return 6 | } 7 | const event = new Event(name) 8 | document.dispatchEvent(event) 9 | return event 10 | } 11 | 12 | export default function (el: HTMLElement) { 13 | if (el.tagName.toLocaleUpperCase() !== 'INPUT') { 14 | const els = el.getElementsByTagName('input') 15 | if (els.length !== 1) { 16 | throw new Error( 17 | `v-eager directive requires 1 input, found ${els.length}`, 18 | ) 19 | } 20 | else { 21 | el = els[0] 22 | } 23 | } 24 | 25 | el.oninput = function (evt) { 26 | if (!evt.isTrusted) { 27 | return 28 | } 29 | el.dispatchEvent(event('input')) 30 | } 31 | } 32 | 33 | // import eager from "./directive"; 34 | // function install(Vue) { 35 | // Vue.directive("eager", eager); 36 | // } 37 | // 38 | // export default install; 39 | // export { eager }; 40 | -------------------------------------------------------------------------------- /packages/vanilla-components/src/plugin.ts: -------------------------------------------------------------------------------- 1 | import type { App, Plugin } from 'vue' 2 | import { defineOptions, mergeConfiguration } from './configuration' 3 | import type { ComponentsConfiguration, PluginOptions } from './core/types' 4 | 5 | const plugin: Plugin = { 6 | install: ( 7 | app: App, 8 | configuration: ComponentsConfiguration = {}, 9 | options: PluginOptions = {}, 10 | ): void => { 11 | app.config.globalProperties.$vanillaComponents = true 12 | const mergedConfiguration = mergeConfiguration(configuration) 13 | app.provide('vanilla_configuration', mergedConfiguration) 14 | app.provide('vanilla_components_options', defineOptions(options)) 15 | }, 16 | } 17 | 18 | declare module '@vue/runtime-core' { 19 | interface ComponentCustomProperties { 20 | $vanillaComponents: boolean 21 | } 22 | } 23 | 24 | export default plugin 25 | -------------------------------------------------------------------------------- /packages/vanilla-components/webtypesconfig.ts: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | apiOptions: { 3 | addScriptHandlers: [ 4 | function ( 5 | documentation, 6 | componentDefinition, 7 | astPath, 8 | opt, 9 | ) { 10 | const componentDoc = astPath.tokens.filter(token => token.type === 'CommentBlock' && token.value.includes('@docs')).find(() => true) 11 | 12 | if (componentDoc) { 13 | const lines = componentDoc.value.split('\n') 14 | 15 | const nameLine = lines.filter(line => line.includes('@displayName'))[0] 16 | const descriptionLine = lines.filter(line => line.includes('@description'))[0] 17 | 18 | if (nameLine) { 19 | documentation.set('displayName', nameLine.replaceAll('@displayName', '').replaceAll(/[^a-zA-Z0-9]+/g, '')) 20 | } 21 | 22 | if (descriptionLine) { 23 | documentation.set('description', descriptionLine.replaceAll(/\*\s+\@description/g, '').trim()) 24 | } 25 | } 26 | }, 27 | ], 28 | }, 29 | } 30 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import'), 4 | require('tailwindcss/nesting'), 5 | require('tailwindcss'), 6 | require('autoprefixer'), 7 | require('postcss-prefix-selector')({ 8 | prefix: ':not(:where(.vp-raw *, #headlessui-portal-root *, .z-50 *))', 9 | includeFiles: [ 10 | /vp-doc\.css/, 11 | /base\.css/, 12 | /vp-code\.css/, 13 | /utils\.css/, 14 | ], 15 | transform(prefix, _selector, prefixedSelector) { 16 | const [selector, pseudo = ''] = _selector.split(/(:\S*)$/) 17 | return selector + prefix + pseudo 18 | }, 19 | }), 20 | ], 21 | } 22 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | const defaultTheme = require('tailwindcss/defaultTheme') 2 | const colors = require('tailwindcss/colors') 3 | 4 | /** @type {import('tailwindcss').Config} */ 5 | module.exports = { 6 | mode: 'jit', 7 | darkMode: 'class', 8 | content: [ 9 | './documentation/.vitepress/**/*.{js,jsx,ts,tsx,vue,md}', 10 | './packages/vanilla-components/src/**/*.*', 11 | './documentation/src/**/*.{js,jsx,ts,tsx,vue,md,json}', 12 | ], 13 | theme: { 14 | extend: { 15 | colors: { 16 | gray: colors.zinc, 17 | primary: colors.indigo, 18 | }, 19 | fontFamily: { 20 | sans: ['Nunito', ...defaultTheme.fontFamily.sans], 21 | inter: ['Inter', 'sans-serif'], // Ensure fonts with spaces have " " surrounding it. 22 | }, 23 | screens: { 24 | xxs: { min: '200px', max: '374px' }, 25 | xs: { min: '375px', max: '639px' }, 26 | }, 27 | }, 28 | }, 29 | plugins: [ 30 | require('@tailwindcss/typography'), 31 | require('@tailwindcss/aspect-ratio'), 32 | require('@tailwindcss/forms'), 33 | ], 34 | } 35 | --------------------------------------------------------------------------------