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

commit

Browse source
This commit is contained in:
Kulbhushan Kaushik 2022-12-15 10:55:54 -05:00
parent cf67e216f0
commit 489cf492af
2 changed files with 44 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/common-components/textbox-question/textbox-question.vue
View file

@ -10,6 +10,7 @@
class="input-wrapper" class="input-wrapper"
:class="[ :class="[
includeSearchIcon ? 'has-search-icon' : '', includeSearchIcon ? 'has-search-icon' : '',
includeSelectIcon ? 'has-select-icon' : '',
]"> ]">
<input <input
class="form-control" class="form-control"
@ -38,6 +39,7 @@
:maxlength="maxLength ? maxLength : '999'" :maxlength="maxLength ? maxLength : '999'"
@focus="$emit('focus', $event.target.value)" /> @focus="$emit('focus', $event.target.value)" />
<button v-if="includeSearchIcon" type="submit" aria-label="Search button" /> <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
<button v-if="includeSelectIcon" type="submit" aria-label="Select button" />
</div> </div>
<div v-show="errorMessage" class="row my-2 form-test-error"> <div v-show="errorMessage" class="row my-2 form-test-error">
<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span> <span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
@ -76,6 +78,7 @@ export default {
questionAlignment: String, // Left or center. Left is default. questionAlignment: String, // Left or center. Left is default.
cornerStyle: String, // Rounded or square. Square is default. cornerStyle: String, // Rounded or square. Square is default.
includeSearchIcon: Boolean, includeSearchIcon: Boolean,
includeSelectIcon: Boolean,
min: String, min: String,
max: String, max: String,
disableAutoFill: Boolean disableAutoFill: Boolean
@ -229,7 +232,23 @@ input[type="date"]::-webkit-calendar-picker-indicator {
display: flex; display: flex;
} }
} }
&.has-select-icon {
button[type="submit"] {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1rem;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
width: 1rem;
height: 100%;
border: 0px;
border-left: none;
display: flex;
}
}
} }
input { input {
&.has-icon { &.has-icon {

29
src/layouts/welcome-page/welcome-page.vue
View file

@ -3,9 +3,6 @@
<div class="fade-on-route-transition"> <div class="fade-on-route-transition">
<siteHeader cmsWidgetName="Header"/> <siteHeader cmsWidgetName="Header"/>
<siteSubHeader cmsWidgetName="SubHeader"/> <siteSubHeader cmsWidgetName="SubHeader"/>
<p>Welcome Page Placeholder</p>
<br />
<div class="row mt-2"> <div class="row mt-2">
<textboxQuestion <textboxQuestion
type="date" type="date"
@ -18,6 +15,20 @@
:min="'1972-12-01'" :min="'1972-12-01'"
/> />
</div> </div>
<div class="row mt-2 mb-4">
<div class="col">
<textboxQuestion
id="damageCauseField"
cmsWidgetName="DamageCauseQuestion"
v-model="damageCause"
placeholderText="Select an option"
includeSelectIcon
disableAutoFill
:data-bs-target="'#' + DamageCauseQuestion"
validationRules="damage-cause-required" />
</div>
</div>
<buttonQuestionModal cmsWidgetName="DamageCauseQuestion" />
</div> </div>
</div> </div>
</template> </template>
@ -31,11 +42,13 @@
import { required } from "@/helpers/validation-rules"; import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import textboxQuestion from "@/common-components/textbox-question/textbox-question" import textboxQuestion from "@/common-components/textbox-question/textbox-question"
import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal"
//define validation rules //define validation rules
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED)); defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("damage-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
export default ({ export default {
name: "welcome-page", name: "welcome-page",
emits: ['update:modelValue'], // The component emits an event emits: ['update:modelValue'], // The component emits an event
props: { props: {
@ -68,6 +81,12 @@
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
}, },
}) components: {
siteHeader,
siteSubHeader,
buttonQuestionModal,
textboxQuestion
},
}
</script> </script>