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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.2-canary.5",
+  "version": "0.3.3",
   "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.2-canary.5"
+    "@netless/fastboard-core": "0.3.3"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "0.3.2-canary.5"
+    "@netless/fastboard-core": "0.3.3"
   },
   "scripts": {
     "cleanup": "rimraf dist",
@@ -27,6 +27,5 @@
     "test:ssr": "esbuild-dev test/ssr.ts"
   },
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "readme": "## @netless/fastboard-ui\r\n\r\nThe front-end of [@netless/fastboard-core](https://github.com/netless-io/fastboard/tree/main/packages/fastboard-core).\r\n\r\n### License\r\n\r\nMIT @ [netless](https://github.com/netless-io)\r\n"
+  "types": "dist/index.d.ts"
 }

package/src/actions/height.ts

@@ -1,43 +1,43 @@
-import type { Writable } from "svelte/store";
-import type { SvelteAction } from "../typings";
-
-export const height: SvelteAction<Writable<number>> = function (node, height) {
-  const styles = getComputedStyle(node);
-  const paddings =
-    (parseInt(styles.paddingTop) || 0) +
-    (parseInt(styles.paddingBottom) || 0) +
-    (parseInt(styles.borderTopWidth) || 0) +
-    (parseInt(styles.borderBottomWidth) || 0);
-
-  const observer = new ResizeObserver(() => {
-    height.set(node.getBoundingClientRect().height - paddings);
-  });
-
-  observer.observe(node);
-
-  return {
-    update(new_height) {
-      height = new_height;
-    },
-    destroy() {
-      observer.disconnect();
-    },
-  };
-};
-
-export const scrollHeight: SvelteAction<Writable<number>> = function (node, height) {
-  const observer = new ResizeObserver(() => {
-    height.set(node.scrollHeight);
-  });
-
-  observer.observe(node);
-
-  return {
-    update(new_height) {
-      height = new_height;
-    },
-    destroy() {
-      observer.disconnect();
-    },
-  };
-};
+import type { Writable } from "svelte/store";
+import type { SvelteAction } from "../typings";
+
+export const height: SvelteAction<Writable<number>> = function (node, height) {
+  const styles = getComputedStyle(node);
+  const paddings =
+    (parseInt(styles.paddingTop) || 0) +
+    (parseInt(styles.paddingBottom) || 0) +
+    (parseInt(styles.borderTopWidth) || 0) +
+    (parseInt(styles.borderBottomWidth) || 0);
+
+  const observer = new ResizeObserver(() => {
+    height.set(node.getBoundingClientRect().height - paddings);
+  });
+
+  observer.observe(node);
+
+  return {
+    update(new_height) {
+      height = new_height;
+    },
+    destroy() {
+      observer.disconnect();
+    },
+  };
+};
+
+export const scrollHeight: SvelteAction<Writable<number>> = function (node, height) {
+  const observer = new ResizeObserver(() => {
+    height.set(node.scrollHeight);
+  });
+
+  observer.observe(node);
+
+  return {
+    update(new_height) {
+      height = new_height;
+    },
+    destroy() {
+      observer.disconnect();
+    },
+  };
+};

package/src/actions/scroll.ts

@@ -1,31 +1,31 @@
-import type { Writable } from "svelte/store";
-import type { SvelteAction } from "../typings";
-
-export const scrollTop: SvelteAction<Writable<number>> = function (node, value) {
-  const listener = (top: number) => {
-    node.scrollTo({ top, behavior: "smooth" });
-  };
-
-  let timer = 0;
-
-  function on_scroll() {
-    clearTimeout(timer);
-    timer = setTimeout(() => value.set(node.scrollTop), 200);
-  }
-
-  node.addEventListener("scroll", on_scroll);
-
-  let unsubscribe = value.subscribe(listener);
-
-  return {
-    update(new_value) {
-      unsubscribe();
-      unsubscribe = (value = new_value).subscribe(listener);
-    },
-    destroy() {
-      clearTimeout(timer);
-      node.removeEventListener("scroll", on_scroll);
-      unsubscribe();
-    },
-  };
-};
+import type { Writable } from "svelte/store";
+import type { SvelteAction } from "../typings";
+
+export const scrollTop: SvelteAction<Writable<number>> = function (node, value) {
+  const listener = (top: number) => {
+    node.scrollTo({ top, behavior: "smooth" });
+  };
+
+  let timer = 0;
+
+  function on_scroll() {
+    clearTimeout(timer);
+    timer = setTimeout(() => value.set(node.scrollTop), 200);
+  }
+
+  node.addEventListener("scroll", on_scroll);
+
+  let unsubscribe = value.subscribe(listener);
+
+  return {
+    update(new_value) {
+      unsubscribe();
+      unsubscribe = (value = new_value).subscribe(listener);
+    },
+    destroy() {
+      clearTimeout(timer);
+      node.removeEventListener("scroll", on_scroll);
+      unsubscribe();
+    },
+  };
+};

