thesmythgroup / vue-toolkit Goto Github PK

Describe the Feature

Form validates control values against defined rules (or custom/arbitrary functions). Form is not submitted if validation fails.

Suggested Solution

Options:

1. Form has prop to define validation schema for all inputs.

<template>
  <v-form :schema="schema">
    <v-input name="name" />
  </v-form>
<template>

<script>
{
  // ...
  data() {
    return {
      schema: {
        name: { required, min }
      },
    };
}
</script>

2. Form controls have input to define validation rules.

<template>
  <v-form>
    <v-input name="name" rules="required|min:8" />
  </v-form>
<template>

Other Information

n/a

Describe the Feature

Show an asterixis in the Field components label, when the associated control is required.

Suggested Solution

None.

Other Information

Requires #1 to be completed first.

Describe the Feature

Enhance docs to document/explains things like:

• Component props/events
• How to style components
• CSS utility class usage
• Add home page
• Component edge cases (like #10)
• Etc.

Other Information

n/a

Describe of the Issue

I wonder if it modal/dialog should be centered vertically by default?

Describe the Feature

Form controls track their state individually. The Form component aggregates control states and provides them in the submitted event.

• dirty
• pristine
• touched
• untouched

Suggested Solution

In each supported control, implement blur (touched, untouched) and change (dirty, pristine) events are associated data tracking.

Other Information

n/a

Describe of the Issue

Focus styling isn't very clear.

Expected behavior

Focus styling would be obvious

Steps to Reproduce

Focus on a button

Describe the Feature

Allow apps to configure the strings used in components. This solution should be agnostic of what (if any) library the apps are using for i18n support.

Suggested Solution

Possibly use module options to pass an object of strings? Something like:

Vue.use(Common, {
  i18n: {
    'paginator.next': 'Next',
    'paginator.prev': 'Previous',
  }
});

Other Information

n/a

Describe the Feature

The ability to have different, pre-defined, dialog sizes via Sass.

Suggested Solution

Sizes:

• Small
• Default
• Large

Other Information

n/a

Describe of the Issue

If you increase the page size and that page no longer exists because there aren't enough records it returns no results and shows "Page 2 of 1".

Ex: If you have a list of 40 results and you are viewing 25 and a time,
nav to page 2 then change per page to 50 and you are at page 2 of 1.

Expected behavior

Current index should always be <= total pages.

Steps to Reproduce

Ex: If you have a list of 40 results and you are viewing 25 and a time,
nav to page 2 then change per page to 50 and you are at page 2 of 1.

Other Information

n/a

Describe the Feature

Our main need at TSG was to solve some of the problems with our Vue 2.x components, but we are keenly interested in migrating to Vue 3 in the near future. Therefore you, dear reader, can consider Vue 3 support "on the roadmap."

Suggested Solution

TBD

Other Information

n/a

Describe of the Issue

When the dialog/modal is closed focus goes to first element in page

Expected behavior

Focus would return to "Open Dialog" button or whatever initiated the modal or had focus before it appeared

Steps to Reproduce

Open a modal

Close a modal

Observe focus

Other Information

n/a

Describe the Feature

Currently, form field errors can be rendered manually. For example:

<v-form :validation-schema="schema" v-slot="{ errors }">

  <v-field label="Name">
    <v-input name="name" />
    <v-field-error v-if="errors && errors.name && errors.name.required">Name is required.</v-field-error>
  </v-field>

</v-form>

However, it might be more convent if, globally, error messages could be reregistered by validator. This would eliminate the need for manually rendering messages for each field per validator.

Suggested Solution

• Allow globally defined validator messages that are automatically display within v-field
• Still allow for manually rendering v-field-error in the template

Other Information

n/a

Describe of the Issue

Heading levels are not predictable and affect accessibility. For example, in the doc site the section title is an h2 (and should be an h1). The accordion component is hard-coded to be an h3, which would skip. I don't necessarily have a solution to suggest, but just pointing out that based on where an accordion or other component is used it might break the Heading tree.

Describe the Feature

Add an input component that restricts the input to numbers. Should also support Firefox.

Describe the Feature

The ability to reset a form back to it's initial values and default state. Use case: User makes changes to form, and then clicks a "Cancel" option.

Resetting a form should:

• Reset controls to initial values
• Reset form control back to untouched
• Reset submitted to back to false

Suggested Solution

Potentially expose reset as a property on the slot context.

<v-form v-slot="{ reset }">
  <!-- other stuff, etc -->
  
  <v-button @click="reset"> Cancel </v-button>
</v-form>

Other Information

n/a

Describe of the Issue

Dialog doesn't trap focus when tabbing

Expected behavior

See above

Steps to Reproduce

https://share.getcloudapp.com/GGu4Z48O

Other Information

n/a

Describe of the Issue

Some copy pasta on Dialog page

"Emitted when a chip is dismissed. "(should be dialog)

Describe the Feature

Default to open and fixed on desktop. Default to closed in mobile, with toggle button (hamburger) option to toggle sidebar. Maybe have an option to make sidebar collapsible in desktop.

Suggested Solution

Might need to introduce an additional component to handle the associated content.

Other Information

n/a

Describe of the Issue

Paginator select element doesn't have a label. Add aria-label="Items Per Page"

Describe the Feature

Currently, validation schema is set only once when the component loads.

Allow validation schema to be dynamic, potentially passing a computed property to validate based on conditions.
Ex:

schema = {
  phone: this.phone ? [validators.minLength(10)] : [],
}