2020-01-31 05:22:19 +13:00
|
|
|
<script>
|
2020-06-03 08:31:29 +12:00
|
|
|
import { onMount } from "svelte"
|
2020-06-02 03:31:58 +12:00
|
|
|
import { buildStyle } from "../../helpers.js"
|
2020-02-03 22:50:30 +13:00
|
|
|
export let value = ""
|
2020-06-11 22:56:16 +12:00
|
|
|
export let name = ""
|
2020-05-31 05:48:20 +12:00
|
|
|
export let textAlign = "left"
|
|
|
|
export let width = "160px"
|
|
|
|
export let placeholder = ""
|
2020-06-03 01:01:25 +12:00
|
|
|
export let suffix = ""
|
|
|
|
export let onChange = val => {}
|
2020-06-03 08:31:29 +12:00
|
|
|
|
2020-06-02 03:31:58 +12:00
|
|
|
let centerPlaceholder = textAlign === "center"
|
2020-05-08 01:30:04 +12:00
|
|
|
|
2020-05-31 05:48:20 +12:00
|
|
|
let style = buildStyle({ width, textAlign })
|
2020-06-03 08:31:29 +12:00
|
|
|
|
2020-06-03 01:01:25 +12:00
|
|
|
function handleChange(val) {
|
|
|
|
value = val
|
2020-06-03 02:00:31 +12:00
|
|
|
let _value = value !== "auto" ? value + suffix : value
|
2020-06-03 02:00:24 +12:00
|
|
|
onChange(_value)
|
2020-06-03 01:01:25 +12:00
|
|
|
}
|
|
|
|
|
2020-06-03 08:31:29 +12:00
|
|
|
$: displayValue =
|
|
|
|
suffix && value && value.endsWith(suffix)
|
|
|
|
? value.replace(new RegExp(`${suffix}$`), "")
|
|
|
|
: value || ""
|
2020-01-31 05:22:19 +13:00
|
|
|
</script>
|
|
|
|
|
2020-06-03 08:31:29 +12:00
|
|
|
<input
|
2020-06-11 22:56:16 +12:00
|
|
|
{name}
|
2020-06-03 08:31:29 +12:00
|
|
|
class:centerPlaceholder
|
|
|
|
type="text"
|
|
|
|
value={displayValue}
|
|
|
|
{placeholder}
|
|
|
|
{style}
|
|
|
|
on:change={e => handleChange(e.target.value)} />
|
2020-02-03 22:50:30 +13:00
|
|
|
|
2020-01-31 05:22:19 +13:00
|
|
|
<style>
|
2020-06-02 03:31:58 +12:00
|
|
|
input {
|
2020-06-02 21:51:57 +12:00
|
|
|
/* width: 32px; */
|
2020-06-25 02:06:28 +12:00
|
|
|
height: 36px;
|
|
|
|
font-size: 14px;
|
|
|
|
font-weight: 400;
|
2020-06-24 08:29:18 +12:00
|
|
|
margin: 0px 0px 0px 2px;
|
2020-05-27 07:44:24 +12:00
|
|
|
color: var(--ink);
|
2020-06-25 02:06:28 +12:00
|
|
|
padding: 0px 8px;
|
|
|
|
font-family: inter;
|
2020-05-27 07:44:24 +12:00
|
|
|
width: 164px;
|
2020-01-31 05:22:19 +13:00
|
|
|
box-sizing: border-box;
|
2020-06-25 02:06:28 +12:00
|
|
|
background-color: var(--grey-2);
|
2020-06-24 08:29:18 +12:00
|
|
|
border-radius: 4px;
|
2020-06-25 02:06:28 +12:00
|
|
|
border: 1px solid var(--grey-2);
|
2020-05-31 05:48:20 +12:00
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
|
2020-06-03 08:31:29 +12:00
|
|
|
input::placeholder {
|
2020-06-02 03:31:58 +12:00
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
.centerPlaceholder::placeholder {
|
2020-05-31 05:48:20 +12:00
|
|
|
text-align: center;
|
2020-01-31 05:22:19 +13:00
|
|
|
}
|
|
|
|
</style>
|