@marianmeres/stuic 1.126.0 → 2.0.0-next.3

package/dist/components/Input/Field.svelte

@@ -1,315 +0,0 @@
-<script context="module">import { createClog } from "@marianmeres/clog";
-import { createEventDispatcher } from "svelte";
-import { slide } from "svelte/transition";
-import { autogrow } from "../../actions/autogrow.js";
-import { trim } from "../../actions/trim.js";
-import { validate as validateAction } from "../../actions/validate.js";
-import { getId } from "../../utils/get-id.js";
-import Thc from "../Thc/Thc.svelte";
-const _emptyClasses = () => ({
-  box: "",
-  wrap: "",
-  label: "",
-  input: "",
-  invalid: "",
-  validationMessage: "",
-  description: "",
-  below: "",
-  asterix: ""
-});
-const _PRESET = {
-  box: "mb-4 grid",
-  //  gap-4
-  wrap: `
-			rounded-md border border-neutral-300 dark:border-neutral-600
-			bg-neutral-100 dark:bg-neutral-700
-			focus-within:border-stuic-primary
-			focus-within:ring-4
-			focus-within:ring-stuic-primary
-			focus-within:ring-opacity-20
-		`,
-  label: `block flex-1 px-2 mb-1`,
-  //
-  input: `
-			rounded-md border-0 w-full flex-1
-			bg-transparent
-			tracking-tight
-			focus:outline-0 focus-visible:ring-0
-			placeholder:tracking-tight
-			placeholder:text-neutral-950/35 dark:placeholder:text-neutral-50/35
-			text-neutral-950 dark:text-neutral-50
-		`,
-  invalid: `border-stuic-primary`,
-  validationMessage: `my-1 text-xs text-stuic-primary px-2 tracking-tight`,
-  description: `mx-2 mt-1 text-sm opacity-50`,
-  below: `mx-2 my-1`,
-  asterix: `after:content-['*'] after:opacity-30 after:pl-1`
-};
-const _PRESET_BY_SIZE = {
-  sm: {
-    label: "text-sm",
-    input: "text-sm placeholder:text-sm"
-  },
-  md: {
-    label: "text-base",
-    input: "text-base placeholder:text-base"
-  },
-  lg: {
-    label: "text-base font-bold",
-    input: "text-lg placeholder:text-lg"
-  }
-};
-export class FieldConfig {
-  //
-  static class = _emptyClasses();
-  static classBySize = {
-    sm: _emptyClasses(),
-    md: _emptyClasses(),
-    lg: _emptyClasses()
-  };
-  static labelLeft = false;
-  static labelLeftWidth = "normal";
-  //
-  static _preset = _PRESET;
-  static _presetBySize = _PRESET_BY_SIZE;
-}
-</script>
-
-<script>import { twMerge2 } from "../../utils/tw-merge2.js";
-import PinInput from "./PinInput.svelte";
-const clog = createClog("Field");
-const dispatch = createEventDispatcher();
-const setType = (el, t) => el.type = t;
-let _class = {};
-export { _class as class };
-export let classBySize = {};
-export let size = "md";
-export let id = getId();
-export let value;
-export let label = "";
-export let type = "text";
-export let name = "";
-export let tabindex = 0;
-export let description = "";
-export let autofocus = void 0;
-export let disabled = false;
-export let readonly = false;
-export let required = false;
-export let placeholder = void 0;
-export let autocomplete = void 0;
-export let minlength = void 0;
-export let maxlength = void 0;
-export let min = void 0;
-export let max = void 0;
-export let pattern = void 0;
-export let step = void 0;
-export let useTrim = true;
-export let textareaAutoEnlarge = true;
-export let labelLeft = FieldConfig.labelLeft;
-export let labelLeftWidth = FieldConfig.labelLeftWidth;
-export let validate = void 0;
-export let showAsterixOnRequired = true;
-let validation;
-const setValidationResult = (res) => validation = res;
-let _inputEl;
-$:
-  if (_inputEl)
-    dispatch("input_mounted", _inputEl);
-const _collectClasses = (k, extra = "") => [
-  _PRESET?.[k] || "",
-  _PRESET_BY_SIZE?.[size]?.[k] || "",
-  FieldConfig?.class?.[k] || "",
-  FieldConfig?.classBySize?.[size]?.[k] || "",
-  extra || "",
-  _class?.[k] || "",
-  classBySize?.[size]?.[k] || ""
-].join(" ");
-$:
-  _boxClass = twMerge2(_collectClasses("box"));
-$:
-  _labelClass = twMerge2(
-    _collectClasses(
-      "label",
-      showAsterixOnRequired && required ? _collectClasses("asterix") : ""
-    )
-  );
-$:
-  _wrapClass = twMerge2(
-    _collectClasses(
-      "wrap",
-      validation && !validation.valid ? _collectClasses("invalid") : ""
-    )
-  );
-$:
-  _inputClass = twMerge2(
-    "form-input",
-    type === "textarea" ? "min-h-16" : "",
-    _collectClasses("input")
-  );
-$:
-  _validationMessageClass = twMerge2(_collectClasses("validationMessage"));
-$:
-  _descriptionClass = twMerge2(_collectClasses("description"));
-$:
-  _belowClass = twMerge2(_collectClasses("below"));
-</script>
-
-<div
-	class={_boxClass}
-	class:grid-cols-4={labelLeft && labelLeftWidth === 'normal'}
-	class:grid-cols-3={labelLeft && labelLeftWidth === 'wide'}
->
-	<div
-		class="flex"
-		class:items-end={!labelLeft}
-		class:items-start={labelLeft}
-		class:mt-1={labelLeft}
-	>
-		{#if label || $$slots.label}
-			<label for={id} class={_labelClass} class:required>
-				{#if $$slots.label}
-					<slot name="label" />
-				{:else}
-					<Thc thc={label} forceAsHtml />
-				{/if}
-			</label>
-		{/if}
-		<slot name="right_of_label" />
-	</div>
-	<div
-		class:col-span-3={labelLeft && labelLeftWidth === 'normal'}
-		class:col-span-2={labelLeft && labelLeftWidth === 'wide'}
-	>
-		<div
-			class={_wrapClass}
-			class:cursor-not-allowed={disabled}
-			class:opacity-50={disabled}
-		>
-			<div class="flex">
-				<slot name="input_before" {id} />
-				{#if type === 'textarea'}
-					<textarea
-						bind:value
-						bind:this={_inputEl}
-						{id}
-						class={_inputClass}
-						class:cursor-not-allowed={disabled}
-						{name}
-						{placeholder}
-						{disabled}
-						{readonly}
-						{required}
-						{autofocus}
-						{tabindex}
-						use:trim={useTrim}
-						use:validateAction={validate
-							? { ...(validate === true ? {} : validate), setValidationResult }
-							: undefined}
-						use:autogrow={{ allowed: textareaAutoEnlarge }}
-						on:blur
-						on:change
-						on:click
-						on:focus
-						on:input
-						on:keydown
-						on:keyup
-						on:touchstart|passive
-						on:touchend|passive
-						on:touchmove|passive
-						on:touchcancel
-						on:mouseenter
-						on:mouseleave
-						{...$$restProps}
-					></textarea>
-				{:else if type === 'pin'}
-					<PinInput
-						bind:value
-						inputClass={_inputClass}
-						on:input_mounted
-						{id}
-						{name}
-						{disabled}
-						{readonly}
-						{required}
-						{autofocus}
-						{tabindex}
-						{placeholder}
-						{pattern}
-						{setValidationResult}
-						bind:validate
-						on:blur
-						on:change
-						on:click
-						on:focus
-						on:input
-						on:keydown
-						on:keyup
-						on:touchstart
-						on:touchend
-						on:touchmove
-						on:touchcancel
-						on:mouseenter
-						on:mouseleave
-						{...$$restProps}
-					/>
-				{:else}
-					<input
-						bind:value
-						bind:this={_inputEl}
-						use:setType={type}
-						{id}
-						class={_inputClass}
-						class:cursor-not-allowed={disabled}
-						{name}
-						{placeholder}
-						{disabled}
-						{readonly}
-						{required}
-						{autofocus}
-						{autocomplete}
-						{tabindex}
-						{minlength}
-						{maxlength}
-						{min}
-						{max}
-						{pattern}
-						{step}
-						use:trim={useTrim}
-						use:validateAction={validate
-							? { ...(validate === true ? {} : validate), setValidationResult }
-							: undefined}
-						on:blur
-						on:change
-						on:click
-						on:focus
-						on:input
-						on:keydown
-						on:keyup
-						on:touchstart|passive
-						on:touchend|passive
-						on:touchmove|passive
-						on:touchcancel
-						on:mouseenter
-						on:mouseleave
-						{...$$restProps}
-					/>
-				{/if}
-				<slot name="input_after" {id} />
-			</div>
-			<slot name="input_below" {id} />
-		</div>
-		{#if validation && !validation?.valid}
-			<div transition:slide={{ duration: 150 }} class={_validationMessageClass}>
-				{@html validation.message}
-			</div>
-		{/if}
-		{#if description}
-			<div class={_descriptionClass}>
-				<Thc thc={description} forceAsHtml />
-			</div>
-		{/if}
-		{#if $$slots.below}
-			<div class={_belowClass}><slot name="below" {id} /></div>
-		{/if}
-	</div>
-</div>

package/dist/components/Input/Field.svelte.d.ts

@@ -1,102 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ValidateOptions } from '../../actions/validate.js';
-import type { THC } from '../Thc/Thc.svelte';
-export interface FieldConfigClasses {
-    box?: string;
-    wrap?: string;
-    label?: string;
-    input?: string;
-    invalid?: string;
-    validationMessage?: string;
-    description?: string;
-    below?: string;
-    asterix?: string;
-}
-export interface FieldConfigClassesBySize {
-    sm?: FieldConfigClasses;
-    md?: FieldConfigClasses;
-    lg?: FieldConfigClasses;
-}
-export declare class FieldConfig {
-    static class: FieldConfigClasses;
-    static classBySize: FieldConfigClassesBySize;
-    static labelLeft: boolean;
-    static labelLeftWidth: 'normal' | 'wide';
-    static readonly _preset: FieldConfigClasses;
-    static readonly _presetBySize: FieldConfigClassesBySize;
-}
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: FieldConfigClasses | undefined;
-        classBySize?: FieldConfigClassesBySize | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        id?: string | undefined;
-        value: string;
-        label?: THC | undefined;
-        type?: string | undefined;
-        name?: string | undefined;
-        tabindex?: number | undefined;
-        description?: THC | undefined;
-        autofocus?: true | undefined | undefined;
-        disabled?: boolean | undefined;
-        readonly?: boolean | undefined;
-        required?: boolean | undefined;
-        placeholder?: string | undefined | undefined;
-        autocomplete?: string | undefined | undefined;
-        minlength?: number | undefined | undefined;
-        maxlength?: number | undefined | undefined;
-        min?: number | undefined | undefined;
-        max?: number | undefined | undefined;
-        pattern?: string | undefined | undefined;
-        step?: number | undefined | undefined;
-        useTrim?: boolean | undefined;
-        textareaAutoEnlarge?: boolean | undefined;
-        labelLeft?: boolean | undefined;
-        labelLeftWidth?: "normal" | "wide" | undefined;
-        validate?: true | ValidateOptions | undefined;
-        showAsterixOnRequired?: boolean | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        input: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        touchstart: TouchEvent;
-        touchend: TouchEvent;
-        touchmove: TouchEvent;
-        touchcancel: TouchEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        input_mounted: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        label: {};
-        right_of_label: {};
-        input_before: {
-            id: string;
-        };
-        input_after: {
-            id: string;
-        };
-        input_below: {
-            id: string;
-        };
-        below: {
-            id: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type FieldProps = typeof __propDef.props;
-export type FieldEvents = typeof __propDef.events;
-export type FieldSlots = typeof __propDef.slots;
-export default class Field extends SvelteComponent<FieldProps, FieldEvents, FieldSlots> {
-}
-export {};

package/dist/components/Input/PinInput.svelte

@@ -1,151 +0,0 @@
-<script>import { createClog } from "@marianmeres/clog";
-import { iconBsEye } from "@marianmeres/icons-fns/bootstrap/iconBsEye.js";
-import { iconBsEyeSlash } from "@marianmeres/icons-fns/bootstrap/iconBsEyeSlash.js";
-import { iconBsX } from "@marianmeres/icons-fns/bootstrap/iconBsX.js";
-import { createEventDispatcher } from "svelte";
-import { trim } from "../../actions/trim.js";
-import { validate as validateAction } from "../../actions/validate.js";
-import { getId } from "../../utils/get-id.js";
-import { twMerge2 } from "../../utils/tw-merge2.js";
-const dispatch = createEventDispatcher();
-const clog = createClog("PinInput");
-export let tabindex = 0;
-export let id = getId();
-export let name;
-export let value;
-export let inputClass;
-export let placeholder;
-export let length = 4;
-export let pattern = void 0;
-export let autofocus = void 0;
-export let disabled = false;
-export let readonly = false;
-export let required = false;
-export let validate = void 0;
-export let setValidationResult;
-export let masked = false;
-let _unmasked = false;
-export let showX = false;
-export let pinCellClass = "";
-let _inputEl;
-$:
-  if (_inputEl)
-    dispatch("input_mounted", _inputEl);
-$:
-  if (length < 2)
-    length = 2;
-$:
-  if (length > 12)
-    length = 12;
-$:
-  if (value.length > length)
-    value = value.slice(0, length);
-$:
-  _chars = value.split("").slice(0, length).map((c) => {
-    return masked && !_unmasked ? "*" : c;
-  });
-$:
-  _cells = new Array(length);
-let w = 0;
-const gridCols = [
-  "grid-cols-2",
-  "grid-cols-3",
-  "grid-cols-4",
-  "grid-cols-5",
-  "grid-cols-6",
-  "grid-cols-7",
-  "grid-cols-8",
-  "grid-cols-9",
-  "grid-cols-10",
-  "grid-cols-11",
-  "grid-cols-12"
-];
-</script>
-
-<div class="relative w-full">
-	<div class="absolute inset-0 grid {gridCols[length - 2]} pointer-events-none p-1 gap-1">
-		{#each _cells as c, idx (idx)}
-			<div
-				class={twMerge2(
-					'flex items-center justify-center rounded bg-neutral-950/10 font-mono',
-					pinCellClass
-				)}
-			>
-				{#if _chars[idx]}
-					<span class="">{_chars[idx] || ''}</span>
-				{:else if !_chars.length}
-					<span class="opacity-25">{placeholder?.[idx] || ''}</span>
-				{/if}
-			</div>
-		{/each}
-	</div>
-	<div class="aboslute inset-0" bind:clientWidth={w}>
-		<input
-			bind:value
-			bind:this={_inputEl}
-			{id}
-			type="text"
-			spellcheck="false"
-			class={twMerge2(
-				'caret-neutral-950',
-				inputClass,
-				`font-mono text-transparent dark:text-transparent`
-			)}
-			class:cursor-not-allowed={disabled}
-			style="
-                padding-left: {100 / length / 2}%; 
-                padding-right: {100 / length / 2}%; 
-                letter-spacing: calc({w / length}px - 1ch);
-            "
-			{name}
-			minlength={length}
-			maxlength={length}
-			{disabled}
-			{readonly}
-			{required}
-			{autofocus}
-			{tabindex}
-			{pattern}
-			use:trim
-			use:validateAction={validate
-				? { ...(validate === true ? {} : validate), setValidationResult }
-				: undefined}
-			on:blur
-			on:change
-			on:click
-			on:focus
-			on:input
-			on:keydown
-			on:keyup
-			on:touchstart|passive
-			on:touchend|passive
-			on:touchmove|passive
-			on:touchcancel
-			on:mouseenter
-			on:mouseleave
-			{...$$restProps}
-		/>
-	</div>
-</div>
-{#if showX || masked}
-	<div class="flex items-center justify-center mr-1">
-		{#if showX}
-			<button type="button" class="p-2" on:click={() => (value = '')}>
-				{@html iconBsX()}
-			</button>
-		{/if}
-		{#if masked}
-			<button
-				type="button"
-				class="p-2 focus:outline-0"
-				on:click={() => (_unmasked = !_unmasked)}
-			>
-				{#if _unmasked}
-					{@html iconBsEye()}
-				{:else}
-					{@html iconBsEyeSlash()}
-				{/if}
-			</button>
-		{/if}
-	</div>
-{/if}

package/dist/components/Input/PinInput.svelte.d.ts

@@ -1,51 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { ValidateOptions } from '../../actions/validate.js';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        tabindex?: number | undefined;
-        id?: string | undefined;
-        name: string;
-        value: string;
-        inputClass: string;
-        placeholder: string | undefined;
-        length?: number | undefined;
-        pattern?: string | undefined | undefined;
-        autofocus?: true | undefined | undefined;
-        disabled?: boolean | undefined;
-        readonly?: boolean | undefined;
-        required?: boolean | undefined;
-        validate?: true | ValidateOptions | undefined;
-        setValidationResult: any;
-        masked?: boolean | undefined;
-        showX?: boolean | undefined;
-        pinCellClass?: string | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        input: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        touchstart: TouchEvent;
-        touchend: TouchEvent;
-        touchmove: TouchEvent;
-        touchcancel: TouchEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        input_mounted: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type PinInputProps = typeof __propDef.props;
-export type PinInputEvents = typeof __propDef.events;
-export type PinInputSlots = typeof __propDef.slots;
-export default class PinInput extends SvelteComponent<PinInputProps, PinInputEvents, PinInputSlots> {
-}
-export {};