@plusui/library 0.1.0

package/cdn/components/toast/toast.js

@@ -0,0 +1,188 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x, E } from '../../lit-element-ByzbtpGk.js';
+import { toastStyle } from './toast.style.js';
+import Tailwind from '../base/tailwind-base.js';
+import { SlotController } from '../../controllers/slot-controller.js';
+import '../svg-icon/svg-icon.js';
+import '../../index-B9iart53.js';
+import '../../global-Dh9axYQH.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../../directive-DZCF8pFJ.js';
+import '../svg-icon/icons.js';
+
+/**
+ * @tag plus-toast
+ * @summary Displays short, temporary messages.
+ *
+ * @slot - The default slot for the toast message content. If both message and header properties are set, this slot is ignored.
+ * @slot header - Optional header content for the toast. Overrides the header property.
+ * @slot icon - Optional icon content to replace the default status icon.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart container - The main container for icon, content, and close button.
+ * @csspart icon - The container for the status icon.
+ * @csspart content - The container for header and message text.
+ * @csspart header - The header text element.
+ * @csspart message - The message text element.
+ * @csspart close-button - The close button container.
+ *
+ * @cssproperty --toast-border-radius - Controls the border radius of the toast.
+ * @cssproperty --toast-padding - Controls the padding of the toast.
+ * @cssproperty --icon-size - Controls the size of the status icon.
+ * @cssproperty --close-button-size - Controls the size of the close button.
+ *
+ * @event plus-close - Emitted when the toast is closed by the user via the close button.
+ *
+ * @dependency plus-svg-icon
+ * @dependency SlotController
+ */
+class PlusToast extends Tailwind {
+    constructor() {
+        super(...arguments);
+        this.slotController = new SlotController(this);
+        /** The size of the toast. */
+        this.size = 'md';
+        /** The visual style of the toast. */
+        this.kind = 'default';
+        /** The status variant of the toast, controlling color and icon. */
+        this.status = 'default';
+        /** Determines if the dismiss button is shown. */
+        this.dismiss = true;
+        /** Shows the default status icon. */
+        this.statusIcon = true;
+    }
+    _handleCloseClick() {
+        this.emit('plus-close');
+    }
+    // --- Private Render Helper Methods ---
+    _renderIcon(iconClassFn) {
+        const hasIconSlot = this.slotController.test('icon');
+        if (hasIconSlot) {
+            return x `<span part="icon" class=${iconClassFn()}
+        ><slot name="icon"></slot
+      ></span>`;
+        }
+        let iconName = this.icon;
+        if (!iconName && this.statusIcon && this.status !== 'default') {
+            const defaultIcons = {
+                info: 'circle-info',
+                success: 'circle-check',
+                warning: 'triangle-exclamation',
+                danger: 'circle-xmark',
+                default: '',
+            };
+            if (this.status in defaultIcons) {
+                iconName = defaultIcons[this.status];
+            }
+        }
+        if (iconName) {
+            return x `<span part="icon" class=${iconClassFn()}
+        ><plus-svg-icon iconName=${iconName}></plus-svg-icon
+      ></span>`;
+        }
+        return E;
+    }
+    _renderHeader(titleClassFn) {
+        const hasHeaderSlot = this.slotController.test('header');
+        if (hasHeaderSlot || this.header) {
+            return x `<div part="header" class=${titleClassFn()}>
+        ${hasHeaderSlot ? x `<slot name="header"></slot>` : this.header}
+      </div>`;
+        }
+        return E;
+    }
+    _renderMessage(messageClassFn) {
+        const hasDefaultSlot = this.slotController.test();
+        if (hasDefaultSlot || this.message) {
+            return x `<div part="message" class="${messageClassFn()}">
+        ${hasDefaultSlot ? x `<slot></slot>` : this.message}
+      </div>`;
+        }
+        return E;
+    }
+    _renderDismissButton(closeClassFn) {
+        if (this.dismiss) {
+            return x ` <button
+        part="close-button"
+        class=${closeClassFn()}
+        @click=${this._handleCloseClick}
+        aria-label="Close"
+      >
+        <plus-svg-icon iconName="xmark"></plus-svg-icon>
+      </button>`;
+        }
+        return E;
+    }
+    // --- Main Render Method ---
+    render() {
+        const { size, kind, status } = this;
+        // Get the style object containing class-generating functions
+        const styles = toastStyle({ size, kind, status });
+        return x `
+      <div
+        class=${styles.base()}
+        part="base"
+        role="status"
+        aria-live=${status === 'danger' || status === 'warning'
+            ? 'assertive'
+            : 'polite'}
+        aria-atomic="true"
+      >
+        <div class="${styles.containerClass()}" part="container">
+          ${this._renderIcon(styles.iconClass)}
+
+          <div class="${styles.contentClass()}" part="content">
+            ${this._renderHeader(styles.titleClass)}
+            ${this._renderMessage(styles.messageClass)}
+          </div>
+
+          ${this._renderDismissButton(styles.closeClass)}
+        </div>
+      </div>
+    `;
+    }
+}
+PlusToast.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        width: fit-content;
+      }
+    `,
+];
+__decorate([
+    n({ type: String })
+], PlusToast.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusToast.prototype, "kind", void 0);
+__decorate([
+    n({ type: String })
+], PlusToast.prototype, "status", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value != 'false',
+        reflect: true,
+    })
+], PlusToast.prototype, "dismiss", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value != 'false',
+        attribute: 'status-icon',
+        reflect: true,
+    })
+], PlusToast.prototype, "statusIcon", void 0);
+__decorate([
+    n({ type: String })
+], PlusToast.prototype, "header", void 0);
+__decorate([
+    n({ type: String })
+], PlusToast.prototype, "icon", void 0);
+__decorate([
+    n({ type: String })
+], PlusToast.prototype, "message", void 0);
+
+export { PlusToast };

package/cdn/components/toast/toast.style.js

@@ -0,0 +1,88 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const toastStyle = ce({
+    slots: {
+        base: [
+            'plus-toast  bg-color-modal font-sans antialiased flex flex-row items-center justify-between border rounded w-fit max-w-2xl transition duration-300 ease-in-out transform scale-95 shadow-lg pointer-events-auto',
+        ],
+        iconClass: ['plus-toast__icon'],
+        messageClass: [
+            'plus-toast__message flex items-center font-normal text-color-default',
+        ],
+        closeClass: [
+            'plus-toast__close cursor-pointer relative',
+            // Clicking area
+            'before:absolute before:inset-0 before:z-10',
+            "before:rounded-full before:cursor-pointer before:bg-transparent before:content-['']",
+            'before:w-10 before:h-10 before:-top-1.5 before:-left-3 before:z-10',
+        ],
+        toastContainer: [
+            'plus-toast-container fixed z-50',
+        ],
+        contentClass: 'flex flex-col',
+        titleClass: 'font-medium text-color-default',
+        footerClass: 'flex flex-row items-center justify-end gap-2',
+        containerClass: 'plus-toast-container flex flex-row items-baseline justify-center flex-1',
+    },
+    variants: {
+        size: {
+            sm: {
+                base: ['p-3 text-sm'],
+                containerClass: 'gap-1.5',
+                // messageClass: 'text-sm',
+                // titleClass: 'text-base',
+                // contentClass: 'gap-2',
+            },
+            md: {
+                base: ['p-4 text-base'],
+                containerClass: 'gap-2',
+                // titleClass: 'text-lg',
+                // messageClass: 'text-base',
+                // contentClass: 'gap-2.5',
+            },
+            lg: {
+                base: ['p-6 text-lg'],
+                containerClass: 'gap-3',
+                // messageClass: 'text-lg',
+                // titleClass: 'text-xl',
+                // contentClass: 'gap-3',
+            },
+        },
+        kind: {
+            default: {
+                base: 'border-solid border-transparent',
+            },
+            outlined: {
+                base: 'border-solid border-color-default',
+            },
+            dashed: {
+                base: 'border-dashed border-color-default',
+            },
+        },
+        status: {
+            success: {
+                iconClass: ['text-color-success'],
+            },
+            warning: {
+                iconClass: ['text-color-warning'],
+            },
+            danger: {
+                iconClass: ['text-color-danger'],
+            },
+            info: {
+                iconClass: ['text-color-info'],
+            },
+            default: {
+                base: [' text-color-default'],
+            },
+        },
+    },
+    compoundVariants: [],
+    defaultVariants: {
+        size: 'md',
+        kind: 'default',
+        status: 'default',
+    },
+});
+
+export { toastStyle };

package/cdn/components/toast-container/index.js

@@ -0,0 +1,20 @@
+import PlusToastContainer from './toast-container.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import './toast-container.style.js';
+import '../../index-B9iart53.js';
+import '../../services/toast.service.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../toast/toast.js';
+import '../toast/toast.style.js';
+import '../../controllers/slot-controller.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../../directive-DZCF8pFJ.js';
+import '../svg-icon/icons.js';
+
+customElements.define('plus-toast-container', PlusToastContainer);
+
+export { PlusToastContainer };

package/cdn/components/toast-container/toast-container.js

@@ -0,0 +1,110 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { toastContainerStyle } from './toast-container.style.js';
+import { ToastService } from '../../services/toast.service.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../toast/toast.js';
+import '../../index-B9iart53.js';
+import '../../global-Dh9axYQH.js';
+import '../toast/toast.style.js';
+import '../../controllers/slot-controller.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../../directive-DZCF8pFJ.js';
+import '../svg-icon/icons.js';
+
+/**
+ * @tag plus-toast-container
+ * @summary A container element that listens to the ToastService to display toast notifications.
+ * @dependency plus-toast
+ * @dependency ToastService
+ *
+ * @slot - Toast components are rendered here based on ToastService updates.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --toast-container-gap - Controls the gap between toasts within the container.
+ * @cssproperty --toast-container-z-index - Controls the stack order of the container.
+ */
+class PlusToastContainer extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * The position the container is responsible for.
+         * Only toasts targeted for this position via ToastService will be displayed.
+         * @default 'top-right'
+         */
+        this.position = 'top-right';
+        /** The list of active toasts provided by the service. */
+        this._toasts = [];
+        this._unsubscribe = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._unsubscribe = ToastService.subscribe((toasts) => {
+            this._toasts = [...toasts];
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribe?.();
+        this._unsubscribe = null;
+    }
+    _handleToastEvent(event) {
+        const toastElement = event.target;
+        if (toastElement.tagName.toLowerCase() === 'plus-toast') {
+            const toastId = toastElement.getAttribute('toast-id');
+            if (toastId) {
+                ToastService.close(toastId);
+            }
+        }
+    }
+    render() {
+        const { base } = toastContainerStyle({ position: this.position });
+        const filteredToasts = this._toasts.filter((toast) => toast.position === this.position);
+        return x `
+      <div class="${base()}" part="base" @plus-close=${this._handleToastEvent}>
+        ${filteredToasts.map((toast) => x `
+            <plus-toast
+              toast-id=${toast.id}
+              .message=${toast.message}
+              .header=${toast.header}
+              .status=${toast.status ?? 'default'}
+              .icon=${toast.icon}
+              .kind=${toast.kind ?? 'default'}
+              .size=${toast.size ?? 'md'}
+              ?dismiss=${toast.dismiss ?? true}
+              ?statusIcon=${toast.statusIcon ?? true}
+            ></plus-toast>
+          `)}
+      </div>
+    `;
+    }
+}
+PlusToastContainer.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        position: fixed;
+        z-index: var(--toast-container-z-index, 9999);
+        pointer-events: none;
+        inset-block-start: var(--plus-spacing-04);
+        inset-inline-end: var(--plus-spacing-04);
+        max-width: calc(100% - 2 * var(--plus-spacing-04));
+        width: fit-content;
+      }
+      :host ::slotted(plus-toast) {
+        pointer-events: auto;
+      }
+    `,
+];
+__decorate([
+    n({ type: String, reflect: true })
+], PlusToastContainer.prototype, "position", void 0);
+__decorate([
+    r()
+], PlusToastContainer.prototype, "_toasts", void 0);
+
+export { PlusToastContainer, PlusToastContainer as default };

