mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Migrate BreakpointsObserver component to Vue 3 syntax (no-changelog) (#9758)

Browse source 
Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
This commit is contained in:
oleg 2024-06-18 10:13:11 +02:00 committed by GitHub
parent b7d356f49c
commit 0524f588f6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 64 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
packages/editor-ui/src/components/BreakpointsObserver.vue
View file

@ -4,9 +4,12 @@
</span> </span>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue'; import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/constants'; import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/constants';
import { useUIStore } from '@/stores/ui.store';
import { getBannerRowHeight } from '@/utils/htmlUtils';
import { useDebounce } from '@/composables/useDebounce';
/** /**
* matching element.io https://element.eleme.io/#/en-US/component/layout#col-attributes * matching element.io https://element.eleme.io/#/en-US/component/layout#col-attributes
@ -16,85 +19,74 @@ import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/co
* lg >= 1200 * lg >= 1200
* xl >= 1920 * xl >= 1920
*/ */
interface Props {
valueXS?: number;
valueXL?: number;
valueLG?: number;
valueMD?: number;
valueSM?: number;
valueDefault?: number;
}
import { useUIStore } from '@/stores/ui.store'; const props = defineProps<Props>();
import { getBannerRowHeight } from '@/utils/htmlUtils';
import { useDebounce } from '@/composables/useDebounce';
export default defineComponent({ const { callDebounced } = useDebounce();
name: 'BreakpointsObserver', const uiStore = useUIStore();
props: ['valueXS', 'valueXL', 'valueLG', 'valueMD', 'valueSM', 'valueDefault'],
setup() {
const { callDebounced } = useDebounce();
return { callDebounced };
},
data() {
return {
width: window.innerWidth,
};
},
computed: {
bp(): string {
if (this.width < BREAKPOINT_SM) {
return 'XS';
}
if (this.width >= BREAKPOINT_XL) { const width = ref(window.innerWidth);
return 'XL';
}
if (this.width >= BREAKPOINT_LG) { const bp = computed(() => {
return 'LG'; if (width.value < BREAKPOINT_SM) {
} return 'XS';
}
if (width.value >= BREAKPOINT_XL) {
return 'XL';
}
if (width.value >= BREAKPOINT_LG) {
return 'LG';
}
if (width.value >= BREAKPOINT_MD) {
return 'MD';
}
return 'SM';
});
if (this.width >= BREAKPOINT_MD) { const value = computed(() => {
return 'MD'; if (props.valueXS && width.value < BREAKPOINT_SM) {
} return props.valueXS;
}
if (props.valueXL && width.value >= BREAKPOINT_XL) {
return props.valueXL;
}
if (props.valueLG && width.value >= BREAKPOINT_LG) {
return props.valueLG;
}
if (props.valueMD && width.value >= BREAKPOINT_MD) {
return props.valueMD;
}
if (props.valueSM) {
return props.valueSM;
}
return props.valueDefault;
});
return 'SM'; const onResize = () => {
}, void callDebounced(onResizeEnd, { debounceTime: 50 });
};
value(): number | undefined { const onResizeEnd = async () => {
if (this.valueXS !== undefined && this.width < BREAKPOINT_SM) { width.value = window.innerWidth;
return this.valueXS; await nextTick();
}
if (this.valueXL !== undefined && this.width >= BREAKPOINT_XL) { const bannerHeight = await getBannerRowHeight();
return this.valueXL; uiStore.updateBannersHeight(bannerHeight);
} };
if (this.valueLG !== undefined && this.width >= BREAKPOINT_LG) { onMounted(() => {
return this.valueLG; window.addEventListener('resize', onResize);
} });
if (this.valueMD !== undefined && this.width >= BREAKPOINT_MD) { onBeforeUnmount(() => {
return this.valueMD; window.removeEventListener('resize', onResize);
}
if (this.valueSM !== undefined) {
return this.valueSM;
}
return this.valueDefault;
},
},
created() {
window.addEventListener('resize', this.onResize);
},
beforeUnmount() {
window.removeEventListener('resize', this.onResize);
},
methods: {
onResize() {
void this.callDebounced(this.onResizeEnd, { debounceTime: 50 });
},
async onResizeEnd() {
this.width = window.innerWidth;
await this.$nextTick();
const bannerHeight = await getBannerRowHeight();
useUIStore().updateBannersHeight(bannerHeight);
},
},
}); });
</script> </script>