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

package/src/components/Icons/Text.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="M6 7V5h5m7 2V5h-5M8 19h3m5 0h-3m-2 0V5m0 14h2M11 5h2m0 0v14"
-    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="M6 7V5h5m7 2V5h-5M8 19h3m5 0h-3m-2 0V5m0 14h2M11 5h2m0 0v14"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/TextFilled.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 fill="#3381FF" stroke="#5D6066" d="M11.5 5.5h1v13h-1z" class="fastboard-icon-stroke-color" />
-  <path
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    d="M6 7V5h5m7 2V5h-5M8 19h3m5 0h-3m-2 0V5m0 14h2M11 5h2m0 0v14"
-    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 fill="#3381FF" stroke="#5D6066" d="M11.5 5.5h1v13h-1z" class="fastboard-icon-stroke-color" />
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M6 7V5h5m7 2V5h-5M8 19h3m5 0h-3m-2 0V5m0 14h2M11 5h2m0 0v14"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Triangle.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="m12 5 8 14H4l8-14Z"
-    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="m12 5 8 14H4l8-14Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/TriangleBolded.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.75"
-    d="m12 5 8 14H4l8-14Z"
-    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.75"
+    d="m12 5 8 14H4l8-14Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Undo.svelte

@@ -1,15 +1,15 @@
-<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 fill="#5D6066" d="M10 5 4 9l6 4-2-4 2-4Z" class="fastboard-icon-fill-color" />
-  <path
-    fill="#5D6066"
-    d="M16 8.375H8v1.25h8v-1.25Zm0 8H4v1.25h12v-1.25ZM20.625 13A4.625 4.625 0 0 0 16 8.375v1.25A3.375 3.375 0 0 1 19.375 13h1.25Zm-1.25 0A3.375 3.375 0 0 1 16 16.375v1.25A4.625 4.625 0 0 0 20.625 13h-1.25Z"
-    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 fill="#5D6066" d="M10 5 4 9l6 4-2-4 2-4Z" class="fastboard-icon-fill-color" />
+  <path
+    fill="#5D6066"
+    d="M16 8.375H8v1.25h8v-1.25Zm0 8H4v1.25h12v-1.25ZM20.625 13A4.625 4.625 0 0 0 16 8.375v1.25A3.375 3.375 0 0 1 19.375 13h1.25Zm-1.25 0A3.375 3.375 0 0 1 16 16.375v1.25A4.625 4.625 0 0 0 20.625 13h-1.25Z"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/Up.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
-    d="m16 14-2-2-2-2-2 2-2 2"
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    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
+    d="m16 14-2-2-2-2-2 2-2 2"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/WhiteboardAdd.svelte

@@ -1,34 +1,34 @@
-<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
-    d="M4 20h16M4 6h16"
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    class="fastboard-icon-stroke-color"
-  />
-  <rect
-    height="10"
-    rx="1"
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    width="14"
-    x="5"
-    y="8"
-    class="fastboard-icon-stroke-color"
-  />
-  <path
-    d="M12 4v2m-3 7h6m-3-3v6"
-    stroke="#5D6066"
-    stroke-linejoin="round"
-    stroke-width="1.25"
-    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
+    d="M4 20h16M4 6h16"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    class="fastboard-icon-stroke-color"
+  />
+  <rect
+    height="10"
+    rx="1"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    width="14"
+    x="5"
+    y="8"
+    class="fastboard-icon-stroke-color"
+  />
+  <path
+    d="M12 4v2m-3 7h6m-3-3v6"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/index.ts