package/cdn/components/toast-container/toast-container.style.js

@@ -0,0 +1,31 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const toastContainerStyle = ce({
+    slots: {
+        base: [
+            'plus-container fixed w-fit flex flex-col gap-2 z-10',
+        ],
+    },
+    variants: {
+        position: {
+            'top-left': {
+                base: ['top-5 left-5 items-start'],
+            },
+            'top-right': {
+                base: ['top-5 right-5 items-end'],
+            },
+            'bottom-left': {
+                base: ['bottom-5 left-5 items-start'],
+            },
+            'bottom-right': {
+                base: ['bottom-5 right-5 items-end'],
+            },
+        },
+    },
+    compoundVariants: [],
+    defaultVariants: {
+        position: 'top-right',
+    },
+});
+
+export { toastContainerStyle };

package/cdn/components/toggle/index.js

@@ -0,0 +1,24 @@
+import { PlusToggle } from './toggle.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 '../../live-BOAtKRUN.js';
+import '../../directive-DZCF8pFJ.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../caption/caption.style.js';
+import '../../index-B9iart53.js';
+import '../label/label.style.js';
+import './toggle.style.js';
+import '../svg-icon/index.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../svg-icon/icons.js';
+import '../../if-defined-D-m3dgRf.js';
+import '../../style-map-DC_vNus2.js';
+
+customElements.define('plus-toggle', PlusToggle);
+
+export { PlusToggle };