refac
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
export let href = '';
|
||||
export let title = '';
|
||||
export let description = '';
|
||||
</script>
|
||||
|
||||
<div class="mt-6 px-2">
|
||||
<div class="mb-0.5 text-[11px] font-normal text-gray-400 dark:text-gray-600">
|
||||
{$i18n.t('Made by Open WebUI Community')}
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="flex w-full cursor-pointer items-center justify-between gap-3 px-0 py-1 text-left transition"
|
||||
{href}
|
||||
target="_blank"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<div class="line-clamp-1 text-[13px] font-normal text-gray-700 dark:text-gray-200">
|
||||
{title}
|
||||
</div>
|
||||
<div class="line-clamp-1 text-xs text-gray-500 dark:text-gray-500">
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ChevronRight className="size-3.5 shrink-0 text-gray-400 dark:text-gray-600" />
|
||||
</a>
|
||||
</div>
|
||||
@@ -10,6 +10,7 @@
|
||||
|
||||
export let value = '';
|
||||
export let placeholder = $i18n.t('Tag');
|
||||
export let align = 'start';
|
||||
export let onChange: (value: string) => void = () => {};
|
||||
|
||||
export let items = [];
|
||||
@@ -19,13 +20,14 @@
|
||||
bind:value
|
||||
{items}
|
||||
{placeholder}
|
||||
triggerClass="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 rounded-xl "
|
||||
itemClass="flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl capitalize"
|
||||
{align}
|
||||
triggerClass="relative h-8 w-full flex items-center gap-0.5 px-1.5 py-1.5 bg-transparent rounded-xl text-[13px] font-normal text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
|
||||
itemClass="flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[13px] capitalize hover:text-gray-900 dark:hover:text-gray-100"
|
||||
onChange={() => onChange(value)}
|
||||
>
|
||||
<svelte:fragment slot="trigger" let:selectedLabel>
|
||||
<div
|
||||
class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden capitalize"
|
||||
class="inline-flex h-input w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden capitalize"
|
||||
>
|
||||
{#if value}
|
||||
{value}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
|
||||
export let value = '';
|
||||
export let placeholder = $i18n.t('Select view');
|
||||
export let align = 'start';
|
||||
export let onChange: (value: string) => void = () => {};
|
||||
|
||||
const items = [
|
||||
@@ -22,13 +23,14 @@
|
||||
bind:value
|
||||
{items}
|
||||
{placeholder}
|
||||
triggerClass="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl "
|
||||
labelClass="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
|
||||
{align}
|
||||
triggerClass="relative h-8 w-full flex items-center gap-0.5 px-1.5 py-1.5 bg-transparent rounded-xl text-[13px] font-normal text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
|
||||
labelClass="inline-flex h-input w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
|
||||
onChange={() => onChange(value)}
|
||||
>
|
||||
<svelte:fragment slot="trigger" let:selectedLabel>
|
||||
<span
|
||||
class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
|
||||
class="inline-flex h-input w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
|
||||
>
|
||||
{selectedLabel}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user