d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Constructor, InputBoolean, MixinBase, mixinUnsubscribe, ThyUnsubscribe } from 'ngx-tethys/core';
import { useHostRenderer } from '@tethys/cdk/dom';
import { takeUntil } from 'rxjs/operators';

import {
    AfterContentInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ContentChildren,
    Directive,
    HostBinding,
    Input,
    OnInit,
    QueryList,
    TemplateRef
} from '@angular/core';
import { ThySpacingSize, getNumericSize } from 'ngx-tethys/core';
import { NgFor, NgTemplateOutlet } from '@angular/common';

/**
 * 间距组件项，使用结构性指令 *thySpaceItem 传入模板
 * @name thySpaceItem
 * @order 20
 */
@Directive({
    selector: '[thySpaceItem]',
    host: {
        class: 'thy-space-item'
    },
    standalone: true
})
export class ThySpaceItemDirective implements OnInit {
    constructor() {}

    ngOnInit(): void {}
}

const DEFAULT_SIZE: ThySpacingSize = 'md';

const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);

/**
 * 间距组件
 * @name thy-space
 * @order 10
 */
@Component({
    selector: 'thy-space',
    templateUrl: './space.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-space'
    },
    standalone: true,
    imports: [NgFor, NgTemplateOutlet]
})
export class ThySpaceComponent extends _MixinBase implements OnInit, AfterContentInit {
    public space: number = getNumericSize(DEFAULT_SIZE);

    private hostRenderer = useHostRenderer();

    /**
     * 大小，支持 `zero` | `xxs` | `xs` | `sm` | `md` | `lg` | `xlg` 和自定义数字大小
     * @type string | number
     */
    @Input() set thySize(size: ThySpacingSize) {
        this.space = getNumericSize(size, DEFAULT_SIZE);
    }

    /**
     * 间距垂直方向，默认是水平方向
     */
    @HostBinding(`class.thy-space-vertical`)
    @Input()
    @InputBoolean()
    thyVertical: boolean = false;

    // @ClassBinding(`align-items-{{value}}`)
    /**
     * 对齐方式，可选择 `start` | `end` | `baseline` | `center`
     */
    @Input()
    set thyAlign(align: string) {
        this.hostRenderer.updateClass(align ? [`align-items-${align}`] : []);
    }

    @ContentChildren(ThySpaceItemDirective, { read: TemplateRef }) items!: QueryList<TemplateRef<HTMLElement>>;

    constructor(private cdr: ChangeDetectorRef) {
        super();
    }

    ngOnInit(): void {}

    ngAfterContentInit(): void {
        this.items.changes.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(() => {
            this.cdr.markForCheck();
        });
    }
}

1	import { Constructor, InputBoolean, MixinBase, mixinUnsubscribe, ThyUnsubscribe } from 'ngx-tethys/core';
2	import { useHostRenderer } from '@tethys/cdk/dom';
3	import { takeUntil } from 'rxjs/operators';
4
5	import {
6	AfterContentInit,
7	ChangeDetectionStrategy,
8	ChangeDetectorRef,
9	Component,
10	ContentChildren,
11	Directive,
12	HostBinding,
13	Input,
14	OnInit,	1✔
15	QueryList,
16	TemplateRef
17	} from '@angular/core';	1✔
18	import { ThySpacingSize, getNumericSize } from 'ngx-tethys/core';
19	import { NgFor, NgTemplateOutlet } from '@angular/common';	1✔
20
21	/**
22	* 间距组件项，使用结构性指令 *thySpaceItem 传入模板
23	* @name thySpaceItem
24	* @order 20
25	*/
26	@Directive({
27	selector: '[thySpaceItem]',
28	host: {
29	class: 'thy-space-item'
30	},	1✔
31	standalone: true	1✔
32	})
33	export class ThySpaceItemDirective implements OnInit {
34	constructor() {}
35
36	ngOnInit(): void {}
37	}	1✔
38
39	const DEFAULT_SIZE: ThySpacingSize = 'md';	×
40
41	const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);
42		×
43	/**
44	* 间距组件
45	* @name thy-space	×
46	* @order 10	×
47	*/	×
48	@Component({	×
49	selector: 'thy-space',	×
50	templateUrl: './space.component.html',
51	changeDetection: ChangeDetectionStrategy.OnPush,
52	host: {
53	class: 'thy-space'	×
54	},	×
55	standalone: true,
56	imports: [NgFor, NgTemplateOutlet]
57	})	1✔
58	export class ThySpaceComponent extends _MixinBase implements OnInit, AfterContentInit {
59	public space: number = getNumericSize(DEFAULT_SIZE);
60		1✔
61	private hostRenderer = useHostRenderer();
62
63	/**
64	* 大小，支持 `zero` \| `xxs` \| `xs` \| `sm` \| `md` \| `lg` \| `xlg` 和自定义数字大小
65	* @type string \| number
66	*/
67	@Input() set thySize(size: ThySpacingSize) {	1✔
68	this.space = getNumericSize(size, DEFAULT_SIZE);
69	}
70
71	/**	1✔
72	* 间距垂直方向，默认是水平方向
73	*/
74	@HostBinding(`class.thy-space-vertical`)
75	@Input()
76	@InputBoolean()
77	thyVertical: boolean = false;
78
79	// @ClassBinding(`align-items-{{value}}`)
80	/**
81	* 对齐方式，可选择 `start` \| `end` \| `baseline` \| `center`
82	*/
83	@Input()
84	set thyAlign(align: string) {
85	this.hostRenderer.updateClass(align ? [`align-items-${align}`] : []);
86	}
87
88	@ContentChildren(ThySpaceItemDirective, { read: TemplateRef }) items!: QueryList<TemplateRef<HTMLElement>>;
89
90	constructor(private cdr: ChangeDetectorRef) {
91	super();
92	}
93
94	ngOnInit(): void {}
95
96	ngAfterContentInit(): void {
97	this.items.changes.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(() => {
98	this.cdr.markForCheck();
99	});
100	}
101	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous