Merge pull request #2 from Jakeii/upgrade-deps

Upgrade deps

.eslintrc.cjs

@@ -1,21 +1,14 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-  plugins: ['svelte3', '@typescript-eslint'],
-  ignorePatterns: ['*.cjs'],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended', 'prettier'],
+  plugins: ['@typescript-eslint'],
   overrides: [
-    { files: ['*.svelte'], processor: 'svelte3/svelte3' },
     {
-      files: ['*.ts'],
-      extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/recommended-requiring-type-checking',
-        'prettier',
-      ],
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
       parserOptions: {
-        project: ['./tsconfig.json'],
+        parser: '@typescript-eslint/parser',
       },
     },
   ],
@@ -25,11 +18,11 @@ module.exports = {
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte'],
   },
   env: {
     browser: true,
     es2017: true,
     node: true,
   },
-  rules: {},
 };

.github/workflows/CD.yml

@@ -0,0 +1,34 @@
+name: Test, Release, Publish
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  test:
+    name: Release
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - run: corepack enable
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Check
+        run: pnpm check
+
+      - name: Package module
+        run: pnpm package

.github/workflows/ci.yml

@@ -1,48 +1,32 @@
-name: Test, Release, Publish
+name: CI
 
 on:
-  push:
+  pull_request:
     branches: [main]
 
 jobs:
   test:
-    name: Release
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
+      - uses: actions/checkout@v2
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
+      - run: corepack enable
 
-      - name: Cache pnpm modules
-        uses: actions/cache@v2
+      - uses: actions/setup-node@v4
         with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
-      - name: Setup PNPM
-        uses: pnpm/action-setup@v2
-        with:
-          version: 7
-
-      - name: Install dependencies
-        run: pnpm i
+      - run: pnpm install --frozen-lockfile
 
       - name: Lint
         run: pnpm lint
 
+      - name: Check
+        run: pnpm check
+
       - name: Package module
         run: pnpm package
 
-      - name: Release
-        run: pnpm semantic-release
-        env:
-          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+      - name: Build
+        run: pnpm build

.github/workflows/pages.yml

@@ -32,16 +32,18 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v1
+      - run: corepack enable
+
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm i --frozen-lockfile
 
-      - name: Build site
-        run: yarn build
+      - name: Build
+        run: pnpm build
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1

.nvmrc

@@ -0,0 +1 @@
+18.18.2

.prettierignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /build
+/dist
 /.svelte-kit
 /package
 .env

README.md

@@ -24,41 +24,31 @@ Popover options:
 #### Content
 
 ```html
-  <script>
-    import Popdown, { onClickOutside } from 'svelte-popdown';
-    let clickContentVisible = false;
-
-  </script>
-  <Popdown position="below middle" showContent={clickContentVisible}>
-    <button
-      slot="trigger"
-      on:click={() => (clickContentVisible = !clickContentVisible)}
-      use:onClickOutside={() => (clickContentVisible = false)}
-    >
-      click me
-    </button>
-    <div class="content" slot="content" transition:fade>content</div>
-  </Popdown>
+<script>
+  import Popdown, { onClickOutside } from 'svelte-popdown';
+  let clickContentVisible = false;
+</script>
+<Popdown position="below middle" showContent="{clickContentVisible}">
+  <button slot="trigger" on:click="{()" ="">
+    (clickContentVisible = !clickContentVisible)} use:onClickOutside={() => (clickContentVisible = false)} > click me
+  </button>
+  <div class="content" slot="content" transition:fade>content</div>
+</Popdown>
 ```
 
 #### Popover
 
 ```html
-  <script>
-    import Popdown from 'svelte-popdown';
-	let hoverContentVisible = false;
-  </script>
-  <Popdown position="outer-right middle" showContent={hoverContentVisible}>
-	<button
-		on:mouseover={() => (hoverContentVisible = true)}
-		on:focus={() => (hoverContentVisible = true)}
-		on:mouseout={() => (hoverContentVisible = false)}
-		on:blur={() => (hoverContentVisible = false)}
-		slot="trigger"
-	>
-		hover me
-	</button>
-	<div class="content" slot="content" transition:fade>content</div>
+<script>
+  import Popdown from 'svelte-popdown';
+  let hoverContentVisible = false;
+</script>
+<Popdown position="outer-right middle" showContent="{hoverContentVisible}">
+  <button on:mouseover="{()" ="">
+    (hoverContentVisible = true)} on:focus={() => (hoverContentVisible = true)} on:mouseout={() => (hoverContentVisible
+    = false)} on:blur={() => (hoverContentVisible = false)} slot="trigger" > hover me
+  </button>
+  <div class="content" slot="content" transition:fade>content</div>
 </Popdown>
 ```
 

dist/Popdown.svelte

