vueform / vueform Goto Github PK

View Code? Open in Web Editor NEW

782.0 4.0 51.0 24.88 MB

Open-Source Form Framework for Vue

Home Page: https://vueform.com

License: MIT License

JavaScript 83.39% Vue 8.84% CSS 6.12% SCSS 1.56% TypeScript 0.09%

form form-builder form-generation form-generator form-generator-vue3 forms forms-builder vue vue-form vue-form-builder

vueform's Introduction

Vueform

Vueform is an open-source form framework for Vue.js.

It standardizes the entire form building process, while taking care of everything from rendering to validation and processing:

25+ form elements with multi-file uploads, date pickers and rich text editor
element nesting and repeating
a complete theming and templating system with Tailwind support
50+ validators with async, dependent and custom rules
conditional logic with and/or condition groups
built-in form steps support
translating form contents and global i18n support
fully accessible
... and many more

Get Started

Create your first Vueform project using your favourite package manager:

npm create vueform@latest

yarn create vueform

pnpm create vueform

bun create vueform

Manual Installation

To manually install Vueform, use our Installation Wizard. This wizard will guide you through the necessary steps for a hassle-free setup.

Documentation

For a detailed understanding of Vueform, its features, and how to use them, refer to our Documentation.

Examples

Explore real-world applications of Vueform with some of our examples. Whether you're building a simple contact form or a complex multi-step questionnaire, these examples will give you ideas how to leverage Vueform features in your projects.

Drag and Drop

Build forms even quicker using our drag and drop form builder tool and export the code as a native Vue component: https://builder.vueform.com/demo

Contribute

We welcome contributors of all levels and backgrounds. Whether you're fixing bugs, enhancing functionality, or updating documentation, your efforts help strengthen Vueform for everyone.

Here are a few ideas how can your contribute:

Report bugs to help us maintain stability. Please check our reporting bugs guide.
Share ideas for innovative features or improvements in Ideas.
Ask questions to clarify doubts in Questions and let others find it later.
Send pull requests for code enhancements or fixes. Please check our contribution guide.
Help with translating Vueform to new languages.

Development

For those interested in diving deeper into Vueform's inner workings, you can set up a local development environment. Please follow our guide for setup instructions.

Clone

Clone Vueform into your local environment.

git clone https://github.com/vueform/vueform.git

Setup

Setup Vueform in a test environment and import the source files for Vueform plugin.

import { vueform } from '@vueform/vueform/src'

Now you can make changes in the src directory and you should see their effect in your test environment.

Test

Once you're finished make sure that all the tests are still passing.

npm run test

Build

If everything looks good, run the build script.

npm run build

License

MIT

vueform's People

Contributors

Stargazers

Watchers

vueform's Issues

DateElement has no appendToBody

Environment

vuejs: 3.4.21, vueform: 1.9.5
Using tailwind

Reproduction

A minimal reproduction has been created. In it the Date Picker "vertical" space is limited for the form field. Since we allow scrolling in the overflow (there could be many more form elements) expanding the date picker shows the popup in this space when if it was attached to the body it could overlay correct on top

https://stackblitz.com/edit/github-sdivt5?file=src%2FApp.vue,index.html

Describe the bug

Any Date Element appearing the bottom of the screen, or near the bottom of its container will open within the container. This same behavior was seen with SelectElement before the "append-to-body" flag was added. As a popup control this should be handled in the same fashion.

Additional context

No response

Logs

No response

EditorElement and TEditorElement missing placeholder prop

Environment

any

Reproduction

Add the placeholder attribute

Describe the bug

When adding the placeholder to the EditorElement and TEditorElement it does not render it.

		<EditorElement
			id="test-id"
			name="t-editor"
			description="Demo description"
			placeholder="test placeholder"
			label="Demo label"
			field-name="file"
			:accept="['jpg', 'jpeg', 'png']"
		/>

Additional context

No response

Logs

No response

Cannot read properties of undefined (reading 'steps')

Environment

vue: ^3.2.31
@vueform/vueform: ^1.5.4
vite: ^4.5.0
@vitejs/plugin-vue: ^4.4.0

Reproduction

Minimal reproduction available here:
https://codesandbox.io/p/sandbox/little-field-v2qv8r

Important:

Open the Debugger, by clicking the small bug icon in the preview window (top-right).
Select the Console tab.
Reload using the refresh icon in the preview window, to see the error.

