josephuspaye / keen-ui Goto Github PK
View Code? Open in Web Editor NEWA lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.
Home Page: https://josephuspaye.github.io/Keen-UI/
License: MIT License
A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.
Home Page: https://josephuspaye.github.io/Keen-UI/
License: MIT License
Hi,
I can't go with rendering list of days with checkboxes (as long as there is no select, it's way around for multiple select).
<ui-checkbox v-for="day in days" class="col s12" :value.sync="selectedDays" v-bind:id="day.id" v-bind:label="day.name">
I was trying few other ways but no success.
I need to fill array with selected values.
Hi,
First of all, your package is awesome. Many thanks for sharing it with the community.
I have a spotted a small issue with UIIconButton which does not center horizontally the icon in the button on Safari MacOSX. See screenshot from the documentation.
Actually, centering the icon can be achieved by changing the width in the ui-icon-button-icon
class to 100% which forces the horizontal centering of the icon:
.ui-icon-button-icon {
width: 100%;
height: initial;
}
I have successfully tested it on latest versions of Safari, Chrome and Firefox on MacOSX.
Is there a way open or close a popover besides default element trigger?
I get an invalid default value for suggestions if I don't set it manually. Not a big deal, but the docs says it's optional:
http://josephuspaye.github.io/keen-ui/#/ui-autocomplete-docs
Is there a way to set the type on a button? It default to submit but I want to explicitly declare it as a button
It might be something I did, but the width of 0 makes the popup screw up. It should have the width of the input field in my opinion, but maybe it's something to do with the bootstrap code that messes it up and add the 0 width?
<ul class="sey-list sey-show" style="left: 341px; top: 552px; width: 0px;">
Gday,
I've managed to get the autocomplete component working quite nicely but I'm wondering if you had any guidance on the best way to work with selection events? I couldn't really find a good way to do anything when a user selected something, I'm probably missing something obvious?
I did have a look at the source code and perhaps the Autocomplete component should dispatch events on the 'select' and 'highlight' methods that people can listen to? I did have an initial play with this and it seems to work well Does this sound like a worthwhile approach, if so I'm happy to put in a pull request.
Cheers
Thanks for a great looking component package!
I'm trying to catch an event but I'm not sure how to do it. The @option-selected
triggers, but how can I get the data from the event?
<ui-menu color="primary"
@option-selected="doStuff()"
:show-secondary-text="true"
:options="[{text: 'Hey', id: 1, 'secondaryText': 'Ok whatever'}, {text: 'foop', id: 2}]">
Hello world!
</ui-menu>
export default {
name: 'Home',
ready: function() {
this.$on('option-selected', function (msg) {
console.log(msg)
})
},
methods: {
doStuff: function() {
//How do I get the option data here?
}
}
}
Like you have in your examples, it would probably be needed (?) by others too to have a way to group icon buttons. I have added this to my styles, following a BEM structure.
<div class="ui-icon-button__group">
<ui-icon-button></ui-icon-button>
<ui-icon-button></ui-icon-button>
</div>
.ui-icon-button {
&__group {
display: flex;
}
}
Right now I use the built in, but would be nice if all tooltips are replaced with something similar to this.
The debounce attribute doesn't seem to do anything. See below:
<ui-textbox name="name" :debounce="500" icon="input" :value.sync="name" label="Name"></ui-textbox>
I see there is a toolbar component... but is there a way i can use other preset component to acts as sidenav?
I really like this package you have made. I just need these components to make my project look more consistent, so do you have an idea what the time frame is for:
And can I help in any way?
keen-ui is so beautiful and useful; i have found the thing like it for a long time;
I do not find a datetime component in keen-ui; and do you have a plan to support it???
and the rich text editor like Draft.js is important too, i think
I'm not sure where you define the value prop? But it's returning the text value. I can't see how to return the value property which contains my id?
Ideally I would like to:
How about one can set color out of the box?
If the color prop is not primary
, accent
, multi-color
, black
or white
, take it as a color string.
I have successfully integrated all components but there is no grid...
and typography...
if i wanna include for example grid of bootsrap 4 , or materializecss grid or bulma...
How can i do it? any ideas?
thanks... Hope someone can help me , add this in my test app
This is a fantastic, high quality Material Design implementation. Thank you for your hard work :)
Hi,
@JosephusPaye
Is it possible to make it working with vue-validator?
It is more convenient than lib used by you - much less code necessary etc.
I think you would just have to accept v-validate and v-model and just replicate it (currently impossible).
What you think? A lot of people using vue-validator.
I found your package today and already like it so much!
I'm currently using UIPopover to show a dropdown menu where each option has a UISwitch toggle, resulting in a mutant, a functionality mix of UIMenu and UISelect (multiple with switches instead of checkboxes).
I think would be useful to allow for further customization on the UIMenu options.
Hi,
I am using webpack for my project.
I can't just include css from node_modules.
How can I include keen-ui.css into my project CSS?
How do I set focus on UiTextbox or UiButton or any focusable control?
How can I add a submit button?
I am very interested in this library but I am experiencing some issues integrating it into my vue-cli generated + vue-loader project:
main.js (NOTE: keen-ui was installed using npm):
import Vue from 'vue'
import Keen from 'keen-ui'
import VueRouter from 'vue-router'
import App from './components/App'
import CountriesView from './components/CountriesView'
Vue.use(VueRouter, Keen)
var router = new VueRouter()
router.map({
'/countries': {
component: CountriesView
}
})
router.redirect({
'*': '/countries'
})
router.start(App, '#app')
app.vue
<template>
<div id="wrapper">
<ui-button type="normal" color="success">Default</ui-button>
<router-view></router-view>
</div>
</template>
<script>
import store from './../vuex/store'
export default {
name: 'App',
store: store
}
</script>
<style lang="scss">
@import '~keen-ui/dist/keen-ui.css';
</style>
I keep getting the following error in the console:
vue.common.js?e881:987[Vue warn]: Unknown custom element: <ui-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I am not sure why I keep getting these errors because I just followed the ES6 way of configuring keen according to the github documentation. Any ideas?
I have a component that opens another component in UiModal (the modal is placed in the first component).
In the second component I have UiIconButton with tooltip, but these tooltip don't show up.
The tooltips works fine in the first component, so I think something is going wrong in the inheritance proces.
Sorry for all the reports :-)
I want to dynamic load suggestions from my backend as the user types in the field. I'm not sure however if you have made this possible yet?
So now I just preload everything, but this isn't optimal when the database grow large of course.
Also it seems like that when I populate it with array of objects, it has a hard time auto completing my input?
It would be very nice to be able to translate all error message in one place. I will be happy to provide you at least a danish one :-)
The div
with a class of ui-textbox-feedback
is removed for disabled elements, but it has min-height:20px
so it pushes everything 20px each time the disabled state changes. Maybe it needs to stay there but change the visibility?
When I use the Select component and want to edit a resource on my app, I cannot make the values pre-selected.
With multiple off, the value is not selected (which is not a problem), but with multiple on, the checkboxes are not checked, and when I "check" it the values get duplicated.
I'm absolutely no expert, but analyzing the code, I think the problem is on UiSelect, setDefaultValue method. For some reason, this.options[i] === defaults[j] is never true, even if it is true.
Can it be changed to this.options[i].value === defaults[j].value or something like this?
On a side note, I think requiring an array with "text" doesn't make sense... the important thing in a select option is the value... Can It be able to recognize different patterns, being the "value" the only required thing?
1st (value = text): [value1, value2, value3]
2nd: [{'value': value1, 'text': 'text to value1'}, {'value': value2, 'text': 'text to value2'}]
3rd: [{value1: 'text to value1'}, {value2: 'text to value2'}]
Also being able to accept a pattern as the options (like the 2nd one for example), and a different pattern as the value/default (because only the value matters, the text is only "aesthetic").
It would be great if you could make it happen!
I can't seem to get the model value to bind for ui-textbox
<ui-textbox name="name" icon="input" label="Name" help-text="Please enter a name" validation-rules="required" value="name"></ui-textbox>
But when I type, Vuedev tools just shows the value as empty
Need some sort of way to allow it to open on hover. Could be added to the slot or probably better as open-popover-on for more consistency.
I thought there was error in dropdown position but everything is fine now
Thanks
The UiProgressCircular documentation is missing the "type" property.
Gday @JosephusPaye
Another idea for the autocomplete component.
Currently the search is powered by fuzzy search which returns items which might not be an exact match. In my use case I'm only interested in exact matches.
So would you be interested in adding a property that allows you to define the search type as either as fuzzy (used by default) or exact?
I've got the regex which powers an exact match search by looking at awesomplete and it seems to be working well so if you're interested I'll put in another pull request.
Cheers
Could we maybe get the code required under the examples in the docs. Would really help to get up and running with this library quickly. For example <ui-alert>Hi everybody! This is the default alert</ui-alert>
under the alerts section.
You probably want to check your LICENCE file name which differ from the LICENSE file entry in the package.json.
Nice job, btw!
The doc says we can set position of popover. But UiButton doesn't pass that property to UiPopover according to this line
Newbie on vuejs here, may need some help.
Expected:
click the navicon, a dropdown menu show's on the bottom right of it.
When it's a multiline the underline changes color once in focus, but the single line textbox doesn't.
Hi,
I hope you won't hate me for another issue opened...
Could you add CLASS prop for all components to make possible easy styling with just adding classes?
Could you consider publishing your webpack config files? Your package.json references these for nearly all builds, but they are ignored and not pushed making it impossible to build this package from source (or we'd have to reverse engineer a lot).
Same goes for your tests and their configs.
In short, could you provide the files you use to build your software instead of ignoring them
EDIT: I cloned the repo through bower which ignores above mentioned files. My apologies
I think it would be useful to have a property on the relevant components that can have a label, to choose whether the label is shown above the input (as is currently the case) or to the left (and possibly the right) of the input field.
Thanks for your feedback!
I'm not sure what I'm missing here, I have added this to my main.js
import { UiAutocomplete } from 'keen-ui';
and registered the component. However if I use it will not style it, although the javascript seems to work.
It seems that hide-nav-icon="true" does not work on the toolbar. Also why are prop names in de docs in camelCase but differently in the real code, example: nav-icon (code) vs navIcon (docs)?
Thanks a lot for these awesome set of components! They're so nice to use ๐
I just have one question though: is there an easy way of changing the primary and secondary colors used throughout the components when using the prebuild scripts and styles from the dist/
directory?
Or, what in general would I have to do to compile my own version of the CSS with changed colors?
Why we have empty iframe tag? Is it necessary?
Hi,
at first: great project! ! !
On my Android 6 mobile phone, with chrome browser, I cant change the page via sidenav.
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.