@plusui/library 0.1.0

package/cdn/components/popconfirm/popconfirm.js

@@ -0,0 +1,476 @@
+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 { popconfirmStyle } from './popconfirm.style.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+var PopconfirmTrigger;
+(function (PopconfirmTrigger) {
+    PopconfirmTrigger["Hover"] = "hover";
+    PopconfirmTrigger["Click"] = "click";
+})(PopconfirmTrigger || (PopconfirmTrigger = {}));
+var PopconfirmPosition;
+(function (PopconfirmPosition) {
+    PopconfirmPosition["Top"] = "top";
+    PopconfirmPosition["TopStart"] = "top-start";
+    PopconfirmPosition["TopEnd"] = "top-end";
+    PopconfirmPosition["Bottom"] = "bottom";
+    PopconfirmPosition["BottomStart"] = "bottom-start";
+    PopconfirmPosition["BottomEnd"] = "bottom-end";
+    PopconfirmPosition["Left"] = "left";
+    PopconfirmPosition["LeftStart"] = "left-start";
+    PopconfirmPosition["LeftEnd"] = "left-end";
+    PopconfirmPosition["Right"] = "right";
+    PopconfirmPosition["RightStart"] = "right-start";
+    PopconfirmPosition["RightEnd"] = "right-end";
+})(PopconfirmPosition || (PopconfirmPosition = {}));
+/**
+ * @tag plus-popconfirm
+ * @summary Popconfirm component that displays a confirmation dialog in a floating panel.
+ *
+ * @slot - The target element that triggers the popconfirm
+ * @slot icon - Custom icon for the popconfirm
+ * @slot title - The popconfirm title
+ * @slot header - The entire header section
+ * @slot footer - The footer section with action buttons
+ * @slot content - The main content inside the popconfirm
+ *
+ * @csspart popconfirm - The popconfirm container element
+ * @csspart arrow - The popconfirm arrow indicator
+ * @csspart header - The popconfirm header section
+ * @csspart title - The popconfirm title
+ * @csspart content - The main content inside the popconfirm
+ * @csspart footer - The footer section with action buttons
+ *
+ * @event plus-popconfirm-open - Emitted when the popconfirm is opened
+ * @event plus-popconfirm-close - Emitted when the popconfirm is closed
+ * @event plus-popconfirm-confirm - Emitted when the confirm button is clicked
+ * @event plus-popconfirm-cancel - Emitted when the cancel button is clicked
+ *
+ * @example
+ * ```html
+ * <plus-popconfirm>
+ *   <plus-button>Delete</plus-button>
+ *   <div slot="title">Are you sure?</div>
+ *   <div slot="content">This action cannot be undone.</div>
+ * </plus-popconfirm>
+ * ```
+ */
+class PlusPopconfirm extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * The size of the popconfirm.
+         *
+         * Available options:
+         * - `sm` (small)
+         * - `md` (medium - default)
+         * - `lg` (large)
+         *
+         * @type {'sm' | 'md' | 'lg'}
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * The position of the popconfirm 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 {PopconfirmPosition}
+         * @default PopconfirmPosition.Top
+         */
+        this.orientation = PopconfirmPosition.Top;
+        /**
+         * Determines how the popconfirm is triggered.
+         *
+         * Available options:
+         * - `click` (default) - Popconfirm toggles on click.
+         * - `hover` - Popconfirm appears on hover.
+         *
+         * @type {'click' | 'hover'}
+         * @default 'click'
+         */
+        this.trigger = PopconfirmTrigger.Click;
+        /**
+         * The title of the popconfirm.
+         *
+         * @type {string}
+         * @default 'Are you sure?'
+         */
+        this.title = 'Are you sure?';
+        /**
+         * The text for the confirm button.
+         *
+         * @type {string}
+         * @default 'Confirm'
+         */
+        this.confirmText = 'Confirm';
+        /**
+         * The text for the cancel button.
+         *
+         * @type {string}
+         * @default 'Cancel'
+         */
+        this.cancelText = 'Cancel';
+        /**
+         * The status of the popconfirm, 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 a status icon should be displayed in the popconfirm.
+         *
+         * - `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 popconfirm.
+         *
+         * @private
+         * @type {boolean}
+         * @default false
+         */
+        this.isVisible = false;
+        this.updatePosition = () => {
+            const popconfirm = this.getPopconfirm();
+            if (!popconfirm || !this.targetElement)
+                return;
+            // Ensure the popconfirm is visible before computing position
+            if (!this.isVisible)
+                return;
+            // Reset any existing styles
+            Object.assign(popconfirm.style, {
+                left: '',
+                top: '',
+                right: '',
+                bottom: '',
+            });
+            computePosition(this.targetElement, popconfirm, {
+                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(popconfirm.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.getPopconfirm(), this.updatePosition);
+            this.emit('plus-popconfirm-open');
+        };
+        this.handleMouseLeave = () => {
+            this.closePopconfirm();
+        };
+        this.handleClick = () => {
+            this.isVisible = !this.isVisible;
+            if (this.isVisible) {
+                this.updatePosition();
+                this.cleanup = autoUpdate(this.targetElement, this.getPopconfirm(), this.updatePosition);
+                this.emit('plus-popconfirm-open');
+            }
+            else {
+                this.cleanupAutoUpdate();
+                this.emit('plus-popconfirm-close');
+            }
+        };
+        this.closePopconfirm = () => {
+            this.isVisible = false;
+            this.cleanupAutoUpdate();
+            this.emit('plus-popconfirm-close');
+            // Return focus to the trigger element
+            if (this.targetElement) {
+                this.targetElement.focus();
+            }
+        };
+        this.handleConfirm = () => {
+            this.closePopconfirm();
+            this.emit('plus-popconfirm-confirm');
+        };
+        this.handleCancel = () => {
+            this.closePopconfirm();
+            this.emit('plus-popconfirm-cancel');
+        };
+        this.handleOutsideClick = (event) => {
+            const path = event.composedPath();
+            const popconfirm = this.getPopconfirm();
+            if (popconfirm &&
+                !path.includes(popconfirm) &&
+                !path.includes(this.targetElement)) {
+                this.isVisible = false;
+                this.cleanupAutoUpdate();
+            }
+        };
+    }
+    getPopconfirm() {
+        return this.shadowRoot?.querySelector('.popconfirm') || 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._setupPopconfirm();
+        }
+    }
+    _setupPopconfirm() {
+        if (!this.targetElement)
+            return;
+        if (this.trigger === PopconfirmTrigger.Hover) {
+            this.targetElement.addEventListener('mouseenter', this.handleMouseEnter);
+            this.targetElement.addEventListener('mouseleave', this.handleMouseLeave);
+        }
+        else if (this.trigger === PopconfirmTrigger.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, footer, footerActions, } = popconfirmStyle({
+            isVisible: this.isVisible,
+            size: this.size,
+            status: this.status,
+        });
+        const statusIconMap = {
+            default: 'circle-question',
+            success: 'circle-check',
+            warning: 'triangle-exclamation',
+            danger: 'circle-exclamation',
+            info: 'circle-info',
+            primary: 'circle-question',
+        };
+        return x `
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      <div
+        class="${host()}"
+        part="popconfirm"
+        role="dialog"
+        ?inert=${!this.isVisible}
+        aria-labelledby="popconfirm-title"
+        aria-describedby="popconfirm-content"
+        aria-modal="true"
+        tabindex="-1"
+        @keydown=${(e) => {
+            if (e.key === 'Escape') {
+                this.closePopconfirm();
+            }
+        }}
+      >
+        <slot name="header">
+          <header class="${headerWrapper()}" part="header">
+            <div class=${headerLeft()}>
+              <slot name="icon">
+                ${this.statusIcon
+            ? x `<plus-svg-icon
+                      class="flex"
+                      iconName=${statusIconMap[this.status]}
+                    ></plus-svg-icon>`
+            : E}
+              </slot>
+
+              <div class="${title()}" part="title" id="popconfirm-title">
+                <slot name="title"><span>${this.title}</span></slot>
+              </div>
+            </div>
+
+            <div class=${headerRight()} part="close">
+              <slot name="actions">
+                <plus-svg-icon
+                  iconName="xmark"
+                  @click=${this.closePopconfirm}
+                  role="button"
+                  tabindex="0"
+                  aria-label="Close popconfirm"
+                ></plus-svg-icon>
+              </slot>
+            </div>
+          </header>
+        </slot>
+
+        <main class="${content()}" part="content" id="popconfirm-content">
+          <slot name="content"></slot>
+        </main>
+
+        <slot name="footer">
+          <footer class="${footer()}">
+            <div class="${footerActions()}">
+              <plus-button
+                size="sm"
+                variant="outline"
+                @click=${this.handleCancel}
+                tabindex="0"
+                .disabled=${!this.isVisible}
+              >
+                ${this.cancelText}
+              </plus-button>
+              <plus-button
+                size="sm"
+                status=${this.status}
+                @click=${this.handleConfirm}
+                tabindex="0"
+                .disabled=${!this.isVisible}
+              >
+                ${this.confirmText}
+              </plus-button>
+            </div>
+          </footer>
+        </slot>
+
+        ${this.showArrow
+            ? x `<div class=${arrow()} part="arrow"></div>`
+            : E}
+      </div>
+    `;
+    }
+}
+__decorate([
+    o({ flatten: true })
+], PlusPopconfirm.prototype, "slots", void 0);
+__decorate([
+    n({ type: String })
+], PlusPopconfirm.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusPopconfirm.prototype, "orientation", void 0);
+__decorate([
+    n({ type: String })
+], PlusPopconfirm.prototype, "trigger", void 0);
+__decorate([
+    n({ type: String })
+], PlusPopconfirm.prototype, "title", void 0);
+__decorate([
+    n({ type: String, attribute: 'confirm-text' })
+], PlusPopconfirm.prototype, "confirmText", void 0);
+__decorate([
+    n({ type: String, attribute: 'cancel-text' })
+], PlusPopconfirm.prototype, "cancelText", void 0);
+__decorate([
+    n({ type: String })
+], PlusPopconfirm.prototype, "status", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value !== 'false',
+        attribute: 'status-icon',
+    })
+], PlusPopconfirm.prototype, "statusIcon", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value !== 'false',
+        attribute: 'show-arrow',
+    })
+], PlusPopconfirm.prototype, "showArrow", void 0);
+__decorate([
+    r()
+], PlusPopconfirm.prototype, "isVisible", void 0);
+
+export { PlusPopconfirm, PlusPopconfirm as default };

