1b9be8fe2d
- Migrate `StatefulVue`:
- Introduce `UseCollectionState` that replaces its behavior and acts
as a shared state store.
- Add more encapsulated, granular functions based on read or write
access to state in CollectionState.
- Some linting rules get activates due to new code-base compability to
modern parses, fix linting errors.
- Rename Dialog to ModalDialog as after refactoring,
eslintvue/no-reserved-component-names does not allow name Dialog.
- To comply with `vue/multi-word-component-names`, rename:
- `Code` -> `CodeInstruction`
- `Handle` -> `SliderHandle`
- `Documentable` -> `DocumentableNode`
- `Node` -> `NodeContent`
- `INode` -> `INodeContent`
- `Responsive` -> `SizeObserver`
- Remove `vue-property-decorator` and `vue-class-component`
dependencies.
- Refactor `watch` with computed properties when possible for cleaner
code.
- Introduce `UseApplication` to reduce repeated code in new components
that use `computed` more heavily than before.
- Change TypeScript target to `es2017` to allow top level async calls
for getting application context/state/instance to simplify the code by
removing async calls. However, mocha (unit and integration) tests do
not run with top level awaits, so a workaround is used.
104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<template>
|
|
<div ref="containerElement" class="container">
|
|
<slot ref="containerElement" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent, ref, onMounted, onBeforeUnmount,
|
|
} from 'vue';
|
|
|
|
export default defineComponent({
|
|
emits: {
|
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
sizeChanged: () => true,
|
|
widthChanged: (width: number) => true,
|
|
heightChanged: (height: number) => true,
|
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
},
|
|
setup(_, { emit }) {
|
|
const containerElement = ref<HTMLElement>();
|
|
|
|
let width = 0;
|
|
let height = 0;
|
|
let observer: ResizeObserver;
|
|
|
|
onMounted(async () => {
|
|
width = containerElement.value.offsetWidth;
|
|
height = containerElement.value.offsetHeight;
|
|
|
|
observer = await initializeResizeObserver(updateSize);
|
|
observer.observe(containerElement.value);
|
|
|
|
fireChangeEvents();
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
observer?.disconnect();
|
|
});
|
|
|
|
async function initializeResizeObserver(
|
|
callback: ResizeObserverCallback,
|
|
): Promise<ResizeObserver> {
|
|
if ('ResizeObserver' in window) {
|
|
return new window.ResizeObserver(callback);
|
|
}
|
|
const module = await import('@juggle/resize-observer');
|
|
return new module.ResizeObserver(callback);
|
|
}
|
|
|
|
function updateSize() {
|
|
let sizeChanged = false;
|
|
if (isWidthChanged()) {
|
|
updateWidth(containerElement.value.offsetWidth);
|
|
sizeChanged = true;
|
|
}
|
|
if (isHeightChanged()) {
|
|
updateHeight(containerElement.value.offsetHeight);
|
|
sizeChanged = true;
|
|
}
|
|
if (sizeChanged) {
|
|
emit('sizeChanged');
|
|
}
|
|
}
|
|
|
|
function updateWidth(newWidth: number) {
|
|
width = newWidth;
|
|
emit('widthChanged', newWidth);
|
|
}
|
|
|
|
function updateHeight(newHeight: number) {
|
|
height = newHeight;
|
|
emit('heightChanged', newHeight);
|
|
}
|
|
|
|
function fireChangeEvents() {
|
|
updateWidth(containerElement.value.offsetWidth);
|
|
updateHeight(containerElement.value.offsetHeight);
|
|
emit('sizeChanged');
|
|
}
|
|
|
|
function isWidthChanged(): boolean {
|
|
return width !== containerElement.value.offsetWidth;
|
|
}
|
|
|
|
function isHeightChanged(): boolean {
|
|
return height !== containerElement.value.offsetHeight;
|
|
}
|
|
|
|
return {
|
|
containerElement,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block; // if inline then it has no height or weight
|
|
}
|
|
</style>
|