lithesome 0.20.2 → 0.21.0

package/dist/components/dropzone/DropzoneInput.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { DropzoneInputProps } from '../../types/index.js';
+declare const DropzoneInput: import("svelte").Component<DropzoneInputProps<{
+    id: string;
+    "data-dropzone-input": string;
+    type: string;
+    multiple: boolean;
+    accept: string;
+}, any>, {}, "ref">;
+type DropzoneInput = ReturnType<typeof DropzoneInput>;
+export default DropzoneInput;

package/dist/components/dropzone/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dropzone } from './Dropzone.svelte';
+export { default as DropzoneInput } from './DropzoneInput.svelte';

package/dist/components/dropzone/index.js

@@ -0,0 +1,2 @@
+export { default as Dropzone } from './Dropzone.svelte';
+export { default as DropzoneInput } from './DropzoneInput.svelte';

package/dist/components/dropzone/state.svelte.d.ts

@@ -1,21 +1,42 @@
+import { SvelteMap } from 'svelte/reactivity';
 import type { GetInternalProps } from '../../internals/types.js';
-import type { DropzoneProps } from '../../types/index.js';
+import type { DropzoneInputProps, DropzoneProps } from '../../types/index.js';
 type RootProps = GetInternalProps<DropzoneProps>;
 declare class DropzoneRoot {
-    $id: RootProps['id'];
-    $files: RootProps['files'];
-    $multiple: RootProps['multiple'];
-    $maxSize: RootProps['maxSize'];
-    $accept: RootProps['accept'];
-    $disabled: RootProps['disabled'];
+    $$: RootProps;
+    errorsFound: boolean;
+    dragging: boolean;
+    dragCount: number;
+    sharedIds: SvelteMap<"input", string>;
     constructor(props: RootProps);
+    checkFileType: (file: File) => boolean;
+    handleFiles: (filelist: FileList) => void;
+    validate: () => void;
     props: {
-        id: {
-            val: string;
-        };
+        id: string;
         "data-dropzone-root": string;
     };
-    state: {};
+    state: {
+        dragging: boolean;
+        errors: boolean;
+    };
+}
+type InputProps = GetInternalProps<DropzoneInputProps>;
+declare class DropzoneInput {
+    $$: InputProps;
+    _root: DropzoneRoot;
+    constructor(root: DropzoneRoot, props: InputProps);
+    props: {
+        id: string;
+        "data-dropzone-input": string;
+        type: string;
+        multiple: boolean;
+        accept: string;
+    };
+    styles: {
+        display: string;
+    };
 }
 export declare const createDropzoneRootContext: (props: RootProps) => DropzoneRoot;
+export declare const useDropzoneInput: (props: InputProps) => DropzoneInput;
 export {};

package/dist/components/dropzone/state.svelte.js

@@ -1,33 +1,154 @@
-import { buildContext, createAttributes } from '../../internals/index.js';
-const { attrs, selectors } = createAttributes('dropzone', ['root', 'input']);
+import { SvelteMap } from 'svelte/reactivity';
+import { attach, buildContext } from '../../internals/index.js';
+import { addEvents, createAttributes } from '../../internals/utils.svelte.js';
+const { attrs } = createAttributes('dropzone', ['root', 'input']);
 class DropzoneRoot {
-    $id;
-    $files;
-    $multiple;
-    $maxSize;
-    $accept;
-    $disabled;
+    $$;
+    errorsFound = $state(false);
+    dragging = $state(false);
+    dragCount = $state(0);
+    sharedIds = new SvelteMap();
     constructor(props) {
-        this.$id = props.id;
-        this.$files = props.files;
-        this.$multiple = props.multiple;
-        this.$maxSize = props.maxSize;
-        this.$accept = props.accept;
-        this.$disabled = props.disabled;
+        this.$$ = props;
     }
+    checkFileType = (file) => {
+        const fileExtension = file.name.split('.').pop()?.toLowerCase();
+        const acceptedTypes = this.$$.accept.val.split(',').map((el) => el.trim());
+        // Check if extension and mime type match the accept list.
+        return acceptedTypes.some((type) => {
+            if (type.startsWith('.') && fileExtension) {
+                return type.includes(fileExtension);
+            }
+            else if (type.endsWith('/*')) {
+                return file.type.startsWith(`${type.split('/')[0]}/`);
+            }
+            else {
+                return file.type === type;
+            }
+        });
+    };
+    handleFiles = (filelist) => {
+        const files = Array.from(filelist);
+        const length = this.$$.multiple.val ? files.length : 1;
+        this.$$.onChange?.(this.$$.files.val);
+        for (let i = 0; i < length; i++) {
+            const file = files[i];
+            if (this.$$.maxSize.val > 0 && file.size > this.$$.maxSize.val) {
+                this.$$.onError?.({
+                    type: 'maxSize',
+                    file,
+                    limit: this.$$.maxSize.val
+                });
+                this.errorsFound = true;
+                continue;
+            }
+            if (this.$$.accept.val && !this.checkFileType(file)) {
+                this.$$.onError?.({
+                    type: 'invalidType',
+                    file,
+                    accept: this.$$.accept.val,
+                    recieved: file.type
+                });
+                this.errorsFound = true;
+                continue;
+            }
+            if (this.$$.validate && !this.$$.validate?.(file, this.$$.files.val)) {
+                this.$$.onError?.({
+                    type: 'custom',
+                    file
+                });
+                this.errorsFound = true;
+                continue;
+            }
+            if (this.$$.multiple.val) {
+                this.$$.files.val.push(file);
+            }
+            else {
+                this.$$.files.val[0] = file;
+            }
+            this.$$.onSuccess?.({
+                type: 'success',
+                file
+            });
+        }
+    };
+    validate = () => { };
     props = $derived.by(() => ({
-        id: this.$id,
-        [attrs.root]: ''
+        id: this.$$.id.val,
+        [attrs.root]: '',
+        ...attach((node) => {
+            return addEvents(node, {
+                dragenter: (e) => {
+                    e.preventDefault();
+                    if (this.$$.disabled.val)
+                        return;
+                    this.dragging = true;
+                    this.dragCount++;
+                },
+                dragleave: (e) => {
+                    e.preventDefault();
+                    if (this.$$.disabled.val)
+                        return;
+                    this.dragCount--;
+                    if (this.dragCount === 0)
+                        this.dragging = false;
+                },
+                dragover: (e) => {
+                    e.preventDefault();
+                },
+                drop: (e) => {
+                    e.preventDefault();
+                    if (this.$$.disabled.val)
+                        return;
+                    this.errorsFound = false;
+                    if (e.dataTransfer?.files) {
+                        this.handleFiles(e.dataTransfer.files);
+                        this.dragging = false;
+                        this.dragCount = 0;
+                    }
+                },
+                click: () => {
+                    if (this.$$.disabled.val)
+                        return;
+                    const input = document.querySelector(`#${this.sharedIds.get('input')}`);
+                    input?.click();
+                }
+            });
+        })
     }));
-    state = $derived.by(() => ({}));
+    state = $derived.by(() => ({
+        dragging: this.dragging,
+        errors: this.errorsFound
+    }));
+}
+class DropzoneInput {
+    $$;
+    _root;
+    constructor(root, props) {
+        this._root = root;
+        this.$$ = props;
+        this._root.sharedIds.set('input', this.$$.id.val);
+    }
+    props = $derived.by(() => ({
+        id: this.$$.id.val,
+        [attrs.input]: '',
+        type: 'file',
+        multiple: this._root.$$.multiple.val,
+        accept: this._root.$$.accept.val,
+        ...attach((node) => addEvents(node, {
+            change: (e) => {
+                const files = e.target.files;
+                if (files) {
+                    this._root.errorsFound = false;
+                    this._root.handleFiles(files);
+                }
+            }
+        }))
+    }));
+    styles = {
+        display: 'none'
+    };
 }
-// type InputProps = GetInternalProps<DropzoneInputProps>;
-// class DropzoneInput {
-// 	$id: InputProps['id'];
-// 	_root: DropzoneRoot;
-// 	constructor(root:DropzoneRoot, props: InputProps) {
-// 	}
-// }
 //
 // ~BUILDERS
 //
@@ -35,3 +156,6 @@ const rootCtx = buildContext(DropzoneRoot);
 export const createDropzoneRootContext = (props) => {
     return rootCtx.create(props);
 };
+export const useDropzoneInput = (props) => {
+    return rootCtx.register(DropzoneInput, props);
+};

package/dist/components/hovercard/Hovercard.svelte

@@ -1,33 +1,38 @@
-<script lang="ts">
-	import { stateValue } from '../../internals/context.svelte.js';
-	import { createHovercardRootContext } from './state.svelte.js';
-
-	import type { HovercardProps } from '../../types/index.js';
-
-	let {
-		children,
-		visible = $bindable(false),
-		delay = 700,
-		disabled = $bindable(false),
-		portalTarget = 'body',
-		floatingConfig = {}
-	}: HovercardProps<typeof ctx.state> = $props();
-
-	let ctx = createHovercardRootContext({
-		visible: stateValue(
-			() => visible,
-			(v) => {
-				visible = v;
-			}
-		),
-		disabled: stateValue(
-			() => disabled,
-			(v) => (disabled = v)
-		),
-		delay: stateValue(() => delay),
-		portalTarget: stateValue(() => portalTarget),
-		floatingConfig: stateValue(() => floatingConfig)
-	});
-</script>
-
-{@render children?.(ctx.state)}
+<script lang="ts">
+	import { stateValue } from '../../internals/context.svelte.js';
+	import { parseId } from '../../internals/utils.svelte.js';
+	import { createHovercardRootContext } from './state.svelte.js';
+
+	import type { HovercardProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		visible = $bindable(false),
+		delay = 700,
+		disabled = $bindable(false),
+		portalTarget = 'body',
+		floatingConfig = {}
+	}: HovercardProps<typeof ctx.state> = $props();
+
+	let ctx = createHovercardRootContext({
+		id: stateValue(() => id),
+		visible: stateValue(
+			() => visible,
+			(v) => {
+				visible = v;
+			}
+		),
+		disabled: stateValue(
+			() => disabled,
+			(v) => (disabled = v)
+		),
+		delay: stateValue(() => delay),
+		portalTarget: stateValue(() => portalTarget),
+		floatingConfig: stateValue(() => floatingConfig)
+	});
+</script>
+
+{@render children?.(ctx.state)}

