@plusui/library 0.1.0

package/cdn/components/modal/modal.js

@@ -0,0 +1,224 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { modalStyle } from './modal.style.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../../index-B9iart53.js';
+import '../../global-Dh9axYQH.js';
+
+/**
+ * @tag plus-modal
+ * @summary Modal dialog component that appears on top of the page content.
+ *
+ * @slot header - The header content of the modal
+ * @slot body - The main content of the modal
+ * @slot footer - The footer content of the modal
+ * @slot close - Custom close button (defaults to an X icon)
+ *
+ * @csspart container - The main container element
+ * @csspart overlay - The overlay element
+ * @csspart modal - The modal element
+ * @csspart header - The header element
+ * @csspart body - The body element
+ * @csspart footer - The footer element
+ * @csspart close-button - The close button element
+ *
+ * @example
+ * ```html
+ * <plus-modal>
+ *   <div slot="header">Modal Title</div>
+ *   <div slot="body">Modal Content</div>
+ *   <div slot="footer">
+ *     <button>Save</button>
+ *   </div>
+ * </plus-modal>
+ * ```
+ */
+class PlusModal extends Tailwind {
+    constructor() {
+        super();
+        /**
+         * The size of the modal
+         * @type {'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'}
+         * @default 'md'
+         * @attr size
+         */
+        this.size = 'md';
+        /**
+         * Whether the modal is open
+         * @type {boolean}
+         * @default false
+         * @attr is-open
+         */
+        this.isOpen = false;
+        /**
+         * Whether the modal should take full width
+         * @type {boolean}
+         * @default false
+         * @attr full-width
+         */
+        this.fullWidth = false;
+        /**
+         * Whether the modal should close when clicking the backdrop
+         * @type {boolean}
+         * @default true
+         * @attr close-on-backdrop
+         */
+        this.closeOnBackdrop = true;
+        /**
+         * Whether the modal should close when pressing the Escape key
+         * @type {boolean}
+         * @default true
+         * @attr close-on-esc
+         */
+        this.closeOnEsc = true;
+        /**
+         * The duration of the animation in milliseconds
+         * @type {number}
+         * @default 300
+         * @attr animation-duration
+         */
+        this.animationDuration = 300;
+        this.isAnimating = false;
+        this.keydownHandler = this.handleKeydown.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('plus-modal-before-show', this.handleBeforeShow);
+        this.addEventListener('plus-modal-before-hide', this.handleBeforeHide);
+    }
+    /**
+     * Hides the modal with animation
+     * @returns {void}
+     */
+    hide() {
+        if (this.isAnimating)
+            return;
+        this.emit('plus-modal-before-hide');
+    }
+    handleBeforeHide() {
+        this.isAnimating = true;
+        this.isOpen = false;
+        setTimeout(() => {
+            this.isAnimating = false;
+            this.emit('plus-modal-hide');
+        }, this.animationDuration);
+    }
+    /**
+     * Shows the modal with animation
+     * @returns {void}
+     */
+    show() {
+        if (this.isAnimating)
+            return;
+        this.emit('plus-modal-before-show');
+    }
+    handleBeforeShow() {
+        this.isAnimating = true;
+        this.isOpen = true;
+        setTimeout(() => {
+            this.isAnimating = false;
+            this.emit('plus-modal-show');
+        }, this.animationDuration);
+        if (this.closeOnEsc) {
+            document.addEventListener('keydown', this.keydownHandler);
+        }
+    }
+    // override firstUpdated() {
+    //   this.modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;
+    // }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('plus-modal-before-show', this.handleBeforeShow);
+        this.removeEventListener('plus-modal-before-hide', this.handleBeforeHide);
+        document.removeEventListener('keydown', this.keydownHandler);
+    }
+    handleKeydown(e) {
+        if (e.key === 'Escape' && this.closeOnEsc && this.isOpen) {
+            this.hide();
+        }
+    }
+    handleBackdropClick(e) {
+        // Check if the click was on the backdrop (overlay) and not on the modal content
+        if (e.target === e.currentTarget && this.closeOnBackdrop) {
+            this.hide();
+        }
+    }
+    render() {
+        const { size, isOpen, fullWidth } = this;
+        const { base, modalClass, modalOverlay, modalContainer, modalHeader, modalBody, modalFooter, modalCloseButtonClass, } = modalStyle({ size, isOpen, fullWidth });
+        return x `
+      <div
+        class=${base()}
+        part="container"
+        role="dialog"
+        aria-modal="true"
+        aria-hidden=${!isOpen}
+        aria-label="Modal"
+      >
+        <div
+          class=${modalOverlay()}
+          part="overlay"
+          @click=${this.handleBackdropClick}
+        ></div>
+        <div class=${modalClass()} part="modal">
+          <div class=${modalContainer()}>
+            <div class=${modalHeader()} part="header">
+              <slot name="header"></slot>
+              <slot name="close">
+                <button
+                  class=${modalCloseButtonClass()}
+                  part="close-button"
+                  aria-label="Close modal"
+                  @click=${() => this.hide()}
+                >
+                  <plus-svg-icon iconName="xmark"></plus-svg-icon>
+                </button>
+              </slot>
+            </div>
+            <div class=${modalBody()} part="body">
+              <slot name="body"></slot>
+              <slot></slot>
+            </div>
+            <div class=${modalFooter()} part="footer">
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    n({ type: String, reflect: true })
+], PlusModal.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'is-open' })
+], PlusModal.prototype, "isOpen", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'full-width' })
+], PlusModal.prototype, "fullWidth", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value != 'false',
+        reflect: true,
+        attribute: 'close-on-backdrop',
+    })
+], PlusModal.prototype, "closeOnBackdrop", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value != 'false',
+        reflect: true,
+        attribute: 'close-on-esc',
+    })
+], PlusModal.prototype, "closeOnEsc", void 0);
+__decorate([
+    n({ type: Number, reflect: true, attribute: 'animation-duration' })
+], PlusModal.prototype, "animationDuration", void 0);
+__decorate([
+    r()
+], PlusModal.prototype, "isAnimating", void 0);
+
+export { PlusModal, PlusModal as default };

package/cdn/components/modal/modal.style.js

@@ -0,0 +1,101 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const modalStyle = ce({
+    slots: {
+        base: ['plus-modal font-sans antialiased'],
+        modalOverlay: [
+            'modal-overlay fixed inset-0 z-40',
+            'bg-color-overlay/50',
+            'transition-opacity duration-300 ease-in-out',
+        ],
+        modalClass: [
+            'modal fixed z-50 inset-0 overflow-y-auto',
+            'flex items-center justify-center',
+            'transition-all duration-300 ease-in-out',
+            'w-full mx-auto h-fit mt-10',
+        ],
+        modalContainer: [
+            'modal-container relative w-full',
+            'bg-color-surface',
+            'shadow-elevation-lg',
+            'text-color-default',
+            'flex flex-col',
+            'rounded-lg max-h-[90vh] mx-4',
+            'transform transition-all duration-300 ease-in-out',
+        ],
+        modalHeader: [
+            'modal-header flex justify-between items-center',
+            'py-3 px-4',
+            'bg-color-base',
+            'font-semibold text-lg',
+            'rounded-t-lg',
+            'border-b border-color-default',
+        ],
+        modalBody: [
+            'modal-body flex-1 p-4',
+            'overflow-y-auto',
+        ],
+        modalFooter: [
+            'modal-footer flex justify-end items-center',
+            'py-3 px-4 gap-2',
+            'rounded-b-lg',
+            'bg-color-surface',
+            'border-t border-color-default',
+        ],
+        modalCloseButtonClass: [
+            'modal-close-button absolute top-2 right-2 p-2',
+            'text-color-default',
+            'cursor-pointer',
+            'hover:text-color-primary',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-color-primary',
+            'transition-colors duration-200 ease-in-out',
+            'rounded-full hover:bg-color-default/10',
+        ],
+    },
+    variants: {
+        size: {
+            sm: {
+                modalClass: 'max-w-sm',
+            },
+            md: {
+                modalClass: 'max-w-md',
+            },
+            lg: {
+                modalClass: 'max-w-lg',
+            },
+            xl: {
+                modalClass: 'max-w-xl',
+            },
+            '2xl': {
+                modalClass: 'max-w-2xl',
+            },
+            full: {
+                modalClass: 'max-w-[calc(100%-2rem)]',
+            },
+        },
+        isOpen: {
+            true: {
+                modalClass: 'opacity-100 pointer-events-auto',
+                modalOverlay: 'opacity-100 pointer-events-auto',
+                modalContainer: 'scale-100 opacity-100',
+            },
+            false: {
+                modalClass: 'opacity-0 pointer-events-none',
+                modalOverlay: 'opacity-0 pointer-events-none',
+                modalContainer: 'scale-95 opacity-0',
+            },
+        },
+        fullWidth: {
+            true: {
+                modalClass: 'max-w-[calc(100%-2rem)]',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        isOpen: false,
+        fullWidth: false,
+    },
+});
+
+export { modalStyle };

package/cdn/components/popconfirm/index.js

@@ -0,0 +1,15 @@
+import PlusPopconfirm from './popconfirm.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 './popconfirm.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-popconfirm', PlusPopconfirm);
+
+export { PlusPopconfirm };