asigloo / vue-dynamic-forms Goto Github PK

Describe the bug
Input of type: 'number' returns strings instead of numeric values.

To Reproduce
Steps to reproduce the behavior:

1. Create a FormField with type: 'number'
2. Change the value
3. Check returning value type, now returns a string

Expected behavior
Values returned should be integers or floats.

Screenshots

Describe the solution you'd like
Possibility to add a helper text to each input

Is your feature request related to a problem? Please describe.
Inputs type elements are now fixed to the common html5 input elements like input, select, checkbox, radio etc.

Describe the solution you'd like
A way to add custom input types via a slot.

Describe alternatives you've considered

• Create a slot for each of the current input types components or
• Create a special custom type component with the slot logic. (Better)

Is your feature request related to a problem? Please describe.
Right now, there is no easy/natural way to access/modify field properties without over complexity

Describe the solution you'd like

• Reduce complexity
• Remove TS classes and change them for only Types (no new Field)
• Improve reactivity
• Apply entities to order better

Describe alternatives you've considered
Composition functions but..

Describe the bug
Undefined variable: "$component-active-bg".

To Reproduce
Steps to reproduce the behavior:

1. Import ~@asigloo/vue-dynamic-forms/src/styles/themes/default.scss
2. npm run serve

Expected behavior
No errors

Additional context
$input-focus-border-color: lighten($component-active-bg, 25%) !default;

Describe the solution you'd like
Add readonly property to inputs.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
Choosing an option to be preselected not working.

To Reproduce
Steps to reproduce the behavior:

1. Create a Select form Field
2. Set the value to the option you want to preselect.
3. Go to de dev page

Expected behavior
Option should be preselected in the select input

Additional context
Add any other context about the problem here.

Similar implementation but with render functions

Describe the bug
Error show when running npm install after installing the package in a repo.

To Reproduce
Steps to reproduce the behavior:

1. Install de package npm i @asigloo/vue-dynamic-forms
2. Run npm install again

Expected behavior
No Errors

Log

npm ERR! path /Users/alvarosaburido/as/test/node_modules/@asigloo/vue-dynamic-forms
npm ERR! code EISGIT
npm ERR! git /Users/alvarosaburido/as/test/node_modules/@asigloo/vue-dynamic-forms: Appears to be a git repo or submodule.
npm ERR! git     /Users/alvarosaburido/as/test/node_modules/@asigloo/vue-dynamic-forms
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alvarosaburido/.npm/_logs/2020-05-04T14_47_46_677Z-debug.log

Posible fixes
APSL/react-native-version-number#13 (comment)

Describe the solution you'd like
Datalist Input (Dropdown with images/icons)

Is your feature request related to a problem? Please describe.
The library lacks correct accessibility.

Describe the solution you'd like
Pass AA

🚨 The automated release from the 0.x branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the 0.x branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The release 0.5.0 on branch 0.x cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=1.0.0 <1.0.0 can be published from branch 0.x.

The following commits are responsible for the invalid release:

• Merge pull request #118 from alvarosaburido/horrocrux-test (408f84d)
• feat(ci): semantic release test for. 0.x (1c63980)
• Merge pull request #111 from alvarosaburido/update-deps-nuxt-demo (6aecdfa)
• feat(deps): update demo nuxt dependencies (4fba838)
• Merge pull request #108 from alvarosaburido/update-rollup-deps (9b0b27a)
• feat(deps): updated deps for. rollup (850460c)
• Merge pull request #105 from alvarosaburido/migrate-0x-build-system-to-rollup (6e32d98)
• feat(build): migrate build system to rollup 0.x (338c637)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch 0.x with git revert or git reset.

A valid branch could be next.

See the workflow configuration documentation for more details.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Is your feature request related to a problem? Please describe.
Application using the library asked for a way to set the icon trough the FormFields.

Describe the solution you'd like
Id can be set trough the FormField factory function, field name will be the default value.

Describe the bug
Textarea events are not triggering, validation doesn't work.

To Reproduce
Steps to reproduce the behavior:

1. Create a textarea FormField
2. Click on '....'
3. Check VueDevTools events tab
4. No focus nor blur events are triggered.

Expected behavior
Textarea should behave like the rest of the elements

Describe the solution you'd like
Unit Testing and Code Coverage

