Sync <input/> and data:{} values

assets/main.css

@@ -37,10 +37,10 @@ main .panel {
 }
 
 menu.sidebar {
-	height: calc(100% - 50px);
+	height: calc(100% - 70px);
 	position: relative;
 	margin: 0;
-	padding: 25px 0px;
+	padding: 35px 0px;
 	background: var(--secondary-bg);
 	list-style: none;
 	font-size: 18px;
@@ -216,3 +216,16 @@ section.radios h3 {
 .form.radios input {
 	height: 20px;
 }
+
+svg.close {
+	position: absolute;
+	right: 5px;
+	top: 0px;
+	height: 50px;
+	width: 50px;
+}
+
+div.close-button {
+	width: 50px;
+	height: 50px;
+}

components/new.vue

@@ -111,7 +111,9 @@ function strip(e) {
 }
 
 function stripLetters(e) {
-	return (e.target.value.replace(/\W/g, '') || '')
+	let value = (e.target.value.replace(/[^\w\s]/g, '').slice(0, 20) || '')
+	e.target.value = value
+	return value
 }
 
 function del() {
@@ -131,6 +133,7 @@ function setLtv(e) {
 	if (ltv < 0) ltv = 0
 
 	loan.ltv = ltv
+	e.target.value = ltv
 	loan.amount = Math.round(ltv / 100 * loan.price)
 }
 
@@ -141,7 +144,9 @@ function setAmount(e) {
 
 	if (amount > loan.price) amount = loan.price
 	if (amount < 0) amount = 0
+
 	loan.amount = amount
+	e.target.value = amount
 	loan.ltv = Math.round(amount / loan.price * 100)
 }
 
@@ -150,6 +155,7 @@ function setPrice(e) {
 	let value = strip(e)
 
 	loan.price = value
+	e.target.value = value
 	loan.amount = Math.round(loan.ltv / 100 * value)
 }
 
@@ -160,6 +166,8 @@ function setDti(e) {
 
 	if (dti > 100) dti = 100
 	if (dti < 0) dti = 0
+
+	e.target.value = dti
 	loan.dti = dti
 }
 
@@ -170,6 +178,8 @@ function setHousingDti(e) {
 
 	if (housingDti > 100) housingDti = 100
 	if (housingDti < 0) housingDti = 0
+
+	e.target.value = housingDti
 	loan.housingDti = housingDti
 }
 
@@ -211,10 +221,6 @@ const loans = [
 	}
 ]
 
-const propertyTypes = [
-	
-]
-
 export default {
 	methods: {
 		setPrice, setLtv, setAmount, setDti, setHousingDti,

components/sidebar.vue

@@ -1,5 +1,12 @@
 <template>
-<menu class="sidebar">
+<menu v-if="!mobile" class="sidebar">
+
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x close"
+fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path
+fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0
+0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0
+0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg>
+
 <img
 src="/assets/image/mintberry.jpg">
 
@@ -71,12 +78,31 @@ stroke-linecap="square" stroke-linejoin="round"/> </svg>
 </svg>
 <span>Sign out</span>
 </a>
+<span>{{mobile}}</span>
 
 </menu>
 </template>
 
 <script>
+function checkMobile() {
+	if (window.innerWidth < 720) {
+		this.mobile = true
+	} else {
+		this.mobile = false
+	}
+}
+
 export default {
+	methods: { checkMobile },
 	props: ['role', 'active'],
+	data() {
+		return {
+			mobile: null
+		}
+	},
+	created() {
+		window.onresize = this.checkMobile
+		this.checkMobile()
+	}
 }
 </script>

webpack.config.js

@@ -22,7 +22,6 @@ module.exports = {
 			}
 		}
 	},
-	devtool: 'inline-source-map',
 	// Required for also applying rules to sections of SFC
 	plugins: [new VueLoaderPlugin()],
 };