[{"data":1,"prerenderedAt":474},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fnumber-input":102,"\u002Fcomponents\u002Fnumber-input-surround":358,"nuxt-component-meta-ZNumberInput":363},[4,19,92],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":18},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,14],{"title":11,"path":12,"stem":13},"Getting started","\u002Fguide\u002Fgetting-started","1.guide\u002F1.getting-started",{"title":15,"path":16,"stem":17},"Theming","\u002Fguide\u002Ftheming","1.guide\u002F2.theming",false,{"title":20,"icon":21,"path":22,"stem":23,"children":24},"Components","i-lucide-shapes","\u002Fcomponents","2.components",[25,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88],{"title":26,"path":22,"stem":27},"Overview","2.components\u002Findex",{"title":29,"path":30,"stem":31},"Card","\u002Fcomponents\u002Fcard","2.components\u002Fcard",{"title":33,"path":34,"stem":35},"Code block","\u002Fcomponents\u002Fcode-block","2.components\u002Fcode-block",{"title":37,"path":38,"stem":39},"Date field","\u002Fcomponents\u002Fdate-field","2.components\u002Fdate-field",{"title":41,"path":42,"stem":43},"Drawer","\u002Fcomponents\u002Fdrawer","2.components\u002Fdrawer",{"title":45,"path":46,"stem":47},"Ecosystem mark","\u002Fcomponents\u002Fecosystem-mark","2.components\u002Fecosystem-mark",{"title":49,"path":50,"stem":51},"Identifier","\u002Fcomponents\u002Fidentifier","2.components\u002Fidentifier",{"title":53,"path":54,"stem":55},"Kicker","\u002Fcomponents\u002Fkicker","2.components\u002Fkicker",{"title":57,"path":58,"stem":59},"Modal","\u002Fcomponents\u002Fmodal","2.components\u002Fmodal",{"title":61,"path":62,"stem":63},"Number input","\u002Fcomponents\u002Fnumber-input","2.components\u002Fnumber-input",{"title":65,"path":66,"stem":67},"Quota meter","\u002Fcomponents\u002Fquota-meter","2.components\u002Fquota-meter",{"title":69,"path":70,"stem":71},"Repeating list","\u002Fcomponents\u002Frepeating-list","2.components\u002Frepeating-list",{"title":73,"path":74,"stem":75},"Slideover","\u002Fcomponents\u002Fslideover","2.components\u002Fslideover",{"title":77,"path":78,"stem":79},"Slots","\u002Fcomponents\u002Fslots","2.components\u002Fslots",{"title":81,"path":82,"stem":83},"Status","\u002Fcomponents\u002Fstatus","2.components\u002Fstatus",{"title":85,"path":86,"stem":87},"Theme toggle","\u002Fcomponents\u002Ftheme-toggle","2.components\u002Ftheme-toggle",{"title":89,"path":90,"stem":91},"Token reveal","\u002Fcomponents\u002Ftoken-reveal","2.components\u002Ftoken-reveal",{"title":93,"icon":94,"path":95,"stem":96,"children":97,"page":18},"Utilities","i-lucide-wrench","\u002Futilities","3.utilities",[98],{"title":99,"path":100,"stem":101},"Select none","\u002Futilities\u002Fselect-none","3.utilities\u002Fselect-none",{"id":103,"title":61,"body":104,"component":113,"description":351,"extension":352,"meta":353,"navigation":354,"path":62,"preview":183,"seo":355,"stem":63,"wraps":356,"__hash__":357},"docs\u002F2.components\u002Fnumber-input.md",{"type":105,"value":106,"toc":340},"minimark",[107,148,153,180,184,188,210,213,217,241,244,248,265,268,272,294,305,308,312,337],[108,109,110,114,115,118,119,122,123,122,126,122,129,132,133,136,137,140,141,144,145,147],"p",{},[111,112,113],"code",{},"ZNumberInput"," is one input for every figure in a form: money, percent, count and hours. It is Nuxt UI's ",[111,116,117],{},"UInput",", so ",[111,120,121],{},"size",", ",[111,124,125],{},"color",[111,127,128],{},"disabled",[111,130,131],{},"readonly"," and ",[111,134,135],{},"ui"," work as they do there. It formats the value as you type. The unit marks sit in fixed slots, so a column of values lines up. The chevrons and the ArrowUp\u002FArrowDown keys move the value by ",[111,138,139],{},"step"," from whatever is there, never snapping it to a multiple. The arithmetic is decimal, so 0.1 and 0.2 make 0.3, and the model comes back as the type you bound: a number stays a number, a string a string, a ",[111,142,143],{},"Decimal"," a ",[111,146,143],{},".",[149,150,152],"h2",{"id":151},"units","Units",[108,154,155,158,159,162,163,132,166,169,170,122,173,176,177,147],{},[111,156,157],{},"unit"," is ",[111,160,161],{},"money"," (the currency symbol on the left, from ",[111,164,165],{},"currency",[111,167,168],{},"locale","), ",[111,171,172],{},"percent",[111,174,175],{},"count"," or ",[111,178,179],{},"hours",[181,182],"component-example",{"name":183},"NumberInputUnits",[149,185,187],{"id":186},"typing-and-locales","Typing and locales",[108,189,190,191,194,195,198,199,201,202,205,206,209],{},"The value is grouped as you type (",[111,192,193],{},"1,234,567","), and the caret stays on its digit as separators come and go. Backspace or Delete over a separator takes the digit beyond it. A key that adds nothing, such as a letter or a second decimal mark, is refused, and a pasted ",[111,196,197],{},"$1,234.50"," keeps only its figure. ",[111,200,168],{}," sets the marks typed and shown: in ",[111,203,204],{},"de"," the full stop groups and the comma is the decimal mark, so the field reads and writes ",[111,207,208],{},"1.234,56",". The currency symbol stays on the left in every locale, with the other marks.",[181,211],{"name":212},"NumberInputTyping",[149,214,216],{"id":215},"decimal-places-and-range","Decimal places and range",[108,218,219,222,223,226,227,132,230,233,234,237,238,240],{},[111,220,221],{},"min-fraction-digits"," is written on commit (blur, Enter or Tab) and ",[111,224,225],{},"max-fraction-digits"," is the most that can be typed and what a commit rounds to, half away from zero. Money defaults to two places; the other units keep what is typed. A commit also keeps the value within ",[111,228,229],{},"min",[111,231,232],{},"max",": 12 in a field that stops at 10 becomes 10. Until then the field is ",[111,235,236],{},":invalid",", so a form won't submit it. A minus can't be typed where ",[111,239,229],{}," is 0 or more.",[181,242],{"name":243},"NumberInputPlaces",[149,245,247],{"id":246},"marks-spinning-and-selection","Marks, spinning and selection",[108,249,250,132,253,256,257,260,261,264],{},[111,251,252],{},"prefix",[111,254,255],{},"suffix"," add text beside the unit marks, outside the value, so typing never meets them. ",[111,258,259],{},":spin=\"false\""," removes the chevrons and makes ArrowUp and ArrowDown do nothing, for a figure that isn't a quantity. ",[111,262,263],{},"highlight-on-focus"," selects the whole value when the field is focused, by click or by key.",[181,266],{"name":267},"NumberInputMarks",[149,269,271],{"id":270},"calc","Calc",[108,273,274,275,277,278,281,282,285,286,289,290,293],{},"With ",[111,276,270],{},", the field takes ",[111,279,280],{},"+ - * \u002F"," with the usual precedence, worked out in decimal arithmetic by a small parser (never ",[111,283,284],{},"eval","). Each number is grouped as you type, and the result shows under the field while it has the focus, without moving anything. Enter, Tab or blur puts the result in, rounded to the field's places and kept in range. Input that isn't a whole expression (",[111,287,288],{},"678+",") or divides by zero gives no value. The value is selected on focus, and an operator typed over the selection is added at the end, so ",[111,291,292],{},"+50"," adds to what is there; a minus over everything starts a negative number instead.",[108,295,296,297,300,301,304],{},"A grid cell editor that commits itself sets ",[111,298,299],{},":commit-on-blur=\"false\""," and calls the exposed ",[111,302,303],{},"evaluate()",", which works the expression out, hands the value back, and returns it.",[181,306],{"name":307},"NumberInputCalc",[149,309,311],{"id":310},"decimal-models","Decimal models",[108,313,314,315,317,318,321,322,324,325,328,329,332,333,336],{},"A ",[111,316,143],{}," from decimal.js, such as a Postgres ",[111,319,320],{},"numeric"," column from a database client that returns decimal.js values, is handed back as a ",[111,323,143],{}," of the caller's own class: typing, nudging, rounding and calc all do it, and no value passes through a float. A model that starts ",[111,326,327],{},"null"," has no class to take, so ",[111,330,331],{},"model-type=\"decimal\""," says what to hand back. Keep the product's decimal.js range compatible with the layer's (",[111,334,335],{},"^10.6.0","), so one copy is installed.",[181,338],{"name":339},"NumberInputDecimal",{"title":341,"searchDepth":342,"depth":342,"links":343},"",3,[344,346,347,348,349,350],{"id":151,"depth":345,"text":152},2,{"id":186,"depth":345,"text":187},{"id":215,"depth":345,"text":216},{"id":246,"depth":345,"text":247},{"id":270,"depth":345,"text":271},{"id":310,"depth":345,"text":311},"One number input for money, percent, count and hours, formatting as you type, with unit marks that line up, steps that never snap, and a calculator mode.","md",{},true,{"title":61,"description":351},null,"6PKUwle_UVS7h0BeFbFYMxqO_2EiXgn2gfHmRWhyuW4",[359,361],{"title":57,"path":58,"stem":59,"description":360,"children":-1},"Nuxt UI's UModal with a colored top edge.",{"title":65,"path":66,"stem":67,"description":362,"children":-1},"Usage against a limit, amber from the warning mark, red and hatched over the limit.",{"mode":364,"prefetch":18,"preload":18,"filePath":365,"declarationPath":366,"pascalName":113,"kebabName":367,"chunkName":368,"priority":369,"_scanned":354,"meta":370},"all","..\u002F..\u002Fpackages\u002Fnuxt\u002Fcomponents\u002FNumberInput.vue","\u002Fopt\u002Fbuild\u002Frepo\u002Fpackages\u002Fnuxt\u002Fcomponents\u002FNumberInput.vue","z-number-input","components\u002Fz-number-input",1,{"type":345,"props":371,"slots":464,"events":465,"exposed":472,"hash":473},[372,376,386,389,395,399,402,405,409,413,416,419,429,432,440,446,453,458],{"name":373,"global":18,"description":341,"tags":374,"required":354,"type":375,"schema":375},"modelValue",[],"T",{"name":157,"global":18,"description":341,"tags":377,"required":18,"type":378,"schema":379},[],"NumberUnit",{"kind":380,"type":378,"schema":381},"enum",{"0":382,"1":383,"2":384,"3":385},"\"money\"","\"percent\"","\"count\"","\"hours\"",{"name":139,"global":18,"description":341,"tags":387,"required":18,"type":388,"schema":388},[],"number",{"name":229,"global":18,"description":341,"tags":390,"required":18,"type":391,"schema":392},[],"string | number",{"kind":380,"type":391,"schema":393},{"0":394,"1":388},"string",{"name":232,"global":18,"description":341,"tags":396,"required":18,"type":391,"schema":397},[],{"kind":380,"type":391,"schema":398},{"0":394,"1":388},{"name":165,"global":18,"description":400,"tags":401,"required":18,"type":394,"schema":394},"ISO 4217 code for `unit=\"money\"` (default: app.config, then USD).",[],{"name":168,"global":18,"description":403,"tags":404,"required":18,"type":394,"schema":394},"BCP 47 locale for the grouping and decimal marks, the currency symbol and the chevrons' labels (default:\napp.config, then en-US).",[],{"name":406,"global":18,"description":407,"tags":408,"required":18,"type":388,"schema":388},"minFractionDigits","Decimal places written on commit (default: app.config, then 2 for money, 0 otherwise).",[],{"name":410,"global":18,"description":411,"tags":412,"required":18,"type":388,"schema":388},"maxFractionDigits","Decimal places rounded to on commit, and the most that can be typed (default: app.config, then 2 for money,\nnone otherwise).",[],{"name":252,"global":18,"description":414,"tags":415,"required":18,"type":394,"schema":394},"Text before the value, beside the currency mark.",[],{"name":255,"global":18,"description":417,"tags":418,"required":18,"type":394,"schema":394},"Text after the value, beside the unit mark.",[],{"name":420,"global":18,"description":421,"tags":422,"required":18,"type":423,"schema":424},"modelType","The kind to hand back when the model starts empty: a `Decimal` v-model that can be null needs `decimal`.",[],"ModelKind",{"kind":380,"type":423,"schema":425},{"0":426,"1":427,"2":428},"\"string\"","\"number\"","\"decimal\"",{"name":135,"global":18,"description":341,"tags":430,"required":18,"type":431,"schema":431},[],"Record\u003Cstring, string>",{"name":433,"global":18,"description":341,"tags":434,"required":18,"type":435,"schema":436},"freeform",[],"boolean",{"kind":380,"type":435,"schema":437},{"0":438,"1":439},"false","true",{"name":441,"global":18,"default":439,"description":442,"tags":443,"required":18,"type":435,"schema":444},"spin","The chevrons and ArrowUp\u002FArrowDown; `false` takes both away.",[],{"kind":380,"type":435,"schema":445},{"0":438,"1":439},{"name":447,"global":18,"default":448,"description":449,"tags":450,"required":18,"type":435,"schema":451},"highlightOnFocus","undefined","Select the whole value on focus (default: on in calc).",[],{"kind":380,"type":435,"schema":452},{"0":438,"1":439},{"name":270,"global":18,"description":454,"tags":455,"required":18,"type":435,"schema":456},"Take `+ - * \u002F` expressions, worked out on commit.",[],{"kind":380,"type":435,"schema":457},{"0":438,"1":439},{"name":459,"global":18,"default":439,"description":460,"tags":461,"required":18,"type":435,"schema":462},"commitOnBlur","Commit (clamp, round, work out an expression) on blur; `false` for a grid editor that calls `evaluate()`.",[],{"kind":380,"type":435,"schema":463},{"0":438,"1":439},[],[466],{"name":467,"description":341,"tags":468,"type":469,"signature":470,"schema":471},"update:modelValue",[],"[value: T]","(evt: \"update:modelValue\", value: T): void",[375],[],"CXPVfmLVfLKK_PSXyKpIoES4kUCicyE9UI_ncSLkzCY",1794711775786]