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

The Portrait of a Lady

authorHaruki Murakami

formatAudiobook

genreScience Fiction

publisherEdupedia Publications

seriesThe Border Trilogy

The Lion, the Witch, and the Wardrobe

authorElizabeth Von Arnim

formatHardcover

genreWestern

publisherAddison-Wesley

seriesThe Red Rising Saga

The Golden Bowl

authorMichael Chabon

formatHardcover

genreAdventure

publisherCarcanet Press

seriesAnna Karenina

My Bondage and My Freedom

authorOscar Levy

formatAudiobook

genreGraphic Novel

publisherFlame Tree Publishing

seriesAnna Karenina

Republic

authorHermann Broch

formatPaperback

genreChildren's Literature

publisherMartinus Nijhoff Publishers

seriesThe Red Rising Saga

The Scarlet Letter

authorJacob Grimm

formatHardcover

genreComedy

publisherLethe Press

seriesThe Inheritance Cycle

Harry Potter and the Sorcerer's Stone

authorWalker Percy

formatHardcover

genreHorror

publisherFirebrand Books

seriesDune

The Art of War

authorAgatha Christie

formatHardcover

genreReligion

publisherShambhala Publications

seriesThe Bartimaeus Trilogy

Great Expectations

authorRichard Yates

formatAudiobook

genrePhilosophy

publisherSams Publishing

seriesPercy Jackson

The Moviegoer

authorOscar Levy

formatAudiobook

genreBusiness

publisherAtheneum Publishers

seriesThe Eighth Life

Nostromo

authorWilliam Shakespeare

formatAudiobook

genreRomance

publisherBrimstone Press

seriesThe Hunger Games

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