refactor(types): add missing types to action file

Author: dysfunc

docs/public/global.css

@@ -83,7 +83,7 @@
 	</div>
 
 	<div class="example">
-		This tooltip should appear on the <Tooltip content="<b>Tooltip Top</b><p>This is an example of using HTML and content wrapping.</p>" position="top" animation="slide" arrow={false}><i>top</i></Tooltip> when I hover.
+		This tooltip should appear on the <Tooltip content="<b>Tooltip Top</b><p>This is an example of using HTML and content wrapping.</p>" position="top" animation="slide" arrow={false}><i>top</i></Tooltip> when you hover.
 	</div>
 
 	<div class="example">

docs/src/App.svelte

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-plugins/tooltips",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "license": "MIT",
   "description": "A simple tooltip action and component designed for Svelte.",
   "author": "Kieran Boyle (https://github.com/dysfunc)",

package.json

@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+
   import { onMount, onDestroy } from 'svelte';
   import { formatVariableKey, getMinWidth, isInViewport } from './helpers';
   import { inverse } from './constants';
@@ -8,15 +10,27 @@
   export let align = 'left';
   export let position = 'top';
   export let maxWidth = 200;
-  export let style = null;
+  /**
+   * @type {{ [x: string]: any; } | null}
+   */
+   export let style = null;
   export let theme = '';
   export let animation = '';
   export let arrow = true;
   export let autoPosition = false;
 
+  /**
+   * @type {HTMLDivElement | null}
+   */
   let ref = null;
   let minWidth = 0;
+  /**
+   * @type {{ $destroy: () => void; } | null}
+   */
   let component = null;
+  /**
+   * @type {string | null}
+   */
   let animationEffect = null;
   let show = false;
 
@@ -25,6 +39,7 @@
 
     if (ref !== null) {
       if (isComponent && !component) {
+        // @ts-ignore
         component = new content.component({ target: ref, props: { action, ...content.props } });
       }
 
@@ -41,6 +56,7 @@
     }
 
     if (autoPosition && !isInViewport(ref)) {
+      // @ts-ignore
       position = inverse[position];
     }
 
@@ -61,17 +77,19 @@
   $: isComponent = typeof content === 'object';
 </script>
 
-<div
-  bind:this={ref}
-  class="tooltip animation-{animationEffect} {position} {theme}"
-  class:show
-  class:arrowless={!arrow}
-  style="min-width: {minWidth}px; max-width: {maxWidth}px; text-align: {align};"
->
-  {#if !isComponent}
-    {@html content}
-  {/if}
-</div>
+{#if content}
+  <div
+    bind:this={ref}
+    class="tooltip animation-{animationEffect} {position} {theme}"
+    class:show
+    class:arrowless={!arrow}
+    style="min-width: {minWidth}px; max-width: {maxWidth}px; text-align: {align};"
+  >
+    {#if !isComponent}
+      {@html content}
+    {/if}
+  </div>
+{/if}
 
 <style>
   /*--------------------------*

src/action-tooltip.svelte

@@ -0,0 +1,58 @@
+import type { SvelteComponentTyped } from 'svelte';
+
+export interface ComponentProps {
+  /**
+   * The content of the tooltip.
+   * @default ''
+   */
+  content?: string;
+
+  /**
+   * The position of the tooltip.
+   * Allowed values are 'top', 'bottom', 'left' or 'right'.
+   * @default 'top'
+   */
+  position?: string;
+
+  /**
+   * The maximum width of the tooltip.
+   * @default 200
+   */
+  maxWidth?: number;
+
+  /**
+   * The style of the tooltip.
+   * @default null
+   */
+  style?: undefined;
+
+  /**
+   * The theme of the tooltip.
+   * @default ''
+   */
+  theme?: string;
+
+  /**
+   * The animation style of the tooltip.
+   * @default ''
+   */
+  animation?: string;
+
+  /**
+   * Whether to show the arrow of the tooltip.
+   * @default true
+   */
+  arrow?: boolean;
+
+  /**
+   * Whether to automatically position the tooltip.
+   * @default false
+   */
+  autoPosition?: boolean;
+}
+
+export default class Component extends SvelteComponentTyped<
+  ComponentProps,
+  Record<string, any>,
+  { default: {} }
+> {}

src/action-tooltip.svelte.d.ts

@@ -1,42 +1,51 @@
-import type { SvelteComponentTyped } from "svelte";
+import type { SvelteComponentTyped } from 'svelte';
 
 export interface ComponentProps {
   /**
+   * The content of the tooltip.
    * @default ''
    */
   content?: string;
 
   /**
+   * The position of the tooltip.
+   * Allowed values are 'top', 'bottom', 'left' or 'right'.
    * @default 'top'
    */
   position?: string;
 
   /**
+   * The maximum width of the tooltip.
    * @default 200
    */
   maxWidth?: number;
 
   /**
+   * The style of the tooltip.
    * @default null
    */
   style?: undefined;
 
   /**
+   * The theme of the tooltip.
    * @default ''
    */
   theme?: string;
 
   /**
+   * The animation style of the tooltip.
    * @default ''
    */
   animation?: string;
 
   /**
+   * Whether to show the arrow of the tooltip.
    * @default true
    */
   arrow?: boolean;
 
   /**
+   * Whether to automatically position the tooltip.
    * @default false
    */
   autoPosition?: boolean;