@nuralyui/popconfirm 0.0.1

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.
Files changed (22) hide show
  1. package/bundle.js +1146 -0
  2. package/index.d.ts +3 -0
  3. package/index.d.ts.map +1 -0
  4. package/index.js +3 -0
  5. package/index.js.map +1 -0
  6. package/package.json +31 -0
  7. package/popconfirm.component.d.ts +162 -0
  8. package/popconfirm.component.d.ts.map +1 -0
  9. package/popconfirm.component.js +353 -0
  10. package/popconfirm.component.js.map +1 -0
  11. package/popconfirm.style.d.ts +2 -0
  12. package/popconfirm.style.d.ts.map +1 -0
  13. package/popconfirm.style.js +207 -0
  14. package/popconfirm.style.js.map +1 -0
  15. package/popconfirm.types.d.ts +63 -0
  16. package/popconfirm.types.d.ts.map +1 -0
  17. package/popconfirm.types.js +2 -0
  18. package/popconfirm.types.js.map +1 -0
  19. package/react.d.ts +7 -0
  20. package/react.d.ts.map +1 -0
  21. package/react.js +14 -0
  22. package/react.js.map +1 -0
package/popconfirm.style.js ADDED
@@ -0,0 +1,207 @@
1
+ import { css } from 'lit';
2
+ export const styles = css `
3
+ :host {
4
+ display: inline-block;
5
+ }
6
+
7
+ .popconfirm-content {
8
+ display: flex;
9
+ flex-direction: column;
10
+ gap: 12px;
11
+ padding: 12px 16px;
12
+ min-width: 200px;
13
+ max-width: 400px;
14
+ }
15
+
16
+ .popconfirm-message {
17
+ display: flex;
18
+ gap: 8px;
19
+ align-items: flex-start;
20
+ }
21
+
22
+ .popconfirm-icon {
23
+ flex-shrink: 0;
24
+ font-size: 16px;
25
+ line-height: 1.5;
26
+ margin-top: 2px;
27
+ }
28
+
29
+ .popconfirm-icon--warning {
30
+ color: var(--nuraly-color-warning);
31
+ }
32
+
33
+ .popconfirm-icon--question {
34
+ color: var(--nuraly-color-info);
35
+ }
36
+
37
+ .popconfirm-icon--info {
38
+ color: var(--nuraly-color-info);
39
+ }
40
+
41
+ .popconfirm-icon--error {
42
+ color: var(--nuraly-color-error);
43
+ }
44
+
45
+ .popconfirm-icon--success {
46
+ color: var(--nuraly-color-success);
47
+ }
48
+
49
+ .popconfirm-icon--custom {
50
+ color: var(--nuraly-popconfirm-icon-color, var(--nuraly-color-text));
51
+ }
52
+
53
+ .popconfirm-text {
54
+ flex: 1;
55
+ display: flex;
56
+ flex-direction: column;
57
+ gap: 4px;
58
+ }
59
+
60
+ .popconfirm-title {
61
+ color: var(--nuraly-color-text);
62
+ font-size: var(--nuraly-font-size-base);
63
+ font-weight: 600;
64
+ line-height: 1.5;
65
+ margin: 0;
66
+ }
67
+
68
+ .popconfirm-description {
69
+ color: var(--nuraly-color-text-secondary);
70
+ font-size: var(--nuraly-font-size-sm);
71
+ line-height: 1.5;
72
+ margin: 0;
73
+ }
74
+
75
+ .popconfirm-buttons {
76
+ display: flex;
77
+ gap: 8px;
78
+ justify-content: flex-end;
79
+ align-items: center;
80
+ }
81
+
82
+ .popconfirm-button {
83
+ padding: 4px 15px;
84
+ font-size: var(--nuraly-font-size-sm);
85
+ border-radius: var(--nuraly-border-radius);
86
+ border: 1px solid transparent;
87
+ cursor: pointer;
88
+ transition: all 0.2s;
89
+ font-weight: 400;
90
+ line-height: 1.5;
91
+ white-space: nowrap;
92
+ user-select: none;
93
+ }
94
+
95
+ .popconfirm-button:focus-visible {
96
+ outline: 2px solid var(--nuraly-color-primary);
97
+ outline-offset: 2px;
98
+ }
99
+
100
+ .popconfirm-button--cancel {
101
+ background: var(--nuraly-button-default-background);
102
+ color: var(--nuraly-button-default-text-color);
103
+ border-color: var(--nuraly-button-default-border-color);
104
+ }
105
+
106
+ .popconfirm-button--cancel:hover:not(:disabled) {
107
+ background: var(--nuraly-button-default-hover-background);
108
+ color: var(--nuraly-button-default-hover-text-color);
109
+ border-color: var(--nuraly-button-default-hover-border-color);
110
+ }
111
+
112
+ .popconfirm-button--ok-primary {
113
+ background: var(--nuraly-button-primary-background);
114
+ color: var(--nuraly-button-primary-text-color);
115
+ border-color: var(--nuraly-button-primary-border-color);
116
+ }
117
+
118
+ .popconfirm-button--ok-primary:hover:not(:disabled) {
119
+ background: var(--nuraly-button-primary-hover-background);
120
+ color: var(--nuraly-button-primary-hover-text-color);
121
+ border-color: var(--nuraly-button-primary-hover-border-color);
122
+ }
123
+
124
+ .popconfirm-button--ok-danger {
125
+ background: var(--nuraly-button-danger-background);
126
+ color: var(--nuraly-button-danger-text-color);
127
+ border-color: var(--nuraly-button-danger-border-color);
128
+ }
129
+
130
+ .popconfirm-button--ok-danger:hover:not(:disabled) {
131
+ background: var(--nuraly-button-danger-hover-background);
132
+ color: var(--nuraly-button-danger-hover-text-color);
133
+ border-color: var(--nuraly-button-danger-hover-border-color);
134
+ }
135
+
136
+ .popconfirm-button--ok-secondary {
137
+ background: var(--nuraly-button-secondary-background);
138
+ color: var(--nuraly-button-secondary-text-color);
139
+ border-color: var(--nuraly-button-secondary-border-color);
140
+ }
141
+
142
+ .popconfirm-button--ok-secondary:hover:not(:disabled) {
143
+ background: var(--nuraly-button-secondary-hover-background);
144
+ color: var(--nuraly-button-secondary-hover-text-color);
145
+ border-color: var(--nuraly-button-secondary-hover-border-color);
146
+ }
147
+
148
+ .popconfirm-button--ok-default {
149
+ background: var(--nuraly-button-default-background);
150
+ color: var(--nuraly-button-default-text-color);
151
+ border-color: var(--nuraly-button-default-border-color);
152
+ }
153
+
154
+ .popconfirm-button--ok-default:hover:not(:disabled) {
155
+ background: var(--nuraly-button-default-hover-background);
156
+ color: var(--nuraly-button-default-hover-text-color);
157
+ border-color: var(--nuraly-button-default-hover-border-color);
158
+ }
159
+
160
+ .popconfirm-button:disabled {
161
+ opacity: 0.5;
162
+ cursor: not-allowed;
163
+ }
164
+
165
+ .popconfirm-button--loading {
166
+ position: relative;
167
+ pointer-events: none;
168
+ }
169
+
170
+ .popconfirm-button--loading::before {
171
+ content: '';
172
+ position: absolute;
173
+ left: 50%;
174
+ top: 50%;
175
+ width: 14px;
176
+ height: 14px;
177
+ margin-left: -7px;
178
+ margin-top: -7px;
179
+ border: 2px solid currentColor;
180
+ border-right-color: transparent;
181
+ border-radius: 50%;
182
+ animation: popconfirm-spin 0.6s linear infinite;
183
+ }
184
+
185
+ .popconfirm-button--loading > * {
186
+ visibility: hidden;
187
+ }
188
+
189
+ @keyframes popconfirm-spin {
190
+ 0% {
191
+ transform: rotate(0deg);
192
+ }
193
+ 100% {
194
+ transform: rotate(360deg);
195
+ }
196
+ }
197
+
198
+ /* RTL Support */
199
+ :host([dir='rtl']) .popconfirm-message {
200
+ direction: rtl;
201
+ }
202
+
203
+ :host([dir='rtl']) .popconfirm-buttons {
204
+ flex-direction: row-reverse;
205
+ }
206
+ `;
207
+ //# sourceMappingURL=popconfirm.style.js.map
package/popconfirm.style.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popconfirm.style.js","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4MxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n .popconfirm-content {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 12px 16px;\n min-width: 200px;\n max-width: 400px;\n }\n\n .popconfirm-message {\n display: flex;\n gap: 8px;\n align-items: flex-start;\n }\n\n .popconfirm-icon {\n flex-shrink: 0;\n font-size: 16px;\n line-height: 1.5;\n margin-top: 2px;\n }\n\n .popconfirm-icon--warning {\n color: var(--nuraly-color-warning);\n }\n\n .popconfirm-icon--question {\n color: var(--nuraly-color-info);\n }\n\n .popconfirm-icon--info {\n color: var(--nuraly-color-info);\n }\n\n .popconfirm-icon--error {\n color: var(--nuraly-color-error);\n }\n\n .popconfirm-icon--success {\n color: var(--nuraly-color-success);\n }\n\n .popconfirm-icon--custom {\n color: var(--nuraly-popconfirm-icon-color, var(--nuraly-color-text));\n }\n\n .popconfirm-text {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .popconfirm-title {\n color: var(--nuraly-color-text);\n font-size: var(--nuraly-font-size-base);\n font-weight: 600;\n line-height: 1.5;\n margin: 0;\n }\n\n .popconfirm-description {\n color: var(--nuraly-color-text-secondary);\n font-size: var(--nuraly-font-size-sm);\n line-height: 1.5;\n margin: 0;\n }\n\n .popconfirm-buttons {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n align-items: center;\n }\n\n .popconfirm-button {\n padding: 4px 15px;\n font-size: var(--nuraly-font-size-sm);\n border-radius: var(--nuraly-border-radius);\n border: 1px solid transparent;\n cursor: pointer;\n transition: all 0.2s;\n font-weight: 400;\n line-height: 1.5;\n white-space: nowrap;\n user-select: none;\n }\n\n .popconfirm-button:focus-visible {\n outline: 2px solid var(--nuraly-color-primary);\n outline-offset: 2px;\n }\n\n .popconfirm-button--cancel {\n background: var(--nuraly-button-default-background);\n color: var(--nuraly-button-default-text-color);\n border-color: var(--nuraly-button-default-border-color);\n }\n\n .popconfirm-button--cancel:hover:not(:disabled) {\n background: var(--nuraly-button-default-hover-background);\n color: var(--nuraly-button-default-hover-text-color);\n border-color: var(--nuraly-button-default-hover-border-color);\n }\n\n .popconfirm-button--ok-primary {\n background: var(--nuraly-button-primary-background);\n color: var(--nuraly-button-primary-text-color);\n border-color: var(--nuraly-button-primary-border-color);\n }\n\n .popconfirm-button--ok-primary:hover:not(:disabled) {\n background: var(--nuraly-button-primary-hover-background);\n color: var(--nuraly-button-primary-hover-text-color);\n border-color: var(--nuraly-button-primary-hover-border-color);\n }\n\n .popconfirm-button--ok-danger {\n background: var(--nuraly-button-danger-background);\n color: var(--nuraly-button-danger-text-color);\n border-color: var(--nuraly-button-danger-border-color);\n }\n\n .popconfirm-button--ok-danger:hover:not(:disabled) {\n background: var(--nuraly-button-danger-hover-background);\n color: var(--nuraly-button-danger-hover-text-color);\n border-color: var(--nuraly-button-danger-hover-border-color);\n }\n\n .popconfirm-button--ok-secondary {\n background: var(--nuraly-button-secondary-background);\n color: var(--nuraly-button-secondary-text-color);\n border-color: var(--nuraly-button-secondary-border-color);\n }\n\n .popconfirm-button--ok-secondary:hover:not(:disabled) {\n background: var(--nuraly-button-secondary-hover-background);\n color: var(--nuraly-button-secondary-hover-text-color);\n border-color: var(--nuraly-button-secondary-hover-border-color);\n }\n\n .popconfirm-button--ok-default {\n background: var(--nuraly-button-default-background);\n color: var(--nuraly-button-default-text-color);\n border-color: var(--nuraly-button-default-border-color);\n }\n\n .popconfirm-button--ok-default:hover:not(:disabled) {\n background: var(--nuraly-button-default-hover-background);\n color: var(--nuraly-button-default-hover-text-color);\n border-color: var(--nuraly-button-default-hover-border-color);\n }\n\n .popconfirm-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .popconfirm-button--loading {\n position: relative;\n pointer-events: none;\n }\n\n .popconfirm-button--loading::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n width: 14px;\n height: 14px;\n margin-left: -7px;\n margin-top: -7px;\n border: 2px solid currentColor;\n border-right-color: transparent;\n border-radius: 50%;\n animation: popconfirm-spin 0.6s linear infinite;\n }\n\n .popconfirm-button--loading > * {\n visibility: hidden;\n }\n\n @keyframes popconfirm-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n /* RTL Support */\n :host([dir='rtl']) .popconfirm-message {\n direction: rtl;\n }\n\n :host([dir='rtl']) .popconfirm-buttons {\n flex-direction: row-reverse;\n }\n`;\n"]}
package/popconfirm.types.d.ts ADDED
@@ -0,0 +1,63 @@
1
+ /**
2
+ * Popconfirm placement options
3
+ * Inherited from dropdown placement options
4
+ */
5
+ export declare const enum PopconfirmPlacement {
6
+ Top = "top",
7
+ TopStart = "top-start",
8
+ TopEnd = "top-end",
9
+ Bottom = "bottom",
10
+ BottomStart = "bottom-start",
11
+ BottomEnd = "bottom-end",
12
+ Left = "left",
13
+ LeftStart = "left-start",
14
+ LeftEnd = "left-end",
15
+ Right = "right",
16
+ RightStart = "right-start",
17
+ RightEnd = "right-end"
18
+ }
19
+ /**
20
+ * Popconfirm trigger mode
21
+ */
22
+ export declare const enum PopconfirmTrigger {
23
+ Click = "click",
24
+ Hover = "hover",
25
+ Focus = "focus"
26
+ }
27
+ /**
28
+ * Popconfirm button type
29
+ */
30
+ export declare const enum PopconfirmButtonType {
31
+ Primary = "primary",
32
+ Secondary = "secondary",
33
+ Danger = "danger",
34
+ Default = "default"
35
+ }
36
+ /**
37
+ * Predefined icons for popconfirm
38
+ */
39
+ export declare const enum PopconfirmIcon {
40
+ Warning = "exclamation-circle",
41
+ Question = "question-circle",
42
+ Info = "info-circle",
43
+ Error = "close-circle",
44
+ Success = "check-circle"
45
+ }
46
+ /**
47
+ * Popconfirm configuration
48
+ */
49
+ export interface PopconfirmConfig {
50
+ title: string;
51
+ description?: string;
52
+ okText?: string;
53
+ cancelText?: string;
54
+ okType?: PopconfirmButtonType;
55
+ showCancel?: boolean;
56
+ icon?: string;
57
+ iconColor?: string;
58
+ placement?: PopconfirmPlacement;
59
+ trigger?: PopconfirmTrigger;
60
+ disabled?: boolean;
61
+ arrow?: boolean;
62
+ }
63
+ //# sourceMappingURL=popconfirm.types.d.ts.map
package/popconfirm.types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popconfirm.types.d.ts","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,0BAAkB,mBAAmB;IACnC,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;;GAEG;AACH,0BAAkB,iBAAiB;IACjC,KAAK,UAAU;IACf,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,0BAAkB,oBAAoB;IACpC,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB;AAED;;GAEG;AACH,0BAAkB,cAAc;IAC9B,OAAO,uBAAuB;IAC9B,QAAQ,oBAAoB;IAC5B,IAAI,gBAAgB;IACpB,KAAK,iBAAiB;IACtB,OAAO,iBAAiB;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}
package/popconfirm.types.js ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=popconfirm.types.js.map
package/popconfirm.types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popconfirm.types.js","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Popconfirm placement options\n * Inherited from dropdown placement options\n */\nexport const enum PopconfirmPlacement {\n Top = 'top',\n TopStart = 'top-start',\n TopEnd = 'top-end',\n Bottom = 'bottom',\n BottomStart = 'bottom-start',\n BottomEnd = 'bottom-end',\n Left = 'left',\n LeftStart = 'left-start',\n LeftEnd = 'left-end',\n Right = 'right',\n RightStart = 'right-start',\n RightEnd = 'right-end',\n}\n\n/**\n * Popconfirm trigger mode\n */\nexport const enum PopconfirmTrigger {\n Click = 'click',\n Hover = 'hover',\n Focus = 'focus',\n}\n\n/**\n * Popconfirm button type\n */\nexport const enum PopconfirmButtonType {\n Primary = 'primary',\n Secondary = 'secondary',\n Danger = 'danger',\n Default = 'default',\n}\n\n/**\n * Predefined icons for popconfirm\n */\nexport const enum PopconfirmIcon {\n Warning = 'exclamation-circle',\n Question = 'question-circle',\n Info = 'info-circle',\n Error = 'close-circle',\n Success = 'check-circle',\n}\n\n/**\n * Popconfirm configuration\n */\nexport interface PopconfirmConfig {\n title: string;\n description?: string;\n okText?: string;\n cancelText?: string;\n okType?: PopconfirmButtonType;\n showCancel?: boolean;\n icon?: string;\n iconColor?: string;\n placement?: PopconfirmPlacement;\n trigger?: PopconfirmTrigger;\n disabled?: boolean;\n arrow?: boolean;\n}\n"]}
package/react.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { NrPopconfirmElement } from './popconfirm.component.js';
2
+ export declare const NrPopconfirm: import("@lit-labs/react").ReactWebComponent<NrPopconfirmElement, {
3
+ onConfirm: string;
4
+ onCancel: string;
5
+ onOpenChange: string;
6
+ }>;
7
+ //# sourceMappingURL=react.d.ts.map
package/react.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/popconfirm/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,eAAO,MAAM,YAAY;;;;EASvB,CAAC"}
package/react.js ADDED
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit-labs/react';
3
+ import { NrPopconfirmElement } from './popconfirm.component.js';
4
+ export const NrPopconfirm = createComponent({
5
+ tagName: 'nr-popconfirm',
6
+ elementClass: NrPopconfirmElement,
7
+ react: React,
8
+ events: {
9
+ onConfirm: 'nr-confirm',
10
+ onCancel: 'nr-cancel',
11
+ onOpenChange: 'nr-open-change',
12
+ },
13
+ });
14
+ //# sourceMappingURL=react.js.map
package/react.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/popconfirm/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,mBAAmB;IACjC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,WAAW;QACrB,YAAY,EAAE,gBAAgB;KAC/B;CACF,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { NrPopconfirmElement } from './popconfirm.component.js';\n\nexport const NrPopconfirm = createComponent({\n tagName: 'nr-popconfirm',\n elementClass: NrPopconfirmElement,\n react: React,\n events: {\n onConfirm: 'nr-confirm',\n onCancel: 'nr-cancel',\n onOpenChange: 'nr-open-change',\n },\n});\n"]}