4531645b4c
These updates ensure better adherence to Vue 3 standards and improve overall code quality and readability. - Update ESLint configuration from Vue 2.x to Vue 3 rules. - Switch from "essential" to strictest "recommended" ESLint ruleset. - Adjust ESLint script to treat warnings as errors by using `--max-warnings=0` flag. This enforces stricter code quality controls provided by Vue 3 rules.
28 lines
778 B
TypeScript
28 lines
778 B
TypeScript
import { defineComponent, ref, watch } from 'vue';
|
|
import type { Ref } from 'vue';
|
|
|
|
const COMPONENT_SIZE_OBSERVER_NAME = 'SizeObserver';
|
|
|
|
export function createSizeObserverStub(
|
|
widthRef: Readonly<Ref<number>> = ref(500),
|
|
) {
|
|
const component = defineComponent({
|
|
name: COMPONENT_SIZE_OBSERVER_NAME,
|
|
emits: {
|
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
widthChanged: (newWidth: number) => true,
|
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
},
|
|
setup: (_, { emit }) => {
|
|
watch(widthRef, (newValue) => {
|
|
emit('widthChanged', newValue);
|
|
});
|
|
},
|
|
template: `<div id="${COMPONENT_SIZE_OBSERVER_NAME}-stub"><slot /></div>`,
|
|
});
|
|
return {
|
|
name: COMPONENT_SIZE_OBSERVER_NAME,
|
|
component,
|
|
};
|
|
}
|