@sveltia/ui 0.1.4 → 0.2.0

package/package/components/helpers/popup.js

@@ -1,146 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable no-nested-ternary */
-
-import { get, writable } from 'svelte/store';
-import { getRandomId } from './util';
-
-/**
- * @typedef {('top-left'|'top-right'|'right-top'|'right-bottom'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom')} PopupPosition
- */
-
-class Popup {
-  open = writable(false);
-
-  style = writable({ inset: undefined, zIndex: undefined, width: undefined, height: undefined });
-
-  observer = new IntersectionObserver((entries) => {
-    entries.forEach(({ intersectionRect, rootBounds }) => {
-      if (!intersectionRect || !rootBounds) {
-        return;
-      }
-
-      const contentHeight = this.popupElement.querySelector('.content').scrollHeight;
-      const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
-      let { position } = this;
-
-      // @todo Handle more overflow cases
-      if (contentHeight > bottomMargin) {
-        if (position.startsWith('bottom-')) {
-          position = position.replace('bottom-', 'top-');
-        }
-      }
-
-      const top = position.startsWith('bottom-')
-        ? `${Math.round(intersectionRect.bottom)}px`
-        : position.endsWith('-top')
-        ? `${Math.round(intersectionRect.top)}px`
-        : 'auto';
-
-      const right = position.startsWith('left-')
-        ? `${Math.round(rootBounds.width - intersectionRect.left)}px`
-        : position.endsWith('-right')
-        ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
-        : 'auto';
-
-      const bottom = position.startsWith('top-')
-        ? `${Math.round(rootBounds.height - intersectionRect.top)}px`
-        : position.endsWith('-bottom')
-        ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
-        : 'auto';
-
-      const left = position.startsWith('right-')
-        ? `${Math.round(intersectionRect.right)}px`
-        : position.endsWith('-left')
-        ? `${Math.round(intersectionRect.left)}px`
-        : 'auto';
-
-      const anchorPopup = this.anchorElement.closest('.popup');
-
-      const style = {
-        inset: [top, right, bottom, left].join(' '),
-        zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
-        width: `${Math.round(intersectionRect.width)}px`,
-        height: `${Math.round(Math.max(bottomMargin, contentHeight))}px`,
-      };
-
-      if (JSON.stringify(style) !== JSON.stringify(get(this.style))) {
-        this.style.set(style);
-      }
-    });
-  });
-
-  /**
-   *
-   * @param {HTMLElement} anchorElement
-   * @param {HTMLElement} popupElement
-   * @param {PopupPosition} position
-   */
-  constructor(anchorElement, popupElement, position) {
-    this.anchorElement = anchorElement;
-    this.popupElement = popupElement; // = backdrop
-    this.position = position;
-    this.id = getRandomId('popup');
-
-    this.anchorElement.setAttribute('aria-controls', this.id);
-    this.popupElement.setAttribute('id', this.id);
-
-    this.anchorElement.addEventListener('click', () => {
-      if (!this.anchorElement.matches('[aria-disabled="true"]')) {
-        this.open.set(!get(this.open));
-      }
-    });
-
-    this.popupElement.addEventListener('click', (event) => {
-      if (get(this.open) && event.target !== this.anchorElement) {
-        this.open.set(false);
-      }
-    });
-
-    [this.anchorElement, this.popupElement].forEach((element) => {
-      element.addEventListener('keydown', (event) => {
-        const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
-
-        if (
-          get(this.open) &&
-          ['Escape'].includes(key) &&
-          !ctrlKey &&
-          !metaKey &&
-          !shiftKey &&
-          !altKey
-        ) {
-          this.open.set(false);
-        }
-      });
-    });
-
-    this.open.subscribe((open) => {
-      if (open) {
-        this.checkPosition();
-      } else if (this.anchorElement.getAttribute('aria-expanded') === 'true') {
-        this.anchorElement.focus();
-      }
-
-      this.anchorElement.setAttribute('aria-expanded', open);
-    });
-  }
-
-  /**
-   * Continue checking the position in case the window or parent element resizes.
-   */
-  checkPosition() {
-    this.observer.observe(this.anchorElement);
-
-    window.requestAnimationFrame(() => {
-      this.observer.unobserve(this.anchorElement);
-
-      if (get(this.open)) {
-        this.checkPosition();
-      }
-    });
-  }
-}
-
-/**
- *
- */
-export const activatePopup = (...args) => new Popup(...args);

