@plusui/library 0.1.0

package/cdn/components/popover/popover.js

@@ -0,0 +1,417 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { E, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { o } from '../../query-assigned-elements-B8Evmg7O.js';
+import { c as computePosition, o as offset, f as flip, s as shift, a as arrow, b as autoUpdate } from '../../floating-ui.dom-OBaMlALa.js';
+import Tailwind from '../base/tailwind-base.js';
+import { popoverStyle } from './popover.style.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+var PopoverTrigger;
+(function (PopoverTrigger) {
+    PopoverTrigger["Hover"] = "hover";
+    PopoverTrigger["Click"] = "click";
+})(PopoverTrigger || (PopoverTrigger = {}));
+var PopoverPosition;
+(function (PopoverPosition) {
+    PopoverPosition["Top"] = "top";
+    PopoverPosition["TopStart"] = "top-start";
+    PopoverPosition["TopEnd"] = "top-end";
+    PopoverPosition["Bottom"] = "bottom";
+    PopoverPosition["BottomStart"] = "bottom-start";
+    PopoverPosition["BottomEnd"] = "bottom-end";
+    PopoverPosition["Left"] = "left";
+    PopoverPosition["LeftStart"] = "left-start";
+    PopoverPosition["LeftEnd"] = "left-end";
+    PopoverPosition["Right"] = "right";
+    PopoverPosition["RightStart"] = "right-start";
+    PopoverPosition["RightEnd"] = "right-end";
+})(PopoverPosition || (PopoverPosition = {}));
+/**
+ * @tag plus-popover
+ * @summary Popover component that displays content in a floating panel.
+ *
+ * @slot - The target element that triggers the popover
+ * @slot icon - Custom icon for the popover
+ * @slot title - The popover title
+ * @slot actions - Actions like close button
+ * @slot content - The main content inside the popover
+ *
+ * @csspart popover - The popover container element
+ * @csspart arrow - The popover arrow indicator
+ * @csspart title - The popover title
+ * @csspart close - The close button area
+ * @csspart content - The main content inside the popover
+ *
+ * @event plus-popover-open - Emitted when the popover is opened
+ * @event plus-popover-close - Emitted when the popover is closed
+ * @event plus-popover-dismiss - Emitted when the popover is dismissed via close button
+ *
+ * @example
+ * ```html
+ * <plus-popover>
+ *   <plus-button>Click me</plus-button>
+ *   <div slot="title">Popover Title</div>
+ *   <div slot="content">Popover content goes here</div>
+ * </plus-popover>
+ * ```
+ */
+class PlusPopover extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * The size of the popover.
+         *
+         * Available options:
+         * - `sm` (small)
+         * - `md` (medium - default)
+         * - `lg` (large)
+         *
+         * @type {'sm' | 'md' | 'lg'}
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * The position of the popover relative to the target element.
+         *
+         * Available options:
+         * - `top` (default)
+         * - `top-start`
+         * - `top-end`
+         * - `bottom`
+         * - `bottom-start`
+         * - `bottom-end`
+         * - `left`
+         * - `left-start`
+         * - `left-end`
+         * - `right`
+         * - `right-start`
+         * - `right-end`
+         *
+         * @type {PopoverPosition}
+         * @default PopoverPosition.Top
+         */
+        this.orientation = PopoverPosition.Top;
+        /**
+         * Determines how the popover is triggered.
+         *
+         * Available options:
+         * - `click` (default) - Popover toggles on click.
+         * - `hover` - Popover appears on hover.
+         *
+         * @type {'click' | 'hover'}
+         * @default 'click'
+         */
+        this.trigger = PopoverTrigger.Click;
+        /**
+         * The header title of the popover.
+         *
+         * If a slot with `name="title"` is provided, this text will be ignored.
+         *
+         * @type {string}
+         * @default 'Title'
+         */
+        this.headerText = 'Title';
+        /**
+         * The status of the popover, which affects its styling.
+         *
+         * Available options:
+         * - `success` (green)
+         * - `warning` (yellow)
+         * - `danger` (red)
+         * - `info` (blue)
+         * - `primary` (default theme color)
+         * - `default` (gray - default)
+         *
+         * @type {'success' | 'warning' | 'danger' | 'info' | 'primary' | 'default'}
+         * @default 'default'
+         */
+        this.status = 'default';
+        /**
+         * Determines whether the popover can be dismissed by clicking the close button.
+         *
+         * - `true` (default) - Popover can be closed.
+         * - `false` - The close button is hidden.
+         *
+         * @type {boolean}
+         * @default true
+         */
+        this.dismissable = true;
+        /**
+         * Determines whether a status icon should be displayed in the popover.
+         *
+         * - `true` (default) - An icon representing the status will be displayed.
+         * - `false` - No icon will be displayed.
+         *
+         * @type {boolean}
+         * @default true
+         */
+        this.statusIcon = true;
+        /**
+         * Determines whether the arrow should be displayed.
+         *
+         * - `true` (default) - Arrow will be displayed.
+         * - `false` - Arrow will be hidden.
+         *
+         * @type {boolean}
+         * @default true
+         */
+        this.showArrow = true;
+        /**
+         * Controls the visibility of the popover.
+         *
+         * @private
+         * @type {boolean}
+         * @default false
+         */
+        this.isVisible = false;
+        this.updatePosition = () => {
+            const popover = this.getPopover();
+            if (!popover || !this.targetElement)
+                return;
+            // Ensure the popover is visible before computing position
+            if (!this.isVisible)
+                return;
+            // Reset any existing styles
+            Object.assign(popover.style, {
+                left: '',
+                top: '',
+                right: '',
+                bottom: '',
+            });
+            computePosition(this.targetElement, popover, {
+                placement: this.orientation,
+                middleware: [
+                    offset(10),
+                    flip({
+                        fallbackPlacements: [
+                            'top',
+                            'top-start',
+                            'top-end',
+                            'bottom',
+                            'bottom-start',
+                            'bottom-end',
+                            'left',
+                            'left-start',
+                            'left-end',
+                            'right',
+                            'right-start',
+                            'right-end',
+                        ],
+                        padding: 8,
+                    }),
+                    shift({ padding: 8 }),
+                    this.showArrow
+                        ? arrow({ element: this.arrowElement, padding: 4 })
+                        : undefined,
+                ].filter(Boolean),
+            }).then(({ x, y, middlewareData, placement }) => {
+                // Apply the computed position
+                Object.assign(popover.style, {
+                    position: 'absolute',
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+                // Update arrow position if needed
+                if (this.showArrow && this.arrowElement) {
+                    const { x: arrowX, y: arrowY } = middlewareData.arrow || {};
+                    const staticSide = {
+                        top: 'bottom',
+                        right: 'left',
+                        bottom: 'top',
+                        left: 'right',
+                    }[placement.split('-')[0]];
+                    Object.assign(this.arrowElement.style, {
+                        left: arrowX != null ? `${arrowX}px` : '',
+                        top: arrowY != null ? `${arrowY}px` : '',
+                        [staticSide]: '-4px',
+                    });
+                }
+            });
+        };
+        this.handleMouseEnter = () => {
+            this.isVisible = true;
+            this.updatePosition();
+            this.cleanup = autoUpdate(this.targetElement, this.getPopover(), this.updatePosition);
+            this.emit('plus-popover-open');
+        };
+        this.handleMouseLeave = () => {
+            this.closePopover();
+        };
+        this.handleClick = () => {
+            this.isVisible = !this.isVisible;
+            if (this.isVisible) {
+                this.updatePosition();
+                this.cleanup = autoUpdate(this.targetElement, this.getPopover(), this.updatePosition);
+                this.emit('plus-popover-open');
+            }
+            else {
+                this.cleanupAutoUpdate();
+                this.emit('plus-popover-close');
+            }
+        };
+        this.closePopover = (dismiss = false) => {
+            this.isVisible = false;
+            this.cleanupAutoUpdate();
+            this.emit('plus-popover-close');
+            if (dismiss) {
+                this.emit('plus-popover-dismiss');
+            }
+        };
+        this.handleOutsideClick = (event) => {
+            const path = event.composedPath();
+            const popover = this.getPopover();
+            if (popover &&
+                !path.includes(popover) &&
+                !path.includes(this.targetElement)) {
+                this.isVisible = false;
+                this.cleanupAutoUpdate();
+            }
+        };
+    }
+    getPopover() {
+        return this.shadowRoot?.querySelector('.popover') || null;
+    }
+    cleanupAutoUpdate() {
+        if (this.cleanup) {
+            this.cleanup();
+            this.cleanup = undefined;
+        }
+    }
+    _cleanupTarget() {
+        if (this.targetElement) {
+            this.targetElement.removeEventListener('mouseenter', this.handleMouseEnter);
+            this.targetElement.removeEventListener('mouseleave', this.handleMouseLeave);
+            this.targetElement.removeEventListener('click', this.handleClick);
+        }
+        document.removeEventListener('click', this.handleOutsideClick, true);
+        this.cleanupAutoUpdate();
+        this.isVisible = false;
+    }
+    handleSlotChange() {
+        const newTarget = this.slots[0];
+        if (newTarget && newTarget !== this.targetElement) {
+            if (this.targetElement) {
+                this._cleanupTarget();
+            }
+            this.targetElement = newTarget;
+            this._setupPopover();
+        }
+    }
+    _setupPopover() {
+        if (!this.targetElement)
+            return;
+        if (this.trigger === PopoverTrigger.Hover) {
+            this.targetElement.addEventListener('mouseenter', this.handleMouseEnter);
+            this.targetElement.addEventListener('mouseleave', this.handleMouseLeave);
+        }
+        else if (this.trigger === PopoverTrigger.Click) {
+            this.targetElement.addEventListener('click', this.handleClick);
+        }
+        document.addEventListener('click', this.handleOutsideClick, true);
+    }
+    firstUpdated() {
+        this.arrowElement = this.shadowRoot?.querySelector('.arrow');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._cleanupTarget();
+    }
+    render() {
+        const { host, arrow, headerWrapper, headerLeft, content, headerRight, title, } = popoverStyle({
+            isVisible: this.isVisible,
+            size: this.size,
+            status: this.status,
+        });
+        const statusIconMap = {
+            default: 'circle-plus',
+            success: 'circle-check',
+            warning: 'triangle-exclamation',
+            danger: 'circle-exclamation',
+            info: 'circle-info',
+            primary: 'circle-plus',
+        };
+        return x `
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      <div
+        class="${host()}"
+        part="popover"
+        role="dialog"
+        aria-hidden=${!this.isVisible}
+        aria-labelledby="popover-title"
+        aria-describedby="popover-content"
+      >
+        <header class="${headerWrapper()}">
+          <div class=${headerLeft()}>
+            <slot name="icon">
+              ${this.statusIcon
+            ? x `<plus-svg-icon
+                    iconName=${statusIconMap[this.status]}
+                  ></plus-svg-icon>`
+            : E}
+            </slot>
+            <div class="${title()}" part="title" id="popover-title">
+              <slot name="title"><span>${this.headerText}</span></slot>
+            </div>
+          </div>
+
+          <div class=${headerRight()} part="close">
+            <slot name="actions">
+              ${this.dismissable &&
+            x `<plus-svg-icon
+                iconName="xmark"
+                @click=${() => this.closePopover(true)}
+                role="button"
+                tabindex="0"
+                aria-label="Close popover"
+              ></plus-svg-icon>`}
+            </slot>
+          </div>
+        </header>
+        <main class="${content()}" part="content" id="popover-content">
+          <slot name="content">${this.text}</slot>
+        </main>
+        ${this.showArrow
+            ? x `<div class=${arrow()} part="arrow"></div>`
+            : E}
+      </div>
+    `;
+    }
+}
+__decorate([
+    o({ flatten: true })
+], PlusPopover.prototype, "slots", void 0);
+__decorate([
+    n({ type: String })
+], PlusPopover.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusPopover.prototype, "orientation", void 0);
+__decorate([
+    n({ type: String })
+], PlusPopover.prototype, "trigger", void 0);
+__decorate([
+    n({ type: String })
+], PlusPopover.prototype, "text", void 0);
+__decorate([
+    n({ type: String, attribute: 'header-text' })
+], PlusPopover.prototype, "headerText", void 0);
+__decorate([
+    n({ type: String })
+], PlusPopover.prototype, "status", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value !== 'false' })
+], PlusPopover.prototype, "dismissable", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value !== 'false' })
+], PlusPopover.prototype, "statusIcon", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value !== 'false' })
+], PlusPopover.prototype, "showArrow", void 0);
+__decorate([
+    r()
+], PlusPopover.prototype, "isVisible", void 0);
+
+export { PlusPopover, PlusPopover as default };

