mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hidden passwords

Browse Source
This commit is contained in:
kwaroran
2024-06-20 16:12:38 +09:00
parent 1de8eb0310
commit 4b77df6c19
2 changed files with 81 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/lib/UI/GUI/TextInput.svelte
View File

@@ -1,31 +1,67 @@
<input
class={"border border-darkborderc peer focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}
class:text-xl={size === 'xl'}
class:px-4={size === 'md' && padding}
class:py-2={size === 'md' && padding}
class:px-2={size === 'sm' && padding}
class:py-1={size === 'sm' && padding}
class:px-6={size === 'lg' || size === 'xl' && padding}
class:py-3={size === 'lg' || size === 'xl'&& padding}
<!-- Since svelte doesn't allow two-way binding for dynamic types, we use this -->
class:mb-4={marginBottom}
class:mt-4={marginTop}
class:w-full={fullwidth}
class:h-full={fullh}
class:text-textcolor2={disabled}
{autocomplete}
{placeholder}
id={id}
type="text"
bind:value
disabled={disabled}
on:input={onInput}
/>
{#if hideText}
<input
class={"border border-darkborderc peer focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}
class:text-xl={size === 'xl'}
class:px-4={size === 'md' && padding}
class:py-2={size === 'md' && padding}
class:px-2={size === 'sm' && padding}
class:py-1={size === 'sm' && padding}
class:px-6={size === 'lg' || size === 'xl' && padding}
class:py-3={size === 'lg' || size === 'xl'&& padding}
class:mb-4={marginBottom}
class:mt-4={marginTop}
class:w-full={fullwidth}
class:h-full={fullh}
class:text-textcolor2={disabled}
{autocomplete}
{placeholder}
id={id}
type="password"
bind:value
disabled={disabled}
on:input={onInput}
/>
{:else}
<input
class={"border border-darkborderc peer focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}
class:text-xl={size === 'xl'}
class:px-4={size === 'md' && padding}
class:py-2={size === 'md' && padding}
class:px-2={size === 'sm' && padding}
class:py-1={size === 'sm' && padding}
class:px-6={size === 'lg' || size === 'xl' && padding}
class:py-3={size === 'lg' || size === 'xl'&& padding}
class:mb-4={marginBottom}
class:mt-4={marginTop}
class:w-full={fullwidth}
class:h-full={fullh}
class:text-textcolor2={disabled}
{autocomplete}
{placeholder}
id={id}
type="text"
bind:value
disabled={disabled}
on:input={onInput}
/>
{/if}
<script lang="ts">
export let size: 'sm'|'md'|'lg'|'xl' = 'md'
@@ -41,4 +77,11 @@
export let fullh = false
export let className = ''
export let disabled = false
</script>
export let hideText = false
</script>
<style>
.hide-text:not(:focus):not(:hover) {
text-indent: -9999px;
}
</style>