#

contentClass

// src/app/piying/page/component/field-group/drawer/example/contentClass/content.ts
import * as v from 'valibot';
import { actions, NFCSchema, setComponent } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        content: v.object({
          _btn: v.pipe(
            NFCSchema,
            setComponent('button'),
            v.title('l1-title'),
            safeDefine.setComponent('button', (actions) => {
              return [
                actions.attributes.patch({
                  for: 'exp-0',
                }),
              ];
            }),
          ),
        }),
        side: v.pipe(
          v.object({
            l1: v.pipe(v.string(), v.title('l1-title')),
            l2: v.pipe(v.boolean(), v.title('l2-title')),
          }),
          actions.wrappers.patch(['div']),
          actions.class.top('bg-base-100'),
        ),
      }),
      safeDefine.setComponent('drawer', (actions) => {
        return [
          actions.inputs.patch({
            contentClass: 'bg-primary/10',
            name: 'exp-0',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 will-change-transform'),
);
content_copy
#

mode

// src/app/piying/page/component/field-group/drawer/example/mode/content.ts
import * as v from 'valibot';
import { actions, NFCSchema, setComponent } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        content: v.object({
          _btn: v.pipe(
            NFCSchema,
            setComponent('button'),
            v.title('l1-title'),
            safeDefine.setComponent('button', (actions) => {
              return [
                actions.attributes.patch({
                  for: 'exp-1',
                }),
              ];
            }),
          ),
        }),
        side: v.pipe(
          v.object({
            l1: v.pipe(v.string(), v.title('l1-title')),
            l2: v.pipe(v.boolean(), v.title('l2-title')),
          }),
          actions.wrappers.patch(['div']),
          actions.class.top('bg-base-100'),
        ),
      }),
      safeDefine.setComponent('drawer', (actions) => {
        return [
          actions.inputs.patch({
            mode: 'side',
            name: 'exp-1',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 will-change-transform'),
);
content_copy
#

overlayClass

// src/app/piying/page/component/field-group/drawer/example/overlayClass/content.ts
import * as v from 'valibot';
import { actions, NFCSchema, setComponent } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        content: v.object({
          _btn: v.pipe(
            NFCSchema,
            setComponent('button'),
            v.title('l1-title'),
            safeDefine.setComponent('button', (actions) => {
              return [
                actions.attributes.patch({
                  for: 'exp-2',
                }),
              ];
            }),
          ),
        }),
        side: v.pipe(
          v.object({
            l1: v.pipe(v.string(), v.title('l1-title')),
            l2: v.pipe(v.boolean(), v.title('l2-title')),
          }),
          actions.wrappers.patch(['div']),
          actions.class.top('bg-base-100'),
        ),
      }),
      safeDefine.setComponent('drawer', (actions) => {
        return [
          actions.inputs.patch({
            overlayClass: 'bg-black/50',
            name: 'exp-2',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 will-change-transform'),
);
content_copy
#

position

// src/app/piying/page/component/field-group/drawer/example/position/content.ts
import * as v from 'valibot';
import { actions, NFCSchema, setComponent } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        content: v.object({
          _btn: v.pipe(
            NFCSchema,
            setComponent('button'),
            v.title('l1-title'),
            safeDefine.setComponent('button', (actions) => {
              return [
                actions.attributes.patch({
                  for: 'exp-3',
                }),
              ];
            }),
          ),
        }),
        side: v.pipe(
          v.object({
            l1: v.pipe(v.string(), v.title('l1-title')),
            l2: v.pipe(v.boolean(), v.title('l2-title')),
          }),
          actions.wrappers.patch(['div']),
          actions.class.top('bg-base-100'),
        ),
      }),
      safeDefine.setComponent('drawer', (actions) => {
        return [
          actions.inputs.patch({
            position: 'end',
            name: 'exp-3',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 will-change-transform'),
);
content_copy
#

sideClass

// src/app/piying/page/component/field-group/drawer/example/sideClass/content.ts
import * as v from 'valibot';
import { actions, NFCSchema, setComponent } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      v.object({
        content: v.object({
          _btn: v.pipe(
            NFCSchema,
            setComponent('button'),
            v.title('l1-title'),
            safeDefine.setComponent('button', (actions) => {
              return [
                actions.attributes.patch({
                  for: 'exp-5',
                }),
              ];
            }),
          ),
        }),
        side: v.pipe(
          v.object({
            l1: v.pipe(v.string(), v.title('l1-title')),
            l2: v.pipe(v.boolean(), v.title('l2-title')),
          }),
          actions.wrappers.patch(['div']),
          actions.class.top('bg-base-100'),
        ),
      }),
      safeDefine.setComponent('drawer', (actions) => {
        return [
          actions.inputs.patch({
            sideClass: 'bg-base-200',
            name: 'exp-5',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 will-change-transform'),
);
content_copy