proton-ui / proton Goto Github PK
View Code? Open in Web Editor NEWA collection of renderless UI components for Vue.js.
Home Page: https://proton-ui.com
License: MIT License
A collection of renderless UI components for Vue.js.
Home Page: https://proton-ui.com
License: MIT License
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
The BEM classes for each component should be clearly documented for reference when creating a custom look/feel.
Hi ,
I have added the proton ui into the inertia app.
However, styles are not applying.
BTW, proton-ui looks good.
Best Regards,
Sathish
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.
I have the below in main, but the styles wont take effect.
import Proton from '@efelle/proton'
Vue.use(Proton)
Clicking a checkbox in a group with toggle all checkboxes. ๐ฑ
Currently we don't have a stylesheet bundled with the library - making it difficult to jump in and start with out of the box.
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>
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.
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.
The component is listed in the roadmap page under completed and is also in the source, but not in the documentation.
to: {
required: false,
type: String | Object,
},
href: {
required: false,
type: String,
},
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.
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.
Keyboard-only users should only have to interact with the input field directly.
Remove tabindex
attribute from label field.
Components need real examples to be displayed.
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.
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.
TailwindCSS from v0.7.2 to v1
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
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).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.