#

accept

Images Documents Multiple
// src/app/piying/page/component/non-field-control/file-input-button/example/accept/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('file-input-button', (actions) => {
        return [actions.inputs.patch({ content: 'Images', accept: 'image/*' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('file-input-button', (actions) => {
        return [actions.inputs.patch({ content: 'Documents', accept: '.pdf,.doc,.docx' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('file-input-button', (actions) => {
        return [actions.inputs.patch({ content: 'Multiple', accept: '*', multiple: true })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);
content_copy
#

all-props

Complete File Input
// src/app/piying/page/component/non-field-control/file-input-button/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('file-input-button', (actions) => {
        return [
          actions.inputs.patch({
            content: 'Complete File Input',
            color: 'primary',
            style: 'soft',
            size: 'lg',
            shape: 'square',
            accept: '.jpg,.png,.gif',
            multiple: false,
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

base

Upload File
// src/app/piying/page/component/non-field-control/file-input-button/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('file-input-button', (actions) => {
        return [actions.inputs.patch({ content: 'Upload File' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy