feat: update input-number, add suffix

Author: Jenesius

examples/all-inputs/App.vue

@@ -60,6 +60,8 @@
 		<input-field name = "number" type = "number" label = "With label" />
 		<input-field name = "number" type = "number" label = "Disabled" disabled />
 		<input-field name = "number" type = "number" label = "With Error" :errors = "['Some mistake']" />
+		<input-field name = "number" type = "number" label = "With Unit"  :pretty="prettyUnit('meters')" />
+		<input-field name = "number" type = "number" label = "With Suffix" suffix = "MHz"   />
 
 		<h2>Input Radio</h2>
 
@@ -103,15 +105,34 @@ import {Form} from "../../plugin";
 
 const form = new Form();
 function modifyOnlyChar(a: string) {
-	return a.replace(/\D/g, '');
+	return a.replace(/\d/g, '');
 }
+let k = new Intl.NumberFormat("en-US", { style: "decimal"  });
+
+// Formatting Number
+
+
 function addPrettySymbol(symbol: string) {
 	return (value: unknown) => {
 		if (typeof value !== 'string') return '';
 
 		return `${value} ${symbol}`;
 	}
 }
+function prettyUnit(unit: string) {
+	return (v: unknown) => {
+		if (typeof v !== "string" && typeof v !== "number") {
+			return v;
+		}
+		v = String(v);
+		v = v.replace(/[^0-9.]/g, '')
+
+		v = k.format(Number(v));
+
+		return `${v} ${unit}`
+	}
+}
+
 
 const optionsCheckbox = [
 	{

plugin/index.ts

@@ -16,10 +16,12 @@ import ComputedValue from "./methods/ComputedValue";
 
 import utils from "./utils/utils";
 
+import Widgets from "./widgets";
+
 export {
 	Form,
 	FormProxy,
-	
+	Widgets,
 	useProxyState,
 	useInputState,
 	useFormState,

plugin/local-hooks/only-number.ts

@@ -0,0 +1,4 @@
+export default function onlyNumber(a: unknown) {
+	if (typeof a !== "string") return '';
+	return a.replace(/[^\d,.+-]/,'')
+}

plugin/local-hooks/use-modify.ts

@@ -0,0 +1,24 @@
+import {StringModify} from "../types";
+import warn from "../debug/warn";
+
+type ModifyParam = undefined | StringModify | Array<StringModify | undefined>
+export default function useModify(callbackModifyProps: () => ModifyParam) {
+	function parse(param: ModifyParam) {
+		if (!param) return [];
+		if (!Array.isArray(param)) return [param];
+		return param.filter(a => a !== undefined) as StringModify[]
+	}
+
+	return function execute(v: unknown): string {
+		const arr = parse(callbackModifyProps()); // Getting array of handlers
+
+		arr.forEach(callback => v = callback(v));
+		try {
+			arr.forEach(callback => v = callback(v));
+		} catch (e) {
+			warn('[modify]', `Error in modify callback with value ${v}`, e);
+		}
+
+		return !!v ? String(v) : '';
+	}
+}

plugin/types/index.ts

@@ -50,3 +50,7 @@ export type IPropsInput = {
 	autofocus: boolean
 }
 
+
+export type StringModify = (v: unknown) => string
+
+

plugin/widgets/index.ts

@@ -0,0 +1,25 @@
+import InputCheckbox from "./inputs/input-checkbox/widget-input-checkbox.vue";
+import InputNumber from "./inputs/input-number/widget-input-number.vue";
+import InputPassword from "./inputs/input-password/widget-input-password.vue";
+import InputRadio from "./inputs/input-radio/widget-input-radio.vue";
+import InputSelect from "./inputs/input-select/widget-input-select.vue";
+import InputSingleCheckbox from './inputs/input-single-checkbox/widget-input-single-checkbox.vue';
+import InputSingleRadio from "./inputs/input-single-radio/widget-input-single-radio.vue";
+import InputSwitch from "./inputs/input-switch/widget-input-switch.vue";
+import InputTel from "./inputs/input-tel/widget-input-tel.vue";
+import InputText from "./inputs/input-text/widget-input-text.vue";
+import InputTextarea from "./inputs/input-textarea/widget-input-textarea.vue";
+
+export default {
+	InputCheckbox,
+	InputNumber,
+	InputPassword,
+	InputRadio,
+	InputSelect,
+	InputSingleCheckbox,
+	InputSingleRadio,
+	InputSwitch,
+	InputTel,
+	InputText,
+	InputTextarea
+}

plugin/widgets/inputs/input-number/widget-input-number.vue

@@ -6,22 +6,24 @@
 				'container-input-number_error': errors.length !== 0
 			}"
 		>
-			
 			<widget-number-step
 				@step = "onStep"
 			/>
 			<input
 				ref = "refInput"
 				class = "input-number"
 				type = "text"
-				:value = "modelValue"
+				:value = "isFocused ? modelValue : executePretty(modelValue)"
 				@input = "onInput($event.target.value)"
 				:disabled = "disabled"
 				:autofocus="autofocus"
 
 				@keyup.up = "onStep(true)"
 				@keyup.down.prevent = "onStep(false)"
+                @focusin = "isFocused = true"
+                @focusout = "isFocused = false"
 			>
+			<span v-if = "suffix" class = "input-number-suffix">{{suffix}}</span>
 		</div>
 	</input-wrap>
 </template>
@@ -30,29 +32,36 @@
 import InputWrap from "../input-wrap.vue";
 import WidgetNumberStep from "./widget-number-step.vue";
 import {ref, withDefaults} from "vue";
+import {StringModify} from "../../../types";
+import useModify from "../../../local-hooks/use-modify";
 
 interface Props{
 	step?: number,
 	label?: string,
 	errors: string[],
 	modelValue: any,
 	disabled: boolean,
-	autofocus: boolean
+	autofocus: boolean,
+	name: string,
+	pretty?: StringModify | StringModify[] | Function,
+	suffix?: string,
+	decimal?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
 	step: 1
 })
+const isFocused = ref(false);
+
+const executePretty = useModify(() => props.pretty);
+
 
 const emits = defineEmits<{
 	(e: 'update:modelValue', value: any): void
 }>()
 const refInput = ref<HTMLInputElement>()
-function onInput(v: string | number) {
-
-	if (typeof v === "string") {
-		v = v.replace(/\D/g, '');
-	}
-	emits("update:modelValue", Number(v));
+function onInput(v: string) {
+	v = v.replace(/[^0-9.]/g, '');
+	emits("update:modelValue", Number.parseFloat(v));
 	if (refInput.value)
 		refInput.value.value = String(v);
 }
@@ -67,7 +76,7 @@ function onStep(v: boolean) {
 
 	.container-input-number{
 		display: grid;
-		grid-template-columns: 30px 1fr;
+		grid-template-columns: 30px 1fr min-content;
 		border: 1px solid var(--vf-input-border-color);
 		height: var(--vf-input-height);
 		border-radius: var(--vf-input-border-radius);
@@ -105,4 +114,10 @@ function onStep(v: boolean) {
 		top: 0;
 		z-index: 0;
 	}
+	.input-number-suffix {
+        color: var(--vf-input-black-light);
+        line-height: var(--vf-input-height);
+        font-size: var(--vf-input-font-size);
+        padding: 0 5px 0 0;
+	}
 </style>

plugin/widgets/inputs/input-text/widget-input-text.vue

@@ -12,7 +12,7 @@
 				ref="refInput"
 				class="vf-input_clean input-text"
 				type="text"
-				:value="isFocused ? modelValue : pretty ? pretty(modelValue) : modelValue"
+				:value="isFocused ? modelValue : executePretty(modelValue)"
 				:disabled="disabled"
 				:autofocus="autofocus"
 				:placeholder="placeholder"
@@ -27,60 +27,39 @@
 <script setup lang="ts">
 import InputWrap from "../input-wrap.vue";
 import {ref, watch} from "vue";
-import warn from "../../../debug/warn";
+import useModify from "../../../local-hooks/use-modify";
+import {StringModify} from "../../../types";
+import onlyNumber from "../../../local-hooks/only-number";
 
-type ModifyFunction = (a: string) => string
-
-const props = withDefaults(defineProps<{
+const props = defineProps<{
 	label?: string,
 	errors: string[],
 	modelValue: any,
 	disabled: boolean,
 	autofocus: boolean,
-	pretty?: (a: string) => string,
-	modify?: ModifyFunction | ModifyFunction[]
+	pretty?: StringModify | StringModify[] | Function,
+	modify?: StringModify | StringModify[]| Function
 	placeholder?: string,
 	maxLength?: string | number,
 	maxlength?: string | number,
 	prefix?: string,
 	name?: string
-	numeric?: boolean
-}>(), {
-	pretty: (a: string) => a,
-})
+	numeric?: boolean,
+}>()
 
 const isFocused = ref(false);
 const refInput = ref<HTMLInputElement>(props.modelValue);
 const emit = defineEmits<{
 	(e: 'update:modelValue', value: any): void
 }>()
 
-function onlyNumber(a: string) {
-	return a.replace(/[^\d,.+-]/,'')
-}
-
-/**
- * @description Function for wrapping all modify callbacks.
- * */
-function executeModify(v: string): string {
-	const arrayModifyCallback: ModifyFunction[] = [];
-
-	arrayModifyCallback.push(
-		...(!props.modify ? [] : Array.isArray(props.modify) ? props.modify : [props.modify])
-	);
-
-	if (props.numeric) arrayModifyCallback.unshift(onlyNumber)
-
-	try {
-		arrayModifyCallback.forEach(modify => {
-			v = modify(v)
-		})
-	} catch (e) {
-		warn(`input-text${props.name ? ` (${props.name})` : ''}`, `Modify handler throw the error`, e)
-	}
-
-	return v;
-}
+const executePretty = useModify(() => props.pretty);
+const executeModify = useModify(
+	() => [
+		props.numeric ? onlyNumber : undefined,
+		...(Array.isArray(props.modify) ? props.modify : [props.modify])
+	]
+)
 
 function onInput(v: string) {
 	if (
@@ -115,7 +94,7 @@ watch(() => props.maxLength, () => onInput(props.modelValue));
 	border: var(--vf-input-border-error);
 }
 .input-text-prefix {
-	color: #646363;
+	color: var(--vf-input-black-light);
 	line-height: var(--vf-input-height);
 	font-size: var(--vf-input-font-size);
 	padding: 0 0 0 4px;

src/pages/test/App.vue

@@ -1,28 +1,24 @@
 <template>
 	<div class="container-examples">
 
-		<input-field type = "text" name = "sun" required label = "Username" disabled/>
 
-		<input-field type = "text" name = "sun" required label = "Username"/>
-
-		<input-field type = "text" name = "sun" label = "Username"/>
-
-		<input-field type = "text" name = "sun" label = "Username" prefix = "MMM"  :pretty = "splitPoint"/>
-		<input-field type = "text" name = "sun" label = "numeric" prefix = "MMM" :modify = "[]" numeric />
+		<input-field type = "text" name = "sun" label = "Username" prefix = "MMM"  :modify = "splitPoint"/>
 
 		<widget-child/>
 	</div>
 </template>
 
 <script setup lang='ts'>
 import InputField from "../../../plugin/widgets/input-field.vue";
-import {Form, useInputState} from "../../../plugin";
+import {config, Form, useInputState} from "../../../plugin";
 import {onMounted, ref} from "vue";
 import WidgetChild from "@/pages/test/widget-child.vue";
 
 const form = new Form();
 
-
+config({
+	debug: false
+})
 onMounted(() => setTimeout(() => form.validate(), 1000))