package/package/components/helpers/util.d.ts

@@ -1 +0,0 @@
-export function getRandomId(prefix?: string, length?: number): string;

package/package/components/helpers/util.js

@@ -1,8 +0,0 @@
-export const getRandomId = (prefix = '', length = 7) =>
-  [
-    prefix,
-    new Array(length)
-      .fill()
-      .map(() => '0123456789abcdef'[Math.floor(Math.random() * 12)])
-      .join(''),
-  ].join('-');

package/package/components/util/app-shell.svelte

@@ -1,284 +0,0 @@
-<!--
-  @component
-  Provide an application’s shell that makes the web app more like a native app. It also handles the
-  dark/light mode switching. This component has to be placed directly under `<body>` (or
-  `<div style="display:contents">` in a SvelteKit app).
--->
-<script>
-  import { onMount } from 'svelte';
-
-  onMount(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const { dataset } = document.documentElement;
-
-    const applyTheme = () => {
-      if (dataset.autoTheming !== 'false') {
-        dataset.theme = mediaQuery.matches ? 'dark' : 'light';
-      }
-    };
-
-    applyTheme();
-
-    mediaQuery.onchange = () => {
-      applyTheme();
-    };
-  });
-</script>
-
-<div
-  class="sui app-shell"
-  on:dragover|preventDefault
-  on:drop|preventDefault
-  on:contextmenu={(event) => {
-    // Disable the native context menu
-    if (!event.target?.matches('input[type="text"], textarea')) {
-      event.preventDefault();
-    }
-  }}
->
-  <slot />
-</div>
-
-<style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
-:global(:root) {
-  --hue: 210;
-  --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
-  --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
-  --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
-  --ternary-foreground-color: hsl(var(--foreground-color-3-hsl));
-  --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
-  --danger-foreground-color: hsl(var(--danger-color));
-  --highlight-background-color: hsl(var(--background-color-5-hsl));
-  --content-background-color: hsl(var(--background-color-1-hsl));
-  --primary-background-color: hsl(var(--background-color-2-hsl));
-  --secondary-background-color: hsl(var(--background-color-3-hsl));
-  --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 88%);
-  --ternary-background-color: hsl(var(--background-color-4-hsl));
-  --control-background-color: hsl(var(--background-color-1-hsl));
-  --disabled-background-color: hsl(var(--background-color-4-hsl));
-  --danger-background-color: hsl(var(--danger-color));
-  --primary-border-color: hsl(var(--border-color-1-hsl));
-  --secondary-border-color: hsl(var(--border-color-2-hsl));
-  --control-border-color: hsl(var(--border-color-2-hsl));
-  --popup-shadow-color: hsl(var(--shadow-color) / 40%);
-  --popup-backdrop-color: hsl(var(--shadow-color) / 40%);
-  --default-font-family: "Merriweather Sans", sans-serif;
-  --default-font-size: 13px;
-  --default-font-weight-regular: 300;
-  --default-font-weight-bold: 600;
-  --monospace-font-family: "Noto Sans Mono", monospace;
-  --monospace-font-size: 13px;
-  --control--small--border-width: 1px;
-  --control--small--border-radius: 2px;
-  --control--small--height: 24px;
-  --control--medium--border-width: 1px;
-  --control--medium--border-radius: 4px;
-  --control--medium--height: 32px;
-  --control--large--border-width: 1px;
-  --control--large--border-radius: 8px;
-  --control--large--height: 40px;
-  --button--small--border-radius: var(--control--small--border-radius);
-  --button--small--height: var(--control--small--height);
-  --button--medium--border-radius: var(--control--medium--border-radius);
-  --button--medium--height: var(--control--medium--height);
-  --button--large--border-radius: var(--control--large--border-radius);
-  --button--large--height: var(--control--large--height);
-  --option--small--border-radius: var(--control--small--border-radius);
-  --option--small--height: var(--control--small--height);
-  --option--medium--border-radius: var(--control--medium--border-radius);
-  --option--medium--height: var(--control--medium--height);
-  --option--large--border-radius: var(--control--large--border-radius);
-  --option--large--height: var(--control--large--height);
-  --input--small--border-radius: var(--control--small--border-radius);
-  --input--small--height: var(--control--small--height);
-  --input--medium--border-radius: var(--control--medium--border-radius);
-  --input--medium--height: var(--control--medium--height);
-  --input--large--border-radius: var(--control--large--border-radius);
-  --input--large--height: var(--control--large--height);
-  --tab--small--height: var(--control--small--height);
-  --tab--medium--height: var(--control--medium--height);
-  --tab--large--height: var(--control--large--height);
-}
-
-:global(:root[data-theme=light]) {
-  --foreground-color-1-hsl: var(--hue) 5% 0%;
-  --foreground-color-2-hsl: var(--hue) 5% 20%;
-  --foreground-color-3-hsl: var(--hue) 5% 40%;
-  --foreground-color-4-hsl: var(--hue) 5% 60%;
-  --border-color-1-hsl: var(--hue) 5% 75%;
-  --border-color-2-hsl: var(--hue) 5% 80%;
-  --background-color-1-hsl: var(--hue) 5% 100%;
-  --background-color-2-hsl: var(--hue) 5% 98%;
-  --background-color-3-hsl: var(--hue) 5% 96%;
-  --background-color-4-hsl: var(--hue) 5% 94%;
-  --background-color-5-hsl: var(--hue) 5% 90%;
-  --shadow-color: var(--hue) 10% 0%;
-  --primary-accent-color: hsl(var(--hue) 80% 45%);
-  --primary-accent-color-lighter: hsl(var(--hue) 80% 40%);
-  --primary-accent-color-darker: hsl(var(--hue) 80% 50%);
-  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%);
-  --danger-color: 0 68% 42%;
-}
-
-:global(:root[data-theme=dark]) {
-  --foreground-color-1-hsl: var(--hue) 10% 100%;
-  --foreground-color-2-hsl: var(--hue) 10% 80%;
-  --foreground-color-3-hsl: var(--hue) 10% 60%;
-  --foreground-color-4-hsl: var(--hue) 10% 40%;
-  --border-color-1-hsl: var(--hue) 10% 25%;
-  --border-color-2-hsl: var(--hue) 10% 20%;
-  --background-color-1-hsl: var(--hue) 10% 8%;
-  --background-color-2-hsl: var(--hue) 10% 10%;
-  --background-color-3-hsl: var(--hue) 10% 12%;
-  --background-color-4-hsl: var(--hue) 10% 14%;
-  --background-color-5-hsl: var(--hue) 10% 18%;
-  --shadow-color: var(--hue) 10% 0%;
-  --primary-accent-color: hsl(var(--hue) 100% 45%);
-  --primary-accent-color-lighter: hsl(var(--hue) 100% 50%);
-  --primary-accent-color-darker: hsl(var(--hue) 100% 40%);
-  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%);
-  --danger-color: 0 68% 42%;
-}
-
-:global(.material-symbols-outlined) {
-  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
-}
-
-:global(*) {
-  scroll-behavior: smooth;
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-}
-
-:global(:focus) {
-  z-index: 1;
-  outline-width: 0;
-}
-
-:global(:focus-visible) {
-  outline-offset: -2px;
-  outline-width: 2px !important;
-  outline-style: solid;
-  outline-color: hsl(var(--hue), 100%, 50%, 25%);
-}
-
-:global(h1),
-:global(h2),
-:global(h3),
-:global(h4),
-:global(h5),
-:global(h6) {
-  margin: 0;
-  font-weight: var(--default-font-weight-bold);
-}
-
-:global(strong) {
-  font-weight: var(--default-font-weight-bold);
-}
-
-:global(a) {
-  color: var(--primary-accent-color-lighter);
-  text-decoration: none;
-}
-
-:global(img),
-:global(svg),
-:global(iframe) {
-  vertical-align: top;
-}
-
-:global(button),
-:global(input),
-:global(textarea),
-:global(select),
-:global(option) {
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-:global(p),
-:global(li) {
-  line-height: 1.75;
-}
-
-:global([role=grid]) {
-  display: table;
-  width: 100%;
-}
-:global([role=grid]) :global(.colgroup) {
-  display: table-column-group;
-}
-:global([role=grid]) :global(.colgroup) :global(.col) {
-  display: table-column;
-}
-
-:global(code),
-:global(pre) {
-  font-family: var(--monospace-font-family);
-}
-
-:global(pre) {
-  line-height: 1.5;
-  -webkit-user-select: text;
-  user-select: text;
-}
-
-:global(dialog) {
-  position: fixed;
-  inset: 0;
-  outline: 0;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 100%;
-  color: inherit;
-  background: transparent;
-  -webkit-user-select: none;
-  user-select: none;
-  touch-action: none;
-  cursor: default;
-}
-:global(dialog::backdrop) {
-  background: transparent;
-}
-
-:global(.thead[role=rowgroup]) {
-  display: table-header-group;
-}
-
-:global(.tbody[role=rowgroup]) {
-  display: table-row-group;
-}
-
-:global([role=row]) {
-  display: table-row;
-}
-
-:global([role=columnheader]),
-:global([role=gridcell]) {
-  display: table-cell;
-}
-
-:global(.app-shell) {
-  position: fixed;
-  inset: 0;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  color: var(--primary-foreground-color);
-  background-color: var(--primary-background-color);
-  font-family: var(--default-font-family);
-  font-size: var(--default-font-size);
-  font-weight: var(--default-font-weight-regular);
-  -webkit-user-select: none;
-  user-select: none;
-  touch-action: none;
-  overflow-anchor: none;
-  cursor: default;
-}</style>

package/package/components/util/app-shell.svelte.d.ts

@@ -1,28 +0,0 @@
-/** @typedef {typeof __propDef.props}  AppShellProps */
-/** @typedef {typeof __propDef.events}  AppShellEvents */
-/** @typedef {typeof __propDef.slots}  AppShellSlots */
-/**
- * Provide an application’s shell that makes the web app more like a native app. It also handles the
- * dark/light mode switching. This component has to be placed directly under `<body>` (or
- * `<div style="display:contents">` in a SvelteKit app).
- */
-export default class AppShell {
-}
-export type AppShellProps = typeof __propDef.props;
-export type AppShellEvents = typeof __propDef.events;
-export type AppShellSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        dragover: DragEvent;
-        drop: DragEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/components/util/misc.d.ts

@@ -1,2 +0,0 @@
-export function isObject(input: any): boolean;
-export function sleep(ms?: number): Promise<any>;

package/package/components/util/misc.js

@@ -1,22 +0,0 @@
-/**
- * Check if the given input is a simple object.
- *
- * @param {*} input Input, probably an object.
- * @returns {boolean} Result.
- */
-export const isObject = (input) =>
-  input !== null && typeof input === 'object' && !Array.isArray(input);
-
-/**
- * Return a simple `Promise` to resolve in the given time, making it easier to wait for a bit in the
- * code, particularly while making sequential HTTP requests.
- *
- * @param {number} [ms] Milliseconds to wait.
- * @returns {Promise} Nothing.
- */
-export const sleep = (ms = 1000) =>
-  new Promise((resolve) => {
-    window.setTimeout(() => {
-      resolve();
-    }, ms);
-  });

package/package/components/util/popup.svelte

@@ -1,131 +0,0 @@
-<!--
-  @component
-  Generic popup helper.
--->
-<svelte:options accessors={true} />
-
-<script>
-  import { onMount } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { activatePopup } from '../helpers/popup';
-
-  /** @type {(HTMLElement|undefined)} */
-  export let anchor = undefined;
-
-  /**
-   * Reference to the popup element.
-   * @type {(HTMLElement|undefined)}
-   */
-  export let dialog = undefined;
-
-  /**
-   * Where to show the dropdown menu.
-   * @type {PopupPosition}
-   */
-  export let position = 'bottom-left';
-
-  export let open = writable(false);
-
-  let showDialog = false;
-  let showContent = false;
-  let closeDialogTimer = 0;
-
-  let style = writable({
-    inset: undefined,
-    zIndex: undefined,
-    width: undefined,
-    height: undefined,
-  });
-
-  $: {
-    if (anchor && dialog) {
-      ({ open, style } = activatePopup(anchor, dialog, position));
-    }
-  }
-
-  const openDialog = () => {
-    window.clearTimeout(closeDialogTimer);
-    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
-    showContent = true;
-    dialog.showModal();
-
-    window.requestAnimationFrame(() => {
-      showDialog = true;
-    });
-  };
-
-  const closeDialog = () => {
-    showDialog = false;
-
-    closeDialogTimer = window.setTimeout(() => {
-      showContent = false;
-      dialog?.close();
-      dialog?.remove();
-    }, 500);
-  };
-
-  $: {
-    if (dialog) {
-      if ($open) {
-        openDialog();
-      } else {
-        closeDialog();
-      }
-    }
-  }
-
-  onMount(() => {
-    dialog.remove();
-
-    // onUnmount
-    return () => {
-      dialog?.close();
-      dialog?.remove();
-    };
-  });
-</script>
-
-<dialog class="sui popup" bind:this={dialog} class:open={showDialog} {...$$restProps}>
-  <!-- Prevent the first item in the slot, e.g. a menu item, from being focused by adding `tabindex`
-    to the container -->
-  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-  <div
-    tabindex="0"
-    class="content"
-    style:inset={$style.inset}
-    style:z-index={$style.zIndex}
-    style:min-width={$style.width}
-    style:max-height={$style.height}
-  >
-    {#if showContent}
-      <slot />
-    {/if}
-  </div>
-</dialog>
-
-<style>.popup.open .content {
-  opacity: 1;
-  transform: translateY(2px);
-  transition-duration: 100ms;
-}
-.popup:not(.open) {
-  pointer-events: none;
-}
-.popup:not(.open) .content {
-  opacity: 0;
-  transform: translateY(-8px);
-  pointer-events: none;
-  transition-duration: 200ms;
-}
-
-.content {
-  position: fixed;
-  overflow-y: auto;
-  outline-width: 0 !important;
-  color: var(--primary-foreground-color);
-  background-color: var(--secondary-background-color-translucent);
-  backdrop-filter: blur(16px);
-  box-shadow: 0 8px 16px var(--popup-shadow-color);
-  will-change: opacity, transform;
-  transition-property: opacity, transform;
-}</style>

package/package/components/util/popup.svelte.d.ts

@@ -1,37 +0,0 @@
-/** @typedef {typeof __propDef.props}  PopupProps */
-/** @typedef {typeof __propDef.events}  PopupEvents */
-/** @typedef {typeof __propDef.slots}  PopupSlots */
-/** Generic popup helper. */
-export default class Popup {
-    /**accessor*/
-    set anchor(arg: any);
-    get anchor(): any;
-    /**accessor*/
-    set dialog(arg: any);
-    get dialog(): any;
-    /**accessor*/
-    set position(arg: any);
-    get position(): any;
-    /**accessor*/
-    set open(arg: any);
-    get open(): any;
-}
-export type PopupProps = typeof __propDef.props;
-export type PopupEvents = typeof __propDef.events;
-export type PopupSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        dialog?: (HTMLElement | undefined);
-        position?: any;
-        anchor?: (HTMLElement | undefined);
-        open?: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/components/util/portal.svelte

@@ -1,34 +0,0 @@
-<!--
-  @component
-  @see https://github.com/sveltejs/svelte/issues/3088
--->
-<script>
-  import { onDestroy, onMount } from 'svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-
-  /** @type {HTMLElement} */
-  let ref;
-
-  onMount(() => {
-    document.body.appendChild(ref);
-  });
-
-  onDestroy(() => {
-    ref.remove();
-  });
-</script>
-
-<div class="sui portal {className}" bind:this={ref}>
-  <slot />
-</div>
-
-<style>.portal {
-  display: contents;
-}</style>