@keenmate/svelte-treeview 0.1.0

package/dist/menu/ContextMenu.svelte.d.ts

@@ -0,0 +1,32 @@
+/** @typedef {typeof __propDef.props}  ContextMenuProps */
+/** @typedef {typeof __propDef.events}  ContextMenuEvents */
+/** @typedef {typeof __propDef.slots}  ContextMenuSlots */
+export default class ContextMenu extends SvelteComponentTyped<{
+    onRightClick?: ((e: any, n: any) => Promise<void>) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        node: null;
+    };
+}> {
+    get onRightClick(): (e: any, n: any) => Promise<void>;
+}
+export type ContextMenuProps = typeof __propDef.props;
+export type ContextMenuEvents = typeof __propDef.events;
+export type ContextMenuSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        onRightClick?: ((e: any, n: any) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            node: null;
+        };
+    };
+};
+export {};

package/dist/menu/Menu.svelte

@@ -0,0 +1,50 @@
+<!-- component from https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0 -->
+
+<script>
+	// @ts-nocheck
+
+	import { onMount, setContext, createEventDispatcher } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { key } from './menu.js';
+
+	export let x;
+	export let y;
+
+	// whenever x and y is changed, restrict box to be within bounds
+	$: (() => {
+		if (!menuEl) return;
+
+		const rect = menuEl.getBoundingClientRect();
+		x = Math.min(window.innerWidth - rect.width, x);
+		if (y > window.innerHeight - rect.height) y -= rect.height;
+	})(x, y);
+
+	const dispatch = createEventDispatcher();
+
+	setContext(key, {
+		dispatchClick: () => dispatch('click')
+	});
+
+	let menuEl;
+	function onPageClick(e) {
+		if (e.target === menuEl || menuEl.contains(e.target)) return;
+		dispatch('clickoutside');
+	}
+</script>
+
+<svelte:body on:click={onPageClick} />
+
+<div transition:fade={{ duration: 100 }} bind:this={menuEl} style="top: {y}px; left: {x}px;">
+	<slot />
+</div>
+
+<style>
+	div {
+		position: fixed;
+		display: grid;
+		border: 1px solid #0003;
+		box-shadow: 2px 2px 5px 0px #0002;
+		background: white;
+		z-index: 999;
+	}
+</style>

package/dist/menu/Menu.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  MenuProps */
+/** @typedef {typeof __propDef.events}  MenuEvents */
+/** @typedef {typeof __propDef.slots}  MenuSlots */
+export default class Menu extends SvelteComponentTyped<{
+    x: any;
+    y: any;
+}, {
+    click: CustomEvent<any>;
+    clickoutside: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        x: any;
+        y: any;
+    };
+    events: {
+        click: CustomEvent<any>;
+        clickoutside: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/menu/MenuDivider.svelte

@@ -0,0 +1,10 @@
+<style>
+	hr {
+		border-top: 1px solid #0003;
+		width: 100%;
+		margin: 2px 0;
+	}
+</style>
+
+
+<hr />

package/dist/menu/MenuDivider.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  MenuDividerProps */
+/** @typedef {typeof __propDef.events}  MenuDividerEvents */
+/** @typedef {typeof __propDef.slots}  MenuDividerSlots */
+export default class MenuDivider extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MenuDividerProps = typeof __propDef.props;
+export type MenuDividerEvents = typeof __propDef.events;
+export type MenuDividerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/menu/MenuOption.svelte

@@ -0,0 +1,49 @@
+<script>
+	// @ts-nocheck
+
+	import { onMount, getContext } from 'svelte';
+	import { key } from './menu.js';
+
+	export let isDisabled = false;
+	export let text = '';
+
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	const { dispatchClick } = getContext(key);
+
+	const handleClick = (e) => {
+		if (isDisabled) return;
+
+		dispatch('click');
+		dispatchClick();
+	};
+</script>
+
+<div class:disabled={isDisabled} on:click={handleClick}>
+	{#if text}
+		{text}
+	{:else}
+		<slot />
+	{/if}
+</div>
+
+<style>
+	div {
+		padding: 4px 15px;
+		cursor: default;
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		grid-gap: 5px;
+	}
+	div:hover {
+		background: #0002;
+	}
+	div.disabled {
+		color: #0006;
+	}
+	div.disabled:hover {
+		background: white;
+	}
+</style>

package/dist/menu/MenuOption.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  MenuOptionProps */
+/** @typedef {typeof __propDef.events}  MenuOptionEvents */
+/** @typedef {typeof __propDef.slots}  MenuOptionSlots */
+export default class MenuOption extends SvelteComponentTyped<{
+    isDisabled?: boolean | undefined;
+    text?: string | undefined;
+}, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MenuOptionProps = typeof __propDef.props;
+export type MenuOptionEvents = typeof __propDef.events;
+export type MenuOptionSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        isDisabled?: boolean | undefined;
+        text?: string | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/menu/menu.d.ts

@@ -0,0 +1 @@
+export const key: {};

package/dist/menu/menu.js

@@ -0,0 +1,3 @@
+const key = {};
+
+export { key };

package/package.json

@@ -0,0 +1,63 @@
+{
+	"name": "@keenmate/svelte-treeview",
+	"version": "0.1.0",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^3.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/package": "^2.0.0",
+		"@types/marked": "^5.0.0",
+		"@types/node": "^20.3.3",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"publint": "^0.1.9",
+		"rollup-plugin-string": "^3.0.0",
+		"sass": "^1.49.0",
+		"svelte": "^4.0.0",
+		"svelte-check": "^3.4.3",
+		"svelte-preprocess": "^5.0.4",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.3.6",
+		"@keenmate/svelte-adminlte": "^0.3.20",
+		"@keenmate/svelte-treeview": "^0.0.1",
+		"marked": "^5.1.0",
+		"svelte-multiselect": "github:KeenMate/svelte-multiselect"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"lodash.unionby": "^4.8.0",
+		"lodash.uniq": "^4.5.0"
+	}
+}