@@ -1,93 +1,93 @@
-import Apps from "./Apps.svelte";
-import Arrow from "./Arrow.svelte";
-import ArrowBolded from "./ArrowBolded.svelte";
-import Balloon from "./Balloon.svelte";
-import BalloonBolded from "./BalloonBolded.svelte";
-import Circle from "./Circle.svelte";
-import CircleBolded from "./CircleBolded.svelte";
-import Clean from "./Clean.svelte";
-import Clear from "./Clear.svelte";
-import Click from "./Click.svelte";
-import ClickFilled from "./ClickFilled.svelte";
-import Diamond from "./Diamond.svelte";
-import Down from "./Down.svelte";
-import Eraser from "./Eraser.svelte";
-import EraserFilled from "./EraserFilled.svelte";
-import Left from "./Left.svelte";
-import Line from "./Line.svelte";
-import LineBolded from "./LineBolded.svelte";
-import Minus from "./Minus.svelte";
-import Pencil from "./Pencil.svelte";
-import PencilFilled from "./PencilFilled.svelte";
-import Plus from "./Plus.svelte";
-import Rectangle from "./Rectangle.svelte";
-import RectangleBolded from "./RectangleBolded.svelte";
-import Redo from "./Redo.svelte";
-import Reset from "./Reset.svelte";
-import Rhombus from "./Rhombus.svelte";
-import RhombusBolded from "./RhombusBolded.svelte";
-import Right from "./Right.svelte";
-import Selector from "./Selector.svelte";
-import SelectorFilled from "./SelectorFilled.svelte";
-import SpeechBalloon from "./SpeechBalloon.svelte";
-import Star from "./Star.svelte";
-import StarBolded from "./StarBolded.svelte";
-import Text from "./Text.svelte";
-import TextFilled from "./TextFilled.svelte";
-import Triangle from "./Triangle.svelte";
-import TriangleBolded from "./TriangleBolded.svelte";
-import Undo from "./Undo.svelte";
-import Up from "./Up.svelte";
-import WhiteboardAdd from "./WhiteboardAdd.svelte";
-import Play from "./Play.svelte";
-import Pause from "./Pause.svelte";
-import Loading from "./Loading.svelte";
-
-const Icons = {
-  Apps,
-  Arrow,
-  ArrowBolded,
-  Balloon,
-  BalloonBolded,
-  Circle,
-  CircleBolded,
-  Clean,
-  Clear,
-  Click,
-  ClickFilled,
-  Diamond,
-  Down,
-  Eraser,
-  EraserFilled,
-  Left,
-  Line,
-  LineBolded,
-  Minus,
-  Pencil,
-  PencilFilled,
-  Plus,
-  Rectangle,
-  RectangleBolded,
-  Redo,
-  Reset,
-  Rhombus,
-  RhombusBolded,
-  Right,
-  Selector,
-  SelectorFilled,
-  SpeechBalloon,
-  Star,
-  StarBolded,
-  Text,
-  TextFilled,
-  Triangle,
-  TriangleBolded,
-  Undo,
-  Up,
-  WhiteboardAdd,
-  Play,
-  Pause,
-  Loading,
-};
-
-export default Icons;
+import Apps from "./Apps.svelte";
+import Arrow from "./Arrow.svelte";
+import ArrowBolded from "./ArrowBolded.svelte";
+import Balloon from "./Balloon.svelte";
+import BalloonBolded from "./BalloonBolded.svelte";
+import Circle from "./Circle.svelte";
+import CircleBolded from "./CircleBolded.svelte";
+import Clean from "./Clean.svelte";
+import Clear from "./Clear.svelte";
+import Click from "./Click.svelte";
+import ClickFilled from "./ClickFilled.svelte";
+import Diamond from "./Diamond.svelte";
+import Down from "./Down.svelte";
+import Eraser from "./Eraser.svelte";
+import EraserFilled from "./EraserFilled.svelte";
+import Left from "./Left.svelte";
+import Line from "./Line.svelte";
+import LineBolded from "./LineBolded.svelte";
+import Minus from "./Minus.svelte";
+import Pencil from "./Pencil.svelte";
+import PencilFilled from "./PencilFilled.svelte";
+import Plus from "./Plus.svelte";
+import Rectangle from "./Rectangle.svelte";
+import RectangleBolded from "./RectangleBolded.svelte";
+import Redo from "./Redo.svelte";
+import Reset from "./Reset.svelte";
+import Rhombus from "./Rhombus.svelte";
+import RhombusBolded from "./RhombusBolded.svelte";
+import Right from "./Right.svelte";
+import Selector from "./Selector.svelte";
+import SelectorFilled from "./SelectorFilled.svelte";
+import SpeechBalloon from "./SpeechBalloon.svelte";
+import Star from "./Star.svelte";
+import StarBolded from "./StarBolded.svelte";
+import Text from "./Text.svelte";
+import TextFilled from "./TextFilled.svelte";
+import Triangle from "./Triangle.svelte";
+import TriangleBolded from "./TriangleBolded.svelte";
+import Undo from "./Undo.svelte";
+import Up from "./Up.svelte";
+import WhiteboardAdd from "./WhiteboardAdd.svelte";
+import Play from "./Play.svelte";
+import Pause from "./Pause.svelte";
+import Loading from "./Loading.svelte";
+
+const Icons = {
+  Apps,
+  Arrow,
+  ArrowBolded,
+  Balloon,
+  BalloonBolded,
+  Circle,
+  CircleBolded,
+  Clean,
+  Clear,
+  Click,
+  ClickFilled,
+  Diamond,
+  Down,
+  Eraser,
+  EraserFilled,
+  Left,
+  Line,
+  LineBolded,
+  Minus,
+  Pencil,
+  PencilFilled,
+  Plus,
+  Rectangle,
+  RectangleBolded,
+  Redo,
+  Reset,
+  Rhombus,
+  RhombusBolded,
+  Right,
+  Selector,
+  SelectorFilled,
+  SpeechBalloon,
+  Star,
+  StarBolded,
+  Text,
+  TextFilled,
+  Triangle,
+  TriangleBolded,
+  Undo,
+  Up,
+  WhiteboardAdd,
+  Play,
+  Pause,
+  Loading,
+};
+
+export default Icons;

package/src/components/PageControl/PageControl.scss

@@ -1,15 +1,15 @@
-@import "../theme.scss";
-
-$name: "fastboard-page-control";
-
-.#{$name} {
-  @include container;
-}
-
-.#{$name}-btn {
-  @include btn;
-}
-
-.#{$name}-text {
-  @include tabular-nums;
-}
+@import "../theme.scss";
+
+$name: "fastboard-page-control";
+
+.#{$name} {
+  @include container;
+}
+
+.#{$name}-btn {
+  @include btn;
+}
+
+.#{$name}-text {
+  @include tabular-nums;
+}

