Vue3 form field components

Author: atomjoy

input/Button.vue

@@ -10,18 +10,19 @@ let props = defineProps(['text', 'class'])
 button {
 	float: right;
 	margin-top: 20px;
-	padding: 16px 35px;
-	color: #fff;
 	background: var(--wow-accent);
 	border-radius: var(--wow-border-radius);
-	border: 0px;
-	font-size: 16px;
-	font-weight: 500;
+	font-size: var(--wow-font-size) !important;
+	padding: var(--wow-font-size) calc(var(--wow-font-size) * 3) !important;
+	border-radius: calc(var(--wow-font-size) / 2);
+	border: 1px solid var(--wow-accent);
+	font-weight: 600 !important;
+	color: #fff;
 	cursor: pointer;
 	transition: all 0.6s;
 }
 
 button:hover {
-	filter: brightness(1.5);
+	filter: brightness(1.3);
 }
 </style>

input/README.md

@@ -1,16 +1,16 @@
 # Vue3 input components
 
-Vue3 form inputs components (select, phone prefix, checkbox, radio, input, textarea, password with validation).
+Vue3 form field components with search and passowrd validation.
 
 ## Inputs (light/dark mode)
 
 - Input
-- Select
 - Textarea
+- Select (search)
 - Password (validation)
 - Radiobox (select one)
 - Checkbox (multiple, single)
-- Phone prefix (flags, country, code)
+- Phone prefix (flags emoji, country name, country code)
 
 ## Import fonts
 
@@ -26,13 +26,17 @@ html, input, select, textarea, option, label, div {
 label i {
   float: right;
 }
+
+h1.full {
+ text-align: left;
+}
 ```
 
 ## Demo page
 
 <https://github.com/atomjoy/vue3-input/blob/main/input/example/DemoPageView.vue>
 
-## RWD style, dark mode
+## RWD settings and dark mode style
 
 Style in input-root.css
 

input/Select.vue

@@ -44,7 +44,6 @@ function openSelect() {
 	let all = document.querySelectorAll('.custom-select-open')
 	all.forEach((el) => {
 		let data = el.dataset.uid ?? null
-		console.log(data)
 		if (data != uid.value) {
 			el.click()
 		}
@@ -93,14 +92,6 @@ function updateClick(option = null) {
 	emit('update:modelValue', modelValue.value)
 }
 
-function renameKeys(obj = { id: '1', name: 'Alex' }, newKeys = { id: 'key', name: 'value' }) {
-	const keyValues = Object.keys(obj).map((key) => {
-		const newKey = newKeys[key] || key
-		return { [newKey]: obj[key] }
-	})
-	return Object.assign({}, ...keyValues)
-}
-
 function filterOptions(e) {
 	filtered_options.value = options?.value?.filter((o) => {
 		if (o?.value) {

input/css/input-root.css

@@ -86,7 +86,7 @@
 
 @media (max-width: 1280px) {
 	:root {
-		--wow-font-size: 14px;
+		--wow-font-size: 15px;
 	}
 }
 

input/example/DemoPageView.vue

@@ -59,11 +59,8 @@ function onSubmit(e) {
 </script>
 
 <template>
-	<TopMenu />
-
-	<p class="color">Home page</p>
-
 	<form @submit.prevent="onSubmit" style="margin: 50px auto; width: 90%; max-width: 530px; padding: 30px">
+		<h1>Form example</h1>
 		<Input :focus="'true'" type="text" name="name" v-model="input" placeholder="Name" label="Name" @keydown="validate" />
 
 		<Password type="password" name="password" v-model="password" placeholder="Password" label="Password" @valid="validPass" @invalid="invalidPass" />

input/example/vue3-inputs-prefix.png

@@ -0,0 +1,7 @@
+export default function renameKeys(obj = { id: '1', name: 'Alex' }, newKeys = { id: 'key', name: 'value' }) {
+	const keyValues = Object.keys(obj).map((key) => {
+		const newKey = newKeys[key] || key
+		return { [newKey]: obj[key] }
+	})
+	return Object.assign({}, ...keyValues)
+}