@spectric/ui 0.0.21 → 0.0.22

package/src/components/tooltip/popover.ts

@@ -1,261 +1,299 @@
-
-import { customElement, property, query } from 'lit/decorators.js';
-import "./tooltip.css"
-export const PopoverElementTag = "spectric-popover"
+import { customElement, property, query } from "lit/decorators.js";
+import "./tooltip.css";
+export const PopoverElementTag = "spectric-popover";
 import { css, CSSResultGroup, html } from "lit-element";
 import { DomRenderable } from "../table";
-import { DisposableElement } from '../../classes/DisposibleElement';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-export type { TooltipProps, PopOverEvents }
+import { DisposableElement } from "../../classes/DisposibleElement";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+export type { TooltipProps, PopOverEvents };
 export enum TooltipPostions {
-    top = "top",
-    bottom = "bottom",
-    left = "left",
-    right = "right",
-    mouse = "mouse"
+  top = "top",
+  bottom = "bottom",
+  left = "left",
+  right = "right",
+  mouse = "mouse",
 }
 
-export type TooltipPostionsTypes = `${TooltipPostions}`
+export type TooltipPostionsTypes = `${TooltipPostions}`;
 interface TooltipProps {
-    /**
-     * How long you need to hover before the tooltip displays
-     */
-    delay?: number;
-    /**
-     * How long the fade in animation should run
-     */
-    animationDuration?: number;
-    /**
-     * Tooltip contents
-     */
-    text: DomRenderable
-    /**
-     * Where to anchor the tooltip
-     */
-    position?: TooltipPostionsTypes
-    /**
-     * Sets a max width for the contents you can disable this by setting to 0 or -1
-     */
-    maxWidth?: number
-    /**
-     * Container the tool tip will be attached to. 
-     */
-    portalTarget?: HTMLElement
+  /**
+   * How long you need to hover before the tooltip displays
+   */
+  delay?: number;
+  /**
+   * How long the fade in animation should run
+   */
+  animationDuration?: number;
+  /**
+   * Tooltip contents
+   */
+  text: DomRenderable;
+  /**
+   * Where to anchor the tooltip
+   */
+  position?: TooltipPostionsTypes;
+  /**
+   * Sets a max width for the contents you can disable this by setting to 0 or -1
+   */
+  maxWidth?: number;
+  /**
+   * Container the tool tip will be attached to.
+   */
+  portalTarget?: HTMLElement;
 
-    /** 
-     * The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element
-     */
-    triggerTarget?: HTMLElement
-    mouseOffsetX?: number
-    mouseOffsetY?: number
+  /**
+   * The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element
+   */
+  triggerTarget?: HTMLElement;
+  mouseOffsetX?: number;
+  mouseOffsetY?: number;
 }
 
 /**
- * Spectric tooltip will add a tooltip to any container 
+ * Spectric tooltip will add a tooltip to any container
  */
 @customElement(PopoverElementTag)
 export class PopoverElement extends DisposableElement implements TooltipProps {
-    @property({ type: Number, reflect: true })
-    delay: number = 100;
-    @property({ type: Number, reflect: true })
-    animationDuration: number = 0;
-    @property({ type: String, reflect: false })
-    text: DomRenderable = "";
-    @property({ type: String, reflect: true })
-    position: TooltipPostionsTypes = "right";
-    @property({ type: Number, reflect: true })
-    maxWidth?: number = 300;
-    @property({ type: Number, reflect: false })
-    mouseOffsetX = 10
-    @property({ type: Number, reflect: false })
-    mouseOffsetY = 0
-    @query(".spectric-popover-portal")
-    protected portalElement!: HTMLDivElement
-    protected mouseLocation?: { left: number; top: number; };
-    static styles?: CSSResultGroup | undefined = css`:host{max-height: 0px;
-    max-width: 0px;
-    display: none;
-    pointer-events:none;}`;
-    @property({ attribute: false })
-    portalTarget: HTMLElement = document.body
-    protected timer?: number;
-    protected open: boolean = false;
-    protected mouseframe?: number;
-    isOpen() {
-        return this.open
+  @property({ type: Number, reflect: true })
+  delay: number = 100;
+  @property({ type: Number, reflect: true })
+  animationDuration: number = 0;
+  @property({ type: String, reflect: false })
+  text: DomRenderable = "";
+  @property({ type: String, reflect: true })
+  position: TooltipPostionsTypes = "right";
+  @property({ type: Number, reflect: true })
+  maxWidth?: number = 300;
+  @property({ type: Number, reflect: false })
+  mouseOffsetX = 10;
+  @property({ type: Number, reflect: false })
+  mouseOffsetY = 0;
+  @query(".spectric-popover-portal")
+  protected portalElement!: HTMLDivElement;
+  protected mouseLocation?: { left: number; top: number };
+  static styles?: CSSResultGroup | undefined = css`
+    :host {
+      max-height: 0px;
+      max-width: 0px;
+      display: none;
+      pointer-events: none;
     }
+  `;
+  @property({ attribute: false })
+  portalTarget: HTMLElement = document.body;
+  protected timer?: number;
+  protected open: boolean = false;
+  protected mouseframe?: number;
+  isOpen() {
+    return this.open;
+  }
+  /**
+   * @default parentElement
+   */
+  @property({ attribute: false })
+  triggerTarget!: HTMLElement;
+  protected get target() {
+    return this.triggerTarget || this.parentElement;
+  }
+  constructor() {
+    super();
     /**
-     * @default parentElement
+     * Public method to trigger showing the tooltip programatically
      */
-    @property({ attribute: false })
-    triggerTarget!: HTMLElement;
-    protected get target() {
-        return this.triggerTarget || this.parentElement
+    this.showPopover = this.showPopover.bind(this);
+    this.hidePopover = this.hidePopover.bind(this);
+    this.addDisposableListener(
+      () => this.target,
+      "mousemove",
+      this._getMousePosition
+    );
+  }
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+  connectedCallback(): void {
+    super.connectedCallback();
+    //this.portalElement = document.createElement("div")
+    //this.portalElement.className = "spectric-tooltip-portal"
+  }
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    //this.portalElement.remove()
+    //@ts-ignore
+    //this.portalElement = undefined
+  }
+  protected _getMousePosition = (ev: MouseEvent) => {
+    this.mouseLocation = {
+      left: ev.clientX,
+      top: ev.clientY,
+    };
+    if (this.position == "mouse" && this.open && !this.mouseframe) {
+      this.mouseframe = requestAnimationFrame(() => this.positionTooltip());
     }
-    constructor() {
-        super()
-        /**
-         * Public method to trigger showing the tooltip programatically 
-         */
-        this.showPopover = this.showPopover.bind(this)
-        this.hidePopover = this.hidePopover.bind(this)
-        this.addDisposableListener(() => this.target, "mousemove", this._getMousePosition)
+  };
+  /**
+   * Public method to trigger hide the tooltip programatically
+   */
+  public hidePopover() {
+    if (this.timer) {
+      clearTimeout(this.timer);
     }
-    protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this
+    this.open = false;
+    this.portalElement.hidePopover();
+  }
+  /**
+   * Public method to trigger showing the tooltip programatically
+   */
+  public async showPopover() {
+    if (this.timer) {
+      clearTimeout(this.timer);
     }
-    connectedCallback(): void {
-        super.connectedCallback()
-        //this.portalElement = document.createElement("div")
-        //this.portalElement.className = "spectric-tooltip-portal"
+    await new Promise((resolve) => {
+      this.timer = window.setTimeout(resolve, this.delay);
+    });
+    // this.portalElement.className = `spectric-popover-portal ${this.position}`
+    // const tooltip = html`<div class="tooltip-container">
+    //     <span class="tooltip-caret"></span>
+    //     <div class="tooltip-content">${this.text}</div>
+    // </div>`
+    // render(tooltip, this.portalElement)
+    // //with the delay it is possible that the triggering element was removed or hidden lets check that it is visible
+    // if (!this.target || !this.target.checkVisibility()) {
+    //     return
+    // }
+    // //We need to append our tooltip and let the css updates apply before we can take measurements
+    // this.portalTarget.appendChild(this.portalElement)
+    if (!this.isConnected) {
+      return;
     }
-    disconnectedCallback(): void {
-        super.disconnectedCallback();
-        //this.portalElement.remove()
-        //@ts-ignore
-        //this.portalElement = undefined
+    this.portalElement.showPopover();
+    this.open = true;
+    requestAnimationFrame(this.positionTooltip);
+  }
+  protected applyStyle = (style: Record<string, string>) => {
+    Object.entries(style).forEach(([prop, value]) => {
+      this.portalElement.style.setProperty(prop, value);
+    });
+  };
+  protected positionTooltip = () => {
+    if (!this.target) {
+      //We got detached before the animation frame completed
+      return;
     }
-    protected _getMousePosition = (ev: MouseEvent) => {
-        this.mouseLocation = {
-            left: ev.clientX,
-            top: ev.clientY
-        }
-        if (this.position == "mouse" && this.open && !this.mouseframe) {
-            this.mouseframe = requestAnimationFrame(() => this.positionTooltip())
-        }
-    }
-    /**
-     * Public method to trigger hide the tooltip programatically 
-     */
-    public hidePopover() {
-        if (this.timer) {
-            clearTimeout(this.timer)
-        }
-        this.open = false
-        this.portalElement.hidePopover()
+    //Since we are attaching to a body we need to send the correct styles from the target portion of the dom to the portal element
+
+    let styles: Record<string, string> = {};
+    const bounds = this.target.getBoundingClientRect();
+    const portalBounds = this.portalElement.getBoundingClientRect();
+    if (this.target !== document.body) {
+      if (this.maxWidth && this.maxWidth > 0) {
+        portalBounds.width = Math.min(portalBounds.width, this.maxWidth);
+      }
     }
-    /**
-     * Public method to trigger showing the tooltip programatically 
-     */
-    public async showPopover() {
-        if (this.timer) {
-            clearTimeout(this.timer)
-        }
-        await new Promise(resolve => {
-            this.timer = window.setTimeout(resolve, this.delay)
-        })
-        // this.portalElement.className = `spectric-popover-portal ${this.position}`
-        // const tooltip = html`<div class="tooltip-container">
-        //     <span class="tooltip-caret"></span>
-        //     <div class="tooltip-content">${this.text}</div>
-        // </div>`
-        // render(tooltip, this.portalElement)
-        // //with the delay it is possible that the triggering element was removed or hidden lets check that it is visible
-        // if (!this.target || !this.target.checkVisibility()) {
-        //     return
-        // }
-        // //We need to append our tooltip and let the css updates apply before we can take measurements
-        // this.portalTarget.appendChild(this.portalElement)
-        this.portalElement.showPopover()
-        this.open = true
-        requestAnimationFrame(this.positionTooltip)
+    let location: {
+      left: string;
+      top: string;
+    };
+    if (this.position === "mouse" && this.mouseLocation) {
+      this.mouseframe = undefined;
+      location = {
+        left: this.mouseLocation.left + this.mouseOffsetX + "px",
+        top:
+          this.mouseLocation.top +
+          this.mouseOffsetY -
+          portalBounds.height / 2 +
+          "px",
+      };
+    } else if (this.position === "top") {
+      location = {
+        top: bounds.top - portalBounds.height + "px",
+        left: bounds.left + bounds.width / 2 - portalBounds.width / 2 + "px",
+      };
+    } else if (this.position === "bottom") {
+      location = {
+        top: bounds.bottom + "px",
+        left: bounds.left + bounds.width / 2 - portalBounds.width / 2 + "px",
+      };
+    } else if (this.position === "left") {
+      location = {
+        top:
+          Math.max(
+            0,
+            bounds.top + bounds.height / 2 - portalBounds.height / 2
+          ) + "px",
+        left: bounds.left - portalBounds.width + "px",
+      };
+    } else if (this.position === "right") {
+      location = {
+        top:
+          Math.max(
+            0,
+            bounds.top + bounds.height / 2 - portalBounds.height / 2
+          ) + "px",
+        left: bounds.right + "px",
+      };
+    } else {
+      location = { left: "0px", top: "0px" };
+      console.error("Unknown position... Maybe we sould implement auto?");
     }
-    protected applyStyle = (style: Record<string, string>) => {
-        Object.entries(style).forEach(([prop, value]) => {
-            this.portalElement.style.setProperty(prop, value)
-        })
+    this.applyStyle({ ...styles, ...location });
+    if (this.position !== "mouse") {
+      this.portalElement.animate(
+        { opacity: [0, 1] },
+        { duration: this.animationDuration }
+      );
     }
-    protected positionTooltip = () => {
-        if (!this.target) {
-            //We got detached before the animation frame completed
-            return
-        }
-        //Since we are attaching to a body we need to send the correct styles from the target portion of the dom to the portal element
-
-        let styles: Record<string, string> = {
-
-        }
-        const bounds = this.target.getBoundingClientRect()
-        const portalBounds = this.portalElement.getBoundingClientRect()
-        if (this.target !== document.body) {
-            if (this.maxWidth && this.maxWidth > 0) {
-                portalBounds.width = Math.min(portalBounds.width, this.maxWidth)
-            }
-        }
-        let location: {
-            left: string;
-            top: string;
-        };
-        if (this.position === "mouse" && this.mouseLocation) {
-            this.mouseframe = undefined
-            location = { left: this.mouseLocation.left + this.mouseOffsetX + "px", top: this.mouseLocation.top + this.mouseOffsetY - (portalBounds.height / 2) + "px" }
-        } else if (this.position === "top") {
-            location = {
-                top: bounds.top - portalBounds.height + "px",
-                left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
-            }
-        } else if (this.position === "bottom") {
-            location = {
-                top: bounds.bottom + "px",
-                left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
-            }
-        } else if (this.position === "left") {
-            location = {
-                top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
-                left: bounds.left - (portalBounds.width) + "px"
-            }
-        } else if (this.position === "right") {
-            location = {
-                top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
-                left: bounds.right + "px"
-            }
-        } else {
-            location = { left: "0px", top: "0px" };
-            console.error("Unknown position... Maybe we sould implement auto?")
-        }
-        this.applyStyle({ ...styles, ...location })
-        if (this.position !== "mouse") {
-            this.portalElement.animate({ opacity: [0, 1] }, { duration: this.animationDuration })
-        }
-    }
-    protected render() {
-        return html`<!-- ToolTip -->
-        <div class="spectric-popover-portal ${this.position}" popover>
+  };
+  protected render() {
+    return html`<!-- ToolTip -->
+      <div class="spectric-popover-portal ${this.position}" popover>
         <div class="tooltip-container">
-            <span class="tooltip-caret"></span>
-            <div class="tooltip-content">${this.text}<slot></slot></div>
+          <span class="tooltip-caret"></span>
+          <div class="tooltip-content">${this.text}<slot></slot></div>
         </div>
-       </div>`
-    }
+      </div>`;
+  }
 }
 
 interface PopOverEvents {
-    //'open': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
-    //'filter': (event: CustomEvent<FilterEvent>) => void;
+  //'open': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+  //'filter': (event: CustomEvent<FilterEvent>) => void;
 }
 
-
 declare global {
-    interface HTMLElementTagNameMap {
-        [PopoverElementTag]: HTMLElementTagWithEvents<PopoverElement, PopOverEvents>
-
+  interface HTMLElementTagNameMap {
+    [PopoverElementTag]: HTMLElementTagWithEvents<
+      PopoverElement,
+      PopOverEvents
+    >;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link TooltipElement}
+       */
+      [PopoverElementTag]: ReactElementWithPropsAndEvents<
+        PopoverElement,
+        TooltipProps,
+        PopOverEvents
+      >;
     }
+  }
+  namespace React {
     namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * @see {@link TooltipElement}
-             */
-            [PopoverElementTag]: ReactElementWithPropsAndEvents<PopoverElement, TooltipProps, PopOverEvents>;
-        }
-    }
-    namespace React {
-        namespace JSX {
-            interface IntrinsicElements {
-                /**
-                 * @see {@link TooltipElement}
-                 */
-                [PopoverElementTag]: ReactElementWithPropsAndEvents<PopoverElement, TooltipProps, PopOverEvents>
-            }
-        }
+      interface IntrinsicElements {
+        /**
+         * @see {@link TooltipElement}
+         */
+        [PopoverElementTag]: ReactElementWithPropsAndEvents<
+          PopoverElement,
+          TooltipProps,
+          PopOverEvents
+        >;
+      }
     }
+  }
 }

package/src/stories/Dialog.stories.ts

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { useArgs } from "@storybook/client-api";
+import { type Props } from "../components/dialog";
+import "../components/dialog";
+import { html } from "lit";
+import "./fixtures/ExampleContent";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+const meta = {
+  title: "UI/Dialog",
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  component: "spectric-dialog",
+  render: () => {
+    const [args, updateArgs] = useArgs();
+    console.log(args);
+    return html`
+      <spectric-dialog
+        @close=${() => updateArgs({ open: false })}
+        ?open=${args.open}
+        ?closeOnEscape=${args.closeOnEscape}
+        ?closeOnOutsideClick=${args.closeOnOutsideClick}
+        ?hideBackdrop=${args.hideBackdrop}
+        ?dismissable=${args.dismissable}
+        title=${args.title || ""}
+      >
+        <div>
+          This is my content
+          <lorum-ipsum style="width:400px;display:block"></lorum-ipsum>
+        </div>
+        ${args.footer && args.footer != ""
+          ? html` <div slot="footer">${html`${unsafeHTML(args.footer)}`}</div> `
+          : null}
+      </spectric-dialog>
+    `;
+  },
+  args: {
+    closeOnEscape: false,
+    closeOnOutsideClick: false,
+    dismissable: true,
+    hideBackdrop: false,
+    open: true,
+    title: "Basic Dialog",
+    footer: "<spectric-button>hello</spectric-button>",
+  },
+  argTypes: {
+    closeOnEscape: { control: { type: "boolean" } },
+    closeOnOutsideClick: { control: { type: "boolean" } },
+    dismissable: { control: { type: "boolean" } },
+    hideBackdrop: { control: { type: "boolean" } },
+    open: { control: { type: "boolean" } },
+    title: { control: { type: "text" } },
+    footer: { control: { type: "text" } },
+  },
+} satisfies Meta<Props>;
+
+export default meta;
+type Story = StoryObj<Props>;
+
+export const Default: Story = {};