easy-component-ui 3.0.13 → 3.0.14

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 (168) hide show
  1. package/README.md +162 -162
  2. package/package.json +8 -2
  3. package/dist/assets/icon.css +0 -1
  4. package/dist/components/Base.js +0 -874
  5. package/dist/components/ea-alert.js +0 -213
  6. package/dist/components/ea-avatar.js +0 -164
  7. package/dist/components/ea-backtop.js +0 -136
  8. package/dist/components/ea-badge.js +0 -144
  9. package/dist/components/ea-breadcrumb.js +0 -148
  10. package/dist/components/ea-button.js +0 -266
  11. package/dist/components/ea-calendar.js +0 -10
  12. package/dist/components/ea-calendar2.js +0 -673
  13. package/dist/components/ea-card.js +0 -121
  14. package/dist/components/ea-carousel.js +0 -415
  15. package/dist/components/ea-checkbox.js +0 -446
  16. package/dist/components/ea-collapse.js +0 -313
  17. package/dist/components/ea-color-picker.js +0 -888
  18. package/dist/components/ea-container.js +0 -206
  19. package/dist/components/ea-countdown.js +0 -142
  20. package/dist/components/ea-date-picker.js +0 -649
  21. package/dist/components/ea-descriptions.js +0 -474
  22. package/dist/components/ea-dialog.js +0 -249
  23. package/dist/components/ea-drawer.js +0 -216
  24. package/dist/components/ea-dropdown.js +0 -228
  25. package/dist/components/ea-empty.js +0 -93
  26. package/dist/components/ea-icon.js +0 -158
  27. package/dist/components/ea-image-preview.js +0 -532
  28. package/dist/components/ea-image.js +0 -327
  29. package/dist/components/ea-infinite-scroll.js +0 -109
  30. package/dist/components/ea-input-number.js +0 -367
  31. package/dist/components/ea-input.js +0 -588
  32. package/dist/components/ea-layout.js +0 -132
  33. package/dist/components/ea-link.js +0 -101
  34. package/dist/components/ea-menu.js +0 -433
  35. package/dist/components/ea-message-box.js +0 -624
  36. package/dist/components/ea-message.js +0 -314
  37. package/dist/components/ea-notification.js +0 -331
  38. package/dist/components/ea-overlay.js +0 -168
  39. package/dist/components/ea-page-header.js +0 -108
  40. package/dist/components/ea-pagination.js +0 -481
  41. package/dist/components/ea-popconfirm.js +0 -275
  42. package/dist/components/ea-popover.js +0 -147
  43. package/dist/components/ea-popper.js +0 -203
  44. package/dist/components/ea-progress.js +0 -286
  45. package/dist/components/ea-radio.js +0 -364
  46. package/dist/components/ea-rate.js +0 -241
  47. package/dist/components/ea-result.js +0 -100
  48. package/dist/components/ea-scrollbar.js +0 -235
  49. package/dist/components/ea-segmented.js +0 -215
  50. package/dist/components/ea-select.js +0 -609
  51. package/dist/components/ea-skeleton.js +0 -263
  52. package/dist/components/ea-slider.js +0 -430
  53. package/dist/components/ea-space.js +0 -123
  54. package/dist/components/ea-splitter.js +0 -233
  55. package/dist/components/ea-statistic.js +0 -74
  56. package/dist/components/ea-steps.js +0 -346
  57. package/dist/components/ea-switch.js +0 -271
  58. package/dist/components/ea-table.js +0 -1135
  59. package/dist/components/ea-tabs.js +0 -501
  60. package/dist/components/ea-tag.js +0 -228
  61. package/dist/components/ea-text.js +0 -113
  62. package/dist/components/ea-time-picker.js +0 -510
  63. package/dist/components/ea-timeline.js +0 -185
  64. package/dist/components/ea-tooltip.js +0 -161
  65. package/dist/components/ea-tour.js +0 -544
  66. package/dist/components/ea-transfer.js +0 -949
  67. package/dist/components/ea-tree.js +0 -1125
  68. package/dist/components/index.js +0 -60
  69. package/dist/core/FormBase.js +0 -238
  70. package/dist/css/ea-alert.style.js +0 -4
  71. package/dist/css/ea-aside.style.js +0 -4
  72. package/dist/css/ea-avatar.style.js +0 -4
  73. package/dist/css/ea-backtop.style.js +0 -4
  74. package/dist/css/ea-badge.style.js +0 -4
  75. package/dist/css/ea-breadcrumb-item.style.js +0 -4
  76. package/dist/css/ea-breadcrumb.style.js +0 -4
  77. package/dist/css/ea-button-group.style.js +0 -4
  78. package/dist/css/ea-button.style.js +0 -4
  79. package/dist/css/ea-calendar.style.js +0 -4
  80. package/dist/css/ea-card.style.js +0 -4
  81. package/dist/css/ea-carousel-item.style.js +0 -4
  82. package/dist/css/ea-carousel.style.js +0 -4
  83. package/dist/css/ea-check-tag.style.js +0 -4
  84. package/dist/css/ea-checkbox-group.style.js +0 -4
  85. package/dist/css/ea-checkbox.style.js +0 -4
  86. package/dist/css/ea-col.style.js +0 -4
  87. package/dist/css/ea-collapse-item.style.js +0 -4
  88. package/dist/css/ea-collapse.style.js +0 -4
  89. package/dist/css/ea-color-picker-panel.style.js +0 -4
  90. package/dist/css/ea-color-picker.style.js +0 -4
  91. package/dist/css/ea-container.style.js +0 -4
  92. package/dist/css/ea-date-picker.style.js +0 -4
  93. package/dist/css/ea-descriptions-item.style.js +0 -4
  94. package/dist/css/ea-descriptions.style.js +0 -4
  95. package/dist/css/ea-dialog.style.js +0 -4
  96. package/dist/css/ea-drawer.style.js +0 -4
  97. package/dist/css/ea-dropdown-item.style.js +0 -4
  98. package/dist/css/ea-dropdown-menu.style.js +0 -4
  99. package/dist/css/ea-dropdown.style.js +0 -4
  100. package/dist/css/ea-empty.style.js +0 -4
  101. package/dist/css/ea-footer.style.js +0 -4
  102. package/dist/css/ea-header.style.js +0 -4
  103. package/dist/css/ea-icon.style.js +0 -4
  104. package/dist/css/ea-image-preview.style.js +0 -4
  105. package/dist/css/ea-image.style.js +0 -4
  106. package/dist/css/ea-infinite-scroll.style.js +0 -4
  107. package/dist/css/ea-input-number.style.js +0 -4
  108. package/dist/css/ea-input.style.js +0 -4
  109. package/dist/css/ea-link.style.js +0 -4
  110. package/dist/css/ea-main.style.js +0 -4
  111. package/dist/css/ea-menu-item-group.style.js +0 -4
  112. package/dist/css/ea-menu-item.style.js +0 -4
  113. package/dist/css/ea-menu.style.js +0 -4
  114. package/dist/css/ea-message-box.style.js +0 -4
  115. package/dist/css/ea-message.style.js +0 -4
  116. package/dist/css/ea-notification.style.js +0 -4
  117. package/dist/css/ea-option-gropu.style.js +0 -4
  118. package/dist/css/ea-option.style.js +0 -4
  119. package/dist/css/ea-overlay.style.js +0 -4
  120. package/dist/css/ea-page-header.style.js +0 -4
  121. package/dist/css/ea-pagination.style.js +0 -4
  122. package/dist/css/ea-popconfirm.style.js +0 -4
  123. package/dist/css/ea-popover.style.js +0 -4
  124. package/dist/css/ea-popper.style.js +0 -4
  125. package/dist/css/ea-progress.style.js +0 -4
  126. package/dist/css/ea-radio-group.style.js +0 -4
  127. package/dist/css/ea-radio.style.js +0 -4
  128. package/dist/css/ea-rate.style.js +0 -4
  129. package/dist/css/ea-result.style.js +0 -4
  130. package/dist/css/ea-row.style.js +0 -4
  131. package/dist/css/ea-scrollbar.style.js +0 -4
  132. package/dist/css/ea-segmented.style.js +0 -4
  133. package/dist/css/ea-select.style.js +0 -4
  134. package/dist/css/ea-skeleton-item.style.js +0 -4
  135. package/dist/css/ea-skeleton.style.js +0 -4
  136. package/dist/css/ea-slider.style.js +0 -4
  137. package/dist/css/ea-space.style.js +0 -4
  138. package/dist/css/ea-splitter-bar.style.js +0 -4
  139. package/dist/css/ea-splitter-panel.style.js +0 -4
  140. package/dist/css/ea-splitter.style.js +0 -4
  141. package/dist/css/ea-statistic.style.js +0 -4
  142. package/dist/css/ea-step.style.js +0 -4
  143. package/dist/css/ea-steps.style.js +0 -4
  144. package/dist/css/ea-sub-menu.style.js +0 -4
  145. package/dist/css/ea-switch.style.js +0 -4
  146. package/dist/css/ea-tab-panel.style.js +0 -4
  147. package/dist/css/ea-tab.style.js +0 -4
  148. package/dist/css/ea-table-column.style.js +0 -4
  149. package/dist/css/ea-table.style.js +0 -4
  150. package/dist/css/ea-tabs.style.js +0 -4
  151. package/dist/css/ea-tag.style.js +0 -4
  152. package/dist/css/ea-text.style.js +0 -4
  153. package/dist/css/ea-time-picker.style.js +0 -4
  154. package/dist/css/ea-timeline-item.style.js +0 -4
  155. package/dist/css/ea-timeline.style.js +0 -4
  156. package/dist/css/ea-tooltip.style.js +0 -4
  157. package/dist/css/ea-tour-step.style.js +0 -4
  158. package/dist/css/ea-tour.style.js +0 -4
  159. package/dist/css/ea-transfer.style.js +0 -5
  160. package/dist/css/ea-tree.style.js +0 -6
  161. package/dist/css/ea-ui-component.style.js +0 -4
  162. package/dist/favicon.ico +0 -0
  163. package/dist/utils/Color.js +0 -439
  164. package/dist/utils/I18nManager.js +0 -218
  165. package/dist/utils/Utils.js +0 -65
  166. package/dist/utils/Variables.js +0 -12
  167. package/dist/utils/parseTime.js +0 -73
  168. package/dist/utils/timeout.js +0 -9
