gregpeden/click-confirm

Convenient and elegant inline user confirmation of UI events.

click-confirm's Issues

Default button selected

It would be nice that "No" button was selected per default, or it can be setted

Container property feature

I wasn't able to open a PR, since I got 403 response, so I will explain it as an issue:

I needed ti ability for the popover to appear inside a specific div, since I had a @mouseover event there followed by @mouseleave. So when the popup appeared the @mouseleave was triggered and causing unwanted behavior. This is because the popover is glued to the body.
So to fix this: Inside the ClickConfirm.vue

props: {
   ...
   container: {
      type: String,
      default: null,
      validator(value) {
         return typeof value === 'string' || value === null;
      }
   }
   ...
}

And inside the template just this:

...
<b-popover
            :container="container"
            ...>
...

Everything else remains the same.
Like this I can send to <click-confirm container="id-of-my-div">...</click-confirm> and the mess is fixed because the confirmation element will be inside my div.

Cheers.

Bootstrap pattern & required Error (submit event)

Hi,

Example :

<form @submit.prevent="onSubmit">
    <div class="form-group">
        <label for ="input1"> Text </label>
        <input type="text" v-model="data.value" class="form-control" :pattern="^[a-zA-Z0-9]*$" required
    </div>
    <click-confirm>
        <button type="submit" class="btn btn-danger"> Submit </button>
    </click-confirm>
</form>

I'd like to use click-confirm on a submit button into a form. Form-group input got pattern and required. Everything is ok but if i confirm with a false value on input (even without value at all) , pattern or required is checked but the pattern popover do not appear (The one "blabla value not ok").

404 There isn't a GitHub Pages site here. sirlamer.github.io/click-confirm/

Documentation page dotn work

The documentation page is down

Official documentation placement or position

On official documentation https://sirlamer.github.io/click-confirm/ there is a little mistake on the Placement examples, it's not position but placement property you should use.

Failed to mount component: template or render function not defined - BPopover

Hello,

Recently all my click-confirm buttons are now failing after running 'npm run dev' during development of new components. Click-Confirm was working fine for months until a couple days ago. Any ideas on what could be the cause of this issue?

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <BPopover>
       <ClickConfirm>

Doesn't work with Bootstrap Vue 2.1.0

ERROR in ./node_modules/click-confirm/dist/click-confirm.common.js
Module not found: Error: Can't resolve 'bootstrap-vue/es/components/popover/popover' in '/usr/src/service/node_modules/click-confirm/dist'

Documentation broken

It appears like the documentation linked in the README/top of the repo is currently broken - at least it only displays <% if (htmlWebpackPlugin.options.description) { %> <% } %> instead of the actual site content for me.
Looks like it's trying to load the stylesheet from https://sirlamer.github.io/dev/style.css, which returns a 404.
Current non-functional in Chrome 64.0.3282.119 and Firefox 58.0. I assume something changed with GitHub's page feature that rendered the documentation non-functional, since my regular package installation still works fine locally.

Just figured I'd point it out if other people are also running into this issue, looking for documentation 😄

Package is not working with vuejs 2.3.3.

I am trying to use this package with vuejs2.3.3, but its not working. Even it is not throwing any kind of exception. Kindly help.

click-confirm on async loop content

Hi,

I realized when I added inside an async loop, the clicks weren't captured. I tried to add a button outside the loop and worked just fine so I believe it's either loop, async or a sum of both.

Can you put some light on it and help me on what should I do?

Event does not bubble if elements are nested

I have found that when use a button with a font awesome icon in it, clicking on confirm does not work.

Looking at the code, i appears that when you click confirm, it will dispatch an event on the target, but this will not bubble, which means that the click handler in the parent element (i.e. the button in this case) does not get triggered.

E.g.

<click-confirm>
  <button class="btn btn-sm btn-secondary" @click="eventHandler()">
    <i class="fa fa-eraser"></i>
  </button>
</click-confirm>

Looking at the code, a fix would just be a case of making the event being dispatched have a property of bubbles as true:

const mouseClick = new MouseEvent('click', {
  bubbles: true,
});
const cancelled = !this.target.dispatchEvent(mouseClick);

After examining the intercepted event, it also looks like cancelable and composed should also be true. Giving:

const mouseClick = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  composed: true,
});
const cancelled = !this.target.dispatchEvent(mouseClick);

How to import click-confirm?

I just got this message "Unknown custom element: ", either I import it in vue file or index.js and use it by Vue.use.

        <click-confirm>
            <button type="button" class="close" @click="()=>{window.alert(123);}">
                <span aria-hidden="true">&times;</span>
            </button>
        </click-confirm>

Importing trows errors

The import is identical to the one specified in the documentation.

This dependency was not found:

• bootstrap-vue/es/components/popover/popover in ./node_modules/click-confirm/dist/click-confirm.common.js

To quick fix this error I changed.
File: click-confirm.common.js,
Line: 7,
/es/ => /esm/ and it works

Failed to mount component

Hi
I'm using Boostrap + VueJS and i'm trying to use your component in my standalone app (i don't know yet how to use webpack or others).

So i load your script like this

<script src="https://unpkg.com/click-confirm@latest/dist/click-confirm.min.js"></script>

Then I declared the component in my js file, like this (before declaring my vue)

Vue.component('click-confirm', clickConfirm);

And i use it in my html file like this
<click-confirm> <button type="button" aria-label="Close" class="close" @click="hideModalProfile( $event, modal.profile)">×</button> </click-confirm>

but i got this error :

[Vue warn]: Failed to mount component: template or render function not defined.

found in

<ClickConfirm>
   <BModal>
     <UsersComponent>
       <BTab>
         <BTabs>
           <Root>

Did i miss something in my integration ?
Thanks in advance