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

chore: tailwind v4 migration

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2025-02-15 19:27:25 -08:00
parent 30182d77cc
commit e3fa48b6ce
132 changed files with 1056 additions and 1034 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/common/Badge.svelte
+1 -1
View File
@@ -13,7 +13,7 @@
<div
class=" text-xs font-bold {classNames[type] ??
classNames['info']} w-fit px-2 rounded uppercase line-clamp-1 mr-0.5"
classNames['info']} w-fit px-2 rounded-sm uppercase line-clamp-1 mr-0.5"
>
{content}
</div>
src/lib/components/common/Banner.svelte
+1 -1
View File
@@ -48,7 +48,7 @@
<div class="flex justify-between self-start">
<div
class=" text-xs font-bold {classNames[banner.type] ??
classNames['info']} w-fit px-2 rounded uppercase line-clamp-1 mr-0.5"
classNames['info']} w-fit px-2 rounded-sm uppercase line-clamp-1 mr-0.5"
>
{banner.type}
</div>
src/lib/components/common/Checkbox.svelte
+1 -1
View File
@@ -14,7 +14,7 @@
class=" outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !==
'unchecked'
? 'bg-black outline-black '
: 'hover:outline-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800'} text-white transition-all rounded inline-block w-3.5 h-3.5 relative"
: 'hover:outline-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800'} text-white transition-all rounded-sm inline-block w-3.5 h-3.5 relative"
on:click={() => {
if (_state === 'unchecked') {
_state = 'checked';
src/lib/components/common/ConfirmDialog.svelte
+2 -2
View File
@@ -65,7 +65,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
bind:this={modalElement}
class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[99999999] overflow-hidden overscroll-contain"
class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-99999999 overflow-hidden overscroll-contain"
in:fade={{ duration: 10 }}
on:mousedown={() => {
show = false;
@@ -99,7 +99,7 @@
<textarea
bind:value={inputValue}
placeholder={inputPlaceholder ? inputPlaceholder : $i18n.t('Enter your message')}
class="w-full mt-2 rounded-lg px-4 py-2 text-sm dark:text-gray-300 dark:bg-gray-900 outline-none resize-none"
class="w-full mt-2 rounded-lg px-4 py-2 text-sm dark:text-gray-300 dark:bg-gray-900 outline-hidden resize-none"
rows="3"
required
/>
src/lib/components/common/DragGhost.svelte
+1 -1
View File
@@ -24,7 +24,7 @@
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;">
<div class=" absolute text-white z-99999" style="top: {y + 10}px; left: {x + 10}px;">
<slot></slot>
</div>
</div>
src/lib/components/common/Drawer.svelte
+1 -1
View File
@@ -60,7 +60,7 @@
bind:this={modalElement}
class="modal fixed right-0 {$isApp
? ' ml-[4.5rem] max-w-[calc(100%-4.5rem)]'
: ''} left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[999] overflow-hidden overscroll-contain"
: ''} left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-999 overflow-hidden overscroll-contain"
in:fly={{ y: 100, duration: 100 }}
on:mousedown={() => {
show = false;
src/lib/components/common/Folder.svelte
+1 -1
View File
@@ -112,7 +112,7 @@
<div bind:this={folderElement} class="relative {className}">
{#if draggedOver}
<div
class="absolute top-0 left-0 w-full h-full rounded-sm bg-gray-100/50 dark:bg-gray-700/20 bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
class="absolute top-0 left-0 w-full h-full rounded-xs bg-gray-100/50 dark:bg-gray-700/20 bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
></div>
{/if}
src/lib/components/common/Image.svelte
+1 -1
View File
@@ -5,7 +5,7 @@
export let src = '';
export let alt = '';
export let className = ' w-full outline-none focus:outline-none';
export let className = ' w-full outline-hidden focus:outline-hidden';
export let imageClassName = 'rounded-lg';
let _src = '';
src/lib/components/common/ImagePreview.svelte
+1 -1
View File
@@ -60,7 +60,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
bind:this={previewElement}
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-9999 overflow-hidden overscroll-contain"
>
<div class=" absolute left-0 w-full flex justify-between select-none">
<div>
src/lib/components/common/Modal.svelte
+1 -1
View File
@@ -67,7 +67,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
bind:this={modalElement}
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex justify-center z-[9999] overflow-y-auto overscroll-contain"
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex justify-center z-9999 overflow-y-auto overscroll-contain"
in:fade={{ duration: 10 }}
on:mousedown={() => {
show = false;
src/lib/components/common/Overlay.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
{#if show}
<div class="absolute w-full h-full flex">
<div
class="absolute rounded"
class="absolute rounded-sm"
style="inset: -10px; opacity: {opacity}; backdrop-filter: blur(5px);"
/>
src/lib/components/common/Pagination.svelte
+1 -1
View File
@@ -25,7 +25,7 @@
{:else}
<Pagination.Page
{page}
class="inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 text-sm font-medium hover:bg-dark-10 active:scale-98 disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent data-[selected]:bg-gray-50 data-[selected]:text-gray-700 data-[selected]:hover:bg-gray-100 dark:data-[selected]:bg-gray-850 dark:data-[selected]:text-gray-50 dark:data-[selected]:hover:bg-gray-800 transition"
class="inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 text-sm font-medium hover:bg-dark-10 active:scale-98 disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent data-selected:bg-gray-50 data-selected:text-gray-700 data-selected:hover:bg-gray-100 dark:data-selected:bg-gray-850 dark:data-selected:text-gray-50 dark:data-selected:hover:bg-gray-800 transition"
>
{page.value}
</Pagination.Page>
src/lib/components/common/Selector.svelte
+4 -4
View File
@@ -42,13 +42,13 @@
>
<Select.Trigger class="relative w-full" aria-label={placeholder}>
<Select.Value
class="inline-flex h-input px-0.5 w-full outline-none bg-transparent truncate text-lg font-semibold placeholder-gray-400 focus:outline-none"
class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate text-lg font-semibold placeholder-gray-400 focus:outline-hidden"
{placeholder}
/>
<ChevronDown className="absolute end-2 top-1/2 -translate-y-[45%] size-3.5" strokeWidth="2.5" />
</Select.Trigger>
<Select.Content
class="w-full rounded-lg bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/40 outline-none"
class="w-full rounded-lg bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/40 outline-hidden"
transition={flyAndScale}
sideOffset={4}
>
@@ -59,7 +59,7 @@
<input
bind:value={searchValue}
class="w-full text-sm bg-transparent outline-none"
class="w-full text-sm bg-transparent outline-hidden"
placeholder={searchPlaceholder}
/>
</div>
@@ -70,7 +70,7 @@
<div class="px-3 my-2 max-h-80 overflow-y-auto">
{#each filteredItems as item}
<Select.Item
class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer data-[highlighted]:bg-muted"
class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer data-highlighted:bg-muted"
value={item.value}
label={item.label}
>
src/lib/components/common/SensitiveInput.svelte
+1 -1
View File
@@ -5,7 +5,7 @@
export let readOnly = false;
export let outerClassName = 'flex flex-1 bg-transparent';
export let inputClassName =
'w-full text-sm py-0.5 placeholder:text-gray-300 dark:placeholder:text-gray-700 bg-transparent outline-none';
'w-full text-sm py-0.5 placeholder:text-gray-300 dark:placeholder:text-gray-700 bg-transparent outline-hidden';
export let showButtonClassName = 'pl-1.5 transition bg-transparent';
let show = false;
src/lib/components/common/Tags/TagInput.svelte
+1 -1
View File
@@ -27,7 +27,7 @@
<div class="flex items-center">
<input
bind:value={tagName}
class=" px-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[6.5rem]"
class=" px-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-hidden line-clamp-1 w-[6.5rem]"
placeholder={$i18n.t('Add a tag')}
list="tagOptions"
on:keydown={(event) => {
src/lib/components/common/Textarea.svelte
+1 -1
View File
@@ -6,7 +6,7 @@
export let rows = 1;
export let required = false;
export let className =
'w-full rounded-lg px-3 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none h-full';
'w-full rounded-lg px-3 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden h-full';
let textareaElement;
src/lib/components/common/Valves.svelte
+3 -3
View File
@@ -22,7 +22,7 @@
</div>
<button
class="p-1 px-3 text-xs flex rounded transition"
class="p-1 px-3 text-xs flex rounded-sm transition"
type="button"
on:click={() => {
valves[property] =
@@ -53,7 +53,7 @@
<div class=" flex-1">
{#if valvesSpec.properties[property]?.enum ?? null}
<select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none border border-gray-100 dark:border-gray-800"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-800"
bind:value={valves[property]}
on:change={() => {
dispatch('change');
@@ -82,7 +82,7 @@
</div>
{:else}
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none border border-gray-100 dark:border-gray-800"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-800"
type="text"
placeholder={valvesSpec.properties[property].title}
bind:value={valves[property]}