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

Austerlitz

authorFord Madox Ford

formatEbook

genreFantasy

publisherBlackwell Publishing

seriesAnna Karenina

The Sound and the Fury

authorJudy Blume

formatAudiobook

genreThriller

publisherHorizon Scientific Press

seriesThe Foundation Series

Malone Dies

authorJonathan Swift

formatEbook

genreMystery

publisherKessinger Publishing

seriesLittle Women

Grimms' Fairy Tales

authorJules Verne

formatHardcover

genrePoetry

publisherElsevier

seriesHarry Potter

Candide

authorWalt Whitman

formatEbook

genrePoetry

publisherCandlewick Press

seriesOutlander

The Way We Live Now

authorArthur Conan Doyle

formatEbook

genreBiography

publisherParragon

seriesThe Prison Healer

Peter Pan

authorPhilip Roth

formatAudiobook

genreComedy

publisherLibertas Academica

seriesThe Border Trilogy

Tropic of Cancer

authorNancy Mitford

formatEbook

genrePhilosophy

publisherHarvard University Press

seriesThe Prison Healer

Dao De Jing: A Minimalist Translation

authorJudy Blume

formatHardcover

genreDrama

publisherSalt Publishing

seriesThe Border Trilogy

Animal Farm

authorKhaled Hosseini

formatAudiobook

genreWestern

publisherBrimstone Press

seriesThe Lord of the Rings

Gulliver's Travels

authorAlbert Camus

formatHardcover

genreComedy

publisherSidgwick & Jackson

seriesA Song of Ice and Fire

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