Merge pull request #38 from svelte-plugins/v3.0

🧹 ✨ refactor(library): upgrade build scripts, fix type defs, add support for hideOnOutsideClick

Author: dysfunc

.eslintrc.json

@@ -12,6 +12,10 @@
   "extends": ["eslint:recommended", "plugin:vitest/recommended"],
   "ignorePatterns": ["**/*.snap.js"],
   "overrides": [
+    {
+      "files": ["*.ts"],
+      "parser": "@typescript-eslint/parser"
+    },
     {
       "files": ["*.svelte"],
       "parser": "svelte-eslint-parser"

.github/workflows/unit.yml

@@ -1,35 +1,40 @@
-name: Unit Tests (Vitest)
-
+name: Unit Tests
 on:
   push:
     branches:
       - main
+    paths:
+      - src/**
   pull_request:
     types: [opened, synchronize, reopened]
-
 jobs:
-  build:
+  tests:
     runs-on: ubuntu-latest
+    name: Tests
     if: |
       (
         !contains(github.event.head_commit.message, '[skip ci]') &&
         !contains(github.event.head_commit.message, 'version bump')
       )
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
         with:
-          node-version: '18'
-          registry-url: 'https://registry.npmjs.org'
-      - uses: szenius/[email protected]
+          version: 8.11
+      - name: Install Node
+        uses: actions/setup-node@v3
         with:
-          timezoneLinux: "America/Los_Angeles"
-          timezoneMacos: "America/Los_Angeles"
-          timezoneWindows: "Pacific Standard Time"
-      - run: npm i
-      - run: npm test
-
-      - uses: actions/upload-artifact@v2
+          node-version: 20
+          cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run tests
+        run: pnpm test
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: unit-tests

.gitignore

@@ -19,7 +19,8 @@
 !.storybook
 
 # generated
-.vercel
+/.vercel
+/.package-lock.json
 /node_modules
 /dist
 

.lintstagedrc

@@ -1,5 +1,6 @@
 {
-  "./src/**/*.{test.js,js,json,svelte}": [
+  "./src/**/*.{test.js,ts,json,svelte}": [
+    "svelte-check --tsconfig ./tsconfig.json",
     "eslint -c ./.eslintrc.json --fix",
     "prettier --write"
   ]

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-  "printWidth": 120,
+  "printWidth": 80,
   "trailingComma": "none",
   "tabWidth": 2,
   "semi": true,

README.md

@@ -12,6 +12,10 @@ yarn add -D @svelte-plugins/tooltips
 # or with NPM
 
 npm i -D @svelte-plugins/tooltips
+
+# or with PNPM
+
+pnpm i -D @svelte-plugins/tooltips
 ```
 
 ## Using the Tooltip component
@@ -40,25 +44,26 @@ Checkout out my <u use:tooltip={{ content: 'Hello World!' }}>tooltip</u>
 ## API
 
 ### Props
-| Prop         | Description                                                         | Value                                           |
-| :----------- | :------------------------------------------------------------------ | :---------------------------------------------- |
-| action       | The action that triggers the tooltip (hover | click | prop)         | `string` (default: `hover`)                     |
-| animation    | The animation to apply to the tooltip                               | `string` (default: ``)                          |
-| delay        | The animation delay in milliseconds to apply to the tooltip         | `number` (default: `200`)                       |
-| arrow        | If `false`, the tooltip arrow will not be shown.                    | `boolean` (default: `true`)                     |
-| autoPosition | Adjust tooltip position if viewport clipping occurs                 | `string` (default: `false`)                     |
-| content      | The string or object containing componentref and props              | `string` | `object` component (default: ``)     |
-| maxWidth     | The max allowable width of the tooltip content                      | `number` (default: `200`)                       |
-| position     | The position where the tooltip should appear relative to its parent | `string` (default: `top`)                       |
-| theme        | The CSS theme class name                                            | `string` (default: ``)                          |
-| show         | Allows you to manually control the tooltip visibility               | `boolean` (default: `false`)                    |
-| style        | The object containing theme variable overrides                      | `object` (default: `null`)                      |
+| Prop               | Description                                                         | Value                                         |
+| :----------------- | :------------------------------------------------------------------ | :---------------------------------------------- |
+| action             | The action that triggers the tooltip (hover | click | prop)         | `string` (default: `hover`)                     |
+| animation          | The animation to apply to the tooltip                               | `string` (default: ``)                          |
+| arrow              | If `false`, the tooltip arrow will not be shown.                    | `boolean` (default: `true`)                     |
+| autoPosition       | Adjust tooltip position if viewport clipping occurs                 | `boolean` (default: `false`)                    |
+| content            | The string or object containing componentref and props              | `string` | `object` component (default: ``)     |
+| delay              | The animation delay in milliseconds to apply to the tooltip         | `number` (default: `200`)                       |
+| hideOnOutsideClick | Hides a tooltip when an outside click occurs                        | `boolean` (default: `false`)                    |
+| maxWidth           | The max allowable width of the tooltip content                      | `number` (default: `200`)                       |
+| position           | The position where the tooltip should appear relative to its parent | `string` (default: `top`)                       |
+| show               | Allows you to manually control the tooltip visibility               | `boolean` (default: `false`)                    |
+| style              | The object containing theme variable overrides                      | `object` (default: `null`)                      |
+| theme              | The CSS theme class name                                            | `string` (default: ``)                          |
 
 #### Using components as content
-| Prop              | Description                                                    | Value                               |
-| :-----------------| :------------------------------------------------------------- | :---------------------------------- |
-| content.component | Svelte component                                               | `component` (default: `null`)       |
-| content.props     | Any component propeties                                        | `object` (default: `null`)          |
+| Prop              | Description                                                          | Value                                           |
+| :-----------------| :------------------------------------------------------------------- | :---------------------------------------------- |
+| content.component | Svelte component                                                     | `component` (default: `null`)                   |
+| content.props     | Any component propeties                                              | `object` (default: `null`)                      |
 
 
 ```svelte