A Vue.js address form component for Bedrock Web apps

digitalbazaar

Last update: Sep 4, 2019

Related tags

Form Generator bedrock-vue-address-form

Overview

bedrock-vue-address-form

A Vue.js address form component for Bedrock Web apps

View the component in the test harness

npm i
cd test/
npm i
npm start

Re-Build countries.js

Create an account on http://www.geonames.org/
Navigate to the bin/ directory
Update username in config.json with your geoname's username
Use the created JSON file to update countries.js

cd bin/
node index.js

Additional Information

Geonames Country Data

Source: http://www.geonames.org/
License: https://creativecommons.org/licenses/by/4.0/

Comments

Implement select in Regions for big countries.
Countries json added.

Eslint works.

Add a better countries json array with regions.

Fix a small error in the vue file.

Add a Region Selector for large countries.

Implement select in Regions for big countries.
opened by aljones15 22
Upgrade to Quasar v1.
@gannan08 sorry to edit your description, but I am listing all the tests for expected functionalities in each PR so we know for sure what was reviewed

Tests:

restrict countries still works

USA and Canada swap out region labels

validation works for all inputs

vuelidate is fed into the :error prop

$touch is called on @blur and @keyUp

I also fixed this issue: https://github.com/digitalbazaar/bedrock-vue-address-form/issues/8

autocomplete seems to get correct values a majority of the time.
opened by gannan08 5
Vuelidate validation is a bit over eager
Steps:

touch the region input (before selecting a country)

select a country which is large enough to have a region select (angola is easy as is Canada or Mexico).

the result is in the image.

this is not just this one particular input all of the inputs can show invalid before even enter anything into the input.

Forms need to track dirty and use it when deciding if invalid.

might be a good idea to clear value.addressRegion on country change if not the first change.

@gannan08 assigned to you I'm assuming this stuff goes to you?
invalid
opened by aljones15 1
Address Line needs to be optimized for users

The current address line is a textarea with autocomplete="street-address"

usability experts recommend single inputs with a hidden second line.

https://baymard.com/blog/address-line-2

opened by aljones15 0
FIXME Count 1/ TODO Count 4
[ ] TODO: specify propsData Commit: (77a94f6) Add core files. File: test/web/10-AddressForm.js:15 Dave Longley commented a year ago

[ ] TODO: consider moving to bedrock-karma? Commit: (77a94f6) Add core files. File: test/test.config.js:12 Dave Longley commented a year ago

[ ] FIXME: make configurable Commit: (77a94f6) Add core files. File: test/components/index.js:10 Dave Longley commented a year ago

[ ] TODO: Move to bedrock-web-forms Commit: (f377b11) Update label generation and use alpha-2 codes for countries. File: BrAddressForm.vue:330 Ganesh Annan commented a year ago

[ ] TODO: $vm.el.something Commit: (77a94f6) Add core files. File: test/web/10-AddressForm.js:19 Dave Longley commented a year ago

TODO Count 4 FIXME Count 1 Oldest Comment a year ago Oldest Commenter Dave Longley Oldest Comment TODO: specify propsData
opened by mandyvenables 1
Toggle display of filter input to none when selected.

Solves the weird spacing issue found here:

https://github.com/digitalbazaar/bedrock-vue-create-organization-wizard/pull/5

The issue was on select the input still had text in it resulting in some countries causing a slight bump. We now toggle display: none on select and on filter display: 'inline-block' Have not noticed any news bugs caused by this, but does further highlight just how bad the q-select filter functionality is in beta.

opened by aljones15 4

Owner

digitalbazaar

GitHub

Super Form Builder built on top of Vue with Drag & Drop functionality, savable-form-schema and easy to maintain/upgrade your form.

agape-form-builder forked by vue-form-builder A simple builder to help you generate a super form for your features/modules/sites,... Easy to use, crea

0 Apr 5, 2021

Vue-form-generator: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example Features reactive forms based on schemas multiple

0 Feb 4, 2019

form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON

form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.

4.6k Jan 6, 2023

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.

@tailwindcss/forms A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities. Installation Note th

2.8k Dec 31, 2022

Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort

Forms JSON-based Form builder for Laravel Enso This package can work independently of the Enso ecosystem. The front end implementation that utilizes t