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

WIP

Browse source
This commit is contained in:
Bryan Mauger 2023-05-09 16:48:48 -04:00
parent 10d0f24f5a
commit 4ddefb6d50
2 changed files with 7 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/digital-components/textarea-question/textarea-question.vue
View file

@ -1,16 +1,15 @@
<template> <template>
<div class="textarea-question"> <div class="textarea-question">
<div class="label-wrapper mb-1" :aria-label="TextAreaContentWidget"><!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>--> <div class="label-wrapper mb-1" :aria-label="TextAreaContentWidget"><!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
<label for="textarea-comments" class="fw-bold" v-html="TextAreaContentWidget"></label> <span v-if="isRequired" class="fw-normal ms-1">(Optional)</span> <label for="textarea-comments" class="fw-bold" v-html="TextAreaContentWidget"></label> <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
</div> </div>
<textarea <textarea
rows="4"
id="textarea-comments" id="textarea-comments"
class="p-4"
:maxlength=maxLength :maxlength=maxLength
role="textbox" role="textbox"
contenteditable="true" :aria-required=isRequired>
aria-multiline="true" </textarea>
aria-required="false"></textarea>
<p tabindex="0" class="caption mt-2 mb-0" id="charactersremaining"> <p tabindex="0" class="caption mt-2 mb-0" id="charactersremaining">
{{maxLength}}/{{maxLength}} characters remaining {{maxLength}}/{{maxLength}} characters remaining
</p> </p>
@ -25,7 +24,6 @@ export default {
isRequired: Boolean, isRequired: Boolean,
maxLength: Number, maxLength: Number,
modelValue: String, modelValue: String,
labelText: String,
}, },
setup(props) { setup(props) {
const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId; const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
@ -53,6 +51,9 @@ export default {
TextAreaContentWidget() { TextAreaContentWidget() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText"); return this.getCmsContent(this.cmsWidgetName, "QuestionText");
}, },
setUpTest() {
this.enableRemainingCounter();
},
value: { value: {
get: function () { get: function () {
return this.modelValue; return this.modelValue;
@ -62,14 +63,6 @@ export default {
}, },
}, },
}, },
value: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
mounted: function () { mounted: function () {
const my_textarea = document.getElementById("textarea-comments"); const my_textarea = document.getElementById("textarea-comments");
const remaining = document.getElementById("charactersremaining"); const remaining = document.getElementById("charactersremaining");

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

@ -1,9 +1,7 @@
<template> <template>
<textareaquestion <textareaquestion
cmsWidgetName="TextAreaContentWidget" cmsWidgetName="TextAreaContentWidget"
:labelText="textAreaLabelCopy"
maxLength=250 maxLength=250
isRequired
/> />
</template> </template>