77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
const c = {
|
|
fontSize: "sm",
|
|
colorScheme: "teal",
|
|
variant: "subtle",
|
|
px: 3,
|
|
py: 2,
|
|
borderRadius: "lg",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
textTransform: "none"
|
|
};
|
|
function i() {
|
|
const t = window.__UIKIT_REMOTE_DEPS__, e = [];
|
|
if (t?.React || e.push("React"), t?.createRoot || e.push("createRoot"), t?.ChakraProvider || e.push("ChakraProvider"), t?.Badge || e.push("Badge"), e.length)
|
|
throw new Error(
|
|
`[uikit-g-badge] Missing remote dependencies: ${e.join(", ")}. Set window.__UIKIT_REMOTE_DEPS__ before loading the remote component.`
|
|
);
|
|
return t;
|
|
}
|
|
function d(t = {}) {
|
|
const { children: e, theme: r, chakraProviderProps: n, ...o } = t;
|
|
return {
|
|
children: e,
|
|
theme: r,
|
|
chakraProviderProps: n,
|
|
badgeProps: {
|
|
...c,
|
|
...o,
|
|
fontFamily: o.fontFamily || "var(--uikit-font-family, inherit)"
|
|
}
|
|
};
|
|
}
|
|
class l extends HTMLElement {
|
|
constructor() {
|
|
super(), this._props = {}, this._root = null, this._unmountTimer = null;
|
|
}
|
|
connectedCallback() {
|
|
this._unmountTimer && (clearTimeout(this._unmountTimer), this._unmountTimer = null);
|
|
const { createRoot: e } = i();
|
|
this._root || (this._root = e(this)), this.renderComponent();
|
|
}
|
|
disconnectedCallback() {
|
|
!this._root || this._unmountTimer || (this._unmountTimer = setTimeout(() => {
|
|
this._unmountTimer = null, this._root && (this._root.unmount(), this._root = null);
|
|
}, 0));
|
|
}
|
|
set componentProps(e) {
|
|
this._props = e ?? {}, this.isConnected && this.renderComponent();
|
|
}
|
|
get componentProps() {
|
|
return this._props;
|
|
}
|
|
renderComponent() {
|
|
if (!this._root) return;
|
|
const {
|
|
React: e,
|
|
ChakraProvider: r,
|
|
Badge: n,
|
|
theme: o,
|
|
chakraProviderProps: s
|
|
} = i(), { children: a, theme: h, chakraProviderProps: m, badgeProps: u } = d(this._props);
|
|
this._root.render(
|
|
e.createElement(
|
|
r,
|
|
{
|
|
theme: h || o,
|
|
resetCSS: !1,
|
|
...s || {},
|
|
...m || {}
|
|
},
|
|
e.createElement(n, u, a)
|
|
)
|
|
);
|
|
}
|
|
}
|
|
customElements.get("uikit-g-badge") || customElements.define("uikit-g-badge", l);
|