@nuralyui/popconfirm 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +20 -846
- package/package.json +1 -1
- package/popconfirm.component.d.ts +0 -2
- package/popconfirm.component.d.ts.map +1 -1
- package/popconfirm.component.js +0 -2
- package/popconfirm.component.js.map +1 -1
package/package.json
CHANGED
|
@@ -5,8 +5,6 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement } from 'lit';
|
|
7
7
|
import { PopconfirmPlacement, PopconfirmTrigger, PopconfirmButtonType, PopconfirmIcon } from './popconfirm.types.js';
|
|
8
|
-
import '../dropdown/index.js';
|
|
9
|
-
import '../icon/index.js';
|
|
10
8
|
declare const NrPopconfirmElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
11
9
|
/**
|
|
12
10
|
* # Popconfirm Component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popconfirm.component.d.ts","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,EACH,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACjB,MAAM,uBAAuB,CAAC
|
|
1
|
+
{"version":3,"file":"popconfirm.component.d.ts","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,EACH,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACjB,MAAM,uBAAuB,CAAC;;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,mBAAoB,SAAQ,wBAA6B;IACpE,OAAgB,MAAM,0BAAU;IAEvB,kBAAkB,WAA8B;IAEzD;;OAEG;IACkC,KAAK,SAAM;IAEhD;;OAEG;IACyB,WAAW,SAAM;IAE7C;;OAEG;IAC+C,MAAM,SAAQ;IAEhE;;OAEG;IACmD,UAAU,SAAY;IAE5E;;OAEG;IAC+C,MAAM,EAAE,oBAAoB,CAC/C;IAE/B;;OAEG;IACoD,UAAU,UAAQ;IAEzE;;OAEG;IACyB,IAAI,iBAA0B;IAE1D;;OAEG;IACkD,SAAS,SAAM;IAEpE;;OAEG;IACyB,SAAS,EAAE,mBAAmB,CAA2B;IAErF;;OAEG;IACyB,OAAO,EAAE,iBAAiB,CAA2B;IAEjF;;OAEG;IAC0B,QAAQ,UAAS;IAE9C;;OAEG;IAC0B,KAAK,UAAQ;IAE1C;;OAEG;IACyC,IAAI,UAAS;IAEzD;;OAEG;IACM,OAAO,CAAC,SAAS,CAAS;IAEnC;;OAEG;IACH,OAAO,KAAK,eAAe,GAE1B;IAED;;OAEG;IACH,OAAO,CAAC,aAAa,CAiCnB;IAEF;;OAEG;IACH,OAAO,CAAC,YAAY,CAYlB;IAEF;;OAEG;IACH,OAAO,CAAC,eAAe;IAOvB;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAStB;IAEF;;OAEG;IACH,OAAO,CAAC,YAAY;IASpB;;OAEG;IACH,OAAO,CAAC,YAAY;IAgBpB;;OAEG;IACH,OAAO,CAAC,aAAa;IA+CZ,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
|
package/popconfirm.component.js
CHANGED
|
@@ -23,8 +23,6 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|
|
23
23
|
import { classMap } from 'lit/directives/class-map.js';
|
|
24
24
|
import { styles } from './popconfirm.style.js';
|
|
25
25
|
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
26
|
-
import '../dropdown/index.js';
|
|
27
|
-
import '../icon/index.js';
|
|
28
26
|
/**
|
|
29
27
|
* # Popconfirm Component
|
|
30
28
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popconfirm.component.js","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './popconfirm.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n PopconfirmPlacement,\n PopconfirmTrigger,\n PopconfirmButtonType,\n PopconfirmIcon,\n} from './popconfirm.types.js';\nimport '../dropdown/index.js';\nimport '../icon/index.js';\n\n/**\n * # Popconfirm Component\n *\n * A pop-up confirmation dialog triggered by user interaction. It provides a simple and\n * compact way to ask for user confirmation before performing an action.\n *\n * ## Features\n * - Customizable title and description\n * - Configurable OK and Cancel buttons\n * - Multiple placement options (12 positions)\n * - Custom icons with predefined options\n * - Async confirmation support\n * - Multiple trigger modes (click, hover, focus)\n * - Theme-aware styling\n * - Keyboard accessibility\n *\n * ## Usage\n * ```html\n * <!-- Basic popconfirm -->\n * <nr-popconfirm\n * title=\"Are you sure delete this task?\"\n * ok-text=\"Yes\"\n * cancel-text=\"No\">\n * <button slot=\"trigger\">Delete</button>\n * </nr-popconfirm>\n *\n * <!-- With description -->\n * <nr-popconfirm\n * title=\"Delete the task\"\n * description=\"Are you sure you want to delete this task? This action cannot be undone.\"\n * ok-type=\"danger\">\n * <button slot=\"trigger\">Delete</button>\n * </nr-popconfirm>\n *\n * <!-- Custom icon -->\n * <nr-popconfirm\n * title=\"Change status?\"\n * icon=\"question-circle\"\n * icon-color=\"#1890ff\">\n * <button slot=\"trigger\">Change Status</button>\n * </nr-popconfirm>\n * ```\n *\n * @element nr-popconfirm\n * @fires nr-confirm - Fired when user confirms the action\n * @fires nr-cancel - Fired when user cancels the action\n * @fires nr-open-change - Fired when popconfirm visibility changes\n *\n * @slot trigger - Element that triggers the popconfirm\n *\n * @cssproperty --nuraly-popconfirm-icon-color - Custom icon color\n */\n@customElement('nr-popconfirm')\nexport class NrPopconfirmElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n override requiredComponents = ['nr-dropdown', 'nr-icon'];\n\n /**\n * Title of the confirmation box\n */\n @property({ type: String }) override title = '';\n\n /**\n * Description of the confirmation box (optional)\n */\n @property({ type: String }) description = '';\n\n /**\n * Text of the OK button\n */\n @property({ type: String, attribute: 'ok-text' }) okText = 'OK';\n\n /**\n * Text of the Cancel button\n */\n @property({ type: String, attribute: 'cancel-text' }) cancelText = 'Cancel';\n\n /**\n * Button type of the OK button\n */\n @property({ type: String, attribute: 'ok-type' }) okType: PopconfirmButtonType =\n PopconfirmButtonType.Primary;\n\n /**\n * Show cancel button\n */\n @property({ type: Boolean, attribute: 'show-cancel' }) showCancel = true;\n\n /**\n * Icon name for the confirmation box\n */\n @property({ type: String }) icon = PopconfirmIcon.Warning;\n\n /**\n * Custom icon color\n */\n @property({ type: String, attribute: 'icon-color' }) iconColor = '';\n\n /**\n * Placement of the popconfirm\n */\n @property({ type: String }) placement: PopconfirmPlacement = PopconfirmPlacement.Top;\n\n /**\n * Trigger mode\n */\n @property({ type: String }) trigger: PopconfirmTrigger = PopconfirmTrigger.Click;\n\n /**\n * Whether the popconfirm is disabled\n */\n @property({ type: Boolean }) disabled = false;\n\n /**\n * Whether to show arrow\n */\n @property({ type: Boolean }) arrow = true;\n\n /**\n * Whether the popconfirm is open\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * Loading state for OK button (for async operations)\n */\n @state() private okLoading = false;\n\n /**\n * Reference to the dropdown element\n */\n private get dropdownElement(): any {\n return this.shadowRoot?.querySelector('nr-dropdown');\n }\n\n /**\n * Handle confirm button click\n */\n private handleConfirm = async (e: Event) => {\n e.stopPropagation();\n\n const confirmEvent = new CustomEvent('nr-confirm', {\n bubbles: true,\n composed: true,\n cancelable: true,\n detail: { originalEvent: e },\n });\n\n const dispatched = this.dispatchEvent(confirmEvent);\n\n // If event is not prevented, close the popconfirm\n if (dispatched && !confirmEvent.defaultPrevented) {\n // Check if the event handler returns a promise\n const handler = (this as any).onConfirm;\n if (handler && typeof handler === 'function') {\n const result = handler(e);\n if (result && typeof result.then === 'function') {\n this.okLoading = true;\n try {\n await result;\n this.closePopconfirm();\n } catch (error) {\n console.error('Confirmation failed:', error);\n } finally {\n this.okLoading = false;\n }\n return;\n }\n }\n this.closePopconfirm();\n }\n };\n\n /**\n * Handle cancel button click\n */\n private handleCancel = (e: Event) => {\n e.stopPropagation();\n\n this.dispatchEvent(\n new CustomEvent('nr-cancel', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n })\n );\n\n this.closePopconfirm();\n };\n\n /**\n * Close the popconfirm\n */\n private closePopconfirm() {\n this.open = false;\n if (this.dropdownElement) {\n this.dropdownElement.open = false;\n }\n }\n\n /**\n * Handle dropdown open/close events\n */\n private handleOpenChange = (e: CustomEvent) => {\n this.open = e.detail.open;\n this.dispatchEvent(\n new CustomEvent('nr-open-change', {\n bubbles: true,\n composed: true,\n detail: { open: this.open },\n })\n );\n };\n\n /**\n * Get icon color based on icon type\n */\n private getIconColor(): string {\n if (this.iconColor) {\n return this.iconColor;\n }\n\n // Return empty string to use CSS class colors\n return '';\n }\n\n /**\n * Get icon class based on icon type\n */\n private getIconClass(): string {\n const iconColorMap: Record<string, string> = {\n [PopconfirmIcon.Warning]: 'warning',\n [PopconfirmIcon.Question]: 'question',\n [PopconfirmIcon.Info]: 'info',\n [PopconfirmIcon.Error]: 'error',\n [PopconfirmIcon.Success]: 'success',\n };\n\n if (this.iconColor) {\n return 'custom';\n }\n\n return iconColorMap[this.icon] || 'warning';\n }\n\n /**\n * Render the popconfirm content\n */\n private renderContent() {\n const iconClass = this.getIconClass();\n const iconColor = this.getIconColor();\n const okButtonClass = `ok-${this.okType}`;\n\n return html`\n <div class=\"popconfirm-content\">\n <div class=\"popconfirm-message\">\n <div\n class=\"popconfirm-icon popconfirm-icon--${iconClass}\"\n style=${iconColor ? `color: ${iconColor}` : ''}>\n <nr-icon name=${this.icon}></nr-icon>\n </div>\n <div class=\"popconfirm-text\">\n ${this.title ? html`<div class=\"popconfirm-title\">${this.title}</div>` : ''}\n ${this.description\n ? html`<div class=\"popconfirm-description\">${this.description}</div>`\n : ''}\n </div>\n </div>\n <div class=\"popconfirm-buttons\">\n ${this.showCancel\n ? html`\n <button\n class=\"popconfirm-button popconfirm-button--cancel\"\n @click=${this.handleCancel}\n type=\"button\">\n ${this.cancelText}\n </button>\n `\n : ''}\n <button\n class=${classMap({\n 'popconfirm-button': true,\n [`popconfirm-button--${okButtonClass}`]: true,\n 'popconfirm-button--loading': this.okLoading,\n })}\n @click=${this.handleConfirm}\n ?disabled=${this.okLoading}\n type=\"button\">\n ${this.okText}\n </button>\n </div>\n </div>\n `;\n }\n\n override render() {\n return html`\n <nr-dropdown\n .open=${this.open}\n .placement=${this.placement as any}\n .trigger=${this.trigger as any}\n ?disabled=${this.disabled}\n ?arrow=${this.arrow}\n @nr-dropdown-open=${this.handleOpenChange}\n @nr-dropdown-close=${this.handleOpenChange}>\n <slot name=\"trigger\" slot=\"trigger\"></slot>\n <div slot=\"content\">${this.renderContent()}</div>\n </nr-dropdown>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-popconfirm': NrPopconfirmElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"popconfirm.component.js","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './popconfirm.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n PopconfirmPlacement,\n PopconfirmTrigger,\n PopconfirmButtonType,\n PopconfirmIcon,\n} from './popconfirm.types.js';\n\n/**\n * # Popconfirm Component\n *\n * A pop-up confirmation dialog triggered by user interaction. It provides a simple and\n * compact way to ask for user confirmation before performing an action.\n *\n * ## Features\n * - Customizable title and description\n * - Configurable OK and Cancel buttons\n * - Multiple placement options (12 positions)\n * - Custom icons with predefined options\n * - Async confirmation support\n * - Multiple trigger modes (click, hover, focus)\n * - Theme-aware styling\n * - Keyboard accessibility\n *\n * ## Usage\n * ```html\n * <!-- Basic popconfirm -->\n * <nr-popconfirm\n * title=\"Are you sure delete this task?\"\n * ok-text=\"Yes\"\n * cancel-text=\"No\">\n * <button slot=\"trigger\">Delete</button>\n * </nr-popconfirm>\n *\n * <!-- With description -->\n * <nr-popconfirm\n * title=\"Delete the task\"\n * description=\"Are you sure you want to delete this task? This action cannot be undone.\"\n * ok-type=\"danger\">\n * <button slot=\"trigger\">Delete</button>\n * </nr-popconfirm>\n *\n * <!-- Custom icon -->\n * <nr-popconfirm\n * title=\"Change status?\"\n * icon=\"question-circle\"\n * icon-color=\"#1890ff\">\n * <button slot=\"trigger\">Change Status</button>\n * </nr-popconfirm>\n * ```\n *\n * @element nr-popconfirm\n * @fires nr-confirm - Fired when user confirms the action\n * @fires nr-cancel - Fired when user cancels the action\n * @fires nr-open-change - Fired when popconfirm visibility changes\n *\n * @slot trigger - Element that triggers the popconfirm\n *\n * @cssproperty --nuraly-popconfirm-icon-color - Custom icon color\n */\n@customElement('nr-popconfirm')\nexport class NrPopconfirmElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n override requiredComponents = ['nr-dropdown', 'nr-icon'];\n\n /**\n * Title of the confirmation box\n */\n @property({ type: String }) override title = '';\n\n /**\n * Description of the confirmation box (optional)\n */\n @property({ type: String }) description = '';\n\n /**\n * Text of the OK button\n */\n @property({ type: String, attribute: 'ok-text' }) okText = 'OK';\n\n /**\n * Text of the Cancel button\n */\n @property({ type: String, attribute: 'cancel-text' }) cancelText = 'Cancel';\n\n /**\n * Button type of the OK button\n */\n @property({ type: String, attribute: 'ok-type' }) okType: PopconfirmButtonType =\n PopconfirmButtonType.Primary;\n\n /**\n * Show cancel button\n */\n @property({ type: Boolean, attribute: 'show-cancel' }) showCancel = true;\n\n /**\n * Icon name for the confirmation box\n */\n @property({ type: String }) icon = PopconfirmIcon.Warning;\n\n /**\n * Custom icon color\n */\n @property({ type: String, attribute: 'icon-color' }) iconColor = '';\n\n /**\n * Placement of the popconfirm\n */\n @property({ type: String }) placement: PopconfirmPlacement = PopconfirmPlacement.Top;\n\n /**\n * Trigger mode\n */\n @property({ type: String }) trigger: PopconfirmTrigger = PopconfirmTrigger.Click;\n\n /**\n * Whether the popconfirm is disabled\n */\n @property({ type: Boolean }) disabled = false;\n\n /**\n * Whether to show arrow\n */\n @property({ type: Boolean }) arrow = true;\n\n /**\n * Whether the popconfirm is open\n */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /**\n * Loading state for OK button (for async operations)\n */\n @state() private okLoading = false;\n\n /**\n * Reference to the dropdown element\n */\n private get dropdownElement(): any {\n return this.shadowRoot?.querySelector('nr-dropdown');\n }\n\n /**\n * Handle confirm button click\n */\n private handleConfirm = async (e: Event) => {\n e.stopPropagation();\n\n const confirmEvent = new CustomEvent('nr-confirm', {\n bubbles: true,\n composed: true,\n cancelable: true,\n detail: { originalEvent: e },\n });\n\n const dispatched = this.dispatchEvent(confirmEvent);\n\n // If event is not prevented, close the popconfirm\n if (dispatched && !confirmEvent.defaultPrevented) {\n // Check if the event handler returns a promise\n const handler = (this as any).onConfirm;\n if (handler && typeof handler === 'function') {\n const result = handler(e);\n if (result && typeof result.then === 'function') {\n this.okLoading = true;\n try {\n await result;\n this.closePopconfirm();\n } catch (error) {\n console.error('Confirmation failed:', error);\n } finally {\n this.okLoading = false;\n }\n return;\n }\n }\n this.closePopconfirm();\n }\n };\n\n /**\n * Handle cancel button click\n */\n private handleCancel = (e: Event) => {\n e.stopPropagation();\n\n this.dispatchEvent(\n new CustomEvent('nr-cancel', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n })\n );\n\n this.closePopconfirm();\n };\n\n /**\n * Close the popconfirm\n */\n private closePopconfirm() {\n this.open = false;\n if (this.dropdownElement) {\n this.dropdownElement.open = false;\n }\n }\n\n /**\n * Handle dropdown open/close events\n */\n private handleOpenChange = (e: CustomEvent) => {\n this.open = e.detail.open;\n this.dispatchEvent(\n new CustomEvent('nr-open-change', {\n bubbles: true,\n composed: true,\n detail: { open: this.open },\n })\n );\n };\n\n /**\n * Get icon color based on icon type\n */\n private getIconColor(): string {\n if (this.iconColor) {\n return this.iconColor;\n }\n\n // Return empty string to use CSS class colors\n return '';\n }\n\n /**\n * Get icon class based on icon type\n */\n private getIconClass(): string {\n const iconColorMap: Record<string, string> = {\n [PopconfirmIcon.Warning]: 'warning',\n [PopconfirmIcon.Question]: 'question',\n [PopconfirmIcon.Info]: 'info',\n [PopconfirmIcon.Error]: 'error',\n [PopconfirmIcon.Success]: 'success',\n };\n\n if (this.iconColor) {\n return 'custom';\n }\n\n return iconColorMap[this.icon] || 'warning';\n }\n\n /**\n * Render the popconfirm content\n */\n private renderContent() {\n const iconClass = this.getIconClass();\n const iconColor = this.getIconColor();\n const okButtonClass = `ok-${this.okType}`;\n\n return html`\n <div class=\"popconfirm-content\">\n <div class=\"popconfirm-message\">\n <div\n class=\"popconfirm-icon popconfirm-icon--${iconClass}\"\n style=${iconColor ? `color: ${iconColor}` : ''}>\n <nr-icon name=${this.icon}></nr-icon>\n </div>\n <div class=\"popconfirm-text\">\n ${this.title ? html`<div class=\"popconfirm-title\">${this.title}</div>` : ''}\n ${this.description\n ? html`<div class=\"popconfirm-description\">${this.description}</div>`\n : ''}\n </div>\n </div>\n <div class=\"popconfirm-buttons\">\n ${this.showCancel\n ? html`\n <button\n class=\"popconfirm-button popconfirm-button--cancel\"\n @click=${this.handleCancel}\n type=\"button\">\n ${this.cancelText}\n </button>\n `\n : ''}\n <button\n class=${classMap({\n 'popconfirm-button': true,\n [`popconfirm-button--${okButtonClass}`]: true,\n 'popconfirm-button--loading': this.okLoading,\n })}\n @click=${this.handleConfirm}\n ?disabled=${this.okLoading}\n type=\"button\">\n ${this.okText}\n </button>\n </div>\n </div>\n `;\n }\n\n override render() {\n return html`\n <nr-dropdown\n .open=${this.open}\n .placement=${this.placement as any}\n .trigger=${this.trigger as any}\n ?disabled=${this.disabled}\n ?arrow=${this.arrow}\n @nr-dropdown-open=${this.handleOpenChange}\n @nr-dropdown-close=${this.handleOpenChange}>\n <slot name=\"trigger\" slot=\"trigger\"></slot>\n <div slot=\"content\">${this.renderContent()}</div>\n </nr-dropdown>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-popconfirm': NrPopconfirmElement;\n }\n}\n"]}
|