Describe the bug

An error is thrown when attempting to create a multi-step form.

I attempted creating the form, first by following the basic example:
https://vueform.com/examples/basics-multi-step-form

Then later by using the demo form builder:
https://builder.vueform.com/demo

I attempted using both inline and schema methods.
Both methods result in error.

Additional context

Uncaught TypeError: Cannot read properties of undefined (reading 'steps')
    at ReactiveEffect.fn (/node_modules/.vite/deps/@vueform_vueform.js?v=68aa8a66:4858:79)
    at ReactiveEffect.run (/node_modules/.vite/deps/chunk-PBWN42R4.js?v=68aa8a66:422:19)
    at get value [as value] (/node_modules/.vite/deps/chunk-PBWN42R4.js?v=68aa8a66:1370:35)
    at ReactiveEffect.fn (/node_modules/.vite/deps/@vueform_vueform.js?v=68aa8a66:4700:126)
    at ReactiveEffect.run (/node_modules/.vite/deps/chunk-PBWN42R4.js?v=68aa8a66:422:19)
    at get value [as value] (/node_modules/.vite/deps/chunk-PBWN42R4.js?v=68aa8a66:1370:35)
    at ReactiveEffect.fn (/node_modules/.vite/deps/@vueform_vueform.js?v=68aa8a66:4700:176)
    at ReactiveEffect.run (/node_modules/.vite/deps/chunk-PBWN42R4.js?v=68aa8a66:422:19)
    at get value [as value] (/node_modules/.vite/deps/chunk-PBWN42R4.js?v=68aa8a66:1370:35)
    at ReactiveEffect.fn (/node_modules/.vite/deps/@vueform_vueform.js?v=68aa8a66:4702:16)

Logs

No response

Error when placing password fields in a group

Environment

vite/5.0.11 darwin-x64 node-v21.4.0
Nuxt 3.9.1
Theme: tailwind
yarn

Reproduction

Copy this code:

<Vueform size="lg">
  <TextElement
      name="password"
      input-type="password"
      :rules="[ 'required', 'min:8', 'same:password_confirmation' ]"
      field-name="Password"
      placeholder="Password"
  />
  <TextElement
      name="password_confirmation"
      input-type="password"
      :rules="[ 'required' ]"
      field-name="Password confirmation"
      placeholder="Password again"
  />
</Vueform>

Enter something like 1 into the "password" field and make sure there are no errors in the browser console.

Extend the example above by combining it into a group:

<Vueform size="lg">
  <GroupElement name="password_group">
    <TextElement
        name="password"
        input-type="password"
        :rules="[ 'required', 'min:8', 'same:password_confirmation' ]"
        field-name="Password"
        placeholder="Password"
        :columns="{ container: 6, label: 12, wrapper: 12 }"
    />
    <TextElement
        name="password_confirmation"
        input-type="password"
        :rules="[ 'required' ]"
        field-name="Password confirmation"
        placeholder="Password again"
        :columns="{ container: 6, label: 12, wrapper: 12 }"
    />
  </GroupElement>
</Vueform>

Do the same thing by writing something like 1 in the "password" field.

As a result, the browser console will display an error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value')
    at Proxy.check (@vueform_vueform.js?v=24254ff1:10694:85)
    at Proxy._validateSync (@vueform_vueform.js?v=24254ff1:9656:26)
    at @vueform_vueform.js?v=24254ff1:9644:53
    at Generator.next (<anonymous>)
    at le (@vueform_vueform.js?v=24254ff1:8998:19)
    at i (@vueform_vueform.js?v=24254ff1:9010:9)
    at @vueform_vueform.js?v=24254ff1:9015:7
    at new Promise (<anonymous>)
    at @vueform_vueform.js?v=24254ff1:9007:12
    at Proxy._validate (@vueform_vueform.js?v=24254ff1:9645:7)

Describe the bug

Based on this example: https://vueform.com/examples/accomodation-and-travel-create-account

Additional context

No response

Logs

No response

Vertical stepper

Describe the feature

Hey a vertical stepper option would be awesome.

Like here: https://m1.material.io/components/steppers.html

Additional information

Would you be willing to help implement this feature?
Could this feature be implemented as a plugin?

Final checks

Read the contribution guide.
Check existing discussions and ideas.
Check roadmap.

Using MultifileElement throws "Cannot read properties of undefined (reading 'source')"

