@plusui/library 0.1.0

package/dist/components/modal/modal.style.d.ts

@@ -0,0 +1,295 @@
+export declare const modalStyle: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            modalClass: string;
+        };
+        md: {
+            modalClass: string;
+        };
+        lg: {
+            modalClass: string;
+        };
+        xl: {
+            modalClass: string;
+        };
+        '2xl': {
+            modalClass: string;
+        };
+        full: {
+            modalClass: string;
+        };
+    };
+    isOpen: {
+        true: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+        false: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            modalClass: string;
+        };
+    };
+}, {
+    base: string[];
+    modalOverlay: string[];
+    modalClass: string[];
+    modalContainer: string[];
+    modalHeader: string[];
+    modalBody: string[];
+    modalFooter: string[];
+    modalCloseButtonClass: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: {
+            modalClass: string;
+        };
+        md: {
+            modalClass: string;
+        };
+        lg: {
+            modalClass: string;
+        };
+        xl: {
+            modalClass: string;
+        };
+        '2xl': {
+            modalClass: string;
+        };
+        full: {
+            modalClass: string;
+        };
+    };
+    isOpen: {
+        true: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+        false: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            modalClass: string;
+        };
+    };
+}, {
+    size: {
+        sm: {
+            modalClass: string;
+        };
+        md: {
+            modalClass: string;
+        };
+        lg: {
+            modalClass: string;
+        };
+        xl: {
+            modalClass: string;
+        };
+        '2xl': {
+            modalClass: string;
+        };
+        full: {
+            modalClass: string;
+        };
+    };
+    isOpen: {
+        true: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+        false: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            modalClass: string;
+        };
+    };
+}>, {
+    size: {
+        sm: {
+            modalClass: string;
+        };
+        md: {
+            modalClass: string;
+        };
+        lg: {
+            modalClass: string;
+        };
+        xl: {
+            modalClass: string;
+        };
+        '2xl': {
+            modalClass: string;
+        };
+        full: {
+            modalClass: string;
+        };
+    };
+    isOpen: {
+        true: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+        false: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            modalClass: string;
+        };
+    };
+}, {
+    base: string[];
+    modalOverlay: string[];
+    modalClass: string[];
+    modalContainer: string[];
+    modalHeader: string[];
+    modalBody: string[];
+    modalFooter: string[];
+    modalCloseButtonClass: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            modalClass: string;
+        };
+        md: {
+            modalClass: string;
+        };
+        lg: {
+            modalClass: string;
+        };
+        xl: {
+            modalClass: string;
+        };
+        '2xl': {
+            modalClass: string;
+        };
+        full: {
+            modalClass: string;
+        };
+    };
+    isOpen: {
+        true: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+        false: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            modalClass: string;
+        };
+    };
+}, {
+    base: string[];
+    modalOverlay: string[];
+    modalClass: string[];
+    modalContainer: string[];
+    modalHeader: string[];
+    modalBody: string[];
+    modalFooter: string[];
+    modalCloseButtonClass: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: {
+            modalClass: string;
+        };
+        md: {
+            modalClass: string;
+        };
+        lg: {
+            modalClass: string;
+        };
+        xl: {
+            modalClass: string;
+        };
+        '2xl': {
+            modalClass: string;
+        };
+        full: {
+            modalClass: string;
+        };
+    };
+    isOpen: {
+        true: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+        false: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            modalClass: string;
+        };
+    };
+}, {
+    size: {
+        sm: {
+            modalClass: string;
+        };
+        md: {
+            modalClass: string;
+        };
+        lg: {
+            modalClass: string;
+        };
+        xl: {
+            modalClass: string;
+        };
+        '2xl': {
+            modalClass: string;
+        };
+        full: {
+            modalClass: string;
+        };
+    };
+    isOpen: {
+        true: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+        false: {
+            modalClass: string;
+            modalOverlay: string;
+            modalContainer: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            modalClass: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+//# sourceMappingURL=modal.style.d.ts.map

package/dist/components/modal/modal.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.style.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAoGrB,CAAC"}

package/dist/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/dist/components/modal/modal.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.style.js","sourceRoot":"","sources":["../../../src/components/modal/modal.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;IAC3B,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,kCAAkC,CAAC;QAC1C,YAAY,EAAE;YACZ,kCAAkC;YAClC,qBAAqB;YACrB,6CAA6C;SAC9C;QACD,UAAU,EAAE;YACV,0CAA0C;YAC1C,kCAAkC;YAClC,yCAAyC;YACzC,4BAA4B;SAC7B;QACD,cAAc,EAAE;YACd,iCAAiC;YACjC,kBAAkB;YAClB,qBAAqB;YACrB,oBAAoB;YACpB,eAAe;YACf,8BAA8B;YAC9B,mDAAmD;SACpD;QACD,WAAW,EAAE;YACX,gDAAgD;YAChD,WAAW;YACX,eAAe;YACf,uBAAuB;YACvB,cAAc;YACd,+BAA+B;SAChC;QACD,SAAS,EAAE;YACT,uBAAuB;YACvB,iBAAiB;SAClB;QACD,WAAW,EAAE;YACX,4CAA4C;YAC5C,iBAAiB;YACjB,cAAc;YACd,kBAAkB;YAClB,+BAA+B;SAChC;QACD,qBAAqB,EAAE;YACrB,+CAA+C;YAC/C,oBAAoB;YACpB,gBAAgB;YAChB,0BAA0B;YAC1B,kFAAkF;YAClF,4CAA4C;YAC5C,wCAAwC;SACzC;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE;gBACF,UAAU,EAAE,UAAU;aACvB;YACD,EAAE,EAAE;gBACF,UAAU,EAAE,UAAU;aACvB;YACD,EAAE,EAAE;gBACF,UAAU,EAAE,UAAU;aACvB;YACD,EAAE,EAAE;gBACF,UAAU,EAAE,UAAU;aACvB;YACD,KAAK,EAAE;gBACL,UAAU,EAAE,WAAW;aACxB;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,yBAAyB;aACtC;SACF;QACD,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,UAAU,EACR,iCAAiC;gBACnC,YAAY,EACV,iCAAiC;gBACnC,cAAc,EAAE,uBAAuB;aACxC;YACD,KAAK,EAAE;gBACL,UAAU,EACR,+BAA+B;gBACjC,YAAY,EACV,+BAA+B;gBACjC,cAAc,EAAE,oBAAoB;aACrC;SACF;QACD,SAAS,EAAE;YACT,IAAI,EAAE;gBACJ,UAAU,EAAE,yBAAyB;aACtC;SACF;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,KAAK;KACjB;CACF,CAAC,CAAC"}

package/dist/components/popconfirm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './popconfirm.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/popconfirm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popconfirm/index.ts"],"names":[],"mappings":"AAEA,cAAc,iBAAiB,CAAC"}

package/dist/components/popconfirm/index.js

@@ -0,0 +1,16 @@
+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 '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import './popconfirm.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-popconfirm', PlusPopconfirm);
+
+export { PlusPopconfirm };

package/dist/components/popconfirm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/popconfirm/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,cAAc,iBAAiB,CAAC;AAEhC,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC"}

package/dist/components/popconfirm/popconfirm.d.ts

@@ -0,0 +1,183 @@
+import Tailwind from '../base/tailwind-base';
+declare enum PopconfirmTrigger {
+    Hover = "hover",
+    Click = "click"
+}
+declare enum PopconfirmPosition {
+    Top = "top",
+    TopStart = "top-start",
+    TopEnd = "top-end",
+    Bottom = "bottom",
+    BottomStart = "bottom-start",
+    BottomEnd = "bottom-end",
+    Left = "left",
+    LeftStart = "left-start",
+    LeftEnd = "left-end",
+    Right = "right",
+    RightStart = "right-start",
+    RightEnd = "right-end"
+}
+/**
+ * @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>
+ * ```
+ */
+export default class PlusPopconfirm extends Tailwind {
+    slots: Array<HTMLElement>;
+    /**
+     * The size of the popconfirm.
+     *
+     * Available options:
+     * - `sm` (small)
+     * - `md` (medium - default)
+     * - `lg` (large)
+     *
+     * @type {'sm' | 'md' | 'lg'}
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * 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
+     */
+    orientation: PopconfirmPosition;
+    /**
+     * Determines how the popconfirm is triggered.
+     *
+     * Available options:
+     * - `click` (default) - Popconfirm toggles on click.
+     * - `hover` - Popconfirm appears on hover.
+     *
+     * @type {'click' | 'hover'}
+     * @default 'click'
+     */
+    trigger: PopconfirmTrigger;
+    /**
+     * The title of the popconfirm.
+     *
+     * @type {string}
+     * @default 'Are you sure?'
+     */
+    title: string;
+    /**
+     * The text for the confirm button.
+     *
+     * @type {string}
+     * @default 'Confirm'
+     */
+    confirmText: string;
+    /**
+     * The text for the cancel button.
+     *
+     * @type {string}
+     * @default 'Cancel'
+     */
+    cancelText: string;
+    /**
+     * 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'
+     */
+    status: 'success' | 'warning' | 'danger' | 'info' | 'primary' | '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
+     */
+    statusIcon: boolean;
+    /**
+     * Determines whether the arrow should be displayed.
+     *
+     * - `true` (default) - Arrow will be displayed.
+     * - `false` - Arrow will be hidden.
+     *
+     * @type {boolean}
+     * @default true
+     */
+    showArrow: boolean;
+    /**
+     * Controls the visibility of the popconfirm.
+     *
+     * @private
+     * @type {boolean}
+     * @default false
+     */
+    private isVisible;
+    private targetElement?;
+    private arrowElement?;
+    private cleanup?;
+    private getPopconfirm;
+    private updatePosition;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleClick;
+    private closePopconfirm;
+    private handleConfirm;
+    private handleCancel;
+    private cleanupAutoUpdate;
+    private _cleanupTarget;
+    private handleOutsideClick;
+    private handleSlotChange;
+    private _setupPopconfirm;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusPopconfirm };
+//# sourceMappingURL=popconfirm.d.ts.map

package/dist/components/popconfirm/popconfirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popconfirm.d.ts","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.ts"],"names":[],"mappings":"AAWA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAG7C,aAAK,iBAAiB;IACpB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,aAAK,kBAAkB;IACrB,GAAG,QAAQ;IACX,QAAQ,cAAc;IACtB,MAAM,YAAY;IAClB,MAAM,WAAW;IACjB,WAAW,iBAAiB;IAC5B,SAAS,eAAe;IACxB,IAAI,SAAS;IACb,SAAS,eAAe;IACxB,OAAO,aAAa;IACpB,KAAK,UAAU;IACf,UAAU,gBAAgB;IAC1B,QAAQ,cAAc;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,QAAQ;IAElD,KAAK,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE3B;;;;;;;;;;OAUG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;;;;;;;;;;;;;;;;;OAmBG;IAEH,WAAW,EAAE,kBAAkB,CAA0B;IAEzD;;;;;;;;;OASG;IAEH,OAAO,EAAE,iBAAiB,CAA2B;IAErD;;;;;OAKG;IAEM,KAAK,SAAmB;IAEjC;;;;;OAKG;IAEH,WAAW,SAAa;IAExB;;;;;OAKG;IAEH,UAAU,SAAY;IAEtB;;;;;;;;;;;;;OAaG;IAEH,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAC7D;IAEZ;;;;;;;;OAQG;IAMH,UAAU,UAAQ;IAElB;;;;;;;;OAQG;IAMH,SAAS,UAAQ;IAEjB;;;;;;OAMG;IAEH,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,aAAa,CAAC,CAAc;IACpC,OAAO,CAAC,YAAY,CAAC,CAAc;IACnC,OAAO,CAAC,OAAO,CAAC,CAAa;IAE7B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,cAAc,CAkEpB;IAEF,OAAO,CAAC,gBAAgB,CAStB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,WAAW,CAcjB;IAEF,OAAO,CAAC,eAAe,CAQrB;IAEF,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,kBAAkB,CAYxB;IAEF,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,gBAAgB;IAaf,YAAY;IAIZ,oBAAoB;IAKpB,MAAM;CA6GhB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}