package/cdn/components/popconfirm/popconfirm.style.js

@@ -0,0 +1,78 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const popconfirmStyle = ce({
+    slots: {
+        host: 'plus-ui-element popconfirm 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: 'content-area',
+        footer: 'footer',
+        footerActions: 'footer-actions flex flex-row justify-end',
+    },
+    variants: {
+        size: {
+            sm: {
+                host: 'w-60 p-3 gap-3',
+                headerLeft: 'text-md gap-1.5',
+                headerRight: 'text-md',
+                content: 'text-sm',
+                footer: 'text-sm',
+                footerActions: 'gap-1.5',
+            },
+            md: {
+                host: 'w-64 p-4 gap-4',
+                headerLeft: 'text-lg gap-2',
+                headerRight: 'text-lg',
+                content: 'text-base',
+                footer: 'text-base',
+                footerActions: 'gap-2',
+            },
+            lg: {
+                host: 'w-72 p-4 gap-4',
+                headerLeft: 'text-xl gap-3',
+                headerRight: 'text-xl',
+                content: 'text-lg',
+                footer: 'text-lg',
+                footerActions: 'gap-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 { popconfirmStyle };

package/cdn/components/popover/index.js

@@ -0,0 +1,15 @@
+import PlusPopover from './popover.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../../query-assigned-elements-B8Evmg7O.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../floating-ui.dom-OBaMlALa.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './popover.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-popover', PlusPopover);
+
+export { PlusPopover };