Environment

Vue 2.7
Vueform 1.9.0

Reproduction

<Vueform> <MultifileElement name="multifile" label="Multi-file" :drop="true" :upload-temp-endpoint="{ url: '/temp', method: 'POST', }" /> </Vueform>

Describe the bug

Using the MultifileElement throws the following error

index.mjs:6145 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'source')
at eval (index.mjs:6145:225)
at Generator.next ()
at asyncGeneratorStep (index.mjs:133:1094)
at _next (index.mjs:133:1408)

Additional context

No response

Logs

No response

Info should have higher z-index than select dropdown

Environment

Reproduction

Describe the bug

Info should have higher z-index than select dropdown

Additional context

Logs

No response

The domain you've reached includes a version of Vueform without permission.

Unreadable text inputs on Nuxt with TailwindCSS theme

Environment

package manager: pnpm 8.12.1
nuxt: 3.8.2
@vueform/nuxt: 1.4.0
@nuxt/ui: 2.11.1
theme: tailwind 3.4.0 (dependency added in lockfile by @nuxt/ui)

Reproduction

Following fresh install using the official vueform documentation to implement Vueform on Nuxt with TailwindCSS theme

see sandbox: here or here

Describe the bug

In dark mode, text inputs seems to be unreadable by default :

dark mode
light mode

Additional context

No response

Logs

No response

Default for select element not applied with schema

Environment

vue 3.4, vite 5.0, vueform 1.6.5

Reproduction

https://codesandbox.io/p/devbox/nervous-fog-lgd4dj

Describe the bug

When a default value is assigned through the global default option and the value is 0 (zero) the element is not selected in the select element. It's is working fine if the default value is different from 0, or the default value is provided at the level of the select element it-self.

Additional context

No response

Logs

No response

Form response event in case of not 200 code returns empty object instead of axios response

Environment

Can be reproduced in sandbox
https://codesandbox.io/p/devbox/trusting-cherry-8z79lq

Reproduction

Try to submit form
See {} in console log output

Describe the bug

Seems that problem is in useVueForm send function if axios.request fails it throws an exception and response is not set in this case

response = await services.value.axios.request({
          url,
          method: method.toLowerCase(),
          [method.toLowerCase() === 'get' ? 'params' : 'data']: data,
        })

so it is empty object in

 finally {
      fire('response', response, form$.value)
      submitting.value = false
    }

Additional context

No response

Logs

No response

DateElement datepicker can't be disabled on mobile

Environment

Reproduction

Describe the bug

DateElement datepicker can't be disabled on mobile

Additional context

Related Discord conversation:
https://discord.com/channels/787237947635793940/1215268151844147280

Logs

No response

Validator message for numeric size is confusing

Environment

"@vueform/vueform": "^1.9.4"

Reproduction

:rules="[
            'required',
            'numeric',
            'size:4'
          ]"

Describe the bug

The <field> must be 4.

I would have expected The <field> must be 4 digits.

Additional context

No response

Logs

No response

VueForm not Working with Nuxt Layers

Environment

nuxt 3.7.0
vueforms

Reproduction

Create a nuxt app with a main app and a layer: https://nuxt.com/docs/getting-started/layers
Follow the vueforms installation instructions in the layer
Start the main app

Describe the bug

The app cannot be rendered because it is missing vueform.config.ts (since this file is sitting in the layer, and not in the main app).

The following error is shown: ERROR [nuxt] Could not compile template vueformPlugin.mjs.

Putting vueform.config.ts in the main app solves this error.

Additional context

Other nuxt packages like @nuxtjs/tailwindcss support that their config file is taken from the layer if no file is found in the main app. Alternatively, nuxt-ui adds its config to app.config.ts.

Logs

No response

Conditional rendering on DateElement with extendOptions: { weekNumbers: true } causes the Flatpickr render with width 1px

Environment

vite 4.3.2
vue 3.2.47
tailwindcss 3.3.3

Reproduction

Use schema object with conditional rendering:

start_date_with_time: {
    conditions: [['use_time', true]],
    type: 'date',
    time: true,
    default:  dayjs().format(),
    rules: [
      {
        required: ['use_time', true]
      }
    ],
    formatData(name, value) {
      return { start_date: value };
    },
    extendOptions: {
      // weekNumbers: true, // <- this is causing the error and flatpickr width will be 1px
      allowInput: true,
      position: 'above' // <- unrelated to this bug, but it seems this options isn't respected and doesn't work with vueform
    },
  }

