Migrate from DaisyUI to SkeletonUI
This commit is contained in:
@ -1,20 +1,24 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
id = "",
|
||||
name = "",
|
||||
formaction = "",
|
||||
label,
|
||||
children,
|
||||
color,
|
||||
disabled = false,
|
||||
submit = false,
|
||||
href = undefined,
|
||||
fullwidth = false,
|
||||
...restProps
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
|
||||
<button
|
||||
{id}
|
||||
{name}
|
||||
{formaction}
|
||||
{disabled}
|
||||
class="btn btn-{color}"
|
||||
style="--tw-bg-opacity: 1">{label}</button
|
||||
>
|
||||
{#if href}
|
||||
<a {href} class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
|
||||
{@render children()}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
type={submit ? "submit" : "button"}
|
||||
class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}"
|
||||
{...restProps}
|
||||
>
|
||||
{@render children()}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
7
src/lib/components/Card.svelte
Normal file
7
src/lib/components/Card.svelte
Normal file
@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
let { children, fullwidth = false, ...restProps } = $props();
|
||||
</script>
|
||||
|
||||
<div class="card bg-white p-2 shadow {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
|
||||
{@render children()}
|
||||
</div>
|
||||
@ -1,35 +0,0 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
id,
|
||||
name,
|
||||
label,
|
||||
accept = "*",
|
||||
onchange = undefined,
|
||||
disabled = false,
|
||||
required = false,
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if disabled}
|
||||
<!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
|
||||
<label
|
||||
for={id}
|
||||
class="btn btn-disabled mt-2 w-full"
|
||||
style="--tw-bg-opacity: 1">{label}</label
|
||||
>
|
||||
{:else}
|
||||
<label for={id} class="btn btn-ghost input-bordered mt-2 w-full"
|
||||
>{label}</label
|
||||
>
|
||||
{/if}
|
||||
<input
|
||||
{id}
|
||||
{name}
|
||||
class="file-input file-input-bordered file-input-ghost"
|
||||
type="file"
|
||||
hidden
|
||||
{disabled}
|
||||
{required}
|
||||
{onchange}
|
||||
{accept}
|
||||
/>
|
||||
@ -1,29 +1,10 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
id,
|
||||
name,
|
||||
label,
|
||||
placeholder = "",
|
||||
type = "text",
|
||||
value = "",
|
||||
disabled = false,
|
||||
required = false,
|
||||
} = $props();
|
||||
let { children, type = "text", ...restProps } = $props();
|
||||
</script>
|
||||
|
||||
<label
|
||||
for={id}
|
||||
class="input input-bordered mt-2 flex !cursor-default select-none items-center gap-2"
|
||||
>
|
||||
{label}
|
||||
<input
|
||||
{id}
|
||||
{name}
|
||||
{type}
|
||||
class={disabled ? "pointer-events-none grow !cursor-default" : "grow"}
|
||||
{disabled}
|
||||
{required}
|
||||
{placeholder}
|
||||
{value}
|
||||
/>
|
||||
</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
|
||||
<div class="input-group-shim select-none text-neutral-900">
|
||||
{@render children()}
|
||||
</div>
|
||||
<input {type} {...restProps} />
|
||||
</div>
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
<script lang="ts">
|
||||
let { id, name, disabled = false } = $props();
|
||||
</script>
|
||||
|
||||
<label for={id} class="input input-bordered mt-2 flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
{id}
|
||||
{name}
|
||||
type="password"
|
||||
class="grow"
|
||||
{disabled}
|
||||
required
|
||||
placeholder="Password"
|
||||
/>
|
||||
</label>
|
||||
@ -1,26 +0,0 @@
|
||||
<script lang="ts">
|
||||
let { id, name, value = "", disabled = false } = $props();
|
||||
</script>
|
||||
|
||||
<label for={id} class="input input-bordered mt-2 flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path
|
||||
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
{id}
|
||||
{name}
|
||||
type="text"
|
||||
class="grow"
|
||||
{value}
|
||||
{disabled}
|
||||
required
|
||||
placeholder="Username"
|
||||
/>
|
||||
</label>
|
||||
@ -1,7 +1,9 @@
|
||||
import FileInput from "./FileInput.svelte";
|
||||
import Input from "./Input.svelte";
|
||||
import Password from "./Password.svelte";
|
||||
import Username from "./Username.svelte";
|
||||
import Button from "./Button.svelte";
|
||||
import Card from "./Card.svelte";
|
||||
|
||||
export { FileInput, Input, Username, Password, Button };
|
||||
import MenuDrawerIcon from "./svg/MenuDrawerIcon.svelte";
|
||||
import UserIcon from "./svg/UserIcon.svelte";
|
||||
import PasswordIcon from "./svg/PasswordIcon.svelte";
|
||||
|
||||
export { Input, Button, Card, MenuDrawerIcon, UserIcon, PasswordIcon };
|
||||
|
||||
14
src/lib/components/svg/MenuDrawerIcon.svelte
Normal file
14
src/lib/components/svg/MenuDrawerIcon.svelte
Normal file
@ -0,0 +1,14 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mt-1 h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h8m-8 6h16"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 254 B |
12
src/lib/components/svg/PasswordIcon.svelte
Normal file
12
src/lib/components/svg/PasswordIcon.svelte
Normal file
@ -0,0 +1,12 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 424 B |
10
src/lib/components/svg/UserIcon.svelte
Normal file
10
src/lib/components/svg/UserIcon.svelte
Normal file
@ -0,0 +1,10 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path
|
||||
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 279 B |
@ -1,11 +1,37 @@
|
||||
export const get_image_preview_event_handler = (id: string) => {
|
||||
const handler = (event) => {
|
||||
const target = event.target;
|
||||
const files = target.files;
|
||||
/**
|
||||
* Use this on <Avatar> components.
|
||||
*/
|
||||
export const get_avatar_preview_event_handler = (id: string) => {
|
||||
const handler = (event: Event) => {
|
||||
const target: HTMLInputElement = event.target as HTMLInputElement;
|
||||
const files: FileList | null = target.files;
|
||||
|
||||
if (files.length > 0) {
|
||||
const src = URL.createObjectURL(files[0]);
|
||||
const preview = document.getElementById(id) as HTMLImageElement;
|
||||
if (files && files.length > 0) {
|
||||
const src: string = URL.createObjectURL(files[0]);
|
||||
const preview: HTMLImageElement = document.querySelector(
|
||||
`#${id} > img:first-of-type`,
|
||||
) as HTMLImageElement;
|
||||
if (preview) {
|
||||
preview.src = src;
|
||||
preview.hidden = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return handler;
|
||||
};
|
||||
|
||||
/**
|
||||
* Use this on raw <img> elements.
|
||||
*/
|
||||
export const get_image_preview_event_handler = (id: string) => {
|
||||
const handler = (event: Event) => {
|
||||
const target: HTMLInputElement = event.target as HTMLInputElement;
|
||||
const files: FileList | null = target.files;
|
||||
|
||||
if (files && files.length > 0) {
|
||||
const src: string = URL.createObjectURL(files[0]);
|
||||
const preview: HTMLImageElement = document.getElementById(id) as HTMLImageElement;
|
||||
if (preview) {
|
||||
preview.src = src;
|
||||
preview.hidden = false;
|
||||
|
||||
Reference in New Issue
Block a user