refactorings + basis of script editor.

2023-09-26 22:43:27 +02:00
parent 2188d489ea
commit 13da56009e
30 changed files with 52989 additions and 521 deletions
@@ -0,0 +1,72 @@
+<script lang="ts" context="module">
+	import { getContext, setContext } from "svelte";
+
+  export const ctxKey = {};
+
+  export function getBFormOptionEnabled() {
+    return getContext(ctxKey) as Readable<boolean>
+  }
+</script>
+
+<script lang="ts">
+	import Icon, { type IconName } from "../Icon.svelte";
+	import { writable, type Readable } from "svelte/store";
+
+  export let state: boolean | null = false;
+  export let color: string = "hsl(240, 8%, 56%)";
+  export let icon: IconName = "check";
+  export let unclickable: boolean = false;
+  export let red: boolean = false;
+
+  const enabled = writable(state === true);
+  $: $enabled = state === true;
+
+  setContext(ctxKey, { subscribe: enabled.subscribe });
+</script>
+
+<div class="bform-option" class:unclickable class:on={state === true} class:off={state === false} style="--color: {color}">
+  <Icon on:click block name={icon} />
+  <div class="bform-option-body">
+    <slot></slot>
+  </div>
+</div>
+
+<style lang="sass">
+  @import "$lib/css/colors.sass"
+
+  div.bform-option
+    box-shadow: 1px 1px 1px #000
+    display: flex
+    margin: 0.25em 0.25ch
+    min-height: 1.9rem
+    cursor: pointer
+    background: $color-main1
+
+    :global(.icon)
+      padding: 0.1em 0.5ch
+      padding-top: 0.45em
+      color: $color-main2
+
+    &.off
+      background-color: $color-main2
+      :global(.icon)
+        color: $color-main4
+
+    &.on
+      background-color: $color-main2
+      :global(.icon)
+        color: var(--color)
+
+    &.red
+      background-color: $color-main2-red
+      :global(.icon)
+        color: $color-main6-redder
+
+    &.unclickable
+      cursor: default
+
+    div.bform-option-body
+      display: flex
+      flex-direction: row
+      cursor: default
+</style>