mirror of
https://github.com/n8n-io/n8n.git
synced 2024-09-11 13:15:28 +03:00
fix(editor): Fix ts and eslint errors in various components (no-changelog) (#9592)
This commit is contained in:
parent
09472fb9ee
commit
03f15c49d5
@ -48,7 +48,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, type ComponentInstance } from 'vue';
|
||||
|
||||
import type { ITag } from '@/Interface';
|
||||
import IntersectionObserver from './IntersectionObserver.vue';
|
||||
@ -70,7 +70,22 @@ interface TagEl extends ITag {
|
||||
export default defineComponent({
|
||||
name: 'TagsContainer',
|
||||
components: { IntersectionObserver, IntersectionObserved },
|
||||
props: ['tagIds', 'limit', 'clickable', 'responsive', 'hoverable'],
|
||||
props: {
|
||||
tagIds: {
|
||||
type: Array as () => string[],
|
||||
required: true,
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: DEFAULT_MAX_TAGS_LIMIT,
|
||||
},
|
||||
clickable: Boolean,
|
||||
responsive: Boolean,
|
||||
hoverable: Boolean,
|
||||
},
|
||||
emits: {
|
||||
click: null,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
maxWidth: 320,
|
||||
@ -79,16 +94,6 @@ export default defineComponent({
|
||||
debouncedSetMaxWidth: () => {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.debouncedSetMaxWidth = debounce(this.setMaxWidth, 100);
|
||||
},
|
||||
mounted() {
|
||||
this.setMaxWidth();
|
||||
window.addEventListener('resize', this.debouncedSetMaxWidth);
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.debouncedSetMaxWidth);
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useTagsStore),
|
||||
style() {
|
||||
@ -101,9 +106,7 @@ export default defineComponent({
|
||||
.map((tagId: string) => this.tagsStore.getTagById(tagId))
|
||||
.filter(Boolean); // if tag has been deleted from store
|
||||
|
||||
const limit = this.limit || DEFAULT_MAX_TAGS_LIMIT;
|
||||
|
||||
let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags;
|
||||
let toDisplay: TagEl[] = this.limit ? tags.slice(0, this.limit) : tags;
|
||||
toDisplay = toDisplay.map((tag: ITag) => ({
|
||||
...tag,
|
||||
hidden: this.responsive && !this.visibility[tag.id],
|
||||
@ -135,9 +138,20 @@ export default defineComponent({
|
||||
return toDisplay;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.debouncedSetMaxWidth = debounce(this.setMaxWidth, 100);
|
||||
},
|
||||
mounted() {
|
||||
this.setMaxWidth();
|
||||
window.addEventListener('resize', this.debouncedSetMaxWidth);
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.debouncedSetMaxWidth);
|
||||
},
|
||||
methods: {
|
||||
setMaxWidth() {
|
||||
const container = this.$refs.tagsContainer.$el as HTMLElement;
|
||||
const containerEl = this.$refs.tagsContainer as ComponentInstance<IntersectionObserver>;
|
||||
const container = containerEl.$el as HTMLElement;
|
||||
const parent = container.parentNode as HTMLElement;
|
||||
|
||||
if (parent) {
|
||||
|
@ -96,8 +96,14 @@ export default defineComponent({
|
||||
},
|
||||
eventBus: {
|
||||
type: Object as PropType<EventBus>,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
emits: {
|
||||
'update:modelValue': null,
|
||||
esc: null,
|
||||
blur: null,
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const i18n = useI18n();
|
||||
const { showError } = useToast();
|
||||
@ -119,10 +125,6 @@ export default defineComponent({
|
||||
return tagsStore.allTags;
|
||||
});
|
||||
|
||||
const hasTags = computed<boolean>(() => {
|
||||
return tagsStore.hasTags;
|
||||
});
|
||||
|
||||
const options = computed<ITag[]>(() => {
|
||||
return allTags.value.filter((tag: ITag) => tag && tag.name.includes(filter.value));
|
||||
});
|
||||
@ -142,7 +144,9 @@ export default defineComponent({
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
const select = selectRef.value?.$refs?.innerSelect;
|
||||
const select = selectRef.value?.$refs?.innerSelect as
|
||||
| { $refs: { input: Element } }
|
||||
| undefined;
|
||||
if (select) {
|
||||
const input = select.$refs.input as Element | undefined;
|
||||
if (input) {
|
||||
@ -190,8 +194,6 @@ export default defineComponent({
|
||||
const newTag = await tagsStore.create(name);
|
||||
emit('update:modelValue', [...props.modelValue, newTag.id]);
|
||||
|
||||
void nextTick(() => focusOnTag(newTag.id));
|
||||
|
||||
filter.value = '';
|
||||
} catch (error) {
|
||||
showError(
|
||||
@ -233,13 +235,6 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
function focusOnTag(tagId: string) {
|
||||
const tagOptions = tagRefs.value || [];
|
||||
if (tagOptions && tagOptions.length) {
|
||||
const added = tagOptions.find((ref) => ref.value === tagId);
|
||||
}
|
||||
}
|
||||
|
||||
function focusOnInput() {
|
||||
if (selectRef.value) {
|
||||
selectRef.value.focusOnInput();
|
||||
@ -267,8 +262,8 @@ export default defineComponent({
|
||||
const tagsModal = document.querySelector('#tags-manager-modal');
|
||||
|
||||
const clickInsideTagsDropdowns =
|
||||
tagsDropdown?.contains(e.target as Node) || tagsDropdown === e.target;
|
||||
const clickInsideTagsModal = tagsModal?.contains(e.target as Node) || tagsModal === e.target;
|
||||
tagsDropdown?.contains(e.target as Node) ?? tagsDropdown === e.target;
|
||||
const clickInsideTagsModal = tagsModal?.contains(e.target as Node) ?? tagsModal === e.target;
|
||||
|
||||
if (!clickInsideTagsDropdowns && !clickInsideTagsModal && e.type === 'click') {
|
||||
emit('blur');
|
||||
|
@ -38,7 +38,22 @@ const matches = (name: string, filter: string) =>
|
||||
export default defineComponent({
|
||||
name: 'TagsView',
|
||||
components: { TagsTableHeader, TagsTable },
|
||||
props: ['tags', 'isLoading'],
|
||||
props: {
|
||||
tags: {
|
||||
type: Array as () => ITag[],
|
||||
required: true,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: {
|
||||
update: null,
|
||||
delete: null,
|
||||
create: null,
|
||||
disableCreate: null,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
createEnabled: false,
|
||||
@ -61,11 +76,11 @@ export default defineComponent({
|
||||
? this.$locale.baseText('tagsView.inUse', { adjustToNumber: count })
|
||||
: this.$locale.baseText('tagsView.notBeingUsed');
|
||||
|
||||
const disabled = this.isCreateEnabled || this.updateId || this.deleteId;
|
||||
const tagRows = (this.tags || [])
|
||||
.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
|
||||
const disabled = this.isCreateEnabled || !!this.updateId || !!this.deleteId;
|
||||
const tagRows = (this.tags ?? [])
|
||||
.filter((tag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
|
||||
.map(
|
||||
(tag: ITag): ITagRow => ({
|
||||
(tag): ITagRow => ({
|
||||
tag,
|
||||
usage: getUsage(tag.usageCount),
|
||||
disable: disabled && tag.id !== this.deleteId && tag.id !== this.updateId,
|
||||
@ -140,7 +155,7 @@ export default defineComponent({
|
||||
createTag(): void {
|
||||
this.isSaving = true;
|
||||
const name = this.newName.trim();
|
||||
const onCreate = (created: ITag | null, error?: Error) => {
|
||||
const onCreate = (created: ITag | null) => {
|
||||
if (created) {
|
||||
this.stickyIds.add(created.id);
|
||||
this.disableCreate();
|
||||
|
@ -21,10 +21,11 @@ export default defineComponent({
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useUsersStore, useProjectsStore),
|
||||
currentUserId(): string {
|
||||
return this.usersStore.currentUserId || '';
|
||||
return this.usersStore.currentUserId ?? '';
|
||||
},
|
||||
isTelemetryEnabledOnRoute(): boolean {
|
||||
return this.$route.meta?.telemetry ? !this.$route.meta.telemetry.disabled : true;
|
||||
const routeMeta = this.$route.meta as { telemetry?: { disabled?: boolean } } | undefined;
|
||||
return routeMeta?.telemetry ? !routeMeta.telemetry.disabled : true;
|
||||
},
|
||||
telemetry(): ITelemetrySettings {
|
||||
return this.settingsStore.telemetry;
|
||||
|
@ -17,41 +17,13 @@ export default defineComponent({
|
||||
props: {
|
||||
date: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
capitalize: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
register(this.defaultLocale, this.localeFunc as LocaleFunc);
|
||||
},
|
||||
methods: {
|
||||
localeFunc(num: number, index: number, totalSec: number): [string, string] {
|
||||
// number: the timeago / timein number;
|
||||
// index: the index of array below;
|
||||
// totalSec: total seconds between date to be formatted and today's date;
|
||||
return [
|
||||
[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')],
|
||||
[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
|
||||
[
|
||||
this.$locale.baseText('timeAgo.oneMinuteAgo'),
|
||||
this.$locale.baseText('timeAgo.inOneMinute'),
|
||||
],
|
||||
[this.$locale.baseText('timeAgo.minutesAgo'), this.$locale.baseText('timeAgo.inMinutes')],
|
||||
[this.$locale.baseText('timeAgo.oneHourAgo'), this.$locale.baseText('timeAgo.inOneHour')],
|
||||
[this.$locale.baseText('timeAgo.hoursAgo'), this.$locale.baseText('timeAgo.inHours')],
|
||||
[this.$locale.baseText('timeAgo.oneDayAgo'), this.$locale.baseText('timeAgo.inOneDay')],
|
||||
[this.$locale.baseText('timeAgo.daysAgo'), this.$locale.baseText('timeAgo.inDays')],
|
||||
[this.$locale.baseText('timeAgo.oneWeekAgo'), this.$locale.baseText('timeAgo.inOneWeek')],
|
||||
[this.$locale.baseText('timeAgo.weeksAgo'), this.$locale.baseText('timeAgo.inWeeks')],
|
||||
[this.$locale.baseText('timeAgo.oneMonthAgo'), this.$locale.baseText('timeAgo.inOneMonth')],
|
||||
[this.$locale.baseText('timeAgo.monthsAgo'), this.$locale.baseText('timeAgo.inMonths')],
|
||||
[this.$locale.baseText('timeAgo.oneYearAgo'), this.$locale.baseText('timeAgo.inOneYear')],
|
||||
[this.$locale.baseText('timeAgo.yearsAgo'), this.$locale.baseText('timeAgo.inYears')],
|
||||
][index] as [string, string];
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore),
|
||||
defaultLocale(): string {
|
||||
@ -72,5 +44,33 @@ export default defineComponent({
|
||||
return convertToHumanReadableDate(epoch);
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
register(this.defaultLocale, this.localeFunc as LocaleFunc);
|
||||
},
|
||||
methods: {
|
||||
localeFunc(_: number, index: number): [string, string] {
|
||||
// number: the timeago / timein number;
|
||||
// index: the index of array below;
|
||||
return [
|
||||
[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')],
|
||||
[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
|
||||
[
|
||||
this.$locale.baseText('timeAgo.oneMinuteAgo'),
|
||||
this.$locale.baseText('timeAgo.inOneMinute'),
|
||||
],
|
||||
[this.$locale.baseText('timeAgo.minutesAgo'), this.$locale.baseText('timeAgo.inMinutes')],
|
||||
[this.$locale.baseText('timeAgo.oneHourAgo'), this.$locale.baseText('timeAgo.inOneHour')],
|
||||
[this.$locale.baseText('timeAgo.hoursAgo'), this.$locale.baseText('timeAgo.inHours')],
|
||||
[this.$locale.baseText('timeAgo.oneDayAgo'), this.$locale.baseText('timeAgo.inOneDay')],
|
||||
[this.$locale.baseText('timeAgo.daysAgo'), this.$locale.baseText('timeAgo.inDays')],
|
||||
[this.$locale.baseText('timeAgo.oneWeekAgo'), this.$locale.baseText('timeAgo.inOneWeek')],
|
||||
[this.$locale.baseText('timeAgo.weeksAgo'), this.$locale.baseText('timeAgo.inWeeks')],
|
||||
[this.$locale.baseText('timeAgo.oneMonthAgo'), this.$locale.baseText('timeAgo.inOneMonth')],
|
||||
[this.$locale.baseText('timeAgo.monthsAgo'), this.$locale.baseText('timeAgo.inMonths')],
|
||||
[this.$locale.baseText('timeAgo.oneYearAgo'), this.$locale.baseText('timeAgo.inOneYear')],
|
||||
[this.$locale.baseText('timeAgo.yearsAgo'), this.$locale.baseText('timeAgo.inYears')],
|
||||
][index] as [string, string];
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
@ -8,16 +8,17 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { type PropType, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TitledList',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user