// src/app/piying/page/component/field-group/tabs/example/activatedIndex/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('tabs', (actions) => {
return [
actions.inputs.patch({
activatedIndex: 1,
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/field-group/tabs/example/beforeChange/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('tabs', (actions) => {
return [
actions.inputs.patch({
beforeChange: (index: number) => {
console.log('切换到索引', index);
},
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/field-group/tabs/example/placement/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('tabs', (actions) => {
return [
actions.inputs.patch({
placement: 'bottom',
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/field-group/tabs/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('tabs', (actions) => {
return [
actions.inputs.patch({
size: 'lg',
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/field-group/tabs/example/tabContentClass/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('tabs', (actions) => {
return [
actions.inputs.patch({
tabContentClass: 'bg-primary/10',
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/field-group/tabs/example/type/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('tabs', (actions) => {
return [
actions.inputs.patch({
type: 'lift',
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);