Hi,

When using only special class bind prop, the mounted hook doesn't detect that some classes have been provided and automatically apply p-default class. Therefore, some animations are disabled.

Here's a repro link : https://codepen.io/liqueurdetoile/pen/wvvZVaE

I use it in my project,and it work currently in dev ,but if I build npm and pubilsh it ,it not work.

Demo site crashed i guess some reason. Please update demo site and fix link
Thanks...

Right now, putting a @click or v-on:click doesn't run the function that it is passed. I'm not sure if this was intended or not, but there are many circumstances where an on click handler is useful/needed.

Hey everyone,
i am a total beginner in JavaScript and Vue.js . I don't understand, where I have to put the code snippets from the points Browser and Module in the README. I hope you get my problem.

I wanted to stop the event change then after only I get response from my ajax query will only change the checkbox.

Hi,

I have an issue with the v-model on my pretty checkbox...

I have 8 checkbox on my page, each of them have different name, id and value... To illustrate my problem and to find some clue, I did add 8 checkbox with the same configuration :

They are bind to a local computed variable which take the data from the state
<input :id="m.module + '-' + h" @change="changeCB" type="checkbox" :value="m.module + '|' + h" v-model="localUser.habilitations"> {{h}}
<p-check class="p-default p-curve p-smooth" color="primary-o" v-model="localUser.habilitations" @change="changePCB" :value="m.module + '|' + h">{{h}}</p-check>

Where localUser is :
localUser: ()-> Object.assign({}, @.$store.getters['user/userById'](@.id))

There it is for the environnement. Now let's see what happen when I check / uncheck the checkbox by logging the @.localUser.habilitations in the click event function changeCB and change PCB. I will perform the same action on the checkbox and on the pretty checkbox :

• uncheck ACCES left,
• check INSERT left,
• check ACCES right
• uncheck SELECT right.

When I check/unchecke the checkboxes

Everything is fine here... But now with the pretty checkbox, I have this result :

As you can see, when a uncheck something, i lose 2 entry in my model, and when I check something, there's no change in my model...

Did I misunderstand something or is there a problem with pretty checkbox ?

How can I set border-color or outline of a checkbox?

Hi,

Just wondering why animations are not working for me. Did copy pasted your example code. Is it connected to icons, as you are using mdi for examples, i have font awesome icons?

Thx!

Every day passes by, I came more impressed with this component. Congratulations.

How can I rearrange label on top of checkbox, at right or below of it?

What is the best way to customize the colors?

Looking at pretty-checkbox docs it is done via scss, but since they are packaged in npm I don't see a way to override them.

I want to customize checkbox background and border in off state.
but it is too difficult for me.
why?

I need to use this component inside my single file component. How do I accomplish that? My project uses vue-cli.

Hi bro
I am using this in my Vue project
I need to set one of this radio button groups checked in a way of program
How can I do this?

I am using your component but I can not verify the fields assigned.
If the check box works with the basic input, this works perfect for me.

I appreciate your help

<!--Basic Input (Work)-->
<div class="checkboxes" v-for="permission in arrayPermissions">                                       
     <input type="checkbox" :value="permission" v-model="permissions">
     <label class="check" v-text="permission.name"></label>
</div>

<!--Component PrettyCheckbox (it does not work)-->
<div v-for="permission in arrayPermissions">
   <p-check class="p-icon p-curve" color="success" v-model="permissions" :value="permission" 
    :checked="permission">
        <i class="icon fa fa-check" slot="extra"></i>
        {{ permission.name }}
    </p-check>            
</div>

After investigation, I can see this functionality is not accessible to users. Labels should be bound to inputs via their attributes rather than just placing an input over the top and absolutly positioning the element.

On the face of it, this library looked good but needs work to be used in production.

i would like to use pretty-checkbox with a array of options as i use https://bootstrap-vue.js.org/docs/components/form-checkbox
there is a quick way to obtain this with pretty-checkbox or i should bind every checkbox with a single value?
thanks.

Thanks for this plugin, makes working with styled radio and checkbox alot easier.

I'd like to request a tiny feature: the top div of a checkbox, radio and toggle should have a class such as p-check or p-radio in order to distinguish them for CSS purposes.

<div data-v-8850ea92="" class="pretty p-default p-round">
  <input type="radio" value="trial">
  <div class="state">
    <label>text</label>
  </div>
</div>

Now you can't really tell above whether this is a radio button or checkbox, except from the input type but I'd like to know one level higher what it is.

I have a list of radio buttons that I want to render from this list of objects. Note that "id" values are integers:

const items = [
    {id: 1, name: 'Option 1'},
    {id: 2, name: 'Option 2'},
    {id: 3, name: 'Option 3'}
];

If I use the radio button tag:

<p-radio v-for="item in options"
         :key="item.id"
         class="p-default p-fill p-round"
         v-model="form.option"
         :value="item.id"
         color="success"
         required>
    {{ item.name }}
</p-radio>

I get this warning in the console:

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, got Number.

I think this is because the value prop on the PrettyInput.vue component is typed as a String.

Could the value prop be changed to accept String or Number, or just any value?

Or is there some other way I can use pass integer values to the radio button values?

Thanks
Mark

how to make it rtl?

Hi,

How can I catch input event (such as @change="myMethod") when using pretty checkbox component?

Pretty-Checkbox allows to set font-size that turns the Icon bigger. Pretty-checkbox-vue seems not to have an option to trigger this down.

Hi. After try use on my own project get a issue with css style.

I don't know how to correct or what is origing of mistake.

I use with boostrap theme material.

I try with embebed on my style using dl dt and also only with div

If you like see on develop site,

now I just install pretty checkbox, and I can use only Font awesome Icons..

I tried things, but I can't use Bootstrap , Material Icons...

How can I install these libraries? into this package?

I am using your checkboxes and the feedback is that the animation is too slow and is not giving a good UX. Is there a way to speed up the animation by changing the transition time or transition delay? Please let me know.

Is Vue 3 support planned?

With this code, p-switch is not being animated:

<p-check class="p-switch" toggle> On <label slot="off-label">Off</label> </p-check>

but with this is being animated:

<p-check class="p-switch"> On <label slot="off-label">Off</label> </p-check>

I guess this in not working as expected.

Hello Hamed, thanks for this amazing Vue.js Component.
I'm having a little issue using Pretty Checkbox with Vue.js Watcher. In my scenario, I call a POST url when a Checkbox state is changed in order to update the database. The problem is that even if I put a variable to stop update the watch is fired after every update. My solution was use a setTimeout to update my control variable. I.e.:

var app = new Vue({
    el: "#my_app",
    data: [
        loading: false,
        generateInvoice: false
    ],
    watch: {
        generateInvoice: function(val, oldVal) {
            console.log("Doing Ajax POST call", val);
            if (this.loading) {
                console.log("Will not call");
                return;
            }
            // doing Ajax POST call
        },
        loading: function(val, oldVal) {
            console.log("Loading", val);
        }
    }
});

//Doing my stuff loading data from database
app.loading = true;
app.generateInvoice = myDBvar.generateInvoice; //is false
app.loading = false;

The browser console outputs:

> Loading false
> Loading true
> Doing Ajax POST call false

My workaround was put a setTimeout on loading = false:

//Doing my stuff loading data from database
app.loading = true;
app.generateInvoice = myDBvar.generateInvoice; //is false
setTimeout(function() {
    app.loading = false;
}, 100);

Then the browser console outputs:

> Loading false
> Doing Ajax POST call false
> Will not call
> Loading true

Do you know any way to do this better?