68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
const p = {
|
|
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 l(t = {}) {
|
|
const { children: e, theme: r, chakraProviderProps: n, ...o } = t;
|
|
return {
|
|
children: e,
|
|
theme: r,
|
|
chakraProviderProps: n,
|
|
badgeProps: {
|
|
...p,
|
|
...o,
|
|
fontFamily: o.fontFamily || "var(--uikit-font-family, inherit)"
|
|
}
|
|
};
|
|
}
|
|
class m extends HTMLElement {
|
|
constructor() {
|
|
super(), this._props = {}, this._root = null;
|
|
}
|
|
connectedCallback() {
|
|
const { createRoot: e } = i();
|
|
this._root || (this._root = e(this)), this.renderComponent();
|
|
}
|
|
disconnectedCallback() {
|
|
this._root && (this._root.unmount(), this._root = null);
|
|
}
|
|
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: c, chakraProviderProps: d, badgeProps: h } = l(this._props);
|
|
this._root.render(
|
|
e.createElement(
|
|
r,
|
|
{
|
|
theme: c || o,
|
|
resetCSS: !1,
|
|
...s || {},
|
|
...d || {}
|
|
},
|
|
e.createElement(n, h, a)
|
|
)
|
|
);
|
|
}
|
|
}
|
|
customElements.get("uikit-g-badge") || customElements.define("uikit-g-badge", m);
|