@chalabi/svelte-sheets 2.0.0

package/Readme.md

@@ -0,0 +1,110 @@
+# Svelte Spreadsheets
+
+Ultra fast excel sheets in the browser. Hugely inspired by JExcel, built on XLSX shoulders.
+
+=> Find a live example [Here](https://ticruz38.github.io/svelte-sheets/)
+
+### Motivation
+
+Making excel sheets a reality in the browser can be incredibly difficult, keeping good performance while drawing and editing large amount of data in the DOM is the ultimate challenge for a web developper.
+The best implementation I could find was the awesome vanillajs [jexcel](https://github.com/jspreadsheet/jexcel) by Paul Hodel. <br/>
+However, opening really big spreadsheet would still block the JS thread for a minute or two.
+Following Rich Harris talk about reactivity, I decided to take the idea behind Jexcel and adapt it to Svelte, making use of a Virtual List to keep the DOM small and light at all times.
+
+### Known limitation
+
+You will need to have typescript svelte-preprocess enabled in your webpack/rollup configuration
+
+### Installation
+
+`npm i -S @chalabi/svelte-sheets`
+
+### Example
+
+```html
+<script>
+  import { Sheet } from "@chalabi/svelte-sheets";
+
+  let style = {
+    A1: "background-color: red",
+  };
+  let mergeCells = {
+    A1: [5, 0], // 5 horizontally merged cell (colspan), 0 vertically merged cells (rowspan)
+  };
+  let columns = [{ width: "50px" }];
+  let data = [
+    ["mazda", "renault", "volkswagen"][("10000km", "20000km", "300000km")],
+  ];
+</script>
+
+<Sheet {style} {mergeCells} {columns} {data} />
+```
+
+Alternatively you can use the toolbar to open any kind of excel files
+
+```html
+<script>
+  import { Sheet, Toolbar } from "@chalabi/svelte-sheets";
+
+  let sheetNames;
+  let sheets;
+  let active;
+  let data;
+  let columns;
+  let mergeCells;
+  let style;
+
+  $: {
+    data = sheets[active].data;
+    columns = sheets[active].columns;
+    mergeCells = sheets[active].mergeCells;
+    style = sheets[active].style;
+  }
+</script>
+
+<Toolbar bind:sheetNames bind:sheets bind:active />
+<Sheet {style} {mergeCells} {columns} {data} />
+```
+
+You can configure the table such as height and many other things with the options props:
+
+```js
+let options = {
+  tableHeight: "90vh",
+  defaultColWidth: "50px",
+  readOnly: true,
+};
+```
+
+Common flags:
+
+- `readOnly`: true to disable all edits and resizing
+- `editable`: false to disable edits (equivalent to readOnly)
+- `disableHover`: true to disable hover-based selection updates
+
+Theme:
+
+- `theme`: set to `"dark"` for the bundled dark tokens (default is `"light"`)
+- `class` / `className`: pass a custom class to the root element to override CSS variables
+
+Many of these options will be implemented later, so expect most of them to be unresponsive.
+
+### Development
+
+- The demo app lives in `src/routes/+page.svelte`
+- `npm run dev` for the demo
+- `npm test` to run unit tests
+- `npm run package` to build the library output
+
+### Things yet to be done
+
+- Make a svelte REPL demonstrating the library (awaiting repl typescript support)
+- ✅ Undo/Redo (mapping keyboard shortcuts)
+- ✅ shift+click should extend the selection
+- ✅ Resizing rows/columns
+- Filtering
+- ✅ Copy/Paste
+- Comments on cells
+- Support more that number, string or boolean in cells. let's say charts, datepickers etc...
+- ✅ Implement a tooltip when right clicking a cell with a list of actions
+- All other excel features you can think of

package/dist/Menu.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">export let show = false;
+export let x;
+export let y;
+export let data = [];
+export let selected;
+export let copy;
+export let cut;
+export let paste;
+export let clear;
+// delete is a reserved word...
+export let delet;
+export let readOnly = false;
+</script>
+
+<div class="menu" class:hidden={!show} style={`top: ${y}px; left: ${x}px`}>
+  <div
+    class="item flex justify-between"
+    class:disabled={readOnly}
+    on:click={(e) => !readOnly && cut(e)}
+  >
+    <div>Cut</div>
+    <div class="disabled">⌘X</div>
+  </div>
+  <div class="item flex justify-between" on:click={(e) => copy(e)}>
+    <div>Copy</div>
+    <div class="disabled">⌘C</div>
+  </div>
+  <div
+    class="item flex justify-between"
+    class:disabled={readOnly}
+    on:click={(e) => !readOnly && paste(e)}
+  >
+    <div>Paste</div>
+    <div class="disabled">⌘P</div>
+  </div>
+  <div class="divider" />
+  <div class="item" class:disabled={readOnly}>Insert</div>
+  <div
+    class="item"
+    class:disabled={readOnly}
+    on:click={(e) => !readOnly && delet(e)}
+  >
+    Delete
+  </div>
+  <div
+    class="item"
+    class:disabled={readOnly}
+    on:click={(e) => !readOnly && clear(e)}
+  >
+    Clear contents
+  </div>
+</div>
+
+<style>
+  .menu {
+    padding: 0.5rem 0.25rem;
+    position: fixed;
+    z-index: 20;
+    min-width: 10rem;
+    background: var(--sheet-menu-bg);
+    border-radius: 10px;
+    color: var(--sheet-text);
+  }
+  .disabled {
+    color: var(--sheet-muted);
+  }
+  .divider {
+    padding-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-bottom: 1px solid #aaa;
+  }
+  .hidden {
+    display: none;
+  }
+  .flex {
+    display: flex;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .item {
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+  }
+  .item:hover {
+    background-color: var(--sheet-accent);
+    color: var(--sheet-bg);
+  }
+  .item.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .item.disabled:hover {
+    background-color: transparent;
+  }
+</style>

package/dist/Menu.svelte.d.ts

@@ -0,0 +1,30 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Menu: $$__sveltets_2_IsomorphicComponent<{
+    show?: boolean;
+    x: any;
+    y: any;
+    data?: (string | number | boolean)[][];
+    selected: string;
+    copy: (e: any) => void;
+    cut: (e: any) => void;
+    paste: (e: any) => any[][];
+    clear: (e: any) => any[][];
+    delet: (e: any) => any[][];
+    readOnly?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Menu = InstanceType<typeof Menu>;
+export default Menu;

package/dist/Open.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">import XLSX from "xlsx";
+import { convert } from "./convert.js";
+export let onload;
+export let sheetNames;
+export let sheets = [];
+export let open;
+// declare all possible table object
+let files;
+$: files && files[0] && reader && reader.readAsArrayBuffer(files[0]);
+let reader;
+if (typeof FileReader != "undefined") {
+    reader = new FileReader();
+    reader.onload = () => {
+        sheets = [];
+        const wb = XLSX.read(new Uint8Array(reader.result), {
+            type: "array",
+            cellFormula: true,
+            cellStyles: true,
+        });
+        sheets = convert(wb);
+        sheetNames = sheets.map((s) => s.sheetName);
+        onload && onload(sheets, sheetNames);
+    };
+}
+</script>
+
+<input type="file" class="hidden" name="file" bind:this={open} bind:files />
+
+<style>
+  .hidden {
+    height: 0;
+    width: 0;
+    opacity: 0;
+  }
+</style>

package/dist/Open.svelte.d.ts

@@ -0,0 +1,23 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Open: $$__sveltets_2_IsomorphicComponent<{
+    onload: (sheets: any[], sheetNames: any[]) => void;
+    sheetNames: any;
+    sheets?: any[];
+    open: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Open = InstanceType<typeof Open>;
+export default Open;