Describe the bug

Conditional rendering on DateElements (at least when using schema object) doesn't render correctly with extendOptions. Not sure if it's actually a bug related to Flatpickr itself. The issue is with the config options weekNumbers. Displaying week numbers changes the width of the container so perhaps that's the reason. As an additional note, also config option position is not respected causing the flatpickr always to render below the input field.

Additional context

No response

Logs

No response

`FormErrors`: Property "hasErrors" was accessed during render but is not defined on instance.

Environment

"@vueform/vueform": "^1.9.4",
"vue": "^3.4.21"
"@vitejs/plugin-vue": "^5.0.4",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3",
"vite": "^5.2.0"

Reproduction

    <Vueform>
      <template #empty>
        <FormErrors v-if="hasErrors" />
        ...

Describe the bug

App.vue:185  [Vue warn]: Property "hasErrors" was accessed during render but is not defined on instance. 
  at <Vueform> 
  at <App>

Additional context

I'm trying to follow https://vueform.com/reference/form-errors#basic-usage.

Logs

No response

The requested module '/node_modules/wnumb/wNumb.js?v=c0698822' does not provide an export named 'default' (at useTooltip.js:2:8)

I'm trying to integrate this into my Vue3+Vite project get the following error every single time:

Uncaught SyntaxError: The requested module '/node_modules/wnumb/wNumb.js?v=c0698822' does not provide an export named 'default' (at useTooltip.js:2:8)

I also tried creating a fresh Vue3 + Vite and follow your installation steps (from the logged in are) but still no luck.

Do you have any suggestion?

Astro error "window is not defined" in @vueform/vueform/dist/tailwind.mjs

Environment

Astro 4.4, Tailwind 3.4.1, Vue 3.4.20, npm 10.2.4, node 20.11.0, @vueform/vueform 1.8.0
Astro in static and server mode (netlify)

Reproduction

Follow the installation steps for astro
run dev

Describe the bug

On dev I get the error:

Astro detected an unhandled rejection. Here's the stack trace:
ReferenceError: window is not defined
    at file:///C:/SITES/XXXXXX/node_modules/@vueform/vueform/dist/tailwind.mjs:12806:51
    at file:///C:/SITES/XXXXXX/node_modules/@vueform/vueform/dist/tailwind.mjs:12806:524
    at file:///C:/SITES/XXXXXX/node_modules/@vueform/vueform/dist/tailwind.mjs:12822:3

Additional context

No response

Logs

