Merge branch 'update/tippyjs'

farengeyt451 · Apr 9, 2021 · f663a11 · f663a11
2 parents 3b30780 + a21519a
commit f663a11
Show file tree

Hide file tree

Showing 61 changed files with 25,240 additions and 4,498 deletions.
diff --git a/.browserslistrc b/.browserslistrc
diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md
@@ -0,0 +1,22 @@
+## Migration Guide
+
+- From version 2.x.x to version 3.x.x
+
+### Grouped tooltips
+
+1. In order to pass common props use `[groupedProps]` instead of `[tippyProps]`
+2. For each tooltip within `ngx-tippy-group` component you should pass `data-tippy-grouped` attribute instead of `data-tippy`
+
+### Singleton
+
+Whats new:
+
+1. Singletons supports methods to control them [programmatically](https://github.com/atomiks/tippyjs/releases/tag/v6.3.0)
+2. For singleton children `tippyInstances` are now being created, so on `singleton.destroy()` - the `tippyInstances` [will not be destroyed also](https://atomiks.github.io/tippyjs/v6/addons/#destroy)
+
+Migration steps:
+
+1. In order to pass singleton props use `singletonProps` instead of `tippyProps`
+2. Now you can also pass `singletonName` for control each `singleton` instance manually
+3. Pass `ngxTippy` directive for each `ngx-tippy-singleton` child
+4. Attribute `data-singleton` does not need now
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="https://github.com/farengeyt451/ngx-tippy-wrapper/raw/master/logo.png" alt="Logo" height="105">
+  <img src="https://github.com/farengeyt451/ngx-tippy-wrapper/raw/master/images/logo.png" alt="Logo" height="105">
 </div>
 
 <div align="center">
@@ -20,6 +20,11 @@
 
 [Run demo locally](./projects/demo/README.md)
 
+## Recommended versions to use
+
+- **Angular 8**: ~2.0.4
+- **Angular 9+**: @latest
+
 ## Installation
 
 Install from npm:
@@ -28,6 +33,10 @@ Install from npm:
 npm i ngx-tippy-wrapper --save
 ```
 
+## Before upgrade
+
+[Migration guide](./MIGRATION_GUIDE.md)
+
 ## Importing
 
 Import `NgxTippyModule`:
@@ -443,47 +452,49 @@ type InstanceChangeReason =
 
 ## Grouped tooltips
 
-If you want to give different tooltip content to many different elements, while only needing to initialize once with shared props use `ngx-tippy-group` component:
+If you want to give different tooltip content to many different elements, while only needing to initialize once with shared props - use `ngx-tippy-group` component:
 
 <!-- prettier-ignore-start -->
 ```html
-<ngx-tippy-group [tippyProps]="tippyProps">
+<ngx-tippy-group [groupedProps]="groupedProps">
 
-  <button data-grouped data-tippy-content="Tooltip content">Element with tooltip</button>
+  <button data-tippy-grouped data-tippy-content="Tooltip content">Element with tooltip</button>
 
-  <button data-grouped data-tippy-content="Tooltip content">Element with tooltip</button>
+  <button data-tippy-grouped data-tippy-content="Tooltip content">Element with tooltip</button>
 
 </ngx-tippy-group>
 ```
 <!-- prettier-ignore-end -->
 
-_For each tooltip within component you should pass `data-grouped` attribute_
+_For each tooltip within component you should pass `data-tippy-grouped` attribute_
 
-Also you can pass new content and props for every tooltip element, see [customization](https://atomiks.github.io/tippyjs/v6/customization/):
+Also you can pass new `content` and `props` through `attribute` for every tooltip element, see [customization](https://atomiks.github.io/tippyjs/v6/customization/):
 
 <!-- prettier-ignore-start -->
 ```html
 
-<ngx-tippy-group [tippyProps]="tippyPropsEx13">
+<ngx-tippy-group [groupedProps]="groupedProps">
   <button
-    data-grouped
+    data-tippy-grouped
     data-tippy-content="Tooltip content"
   >
-    Group
+    Grouped
   </button>
 
   <button
-    data-grouped
+    data-tippy-grouped
+    data-tippy-arrow="false"
     data-tippy-content="Tooltip content"
   >
-    Group
+    Grouped
   </button>
 
   <button
-    data-grouped
+    data-tippy-grouped
+    data-tippy-delay="[1000, 200]"
     data-tippy-content="Tooltip content"
   >
-    Group
+    Grouped
   </button>
 </ngx-tippy-group>
 ```
@@ -496,10 +507,7 @@ import { NgxTippyProps } from 'ngx-tippy-wrapper';
 
 @Component({ ... })
 export class DemoComponent implements OnInit {
-  bindedContent: string = 'Binded tooltip content';
-  bindedHTMLContent: string = '<p>Binded <strong>HTML</strong> content</p>';
-
-  tippyProps: NgxTippyProps = { ... };
+  groupedProps: NgxTippyProps = { ... };
   ...
 }
 ```
@@ -534,61 +542,49 @@ For multiple tooltips on a single element - use nest elements with applied `ngxT
 
 ## Singleton
 
-For [singleton](https://atomiks.github.io/tippyjs/v6/addons/) - provide tooltips elements within `ngx-tippy-singleton` component:
+For [singleton](https://atomiks.github.io/tippyjs/v6/addons/#singleton) - provide tooltip elements within `ngx-tippy-singleton` component:
 
 <!-- prettier-ignore-start -->
 ```html
-<ngx-tippy-singleton [tippyProps]="{ ... }">
-  <button
-    data-singleton
-    data-tippy-content="First tooltip content"
-  >
-    Singleton
-  </button>
+<ngx-tippy-singleton
+  [singletonProps]="singletonProps"
+  singletonName="main-page"
+>
 
-  <button
-    data-singleton
-    data-tippy-content="Second tooltip content"
-  >
-    Singleton
-  </button>
+  <button ngxTippy="Tooltip content">Singleton</button>
+
+  <button ngxTippy="Tooltip content">Singleton</button>
+
+  <button ngxTippy="Tooltip content">Singleton</button>
 
-  <button
-    data-singleton
-    data-tippy-content="Third tooltip content"
-  >
-    Singleton
-  </button>
 </ngx-tippy-singleton>
 ```
 <!-- prettier-ignore-end-->
 
-_For each tooltip you should pass `data-singleton` attribute_
+Use _optional_ `singletonProps` for pass common props
 
-**To overrides general `tippyProps` by the individual tippy `props`:**
+Use _optional_ `singletonName` for pass unique singleton name, need to control singletons
+**programmatically**
+
+### Overrides props
+
+To overrides common `singletonProps` by the individual tippy `props`:
 
 <!-- prettier-ignore-start -->
 ```html
-<ngx-tippy-singleton [tippyProps]="tippyProps">
+<ngx-tippy-singleton [singletonProps]="singletonProps">
   <button
-    data-singleton
-    data-tippy-content="First tooltip content"
+    ngxTippy="Tooltip content"
     data-tippy-placement="bottom"
   >
     Singleton
   </button>
 
-  <button
-    data-singleton
-    data-tippy-content="Second tooltip content"
-    data-tippy-arrow="false"
-  >
-    Singleton
-  </button>
+  <button ngxTippy="Tooltip content">Singleton</button>
 
   <button
-    data-singleton
-    data-tippy-content="Third tooltip content"
+    ngxTippy="Tooltip content"
+    data-tippy-arrow="false"
   >
     Singleton
   </button>
@@ -605,12 +601,102 @@ import { NgxSingletonProps } from 'ngx-tippy-wrapper';
 @Component({ ... })
 export class DemoComponent implements OnInit {
 
-  tippyProps: NgxSingletonProps = {
+  singletonProps: NgxSingletonProps = {
     ...,
     overrides: ['arrow', 'placement'],
   };
   ...
 }
 ```
 
-[Documentation for v1.0.1](./README-v1.01.md)
+### Smooth transitions
+
+Use the `moveTransition` prop, which is the transition between moves:
+
+```ts
+...
+import { NgxSingletonProps } from 'ngx-tippy-wrapper';
+
+@Component({ ... })
+export class DemoComponent implements OnInit {
+
+  singletonProps: NgxSingletonProps = {
+    ...,
+    moveTransition: 'transform 0.4s linear',
+  };
+  ...
+}
+```
+
+### Programmatically control singleton instance
+
+**Get singleton instance(s)**
+
+| Method name             | Method parameter/parameters | Method short description          |
+| ----------------------- | --------------------------- | --------------------------------- |
+| getSingletonInstance()  | `name`: string              | Get specific singleton instance   |
+| getSingletonInstances() | -                           | Get all tippy singleton instances |
+
+---
+
+_You can use all methods described [here](https://atomiks.github.io/tippyjs/v6/addons/#showing-specific-tippy-instance)_
+
+In addition for `show()` method is possible to pass child `[tippyName]` prop
+
+<!-- prettier-ignore-start -->
+```html
+<ngx-tippy-singleton
+  [singletonProps]="..."
+  singletonName="main-page"
+>
+  <button ngxTippy="Tooltip content">Singleton</button>
+
+  <button ngxTippy="Tooltip content">Singleton</button>
+
+  <button
+    ngxTippy="Tooltip content"
+    [tippyName]="'custom'"
+  >
+    Singleton
+  </button>
+</ngx-tippy-singleton>
+```
+<!-- prettier-ignore-end-->
+
+---
+
+```ts
+...
+import { NgxSingletonProps, NgxTippyService } from 'ngx-tippy-wrapper';
+
+@Component({ ... })
+export class DemoComponent implements OnInit {
+
+  constructor(private tippyService: NgxTippyService) {}
+
+  tippyProps: NgxSingletonProps = { ... };
+
+  ngAfterViewInit() {
+
+    // Get singleton instance by name
+    const mainPageSingleton = this.tippyService.getSingletonInstance('main-page');
+
+    // Programmatically manipulate tooltips
+
+    // Show first child in singleton
+    mainPageSingleton.show();
+
+    // Show child instance at given index
+    mainPageSingleton.show(1);
+
+    // Show child `[tippyName]`
+    mainPageSingleton.show('custom');
+
+    ...
+  }
+}
+```
+
+[Documentation for v1.0.1](./docs/README-v1.01.md)
+
+[Documentation for v2.1.0](./docs/README-v2.1.0.md)
diff --git a/angular.json b/angular.json
@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -179,6 +182,41 @@
           }
         }
       }
+    },
+    "lib-workboard": {
+      "projectType": "library",
+      "root": "projects/lib-workboard",
+      "sourceRoot": "projects/lib-workboard/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/demo/tsconfig.lib.json",
+            "project": "projects/demo/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/demo/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/demo/src/test.ts",
+            "tsConfig": "projects/demo/tsconfig.spec.json",
+            "karmaConfig": "projects/demo/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["projects/demo/tsconfig.lib.json", "projects/demo/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
     }
   },
   "defaultProject": "ng-tippy-wrapper"