mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
refactor: fixed new Collapsible Component to allow passed in classes
chore: format
This commit is contained in:
rdavis
parent
2389c36a70
commit
d5c0876a0b
@ -4,94 +4,88 @@
|
|||||||
import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
|
import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
|
||||||
import Collapsible from '$lib/components/common/Collapsible.svelte';
|
import Collapsible from '$lib/components/common/Collapsible.svelte';
|
||||||
|
|
||||||
|
|
||||||
export let status = { urls: [], query: '' };
|
export let status = { urls: [], query: '' };
|
||||||
let state = false;
|
let state = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="w-full space-y-1">
|
<Collapsible bind:open={state} className="w-full space-y-1">
|
||||||
<Collapsible bind:open={state}>
|
<div
|
||||||
<div
|
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
|
||||||
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
|
slot="head"
|
||||||
slot="head"
|
>
|
||||||
>
|
<slot />
|
||||||
<slot />
|
|
||||||
|
{#if state}
|
||||||
|
<ChevronUp strokeWidth="3.5" className="size-3.5 " />
|
||||||
|
{:else}
|
||||||
|
<ChevronDown strokeWidth="3.5" className="size-3.5 " />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl" slot="content">
|
||||||
|
{#if status?.query}
|
||||||
|
<a
|
||||||
|
href="https://www.google.com/search?q={status.query}"
|
||||||
|
target="_blank"
|
||||||
|
class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
|
||||||
|
>
|
||||||
|
<div class="flex gap-2 items-center">
|
||||||
|
<MagnifyingGlass />
|
||||||
|
|
||||||
{#if state}
|
|
||||||
<ChevronUp strokeWidth="3.5" className="size-3.5 " />
|
|
||||||
{:else}
|
|
||||||
<ChevronDown strokeWidth="3.5" className="size-3.5 " />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
|
|
||||||
slot="content"
|
|
||||||
>
|
|
||||||
{#if status?.query}
|
|
||||||
<a
|
|
||||||
href="https://www.google.com/search?q={status.query}"
|
|
||||||
target="_blank"
|
|
||||||
class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
|
|
||||||
>
|
|
||||||
<div class="flex gap-2 items-center">
|
|
||||||
<MagnifyingGlass />
|
|
||||||
|
|
||||||
<div class=" line-clamp-1">
|
|
||||||
{status.query}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
|
|
||||||
>
|
|
||||||
<!-- -->
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="currentColor"
|
|
||||||
class="size-4"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#each status.urls as url, urlIdx}
|
|
||||||
<a
|
|
||||||
href={url}
|
|
||||||
target="_blank"
|
|
||||||
class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
|
|
||||||
? ''
|
|
||||||
: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
<div class=" line-clamp-1">
|
<div class=" line-clamp-1">
|
||||||
{url}
|
{status.query}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div
|
|
||||||
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
|
<div
|
||||||
|
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
|
||||||
|
>
|
||||||
|
<!-- -->
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="size-4"
|
||||||
>
|
>
|
||||||
<!-- -->
|
<path
|
||||||
<svg
|
fill-rule="evenodd"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
|
||||||
viewBox="0 0 16 16"
|
clip-rule="evenodd"
|
||||||
fill="currentColor"
|
/>
|
||||||
class="size-4"
|
</svg>
|
||||||
>
|
</div>
|
||||||
<path
|
</a>
|
||||||
fill-rule="evenodd"
|
{/if}
|
||||||
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
|
|
||||||
clip-rule="evenodd"
|
{#each status.urls as url, urlIdx}
|
||||||
/>
|
<a
|
||||||
</svg>
|
href={url}
|
||||||
</div>
|
target="_blank"
|
||||||
</a>
|
class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
|
||||||
{/each}
|
? ''
|
||||||
</div>
|
: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
|
||||||
</Collapsible>
|
>
|
||||||
</div>
|
<div class=" line-clamp-1">
|
||||||
|
{url}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
|
||||||
|
>
|
||||||
|
<!-- -->
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="size-4"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</Collapsible>
|
||||||
|
|||||||
@ -2,11 +2,11 @@
|
|||||||
import { afterUpdate } from 'svelte';
|
import { afterUpdate } from 'svelte';
|
||||||
|
|
||||||
export let open = false;
|
export let open = false;
|
||||||
|
export let className = '';
|
||||||
|
|
||||||
// Manage the max-height of the collapsible content for snappy transitions
|
// Manage the max-height of the collapsible content for snappy transitions
|
||||||
let contentElement: HTMLElement;
|
let contentElement: HTMLElement;
|
||||||
let maxHeight = '0px'; // Initial max-height
|
let maxHeight = '0px'; // Initial max-height
|
||||||
// After any state update, adjust the max-height for the transition
|
// After any state update, adjust the max-height for the transition
|
||||||
afterUpdate(() => {
|
afterUpdate(() => {
|
||||||
if (open) {
|
if (open) {
|
||||||
@ -15,23 +15,22 @@
|
|||||||
} else {
|
} else {
|
||||||
maxHeight = '0px';
|
maxHeight = '0px';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div class={className}>
|
||||||
|
<button on:click={() => (open = !open)}>
|
||||||
|
<slot name="head" />
|
||||||
|
</button>
|
||||||
|
<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
|
||||||
|
<slot name="content" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.collapsible-content {
|
.collapsible-content {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: max-height 0.3s ease-out;
|
transition: max-height 0.3s ease-out;
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div>
|
|
||||||
<button on:click={() => open = !open}>
|
|
||||||
<slot name="head"></slot>
|
|
||||||
</button>
|
|
||||||
<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
|
|
||||||
<slot name="content"></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in New Issue
Block a user