PiyingAngularComponent

actionsClass

monitor

l1-title*

l2-title*

code TS

// src/app/piying/page/component/field-group/card/example/actionsClass/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        l1: v.pipe(v.string(), v.title('l1-title')),
        l2: v.pipe(v.boolean(), v.title('l2-title')),
      }),
      safeDefine.setComponent('card', (actions) => {
        return [
          actions.inputs.patch({
            actionsClass: 'actionsClass1',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

content_copy

actionsKey

monitor

l2-title*

l1-title*

code TS

// src/app/piying/page/component/field-group/card/example/actionsKey/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        l1: v.pipe(v.string(), v.title('l1-title')),
        l2: v.pipe(v.boolean(), v.title('l2-title')),
      }),
      safeDefine.setComponent('card', (actions) => {
        return [
          actions.inputs.patch({
            actionsKey: 'l1',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

content_copy

bodyClass

monitor

l1-title*

l2-title*

code TS

// src/app/piying/page/component/field-group/card/example/bodyClass/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        l1: v.pipe(v.string(), v.title('l1-title')),
        l2: v.pipe(v.boolean(), v.title('l2-title')),
      }),
      safeDefine.setComponent('card', (actions) => {
        return [
          actions.inputs.patch({
            bodyClass: 'bodyClass1',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

content_copy

border

monitor

l1-title*

l2-title*

code TS

// src/app/piying/page/component/field-group/card/example/border/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        l1: v.pipe(v.string(), v.title('l1-title')),
        l2: v.pipe(v.boolean(), v.title('l2-title')),
      }),
      safeDefine.setComponent('card', (actions) => {
        return [
          actions.inputs.patch({
            border: 'dash',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

content_copy

fake

monitor

U.S.A. Trilogy

authorGrady Ward

formatEbook

genreThriller

publisherHappy House

seriesHarry Potter

Long Walk to Freedom

authorLewis Carroll

formatEbook

genreComic

publisherHodder Headline

seriesThe Dresden Files

The Alchemist

authorStephen King

formatEbook

genreHistorical Fiction

publisherParragon

seriesColonel Race

Scoop

authorMargaret Atwood

formatHardcover

genreClassic

publisherKogan Page

seriesDune

Cranford

authorCormac McCarthy

formatPaperback

genreRomance

publisherManor House Publishing

seriesThe Lord of the Rings

Vanity Fair

authorJohn Bunyan

formatAudiobook

genreYoung Adult

publisherSchocken Books

seriesColonel Race

Pale Fire

authorSamuel Beckett

formatAudiobook

genreThriller

publisherVintage Books

seriesThe Lord of the Rings

All the King's Men

authorSuzanne Collins

formatPaperback

genreHorror

publisherPan Books

seriesTwilight

Beloved

authorSalman Rushdie

formatAudiobook

genreWestern

publisherEel Pie Publishing

seriesThe Bartimaeus Trilogy

The Hound of the Baskervilles

authorPhilip Roth

formatAudiobook

genreMemoir

publisherFearless Books

seriesThe Dark Tower

The Rainbow

authorSamuel Beckett

formatAudiobook

genreMythology

publisherHawthorne Books

seriesThe Border Trilogy

code TS

// src/app/piying/page/component/field-group/card/example/fake/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
import { CardBodyDemoNFCC } from '@@py/component/card-body/component';
import { signal } from '@angular/core';
import { faker } from '@faker-js/faker';
import { filter } from 'rxjs';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        figure: v.pipe(
          NFCSchema,
          safeDefine.setComponent('common-data', (actions) => {
            return [
              actions.inputs.patch({
                content: {
                  image: {
                    src: faker.image.url({ width: 400, height: 400 }),
                  },
                },
              }),
            ];
          }),
        ),
        title: v.pipe(
          NFCSchema,
          safeDefine.setComponent('common-data', (actions) => {
            return [actions.inputs.patch({ content: faker.book.title() })];
          }),
        ),
        body: v.pipe(
          NFCSchema,
          safeDefine.setComponent(CardBodyDemoNFCC),
          actions.inputs.patch({
            data: {
              author: faker.book.author(),
              format: faker.book.format(),
              genre: faker.book.genre(),
              publisher: faker.book.publisher(),
              series: faker.book.series(),
            },
          }),
        ),
        actions: v.object({
          __btn: v.pipe(
            NFCSchema,
            safeDefine.setComponent('button', (actions) => {
              return [actions.inputs.patch({ content: 'Go' })];
            }),
          ),
        }),
      }),
      safeDefine.setComponent('card'),
      actions.class.component('shadow-sm w-100'),
    ),
    v.pipe(
      v.object({
        search: v.object({
          title: v.pipe(v.string(), actions.attributes.patch({ placeholder: 'search Title' })),
        }),
        list: v.pipe(
          NFCSchema,
          safeDefine.setComponent('list-template', (actions) => {
            return [
              actions.wrappers.set(['div']),
              actions.class.top('grid grid-cols-3 gap-2'),
              actions.inputs.patch({
                template: v.pipe(
                  v.object({
                    figure: v.pipe(
                      NFCSchema,
                      safeDefine.setComponent('common-data', (actions) => {
                        return [
                          actions.inputs.patchAsync({
                            content: (field) => {
                              return { image: field.context['getItem']().image };
                            },
                          }),
                        ];
                      }),
                    ),
                    title: v.pipe(
                      NFCSchema,
                      safeDefine.setComponent('common-data', (actions) => {
                        return [
                          actions.inputs.patchAsync({
                            content: (field) => {
                              return field.context['getItem']().title;
                            },
                          }),
                        ];
                      }),
                    ),
                    body: v.pipe(
                      NFCSchema,
                      safeDefine.setComponent(CardBodyDemoNFCC, (actions) => {
                        return [
                          actions.inputs.patchAsync({
                            data: (field) => {
                              return field.context['getItem']().body;
                            },
                          }),
                        ];
                      }),
                    ),
                    actions: v.object({
                      __btn: v.pipe(
                        NFCSchema,
                        safeDefine.setComponent('button', (actions) => {
                          return [actions.inputs.patch({ content: 'Go' })];
                        }),
                      ),
                    }),
                  }),
                  safeDefine.setComponent('card'),
                  actions.class.component('shadow-sm w-full'),
                ),
              }),
            ];
          }),
          actions.inputs.patchAsync({
            list: (field) => {
              const list = signal<any[]>([]);
              const result = field.context['getCardList']();
              result.then((value: any) => {
                list.set(value);
              });
              field
                .get(['..', 'search'])
                ?.form.control?.valueChanges.pipe(filter(Boolean))
                .subscribe((searchObj) => {
                  result.then((value: any[]) => {
                    if (searchObj.title) {
                      list.set(
                        value.filter((item) => {
                          return (item.title as string).toLowerCase().includes(searchObj.title);
                        }),
                      );
                    }
                  });
                });

              return list;
            },
          }),
        ),
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex flex-col gap-4'),
);

content_copy

figureClass

monitor

l1-title*

l2-title*

code TS

// src/app/piying/page/component/field-group/card/example/figureClass/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        l1: v.pipe(v.string(), v.title('l1-title')),
        l2: v.pipe(v.boolean(), v.title('l2-title')),
      }),
      safeDefine.setComponent('card', (actions) => {
        return [
          actions.inputs.patch({
            figureClass: 'figureClass1',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

content_copy

figureKey

monitor

l1-title*

l2-title*

code TS

// src/app/piying/page/component/field-group/card/example/figureKey/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        l1: v.pipe(v.string(), v.title('l1-title')),
        l2: v.pipe(v.boolean(), v.title('l2-title')),
      }),
      safeDefine.setComponent('card', (actions) => {
        return [
          actions.inputs.patch({
            figureKey: 'l1',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

content_copy

size

monitor

l1-title*

l2-title*

code TS

// src/app/piying/page/component/field-group/card/example/size/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        l1: v.pipe(v.string(), v.title('l1-title')),
        l2: v.pipe(v.boolean(), v.title('l2-title')),
      }),
      safeDefine.setComponent('card', (actions) => {
        return [
          actions.inputs.patch({
            size: 'lg',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

content_copy

titleKey

monitor

l1-title*

l2-title*

code TS

// src/app/piying/page/component/field-group/card/example/titleKey/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        l1: v.pipe(v.string(), v.title('l1-title')),
        l2: v.pipe(v.boolean(), v.title('l2-title')),
      }),
      safeDefine.setComponent('card', (actions) => {
        return [
          actions.inputs.patch({
            titleKey: 'name',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);

content_copy