项目初始化

src/app/shared/components/mouse-focus/index.en-US.md

@@ -0,0 +1,34 @@
+---
+order: 80
+title: mouse-focus
+type: Component
+---
+
+The focus of the mouse, Add class to focus element when mouse over it in a set of elements, Keeping last state when leaving the container.
+
+## DEMO
+
+```html
+<ul [mouseFocus]="{ time: 250, itemSelector: 'li', actionClassName: 'active'}">
+  <li>
+    <a href="javascript:;">Books</a>
+    <img src="//qr.liantu.com/api.php?text=https://e.ng-alain.com/">
+  </li>
+  <li class="active">
+    <a href="javascript:;">APP</a>
+    <img src="//qr.liantu.com/api.php?text=https://e.ng-alain.com/">
+  </li>
+  <li>
+    <a href="javascript:;">WeChat</a>
+    <img src="//qr.liantu.com/api.php?text=https://e.ng-alain.com/">
+  </li>
+</ul>
+```
+
+## API
+
+| Property     | Description        | Type      | Default |
+| ----- | ------ | ----- | ------ |
+| `[delay]` | Delay (unit: milliseconds) | `number` | `250`  |
+| `[itemSelector]` | Class name of element item | `string` | `li` |
+| `[actionClassName]` | Class name of focus element | `string` | `active` |

src/app/shared/components/mouse-focus/index.ts

@@ -0,0 +1,2 @@
+export * from './mouse-focus.directive';
+export * from './mouse-focus.module';

src/app/shared/components/mouse-focus/index.zh-CN.md

@@ -0,0 +1,34 @@
+---
+order: 80
+title: mouse-focus
+type: Component
+---
+
+鼠标焦点，在一组元素里鼠标移到某个元素时增加额外一个类名，当离开容器时保留最后一个状态。
+
+## DEMO
+
+```html
+<ul [mouseFocus]="{ time: 250, itemSelector: 'li', actionClassName: 'active'}">
+  <li>
+    <a href="javascript:;">必读</a>
+    <img src="//qr.liantu.com/api.php?text=https://e.ng-alain.com/">
+  </li>
+  <li class="active">
+    <a href="javascript:;">APP</a>
+    <img src="//qr.liantu.com/api.php?text=https://e.ng-alain.com/">
+  </li>
+  <li>
+    <a href="javascript:;">微信</a>
+    <img src="//qr.liantu.com/api.php?text=https://e.ng-alain.com/">
+  </li>
+</ul>
+```
+
+## API
+
+| 参数                | 说明            | 类型     | 默认值   |
+|---------------------|---------------|----------|----------|
+| `[delay]`           | 延迟（单位：毫秒） | `number` | `250`    |
+| `[itemSelector]`   | 项类名          | `string` | `li`     |
+| `[actionClassName]` | 获得焦点时类名  | `string` | `active` |

src/app/shared/components/mouse-focus/mouse-focus.directive.ts

@@ -0,0 +1,60 @@
+import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
+import { fromEvent, Subject } from 'rxjs';
+import { auditTime, takeUntil } from 'rxjs/operators';
+
+export interface MouseFocusOptions {
+  delay?: number;
+  itemSelector?: string;
+  actionClassName?: string;
+}
+
+@Directive({
+  selector: `[mouseFocus]`,
+  exportAs: `mouseFocus`
+})
+export class MouseFocusDirective implements AfterViewInit, OnDestroy {
+  private unsubscribe$ = new Subject<void>();
+  private _cog!: MouseFocusOptions;
+  private _curEl: HTMLElement | null = null;
+
+  @Input('mouseFocus')
+  set config(value: MouseFocusOptions) {
+    this._cog = {
+      delay: 250,
+      itemSelector: 'li',
+      actionClassName: 'active',
+      ...value
+    };
+  }
+
+  constructor(private el: ElementRef) {
+    this.config = {};
+  }
+
+  ngAfterViewInit(): void {
+    const { el, unsubscribe$, _cog } = this;
+    let { _curEl } = this;
+    const parentEl = el.nativeElement as HTMLElement;
+    fromEvent(parentEl, 'mouseover')
+      .pipe(takeUntil(unsubscribe$), auditTime(_cog.delay!))
+      .subscribe((e: Event) => {
+        const target = (e.target as HTMLElement).closest(_cog.itemSelector!) as HTMLElement;
+        if (!target || !parentEl.contains(target)) {
+          return;
+        }
+
+        if (_curEl) {
+          _curEl.classList.remove(_cog.actionClassName!);
+        }
+        target.classList.add(_cog.actionClassName!);
+        _curEl = target;
+      });
+    _curEl = (parentEl.querySelector(`.${_cog.actionClassName}`) as HTMLElement) || null;
+  }
+
+  ngOnDestroy(): void {
+    const { unsubscribe$ } = this;
+    unsubscribe$.next();
+    unsubscribe$.complete();
+  }
+}

src/app/shared/components/mouse-focus/mouse-focus.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+import { MouseFocusDirective } from './mouse-focus.directive';
+
+const COMPONENTS = [MouseFocusDirective];
+
+@NgModule({
+  declarations: COMPONENTS,
+  exports: COMPONENTS
+})
+export class MouseFocusModule {}