@cloudparker/moldex.js 0.0.27 → 0.0.29

package/dist/views/core/input/components/email-field/email-field.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type InputFieldPropsType } from '../input-field/input-field.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const EmailField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type EmailField = InstanceType<typeof EmailField>;
+export default EmailField;

package/dist/views/core/input/components/file-field/file-field.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">import { ripple } from "../../../../../actions";
+import { openFilePicker } from "../../../../../services";
+import { mdiAttachment } from "../../../icon";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import InputField, {} from "../input-field/input-field.svelte";
+let {
+  appearance,
+  size,
+  className,
+  accept = "",
+  multiple = false,
+  value,
+  ...props
+} = $props();
+let btnRoundedClassName = $state("");
+let btnIconSizeClassName = $state("");
+let fileNameDisplay = $state("");
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+async function handleFileAttachment() {
+  let res = await openFilePicker({ accept, multiple });
+  if (res) {
+    value = res;
+    if (multiple) {
+      let files = value;
+      fileNameDisplay = files.map((file) => file.name).join(", ");
+    } else {
+      let file = value;
+      fileNameDisplay = file.name;
+    }
+  }
+}
+$effect(() => {
+  if (size) {
+    switch (size) {
+      case "lg":
+        btnIconSizeClassName = "!h-7 !w-7";
+        break;
+      case "md":
+        btnIconSizeClassName = "!h-6 !w-6";
+        break;
+      case "sm":
+        btnIconSizeClassName = "!h-5 !w-5";
+        break;
+      case "xs":
+        btnIconSizeClassName = "!h-4 !w-4";
+        break;
+    }
+  }
+});
+$effect(() => {
+  if (!appearance || appearance == "normal") {
+    btnRoundedClassName = "rounded-tr-lg rounded-br-lg";
+  }
+});
+</script>
+
+{#snippet fileButton()}
+	<button
+		class="px-3 h-full hover:bg-gray-100 {btnRoundedClassName} "
+		use:ripple
+		onclick={handleFileAttachment}
+	>
+		<Icon path={mdiAttachment} className=" {btnIconSizeClassName}"></Icon>
+	</button>
+{/snippet}
+
+<InputField
+	bind:this={inputFieldRef}
+	{...props}
+	{appearance}
+	{size}
+	value={fileNameDisplay}
+	className="pr-14 {className}"
+	type="text"
+	readonly
+	rightSnippet={fileButton}
+/>

package/dist/views/core/input/components/file-field/file-field.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type InputFieldPropsType } from '../input-field/input-field.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FileField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+    accept?: string;
+    multiple?: boolean;
+    value?: File | File[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type FileField = InstanceType<typeof FileField>;
+export default FileField;

package/dist/views/core/input/components/input-field/input-field.svelte

@@ -0,0 +1,282 @@
+<script module lang="ts"></script>
+
+<script lang="ts">import Label from "../label/label.svelte";
+let {
+  appearance = "normal",
+  ariaControls,
+  ariaExpanded,
+  autofocus = false,
+  className = "",
+  cols,
+  containerClassName = "",
+  contentSnippet,
+  contentSnippetClassName,
+  disabled = false,
+  floatingLabel = false,
+  hasRequiredSymbol = true,
+  id = "",
+  label = "",
+  labelClassName = "",
+  leftSnippet,
+  leftSnippetContainerClassName = "",
+  max,
+  maxlength,
+  min,
+  minlength,
+  multiple = false,
+  name = "",
+  title,
+  onblur,
+  onchange,
+  onclick,
+  ondblclick,
+  ondrag,
+  ondragover,
+  ondrop,
+  onfocus,
+  oninput,
+  onkeydown,
+  onkeypress,
+  onkeyup,
+  onmousedown,
+  onmouseup,
+  pattern = "",
+  placeholder = "",
+  readonly = false,
+  required = false,
+  requiredSymbol = "*",
+  requiredSymbolColor = "red",
+  rightSnippet,
+  rightSnippetContainerClassName = "",
+  role,
+  rows = 5,
+  size = "md",
+  step,
+  type = "text",
+  value = $bindable("")
+} = $props();
+let inputRef = $state(null);
+let sizeClassName = $state("");
+let appearanceClassName = $state("");
+let floatingLabelClassName = $state("");
+let floatingLabelPaddingClassName = $state("");
+let floatingLabelTextClassName = $state("");
+export function focus() {
+  inputRef && inputRef.focus();
+}
+$effect(() => {
+  if (floatingLabel || leftSnippet != null || rightSnippet != null) {
+    containerClassName = (containerClassName || "") + " relative";
+  }
+});
+$effect(() => {
+  if (floatingLabel) {
+    if (size) {
+      let flpcn = "";
+      switch (size) {
+        case "lg":
+          flpcn = ` px-1 peer-focus:px-1 peer-placeholder-shown:px-4 `;
+          floatingLabelTextClassName = "text-base";
+          break;
+        case "md":
+          flpcn = " px-1 peer-focus:px-1 peer-placeholder-shown:px-2.5 ";
+          floatingLabelTextClassName = "text-sm";
+          break;
+        case "sm":
+          flpcn = " px-1 peer-focus:px-1 peer-placeholder-shown:px-2";
+          floatingLabelTextClassName = "text-xs";
+          break;
+        case "xs":
+          flpcn = " px-0 peer-focus:px-0 peer-placeholder-shown:px-1 ";
+          floatingLabelTextClassName = "text-xs";
+          break;
+      }
+      floatingLabelPaddingClassName = flpcn;
+    }
+    floatingLabelClassName = `absolute duration-300 transform top-0 rounded -translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-0 peer-placeholder-shown:start-0 peer-focus:start-1 bg-white peer-placeholder-shown:bg-transparent peer-focus:bg-white start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
+  }
+});
+$effect(() => {
+  if (appearance) {
+    switch (appearance) {
+      case "normal":
+        appearanceClassName = "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 ";
+        break;
+      case "box":
+        appearanceClassName = "bg-gray-50 border border-gray-300 text-gray-900 focus:ring-indigo-500 focus:border-indigo-500   ";
+        break;
+      case "fill":
+        appearanceClassName = "bg-gray-100 border-0 appearance-none focus:bg-gray-200 focus:outline-none focus:ring-0";
+        break;
+      case "underline":
+        appearanceClassName = "bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600";
+        break;
+      case "fill-underline":
+        appearanceClassName = "bg-gray-100 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600";
+        break;
+      case "none":
+        appearanceClassName = "hover:bg-gray-100 focus:bg-gray-100 border-0 focus:outline-none focus:ring-0 appearance-none";
+        break;
+    }
+  }
+});
+$effect(() => {
+  if (size) {
+    switch (size) {
+      case "lg":
+        sizeClassName = "p-4 text-base";
+        break;
+      case "md":
+        sizeClassName = "p-2.5 text-sm";
+        break;
+      case "sm":
+        sizeClassName = "p-2 text-xs";
+        break;
+      case "xs":
+        sizeClassName = "p-1 text-xs";
+        break;
+    }
+  }
+});
+$effect(() => {
+  if (name && !id) {
+    id = name;
+  } else if (id && !name) {
+    name = id;
+  }
+});
+$effect(() => {
+  if (inputRef && autofocus) {
+    inputRef.focus();
+  }
+});
+</script>
+
+{#snippet labelSnippet()}
+	<Label
+		forName={id}
+		{label}
+		className="{floatingLabelClassName} {labelClassName}"
+		{required}
+		{requiredSymbolColor}
+		{requiredSymbol}
+		{hasRequiredSymbol}
+	/>
+{/snippet}
+
+{#if !floatingLabel && label}
+	{@render labelSnippet()}
+{/if}
+
+<div class="w-full {containerClassName}">
+	{#if leftSnippet}
+		<div
+			class="absolute flex items-center justify-center left-children {leftSnippetContainerClassName}"
+		>
+			{@render leftSnippet()}
+		</div>
+	{/if}
+
+	{#if type == 'textarea'}
+		<textarea
+			bind:this={inputRef}
+			bind:value
+			class="block w-full peer {appearanceClassName} {sizeClassName} {className}"
+			{title}
+			{id}
+			{name}
+			{placeholder}
+			{required}
+			{disabled}
+			{readonly}
+			{maxlength}
+			{minlength}
+			{rows}
+			{cols}
+			{onchange}
+			{oninput}
+			{onfocus}
+			{onblur}
+			{ondblclick}
+			{onclick}
+			{onmousedown}
+			{onmouseup}
+			{onkeydown}
+			{onkeyup}
+			{onkeypress}
+			{ondrop}
+			{ondrag}
+			{ondragover}
+		></textarea>
+	{:else}
+		<input
+			bind:this={inputRef}
+			bind:value
+			class="block w-full peer {appearanceClassName} {sizeClassName} {className}"
+			{title}
+			{type}
+			{id}
+			{name}
+			{placeholder}
+			{required}
+			{disabled}
+			{readonly}
+			{maxlength}
+			{minlength}
+			{min}
+			{max}
+			{step}
+			{pattern}
+			{multiple}
+			{role}
+			{onchange}
+			{oninput}
+			{onfocus}
+			{onblur}
+			{ondblclick}
+			{onclick}
+			{onmousedown}
+			{onmouseup}
+			{onkeydown}
+			{onkeyup}
+			{onkeypress}
+			{ondrop}
+			{ondrag}
+			{ondragover}
+			aria-controls={ariaControls}
+			aria-expanded={ariaExpanded}
+		/>
+	{/if}
+	{#if contentSnippet}
+		<div
+			class="absolute inset-0 pointer-events-none block w-full overflow-hidden {appearanceClassName} {sizeClassName}   {contentSnippetClassName}"
+		>
+			{@render contentSnippet()}
+		</div>
+	{/if}
+	{#if rightSnippet}
+		<div
+			class="absolute flex items-center justify-center right-children {rightSnippetContainerClassName}"
+		>
+			{@render rightSnippet()}
+		</div>
+	{/if}
+
+	{#if label && floatingLabel}
+		{@render labelSnippet()}
+	{/if}
+</div>
+
+<style>
+	.left-children {
+		left: 2px;
+		top: 2px;
+		bottom: 2px;
+	}
+
+	.right-children {
+		right: 2px;
+		top: 2px;
+		bottom: 2px;
+	}
+</style>

package/dist/views/core/input/components/input-field/input-field.svelte.d.ts

@@ -0,0 +1,81 @@
+export type InputFieldSizeType = 'lg' | 'md' | 'sm' | 'xs';
+export type InputFieldAppearanceType = 'normal' | 'box' | 'fill' | 'underline' | 'fill-underline' | 'none';
+export type InputValueType = string | string[] | number | number[] | Date | Date[] | File | File[] | null | undefined;
+export type InputFieldPropsType = {
+    appearance?: InputFieldAppearanceType;
+    ariaControls?: string;
+    ariaExpanded?: boolean;
+    autofocus?: boolean;
+    className?: string;
+    cols?: number;
+    containerClassName?: string;
+    contentSnippet?: Snippet;
+    contentSnippetClassName?: string;
+    disabled?: boolean;
+    floatingLabel?: boolean;
+    hasRequiredSymbol?: boolean;
+    iconClassName?: string;
+    iconPath?: string;
+    id?: string;
+    label?: string;
+    labelClassName?: string;
+    leftSnippet?: Snippet;
+    leftSnippetContainerClassName?: string;
+    max?: number;
+    maxlength?: number;
+    min?: number;
+    minlength?: number;
+    multiple?: boolean;
+    name?: string;
+    title?: string;
+    onblur?: (ev: any) => void;
+    onchange?: (ev: any) => void;
+    onclick?: (ev: MouseEvent) => void;
+    ondblclick?: (ev: MouseEvent) => void;
+    ondrag?: (ev: DragEvent) => void;
+    ondragover?: (ev: DragEvent) => void;
+    ondrop?: (ev: DragEvent) => void;
+    onfocus?: (ev: any) => void;
+    oninput?: (ev: any) => void;
+    onkeydown?: (ev: KeyboardEvent) => void;
+    onkeypress?: (ev: KeyboardEvent) => void;
+    onkeyup?: (ev: KeyboardEvent) => void;
+    onmousedown?: (ev: MouseEvent) => void;
+    onmouseup?: (ev: MouseEvent) => void;
+    pattern?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    requiredSymbol?: string;
+    requiredSymbolColor?: string;
+    rightSnippet?: Snippet;
+    rightSnippetContainerClassName?: string;
+    role?: AriaRole;
+    rows?: number;
+    size?: InputFieldSizeType;
+    step?: number;
+    type?: HTMLInputTypeAttribute | 'textarea';
+    value?: InputValueType;
+};
+import type { Snippet } from 'svelte';
+import type { HTMLInputTypeAttribute, AriaRole } from 'svelte/elements';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InputField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "value">;
+type InputField = InstanceType<typeof InputField>;
+export default InputField;

package/dist/views/core/{form → input}/components/label/label.svelte

@@ -12,9 +12,7 @@
 
 <label
 	for={forName || ''}
-	class="block mb-2 text-sm font-medium text-gray-900 dark:text-white {hasRequiredSymbol && required
-		? 'required'
-		: ''} {className}"
+	class="block text-sm text-gray-500 {hasRequiredSymbol && required ? 'required' : ''} {className}"
 	style="--requiredSymbolColor:{requiredSymbolColor}; --requiredSymbol: '{requiredSymbol}'; "
 >
 	{#if children}

package/dist/views/core/input/components/number-field/number-field.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
+let props = $props();
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+</script>
+
+<InputField bind:this={inputFieldRef} {...props} type="number" />

package/dist/views/core/input/components/number-field/number-field.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type InputFieldPropsType } from '../input-field/input-field.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NumberField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type NumberField = InstanceType<typeof NumberField>;
+export default NumberField;

package/dist/views/core/input/components/password-field/password-field.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">import { ripple } from "../../../../../actions";
+import { mdiEyeOffOutline, mdiEyeOutline } from "../../../icon";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import InputField, {} from "../input-field/input-field.svelte";
+let {
+  type = "password",
+  size,
+  appearance,
+  buttonClassName,
+  iconClassName,
+  ...props
+} = $props();
+let btnRoundedClassName = $state("");
+let btnIconSizeClassName = $state("");
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+function handleTogglePassword() {
+  if (type == "password") {
+    type = "text";
+  } else {
+    type = "password";
+  }
+}
+$effect(() => {
+  if (size) {
+    switch (size) {
+      case "lg":
+        btnIconSizeClassName = "!h-7 !w-7";
+        break;
+      case "md":
+        btnIconSizeClassName = "!h-6 !w-6";
+        break;
+      case "sm":
+        btnIconSizeClassName = "!h-5 !w-5";
+        break;
+      case "xs":
+        btnIconSizeClassName = "!h-4 !w-4";
+        break;
+    }
+  }
+});
+$effect(() => {
+  if (!appearance || appearance == "normal") {
+    btnRoundedClassName = "rounded-tr-lg rounded-br-lg";
+  }
+});
+</script>
+
+{#snippet showPasswordButton()}
+	<button
+		class="px-3 h-full hover:bg-gray-100 {btnRoundedClassName} {buttonClassName}"
+		use:ripple
+		onclick={handleTogglePassword}
+	>
+		<Icon
+			path={type == 'password' ? mdiEyeOffOutline : mdiEyeOutline}
+			className=" {btnIconSizeClassName} {iconClassName}"
+		/>
+	</button>
+{/snippet}
+
+<InputField
+	bind:this={inputFieldRef}
+	{...props}
+	{type}
+	maxlength={props?.maxlength || 200}
+	rightSnippet={showPasswordButton}
+	{size}
+	{appearance}
+/>

package/dist/views/core/input/components/password-field/password-field.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type InputFieldPropsType } from '../input-field/input-field.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PasswordField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+    buttonClassName?: string;
+    iconClassName?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type PasswordField = InstanceType<typeof PasswordField>;
+export default PasswordField;