jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP format code.

Browse source
This commit is contained in:
Bryan Mauger 2023-05-04 13:06:39 -04:00
parent 732b1a5f8f
commit ac95ee1344
2 changed files with 26 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/layouts/customer-details/customer-details.vue
View file

@ -3,8 +3,7 @@
labelText="Notes for your technician"
labelTextOptional="(Optional)"
textAreaFooterText="250/250 characters remaining"
footerText
/>
footerText />
</template>
<script>
@ -12,7 +11,7 @@ import textareamultiline from "@/ux-components/text-area/text-area-multi-line";
export default {
name: "customer-details",
components: {
textareamultiline
}
textareamultiline,
},
};
</script>

35
src/ux-components/text-area/text-area-multi-line.vue
View file

@ -1,8 +1,19 @@
<template>
<div class="text-area-multine">
<label for="textarea-comments" class="fw-bold mb-1">{{labelText}} <span class="fw-normal">{{labelTextOptional}}</span></label>
<textarea id="textarea-comments" class="p-4" maxlength="250" role="textbox" contenteditable="true" aria-multiline="true" aria-required="false"></textarea>
<p tabindex="0" v-show="footerText" class="caption mt-2 mb-0" id="charactersremaining">{{textAreaFooterText}}</p>
<label for="textarea-comments" class="fw-bold mb-1"
>{{ labelText }} <span class="fw-normal">{{ labelTextOptional }}</span></label
>
<textarea
id="textarea-comments"
class="p-4"
maxlength="250"
role="textbox"
contenteditable="true"
aria-multiline="true"
aria-required="false"></textarea>
<p tabindex="0" v-show="footerText" class="caption mt-2 mb-0" id="charactersremaining">
{{ textAreaFooterText }}
</p>
</div>
</template>
@ -13,20 +24,20 @@ export default {
labelText: String,
labelTextOptional: String,
textAreaFooterText: String,
footerText: Boolean
footerText: Boolean,
},
mounted: function() {
const my_textarea = document.getElementById('textarea-comments');
const remaining = document.getElementById('charactersremaining');
mounted: function () {
const my_textarea = document.getElementById("textarea-comments");
const remaining = document.getElementById("charactersremaining");
const remain = 250;
my_textarea.addEventListener('input',()=>{
my_textarea.addEventListener("input", () => {
const total = remain - my_textarea.value.length;
const color = total < remain * 0.1 ? 'red' : null; //Change text to red when the total remaining goes below 25;
const color = total < remain * 0.1 ? "red" : null; //Change text to red when the total remaining goes below 25;
remaining.innerHTML = `${total}/250 characters remaining`;
remaining.style.color = color;
remaining.style.color = color;
});
}
},
};
</script>
@ -40,7 +51,7 @@ export default {
}
}
textarea {
border-radius: .5rem;
border-radius: 0.5rem;
border: 1px solid $gray-550;
height: 88px;
&:hover {