[{"data":1,"prerenderedAt":2910},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fguides\u002Finertia":378},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":190,"body":380,"component":377,"description":2893,"extension":2894,"group":187,"meta":2895,"navigation":588,"order":141,"path":191,"sections":2896,"seo":2907,"stem":2908,"__hash__":2909},"docs_en\u002Fguides\u002Finertia.md",{"type":381,"value":382,"toc":2881},"minimark",[383,392,422,425,467,476,483,494,501,507,529,705,750,756,768,803,828,842,847,864,891,1063,1069,1072,1084,1115,1118,1136,1193,1204,1226,1237,1254,1351,1357,1389,1409,1424,1430,1471,1478,1831,1838,1842,1873,1893,1908,1921,1934,1940,1960,2517,2539,2576,2582,2600,2615,2642,2730,2736,2742,2763,2769,2772,2866,2874,2877],[384,385,386,387,391],"p",{},"An Inertia app sets up bitboss-ui like any Vite app, plus one line in\n",[388,389,390],"code",{},"createInertiaApp",". The rest of this page is a toolkit of small composables that\nmake Inertia pages thinner: typed page props, filters in the URL, awaitable\nforms.",[393,394,395],"warning",{},[384,396,397,405,406,410,411,414,415,418,419,421],{},[398,399,400,401,404],"strong",{},"These composables are not exported by ",[388,402,403],{},"bitboss-ui","."," They are ",[407,408,409],"em",{},"app-side","\ncode: the CLI copies the ones you name into your own project, under\n",[388,412,413],{},"resources\u002Fjs\u002Fcomposables\u002Finertia-helpers\u002F",". Importing ",[388,416,417],{},"usePromiseForm"," from\n",[388,420,403],{}," will not resolve, and never will: this is a toolkit, not an API\nsurface.",[384,423,424],{},"Add the helpers you need from the app root:",[426,427,432],"pre",{"className":428,"code":429,"language":430,"meta":431,"style":431},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast","npx bitboss-ui add usePromiseForm useQueryObject\nnpx bitboss-ui helpers list\n","bash","",[388,433,434,455],{"__ignoreMap":431},[435,436,438,442,446,449,452],"span",{"class":437,"line":141},"line",[435,439,441],{"class":440},"soyes","npx",[435,443,445],{"class":444},"sT6z2"," bitboss-ui",[435,447,448],{"class":444}," add",[435,450,451],{"class":444}," usePromiseForm",[435,453,454],{"class":444}," useQueryObject\n",[435,456,457,459,461,464],{"class":437,"line":145},[435,458,441],{"class":440},[435,460,445],{"class":444},[435,462,463],{"class":444}," helpers",[435,465,466],{"class":444}," list\n",[384,468,469,472,473,404],{},[388,470,471],{},"add"," also copies every file a helper imports, and prints the import line for\neach. The files are yours to edit. The full reference, source included, ships\nwith the package in ",[388,474,475],{},"node_modules\u002Fbitboss-ui\u002Fdist\u002Fai\u002Fguides\u002Finertia-helpers.md",[477,478,480],"h2",{"id":479},"model",[435,481,482],{},"What Inertia changes",[384,484,485,486,489,490,493],{},"In Inertia there is no client data layer. Data arrives as ",[398,487,488],{},"page props"," and\nchanges through ",[398,491,492],{},"visits",". There is no store to read, no query cache to\ninvalidate, and no fetch to await. The server re-renders and the page props\nchange underneath you.",[384,495,496,497,500],{},"That model is a good fit for this library, whose components already report state\nrather than owning it (see ",[498,499,169],"a",{"href":114},"). What it\nlacks is a typed surface for the props themselves, a place for filters to live,\nand a way to await a form submit. That is what the toolkit adds, so pages stay\nthin.",[477,502,504],{"id":503},"install",[435,505,506],{},"What to install",[384,508,509,510,513,514,516,517,520,521,524,525,528],{},"Inertia apps are Vite apps: set up the build plugin as in\n",[498,511,139],{"href":512},"\u002Fen\u002Fguides\u002Finstallation#build-plugin",", then install the runtime\nplugin inside ",[388,515,390],{},", after Inertia's own. The render root is also\nwhere the app's one ",[388,518,519],{},"\u003CBbHost \u002F>"," goes, beside the page: it renders every\n",[388,522,523],{},"confirm()",", ",[388,526,527],{},"toast()"," and on-demand dialog, and a page mounts none.",[426,530,535],{"className":531,"code":532,"filename":533,"language":534,"meta":431,"style":431},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","import { createApp, h } from 'vue';\nimport { createInertiaApp } from '@inertiajs\u002Fvue3';\nimport { BbHost, bitbossUiPlugin } from 'bitboss-ui';\n\ncreateInertiaApp({\n    \u002F\u002F resolve: …\n    setup({ el, App, props, plugin }) {\n        createApp({ render: () => [h(App, props), h(BbHost)] })\n            .use(plugin)\n            .use(bitbossUiPlugin)\n            .mount(el);\n    },\n});\n","resources\u002Fjs\u002Fapp.ts","ts",[388,536,537,556,570,584,590,598,604,633,663,674,683,693,699],{"__ignoreMap":431},[435,538,539,543,547,550,553],{"class":437,"line":141},[435,540,542],{"class":541},"sHUrx","import",[435,544,546],{"class":545},"suds8"," { createApp, h } ",[435,548,549],{"class":541},"from",[435,551,552],{"class":444}," 'vue'",[435,554,555],{"class":545},";\n",[435,557,558,560,563,565,568],{"class":437,"line":145},[435,559,542],{"class":541},[435,561,562],{"class":545}," { createInertiaApp } ",[435,564,549],{"class":541},[435,566,567],{"class":444}," '@inertiajs\u002Fvue3'",[435,569,555],{"class":545},[435,571,572,574,577,579,582],{"class":437,"line":149},[435,573,542],{"class":541},[435,575,576],{"class":545}," { BbHost, bitbossUiPlugin } ",[435,578,549],{"class":541},[435,580,581],{"class":444}," 'bitboss-ui'",[435,583,555],{"class":545},[435,585,586],{"class":437,"line":177},[435,587,589],{"emptyLinePlaceholder":588},true,"\n",[435,591,592,595],{"class":437,"line":181},[435,593,390],{"class":594},"sKwhi",[435,596,597],{"class":545},"({\n",[435,599,600],{"class":437,"line":185},[435,601,603],{"class":602},"sLBg1","    \u002F\u002F resolve: …\n",[435,605,606,609,612,615,617,620,622,625,627,630],{"class":437,"line":225},[435,607,608],{"class":594},"    setup",[435,610,611],{"class":545},"({ ",[435,613,614],{"class":440},"el",[435,616,524],{"class":545},[435,618,619],{"class":440},"App",[435,621,524],{"class":545},[435,623,624],{"class":440},"props",[435,626,524],{"class":545},[435,628,629],{"class":440},"plugin",[435,631,632],{"class":545}," }) {\n",[435,634,635,638,640,643,646,649,652,655,658,660],{"class":437,"line":229},[435,636,637],{"class":594},"        createApp",[435,639,611],{"class":545},[435,641,642],{"class":594},"render",[435,644,645],{"class":545},": () ",[435,647,648],{"class":541},"=>",[435,650,651],{"class":545}," [",[435,653,654],{"class":594},"h",[435,656,657],{"class":545},"(App, props), ",[435,659,654],{"class":594},[435,661,662],{"class":545},"(BbHost)] })\n",[435,664,665,668,671],{"class":437,"line":233},[435,666,667],{"class":545},"            .",[435,669,670],{"class":594},"use",[435,672,673],{"class":545},"(plugin)\n",[435,675,676,678,680],{"class":437,"line":237},[435,677,667],{"class":545},[435,679,670],{"class":594},[435,681,682],{"class":545},"(bitbossUiPlugin)\n",[435,684,685,687,690],{"class":437,"line":241},[435,686,667],{"class":545},[435,688,689],{"class":594},"mount",[435,691,692],{"class":545},"(el);\n",[435,694,696],{"class":437,"line":695},12,[435,697,698],{"class":545},"    },\n",[435,700,702],{"class":437,"line":701},13,[435,703,704],{"class":545},"});\n",[384,706,707,708,711,712,715,716,719,720,724,725,524,728,731,732,735,736,738,739,741,742,745,746,749],{},"You register no link component. The build plugin imports Inertia's ",[388,709,710],{},"Link"," for\nyou when it finds ",[388,713,714],{},"@inertiajs\u002Fvue3",". So ",[388,717,718],{},"href"," on a\n",[498,721,722],{"href":18},[388,723,205],{}," or a dropdown item is an Inertia visit,\nwith ",[388,726,727],{},"method",[388,729,730],{},"data"," and ",[388,733,734],{},"preserve-scroll"," passed through. ",[388,737,727],{}," without\n",[388,740,718],{}," does nothing (",[388,743,744],{},"to"," is a router link), and the ESLint plugin flags it.\nSet ",[388,747,748],{},"inertiaLinkName"," only when you register a link wrapper of your own.",[384,751,752,753,404],{},"Inertia SSR needs no extra Vite config: the plugin keeps the library in the\nserver bundle. The stylesheet does need an import into its layer, as in\n",[498,754,139],{"href":755},"\u002Fen\u002Fguides\u002Finstallation#runtime",[384,757,758,759,731,761,764,765,767],{},"The helpers on the rest of this page pull in npm packages beyond your app's own\n",[388,760,714],{},[388,762,763],{},"vue",". ",[388,766,471],{}," prints the install command for any your app\nlacks, and never runs it:",[426,769,771],{"className":428,"code":770,"language":430,"meta":431,"style":431},"npm i @vueuse\u002Fcore object-code query-string\nnpm i -D @inertiajs\u002Fcore\n",[388,772,773,790],{"__ignoreMap":431},[435,774,775,778,781,784,787],{"class":437,"line":141},[435,776,777],{"class":440},"npm",[435,779,780],{"class":444}," i",[435,782,783],{"class":444}," @vueuse\u002Fcore",[435,785,786],{"class":444}," object-code",[435,788,789],{"class":444}," query-string\n",[435,791,792,794,796,800],{"class":437,"line":145},[435,793,777],{"class":440},[435,795,780],{"class":444},[435,797,799],{"class":798},"s-5SL"," -D",[435,801,802],{"class":444}," @inertiajs\u002Fcore\n",[384,804,805,806,808,809,812,813,816,817,764,820,823,824,827],{},"Do not count on them arriving through ",[388,807,403],{},"'s own dependencies: that\nworks by npm hoisting luck and breaks under pnpm or Yarn PnP.\n",[388,810,811],{},"@vueuse\u002Fcore"," backs the keyed contexts and a couple of the UI utilities.\n",[388,814,815],{},"object-code"," powers the hash comparison behind ",[388,818,819],{},"isEqual",[388,821,822],{},"query-string"," backs\nthe three URL helpers, and ",[388,825,826],{},"@inertiajs\u002Fcore"," is a type-only import.",[384,829,830,831,833,834,837,838,841],{},"After upgrading ",[388,832,403],{},", your copies stay as they are. Run\n",[388,835,836],{},"npx bitboss-ui helpers diff"," to see what changed, then\n",[388,839,840],{},"npx bitboss-ui helpers update",": it replaces the files you have not edited and\nleaves yours alone.",[477,843,844],{"id":624},[435,845,846],{},"Reading page props",[384,848,849,731,852,855,856,859,860,863],{},[388,850,851],{},"useProp",[388,853,854],{},"useOptionalProp"," give the page's props one typed surface, so a\ncomponent reads ",[388,857,858],{},"useProp('customer')"," instead of reaching into ",[388,861,862],{},"usePage().props","\nand asserting a type at every call site.",[384,865,866,731,869,872,873,876,877,879,880,882,883,886,887,890],{},[388,867,868],{},"useLazyProp",[388,870,871],{},"useLazyPropGetter"," cover Inertia's lazy props, the ones the\nserver only sends when asked. Reading the ",[388,874,875],{},"value"," of ",[388,878,868],{}," starts the\npartial reload, so a panel that loads its detail on open has no\nrequest-and-track code to write. ",[388,881,871],{}," returns a ",[388,884,885],{},"getter"," in the\nshape a select takes as ",[388,888,889],{},"items",", so the options load when the list first opens:",[426,892,895],{"className":893,"code":894,"language":763,"meta":431,"style":431},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Cscript setup lang=\"ts\">\nconst { getter: fetchRoles } = useLazyPropGetter\u003CRole[]>('roles');\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CBbSelect\n        v-model=\"role\"\n        :items=\"fetchRoles\"\n        label=\"Role\"\n        item-text=\"name\"\n        item-value=\"id\"\n    \u002F>\n\u003C\u002Ftemplate>\n",[388,896,897,921,959,968,972,981,989,1005,1020,1030,1040,1050,1055],{"__ignoreMap":431},[435,898,899,902,906,909,912,915,918],{"class":437,"line":141},[435,900,901],{"class":545},"\u003C",[435,903,905],{"class":904},"sne4z","script",[435,907,908],{"class":798}," setup",[435,910,911],{"class":798}," lang",[435,913,914],{"class":545},"=",[435,916,917],{"class":444},"\"ts\"",[435,919,920],{"class":545},">\n",[435,922,923,926,929,931,934,937,940,942,945,947,950,953,956],{"class":437,"line":145},[435,924,925],{"class":541},"const",[435,927,928],{"class":545}," { ",[435,930,885],{"class":440},[435,932,933],{"class":545},": ",[435,935,936],{"class":798},"fetchRoles",[435,938,939],{"class":545}," } ",[435,941,914],{"class":541},[435,943,944],{"class":594}," useLazyPropGetter",[435,946,901],{"class":545},[435,948,949],{"class":440},"Role",[435,951,952],{"class":545},"[]>(",[435,954,955],{"class":444},"'roles'",[435,957,958],{"class":545},");\n",[435,960,961,964,966],{"class":437,"line":149},[435,962,963],{"class":545},"\u003C\u002F",[435,965,905],{"class":904},[435,967,920],{"class":545},[435,969,970],{"class":437,"line":177},[435,971,589],{"emptyLinePlaceholder":588},[435,973,974,976,979],{"class":437,"line":181},[435,975,901],{"class":545},[435,977,978],{"class":904},"template",[435,980,920],{"class":545},[435,982,983,986],{"class":437,"line":185},[435,984,985],{"class":545},"    \u003C",[435,987,988],{"class":904},"BbSelect\n",[435,990,991,994,996,999,1002],{"class":437,"line":225},[435,992,993],{"class":798},"        v-model",[435,995,914],{"class":545},[435,997,998],{"class":545},"\"",[435,1000,1001],{"class":545},"role",[435,1003,1004],{"class":545},"\"\n",[435,1006,1007,1010,1012,1014,1016,1018],{"class":437,"line":229},[435,1008,1009],{"class":545},"        :",[435,1011,889],{"class":798},[435,1013,914],{"class":545},[435,1015,998],{"class":545},[435,1017,936],{"class":545},[435,1019,1004],{"class":545},[435,1021,1022,1025,1027],{"class":437,"line":233},[435,1023,1024],{"class":798},"        label",[435,1026,914],{"class":545},[435,1028,1029],{"class":444},"\"Role\"\n",[435,1031,1032,1035,1037],{"class":437,"line":237},[435,1033,1034],{"class":798},"        item-text",[435,1036,914],{"class":545},[435,1038,1039],{"class":444},"\"name\"\n",[435,1041,1042,1045,1047],{"class":437,"line":241},[435,1043,1044],{"class":798},"        item-value",[435,1046,914],{"class":545},[435,1048,1049],{"class":444},"\"id\"\n",[435,1051,1052],{"class":437,"line":695},[435,1053,1054],{"class":545},"    \u002F>\n",[435,1056,1057,1059,1061],{"class":437,"line":701},[435,1058,963],{"class":545},[435,1060,978],{"class":904},[435,1062,920],{"class":545},[477,1064,1066],{"id":1065},"url",[435,1067,1068],{},"Filters that live in the URL",[384,1070,1071],{},"Three helpers, in increasing scope.",[384,1073,1074,1079,1080,1083],{},[398,1075,1076],{},[388,1077,1078],{},"useRouteQuery"," is a single query parameter as a ",[398,1081,1082],{},"writable ref",". Reading\ntracks the current URL; writing merges the parameter and performs a replace\nvisit, so the server re-renders with the new value.",[426,1085,1087],{"className":531,"code":1086,"language":534,"meta":431,"style":431},"const status = useRouteQuery('status', 'open');\n",[388,1088,1089],{"__ignoreMap":431},[435,1090,1091,1093,1096,1099,1102,1105,1108,1110,1113],{"class":437,"line":141},[435,1092,925],{"class":541},[435,1094,1095],{"class":798}," status",[435,1097,1098],{"class":541}," =",[435,1100,1101],{"class":594}," useRouteQuery",[435,1103,1104],{"class":545},"(",[435,1106,1107],{"class":444},"'status'",[435,1109,524],{"class":545},[435,1111,1112],{"class":444},"'open'",[435,1114,958],{"class":545},[384,1116,1117],{},"Writing the current value is a no-op, which is what makes it safe to sync from a\nserver response without a visit loop.",[384,1119,1120,1125,1126,1131,1132,1135],{},[398,1121,1122],{},[388,1123,1124],{},"useQuery"," reads the whole query string as an object. ",[398,1127,1128],{},[388,1129,1130],{},"useQueryObject","\nmirrors a whole object of filters into the URL, with one Inertia visit per\nchange. It resets ",[388,1133,1134],{},"page"," each time, so results never hide on an out-of-range page.",[426,1137,1139],{"className":531,"code":1138,"language":534,"meta":431,"style":431},"const filters = reactive({ search: '', status: null as string | null });\nuseQueryObject(filters, { only: ['invoices'] });\n",[388,1140,1141,1180],{"__ignoreMap":431},[435,1142,1143,1145,1148,1150,1153,1156,1159,1162,1165,1168,1171,1174,1177],{"class":437,"line":141},[435,1144,925],{"class":541},[435,1146,1147],{"class":798}," filters",[435,1149,1098],{"class":541},[435,1151,1152],{"class":594}," reactive",[435,1154,1155],{"class":545},"({ search: ",[435,1157,1158],{"class":444},"''",[435,1160,1161],{"class":545},", status: ",[435,1163,1164],{"class":798},"null",[435,1166,1167],{"class":541}," as",[435,1169,1170],{"class":798}," string",[435,1172,1173],{"class":541}," |",[435,1175,1176],{"class":798}," null",[435,1178,1179],{"class":545}," });\n",[435,1181,1182,1184,1187,1190],{"class":437,"line":145},[435,1183,1130],{"class":594},[435,1185,1186],{"class":545},"(filters, { only: [",[435,1188,1189],{"class":444},"'invoices'",[435,1191,1192],{"class":545},"] });\n",[384,1194,1195,1196,1199,1200,1203],{},"A text field bound straight to ",[388,1197,1198],{},"filters.search"," would visit on every keystroke,\nso name the keys that should wait for quiet in ",[388,1201,1202],{},"debounce",":",[426,1205,1207],{"className":531,"code":1206,"language":534,"meta":431,"style":431},"useQueryObject(filters, { only: ['invoices'], debounce: { search: 300 } });\n",[388,1208,1209],{"__ignoreMap":431},[435,1210,1211,1213,1215,1217,1220,1223],{"class":437,"line":141},[435,1212,1130],{"class":594},[435,1214,1186],{"class":545},[435,1216,1189],{"class":444},[435,1218,1219],{"class":545},"], debounce: { search: ",[435,1221,1222],{"class":798},"300",[435,1224,1225],{"class":545}," } });\n",[384,1227,1228,1229,1232,1233,1236],{},"A change to any other key visits at once and carries the waiting value with it,\nso nothing typed is lost. Copies added before this option existed are flagged by\n",[388,1230,1231],{},"npx bitboss-ui helpers list","; ",[388,1234,1235],{},"helpers update"," brings them up to date.",[384,1238,1239,1240,1244,1245,1249,1250,1253],{},"Bind these straight into the components. A ",[498,1241,1242],{"href":70},[388,1243,261],{},"\nfilter and a ",[498,1246,1247],{"href":84},[388,1248,363],{},"'s ",[388,1251,1252],{},"v-model:sort"," are both plain\nrefs, and once they are URL-backed the page is shareable, restorable and\nback-button-correct without any extra code:",[426,1255,1257],{"className":893,"code":1256,"language":763,"meta":431,"style":431},"\u003CBbSelect v-model=\"status\" :items=\"statuses\" label=\"Status\" \u002F>\n\u003CBbTable v-model:sort=\"sort\" :items=\"rows\" :columns=\"columns\" \u002F>\n",[388,1258,1259,1302],{"__ignoreMap":431},[435,1260,1261,1263,1265,1268,1270,1272,1275,1277,1280,1282,1284,1286,1289,1291,1294,1296,1299],{"class":437,"line":141},[435,1262,901],{"class":545},[435,1264,261],{"class":904},[435,1266,1267],{"class":798}," v-model",[435,1269,914],{"class":545},[435,1271,998],{"class":545},[435,1273,1274],{"class":545},"status",[435,1276,998],{"class":545},[435,1278,1279],{"class":545}," :",[435,1281,889],{"class":798},[435,1283,914],{"class":545},[435,1285,998],{"class":545},[435,1287,1288],{"class":545},"statuses",[435,1290,998],{"class":545},[435,1292,1293],{"class":798}," label",[435,1295,914],{"class":545},[435,1297,1298],{"class":444},"\"Status\"",[435,1300,1301],{"class":545}," \u002F>\n",[435,1303,1304,1306,1308,1310,1312,1315,1317,1319,1321,1323,1325,1327,1329,1331,1334,1336,1338,1341,1343,1345,1347,1349],{"class":437,"line":145},[435,1305,901],{"class":545},[435,1307,363],{"class":904},[435,1309,1267],{"class":798},[435,1311,1203],{"class":545},[435,1313,1314],{"class":798},"sort",[435,1316,914],{"class":545},[435,1318,998],{"class":545},[435,1320,1314],{"class":545},[435,1322,998],{"class":545},[435,1324,1279],{"class":545},[435,1326,889],{"class":798},[435,1328,914],{"class":545},[435,1330,998],{"class":545},[435,1332,1333],{"class":545},"rows",[435,1335,998],{"class":545},[435,1337,1279],{"class":545},[435,1339,1340],{"class":798},"columns",[435,1342,914],{"class":545},[435,1344,998],{"class":545},[435,1346,1340],{"class":545},[435,1348,998],{"class":545},[435,1350,1301],{"class":545},[477,1352,1354],{"id":1353},"contexts",[435,1355,1356],{},"Sharing data down a page",[384,1358,1359,1360,1363,1364,1367,1368,1371,1372,524,1374,731,1377,1380,1381,1384,1385,1388],{},"Keyed contexts, instead of prop drilling.\n",[388,1361,1362],{},"usePaginatedResponseContext"," publishes a paginated prop, so a toolbar, a table\nand a pager can each read it where they stand. Pass it as Laravel sends it: a\n",[388,1365,1366],{},"$query->paginate()"," or ",[388,1369,1370],{},"->simplePaginate()"," (page numbers at the top level), an\nAPI Resource collection (",[388,1373,730],{},[388,1375,1376],{},"meta",[388,1378,1379],{},"links","), or a ",[388,1382,1383],{},"{ data, meta }"," you\nbuilt. The context finds the page numbers in any of them. ",[388,1386,1387],{},"simplePaginate()","\nsends no total, so the context counts the rows so far and treats the next page\nas the last.",[384,1390,1391,1392,731,1394,1397,1398,1401,1402,1405,1406,1408],{},"Its ",[388,1393,1134],{},[388,1395,1396],{},"perPage"," are the server's answer, not the URL: a clamped\n",[388,1399,1400],{},"?page=99",", a capped ",[388,1403,1404],{},"?per_page=500"," or a redirect to the bare URL show what\nthe server served, and nothing is written back after a visit, so a redirect is\none visit, not two. ",[388,1407,889],{}," resets when the prop changes (Back and Forward\nincluded), not on every visit, so a partial reload of another prop keeps the\nrows' edits.",[384,1410,1411,1414,1415,1418,1419,404],{},[388,1412,1413],{},"useTableSelectionContext"," does the same for a table's selection, which is what\nlets a bulk-action bar outside the table know what is selected inside it.\n",[388,1416,1417],{},"useTableContext"," combines the paginated context and the selection under one\nkey. These keyed contexts hold what the server sent; the table's own widget\nstate (selection, sort, highlight) is\n",[498,1420,1421],{"href":84},[388,1422,1423],{},"useBbTableContext",[477,1425,1427],{"id":1426},"forms",[435,1428,1429],{},"Forms that return promises",[384,1431,1432,1434,1435,1438,1439,1442,1443,524,1446,524,1449,731,1452,1455,1456,1459,1460,1463,1464,731,1467,1470],{},[388,1433,417],{}," is Inertia's ",[388,1436,1437],{},"useForm"," with ",[398,1440,1441],{},"promise semantics",":\n",[388,1444,1445],{},"post",[388,1447,1448],{},"put",[388,1450,1451],{},"patch",[388,1453,1454],{},"remove"," resolve on success and reject on validation\nerrors. ",[388,1457,1458],{},"form"," is still the underlying Inertia form, so ",[388,1461,1462],{},"form.errors",",\n",[388,1465,1466],{},"form.isDirty",[388,1468,1469],{},"form.reset()"," all work.",[384,1472,1473,1474,1477],{},"The payoff is that you can ",[388,1475,1476],{},"await"," a submit, which is exactly what the\nlibrary's own automatic loading states expect. Return the promise from the click\nhandler:",[426,1479,1482],{"className":893,"code":1480,"filename":1481,"language":763,"meta":431,"style":431},"\u003Cscript setup lang=\"ts\">\nimport { BbButton, BbTextInput } from 'bitboss-ui';\nimport { usePromiseForm } from '@\u002Fcomposables\u002Finertia-helpers\u002FusePromiseForm';\n\ntype CustomerDraft = { name: string };\n\nconst props = defineProps\u003C{ customer: { id: number; name: string } }>();\nconst { form, put } = usePromiseForm\u003CCustomerDraft>({\n    name: props.customer.name,\n});\n\n\u002F\u002F A 422 rejects the promise; form.errors already holds the messages.\nconst save = () =>\n    put(`\u002Fcustomers\u002F${props.customer.id}`).catch(() => {});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CBbTextInput\n        id=\"customer-name\"\n        v-model=\"form.name\"\n        :errors=\"form.errors.name\"\n        label=\"Name\"\n        name=\"name\"\n    \u002F>\n    \u003CBbButton @click=\"save\">Save\u003C\u002FBbButton>\n\u003C\u002Ftemplate>\n","resources\u002Fjs\u002FPages\u002FCustomers\u002FEdit.vue",[388,1483,1484,1500,1513,1527,1531,1553,1557,1598,1624,1629,1633,1637,1642,1657,1695,1704,1709,1718,1726,1737,1751,1768,1778,1788,1793,1822],{"__ignoreMap":431},[435,1485,1486,1488,1490,1492,1494,1496,1498],{"class":437,"line":141},[435,1487,901],{"class":545},[435,1489,905],{"class":904},[435,1491,908],{"class":798},[435,1493,911],{"class":798},[435,1495,914],{"class":545},[435,1497,917],{"class":444},[435,1499,920],{"class":545},[435,1501,1502,1504,1507,1509,1511],{"class":437,"line":145},[435,1503,542],{"class":541},[435,1505,1506],{"class":545}," { BbButton, BbTextInput } ",[435,1508,549],{"class":541},[435,1510,581],{"class":444},[435,1512,555],{"class":545},[435,1514,1515,1517,1520,1522,1525],{"class":437,"line":149},[435,1516,542],{"class":541},[435,1518,1519],{"class":545}," { usePromiseForm } ",[435,1521,549],{"class":541},[435,1523,1524],{"class":444}," '@\u002Fcomposables\u002Finertia-helpers\u002FusePromiseForm'",[435,1526,555],{"class":545},[435,1528,1529],{"class":437,"line":177},[435,1530,589],{"emptyLinePlaceholder":588},[435,1532,1533,1536,1539,1541,1543,1546,1548,1550],{"class":437,"line":181},[435,1534,1535],{"class":541},"type",[435,1537,1538],{"class":440}," CustomerDraft",[435,1540,1098],{"class":541},[435,1542,928],{"class":545},[435,1544,1545],{"class":440},"name",[435,1547,1203],{"class":541},[435,1549,1170],{"class":798},[435,1551,1552],{"class":545}," };\n",[435,1554,1555],{"class":437,"line":185},[435,1556,589],{"emptyLinePlaceholder":588},[435,1558,1559,1561,1564,1566,1569,1572,1575,1577,1579,1582,1584,1587,1589,1591,1593,1595],{"class":437,"line":225},[435,1560,925],{"class":541},[435,1562,1563],{"class":798}," props",[435,1565,1098],{"class":541},[435,1567,1568],{"class":594}," defineProps",[435,1570,1571],{"class":545},"\u003C{ ",[435,1573,1574],{"class":440},"customer",[435,1576,1203],{"class":541},[435,1578,928],{"class":545},[435,1580,1581],{"class":440},"id",[435,1583,1203],{"class":541},[435,1585,1586],{"class":798}," number",[435,1588,1232],{"class":545},[435,1590,1545],{"class":440},[435,1592,1203],{"class":541},[435,1594,1170],{"class":798},[435,1596,1597],{"class":545}," } }>();\n",[435,1599,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1621],{"class":437,"line":229},[435,1601,925],{"class":541},[435,1603,928],{"class":545},[435,1605,1458],{"class":798},[435,1607,524],{"class":545},[435,1609,1448],{"class":798},[435,1611,939],{"class":545},[435,1613,914],{"class":541},[435,1615,451],{"class":594},[435,1617,901],{"class":545},[435,1619,1620],{"class":440},"CustomerDraft",[435,1622,1623],{"class":545},">({\n",[435,1625,1626],{"class":437,"line":233},[435,1627,1628],{"class":545},"    name: props.customer.name,\n",[435,1630,1631],{"class":437,"line":237},[435,1632,704],{"class":545},[435,1634,1635],{"class":437,"line":241},[435,1636,589],{"emptyLinePlaceholder":588},[435,1638,1639],{"class":437,"line":695},[435,1640,1641],{"class":602},"\u002F\u002F A 422 rejects the promise; form.errors already holds the messages.\n",[435,1643,1644,1646,1649,1651,1654],{"class":437,"line":701},[435,1645,925],{"class":541},[435,1647,1648],{"class":594}," save",[435,1650,1098],{"class":541},[435,1652,1653],{"class":545}," () ",[435,1655,1656],{"class":541},"=>\n",[435,1658,1660,1663,1665,1668,1670,1672,1674,1676,1678,1681,1684,1687,1690,1692],{"class":437,"line":1659},14,[435,1661,1662],{"class":594},"    put",[435,1664,1104],{"class":545},[435,1666,1667],{"class":444},"`\u002Fcustomers\u002F${",[435,1669,624],{"class":545},[435,1671,404],{"class":444},[435,1673,1574],{"class":545},[435,1675,404],{"class":444},[435,1677,1581],{"class":545},[435,1679,1680],{"class":444},"}`",[435,1682,1683],{"class":545},").",[435,1685,1686],{"class":594},"catch",[435,1688,1689],{"class":545},"(() ",[435,1691,648],{"class":541},[435,1693,1694],{"class":545}," {});\n",[435,1696,1698,1700,1702],{"class":437,"line":1697},15,[435,1699,963],{"class":545},[435,1701,905],{"class":904},[435,1703,920],{"class":545},[435,1705,1707],{"class":437,"line":1706},16,[435,1708,589],{"emptyLinePlaceholder":588},[435,1710,1712,1714,1716],{"class":437,"line":1711},17,[435,1713,901],{"class":545},[435,1715,978],{"class":904},[435,1717,920],{"class":545},[435,1719,1721,1723],{"class":437,"line":1720},18,[435,1722,985],{"class":545},[435,1724,1725],{"class":904},"BbTextInput\n",[435,1727,1729,1732,1734],{"class":437,"line":1728},19,[435,1730,1731],{"class":798},"        id",[435,1733,914],{"class":545},[435,1735,1736],{"class":444},"\"customer-name\"\n",[435,1738,1740,1742,1744,1746,1749],{"class":437,"line":1739},20,[435,1741,993],{"class":798},[435,1743,914],{"class":545},[435,1745,998],{"class":545},[435,1747,1748],{"class":545},"form.name",[435,1750,1004],{"class":545},[435,1752,1754,1756,1759,1761,1763,1766],{"class":437,"line":1753},21,[435,1755,1009],{"class":545},[435,1757,1758],{"class":798},"errors",[435,1760,914],{"class":545},[435,1762,998],{"class":545},[435,1764,1765],{"class":545},"form.errors.name",[435,1767,1004],{"class":545},[435,1769,1771,1773,1775],{"class":437,"line":1770},22,[435,1772,1024],{"class":798},[435,1774,914],{"class":545},[435,1776,1777],{"class":444},"\"Name\"\n",[435,1779,1781,1784,1786],{"class":437,"line":1780},23,[435,1782,1783],{"class":798},"        name",[435,1785,914],{"class":545},[435,1787,1039],{"class":444},[435,1789,1791],{"class":437,"line":1790},24,[435,1792,1054],{"class":545},[435,1794,1796,1798,1800,1803,1806,1808,1810,1813,1815,1818,1820],{"class":437,"line":1795},25,[435,1797,985],{"class":545},[435,1799,205],{"class":904},[435,1801,1802],{"class":545}," @",[435,1804,1805],{"class":798},"click",[435,1807,914],{"class":545},[435,1809,998],{"class":545},[435,1811,1812],{"class":545},"save",[435,1814,998],{"class":545},[435,1816,1817],{"class":545},">Save\u003C\u002F",[435,1819,205],{"class":904},[435,1821,920],{"class":545},[435,1823,1825,1827,1829],{"class":437,"line":1824},26,[435,1826,963],{"class":545},[435,1828,978],{"class":904},[435,1830,920],{"class":545},[384,1832,1833,1837],{},[498,1834,1835],{"href":18},[388,1836,205],{}," shows its spinner and disables itself for\nthe life of that promise, with nothing else written:",[1839,1840],"demo",{"name":1841},"Guides\u002FPromiseSave",[384,1843,1844,1845,1367,1848,1850,1851,1854,1855,1857,1858,1861,1862,1865,1866,1249,1869,1872],{},"Always end the call with ",[388,1846,1847],{},".catch()",[388,1849,1476],{}," it in a ",[388,1852,1853],{},"try","\u002F",[388,1856,1686],{},". A bare\n",[388,1859,1860],{},"put(…)"," that meets a 422 becomes an ",[388,1863,1864],{},"Uncaught (in promise)"," in the console.\n",[388,1867,1868],{},"useConfirm",[388,1870,1871],{},"onClick"," takes the same promise.",[384,1874,1875,1876,1878,1879,1881,1882,1885,1886,1889,1890,1892],{},"Declare the draft as a ",[388,1877,1535],{}," alias, like ",[388,1880,1620],{}," above, not an\n",[388,1883,1884],{},"interface",". The generic is constrained to ",[388,1887,1888],{},"Record\u003Cstring, FormValue>",", and only\na type alias gets the implicit index signature that satisfies it (nested shapes\nincluded). An ",[388,1891,1884],{}," fails to compile, however plain its fields.",[384,1894,1895,1896,1899,1900,1903,1904,1907],{},"A non-Inertia response (a 423 entity lock, a 419 CSRF mismatch) fires neither\n",[388,1897,1898],{},"onSuccess"," nor ",[388,1901,1902],{},"onError",", only ",[388,1905,1906],{},"onFinish",". The helper settles the promise there\ntoo, so a failed visit releases the busy state instead of hanging the form\nforever.",[384,1909,1910,1912,1913,1916,1917,1920],{},[388,1911,1902],{}," means the server answered with validation errors, nothing else. A\ndropped connection arrives on ",[388,1914,1915],{},"onNetworkError"," and a server crash on\n",[388,1918,1919],{},"onHttpException","; wire the first to a toast at least, or a submit on a dead\nconnection goes quiet.",[384,1922,1923,1924,1926,1927,1930,1931,404],{},"When the fields sit in a ",[388,1925,220],{},", those validation errors reach them through\nthe form's ",[388,1928,1929],{},"setErrors",", as the next section shows. The rules for every error\nsource, Laravel's included, are in\n",[498,1932,175],{"href":1933},"\u002Fen\u002Fguides\u002Fvalidated-forms#server",[477,1935,1937],{"id":1936},"validation",[435,1938,1939],{},"Laravel errors in a BbForm",[384,1941,1942,1943,1947,1948,1950,1951,1953,1954,1957,1958,1203],{},"When the fields live in a ",[498,1944,1945],{"href":46},[388,1946,220],{},", hand Laravel's\nerrors to the form in ",[388,1949,1902],{},". Each message then shows under the field whose\n",[388,1952,1545],{}," matches its key. The values live in the form's model, so the visit is a\nplain ",[388,1955,1956],{},"router.put",", wrapped in a promise that settles in ",[388,1959,1906],{},[426,1961,1963],{"className":893,"code":1962,"filename":1481,"language":763,"meta":431,"style":431},"\u003Cscript setup lang=\"ts\">\nimport { reactive } from 'vue';\nimport { router } from '@inertiajs\u002Fvue3';\nimport {\n    BbButton, BbForm, BbTextInput, useBbFormContext, useToast,\n} from 'bitboss-ui';\n\ntype Customer = { id: number; name: string; email: string };\n\nconst props = defineProps\u003C{ customer: Customer }>();\nconst values = reactive({\n    name: props.customer.name,\n    email: props.customer.email,\n});\nconst form = useBbFormContext('customer');\nconst { toast } = useToast();\n\nconst save = () =>\n    new Promise\u003Cvoid>((resolve) =>\n        router.put(`\u002Fcustomers\u002F${props.customer.id}`, values, {\n            onError: (errors) => form.setErrors(errors),\n            onNetworkError: () =>\n                toast({ text: 'No connection.', variant: 'destructive' }),\n            onFinish: () => resolve(),\n        }),\n    );\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CBbForm\n        id=\"customer\"\n        :model=\"values\"\n        @submit=\"save\"\n    >\n        \u003CBbTextInput\n            id=\"customer-name\"\n            label=\"Name\"\n            name=\"name\"\n        \u002F>\n        \u003CBbTextInput\n            id=\"customer-email\"\n            label=\"Email\"\n            name=\"email\"\n            type=\"email\"\n        \u002F>\n        \u003CBbButton type=\"submit\">Save\u003C\u002FBbButton>\n    \u003C\u002FBbForm>\n\u003C\u002Ftemplate>\n",[388,1964,1965,1981,1994,2007,2014,2019,2030,2034,2070,2074,2095,2108,2112,2117,2121,2140,2159,2163,2175,2199,2225,2247,2256,2276,2291,2296,2301,2310,2315,2324,2332,2342,2358,2375,2381,2389,2399,2409,2419,2425,2432,2442,2452,2462,2472,2477,2498,2508],{"__ignoreMap":431},[435,1966,1967,1969,1971,1973,1975,1977,1979],{"class":437,"line":141},[435,1968,901],{"class":545},[435,1970,905],{"class":904},[435,1972,908],{"class":798},[435,1974,911],{"class":798},[435,1976,914],{"class":545},[435,1978,917],{"class":444},[435,1980,920],{"class":545},[435,1982,1983,1985,1988,1990,1992],{"class":437,"line":145},[435,1984,542],{"class":541},[435,1986,1987],{"class":545}," { reactive } ",[435,1989,549],{"class":541},[435,1991,552],{"class":444},[435,1993,555],{"class":545},[435,1995,1996,1998,2001,2003,2005],{"class":437,"line":149},[435,1997,542],{"class":541},[435,1999,2000],{"class":545}," { router } ",[435,2002,549],{"class":541},[435,2004,567],{"class":444},[435,2006,555],{"class":545},[435,2008,2009,2011],{"class":437,"line":177},[435,2010,542],{"class":541},[435,2012,2013],{"class":545}," {\n",[435,2015,2016],{"class":437,"line":181},[435,2017,2018],{"class":545},"    BbButton, BbForm, BbTextInput, useBbFormContext, useToast,\n",[435,2020,2021,2024,2026,2028],{"class":437,"line":185},[435,2022,2023],{"class":545},"} ",[435,2025,549],{"class":541},[435,2027,581],{"class":444},[435,2029,555],{"class":545},[435,2031,2032],{"class":437,"line":225},[435,2033,589],{"emptyLinePlaceholder":588},[435,2035,2036,2038,2041,2043,2045,2047,2049,2051,2053,2055,2057,2059,2061,2064,2066,2068],{"class":437,"line":229},[435,2037,1535],{"class":541},[435,2039,2040],{"class":440}," Customer",[435,2042,1098],{"class":541},[435,2044,928],{"class":545},[435,2046,1581],{"class":440},[435,2048,1203],{"class":541},[435,2050,1586],{"class":798},[435,2052,1232],{"class":545},[435,2054,1545],{"class":440},[435,2056,1203],{"class":541},[435,2058,1170],{"class":798},[435,2060,1232],{"class":545},[435,2062,2063],{"class":440},"email",[435,2065,1203],{"class":541},[435,2067,1170],{"class":798},[435,2069,1552],{"class":545},[435,2071,2072],{"class":437,"line":233},[435,2073,589],{"emptyLinePlaceholder":588},[435,2075,2076,2078,2080,2082,2084,2086,2088,2090,2092],{"class":437,"line":237},[435,2077,925],{"class":541},[435,2079,1563],{"class":798},[435,2081,1098],{"class":541},[435,2083,1568],{"class":594},[435,2085,1571],{"class":545},[435,2087,1574],{"class":440},[435,2089,1203],{"class":541},[435,2091,2040],{"class":440},[435,2093,2094],{"class":545}," }>();\n",[435,2096,2097,2099,2102,2104,2106],{"class":437,"line":241},[435,2098,925],{"class":541},[435,2100,2101],{"class":798}," values",[435,2103,1098],{"class":541},[435,2105,1152],{"class":594},[435,2107,597],{"class":545},[435,2109,2110],{"class":437,"line":695},[435,2111,1628],{"class":545},[435,2113,2114],{"class":437,"line":701},[435,2115,2116],{"class":545},"    email: props.customer.email,\n",[435,2118,2119],{"class":437,"line":1659},[435,2120,704],{"class":545},[435,2122,2123,2125,2128,2130,2133,2135,2138],{"class":437,"line":1697},[435,2124,925],{"class":541},[435,2126,2127],{"class":798}," form",[435,2129,1098],{"class":541},[435,2131,2132],{"class":594}," useBbFormContext",[435,2134,1104],{"class":545},[435,2136,2137],{"class":444},"'customer'",[435,2139,958],{"class":545},[435,2141,2142,2144,2146,2149,2151,2153,2156],{"class":437,"line":1706},[435,2143,925],{"class":541},[435,2145,928],{"class":545},[435,2147,2148],{"class":798},"toast",[435,2150,939],{"class":545},[435,2152,914],{"class":541},[435,2154,2155],{"class":594}," useToast",[435,2157,2158],{"class":545},"();\n",[435,2160,2161],{"class":437,"line":1711},[435,2162,589],{"emptyLinePlaceholder":588},[435,2164,2165,2167,2169,2171,2173],{"class":437,"line":1720},[435,2166,925],{"class":541},[435,2168,1648],{"class":594},[435,2170,1098],{"class":541},[435,2172,1653],{"class":545},[435,2174,1656],{"class":541},[435,2176,2177,2180,2183,2185,2188,2191,2194,2197],{"class":437,"line":1728},[435,2178,2179],{"class":541},"    new",[435,2181,2182],{"class":798}," Promise",[435,2184,901],{"class":545},[435,2186,2187],{"class":798},"void",[435,2189,2190],{"class":545},">((",[435,2192,2193],{"class":440},"resolve",[435,2195,2196],{"class":545},") ",[435,2198,1656],{"class":541},[435,2200,2201,2204,2206,2208,2210,2212,2214,2216,2218,2220,2222],{"class":437,"line":1739},[435,2202,2203],{"class":545},"        router.",[435,2205,1448],{"class":594},[435,2207,1104],{"class":545},[435,2209,1667],{"class":444},[435,2211,624],{"class":545},[435,2213,404],{"class":444},[435,2215,1574],{"class":545},[435,2217,404],{"class":444},[435,2219,1581],{"class":545},[435,2221,1680],{"class":444},[435,2223,2224],{"class":545},", values, {\n",[435,2226,2227,2230,2233,2235,2237,2239,2242,2244],{"class":437,"line":1753},[435,2228,2229],{"class":594},"            onError",[435,2231,2232],{"class":545},": (",[435,2234,1758],{"class":440},[435,2236,2196],{"class":545},[435,2238,648],{"class":541},[435,2240,2241],{"class":545}," form.",[435,2243,1929],{"class":594},[435,2245,2246],{"class":545},"(errors),\n",[435,2248,2249,2252,2254],{"class":437,"line":1770},[435,2250,2251],{"class":594},"            onNetworkError",[435,2253,645],{"class":545},[435,2255,1656],{"class":541},[435,2257,2258,2261,2264,2267,2270,2273],{"class":437,"line":1780},[435,2259,2260],{"class":594},"                toast",[435,2262,2263],{"class":545},"({ text: ",[435,2265,2266],{"class":444},"'No connection.'",[435,2268,2269],{"class":545},", variant: ",[435,2271,2272],{"class":444},"'destructive'",[435,2274,2275],{"class":545}," }),\n",[435,2277,2278,2281,2283,2285,2288],{"class":437,"line":1790},[435,2279,2280],{"class":594},"            onFinish",[435,2282,645],{"class":545},[435,2284,648],{"class":541},[435,2286,2287],{"class":594}," resolve",[435,2289,2290],{"class":545},"(),\n",[435,2292,2293],{"class":437,"line":1795},[435,2294,2295],{"class":545},"        }),\n",[435,2297,2298],{"class":437,"line":1824},[435,2299,2300],{"class":545},"    );\n",[435,2302,2304,2306,2308],{"class":437,"line":2303},27,[435,2305,963],{"class":545},[435,2307,905],{"class":904},[435,2309,920],{"class":545},[435,2311,2313],{"class":437,"line":2312},28,[435,2314,589],{"emptyLinePlaceholder":588},[435,2316,2318,2320,2322],{"class":437,"line":2317},29,[435,2319,901],{"class":545},[435,2321,978],{"class":904},[435,2323,920],{"class":545},[435,2325,2327,2329],{"class":437,"line":2326},30,[435,2328,985],{"class":545},[435,2330,2331],{"class":904},"BbForm\n",[435,2333,2335,2337,2339],{"class":437,"line":2334},31,[435,2336,1731],{"class":798},[435,2338,914],{"class":545},[435,2340,2341],{"class":444},"\"customer\"\n",[435,2343,2345,2347,2349,2351,2353,2356],{"class":437,"line":2344},32,[435,2346,1009],{"class":545},[435,2348,479],{"class":798},[435,2350,914],{"class":545},[435,2352,998],{"class":545},[435,2354,2355],{"class":545},"values",[435,2357,1004],{"class":545},[435,2359,2361,2364,2367,2369,2371,2373],{"class":437,"line":2360},33,[435,2362,2363],{"class":545},"        @",[435,2365,2366],{"class":798},"submit",[435,2368,914],{"class":545},[435,2370,998],{"class":545},[435,2372,1812],{"class":545},[435,2374,1004],{"class":545},[435,2376,2378],{"class":437,"line":2377},34,[435,2379,2380],{"class":545},"    >\n",[435,2382,2384,2387],{"class":437,"line":2383},35,[435,2385,2386],{"class":545},"        \u003C",[435,2388,1725],{"class":904},[435,2390,2392,2395,2397],{"class":437,"line":2391},36,[435,2393,2394],{"class":798},"            id",[435,2396,914],{"class":545},[435,2398,1736],{"class":444},[435,2400,2402,2405,2407],{"class":437,"line":2401},37,[435,2403,2404],{"class":798},"            label",[435,2406,914],{"class":545},[435,2408,1777],{"class":444},[435,2410,2412,2415,2417],{"class":437,"line":2411},38,[435,2413,2414],{"class":798},"            name",[435,2416,914],{"class":545},[435,2418,1039],{"class":444},[435,2420,2422],{"class":437,"line":2421},39,[435,2423,2424],{"class":545},"        \u002F>\n",[435,2426,2428,2430],{"class":437,"line":2427},40,[435,2429,2386],{"class":545},[435,2431,1725],{"class":904},[435,2433,2435,2437,2439],{"class":437,"line":2434},41,[435,2436,2394],{"class":798},[435,2438,914],{"class":545},[435,2440,2441],{"class":444},"\"customer-email\"\n",[435,2443,2445,2447,2449],{"class":437,"line":2444},42,[435,2446,2404],{"class":798},[435,2448,914],{"class":545},[435,2450,2451],{"class":444},"\"Email\"\n",[435,2453,2455,2457,2459],{"class":437,"line":2454},43,[435,2456,2414],{"class":798},[435,2458,914],{"class":545},[435,2460,2461],{"class":444},"\"email\"\n",[435,2463,2465,2468,2470],{"class":437,"line":2464},44,[435,2466,2467],{"class":798},"            type",[435,2469,914],{"class":545},[435,2471,2461],{"class":444},[435,2473,2475],{"class":437,"line":2474},45,[435,2476,2424],{"class":545},[435,2478,2480,2482,2484,2487,2489,2492,2494,2496],{"class":437,"line":2479},46,[435,2481,2386],{"class":545},[435,2483,205],{"class":904},[435,2485,2486],{"class":798}," type",[435,2488,914],{"class":545},[435,2490,2491],{"class":444},"\"submit\"",[435,2493,1817],{"class":545},[435,2495,205],{"class":904},[435,2497,920],{"class":545},[435,2499,2501,2504,2506],{"class":437,"line":2500},47,[435,2502,2503],{"class":545},"    \u003C\u002F",[435,2505,220],{"class":904},[435,2507,920],{"class":545},[435,2509,2511,2513,2515],{"class":437,"line":2510},48,[435,2512,963],{"class":545},[435,2514,978],{"class":904},[435,2516,920],{"class":545},[384,2518,2519,2520,731,2523,2526,2527,2530,2531,2534,2535,2538],{},"Name the fields with Laravel's keys: ",[388,2521,2522],{},"address.city",[388,2524,2525],{},"lines.0.qty"," work as\nthey are. A key no field owns lands in the form's ",[388,2528,2529],{},"unmatchedErrors"," instead of\ndisappearing. The form moves focus to the first failing field on screen. Laravel\nstays the validator: add ",[388,2532,2533],{},"rules"," or a ",[388,2536,2537],{},"schema"," only for checks worth running\nbefore the request.",[384,2540,2541,2542,2544,2545,2548,2549,2552,2553,2556,2557,2560,2561,2564,2565,2571,2572,2575],{},"With Inertia's ",[388,2543,1437],{},", bind the object to the form with\n",[388,2546,2547],{},"\u003CBbForm :model=\"inertiaForm\">"," and declare every field in ",[388,2550,2551],{},"useForm({ … })",":\nInertia posts only the keys it was created with. Then hand the errors over with\n",[388,2554,2555],{},":field-errors=\"inertiaForm.errors\"",": a message shows on its field for as long\nas Inertia holds it. ",[388,2558,2559],{},"inertiaForm.processing"," gives way to the form's own lock:\nwhile the promise returned from ",[388,2562,2563],{},"@submit"," runs, the fields are read-only and\nthe submit button spins. The\n",[498,2566,2568,2570],{"href":2567},"\u002Fen\u002Fcomponents\u002Fbb-form#server-errors",[388,2569,220],{}," page"," covers the 422 from a\nplain ",[388,2573,2574],{},"fetch"," and Laravel Precognition.",[477,2577,2579],{"id":2578},"guards",[435,2580,2581],{},"Guarding a dirty form",[384,2583,2584,2587,2588,2592,2593,2595,2596,404],{},[388,2585,2586],{},"useConfirmOnRouteLeave"," intercepts Inertia visits and asks through\n",[498,2589,2590],{"href":32},[388,2591,1868],{}," before leaving. Like any other\nconfirm, it renders in the ",[388,2594,519],{}," ",[498,2597,2599],{"href":2598},"#install","beside the page",[384,2601,2602,2603,2606,2607,2610,2611,2614],{},"Bind ",[388,2604,2605],{},"disabled"," to ",[388,2608,2609],{},"!form.isDirty"," and the guard only appears when there is\nsomething to lose. Server redirects after a whitelisted action carry an\n",[388,2612,2613],{},"X-Whitelisted-Action"," header, so a saving visit's own redirect is never blocked\nby the guard it just triggered, which is the failure this exists to prevent.",[384,2616,2617,2618,2620,2621,524,2624,1463,2627,524,2630,2633,2634,2637,2638,2641],{},"The dialog's words and look are ",[388,2619,282],{},"'s own options: ",[388,2622,2623],{},"title",[388,2625,2626],{},"text",[388,2628,2629],{},"yes",[388,2631,2632],{},"no"," (a label, or a full button config) and ",[388,2635,2636],{},"variant",". They default to\nEnglish ('Discard changes' \u002F 'Keep editing', ",[388,2639,2640],{},"destructive","), so a localized app\npasses its own:",[426,2643,2645],{"className":531,"code":2644,"language":534,"meta":431,"style":431},"useConfirmOnRouteLeave({\n    disabled: () => !form.isDirty,\n    title: t('leave.title'),\n    text: t('leave.text'),\n    yes: t('leave.discard'),\n    no: t('leave.stay'),\n});\n",[388,2646,2647,2653,2668,2684,2698,2712,2726],{"__ignoreMap":431},[435,2648,2649,2651],{"class":437,"line":141},[435,2650,2586],{"class":594},[435,2652,597],{"class":545},[435,2654,2655,2658,2660,2662,2665],{"class":437,"line":145},[435,2656,2657],{"class":594},"    disabled",[435,2659,645],{"class":545},[435,2661,648],{"class":541},[435,2663,2664],{"class":541}," !",[435,2666,2667],{"class":545},"form.isDirty,\n",[435,2669,2670,2673,2676,2678,2681],{"class":437,"line":149},[435,2671,2672],{"class":545},"    title: ",[435,2674,2675],{"class":594},"t",[435,2677,1104],{"class":545},[435,2679,2680],{"class":444},"'leave.title'",[435,2682,2683],{"class":545},"),\n",[435,2685,2686,2689,2691,2693,2696],{"class":437,"line":177},[435,2687,2688],{"class":545},"    text: ",[435,2690,2675],{"class":594},[435,2692,1104],{"class":545},[435,2694,2695],{"class":444},"'leave.text'",[435,2697,2683],{"class":545},[435,2699,2700,2703,2705,2707,2710],{"class":437,"line":181},[435,2701,2702],{"class":545},"    yes: ",[435,2704,2675],{"class":594},[435,2706,1104],{"class":545},[435,2708,2709],{"class":444},"'leave.discard'",[435,2711,2683],{"class":545},[435,2713,2714,2717,2719,2721,2724],{"class":437,"line":185},[435,2715,2716],{"class":545},"    no: ",[435,2718,2675],{"class":594},[435,2720,1104],{"class":545},[435,2722,2723],{"class":444},"'leave.stay'",[435,2725,2683],{"class":545},[435,2727,2728],{"class":437,"line":225},[435,2729,704],{"class":545},[384,2731,2732,2735],{},[388,2733,2734],{},"useHasChanged"," gives you the same dirty signal for state that is not an Inertia\nform.",[477,2737,2739],{"id":2738},"layout",[435,2740,2741],{},"Page chrome",[384,2743,2744,2745,764,2748,2751,2752,2755,2756,2759,2760,404],{},"Two more pieces are app-side code. The app layout is the left navigation, the\nfooter and the page's one ",[388,2746,2747],{},"\u003Cmain>",[388,2749,2750],{},"PageShell"," wraps each page in a single\ntopbar, the content, and a right sidebar that opens a record without leaving the\nlist: ",[388,2753,2754],{},"peek(record)"," opens it, ",[388,2757,2758],{},"stackItem(related)"," drills into a related record\nwith a back arrow. Keep one topbar per page, and put app-wide utilities such as\nsearch or a user menu into it rather than stacking a second bar above. The code\nto copy is the Inertia layout scaffold recipe in the package, in\n",[388,2761,2762],{},"node_modules\u002Fbitboss-ui\u002Fdist\u002Fai\u002Frecipes\u002Finertia\u002Flayout-scaffold.md",[477,2764,2766],{"id":2765},"catalogue",[435,2767,2768],{},"The rest of the toolkit",[384,2770,2771],{},"The remaining helpers are small and independent. Take the ones you need:",[2773,2774,2775,2788],"table",{},[2776,2777,2778],"thead",{},[2779,2780,2781,2785],"tr",{},[2782,2783,2784],"th",{},"Helper",[2782,2786,2787],{},"For",[2789,2790,2791,2806,2816,2826,2836,2846,2856],"tbody",{},[2779,2792,2793,2799],{},[2794,2795,2796],"td",{},[388,2797,2798],{},"useLoading",[2794,2800,2801,2802,2805],{},"Wrapping any async function with a ",[388,2803,2804],{},"loading"," ref",[2779,2807,2808,2813],{},[2794,2809,2810],{},[388,2811,2812],{},"useAsyncFn",[2794,2814,2815],{},"The same, with the result and error surfaced",[2779,2817,2818,2823],{},[2794,2819,2820],{},[388,2821,2822],{},"useResourceContext",[2794,2824,2825],{},"Sharing one resource's state across a page",[2779,2827,2828,2833],{},[2794,2829,2830],{},[388,2831,2832],{},"useDeleteCmd",[2794,2834,2835],{},"The delete-with-confirm command, wired once",[2779,2837,2838,2843],{},[2794,2839,2840],{},[388,2841,2842],{},"useScreenSizes",[2794,2844,2845],{},"Breakpoint state for adaptive layouts",[2779,2847,2848,2853],{},[2794,2849,2850],{},[388,2851,2852],{},"useIndexById",[2794,2854,2855],{},"Turning a list into a keyed lookup",[2779,2857,2858,2863],{},[2794,2859,2860],{},[388,2861,2862],{},"useUntil",[2794,2864,2865],{},"Awaiting a reactive condition",[384,2867,2868,2869,524,2871,2873],{},"None of them are required. The three that change how a page is written are\n",[388,2870,1078],{},[388,2872,417],{}," and the paginated context. Start there and add\nthe rest when a page asks for them.",[384,2875,2876],{},"Adopt them in that order. Put one filter in the URL, convert one submit to a\npromise, then introduce a context only when two separate regions need the same\npage data. Copying the full toolkit up front adds dependencies and abstractions\nbefore the page has a use for them.",[2878,2879,2880],"style",{},"html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}",{"title":431,"searchDepth":149,"depth":149,"links":2882},[2883,2884,2885,2886,2887,2888,2889,2890,2891,2892],{"id":479,"depth":145,"text":482},{"id":503,"depth":145,"text":506},{"id":624,"depth":145,"text":846},{"id":1065,"depth":145,"text":1068},{"id":1353,"depth":145,"text":1356},{"id":1426,"depth":145,"text":1429},{"id":1936,"depth":145,"text":1939},{"id":2578,"depth":145,"text":2581},{"id":2738,"depth":145,"text":2741},{"id":2765,"depth":145,"text":2768},"Set up bitboss-ui in an Inertia app, route Laravel validation errors into BbForm, and use app-side helpers for props, URL filters, pagination and awaitable forms.","md",{},[2897,2898,2899,2900,2901,2902,2903,2904,2905,2906],{"id":479,"title":482},{"id":503,"title":506},{"id":624,"title":846},{"id":1065,"title":1068},{"id":1353,"title":1356},{"id":1426,"title":1429},{"id":1936,"title":1939},{"id":2578,"title":2581},{"id":2738,"title":2741},{"id":2765,"title":2768},{"title":190,"description":2893},"guides\u002Finertia","gbQVfiXDFTf7hlILXq6tIE8Xzn57-obXYsF6h6T_QcY",1793055148756]