Merge pull request #109 from bindable-ui/cam/c-tip-disable-trigger

Disable Tip Trigger

Author: GenGol

dev-app/app.html

@@ -52,7 +52,7 @@
                     <c-nav-horizontal-item
                         position="right"
                         href="https://github.com/bindable-ui/bindable"
-                        title="v1.9.9"
+                        title="v1.9.10"
                     ></c-nav-horizontal-item>
                 </c-nav-horizontal>
             </l-box>

dev-app/routes/components/tip/properties/index.html

@@ -105,6 +105,24 @@
 
         <c-divider></c-divider>
 
+        <div>
+            <l-stack spacing="var(--s-3)">
+                <c-h3>disable-trigger</c-h3>
+                <c-code-sample>
+                    <c-tip disable-trigger.bind="true">
+                        <div slot="trigger">
+                            <c-button>Disable Tip</c-button>
+                        </div>
+                        <div slot="content">
+                            <c-p color="var(--c_white)">Content Here will not show</c-p>
+                        </div>
+                    </c-tip>
+                </c-code-sample>
+            </l-stack>
+        </div>
+
+        <c-divider></c-divider>
+
         <div>
             <l-stack spacing="var(--s-3)">
                 <c-h3>force-close</c-h3>

dev-app/routes/components/tip/properties/index.ts

@@ -53,7 +53,12 @@ export class TipProperties {
             name: 'centered-content',
             value: 'boolean',
         },
-
+        {
+            default: 'false',
+            description: 'disables the tip from showing when clicked or hoover',
+            name: 'disable-trigger',
+            value: 'boolean',
+        },
         {
             default: 'false',
             description: 'Force the tip to close when clicking anywhere after opening it.',

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.9.9",
+  "version": "1.9.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"

package.json

@@ -317,6 +317,34 @@ describe('c-tip component', () => {
         }
     });
 
+    it('testing disableTrigger', async done => {
+        component = StageComponent.withResources()
+            .inView('<c-tip disable-trigger.bind="disableTrigger"></c-tip>')
+            .boundTo({
+                disableTrigger: true,
+            });
+
+        try {
+            await bootStrapEnvironment(component);
+            expect(component.viewModel.disableTrigger).toBe(true);
+            expect(component.viewModel.contentDisplay).toBe(false);
+
+            component.viewModel.show();
+            expect(component.viewModel.disableTrigger).toBe(true);
+            expect(component.viewModel.contentDisplay).toBe(false);
+
+            component.viewModel.contentDisplay = true;
+            component.viewModel.disableTriggerChanged(true);
+
+            expect(component.viewModel.disableTrigger).toBe(true);
+            expect(component.viewModel.contentDisplay).toBe(false);
+
+            done();
+        } catch (e) {
+            done.fail(e);
+        }
+    });
+
     afterEach(() => {
         component.dispose();
     });

src/components/tip/c-tip/c-tip.test.ts

@@ -33,6 +33,8 @@ export class CTip {
     public size = 'small';
     @bindable
     public contentMaxHeight = 'unset';
+    @bindable
+    public disableTrigger = false;
 
     public styles = styles;
     public contentDisplay;
@@ -98,6 +100,10 @@ export class CTip {
     }
 
     public show() {
+        if (this.disableTrigger) {
+            return;
+        }
+
         this.contentDisplay = true;
         setTimeout(() => {
             this.contentVisible = true;
@@ -106,4 +112,10 @@ export class CTip {
             }
         }, 100);
     }
+
+    public disableTriggerChanged(newValue) {
+        if (newValue && this.contentDisplay) {
+            this.contentDisplay = false;
+        }
+    }
 }