diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 42d4bd6..a24406e 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -8,8 +8,7 @@ body: - type: markdown attributes: value: | - "Thanks for taking the time to fill out this bug report! - Please consider that I'm maintaining this library on my free time, thanks!" + "Thanks for taking the time to fill out this bug report! Please consider that I'm maintaining this library on my free time, thanks!" - type: dropdown id: version attributes: @@ -17,7 +16,9 @@ body: description: What version of the library are you using? options: - 3.x.x (Vue 3.x) - - 2 (Vue 2.x - legacy) + - 2.x.x (Vue 2.x - legacy) + validations: + required: true - type: textarea id: bug-description attributes: @@ -26,14 +27,18 @@ body: placeholder: Bug description validations: required: true - - type: textarea + - type: textarea id: reproduction attributes: label: Describe the bug description: Steps to reproduce the behavior + placeholder: "1. Go to '...' + 2. Click on '....' + 3. Scroll down to '....' + 4. See error" validations: required: true - - type: textarea + - type: textarea id: expected attributes: label: Expected behavior @@ -64,4 +69,4 @@ body: - label: Read the [docs](https://vue-dynamic-forms-docs.netlify.app/). required: true - label: Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. - required: true \ No newline at end of file + required: true diff --git a/.gitignore b/.gitignore index 827d33d..274ed83 100644 --- a/.gitignore +++ b/.gitignore @@ -2,11 +2,12 @@ node_modules **/node_modules /dist -/docs/.vuepress/dist +/docs/.vitepress/dist /coverage /tests/e2e/videos/ /tests/e2e/screenshots/ /temp + # local env files .env.local .env.*.local diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 19e432c..0000000 --- a/.prettierrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "singleQuote": true, - "semi": true, - "trailingComma": "all", - "disableLanguages": ["markdown"], - "arrowParens": "avoid" - } diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..da16a49 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,3 @@ +module.exports = { + ...require('@asigloo/prettier-config') +} diff --git a/README.md b/README.md index 495e24a..72342d1 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,14 @@ Complete documentation and examples available at

+

Accesible Benevolents 🦄

+ +

+ + easingthemes + +

+ ## Installation ```bash diff --git a/demos/vue-3/src/main.ts b/demos/vue-3/src/main.ts index 0a309b4..9cd65f1 100644 --- a/demos/vue-3/src/main.ts +++ b/demos/vue-3/src/main.ts @@ -1,11 +1,11 @@ -import { createApp } from 'vue'; -import App from './App.vue'; -import './styles/main.css'; -import router from './router'; +import { createApp } from 'vue' +import App from './App.vue' +import './styles/main.css' +import router from './router' -/* import { createDynamicForms } from '/@'; */ +import { createDynamicForms } from '/@' -import { createDynamicForms } from '../../../dist/as-dynamic-forms.es'; +/* import { createDynamicForms } from '../../../dist/as-dynamic-forms.es'; */ const VueDynamicForms = createDynamicForms({ autoValidate: true, @@ -15,12 +15,12 @@ const VueDynamicForms = createDynamicForms({ netlify: false, netlifyHoneypot: null, }, -}); +}) -export const app = createApp(App); +export const app = createApp(App) -console.log({ app }); +console.log({ app }) -app.use(VueDynamicForms); +app.use(VueDynamicForms) -app.use(router).mount('#app'); +app.use(router).mount('#app') diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js new file mode 100644 index 0000000..cefbbb8 --- /dev/null +++ b/docs/.vitepress/config.js @@ -0,0 +1,98 @@ +/* import { UserConfig } from 'vitepress' + */ +const { description } = require('../../package') + +const config = { + title: 'Vue Dynamic Forms', + description, + lang: 'en-US', + themeConfig: { + repo: 'asigloo/vue-dynamic-forms', + logo: '/logo.svg', + editLinks: true, + editLinkText: 'Edit this page', + lastUpdated: 'Last Updated', + nav: [ + { + text: 'Migration Guide', + link: '/v3/guide/migration-guide', + }, + ], + sidebar: { + '/': [ + { + text: 'Guide', + children: [ + { + text: 'Introduction', + link: '/guide/', + }, + { + text: 'Getting Started', + link: '/guide/getting-started', + }, + { + text: 'Usage', + link: '/guide/usage', + }, + { + text: 'Validation', + link: '/guide/validation', + }, + { + text: 'Models', + link: '/guide/models', + }, + ], + }, + { + text: 'API', + children: [ + { + text: 'Fields', + link: '/guide/api/fields', + }, + { + text: 'Props', + link: '/guide/api/props', + children: [ + { + text: 'Dynamic Form', + link: '/guide/api/props/dynamic-form-props', + }, + { + text: 'Dynamic Input', + link: '/guide/api/props/dynamic-input-props', + }, + ], + }, + { + text: 'Events', + link: '/guide/api/events', + }, + ], + }, + { + text: 'Theming', + children: [ + { + text: 'Basic theming', + link: '/guide/theming/basic', + }, + ], + }, + { + text: 'Advanced', + children: [ + { + text: 'Slots', + link: '/guide/advanced/slots', + }, + ], + }, + ], + }, + }, +} + +module.exports = config diff --git a/docs/.vitepress/dist/logo.png b/docs/.vitepress/dist/logo.png new file mode 100644 index 0000000..803b955 Binary files /dev/null and b/docs/.vitepress/dist/logo.png differ diff --git a/docs/.vitepress/dist/logo.svg b/docs/.vitepress/dist/logo.svg new file mode 100644 index 0000000..72fe302 --- /dev/null +++ b/docs/.vitepress/dist/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vitepress/theme/components/CheckboxInput.vue b/docs/.vitepress/theme/components/CheckboxInput.vue new file mode 100644 index 0000000..3553c48 --- /dev/null +++ b/docs/.vitepress/theme/components/CheckboxInput.vue @@ -0,0 +1,68 @@ + + + diff --git a/docs/.vitepress/theme/components/Console.vue b/docs/.vitepress/theme/components/Console.vue new file mode 100644 index 0000000..272093f --- /dev/null +++ b/docs/.vitepress/theme/components/Console.vue @@ -0,0 +1,31 @@ + + + diff --git a/docs/.vitepress/theme/components/CustomField.vue b/docs/.vitepress/theme/components/CustomField.vue new file mode 100644 index 0000000..95acf06 --- /dev/null +++ b/docs/.vitepress/theme/components/CustomField.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/docs/.vitepress/theme/components/EmailField.vue b/docs/.vitepress/theme/components/EmailField.vue new file mode 100644 index 0000000..ea9fd19 --- /dev/null +++ b/docs/.vitepress/theme/components/EmailField.vue @@ -0,0 +1,71 @@ + + + diff --git a/docs/.vitepress/theme/components/FormCompositionOptionsApi.vue b/docs/.vitepress/theme/components/FormCompositionOptionsApi.vue new file mode 100644 index 0000000..0be1a17 --- /dev/null +++ b/docs/.vitepress/theme/components/FormCompositionOptionsApi.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/docs/.vitepress/theme/components/NumberField.vue b/docs/.vitepress/theme/components/NumberField.vue new file mode 100644 index 0000000..6fb1f3b --- /dev/null +++ b/docs/.vitepress/theme/components/NumberField.vue @@ -0,0 +1,56 @@ + + + diff --git a/docs/.vitepress/theme/components/PasswordField.vue b/docs/.vitepress/theme/components/PasswordField.vue new file mode 100644 index 0000000..ea8e441 --- /dev/null +++ b/docs/.vitepress/theme/components/PasswordField.vue @@ -0,0 +1,70 @@ + + + diff --git a/docs/.vitepress/theme/components/RadioInput.vue b/docs/.vitepress/theme/components/RadioInput.vue new file mode 100644 index 0000000..4698f16 --- /dev/null +++ b/docs/.vitepress/theme/components/RadioInput.vue @@ -0,0 +1,73 @@ + + + diff --git a/docs/.vitepress/theme/components/SelectField.vue b/docs/.vitepress/theme/components/SelectField.vue new file mode 100644 index 0000000..a9fcecc --- /dev/null +++ b/docs/.vitepress/theme/components/SelectField.vue @@ -0,0 +1,69 @@ + + + diff --git a/docs/.vitepress/theme/components/TextAreaField.vue b/docs/.vitepress/theme/components/TextAreaField.vue new file mode 100644 index 0000000..8045af7 --- /dev/null +++ b/docs/.vitepress/theme/components/TextAreaField.vue @@ -0,0 +1,63 @@ + + + diff --git a/docs/.vitepress/theme/components/TextField.vue b/docs/.vitepress/theme/components/TextField.vue new file mode 100644 index 0000000..1eda025 --- /dev/null +++ b/docs/.vitepress/theme/components/TextField.vue @@ -0,0 +1,55 @@ + + + diff --git a/docs/.vitepress/theme/components/ValidationEmail.vue b/docs/.vitepress/theme/components/ValidationEmail.vue new file mode 100644 index 0000000..8a77f5e --- /dev/null +++ b/docs/.vitepress/theme/components/ValidationEmail.vue @@ -0,0 +1,75 @@ + + + diff --git a/docs/.vitepress/theme/components/ValidationMax.vue b/docs/.vitepress/theme/components/ValidationMax.vue new file mode 100644 index 0000000..5f7b21c --- /dev/null +++ b/docs/.vitepress/theme/components/ValidationMax.vue @@ -0,0 +1,61 @@ + + + diff --git a/docs/.vitepress/theme/components/ValidationMaxLength.vue b/docs/.vitepress/theme/components/ValidationMaxLength.vue new file mode 100644 index 0000000..2770f62 --- /dev/null +++ b/docs/.vitepress/theme/components/ValidationMaxLength.vue @@ -0,0 +1,68 @@ + + + diff --git a/docs/.vitepress/theme/components/ValidationMin.vue b/docs/.vitepress/theme/components/ValidationMin.vue new file mode 100644 index 0000000..bb0d25f --- /dev/null +++ b/docs/.vitepress/theme/components/ValidationMin.vue @@ -0,0 +1,61 @@ + + + diff --git a/docs/.vitepress/theme/components/ValidationMinLength.vue b/docs/.vitepress/theme/components/ValidationMinLength.vue new file mode 100644 index 0000000..12b2a75 --- /dev/null +++ b/docs/.vitepress/theme/components/ValidationMinLength.vue @@ -0,0 +1,65 @@ + + + diff --git a/docs/.vitepress/theme/components/ValidationPattern.vue b/docs/.vitepress/theme/components/ValidationPattern.vue new file mode 100644 index 0000000..bab86be --- /dev/null +++ b/docs/.vitepress/theme/components/ValidationPattern.vue @@ -0,0 +1,77 @@ + + + diff --git a/docs/.vitepress/theme/components/ValidationRequired.vue b/docs/.vitepress/theme/components/ValidationRequired.vue new file mode 100644 index 0000000..f059129 --- /dev/null +++ b/docs/.vitepress/theme/components/ValidationRequired.vue @@ -0,0 +1,75 @@ + + + diff --git a/docs/.vitepress/theme/components/ValidationUrl.vue b/docs/.vitepress/theme/components/ValidationUrl.vue new file mode 100644 index 0000000..25ac2e7 --- /dev/null +++ b/docs/.vitepress/theme/components/ValidationUrl.vue @@ -0,0 +1,75 @@ + + + diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts new file mode 100644 index 0000000..c4ddde8 --- /dev/null +++ b/docs/.vitepress/theme/index.ts @@ -0,0 +1,22 @@ +import DefaultTheme, { Config } from 'vitepress/theme' +import { createDynamicForms } from '/@' +import '../theme/styles/base.scss' + +const VueDynamicForms = createDynamicForms({ + autoValidate: true, + form: { + customClass: 'plugin-options-class-added', + method: 'POST', + netlify: false, + netlifyHoneypot: null, + }, +}) + +const theme: Config = { + ...DefaultTheme, + enhanceApp({ app }) { + app.use(VueDynamicForms) + }, +} + +export default theme diff --git a/docs/.vitepress/theme/styles/base.scss b/docs/.vitepress/theme/styles/base.scss new file mode 100644 index 0000000..4ed7521 --- /dev/null +++ b/docs/.vitepress/theme/styles/base.scss @@ -0,0 +1,104 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +.nav-bar-title { + @apply flex items-center; +} + +@layer base { + h1 { + @apply text-2xl mt-16 mb-9; + } + h2 { + @apply text-xl mt-9 mb-5; + } + p, + ol, + ul { + @apply my-4 leading-relaxed; + } + + ol, + ul { + @apply pl-4; + } + + ul { + @apply list-disc; + } + + h1, + h2, + h3, + h4, + h5, + h6, + strong, + b { + @apply font-bold; + } + + code { + @apply text-sm; + } +} + +.custom-block { + @apply my-4 py-1 px-6; +} + +.header-anchor { + @apply text-green-400; +} + +a { + @apply text-green-400 font-bold; +} + +.form-group { + @apply flex flex-col mb-4; +} + +.form-label { + @apply w-full mb-2 text-sm font-bold; +} + +.form-control { + @apply border-2 border-gray-300 rounded-lg px-4 py-2; + + &:focus { + @apply outline-none border-green-400; + } + + &--success { + @apply border-green-400 bg-green-50; + } + + &--error { + @apply border-red-400 bg-red-50; + } +} + +.form-hint { + @apply text-sm; +} + +.form-error { + @apply text-red-500; +} + +.checkbox-control, +.radio-control { + @apply mr-4; +} + +.checkbox-label, +.radio-label { + @apply select-none cursor-pointer text-sm; +} + +.checkbox-control:disabled ~ .checkbox-label, +.radio-control:disabled ~ .radio-label { + @apply opacity-50 text-gray-500 cursor-not-allowed pointer-events-none; +} diff --git a/docs/guide/advanced/slots.md b/docs/guide/advanced/slots.md new file mode 100644 index 0000000..0d78ebb --- /dev/null +++ b/docs/guide/advanced/slots.md @@ -0,0 +1,53 @@ +## Custom Field + +Using dynamic scoped slots approach, now is easy to add your own custom fields to the `dynamic-forms` component. + + + +The first step is to add a new `FormField` with `type: 'custom-field'` to your form fields array in the components data: + +```javascript +fields: { + avocado: CustomField({ + label: 'My Avocado field', + }), +}, + +``` + +Inside of the `dynamic-form` component, add a `