@htmlbricks/hb-searchbar 0.71.36 → 0.72.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +8 -12
  2. package/manifest.json +72 -2
  3. package/package.json +2 -2
  4. package/types/webcomponent.type.d.ts +5 -1
  5. package/types/webcomponent_events.type.d.json +70 -0
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
- # hb-searchbar
1
+ # `hb-searchbar` (searchbar)
2
2
 
3
- **Category:** utilities · **Tags:** utilities, search
3
+ **Category:** utilities
4
+ **Tags:** utilities, search
5
+ **Package:** `@htmlbricks/hb-searchbar`
4
6
 
5
7
  ## Overview
6
8
 
@@ -14,8 +16,6 @@ Use it when you want a self-contained query field with debounced “search while
14
16
  <hb-searchbar …></hb-searchbar>
15
17
  ```
16
18
 
17
- Tag name: **`hb-searchbar`**.
18
-
19
19
  ## Attributes and properties
20
20
 
21
21
  Web component attributes are **strings**. For structured data (`searchlist`, `input_info`), pass **JSON** as a string attribute (or set the corresponding property with a parsed object in JavaScript). Boolean-like flags use **`yes`** / **`no`** where noted.
@@ -65,10 +65,8 @@ Listen with `addEventListener` on the host element.
65
65
 
66
66
  | Event | Detail (TypeScript `Events`) |
67
67
  |-------|-------------------------------|
68
- | `search` | `{ input: string; by: "button" \| "input" \| "searchlist" }` |
69
- | `clear` | `{ id: string }` |
70
-
71
- The `id` on `clear` is the component’s `id` attribute (empty string if unset).
68
+ | `search` | `{ input: string; by: "button" \| "input" \| "searchlist"; item?: TSearchListItem }` — when the user picks a suggestion, **`item`** is the matched list entry; for **`by: "input"`** or **`"button"`**, **`item`** is omitted. |
69
+ | `clear` | `{ id: string }` — the host **`id`** attribute (empty string if unset). |
72
70
 
73
71
  ## Styling
74
72
 
@@ -184,8 +182,6 @@ el.addEventListener("clear", (e) => {
184
182
  });
185
183
  ```
186
184
 
187
- ## Related files
185
+ ## License
188
186
 
189
- - `component.wc.svelte` — implementation
190
- - `types/webcomponent.type.d.ts` — `Component` and `Events` typings
191
- - `extra/docs.ts` — catalog metadata, CSS variables, parts, Storybook examples
187
+ Package metadata references **Apache-2.0** (see `LICENSE.md` in the published package when consuming from npm).
package/manifest.json CHANGED
@@ -32,6 +32,9 @@
32
32
  },
33
33
  "input": {
34
34
  "type": "string"
35
+ },
36
+ "item": {
37
+ "$ref": "#/definitions/TSearchListItem"
35
38
  }
36
39
  },
37
40
  "required": [
@@ -46,6 +49,73 @@
46
49
  "clear"
47
50
  ],
48
51
  "type": "object"
52
+ },
53
+ "TSearchListItem": {
54
+ "additionalProperties": false,
55
+ "properties": {
56
+ "badge": {
57
+ "$ref": "#/definitions/TSearchListItemBadge"
58
+ },
59
+ "fixed": {
60
+ "type": "boolean"
61
+ },
62
+ "icon": {
63
+ "type": "string"
64
+ },
65
+ "id": {
66
+ "type": "string"
67
+ },
68
+ "number_of_results": {
69
+ "type": "number"
70
+ },
71
+ "tags": {
72
+ "items": {
73
+ "$ref": "#/definitions/TSearchListItemTag"
74
+ },
75
+ "type": "array"
76
+ },
77
+ "text": {
78
+ "type": "string"
79
+ },
80
+ "url": {
81
+ "type": "string"
82
+ }
83
+ },
84
+ "required": [
85
+ "text",
86
+ "id"
87
+ ],
88
+ "type": "object"
89
+ },
90
+ "TSearchListItemBadge": {
91
+ "additionalProperties": false,
92
+ "properties": {
93
+ "color": {
94
+ "type": "string"
95
+ },
96
+ "icon": {
97
+ "type": "string"
98
+ },
99
+ "text": {
100
+ "type": "string"
101
+ }
102
+ },
103
+ "type": "object"
104
+ },
105
+ "TSearchListItemTag": {
106
+ "additionalProperties": false,
107
+ "properties": {
108
+ "color": {
109
+ "type": "string"
110
+ },
111
+ "icon": {
112
+ "type": "string"
113
+ },
114
+ "text": {
115
+ "type": "string"
116
+ }
117
+ },
118
+ "type": "object"
49
119
  }
50
120
  }
51
121
  },
@@ -182,7 +252,7 @@
182
252
  }
183
253
  }
184
254
  },
185
- "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` and `clear`.",
255
+ "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`.",
186
256
  "storybookArgs": {
187
257
  "initial_value": {
188
258
  "control": {
@@ -913,5 +983,5 @@
913
983
  "size": {},
914
984
  "iifePath": "main.iife.js",
915
985
  "repoName": "@htmlbricks/hb-searchbar",
916
- "version": "0.71.36"
986
+ "version": "0.72.0"
917
987
  }
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@htmlbricks/hb-searchbar",
3
- "version": "0.71.36",
3
+ "version": "0.72.0",
4
4
  "contributors": [],
5
- "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` and `clear`.",
5
+ "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`.",
6
6
  "licenses": [
7
7
  {
8
8
  "type": "Apache-2.0",
package/types/webcomponent.type.d.ts CHANGED
@@ -25,6 +25,10 @@ export type Component = {
25
25
  };
26
26
 
27
27
  export type Events = {
28
- search: { input: string; by: "button" | "input" | "searchlist" };
28
+ search: {
29
+ input: string;
30
+ by: "button" | "input" | "searchlist";
31
+ item?: TSearchListItem;
32
+ };
29
33
  clear: { id: string };
30
34
  };
package/types/webcomponent_events.type.d.json CHANGED
@@ -30,6 +30,9 @@
30
30
  },
31
31
  "input": {
32
32
  "type": "string"
33
+ },
34
+ "item": {
35
+ "$ref": "#/definitions/TSearchListItem"
33
36
  }
34
37
  },
35
38
  "required": [
@@ -44,6 +47,73 @@
44
47
  "clear"
45
48
  ],
46
49
  "type": "object"
50
+ },
51
+ "TSearchListItem": {
52
+ "additionalProperties": false,
53
+ "properties": {
54
+ "badge": {
55
+ "$ref": "#/definitions/TSearchListItemBadge"
56
+ },
57
+ "fixed": {
58
+ "type": "boolean"
59
+ },
60
+ "icon": {
61
+ "type": "string"
62
+ },
63
+ "id": {
64
+ "type": "string"
65
+ },
66
+ "number_of_results": {
67
+ "type": "number"
68
+ },
69
+ "tags": {
70
+ "items": {
71
+ "$ref": "#/definitions/TSearchListItemTag"
72
+ },
73
+ "type": "array"
74
+ },
75
+ "text": {
76
+ "type": "string"
77
+ },
78
+ "url": {
79
+ "type": "string"
80
+ }
81
+ },
82
+ "required": [
83
+ "text",
84
+ "id"
85
+ ],
86
+ "type": "object"
87
+ },
88
+ "TSearchListItemBadge": {
89
+ "additionalProperties": false,
90
+ "properties": {
91
+ "color": {
92
+ "type": "string"
93
+ },
94
+ "icon": {
95
+ "type": "string"
96
+ },
97
+ "text": {
98
+ "type": "string"
99
+ }
100
+ },
101
+ "type": "object"
102
+ },
103
+ "TSearchListItemTag": {
104
+ "additionalProperties": false,
105
+ "properties": {
106
+ "color": {
107
+ "type": "string"
108
+ },
109
+ "icon": {
110
+ "type": "string"
111
+ },
112
+ "text": {
113
+ "type": "string"
114
+ }
115
+ },
116
+ "type": "object"
47
117
  }
48
118
  }
49
119
  }