Merge pull request #15 from senkulabs/14-fix-linter-and-svelte-check-…

…complains Fix Complains from Linter and Svelte Check
senkulabs · Nov 16, 2024 · b7483f4 · b7483f4
2 parents 04794a0 + f494e81
commit b7483f4
Show file tree

Hide file tree

Showing 31 changed files with 342 additions and 255 deletions.
diff --git a/stubs/inertia-svelte-ts/eslint.config.js b/stubs/inertia-svelte-ts/eslint.config.js
@@ -32,7 +32,8 @@ export default ts.config(
 	},
     {
         rules: {
-            'no-undef': 'off'
+            'no-undef': 'off',
+			'@typescript-eslint/no-unused-expressions': 'off',
         }
     }
 );
diff --git a/stubs/inertia-svelte-ts/resources/js/Components/Checkbox.svelte b/stubs/inertia-svelte-ts/resources/js/Components/Checkbox.svelte
@@ -6,7 +6,7 @@
         class: className,
         ...attrs
     }: HTMLInputAttributes & {
-        checked?: boolean
+        checked?: boolean;
     } = $props();
 </script>
 

diff --git a/stubs/inertia-svelte-ts/resources/js/Components/DangerButton.svelte b/stubs/inertia-svelte-ts/resources/js/Components/DangerButton.svelte
@@ -7,8 +7,8 @@
         class: className,
         ...attrs
     }: HTMLButtonAttributes & {
-        children: Snippet
-    } = $props()
+        children: Snippet;
+    } = $props();
 </script>
 
 <button

diff --git a/stubs/inertia-svelte-ts/resources/js/Components/Dropdown.svelte b/stubs/inertia-svelte-ts/resources/js/Components/Dropdown.svelte
@@ -8,14 +8,14 @@
         content,
         contentClasses = 'py-1 bg-white dark:bg-gray-700',
         trigger,
-        width = '48',
+        width = '48'
     }: {
-        align?: 'left' | 'right'
-        content: Snippet
-        contentClasses?: string
-        trigger: Snippet
-        width?: '48'
-    } = $props()
+        align?: 'left' | 'right';
+        content: Snippet;
+        contentClasses?: string;
+        trigger: Snippet;
+        width?: '48';
+    } = $props();
 
     let open = $state(false);
     let widthClass = $derived({ '48': 'w-48' }[width]);
@@ -24,12 +24,12 @@
             ? 'ltr:origin-top-left rtl:origin-top-right start-0'
             : align === 'right'
               ? 'ltr:origin-top-right rtl:origin-top-left end-0'
-              : 'origin-top',
-    )
+              : 'origin-top'
+    );
 
     function closeOnEscape(e: KeyboardEvent) {
         if (open && e.key === 'Escape') {
-            open = false
+            open = false;
         }
     }
 
@@ -39,11 +39,10 @@
         easing?: (t: number) => number;
     }
 
-    function enter(node: HTMLElement, {
-        delay = 0,
-        duration = 200,
-        easing = cubicOut
-    }: TransitionParams = {}): TransitionConfig {
+    function enter(
+        node: HTMLElement,
+        { delay = 0, duration = 200, easing = cubicOut }: TransitionParams = {}
+    ): TransitionConfig {
         return {
             delay,
             duration,
@@ -52,14 +51,13 @@
                 opacity: ${t};
                 transform: scale(${0.95 + 0.05 * t});
             `
-        }
+        };
     }
 
-    function leave(node: HTMLElement, {
-        delay = 0,
-        duration = 75,
-        easing = cubicIn
-    }: TransitionParams = {}): TransitionConfig {
+    function leave(
+        node: HTMLElement,
+        { delay = 0, duration = 75, easing = cubicIn }: TransitionParams = {}
+    ): TransitionConfig {
         return {
             delay,
             duration,
@@ -68,7 +66,7 @@
                 opacity: ${t};
                 transform: scale(${0.95 + 0.05 * t});
             `
-        }
+        };
     }
 </script>
 
