"git@developer.sourcefind.cn:chenpangpang/open-webui.git" did not exist on "d55d437275008e5584f865a03b48fd162baf004d"
Commit d5c0876a authored by rdavis's avatar rdavis
Browse files

refactor: fixed new Collapsible Component to allow passed in classes

chore: format
parent 2389c36a
...@@ -4,13 +4,11 @@ ...@@ -4,13 +4,11 @@
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"
...@@ -23,10 +21,7 @@ ...@@ -23,10 +21,7 @@
<ChevronDown strokeWidth="3.5" className="size-3.5 " /> <ChevronDown strokeWidth="3.5" className="size-3.5 " />
{/if} {/if}
</div> </div>
<div <div class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl" slot="content">
class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
slot="content"
>
{#if status?.query} {#if status?.query}
<a <a
href="https://www.google.com/search?q={status.query}" href="https://www.google.com/search?q={status.query}"
...@@ -93,5 +88,4 @@ ...@@ -93,5 +88,4 @@
</a> </a>
{/each} {/each}
</div> </div>
</Collapsible> </Collapsible>
</div>
\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
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;
...@@ -16,9 +16,17 @@ ...@@ -16,9 +16,17 @@
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;
...@@ -26,12 +34,3 @@ ...@@ -26,12 +34,3 @@
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>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment