script editor

2023-10-06 13:15:19 +02:00
parent 13da56009e
commit e06cf1ae34
35 changed files with 776 additions and 68 deletions
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import Icon from "../Icon.svelte";
+
+  export let label: string;
+  export let add: boolean = false;
+  export let nopad: boolean = false;
+
+  const dispatch = createEventDispatcher();
+
+  function onAdd() {
+    dispatch("add");
+  }
+</script>
+
+<div class="block" class:nopad>
+  <div class="label">
+    <div class="text">{label}</div>
+    {#if add}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div class="add-button" on:click={onAdd}><Icon name="plus" /></div>
+    {/if}
+  </div>
+  <slot></slot>
+</div>
+
+<style lang="sass">
+  @import "$lib/css/colors.sass"
+
+  div.block
+    padding-left: 1ch
+    margin-left: 0.25ch
+    border-left: 2px solid $color-main2
+    margin-bottom: 0.5em
+
+    &.nopad
+      margin-left: 0
+
+  div.label
+    color: $color-main5
+    font-size: 0.666em
+    padding-top: 0.1em
+    padding-left: 0.3ch
+    display: flex
+    flex-direction: row
+
+
+    div.add-button
+      color: $color-green-dark
+      margin-top: 0.1em
+      margin-left: 0.5ch
+      font-size: 0.9em
+      line-height: 1em
+      cursor: pointer
+
+      &:hover
+        color: $color-green
+</style>