@starwind-ui/core 1.5.0 → 1.5.1
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.
package/dist/index.js
CHANGED
|
@@ -15,7 +15,7 @@ var registry_default = {
|
|
|
15
15
|
{ name: "card", type: "component", version: "1.1.0", dependencies: [] },
|
|
16
16
|
{ name: "checkbox", type: "component", version: "1.2.0", dependencies: [] },
|
|
17
17
|
{ name: "dialog", type: "component", version: "1.1.1", dependencies: [] },
|
|
18
|
-
{ name: "dropdown", type: "component", version: "1.0.
|
|
18
|
+
{ name: "dropdown", type: "component", version: "1.0.1", dependencies: [] },
|
|
19
19
|
{ name: "input", type: "component", version: "1.1.1", dependencies: [] },
|
|
20
20
|
{ name: "label", type: "component", version: "1.1.1", dependencies: [] },
|
|
21
21
|
{ name: "pagination", type: "component", version: "2.0.1", dependencies: [] },
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n\tname: string;\n\tversion: string;\n\ttype: \"component\";\n\tdependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n\tcomponents: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n\t// In production (when installed as a dependency), the components will be in dist/src/components\n\t// In development, they will be in src/components\n\tconst componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n\treturn join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n\t\"$schema\": \"https://starwind.dev/registry-schema.json\",\n\t\"components\": [\n\t\t{ \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n\tname: string;\n\tversion: string;\n\ttype: \"component\";\n\tdependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n\tcomponents: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n\t// In production (when installed as a dependency), the components will be in dist/src/components\n\t// In development, they will be in src/components\n\tconst componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n\treturn join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n\t\"$schema\": \"https://starwind.dev/registry-schema.json\",\n\t\"components\": [\n\t\t{ \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"input\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"label\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"pagination\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"select\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n\t\t{ \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n\t\t{ \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] }\n\t]\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACC,SAAW;AAAA,EACX,YAAc;AAAA,IACb,EAAE,MAAQ,aAAa,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACnF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,WAAW,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,EAClF;AACD;;;ADDA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGpF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC9D;AAKO,IAAM,WAAW,iBAAkB;","names":[]}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import type { HTMLAttributes } from "astro/types";
|
|
3
3
|
|
|
4
4
|
type Props = HTMLAttributes<"div"> & {
|
|
5
|
-
name?: string;
|
|
6
5
|
/**
|
|
7
6
|
* When true, the dropdown will open on hover in addition to click
|
|
8
7
|
*/
|
|
@@ -16,12 +15,11 @@ type Props = HTMLAttributes<"div"> & {
|
|
|
16
15
|
children: any;
|
|
17
16
|
};
|
|
18
17
|
|
|
19
|
-
const { class: className,
|
|
18
|
+
const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Astro.props;
|
|
20
19
|
---
|
|
21
20
|
|
|
22
21
|
<div
|
|
23
22
|
class:list={["starwind-dropdown", "relative", className]}
|
|
24
|
-
data-name={name}
|
|
25
23
|
data-open-on-hover={openOnHover ? "true" : undefined}
|
|
26
24
|
data-close-delay={closeDelay}
|
|
27
25
|
{...rest}
|
|
@@ -117,9 +115,24 @@ const { class: className, name, openOnHover = false, closeDelay = 200, ...rest }
|
|
|
117
115
|
}
|
|
118
116
|
});
|
|
119
117
|
|
|
120
|
-
// Close dropdown when clicking outside
|
|
118
|
+
// Close dropdown when clicking outside for mouse
|
|
121
119
|
document.addEventListener("pointerdown", (e) => {
|
|
122
120
|
if (this.isOpen && !this.dropdown.contains(e.target as Node)) {
|
|
121
|
+
// only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
|
|
122
|
+
// but not when the control key is pressed (avoiding MacOS right click); also not for touch
|
|
123
|
+
// devices because that would open the menu on scroll. (pen devices behave as touch on iOS).
|
|
124
|
+
if (e.button === 0 && e.ctrlKey === false && e.pointerType === "mouse") {
|
|
125
|
+
this.closeDropdown();
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
// Handle click outside select content to close for mobile
|
|
131
|
+
document.addEventListener("click", (e) => {
|
|
132
|
+
if (
|
|
133
|
+
!(this.trigger?.contains(e.target as Node) || this.content?.contains(e.target as Node)) &&
|
|
134
|
+
this.isOpen
|
|
135
|
+
) {
|
|
123
136
|
this.closeDropdown();
|
|
124
137
|
}
|
|
125
138
|
});
|
|
@@ -142,6 +155,7 @@ const { class: className, name, openOnHover = false, closeDelay = 200, ...rest }
|
|
|
142
155
|
if (item && !(item as HTMLElement).hasAttribute("data-disabled")) {
|
|
143
156
|
// Close the dropdown after item selection
|
|
144
157
|
this.closeDropdown();
|
|
158
|
+
console.log("click closing");
|
|
145
159
|
}
|
|
146
160
|
});
|
|
147
161
|
|
|
@@ -162,8 +176,8 @@ const { class: className, name, openOnHover = false, closeDelay = 200, ...rest }
|
|
|
162
176
|
});
|
|
163
177
|
|
|
164
178
|
if (this.openOnHover) {
|
|
165
|
-
|
|
166
|
-
|
|
179
|
+
this.trigger.addEventListener("pointerenter", (e) => {
|
|
180
|
+
if (e.pointerType !== "mouse") return;
|
|
167
181
|
if (!this.isOpen) {
|
|
168
182
|
this.openDropdown();
|
|
169
183
|
} else {
|
|
@@ -172,20 +186,18 @@ const { class: className, name, openOnHover = false, closeDelay = 200, ...rest }
|
|
|
172
186
|
}
|
|
173
187
|
});
|
|
174
188
|
|
|
175
|
-
|
|
176
|
-
|
|
189
|
+
this.dropdown.addEventListener("pointerleave", (e) => {
|
|
190
|
+
if (e.pointerType !== "mouse") return;
|
|
177
191
|
if (this.isOpen) {
|
|
178
192
|
this.closeDropdownDelayed();
|
|
179
193
|
}
|
|
180
194
|
});
|
|
181
195
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
});
|
|
188
|
-
}
|
|
196
|
+
this.content.addEventListener("pointerenter", (e) => {
|
|
197
|
+
if (e.pointerType !== "mouse") return;
|
|
198
|
+
// If the user moves the mouse to the content, cancel the close timer
|
|
199
|
+
this.clearCloseTimer();
|
|
200
|
+
});
|
|
189
201
|
}
|
|
190
202
|
}
|
|
191
203
|
|