Closed HydraCOREY closed 1 year ago
You have commas at the end of your long class lists, which makes it not a valid Vue syntax:
If I remove them it works: https://formkit.link/27e08c02654b2a834480c97fca764dd4
Good luck 👍
@justin-schroeder That fixes the Playground error, I must have made those errors in my rush to get the example set up.
I have a theme.js
set up like so:
const textClassification = {
label: "block mb-1 font-medium text-sm select-none formkit-invalid:text-red-500",
inner:
"max-w-md border border-gray-300 shadow-sm rounded-sm mb-1 overflow-hidden focus-within:border-blue-500 formkit-submitted:formkit-invalid:border-red-500",
input: "w-full px-3 border-none text-base text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-0 formkit-multiple:h-48",
}
export default {
global: {
outer: "my-3 formkit-disabled:opacity-30",
help: "text-xs text-gray-500",
prefixIcon: "inline-block",
suffixIcon: "inline-block",
messages: "list-none p-0 mt-1 mb-3",
message: "text-red-500 mb-1 text-xs",
},
"family:text": textClassification,
// ... more code
}
But this doesn't fix my local errors since I don't have those commas in my local code.
Seems like something wrong with the loop handling the :options
.
Feel free to create another reproduction with your options/loop issue and I'll reopen this 👍
Getting the same error. l don't think my situation is because of the vue syntax as mentioned above.
`<FormKit type="dropdown" :options="frameworks" label="Frameworks" validation="required"
`
Error: Uncaught (in promise) Error: Unknown input type "dropdown" ("dropdown_13")
Dropdown is a PRO input, do you have pro installed correctly?
Reproduction
https://formkit.com/playground?fkv=1.0.0-beta.12&fileTab=Playground.vue&files=JTVCJTdCJTIybmFtZSUyMiUzQSUyMlBsYXlncm91bmQudnVlJTIyJTJDJTIyZWRpdG9yJTIyJTNBJTIyJTNDc2NyaXB0JTIwc2V0dXAlM0UlNUNuY29uc3QlMjBmcmFtZXdvcmtzJTIwJTNEJTIwJTVCJTdCJTIwbGFiZWwlM0ElMjAnUmVhY3QnJTJDJTIwdmFsdWUlM0ElMjAncmVhY3QnJTJDJTIwYXNzZXQlM0ElMjAnaHR0cHMlM0ElMkYlMkZzMy5hbWF6b25hd3MuY29tJTJGY2RuLmZvcm1rLml0JTJGZXhhbXBsZS1hc3NldHMlMkZmcm9udGVuZC1mcmFtZXdvcmstbG9nb3MlMkZyZWFjdC1sb2dvLnBuZyclMjAlN0QlMkMlMjAlN0IlMjBsYWJlbCUzQSUyMCdWdWUnJTJDJTIwdmFsdWUlM0ElMjAndnVlJyUyQyUyMGFzc2V0JTNBJTIwJ2h0dHBzJTNBJTJGJTJGczMuYW1hem9uYXdzLmNvbSUyRmNkbi5mb3Jtay5pdCUyRmV4YW1wbGUtYXNzZXRzJTJGZnJvbnRlbmQtZnJhbWV3b3JrLWxvZ29zJTJGdnVlLWxvZ28ucG5nJyUyMCU3RCUyQyUyMCU3QiUyMGxhYmVsJTNBJTIwJ0FuZ3VsYXInJTJDJTIwdmFsdWUlM0ElMjAnYW5ndWxhciclMkMlMjBhc3NldCUzQSUyMCdodHRwcyUzQSUyRiUyRnMzLmFtYXpvbmF3cy5jb20lMkZjZG4uZm9ybWsuaXQlMkZleGFtcGxlLWFzc2V0cyUyRmZyb250ZW5kLWZyYW1ld29yay1sb2dvcyUyRmFuZ3VsYXItbG9nby5wbmcnJTIwJTdEJTJDJTIwJTdCJTIwbGFiZWwlM0ElMjAnU3ZlbHRlJyUyQyUyMHZhbHVlJTNBJTIwJ3N2ZWx0ZSclMkMlMjBhc3NldCUzQSUyMCdodHRwcyUzQSUyRiUyRnMzLmFtYXpvbmF3cy5jb20lMkZjZG4uZm9ybWsuaXQlMkZleGFtcGxlLWFzc2V0cyUyRmZyb250ZW5kLWZyYW1ld29yay1sb2dvcyUyRnN2ZWx0ZS1sb2dvLnBuZyclMjAlN0QlNUQlNUNuJTNDJTJGc2NyaXB0JTNFJTVDbiU1Q24lM0N0ZW1wbGF0ZSUzRSU1Q24lMjAlMjAlM0NGb3JtS2l0JTVDbiUyMCUyMCUyMCUyMHR5cGUlM0QlNUMlMjJmb3JtJTVDJTIyJTVDbiUyMCUyMCUyMCUyMCUyM2RlZmF1bHQlM0QlNUMlMjIlN0IlMjB2YWx1ZSUyMCU3RCU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlM0FhY3Rpb25zJTNEJTVDJTIyZmFsc2UlNUMlMjIlNUNuJTIwJTIwJTNFJTVDbiUyMCUyMCUyMCUyMCUzQ0Zvcm1LaXQlNUNuJTIwJTIwJTIwJTIwJTIwJTIwdHlwZSUzRCU1QyUyMmRyb3Bkb3duJTVDJTIyJTVDbiUyMCUyMCUyMCUyMCUyMCUyMG5hbWUlM0QlNUMlMjJmcmFtZXdvcmslNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTIwJTIwb3V0ZXItY2xhc3MlM0QlNUMlMjJyZWxhdGl2ZSU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlMjAlMjBsYWJlbC1jbGFzcyUzRCU1QyUyMmJsb2NrJTIwbWItMSUyMGZvbnQtbWVkaXVtJTIwdGV4dC1zbSUyMHNlbGVjdC1ub25lJTIwZm9ybWtpdC1pbnZhbGlkJTNBdGV4dC1yZWQtNTAwJTVDJTIyJTJDJTVDbiUyMCUyMGlubmVyLWNsYXNzJTNEJTVDJTIybWF4LXctbWQlMjBib3JkZXIlMjBib3JkZXItZ3JheS0zMDAlMjBzaGFkb3ctc20lMjByb3VuZGVkLXNtJTIwbWItMSUyMG92ZXJmbG93LWhpZGRlbiUyMGZvY3VzLXdpdGhpbiUzQWJvcmRlci1ibHVlLTUwMCUyMGZvcm1raXQtc3VibWl0dGVkJTNBZm9ybWtpdC1pbnZhbGlkJTNBYm9yZGVyLXJlZC01MDAlNUMlMjIlMkMlNUNuJTIwJTIwaW5wdXQtY2xhc3MlM0QlNUMlMjJ3LWZ1bGwlMjBweC0zJTIwYm9yZGVyLW5vbmUlMjB0ZXh0LWJhc2UlMjB0ZXh0LWdyYXktNzAwJTIwcGxhY2Vob2xkZXItZ3JheS00MDAlMjBmb2N1cyUzQW91dGxpbmUtbm9uZSUyMGZvY3VzJTNBcmluZy0wJTIwZm9ybWtpdC1tdWx0aXBsZSUzQWgtNDglNUMlMjIlMkMlNUNuJTIwJTIwJTIwJTIwJTIwJTIwbGFiZWwlM0QlNUMlMjJDaG9vc2UlMjBhJTIwZnJvbnRlbmQlMjBmcmFtZXdvcmslNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTIwJTIwcGxhY2Vob2xkZXIlM0QlNUMlMjJFeGFtcGxlJTIwcGxhY2Vob2xkZXIlNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTNBb3B0aW9ucyUzRCU1QyUyMmZyYW1ld29ya3MlNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTNFJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUzQyEtLU9QVElPTiUyMFNMT1QtLSUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlM0N0ZW1wbGF0ZSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjbGFzcyUzRCU1QyUyMmFic29sdXRlJTIwdG9wLTAlNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIzb3B0aW9uJTNEJTVDJTIyJTdCJTIwb3B0aW9uJTIwJTdEJTVDJTIyJTNFJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTVDJTIyZmxleCUyMGl0ZW1zLWNlbnRlciU1QyUyMiUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NpbWclNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNBc3JjJTNEJTVDJTIyb3B0aW9uLmFzc2V0JTVDJTIyJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGFsdCUzRCU1QyUyMm9wdGlvbkF2YXRhciU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjbGFzcyUzRCU1QyUyMmgtNSUyMHctNSUyMG0tMSU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMkYlM0UlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3BhbiUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0IlN0IlMjBvcHRpb24ubGFiZWwlMjAlN0QlN0QlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGc3BhbiUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGdGVtcGxhdGUlM0UlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTNDIS0tLS0lM0UlNUNuJTIwJTIwJTIwJTIwJTNDJTJGRm9ybUtpdCUzRSU1Q24lMjAlMjAlMjAlMjAlM0NwcmUlMjB3cmFwJTNFJTdCJTdCJTIwdmFsdWUlMjAlN0QlN0QlM0MlMkZwcmUlM0UlNUNuJTIwJTIwJTNDJTJGRm9ybUtpdCUzRSU1Q24lM0MlMkZ0ZW1wbGF0ZSUzRSU1Q24lNUNuJTNDc3R5bGUlM0UlNUNuLmZvcm1raXQtb3B0aW9uJTIwJTdCJTVDbiUyMCUyMGRpc3BsYXklM0ElMjBmbGV4JTNCJTVDbiUyMCUyMGFsaWduLWl0ZW1zJTNBJTIwY2VudGVyJTNCJTVDbiU3RCU1Q24uZm9ybWtpdC1vcHRpb24lMjBpbWclMjAlN0IlNUNuJTIwJTIwd2lkdGglM0ElMjAyMHB4JTNCJTVDbiUyMCUyMGhlaWdodCUzQSUyMDIwcHglM0IlNUNuJTIwJTIwbWFyZ2luLXJpZ2h0JTNBJTIwMTBweCUzQiU1Q24lN0QlNUNuJTNDJTJGc3R5bGUlM0UlNUNuJTIyJTJDJTIyYWRkZWQlMjIlM0F0cnVlJTdEJTVE&css-framework=tailwind&cssFramework=tailwind&imports=JTdCJTIybmFtZSUyMiUzQSUyMkltcG9ydE1hcCUyMiUyQyUyMmVkaXRvciUyMiUzQSUyMiU3QiU1Q24lMjAlMjAlNUMlMjJ2dWUlNUMlMjIlM0ElMjAlNUMlMjJodHRwcyUzQSUyRiUyRmNkbi5qc2RlbGl2ci5uZXQlMkZucG0lMkZ2dWUlNDAzJTJGZGlzdCUyRnZ1ZS5lc20tYnJvd3Nlci5taW4uanMlNUMlMjIlNUNuJTdEJTVDbiUyMiU3RA
Describe the bug
Using the console in the FormKit Playground you can see several errors that show up. In my local application, I get an endless error loop and the page never loads (*see local console errors below). Locally I have the code set up like so:
Environment
• OS: Windows 11 • Browser: any • Version: "vue": "^3.2.37", "@formkit/themes": "^1.0.0-beta.12", "@formkit/vue": "^1.0.0-beta.12",