@tanstack/devtools-ui 0.4.3 → 0.4.4
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.
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { JSX } from 'solid-js/jsx-runtime';
|
|
2
2
|
export declare function Header({ children, class: className, ...rest }: JSX.IntrinsicElements['header']): JSX.Element;
|
|
3
|
-
export declare function HeaderLogo({ children, flavor, }: {
|
|
3
|
+
export declare function HeaderLogo({ children, flavor, onClick, }: {
|
|
4
4
|
children: JSX.Element;
|
|
5
5
|
flavor: {
|
|
6
6
|
light: string;
|
|
7
7
|
dark: string;
|
|
8
8
|
};
|
|
9
|
+
onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>;
|
|
9
10
|
}): JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { template, spread, mergeProps, insert, effect, className } from "solid-js/web";
|
|
1
|
+
import { template, spread, mergeProps, insert, addEventListener, effect, className, delegateEvents } from "solid-js/web";
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
import { useStyles } from "../styles/use-styles.js";
|
|
4
4
|
var _tmpl$ = /* @__PURE__ */ template(`<header>`), _tmpl$2 = /* @__PURE__ */ template(`<div><button><span>TANSTACK</span><span>`);
|
|
@@ -21,11 +21,13 @@ function Header({
|
|
|
21
21
|
}
|
|
22
22
|
function HeaderLogo({
|
|
23
23
|
children,
|
|
24
|
-
flavor
|
|
24
|
+
flavor,
|
|
25
|
+
onClick
|
|
25
26
|
}) {
|
|
26
27
|
const styles = useStyles();
|
|
27
28
|
return (() => {
|
|
28
29
|
var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
|
|
30
|
+
addEventListener(_el$3, "click", onClick, true);
|
|
29
31
|
insert(_el$5, children);
|
|
30
32
|
effect((_p$) => {
|
|
31
33
|
var _v$ = styles().header.logoAndToggleContainer, _v$2 = clsx(styles().header.logo), _v$3 = clsx(styles().header.tanstackLogo), _v$4 = clsx(styles().header.flavorLogo(flavor.light, flavor.dark));
|
|
@@ -43,6 +45,7 @@ function HeaderLogo({
|
|
|
43
45
|
return _el$2;
|
|
44
46
|
})();
|
|
45
47
|
}
|
|
48
|
+
delegateEvents(["click"]);
|
|
46
49
|
export {
|
|
47
50
|
Header,
|
|
48
51
|
HeaderLogo
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../src/components/header.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport function Header({\n children,\n class: className,\n ...rest\n}: JSX.IntrinsicElements['header']) {\n const styles = useStyles()\n return (\n <header\n class={clsx(styles().header.row, 'tsqd-header', className)}\n {...rest}\n >\n {children}\n </header>\n )\n}\n\nexport function HeaderLogo({\n children,\n flavor,\n}: {\n children: JSX.Element\n flavor: {\n light: string\n dark: string\n }\n}) {\n const styles = useStyles()\n return (\n <div class={styles().header.logoAndToggleContainer}>\n <button class={clsx(styles().header.logo)}>\n <span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>\n <span\n class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}\n >\n {children}\n </span>\n </button>\n </div>\n )\n}\n"],"names":["Header","children","class","className","rest","styles","useStyles","_el$","_tmpl$","_$spread","_$mergeProps","clsx","header","row","_$insert","HeaderLogo","flavor","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$5","nextSibling","_$effect","_p$","_v$","logoAndToggleContainer","_v$2","logo","_v$3","tanstackLogo","_v$4","flavorLogo","light","dark","e","_$className","t","a","o","undefined"],"mappings":";;;;AAIO,SAASA,OAAO;AAAA,EACrBC;AAAAA,EACAC,OAAOC;AAAAA,EACP,GAAGC;AAC4B,GAAG;AAClC,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,WAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eAEWC,KAAKN,OAAAA,EAASO,OAAOC,KAAK,eAAeV,UAAS;AAAA,MAAC;AAAA,IAAA,GACtDC,IAAI,GAAA,OAAA,IAAA;AAAAU,WAAAP,MAEPN,QAAQ;AAAA,WAAAM;AAAAA,EAAA,GAAA;AAGf;AAEO,SAASQ,WAAW;AAAA,EACzBd;AAAAA,EACAe;
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../src/components/header.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport function Header({\n children,\n class: className,\n ...rest\n}: JSX.IntrinsicElements['header']) {\n const styles = useStyles()\n return (\n <header\n class={clsx(styles().header.row, 'tsqd-header', className)}\n {...rest}\n >\n {children}\n </header>\n )\n}\n\nexport function HeaderLogo({\n children,\n flavor,\n onClick,\n}: {\n children: JSX.Element\n flavor: {\n light: string\n dark: string\n }\n onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>\n}) {\n const styles = useStyles()\n return (\n <div class={styles().header.logoAndToggleContainer}>\n <button class={clsx(styles().header.logo)} onClick={onClick}>\n <span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>\n <span\n class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}\n >\n {children}\n </span>\n </button>\n </div>\n )\n}\n"],"names":["Header","children","class","className","rest","styles","useStyles","_el$","_tmpl$","_$spread","_$mergeProps","clsx","header","row","_$insert","HeaderLogo","flavor","onClick","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$5","nextSibling","_$addEventListener","_$effect","_p$","_v$","logoAndToggleContainer","_v$2","logo","_v$3","tanstackLogo","_v$4","flavorLogo","light","dark","e","_$className","t","a","o","undefined","_$delegateEvents"],"mappings":";;;;AAIO,SAASA,OAAO;AAAA,EACrBC;AAAAA,EACAC,OAAOC;AAAAA,EACP,GAAGC;AAC4B,GAAG;AAClC,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,WAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eAEWC,KAAKN,OAAAA,EAASO,OAAOC,KAAK,eAAeV,UAAS;AAAA,MAAC;AAAA,IAAA,GACtDC,IAAI,GAAA,OAAA,IAAA;AAAAU,WAAAP,MAEPN,QAAQ;AAAA,WAAAM;AAAAA,EAAA,GAAA;AAGf;AAEO,SAASQ,WAAW;AAAA,EACzBd;AAAAA,EACAe;AAAAA,EACAC;AAQF,GAAG;AACD,QAAMZ,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAY,QAAAC,WAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAC,qBAAAL,OAAA,SAEwDH,SAAO,IAAA;AAAAH,WAAAS,OAKtDtB,QAAQ;AAAAyB,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MANHvB,OAAAA,EAASO,OAAOiB,wBAAsBC,OACjCnB,KAAKN,OAAAA,EAASO,OAAOmB,IAAI,GAACC,OAC1BrB,KAAKN,OAAAA,EAASO,OAAOqB,YAAY,GAACC,OAEtCvB,KAAKN,OAAAA,EAASO,OAAOuB,WAAWnB,OAAOoB,OAAOpB,OAAOqB,IAAI,CAAC;AAACT,cAAAD,IAAAW,KAAAC,UAAArB,OAAAS,IAAAW,IAAAV,GAAA;AAAAE,eAAAH,IAAAa,KAAAD,UAAAnB,OAAAO,IAAAa,IAAAV,IAAA;AAAAE,eAAAL,IAAAc,KAAAF,UAAAjB,OAAAK,IAAAc,IAAAT,IAAA;AAAAE,eAAAP,IAAAe,KAAAH,UAAAhB,OAAAI,IAAAe,IAAAR,IAAA;AAAA,aAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAK;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAzB;AAAAA,EAAA,GAAA;AAO5E;AAAC0B,eAAA,CAAA,OAAA,CAAA;"}
|
package/package.json
CHANGED
|
@@ -21,17 +21,19 @@ export function Header({
|
|
|
21
21
|
export function HeaderLogo({
|
|
22
22
|
children,
|
|
23
23
|
flavor,
|
|
24
|
+
onClick,
|
|
24
25
|
}: {
|
|
25
26
|
children: JSX.Element
|
|
26
27
|
flavor: {
|
|
27
28
|
light: string
|
|
28
29
|
dark: string
|
|
29
30
|
}
|
|
31
|
+
onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>
|
|
30
32
|
}) {
|
|
31
33
|
const styles = useStyles()
|
|
32
34
|
return (
|
|
33
35
|
<div class={styles().header.logoAndToggleContainer}>
|
|
34
|
-
<button class={clsx(styles().header.logo)}>
|
|
36
|
+
<button class={clsx(styles().header.logo)} onClick={onClick}>
|
|
35
37
|
<span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>
|
|
36
38
|
<span
|
|
37
39
|
class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}
|