package/src/actions/tippy.ts

@@ -1,71 +1,71 @@
-import type { Instance, Props } from "tippy.js";
-import type { SvelteAction } from "../typings";
-import { is_client } from "svelte/internal";
-
-import Tippy from "tippy.js";
-
-if (is_client) {
-  Tippy.setDefaultProps({
-    delay: [1000, 400],
-    duration: 300,
-    offset: [0, 11],
-    theme: "dark",
-    plugins: [
-      {
-        name: "className",
-        defaultValue: "",
-        fn(instance) {
-          function add() {
-            const el = instance.popper.firstElementChild;
-            if (el) {
-              el.classList.add("fastboard-tip");
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const extra = ((instance.props as any).className || "").trim();
-              if (extra) {
-                el.classList.add(extra);
-              }
-            }
-          }
-
-          function remove() {
-            instance.popper.firstElementChild?.classList.remove("fastboard-tip");
-          }
-
-          return {
-            onCreate: add,
-            onBeforeUpdate: remove,
-            onAfterUpdate: add,
-          };
-        },
-      },
-    ],
-  });
-}
-
-export const tippy: SvelteAction<Partial<Props & { className: string }>> = function (node, props) {
-  const instance = Tippy(node, props);
-
-  return {
-    update(props: Partial<Props & { className: string }>) {
-      instance.setProps(props);
-    },
-    destroy() {
-      instance.destroy();
-    },
-  };
-};
-
-export function tippy_hide_all() {
-  document.querySelectorAll("[data-tippy-root]").forEach(el => {
-    const instance = (el as unknown as { _tippy: Instance })._tippy;
-    if (instance) instance.hide();
-  });
-}
-
-export const tippy_menu: Partial<Props> = {
-  delay: 0,
-  duration: [50, 300],
-  placement: "right-start",
-  interactive: true,
-  trigger: "click",
-};
+import type { Instance, Props } from "tippy.js";
+import type { SvelteAction } from "../typings";
+import { is_client } from "svelte/internal";
+
+import Tippy from "tippy.js";
+
+if (is_client) {
+  Tippy.setDefaultProps({
+    delay: [1000, 400],
+    duration: 300,
+    offset: [0, 11],
+    theme: "dark",
+    plugins: [
+      {
+        name: "className",
+        defaultValue: "",
+        fn(instance) {
+          function add() {
+            const el = instance.popper.firstElementChild;
+            if (el) {
+              el.classList.add("fastboard-tip");
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const extra = ((instance.props as any).className || "").trim();
+              if (extra) {
+                el.classList.add(extra);
+              }
+            }
+          }
+
+          function remove() {
+            instance.popper.firstElementChild?.classList.remove("fastboard-tip");
+          }
+
+          return {
+            onCreate: add,
+            onBeforeUpdate: remove,
+            onAfterUpdate: add,
+          };
+        },
+      },
+    ],
+  });
+}
+
+export const tippy: SvelteAction<Partial<Props & { className: string }>> = function (node, props) {
+  const instance = Tippy(node, props);
+
+  return {
+    update(props: Partial<Props & { className: string }>) {
+      instance.setProps(props);
+    },
+    destroy() {
+      instance.destroy();
+    },
+  };
+};
+
+export function tippy_hide_all() {
+  document.querySelectorAll("[data-tippy-root]").forEach(el => {
+    const instance = (el as unknown as { _tippy: Instance })._tippy;
+    if (instance) instance.hide();
+  });
+}
+
+export const tippy_menu: Partial<Props> = {
+  delay: 0,
+  duration: [50, 300],
+  placement: "right-start",
+  interactive: true,
+  trigger: "click",
+};

