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

Merge pull request #377 from Safelite/feature/richardson/SSR-545

Browse source 
Updated paste code
This commit is contained in:
brich1212safe 2023-07-24 16:58:17 -04:00 committed by GitHub
commit 00f5c70734
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/digital-components/textbox-question/textbox-question.vue
View file

@ -1,7 +1,5 @@
<template>
<div
class="textbox-question"
:class="(errors && errors.length) || hasError ? 'has-error' : ''">
<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
<label
v-if="displayQuestionText"
:for="inputId"
@ -13,7 +11,7 @@
class="input-wrapper"
:class="[
includeSearchIcon ? 'has-search-icon' : '',
includeSelectIcon ? 'has-select-icon' : '',
includeSelectIcon ? 'has-select-icon' : ''
]">
<input
:id="inputId"
@ -34,7 +32,7 @@
:class="[
hasIcon ? 'has-icon' : '',
iconRight ? 'icon-right' : '',
cornerStyle === 'rounded' ? 'rounded-pill' : '',
cornerStyle === 'rounded' ? 'rounded-pill' : ''
]"
:validationRules="validationRules"
:maxlength="maxLength ? maxLength : '999'"
@ -45,10 +43,7 @@
@focus="$emit('focus', $event.target.value)"
@paste="trimOnPaste"
@drop="trimOnPaste" />
<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"
@ -56,12 +51,8 @@
:data-bs-target="'#' + cmsWidgetName"
aria-label="Select button" />
</div>
<div
v-show="errorMessage"
class="row my-1 form-test-error">
<span
class="d-inline-flex mt-0"
role="alert">{{ errorMessage }}</span>
<div v-show="errorMessage" class="row my-1 form-test-error">
<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
</div>
</div>
</template>
@ -116,12 +107,12 @@ export default {
let initialValue;
switch (typeof modelValue) {
case 'number':
initialValue = modelValue;
break;
default:
initialValue = modelValue && modelValue.length > 0 ? modelValue : '';
break;
case 'number':
initialValue = modelValue;
break;
default:
initialValue = modelValue && modelValue.length > 0 ? modelValue : '';
break;
}
const fieldOptions = {
@ -131,9 +122,11 @@ export default {
};
// eslint-disable-next-line no-shadow
const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(props.inputId,
const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
props.inputId,
props.validationRules,
fieldOptions);
fieldOptions
);
return {
errorMessage,
@ -195,29 +188,40 @@ export default {
methods: {
trimOnPaste(evt) {
evt.stopPropagation();
evt.preventDefault();
const input = document.getElementById(evt.srcElement.id);
const originalValue = input.value;
const startPosition = input.selectionStart;
const endPosition = input.selectionEnd;
const selectionLength = endPosition - startPosition;
let data = null;
if (evt.type === 'paste') {
data = evt.clipboardData || window.clipboardData;
} else {
evt.preventDefault();
data = evt.dataTransfer;
}
const value = data.getData('Text')?.trim();
const textValue = data.getData('Text');
this.$emit('update:modelValue', value);
// Insert the pasted/dropped string at the index position
const arrOriginalString = originalValue.split('');
arrOriginalString.splice(startPosition, selectionLength, textValue);
const blendedString = arrOriginalString.join('');
this.$emit('update:modelValue', blendedString);
}
}
};
</script>
<style lang="scss" scoped>
input[type="date"]::-webkit-inner-spin-button {
input[type='date']::-webkit-inner-spin-button {
display: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
input[type='date']::-webkit-calendar-picker-indicator {
position: absolute;
top: 50%;
transform: translateY(-50%);
@ -256,10 +260,10 @@ input[type="date"]::-webkit-calendar-picker-indicator {
.input-wrapper {
position: relative;
&.has-search-icon {
input[type="text"] {
input[type='text'] {
border-radius: 50rem;
}
button[type="submit"] {
button[type='submit'] {
position: absolute;
top: 50%;
transform: translateY(-50%);
@ -277,7 +281,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
}
}
&.has-select-icon {
button[type="submit"] {
button[type='submit'] {
position: absolute;
top: 50%;
transform: translateY(-50%);