package/src/components/PageControl/PageControl.svelte

@@ -1,79 +1,79 @@
-<script lang="ts" context="module">
-  import type { FastboardApp } from "@netless/fastboard-core";
-  import type { GenericIcon, I18nData, IconType, Language, Theme } from "../../typings";
-  const i18n: I18nData<"prev" | "next" | "add"> = {
-    en: {
-      prev: "Prev Page",
-      next: "Next Page",
-      add: "Add Page",
-    },
-    "zh-CN": {
-      prev: "上一页",
-      next: "下一页",
-      add: "添加页面",
-    },
-  };
-</script>
-
-<script lang="ts">
-  import Icon from "../Icon";
-  import Icons from "../Icons";
-  import Button from "../Button";
-
-  export let app: FastboardApp | null | undefined = null;
-  export let theme: Theme = "light";
-  export let language: Language = "en";
-  export let icons: GenericIcon<"prev" | "next" | "add"> | undefined = undefined;
-
-  const name = "fastboard-page-control";
-
-  $: writable = app?.writable;
-  $: disabled = !$writable;
-  $: t = i18n[language];
-
-  let type: IconType;
-  $: type = disabled ? "disable" : "normal";
-
-  $: index = app?.sceneIndex;
-  $: length = app?.sceneLength;
-  $: prev_disabled = disabled || !$index;
-  $: next_disabled = disabled || $length == null || $index === $length - 1;
-
-  function prevPage() {
-    app?.prevPage();
-  }
-
-  function nextPage() {
-    app?.nextPage();
-  }
-
-  function addPage() {
-    app?.addPage({ after: true });
-    app?.nextPage();
-  }
-</script>
-
-<div class="{name} {theme}">
-  <Button class="prev" {name} {theme} disabled={prev_disabled} on:click={prevPage} content={t.prev}>
-    <Icon src={icons?.prev[type]} alt="[prev]">
-      <Icons.Left {theme} />
-    </Icon>
-  </Button>
-  <span class="{name}-text {theme}">
-    {#if $index == null || $length == null}
-      &hellip;
-    {:else}
-      {$index + 1}/{$length}
-    {/if}
-  </span>
-  <Button class="next" {name} {theme} disabled={next_disabled} on:click={nextPage} content={t.next}>
-    <Icon src={icons?.next[type]} alt="[next]">
-      <Icons.Right {theme} />
-    </Icon>
-  </Button>
-  <Button class="add" {name} {theme} {disabled} on:click={addPage} content={t.add}>
-    <Icon src={icons?.add[type]} alt="[add]">
-      <Icons.WhiteboardAdd {theme} />
-    </Icon>
-  </Button>
-</div>
+<script lang="ts" context="module">
+  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { GenericIcon, I18nData, IconType, Language, Theme } from "../../typings";
+  const i18n: I18nData<"prev" | "next" | "add"> = {
+    en: {
+      prev: "Prev Page",
+      next: "Next Page",
+      add: "Add Page",
+    },
+    "zh-CN": {
+      prev: "上一页",
+      next: "下一页",
+      add: "添加页面",
+    },
+  };
+</script>
+
+<script lang="ts">
+  import Icon from "../Icon";
+  import Icons from "../Icons";
+  import Button from "../Button";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+  export let icons: GenericIcon<"prev" | "next" | "add"> | undefined = undefined;
+
+  const name = "fastboard-page-control";
+
+  $: writable = app?.writable;
+  $: disabled = !$writable;
+  $: t = i18n[language];
+
+  let type: IconType;
+  $: type = disabled ? "disable" : "normal";
+
+  $: index = app?.sceneIndex;
+  $: length = app?.sceneLength;
+  $: prev_disabled = disabled || !$index;
+  $: next_disabled = disabled || $length == null || $index === $length - 1;
+
+  function prevPage() {
+    app?.prevPage();
+  }
+
+  function nextPage() {
+    app?.nextPage();
+  }
+
+  function addPage() {
+    app?.addPage({ after: true });
+    app?.nextPage();
+  }
+</script>
+
+<div class="{name} {theme}">
+  <Button class="prev" {name} {theme} disabled={prev_disabled} on:click={prevPage} content={t.prev}>
+    <Icon src={icons?.prev[type]} alt="[prev]">
+      <Icons.Left {theme} />
+    </Icon>
+  </Button>
+  <span class="{name}-text {theme}">
+    {#if $index == null || $length == null}
+      &hellip;
+    {:else}
+      {$index + 1}/{$length}
+    {/if}
+  </span>
+  <Button class="next" {name} {theme} disabled={next_disabled} on:click={nextPage} content={t.next}>
+    <Icon src={icons?.next[type]} alt="[next]">
+      <Icons.Right {theme} />
+    </Icon>
+  </Button>
+  <Button class="add" {name} {theme} {disabled} on:click={addPage} content={t.add}>
+    <Icon src={icons?.add[type]} alt="[add]">
+      <Icons.WhiteboardAdd {theme} />
+    </Icon>
+  </Button>
+</div>