@@ -85,12 +83,14 @@
     {#if open}
         <div class="fixed inset-0 z-40" onclick={() => (open = false)}></div>
         <div in:enter out:leave>
-            <div class="absolute z-50 mt-2 rounded-md shadow-lg {widthClass} {alignmentClasses}"
-            onclick={() => (open = false)}>
+            <div
+                class="absolute z-50 mt-2 rounded-md shadow-lg {widthClass} {alignmentClasses}"
+                onclick={() => (open = false)}
+            >
                 <div class="rounded-md ring-1 ring-black ring-opacity-5 {contentClasses}">
                     {@render content()}
                 </div>
             </div>
         </div>
     {/if}
-</div>
+</div>
diff --git a/stubs/inertia-svelte-ts/resources/js/Components/DropdownLink.svelte b/stubs/inertia-svelte-ts/resources/js/Components/DropdownLink.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
     import { Link } from '@inertiajs/svelte';
+    import type { Method } from '@inertiajs/core';
 
     let {
         children,
         href,
+        method,
+        as,
         ...attrs
     }: {
-        children: Snippet
-        href: string
-    } = $props()
+        children: Snippet;
+        href: string;
+        method?: Method;
+        as?: keyof HTMLElementTagNameMap;
+    } = $props();
 </script>
 
 <Link

diff --git a/stubs/inertia-svelte-ts/resources/js/Components/InputError.svelte b/stubs/inertia-svelte-ts/resources/js/Components/InputError.svelte
@@ -5,8 +5,8 @@
         message,
         ...attrs
     }: HTMLAttributes<HTMLDivElement> & {
-        message?: string
-    } = $props()
+        message?: string;
+    } = $props();
 </script>
 
 {#if message}

diff --git a/stubs/inertia-svelte-ts/resources/js/Components/InputLabel.svelte b/stubs/inertia-svelte-ts/resources/js/Components/InputLabel.svelte
@@ -8,9 +8,9 @@
         value,
         ...attrs
     }: HTMLLabelAttributes & {
-        children?: Snippet
-        value?: string
-    } = $props()
+        children?: Snippet;
+        value?: string;
+    } = $props();
 </script>
 
 <label {...attrs} class="block text-sm font-medium text-gray-700 dark:text-gray-300 {className}">

diff --git a/stubs/inertia-svelte-ts/resources/js/Components/Modal.svelte b/stubs/inertia-svelte-ts/resources/js/Components/Modal.svelte
@@ -11,33 +11,33 @@
         closeable = true,
         maxWidth = '2xl',
         onclose = () => {},
-        show = false,
+        show = false
     }: {
-        children: Snippet
-        closeable?: boolean
-        maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-        onclose?: () => void
-        show?: boolean
+        children: Snippet;
+        closeable?: boolean;
+        maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+        onclose?: () => void;
+        show?: boolean;
     } = $props();
 
     let maxWidthClass = $derived(
         {
-            'sm': 'sm:max-w-sm',
-            'md': 'sm:max-w-md',
-            'lg': 'sm:max-w-lg',
-            'xl': 'sm:max-w-xl',
-            '2xl': 'sm:max-w-2xl',
-        }[maxWidth],
-    )
+            sm: 'sm:max-w-sm',
+            md: 'sm:max-w-md',
+            lg: 'sm:max-w-lg',
+            xl: 'sm:max-w-xl',
+            '2xl': 'sm:max-w-2xl'
+        }[maxWidth]
+    );
 
     $effect(() => {
         if (show) document.body.appendChild(dialog);
         if (document) document.body.style.overflow = show ? 'hidden' : 'visible';
 
         return () => {
             if (document) document.body.style.overflow = 'visible';
-        }
-    })
+        };
+    });
 
     function close() {
         if (closeable) {
@@ -55,20 +55,30 @@
 <svelte:window on:keydown={closeOnEscape} />
 
 {#if show}
-<div bind:this={dialog} style:display={show ? 'contents' : 'none'}>
-    <div class="fixed inset-0 z-50 px-4 py-6 overflow-y-auto sm:px-0" scroll-region>
-        <div in:fade={{ duration: 300, easing: cubicOut }} out:fade={{ duration: 200, easing: cubicIn }}>
-            <!-- svelte-ignore a11y_consider_explicit_label -->
-            <button class="fixed inset-0 transition-all transform-select-none" onclick={close}>
-                <div class="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900">&nbsp;</div>
-            </button>
-        </div>
+    <div bind:this={dialog} style:display={show ? 'contents' : 'none'}>
+        <div class="fixed inset-0 z-50 px-4 py-6 overflow-y-auto sm:px-0" scroll-region>
+            <div
+                in:fade={{ duration: 300, easing: cubicOut }}
+                out:fade={{ duration: 200, easing: cubicIn }}
+            >
+                <!-- svelte-ignore a11y_consider_explicit_label -->
+                <button class="fixed inset-0 transition-all transform-select-none" onclick={close}>
+                    <div class="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900">
+                        &nbsp;
+                    </div>
+                </button>
+            </div>
 
-        <div in:fade={{ duration: 300, easing: cubicOut }} out:fade={{ duration: 200, easing: cubicIn }}>
-            <div class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto {maxWidthClass}">
-                {@render children()}
+            <div
+                in:fade={{ duration: 300, easing: cubicOut }}
+                out:fade={{ duration: 200, easing: cubicIn }}
+            >
+                <div
+                    class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto {maxWidthClass}"
+                >
+                    {@render children()}
+                </div>
             </div>
         </div>
     </div>
-</div>
-{/if}
+{/if}
diff --git a/stubs/inertia-svelte-ts/resources/js/Components/NavLink.svelte b/stubs/inertia-svelte-ts/resources/js/Components/NavLink.svelte
@@ -1,23 +1,30 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
     import { Link } from '@inertiajs/svelte';
+    import type { Method } from '@inertiajs/core';
 
     let {
         active = false,
         children,
         href,
+        method,
+        as,
         ...attrs
     }: {
-        active?: boolean
-        children: Snippet
-        href: string
-    } = $props()
+        active?: boolean;
+        children: Snippet;
+        href: string;
+        method?: Method;
+        as?: keyof HTMLElementTagNameMap;
+    } = $props();
 </script>
 
 <Link
     {...attrs}
     {href}
-    class={active ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
-        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out'}>
+    class={active
+        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
+        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out'}
+>
     {@render children()}
 </Link>
diff --git a/stubs/inertia-svelte-ts/resources/js/Components/PrimaryButton.svelte b/stubs/inertia-svelte-ts/resources/js/Components/PrimaryButton.svelte
@@ -7,8 +7,8 @@
         class: className,
         ...attrs
     }: HTMLButtonAttributes & {
-        children: Snippet
-    } = $props()
+        children: Snippet;
+    } = $props();
 </script>
 
 <button

diff --git a/stubs/inertia-svelte-ts/resources/js/Components/ResponsiveNavLink.svelte b/stubs/inertia-svelte-ts/resources/js/Components/ResponsiveNavLink.svelte
@@ -1,17 +1,22 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
     import { Link } from '@inertiajs/svelte';
+    import type { Method } from '@inertiajs/core';
 
     let {
         active = false,
         children,
         href,
+        method,
+        as,
         ...attrs
     }: {
-        active?: boolean
-        children: Snippet
-        href: string
-    } = $props()
+        active?: boolean;
+        children: Snippet;
+        href: string;
+        method?: Method;
+        as?: keyof HTMLElementTagNameMap;
+    } = $props();
 </script>
 
 <Link

diff --git a/stubs/inertia-svelte-ts/resources/js/Components/SecondaryButton.svelte b/stubs/inertia-svelte-ts/resources/js/Components/SecondaryButton.svelte
@@ -8,9 +8,9 @@
         type = 'button',
         ...attrs
     }: HTMLButtonAttributes & {
-        children: Snippet
-        type?: 'button' | 'submit' | 'reset'
-    } = $props()
+        children: Snippet;
+        type?: 'button' | 'submit' | 'reset';
+    } = $props();
 </script>
 
 <button

diff --git a/stubs/inertia-svelte-ts/resources/js/Components/TextInput.svelte b/stubs/inertia-svelte-ts/resources/js/Components/TextInput.svelte
@@ -7,20 +7,20 @@
         value = $bindable(),
         ...attrs
     }: HTMLInputAttributes & {
-        value?: string
-    } = $props()
+        value?: string;
+    } = $props();
 
     let input: HTMLInputElement;
 
     export function focus() {
-        input?.focus()
+        input?.focus();
     }
 
     onMount(() => {
         if (attrs.autofocus && input) {
-            input.focus()
+            input.focus();
         }
-    })
+    });
 </script>
 
 <input