Skip to content

Commit b3e4013

Browse files
alexcibotarialexcibotari
committed
Update Content Section
1 parent 10fcc3f commit b3e4013

22 files changed

+778
-348
lines changed

‎libs/ui/item/src/index.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { HlmItem } from './lib/hlm-item';
2+
import { HlmItemActions } from './lib/hlm-item-actions';
3+
import { HlmItemContent } from './lib/hlm-item-content';
4+
import { HlmItemDescription } from './lib/hlm-item-description';
5+
import { HlmItemFooter } from './lib/hlm-item-footer';
6+
import { HlmItemGroup } from './lib/hlm-item-group';
7+
import { HlmItemHeader } from './lib/hlm-item-header';
8+
import { HlmItemMedia } from './lib/hlm-item-media';
9+
import { HlmItemSeparator } from './lib/hlm-item-separator';
10+
import { HlmItemTitle } from './lib/hlm-item-title';
11+
12+
export * from './lib/hlm-item';
13+
export * from './lib/hlm-item-actions';
14+
export * from './lib/hlm-item-content';
15+
export * from './lib/hlm-item-description';
16+
export * from './lib/hlm-item-footer';
17+
export * from './lib/hlm-item-group';
18+
export * from './lib/hlm-item-header';
19+
export * from './lib/hlm-item-media';
20+
export * from './lib/hlm-item-separator';
21+
export * from './lib/hlm-item-title';
22+
export * from './lib/hlm-item-token';
23+
24+
export const HlmItemImports = [
25+
HlmItem,
26+
HlmItemActions,
27+
HlmItemContent,
28+
HlmItemDescription,
29+
HlmItemFooter,
30+
HlmItemGroup,
31+
HlmItemHeader,
32+
HlmItemMedia,
33+
HlmItemSeparator,
34+
HlmItemTitle,
35+
] as const;

‎libs/ui/item/src/lib/hlm-item-actions.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmItemActions],hlm-item-actions',
7+
host: {
8+
'data-slot': 'item-actions',
9+
'[class]': '_computedClass()',
10+
},
11+
})
12+
export class HlmItemActions {
13+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
14+
protected readonly _computedClass = computed(() => hlm('flex items-center gap-2', this.userClass()));
15+
}

‎libs/ui/item/src/lib/hlm-item-content.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmItemContent],hlm-item-content',
7+
host: {
8+
'data-slot': 'item-content',
9+
'[class]': '_computedClass()',
10+
},
11+
})
12+
export class HlmItemContent {
13+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
14+
protected readonly _computedClass = computed(() =>
15+
hlm('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', this.userClass()),
16+
);
17+
}

‎libs/ui/item/src/lib/hlm-item-description.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: 'p[hlmItemDescription]',
7+
host: {
8+
'data-slot': 'item-description',
9+
'[class]': '_computedClass()',
10+
},
11+
})
12+
export class HlmItemDescription {
13+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
14+
protected readonly _computedClass = computed(() =>
15+
hlm(
16+
'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
17+
'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
18+
this.userClass(),
19+
),
20+
);
21+
}

‎libs/ui/item/src/lib/hlm-item-footer.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmItemFooter],hlm-item-footer',
7+
host: {
8+
'data-slot': 'item-footer',
9+
'[class]': '_computedClass()',
10+
},
11+
})
12+
export class HlmItemFooter {
13+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
14+
protected readonly _computedClass = computed(() =>
15+
hlm('flex basis-full items-center justify-between gap-2', this.userClass()),
16+
);
17+
}

‎libs/ui/item/src/lib/hlm-item-group.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmItemGroup],hlm-item-group',
7+
host: { 'data-slot': 'item-group', '[class]': '_computedClass()' },
8+
})
9+
export class HlmItemGroup {
10+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
11+
protected readonly _computedClass = computed(() => hlm('group/item-group flex flex-col', this.userClass()));
12+
}

‎libs/ui/item/src/lib/hlm-item-header.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmItemHeader],hlm-item-header',
7+
host: {
8+
'data-slot': 'item-header',
9+
'[class]': '_computedClass()',
10+
},
11+
})
12+
export class HlmItemHeader {
13+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
14+
protected readonly _computedClass = computed(() =>
15+
hlm('flex basis-full items-center justify-between gap-2', this.userClass()),
16+
);
17+
}

‎libs/ui/item/src/lib/hlm-item-media.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import { cva, type VariantProps } from 'class-variance-authority';
4+
import type { ClassValue } from 'clsx';
5+
import { injectHlmItemMediaConfig } from './hlm-item-token';
6+
7+
const itemMediaVariants = cva(
8+
'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_ng-icon]:pointer-events-none',
9+
{
10+
variants: {
11+
variant: {
12+
default: 'bg-transparent',
13+
icon: "bg-muted size-8 rounded-sm border [&_ng-icon:not([class*='text-'])]:text-base",
14+
image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
15+
},
16+
},
17+
defaultVariants: {
18+
variant: 'default',
19+
},
20+
},
21+
);
22+
export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
23+
24+
@Directive({
25+
selector: '[hlmItemMedia],hlm-item-media',
26+
host: {
27+
'data-slot': 'item-media',
28+
'[attr.data-variant]': 'variant()',
29+
'[class]': '_computedClass()',
30+
},
31+
})
32+
export class HlmItemMedia {
33+
private readonly _config = injectHlmItemMediaConfig();
34+
35+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
36+
37+
protected readonly _computedClass = computed(() =>
38+
hlm(itemMediaVariants({ variant: this.variant() }), this.userClass()),
39+
);
40+
public readonly variant = input<ItemMediaVariants['variant']>(this._config.variant);
41+
}

‎libs/ui/item/src/lib/hlm-item-separator.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { BrnSeparator } from '@spartan-ng/brain/separator';
3+
import { hlmSeparatorClass } from '@spartan-ng/helm/separator';
4+
import { hlm } from '@spartan-ng/helm/utils';
5+
import type { ClassValue } from 'clsx';
6+
7+
@Directive({
8+
selector: 'div[hlmItemSeparator]',
9+
hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
10+
host: { 'data-slot': 'item-separator', '[class]': '_computedClass()' },
11+
})
12+
export class HlmItemSeparator {
13+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
14+
protected readonly _computedClass = computed(() => hlm(hlmSeparatorClass, 'my-0', this.userClass()));
15+
}

‎libs/ui/item/src/lib/hlm-item-title.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { computed, Directive, input } from '@angular/core';
2+
import { hlm } from '@spartan-ng/helm/utils';
3+
import type { ClassValue } from 'clsx';
4+
5+
@Directive({
6+
selector: '[hlmItemTitle],hlm-item-title',
7+
host: {
8+
'data-slot': 'item-title',
9+
'[class]': '_computedClass()',
10+
},
11+
})
12+
export class HlmItemTitle {
13+
public readonly userClass = input<ClassValue>('', { alias: 'class' });
14+
protected readonly _computedClass = computed(() =>
15+
hlm('flex w-fit items-center gap-2 text-sm leading-snug font-medium', this.userClass()),
16+
);
17+
}

0 commit comments

Comments
 (0)