fix: add {...$$restProps}, remove tabindex add withEvents, remove fill

shinokada · Mar 18, 2024 · 011c9cf · 011c9cf
1 parent fc763cc
commit 011c9cf
Show file tree

Hide file tree

Showing 293 changed files with 20,257 additions and 9,398 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,11 +1,14 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
-  "changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "shinokada/svelte-feathers" }],
+  "changelog": [
+    "@svitejs/changesets-changelog-github-compact",
+    { "repo": "shinokada/svelte-feathers" }
+  ],
   "commit": false,
   "fixed": [],
   "linked": [],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": []
-}
+}
diff --git a/.changeset/rude-mirrors-fetch.md b/.changeset/rude-mirrors-fetch.md
@@ -0,0 +1,8 @@
+---
+'svelte-feathers': patch
+---
+
+fix: remove fill
+fix: remove tabindex
+feat: add withEvents
+fix: add {...$$restProps}
diff --git a/package.json b/package.json
@@ -1243,4 +1243,4 @@
     },
     "./package.json": "./package.json"
   }
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -6,11 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
+      function gtag() {
+        dataLayer.push(arguments);
+      }
       gtag('js', new Date());
       gtag('config', 'G-56Q5D99ZCL');
     </script>
-    
+
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover" class="bg-white dark:bg-stone-950">

diff --git a/src/lib/Activity.svelte b/src/lib/Activity.svelte
@@ -1,46 +1,82 @@
-<script>
+<script lang="ts">
   import { getContext } from 'svelte';
-  const ctx = getContext('iconCtx') ?? {};
+  interface CtxType {
+    size?: string;
+    withEvents?: boolean;
+    role?: string;
+    color?: string;
+    class?: string;
+  }
+  const ctx: CtxType = getContext('iconCtx') ?? {};
+  interface Props {
+    size?: string;
+    withEvents?: boolean;
+    role?: string;
+    color?: string;
+    ariaLabel?: string;
+    class?: string;
+  }
+  let className = ctx.class || '';
+  export { className as class };
   export let size = ctx.size || '24';
+  export let withEvents: boolean = false;
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
-  export let tabIndex = ctx.tabIndex || '-1';
-  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'activity';
 </script>
 
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  fill={fill}
-  stroke={color}
-  tabIndex={tabIndex}
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={$$props.class}
-  {role}
-  aria-label={ariaLabel}
-  on:click
-  on:keydown
-  on:keyup
-  on:focus
-  on:blur
-  on:mouseenter
-  on:mouseleave
-  on:mouseover
-  on:mouseout><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg
->
+{#if withEvents}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    {...$$restProps}
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class={className}
+    {role}
+    aria-label={ariaLabel}
+    on:click
+    on:keydown
+    on:keyup
+    on:focus
+    on:blur
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    on:mouseout
+  >
+    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    {...$$restProps}
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class={className}
+    {role}
+    aria-label={ariaLabel}
+  >
+    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+  </svg>
+{/if}
 
 <!--
 @component
 [Go to docs](https://svelte-feathers.codewithshin.com)
 ## Props
 @prop export let size = ctx.size || '24';
+@prop export let withEvents: boolean = false;
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
-  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'activity';
 -->
diff --git a/src/lib/Airplay.svelte b/src/lib/Airplay.svelte
@@ -1,49 +1,86 @@
-<script>
+<script lang="ts">
   import { getContext } from 'svelte';
-  const ctx = getContext('iconCtx') ?? {};
+  interface CtxType {
+    size?: string;
+    withEvents?: boolean;
+    role?: string;
+    color?: string;
+    class?: string;
+  }
+  const ctx: CtxType = getContext('iconCtx') ?? {};
+  interface Props {
+    size?: string;
+    withEvents?: boolean;
+    role?: string;
+    color?: string;
+    ariaLabel?: string;
+    class?: string;
+  }
+  let className = ctx.class || '';
+  export { className as class };
   export let size = ctx.size || '24';
+  export let withEvents: boolean = false;
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
-  export let tabIndex = ctx.tabIndex || '-1';
-  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'airplay';
 </script>
 
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
-  viewBox="0 0 24 24"
-  fill={fill}
-  stroke={color}
-  tabIndex={tabIndex}
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={$$props.class}
-  {role}
-  aria-label={ariaLabel}
-  on:click
-  on:keydown
-  on:keyup
-  on:focus
-  on:blur
-  on:mouseenter
-  on:mouseleave
-  on:mouseover
-  on:mouseout
-  ><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" /><polygon
-    points="12 15 17 21 7 21 12 15"
-  /></svg
->
+{#if withEvents}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    {...$$restProps}
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class={className}
+    {role}
+    aria-label={ariaLabel}
+    on:click
+    on:keydown
+    on:keyup
+    on:focus
+    on:blur
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    on:mouseout
+  >
+    <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" /><polygon
+      points="12 15 17 21 7 21 12 15"
+    />
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    {...$$restProps}
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class={className}
+    {role}
+    aria-label={ariaLabel}
+  >
+    <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" /><polygon
+      points="12 15 17 21 7 21 12 15"
+    />
+  </svg>
+{/if}
 
 <!--
 @component
 [Go to docs](https://svelte-feathers.codewithshin.com)
 ## Props
 @prop export let size = ctx.size || '24';
+@prop export let withEvents: boolean = false;
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
-  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'airplay';
 -->