🎨 format
This commit is contained in:
@@ -1,19 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { MdiEyeOffOutline, MdiEyeOutline } from "../icons";
|
||||
import { MdiEyeOffOutline, MdiEyeOutline } from '../icons'
|
||||
|
||||
interface Props {
|
||||
show?: boolean;
|
||||
value?: string;
|
||||
id?: string;
|
||||
show?: boolean
|
||||
value?: string
|
||||
id?: string
|
||||
}
|
||||
|
||||
let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props();
|
||||
|
||||
let type = $derived(show ? 'text' : 'password');
|
||||
let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props()
|
||||
|
||||
const handleInput = (e: any) => value = e.target.value
|
||||
let type = $derived(show ? 'text' : 'password')
|
||||
|
||||
const togglePassword = () => show = !show
|
||||
const handleInput = (e: any) => (value = e.target.value)
|
||||
|
||||
const togglePassword = () => (show = !show)
|
||||
</script>
|
||||
|
||||
<label class="input input-bordered flex items-center gap-2">
|
||||
@@ -23,4 +23,4 @@
|
||||
<MdiEyeOffOutline class="text-base-content/50 h-6 {show ? 'block' : 'hidden'}" />
|
||||
<MdiEyeOutline class="text-base-content/50 h-6 {show ? 'hidden' : 'block'}" />
|
||||
</div>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
@@ -1,34 +1,35 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
value?: any
|
||||
oninput?: any
|
||||
}
|
||||
interface Props {
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
value?: any
|
||||
oninput?: any
|
||||
}
|
||||
|
||||
let {
|
||||
min = 0,
|
||||
max = 100,
|
||||
step = 1,
|
||||
value = $bindable((max - min) / 2),
|
||||
...rest
|
||||
}: Props = $props()
|
||||
let {
|
||||
min = 0,
|
||||
max = 100,
|
||||
step = 1,
|
||||
value = $bindable((max - min) / 2),
|
||||
...rest
|
||||
}: Props = $props()
|
||||
</script>
|
||||
|
||||
<input
|
||||
type="range"
|
||||
style="writing-mode: vertical-lr; direction: rtl"
|
||||
class="cursor-pointer"
|
||||
{min}
|
||||
{max}
|
||||
{step}
|
||||
bind:value
|
||||
{...rest} />
|
||||
type="range"
|
||||
style="writing-mode: vertical-lr; direction: rtl"
|
||||
class="cursor-pointer"
|
||||
{min}
|
||||
{max}
|
||||
{step}
|
||||
bind:value
|
||||
{...rest}
|
||||
/>
|
||||
|
||||
<style>
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
background: oklch(var(--p) / 1);
|
||||
border-radius: var(--rounded-box, 1rem);
|
||||
}
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
background: oklch(var(--p) / 1);
|
||||
border-radius: var(--rounded-box, 1rem);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export { default as PasswordInput } from './InputPassword.svelte';
|
||||
export { default as VerticalSlider } from './VerticalSlider.svelte';
|
||||
export { default as PasswordInput } from './InputPassword.svelte'
|
||||
export { default as VerticalSlider } from './VerticalSlider.svelte'
|
||||
|
||||
Reference in New Issue
Block a user