@the_dissidents/svelte-ui 0.0.1

package/README.md

@@ -0,0 +1,130 @@
+# Svelte UI components by @the-dissidents
+
+## Features
+
+All controls are consistently styled using a set of configurable SASS parameters.
+
+Styled native controls:
+
+- `<button>`
+- `<input>` type=`text|number|checkbox|radio`
+- `<textarea>`
+- `<select>` (single-selection only)
+- `<ol role=listbox>` (displays as a listbox)
+
+Components:
+
+- `<TabView>` and `<TabPage>`
+- `<ListView>` (with configurable columns)
+- `<OrderableList>` (each row has a grab handle)
+- `<Colorpicker>` (uses the tree-shakable API of `colorjs.io`)
+- `<Resizer>`
+- `<Collapsible>`
+- `<NumberInput>` (a wrapper on `<input type=number>`)
+- `<Popup>` (generic base component)
+- `<Tooltip>` (a specialized `<Popup>`)
+- `<Banner>`
+- An overlay menu with an imperative API: `await overlayMenu(...)`
+
+## Usage
+
+1. Install the library.
+
+    ```sh
+    pnpm add @the_dissidents/svelte-ui
+    ```
+
+2. Configure the main stylesheet. You must enable preprocessing of SASS/SCSS files, and you need to `@use` the main stylesheet in somewhere that has global scope (e.g. in a `<style lang='scss' global>` block or in a stylesheet `import`ed in your entrance point's JS/TS script):
+
+    ```scss
+    // The author cannot find a reliable method to resolve package paths in
+    // SASS/SCSS except specifying the whole relative path to it in node_modules
+    @use "../node_modules/@the_dissidents/svelte-ui/dist/main";
+
+    // Uncomment this line to access the uchu palette which is used in the
+    // default values:
+    // @use "../node_modules/@the_dissidents/svelte-ui/dist/uchu";
+
+    @include main.configure(
+      // $ui-font-family:   system-ui,
+      // $mono-font-family: monospace,
+      // $input-font-size:  0.8rem,
+      // $text-font-size:   0.85rem,
+
+      // $page-background-light:   #fafafa,
+      // $page-background-medium:  uchu.$yin-2,
+      // $page-background-dark:    uchu.$yin-9,
+
+      // $text-light:      uchu.$yin,
+      // $text-dark:       uchu.$yang,
+      // $h5-text-light:   uchu.$yin-6,
+      // $h5-text-dark:    uchu.$yin-3,
+
+      // $disabled-text-light:   uchu.$gray-9,
+      // $disabled-text-dark:    uchu.$gray-9,
+      // $disabled-back-light:   uchu.$gray-1,
+      // $disabled-back-dark:    uchu.$yin-7,
+
+      // $box-border-light:      uchu.$gray-4,
+      // $box-border-dark:       uchu.$yin-8,
+      // $box-back-light:        white,
+      // $box-back-dark:         uchu.$yin-8,
+
+      // $small-border-light:    uchu.$gray-4,
+      // $small-border-dark:     uchu.$yin-7,
+
+      // $button-back-light:     white,
+      // $button-back-dark:      uchu.$yin-7,
+      // $button-disabled-light: uchu.$gray-1,
+      // $button-disabled-dark:  uchu.$yin-7,
+
+      // $accent1-back-light:    uchu.$red-1,
+      // $accent1-back-dark:     Teal,
+      // $accent1-border-light:  uchu.$red-2,
+      // $accent1-border-dark:   LightSeaGreen,
+
+      // $accent2-back-light:    uchu.$pink-7,
+      // $accent2-back-dark:     uchu.$blue-4,
+      // $accent2-border-light:  uchu.$pink-8,
+      // $accent2-border-dark:   uchu.$blue-8,
+
+      // $slider-track-light:    uchu.$yin-1,
+      // $slider-track-dark:     uchu.$yin-8,
+
+      // $header-back-light:     uchu.$gray-1,
+      // $header-back-dark:      uchu.$yin-8,
+      // $header-border-light:   none,
+      // $header-border-dark:    uchu.$yin-9,
+
+      // $separator-light:       uchu.$gray-4,
+      // $separator-dark:        uchu.$yin-7,
+      // $separator-minor-light: uchu.$gray-2,
+      // $separator-minor-dark:  uchu.$yin-7,
+
+      // $shadow-light:  rgba(128, 128, 128, 0.5),
+      // $shadow-dark:   rgba(128, 128, 128, 0.5),
+
+      // $tab-accent-light: uchu.$blue-4,
+      // $tab-accent-dark:  slategray,
+
+      // $list-header-light:    uchu.$gray-1,
+      // $list-header-dark:     uchu.$yin-8,
+      // $list-border-light:    uchu.$gray-4,
+      // $list-border-dark:     uchu.$yin-8,
+      // $list-selection-light:  uchu.$red-1,
+      // $list-selection-dark:  LightSeaGreen,
+
+      // $border-radius-large: 3px,
+      // $border-radius-small: 2px,
+    );
+    ```
+
+    In the template above, commented lines contain default values for the parameters. Uncomment and modify to override.
+
+    It is important to know that `@include`ing `main.configure` is mandatory to get the library working. You should include this call even if you don't override any of the parameters.
+
+3. Now you can use the styled native controls and import the Svelte components as usual:
+
+    ```typescript
+    import { TabView, TabPage, Resizer } from '@the_dissidents/svelte-ui';
+    ```

package/dist/Banner.svelte

@@ -0,0 +1,145 @@
+<script lang="ts" module>"use strict";
+const dialogs = new SvelteMap();
+const setChanged = new EventHost();
+</script>
+
+<script lang="ts">import { Debug } from "./Debug.js";
+import { EventHost } from "./EventHost.js";
+import { XIcon } from "@lucide/svelte";
+import { onDestroy, untrack } from "svelte";
+import { SvelteMap } from "svelte/reactivity";
+let dialog = $state();
+let closed = false;
+let bottomMargin = $state('2em');
+let transform = $state('translateX(200%)');
+let id = 0;
+let me = {};
+onDestroy(() => EventHost.unbind(me));
+setChanged.bind(me, () => {
+    const diags = [...dialogs.entries()].filter((x) => x[0] < id);
+    const sum = diags.reduce((a, b) => a + b[1].offsetHeight, 0);
+    const result = `calc(${sum}px + ${diags.length + 2}em)`;
+    bottomMargin = result;
+});
+let { onSubmit, open = $bindable(), style = 'normal', buttons = [], text } = $props();
+$effect(() => {
+    if (open) {
+        untrack(() => {
+            Debug.assert(dialog !== undefined);
+            id = dialogs.size;
+            closed = false;
+            dialogs.set(id, dialog);
+            setChanged.dispatch();
+            transform = 'none';
+            dialog.show();
+        });
+    }
+});
+</script>
+
+<dialog
+  bind:this={dialog}
+  {open}
+  class={[style]}
+  style:bottom={bottomMargin}
+  style:transform={transform}
+  onclose={() => {
+    if (!closed) onSubmit?.('');
+    dialogs.delete(id);
+    setChanged.dispatch();
+    transform = 'translateX(200%)';
+    open = false;
+  }}
+>
+<form class='vlayout' method="dialog">
+  <p>{text}</p>
+  {#if buttons?.length}
+    <div class="buttons">
+    {#each buttons as btn (btn)}
+      <button type="submit" class="noborder"
+        disabled={typeof btn.disabled == 'function'
+          ? btn.disabled()
+          : (btn.disabled ?? false)}
+        onclick={() => {closed = true; onSubmit?.(btn.name)}}
+      >
+        {btn.localizedName()}
+      </button>
+    {/each}
+    </div>
+  {:else}
+    <button type="submit" class="close noborder" onclick={() => {closed = true; onSubmit?.('')}}>
+      <XIcon />
+    </button>
+  {/if}
+</form>
+</dialog>
+
+<style>/* https://github.com/NeverCease/uchu/blob/primary/css/color_expanded.css */
+/*** gray ***/
+/*** red ***/
+/*** pink ***/
+/*** purple ***/
+/*** blue ***/
+/*** green ***/
+/*** yellow ***/
+/*** orange ***/
+/*** general ***/
+@media (prefers-color-scheme: light) {
+  dialog {
+    box-shadow: 2px 4px 10px gray;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  dialog {
+    box-shadow: 2px 4px 10px black;
+    background-color: oklch(52.79% 0.005 271.32deg);
+    color: oklch(99.4% 0 0deg);
+  }
+}
+dialog {
+  position: absolute;
+  margin-right: 2em;
+  padding: 1.2em 1.7em;
+  border-radius: 0.3em;
+  border: none;
+  z-index: 100;
+  transition: transform 0.15s ease-in, bottom 0.1s ease-in, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
+}
+
+p {
+  margin: 0;
+}
+
+.error p {
+  font-weight: bold;
+}
+
+.buttons {
+  text-align: right;
+  transform: translate(0.5em, 0.5em);
+}
+
+button {
+  box-shadow: none;
+  text-transform: uppercase;
+  padding: 0.5em 0.8em;
+  font-size: 90%;
+}
+
+.error {
+  background-color: oklch(62.73% 0.209 12.37deg);
+  color: oklch(99.4% 0 0deg);
+}
+.error button {
+  color: oklch(99.4% 0 0deg);
+}
+.error button:hover {
+  background-color: oklch(69.86% 0.162 7.82deg) !important;
+}
+
+.close {
+  position: absolute;
+  right: 0.2em;
+  top: 0.2em;
+  padding: 0.3em;
+}</style>

package/dist/Banner.svelte.d.ts

@@ -0,0 +1,15 @@
+export type BannerButton = {
+    name: string;
+    localizedName: () => string;
+    disabled?: boolean | (() => boolean);
+};
+interface Props {
+    text: string;
+    open?: boolean;
+    style?: 'normal' | 'error';
+    buttons?: BannerButton[];
+    onSubmit?: (x: string) => void;
+}
+declare const Banner: import("svelte").Component<Props, {}, "open">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/Collapsible.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">import Tooltip from "./Tooltip.svelte";
+let { header = "", helpText = "", active = $bindable(false), showCheck = false, checked = $bindable(false), onActiveChanged, onCheckedChanged, children } = $props();
+</script>
+
+<button type="button" class="collapsible hlayout"
+  class:active class:checked
+  onclick={() => { active = !active; onActiveChanged?.(active) }}
+>
+  <span class='caret flexgrow'>{header}</span>
+
+  {#if helpText != ""}
+  <Tooltip position='left' text={helpText} />
+  {/if}
+
+  <span class='check' class:hidden={!showCheck}>
+    <input type='checkbox' bind:checked
+      onchange={() => onCheckedChanged?.(checked)}
+      onclick={(e) => e.stopPropagation()}/>
+  </span>
+</button>
+<div class='content' class:active={active}>
+  {@render children?.()}
+</div>
+
+<style>@charset "UTF-8";
+/* https://github.com/NeverCease/uchu/blob/primary/css/color_expanded.css */
+/*** gray ***/
+/*** red ***/
+/*** pink ***/
+/*** purple ***/
+/*** blue ***/
+/*** green ***/
+/*** yellow ***/
+/*** orange ***/
+/*** general ***/
+@media (prefers-color-scheme: light) {
+  button.collapsible {
+    background-color: var(--header-back-light);
+    outline: 1px solid var(--header-border-light);
+  }
+  button.checked {
+    background-color: oklch(88.98% 0.052 3.28deg) !important;
+  }
+  .content {
+    /* background-color: uchu.$gray-1; */
+    border-left: 1px solid oklch(88.28% 0.003 286.34deg);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  button.collapsible {
+    outline: 1px solid var(--header-border-dark);
+    background-color: var(--header-back-dark);
+  }
+  button.checked {
+    background-color: oklch(52.77% 0.138 145.41deg) !important;
+  }
+}
+.check {
+  display: inline-block;
+  text-align: right;
+}
+
+.hidden {
+  display: none;
+}
+
+button.collapsible {
+  margin-top: 5px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  box-shadow: none;
+}
+
+button.collapsible.active .caret::before {
+  transform: rotate(90deg);
+}
+
+.caret::before {
+  content: "▶";
+  display: inline-block;
+  margin-right: 6px;
+}
+
+.content {
+  padding: 2px 0 2px 4px;
+  border-radius: 2px;
+  /* transition: max-height 1s ease-out; */
+}
+
+.content:not(.active) {
+  display: none;
+}</style>

package/dist/Collapsible.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    header?: string;
+    helpText?: string;
+    active?: boolean;
+    showCheck?: boolean;
+    checked?: boolean;
+    onActiveChanged?: (v: boolean) => void;
+    onCheckedChanged?: (v: boolean) => void;
+    children?: Snippet;
+}
+declare const Collapsible: import("svelte").Component<Props, {}, "active" | "checked">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;