elbe-ui 0.2.11 → 0.2.19

package/src/ui/components/spinner.tsx

@@ -0,0 +1,11 @@
+import { Icons } from "../..";
+
+export function Spinner({ padding = 2 }: { padding?: number }) {
+  return (
+    <div style={{ padding: `${padding}rem` }} class="centered">
+      <div class="rotate-box">
+        <Icons.LoaderCircle />
+      </div>
+    </div>
+  );
+}

package/src/ui/components/toggle_button.tsx

@@ -1,6 +1,7 @@
-import { applyProps, Icons, type ElbeProps } from "../..";
+import { Icons, applyProps } from "../..";
 import { _ElbeErr } from "../util/error_view";
 import type { ElbeChild } from "../util/util";
+import type { ElbeProps } from "./box";
 import { Card } from "./card";
 import { Column, FlexSpace } from "./flex";
 

package/src/ui/util/error_view.tsx

@@ -1,4 +1,4 @@
-import { CircleXIcon } from "lucide-react";
+import { Icons } from "../..";
 
 export function _ElbeErr(msg: string) {
   return (
@@ -6,7 +6,7 @@ export function _ElbeErr(msg: string) {
       class="row text-s gap-half"
       style="background: #ee0044; color: white; border-radius: 4px; text-align: left; padding: .5rem"
     >
-      <CircleXIcon />
+      <Icons.CircleX />
       <div class="column gap-none cross-stretch">
         <b class="text-s">elbe error</b>
         <span style="margin-top: -.125rem">{msg}</span>

package/src/ui/util/util.ts

@@ -1,4 +1,36 @@
 import type React from "preact/compat";
+import { showToast } from "./toast";
 
 export type ElbeChild = React.ReactNode;
 export type ElbeChildren = ElbeChild[] | ElbeChild;
+
+/**
+ * use the web share api if available, otherwise copy the data to the clipboard
+ * @param data the data you want to share
+ * @param toastMsg the message to show in the toast if the share api is not available
+ */
+export function share(
+  data: { title: string; text?: string; url: string },
+  toastMsg = "copied to clipboard. Share it with others."
+) {
+  const msg = `${data.title}\n${data.text ?? ""}\n\n${data.url}`;
+
+  if (navigator.share) {
+    navigator.share(data).catch(() => copyToClipboard(msg, toastMsg));
+  } else {
+    copyToClipboard(msg, toastMsg);
+  }
+}
+
+/**
+ * copy the text to the clipboard
+ * @param text the text to copy to the clipboard
+ * @param toastMsg the message to show in the toast
+ */
+export function copyToClipboard(
+  text: string,
+  toastMsg = "copied to clipboard"
+) {
+  navigator.clipboard.writeText(text);
+  if (toastMsg) showToast(toastMsg);
+}

package/style/components.scss

@@ -1,80 +1,47 @@
-#hide-site {
-  position: fixed;
-  left: 0px;
-  right: 0px;
-  top: 0px;
-  bottom: 0px;
-  background-color: white;
-  z-index: 99; /* Higher than anything else in the document */
-}
-
-.margin-none {
-  margin: 0;
-}
-
-.padded {
-  padding: 1rem;
-}
+// =============== MARKUP ===============
 
-.padding-none {
-  padding: 0rem;
-}
+i, .i {font-style: italic;}
+b, .b {font-weight: bold;}
+.u {text-decoration: underline;}
+.ni {font-style: normal;}
+.nb {font-weight: normal;}
+.nu {text-decoration: none;}
+.striked {text-decoration: line-through;}
+.code {font-family: monospace;}
 
-.padded_v {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
+// =============== SPACING ===============
 
-.padded_h {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
+.padded {padding: 1rem;}
+.padding-none {padding: 0rem;}
 
-.margined {
-  margin: 1rem;
-}
+.margined {margin: 1rem;}
+.margined-none {margin: 0rem;}
 
-.margined_v {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
+// =============== FLEX-Layouts ===============
 
-.margined_h {
-  margin-left: 1rem;
-  margin-right: 1rem;
+.flex {
+  display: flex;
+  flex-direction: column;
 }
 
-.box {
-  @extend .padded;
-
-  @extend .text-m;
-
-  @extend .primary;
-
-  &.primary {
-    @extend .primary;
-  }
-
-  &.secondary {
-    @extend .secondary;
-  }
-
-  &.inverse {
-    @extend .inverse;
+@for $i from 1 through 12 {
+  .flex-#{$i} {
+    @extend .flex;
+    flex: $i;
   }
 }
 
-.flex {
+.centered {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
-.card {
-  @extend .box;
-  border-width: 2px;
-  border-style: solid;
-  border-radius: $g-radius;
-  //overflow: hidden;
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
 }
 
 .row {
@@ -83,25 +50,7 @@
   align-items: center;
   gap: 1rem;
 
-  &.wrap {
-    flex-wrap: wrap;
-  }
-}
-
-.if-wide {
-  @media (max-width: 700px) {
-    & {
-      display: none;
-    }
-  }
-}
-
-.if-narrow {
-  @media (min-width: 700px) {
-    & {
-      display: none;
-    }
-  }
+  &.wrap {flex-wrap: wrap;}
 }
 
 .row-resp,
@@ -119,165 +68,108 @@
       align-items: stretch;
     }
 
-    &.row-resp-rev {
-      flex-direction: column-reverse;
-    }
+    &.row-resp-rev {flex-direction: column-reverse;}
   }
 }
 
-.column {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
-// ================ GAP ================
+.gap-none {gap: 0;}
+.gap-quarter {gap: 0.25rem;}
+.gap-half {gap: 0.5rem;}
+.gap {gap: 1rem;}
 
-.gap-none {
-  gap: 0;
+@for $i from 0 through 6 {
+  .gap-#{$i} {gap: #{$i}rem;}
 }
 
-.gap-quarter {
-  gap: 0.25rem;
+$cross_modes: (stretch,start,end,center);
+@each $name in $cross_modes {
+  .cross-#{$name} {align-items: $name;}
 }
 
-.gap-half {
-  gap: 0.5rem;
+$main_modes: (stretch,start,end,center,space-between);
+@each $name in $main_modes {
+  .main-#{$name} {justify-content: $name;}
 }
 
-.gap {
-  gap: 1rem;
-}
+// =============== conditionals ===============
 
-@for $i from 0 through 6 {
-  .gap-#{$i} {
-    gap: #{$i}rem;
+.if-wide {
+  @media (max-width: 700px) {
+    & {display: none;}
   }
 }
 
-$cross_modes: (stretch, start, end, center);
-
-@each $name in $cross_modes {
-  .cross-#{$name} {
-    align-items: $name;
+.if-narrow {
+  @media (min-width: 700px) {
+    & {display: none;}
   }
 }
 
-$main_modes: (stretch, start, end, center, space-between);
+// =============== element style ===============
 
-@each $name in $main_modes {
-  .main-#{$name} {
-    justify-content: $name;
-  }
-}
-
-.column.cross-stretch-fill {
-  align-items: stretch;
-  width: 100%;
-}
+.sharp {border-radius: 0;}
+.rounded {border-radius: $g-radius;}
+.round {border-radius: 50%;}
 
-@for $i from 1 through 12 {
-  .flex-#{$i} {
-    @extend .flex;
-    flex: $i;
-  }
-}
-
-.i {
-  font-style: italic;
-}
-b,
-.b {
-  font-weight: bold;
-}
+img.round,
+img.rounded {object-fit: cover;}
 
-.u {
-  text-decoration: underline;
-}
+.borderless {border: none;}
+.raised {box-shadow: 0 0.1rem 1rem #00000033;}
 
-.ni {
-  font-style: normal;
+.scrollbars-none {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {display: none;}
 }
 
-.nb {
-  font-weight: normal;
-}
+.pointer {cursor: pointer;}
 
-.nu {
-  text-decoration: none;
-}
+.text-centered {text-align: center;}
+.text-start {text-align: start;}
+.text-end {text-align: end;}
 
-.striked {
-  text-decoration: line-through;
-}
+body:has(dialog[open=""]) {overflow: hidden;}
 
-.code {
-  font-family: monospace;
-}
 
-.header {
-  @extend .box;
-  @extend .row;
-  width: 100%;
-  position: fixed;
-  left: 0;
-  top: 0;
-  display: flex;
-  border-width: 20px;
-  border-style: solid;
-  border-width: 0 0 2px 0;
-  //border-width: 0 0 2px 0;
-  background-color: transparent;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  z-index: 20;
-  // place border inside the element:
-  box-sizing: border-box;
-  height: 4rem;
-}
+// =============== animations ===============
 
-.centered {
+.rotate-box {
+  @extend .rotate;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.sharp {
-  border-radius: 0;
+.rotate {
+  animation: rotation 1.5s infinite linear;
 }
 
-.rounded {
-  border-radius: $g-radius;
+@keyframes rotation {
+  from {transform: rotate(0deg);}
+  to {transform: rotate(359deg);}
 }
 
-.round {
-  border-radius: 50%;
-}
+// =============== COMPONENTS ===============
 
-img.round,
-img.rounded {
-  object-fit: cover;
-}
+.box {
+  @extend .padded;
+  @extend .text-m;
+  @extend .primary;
 
-.base-limited {
-  @extend .box;
-  max-width: 700px;
-  width: 100%;
-  margin: 0 auto;
+  &.primary {@extend .primary;}
+  &.secondary {@extend .secondary;}
+  &.inverse {@extend .inverse;}
 }
 
-.scrollbars-none {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+.card {
+  @extend .box;
+  border-width: 2px;
+  border-style: solid;
+  border-radius: $g-radius;
+  //overflow: hidden;
 }
 
-.pointer {
-  cursor: pointer;
-}
 
 button {
   @extend .card;
@@ -327,17 +219,24 @@ button {
   }
 }
 
-input[type="text"],
-input[type="number"],
-input[type="password"],
-input[type="email"],
-input[type="date"],
-input[type="time"] {
+.icon {
+  aspect-ratio: 1;
+  border-radius: 25%;
+  object-fit: cover;
+}
+
+.toast {
   @extend .card;
-  padding: 0 0.75rem;
-  height: 3rem;
-  min-width: 12rem;
-  width: 100%;
+  @extend .inverse;
+  @extend .b;
+  @extend .raised;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 200;
+  left: 50%;
+  width: min(40rem, 90%);
+  transform: translateX(-50%);
 }
 
 select {
@@ -358,17 +257,6 @@ textarea {
   width: 100%;
 }
 
-.text-centered {
-  text-align: center;
-}
-
-.text-left {
-  text-align: left;
-}
-
-body:has(dialog[open=""]) {
-  overflow: hidden;
-}
 
 dialog {
   @extend .column;
@@ -406,32 +294,30 @@ dialog {
   }
 }
 
-.raised {
-  box-shadow: 0 0.1rem 1rem #00000033;
+.expandable {
+  max-height: 0px;
+  transition: max-height 0.25s ease-out;
+  overflow: hidden;
 }
 
-.icon {
-  aspect-ratio: 1;
-  border-radius: 25%;
-  object-fit: cover;
+.expandable:has(*) {
+  max-height: 500px;
+  transition: max-height 0.25s ease-in;
 }
 
-.toast {
-  @extend .card;
-  @extend .inverse;
-  @extend .b;
-  @extend .raised;
-  position: fixed;
-  bottom: 1rem;
-  right: 1rem;
-  z-index: 200;
-  left: 50%;
-  width: min(40rem, 90%);
-  transform: translateX(-50%);
-}
+// =============== INPUTS ===============
 
-.borderless {
-  border: none;
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="email"],
+input[type="date"],
+input[type="time"] {
+  @extend .card;
+  padding: 0 0.75rem;
+  height: 3rem;
+  min-width: 12rem;
+  width: 100%;
 }
 
 input[type="range"] {
@@ -441,28 +327,34 @@ input[type="range"] {
   cursor: pointer;
   width: 15rem;
 
-  &::-webkit-slider-runnable-track,
-  &::-moz-range-track {
+  &::-moz-range-track{
+    background-color: #707070;
+    border-radius: 100px;
+    border: none;
+    height: 0.5rem;
+  }
+
+  &::-webkit-slider-runnable-track
+  {
     @extend .secondary;
     border-radius: 100px;
     border: none;
     height: 0.5rem;
   }
 
-  &::-webkit-slider-thumb,
-  &::-moz-range-thumb {
+  &::-webkit-slider-thumb
+  {
     @extend .accent;
     border: none;
-    -webkit-appearance: none; /* Override default look */
+    -webkit-appearance: none; // Override default look
     appearance: none;
-    margin-top: -12px;
+    margin-top: -6px;
     border-radius: 100px;
     height: 1.2rem;
     width: 1.2rem;
   }
 }
 
-// ============ CHECKBOXES ============
 
 input[type="checkbox"] {
   -webkit-appearance: none;
@@ -518,34 +410,8 @@ input[type="checkbox"]:disabled {
   cursor: not-allowed;
 }
 
-.code {
-  @extend .card;
-  @extend .secondary;
-  padding: 0.4rem 0.5rem;
-  font-family: monospace;
-  white-space: pre-wrap;
-}
-
-.rotate-box {
-  @extend .rotate;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.rotate {
-  animation: rotation 1.5s infinite linear;
-}
-
-@keyframes rotation {
-  from {
-    transform: rotate(0deg);
-  }
+// =============== TOOLTIP ===============
 
-  to {
-    transform: rotate(359deg);
-  }
-}
 
 [data-tooltip]:hover:after {
   opacity: 1;
@@ -572,3 +438,13 @@ input[type="checkbox"]:disabled {
 [data-tooltip] {
   position: relative;
 }
+
+// =============== LAYOUT ===============
+
+
+.base-limited {
+  @extend .box;
+  max-width: 700px;
+  width: 100%;
+  margin: 0 auto;
+}