Describe alternatives you've considered

• Jest
• Mocha

Is your feature request related to a problem? Please describe.
No this is not currently a problem but just a suggestion. Some frameworks come with pre-defined attributes that you need to define for the look and feel.

Describe the solution you'd like
Whist there is a customClass property for fields, perhaps customAttributes and or customStyles that could receive a key value pairs would also suffice. These of course would pick up the css from whatever cascading style sheet file added on the vue project. As an example, the tags for vuetify start with v- and whilst I understand that this is generic, how does one make it work with a particular framework, lets say BootstrapVue for example which depend on additional attributes.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the solution you'd like
https://github.com/rollup/plugins/tree/master/packages/alias

Describe the bug
CI is not building the library to a dist folder

To Reproduce
Steps to reproduce the behavior:

1. Install. version 0.4.x
2. Go to node_modules/@asigloo/vue-dynamic-forms`

Expected behavior
Dist folder is available in the package

Screenshots

Is your feature request related to a problem? Please describe.
The library lacks correct accessibility.

Describe the solution you'd like
Pass AA

Describe the bug
If a field of the form depends on a computed property, is not triggering when changed

To Reproduce
Steps to reproduce the behavior:

1. Create a computed property const isExternal = computed(() => otherBoolean)
2. Set as example customClass: isExternal ? 'hidden' : 'flex' in one of the fields
3. Change value of otherBoolean

Expected behavior
Form field customClass should react to change on the computed property.

Describe the bug
Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq) <input name=​"password" type=​"password" class=​"form-control">​…​​

Expected behavior
Add autocomplete attributes to inputs

Describe the solution you'd like
Add install as nuxt plugin option

Describe alternatives you've considered

• https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/nuxt

Describe the solution you'd like
Allow setting up Netlify Forms via options.

Describe alternatives you've considered
Spread props needed using v-bind

Describe the bug
Github repo link is missing in npm sidepanel

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://www.npmjs.com/package/@asigloo/vue-dynamic-forms.'
2. Check Sidepanel

Expected behavior
Github repo should be accesible from npm

Screenshots

Possible Fixes
https://docs.npmjs.com/files/package.json#repository

🚨 The automated release from the 0.x branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the 0.x branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The release 0.5.0 on branch 0.x cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=1.0.0 <1.0.0 can be published from branch 0.x.

The following commits are responsible for the invalid release:

• Merge pull request #108 from alvarosaburido/update-rollup-deps (9b0b27a)
• feat(deps): updated deps for. rollup (850460c)
• Merge pull request #105 from alvarosaburido/migrate-0x-build-system-to-rollup (6e32d98)
• feat(build): migrate build system to rollup 0.x (338c637)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch 0.x with git revert or git reset.

A valid branch could be next.

See the workflow configuration documentation for more details.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Same as #145 but for next

Bring better documentation to users of the library

Describe alternatives you've considered

• VuePress
• Nuxt.js

Describe the bug
Not a bug but a warning

To Reproduce
Steps to reproduce the behavior:

1. Add ''
2. Add checkbox inputs
3. Check Warning on Console

Expected behavior
A clear and concise description of what you expected to happen.

Extraneous non-emits event listeners (changed) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. 
  at <AsCheckboxInput control= {label: "Check  if you're awesome", type: "checkbox", name: "awesomeness", value: null, dirty: true, …} onChanged=fn<valueChange> > 
  at <AsDynamicInput key="awesomeness" control= {label: "Check  if you're awesome", type: "checkbox", name: "awesomeness", value: null, dirty: true, …} submited=true  ... > 
  at <AsDynamicForm form= {id: "example-form", fieldOrder: Array(11), fields: {…}} onSubmited=fn<handleSubmit> onChanged=fn<valueChanged>  ... > 
  at <App>

Describe the bug
Custom class ain't working

To Reproduce
Steps to reproduce the behavior:

1. Add customClass field to a FormField
2. Check the inspector
3. Class is not being applied

Expected behavior
Class is applied correctly

Describe the bug
vm.onFocus and vm.onBlur are not a function

To Reproduce
Steps to reproduce the behavior:

1. Click on a text area.

Expected behavior
Should emit events without error

Screenshots

Describe the solution you'd like
Add option to show validation errors on input blur.

Describe the solution you'd like
Allow users to access individual inputs via this.$refs

Describe the solution you'd like
Add the following options available in 0.x.x

customClass = '',
  method = 'POST',
  autoValidate = false,
  netlify = false,
  netlifyHoneypot = null,

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Add a Selectinput
2. Select a field

Expected behavior
No error

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• MacOS Catalina
• Chrome
• Version v3.2.0

Additional context
Add any other context about the problem here.

Describe the bug
Preselected Value of true should select Checkbox

To Reproduce
Steps to reproduce the behavior:

1. new CheckboxInput({
   label: 'Active',
   value: true,
   }),
2. Check Component

Expected behavior
Checkbox is selected

The current docs show how to create a custom field that contains a single <input> element. I would like to see documentation for creating more complex custom fields. Ideally I'd like to know how to create custom fields of the following types:

• Have more than one input internally - eg a field that collects an international phone number and consists of a country dropdown, a numeric input for area code and another numeric input for phone number.
• Contains no input elements at all - just arbitrary HTML and JS that presents an entirely custom widget to the user.
• A wrapper for a custom arbitrary 3rd party Vue component

These should each map to single properties in the model and be a single logical "field" in the form.

The current docs also only show how to create a custom field within a given form. I'd also like to see am example showing how to create a reusable custom field that can be used in different forms.

Describe the solution you'd like
Add how-to-use Custom Fields guide to Readme.md

Describe the bug
Error when shows up when npm run serve a TS Vue3 App that imports the lib.

in ./node_modules/@asigloo/vue-dynamic-forms/dist/as-dynamic-forms.esm.js

Module parse failed: Unexpected token (47:67)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     props,
|     setup(props, { emit }) {
>         const { onChange, onFocus, onBlur } = useInputEvents(props?.control, emit);
|         return () => h('input', {
|             name: props?.control?.name || '',

 @ ./src/main.ts 21:0-64 22:22-40
 @ multi (webpack)-dev-server/client?http://192.168.0.168:9573&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

To Reproduce
Steps to reproduce the behavior:

1. Install '@asigloo/vue-dynamic-forms@next`
2. Add the import into main.ts

