enhance(clickoutside): broaden node type HTMLElement -> Element (cove…

…r SVG)

.changeset/popular-forks-bathe.md

@@ -0,0 +1,5 @@
+---
+'@svelte-put/clickoutside': patch
+---
+
+broaden node type from `HTMLElement` to `Element` to satisfy type checker with usage on SVG elements (#246)

packages/actions/clickoutside/src/clickoutside.js

@@ -9,7 +9,7 @@
  * <script lang="ts">
  *  import { clickoutside } from '@svelte-put/clickoutside';
  *
- *  let containerNode: HTMLElement;
+ *  let containerNode: Element;
  *  let modal = false;
  *
  *  function onClickOutside(event: CustomEvent<MouseEvent>) {
@@ -50,7 +50,7 @@
  * <Component use:clickoutside/>
  * ```
  *
- * @param {HTMLElement} node - node outside of which `click` event will trigger `clickoutside`
+ * @param {Element} node - node outside of which `click` event will trigger `clickoutside`
  * @param {import('./public').ClickOutsideParameter} param - instructions for `clickoutside` behavior
  * @returns {import('./public').ClickOutsideActionReturn}
  */

packages/actions/clickoutside/src/public.d.ts

@@ -33,7 +33,7 @@ export interface ClickOutsideAttributes {
  */
 export interface ClickOutsideLimit {
   /** Click event beyond the `boundingRect` of this parent node will not trigger `clickoutside` */
-  parent: HTMLElement;
+  parent: Element;
 }
 
 /**
@@ -58,7 +58,7 @@ export interface ClickOutsideConfig {
 export type ClickOutsideParameter = Partial<ClickOutsideConfig> | undefined;
 
 /** @public */
-export type ClickOutsideAction = Action<HTMLElement, ClickOutsideParameter, ClickOutsideAttributes>;
+export type ClickOutsideAction = Action<Element, ClickOutsideParameter, ClickOutsideAttributes>;
 
 /** @public */
 export type ClickOutsideActionReturn = ActionReturn<ClickOutsideParameter, ClickOutsideAttributes>;

packages/actions/clickoutside/types/index.d.ts

@@ -9,7 +9,7 @@ declare module '@svelte-put/clickoutside' {
    * <script lang="ts">
    *  import { clickoutside } from '@svelte-put/clickoutside';
    *
-   *  let containerNode: HTMLElement;
+   *  let containerNode: Element;
    *  let modal = false;
    *
    *  function onClickOutside(event: CustomEvent<MouseEvent>) {
@@ -54,13 +54,13 @@ declare module '@svelte-put/clickoutside' {
    * @param param - instructions for `clickoutside` behavior
    * */
   export function clickoutside(
-    node: HTMLElement,
+    node: Element,
     param?: ClickOutsideParameter,
   ): ClickOutsideActionReturn;
 
   export function resolveConfig(param?: ClickOutsideParameter): {
     enabled: boolean;
-    nodeForEvent: Document | HTMLElement;
+    nodeForEvent: Element | Document;
     eventType: string;
     options: boolean | AddEventListenerOptions | undefined;
     capture: boolean | undefined;
@@ -98,7 +98,7 @@ declare module '@svelte-put/clickoutside' {
    */
   interface ClickOutsideLimit {
     /** Click event beyond the `boundingRect` of this parent node will not trigger `clickoutside` */
-    parent: HTMLElement;
+    parent: Element;
   }
 
   /**

sites/docs/src/routes/(main)/docs/(pkg)/clickoutside/_page/codes/demo.code.svelte

@@ -4,7 +4,7 @@
   import { fly } from 'svelte/transition';
 
   let enabled = true;
-  let parent: HTMLElement;
+  let parent: Element;
   let click = 0;
   let cls = '';
   export { cls as class };
@@ -65,3 +65,8 @@
     </button>
   </div>
 </fieldset>
+
+<svg use:clickoutside>
+  <g use:clickoutside></g>
+  <text use:clickoutside></text>
+</svg>

sites/docs/src/routes/(main)/docs/(pkg)/clickoutside/_page/codes/js.generated/demo.code.js.svelte

@@ -63,3 +63,8 @@
     </button>
   </div>
 </fieldset>
+
+<svg use:clickoutside>
+  <g use:clickoutside></g>
+  <text use:clickoutside></text>
+</svg>

sites/docs/src/routes/(main)/docs/(pkg)/lockscroll/_page/codes/js.generated/events.code.js.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { lockscroll } from '@svelte-put/lockscroll';
+  let locked = false;
+  function toggleLockScroll() {
+    locked = !locked;
+  }
+  function onToggleLockScroll(e) {
+    console.log('New scroll lock state:', e.detail.locked);
+  }
+</script>
+
+<!-- event should be automatically typed if used in Typescript -->
+<svelte:body use:lockscroll={locked} on:lockscroll:toggle={onToggleLockScroll} />
+<button class="c-btn-primary" on:click={toggleLockScroll}>Toggle lock scroll</button>

sites/docs/src/routes/(main)/docs/(pkg)/lockscroll/_page/codes/js.generated/quickStart.code.js.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { lockscroll } from '@svelte-put/lockscroll';
+
+  let locked = false;
+  function toggleLockScroll() {
+    locked = !locked;
+  }
+</script>
+
+<svelte:body use:lockscroll={locked} />
+<button class="c-btn-primary" on:click={toggleLockScroll}>Toggle lock scroll on body</button>

sites/docs/src/routes/(main)/docs/(pkg)/lockscroll/_page/codes/js.generated/scrollContainer.code.js.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { lockscroll } from '@svelte-put/lockscroll';
+  let locked = false;
+</script>
+
+<button class="c-btn-primary" on:click={() => (locked = !locked)}
+  >Toggle lock scroll for below section</button
+>
+<section class="mt-4 max-h-[400px] overflow-auto rounded bg-bg-soft px-6" use:lockscroll={locked}>
+  {#each new Array(10) as _}
+    <p>
+      What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting
+      industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
+      an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
+      survived not only five centuries, but also the leap into electronic typesetting, remaining
+      essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+      containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+      PageMaker including versions of Lorem Ipsum.
+    </p>
+  {/each}
+</section>

sites/docs/src/routes/(main)/docs/(pkg)/lockscroll/_page/codes/js.generated/store-helper.code.js.svelte

@@ -0,0 +1,13 @@
+<script>
+  import { lockscroll, createLockScrollStore } from '@svelte-put/lockscroll';
+
+  let locked = createLockScrollStore();
+</script>
+
+<svelte:body use:lockscroll={locked} />
+<div class="flex gap-4">
+  <button class="c-btn-primary" on:click={() => locked.toggle()}>Toggle lock scroll</button>
+  <button class="c-btn-primary-outline" on:click={() => locked.toggle(true)}>Force locked</button>
+  <button class="c-btn-primary-outline" on:click={() => locked.toggle(false)}>Force unlocked</button
+  >
+</div>

sites/docs/src/routes/(main)/docs/(pkg)/modal/_page/codes/js.generated/InformationModal.code.js.svelte

@@ -15,7 +15,9 @@
   :global(.custom-modal-container) {
     padding: 80px;
     background: lightblue;
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 10%),
+      0 4px 6px -4px rgb(0 0 0 / 10%);
   }
 
   h2 {

sites/docs/src/routes/(main)/docs/(pkg)/tooltip/_page/codes/js.generated/prepare.code.js.svelte

@@ -0,0 +1,5 @@
+<script>
+  import { helloTip } from './prepare.code';
+</script>
+
+<button use:helloTip class="c-btn-primary relative">Hello Button</button>

sites/docs/src/routes/(main)/docs/(pkg)/tooltip/_page/codes/js.generated/quickStart.code.js.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { computePosition } from '@floating-ui/dom';
+  import { tooltip } from '@svelte-put/tooltip';
+</script>
+
+<button
+  class="c-btn-primary relative"
+  use:tooltip={{
+    content: 'An example tooltip',
+    class: 'c-tooltip',
+    compute: async ({ node, tooltip, content }) => {
+      console.log(content);
+      const { x, y } = await computePosition(node, tooltip, {
+        placement: 'top',
+      });
+      tooltip.style.left = `${x}px`;
+      tooltip.style.top = `${y}px`;
+    },
+  }}
+>
+  A button with tooltip
+</button>