#

all-props

User
// src/app/piying/page/component/non-field-control/avatar/example/all-props/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('avatar', (actions) => {
        return [
          actions.inputs.patch({
            placeholder: 'User',
            status: 'online',
          }),
        ];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('avatar', (actions) => {
        return [
          actions.inputs.patch({
            imgUrl: 'https://ui-avatars.com/api/?name=Test+User',
            status: 'offline',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

base

Avatar
// src/app/piying/page/component/non-field-control/avatar/example/base/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('avatar', (actions) => {
        return [actions.inputs.patch({ placeholder: 'Avatar' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

image

// src/app/piying/page/component/non-field-control/avatar/example/image/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('avatar', (actions) => {
        return [
          actions.inputs.patch({
            imgUrl: 'https://ui-avatars.com/api/?name=John+Doe',
            wrapperClass: 'w-24',
          }),
        ];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('avatar', (actions) => {
        return [
          actions.inputs.patch({
            imgUrl: 'https://ui-avatars.com/api/?name=Jane+Smith',
            wrapperClass: 'w-32 rounded-full',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

placeholder

User
A
AB
// src/app/piying/page/component/non-field-control/avatar/example/placeholder/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('avatar', (actions) => {
        return [
          actions.inputs.patch({
            placeholder: 'User',
            placeholderClass: 'text-primary ',
            wrapperClass: 'bg-neutral rounded-full w-24',
          }),
        ];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('avatar', (actions) => {
        return [actions.inputs.patch({ placeholder: 'A', wrapperClass: 'w-16' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('avatar', (actions) => {
        return [actions.inputs.patch({ placeholder: 'AB', wrapperClass: 'w-20 rounded-full' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);
content_copy
#

status

Online
Offline
// src/app/piying/page/component/non-field-control/avatar/example/status/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('avatar', (actions) => {
        return [actions.inputs.patch({ placeholder: 'Online', status: 'online' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('avatar', (actions) => {
        return [actions.inputs.patch({ placeholder: 'Offline', status: 'offline' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy