OpenWebUI/open-webui-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into dev

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2024-10-17 13:25:39 -07:00
committed by GitHub
parent 79c834d0e4 186923210b
commit c9c79852a5
89 changed files with 3413 additions and 1183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/lib/components/common/Collapsible.svelte
View File

@@ -1,4 +1,9 @@
<script lang="ts">
import { getContext, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
$: dispatch('change', open);
import { slide } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
@@ -7,26 +12,26 @@
export let open = false;
export let className = '';
export let buttonClassName = 'w-fit';
export let title = null;
let contentHeight = 0;
let contentElement: HTMLElement;
function handleClick(event) {
if (!event.target.closest('.no-toggle')) {
open = !open;
}
}
$: if (contentElement) {
contentHeight = open ? contentElement.scrollHeight : 0;
}
export let disabled = false;
export let hide = false;
</script>
<div class={className}>
{#if title !== null}
<button class="w-full" on:click={handleClick}>
<div class="w-full font-medium transition flex items-center justify-between gap-2">
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class={buttonClassName}
on:pointerup={() => {
if (!disabled) {
open = !open;
}
}}
>
<div class=" w-fit font-medium transition flex items-center justify-between gap-2">
<div>
{title}
</div>
@@ -39,23 +44,28 @@
{/if}
</div>
</div>
</button>
</div>
{:else}
<button
type="button"
on:click={handleClick}
class="flex w-full items-center gap-2 text-left text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class={buttonClassName}
on:pointerup={() => {
if (!disabled) {
open = !open;
}
}}
>
<slot />
</button>
<div
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
>
<slot />
</div>
</div>
{/if}
<div
bind:this={contentElement}
class="overflow-hidden transition-all duration-300 ease-in-out"
style="max-height: {contentHeight}px;"
>
<div>
{#if open && !hide}
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
<slot name="content" />
</div>
</div>

30
src/lib/components/common/DragGhost.svelte Normal file
View File

@@ -0,0 +1,30 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
export let x;
export let y;
let popupElement = null;
onMount(() => {
document.body.appendChild(popupElement);
document.body.style.overflow = 'hidden';
});
onDestroy(() => {
document.body.removeChild(popupElement);
document.body.style.overflow = 'unset';
});
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
bind:this={popupElement}
class="fixed top-0 left-0 w-screen h-[100dvh] z-50 touch-none pointer-events-none"
>
<div class=" absolute text-white z-[99999]" style="top: {y + 10}px; left: {x + 10}px;">
<slot></slot>
</div>
</div>

2
src/lib/components/common/Dropdown.svelte
View File

@@ -22,7 +22,7 @@
<slot name="content">
<DropdownMenu.Content
class="w-full max-w-[130px] rounded-lg px-1 py-1.5 border border-gray-700 z-50 bg-gray-850 text-white"
class="w-full max-w-[130px] rounded-lg px-1 py-1.5 border border-gray-900 z-50 bg-gray-850 text-white"
sideOffset={8}
side="bottom"
align="start"

108
src/lib/components/common/Folder.svelte Normal file
View File

@@ -0,0 +1,108 @@
<script>
import { getContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
const i18n = getContext('i18n');
const dispatch = createEventDispatcher();
import ChevronDown from '../icons/ChevronDown.svelte';
import ChevronRight from '../icons/ChevronRight.svelte';
import Collapsible from './Collapsible.svelte';
export let open = true;
export let id = '';
export let name = '';
export let collapsible = true;
export let className = '';
let folderElement;
let draggedOver = false;
const onDragOver = (e) => {
e.preventDefault();
draggedOver = true;
};
const onDrop = (e) => {
e.preventDefault();
if (folderElement.contains(e.target)) {
console.log('Dropped on the Button');
try {
// get data from the drag event
const dataTransfer = e.dataTransfer.getData('text/plain');
const data = JSON.parse(dataTransfer);
console.log(data);
dispatch('drop', data);
} catch (error) {
console.error(error);
}
draggedOver = false;
}
};
const onDragLeave = (e) => {
e.preventDefault();
draggedOver = false;
};
onMount(() => {
folderElement.addEventListener('dragover', onDragOver);
folderElement.addEventListener('drop', onDrop);
folderElement.addEventListener('dragleave', onDragLeave);
});
onDestroy(() => {
folderElement.addEventListener('dragover', onDragOver);
folderElement.removeEventListener('drop', onDrop);
folderElement.removeEventListener('dragleave', onDragLeave);
});
</script>
<div bind:this={folderElement} class="relative {className}">
{#if draggedOver}
<div
class="absolute top-0 left-0 w-full h-full rounded-sm bg-[hsla(258,88%,66%,0.1)] bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
></div>
{/if}
{#if collapsible}
<Collapsible
bind:open
className="w-full "
buttonClassName="w-full"
on:change={(e) => {
dispatch('change', e.detail);
}}
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="w-full">
<button
class="w-full py-1.5 px-2 rounded-md flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
>
<div class="text-gray-300 dark:text-gray-600">
{#if open}
<ChevronDown className=" size-3" strokeWidth="2.5" />
{:else}
<ChevronRight className=" size-3" strokeWidth="2.5" />
{/if}
</div>
<div class="translate-y-[0.5px]">
{name}
</div>
</button>
</div>
<div slot="content" class="w-full">
<slot></slot>
</div>
</Collapsible>
{:else}
<slot></slot>
{/if}
</div>