Actual behavior
Doesn't compile

Expected behavior
Should compile

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

🚨 The automated release from the 0.x branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the 0.x branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The release 0.5.0 on branch 0.x cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=1.0.0 <1.0.0 can be published from branch 0.x.

The following commits are responsible for the invalid release:

• Merge pull request #102 from alvarosaburido/bugfix/update-0x-ci (db0b78d)
• fix(ci): changed master for 0.x branch (ca35174)
• Merge pull request #101 from alvarosaburido/feature/move-0x-build-system-to-rollup (bfbbb7b)
• feat(build): changed build system to rollup for 0.x (db95294)
• Merge pull request #81 from alvarosaburido/dependabot/npm_and_yarn/dev/nuxt/node-fetch-2.6.1 (55bc867)
• Update README.md (bb70d7f)
• chore(deps): bump node-fetch from 2.6.0 to 2.6.1 in /dev/nuxt (8e90a23)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch 0.x with git revert or git reset.

A valid branch could be next.

See the workflow configuration documentation for more details.

Good luck with your project ✨

Your semantic-release bot 📦🚀

• Create a theme that looks alike https://material.io/components/text-fields/

Describe the bug
Form not rendered if fieldOrder prop is missing

To Reproduce
Steps to reproduce the behavior:

1. Add a form object in v3.2.0
2. Remove fieldOrder array

Expected behavior
Default order should be available

Describe the solution you'd like
Add typings for Typescript support

Describe alternatives you've considered

Additional context
Add any other context or screenshots about the feature request here.

Describe the solution you'd like
Add url validation to validators.

• Update Docs

Is your feature request related to a problem? Please describe.
Default theme variables cannot be overwritten

Describe the solution you'd like
Apply !default to variables in theme/default.scss

Describe the solution you'd like
Add how-to-use Custom Fields guide to Readme.md

Describe the bug
When no options passed: Cannot destructure property 'customClass' of 'options.form' as it is undefined.

To Reproduce
Steps to reproduce the behavior:

1. In main.ts add const VueDynamicForms = createDynamicForms({}); without options