moar stuff.

2023-09-23 14:04:13 +02:00
parent c7d3a3200e
commit 2188d489ea
48 changed files with 1684 additions and 91 deletions
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+  import Icon, { type IconName } from "./Icon.svelte";
+
+  export let tabIndex: number | undefined | null = void(0);
+  export let checked = false;
+  export let centered = false;
+  export let disabled = false;
+  export let noLabel = false;
+  export let noBorder = false;
+  export let inline = false;
+  export let icon: IconName = "check";
+  export let label = "(Missing label property)";
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick() {
+    if (!disabled) {
+      checked = !checked;
+      dispatch('check', { checked });
+    }
+  }
+
+  function handlePress(e: KeyboardEvent) {
+    if (!disabled && ["enter", " ", " ", "c"].includes(e.key?.toLowerCase())) {
+      checked = !checked;
+      dispatch('check', { checked });
+    }
+  }
+</script>
+
+<div 
+  class="checkbox" 
+  class:centered 
+  class:noLabel
+  class:inline
+  role="checkbox" 
+  aria-checked={checked} 
+  aria-disabled={disabled} 
+  tabindex={tabIndex} 
+  on:keypress={handlePress} 
+  on:click={handleClick}
+>
+  <div class="box" class:noBorder class:disabled class:checked class:unchecked={!checked}>
+    <Icon name={icon} />
+  </div>
+  {#if !noLabel}
+    <div class="label">{label}</div>
+  {/if}
+</div>
+
+<style lang="sass">
+  @import "$lib/css/colors"
+
+  div.checkbox
+    display: flex
+    flex-direction: row
+    flex-shrink: 0
+    margin-top: 0.5em
+    margin-bottom: 1em
+    -webkit-user-select: none
+    -moz-user-select: none
+    user-select: none
+    transition: 250ms
+    padding: 0.1em
+    font-size: 0.9em
+  
+    &.noLabel
+      display: block
+      margin-top: 0.35em
+      margin-bottom: 0
+      font-size: 0.75em
+
+  div.checkbox.centered
+    margin: auto
+
+  :global(div.checkbox + div.checkbox)
+    margin-top: -0.75em
+
+  div.checkbox.inline
+    margin-top: 0.25rem
+    margin-bottom: 0.25rem
+    margin-right: 1rch
+
+  div.box
+    cursor: pointer
+    border: 0.5px solid
+    padding: 0.05em 0.3ch
+    padding-top: 0.2em
+    line-height: 1
+    background-color: $color-mainhalf
+    color: $color-mainhalf
+    border-color: $color-main5
+    font-size: 0.9em
+    &.noBorder
+      color: $color-main2
+    &.checked
+      color: $color-main9
+      background-color: $color-main4
+    &.disabled
+      color: $color-main1
+      &.checked
+        color: $color-main5
+      background-color: $color-main1
+    &.noBorder
+      border: none
+      background: none
+
+  div.label
+    margin: auto 0
+    margin-left: 1ch
+
+    -webkit-user-select: none
+    -moz-user-select: none
+    user-select: none
+</style>