@netless/fastboard-ui 0.3.2-canary.5 → 0.3.3

package/src/components/Fastboard/Fastboard.scss

@@ -1,61 +1,61 @@
-.fastboard-root {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.fastboard-view {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.fastboard-left {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  bottom: 62px;
-  top: 8px;
-  left: 0;
-  z-index: 200;
-  pointer-events: none;
-
-  .fastboard-toolbar {
-    padding-left: 16px;
-  }
-}
-
-.fastboard-bottom-left {
-  display: flex;
-  gap: 10px;
-  position: absolute;
-  bottom: 8px;
-  left: 8px;
-  padding: 8px;
-  z-index: 200;
-  pointer-events: none;
-}
-
-.fastboard-bottom-right {
-  @extend .fastboard-bottom-left;
-  left: auto;
-  right: 8px;
-}
-
-.fastboard-bottom {
-  @extend .fastboard-bottom-left;
-  right: 8px;
-}
-
-.fastboard-left,
-.fastboard-bottom,
-.fastboard-bottom-left,
-.fastboard-bottom-right {
-  &.hidden * {
-    opacity: 0;
-    pointer-events: none;
-  }
-}
+.fastboard-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.fastboard-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.fastboard-left {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 62px;
+  top: 8px;
+  left: 0;
+  z-index: 200;
+  pointer-events: none;
+
+  .fastboard-toolbar {
+    padding-left: 16px;
+  }
+}
+
+.fastboard-bottom-left {
+  display: flex;
+  gap: 10px;
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  padding: 8px;
+  z-index: 200;
+  pointer-events: none;
+}
+
+.fastboard-bottom-right {
+  @extend .fastboard-bottom-left;
+  left: auto;
+  right: 8px;
+}
+
+.fastboard-bottom {
+  @extend .fastboard-bottom-left;
+  right: 8px;
+}
+
+.fastboard-left,
+.fastboard-bottom,
+.fastboard-bottom-left,
+.fastboard-bottom-right {
+  &.hidden * {
+    opacity: 0;
+    pointer-events: none;
+  }
+}

package/src/components/Fastboard/Fastboard.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-  import type { FastboardApp } from "@netless/fastboard-core";
-  import type { Language, Theme, FastboardUIConfig } from "../../typings";
-  import { onMount } from "svelte";
-  import { tippy_hide_all } from "../../actions/tippy";
-  import RedoUndo from "../RedoUndo";
-  import ZoomControl from "../ZoomControl";
-  import PageControl from "../PageControl";
-  import Toolbar from "../Toolbar";
-
-  export let app: FastboardApp | null | undefined = null;
-  export let theme: Theme = "light";
-  export let language: Language = "en";
-  export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
-  export let config: FastboardUIConfig = {};
-
-  const name = "fastboard";
-  const AppsShowToolbar = ["DocsViewer", "Slide"];
-
-  let container: HTMLDivElement;
-  let layout: "hidden" | "toolbar-only" | "visible" = "hidden";
-
-  $: writable = app?.writable;
-  $: boxState = app?.boxState;
-  $: focusedApp = app?.focusedApp;
-
-  $: if (!$writable) {
-    layout = "hidden";
-  } else if ($boxState === "maximized") {
-    if ($focusedApp && AppsShowToolbar.some(kind => ($focusedApp || "").includes(kind))) {
-      layout = "toolbar-only";
-    } else {
-      layout = "hidden";
-    }
-  } else {
-    layout = "visible";
-  }
-
-  $: try {
-    if (app && container) app.bindContainer(container);
-  } catch (err) {
-    console.error("[fastboard] An error occurred while binding container");
-    console.error(err);
-  }
-
-  $: if (app && theme) {
-    app.manager.setPrefersColorScheme(theme);
-  }
-
-  onMount(() => {
-    if (containerRef) {
-      containerRef(container);
-      return () => {
-        if (containerRef) containerRef(null);
-      };
-    }
-  });
-</script>
-
-<div class="{name}-root" class:loading={!app}>
-  <div class="{name}-view" bind:this={container} on:touchstart|capture={tippy_hide_all} />
-  <div class="{name}-left" class:hidden={!(layout === "visible" || layout === "toolbar-only")}>
-    {#if config.toolbar?.enable !== false}
-      <Toolbar {app} {theme} {language} config={config.toolbar} />
-    {/if}
-  </div>
-  <div class="{name}-bottom-left" class:hidden={layout !== "visible"}>
-    {#if config.redo_undo?.enable !== false}
-      <RedoUndo {app} {theme} {language} />
-    {/if}
-    {#if config.zoom_control?.enable !== false}
-      <ZoomControl {app} {theme} {language} />
-    {/if}
-  </div>
-  <div class="{name}-bottom-right" class:hidden={layout !== "visible"}>
-    {#if config.page_control?.enable !== false}
-      <PageControl {app} {theme} {language} />
-    {/if}
-  </div>
-</div>
+<script lang="ts">
+  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { Language, Theme, FastboardUIConfig } from "../../typings";
+  import { onMount } from "svelte";
+  import { tippy_hide_all } from "../../actions/tippy";
+  import RedoUndo from "../RedoUndo";
+  import ZoomControl from "../ZoomControl";
+  import PageControl from "../PageControl";
+  import Toolbar from "../Toolbar";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+  export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
+  export let config: FastboardUIConfig = {};
+
+  const name = "fastboard";
+  const AppsShowToolbar = ["DocsViewer", "Slide"];
+
+  let container: HTMLDivElement;
+  let layout: "hidden" | "toolbar-only" | "visible" = "hidden";
+
+  $: writable = app?.writable;
+  $: boxState = app?.boxState;
+  $: focusedApp = app?.focusedApp;
+
+  $: if (!$writable) {
+    layout = "hidden";
+  } else if ($boxState === "maximized") {
+    if ($focusedApp && AppsShowToolbar.some(kind => ($focusedApp || "").includes(kind))) {
+      layout = "toolbar-only";
+    } else {
+      layout = "hidden";
+    }
+  } else {
+    layout = "visible";
+  }
+
+  $: try {
+    if (app && container) app.bindContainer(container);
+  } catch (err) {
+    console.error("[fastboard] An error occurred while binding container");
+    console.error(err);
+  }
+
+  $: if (app && theme) {
+    app.manager.setPrefersColorScheme(theme);
+  }
+
+  onMount(() => {
+    if (containerRef) {
+      containerRef(container);
+      return () => {
+        if (containerRef) containerRef(null);
+      };
+    }
+  });
+</script>
+
+<div class="{name}-root" class:loading={!app}>
+  <div class="{name}-view" bind:this={container} on:touchstart|capture|passive={tippy_hide_all} />
+  <div class="{name}-left" class:hidden={!(layout === "visible" || layout === "toolbar-only")}>
+    {#if config.toolbar?.enable !== false}
+      <Toolbar {app} {theme} {language} config={config.toolbar} />
+    {/if}
+  </div>
+  <div class="{name}-bottom-left" class:hidden={layout !== "visible"}>
+    {#if config.redo_undo?.enable !== false}
+      <RedoUndo {app} {theme} {language} />
+    {/if}
+    {#if config.zoom_control?.enable !== false}
+      <ZoomControl {app} {theme} {language} />
+    {/if}
+  </div>
+  <div class="{name}-bottom-right" class:hidden={layout !== "visible"}>
+    {#if config.page_control?.enable !== false}
+      <PageControl {app} {theme} {language} />
+    {/if}
+  </div>
+</div>

package/src/components/Fastboard/Fastboard.svelte.ts

@@ -1,14 +1,14 @@
-import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language, FastboardUIConfig } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
-
-export declare interface FastboardProps {
-  app?: FastboardApp | null;
-  theme?: Theme;
-  language?: Language;
-  containerRef?: (container: HTMLDivElement | null) => void;
-  config?: FastboardUIConfig;
-}
-
-declare class Fastboard extends SvelteComponentTyped<FastboardProps> {}
-export default Fastboard;
+import type { FastboardApp } from "@netless/fastboard-core";
+import type { Theme, Language, FastboardUIConfig } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface FastboardProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  containerRef?: (container: HTMLDivElement | null) => void;
+  config?: FastboardUIConfig;
+}
+
+declare class Fastboard extends SvelteComponentTyped<FastboardProps> {}
+export default Fastboard;

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -1,43 +1,43 @@
-<script lang="ts">
-  import type { FastboardPlayer } from "@netless/fastboard-core";
-  import type { Language, Theme } from "../../typings";
-  import { onMount } from "svelte";
-  import { tippy_hide_all } from "../../actions/tippy";
-  import PlayerControl from "../PlayerControl";
-
-  export let player: FastboardPlayer | null | undefined = null;
-  export let theme: Theme = "light";
-  export let language: Language = "en";
-  export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
-
-  const name = "fastboard";
-
-  let container: HTMLDivElement;
-
-  $: try {
-    if (player && container) player.bindContainer(container);
-  } catch (err) {
-    console.error("[fastboard] An error occurred while binding container");
-    console.error(err);
-  }
-
-  $: if (player && theme) {
-    player.manager.setPrefersColorScheme(theme);
-  }
-
-  onMount(() => {
-    if (containerRef) {
-      containerRef(container);
-      return () => {
-        if (containerRef) containerRef(null);
-      };
-    }
-  });
-</script>
-
-<div class="{name}-root" class:loading={!player}>
-  <div class="{name}-view" bind:this={container} on:touchstart|capture={tippy_hide_all} />
-  <div class="{name}-bottom">
-    <PlayerControl {player} {theme} {language} />
-  </div>
-</div>
+<script lang="ts">
+  import type { FastboardPlayer } from "@netless/fastboard-core";
+  import type { Language, Theme } from "../../typings";
+  import { onMount } from "svelte";
+  import { tippy_hide_all } from "../../actions/tippy";
+  import PlayerControl from "../PlayerControl";
+
+  export let player: FastboardPlayer | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+  export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
+
+  const name = "fastboard";
+
+  let container: HTMLDivElement;
+
+  $: try {
+    if (player && container) player.bindContainer(container);
+  } catch (err) {
+    console.error("[fastboard] An error occurred while binding container");
+    console.error(err);
+  }
+
+  $: if (player && theme) {
+    player.manager.setPrefersColorScheme(theme);
+  }
+
+  onMount(() => {
+    if (containerRef) {
+      containerRef(container);
+      return () => {
+        if (containerRef) containerRef(null);
+      };
+    }
+  });
+</script>
+
+<div class="{name}-root" class:loading={!player}>
+  <div class="{name}-view" bind:this={container} on:touchstart|capture|passive={tippy_hide_all} />
+  <div class="{name}-bottom">
+    <PlayerControl {player} {theme} {language} />
+  </div>
+</div>

package/src/components/Fastboard/ReplayFastboard.svelte.ts

@@ -1,13 +1,13 @@
-import type { FastboardPlayer } from "@netless/fastboard-core";
-import type { Theme, Language } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
-
-export declare interface ReplayFastboardProps {
-  player?: FastboardPlayer | null;
-  theme?: Theme;
-  language?: Language;
-  containerRef?: (container: HTMLDivElement | null) => void;
-}
-
-declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {}
-export default ReplayFastboard;
+import type { FastboardPlayer } from "@netless/fastboard-core";
+import type { Theme, Language } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface ReplayFastboardProps {
+  player?: FastboardPlayer | null;
+  theme?: Theme;
+  language?: Language;
+  containerRef?: (container: HTMLDivElement | null) => void;
+}
+
+declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {}
+export default ReplayFastboard;

package/src/components/Fastboard/index.ts

@@ -1,5 +1,5 @@
-export { default as ReplayFastboard } from "./ReplayFastboard.svelte";
-export * from "./ReplayFastboard.svelte";
-
-export { default as Fastboard } from "./Fastboard.svelte";
-export * from "./Fastboard.svelte";
+export { default as ReplayFastboard } from "./ReplayFastboard.svelte";
+export * from "./ReplayFastboard.svelte";
+
+export { default as Fastboard } from "./Fastboard.svelte";
+export * from "./Fastboard.svelte";

package/src/components/Icon/Icon.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">
-  export let src = "";
-  export let alt = "";
-  export let title = "";
-</script>
-
-{#if src}
-  <img {src} {alt} title={title || alt} />
-{:else}
-  <slot />
-{/if}
+<script lang="ts">
+  export let src = "";
+  export let alt = "";
+  export let title = "";
+</script>
+
+{#if src}
+  <img {src} {alt} title={title || alt} />
+{:else}
+  <slot />
+{/if}

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

@@ -1,10 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
-
-export declare interface IconProps {
-  src?: string;
-  alt?: string;
-  title?: string;
-}
-
-declare class Icon extends SvelteComponentTyped<IconProps> {}
-export default Icon;
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface IconProps {
+  src?: string;
+  alt?: string;
+  title?: string;
+}
+
+declare class Icon extends SvelteComponentTyped<IconProps> {}
+export default Icon;

package/src/components/Icon/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./Icon.svelte";
-export * from "./Icon.svelte";
+export { default } from "./Icon.svelte";
+export * from "./Icon.svelte";

package/src/components/Icons/Apps.svelte

@@ -1,49 +1,49 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <rect
-    x="5"
-    y="5"
-    width="6"
-    height="6"
-    stroke="#5D6066"
-    stroke-width="1.25"
-    stroke-linejoin="round"
-    class="fastboard-icon-stroke-color"
-  />
-  <rect
-    x="13"
-    y="5"
-    width="6"
-    height="6"
-    stroke="#5D6066"
-    stroke-width="1.25"
-    stroke-linejoin="round"
-    class="fastboard-icon-stroke-color"
-  />
-  <rect
-    x="5"
-    y="13"
-    width="6"
-    height="6"
-    stroke="#5D6066"
-    stroke-width="1.25"
-    stroke-linejoin="round"
-    class="fastboard-icon-stroke-color"
-  />
-  <rect
-    x="13"
-    y="13"
-    width="6"
-    height="6"
-    stroke="#5D6066"
-    stroke-width="1.25"
-    stroke-linejoin="round"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <rect
+    x="5"
+    y="5"
+    width="6"
+    height="6"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+  <rect
+    x="13"
+    y="5"
+    width="6"
+    height="6"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+  <rect
+    x="5"
+    y="13"
+    width="6"
+    height="6"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+  <rect
+    x="13"
+    y="13"
+    width="6"
+    height="6"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Arrow.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    d="M5 19 15.5 8.5M17 12l2-7-7 2 3.5 1.5L17 12Z"
-    class="fastboard-icon-stroke-color"
-  />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M5 19 15.5 8.5M17 12l2-7-7 2 3.5 1.5L17 12Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/ArrowBolded.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-  import type { Theme } from "../../typings";
-
-  export let theme: Theme = "light";
-  export let active = false;
-</script>
-
-<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
-  <path
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.75"
-    d="M5 19 15.5 8.5"
-    class="fastboard-icon-stroke-color"
-  />
-  <path fill="#5D6066" d="m17 12 2-7-7 2 3.5 1.5L17 12Z" class="fastboard-icon-fill-color" />
-</svg>
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.75"
+    d="M5 19 15.5 8.5"
+    class="fastboard-icon-stroke-color"
+  />
+  <path fill="#5D6066" d="m17 12 2-7-7 2 3.5 1.5L17 12Z" class="fastboard-icon-fill-color" />
+</svg>