From f36ffb91f1b9afa4ad61f7dc5532abef0efd8f10 Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Tue, 8 Nov 2022 18:05:13 +0100 Subject: [PATCH] finish up angular component and improve vue docs --- examples/react/package.json | 2 +- examples/vue/package-lock.json | 19 ++++++---- examples/vue/package.json | 2 +- examples/vue/src/App.vue | 2 +- package.json | 8 ++-- .../src/overlayscrollbars.component.ts | 15 +++----- .../src/overlayscrollbars.directive.ts | 3 +- .../test/overlayscrollbars.component.spec.ts | 38 ++++++++++++++++++- packages/overlayscrollbars-vue/README.md | 16 ++++++++ .../src/OverlayScrollbarsComponent.vue | 23 ++++++----- 10 files changed, 90 insertions(+), 38 deletions(-) diff --git a/examples/react/package.json b/examples/react/package.json index de4c7c5..270c02d 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -8,7 +8,7 @@ "@types/node": "^16.11.68", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", - "overlayscrollbars-react": "file:../../packages/overlayscrollbars-react", + "overlayscrollbars-react": "file:../../packages/overlayscrollbars-react/dist", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/examples/vue/package-lock.json b/examples/vue/package-lock.json index 0ffc143..db6d2b1 100644 --- a/examples/vue/package-lock.json +++ b/examples/vue/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "dependencies": { - "overlayscrollbars-vue": "file:../../packages/overlayscrollbars-vue", + "overlayscrollbars-vue": "file:../../packages/overlayscrollbars-vue/dist", "vue": "^3.2.38" }, "devDependencies": { @@ -19,6 +19,14 @@ "vue-tsc": "^0.40.7" } }, + "../../packages/overlayscrollbars-vue/dist": { + "version": "0.4.0", + "license": "MIT", + "peerDependencies": { + "overlayscrollbars": "^2.0.0", + "vue": "^3.2.25" + } + }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -1481,11 +1489,8 @@ "dev": true }, "node_modules/overlayscrollbars-vue": { - "version": "0.4.0", - "resolved": "file:../../packages/overlayscrollbars-vue", - "peerDependencies": { - "vue": "^3.2.25" - } + "resolved": "../../packages/overlayscrollbars-vue/dist", + "link": true }, "node_modules/path-parse": { "version": "1.0.7", @@ -2741,7 +2746,7 @@ "dev": true }, "overlayscrollbars-vue": { - "version": "0.4.0", + "version": "file:../../packages/overlayscrollbars-vue/dist", "requires": {} }, "path-parse": { diff --git a/examples/vue/package.json b/examples/vue/package.json index 58e0856..10f324b 100644 --- a/examples/vue/package.json +++ b/examples/vue/package.json @@ -1,7 +1,7 @@ { "private": true, "dependencies": { - "overlayscrollbars-vue": "file:../../packages/overlayscrollbars-vue", + "overlayscrollbars-vue": "file:../../packages/overlayscrollbars-vue/dist", "vue": "^3.2.38" }, "devDependencies": { diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue index fbb2844..7cb12bb 100644 --- a/examples/vue/src/App.vue +++ b/examples/vue/src/App.vue @@ -8,7 +8,7 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
- +
diff --git a/package.json b/package.json index a0674bb..09c0f36 100644 --- a/package.json +++ b/package.json @@ -77,10 +77,10 @@ "build:vue": "npm run build --workspace=overlayscrollbars-vue", "build:ngx": "npm run build --workspace=overlayscrollbars-ngx", "build:svelte": "npm run build --workspace=overlayscrollbars-svelte", - "example:react": "npm run build:react && cd examples/react && npm i --install-links && npm run start", - "example:vue": "npm run build:vue && cd examples/vue && npm i --install-links && npm run dev", - "example:ngx": "npm run build:ngx && cd examples/angular && npm i --install-links && npm run start", - "example:svelte": "npm run build:svelte && cd examples/svelte && npm i --install-links && npm run dev", + "example:react": "npm run build:react && cd examples/react && npm i && npm run start", + "example:vue": "npm run build:vue && cd examples/vue && npm i && npm run dev", + "example:ngx": "npm run build:ngx && cd examples/angular && npm i && npm run start", + "example:svelte": "npm run build:svelte && cd examples/svelte && npm i && npm run dev", "lint": "eslint ./packages/**/{src,test}/**/*.{js,jsx,ts,tsx}", "lint:fix": "eslint --fix ./packages/**/{src,test}/**/*.{js,jsx,ts,tsx}", "prettier": "prettier --check ./packages/**/{src,test}/**/*.{js,jsx,ts,tsx}", diff --git a/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts b/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts index 8e2cad3..2d0b04d 100644 --- a/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts +++ b/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts @@ -10,8 +10,8 @@ import { AfterViewInit, } from '@angular/core'; import { OverlayScrollbars } from 'overlayscrollbars'; -import { OverlayScrollbarsDirective } from '~/overlayscrollbars.directive'; import type { PartialOptions, EventListeners, EventListenerMap } from 'overlayscrollbars'; +import { OverlayScrollbarsDirective } from './overlayscrollbars.directive'; const mergeEventListeners = (emits: EventListeners, events: EventListeners) => (Object.keys(emits) as (keyof EventListeners)[]).reduce( @@ -29,17 +29,12 @@ const mergeEventListeners = (emits: EventListeners, events: EventListeners) => ); @Component({ - selector: '[overlay-scrollbars-component]', // https://angular.io/guide/styleguide#component-selectors - exportAs: 'overlayScrollbars', + selector: 'overlay-scrollbars, [overlay-scrollbars]', // https://angular.io/guide/styleguide#component-selectors host: { 'data-overlayscrollbars': '' }, - template: `
+ 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;