@marianmeres/stuic 1.20.0 → 1.22.0

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

@@ -0,0 +1,63 @@
+import { SvelteComponent } from "svelte";
+import { type ValidateOptions } from '../../index.js';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string | undefined;
+        labelClass?: string | undefined;
+        wrapClass?: string | undefined;
+        textareaClass?: string | undefined;
+        invalidClass?: string | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        id?: string | undefined;
+        value: string;
+        label?: string | undefined;
+        type?: string | undefined;
+        name?: string | undefined;
+        tabindex?: number | undefined;
+        description?: string | undefined;
+        descriptionClass?: string | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        required?: boolean | undefined;
+        placeholder?: string | undefined;
+        autocomplete?: string | undefined;
+        minlength?: number | undefined;
+        maxlength?: number | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        pattern?: string | undefined;
+        step?: number | undefined;
+        useTrim?: boolean | undefined;
+        textareaAutoEnlarge?: boolean | undefined;
+        validationMessageClass?: string | undefined;
+        validate?: ValidateOptions | true | undefined;
+    };
+    events: {
+        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;
+        };
+    };
+};
+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/FieldCheckbox.svelte

@@ -0,0 +1,102 @@
+<script>import { twMerge } from "tailwind-merge";
+import {
+  validate as validateAction
+} from "../../index.js";
+import { slide } from "svelte/transition";
+import { getId } from "../../index.js";
+let _class = "";
+export { _class as class };
+export let invalidClass = "border-primary";
+export let labelClass = "";
+export let descriptionClass = "";
+export let size = "md";
+export let id = getId();
+export let checked = false;
+export let label = "";
+export let name = "";
+export let description = "";
+export let tabindex = 0;
+export let disabled = void 0;
+export let readonly = void 0;
+export let required = void 0;
+const labelSizePreset = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-base font-bold"
+};
+export let validationMessageClass = "";
+export let validate = void 0;
+let validation;
+const setValidationResult = (res) => validation = res;
+let idDesc = getId();
+</script>
+
+<div class={twMerge(`flex items-start mb-4 ${_class}`)}>
+	<div class="flex h-6 items-center ml-1">
+		<input
+			{id}
+			type="checkbox"
+			bind:checked
+			aria-checked={checked}
+			aria-describedby={description ? idDesc : undefined}
+			{name}
+			class={twMerge(`
+				size-4 rounded
+				bg-gray-100
+				border-gray-300
+				shadow-sm
+				text-primary
+				cursor-pointer
+				focus:border-primary
+				focus:ring-4
+				focus:ring-offset-0
+				focus:ring-primary
+				focus:ring-opacity-20
+				disabled:cursor-not-allowed
+				${validation && !validation.valid ? invalidClass : ''}
+			`)}
+			{disabled}
+			{readonly}
+			{required}
+			{tabindex}
+			use:validateAction={validate
+				? { ...(validate === true ? {} : validate), setValidationResult }
+				: undefined}
+		/>
+	</div>
+	<div class="ml-3 w-full">
+		{#if label}
+			<label
+				for={id}
+				class={twMerge(`block w-full ${labelSizePreset[size]} ${labelClass}`)}
+				class:cursor-pointer={!disabled}
+				class:cursor-not-allowed={disabled}
+			>
+				{@html label}
+			</label>
+		{/if}
+		{#if validation && !validation?.valid}
+			<div
+				transition:slide={{ duration: 150 }}
+				class={twMerge(`text-xs text-primary tracking-tight ${validationMessageClass}`)}
+			>
+				{@html validation.message}
+			</div>
+		{/if}
+		{#if description || $$slots.description}
+			<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+			<div
+				class={twMerge(`text-sm opacity-50 ${descriptionClass}`)}
+				class:cursor-pointer={!disabled}
+				class:cursor-not-allowed={disabled}
+				on:click={() => !disabled && (checked = !checked)}
+			>
+				{#if $$slots.description}
+					<slot name="description" />
+				{:else}
+					{@html description}
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+import { type ValidateOptions } from '../../index.js';
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        invalidClass?: string | undefined;
+        labelClass?: string | undefined;
+        descriptionClass?: string | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        id?: string | undefined;
+        checked?: boolean | undefined;
+        label?: string | undefined;
+        name?: string | undefined;
+        description?: string | undefined;
+        tabindex?: number | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        required?: boolean | undefined;
+        validationMessageClass?: string | undefined;
+        validate?: ValidateOptions | true | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        description: {};
+    };
+};
+export type FieldCheckboxProps = typeof __propDef.props;
+export type FieldCheckboxEvents = typeof __propDef.events;
+export type FieldCheckboxSlots = typeof __propDef.slots;
+export default class FieldCheckbox extends SvelteComponent<FieldCheckboxProps, FieldCheckboxEvents, FieldCheckboxSlots> {
+}
+export {};

package/dist/components/Input/FieldRadios.svelte

@@ -0,0 +1,51 @@
+<script>import { twMerge } from "tailwind-merge";
+import XFieldRadioInternal from "./XFieldRadioInternal.svelte";
+import { createClog } from "@marianmeres/clog";
+import { getId } from "../../index.js";
+const clog = createClog("FieldRadio");
+export let options = [];
+let _class = "";
+export { _class as class };
+export let optionClass = "";
+export let labelClass = "";
+export let descriptionClass = "";
+export let invalidClass = "";
+export let size = "md";
+export let name = "";
+export let value;
+export let disabled = false;
+export let required = false;
+export let tabindex = 0;
+let _options = [];
+$:
+  _options = options.map((v) => {
+    if (typeof v === "string") {
+      v = { label: v };
+    }
+    return v;
+  });
+$:
+  name ||= getId();
+</script>
+
+{#if options.length}
+	<div class={twMerge(`space-y-1 ${_class}`)}>
+		{#each _options as o, i}
+			<XFieldRadioInternal
+				bind:group={value}
+				{name}
+				label={o.label}
+				value={o.value || o.label}
+				description={o.description}
+				class={optionClass}
+				{labelClass}
+				{descriptionClass}
+				{disabled}
+				{tabindex}
+				{required}
+				{invalidClass}
+				{size}
+			/>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        options?: (string | {
+            label: string;
+            value?: string | undefined;
+            description?: string | undefined;
+        })[] | undefined;
+        class?: string | undefined;
+        optionClass?: string | undefined;
+        labelClass?: string | undefined;
+        descriptionClass?: string | undefined;
+        invalidClass?: string | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        name?: string | undefined;
+        value: any;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
+        tabindex?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldRadiosProps = typeof __propDef.props;
+export type FieldRadiosEvents = typeof __propDef.events;
+export type FieldRadiosSlots = typeof __propDef.slots;
+export default class FieldRadios extends SvelteComponent<FieldRadiosProps, FieldRadiosEvents, FieldRadiosSlots> {
+}
+export {};

package/dist/components/Input/FieldSelect.svelte

@@ -0,0 +1,125 @@
+<script>import { slide } from "svelte/transition";
+import { twMerge } from "tailwind-merge";
+import {
+  getId,
+  validate as validateAction
+} from "../../index.js";
+const inputSizePreset = {
+  sm: "text-sm placeholder:text-sm",
+  md: "text-base placeholder:text-base",
+  lg: "text-lg  placeholder:text-lg"
+};
+const labelSizePreset = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-base font-bold"
+};
+export let options = [];
+let _class = "";
+export { _class as class };
+export let wrapClass = "";
+export let invalidClass = "border-primary";
+export let size = "md";
+export let id = getId();
+export let value;
+export let label = "";
+export let name = "";
+export let tabindex = 0;
+export let description = "";
+export let descriptionClass = "";
+export let disabled = false;
+export let required = false;
+export let validationMessageClass = "";
+export let validate = void 0;
+let validation;
+const setValidationResult = (res) => validation = res;
+let _options = [];
+$:
+  _options = options.map((v) => {
+    if (typeof v === "string") {
+      v = { label: v };
+    }
+    if (v.value === void 0) {
+      v.value = v.label;
+    }
+    return v;
+  });
+$:
+  inputClass = twMerge(`
+		rounded-md border-0 block w-full flex-1
+		bg-transparent
+		tracking-tight
+		focus:outline-0 focus-visible:ring-0
+		placeholder:text-black/35 placeholder:tracking-tight
+		${inputSizePreset[size]}
+	`);
+</script>
+
+<div class={twMerge(`mb-4 ${_class}`)}>
+	<div class="flex items-end px-2 mb-1">
+		{#if label || $$slots.label}
+			<label for={id} class="block flex-1 {labelSizePreset[size]}">
+				{#if $$slots.label}
+					<slot name="label" />
+				{:else}
+					{@html label}
+				{/if}
+			</label>
+		{/if}
+		<slot name="right_of_label" />
+	</div>
+	<div
+		class={twMerge(`
+            flex items-center
+            rounded-md border border-gray-300
+            bg-gray-100
+            focus-within:border-primary
+            focus-within:ring-4
+            focus-within:ring-primary
+            focus-within:ring-opacity-20
+			${wrapClass}
+			${validation && !validation.valid ? invalidClass : ''}
+        `)}
+		class:cursor-not-allowed={disabled}
+		class:opacity-50={disabled}
+	>
+		<slot name="input_before" {id} />
+		<select
+			class={inputClass}
+			bind:value
+			{disabled}
+			{required}
+			{tabindex}
+			{name}
+			use:validateAction={validate
+				? { ...(validate === true ? {} : validate), setValidationResult }
+				: undefined}
+		>
+			{#each _options as o, i}
+				<option value={o.value}>{o.label}</option>
+			{/each}
+		</select>
+
+		<slot name="input_after" {id} />
+	</div>
+	{#if validation && !validation?.valid}
+		<div
+			transition:slide={{ duration: 150 }}
+			class={twMerge(
+				`mt-1 text-xs text-primary px-2 tracking-tight ${validationMessageClass}`
+			)}
+		>
+			{@html validation.message}
+		</div>
+	{/if}
+	{#if description}
+		<div class={twMerge(`mx-2 mt-1 text-sm opacity-50 ${descriptionClass}`)}>
+			{@html description}
+		</div>
+	{/if}
+	{#if $$slots.below}
+		<div class="mx-2 mt-1">
+			<slot name="below" {id} />
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,47 @@
+import { SvelteComponent } from "svelte";
+import { type ValidateOptions } from '../../index.js';
+declare const __propDef: {
+    props: {
+        options?: (string | {
+            label: string;
+            value?: string | undefined;
+        })[] | undefined;
+        class?: string | undefined;
+        wrapClass?: string | undefined;
+        invalidClass?: string | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        id?: string | undefined;
+        value: any;
+        label?: string | undefined;
+        name?: string | undefined;
+        tabindex?: number | undefined;
+        description?: string | undefined;
+        descriptionClass?: string | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
+        validationMessageClass?: string | undefined;
+        validate?: ValidateOptions | true | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+        right_of_label: {};
+        input_before: {
+            id: string;
+        };
+        input_after: {
+            id: string;
+        };
+        below: {
+            id: string;
+        };
+    };
+};
+export type FieldSelectProps = typeof __propDef.props;
+export type FieldSelectEvents = typeof __propDef.events;
+export type FieldSelectSlots = typeof __propDef.slots;
+export default class FieldSelect extends SvelteComponent<FieldSelectProps, FieldSelectEvents, FieldSelectSlots> {
+}
+export {};

package/dist/components/Input/Fieldset.svelte

@@ -0,0 +1,27 @@
+<script>import { twMerge } from "tailwind-merge";
+let _class = "";
+export { _class as class };
+export let legend = "";
+export let legendClass = "";
+</script>
+
+<fieldset
+	class={twMerge(`
+        border border-gray-200 
+        p-4 pt-3
+        rounded-md
+        ${_class}
+    `)}
+>
+	{#if legend}
+		<legend
+			class={twMerge(`
+                px-2
+                ${legendClass}
+            `)}
+		>
+			{@html legend}
+		</legend>
+	{/if}
+	<slot />
+</fieldset>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        legend?: string | undefined;
+        legendClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FieldsetProps = typeof __propDef.props;
+export type FieldsetEvents = typeof __propDef.events;
+export type FieldsetSlots = typeof __propDef.slots;
+export default class Fieldset extends SvelteComponent<FieldsetProps, FieldsetEvents, FieldsetSlots> {
+}
+export {};

package/dist/components/Input/XFieldRadioInternal.svelte

@@ -0,0 +1,102 @@
+<script>import { twMerge } from "tailwind-merge";
+import {
+  getId,
+  validate as validateAction
+} from "../../index.js";
+import { slide } from "svelte/transition";
+import { createEventDispatcher, onMount } from "svelte";
+const dispatch = createEventDispatcher();
+let _class = "";
+export { _class as class };
+export let invalidClass = "border-primary";
+export let labelClass = "";
+export let descriptionClass = "";
+export let size = "md";
+export let value;
+export let group;
+export let label;
+export let name;
+export let description = "";
+export let tabindex = 0;
+export let disabled = false;
+export let required = false;
+const labelSizePreset = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-base font-bold"
+};
+export let validationMessageClass = "";
+export let validate = void 0;
+let validation;
+const setValidationResult = (res) => {
+  validation = res;
+  dispatch("validation", validation);
+};
+let id = getId();
+let idDesc = getId();
+</script>
+
+<div class={twMerge(`flex items-start ${_class}`)}>
+	<div class="flex h-6 items-center ml-1">
+		<input
+			{id}
+			type="radio"
+			{value}
+			bind:group
+			aria-describedby={description ? idDesc : undefined}
+			{name}
+			class={twMerge(`
+				size-4 rounded-full
+				bg-gray-100
+				border-gray-300
+				shadow-sm
+				text-primary
+				cursor-pointer
+				focus:border-primary
+				focus:ring-4
+				focus:ring-offset-0
+				focus:ring-primary
+				focus:ring-opacity-20
+				disabled:cursor-not-allowed
+				${validation && !validation.valid ? invalidClass : ''}
+			`)}
+			{disabled}
+			{required}
+			{tabindex}
+			use:validateAction={validate
+				? { ...(validate === true ? {} : validate), setValidationResult }
+				: undefined}
+		/>
+	</div>
+	<div class="ml-3 w-full">
+		{#if label}
+			<label
+				for={id}
+				class={twMerge(`block w-full ${labelSizePreset[size]} ${labelClass}`)}
+				class:cursor-pointer={!disabled}
+				class:cursor-not-allowed={disabled}
+			>
+				{@html label}
+			</label>
+		{/if}
+		{#if validation && !validation?.valid}
+			<div
+				transition:slide={{ duration: 150 }}
+				class={twMerge(`text-xs text-primary tracking-tight ${validationMessageClass}`)}
+			>
+				{@html validation.message}
+			</div>
+		{/if}
+		{#if description}
+			<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+			<div
+				class={twMerge(`text-sm opacity-50 ${descriptionClass}`)}
+				class:cursor-pointer={!disabled}
+				class:cursor-not-allowed={disabled}
+				on:click={() => !disabled && (group = value)}
+			>
+				{@html description}
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import { type ValidateOptions } from '../../index.js';
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        invalidClass?: string | undefined;
+        labelClass?: string | undefined;
+        descriptionClass?: string | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        value: any;
+        group: any;
+        label: string;
+        name: string;
+        description?: string | undefined;
+        tabindex?: number | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
+        validationMessageClass?: string | undefined;
+        validate?: ValidateOptions | true | undefined;
+    };
+    events: {
+        validation: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type XFieldRadioInternalProps = typeof __propDef.props;
+export type XFieldRadioInternalEvents = typeof __propDef.events;
+export type XFieldRadioInternalSlots = typeof __propDef.slots;
+export default class XFieldRadioInternal extends SvelteComponent<XFieldRadioInternalProps, XFieldRadioInternalEvents, XFieldRadioInternalSlots> {
+}
+export {};

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

@@ -35,7 +35,7 @@ declare const __propDef: {
         stopPropagation?: boolean | undefined;
         preventDefault?: boolean | undefined;
         preHook?: ((previosValue: boolean) => Promise<void | boolean>) | undefined;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/Thc/Thc.svelte

@@ -0,0 +1,15 @@
+<script context="module"></script>
+
+<script>export let forceAsHtml = false;
+export let thc;
+</script>
+
+{#if typeof thc === 'string'}
+	{#if forceAsHtml}{@html thc}{:else}{thc}{/if}
+{:else if thc?.text}
+	{#if forceAsHtml}{@html thc.text}{:else}{thc.text}{/if}
+{:else if thc?.html}
+	{@html thc.html}
+{:else if thc?.component}
+	<svelte:component this={thc.component} {...thc?.props || {}} />
+{/if}

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+interface WithComponent {
+    component: any;
+    props?: Record<string, any>;
+}
+interface WithText {
+    text: string;
+}
+interface WithHtml {
+    html: string;
+}
+export type THC = string | WithText | WithHtml | WithComponent;
+declare const __propDef: {
+    props: {
+        forceAsHtml?: boolean | undefined;
+        thc: THC;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThcProps = typeof __propDef.props;
+export type ThcEvents = typeof __propDef.events;
+export type ThcSlots = typeof __propDef.slots;
+export default class Thc extends SvelteComponent<ThcProps, ThcEvents, ThcSlots> {
+}
+export {};