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

fix: lint errors for textarea #48

Closed
norm wants to merge 1 commit from (deleted):fix/textarea into main
pull from: (deleted):fix/textarea
merge into: FoundKeyGang:main
Conversation 2 Commits 1 Files changed 1 +22 -19
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);
Johann150 commented 2022-07-31 09:33:25 +00:00
Review
Copy link

The contribution guide says to use ref sugar (i.e. $ref), which means we can avoid writing .value everywhere. However I forgot that this means the variable may not be const because it will be assigned to. The proper solution should be to use let instead of const.

The contribution guide says to use ref sugar (i.e. `$ref`), which means we can avoid writing `.value` everywhere. However I forgot that this means the variable may not be `const` because it will be assigned to. The proper solution should be to use `let` instead of `const`.
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;
norm commented 2022-07-30 22:00:49 +00:00
Review
Copy link

Not sure if this should default to true or false

Not sure if this should default to true or false
Johann150 commented 2022-07-31 09:31:31 +00:00
Review
Copy link

Either way, using a logical or here is not the right solution. You probably meant to use ?? instead.

Since this ref will only be null until the element is loaded it should be better to default it to false.

Either way, using a logical or here is not the right solution. You probably meant to use `??` instead. Since this ref will only be `null` until the element is loaded it should be better to default it to `false`.
}); });
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
if (props.autofocus) { if (props.autofocus && inputEl.value) {
inputEl.focus(); inputEl.value.focus();
} }
}); });
}); });