@marianmeres/stuic 1.56.0 → 1.57.0

package/dist/components/Input/Field.svelte

@@ -21,7 +21,7 @@ const _emptyClasses = () => ({
   asterix: ""
 });
 const _PRESET = {
-  box: "mb-4",
+  box: "mb-4 grid",
   wrap: `
 			rounded-md border border-gray-300
 			bg-gray-100
@@ -96,6 +96,8 @@ export let pattern = void 0;
 export let step = void 0;
 export let useTrim = true;
 export let textareaAutoEnlarge = true;
+export let labelLeft = false;
+export let labelLeftWidth = "normal";
 export let validate = void 0;
 export let showAsterixOnRequired = true;
 let validation;
@@ -142,8 +144,17 @@ $:
   _belowClass = twMerge(_collectClasses("below"));
 </script>
 
-<div class={_boxClass}>
-	<div class="flex items-end px-2 mb-1">
+<div
+	class={_boxClass}
+	class:grid-cols-4={labelLeft && labelLeftWidth === 'normal'}
+	class:grid-cols-3={labelLeft && labelLeftWidth === 'wide'}
+>
+	<div
+		class="flex px-2 mb-1"
+		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}
@@ -155,73 +166,82 @@ $:
 		{/if}
 		<slot name="right_of_label" />
 	</div>
-	<div class={_wrapClass} class:cursor-not-allowed={disabled} class:opacity-50={disabled}>
-		<div class="flex items-center">
-			<slot name="input_before" {id} />
-			{#if type === 'textarea'}
-				<textarea
-					bind:value
-					bind:this={_inputEl}
-					{id}
-					class={_inputClass}
-					class:cursor-not-allowed={disabled}
-					{name}
-					{disabled}
-					{readonly}
-					{required}
-					{autofocus}
-					{tabindex}
-					use:trim={useTrim}
-					use:validateAction={validate
-						? { ...(validate === true ? {} : validate), setValidationResult }
-						: undefined}
-					use:autogrow={{ allowed: textareaAutoEnlarge }}
-					{...$$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}
-					{...$$restProps}
-				/>
-			{/if}
-			<slot name="input_after" {id} />
+	<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 items-center">
+				<slot name="input_before" {id} />
+				{#if type === 'textarea'}
+					<textarea
+						bind:value
+						bind:this={_inputEl}
+						{id}
+						class={_inputClass}
+						class:cursor-not-allowed={disabled}
+						{name}
+						{disabled}
+						{readonly}
+						{required}
+						{autofocus}
+						{tabindex}
+						use:trim={useTrim}
+						use:validateAction={validate
+							? { ...(validate === true ? {} : validate), setValidationResult }
+							: undefined}
+						use:autogrow={{ allowed: textareaAutoEnlarge }}
+						{...$$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}
+						{...$$restProps}
+					/>
+				{/if}
+				<slot name="input_after" {id} />
+			</div>
+			<slot name="input_below" {id} />
 		</div>
-		<slot name="input_below" {id} />
+		{#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>
-	{#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>

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

@@ -47,6 +47,8 @@ declare const __propDef: {
         step?: number | undefined;
         useTrim?: boolean | undefined;
         textareaAutoEnlarge?: boolean | undefined;
+        labelLeft?: boolean | undefined;
+        labelLeftWidth?: "normal" | "wide" | undefined;
         validate?: ValidateOptions | true | undefined;
         showAsterixOnRequired?: boolean | undefined;
     };

package/dist/components/Input/FieldSelect.svelte

@@ -18,7 +18,7 @@ const _emptyClasses = () => ({
   asterix: ""
 });
 const _PRESET = {
-  box: "mb-4",
+  box: "mb-4 grid",
   wrap: `
 			flex items-center
             rounded-md border border-gray-300
@@ -82,6 +82,8 @@ export let required = false;
 export let autofocus = void 0;
 export let validate = void 0;
 export let showAsterixOnRequired = true;
+export let labelLeft = false;
+export let labelLeftWidth = "normal";
 let validation;
 const setValidationResult = (res) => validation = res;
 let _options = [];
@@ -134,8 +136,17 @@ $:
   _belowClass = twMerge(_collectClasses("below"));
 </script>
 
-<div class={_boxClass}>
-	<div class="flex items-end px-2 mb-1">
+<div
+	class={_boxClass}
+	class:grid-cols-4={labelLeft && labelLeftWidth === 'normal'}
+	class:grid-cols-3={labelLeft && labelLeftWidth === 'wide'}
+>
+	<div
+		class="flex px-2"
+		class:items-end={!labelLeft}
+		class:items-start={labelLeft}
+		class:mt-1={labelLeft}
+	>
 		{#if label || $$slots.label}
 			<label for={id} class={_labelClass}>
 				{#if $$slots.label}
@@ -147,39 +158,49 @@ $:
 		{/if}
 		<slot name="right_of_label" />
 	</div>
-	<div class={_wrapClass} class:cursor-not-allowed={disabled} class:opacity-50={disabled}>
-		<slot name="input_before" {id} />
-		<select
-			class={_inputClass}
-			bind:value
-			bind:this={_inputEl}
-			{disabled}
-			{required}
-			{tabindex}
-			{autofocus}
-			{name}
-			use:validateAction={validate
-				? { ...(validate === true ? {} : validate), setValidationResult }
-				: undefined}
+	<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}
 		>
-			{#each _options as o, i}
-				<option value={o.value}>{o.label}</option>
-			{/each}
-		</select>
+			<slot name="input_before" {id} />
+			<select
+				class={_inputClass}
+				bind:value
+				bind:this={_inputEl}
+				{id}
+				{disabled}
+				{required}
+				{tabindex}
+				{autofocus}
+				{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={_validationMessageClass}>
-			{@html validation.message}
-		</div>
-	{/if}
-	{#if description}
-		<div class={_descriptionClass}>
-			<Thc thc={description} forceAsHtml />
+			<slot name="input_after" {id} />
 		</div>
-	{/if}
-	{#if $$slots.below}
-		<div class={_belowClass}><slot name="below" {id} /></div>
-	{/if}
+		{#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/FieldSelect.svelte.d.ts

@@ -40,6 +40,8 @@ declare const __propDef: {
         autofocus?: true | undefined;
         validate?: ValidateOptions | true | undefined;
         showAsterixOnRequired?: boolean | undefined;
+        labelLeft?: boolean | undefined;
+        labelLeftWidth?: "normal" | "wide" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.56.0",
+	"version": "1.57.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",