Merge pull request #2 from vjcagay/feature/close-on-content-click

Add closeOnContentClick option
JFusco · Apr 26, 2017 · d0e7409 · d0e7409
2 parents 2a868a9 + 10a94a7
commit d0e7409
Show file tree

Hide file tree

Showing 9 changed files with 266 additions and 126 deletions.
diff --git a/README.md b/README.md
@@ -138,17 +138,37 @@ An `function` triggered any time the instance of the popover is closed
 </template>
 ```
 
+<a name="closeOnContentClick"></a>
+##### closeOnContentClick ~ optional
+Set to `false` if you don't want the popover to close if you click its contents. Useful if the popover contains elements you interact with (e.g. buttons and textboxes). This defaults to `true` when not set.
+```js
+<template>
+	<div>
+		<popover name="example" :closeOnContentClick="false">
+			<div slot="face">
+				<button>popover face</button>
+			</div>
+
+			<div slot="content">
+				<button>Some button</button>
+				<input type="text">
+			</div>
+		</popover>
+	</div>
+</template>
+```
+
 ## Styling
 #### Installation
 Import the main SCSS file in to your application SCSS files
-```scss
+```scss
 @import "node_modules/vue-popover/src/component/scss/styles.scss";
 ```
 
 There are a few variables set to `!default` that can be overriden. If you need to change it more just override the actual styles.
 
 **Any overriden variables needs to go above the `@import` statement to take effect**
-```scss
+```scss
 //-- Global UI
 $popover-z-index
 ```

diff --git a/__tests__/Popover-test.js b/__tests__/Popover-test.js
@@ -246,6 +246,58 @@ describe('Popover - custom content', () => {
 	});
 });
 
+describe('Popover - closeOnContentClick(true)', () => {
+	let app,
+		closeSpy;
+
+	beforeEach(() => {
+		closeSpy = sinon.spy();
+
+		app = new Vue({
+			template: `<div>
+							<popover name="test"
+								:closeOnContentClick="false"
+								v-on:popover:close="onPopoverClose">
+								<div slot="content">
+									<p>test some custom content</p>
+								</div>
+							</popover>
+						</div>`,
+			components: {
+				Popover
+			},
+			methods: {
+				onPopoverClose: closeSpy
+			}
+		}).$mount();
+	});
+
+	afterEach(() => {
+		app.$destroy();
+
+		app = null;
+		closeSpy = null;
+	});
+
+	it('should not trigger "popover:close" event when clicked inside', done => {
+		const face = app.$el.querySelector('.popover__face');
+		let content = null;
+
+		face.click();
+
+		Vue.nextTick(() => {
+			content = app.$el.querySelector('.popover__container');
+		});
+
+		Vue.nextTick(() => {
+			content.click();
+			expect(closeSpy.calledOnce).toBe(false);
+
+			done();
+		});
+	});
+});
+
 describe('Popover - multiple', () => {
 	let app,
 		openSpyOne,

diff --git a/dist/vue-popover.js b/dist/vue-popover.js
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/coverage/reports/lcov-report/index.html b/docs/coverage/reports/lcov-report/index.html
@@ -20,24 +20,24 @@ <h1>
     </h1>
     <div class='clearfix'>
       <div class='fl pad1y space-right2'>
-        <span class="strong">100% </span>
+        <span class="strong">94.29% </span>
         <span class="quiet">Statements</span>
-        <span class='fraction'>31/31</span>
+        <span class='fraction'>33/35</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">100% </span>
+        <span class="strong">91.67% </span>
         <span class="quiet">Branches</span>
-        <span class='fraction'>10/10</span>
+        <span class='fraction'>11/12</span>
       </div>
       <div class='fl pad1y space-right2'>
         <span class="strong">100% </span>
         <span class="quiet">Functions</span>
-        <span class='fraction'>8/8</span>
+        <span class='fraction'>9/9</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">100% </span>
+        <span class="strong">93.55% </span>
         <span class="quiet">Lines</span>
-        <span class='fraction'>27/27</span>
+        <span class='fraction'>29/31</span>
       </div>
       <div class='fl pad1y'>
         <span class="strong">1 branch</span>
@@ -64,15 +64,15 @@ <h1>
 </thead>
 <tbody><tr>
 	<td class="file high" data-value="js/"><a href="js/index.html">js/</a></td>
-	<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="31" class="abs high">31/31</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="10" class="abs high">10/10</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="8" class="abs high">8/8</td>
+	<td data-value="94.29" class="pic high"><div class="chart"><div class="cover-fill" style="width: 94%;"></div><div class="cover-empty" style="width:6%;"></div></div></td>
+	<td data-value="94.29" class="pct high">94.29%</td>
+	<td data-value="35" class="abs high">33/35</td>
+	<td data-value="91.67" class="pct high">91.67%</td>
+	<td data-value="12" class="abs high">11/12</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="27" class="abs high">27/27</td>
+	<td data-value="9" class="abs high">9/9</td>
+	<td data-value="93.55" class="pct high">93.55%</td>
+	<td data-value="31" class="abs high">29/31</td>
 	</tr>
 
 </tbody>
@@ -81,7 +81,7 @@ <h1>
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sat Mar 25 2017 12:24:14 GMT-0400 (EDT)
+  generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Mon Apr 10 2017 11:55:01 GMT+0900 (JST)
 </div>
 </div>
 <script src="prettify.js"></script>