[{"data":1,"prerenderedAt":2800},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-nuxt-ui":37,"-nuxt-nuxt-ui-surround":2795},[4,9,20,32],{"title":5,"path":6,"stem":7,"icon":8},"Getting started","\u002Fgetting-started","0.getting-started","i-lucide-rocket",{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":19},"Functions","i-lucide-function-square","\u002Ffunctions","1.functions",[15],{"title":16,"path":17,"stem":18},"useBarcodeDetector","\u002Ffunctions\u002Fuse-barcode-detector","1.functions\u002F1.use-barcode-detector",false,{"title":21,"path":22,"stem":23,"children":24,"icon":27},"Nuxt","\u002Fnuxt","2.nuxt\u002F1.index",[25,28],{"title":26,"path":22,"stem":23,"icon":27},"Module","i-simple-icons-nuxtdotjs",{"title":29,"path":30,"stem":31,"icon":27},"Nuxt UI integration","\u002Fnuxt\u002Fnuxt-ui","2.nuxt\u002F2.nuxt-ui",{"title":33,"path":34,"stem":35,"icon":36},"Compatibility & polyfill","\u002Fcompatibility","3.compatibility","i-lucide-globe",{"id":38,"title":29,"body":39,"description":2788,"extension":2789,"links":2790,"meta":2791,"navigation":2792,"path":30,"seo":2793,"stem":31,"__hash__":2794},"docs\u002F2.nuxt\u002F2.nuxt-ui.md",{"type":40,"value":41,"toc":2775},"minimark",[42,46,78,85,115,136,446,451,655,689,693,770,774,795,1401,1414,1418,1431,1743,1766,1770,1776,2018,2022,2035,2290,2306,2310,2319,2546,2556,2560,2577,2756,2760,2771],[43,44,29],"h1",{"id":45},"nuxt-ui-integration",[47,48,49,50,60,61,65,66,69,70,73,74,77],"p",{},"When ",[51,52,56],"a",{"href":53,"rel":54},"https:\u002F\u002Fui.nuxt.com",[55],"nofollow",[57,58,59],"code",{},"@nuxt\u002Fui"," is present in your app, the ",[51,62,64],{"href":63},"\u002Fnuxt\u002Fmodule","Nuxt module"," registers an extra component built on top of ",[57,67,68],{},"UInput",", ",[57,71,72],{},"UButton",", and ",[57,75,76],{},"UModal",".",[79,80,82],"h2",{"id":81},"ubarcodeinput",[57,83,84],{},"\u003CUBarcodeInput \u002F>",[47,86,87,88,90,91,94,95,98,99,104,105,108,109,112,113,77],{},"A ",[57,89,68],{}," with the scan trigger tucked into its ",[57,92,93],{},"#trailing"," slot, bound via ",[57,96,97],{},"v-model",". When the ",[51,100,103],{"href":101,"rel":102},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FAPI\u002FBarcode_Detection_API",[55],"Barcode Detection API"," is available, tapping the trailing icon opens a modal with a live camera scanner; the first accepted barcode is written back to the model. The modal renders a ",[57,106,107],{},"\u003CBarcodeDetectorOverlay>"," over the camera preview, so users see polygons over barcodes in real time — green for accepted matches, red for ones the ",[57,110,111],{},"accept"," predicate is filtering out. On unsupported browsers the scan button is hidden and the field behaves as a plain ",[57,114,68],{},[47,116,117,118,120,121,124,125,128,129,131,132,135],{},"Because the component renders as a single ",[57,119,68],{},", it composes cleanly inside a ",[57,122,123],{},"\u003CUFieldGroup>"," (e.g. paired with a submit button or a unit suffix) and inside ",[57,126,127],{},"\u003CUFormField>"," — ",[57,130,68],{},"'s built-in ",[57,133,134],{},"useFormField()"," integration carries through transparently for label, description, hint, and error wiring.",[137,138,139,142],"code-preview",{},[140,141],"u-barcode-input-demo",{},[143,144,146],"template",{"v-slot:code":145},"",[147,148,152],"pre",{"className":149,"code":150,"language":151,"meta":145,"style":145},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { DetectedBarcode } from '@orbisk\u002Fvue-use-barcode-detection'\n\nconst value = ref('')\n\nfunction onScan(barcode: DetectedBarcode) {\n  console.log('scanned', barcode.format, barcode.rawValue)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUBarcodeInput\n    v-model=\"value\"\n    placeholder=\"Type a value or tap the icon to scan\"\n    @scan=\"onScan\"\n  \u002F>\n\u003C\u002Ftemplate>\n","vue",[57,153,154,189,217,241,248,271,276,303,346,352,362,367,376,385,401,416,431,437],{"__ignoreMap":145},[155,156,159,163,167,171,174,177,180,184,186],"span",{"class":157,"line":158},"line",1,[155,160,162],{"class":161},"sMK4o","\u003C",[155,164,166],{"class":165},"swJcz","script",[155,168,170],{"class":169},"spNyl"," setup",[155,172,173],{"class":169}," lang",[155,175,176],{"class":161},"=",[155,178,179],{"class":161},"\"",[155,181,183],{"class":182},"sfazB","ts",[155,185,179],{"class":161},[155,187,188],{"class":161},">\n",[155,190,192,196,199,203,206,209,212,214],{"class":157,"line":191},2,[155,193,195],{"class":194},"s7zQu","import",[155,197,198],{"class":161}," {",[155,200,202],{"class":201},"sTEyZ"," ref",[155,204,205],{"class":161}," }",[155,207,208],{"class":194}," from",[155,210,211],{"class":161}," '",[155,213,151],{"class":182},[155,215,216],{"class":161},"'\n",[155,218,220,222,225,227,230,232,234,236,239],{"class":157,"line":219},3,[155,221,195],{"class":194},[155,223,224],{"class":194}," type",[155,226,198],{"class":161},[155,228,229],{"class":201}," DetectedBarcode",[155,231,205],{"class":161},[155,233,208],{"class":194},[155,235,211],{"class":161},[155,237,238],{"class":182},"@orbisk\u002Fvue-use-barcode-detection",[155,240,216],{"class":161},[155,242,244],{"class":157,"line":243},4,[155,245,247],{"emptyLinePlaceholder":246},true,"\n",[155,249,251,254,257,259,262,265,268],{"class":157,"line":250},5,[155,252,253],{"class":169},"const",[155,255,256],{"class":201}," value ",[155,258,176],{"class":161},[155,260,202],{"class":261},"s2Zo4",[155,263,264],{"class":201},"(",[155,266,267],{"class":161},"''",[155,269,270],{"class":201},")\n",[155,272,274],{"class":157,"line":273},6,[155,275,247],{"emptyLinePlaceholder":246},[155,277,279,282,285,287,291,294,297,300],{"class":157,"line":278},7,[155,280,281],{"class":169},"function",[155,283,284],{"class":261}," onScan",[155,286,264],{"class":161},[155,288,290],{"class":289},"sHdIc","barcode",[155,292,293],{"class":161},":",[155,295,229],{"class":296},"sBMFI",[155,298,299],{"class":161},")",[155,301,302],{"class":161}," {\n",[155,304,306,309,311,314,316,319,322,324,327,330,332,335,337,339,341,344],{"class":157,"line":305},8,[155,307,308],{"class":201},"  console",[155,310,77],{"class":161},[155,312,313],{"class":261},"log",[155,315,264],{"class":165},[155,317,318],{"class":161},"'",[155,320,321],{"class":182},"scanned",[155,323,318],{"class":161},[155,325,326],{"class":161},",",[155,328,329],{"class":201}," barcode",[155,331,77],{"class":161},[155,333,334],{"class":201},"format",[155,336,326],{"class":161},[155,338,329],{"class":201},[155,340,77],{"class":161},[155,342,343],{"class":201},"rawValue",[155,345,270],{"class":165},[155,347,349],{"class":157,"line":348},9,[155,350,351],{"class":161},"}\n",[155,353,355,358,360],{"class":157,"line":354},10,[155,356,357],{"class":161},"\u003C\u002F",[155,359,166],{"class":165},[155,361,188],{"class":161},[155,363,365],{"class":157,"line":364},11,[155,366,247],{"emptyLinePlaceholder":246},[155,368,370,372,374],{"class":157,"line":369},12,[155,371,162],{"class":161},[155,373,143],{"class":165},[155,375,188],{"class":161},[155,377,379,382],{"class":157,"line":378},13,[155,380,381],{"class":161},"  \u003C",[155,383,384],{"class":165},"UBarcodeInput\n",[155,386,388,391,393,395,398],{"class":157,"line":387},14,[155,389,390],{"class":169},"    v-model",[155,392,176],{"class":161},[155,394,179],{"class":161},[155,396,397],{"class":182},"value",[155,399,400],{"class":161},"\"\n",[155,402,404,407,409,411,414],{"class":157,"line":403},15,[155,405,406],{"class":169},"    placeholder",[155,408,176],{"class":161},[155,410,179],{"class":161},[155,412,413],{"class":182},"Type a value or tap the icon to scan",[155,415,400],{"class":161},[155,417,419,422,424,426,429],{"class":157,"line":418},16,[155,420,421],{"class":169},"    @scan",[155,423,176],{"class":161},[155,425,179],{"class":161},[155,427,428],{"class":182},"onScan",[155,430,400],{"class":161},[155,432,434],{"class":157,"line":433},17,[155,435,436],{"class":161},"  \u002F>\n",[155,438,440,442,444],{"class":157,"line":439},18,[155,441,357],{"class":161},[155,443,143],{"class":165},[155,445,188],{"class":161},[447,448,450],"h3",{"id":449},"props","Props",[452,453,454,473],"table",{},[455,456,457],"thead",{},[458,459,460,464,467,470],"tr",{},[461,462,463],"th",{},"Prop",[461,465,466],{},"Type",[461,468,469],{},"Default",[461,471,472],{},"Description",[474,475,476,498,519,543,565,592,611,630],"tbody",{},[458,477,478,484,489,493],{},[479,480,481],"td",{},[57,482,483],{},"modelValue",[479,485,486],{},[57,487,488],{},"string",[479,490,491],{},[57,492,267],{},[479,494,495,496,77],{},"The input value. Use with ",[57,497,97],{},[458,499,500,505,510,516],{},[479,501,502],{},[57,503,504],{},"formats",[479,506,507],{},[57,508,509],{},"BarcodeFormat[]",[479,511,512],{},[513,514,515],"em",{},"all supported",[479,517,518],{},"Formats to detect. Defaults to every format the browser supports.",[458,520,521,526,531,536],{},[479,522,523],{},[57,524,525],{},"once",[479,527,528],{},[57,529,530],{},"boolean",[479,532,533],{},[57,534,535],{},"true",[479,537,538,539,542],{},"Close the modal after the first accepted detection. Set to ",[57,540,541],{},"false"," to keep scanning multiple barcodes.",[458,544,545,549,554,559],{},[479,546,547],{},[57,548,111],{},[479,550,551],{},[57,552,553],{},"(b: DetectedBarcode) => boolean",[479,555,556],{},[513,557,558],{},"undefined",[479,560,561,562,564],{},"Predicate gating which detections count (e.g. by format or ",[57,563,343],{}," prefix). Non-matching scans are ignored entirely.",[458,566,567,572,577,582],{},[479,568,569],{},[57,570,571],{},"transform",[479,573,574],{},[57,575,576],{},"(b: DetectedBarcode) => string | null | undefined",[479,578,579],{},[57,580,581],{},"(b) => b.rawValue",[479,583,584,585,588,589,591],{},"Map an accepted detection to the model value. Useful when the QR encodes JSON and only one field should be bound. Returning ",[57,586,587],{},"null","\u002F",[57,590,558],{}," keeps the modal open without writing to the model.",[458,593,594,599,603,608],{},[479,595,596],{},[57,597,598],{},"scanLabel",[479,600,601],{},[57,602,488],{},[479,604,605],{},[57,606,607],{},"'Scan barcode'",[479,609,610],{},"Accessible label for the scan button and title for the modal.",[458,612,613,618,622,627],{},[479,614,615],{},[57,616,617],{},"scanIcon",[479,619,620],{},[57,621,488],{},[479,623,624],{},[57,625,626],{},"'i-lucide-scan-line'",[479,628,629],{},"Icon for the scan button. Any name your Nuxt UI iconset exposes.",[458,631,632,637,642,646],{},[479,633,634],{},[57,635,636],{},"overlay",[479,638,639],{},[57,640,641],{},"BarcodeDetectorOverlayConfig",[479,643,644],{},[513,645,558],{},[479,647,648,649,652,653,77],{},"Customize the on-camera overlay (colors, stroke, per-barcode ",[57,650,651],{},"label",", etc.). Forwarded to ",[57,654,107],{},[47,656,657,658,660,661,69,664,69,667,69,670,69,673,69,676,69,679,69,682,685,686,688],{},"All ",[57,659,68],{}," props (",[57,662,663],{},"placeholder",[57,665,666],{},"color",[57,668,669],{},"variant",[57,671,672],{},"size",[57,674,675],{},"disabled",[57,677,678],{},"icon",[57,680,681],{},"leadingIcon",[57,683,684],{},"trailingIcon",", etc.) are forwarded; wrap in ",[57,687,127],{}," for label\u002Ferror integration.",[447,690,692],{"id":691},"events","Events",[452,694,695,707],{},[455,696,697],{},[458,698,699,702,705],{},[461,700,701],{},"Event",[461,703,704],{},"Payload",[461,706,472],{},[474,708,709,723,738,755],{},[458,710,711,716,720],{},[479,712,713],{},[57,714,715],{},"update:modelValue",[479,717,718],{},[57,719,488],{},[479,721,722],{},"Emitted on manual input or after an accepted scan.",[458,724,725,730,735],{},[479,726,727],{},[57,728,729],{},"scan",[479,731,732],{},[57,733,734],{},"DetectedBarcode",[479,736,737],{},"Emitted when an accepted barcode is detected.",[458,739,740,745,750],{},[479,741,742],{},[57,743,744],{},"blur",[479,746,747],{},[57,748,749],{},"FocusEvent",[479,751,752,753,77],{},"Forwarded from the inner ",[57,754,68],{},[458,756,757,762,766],{},[479,758,759],{},[57,760,761],{},"change",[479,763,764],{},[57,765,701],{},[479,767,752,768,77],{},[57,769,68],{},[447,771,773],{"id":772},"form-validation","Form validation",[47,775,776,779,780,783,784,786,787,790,791,794],{},[57,777,778],{},"UBarcodeInput"," participates in ",[57,781,782],{},"UForm"," exactly like ",[57,785,68],{}," does. Wrap it in ",[57,788,789],{},"UFormField"," and the ",[57,792,793],{},"name"," prop wires errors, labels, and accessibility attributes. Validation runs on the model value, so it doesn't matter whether the user typed the code or scanned it — both code paths feed the same string into the schema.",[137,796,797,800],{},[798,799],"u-barcode-input-form-demo",{},[143,801,802],{"v-slot:code":145},[147,803,805],{"className":149,"code":804,"language":151,"meta":145,"style":145},"\u003Cscript setup lang=\"ts\">\nimport { reactive, ref } from 'vue'\nimport * as z from 'zod'\nimport type { FormSubmitEvent } from '@nuxt\u002Fui'\n\nconst schema = z.object({\n  productCode: z\n    .string()\n    .min(1, 'Required.')\n    .regex(\u002F^\\d{8,13}$\u002F, 'Must be 8–13 digits (EAN\u002FUPC).'),\n})\n\ntype Schema = z.output\u003Ctypeof schema>\n\nconst state = reactive({ productCode: '' })\nconst submitted = ref\u003CSchema | null>(null)\n\nfunction onSubmit(event: FormSubmitEvent\u003CSchema>) {\n  submitted.value = event.data\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUForm :schema=\"schema\" :state=\"state\" class=\"space-y-4\" @submit=\"onSubmit\">\n    \u003CUFormField\n      label=\"Product code\"\n      name=\"productCode\"\n      help=\"EAN-8, EAN-13, or UPC-A — type one or tap the icon to scan.\"\n      required\n    >\n      \u003CUBarcodeInput v-model=\"state.productCode\" placeholder=\"e.g. 5901234123457\" \u002F>\n    \u003C\u002FUFormField>\n\n    \u003CUButton type=\"submit\">Submit\u003C\u002FUButton>\n  \u003C\u002FUForm>\n\u003C\u002Ftemplate>\n",[57,806,807,827,850,873,894,898,920,930,940,964,1003,1010,1014,1040,1044,1072,1103,1107,1132,1152,1157,1166,1171,1180,1237,1246,1261,1276,1291,1297,1303,1338,1348,1353,1382,1392],{"__ignoreMap":145},[155,808,809,811,813,815,817,819,821,823,825],{"class":157,"line":158},[155,810,162],{"class":161},[155,812,166],{"class":165},[155,814,170],{"class":169},[155,816,173],{"class":169},[155,818,176],{"class":161},[155,820,179],{"class":161},[155,822,183],{"class":182},[155,824,179],{"class":161},[155,826,188],{"class":161},[155,828,829,831,833,836,838,840,842,844,846,848],{"class":157,"line":191},[155,830,195],{"class":194},[155,832,198],{"class":161},[155,834,835],{"class":201}," reactive",[155,837,326],{"class":161},[155,839,202],{"class":201},[155,841,205],{"class":161},[155,843,208],{"class":194},[155,845,211],{"class":161},[155,847,151],{"class":182},[155,849,216],{"class":161},[155,851,852,854,857,860,863,866,868,871],{"class":157,"line":219},[155,853,195],{"class":194},[155,855,856],{"class":161}," *",[155,858,859],{"class":194}," as",[155,861,862],{"class":201}," z ",[155,864,865],{"class":194},"from",[155,867,211],{"class":161},[155,869,870],{"class":182},"zod",[155,872,216],{"class":161},[155,874,875,877,879,881,884,886,888,890,892],{"class":157,"line":243},[155,876,195],{"class":194},[155,878,224],{"class":194},[155,880,198],{"class":161},[155,882,883],{"class":201}," FormSubmitEvent",[155,885,205],{"class":161},[155,887,208],{"class":194},[155,889,211],{"class":161},[155,891,59],{"class":182},[155,893,216],{"class":161},[155,895,896],{"class":157,"line":250},[155,897,247],{"emptyLinePlaceholder":246},[155,899,900,902,905,907,910,912,915,917],{"class":157,"line":273},[155,901,253],{"class":169},[155,903,904],{"class":201}," schema ",[155,906,176],{"class":161},[155,908,909],{"class":201}," z",[155,911,77],{"class":161},[155,913,914],{"class":261},"object",[155,916,264],{"class":201},[155,918,919],{"class":161},"{\n",[155,921,922,925,927],{"class":157,"line":278},[155,923,924],{"class":165},"  productCode",[155,926,293],{"class":161},[155,928,929],{"class":201}," z\n",[155,931,932,935,937],{"class":157,"line":305},[155,933,934],{"class":161},"    .",[155,936,488],{"class":261},[155,938,939],{"class":201},"()\n",[155,941,942,944,947,949,953,955,957,960,962],{"class":157,"line":348},[155,943,934],{"class":161},[155,945,946],{"class":261},"min",[155,948,264],{"class":201},[155,950,952],{"class":951},"sbssI","1",[155,954,326],{"class":161},[155,956,211],{"class":161},[155,958,959],{"class":182},"Required.",[155,961,318],{"class":161},[155,963,270],{"class":201},[155,965,966,968,971,973,975,978,981,984,987,989,991,993,996,998,1000],{"class":157,"line":354},[155,967,934],{"class":161},[155,969,970],{"class":261},"regex",[155,972,264],{"class":201},[155,974,588],{"class":161},[155,976,977],{"class":194},"^",[155,979,980],{"class":182},"\\d",[155,982,983],{"class":161},"{8,13}",[155,985,986],{"class":194},"$",[155,988,588],{"class":161},[155,990,326],{"class":161},[155,992,211],{"class":161},[155,994,995],{"class":182},"Must be 8–13 digits (EAN\u002FUPC).",[155,997,318],{"class":161},[155,999,299],{"class":201},[155,1001,1002],{"class":161},",\n",[155,1004,1005,1008],{"class":157,"line":364},[155,1006,1007],{"class":161},"}",[155,1009,270],{"class":201},[155,1011,1012],{"class":157,"line":369},[155,1013,247],{"emptyLinePlaceholder":246},[155,1015,1016,1019,1022,1025,1027,1029,1032,1035,1038],{"class":157,"line":378},[155,1017,1018],{"class":169},"type",[155,1020,1021],{"class":296}," Schema",[155,1023,1024],{"class":161}," =",[155,1026,909],{"class":296},[155,1028,77],{"class":161},[155,1030,1031],{"class":296},"output",[155,1033,1034],{"class":161},"\u003Ctypeof",[155,1036,1037],{"class":201}," schema",[155,1039,188],{"class":161},[155,1041,1042],{"class":157,"line":387},[155,1043,247],{"emptyLinePlaceholder":246},[155,1045,1046,1048,1051,1053,1055,1057,1060,1063,1065,1068,1070],{"class":157,"line":403},[155,1047,253],{"class":169},[155,1049,1050],{"class":201}," state ",[155,1052,176],{"class":161},[155,1054,835],{"class":261},[155,1056,264],{"class":201},[155,1058,1059],{"class":161},"{",[155,1061,1062],{"class":165}," productCode",[155,1064,293],{"class":161},[155,1066,1067],{"class":161}," ''",[155,1069,205],{"class":161},[155,1071,270],{"class":201},[155,1073,1074,1076,1079,1081,1083,1085,1088,1091,1094,1097,1099,1101],{"class":157,"line":418},[155,1075,253],{"class":169},[155,1077,1078],{"class":201}," submitted ",[155,1080,176],{"class":161},[155,1082,202],{"class":261},[155,1084,162],{"class":161},[155,1086,1087],{"class":296},"Schema",[155,1089,1090],{"class":161}," |",[155,1092,1093],{"class":296}," null",[155,1095,1096],{"class":161},">",[155,1098,264],{"class":201},[155,1100,587],{"class":161},[155,1102,270],{"class":201},[155,1104,1105],{"class":157,"line":433},[155,1106,247],{"emptyLinePlaceholder":246},[155,1108,1109,1111,1114,1116,1119,1121,1123,1125,1127,1130],{"class":157,"line":439},[155,1110,281],{"class":169},[155,1112,1113],{"class":261}," onSubmit",[155,1115,264],{"class":161},[155,1117,1118],{"class":289},"event",[155,1120,293],{"class":161},[155,1122,883],{"class":296},[155,1124,162],{"class":161},[155,1126,1087],{"class":296},[155,1128,1129],{"class":161},">)",[155,1131,302],{"class":161},[155,1133,1135,1138,1140,1142,1144,1147,1149],{"class":157,"line":1134},19,[155,1136,1137],{"class":201},"  submitted",[155,1139,77],{"class":161},[155,1141,397],{"class":201},[155,1143,1024],{"class":161},[155,1145,1146],{"class":201}," event",[155,1148,77],{"class":161},[155,1150,1151],{"class":201},"data\n",[155,1153,1155],{"class":157,"line":1154},20,[155,1156,351],{"class":161},[155,1158,1160,1162,1164],{"class":157,"line":1159},21,[155,1161,357],{"class":161},[155,1163,166],{"class":165},[155,1165,188],{"class":161},[155,1167,1169],{"class":157,"line":1168},22,[155,1170,247],{"emptyLinePlaceholder":246},[155,1172,1174,1176,1178],{"class":157,"line":1173},23,[155,1175,162],{"class":161},[155,1177,143],{"class":165},[155,1179,188],{"class":161},[155,1181,1183,1185,1187,1190,1192,1194,1197,1199,1202,1204,1206,1209,1211,1214,1216,1218,1221,1223,1226,1228,1230,1233,1235],{"class":157,"line":1182},24,[155,1184,381],{"class":161},[155,1186,782],{"class":165},[155,1188,1189],{"class":169}," :schema",[155,1191,176],{"class":161},[155,1193,179],{"class":161},[155,1195,1196],{"class":182},"schema",[155,1198,179],{"class":161},[155,1200,1201],{"class":169}," :state",[155,1203,176],{"class":161},[155,1205,179],{"class":161},[155,1207,1208],{"class":182},"state",[155,1210,179],{"class":161},[155,1212,1213],{"class":169}," class",[155,1215,176],{"class":161},[155,1217,179],{"class":161},[155,1219,1220],{"class":182},"space-y-4",[155,1222,179],{"class":161},[155,1224,1225],{"class":169}," @submit",[155,1227,176],{"class":161},[155,1229,179],{"class":161},[155,1231,1232],{"class":182},"onSubmit",[155,1234,179],{"class":161},[155,1236,188],{"class":161},[155,1238,1240,1243],{"class":157,"line":1239},25,[155,1241,1242],{"class":161},"    \u003C",[155,1244,1245],{"class":165},"UFormField\n",[155,1247,1249,1252,1254,1256,1259],{"class":157,"line":1248},26,[155,1250,1251],{"class":169},"      label",[155,1253,176],{"class":161},[155,1255,179],{"class":161},[155,1257,1258],{"class":182},"Product code",[155,1260,400],{"class":161},[155,1262,1264,1267,1269,1271,1274],{"class":157,"line":1263},27,[155,1265,1266],{"class":169},"      name",[155,1268,176],{"class":161},[155,1270,179],{"class":161},[155,1272,1273],{"class":182},"productCode",[155,1275,400],{"class":161},[155,1277,1279,1282,1284,1286,1289],{"class":157,"line":1278},28,[155,1280,1281],{"class":169},"      help",[155,1283,176],{"class":161},[155,1285,179],{"class":161},[155,1287,1288],{"class":182},"EAN-8, EAN-13, or UPC-A — type one or tap the icon to scan.",[155,1290,400],{"class":161},[155,1292,1294],{"class":157,"line":1293},29,[155,1295,1296],{"class":169},"      required\n",[155,1298,1300],{"class":157,"line":1299},30,[155,1301,1302],{"class":161},"    >\n",[155,1304,1306,1309,1311,1314,1316,1318,1321,1323,1326,1328,1330,1333,1335],{"class":157,"line":1305},31,[155,1307,1308],{"class":161},"      \u003C",[155,1310,778],{"class":165},[155,1312,1313],{"class":169}," v-model",[155,1315,176],{"class":161},[155,1317,179],{"class":161},[155,1319,1320],{"class":182},"state.productCode",[155,1322,179],{"class":161},[155,1324,1325],{"class":169}," placeholder",[155,1327,176],{"class":161},[155,1329,179],{"class":161},[155,1331,1332],{"class":182},"e.g. 5901234123457",[155,1334,179],{"class":161},[155,1336,1337],{"class":161}," \u002F>\n",[155,1339,1341,1344,1346],{"class":157,"line":1340},32,[155,1342,1343],{"class":161},"    \u003C\u002F",[155,1345,789],{"class":165},[155,1347,188],{"class":161},[155,1349,1351],{"class":157,"line":1350},33,[155,1352,247],{"emptyLinePlaceholder":246},[155,1354,1356,1358,1360,1362,1364,1366,1369,1371,1373,1376,1378,1380],{"class":157,"line":1355},34,[155,1357,1242],{"class":161},[155,1359,72],{"class":165},[155,1361,224],{"class":169},[155,1363,176],{"class":161},[155,1365,179],{"class":161},[155,1367,1368],{"class":182},"submit",[155,1370,179],{"class":161},[155,1372,1096],{"class":161},[155,1374,1375],{"class":201},"Submit",[155,1377,357],{"class":161},[155,1379,72],{"class":165},[155,1381,188],{"class":161},[155,1383,1385,1388,1390],{"class":157,"line":1384},35,[155,1386,1387],{"class":161},"  \u003C\u002F",[155,1389,782],{"class":165},[155,1391,188],{"class":161},[155,1393,1395,1397,1399],{"class":157,"line":1394},36,[155,1396,357],{"class":161},[155,1398,143],{"class":165},[155,1400,188],{"class":161},[47,1402,1403,1404,1409,1410,1413],{},"See the ",[51,1405,1408],{"href":1406,"rel":1407},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fform",[55],"Nuxt UI Form docs"," for the full set of options — alternative schema libraries (Valibot, Yup, Joi), a custom ",[57,1411,1412],{},"validate"," function, validation events, and nested forms.",[447,1415,1417],{"id":1416},"input-masking","Input masking",[47,1419,1420,1422,1423,1430],{},[57,1421,778],{},"'s model is a plain string, so any masking library that transforms a string works. A small watcher using ",[51,1424,1427],{"href":1425,"rel":1426},"https:\u002F\u002Fbeholdr.github.io\u002Fmaska\u002Fv3\u002F",[55],[57,1428,1429],{},"maska"," covers both typed and scanned values — the same code path runs whether the user enters digits manually or scans a barcode.",[137,1432,1433,1436],{},[1434,1435],"u-barcode-input-mask-demo",{},[143,1437,1438],{"v-slot:code":145},[147,1439,1441],{"className":149,"code":1440,"language":151,"meta":145,"style":145},"\u003Cscript setup lang=\"ts\">\nimport { ref, watch } from 'vue'\nimport { Mask } from 'maska'\n\nconst m = new Mask({ mask: '#-###-#####-####' })\nconst value = ref('')\n\nwatch(value, (v) => {\n  const next = m.masked(v)\n  if (next !== v) value.value = next\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUFormField label=\"GTIN-13\" help=\"Format: 1-234-56789-0123\">\n    \u003CUBarcodeInput v-model=\"value\" placeholder=\"0-000-00000-0000\" \u002F>\n  \u003C\u002FUFormField>\n\u003C\u002Ftemplate>\n",[57,1442,1443,1463,1486,1505,1509,1543,1559,1563,1586,1610,1640,1646,1654,1658,1666,1698,1727,1735],{"__ignoreMap":145},[155,1444,1445,1447,1449,1451,1453,1455,1457,1459,1461],{"class":157,"line":158},[155,1446,162],{"class":161},[155,1448,166],{"class":165},[155,1450,170],{"class":169},[155,1452,173],{"class":169},[155,1454,176],{"class":161},[155,1456,179],{"class":161},[155,1458,183],{"class":182},[155,1460,179],{"class":161},[155,1462,188],{"class":161},[155,1464,1465,1467,1469,1471,1473,1476,1478,1480,1482,1484],{"class":157,"line":191},[155,1466,195],{"class":194},[155,1468,198],{"class":161},[155,1470,202],{"class":201},[155,1472,326],{"class":161},[155,1474,1475],{"class":201}," watch",[155,1477,205],{"class":161},[155,1479,208],{"class":194},[155,1481,211],{"class":161},[155,1483,151],{"class":182},[155,1485,216],{"class":161},[155,1487,1488,1490,1492,1495,1497,1499,1501,1503],{"class":157,"line":219},[155,1489,195],{"class":194},[155,1491,198],{"class":161},[155,1493,1494],{"class":201}," Mask",[155,1496,205],{"class":161},[155,1498,208],{"class":194},[155,1500,211],{"class":161},[155,1502,1429],{"class":182},[155,1504,216],{"class":161},[155,1506,1507],{"class":157,"line":243},[155,1508,247],{"emptyLinePlaceholder":246},[155,1510,1511,1513,1516,1518,1521,1523,1525,1527,1530,1532,1534,1537,1539,1541],{"class":157,"line":250},[155,1512,253],{"class":169},[155,1514,1515],{"class":201}," m ",[155,1517,176],{"class":161},[155,1519,1520],{"class":161}," new",[155,1522,1494],{"class":261},[155,1524,264],{"class":201},[155,1526,1059],{"class":161},[155,1528,1529],{"class":165}," mask",[155,1531,293],{"class":161},[155,1533,211],{"class":161},[155,1535,1536],{"class":182},"#-###-#####-####",[155,1538,318],{"class":161},[155,1540,205],{"class":161},[155,1542,270],{"class":201},[155,1544,1545,1547,1549,1551,1553,1555,1557],{"class":157,"line":273},[155,1546,253],{"class":169},[155,1548,256],{"class":201},[155,1550,176],{"class":161},[155,1552,202],{"class":261},[155,1554,264],{"class":201},[155,1556,267],{"class":161},[155,1558,270],{"class":201},[155,1560,1561],{"class":157,"line":278},[155,1562,247],{"emptyLinePlaceholder":246},[155,1564,1565,1568,1571,1573,1576,1579,1581,1584],{"class":157,"line":305},[155,1566,1567],{"class":261},"watch",[155,1569,1570],{"class":201},"(value",[155,1572,326],{"class":161},[155,1574,1575],{"class":161}," (",[155,1577,1578],{"class":289},"v",[155,1580,299],{"class":161},[155,1582,1583],{"class":169}," =>",[155,1585,302],{"class":161},[155,1587,1588,1591,1594,1596,1599,1601,1604,1606,1608],{"class":157,"line":348},[155,1589,1590],{"class":169},"  const",[155,1592,1593],{"class":201}," next",[155,1595,1024],{"class":161},[155,1597,1598],{"class":201}," m",[155,1600,77],{"class":161},[155,1602,1603],{"class":261},"masked",[155,1605,264],{"class":165},[155,1607,1578],{"class":201},[155,1609,270],{"class":165},[155,1611,1612,1615,1617,1620,1623,1626,1629,1631,1633,1635,1637],{"class":157,"line":354},[155,1613,1614],{"class":194},"  if",[155,1616,1575],{"class":165},[155,1618,1619],{"class":201},"next",[155,1621,1622],{"class":161}," !==",[155,1624,1625],{"class":201}," v",[155,1627,1628],{"class":165},") ",[155,1630,397],{"class":201},[155,1632,77],{"class":161},[155,1634,397],{"class":201},[155,1636,1024],{"class":161},[155,1638,1639],{"class":201}," next\n",[155,1641,1642,1644],{"class":157,"line":364},[155,1643,1007],{"class":161},[155,1645,270],{"class":201},[155,1647,1648,1650,1652],{"class":157,"line":369},[155,1649,357],{"class":161},[155,1651,166],{"class":165},[155,1653,188],{"class":161},[155,1655,1656],{"class":157,"line":378},[155,1657,247],{"emptyLinePlaceholder":246},[155,1659,1660,1662,1664],{"class":157,"line":387},[155,1661,162],{"class":161},[155,1663,143],{"class":165},[155,1665,188],{"class":161},[155,1667,1668,1670,1672,1675,1677,1679,1682,1684,1687,1689,1691,1694,1696],{"class":157,"line":403},[155,1669,381],{"class":161},[155,1671,789],{"class":165},[155,1673,1674],{"class":169}," label",[155,1676,176],{"class":161},[155,1678,179],{"class":161},[155,1680,1681],{"class":182},"GTIN-13",[155,1683,179],{"class":161},[155,1685,1686],{"class":169}," help",[155,1688,176],{"class":161},[155,1690,179],{"class":161},[155,1692,1693],{"class":182},"Format: 1-234-56789-0123",[155,1695,179],{"class":161},[155,1697,188],{"class":161},[155,1699,1700,1702,1704,1706,1708,1710,1712,1714,1716,1718,1720,1723,1725],{"class":157,"line":418},[155,1701,1242],{"class":161},[155,1703,778],{"class":165},[155,1705,1313],{"class":169},[155,1707,176],{"class":161},[155,1709,179],{"class":161},[155,1711,397],{"class":182},[155,1713,179],{"class":161},[155,1715,1325],{"class":169},[155,1717,176],{"class":161},[155,1719,179],{"class":161},[155,1721,1722],{"class":182},"0-000-00000-0000",[155,1724,179],{"class":161},[155,1726,1337],{"class":161},[155,1728,1729,1731,1733],{"class":157,"line":433},[155,1730,1387],{"class":161},[155,1732,789],{"class":165},[155,1734,188],{"class":161},[155,1736,1737,1739,1741],{"class":157,"line":439},[155,1738,357],{"class":161},[155,1740,143],{"class":165},[155,1742,188],{"class":161},[47,1744,1745,1746,1751,1752,1755,1756,1758,1759,1762,1763,1765],{},"For cursor-aware masking on a plain text field, see the ",[51,1747,1750],{"href":1748,"rel":1749},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Finput#with-mask",[55],"Nuxt UI mask example"," which applies the ",[57,1753,1754],{},"v-maska"," directive to ",[57,1757,68],{}," directly. The directive only attaches to native ",[57,1760,1761],{},"\u003Cinput>"," elements, so it doesn't propagate to the inner input through ",[57,1764,778],{},"'s wrapper — use the watcher pattern above when you need masking alongside the scan button.",[447,1767,1769],{"id":1768},"filtering-scans","Filtering scans",[47,1771,1772,1773,1775],{},"Pass an ",[57,1774,111],{}," predicate to ignore detections that don't match (wrong format, wrong prefix, etc.). Rejected barcodes are still rendered in the modal overlay — just in red — so users get immediate feedback about why a code isn't being captured.",[147,1777,1779],{"className":149,"code":1778,"language":151,"meta":145,"style":145},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { DetectedBarcode } from '@orbisk\u002Fvue-use-barcode-detection'\n\nconst value = ref('')\nconst onlyQr = (b: DetectedBarcode) => b.format === 'qr_code'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUFormField label=\"Ticket QR\" name=\"ticket\" help=\"Scan the QR code on your ticket.\">\n    \u003CUBarcodeInput v-model=\"value\" :accept=\"onlyQr\" placeholder=\"QR-…\" \u002F>\n  \u003C\u002FUFormField>\n\u003C\u002Ftemplate>\n",[57,1780,1781,1801,1819,1839,1843,1859,1899,1907,1911,1919,1961,2002,2010],{"__ignoreMap":145},[155,1782,1783,1785,1787,1789,1791,1793,1795,1797,1799],{"class":157,"line":158},[155,1784,162],{"class":161},[155,1786,166],{"class":165},[155,1788,170],{"class":169},[155,1790,173],{"class":169},[155,1792,176],{"class":161},[155,1794,179],{"class":161},[155,1796,183],{"class":182},[155,1798,179],{"class":161},[155,1800,188],{"class":161},[155,1802,1803,1805,1807,1809,1811,1813,1815,1817],{"class":157,"line":191},[155,1804,195],{"class":194},[155,1806,198],{"class":161},[155,1808,202],{"class":201},[155,1810,205],{"class":161},[155,1812,208],{"class":194},[155,1814,211],{"class":161},[155,1816,151],{"class":182},[155,1818,216],{"class":161},[155,1820,1821,1823,1825,1827,1829,1831,1833,1835,1837],{"class":157,"line":219},[155,1822,195],{"class":194},[155,1824,224],{"class":194},[155,1826,198],{"class":161},[155,1828,229],{"class":201},[155,1830,205],{"class":161},[155,1832,208],{"class":194},[155,1834,211],{"class":161},[155,1836,238],{"class":182},[155,1838,216],{"class":161},[155,1840,1841],{"class":157,"line":243},[155,1842,247],{"emptyLinePlaceholder":246},[155,1844,1845,1847,1849,1851,1853,1855,1857],{"class":157,"line":250},[155,1846,253],{"class":169},[155,1848,256],{"class":201},[155,1850,176],{"class":161},[155,1852,202],{"class":261},[155,1854,264],{"class":201},[155,1856,267],{"class":161},[155,1858,270],{"class":201},[155,1860,1861,1863,1866,1868,1870,1873,1875,1877,1879,1881,1884,1886,1889,1892,1894,1897],{"class":157,"line":273},[155,1862,253],{"class":169},[155,1864,1865],{"class":201}," onlyQr ",[155,1867,176],{"class":161},[155,1869,1575],{"class":161},[155,1871,1872],{"class":289},"b",[155,1874,293],{"class":161},[155,1876,229],{"class":296},[155,1878,299],{"class":161},[155,1880,1583],{"class":169},[155,1882,1883],{"class":201}," b",[155,1885,77],{"class":161},[155,1887,1888],{"class":201},"format ",[155,1890,1891],{"class":161},"===",[155,1893,211],{"class":161},[155,1895,1896],{"class":182},"qr_code",[155,1898,216],{"class":161},[155,1900,1901,1903,1905],{"class":157,"line":278},[155,1902,357],{"class":161},[155,1904,166],{"class":165},[155,1906,188],{"class":161},[155,1908,1909],{"class":157,"line":305},[155,1910,247],{"emptyLinePlaceholder":246},[155,1912,1913,1915,1917],{"class":157,"line":348},[155,1914,162],{"class":161},[155,1916,143],{"class":165},[155,1918,188],{"class":161},[155,1920,1921,1923,1925,1927,1929,1931,1934,1936,1939,1941,1943,1946,1948,1950,1952,1954,1957,1959],{"class":157,"line":354},[155,1922,381],{"class":161},[155,1924,789],{"class":165},[155,1926,1674],{"class":169},[155,1928,176],{"class":161},[155,1930,179],{"class":161},[155,1932,1933],{"class":182},"Ticket QR",[155,1935,179],{"class":161},[155,1937,1938],{"class":169}," name",[155,1940,176],{"class":161},[155,1942,179],{"class":161},[155,1944,1945],{"class":182},"ticket",[155,1947,179],{"class":161},[155,1949,1686],{"class":169},[155,1951,176],{"class":161},[155,1953,179],{"class":161},[155,1955,1956],{"class":182},"Scan the QR code on your ticket.",[155,1958,179],{"class":161},[155,1960,188],{"class":161},[155,1962,1963,1965,1967,1969,1971,1973,1975,1977,1980,1982,1984,1987,1989,1991,1993,1995,1998,2000],{"class":157,"line":364},[155,1964,1242],{"class":161},[155,1966,778],{"class":165},[155,1968,1313],{"class":169},[155,1970,176],{"class":161},[155,1972,179],{"class":161},[155,1974,397],{"class":182},[155,1976,179],{"class":161},[155,1978,1979],{"class":169}," :accept",[155,1981,176],{"class":161},[155,1983,179],{"class":161},[155,1985,1986],{"class":182},"onlyQr",[155,1988,179],{"class":161},[155,1990,1325],{"class":169},[155,1992,176],{"class":161},[155,1994,179],{"class":161},[155,1996,1997],{"class":182},"QR-…",[155,1999,179],{"class":161},[155,2001,1337],{"class":161},[155,2003,2004,2006,2008],{"class":157,"line":369},[155,2005,1387],{"class":161},[155,2007,789],{"class":165},[155,2009,188],{"class":161},[155,2011,2012,2014,2016],{"class":157,"line":378},[155,2013,357],{"class":161},[155,2015,143],{"class":165},[155,2017,188],{"class":161},[447,2019,2021],{"id":2020},"transforming-the-scanned-value","Transforming the scanned value",[47,2023,2024,2025,2027,2028,2030,2031,2034],{},"When the QR encodes structured data (JSON, URL, etc.), use ",[57,2026,571],{}," to bind only the field you care about. The full ",[57,2029,734],{}," is still emitted via ",[57,2032,2033],{},"@scan"," if you need the rest.",[147,2036,2038],{"className":149,"code":2037,"language":151,"meta":145,"style":145},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { DetectedBarcode } from '@orbisk\u002Fvue-use-barcode-detection'\n\nconst ticketId = ref('')\n\n\u002F\u002F Scanned QR contains e.g. {\"id\": \"T-1234\", \"name\": \"Alice\"} — bind only the id.\nfunction pickId(b: DetectedBarcode): string | undefined {\n  try {\n    return JSON.parse(b.rawValue).id\n  } catch {\n    return undefined \u002F\u002F keep scanning until we get something we can parse\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUBarcodeInput v-model=\"ticketId\" :transform=\"pickId\" placeholder=\"T-…\" \u002F>\n\u003C\u002Ftemplate>\n",[57,2039,2040,2060,2078,2098,2102,2119,2123,2129,2157,2164,2192,2202,2211,2216,2220,2228,2232,2240,2282],{"__ignoreMap":145},[155,2041,2042,2044,2046,2048,2050,2052,2054,2056,2058],{"class":157,"line":158},[155,2043,162],{"class":161},[155,2045,166],{"class":165},[155,2047,170],{"class":169},[155,2049,173],{"class":169},[155,2051,176],{"class":161},[155,2053,179],{"class":161},[155,2055,183],{"class":182},[155,2057,179],{"class":161},[155,2059,188],{"class":161},[155,2061,2062,2064,2066,2068,2070,2072,2074,2076],{"class":157,"line":191},[155,2063,195],{"class":194},[155,2065,198],{"class":161},[155,2067,202],{"class":201},[155,2069,205],{"class":161},[155,2071,208],{"class":194},[155,2073,211],{"class":161},[155,2075,151],{"class":182},[155,2077,216],{"class":161},[155,2079,2080,2082,2084,2086,2088,2090,2092,2094,2096],{"class":157,"line":219},[155,2081,195],{"class":194},[155,2083,224],{"class":194},[155,2085,198],{"class":161},[155,2087,229],{"class":201},[155,2089,205],{"class":161},[155,2091,208],{"class":194},[155,2093,211],{"class":161},[155,2095,238],{"class":182},[155,2097,216],{"class":161},[155,2099,2100],{"class":157,"line":243},[155,2101,247],{"emptyLinePlaceholder":246},[155,2103,2104,2106,2109,2111,2113,2115,2117],{"class":157,"line":250},[155,2105,253],{"class":169},[155,2107,2108],{"class":201}," ticketId ",[155,2110,176],{"class":161},[155,2112,202],{"class":261},[155,2114,264],{"class":201},[155,2116,267],{"class":161},[155,2118,270],{"class":201},[155,2120,2121],{"class":157,"line":273},[155,2122,247],{"emptyLinePlaceholder":246},[155,2124,2125],{"class":157,"line":278},[155,2126,2128],{"class":2127},"sHwdD","\u002F\u002F Scanned QR contains e.g. {\"id\": \"T-1234\", \"name\": \"Alice\"} — bind only the id.\n",[155,2130,2131,2133,2136,2138,2140,2142,2144,2147,2150,2152,2155],{"class":157,"line":305},[155,2132,281],{"class":169},[155,2134,2135],{"class":261}," pickId",[155,2137,264],{"class":161},[155,2139,1872],{"class":289},[155,2141,293],{"class":161},[155,2143,229],{"class":296},[155,2145,2146],{"class":161},"):",[155,2148,2149],{"class":296}," string",[155,2151,1090],{"class":161},[155,2153,2154],{"class":296}," undefined",[155,2156,302],{"class":161},[155,2158,2159,2162],{"class":157,"line":348},[155,2160,2161],{"class":194},"  try",[155,2163,302],{"class":161},[155,2165,2166,2169,2172,2174,2177,2179,2181,2183,2185,2187,2189],{"class":157,"line":354},[155,2167,2168],{"class":194},"    return",[155,2170,2171],{"class":201}," JSON",[155,2173,77],{"class":161},[155,2175,2176],{"class":261},"parse",[155,2178,264],{"class":165},[155,2180,1872],{"class":201},[155,2182,77],{"class":161},[155,2184,343],{"class":201},[155,2186,299],{"class":165},[155,2188,77],{"class":161},[155,2190,2191],{"class":201},"id\n",[155,2193,2194,2197,2200],{"class":157,"line":364},[155,2195,2196],{"class":161},"  }",[155,2198,2199],{"class":194}," catch",[155,2201,302],{"class":161},[155,2203,2204,2206,2208],{"class":157,"line":369},[155,2205,2168],{"class":194},[155,2207,2154],{"class":161},[155,2209,2210],{"class":2127}," \u002F\u002F keep scanning until we get something we can parse\n",[155,2212,2213],{"class":157,"line":378},[155,2214,2215],{"class":161},"  }\n",[155,2217,2218],{"class":157,"line":387},[155,2219,351],{"class":161},[155,2221,2222,2224,2226],{"class":157,"line":403},[155,2223,357],{"class":161},[155,2225,166],{"class":165},[155,2227,188],{"class":161},[155,2229,2230],{"class":157,"line":418},[155,2231,247],{"emptyLinePlaceholder":246},[155,2233,2234,2236,2238],{"class":157,"line":433},[155,2235,162],{"class":161},[155,2237,143],{"class":165},[155,2239,188],{"class":161},[155,2241,2242,2244,2246,2248,2250,2252,2255,2257,2260,2262,2264,2267,2269,2271,2273,2275,2278,2280],{"class":157,"line":439},[155,2243,381],{"class":161},[155,2245,778],{"class":165},[155,2247,1313],{"class":169},[155,2249,176],{"class":161},[155,2251,179],{"class":161},[155,2253,2254],{"class":182},"ticketId",[155,2256,179],{"class":161},[155,2258,2259],{"class":169}," :transform",[155,2261,176],{"class":161},[155,2263,179],{"class":161},[155,2265,2266],{"class":182},"pickId",[155,2268,179],{"class":161},[155,2270,1325],{"class":169},[155,2272,176],{"class":161},[155,2274,179],{"class":161},[155,2276,2277],{"class":182},"T-…",[155,2279,179],{"class":161},[155,2281,1337],{"class":161},[155,2283,2284,2286,2288],{"class":157,"line":1134},[155,2285,357],{"class":161},[155,2287,143],{"class":165},[155,2289,188],{"class":161},[47,2291,2292,2293,2295,2296,2298,2299,2301,2302,2305],{},"Returning ",[57,2294,587],{}," or ",[57,2297,558],{}," from ",[57,2300,571],{}," skips the model write ",[513,2303,2304],{},"and"," keeps the modal open, so you can keep scanning until you get a payload you can use.",[447,2307,2309],{"id":2308},"customizing-the-overlay","Customizing the overlay",[47,2311,2312,2313,2315,2316,2318],{},"The ",[57,2314,636],{}," prop is forwarded straight to ",[57,2317,107],{},", so anything that component accepts — colors, stroke width, label function — can be passed through as a single object.",[147,2320,2322],{"className":149,"code":2321,"language":151,"meta":145,"style":145},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { BarcodeDetectorOverlayConfig } from '@orbisk\u002Fvue-use-barcode-detection'\n\nconst value = ref('')\n\nconst overlay: BarcodeDetectorOverlayConfig = {\n  \u002F\u002F Show the decoded value over each accepted polygon, \"rejected\" over filtered ones.\n  label: (b, accepted) => (accepted ? b.rawValue : 'rejected'),\n  labelFontSize: 32,\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUBarcodeInput v-model=\"value\" :overlay=\"overlay\" \u002F>\n\u003C\u002Ftemplate>\n",[57,2323,2324,2344,2362,2383,2387,2403,2407,2422,2427,2473,2485,2489,2497,2501,2509,2538],{"__ignoreMap":145},[155,2325,2326,2328,2330,2332,2334,2336,2338,2340,2342],{"class":157,"line":158},[155,2327,162],{"class":161},[155,2329,166],{"class":165},[155,2331,170],{"class":169},[155,2333,173],{"class":169},[155,2335,176],{"class":161},[155,2337,179],{"class":161},[155,2339,183],{"class":182},[155,2341,179],{"class":161},[155,2343,188],{"class":161},[155,2345,2346,2348,2350,2352,2354,2356,2358,2360],{"class":157,"line":191},[155,2347,195],{"class":194},[155,2349,198],{"class":161},[155,2351,202],{"class":201},[155,2353,205],{"class":161},[155,2355,208],{"class":194},[155,2357,211],{"class":161},[155,2359,151],{"class":182},[155,2361,216],{"class":161},[155,2363,2364,2366,2368,2370,2373,2375,2377,2379,2381],{"class":157,"line":219},[155,2365,195],{"class":194},[155,2367,224],{"class":194},[155,2369,198],{"class":161},[155,2371,2372],{"class":201}," BarcodeDetectorOverlayConfig",[155,2374,205],{"class":161},[155,2376,208],{"class":194},[155,2378,211],{"class":161},[155,2380,238],{"class":182},[155,2382,216],{"class":161},[155,2384,2385],{"class":157,"line":243},[155,2386,247],{"emptyLinePlaceholder":246},[155,2388,2389,2391,2393,2395,2397,2399,2401],{"class":157,"line":250},[155,2390,253],{"class":169},[155,2392,256],{"class":201},[155,2394,176],{"class":161},[155,2396,202],{"class":261},[155,2398,264],{"class":201},[155,2400,267],{"class":161},[155,2402,270],{"class":201},[155,2404,2405],{"class":157,"line":273},[155,2406,247],{"emptyLinePlaceholder":246},[155,2408,2409,2411,2414,2416,2418,2420],{"class":157,"line":278},[155,2410,253],{"class":169},[155,2412,2413],{"class":201}," overlay",[155,2415,293],{"class":161},[155,2417,2372],{"class":296},[155,2419,1024],{"class":161},[155,2421,302],{"class":161},[155,2423,2424],{"class":157,"line":305},[155,2425,2426],{"class":2127},"  \u002F\u002F Show the decoded value over each accepted polygon, \"rejected\" over filtered ones.\n",[155,2428,2429,2432,2434,2436,2438,2440,2443,2445,2447,2450,2453,2455,2457,2460,2462,2464,2467,2469,2471],{"class":157,"line":348},[155,2430,2431],{"class":261},"  label",[155,2433,293],{"class":161},[155,2435,1575],{"class":161},[155,2437,1872],{"class":289},[155,2439,326],{"class":161},[155,2441,2442],{"class":289}," accepted",[155,2444,299],{"class":161},[155,2446,1583],{"class":169},[155,2448,2449],{"class":201}," (accepted ",[155,2451,2452],{"class":161},"?",[155,2454,1883],{"class":201},[155,2456,77],{"class":161},[155,2458,2459],{"class":201},"rawValue ",[155,2461,293],{"class":161},[155,2463,211],{"class":161},[155,2465,2466],{"class":182},"rejected",[155,2468,318],{"class":161},[155,2470,299],{"class":201},[155,2472,1002],{"class":161},[155,2474,2475,2478,2480,2483],{"class":157,"line":354},[155,2476,2477],{"class":165},"  labelFontSize",[155,2479,293],{"class":161},[155,2481,2482],{"class":951}," 32",[155,2484,1002],{"class":161},[155,2486,2487],{"class":157,"line":364},[155,2488,351],{"class":161},[155,2490,2491,2493,2495],{"class":157,"line":369},[155,2492,357],{"class":161},[155,2494,166],{"class":165},[155,2496,188],{"class":161},[155,2498,2499],{"class":157,"line":378},[155,2500,247],{"emptyLinePlaceholder":246},[155,2502,2503,2505,2507],{"class":157,"line":387},[155,2504,162],{"class":161},[155,2506,143],{"class":165},[155,2508,188],{"class":161},[155,2510,2511,2513,2515,2517,2519,2521,2523,2525,2528,2530,2532,2534,2536],{"class":157,"line":403},[155,2512,381],{"class":161},[155,2514,778],{"class":165},[155,2516,1313],{"class":169},[155,2518,176],{"class":161},[155,2520,179],{"class":161},[155,2522,397],{"class":182},[155,2524,179],{"class":161},[155,2526,2527],{"class":169}," :overlay",[155,2529,176],{"class":161},[155,2531,179],{"class":161},[155,2533,636],{"class":182},[155,2535,179],{"class":161},[155,2537,1337],{"class":161},[155,2539,2540,2542,2544],{"class":157,"line":418},[155,2541,357],{"class":161},[155,2543,143],{"class":165},[155,2545,188],{"class":161},[47,2547,1403,2548,2555],{},[51,2549,2551,2554],{"href":2550},"\u002Ffunctions\u002Fuse-barcode-detector#barcodedetectoroverlay",[57,2552,2553],{},"BarcodeDetectorOverlay"," reference"," for the full list of options.",[447,2557,2559],{"id":2558},"labeled-scan-button","Labeled scan button",[47,2561,2562,2563,2566,2567,2569,2570,2572,2573,2576],{},"The scan button defaults to icon-only — pass content via the ",[57,2564,2565],{},"#button-default"," slot to add a label. Because the button lives inside ",[57,2568,68],{},"'s ",[57,2571,93],{}," slot, widen the input's right padding (",[57,2574,2575],{},":ui=\"{ base: 'pe-24' }\"",") so the labeled button doesn't crowd the typed value.",[137,2578,2579,2582],{},[2580,2581],"u-barcode-input-label-demo",{},[143,2583,2584],{"v-slot:code":145},[147,2585,2587],{"className":149,"code":2586,"language":151,"meta":145,"style":145},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst value = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUBarcodeInput\n    v-model=\"value\"\n    placeholder=\"Enter or scan a code\"\n    :ui=\"{ base: 'pe-24' }\"\n  >\n    \u003Ctemplate #button-default>Scan me\u003C\u002Ftemplate>\n  \u003C\u002FUBarcodeInput>\n\u003C\u002Ftemplate>\n",[57,2588,2589,2609,2627,2631,2647,2655,2659,2667,2673,2685,2698,2712,2717,2740,2748],{"__ignoreMap":145},[155,2590,2591,2593,2595,2597,2599,2601,2603,2605,2607],{"class":157,"line":158},[155,2592,162],{"class":161},[155,2594,166],{"class":165},[155,2596,170],{"class":169},[155,2598,173],{"class":169},[155,2600,176],{"class":161},[155,2602,179],{"class":161},[155,2604,183],{"class":182},[155,2606,179],{"class":161},[155,2608,188],{"class":161},[155,2610,2611,2613,2615,2617,2619,2621,2623,2625],{"class":157,"line":191},[155,2612,195],{"class":194},[155,2614,198],{"class":161},[155,2616,202],{"class":201},[155,2618,205],{"class":161},[155,2620,208],{"class":194},[155,2622,211],{"class":161},[155,2624,151],{"class":182},[155,2626,216],{"class":161},[155,2628,2629],{"class":157,"line":219},[155,2630,247],{"emptyLinePlaceholder":246},[155,2632,2633,2635,2637,2639,2641,2643,2645],{"class":157,"line":243},[155,2634,253],{"class":169},[155,2636,256],{"class":201},[155,2638,176],{"class":161},[155,2640,202],{"class":261},[155,2642,264],{"class":201},[155,2644,267],{"class":161},[155,2646,270],{"class":201},[155,2648,2649,2651,2653],{"class":157,"line":250},[155,2650,357],{"class":161},[155,2652,166],{"class":165},[155,2654,188],{"class":161},[155,2656,2657],{"class":157,"line":273},[155,2658,247],{"emptyLinePlaceholder":246},[155,2660,2661,2663,2665],{"class":157,"line":278},[155,2662,162],{"class":161},[155,2664,143],{"class":165},[155,2666,188],{"class":161},[155,2668,2669,2671],{"class":157,"line":305},[155,2670,381],{"class":161},[155,2672,384],{"class":165},[155,2674,2675,2677,2679,2681,2683],{"class":157,"line":348},[155,2676,390],{"class":169},[155,2678,176],{"class":161},[155,2680,179],{"class":161},[155,2682,397],{"class":182},[155,2684,400],{"class":161},[155,2686,2687,2689,2691,2693,2696],{"class":157,"line":354},[155,2688,406],{"class":169},[155,2690,176],{"class":161},[155,2692,179],{"class":161},[155,2694,2695],{"class":182},"Enter or scan a code",[155,2697,400],{"class":161},[155,2699,2700,2703,2705,2707,2710],{"class":157,"line":364},[155,2701,2702],{"class":169},"    :ui",[155,2704,176],{"class":161},[155,2706,179],{"class":161},[155,2708,2709],{"class":182},"{ base: 'pe-24' }",[155,2711,400],{"class":161},[155,2713,2714],{"class":157,"line":369},[155,2715,2716],{"class":161},"  >\n",[155,2718,2719,2721,2723,2726,2729,2731,2734,2736,2738],{"class":157,"line":378},[155,2720,1242],{"class":161},[155,2722,143],{"class":165},[155,2724,2725],{"class":161}," #",[155,2727,2728],{"class":169},"button-default",[155,2730,1096],{"class":161},[155,2732,2733],{"class":201},"Scan me",[155,2735,357],{"class":161},[155,2737,143],{"class":165},[155,2739,188],{"class":161},[155,2741,2742,2744,2746],{"class":157,"line":387},[155,2743,1387],{"class":161},[155,2745,778],{"class":165},[155,2747,188],{"class":161},[155,2749,2750,2752,2754],{"class":157,"line":403},[155,2751,357],{"class":161},[155,2753,143],{"class":165},[155,2755,188],{"class":161},[447,2757,2759],{"id":2758},"ssr","SSR",[47,2761,2762,2763,2766,2767,2770],{},"The scan button is gated behind ",[57,2764,2765],{},"useMounted"," and ",[57,2768,2769],{},"useSupported",", so the server and the client's first render emit identical markup. The button appears after hydration if the browser supports the Barcode Detection API.",[2772,2773,2774],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":145,"searchDepth":191,"depth":191,"links":2776},[2777],{"id":81,"depth":191,"text":84,"children":2778},[2779,2780,2781,2782,2783,2784,2785,2786,2787],{"id":449,"depth":219,"text":450},{"id":691,"depth":219,"text":692},{"id":772,"depth":219,"text":773},{"id":1416,"depth":219,"text":1417},{"id":1768,"depth":219,"text":1769},{"id":2020,"depth":219,"text":2021},{"id":2308,"depth":219,"text":2309},{"id":2558,"depth":219,"text":2559},{"id":2758,"depth":219,"text":2759},"UBarcodeInput — a UInput paired with a live-camera scan button.","md",null,{},{"icon":27},{"title":29,"description":2788},"6FqTGEcLIeivFEZKm3KV96eQ04mdngTiGgD_-PVFdfQ",[2796,2798],{"title":26,"path":22,"stem":23,"description":2797,"icon":27,"children":-1},"Auto-imports for the composable, scanner component, and overlay.",{"title":33,"path":34,"stem":35,"description":2799,"icon":36,"children":-1},"Browser support for the Barcode Detection API and how to ship a polyfill where it's missing.",1778249705076]