16:17:28 [ERROR] [UnhandledRejection] Astro detected an unhandled rejection. Here's the stack trace:
ReferenceError: window is not defined
    at file:///C:/SITES/xxxx/node_modules/@vueform/vueform/dist/tailwind.mjs:12806:51
    at file:///C:/SITES/xxxx/node_modules/@vueform/vueform/dist/tailwind.mjs:12806:524
    at file:///C:/SITES/xxxx/node_modules/@vueform/vueform/dist/tailwind.mjs:12822:3
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async nodeImport (file:///C:/SITES/xxxx/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:54763:17)   
    at async ssrImport (file:///C:/SITES/xxxx/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:54663:24)    
    at async eval (C:/SITES/xxxx/vueform.config.ts:5:31)
    at async instantiateModule (file:///C:/SITES/axxxx/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:54725:9)

Invalid prop type for content StaticElement

Environment

vite 5.1.3
vue 3.4.19
vueform/vueform:1.8.0
theme: vueform

Reproduction

I would like to use a Function for the content prop, but only Object or String are allowed. Using a function works but vue generate some pesky warnings in dev, about prop type check failure.
Could the type Function be added to the allowed types?

Describe the bug

Unecessary warnings in dev consoles

Additional context

No response

Logs

runtime-core.esm-bundler.js:44 [Vue warn]: Invalid prop: type check failed for prop "content". Expected String | Object, got Function  
  at <StaticElement type="static" wrap=false  ... >

SelectElement "X" control is on top of control text

Environment

Vite 5.0.4 and tailwind theme - reproducible in sandbox (see link)

Reproduction

I created an example, but basically set the fields

:native="false"
:search="true"

And the "X" control of the select picker upon picking a long value with truncation in effect will overrun the display.

Example

Describe the bug

SelectElement with long value displays will properly truncate but the value display is not accounting for the "X" control when "search" parameter is true and thus is running behind it.

Additional context

No response

Logs

No response

DateElement extendOptions.position = 'top' does not have effect

Environment

Reproduction

Describe the bug

DateElement extendOptions.position = 'top' does not have effect

Additional context

Related Discord conversation:
https://discord.com/channels/787237947635793940/1215268151844147280

Logs

No response

NUXT ERROR: Failed to resolve import "/.nuxt/vueformPlugin.mjs"

Environment

node 20.9.0
npm 10.1.0
Nuxt 3.8.1
theme vueform

Reproduction

https://stackblitz.com/edit/nuxt-starter-mlfffm

Describe the bug

When attempting to add modules to my project, I am encountering the following errors:

Compilation Error:

ERROR  Could not compile template vueformPlugin.mjs.

Path Resolution Warnings:

WARN  Could not resolve /.nuxt/vueformPlugin.mjs.
WARN  Could not resolve /.nuxt/vueformPlugin.mjs.
WARN  Could not resolve /.nuxt/vueformPlugin.mjs.

Translated from Portuguese (pt-BR).

Additional context

No response

Logs

No response

Validator 'in' must be named 'in_' otherwise it is not found

Environment

"@vueform/vueform": "^1.6.6",
"vite": "5.0.0-beta.0",
"vite-plugin-imagemin": "0.6.1",
"vite-plugin-purge-icons": "0.9.2",
"vite-plugin-pwa": "0.16.4",
"vite-plugin-radar": "0.9.1",

Reproduction

<TextElement :rules="['in:test']" />

Describe the bug

The reason seems the class that is named 'in_' (because 'in' is a reserved name i guess)
https://github.com/vueform/vueform/blob/d84a227924b2c730b65b156a43d2d3407bff6dd3/src/services/validation/rules/in.js

Additional context

No response

Logs

@vueform_vueform.js:8840 Uncaught (in promise) Error: Unknown rule: 'in'
    at Proxy.make (@vueform_vueform.js:8840:13)
    at @vueform_vueform.js:8835:75
    at arrayMap (@vueform_vueform.js:2476:25)
    at map (@vueform_vueform.js:4098:14)

Using a schema to display a form with a type list shows no elements

Environment

package.json (npm)
{
"nuxt": "^3.8.2",
"@vueform/nuxt": "^1.4.0",
"@nuxt/vite-builder": "3.5.3",
}

Reproduction

https://codesandbox.io/p/sandbox/falling-sunset-3cw9d2

Describe the bug

When using the schema variant, no form elements are output and the data object also remains empty.

Additional context

No response

Logs

No response

Extra vertical space added when hidden element is used

Environment

vue: ^3.2.31
@vueform/vueform: ^1.5.4
vite: ^4.5.0
@vitejs/plugin-vue: ^4.4.0
theme: Vueform

Reproduction

Minimal reproduction available here:
https://codesandbox.io/p/sandbox/ecstatic-water-h5lpvr

Describe the bug

hidden element adds extra vertical space between the form fields.

Additional context

Logs

No response

EditorElement and TEditorElement are not initialising their value with synced v-model

Environment

any

Reproduction

Add the v-model to the EditorElement or TEditorElement

Describe the bug

For the given example, the EditorElement is not rendering it's value from the v-model.

<template>
    <Vueform v-model="form" sync>
        <TextElement name="hello_world" label="Label"/>
        <EditorElement
            id="test-id"
            name="test_description"
            description="Demo description"
            :endpoint="async (file, $el) => {
                await uploadFile(file.file)
            }"
            label="Demo label"
            field-name="file"
            :accept="['jpg', 'jpeg', 'png']"
        />
        <ToggleElement name="toggle">
            Receive notifications
        </ToggleElement>
    </Vueform>

</template>

<script setup>

import { ref } from "vue";
import useFilesApiProvider from "@/utils/FilesApiProvider.js";

const { uploadFile } = useFilesApiProvider();
const form = ref({
    hello_world: "Hello World",
    test_description: "<div>Test</div>",
    toggle: true,
});

</script>

Additional context

No response

Logs

No response

Module not found: Error can't resolve '@vueform/builder'

Environment

Using vue/cli 5.0.8 and yarn

Reproduction

Described below

Describe the bug

My imports look like:

import Vueform from '@vueform/vueform'
import vueformConfig from './../vueform.config'
import Builder from '@vueform/builder'
import builderConfig from './../../builder.config'

but when I run yarn serve I get the following errors:

 error  in ./src/main.js

Module not found: Error: Can't resolve '@vueform/builder' in <>\src'

 error  in ./src/main.js

Module not found: Error: Can't resolve './../../builder.config' in '<>\src'

ERROR in ./src/main.js 7:0-39
Module not found: Error: Can't resolve '@vueform/builder' in '<>\src'

ERROR in ./src/main.js 8:0-51
Module not found: Error: Can't resolve './../../builder.config' in '<>\src'

webpack compiled with 2 errors

When I don't include the Builder and builderConfig imports, it doesn't complain and I can see some forms but the formatting is not all there.

Additional context

No response

Logs

No response

MultiSelect with appendTo[Body] focus issues

Environment

Please see discussion here: https://discord.com/channels/787237947635793940/1216840909132533760/1216989160347406467

Reproduction

https://stackblitz.com/edit/github-esmsuw?file=src%2FApp.vue

Describe the bug

Clicking the scroller on the side or anything in the after-list slot, close the dropdown

Additional context

No response

Logs

No response

VueForm fails to render multilingual forms with localized default values

Environment

Vite 5.0.4
Vue 2.7.15
VueForm 1.6.4

Reproduction

Create a builder application with multiple locales.
Create a form in that builder with Text and Hidden with default values defined for each language.
Export the form and use with with VueForm with locales enabled.
Note that you get an exception in the console
Invalid prop: type check failed for prop "default". Expected String, Number, got Object found in <HiddenElement>

See example here:
https://stackblitz.com/edit/vitejs-vite-lq5dsv?file=App.vue

Describe the bug

It seems that the Hidden and Text elements expect a simple string and don't accept the localized object with multiple locales.

Additional context

No response

Logs

No response

Catalan translations in place of french ones in locales/fr_CA

Environment

Any environment.

Reproduction

No special reproduction instructions needed.

Describe the bug

Catalan translations where put in locales/fr_CA in place of french ones.

Additional context

No response

Logs

No response

vueform does not render when used with nextauthjs/next-auth

Environment

framework: Nuxt 3.8.2 with Nitro 2.8.1
package manager: yarn

Reproduction

Issue is obvious ...

 ERROR  Could not compile template vueformPlugin.mjs.

Describe the bug

git clone https://github.com/nextauthjs/next-auth

pick up apps/playgrounds/nuxt from the cloned repo dir and place it in a new dir outside the repo dir

in the new dir - create a very simple vueform in pages/ and then try to access it

you will hit - ERROR Could not compile template vueformPlugin.mjs. and the vueform will not render

you will see this in the browser window when trying to access the page using vueform -

500

[vite-node] [ERR_LOAD_URL] ./.nuxt/vueformPlugin.mjs

at ./.nuxt/vueformPlugin.mjs

Additional context

No response

Logs

No response

Click event does not fire for `ButtonElement` when subscribed via `on()`

Environment

Reproduction

Describe the bug

Click event does not fire for ButtonElement when subscribed via on()

Additional context

Logs

No response

Bug when I set the prop 'disabled' between several toggles in a ListElement.

Environment

Vite: ^4.4.11
Vue: ^3.3.8
Theme: Vueform
Package manager: Npm

Reproduction

Link

Describe the bug

When I add two or more objects to the list element with two toggles and I change the prop "disabled" of one, automatically the other toggles from the list change. I dont know if I am doing fine, but this problem is like if the current toggle keep reference in memory.

Pd. Sorry for my bad english

Additional context

Logs

No response

Initial items of ListElement not shown for nested object element

Environment

vue: ^3.2.31
@vueform/vueform: ^1.5.4
vite: ^4.5.0
@vitejs/plugin-vue: ^4.4.0
theme: Vueform

Reproduction

https://codesandbox.io/p/devbox/romantic-jang-nlknw5

Describe the bug

The form allows me to display existing data, but does not allow me to check a radio button because the initially empty form is not displayed.

Additional context

No response

Logs

No response

StaticElement from schema with content as function ignores tag field

Environment

Vite 5.1.5, Vue 3.4.21

Reproduction

https://stackblitz.com/edit/github-or77kl?file=src%2FApp.vue

Describe the bug

If you use StaticElement as a schema but try to set the content as a function, the tag field is then ignored, and no tag is applied.

<script setup>
import { reactive } from 'vue';
const schema = reactive({
  header: {
    type: 'static',
    tag: 'h2',
    content: ($el) => {
      return 'Hello World';
    },
  },
  hello_world: {
    type: 'text',
    label: 'Hello',
    placeholder: 'World',
  },
});
</script>

<template>
  <div class="max-w-[500px] mx-auto mt-10">
    <Vueform :schema="schema"> </Vueform>
  </div>
</template>

<style></style>

Additional context

No response

Logs

No response

Issue Report: Unexpected Checkbox Group Behavior in VueForm Form Builder

Description:

When using the VueForm form builder component, the checkbox groups exhibit unintended behavior by selecting all options when choosing just one. This behavior contradicts the expected functionality of independent checkbox selections.

Steps to Reproduce:

Visit the example URL: https://vueform.com/examples/basics/form-builder
Observe the checkbox groups in the form.
Attempt to select a single option within any checkbox group.

Expected Behavior:

Checkbox groups should allow individual options to be selected without automatically selecting others in the same group. Each checkbox should function independently.

Actual Behavior:

Upon selecting a single checkbox option within a group, all other options in that group are simultaneously selected. The preview JSON data also reflects this, with all options in the group set to true.

Additional Notes:

This behavior compromises accurate data collection within the form, particularly for checkbox groups.
A short video clip demonstrating the issue is included:

FormBuilder.mp4

DateTime does not fire change event when nested in container

Environment

This could be a regression – I think it worked before, but as I didn't commit work, I cannot offer more details.

[email protected] /home/user/vueform-vite-starter-dbn
├── @vitejs/[email protected]
├── @vueform/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Reproduction

Go to the builder and put a DateTime element in a container element.
Add to the application (e.g. in onMount):
form$.el$('container.datetime').on('change', (n,o,el$) => console.log(n))

Describe the bug

A DateTime element does not fire on change when nested in a container.

Additional context

Workaround:

Do not put the DateTime element in a container. Then, it works.

Logs

No response

Does it support typescript? @types/vueform__vueform not found

no infinite property in multiselect element

Environment

latest vite, vue 3

Reproduction

need reproduction

Describe the bug

in your multiselect package has a infinite property but in vueform docs, i cant see
and when add infinite prop it does not work

Additional context

No response

Logs

No response

Loading spinner missing when submitting via event

Environment

"@vueform/vueform": "^1.9.4"

Reproduction

https://vueform.com/docs/handling-form-data#submit-via-event

Describe the bug

When following the submit via function method (https://vueform.com/docs/handling-form-data#submit-via-function) then a loading spinner is shown while the async function is in progress. But for the submit via event method, there is no loading spinner.

Additional context

No response

Logs

No response

Value from the numeric input is not number in submitting data

Environment

@vueform/vueform: 1.8.0
vue: 3.4.20

Reproduction

https://codesandbox.io/p/devbox/nifty-wiles-pj7z22?file=%2Fsrc%2FApp.vue
Set value in second input manually and submit

Describe the bug

form$.data from numeric inputs is expected to be submit as numbers, but there is not.

This also applies to form$.requestData

Additional context

Default numeric value is submit as a number

Logs

No response

DateElement in GroupElement does not set form data

Environment

Reproduction

Describe the bug

DateElement in GroupElement does not set form data

Additional context

No response

Logs

No response

Uncaught SyntaxError: ambiguous indirect export: default

Environment

Vite 5.0.5
Tailwind 3.3.5
pnpm 8.12.1

Reproduction

https://github.com/Uninen/vueform-pnpm-error-repro

Describe the bug

First, Thank You for open sourcing VueForm, I hope this project all the best! 🙏

Following the installation instructions for Vite project + pnpm here: https://vueform.com/docs/installation -- without shamefully hoisting -- VueForm dies with Uncaught SyntaxError: ambiguous indirect export: default.

Additional context

I understand that a bug appearing when not strictly following the installation instructions does not constitute a bug, but in my eyes forcing users to use a highly discouraged practice (of shamefully hoisting) is the bug here.

Vue community has largely adopted pnpm as the default package manager (Vue itself, vue-router, pinia, etc.) and supporting it properly is something that a Vue package should do IMHO. The real reason behind this issue is non-standard/sub-optimal engineering which also makes good TypeScript support hard to do. I hope you consider fixing this issue for all pnpm users.

Logs

No response

JSON Schema

Describe the feature

Any chance of integrating schema based on https://json-schema.org ?

Thanks

Additional information

Would you be willing to help implement this feature?
Could this feature be implemented as a plugin?

Final checks

Read the contribution guide.
Check existing discussions and ideas.

File Element convertFormData not working for Vite >= 3.0.0

Environment

vite: 4.1.4 (or higher)
@vueform/vueform: 1.6.3

Reproduction

Issue is obvious and present for many months

Describe the bug

Following the example here: https://vueform.com/reference/file-element#option-upload-temp-endpoint I used the following handler for uploading a file document:

 <FileElement
            name="attachment"
            accept=".jpg,.png,.pdf"
            :drop="true"
            :label="uploadLabel"
            rules="required"
            :upload-temp-endpoint="handleFileUpload"
          />


const handleFileUpload = async function (file, el$) {
  console.log("file", file); -- this is not empty
  let uploadFormData = el$.form$.convertFormData({
    file,
  }); // becomes `FormData` object
  console.log(uploadFormData); -- this is empty, not a file blob
}

The functionality works fine with vite 2.9.12 but not if you upgrade. First saw this issue back in March.

Additional context

No response

Logs

No response

Required rule doesn't consider default value 0 with numeric/integer rule

Environment

@vueform/vueform: 1.8.0
vue: 3.4.20

Reproduction

https://codesandbox.io/p/devbox/nostalgic-margulis-7s9qwt?file=%2Fsrc%2FApp.vue%3A23%2C21

Describe the bug

The default value equals 0 is expected to be accepted as a required numeric value, but this is not

Additional context

If the default value not equals 0 or there are no numeric/integer rules, then everything works as expected

If you change the value and then make it 0 again, then the value is accepted

Logs

No response

Astro Vueform integration issue

Environment

"@astrojs/vue": "^4.0.7",
"@vueform/vueform": "^1.6.5",
"astro": "^4.0.9",
"vue": "^3.3.8"

Reproduction

https://stackblitz.com/edit/github-ewgy71?file=astro.config.mjs,src%2Fpages%2F_app.ts,vueform.config.ts,package.json,README.md

Describe the bug

I have an issue when trying to follow the Astro Vue integration docs, just wanted to check if I was doing something silly

I've followed this Vueform doc to try setup the project and I’m hitting the error “Cannot use import statement outside a module”

After checking here: https://publint.dev/@vueform/[email protected] it looks like the warning "./dist/index.js is written in ESM, but is interpreted as CJS." could be related to my issue, but I'm not sure what makes this env setup unique enough to cause issues

Additional context

No response

Logs

(node:12) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
17:19:43 [ERROR] Cannot use import statement outside a module
  Stack trace:
    at internalCompileFunction (https://githubewgy71-adai.w-credentialless.staticblitz.com/blitz.a2aabdd9.js:180:1005)
    at Module._compile (https://githubewgy71-adai.w-credentialless.staticblitz.com/blitz.a2aabdd9.js:55:14512)
    at Module.load (https://githubewgy71-adai.w-credentialless.staticblitz.com/blitz.a2aabdd9.js:55:13457)

Using EditorElement throws "The 'data' option should be a function that returns a per-instance value in component definitions."

Environment

Vue 2.7
Vueform 1.9.0

Reproduction

<template> <Vueform> <EditorElement name="note" label="Note" /> </Vueform> </template>

Describe the bug

Using the EditorElement throws the following error

vue.runtime.esm.js:4414 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

found in

<EditorWrapper> <ElementLayout> <EditorElement> <FormElements> <Vueform>
...

Additional context

No response

Logs

No response

Missing text wrapping in the input boxes of TagElements

Environment

Vueform Builder (latest webapp)

Reproduction

Describe the bug

Text entered in the input box of TagElements do not wrap, casuing the text to flow out of the bounds of the component.

Additional context

No response

Logs

No response

vueform / vueform Goto Github PK

vueform's Introduction

Vueform

Get Started

Manual Installation

Documentation

Examples

Drag and Drop

Contribute

Development

Clone

Setup

Test

Build

Follow Us

License

vueform's People

Contributors

Stargazers

Watchers

Forkers

vueform's Issues

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Describe the feature

Additional information

Final checks

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs