{ "definitions": { "events": { "$ref": "#/definitions/Events", "$schema": "http://json-schema.org/draft-07/schema#", "definitions": { "Events": { "additionalProperties": false, "properties": { "clear": { "additionalProperties": false, "properties": { "id": { "type": "string" } }, "required": [ "id" ], "type": "object" }, "search": { "additionalProperties": false, "properties": { "by": { "enum": [ "button", "input", "searchlist" ], "type": "string" }, "input": { "type": "string" }, "item": { "$ref": "#/definitions/TSearchListItem" } }, "required": [ "input", "by" ], "type": "object" } }, "required": [ "search", "clear" ], "type": "object" }, "TSearchListItem": { "additionalProperties": false, "properties": { "badge": { "$ref": "#/definitions/TSearchListItemBadge" }, "fixed": { "type": "boolean" }, "icon": { "type": "string" }, "id": { "type": "string" }, "number_of_results": { "type": "number" }, "tags": { "items": { "$ref": "#/definitions/TSearchListItemTag" }, "type": "array" }, "text": { "type": "string" }, "url": { "type": "string" } }, "required": [ "text", "id" ], "type": "object" }, "TSearchListItemBadge": { "additionalProperties": false, "properties": { "color": { "type": "string" }, "icon": { "type": "string" }, "text": { "type": "string" } }, "type": "object" }, "TSearchListItemTag": { "additionalProperties": false, "properties": { "color": { "type": "string" }, "icon": { "type": "string" }, "text": { "type": "string" } }, "type": "object" } } }, "component": { "$ref": "#/definitions/Component", "$schema": "http://json-schema.org/draft-07/schema#", "definitions": { "Component": { "additionalProperties": false, "properties": { "disable_preview": { "enum": [ "yes", "no", "true", "false", "on", "off" ], "type": "string" }, "disabled": { "enum": [ "yes", "no" ], "type": "string" }, "id": { "type": "string" }, "input_info": { "$ref": "#/definitions/TSearchListItem" }, "minlength": { "type": "number" }, "searchlabel": { "type": "string" }, "searchlist": { "items": { "$ref": "#/definitions/TSearchListItem" }, "type": "array" }, "style": { "type": "string" }, "textarea": { "enum": [ "yes", "true", "" ], "type": "string" }, "value": { "type": "string" } }, "required": [ "value" ], "type": "object" }, "TSearchListItem": { "additionalProperties": false, "properties": { "badge": { "$ref": "#/definitions/TSearchListItemBadge" }, "fixed": { "type": "boolean" }, "icon": { "type": "string" }, "id": { "type": "string" }, "number_of_results": { "type": "number" }, "tags": { "items": { "$ref": "#/definitions/TSearchListItemTag" }, "type": "array" }, "text": { "type": "string" }, "url": { "type": "string" } }, "required": [ "text", "id" ], "type": "object" }, "TSearchListItemBadge": { "additionalProperties": false, "properties": { "color": { "type": "string" }, "icon": { "type": "string" }, "text": { "type": "string" } }, "type": "object" }, "TSearchListItemTag": { "additionalProperties": false, "properties": { "color": { "type": "string" }, "icon": { "type": "string" }, "text": { "type": "string" } }, "type": "object" } } } }, "description": "Search field with optional dropdown `searchlist` (id, text, icons, badges, tags, URLs). Configure `value`, `searchlabel`, `textarea`, `minlength`, `disable_preview`, `disabled`, and CSS parts for the input and menu. Dispatches `search` (detail may include `item` when a suggestion is chosen) and `clear`.", "storybookArgs": { "initial_value": { "control": { "type": "text" } }, "disable_preview": { "control": { "type": "select" }, "options": [ "yes", "no" ] }, "minlength": { "control": { "type": "number" } }, "searchlist": { "control": { "type": "object" } }, "searchlabel": { "control": { "type": "text" } }, "value": { "control": { "type": "object" } }, "textarea": { "control": { "type": "select" }, "options": [ "yes", "no" ] }, "disabled": { "control": { "type": "select" }, "options": [ "yes", "no" ] }, "search": { "action": "search" }, "clear": { "action": "clear" } }, "styleSetup": { "vars": [ { "name": "--bulma-primary", "valueType": "color", "defaultValue": "#00d1b2", "description": "Focus ring, submit control hover, and highlighted suggestion rows." }, { "name": "--bulma-background", "valueType": "color", "defaultValue": "#ffffff", "description": "Mixed into host strip and frosted defaults via `color-mix()`." }, { "name": "--bulma-scheme-main", "valueType": "color", "defaultValue": "#ffffff", "description": "Dropdown panel mix target for open suggestions." }, { "name": "--bulma-border", "valueType": "color", "defaultValue": "#dbdbdb", "description": "Field outline, dividers, and mix inputs for glass layers." }, { "name": "--bulma-border-weak", "valueType": "color", "defaultValue": "#ededed", "description": "Softer separators inside the suggestion list." }, { "name": "--bulma-text", "valueType": "color", "defaultValue": "#363636", "description": "Primary query text and list item copy." }, { "name": "--bulma-text-strong", "valueType": "color", "defaultValue": "#363636", "description": "Emphasized suggestion titles." }, { "name": "--bulma-input-placeholder-color", "valueType": "color", "defaultValue": "rgba(54, 54, 54, 0.3)", "description": "Placeholder tone for `searchlabel`." }, { "name": "--bulma-danger", "valueType": "color", "defaultValue": "#f14668", "description": "Clear control accent." }, { "name": "--bulma-radius", "valueType": "number", "defaultValue": "0.375rem", "description": "Field and dropdown corner radius." }, { "name": "--bulma-radius-small", "valueType": "number", "defaultValue": "0.25rem", "description": "Inner chips / compact controls inside rows." }, { "name": "--bulma-dropdown-content-z", "valueType": "number", "defaultValue": "50", "description": "Stacking order for the open suggestion panel." }, { "name": "--hb-searchbar-host-background", "valueType": "string", "defaultValue": "color-mix(in srgb, var(--bulma-background) 88%, var(--bulma-border) 12%)", "description": "Set on the host to override resting :host background (defaults are assigned in the shadow stylesheet)." }, { "name": "--hb-searchbar-host-background-focus", "valueType": "string", "defaultValue": "color-mix(in srgb, var(--bulma-primary) 10%, var(--bulma-background))", "description": "Set on the host to override :host background while the input/textarea is focused." }, { "name": "--hb-searchbar-input-strip-background", "valueType": "string", "defaultValue": "color-mix(in srgb, var(--bulma-background) 72%, var(--bulma-border) 28%)", "description": "Background of the input/textarea row at rest (default is darker than the dropdown list)." }, { "name": "--hb-searchbar-dropdown-panel-background", "valueType": "string", "defaultValue": "color-mix(in srgb, var(--bulma-scheme-main) 62%, var(--bulma-background) 38%)", "description": "Background of the open dropdown panel (default mixes scheme-main with background for lower contrast)." }, { "name": "--hb-searchbar-input-glass-blur", "valueType": "string", "defaultValue": "24px", "description": "Backdrop blur radius for the frosted layer behind the input when focused." }, { "name": "--hb-searchbar-input-glass-saturate", "valueType": "number", "defaultValue": "1.45", "description": "Backdrop saturate() factor for that layer." } ], "parts": [ { "name": "dropdown-menu", "description": "Open suggestion list panel." }, { "name": "search-input", "description": "Native input or textarea surface." }, { "name": "search-input-glass", "description": "Frosted backdrop behind the field while the input/textarea is focused." }, { "name": "search-submit", "description": "In-field magnifier / submit control." } ] }, "contributors": [], "htmlSlots": [], "i18n": [], "examples": [ { "name": "default", "data": { "value": "" } }, { "name": "withSearchlist", "data": { "value": "", "searchlabel": "RESearch", "searchlist": [ { "id": "1", "text": "looking" }, { "id": "2", "text": "good" }, { "id": "3", "text": "woman" } ] } }, { "name": "withSearchlistTextarea", "data": { "value": "", "searchlabel": "RESearch", "textarea": "yes", "searchlist": [ { "id": "1", "text": "looking" }, { "id": "2", "text": "good" }, { "id": "3", "text": "woman" } ] } }, { "name": "disabled", "description": "Searchbar with disabled state", "data": { "value": "cannot type here", "searchlabel": "Search", "disabled": "yes" } }, { "name": "disabledTextarea", "description": "Textarea searchbar with disabled state", "data": { "value": "cannot type here", "searchlabel": "Search", "textarea": "yes", "disabled": "yes" } }, { "name": "with20items", "data": { "input_info": { "id": "1", "text": "woman", "number_of_results": 200000000 }, "searchlist": [ { "id": "1", "text": "looking", "number_of_results": 200000000 }, { "id": "2", "text": "good", "number_of_results": 200000000 }, { "id": "3", "text": "woman", "number_of_results": 200000000 }, { "id": "4", "text": "man", "number_of_results": 200000000 }, { "id": "5", "text": "woman", "number_of_results": 200000000 }, { "id": "6", "text": "man", "number_of_results": 200000000 }, { "id": "7", "text": "woman", "number_of_results": 200000000 }, { "id": "8", "text": "man", "number_of_results": 200000000 }, { "id": "9", "text": "woman", "number_of_results": 200000000 }, { "id": "10", "text": "man", "number_of_results": 200000000 }, { "id": "11", "text": "woman", "number_of_results": 200000000 }, { "id": "12", "text": "man", "number_of_results": 200000000 }, { "id": "13", "text": "woman", "number_of_results": 200000000 }, { "id": "14", "text": "man", "number_of_results": 200000000 }, { "id": "15", "text": "woman", "number_of_results": 200000000 }, { "id": "16", "text": "man", "number_of_results": 200000000 }, { "id": "17", "text": "woman", "number_of_results": 200000000 }, { "id": "18", "text": "man", "number_of_results": 200000000 }, { "id": "19", "text": "woman", "number_of_results": 200000000 }, { "id": "20", "text": "man", "number_of_results": 200000000 } ], "value": "ciao" } }, { "name": "withRichItems", "description": "Example with icons, badges, tags, and URLs", "data": { "value": "ciao", "searchlabel": "Search with rich items", "searchlist": [ { "id": "1", "text": "Documentation", "icon": "file-text", "url": "https://example.com/docs", "badge": { "text": "New", "color": "success", "icon": "star" }, "tags": [ { "text": "Guide", "color": "info" }, { "text": "Tutorial", "color": "warning" } ] }, { "id": "2", "text": "API Reference", "icon": "code-slash", "url": "https://example.com/api", "badge": { "text": "v2.0", "color": "primary" }, "tags": [ { "text": "API", "color": "primary", "icon": "gear" }, { "text": "REST", "color": "secondary" } ] }, { "id": "3", "text": "Support Center", "icon": "headset", "fixed": true, "badge": { "text": "24/7", "color": "success", "icon": "clock" }, "tags": [ { "text": "Help", "color": "light" }, { "text": "Support", "color": "light" } ] }, { "id": "4", "text": "Community Forum", "icon": "people", "url": "https://example.com/forum", "tags": [ { "text": "Community", "color": "info", "icon": "chat" }, { "text": "Discussion", "color": "light" } ] }, { "id": "5", "text": "Blog", "icon": "newspaper", "url": "https://example.com/blog", "badge": { "text": "Updated", "color": "warning" } } ] } }, { "name": "withPartialProperties", "description": "Example with different partial properties and various key-value combinations", "data": { "value": "", "searchlabel": "Search with mixed properties", "searchlist": [ { "id": "1", "text": "Simple item" }, { "id": "2", "text": "Item with icon only", "icon": "house" }, { "id": "3", "text": "Item with URL only", "url": "https://example.com/simple-link" }, { "id": "4", "text": "Item with badge only", "badge": { "text": "Hot", "color": "danger" } }, { "id": "5", "text": "Item with tags only", "tags": [ { "text": "Featured", "color": "warning" }, { "text": "Popular", "color": "info" } ] }, { "id": "6", "text": "Icon + URL download", "icon": "download", "url": "https://example.com/download" }, { "id": "7", "text": "Icon + Badge", "icon": "0-square-fill", "badge": { "text": "Premium", "color": "warning", "icon": "crown" } }, { "id": "8", "text": "URL + Badge", "url": "https://example.com/external", "badge": { "text": "External", "color": "secondary" } }, { "id": "9", "text": "Icon + Tags", "icon": "tag", "tags": [ { "text": "Category A", "color": "primary" }, { "text": "Category B", "color": "success" }, { "text": "Category C", "color": "info" } ] }, { "id": "10", "text": "URL + Tags", "url": "https://example.com/categorized", "tags": [ { "text": "Link", "color": "light" } ] }, { "id": "11", "text": "Badge + Tags", "badge": { "text": "Beta", "color": "info" }, "tags": [ { "text": "Experimental", "color": "warning", "icon": "flask" }, { "text": "Testing", "color": "secondary" } ] }, { "id": "12", "text": "Icon + URL + Badge", "icon": "shield-check", "url": "https://example.com/secure", "badge": { "text": "Secure", "color": "success", "icon": "lock" } }, { "id": "13", "text": "Icon + URL + Tags", "icon": "bookmark", "url": "https://example.com/bookmarked", "tags": [ { "text": "Saved", "color": "primary", "icon": "bookmark-fill" }, { "text": "Important", "color": "danger" } ] }, { "id": "14", "text": "Icon + Badge + Tags", "icon": "trophy", "badge": { "text": "Winner", "color": "warning", "icon": "award" }, "tags": [ { "text": "Contest", "color": "success" }, { "text": "2024", "color": "info" }, { "text": "Gold", "color": "warning" } ] }, { "id": "15", "text": "URL + Badge + Tags", "url": "https://example.com/complete", "badge": { "text": "Complete", "color": "success" }, "tags": [ { "text": "Finished", "color": "success" }, { "text": "Verified", "color": "primary" } ] }, { "id": "16", "text": "Fixed item with icon", "icon": "pin", "fixed": true }, { "id": "17", "text": "Fixed item with badge", "fixed": true, "badge": { "text": "Pinned", "color": "primary" } }, { "id": "18", "text": "Complex item", "icon": "gear", "url": "https://example.com/settings", "badge": { "text": "Admin", "color": "danger", "icon": "person-badge" }, "tags": [ { "text": "Settings", "color": "secondary" }, { "text": "Configuration", "color": "info" }, { "text": "Advanced", "color": "warning", "icon": "tools" } ], "fixed": true } ] } } ], "iifeIntegrity": "sha384-bLuPlqB+UUi1+yFNtenbiN+bNkhnzz8hlqt1cjvZrg946o1hCnWYhszOs4XkMq/Y", "dependencies": [], "screenshots": [], "licenses": [ { "type": "Apache-2.0", "path": "LICENSE.md", "cost": 0, "currency": "EUR" } ], "readmePath": "README.md", "name": "hb-searchbar", "category": "utilities", "tags": [ "utilities", "search" ], "size": {}, "iifePath": "main.iife.js", "repoName": "@htmlbricks/hb-searchbar", "version": "0.76.5" }