Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
components/filter.json
{
"name": "Filter",
"tagName": "noora-filter",
"elementClassName": "NooraFilter",
"className": "noora-filter",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Builds and displays a set of structured filters.",
"usage": "<noora-filter>\n <noora-filter-definition name=\"status\" label=\"Status\" type=\"option\">\n <noora-filter-option value=\"active\">Active</noora-filter-option>\n <noora-filter-option value=\"paused\">Paused</noora-filter-option>\n </noora-filter-definition>\n <noora-filter-value name=\"status\" operator=\"==\" value=\"active\"></noora-filter-value>\n</noora-filter>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "Filter",
"description": "Sets the add-filter label."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables editing."
}
],
"properties": [
{
"name": "availableFilters",
"type": "json",
"typescriptType": "Array<Record<string, unknown>>",
"default": [],
"description": "Defines available filters programmatically when declarative definitions are not used."
},
{
"name": "filters",
"type": "json",
"typescriptType": "Array<Record<string, unknown>>",
"default": [],
"description": "Gets or sets active filters programmatically."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "",
"description": "Declarative noora-filter-definition and noora-filter-value children."
}
],
"cssParts": [
{
"name": "filter",
"description": "The filter container."
},
{
"name": "active-filters",
"description": "The active-filter list."
},
{
"name": "add",
"description": "The add-filter control."
},
{
"name": "active-filter",
"description": "An active filter control."
}
],
"events": [
{
"name": "noora-filter-change",
"type": "CustomEvent<{ filters: Array<Record<string, unknown>> }>",
"description": "Emitted when a filter is added, changed, or removed."
}
],
"notes": ["Changes emit a `noora-filter-change` event."],
"examples": [
{
"id": "status",
"title": "Status filter",
"description": "Offer a predefined status filter.",
"markup": "<noora-filter>\n <noora-filter-definition name=\"status\" label=\"Status\" type=\"option\">\n <noora-filter-option value=\"active\">Active</noora-filter-option>\n <noora-filter-option value=\"paused\">Paused</noora-filter-option>\n </noora-filter-definition>\n <noora-filter-definition name=\"name\" label=\"Name\" type=\"text\"></noora-filter-definition>\n <noora-filter-definition name=\"amount\" label=\"Amount\" type=\"number\"></noora-filter-definition>\n <noora-filter-value name=\"status\" operator=\"==\" value=\"active\"></noora-filter-value>\n</noora-filter>"
}
]
}