[{"data":1,"prerenderedAt":750},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fcomponents\u002Ffilters":89,"surround-\u002Fdocs\u002Fcomponents\u002Ffilters":747},[4],{"title":5,"path":6,"stem":7,"children":8,"page":88},"Docs","\u002Fdocs","docs",[9,32],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Overview","group",[13,19,23,27],{"title":14,"path":15,"stem":16,"tag":17,"type":18,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F1.introduction",null,"page",{"title":20,"path":21,"stem":22,"tag":17,"type":18,"children":-1},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F2.getting-started",{"title":24,"path":25,"stem":26,"tag":17,"type":18,"children":-1},"Registries","\u002Fdocs\u002Fregistries","docs\u002F3.registries",{"path":28,"stem":29,"title":30,"type":31},"\u002Fllms.txt","llms.txt","Llms.txt","asset",{"title":33,"path":34,"stem":35,"children":36,"page":88,"type":11},"Components","\u002Fdocs\u002Fcomponents","docs\u002Fcomponents",[37,43,47,52,56,60,64,68,72,76,80,84],{"title":38,"path":39,"stem":40,"tag":41,"type":42,"children":-1},"ActionSheet","\u002Fdocs\u002Fcomponents\u002Faction-sheet","docs\u002Fcomponents\u002Faction-sheet","new","component",{"title":44,"path":45,"stem":46,"tag":41,"type":42,"children":-1},"Autocomplete","\u002Fdocs\u002Fcomponents\u002Fautocomplete","docs\u002Fcomponents\u002Fautocomplete",{"title":48,"path":49,"stem":50,"tag":51,"type":42,"children":-1},"Color","\u002Fdocs\u002Fcomponents\u002Fcolor","docs\u002Fcomponents\u002Fcolor","alpha",{"title":53,"path":54,"stem":55,"tag":41,"type":42,"children":-1},"Filters","\u002Fdocs\u002Fcomponents\u002Ffilters","docs\u002Fcomponents\u002Ffilters",{"title":57,"path":58,"stem":59,"tag":41,"type":42,"children":-1},"Gallery","\u002Fdocs\u002Fcomponents\u002Fgallery","docs\u002Fcomponents\u002Fgallery",{"title":61,"path":62,"stem":63,"tag":41,"type":42,"children":-1},"Image","\u002Fdocs\u002Fcomponents\u002Fimage","docs\u002Fcomponents\u002Fimage",{"title":65,"path":66,"stem":67,"tag":41,"type":42,"children":-1},"Image Viewer","\u002Fdocs\u002Fcomponents\u002Fimage-viewer","docs\u002Fcomponents\u002Fimage-viewer",{"title":69,"path":70,"stem":71,"tag":41,"type":42,"children":-1},"PasswordField","\u002Fdocs\u002Fcomponents\u002Fpassword-field","docs\u002Fcomponents\u002Fpassword-field",{"title":73,"path":74,"stem":75,"tag":41,"type":42,"children":-1},"PhoneField","\u002Fdocs\u002Fcomponents\u002Fphone-field","docs\u002Fcomponents\u002Fphone-field",{"title":77,"path":78,"stem":79,"tag":41,"type":42,"children":-1},"Stack Menu","\u002Fdocs\u002Fcomponents\u002Fstack-menu","docs\u002Fcomponents\u002Fstack-menu",{"title":81,"path":82,"stem":83,"tag":41,"type":42,"children":-1},"TimeField","\u002Fdocs\u002Fcomponents\u002Ftime-field","docs\u002Fcomponents\u002Ftime-field",{"title":85,"path":86,"stem":87,"tag":41,"type":42,"children":-1},"Timeline","\u002Fdocs\u002Fcomponents\u002Ftimeline","docs\u002Fcomponents\u002Ftimeline",false,{"id":90,"title":53,"body":91,"description":740,"extension":741,"meta":742,"navigation":743,"path":54,"rawbody":744,"seo":745,"stem":55,"tag":41,"__hash__":746},"content\u002Fdocs\u002Fcomponents\u002Ffilters.md",{"type":92,"value":93,"toc":726},"minimark",[94,98,103,156,160,164,169,173,195,200,225,229,447,449,452,573,580,582,588,674,681,685],[95,96],"component-preview",{"name":97},"FiltersDemo",[99,100,102],"h2",{"id":101},"features","Features",[104,105,106,114,120,126,132,138,144,150],"ul",{},[107,108,109,113],"li",{},[110,111,112],"strong",{},"Field-based configuration"," — Define fields as text, date, number, or boolean with optional icons and options",[107,115,116,119],{},[110,117,118],{},"Grouped fields"," — Organize fields into groups in the add-filter menu",[107,121,122,125],{},[110,123,124],{},"Operators per field"," — Each field supports multiple operators (is, is not, contains, between, etc.) with configurable default",[107,127,128,131],{},[110,129,130],{},"Multiple value input types"," — Text, select, multi-select, date, date range, number, number range, boolean switch, or none",[107,133,134,137],{},[110,135,136],{},"Custom option display"," — Customize how options appear in selects and in the add-filter submenu",[107,139,140,143],{},[110,141,142],{},"Variants and sizes"," — Outline or secondary variant; sm, default, or lg size",[107,145,146,149],{},[110,147,148],{},"Clear all"," — One action to remove all active filters",[107,151,152,155],{},[110,153,154],{},"Composable"," — Slot-based layout; use FiltersMenuTrigger and FiltersMenuContent for custom layouts",[99,157,159],{"id":158},"installation","Installation",[161,162,163],"p",{},"Install from the Vuzeno registry with the shadcn-vue CLI:",[165,166],"installation-tabs",{":exec":167,"command":168},"true","shadcn-vue@latest add https:\u002F\u002Fvuzeno.com\u002Fr\u002Ffilters.json",[99,170,172],{"id":171},"fields-configuration","Fields configuration",[161,174,175,179,180,183,184,187,188,191,192,194],{},[176,177,178],"code",{},"FiltersProvider"," receives a ",[176,181,182],{},"fields"," prop: an array of ",[110,185,186],{},"Field"," or ",[110,189,190],{},"FieldGroup"," items. Each ",[110,193,186],{}," defines a filterable column: its key, label, type, which operators are available, and optionally a fixed set of options or constraints.",[196,197,199],"h3",{"id":198},"structure","Structure",[104,201,202,211],{},[107,203,204,207,208,210],{},[110,205,206],{},"Flat list"," — Pass an array of ",[176,209,186],{}," to list all fields in the add-filter menu without groups.",[107,212,213,207,216,218,219,221,222,224],{},[110,214,215],{},"Grouped list",[176,217,190],{},". Each group has a ",[176,220,11],{}," (label) and a ",[176,223,182],{}," array. Groups appear as sections in the menu (e.g. “Base”, “Dates”, “Numbers”).",[196,226,228],{"id":227},"field-properties","Field properties",[230,231,232,248],"table",{},[233,234,235],"thead",{},[236,237,238,242,245],"tr",{},[239,240,241],"th",{},"Property",[239,243,244],{},"Type",[239,246,247],{},"Description",[249,250,251,271,285,310,331,349,366,381,395,409,428],"tbody",{},[236,252,253,259,264],{},[254,255,256],"td",{},[176,257,258],{},"key",[254,260,261],{},[176,262,263],{},"string",[254,265,266,267,270],{},"Unique identifier; used as ",[176,268,269],{},"filter.field"," when a filter is added.",[236,272,273,278,282],{},[254,274,275],{},[176,276,277],{},"name",[254,279,280],{},[176,281,263],{},[254,283,284],{},"Display name in the menu and on filter chips.",[236,286,287,292,307],{},[254,288,289],{},[176,290,291],{},"type",[254,293,294,297,298,297,301,297,304],{},[176,295,296],{},"text"," | ",[176,299,300],{},"date",[176,302,303],{},"number",[176,305,306],{},"boolean",[254,308,309],{},"Drives the default input type when the operator doesn’t specify one.",[236,311,312,317,322],{},[254,313,314],{},[176,315,316],{},"operators",[254,318,319],{},[176,320,321],{},"Operator[]",[254,323,324,325,330],{},"List of operators (e.g. “is”, “contains”, “between”). See ",[326,327,329],"a",{"href":328},"#operators","Operators",".",[236,332,333,338,346],{},[254,334,335],{},[176,336,337],{},"icon",[254,339,340,297,343],{},[176,341,342],{},"Component",[176,344,345],{},"(() => VNode)",[254,347,348],{},"Icon shown next to the field name in the menu and on chips.",[236,350,351,356,360],{},[254,352,353],{},[176,354,355],{},"multiple",[254,357,358],{},[176,359,306],{},[254,361,362,363,365],{},"If ",[176,364,167],{},", allows multiple filters on this field (e.g. several status values).",[236,367,368,373,378],{},[254,369,370],{},[176,371,372],{},"min",[254,374,375],{},[176,376,377],{},"T",[254,379,380],{},"Minimum value (date\u002Fnumber); used by date picker and number inputs.",[236,382,383,388,392],{},[254,384,385],{},[176,386,387],{},"max",[254,389,390],{},[176,391,377],{},[254,393,394],{},"Maximum value (date\u002Fnumber).",[236,396,397,402,406],{},[254,398,399],{},[176,400,401],{},"step",[254,403,404],{},[176,405,303],{},[254,407,408],{},"Step for number inputs.",[236,410,411,416,421],{},[254,412,413],{},[176,414,415],{},"numberFormat",[254,417,418],{},[176,419,420],{},"Intl.NumberFormatOptions",[254,422,423,424,427],{},"Formatting for number\u002Fcurrency display (e.g. ",[176,425,426],{},"{ style: \"currency\", currency: \"USD\" }",").",[236,429,430,435,440],{},[254,431,432],{},[176,433,434],{},"options",[254,436,437],{},[176,438,439],{},"object",[254,441,442,443,330],{},"Predefined choices for select\u002Fmulti-select. See ",[326,444,446],{"href":445},"#options","Options",[196,448,329],{"id":316},[161,450,451],{},"Each operator is an object with:",[230,453,454,464],{},[233,455,456],{},[236,457,458,460,462],{},[239,459,241],{},[239,461,244],{},[239,463,247],{},[249,465,466,480,497,513,532],{},[236,467,468,473,477],{},[254,469,470],{},[176,471,472],{},"label",[254,474,475],{},[176,476,263],{},[254,478,479],{},"Label in the operator dropdown (e.g. “is”, “between”).",[236,481,482,487,491],{},[254,483,484],{},[176,485,486],{},"value",[254,488,489],{},[176,490,263],{},[254,492,493,494,330],{},"Unique value stored in ",[176,495,496],{},"filter.operator",[236,498,499,504,508],{},[254,500,501],{},[176,502,503],{},"default",[254,505,506],{},[176,507,306],{},[254,509,362,510,512],{},[176,511,167],{},", this operator is selected when the filter is first added.",[236,514,515,520,525],{},[254,516,517],{},[176,518,519],{},"defaultValue",[254,521,522],{},[176,523,524],{},"T | T[]",[254,526,527,528,531],{},"Initial ",[176,529,530],{},"filter.value"," when this operator is selected.",[236,533,534,539,543],{},[254,535,536],{},[176,537,538],{},"inputType",[254,540,541],{},[176,542,263],{},[254,544,545,546,549,550,549,553,549,555,549,557,549,560,549,562,549,565,549,567,570,571,330],{},"Overrides the input: ",[176,547,548],{},"select",", ",[176,551,552],{},"multi-select",[176,554,296],{},[176,556,300],{},[176,558,559],{},"date-range",[176,561,303],{},[176,563,564],{},"number-range",[176,566,306],{},[176,568,569],{},"none",". Omit to use the field’s ",[176,572,291],{},[161,574,575,576,579],{},"Use ",[176,577,578],{},"inputType: \"none\""," for operators that don’t need a value (e.g. “is empty”, “is not empty”).",[196,581,446],{"id":434},[161,583,584,585,587],{},"When a field has predefined choices, set ",[176,586,434],{},":",[230,589,590,600],{},[233,591,592],{},[236,593,594,596,598],{},[239,595,241],{},[239,597,244],{},[239,599,247],{},[249,601,602,617,631,645,659],{},[236,603,604,609,614],{},[254,605,606],{},[176,607,608],{},"items",[254,610,611],{},[176,612,613],{},"{ label: string, value: T }[]",[254,615,616],{},"Options for select or multi-select.",[236,618,619,624,628],{},[254,620,621],{},[176,622,623],{},"searchable",[254,625,626],{},[176,627,306],{},[254,629,630],{},"Enable search in the options list.",[236,632,633,638,642],{},[254,634,635],{},[176,636,637],{},"minSelections",[254,639,640],{},[176,641,303],{},[254,643,644],{},"Minimum selected items (multi-select).",[236,646,647,652,656],{},[254,648,649],{},[176,650,651],{},"maxSelections",[254,653,654],{},[176,655,303],{},[254,657,658],{},"Maximum selected items (multi-select).",[236,660,661,666,671],{},[254,662,663],{},[176,664,665],{},"optionDisplay",[254,667,668],{},[176,669,670],{},"(option) => VNode | string",[254,672,673],{},"Custom render for each option (e.g. label + badge).",[161,675,676,677,680],{},"Fields with ",[176,678,679],{},"options.items"," show a submenu in the add-filter dropdown so the user can pick a value when adding the filter.",[196,682,684],{"id":683},"filter-and-filtervalue","Filter and FilterValue",[161,686,687,688,691,692,695,696,698,699,702,703,549,705,549,708,549,710,549,713,549,715,549,718,721,722,725],{},"Active filters are stored as ",[110,689,690],{},"Filter"," objects: ",[176,693,694],{},"{ field, operator, value, hidden? }",". The ",[176,697,486],{}," type (",[110,700,701],{},"FilterValue",") depends on the operator and field: ",[176,704,263],{},[176,706,707],{},"string[]",[176,709,303],{},[176,711,712],{},"number[]",[176,714,306],{},[176,716,717],{},"CalendarDate",[176,719,720],{},"CalendarDate[]",", or a range ",[176,723,724],{},"{ start, end }"," for date\u002Fnumber ranges.",{"title":727,"searchDepth":728,"depth":728,"links":729},"",2,[730,731,732],{"id":101,"depth":728,"text":102},{"id":158,"depth":728,"text":159},{"id":171,"depth":728,"text":172,"children":733},[734,736,737,738,739],{"id":198,"depth":735,"text":199},3,{"id":227,"depth":735,"text":228},{"id":316,"depth":735,"text":329},{"id":434,"depth":735,"text":446},{"id":683,"depth":735,"text":684},"A composable filter system for building dynamic, type-aware filter UIs with dropdown field selection, operators, and multiple value input types","md",{},true,"---\ntitle: Filters\ndescription: A composable filter system for building dynamic, type-aware filter UIs with dropdown field selection, operators, and multiple value input types\ntag: new\n---\n\n::component-preview \n---\nname: FiltersDemo\n---\n::\n\n## Features\n\n- **Field-based configuration** — Define fields as text, date, number, or boolean with optional icons and options\n- **Grouped fields** — Organize fields into groups in the add-filter menu\n- **Operators per field** — Each field supports multiple operators (is, is not, contains, between, etc.) with configurable default\n- **Multiple value input types** — Text, select, multi-select, date, date range, number, number range, boolean switch, or none\n- **Custom option display** — Customize how options appear in selects and in the add-filter submenu\n- **Variants and sizes** — Outline or secondary variant; sm, default, or lg size\n- **Clear all** — One action to remove all active filters\n- **Composable** — Slot-based layout; use FiltersMenuTrigger and FiltersMenuContent for custom layouts\n\n## Installation\n\nInstall from the Vuzeno registry with the shadcn-vue CLI:\n\n::installation-tabs\n---\ncommand: shadcn-vue@latest add https:\u002F\u002Fvuzeno.com\u002Fr\u002Ffilters.json\nexec: true\n---\n::\n\n## Fields configuration\n\n`FiltersProvider` receives a `fields` prop: an array of **Field** or **FieldGroup** items. Each **Field** defines a filterable column: its key, label, type, which operators are available, and optionally a fixed set of options or constraints.\n\n### Structure\n\n- **Flat list** — Pass an array of `Field` to list all fields in the add-filter menu without groups.\n- **Grouped list** — Pass an array of `FieldGroup`. Each group has a `group` (label) and a `fields` array. Groups appear as sections in the menu (e.g. “Base”, “Dates”, “Numbers”).\n\n### Field properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `key` | `string` | Unique identifier; used as `filter.field` when a filter is added. |\n| `name` | `string` | Display name in the menu and on filter chips. |\n| `type` | `text` \\| `date` \\| `number` \\| `boolean` | Drives the default input type when the operator doesn’t specify one. |\n| `operators` | `Operator[]` | List of operators (e.g. “is”, “contains”, “between”). See [Operators](#operators). |\n| `icon` | `Component` \\| `(() => VNode)` | Icon shown next to the field name in the menu and on chips. |\n| `multiple` | `boolean` | If `true`, allows multiple filters on this field (e.g. several status values). |\n| `min` | `T` | Minimum value (date\u002Fnumber); used by date picker and number inputs. |\n| `max` | `T` | Maximum value (date\u002Fnumber). |\n| `step` | `number` | Step for number inputs. |\n| `numberFormat` | `Intl.NumberFormatOptions` | Formatting for number\u002Fcurrency display (e.g. `{ style: \"currency\", currency: \"USD\" }`). |\n| `options` | `object` | Predefined choices for select\u002Fmulti-select. See [Options](#options). |\n\n### Operators\n\nEach operator is an object with:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `label` | `string` | Label in the operator dropdown (e.g. “is”, “between”). |\n| `value` | `string` | Unique value stored in `filter.operator`. |\n| `default` | `boolean` | If `true`, this operator is selected when the filter is first added. |\n| `defaultValue` | `T \\| T[]` | Initial `filter.value` when this operator is selected. |\n| `inputType` | `string` | Overrides the input: `select`, `multi-select`, `text`, `date`, `date-range`, `number`, `number-range`, `boolean`, `none`. Omit to use the field’s `type`. |\n\nUse `inputType: \"none\"` for operators that don’t need a value (e.g. “is empty”, “is not empty”).\n\n### Options\n\nWhen a field has predefined choices, set `options`:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `items` | `{ label: string, value: T }[]` | Options for select or multi-select. |\n| `searchable` | `boolean` | Enable search in the options list. |\n| `minSelections` | `number` | Minimum selected items (multi-select). |\n| `maxSelections` | `number` | Maximum selected items (multi-select). |\n| `optionDisplay` | `(option) => VNode \\| string` | Custom render for each option (e.g. label + badge). |\n\nFields with `options.items` show a submenu in the add-filter dropdown so the user can pick a value when adding the filter.\n\n### Filter and FilterValue\n\nActive filters are stored as **Filter** objects: `{ field, operator, value, hidden? }`. The `value` type (**FilterValue**) depends on the operator and field: `string`, `string[]`, `number`, `number[]`, `boolean`, `CalendarDate`, `CalendarDate[]`, or a range `{ start, end }` for date\u002Fnumber ranges.",{"title":53,"description":740},"P68mP8Lg71R5kI71LGtJf7380zfyJ4JmhFbAcAaeokQ",[748,749],{"title":48,"path":49,"stem":50,"children":-1},{"title":57,"path":58,"stem":59,"children":-1},1776810307367]