+ template: `
`,
+ styles: [':host { display: block; }'],
})
export class OverlayScrollbarsComponent implements OnDestroy, AfterViewInit {
@Input('options')
@@ -91,7 +86,7 @@ export class OverlayScrollbarsComponent implements OnDestroy, AfterViewInit {
this.osDirective?.instance()!.destroy();
}
- private mergeEvents(originalEvents: OverlayScrollbarsComponent['events']) {
+ mergeEvents(originalEvents: OverlayScrollbarsComponent['events']) {
return mergeEventListeners(
{
initialized: (...args) => this.onInitialized.emit(args),
diff --git a/packages/overlayscrollbars-ngx/src/overlayscrollbars.directive.ts b/packages/overlayscrollbars-ngx/src/overlayscrollbars.directive.ts
index c8ed30e..0c53e75 100644
--- a/packages/overlayscrollbars-ngx/src/overlayscrollbars.directive.ts
+++ b/packages/overlayscrollbars-ngx/src/overlayscrollbars.directive.ts
@@ -5,8 +5,7 @@ import type { InitializationTarget } from 'overlayscrollbars';
import type { OverlayScrollbarsComponent } from '~/overlayscrollbars.component';
@Directive({
- selector: '[overlayScrollbarsDirective]', // https://angular.io/guide/styleguide#component-selectors
- exportAs: 'overlayScrollbars',
+ selector: '[overlayScrollbars]', // https://angular.io/guide/styleguide#directive-selectors
})
export class OverlayScrollbarsDirective implements OnChanges {
private instanceRef: OverlayScrollbars | null = null;
diff --git a/packages/overlayscrollbars-ngx/test/overlayscrollbars.component.spec.ts b/packages/overlayscrollbars-ngx/test/overlayscrollbars.component.spec.ts
index 9f70eee..f6c6c86 100644
--- a/packages/overlayscrollbars-ngx/test/overlayscrollbars.component.spec.ts
+++ b/packages/overlayscrollbars-ngx/test/overlayscrollbars.component.spec.ts
@@ -12,7 +12,7 @@ import type { EventListenerMap } from 'overlayscrollbars';
@Component({
template: `
span
+ span
+ `,
+})
+class TestTag {
+ @ViewChild('span', { read: OverlayScrollbarsComponent })
+ spanRef?: OverlayScrollbarsComponent;
+ @ViewChild('os', { read: OverlayScrollbarsComponent })
+ osRef?: OverlayScrollbarsComponent;
+}
+
describe('OverlayscrollbarsNgxComponent', () => {
let component: OverlayScrollbarsComponent;
let fixture: ComponentFixture;
@@ -77,7 +90,7 @@ describe('OverlayscrollbarsNgxComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
...new OverlayscrollbarsModule(),
- declarations: [OverlayScrollbarsComponent, OverlayScrollbarsDirective, Test],
+ declarations: [OverlayScrollbarsComponent, OverlayScrollbarsDirective, Test, TestTag],
}).compileComponents();
fixture = TestBed.createComponent(OverlayScrollbarsComponent);
@@ -349,4 +362,25 @@ describe('OverlayscrollbarsNgxComponent', () => {
expect(onDestroyed).toHaveBeenCalledTimes(1);
expect(onDestroyed).toHaveBeenCalledWith([jasmine.any(Object), jasmine.any(Boolean)]);
});
+
+ it('has correct tags', async () => {
+ const testFixture = TestBed.createComponent(TestTag);
+ const testInstance = testFixture.componentInstance;
+
+ testFixture.detectChanges();
+
+ const osRef = testInstance.osRef!;
+ const spanRef = testInstance.spanRef!;
+
+ expect(osRef).toBeDefined();
+ expect(spanRef).toBeDefined();
+
+ expect(OverlayScrollbars.valid(osRef.instance())).toBe(true);
+ expect(OverlayScrollbars.valid(spanRef.instance())).toBe(true);
+
+ testFixture.destroy();
+
+ expect(OverlayScrollbars.valid(osRef.instance())).toBe(false);
+ expect(OverlayScrollbars.valid(spanRef.instance())).toBe(false);
+ });
});
diff --git a/packages/overlayscrollbars-vue/README.md b/packages/overlayscrollbars-vue/README.md
index 36a616d..033f93b 100644
--- a/packages/overlayscrollbars-vue/README.md
+++ b/packages/overlayscrollbars-vue/README.md
@@ -90,6 +90,22 @@ It has three optional properties: `element`, `options` and `events`.
/>
```
+### Events
+
+Additionally to the `events` property the `OverlayScrollbarsComponent` emits "native" Vue events. To prevent name collisions with DOM events, the events are prefixed with `os`. It doesn't matter whether you use the `events` property, the Vue events or both.
+
+```jsx
+// example usage
+
+
+
+```
+
### Ref
The `ref` of the `OverlayScrollbarsComponent` will give you an object with which you can access the OverlayScrollbars `instance` and the root `element` of the component.
diff --git a/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue b/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
index dbcc760..793f08b 100644
--- a/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
+++ b/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
@@ -8,9 +8,8 @@ import type {
import type { PropType } from 'vue';
import type { EventListeners, EventListenerMap } from 'overlayscrollbars';
-type EmitName = `os${Capitalize}`;
type EmitEventsMap = {
- [N in keyof EventListenerMap]: EmitName;
+ [N in keyof EventListenerMap]: `os${Capitalize}`;
};
const emitEvents: EmitEventsMap = {
@@ -27,12 +26,12 @@ const props = defineProps({
options: { type: Object as PropType },
events: { type: Object as PropType },
});
-const emits = defineEmits({
- osInitialized: (...args: EventListenerMap['initialized']) => true,
- osUpdated: (...args: EventListenerMap['updated']) => true,
- osDestroyed: (...args: EventListenerMap['destroyed']) => true,
- osScroll: (...args: EventListenerMap['scroll']) => true,
-} as Record);
+const emits = defineEmits<{
+ (name: 'osInitialized', ...args: EventListenerMap['initialized']): void;
+ (name: 'osUpdated', ...args: EventListenerMap['updated']): void;
+ (name: 'osDestroyed', ...args: EventListenerMap['destroyed']): void;
+ (name: 'osScroll', ...args: EventListenerMap['scroll']): void;
+}>();
const elementRef = shallowRef(null);
const slotRef = shallowRef(null);
@@ -73,8 +72,12 @@ watch(
).reduce((obj: EventListeners, name: N) => {
const eventListener = currEvents[name];
obj[name] = [
- // @ts-ignore
- (...args: EventListenerMap[N]) => emits(emitEvents[name], ...args),
+ (...args: EventListenerMap[N]) =>
+ emits(
+ emitEvents[name],
+ // @ts-ignore
+ ...args
+ ),
...(Array.isArray(eventListener) ? eventListener : [eventListener]).filter(Boolean),
];
return obj;
