@cloudparker/moldex.js 0.0.28 → 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/{form → input}/components/input-field/input-field.svelte

@@ -1,50 +1,59 @@
-<script context="module" lang="ts"></script>
+<script module lang="ts"></script>
 
-<script lang="ts">import Icon from "../../../icon/components/icon/icon.svelte";
-import Label from "../label/label.svelte";
+<script lang="ts">import Label from "../label/label.svelte";
 let {
-  id = "",
-  name = "",
-  value = $bindable(""),
+  appearance = "normal",
+  ariaControls,
+  ariaExpanded,
+  autofocus = false,
   className = "",
-  label = "",
-  type = "text",
-  labelClassName = "",
+  cols,
   containerClassName = "",
-  placeholder = "",
-  required = false,
-  requiredSymbolColor = "red",
-  requiredSymbol = "*",
-  hasRequiredSymbol = true,
+  contentSnippet,
+  contentSnippetClassName,
   disabled = false,
-  autofocus = false,
-  readonly = false,
+  floatingLabel = false,
+  hasRequiredSymbol = true,
+  id = "",
+  label = "",
+  labelClassName = "",
+  leftSnippet,
+  leftSnippetContainerClassName = "",
+  max,
   maxlength,
-  minlength,
   min,
-  max,
-  step,
-  size = "md",
-  appearance = "normal",
-  floatingLabel = false,
-  pattern = "",
+  minlength,
   multiple = false,
-  iconPath,
-  iconClassName = "",
-  onchange,
-  oninput,
-  onfocus,
+  name = "",
+  title,
   onblur,
-  ondblclick,
+  onchange,
   onclick,
-  onmousedown,
-  onmouseup,
+  ondblclick,
+  ondrag,
+  ondragover,
+  ondrop,
+  onfocus,
+  oninput,
   onkeydown,
-  onkeyup,
   onkeypress,
-  ondrop,
-  ondrag,
-  ondragover
+  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("");
@@ -52,42 +61,14 @@ let appearanceClassName = $state("");
 let floatingLabelClassName = $state("");
 let floatingLabelPaddingClassName = $state("");
 let floatingLabelTextClassName = $state("");
-let iconPaddingClassName = $state();
-let iconSizeClassName = $state();
-let floatingLabelIconTextPaddingClassName = $state("");
+export function focus() {
+  inputRef && inputRef.focus();
+}
 $effect(() => {
-  if (iconPath || floatingLabel) {
+  if (floatingLabel || leftSnippet != null || rightSnippet != null) {
     containerClassName = (containerClassName || "") + " relative";
   }
 });
-$effect(() => {
-  if (iconPath) {
-    let flpcn;
-    switch (size) {
-      case "lg":
-        iconPaddingClassName = "ps-12";
-        flpcn = ` peer-placeholder-shown:ps-12 `;
-        iconSizeClassName = "!w-8 !h-8";
-        break;
-      case "md":
-        iconPaddingClassName = "ps-10";
-        flpcn = ` peer-placeholder-shown:ps-10 `;
-        iconSizeClassName = "!w-6 !h-6";
-        break;
-      case "sm":
-        iconPaddingClassName = "ps-9";
-        flpcn = ` peer-placeholder-shown:ps-9 `;
-        iconSizeClassName = "!w-5 !h-5";
-        break;
-      case "xs":
-        iconPaddingClassName = "ps-7";
-        flpcn = ` peer-placeholder-shown:ps-7 `;
-        iconSizeClassName = "!w-3 !h-3";
-        break;
-    }
-    floatingLabelIconTextPaddingClassName = flpcn;
-  }
-});
 $effect(() => {
   if (floatingLabel) {
     if (size) {
@@ -110,9 +91,9 @@ $effect(() => {
           floatingLabelTextClassName = "text-xs";
           break;
       }
-      floatingLabelPaddingClassName = floatingLabelIconTextPaddingClassName + flpcn;
+      floatingLabelPaddingClassName = flpcn;
     }
-    labelClassName = (labelClassName || "") + `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-transparent peer-placeholder-shown:bg-transparent peer-focus:bg-white start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
+    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(() => {
@@ -133,6 +114,9 @@ $effect(() => {
       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;
     }
   }
 });
@@ -157,6 +141,8 @@ $effect(() => {
 $effect(() => {
   if (name && !id) {
     id = name;
+  } else if (id && !name) {
+    name = id;
   }
 });
 $effect(() => {
@@ -170,59 +156,111 @@ $effect(() => {
 	<Label
 		forName={id}
 		{label}
-		className={labelClassName}
+		className="{floatingLabelClassName} {labelClassName}"
 		{required}
 		{requiredSymbolColor}
 		{requiredSymbol}
 		{hasRequiredSymbol}
-	></Label>
-{/snippet}
-
-{#snippet createIcon()}
-	<div class="absolute inset-y-0 start-0 flex items-center ps-2.5 pointer-events-none {className}">
-		<Icon path={iconPath!} className="text-gray-500 {iconSizeClassName} {iconClassName}" />
-	</div>
+	/>
 {/snippet}
 
-{#if !floatingLabel && (label || iconPath)}
+{#if !floatingLabel && label}
 	{@render labelSnippet()}
 {/if}
-<div class={containerClassName}>
-	{#if iconPath}
-		{@render createIcon()}
+
+<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}
-	<input
-		bind:this={inputRef}
-		bind:value
-		{type}
-		{id}
-		{name}
-		class="block w-full peer ps- {iconPaddingClassName} {appearanceClassName} {floatingLabelClassName}  {sizeClassName}   {className}"
-		{placeholder}
-		{required}
-		{disabled}
-		{readonly}
-		{maxlength}
-		{minlength}
-		{min}
-		{max}
-		{step}
-		{pattern}
-		{onchange}
-		{oninput}
-		{onfocus}
-		{onblur}
-		{ondblclick}
-		{onclick}
-		{onmousedown}
-		{onmouseup}
-		{onkeydown}
-		{onkeyup}
-		{onkeypress}
-		{ondrop}
-		{ondrag}
-		{ondragover}
-	/>
 
 	{#if label && floatingLabel}
 		{@render labelSnippet()}
@@ -230,4 +268,15 @@ $effect(() => {
 </div>
 
 <style>
+	.left-children {
+		left: 2px;
+		top: 2px;
+		bottom: 2px;
+	}
+
+	.right-children {
+		right: 2px;
+		top: 2px;
+		bottom: 2px;
+	}
 </style>

package/dist/views/core/{form → input}/components/input-field/input-field.svelte.d.ts

@@ -1,50 +1,64 @@
-export type InputFieldTypesType = 'text' | 'number' | 'date';
 export type InputFieldSizeType = 'lg' | 'md' | 'sm' | 'xs';
-export type InputFieldAppearanceType = 'normal' | 'box' | 'fill' | 'underline' | 'fill-underline';
+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 = {
-    id?: string;
-    label?: string;
-    name?: string;
+    appearance?: InputFieldAppearanceType;
+    ariaControls?: string;
+    ariaExpanded?: boolean;
+    autofocus?: boolean;
     className?: string;
-    value?: string;
-    type?: InputFieldTypesType;
-    labelClassName?: string;
+    cols?: number;
     containerClassName?: string;
-    placeholder?: string;
-    required?: boolean;
+    contentSnippet?: Snippet;
+    contentSnippetClassName?: string;
     disabled?: boolean;
-    autofocus?: boolean;
-    readonly?: boolean;
+    floatingLabel?: boolean;
+    hasRequiredSymbol?: boolean;
+    iconClassName?: string;
+    iconPath?: string;
+    id?: string;
+    label?: string;
+    labelClassName?: string;
+    leftSnippet?: Snippet;
+    leftSnippetContainerClassName?: string;
+    max?: number;
     maxlength?: number;
-    minlength?: number;
     min?: number;
-    max?: number;
-    step?: number;
-    requiredSymbolColor?: string;
-    requiredSymbol?: string;
-    hasRequiredSymbol?: boolean;
-    size?: InputFieldSizeType;
-    appearance?: InputFieldAppearanceType;
-    floatingLabel?: boolean;
-    pattern?: string;
+    minlength?: number;
     multiple?: boolean;
-    iconPath?: string;
-    iconClassName?: string;
-    onchange?: (ev: any) => void;
-    oninput?: (ev: any) => void;
-    onfocus?: (ev: any) => void;
+    name?: string;
+    title?: string;
     onblur?: (ev: any) => void;
-    ondblclick?: (ev: MouseEvent) => void;
+    onchange?: (ev: any) => void;
     onclick?: (ev: MouseEvent) => void;
-    onmousedown?: (ev: MouseEvent) => void;
-    onmouseup?: (ev: MouseEvent) => void;
-    onkeydown?: (ev: KeyboardEvent) => void;
-    onkeyup?: (ev: KeyboardEvent) => void;
-    onkeypress?: (ev: KeyboardEvent) => void;
-    ondrop?: (ev: DragEvent) => 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;
@@ -60,6 +74,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const InputField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
+}, {}, {
+    focus: () => void;
+}, "value">;
 type InputField = InstanceType<typeof InputField>;
 export default InputField;

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}
+/>