CLASSROOMIO-T-80: Replace sapper with sveltekit

2023-08-02 19:35:27 +01:00
parent 8ffdf319b3
commit 7dfbb05451
320 changed files with 5207 additions and 18330 deletions
@@ -0,0 +1,69 @@
+<script>
+  export let options = [];
+  export let classNames = 'relative';
+  export let isIcon = false;
+
+  let open = false;
+
+  const notIconClass =
+    'border rounded-lg border-grey p-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200';
+
+  function isOptionLast(index) {
+    return index === options.length - 1;
+  }
+
+  function onClick(option) {
+    return () => {
+      open = !open;
+      if (option && option.onClick) {
+        option.onClick();
+      }
+    };
+  }
+
+  function onBlur() {
+    // In case an option was clicked, let's wait for the on:click of that button before we close
+    setTimeout(() => (open = false), 100);
+  }
+</script>
+
+<div class="{classNames} z-10 {!options.length && 'hidden'}">
+  <button
+    class="flex flex-row items-center {!isIcon && notIconClass}"
+    on:click={(e) => {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      open = !open;
+    }}
+    on:blur={onBlur}
+  >
+    <slot />
+  </button>
+
+  {#if open}
+    <div
+      class="dropdown whitespace-nowrap bg-white dark:bg-gray-800 border border-grey rounded-lg mt-2 py-3 absolute"
+    >
+      {#each options as option, index}
+        <button
+          class="block px-4 py-3 text-left hover:bg-blue-100 {!isOptionLast(
+            index
+          ) && 'border-b'} w-full dark:text-white dark:hover:text-black"
+          on:click={onClick(option)}
+        >
+          {option.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .dropdown {
+    box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%),
+      0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
+    right: 0px;
+    top: 20px;
+    left: unset;
+  }
+</style>