package/dist/components/hovercard/HovercardArrow.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-	import { Element, parseId, stateValue } from '../../internals/index.js';
-	import { useHovercardArrow } from './state.svelte.js';
-
-	import type { HovercardArrowProps } from '../../types/index.js';
-
-	const uid = $props.id();
-
-	let {
-		id = parseId(uid),
-		children,
-		custom,
-		ref = $bindable(),
-		...props
-	}: HovercardArrowProps<typeof ctx.props> = $props();
-
-	let ctx = useHovercardArrow({
-		id: stateValue(() => id),
-		ref: stateValue(() => ref!)
-	});
-</script>
-
-<Element bind:ref {children} {custom} {ctx} as="button" {...props} />
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useHovercardArrow } from './state.svelte.js';
+
+	import type { HovercardArrowProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: HovercardArrowProps<typeof ctx.props> = $props();
+
+	let ctx = useHovercardArrow({
+		id: stateValue(() => id),
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} {ctx} as="button" {...props} />

package/dist/components/hovercard/HovercardContent.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-	import { Element, parseId, stateValue } from '../../internals/index.js';
-	import { useHovercardContent } from './state.svelte.js';
-
-	import type { HovercardContentProps } from '../../types/index.js';
-
-	const uid = $props.id();
-
-	let {
-		id = parseId(uid),
-		children,
-		custom,
-		ref = $bindable(),
-		...props
-	}: HovercardContentProps<typeof ctx.props, typeof ctx.state> = $props();
-
-	let ctx = useHovercardContent({
-		id: stateValue(() => id),
-		ref: stateValue(() => ref!)
-	});
-</script>
-
-<Element bind:ref {children} {custom} visible={ctx._root.$$.visible.val} {ctx} {...props} />
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useHovercardContent } from './state.svelte.js';
+
+	import type { HovercardContentProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: HovercardContentProps<typeof ctx.props, typeof ctx.state> = $props();
+
+	let ctx = useHovercardContent({
+		id: stateValue(() => id),
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} visible={ctx._root.$$.visible.val} {ctx} {...props} />

package/dist/components/hovercard/HovercardTrigger.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-	import { Element, parseId, stateValue } from '../../internals/index.js';
-	import { useHovercardTrigger } from './state.svelte.js';
-
-	import type { HovercardTriggerProps } from '../../types/index.js';
-
-	const uid = $props.id();
-
-	let {
-		id = parseId(uid),
-		children,
-		custom,
-		ref = $bindable(),
-		...props
-	}: HovercardTriggerProps<typeof ctx.props> = $props();
-
-	let ctx = useHovercardTrigger({
-		id: stateValue(() => id),
-		ref: stateValue(() => ref!)
-	});
-</script>
-
-<Element bind:ref {children} {custom} {ctx} as="button" {...props} />
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useHovercardTrigger } from './state.svelte.js';
+
+	import type { HovercardTriggerProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: HovercardTriggerProps<typeof ctx.props> = $props();
+
+	let ctx = useHovercardTrigger({
+		id: stateValue(() => id),
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} {ctx} as="button" {...props} />

package/dist/components/menu/Menu.svelte

@@ -1,35 +1,36 @@
-<script lang="ts">
-	import { stateValue } from '../../internals/context.svelte.js';
-	import { parseId } from '../../internals/utils.svelte.js';
-	import { createMenuRootContext } from './state.svelte.js';
-
-	import type { MenuProps } from '../../types/index.js';
-
-	const uid = $props.id();
-
-	let {
-		children,
-		visible = $bindable(false),
-		disabled = $bindable(false),
-		portalTarget = 'body',
-		floatingConfig = {}
-	}: MenuProps<typeof ctx.state> = $props();
-
-	let ctx = createMenuRootContext({
-		id: parseId(uid),
-		visible: stateValue(
-			() => visible,
-			(v) => {
-				visible = v;
-			}
-		),
-		disabled: stateValue(
-			() => disabled,
-			(v) => (disabled = v)
-		),
-		portalTarget: stateValue(() => portalTarget),
-		floatingConfig: stateValue(() => floatingConfig)
-	});
-</script>
-
-{@render children?.(ctx.state)}
+<script lang="ts">
+	import { stateValue } from '../../internals/context.svelte.js';
+	import { parseId } from '../../internals/utils.svelte.js';
+	import { createMenuRootContext } from './state.svelte.js';
+
+	import type { MenuProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		visible = $bindable(false),
+		disabled = $bindable(false),
+		portalTarget = 'body',
+		floatingConfig = {}
+	}: MenuProps<typeof ctx.state> = $props();
+
+	let ctx = createMenuRootContext({
+		id: stateValue(() => id),
+		visible: stateValue(
+			() => visible,
+			(v) => {
+				visible = v;
+			}
+		),
+		disabled: stateValue(
+			() => disabled,
+			(v) => (disabled = v)
+		),
+		portalTarget: stateValue(() => portalTarget),
+		floatingConfig: stateValue(() => floatingConfig)
+	});
+</script>
+
+{@render children?.(ctx.state)}

package/dist/components/menu/MenuArrow.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import { Element, parseId, stateValue } from '../../internals/index.js';
-	import { useMenuArrow } from './state.svelte.js';
-
-	import type { MenuArrowProps } from '../../types/index.js';
-
-	const uid = $props.id();
-
-	let { id = parseId(uid), children, custom, ref = $bindable(), ...props }: MenuArrowProps<typeof ctx.props> = $props();
-
-	let ctx = useMenuArrow({
-		id: stateValue(() => id),
-		ref: stateValue(() => ref!)
-	});
-</script>
-
-<Element bind:ref {children} {custom} {ctx} as="button" {...props} />
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useMenuArrow } from './state.svelte.js';
+
+	import type { MenuArrowProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let { id = parseId(uid), children, custom, ref = $bindable(), ...props }: MenuArrowProps<typeof ctx.props> = $props();
+
+	let ctx = useMenuArrow({
+		id: stateValue(() => id),
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} {ctx} as="button" {...props} />

package/dist/components/menu/MenuContent.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-	import { Element, parseId, stateValue } from '../../internals/index.js';
-	import { useMenuContent } from './state.svelte.js';
-
-	import type { MenuContentProps } from '../../types/index.js';
-
-	const uid = $props.id();
-
-	let {
-		id = parseId(uid),
-		children,
-		custom,
-		ref = $bindable(),
-		...props
-	}: MenuContentProps<typeof ctx.props, typeof ctx.state> = $props();
-
-	let ctx = useMenuContent({
-		id: stateValue(() => id),
-		ref: stateValue(() => ref!)
-	});
-</script>
-
-<Element bind:ref {children} {custom} visible={ctx._root.$$.visible.val} {ctx} {...props} />
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useMenuContent } from './state.svelte.js';
+
+	import type { MenuContentProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: MenuContentProps<typeof ctx.props, typeof ctx.state> = $props();
+
+	let ctx = useMenuContent({
+		id: stateValue(() => id),
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} visible={ctx._root.$$.visible.val} {ctx} {...props} />