@netless/fastboard-ui 0.3.6 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -10,14 +10,14 @@
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "0.3.6"
+    "@netless/fastboard-core": "0.3.7"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "0.3.6"
+    "@netless/fastboard-core": "0.3.7"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/actions/scroll.ts

@@ -10,7 +10,7 @@ export const scrollTop: SvelteAction<Writable<number>> = function (node, value)
 
   function on_scroll() {
     clearTimeout(timer);
-    timer = setTimeout(() => value.set(node.scrollTop), 200);
+    timer = window.setTimeout(() => value.set(node.scrollTop), 200);
   }
 
   node.addEventListener("scroll", on_scroll);

package/src/components/Button/Button.svelte.d.ts

@@ -18,8 +18,7 @@ export declare interface ButtonEvents {
 }
 
 export declare interface ButtonSlots {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  default: {};
+  default: any;
 }
 
 declare class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {}

package/src/components/Toolbar/README.md

@@ -52,6 +52,6 @@ The `computed_height` is calculated by:
 
 ```js
 const max_height = button_height * 2 + scrollable_area_full_height;
-let full_height = container.height;
+const full_height = container.height;
 computed_height = full_height < max_height ? full_height : max_height;
 ```

package/src/components/Toolbar/Toolbar.scss

@@ -25,7 +25,7 @@ $name: "fastboard-toolbar";
   cursor: pointer;
   pointer-events: auto;
 
-  &:focus-within {
+  &:focus-visible {
     outline: 2px solid -webkit-focus-ring-color;
   }
 

package/src/components/Toolbar/components/Shapes.svelte

@@ -65,6 +65,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-shapes {theme}" on:click={set_appliance_or_shape}>
   {#each shapes as key (key)}
     {@const is_selected = appliance === "shape" ? shape === key : appliance === key}

package/src/components/Toolbar/components/StrokeColor.svelte

@@ -25,6 +25,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
   {#each colorKeys as key (key)}
     <button

package/src/components/Toolbar/components/TextColor.svelte

@@ -25,6 +25,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
   {#each colorKeys as key (key)}
     <button

package/src/index.ts

@@ -1,3 +1,5 @@
+import "./style.scss";
+
 export * from "./typings";
 
 export { default as RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
@@ -5,10 +7,12 @@ export { default as PageControl, type PageControlProps } from "./components/Page
 export { default as ZoomControl, type ZoomControlProps } from "./components/ZoomControl";
 export { default as Toolbar, type ToolbarProps } from "./components/Toolbar";
 export { default as PlayerControl, type PlayerControlProps } from "./components/PlayerControl";
-export { Fastboard, ReplayFastboard } from "./components/Fastboard";
-export type { FastboardProps, ReplayFastboardProps } from "./components/Fastboard";
+export {
+  Fastboard,
+  ReplayFastboard,
+  type FastboardProps,
+  type ReplayFastboardProps,
+} from "./components/Fastboard";
 
 export * from "./helpers";
 export * from "./behaviors";
-
-import "./style.scss";

package/src/style.scss

@@ -34,3 +34,7 @@
     padding: 8px;
   }
 }
+
+.netless-whiteboard:focus-visible {
+  outline: none;
+}