@@ -0,0 +1,52 @@
+<script>import { createContentTransformStyleStore } from './stores/popdown';
+import { portal } from 'svelte-portal';
+import { writable } from 'svelte/store';
+const isBrowser = 'document' in global && 'querySelector' in document;
+export let contentClass = '';
+export let position = 'outer-bottom inner-left';
+export let target = isBrowser ? document.scrollingElement : 'body';
+export let showContent = false;
+export let calcLeft = null;
+export let calcTop = null;
+let trigger = writable();
+let windowSize = writable();
+let content = writable();
+const bindTrigger = (el) => {
+    $trigger = el.firstChild instanceof HTMLElement ? el.firstChild : el;
+};
+let targetElement = writable();
+const updateTargetElement = (target) => {
+    if (isBrowser && typeof target === 'string') {
+        const query = document.querySelector(target);
+        if (!query) {
+            throw new Error(`Could not find target element: ${target}`);
+        }
+        $targetElement = query;
+    }
+    else if (isBrowser && target instanceof HTMLElement) {
+        $targetElement = target;
+    }
+};
+$: updateTargetElement(target);
+const contentTransformStyle = createContentTransformStyleStore(windowSize, targetElement, trigger, calcLeft, calcTop, position);
+</script>
+
+<svelte:window on:resize={(e) => ($windowSize = [e.currentTarget.innerWidth, e.currentTarget.innerHeight])} />
+
+<div class="trigger" use:bindTrigger>
+  <slot name="trigger" />
+</div>
+
+{#if target && showContent}
+  <div class="content {contentClass}" bind:this={$content} style:transform={$contentTransformStyle} use:portal={target}>
+    <slot name="content" />
+  </div>
+{/if}
+
+<style>
+  .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+</style>

dist/Popdown.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import { type CalcPosition } from './stores/popdown';
+declare const __propDef: {
+    props: {
+        contentClass?: string | undefined;
+        position?: string | undefined;
+        target?: string | HTMLElement | undefined;
+        showContent?: boolean | undefined;
+        calcLeft?: CalcPosition | null | undefined;
+        calcTop?: CalcPosition | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {};
+        content: {};
+    };
+};
+export type PopdownProps = typeof __propDef.props;
+export type PopdownEvents = typeof __propDef.events;
+export type PopdownSlots = typeof __propDef.slots;
+export default class Popdown extends SvelteComponent<PopdownProps, PopdownEvents, PopdownSlots> {
+}
+export {};

dist/index.d.ts

@@ -0,0 +1,4 @@
+import Popdown from './Popdown.svelte';
+import { onClickOutside } from './util/on-click-outside';
+export default Popdown;
+export { Popdown, onClickOutside };

dist/index.js

@@ -0,0 +1,4 @@
+import Popdown from './Popdown.svelte';
+import { onClickOutside } from './util/on-click-outside';
+export default Popdown;
+export { Popdown, onClickOutside };

dist/stores/popdown.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="svelte" />
+import { type Readable, type Writable } from 'svelte/store';
+export type CalcPosition = (triggerPosition: number) => number;
+export declare const createContentTransformStyleStore: (windowSize: Readable<number[]>, scrollParent: Readable<HTMLElement>, trigger: Writable<HTMLElement>, calcLeft: CalcPosition | null, calcTop: CalcPosition | null, position: string) => Readable<string>;

dist/stores/popdown.js

@@ -0,0 +1,58 @@
+import { derived } from 'svelte/store';
+import { calcTranslateX, calcTranslateY } from '../util/popdown-translate';
+export const createContentTransformStyleStore = (windowSize, scrollParent, trigger, calcLeft, calcTop, position) => {
+    // calculates the position of the content relative to the scrollable ancestor/body
+    const ancestorOffset = derived(scrollParent, ($scrollParent, set) => {
+        const onScroll = function () {
+            const { left, top } = this.getBoundingClientRect() || {
+                left: 0,
+                top: 0,
+            };
+            const scrollLeft = this.tagName !== 'HTML' ? this.scrollLeft : 0;
+            const scrollTop = this.tagName !== 'HTML' ? this.scrollTop : 0;
+            set({
+                left: left - scrollLeft,
+                top: top - scrollTop,
+            });
+        };
+        if ($scrollParent) {
+            $scrollParent.addEventListener('scroll', onScroll);
+        }
+        else {
+            scrollParent.subscribe(($scrollParent) => {
+                if ($scrollParent) {
+                    onScroll.call($scrollParent);
+                    $scrollParent.addEventListener('scroll', onScroll);
+                }
+            });
+        }
+        return () => $scrollParent?.removeEventListener('scroll', onScroll);
+    });
+    return derived([windowSize, trigger, ancestorOffset], 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ([_windowSize, $trigger, $ancestorOffset]) => {
+        let translateX = '';
+        let translateY = '';
+        if ($trigger) {
+            const { left: triggerLeft, right: triggerRight, top: triggerTop, bottom: triggerBottom, width: triggerWidth, height: triggerHeight, } = $trigger.getBoundingClientRect();
+            const { left: offsetLeft, top: offsetTop } = $ancestorOffset || {
+                left: 0,
+                top: 0,
+            };
+            if (calcLeft) {
+                translateX = String(calcLeft(triggerLeft));
+            }
+            else {
+                translateX = calcTranslateX(position, triggerRight, triggerLeft, offsetLeft, triggerWidth);
+            }
+            if (calcTop) {
+                translateY = String(calcTop(triggerLeft));
+            }
+            else {
+                translateY = calcTranslateY(position, triggerTop, offsetTop, triggerBottom, triggerHeight);
+            }
+            return `translate(${translateX}, ${translateY})`;
+        }
+        return '';
+    });
+};

dist/util/on-click-outside.d.ts

@@ -0,0 +1,5 @@
+declare const onClickOutside: (node: HTMLElement, cb: () => void) => {
+    update: (cb: () => void) => void;
+    destroy: () => void;
+};
+export { onClickOutside };