You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.5 KiB
103 lines
2.5 KiB
<script lang="ts">
|
|
import { getBFormOptionEnabled } from "./BFormOption.svelte";
|
|
|
|
export let label: string;
|
|
export let type: "number" | "text" | "select";
|
|
export let value: number | string;
|
|
export let wide: boolean = false;
|
|
export let narrow: boolean = false;
|
|
export let narrower: boolean = false;
|
|
export let narrowest: boolean = false;
|
|
export let min: number = 0;
|
|
export let max: number = 100;
|
|
export let step: number = 1;
|
|
export let options: {value: string | number, label: string}[] = [];
|
|
|
|
const enabled = getBFormOptionEnabled();
|
|
</script>
|
|
|
|
{#if $enabled}
|
|
<div class="bform-parameter" class:wide class:narrow class:narrower class:narrowest>
|
|
<label for="input_{label}">{label}</label>
|
|
{#if type === "number"}
|
|
<input class="custom" on:blur on:focus type="number" bind:value={value} {min} {max} {step} />
|
|
{:else if type === "text"}
|
|
<input class="custom" on:blur on:focus type="text" bind:value={value} />
|
|
{:else if type === "select"}
|
|
<select class="custom" bind:value={value}>
|
|
{#each options as opt (opt.value)}
|
|
<option value={opt.value}>{opt.label}</option>
|
|
{/each}
|
|
</select>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="sass">
|
|
@import "$lib/css/colors.sass"
|
|
|
|
div.bform-parameter
|
|
display: flex
|
|
flex-direction: column
|
|
background: $color-main1
|
|
height: 100%
|
|
|
|
> label
|
|
font-size: 0.5em
|
|
color: $color-main5
|
|
text-align: center
|
|
margin: 0
|
|
line-height: 1em
|
|
margin-top: 0.15rem !important
|
|
padding-top: 0
|
|
margin-bottom: -0em
|
|
width: 10rem
|
|
|
|
> input, > select
|
|
width: 10rem
|
|
font-size: 0.9rem
|
|
padding-left: 0
|
|
background: none
|
|
outline: none
|
|
border: none
|
|
text-align: center
|
|
font-size: 1rem
|
|
color: $color-main9
|
|
|
|
> option
|
|
background: $color-main1
|
|
|
|
&::-webkit-inner-spin-button
|
|
-webkit-appearance: none
|
|
margin: 0
|
|
|
|
-webkit-appearance: none
|
|
-moz-appearance: none
|
|
moz-appearance: none
|
|
appearance: none
|
|
|
|
&:focus
|
|
color: $color-main13
|
|
|
|
> select
|
|
margin-top: 0.08rem
|
|
|
|
&.wide
|
|
> input, > label, > select
|
|
text-align: left
|
|
width: 20rem
|
|
> label
|
|
padding-left: 0.2rch
|
|
|
|
&.narrow
|
|
> input, > label, > select
|
|
width: calc(6rem + 0.22ch)
|
|
|
|
&.narrower
|
|
> input, > label, > select
|
|
width: 3rem
|
|
|
|
&.narrowest
|
|
> input, > label, > select
|
|
width: calc(2rem - 0.11ch)
|
|
</style>
|