@@ -1,263 +0,0 @@
1
- var q = Object.defineProperty;
2
- var E = (e) => {
3
- throw TypeError(e);
4
- };
5
- var x = (e, a, t) => a in e ? q(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
6
- var w = (e, a, t) => x(e, typeof a != "symbol" ? a + "" : a, t), k = (e, a, t) => a.has(e) || E("Cannot " + t);
7
- var s = (e, a, t) => (k(e, a, "read from private field"), t ? t.call(e) : a.get(e)), r = (e, a, t) => a.has(e) ? E("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), u = (e, a, t, i) => (k(e, a, "write to private field"), i ? i.call(e, t) : a.set(e, t), t), c = (e, a, t) => (k(e, a, "access private method"), t);
8
- import { B as S } from "./Base.js";
9
- import { s as H } from "../css/ea-skeleton.style.js";
10
- import { E as N } from "../utils/Utils.js";
11
- import { s as $ } from "../css/ea-skeleton-item.style.js";
12
- var f, C, h, m, n, l, v, T, A, L, y, p;
13
- class B extends S {
14
- constructor() {
15
- super();
16
- r(this, l);
17
- /** @type {HTMLElement} */
18
- r(this, f);
19
- /** @type {HTMLSlotElement} */
20
- r(this, C);
21
- /** @type {HTMLSlotElement} */
22
- r(this, h);
23
- /** @type {AbortController} */
24
- r(this, m);
25
- r(this, n, {
26
- isChildrenReady: !1,
27
- templateNode: null,
28
- loadingThrottle: null
29
- });
30
- w(this, "state", this.properties({
31
- rows: {
32
- type: Number,
33
- default: 4,
34
- observer: async (t) => {
35
- await c(this, l, v).call(this), s(this, y).call(this, t), s(this, p).call(this, this.animated);
36
- }
37
- },
38
- animated: {
39
- type: Boolean,
40
- default: !1,
41
- observer: async (t) => {
42
- await c(this, l, v).call(this), s(this, p).call(this, t);
43
- }
44
- },
45
- count: {
46
- type: Number,
47
- default: 1,
48
- observer: async (t) => {
49
- await c(this, l, v).call(this);
50
- const i = c(this, l, T).call(this), o = c(this, l, L).call(this, t, i), [d] = i, b = i.length > 1, M = (d == null ? void 0 : d.tagName) === "EA-SKELETON-ITEM";
51
- b || M ? (i.forEach((R) => R.remove()), this.appendChild(o)) : (d.innerHTML = "", d.appendChild(o));
52
- }
53
- },
54
- "throttle-leading": {
55
- type: Number,
56
- default: 0,
57
- observer: () => {
58
- }
59
- },
60
- "throttle-trailing": {
61
- type: Number,
62
- default: 0,
63
- observer: () => {
64
- }
65
- },
66
- loading: {
67
- type: Boolean,
68
- default: !0,
69
- observer: (t) => {
70
- if (this["throttle-trailing"] || this["throttle-leading"])
71
- try {
72
- clearTimeout(s(this, n).loadingThrottle), s(this, n).loadingThrottle = null;
73
- } catch {
74
- }
75
- s(this, n).loadingThrottle = N.timeout(
76
- () => {
77
- this.updateContainerClasslist();
78
- },
79
- (t ? this["throttle-trailing"] : this["throttle-leading"]) || 0
80
- );
81
- }
82
- }
83
- }));
84
- /**
85
- * 初始化默认骨架屏
86
- * @param {Number} rows
87
- * @returns
88
- */
89
- r(this, y, (t = this.rows) => {
90
- this.querySelectorAll("ea-skeleton-item").length || (s(this, h).innerHTML = this.html(`
91
- ${Array.from({ length: t }).map(
92
- () => N.EaElement.h("ea-skeleton-item", null, {
93
- variant: "p",
94
- animated: this.animated
95
- })
96
- ).join("")}`));
97
- });
98
- /**
99
- * 更新动画状态
100
- * @param {boolean} isAnimated
101
- */
102
- r(this, p, (t) => {
103
- s(this, h).assignedElements().filter((o) => o.tagName.toLocaleLowerCase() === "ea-skeleton-item").concat([...s(this, h).querySelectorAll("ea-skeleton-item")]).forEach((o) => o.toggleAttribute("animated", t));
104
- });
105
- this.stylesheet = H, this.$render();
106
- }
107
- static get observedAttributes() {
108
- return [
109
- ...super.observedAttributes,
110
- "rows",
111
- "animated",
112
- "count",
113
- "loading",
114
- "throttle",
115
- "throttle-trailing",
116
- "throttle-leading"
117
- ];
118
- }
119
- /**
120
- * 获取 classlist 列表
121
- * @return {string} 属性值
122
- */
123
- updateContainerClasslist() {
124
- const t = this.computedClasslist(
125
- "ea-skeleton",
126
- {},
127
- {
128
- loading: this.loading
129
- }
130
- );
131
- return s(this, f).className = t, t;
132
- }
133
- async $render() {
134
- this.shadowRoot.innerHTML = `
135
- <div class='ea-skeleton' part='container'>
136
- <slot id="default" part="default-slot"></slot>
137
- <slot id="template" name="template" part="template-slot"></slot>
138
- </div>
139
- `, u(this, f, this.shadowRoot.querySelector(".ea-skeleton")), u(this, C, this.shadowRoot.querySelector("#default")), u(this, h, this.shadowRoot.querySelector("#template")), this.updateContainerClasslist();
140
- }
141
- async connectedCallback() {
142
- var i;
143
- super.connectedCallback(), (i = s(this, m)) == null || i.abort(), u(this, m, new AbortController());
144
- const t = () => {
145
- s(this, p).call(this, this.animated);
146
- };
147
- s(this, y).call(this), s(this, h).addEventListener("slotchange", t, {
148
- signal: s(this, m).signal
149
- });
150
- }
151
- $beforeUnmounted() {
152
- var t;
153
- (t = s(this, m)) == null || t.abort();
154
- }
155
- }
156
- f = new WeakMap(), C = new WeakMap(), h = new WeakMap(), m = new WeakMap(), n = new WeakMap(), l = new WeakSet(), v = async function() {
157
- s(this, n).isChildrenReady || (await customElements.whenDefined("ea-skeleton-item"), s(this, n).isChildrenReady = !0);
158
- }, /**
159
- * 获取模板元素
160
- * @returns {HTMLElement[]}
161
- */
162
- T = function() {
163
- const t = [...this.querySelectorAll("[slot='template']")];
164
- return t.length ? t : [s(this, h)];
165
- }, /**
166
- * 克隆模板元素
167
- * @param {HTMLElement[]} elements
168
- * @returns {DocumentFragment}
169
- */
170
- A = function(t) {
171
- if (s(this, n).templateNode) return s(this, n).templateNode;
172
- const i = document.createDocumentFragment();
173
- return t.forEach((o) => i.appendChild(o.cloneNode(!0))), s(this, n).templateNode = i, i;
174
- }, /**
175
- * 渲染模板元素
176
- * @param {number} count
177
- * @param {HTMLElement[]} elements
178
- * @returns {DocumentFragment}
179
- */
180
- L = function(t, i) {
181
- const o = c(this, l, A).call(this, i), d = document.createDocumentFragment();
182
- for (let b = 0; b < t; b++)
183
- d.appendChild(o.cloneNode(!0));
184
- return d;
185
- }, y = new WeakMap(), p = new WeakMap();
186
- window.customElements.get("ea-skeleton") || window.customElements.define("ea-skeleton", B);
187
- const I = `
188
- <svg id="skeletonImagePlaceholder" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" part="image-svg">
189
- <path fill="#c0c4cc" d="M0 0h100v100H0z" />
190
- <path fill="#fff" d="M15 20h70v60H15z" />
191
- <circle r="8" cx="32" cy="35" fill="#c0c4cc" />
192
- <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />
193
- <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />
194
- </svg>
195
- `;
196
- var g;
197
- class z extends S {
198
- constructor() {
199
- super();
200
- /** @type {HTMLElement} */
201
- r(this, g);
202
- w(this, "state", this.properties({
203
- variant: {
204
- type: [
205
- "p",
206
- "text",
207
- "h1",
208
- "h3",
209
- "caption",
210
- "button",
211
- "image",
212
- "circle",
213
- "rect"
214
- ],
215
- default: "p",
216
- observer: (t) => {
217
- t === "image" && (s(this, g).innerHTML = I), this.updateContainerClasslist();
218
- }
219
- },
220
- animated: {
221
- type: Boolean,
222
- default: !1,
223
- observer: () => {
224
- this.updateContainerClasslist();
225
- }
226
- }
227
- }));
228
- this.stylesheet = $, this.$render();
229
- }
230
- static get observedAttributes() {
231
- return [...super.observedAttributes, "variant", "animated"];
232
- }
233
- /**
234
- * 获取 classlist 列表
235
- * @return {string} 属性值
236
- */
237
- updateContainerClasslist() {
238
- const t = this.computedClasslist(
239
- "ea-skeleton-item",
240
- {
241
- ["--" + this.variant]: this.variant
242
- },
243
- {
244
- animated: this.animated
245
- }
246
- );
247
- return s(this, g).className = t, t;
248
- }
249
- $render() {
250
- this.shadowRoot.innerHTML = `
251
- <div class='ea-skeleton-item' part='container'></div>
252
- `, u(this, g, this.shadowRoot.querySelector(".ea-skeleton-item"));
253
- }
254
- connectedCallback() {
255
- super.connectedCallback();
256
- }
257
- }
258
- g = new WeakMap();
259
- window.customElements.get("ea-skeleton-item") || window.customElements.define("ea-skeleton-item", z);
260
- export {
261
- B as EaSkeleton,
262
- z as EaSkeletonItem
263
- };
@@ -1,430 +0,0 @@
1
- var z = Object.defineProperty;
2
- var B = (a) => {
3
- throw TypeError(a);
4
- };
5
- var I = (a, r, t) => r in a ? z(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
6
- var E = (a, r, t) => I(a, typeof r != "symbol" ? r + "" : r, t), P = (a, r, t) => r.has(a) || B("Cannot " + t);
7
- var e = (a, r, t) => (P(a, r, "read from private field"), t ? t.call(a) : r.get(a)), i = (a, r, t) => r.has(a) ? B("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), c = (a, r, t, s) => (P(a, r, "write to private field"), s ? s.call(a, t) : r.set(a, t), t);
8
- import { F as H } from "../core/FormBase.js";
9
- import { s as X } from "../css/ea-slider.style.js";
10
- import { E as Y } from "../utils/Variables.js";
11
- import "./ea-tooltip.js";
12
- import "./ea-input-number.js";
13
- import { n as O } from "./ea-calendar2.js";
14
- import { E as U } from "../utils/Utils.js";
15
- var k, v, l, b, g, y, d, x, u, w, p, $, V, S, N, C, m, M, A, D, L, q, F, R;
16
- class j extends H {
17
- constructor() {
18
- super();
19
- /** @type {HTMLElement} */
20
- i(this, k);
21
- /** @type {HTMLElement} */
22
- i(this, v);
23
- /** @type {HTMLElement} */
24
- i(this, l);
25
- /** @type {HTMLElement} */
26
- i(this, b);
27
- /** @type {HTMLElement} */
28
- i(this, g);
29
- /** @type {HTMLElement} */
30
- i(this, y);
31
- /** @type {HTMLElement} */
32
- i(this, d);
33
- /** @type {HTMLElement} */
34
- i(this, x);
35
- /** @type {AbortController} */
36
- i(this, u, new AbortController());
37
- i(this, w, {
38
- /** @type {AbortController} */
39
- input: null
40
- });
41
- i(this, p, {
42
- isInputNumberDefined: !1,
43
- isDragging: !1,
44
- startX: 0,
45
- startY: 0
46
- });
47
- E(this, "state", this.properties({
48
- label: {
49
- type: String,
50
- default: "",
51
- observer: async (t) => {
52
- e(this, x).textContent = t;
53
- }
54
- },
55
- value: {
56
- type: Number,
57
- default: 0,
58
- observer: (t) => {
59
- const s = Math.max(this.min, Math.min(this.max, t));
60
- this.setValue(s), e(this, m).call(this);
61
- }
62
- },
63
- min: {
64
- type: Number,
65
- default: 0,
66
- observer: () => {
67
- e(this, m).call(this);
68
- }
69
- },
70
- max: {
71
- type: Number,
72
- default: 100,
73
- observer: () => {
74
- e(this, m).call(this);
75
- }
76
- },
77
- "show-stops": {
78
- type: Boolean,
79
- default: !1,
80
- observer: (t) => {
81
- this.updateContainerClasslist(), t && e(this, $).call(this);
82
- }
83
- },
84
- step: {
85
- type: Number,
86
- default: 1,
87
- observer: (t) => {
88
- e(this, m).call(this);
89
- }
90
- },
91
- disabled: {
92
- type: Boolean,
93
- default: !1,
94
- observer: (t) => {
95
- this.updateContainerClasslist();
96
- }
97
- },
98
- vertical: {
99
- type: Boolean,
100
- default: !1,
101
- observer: () => {
102
- e(this, m).call(this);
103
- }
104
- },
105
- "show-tooltip": {
106
- type: Boolean,
107
- default: !0,
108
- observer: () => {
109
- this.updateContainerClasslist();
110
- }
111
- },
112
- placement: {
113
- type: [
114
- "top",
115
- "top-start",
116
- "top-end",
117
- "bottom",
118
- "bottom-start",
119
- "bottom-end",
120
- "left",
121
- "left-start",
122
- "left-end",
123
- "right",
124
- "right-start",
125
- "right-end"
126
- ],
127
- default: "top",
128
- observer: (t) => {
129
- e(this, l).setAttribute("placement", t);
130
- }
131
- },
132
- "show-input": {
133
- type: Boolean,
134
- default: !1,
135
- observer: async (t) => {
136
- var s;
137
- e(this, p).isInputNumberDefined || (await customElements.whenDefined("ea-input-number"), e(this, p).isInputNumberDefined = !0), (s = e(this, w).input) == null || s.abort(), e(this, m).call(this), t && (e(this, w).input = new AbortController(), e(this, d).addEventListener("ea-change", e(this, L), {
138
- signal: e(this, w).input.signal
139
- }));
140
- }
141
- },
142
- size: {
143
- type: Y,
144
- default: "",
145
- observer: async (t) => {
146
- this.updateContainerClasslist(), this["show-input"] && e(this, d).setAttribute("size", t);
147
- }
148
- },
149
- required: {
150
- type: Boolean,
151
- default: !1
152
- }
153
- }));
154
- E(this, "propState", this.properties({
155
- marks: {
156
- props: !0,
157
- type: Object,
158
- default: null,
159
- observer: () => {
160
- e(this, S).call(this);
161
- }
162
- }
163
- }));
164
- E(this, "funcStates", this.properties({
165
- formatTooltip: {
166
- rawFunction: !0,
167
- props: !0,
168
- type: Function,
169
- default: (t) => (s) => s,
170
- observer: () => {
171
- e(this, m).call(this);
172
- }
173
- }
174
- }));
175
- /**
176
- * 渲染 stop 元素(包括步长节点和 marks 节点)
177
- */
178
- i(this, $, () => {
179
- const t = [], s = this.step, o = (this.max - this.min) / s + 1;
180
- if (this["show-stops"])
181
- for (let n = 0; n < o; n++) {
182
- const h = this.min + s * n, T = (h - this.min) / (this.max - this.min) * 100;
183
- t.push({
184
- value: h,
185
- percentage: T,
186
- type: "stop",
187
- className: this.ns.e("stop"),
188
- part: "stop"
189
- });
190
- }
191
- if (this.marks)
192
- for (const n in this.marks) {
193
- const h = parseFloat(n);
194
- if (isNaN(h) || h < this.min || h > this.max) continue;
195
- const T = (h - this.min) / (this.max - this.min) * 100;
196
- t.push({
197
- value: h,
198
- percentage: T,
199
- type: "mark-stop",
200
- className: `${this.ns.e("stop")} ${this.ns.e("mark-stop")}`,
201
- part: "stop mark-stop",
202
- label: this.marks[n]
203
- });
204
- }
205
- t.sort((n, h) => n.value - h.value);
206
- const f = t.map(
207
- (n) => U.EaElement.h("div", n.className, {
208
- part: n.part,
209
- style: [`${this.vertical ? "top" : "left"}: ${n.percentage}%;`]
210
- })
211
- );
212
- e(this, v).innerHTML = this.html(f.join(""));
213
- });
214
- /**
215
- * 渲染 marks 标签
216
- */
217
- i(this, V, () => {
218
- if (!this.marks) {
219
- e(this, y).innerHTML = "";
220
- return;
221
- }
222
- let t = "";
223
- for (const s in this.marks) {
224
- const o = parseFloat(s);
225
- if (isNaN(o) || o < this.min || o > this.max) continue;
226
- const f = (o - this.min) / (this.max - this.min) * 100, n = this.marks[s];
227
- this.vertical ? t += `
228
- <div class='${this.ns.e("mark")}' style="top: ${f}%;">
229
- <div class='${this.ns.e("mark-label")}'>${n}</div>
230
- </div>
231
- ` : t += `
232
- <div class='${this.ns.e("mark")}' style="left: ${f}%;">
233
- <div class='${this.ns.e("mark-label")}'>${n}</div>
234
- </div>
235
- `;
236
- }
237
- e(this, y).innerHTML = this.html(t);
238
- });
239
- /**
240
- * 统一渲染 marks 和 stops
241
- */
242
- i(this, S, () => {
243
- e(this, $).call(this), e(this, V).call(this);
244
- });
245
- /**
246
- * 修复浮点数精度问题
247
- * @param {number} value 原始值
248
- * @returns {number} 修复精度后的值
249
- */
250
- i(this, N, (t) => {
251
- const s = this.step.toString(), o = s.includes(".") ? s.split(".")[1].length : 0;
252
- return parseFloat(t.toFixed(o));
253
- });
254
- /**
255
- * 根据鼠标位置计算滑块值
256
- * @param {number} position 鼠标位置
257
- * @returns {number} 滑块值
258
- */
259
- i(this, C, (t) => {
260
- const s = e(this, v).getBoundingClientRect(), o = this.vertical ? (t - s.top) / s.height : (t - s.left) / s.width, f = Math.max(0, Math.min(1, o)), n = this.min + f * (this.max - this.min), h = Math.round(n / this.step) * this.step;
261
- return e(this, N).call(this, Math.max(this.min, Math.min(this.max, h)));
262
- });
263
- /**
264
- * 更新滑块位置和 tooltip 内容
265
- */
266
- i(this, m, () => {
267
- const t = this.value, s = (t - this.min) / (this.max - this.min) * 100;
268
- this.vertical ? (e(this, l).style.top = `${s}%`, e(this, l).style.left = "50%") : (e(this, l).style.left = `${s}%`, e(this, l).style.top = "50%"), e(this, g).textContent = this.formatTooltip(t), e(this, g).style.display = this["show-tooltip"] ? "block" : "none", this["show-input"] && (e(this, d).value = t, e(this, d).min = this.min, e(this, d).max = this.max, e(this, d).step = this.step), this.updateContainerClasslist();
269
- });
270
- /**
271
- * 鼠标按下时,更新滑块值
272
- * @param {MouseEvent} e
273
- */
274
- i(this, M, (t) => {
275
- if (this.disabled) return;
276
- t.preventDefault(), t.stopPropagation(), e(this, p).isDragging = !0, e(this, p).startX = t.clientX, e(this, p).startY = t.clientY, e(this, l).setAttribute("visible", "true");
277
- const s = e(this, C).call(this, this.vertical ? t.clientY : t.clientX);
278
- this.value = s, this.emit("input", { detail: { value: this.value } });
279
- });
280
- /**
281
- * 鼠标移动时,更新滑块值
282
- * @param {MouseEvent} e
283
- */
284
- i(this, A, (t) => {
285
- if (!e(this, p).isDragging || this.disabled) return;
286
- t.preventDefault(), t.stopPropagation();
287
- const s = e(this, C).call(this, this.vertical ? t.clientY : t.clientX);
288
- this.value = s, this.emit("input", { detail: { value: this.value } });
289
- });
290
- /**
291
- * 鼠标松开时,更新滑块值
292
- */
293
- i(this, D, () => {
294
- e(this, p).isDragging && (e(this, p).isDragging = !1, e(this, l).setAttribute("visible", "false"), this.emit("change", { detail: { value: this.value } }));
295
- });
296
- /**
297
- * 输入框值改变时,更新滑块值
298
- * @param {CustomEvent} e
299
- */
300
- i(this, L, (t) => {
301
- t.preventDefault(), t.stopImmediatePropagation();
302
- const s = parseFloat(t.detail.currentValue), o = Math.max(this.min, Math.min(this.max, s));
303
- this.value = o, this.emit("change", { detail: { value: this.value } });
304
- });
305
- /**
306
- * 鼠标进入滑块时,显示 tooltip 的 触发 元素
307
- */
308
- i(this, q, () => {
309
- this.disabled || e(this, l).setAttribute("visible", "true");
310
- });
311
- /**
312
- * 鼠标离开滑块时,隐藏 tooltip 的 触发 元素
313
- */
314
- i(this, F, () => {
315
- this.disabled || e(this, p).isDragging || e(this, l).setAttribute("visible", "false");
316
- });
317
- i(this, R, () => {
318
- var t;
319
- (t = e(this, u)) == null || t.abort(), c(this, u, new AbortController()), e(this, v).addEventListener("mousedown", e(this, M), {
320
- signal: e(this, u).signal
321
- }), e(this, b).addEventListener("mousedown", e(this, M), {
322
- signal: e(this, u).signal
323
- }), e(this, b).addEventListener("mouseenter", e(this, q), {
324
- signal: e(this, u).signal
325
- }), e(this, b).addEventListener("mouseleave", e(this, F), {
326
- signal: e(this, u).signal
327
- }), document.addEventListener("mousemove", e(this, A), {
328
- signal: e(this, u).signal
329
- }), document.addEventListener("mouseup", e(this, D), {
330
- signal: e(this, u).signal
331
- });
332
- });
333
- this.stylesheet = X, this.$render();
334
- }
335
- static get observedAttributes() {
336
- return [
337
- ...super.observedAttributes,
338
- "label",
339
- "value",
340
- "min",
341
- "max",
342
- "step",
343
- "disabled",
344
- "vertical",
345
- "show-tooltip",
346
- "placement",
347
- "size",
348
- "show-stops",
349
- "show-input",
350
- "required"
351
- ];
352
- }
353
- /**
354
- * 获取 classlist 列表
355
- * @return {string} 属性值
356
- */
357
- updateContainerClasslist() {
358
- const t = this.computedClasslist(
359
- "ea-slider",
360
- {
361
- ["--" + this.size]: this.size
362
- },
363
- {
364
- disabled: this.disabled,
365
- vertical: this.vertical,
366
- "show-tooltip": this["show-tooltip"],
367
- "show-stops": this["show-stops"],
368
- "show-input": this["show-input"]
369
- }
370
- );
371
- return e(this, k).className = t, t;
372
- }
373
- $render() {
374
- const t = O("slider");
375
- this.ns = t, this.shadowRoot.innerHTML = `
376
- <label class='${t.e("form-label")}' part='form-label'></label>
377
- <div class='${t.b()}' part='container'>
378
- <div class='${t.e("runway")}' part='runway'>
379
- <div class='${t.e("rail")}' part='rail'></div>
380
- <ea-tooltip class='${t.e("trigger")}' part='trigger' flip="false" trigger="customized">
381
- <div class='${t.e("thumb")}' part='thumb' slot="reference"></div>
382
- <div class='${t.e("tooltip")}' part='tooltip'></div>
383
- </ea-tooltip>
384
- <div class='${t.e("marks")}' part='marks'></div>
385
- </div>
386
- <ea-input-number class='${t.e("input")}' part='input'></ea-input-number>
387
- </div>
388
- `, c(this, x, this.shadowRoot.querySelector(t.ce("form-label"))), c(this, k, this.shadowRoot.querySelector(t.cb())), c(this, v, this.shadowRoot.querySelector(t.ce("rail"))), c(this, l, this.shadowRoot.querySelector(t.ce("trigger"))), c(this, b, this.shadowRoot.querySelector(t.ce("thumb"))), c(this, g, this.shadowRoot.querySelector(t.ce("tooltip"))), c(this, y, this.shadowRoot.querySelector(t.ce("marks"))), c(this, d, this.shadowRoot.querySelector(t.ce("input")));
389
- }
390
- /**
391
- * 获取验证目标元素
392
- * @returns {HTMLElement}
393
- */
394
- get validationTarget() {
395
- return e(this, d);
396
- }
397
- /**
398
- * 更新表单验证状态
399
- */
400
- updateValidity() {
401
- const t = this.value !== null && this.value !== void 0;
402
- this.required && !t ? this.internals.setValidity({ valueMissing: !0 }, "请设置一个值", this) : this.internals.setValidity({}, "", this);
403
- }
404
- /**
405
- * 检查表单字段的有效性
406
- * @returns {boolean}
407
- */
408
- checkValidity() {
409
- return this.updateValidity(), this.internals.validity.valid;
410
- }
411
- /**
412
- * 报告表单字段的有效性(显示验证提示)
413
- * @returns {boolean}
414
- */
415
- reportValidity() {
416
- return this.updateValidity(), this.internals.reportValidity();
417
- }
418
- connectedCallback() {
419
- super.connectedCallback(), e(this, R).call(this), e(this, m).call(this);
420
- }
421
- $beforeUnmounted() {
422
- var t;
423
- (t = e(this, u)) == null || t.abort();
424
- }
425
- }
426
- k = new WeakMap(), v = new WeakMap(), l = new WeakMap(), b = new WeakMap(), g = new WeakMap(), y = new WeakMap(), d = new WeakMap(), x = new WeakMap(), u = new WeakMap(), w = new WeakMap(), p = new WeakMap(), $ = new WeakMap(), V = new WeakMap(), S = new WeakMap(), N = new WeakMap(), C = new WeakMap(), m = new WeakMap(), M = new WeakMap(), A = new WeakMap(), D = new WeakMap(), L = new WeakMap(), q = new WeakMap(), F = new WeakMap(), R = new WeakMap();
427
- window.customElements.get("ea-slider") || window.customElements.define("ea-slider", j);
428
- export {
429
- j as EaSlider
430
- };