package/src/behaviors/apps.ts

@@ -1,74 +1,74 @@
-import type { FastboardApp } from "@netless/fastboard-core";
-import code_editor_svg from "./icons/visual-studio-code.svg";
-import geogebra_svg from "./icons/geogebra.svg";
-import countdown_svg from "./icons/countdown.svg";
-
-export interface AppInToolbar {
-  kind: string;
-  icon: string;
-  label: string;
-  onClick: (app: FastboardApp) => void;
-}
-
-class AppsInToolbar {
-  _listeners: Array<(data: AppInToolbar[]) => void> = [];
-  constructor(private _data: AppInToolbar[]) {}
-  get data() {
-    return this._data;
-  }
-  get length() {
-    return this._data.length;
-  }
-  subscribe(fn: (data: AppInToolbar[]) => void) {
-    this._listeners.push(fn);
-    fn(this._data);
-    return () => {
-      this._listeners = this._listeners.filter(item => item !== fn);
-    };
-  }
-  push(...data: AppInToolbar[]) {
-    this._data.push(...data);
-    this._listeners.forEach(fn => fn(this._data));
-  }
-  insert(data: AppInToolbar, index: number) {
-    this._data.splice(index, 0, data);
-    this._listeners.forEach(fn => fn(this._data));
-  }
-  delete(filter: (data: AppInToolbar) => boolean) {
-    this._data = this._data.filter(item => !filter(item));
-    this._listeners.forEach(fn => fn(this._data));
-  }
-  clear() {
-    this._data.length = 0;
-    this._listeners.forEach(fn => fn(this._data));
-  }
-}
-
-export type { AppsInToolbar };
-
-export const apps = new AppsInToolbar([
-  {
-    kind: "Monaco",
-    icon: code_editor_svg,
-    label: "Code Editor",
-    onClick(app) {
-      app.insertCodeEditor();
-    },
-  },
-  {
-    kind: "GeoGebra",
-    icon: geogebra_svg,
-    label: "GeoGebra",
-    onClick(app) {
-      app.insertGeoGebra();
-    },
-  },
-  {
-    kind: "Countdown",
-    icon: countdown_svg,
-    label: "Countdown",
-    onClick(app) {
-      app.insertCountdown();
-    },
-  },
-]);
+import type { FastboardApp } from "@netless/fastboard-core";
+import code_editor_svg from "./icons/visual-studio-code.svg";
+import geogebra_svg from "./icons/geogebra.svg";
+import countdown_svg from "./icons/countdown.svg";
+
+export interface AppInToolbar {
+  kind: string;
+  icon: string;
+  label: string;
+  onClick: (app: FastboardApp) => void;
+}
+
+class AppsInToolbar {
+  _listeners: Array<(data: AppInToolbar[]) => void> = [];
+  constructor(private _data: AppInToolbar[]) {}
+  get data() {
+    return this._data;
+  }
+  get length() {
+    return this._data.length;
+  }
+  subscribe(fn: (data: AppInToolbar[]) => void) {
+    this._listeners.push(fn);
+    fn(this._data);
+    return () => {
+      this._listeners = this._listeners.filter(item => item !== fn);
+    };
+  }
+  push(...data: AppInToolbar[]) {
+    this._data.push(...data);
+    this._listeners.forEach(fn => fn(this._data));
+  }
+  insert(data: AppInToolbar, index: number) {
+    this._data.splice(index, 0, data);
+    this._listeners.forEach(fn => fn(this._data));
+  }
+  delete(filter: (data: AppInToolbar) => boolean) {
+    this._data = this._data.filter(item => !filter(item));
+    this._listeners.forEach(fn => fn(this._data));
+  }
+  clear() {
+    this._data.length = 0;
+    this._listeners.forEach(fn => fn(this._data));
+  }
+}
+
+export type { AppsInToolbar };
+
+export const apps = new AppsInToolbar([
+  {
+    kind: "Monaco",
+    icon: code_editor_svg,
+    label: "Code Editor",
+    onClick(app) {
+      app.insertCodeEditor();
+    },
+  },
+  {
+    kind: "GeoGebra",
+    icon: geogebra_svg,
+    label: "GeoGebra",
+    onClick(app) {
+      app.insertGeoGebra();
+    },
+  },
+  {
+    kind: "Countdown",
+    icon: countdown_svg,
+    label: "Countdown",
+    onClick(app) {
+      app.insertCountdown();
+    },
+  },
+]);

