@marianmeres/stuic 1.13.0 → 1.15.0

package/dist/actions/focus-trap.js

@@ -1,21 +1,20 @@
-// copied from skeleton
+// initially copied from skeleton, adjusted
 const defaults = { enabled: true, autoFocusFirst: true };
-// Action: Focus Trap
 export function focusTrap(node, options = {}) {
     let { enabled, autoFocusFirst } = { ...defaults, ...(options || {}) };
     const focusableSelectors = [
-        '[contentEditable=true]:not([tabindex^="-"])',
+        '[contentEditable=true]',
         //
-        'button:not([disabled]):not([tabindex^="-"])',
-        'input:not([disabled]):not([tabindex^="-"])',
-        'select:not([disabled]):not([tabindex^="-"])',
-        'textarea:not([disabled]):not([tabindex^="-"])',
-        //
-        'a[href]:not([tabindex^="-"])',
-        'area[href]:not([tabindex^="-"])',
-        'details:not([tabindex^="-"])',
-        'iframe:not([tabindex^="-"])',
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
         //
+        'a[href]',
+        'area[href]',
+        'details',
+        'iframe',
+        // see more below on tabindexes
         '[tabindex]:not([tabindex^="-"])',
     ].join(',');
     let first;
@@ -37,10 +36,13 @@ export function focusTrap(node, options = {}) {
     const queryElements = (fromObserver) => {
         if (enabled === false)
             return;
-        const focusable = [...node.querySelectorAll(focusableSelectors)]
-            // in case I didn't get the selectors right, make sure to manually check as well...
-            // (negligible overhead, if any...)
+        let maxTabindex = 0;
+        let focusable = [...node.querySelectorAll(focusableSelectors)]
+            // filter negative tabindexes (afaik there is no :not([disabled] OR [tabindex^="-"]))
             .filter((e) => {
+            // reusing loop for a side job here... see sort below
+            maxTabindex = Math.max(maxTabindex, parseInt(e.getAttribute('tabindex') || '0'));
+            //
             if (e.getAttribute('disabled') === '')
                 return false;
             if ((e.getAttribute('tabindex') || '').startsWith('-'))
@@ -48,9 +50,11 @@ export function focusTrap(node, options = {}) {
             return true;
         })
             // important to sort by tabindex, so the first/last will work as expected
+            // but must increase zero to max + 1 first, because browsers focus zeros as last...
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
             .sort((e1, e2) => {
-            const a = parseInt(e1.getAttribute('tabindex') || '0');
-            const b = parseInt(e2.getAttribute('tabindex') || '0');
+            const a = parseInt(e1.getAttribute('tabindex') || '0') || maxTabindex + 1;
+            const b = parseInt(e2.getAttribute('tabindex') || '0') || maxTabindex + 1;
             return a - b;
         });
         if (focusable.length) {
@@ -66,20 +70,17 @@ export function focusTrap(node, options = {}) {
     };
     queryElements(false);
     function cleanup() {
-        if (first)
-            first.removeEventListener('keydown', onFirstElemKeydown);
-        if (last)
-            last.removeEventListener('keydown', onLastElemKeydown);
+        first && first.removeEventListener('keydown', onFirstElemKeydown);
+        last && last.removeEventListener('keydown', onLastElemKeydown);
     }
     // When children of node are changed (added or removed)
-    const onObservationChange = (mutationRecords, observer) => {
-        if (mutationRecords.length) {
+    const observer = new MutationObserver((mutations, observer) => {
+        if (mutations.length) {
             cleanup();
             queryElements(true);
         }
         return observer;
-    };
-    const observer = new MutationObserver(onObservationChange);
+    });
     observer.observe(node, { childList: true, subtree: true });
     // Lifecycle
     return {

package/dist/components/Button/Button.svelte

@@ -61,6 +61,7 @@ export let rounded = ButtonConfig.defaultRounded;
 export let variant = ButtonConfig.defaultVariant;
 export let square = false;
 export let disabled = false;
+export let value = void 0;
 const _whitelist = ["xs", "sm", "md", "lg", "xl"];
 export let size = ButtonConfig.defaultSize;
 $:
@@ -81,7 +82,6 @@ $:
     //
     ButtonConfig.class,
     //
-    // variant && ButtonConfig.variant?.[variant],
     variant && `${variant || ""}`.split(" ").reduce((m, v) => {
       m += ButtonConfig.variant?.[v] + " ";
       return m;
@@ -99,6 +99,10 @@ $:
 		class={buttonClass}
 		{...$$restProps}
 		role="button"
+		data-size={size}
+		data-shadow={shadow}
+		data-rounded={rounded}
+		data-variant={variant}
 		on:click
 		on:change
 		on:keydown
@@ -116,6 +120,11 @@ $:
 		{type}
 		{disabled}
 		class={buttonClass}
+		{value}
+		data-size={size}
+		data-shadow={shadow}
+		data-rounded={rounded}
+		data-variant={variant}
 		{...$$restProps}
 		on:click
 		on:change

package/dist/components/Button/Button.svelte.d.ts

@@ -49,6 +49,7 @@ declare const __propDef: {
         variant?: string | undefined;
         square?: boolean | undefined;
         disabled?: boolean | undefined;
+        value?: string | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     };
     events: {

package/dist/components/Switch/Switch.svelte

@@ -0,0 +1,128 @@
+<script context="module">import { twMerge } from "tailwind-merge";
+export class SwitchConfig {
+  static defaultSize = "md";
+  static defaultVariant = void 0;
+  static presetBase = `
+			relative inline-flex flex-shrink-0 items-center
+			m-2
+			rounded-full cursor-pointer
+			transition-colors duration-100
+			
+			hover:brightness-[1.05] active:brightness-[0.95]
+			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
+
+			bg-zinc-300 data-[checked=true]:bg-zinc-600
+		`.trim();
+  static presetsSize = {
+    xs: "h-4 w-7",
+    sm: "h-5 w-9",
+    md: "h-6 w-11",
+    lg: "h-7 w-14",
+    xl: "h-8 w-16"
+  };
+  static class = "";
+  // to be defined at consumer level...
+  static variant = {};
+  // DOT
+  static presetBaseDot = `
+			block flex items-center justify-center
+			translate-x-1 rounded-full  
+			transition-all duration-100
+			shadow
+			bg-white
+		`.trim();
+  static presetsSizeDot = {
+    // size + translate-x = width
+    xs: "size-2 data-[checked=true]:translate-x-4",
+    sm: "size-3 data-[checked=true]:translate-x-5",
+    md: "size-4 data-[checked=true]:translate-x-6",
+    lg: "size-5 data-[checked=true]:translate-x-8",
+    xl: "size-6 data-[checked=true]:translate-x-9"
+  };
+  static classDot = "";
+  // to be defined at consumer level...
+  static variantDot = {};
+}
+</script>
+
+<script>import { createEventDispatcher } from "svelte";
+let _class = "";
+export { _class as class };
+export let classDot = "";
+export let label = "";
+export let checked = false;
+export let disabled = false;
+export let tabindex = 0;
+export let variant = SwitchConfig.defaultVariant;
+export let stopPropagation = true;
+export let preventDefault = false;
+const _defaultNoopHook = () => Promise.resolve(void 0);
+export let preHook = _defaultNoopHook;
+const _whitelist = ["xs", "sm", "md", "lg", "xl"];
+export let size = SwitchConfig.defaultSize;
+$:
+  if (!_whitelist.includes(size))
+    size = SwitchConfig.defaultSize;
+let switchClass;
+$:
+  switchClass = twMerge(
+    SwitchConfig.presetBase,
+    SwitchConfig.presetsSize[size],
+    SwitchConfig.class,
+    variant && `${variant || ""}`.split(" ").reduce((m, v) => {
+      m += SwitchConfig.variant?.[v] + " ";
+      return m;
+    }, ""),
+    _class
+  );
+let dotClass;
+$:
+  dotClass = twMerge(
+    SwitchConfig.presetBaseDot,
+    SwitchConfig.presetsSizeDot[size],
+    SwitchConfig.classDot,
+    classDot
+  );
+const dispatch = createEventDispatcher();
+</script>
+
+<button
+	class={switchClass}
+	type="button"
+	role="switch"
+	aria-checked={checked}
+	class:checked
+	data-checked={checked}
+	data-size={size}
+	{tabindex}
+	{disabled}
+	on:click={async (e) => {
+		stopPropagation && e.stopPropagation();
+		preventDefault && e.preventDefault();
+
+		// ability to break execution (do the change) by returning explicit `false`
+		if (typeof preHook === 'function' && (await preHook(checked)) === false) {
+			return false;
+		}
+
+		checked = !checked;
+		dispatch('change', checked);
+	}}
+	on:click
+	on:keydown
+	on:keyup
+	on:touchstart|passive
+	on:touchend
+	on:touchcancel
+	on:mouseenter
+	on:mouseleave
+>
+	{#if label}<span class="sr-only">{@html label}</span>{/if}
+	<span aria-hidden="true" data-checked={checked} data-size={size} class={dotClass}>
+		{#if checked}
+			<slot name="on" />
+		{:else}
+			<slot name="off" />
+		{/if}
+	</span>
+</button>

package/dist/components/Switch/Switch.svelte.d.ts

@@ -0,0 +1,63 @@
+import { SvelteComponent } from "svelte";
+export declare class SwitchConfig {
+    static defaultSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    static defaultVariant: string | undefined;
+    static presetBase: string;
+    static presetsSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    static class: string;
+    static variant: Record<string, string>;
+    static presetBaseDot: string;
+    static presetsSizeDot: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    static classDot: string;
+    static variantDot: Record<string, string>;
+}
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        classDot?: string | undefined;
+        label?: string | undefined;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        tabindex?: number | undefined;
+        variant?: string | undefined;
+        stopPropagation?: boolean | undefined;
+        preventDefault?: boolean | undefined;
+        preHook?: ((oldValue: boolean) => Promise<void | boolean>) | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        touchstart: TouchEvent;
+        touchend: TouchEvent;
+        touchcancel: TouchEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        on: {};
+        off: {};
+    };
+};
+export type SwitchProps = typeof __propDef.props;
+export type SwitchEvents = typeof __propDef.events;
+export type SwitchSlots = typeof __propDef.slots;
+export default class Switch extends SvelteComponent<SwitchProps, SwitchEvents, SwitchSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as LocalColorScheme } from './components/ColorScheme/LocalColor
 export { ColorScheme } from './components/ColorScheme/color-scheme.js';
 export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
 export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
+export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as X } from './components/X/X.svelte';
 export { clickOutside } from './actions/click-outside.js';
 export { focusTrap } from './actions/focus-trap.js';

package/dist/index.js

@@ -14,6 +14,8 @@ export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer
 //
 export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
 //
+export { default as Switch } from './components/Switch/Switch.svelte';
+//
 export { default as X } from './components/X/X.svelte';
 // actions
 export { clickOutside } from './actions/click-outside.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.13.0",
+	"version": "1.15.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",
@@ -31,7 +31,7 @@
 		"svelte": "^4.0.0"
 	},
 	"devDependencies": {
-		"@marianmeres/icons-fns": "^2.0.2",
+		"@marianmeres/icons-fns": "^2.1.0",
 		"@marianmeres/parse-boolean": "^1.1.7",
 		"@marianmeres/random-human-readable": "^1.6.1",
 		"@marianmeres/release": "^1.1.2",