@plusui/library 0.1.0

package/cdn/components/drawer/drawer.js

@@ -0,0 +1,188 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { drawerStyle } from './drawer.style.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../../index-B9iart53.js';
+import '../../global-Dh9axYQH.js';
+
+/**
+ * @tag plus-drawer
+ * @summary Sliding panel component that appears from the edge of the screen.
+ *
+ * @slot header - The header content of the drawer
+ * @slot body - The main content of the drawer
+ * @slot footer - The footer content of the drawer
+ * @slot close - Custom close button (defaults to an X icon)
+ *
+ * @csspart container - The main container element
+ * @csspart overlay - The overlay element
+ * @csspart drawer - The drawer 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-drawer>
+ *   <div slot="header">Drawer Title</div>
+ *   <div slot="body">Drawer Content</div>
+ *   <div slot="footer">
+ *     <button>Save</button>
+ *   </div>
+ * </plus-drawer>
+ * ```
+ */
+class PlusDrawer extends Tailwind {
+    // private drawerElement: HTMLElement | null = null;
+    constructor() {
+        super();
+        /**
+         * The size of the drawer
+         * @type {'sm' | 'md' | 'lg'}
+         * @default 'md'
+         * @attr size
+         */
+        this.size = 'md';
+        /**
+         * Whether the drawer is open
+         * @type {boolean}
+         * @default false
+         * @attr is-open
+         */
+        this.isOpen = false;
+        /**
+         * The position of the drawer
+         * @type {'left' | 'right' | 'top' | 'bottom'}
+         * @default 'right'
+         * @attr orientation
+         */
+        this.orientation = 'right';
+        /**
+         * The duration of the animation in milliseconds
+         * @type {number}
+         * @default 300
+         * @attr animation-duration
+         */
+        this.animationDuration = 300;
+        this.isAnimating = false;
+        this.handleKeydown = (e) => {
+            if (e.key === 'Escape' && this.isOpen) {
+                this.hide();
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('plus-drawer-before-show', this.handleBeforeShow);
+        this.addEventListener('plus-drawer-before-hide', this.handleBeforeHide);
+    }
+    /**
+     * Hides the drawer with animation
+     * @returns {void}
+     */
+    hide() {
+        if (this.isAnimating)
+            return;
+        this.emit('plus-drawer-before-hide');
+    }
+    handleBeforeHide() {
+        this.isAnimating = true;
+        this.isOpen = false;
+        setTimeout(() => {
+            this.isAnimating = false;
+            this.emit('plus-drawer-hide');
+        }, this.animationDuration);
+    }
+    /**
+     * Shows the drawer with animation
+     * @returns {void}
+     */
+    show() {
+        if (this.isAnimating)
+            return;
+        this.emit('plus-drawer-before-show');
+    }
+    handleBeforeShow() {
+        this.isAnimating = true;
+        this.isOpen = true;
+        setTimeout(() => {
+            this.isAnimating = false;
+            this.emit('plus-drawer-show');
+        }, this.animationDuration);
+        document.addEventListener('keydown', this.handleKeydown);
+    }
+    // override firstUpdated() {
+    //   this.drawerElement = this.shadowRoot?.querySelector(
+    //     '.drawer'
+    //   ) as HTMLElement;
+    // }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('plus-drawer-before-show', this.handleBeforeShow);
+        this.removeEventListener('plus-drawer-before-hide', this.handleBeforeHide);
+        document.removeEventListener('keydown', this.handleKeydown);
+    }
+    render() {
+        const { size, isOpen, orientation } = this;
+        const { base, drawerClass, drawerOverlay, drawerContainer, drawerHeader, drawerBody, drawerFooter, drawerCloseButtonClass, } = drawerStyle({ size, isOpen, orientation });
+        return x `
+      <div
+        class=${base()}
+        part="container"
+        role="dialog"
+        aria-modal="true"
+        aria-hidden=${!isOpen}
+        aria-label="Drawer"
+      >
+        <div
+          class=${drawerOverlay()}
+          part="overlay"
+          @click=${() => this.hide()}
+        ></div>
+        <div class=${drawerClass()} part="drawer">
+          <div class=${drawerContainer()}>
+            <div class=${drawerHeader()} part="header">
+              <slot name="header"></slot>
+              <slot name="close">
+                <button
+                  class=${drawerCloseButtonClass()}
+                  part="close-button"
+                  aria-label="Close drawer"
+                  @click=${() => this.hide()}
+                >
+                  <plus-svg-icon iconName="xmark"></plus-svg-icon>
+                </button>
+              </slot>
+            </div>
+            <div class=${drawerBody()} part="body">
+              <slot name="body"></slot>
+              <slot></slot>
+            </div>
+            <div class=${drawerFooter()} part="footer">
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    n({ type: String, reflect: true })
+], PlusDrawer.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'is-open' })
+], PlusDrawer.prototype, "isOpen", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusDrawer.prototype, "orientation", void 0);
+__decorate([
+    n({ type: Number, reflect: true, attribute: 'animation-duration' })
+], PlusDrawer.prototype, "animationDuration", void 0);
+__decorate([
+    r()
+], PlusDrawer.prototype, "isAnimating", void 0);
+
+export { PlusDrawer, PlusDrawer as default };

package/cdn/components/drawer/drawer.style.js

@@ -0,0 +1,171 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const drawerStyle = ce({
+    slots: {
+        base: ['plus-drawer font-sans antialiased'],
+        drawerOverlay: [
+            'drawer-overlay fixed inset-0 z-40',
+            'bg-color-overlay/50',
+            'transition-opacity duration-300 ease-in-out',
+        ],
+        drawerClass: [
+            'drawer fixed z-50 h-full overflow-y-auto',
+            'transition-all duration-300 ease-in-out',
+            // 'max-w-96 w-full',
+        ],
+        drawerContainer: [
+            'drawer-container relative w-full h-full',
+            'bg-color-surface',
+            'shadow-elevation-lg',
+            'text-color-default',
+            'flex flex-col justify-between',
+        ],
+        drawerHeader: [
+            'drawer-header flex justify-between items-center',
+            'py-3 px-4',
+            'bg-color-base',
+            'font-semibold',
+            'rounded-t-lg',
+            'border-b border-color-default',
+        ],
+        drawerBody: [
+            'drawer-body flex-1 p-4',
+            'overflow-y-auto',
+        ],
+        drawerFooter: [
+            'drawer-footer flex justify-end items-center',
+            'py-3 px-4 gap-2',
+            'rounded-b-lg',
+            'border-t border-color-default',
+        ],
+        drawerCloseButtonClass: [
+            'drawer-close-button absolute top-0 right-0 p-3',
+            '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',
+        ],
+    },
+    variants: {
+        size: {
+            sm: {
+                drawerHeader: ['text-sm'],
+                // drawerClass: ['max-w-sm'],
+            },
+            md: {
+                drawerHeader: ['text-base'],
+                // drawerClass: ['max-w-md'],
+            },
+            lg: {
+                drawerHeader: ['text-lg'],
+                // drawerClass: ['max-w-lg'],
+            },
+        },
+        isOpen: {
+            true: {
+                drawerClass: ['block'],
+                drawerOverlay: [
+                    'opacity-100 pointer-events-auto',
+                ],
+            },
+            false: {
+                drawerClass: ['pointer-events-none'],
+                drawerOverlay: [
+                    'opacity-0 pointer-events-none',
+                ],
+            },
+        },
+        orientation: {
+            left: {
+                drawerClass: [
+                    'h-full w-96 inset-y-0 left-0',
+                    'transform transition-transform duration-300 ease-in-out',
+                ],
+            },
+            right: {
+                drawerClass: [
+                    'h-full w-96 inset-y-0 right-0',
+                    'transform transition-transform duration-300 ease-in-out',
+                ],
+            },
+            top: {
+                drawerClass: [
+                    'h-96 w-full inset-x-0 top-0',
+                    'transform transition-transform duration-300 ease-in-out',
+                ],
+            },
+            bottom: {
+                drawerClass: [
+                    'h-96 w-full inset-x-0 bottom-0',
+                    'transform transition-transform duration-300 ease-in-out',
+                ],
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            isOpen: true,
+            orientation: 'left',
+            class: {
+                drawerClass: 'translate-x-0',
+            },
+        },
+        {
+            isOpen: false,
+            orientation: 'left',
+            class: {
+                drawerClass: '-translate-x-full',
+            },
+        },
+        {
+            isOpen: true,
+            orientation: 'right',
+            class: {
+                drawerClass: 'translate-x-0',
+            },
+        },
+        {
+            isOpen: false,
+            orientation: 'right',
+            class: {
+                drawerClass: 'translate-x-full',
+            },
+        },
+        {
+            isOpen: true,
+            orientation: 'top',
+            class: {
+                drawerClass: 'translate-y-0',
+            },
+        },
+        {
+            isOpen: false,
+            orientation: 'top',
+            class: {
+                drawerClass: '-translate-y-full',
+            },
+        },
+        {
+            isOpen: true,
+            orientation: 'bottom',
+            class: {
+                drawerClass: 'translate-y-0',
+            },
+        },
+        {
+            isOpen: false,
+            orientation: 'bottom',
+            class: {
+                drawerClass: 'translate-y-full',
+            },
+        },
+    ],
+    defaultVariants: {
+        size: 'md',
+        isOpen: false,
+        orientation: 'right',
+    },
+});
+
+export { drawerStyle };

package/cdn/components/drawer/index.js

@@ -0,0 +1,12 @@
+import PlusDrawer from './drawer.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import './drawer.style.js';
+import '../../index-B9iart53.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+
+customElements.define('plus-drawer', PlusDrawer);
+
+export { PlusDrawer };

package/cdn/components/dropdown/dropdown.js

@@ -0,0 +1,331 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { o } from '../../query-assigned-elements-B8Evmg7O.js';
+import Tailwind from '../base/tailwind-base.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { c as computePosition, o as offset, s as shift, f as flip, b as autoUpdate } from '../../floating-ui.dom-OBaMlALa.js';
+import { dropdownStyle } from './dropdown.style.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-dropdown
+ *
+ * Dropdown component that provides a collapsible menu with selectable options.
+ * Uses Floating UI for intelligent positioning.
+ *
+ * @slot - The default slot for the dropdown trigger button content
+ * @slot suffix - Slot for adding content to the right side of the trigger button
+ * @slot dropdown-item - Slot for dropdown menu items
+ *
+ * @csspart base - The component's base wrapper
+ * @csspart button - The dropdown trigger button
+ * @csspart dropdown-box - The dropdown list container
+ *
+ * @event plus-dropdown-open - Emitted when the dropdown is opened
+ * @event plus-dropdown-close - Emitted when the dropdown is closed
+ * @event plus-dropdown-selected-item - Emitted when an item is selected with the selected item in detail
+ *
+ */
+class PlusDropdown extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the size of the dropdown button
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Sets the status/color variant of the dropdown button
+         * - default: Neutral color scheme
+         * - primary: Primary color scheme
+         * - success: Green color scheme
+         * - warning: Yellow color scheme
+         * - danger: Red color scheme
+         * - info: Blue color scheme
+         * @default 'default'
+         */
+        this.status = 'default';
+        /**
+         * Determines the visual style of the dropdown button
+         * - filled: Solid background color
+         * - outlined: Transparent background with border
+         * - dashed: Transparent background with dashed border
+         * - text: No background or border
+         * @default 'filled'
+         */
+        this.kind = 'filled';
+        /**
+         * Disables the dropdown interaction
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Tracks whether the dropdown is open or closed
+         * @private
+         */
+        this.isVisible = false;
+        /**
+         * Tracks the currently selected dropdown item
+         * @private
+         */
+        this.selectedItem = null;
+        /**
+         * Reference to the dropdown trigger button
+         * @private
+         */
+        this.targetElement = null;
+        /**
+         * Reference to the dropdown container
+         * @private
+         */
+        this.dropdownBox = null;
+        /**
+         * Unique ID for the dropdown for ARIA relationship
+         * @private
+         */
+        this.dropdownId = `dropdown-${Math.random().toString(36).substring(2, 9)}`;
+        /**
+         * Updates the dropdown's position using Floating UI
+         * @private
+         */
+        this.updatePosition = () => {
+            if (!this.dropdownBox || !this.targetElement)
+                return;
+            computePosition(this.targetElement, this.dropdownBox, {
+                placement: 'bottom-start',
+                middleware: [
+                    offset(4),
+                    shift({
+                        padding: 4,
+                        boundary: document.documentElement,
+                    }),
+                    flip({
+                        fallbackPlacements: ['top-start', 'bottom-start'],
+                        padding: 4,
+                    }),
+                ],
+            }).then(({ x, y }) => {
+                Object.assign(this.dropdownBox.style, { left: `${x}px`, top: `${y}px` });
+            });
+        };
+        /**
+         * Handles the click event for the trigger button
+         * @private
+         */
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.isVisible = !this.isVisible;
+            if (this.isVisible) {
+                if (!this.targetElement || !this.dropdownBox) {
+                    console.error('Target element or dropdown box is not available');
+                    return;
+                }
+                this.updatePosition();
+                this.cleanup = autoUpdate(this.targetElement, this.dropdownBox, this.updatePosition);
+                this.emit('plus-dropdown-open');
+            }
+            else {
+                this.cleanupAutoUpdate();
+                this.emit('plus-dropdown-close');
+            }
+        };
+        /**
+         * Handles keyboard navigation for dropdown items
+         * @param event The keyboard event
+         * @private
+         */
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            const items = this.slots.filter((item) => !item.disabled);
+            const currentIndex = items.indexOf(this.selectedItem);
+            let newIndex = currentIndex;
+            switch (event.key) {
+                case 'ArrowDown':
+                    newIndex = (currentIndex + 1) % items.length;
+                    break;
+                case 'ArrowUp':
+                    newIndex = (currentIndex - 1 + items.length) % items.length;
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (this.selectedItem) {
+                        this.handleItemClick(new Event('click'));
+                    }
+                    break;
+                case 'Escape':
+                    this.isVisible = false;
+                    this.cleanupAutoUpdate();
+                    break;
+                default:
+                    return;
+            }
+            if (newIndex !== currentIndex) {
+                this.selectedItem = items[newIndex];
+                this.slots.forEach((item) => {
+                    item.selected = item === this.selectedItem;
+                });
+            }
+            event.preventDefault();
+        };
+        /**
+         * Handles the click event for dropdown items
+         * @param event The click event
+         * @private
+         */
+        this.handleItemClick = (event) => {
+            const target = event.target;
+            const clickedItem = this.slots.find((item) => item.contains(target));
+            if (clickedItem && !clickedItem.disabled) {
+                this.selectedItem = clickedItem;
+                this.slots.forEach((item) => {
+                    item.selected = item === clickedItem;
+                });
+                this.emit('plus-dropdown-selected-item', {
+                    detail: { selectedItem: this.selectedItem },
+                });
+                this.isVisible = false;
+                this.cleanupAutoUpdate();
+            }
+        };
+        /**
+         * Handles clicks outside of the dropdown to close it
+         * @param event The click event
+         * @private
+         */
+        this.handleOutsideClick = (event) => {
+            const path = event.composedPath();
+            if (this.dropdownBox &&
+                this.targetElement &&
+                !path.includes(this.dropdownBox) &&
+                !path.includes(this.targetElement)) {
+                this.isVisible = false;
+                this.cleanupAutoUpdate();
+            }
+        };
+    }
+    /**
+     * Lifecycle method called after the component's first update
+     * @param _changedProperties Map of changed properties
+     * @private
+     */
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.targetElement = this.shadowRoot?.querySelector('plus-button') || null;
+        this.dropdownBox = this.shadowRoot?.querySelector('.dropdown-box') || null;
+        if (this.dropdownBox) {
+            this.dropdownBox.addEventListener('click', this.handleItemClick);
+        }
+        this.slots.forEach((item) => {
+            item.size = this.size;
+        });
+        if (this.targetElement) {
+            this.targetElement.addEventListener('click', this.handleClick);
+            this.targetElement.addEventListener('keydown', this.handleKeyDown);
+        }
+        else {
+            console.error('Target element (plus-button) not found');
+        }
+        if (!this.dropdownBox) {
+            console.error('Dropdown box not found');
+        }
+        document.addEventListener('click', this.handleOutsideClick, true);
+    }
+    /**
+     * Cleans up the Floating UI autoUpdate subscription
+     * @private
+     */
+    cleanupAutoUpdate() {
+        if (this.cleanup) {
+            this.cleanup();
+            this.cleanup = undefined;
+        }
+    }
+    /**
+     * Lifecycle method called when the component is removed from the DOM
+     * @private
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupAutoUpdate();
+        if (this.targetElement) {
+            this.targetElement.removeEventListener('click', this.handleClick);
+            this.targetElement.removeEventListener('keydown', this.handleKeyDown);
+        }
+        if (this.dropdownBox) {
+            this.dropdownBox.removeEventListener('click', this.handleItemClick);
+        }
+        document.removeEventListener('click', this.handleOutsideClick, true);
+    }
+    /**
+     * Renders the dropdown component
+     * @returns The rendered template
+     */
+    render() {
+        return x `
+      <plus-button
+        ?disabled=${this.disabled}
+        kind=${this.kind}
+        status=${this.status}
+        size=${this.size}
+        aria-expanded=${this.isVisible}
+        aria-haspopup="listbox"
+        aria-controls=${this.dropdownId}
+        role="button"
+        part="button"
+        ><slot>${this.text}</slot>
+        <slot name="suffix">
+          <plus-svg-icon
+            iconName=${this.isVisible ? 'chevron-up' : 'chevron-down'}
+            size="sm"
+          ></plus-svg-icon>
+        </slot>
+      </plus-button>
+      <div
+        id=${this.dropdownId}
+        class=${dropdownStyle({ isOpen: this.isVisible })}
+        role="listbox"
+        aria-label="Dropdown options"
+        ?hidden=${!this.isVisible}
+        part="dropdown-box"
+      >
+        <slot name="dropdown-item"></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    o({
+        selector: 'plus-dropdown-item',
+        slot: 'dropdown-item',
+    })
+], PlusDropdown.prototype, "slots", void 0);
+__decorate([
+    n({ type: String })
+], PlusDropdown.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusDropdown.prototype, "status", void 0);
+__decorate([
+    n({ type: String })
+], PlusDropdown.prototype, "kind", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusDropdown.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String })
+], PlusDropdown.prototype, "text", void 0);
+__decorate([
+    r()
+], PlusDropdown.prototype, "isVisible", void 0);
+__decorate([
+    r()
+], PlusDropdown.prototype, "selectedItem", void 0);
+
+export { PlusDropdown, PlusDropdown as default };