package/src/behaviors/index.ts

@@ -1 +1 @@
-export * from "./apps";
+export * from "./apps";

package/src/components/Button/Button.svelte

@@ -1,51 +1,51 @@
-<script lang="ts">
-  import type { Content, Placement } from "tippy.js";
-  import type { Theme } from "../../typings";
-  import { tippy, tippy_menu } from "../../actions/tippy";
-
-  let className = "";
-  export { className as class };
-  export let name = "fastboard-ui";
-  export let theme: Theme = "light";
-  export let disabled = false;
-  export let content: Content = "";
-  export let placement: Placement = "top";
-  export let menu: Content = "";
-  export let menu_placement: Placement = "right-start";
-</script>
-
-{#if content}
-  {#if menu}
-    <span class="{name}-btn-interactive {theme}" use:tippy={{ content, placement, className }}>
-      <button
-        class="{name}-btn {className} {theme}"
-        {disabled}
-        on:click
-        use:tippy={{
-          content: menu,
-          ...tippy_menu,
-          placement: menu_placement,
-          appendTo: document.body,
-          theme,
-          className: "fastboard-panel",
-        }}
-      >
-        <slot />
-      </button>
-      <span class="{name}-triangle" />
-    </span>
-  {:else}
-    <button
-      class="{name}-btn {className} {theme}"
-      {disabled}
-      on:click
-      use:tippy={{ content, placement, className }}
-    >
-      <slot />
-    </button>
-  {/if}
-{:else}
-  <button class="{name}-btn {className} {theme}" {disabled} on:click>
-    <slot />
-  </button>
-{/if}
+<script lang="ts">
+  import type { Content, Placement } from "tippy.js";
+  import type { Theme } from "../../typings";
+  import { tippy, tippy_menu } from "../../actions/tippy";
+
+  let className = "";
+  export { className as class };
+  export let name = "fastboard-ui";
+  export let theme: Theme = "light";
+  export let disabled = false;
+  export let content: Content = "";
+  export let placement: Placement = "top";
+  export let menu: Content = "";
+  export let menu_placement: Placement = "right-start";
+</script>
+
+{#if content}
+  {#if menu}
+    <span class="{name}-btn-interactive {theme}" use:tippy={{ content, placement, className }}>
+      <button
+        class="{name}-btn {className} {theme}"
+        {disabled}
+        on:click
+        use:tippy={{
+          content: menu,
+          ...tippy_menu,
+          placement: menu_placement,
+          appendTo: document.body,
+          theme,
+          className: "fastboard-panel",
+        }}
+      >
+        <slot />
+      </button>
+      <span class="{name}-triangle" />
+    </span>
+  {:else}
+    <button
+      class="{name}-btn {className} {theme}"
+      {disabled}
+      on:click
+      use:tippy={{ content, placement, className }}
+    >
+      <slot />
+    </button>
+  {/if}
+{:else}
+  <button class="{name}-btn {className} {theme}" {disabled} on:click>
+    <slot />
+  </button>
+{/if}

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

@@ -1,26 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Content, Placement } from "tippy.js";
-import type { Theme } from "../../typings";
-
-export declare interface ButtonProps {
-  class?: string;
-  name?: string;
-  theme?: Theme;
-  disabled?: boolean;
-  content?: Content;
-  placement?: Placement;
-  menu?: Content;
-  menu_placement?: Placement;
-}
-
-export declare interface ButtonEvents {
-  click: WindowEventMap["click"];
-}
-
-export declare interface ButtonSlots {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  default: {};
-}
-
-declare class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {}
-export default Button;
+import { SvelteComponentTyped } from "svelte";
+import type { Content, Placement } from "tippy.js";
+import type { Theme } from "../../typings";
+
+export declare interface ButtonProps {
+  class?: string;
+  name?: string;
+  theme?: Theme;
+  disabled?: boolean;
+  content?: Content;
+  placement?: Placement;
+  menu?: Content;
+  menu_placement?: Placement;
+}
+
+export declare interface ButtonEvents {
+  click: WindowEventMap["click"];
+}
+
+export declare interface ButtonSlots {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  default: {};
+}
+
+declare class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {}
+export default Button;

package/src/components/Button/index.ts

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