File size: 2,517 Bytes
0bd62e5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<script lang="ts">
export let height: number | string | undefined = undefined;
export let width: number | string | undefined = undefined;
export let elem_id = "";
export let elem_classes: string[] = [];
export let variant: "solid" | "dashed" | "none" = "solid";
export let border_mode: "base" | "focus" | "contrast" = "base";
export let padding = true;
export let type: "normal" | "fieldset" = "normal";
export let test_id: string | undefined = undefined;
export let explicit_call = false;
export let container = true;
export let visible = true;
export let allow_overflow = true;
export let scale: number | null = null;
export let min_width = 0;
let tag = type === "fieldset" ? "fieldset" : "div";
const get_dimension = (
dimension_value: string | number | undefined
): string | undefined => {
if (dimension_value === undefined) {
return undefined;
}
if (typeof dimension_value === "number") {
return dimension_value + "px";
} else if (typeof dimension_value === "string") {
return dimension_value;
}
};
</script>
<svelte:element
this={tag}
data-testid={test_id}
id={elem_id}
class:hidden={visible === false}
class="block {elem_classes.join(' ')}"
class:padded={padding}
class:border_focus={border_mode === "focus"}
class:border_contrast={border_mode === "contrast"}
class:hide-container={!explicit_call && !container}
style:height={get_dimension(height)}
style:width={typeof width === "number"
? `calc(min(${width}px, 100%))`
: get_dimension(width)}
style:border-style={variant}
style:overflow={allow_overflow ? "visible" : "hidden"}
style:flex-grow={scale}
style:min-width={`calc(min(${min_width}px, 100%))`}
style:border-width="var(--block-border-width)"
>
<slot />
</svelte:element>
<style>
.block {
position: relative;
margin: 0;
box-shadow: var(--block-shadow);
border-width: var(--block-border-width);
border-color: var(--block-border-color);
border-radius: var(--block-radius);
background: var(--block-background-fill);
width: 100%;
line-height: var(--line-sm);
}
.block.border_focus {
border-color: var(--color-accent);
}
.block.border_contrast {
border-color: var(--body-text-color);
}
.padded {
padding: var(--block-padding);
}
.hidden {
display: none;
}
.hide-container {
margin: 0;
box-shadow: none;
--block-border-width: 0;
background: transparent;
padding: 0;
overflow: visible;
}
</style>
|