FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

fix: lint errors for textarea
Some checks failed
ci/woodpecker/pr/lint-backend Pipeline was successful
Details
ci/woodpecker/pr/build Pipeline was successful
Details
ci/woodpecker/pr/lint-client Pipeline failed
Details
ci/woodpecker/pr/test Pipeline failed
Details

Browse source
This commit is contained in:
Norm 2022-07-30 17:30:56 -04:00
parent 340420c48a
commit 4c9051626e
Signed by: norm
GPG key ID: 7123E30E441E80DE
1 changed files with 22 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/client/src/components/form/textarea.vue
View file

@ -12,7 +12,7 @@
:readonly="readonly" :readonly="readonly"
:placeholder="placeholder" :placeholder="placeholder"
:pattern="pattern" :pattern="pattern"
:autocomplete="autocomplete" :autocomplete="autocompleteValue"
:spellcheck="spellcheck" :spellcheck="spellcheck"
@focus="focused = true" @focus="focused = true"
@blur="focused = false" @blur="focused = false"
@ -27,7 +27,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue'; import { onMounted, nextTick, ref, watch, computed, toRefs } from 'vue';
import { debounce } from 'throttle-debounce'; import { debounce } from 'throttle-debounce';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
@ -62,34 +62,38 @@ const props = withDefaults(defineProps<{
manualSave: false, manualSave: false,
}); });
const { modelValue, autofocus } = toRefs(props); const { modelValue } = toRefs(props);
// modelValue is read only, so a separate ref is needed. // modelValue is read only, so a separate ref is needed.
const v = $ref(modelValue.value); const v = $ref(modelValue.value);
const focused = $ref(false); const focused = ref(false);
const changed = $ref(false); const changed = ref(false);
const invalid = $ref(false); const invalid = ref(false);
const filled = computed(() => modelValue.value !== '' && modelValue.value != null); const inputEl = ref<HTMLTextAreaElement | null>(null);
const inputEl = $ref(null); const autocompleteValue = computed(() => props.autocomplete ? 'on' : 'off');
const focus = () => inputEl.focus(); const focus = (): void => {
const onInput = evt => { if (inputEl.value) {
changed = true; inputEl.value.focus();
}
};
const onInput = (evt: any): void => {
changed.value = true;
emit('change', evt); emit('change', evt);
}; };
const onKeydown = (evt: KeyboardEvent) => { const onKeydown = (evt: KeyboardEvent): void => {
emit('keydown', evt); emit('keydown', evt);
if (evt.code === 'Enter') { if (evt.code === 'Enter') {
emit('enter'); emit('enter');
} }
}; };
const updated = () => { const updated = (): void => {
changed = false; changed.value = false;
emit('update:modelValue', v); emit('update:modelValue', v);
}; };
const debouncedUpdated = debounce(1000, updated); const debouncedUpdated = debounce(1000, updated);
watch(modelValue, newValue => { watch(modelValue, () => {
if (!props.manualSave) { if (!props.manualSave) {
if (props.debounce) { if (props.debounce) {
debouncedUpdated(); debouncedUpdated();
@ -98,14 +102,13 @@ watch(modelValue, newValue => {
} }
} }
invalid = inputEl.validity.badInput; invalid.value = inputEl.value?.validity.badInput || true;
}); });
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
if (props.autofocus) { if (props.autofocus && inputEl.value) {
inputEl.focus(); inputEl.value.focus();
} }
}); });
}); });