implement #130

Author: mProjectsCode

exampleVault/Input Fields/Text.md

@@ -1,5 +1,5 @@
 ---
-text: test
+text: alnsdksdnfknfnjksdbfhjdf
 textArea: textArea
 ---
 
@@ -8,6 +8,10 @@ textArea: textArea
 INPUT[text(showcase):text]
 ```
 
+```meta-bind
+INPUT[text(showcase, limit(10)):text]
+```
+
 ### Text Area
 ```meta-bind
 INPUT[text_area(showcase, class(meta-bind-full-width), class(meta-bind-high)):textArea]

src/inputFields/_new/fields/Text/TextComponent.svelte

@@ -7,7 +7,16 @@
 	export function setValue(v: string): void {
 		value = v;
 	}
+
+	function getLimitString(length: number, limit: number) {
+		const limitStr = limit.toString();
+		const lengthStr = length.toString().padStart(limitStr.length, '0');
+		return `${lengthStr}/${limitStr}`;
+	}
 </script>
 
 <input type='text' tabindex='0' placeholder={placeholder} bind:value={value} maxlength={limit}
 	   on:input={() => onValueChange(value)}>
+{#if limit !== undefined}
+	<span class={`mb-content-limit-indicator ${value.length > limit ? 'mb-content-limit-indicator-overflow' : ''}`} >{getLimitString(value.length, limit)}</span>
+{/if}

styles.css

@@ -58,6 +58,16 @@ div.mb-view-wrapper {
 	color: var(--text-muted);
 }
 
+/* Text Input */
+.mb-content-limit-indicator {
+	color: var(--text-muted);
+    font-size: var(--font-ui-small);
+}
+
+.mb-content-limit-indicator-overflow {
+	color: var(--color-red);
+}
+
 /* Select Input */
 .mb-select-input-element {
 	cursor: pointer;