@moser-inc/moser-labs-custom-elements 0.0.0

package/dist/apiCustomElement.d.ts

@@ -0,0 +1,74 @@
+import { type ComponentOptionsMixin, type ComponentOptionsWithArrayProps, type ComponentOptionsWithObjectProps, type ComponentOptionsWithoutProps, type ComponentPropsOptions, type ComponentPublicInstance, type ComputedOptions, type EmitsOptions, type MethodOptions, type RenderFunction, type SetupContext, type ComponentInternalInstance, type RootHydrateFunction, type ExtractPropTypes, type ConcreteComponent, type ComponentInjectOptions, type SlotsType } from 'vue';
+export type VueElementConstructor<P = {}> = {
+    new (initialProps?: Record<string, any>): VueElement & P;
+};
+export interface DefineCustomElementConfig {
+    /**
+     * Render inside a shadow root DOM element
+     * @default true
+     */
+    shadowRoot?: boolean;
+}
+export declare function defineCustomElement<Props, RawBindings = object>(setup: (props: Readonly<Props>, ctx: SetupContext) => RawBindings | RenderFunction, config?: DefineCustomElementConfig): VueElementConstructor<Props>;
+export declare function defineCustomElement<Props = {}, RawBindings = {}, D = {}, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = EmitsOptions, EE extends string = string, I extends ComponentInjectOptions = {}, II extends string = string, S extends SlotsType = {}>(options: ComponentOptionsWithoutProps<Props, RawBindings, D, C, M, Mixin, Extends, E, EE, I, II, S> & {
+    styles?: string[];
+}, config?: DefineCustomElementConfig): VueElementConstructor<Props>;
+export declare function defineCustomElement<PropNames extends string, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = Record<string, any>, EE extends string = string, I extends ComponentInjectOptions = {}, II extends string = string, S extends SlotsType = {}>(options: ComponentOptionsWithArrayProps<PropNames, RawBindings, D, C, M, Mixin, Extends, E, EE, I, II, S> & {
+    styles?: string[];
+}, config?: DefineCustomElementConfig): VueElementConstructor<{
+    [K in PropNames]: any;
+}>;
+export declare function defineCustomElement<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = Record<string, any>, EE extends string = string, I extends ComponentInjectOptions = {}, II extends string = string, S extends SlotsType = {}>(options: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE, I, II, S> & {
+    styles?: string[];
+}, config?: DefineCustomElementConfig): VueElementConstructor<ExtractPropTypes<PropsOptions>>;
+export declare function defineCustomElement(options: {
+    new (...args: any[]): ComponentPublicInstance;
+}, config?: DefineCustomElementConfig): VueElementConstructor;
+/*! #__NO_SIDE_EFFECTS__ */
+export declare const defineSSRCustomElement: typeof defineCustomElement;
+declare const BaseClass: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+type InnerComponentDef = ConcreteComponent & {
+    styles?: string[];
+};
+export declare class VueElement extends BaseClass {
+    private _def;
+    private _props;
+    private _config;
+    /**
+     * @internal
+     */
+    _instance: ComponentInternalInstance | null;
+    private _connected;
+    private _resolved;
+    private _numberProps;
+    private _styles?;
+    private _slots?;
+    private _ob?;
+    constructor(_def: InnerComponentDef, _props?: Record<string, any>, _config?: DefineCustomElementConfig, hydrate?: RootHydrateFunction);
+    get _root(): Element | ShadowRoot | null;
+    connectedCallback(): void;
+    parsedCallback(): void;
+    _connect(): void;
+    disconnectedCallback(): void;
+    /**
+     * resolve inner component definition (handle possible async component)
+     */
+    private _resolveDef;
+    private _resolveProps;
+    protected _setAttr(key: string): void;
+    /**
+     * @internal
+     */
+    protected _getProp(key: string): any;
+    /**
+     * @internal
+     */
+    protected _setProp(key: string, val: any, shouldReflect?: boolean, shouldUpdate?: boolean): void;
+    private _update;
+    private _createVNode;
+    private _applyStyles;
+}
+export {};

package/dist/custom-elements.d.ts

@@ -0,0 +1 @@
+export * from './main'

package/dist/main.d.ts

@@ -0,0 +1,45 @@
+import type Keycloak from 'keycloak-js';
+declare const LabsAppSwitcher: import("./apiCustomElement").VueElementConstructor<{}>;
+export { LabsAppSwitcher };
+/**
+ * Call this function to register all provided custom elements at once.
+ *
+ * @example
+ * ```ts
+ * import { registerCustomElements } from '@moser-inc/moser-labs-custom-elements';
+ * registerCustomElements();
+ * ```
+ *
+ * Then use elements in your HTML or framework of choice.
+ *
+ * @example
+ * ```html
+ * <labs-app-switcher></labs-app-switcher>
+ * ```
+ */
+export declare function registerCustomElements(): void;
+/**
+ * Call this function to make sure custom elements have access to the Keycloak
+ * access token.
+ *
+ * @example
+ * ```ts
+ * import Keycloak from 'keycloak-js';
+ * import { authenticateCustomElements, registerCustomElements } from '@moser-inc/moser-labs-custom-elements';
+ *
+ * const keycloak = new Keycloak('/keycloak.json');
+ *
+ * keycloak.init({ onLoad: 'login-required' }).then((isAuthenticated) => {
+ *   if (!isAuthenticated) return;
+ *
+ *   authenticateCustomElements(keycloak);
+ *   registerCustomElements();
+ * });
+ * ```
+ */
+export declare function authenticateCustomElements(keycloak: Keycloak): void;
+declare global {
+    interface Window {
+        __CE_KEYCLOAK_TOKEN__?: string;
+    }
+}