proton-ui/proton

A collection of renderless UI components for Vue.js.

proton's Issues

Change lodash to native

I think we can optimize and remove lodash and use vanilla (native) instead. It's less a lib.

https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore

Document styles

The BEM classes for each component should be clearly documented for reference when creating a custom look/feel.

Styles are not applying

Hi ,
I have added the proton ui into the inertia app.
However, styles are not applying.

BTW, proton-ui looks good.

Best Regards,
Sathish

Datatable: Needs styles

Renderless Components

In order to make Proton Framework Agnostic, we need to extract markup and styles to examples only and ensure the components themselves are utilizing slots. Doing so will decouple the markup and styles from the component functionality and logic.

We will build the components to be renderless and provide TailwindCSS specific examples of those components in our documentation.

Inspiration for Renderless Components in Proton initially came from Adam Wathan.

How Do i really get started?

I have the below in main, but the styles wont take effect.

import Proton from '@efelle/proton'

Vue.use(Proton)

One check to rule them all!

Clicking a checkbox in a group with toggle all checkboxes. 😱

Add starter stylesheet

Currently we don't have a stylesheet bundled with the library - making it difficult to jump in and start with out of the box.

Datatable: Support for array with values

Code:

<slot
  :name="column"
  :record="record"
  v-if="record[column] && !Array.isArray(record[column])"
>
    {{ record[column] }}
</slot>

<span
  v-else
  v-for="element in record[column]"
  :key="element"
  class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2"
>
    {{ element }}
</span>

Example:

<p-select> needs search functionality

Sometimes the component's options can be cumbersome to scroll through. It would be helpful to include the ability to start typing and relevant options are filtered down.

Button component navigation with no target

When a p-button component is used in a project that also uses Vue router, clicking the button will cause the router to try to navigate, even if no to parameter is specified.

If the button is clicked without the to or href parameters specified, it should only emit the click event.

There is no DataTable page in the documentation

The component is listed in the roadmap page under completed and is also in the source, but not in the documentation.

Button: to/href needs implementation

to: {
   required: false,
   type: String | Object,
},
href: {
   required: false,
   type: String,
},

Better error messages for select field when no matching option found.

When no matching value is found for v-model, I get an error saying Cannot read property 'value' of undefined or Cannot read property 'label' of undefined. It would be helpful to others in the future to have a way to handle these cases or provide a better error message.

Nuxt + Proton

Hey,

Does this work with Nuxt with TypeScript?

I create the plugins/proton.ts with:

import Vue from 'vue'
import Proton from '@efelle/proton'

Vue.use(Proton)

and in nuxt.config.ts: plugins: ['~/plugins/proton']

Error:

Toggle renders as checkbox in Firefox

The toggle fieldtype renders as a simple checkbox in Firefox

a11y: Use of tabindex on labels

Issue

The use of tabindex="0" on label elements for checkbox and radio input fields is not necessary and adds to the cognitive load of the page by requiring keyboard-only users to move twice for each field.

Actual Behavior

Keyboard-only users should only have to interact with the input field directly.

Steps to Reproduce the Problem

1. Start focus before a set of checkbox or radio elements
2. Begin tabbing through each element
3. Notice how focus lands on both label field and input field

Recommendations

Remove tabindex attribute from label field.

Add examples for each component within documentation

Components need real examples to be displayed.

Select inputs don't feature "autocomplete" to jump to available options

As expected, <select> elements can be navigated using the tab key. They can be tabbed into, and the dropdown can be expanded using the space bar and the arrow keys.

On normal <select> HTML elements, tabbing to the element and then typing part of the option label will select the first option where that matches. For example, tabbing to a "State" element and typing "wa" would automatically select the 'Washington' option.

Examples disabled in documentation

Since adding the sortable component (which brings in Shopify's Draggable library), Proton is no longer compatible out-of-the-box with Vuepress.

For the sake of having documentation, working examples of the component will be disabled until I can find a work-around.

Upgrade TailwindCSS for the latest

TailwindCSS from v0.7.2 to v1

Ref: https://tailwindcss.com/docs/upgrading-to-v1/

Components are not registering when using Vue.use

Given

import Vue from 'vue'
import Proton from '@efelle/proton'

Vue.use(Proton)

where a vue component template has a proton element
say <p-button>hello</p-button>, a console error appears where
the component is not registered.

Codesandbox link included.
https://codesandbox.io/s/4j45mpxp50

---

• Docs may need either a codesandbox to highlight components for users or,
• perhaps updating docs to reflect update workflow.

p-upload - click to upload works once per session

After clicking on <p-upload>'s drag'n drop area it will open the OS's file explorer, but any second attempt fails unless you refresh your session (force page reload).

Code brackets disappear in <p-select> value preview.

When including coding brackets (e.g. < and >) within a <p-select> option label, the brackets show up in the drop-down options but not the currently selected preview. See example below: