Hijlkema.Codes/z-elements
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases Activity

Clean up internal type usages

Browse Source
This commit is contained in:
Mitch Hijlkema
2023-09-02 21:02:50 +02:00
parent 41830bbca5
commit ad59f07d2b
14 changed files with 176 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
libs/_internal/controllers/src/lib/destroy.controller.ts
View File

@@ -12,9 +12,10 @@ export class DestroyController implements ReactiveController {
/** Public variables */
public readonly destroy = this.destroy$.asObservable();
/** constructor & lifecylce */
/** constructor & lifecycle */
constructor(host: ReactiveControllerHost) {
(this._host = host).addController(this);
this._host = host;
this._host.addController(this);
}
public hostDisconnected() {

22
libs/_internal/directives/src/lib/async-directive.ts
View File

@@ -1,10 +1,25 @@
import { noChange } from 'lit';
import { AsyncDirective, directive } from 'lit/async-directive.js';
import { Observable, Subject, tap } from 'rxjs';
class Async extends AsyncDirective {
/** Private variables */
private readonly destroy$ = new Subject<void>();
/** Protected variables */
/** Public variables */
/** constructor & lifecycle */
protected override disconnected(): void {
super.disconnected();
this.destroy$.next();
this.destroy$.complete();
}
/** Public methods */
render(observable: Observable<unknown>) {
observable
.pipe(
@@ -17,12 +32,9 @@ class Async extends AsyncDirective {
return noChange;
}
protected override disconnected(): void {
super.disconnected();
/** Protected methods */
this.destroy$.next();
this.destroy$.complete();
}
/** Private methods */
}
export const asyncDirective = directive(Async);

42
libs/_internal/types/.eslintrc.json Normal file
View File

@@ -0,0 +1,42 @@
{
"extends": [
"../../../.eslintrc.json"
],
"ignorePatterns": [
"!**/*"
],
"overrides": [
{
"files": [
"*.ts",
"*.tsx",
"*.js",
"*.jsx"
],
"rules": {}
},
{
"files": [
"*.ts",
"*.tsx"
],
"rules": {}
},
{
"files": [
"*.js",
"*.jsx"
],
"rules": {}
},
{
"files": [
"*.json"
],
"parser": "jsonc-eslint-parser",
"rules": {
"@nx/dependency-checks": "error"
}
}
]
}

13
libs/_internal/types/README.md Normal file
View File

@@ -0,0 +1,13 @@
# _internal-types
This library was generated with [Nx](https://nx.dev).
## Building
Run `nx build _internal-types` to build the library.

10
libs/_internal/types/package.json Normal file
View File

@@ -0,0 +1,10 @@
{
"name": "@z-elements/_internal/types",
"version": "0.0.1",
"dependencies": {
"tslib": "^2.3.0"
},
"type": "commonjs",
"main": "./src/index.js",
"typings": "./src/index.d.ts"
}

35
libs/_internal/types/project.json Normal file
View File

@@ -0,0 +1,35 @@
{
"name": "_internal-types",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "libs/_internal/types/src",
"projectType": "library",
"targets": {
"build": {
"executor": "@nx/js:tsc",
"outputs": [
"{options.outputPath}"
],
"options": {
"outputPath": "dist/libs/_internal/types",
"main": "libs/_internal/types/src/index.ts",
"tsConfig": "libs/_internal/types/tsconfig.lib.json",
"assets": [
"libs/_internal/types/*.md"
]
}
},
"lint": {
"executor": "@nx/linter:eslint",
"outputs": [
"{options.outputFile}"
],
"options": {
"lintFilePatterns": [
"libs/_internal/types/**/*.ts",
"libs/_internal/types/package.json"
]
}
}
},
"tags": []
}

1
libs/_internal/types/src/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './lib/lit'

5
libs/_internal/types/src/lib/lit.ts Normal file
View File

@@ -0,0 +1,5 @@
import { ReactiveControllerHost as LitReactiveControllerHost } from 'lit';
export type ReactiveControllerHost<T> = LitReactiveControllerHost & {
[K in keyof T]: T[K];
};

19
libs/_internal/types/tsconfig.json Normal file
View File

@@ -0,0 +1,19 @@
{
"extends": "../../../tsconfig.base.json",
"compilerOptions": {
"module": "commonjs",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.lib.json"
}
]
}

10
libs/_internal/types/tsconfig.lib.json Normal file
View File

@@ -0,0 +1,10 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"declaration": true,
"types": ["node"]
},
"include": ["src/**/*.ts"],
"exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
}

2
libs/panels/bottom-panel/src/lib/bottom-panel.component.ts
View File

@@ -21,7 +21,7 @@ export default class BottomPanel extends LitElement {
/** Public variables */
@property({ type: Boolean, reflect: true }) public open = false;
/** constructor & lifecylce */
/** constructor & lifecycle */
override connectedCallback() {
super.connectedCallback();

25
libs/tooltip/src/lib/controllers/position.controller.ts
View File

@@ -1,4 +1,6 @@
import { ReactiveController, ReactiveControllerHost } from 'lit';
import { ReactiveControllerHost } from '@z-elements/_internal/types';
import { ReactiveController } from 'lit';
import { Subject, debounceTime, fromEvent, takeUntil, tap } from 'rxjs';
@@ -15,7 +17,7 @@ import TooltipComponent from '../tooltip.component';
export class PositionController implements ReactiveController {
/** Private variables */
private readonly _host: ReactiveControllerHost<TooltipComponent>;
private _hostTarget: HTMLElement | undefined;
private _hostTarget: HTMLElement | null = null;
private readonly destroy$ = new Subject<void>();
@@ -24,7 +26,7 @@ export class PositionController implements ReactiveController {
/** Public variables */
public top: number = 0;
public left: number = 0;
public position: Placement;
public position: Placement | undefined;
/** constructor & lifecycle */
constructor(host: ReactiveControllerHost<TooltipComponent>) {
@@ -63,13 +65,12 @@ export class PositionController implements ReactiveController {
const availablePosition: Placement[] = [Placement.top, Placement.left, Placement.right, Placement.bottom];
this.position = this._host.preferredPlacement;
while (!this.doesPostionFitInScreen(topLeft) && exhaustedPositions.length < 4) {
while (!this.doesPositionFitInScreen(topLeft) && exhaustedPositions.length < 4) {
topLeft = this.getPositions(availablePosition.find((p) => !exhaustedPositions.includes(p))!);
exhaustedPositions.push(availablePosition.find((p) => !exhaustedPositions.includes(p))!);
this.position = availablePosition.find((p) => !exhaustedPositions.includes(p))!;
}
console.log(this.position);
this.top = topLeft.top;
this.left = topLeft.left;
@@ -87,7 +88,7 @@ export class PositionController implements ReactiveController {
switch (position) {
case Placement.top:
topLeft.top = domRect.top - this._host.contentElement?.offsetHeight;
topLeft.top = domRect.top - (this._host.contentElement?.offsetHeight || 0);
topLeft.left = domRect.left;
break;
case 'bottom':
@@ -95,11 +96,11 @@ export class PositionController implements ReactiveController {
topLeft.left = domRect.left;
break;
case 'left':
topLeft.top = domRect.top + domRect.height / 2 - this._host.contentElement?.offsetHeight / 2;
topLeft.left = domRect.left - this._host.contentElement?.offsetWidth;
topLeft.top = domRect.top + domRect.height / 2 - (this._host.contentElement?.offsetHeight || 0) / 2;
topLeft.left = domRect.left - (this._host.contentElement?.offsetWidth || 0);
break;
case 'right':
topLeft.top = domRect.top + domRect.height / 2 - this._host.contentElement?.offsetHeight / 2;
topLeft.top = domRect.top + domRect.height / 2 - (this._host.contentElement?.offsetHeight || 0) / 2;
topLeft.left = domRect.right;
break;
}
@@ -112,7 +113,7 @@ export class PositionController implements ReactiveController {
return element.getBoundingClientRect();
}
private doesPostionFitInScreen(topLeft: { top: number; left: number }): boolean {
private doesPositionFitInScreen(topLeft: { top: number; left: number }): boolean {
if (topLeft.top < 0) {
return false;
}
@@ -121,11 +122,11 @@ export class PositionController implements ReactiveController {
return false;
}
if (this.top + this._host.contentElement?.offsetHeight > window.innerHeight) {
if (this.top + (this._host.contentElement?.offsetHeight || 0) > window.innerHeight) {
return false;
}
if (this.left + this._host.contentElement?.offsetWidth > window.innerWidth) {
if (this.left + (this._host.contentElement?.offsetWidth || 0) > window.innerWidth) {
return false;
}

6
libs/tooltip/src/lib/controllers/visibility.controller.ts
View File

@@ -1,4 +1,6 @@
import { ReactiveController, ReactiveControllerHost } from 'lit';
import { ReactiveControllerHost } from '@z-elements/_internal/types';
import { ReactiveController } from 'lit';
import {
BehaviorSubject,
@@ -39,7 +41,7 @@ export class VisibilityController implements ReactiveController {
public show$ = this.emitShow$.asObservable();
public hide$ = this.emitHide$.asObservable();
/** constructor & lifecylce */
/** constructor & lifecycle */
constructor(host: ReactiveControllerHost<TooltipComponent>) {
this._host = host;
this._host.addController(this);