package/cdn/components/popover/popover.style.js

@@ -0,0 +1,67 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const popoverStyle = ce({
+    slots: {
+        host: 'plus-ui-element popover fixed z-[1000] shadow-md bg-color-surface rounded-lg flex-col transition-all duration-200 ease-in-out transform opacity-0 scale-95',
+        arrow: 'arrow absolute size-2 rotate-45 bg-inherit',
+        headerWrapper: 'header-wrapper flex flex-row justify-between',
+        headerLeft: 'left-side flex flex-row items-center text-inherit',
+        title: 'header font-semibold text-color-default',
+        headerRight: 'right-side cursor-pointer text-color-default',
+        content: 'contents',
+    },
+    variants: {
+        size: {
+            sm: {
+                host: 'w-60 p-3 gap-3',
+                headerLeft: 'text-md gap-1.5',
+                headerRight: 'text-md ml-1.5',
+            },
+            md: {
+                host: 'w-64 p-4 gap-4',
+                headerLeft: 'text-lg gap-2',
+                headerRight: 'text-lg ml-2',
+            },
+            lg: {
+                host: 'w-72 p-6 gap-6',
+                headerLeft: 'text-xl gap-3',
+                headerRight: 'text-xl ml-3',
+            },
+        },
+        isVisible: {
+            true: {
+                host: 'flex opacity-100 scale-100',
+            },
+            false: {
+                host: 'opacity-0 scale-95 pointer-events-none hidden',
+            },
+        },
+        status: {
+            success: {
+                headerWrapper: 'text-color-success',
+            },
+            warning: {
+                headerWrapper: 'text-color-warning',
+            },
+            danger: {
+                headerWrapper: 'text-color-danger',
+            },
+            primary: {
+                headerWrapper: 'text-color-primary',
+            },
+            default: {
+                headerWrapper: 'text-color-default',
+            },
+            info: {
+                headerWrapper: 'text-color-info',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        isVisible: false,
+        status: 'default',
+    },
+});
+
+export { popoverStyle };

package/cdn/components/radio/index.js

@@ -0,0 +1,14 @@
+import PlusRadio from './radio.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../../query-CHb9Ft_d.js';
+import '../../base-Cl6v8-BZ.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './radio.style.js';
+import '../../index-B9iart53.js';
+import '../../style-map-DC_vNus2.js';
+import '../../directive-DZCF8pFJ.js';
+
+customElements.define('plus-radio', PlusRadio);