ranui 0.1.1-alpha.2 → 0.1.1-alpha.4

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 (45) hide show
  1. package/LICENSE +21 -0
  2. package/dist/_commonjs-dynamic-modules.8823314d.js +31 -0
  3. package/dist/_commonjs-dynamic-modules.8823314d.js.map +1 -0
  4. package/dist/assets/image/failImage.d.ts +2 -0
  5. package/dist/close.9954c08c.js +5 -0
  6. package/dist/close.9954c08c.js.map +1 -0
  7. package/dist/components/button/index.d.ts +328 -0
  8. package/dist/components/icon/index.d.ts +2 -0
  9. package/dist/components/image/index.d.ts +2 -0
  10. package/dist/components/input/index.d.ts +436 -0
  11. package/dist/components/message/index.d.ts +8 -0
  12. package/dist/components/preview/index.d.ts +2 -0
  13. package/dist/components/skeleton/index.d.ts +2 -0
  14. package/dist/components/tabpane/index.d.ts +326 -0
  15. package/dist/components/tabs/index.d.ts +383 -0
  16. package/dist/components/video/index.d.ts +393 -0
  17. package/dist/docx.9c82eaaf.js +2643 -0
  18. package/dist/docx.9c82eaaf.js.map +1 -0
  19. package/dist/index.26f69227.js +15110 -0
  20. package/dist/index.26f69227.js.map +1 -0
  21. package/dist/index.965c8d86.js +1513 -0
  22. package/dist/index.965c8d86.js.map +1 -0
  23. package/dist/index.js +1 -1123
  24. package/dist/index.js.map +1 -1
  25. package/dist/index.umd.cjs +12 -1
  26. package/dist/index.umd.cjs.map +1 -1
  27. package/dist/jszip.min.263da606.js +2656 -0
  28. package/dist/jszip.min.263da606.js.map +1 -0
  29. package/dist/pdf.5dd28052.js +74510 -0
  30. package/dist/pdf.5dd28052.js.map +1 -0
  31. package/dist/preview.de4d53cc.js +5 -0
  32. package/dist/preview.de4d53cc.js.map +1 -0
  33. package/dist/style.css +1 -1
  34. package/dist/typings.d.ts +46 -0
  35. package/dist/utils/docx.d.ts +8 -0
  36. package/dist/utils/index.d.ts +23 -0
  37. package/dist/utils/pdf.d.ts +1 -0
  38. package/dist/utils/pptx/colz.d.ts +70 -0
  39. package/dist/utils/pptx/index.d.ts +16 -0
  40. package/dist/utils/pptx/process_pptx.d.ts +23 -0
  41. package/dist/utils/pptx/t_xml.d.ts +1 -0
  42. package/package.json +33 -16
  43. package/base.less +0 -17
  44. package/component.ts +0 -7
  45. package/test/button.test.ts +0 -12
package/dist/index.js CHANGED
@@ -1,1124 +1,2 @@
1
- var __defProp = Object.defineProperty;
2
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
- var __publicField = (obj, key, value) => {
4
- __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
- return value;
6
- };
7
- const f7170ee498e0dd32cbdcb63fba8f75cc$6 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}:host{position:relative;display:inline-block;font-weight:400;white-space:nowrap;text-align:center;background-image:none;border:1px solid transparent;box-shadow:0 2px #00000004;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;line-height:22px;font-size:14px;border-radius:2px;color:#000000d9;border-color:#d9d9d9;background:#fff;overflow:hidden;pointer-events:auto}:host,:host(:active),:host(:focus){outline:0}:host(:not([disabled]):hover){border-color:#1890ff;color:#1890ff}:host([type="primary"]){border-color:#1890ff;background-color:#1890ff;color:#fff}:host([type="primary"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="primary"]:not([disabled]):hover){background-color:#40a9ff;color:#fff}:host([type="warning"]){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]){border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active):after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}:host(:active) .btn:before{opacity:.2}:host(:not([disabled],[effect])):after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,#1890ff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}:host .slot{display:block}.btn{display:flex;justify-content:space-between;align-items:center;padding:4px 15px}.btn .icon{margin-right:2px}\n';
8
- const falseList = [false, "false", null, void 0];
9
- const isDisabled = (element) => {
10
- const status = element.hasAttribute("disabled");
11
- const value = element.getAttribute("disabled");
12
- if (status && !falseList.includes(value))
13
- return true;
14
- return false;
15
- };
16
- const setElementClass = (element, addClass) => {
17
- const classList = element.classList;
18
- if (!classList.contains(addClass)) {
19
- classList.add(addClass);
20
- }
21
- };
22
- const deleteElementChildClass = (parent, deleteClass) => {
23
- const pre = parent.querySelectorAll(`.${deleteClass}`);
24
- if (pre.length > 0) {
25
- pre.forEach((item) => item.classList.remove(deleteClass));
26
- }
27
- };
28
- function Custom$4() {
29
- if (typeof window !== "undefined" && !customElements.get("r-button")) {
30
- class Button extends HTMLElement {
31
- constructor() {
32
- super();
33
- __publicField(this, "_btn");
34
- __publicField(this, "_iconElement");
35
- __publicField(this, "_slot");
36
- __publicField(this, "setIcon", () => {
37
- if (this.icon) {
38
- const { width, height } = this._slot.getBoundingClientRect();
39
- const size = Math.min(width, height);
40
- if (this._iconElement) {
41
- this._iconElement.setAttribute("name", this.icon);
42
- this._iconElement.setAttribute("size", `${size - 5}`);
43
- } else {
44
- this._iconElement = document.createElement("r-icon");
45
- this._iconElement.setAttribute("name", this.icon);
46
- this._iconElement.setAttribute("size", `${size - 5}`);
47
- this._iconElement.setAttribute("color", "currentColor");
48
- this._iconElement.setAttribute("class", "icon");
49
- this._slot.insertAdjacentElement("beforebegin", this._iconElement);
50
- }
51
- }
52
- });
53
- __publicField(this, "mousedown", (event) => {
54
- if (!this.disabled || this.disabled === "false") {
55
- const { left, top } = this.getBoundingClientRect();
56
- this.style.setProperty("--ran-x", event.clientX - left + "px");
57
- this.style.setProperty("--ran-y", event.clientY - top + "px");
58
- }
59
- });
60
- __publicField(this, "mouseLeave", () => {
61
- this.style.removeProperty("--ran-x");
62
- this.style.removeProperty("--ran-y");
63
- });
64
- this._slot = document.createElement("slot");
65
- this._btn = document.createElement("div");
66
- this._btn.setAttribute("class", "btn");
67
- this._btn.appendChild(this._slot);
68
- this._slot.setAttribute("class", "slot");
69
- const shadowRoot = this.attachShadow({ mode: "closed" });
70
- const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
71
- F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$6;
72
- shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
73
- shadowRoot.appendChild(this._btn);
74
- }
75
- static get observedAttributes() {
76
- return ["disabled", "icon", "effect"];
77
- }
78
- get disabled() {
79
- return isDisabled(this);
80
- }
81
- set disabled(value) {
82
- if (!value || value === "false") {
83
- this.removeAttribute("disabled");
84
- } else {
85
- this.setAttribute("disabled", "");
86
- }
87
- }
88
- get icon() {
89
- return this.getAttribute("icon");
90
- }
91
- set icon(value) {
92
- if (value) {
93
- this.setAttribute("icon", value);
94
- }
95
- }
96
- get effect() {
97
- return this.getAttribute("effect");
98
- }
99
- set effect(value) {
100
- if (falseList.includes(value) || !value) {
101
- this.removeAttribute("effect");
102
- } else {
103
- this.setAttribute("effect", value);
104
- }
105
- }
106
- connectedCallback() {
107
- this._btn.addEventListener("mousedown", this.mousedown);
108
- this._btn.addEventListener("mouseleave", this.mouseLeave);
109
- this.setIcon();
110
- }
111
- disconnectCallback() {
112
- this._btn.removeEventListener("mousedown", this.mousedown);
113
- this._btn.removeEventListener("mouseleave", this.mouseLeave);
114
- }
115
- attributeChangedCallback(name, oldValue, newValue) {
116
- if (name === "disabled" && this._btn) {
117
- if (!newValue || newValue === "false") {
118
- this._btn.setAttribute("disabled", "");
119
- } else {
120
- this._btn.removeAttribute("disabled");
121
- }
122
- }
123
- if (name === "icon") {
124
- if (oldValue !== newValue) {
125
- this.setIcon();
126
- }
127
- }
128
- }
129
- }
130
- customElements.define("r-button", Button);
131
- return Button;
132
- }
133
- }
134
- Custom$4();
135
- const __variableDynamicImportRuntimeHelper = (glob, path) => {
136
- const v = glob[path];
137
- if (v) {
138
- return typeof v === "function" ? v() : Promise.resolve(v);
139
- }
140
- return new Promise((_, reject) => {
141
- (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path)));
142
- });
143
- };
144
- const f7170ee498e0dd32cbdcb63fba8f75cc$5 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}:host{display:inline-flex}:host .icon{display:block}:host([spin]){animation-name:rotate;animation-duration:1.4s;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}\n';
145
- const fs = {};
146
- let fileSystem = fs;
147
- if (typeof process !== "undefined" && typeof fileSystem.Stats === "function") {
148
- fileSystem._identification = true;
149
- } else {
150
- fileSystem = { _identification: false, message: "require is not defined" };
151
- }
152
- const str2Xml = (xmlStr, format = "text/xml") => {
153
- if (window.DOMParser)
154
- return new window.DOMParser().parseFromString(xmlStr, format).documentElement;
155
- if (typeof window.ActiveXObject !== "undefined" && new window.ActiveXObject("Microsoft.XMLDOM")) {
156
- const xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
157
- xmlDoc.async = "false";
158
- xmlDoc.loadXML(xmlStr);
159
- return xmlDoc;
160
- }
161
- return void 0;
162
- };
163
- function Custom$3() {
164
- if (typeof window !== "undefined" && !customElements.get("r-icon")) {
165
- class CustomElement2 extends HTMLElement {
166
- constructor() {
167
- super();
168
- __publicField(this, "_icon");
169
- __publicField(this, "_div");
170
- __publicField(this, "loadLocal", () => {
171
- return new Promise((resolve, reject) => {
172
- __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user.98b805f1.js"), "../../assets/icons/book.svg": () => import("./book.c3235430.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill.0a9e8a28.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle.711c4f31.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill.726bf59c.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle.dda355df.js"), "../../assets/icons/eye-close.svg": () => import("./eye-close.a954b46e.js"), "../../assets/icons/eye.svg": () => import("./eye.c904f80b.js"), "../../assets/icons/home.svg": () => import("./home.f5970edc.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill.9dfc3b5e.js"), "../../assets/icons/info-circle.svg": () => import("./info-circle.718e6ac4.js"), "../../assets/icons/loading.svg": () => import("./loading.876d0293.js"), "../../assets/icons/lock.svg": () => import("./lock.26244026.js"), "../../assets/icons/message.svg": () => import("./message.5379338a.js"), "../../assets/icons/power-off.svg": () => import("./power-off.050e4c26.js"), "../../assets/icons/setting.svg": () => import("./setting.7917f3b2.js"), "../../assets/icons/team.svg": () => import("./team.b3a3196b.js"), "../../assets/icons/unlock.svg": () => import("./unlock.1e7bed93.js"), "../../assets/icons/user.svg": () => import("./user.21cfbfa6.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill.b87fec04.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle.b1792bd4.js") }), `../../assets/icons/${this.name}.svg`).then((result) => {
173
- if (result && result.default && result.default._identification) {
174
- const { data } = result.default;
175
- this._icon && this._div.removeChild(this._icon);
176
- this._icon = str2Xml(data, "image/svg+xml");
177
- if (this._icon) {
178
- this._div.appendChild(this._icon);
179
- this.setSize();
180
- this.setColor();
181
- resolve();
182
- }
183
- } else {
184
- this.loadNs();
185
- reject(`
186
- couldn't be loaded by r-icon, message: ${this.name} icon is undefined`);
187
- }
188
- }).catch((error) => {
189
- this.loadNs();
190
- });
191
- });
192
- });
193
- __publicField(this, "loadNs", () => {
194
- if (this._icon && this._div) {
195
- this._div.removeChild(this._icon);
196
- }
197
- this._icon = document.createElement("svg");
198
- this._icon.setAttribute("class", "icon");
199
- this._icon.setAttribute("viewBox", "0 0 1024 1024");
200
- this._icon.setAttribute("width", "100");
201
- this._icon.setAttribute("height", "100");
202
- const xLinksNs = "http://www.w3.org/1999/xlink";
203
- const use = document.createElementNS(xLinksNs, "use");
204
- use.setAttributeNS(xLinksNs, "xlink:href", `../../assets/iconfont/icon.svg#icon-${this.name}`);
205
- this._icon.appendChild(use);
206
- this._div.appendChild(this._icon);
207
- });
208
- __publicField(this, "setIcon", async () => {
209
- if (this.name) {
210
- this.loadLocal();
211
- }
212
- });
213
- __publicField(this, "setSize", () => {
214
- if (this._icon && this.size) {
215
- this._icon.setAttribute("width", this.size);
216
- this._icon.setAttribute("height", this.size);
217
- }
218
- });
219
- __publicField(this, "setColor", () => {
220
- if (this._icon) {
221
- this.color ? this._icon.setAttribute("fill", this.color) : this._icon.setAttribute("fill", "currentColor");
222
- }
223
- });
224
- __publicField(this, "setSpin", () => {
225
- if (this.spin) {
226
- this.style.setProperty("animation-duration", `${this.spin}s`);
227
- }
228
- });
229
- this._div = document.createElement("div");
230
- this._div.setAttribute("class", "icon");
231
- const shadowRoot = this.attachShadow({ mode: "closed" });
232
- const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
233
- F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$5;
234
- shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
235
- shadowRoot.appendChild(this._div);
236
- }
237
- static get observedAttributes() {
238
- return ["name", "size", "color", "spin"];
239
- }
240
- get name() {
241
- return this.getAttribute("name");
242
- }
243
- set name(value) {
244
- if (value)
245
- this.setAttribute("name", value);
246
- }
247
- get size() {
248
- return this.getAttribute("size");
249
- }
250
- set size(value) {
251
- if (value)
252
- this.setAttribute("size", value);
253
- }
254
- get color() {
255
- return this.getAttribute("color");
256
- }
257
- set color(value) {
258
- if (value)
259
- this.setAttribute("color", value);
260
- }
261
- get spin() {
262
- return this.getAttribute("spin");
263
- }
264
- set spin(value) {
265
- if (value != null)
266
- this.setAttribute("spin", value);
267
- }
268
- connectedCallback() {
269
- this.setIcon();
270
- }
271
- attributeChangedCallback(name, oldValue, newValue) {
272
- if (newValue !== oldValue) {
273
- if (name === "name")
274
- this.setIcon();
275
- if (name === "size")
276
- this.setSize();
277
- if (name === "color")
278
- this.setColor();
279
- if (name === "spin")
280
- this.setSpin();
281
- }
282
- }
283
- }
284
- customElements.define("r-icon", CustomElement2);
285
- }
286
- }
287
- Custom$3();
288
- const f7170ee498e0dd32cbdcb63fba8f75cc$4 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}\n';
289
- const failImage = `
290
- data:image/png;base64,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
291
- `;
292
- function Custom$2() {
293
- if (typeof window !== "undefined" && !customElements.get("r-img")) {
294
- class CustomElement2 extends HTMLElement {
295
- constructor() {
296
- super();
297
- __publicField(this, "_image");
298
- __publicField(this, "_container");
299
- this._container = document.createElement("div");
300
- this._container.setAttribute("class", "r-image");
301
- const shadowRoot = this.attachShadow({ mode: "closed" });
302
- const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
303
- F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$4;
304
- shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
305
- shadowRoot.appendChild(this._container);
306
- }
307
- static get observedAttributes() {
308
- return ["fallback"];
309
- }
310
- get fallback() {
311
- return this.getAttribute("fallback") || failImage;
312
- }
313
- set fallback(value) {
314
- if (value) {
315
- this.setAttribute("fallback", value);
316
- } else {
317
- this.removeAttribute("fallback");
318
- }
319
- }
320
- listenFallback(name, value) {
321
- if (name === "fallback" && this._image) {
322
- if (value) {
323
- this._image.setAttribute("fallback", value);
324
- } else {
325
- this._image.removeAttribute("fallback");
326
- }
327
- }
328
- }
329
- connectedCallback() {
330
- const src = this.getAttribute("src") || "";
331
- this._image = new Image();
332
- this._image.src = src;
333
- this._image.addEventListener("error", () => {
334
- if (this._image && this.fallback) {
335
- this._image.src = this.fallback;
336
- }
337
- });
338
- this._image.addEventListener("load", () => {
339
- if (this._image) {
340
- this._container.appendChild(this._image);
341
- }
342
- });
343
- }
344
- attributeChangedCallback(name, oldValue, newValue) {
345
- this.listenFallback(name, newValue);
346
- }
347
- }
348
- customElements.define("r-img", CustomElement2);
349
- }
350
- }
351
- Custom$2();
352
- const f7170ee498e0dd32cbdcb63fba8f75cc$3 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.input{position:relative;display:flex;width:100%;min-width:0;padding:2px 8px;color:#000000d9;font-size:12px;line-height:1.5715;background-color:#fff;background-image:none;border-width:1px;border-style:solid;border-color:#d9d9d9;border-radius:2px;transition:all .3s}.input:active{border-color:#40a9ff;box-shadow:0 0 0 2px #1890ff33;border-right-width:1px;outline:0}.input:hover{border-color:#40a9ff;border-right-width:1px}.input>.input-main:hover~.input-label{color:#40a9ff}.input[value]>.input-label{transform:translateY(calc(-50% - .43em)) scale(.8);color:#00000040}.input[status=error]{border-color:#ff4d4f}.input[status=error]>.input-main:hover~.input-label{color:#ff4d4f}.input[status=warning]{border-color:#ff7875}.input[status=warning]>.input-main:hover~.input-label{color:#ff7875}.input[disabled]{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main:hover~.input-label{color:#999}.input[disabled]>.input-label{color:#999;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed}.input-main{writing-mode:horizontal-tb;text-rendering:auto;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0px;text-shadow:none;text-align:start;-webkit-rtl-ordering:logical;cursor:text;touch-action:manipulation;-webkit-appearance:none;text-overflow:ellipsis;box-sizing:border-box;margin:0;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";position:relative;border:none;width:100%;min-width:0;color:#000000d9;font-size:14px;line-height:1.5715;background-color:#fff;background-image:none;transition:all .3s}.input-main:focus,.input-main:hover{border:none;outline:0}.input-main::placeholder{color:#999}.input-main:placeholder-shown~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-main:focus~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-label{pointer-events:none;position:absolute;font-size:14px;left:8px;transition:transform .3s,color .3s,background-color .3s;transform-origin:left;padding:0 .2em;color:#999;backdrop-filter:blur(10px);opacity:.9}\n';
353
- function Custom$1() {
354
- if (typeof window !== "undefined" && !customElements.get("r-input")) {
355
- class CustomElement2 extends HTMLElement {
356
- constructor() {
357
- super();
358
- __publicField(this, "_container");
359
- __publicField(this, "_label");
360
- __publicField(this, "_input");
361
- __publicField(this, "_icon");
362
- __publicField(this, "inputValue", (event) => {
363
- event.stopPropagation();
364
- const target = event.target;
365
- this.value = target ? target.value : "";
366
- this.change();
367
- this.dispatchEvent(
368
- new CustomEvent("input", {
369
- detail: {
370
- value: this.value
371
- }
372
- })
373
- );
374
- });
375
- __publicField(this, "change", () => {
376
- this.dispatchEvent(
377
- new CustomEvent("change", {
378
- detail: {
379
- value: this.value
380
- }
381
- })
382
- );
383
- });
384
- __publicField(this, "focus", () => {
385
- this.dispatchEvent(
386
- new CustomEvent("focus", {
387
- detail: {
388
- value: this.value
389
- }
390
- })
391
- );
392
- });
393
- const shadowRoot = this.attachShadow({ mode: "closed" });
394
- const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
395
- F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$3;
396
- shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
397
- this._container = document.createElement("div");
398
- this._container.setAttribute("class", "input");
399
- this._input = document.createElement("input");
400
- this._input.setAttribute("class", "input-main");
401
- this._container.appendChild(this._input);
402
- shadowRoot.appendChild(this._container);
403
- }
404
- static get observedAttributes() {
405
- return [
406
- "label",
407
- "disabled",
408
- "name",
409
- "placeholder",
410
- "type",
411
- "icon",
412
- "status"
413
- ];
414
- }
415
- get value() {
416
- return this.getAttribute("value");
417
- }
418
- set value(value) {
419
- if (!isDisabled(this) && value) {
420
- this.setAttribute("value", value);
421
- this._container.setAttribute("value", value);
422
- } else {
423
- this.removeAttribute("value");
424
- this._container.removeAttribute("value");
425
- }
426
- }
427
- get placeholder() {
428
- return this.getAttribute("placeholder");
429
- }
430
- set placeholder(value) {
431
- if (value) {
432
- this.setAttribute("placeholder", value);
433
- } else {
434
- this.removeAttribute("placeholder");
435
- }
436
- }
437
- get required() {
438
- return this.getAttribute("required");
439
- }
440
- set required(value) {
441
- if (!value || value === "false") {
442
- this.removeAttribute("required");
443
- } else {
444
- this.setAttribute("required", "");
445
- }
446
- }
447
- get disabled() {
448
- return isDisabled(this);
449
- }
450
- set disabled(value) {
451
- if (falseList.includes(value)) {
452
- this.removeAttribute("disabled");
453
- this._container.removeAttribute("disabled");
454
- this._input.removeAttribute("disabled");
455
- } else {
456
- this.setAttribute("disabled", "");
457
- this._container.setAttribute("disabled", "");
458
- this._input.setAttribute("disabled", "");
459
- }
460
- }
461
- get label() {
462
- return this.getAttribute("label") || "";
463
- }
464
- set label(value) {
465
- this.setAttribute("label", value);
466
- }
467
- get status() {
468
- return this.getAttribute("status") || "";
469
- }
470
- set status(value) {
471
- if (value) {
472
- this.removeAttribute("status");
473
- this._container.removeAttribute("status");
474
- } else {
475
- this.setAttribute("status", value);
476
- this._container.setAttribute("status", value);
477
- }
478
- }
479
- get name() {
480
- return this.getAttribute("name") || "";
481
- }
482
- set name(value) {
483
- this.setAttribute("name", value);
484
- }
485
- get min() {
486
- return this.getAttribute("min") || "";
487
- }
488
- set min(value) {
489
- if (this.type === "number")
490
- this.setAttribute("min", value);
491
- }
492
- get max() {
493
- return this.getAttribute("max") || "";
494
- }
495
- set max(value) {
496
- if (this.type === "number")
497
- this.setAttribute("max", value);
498
- }
499
- get step() {
500
- return this.getAttribute("step") || "";
501
- }
502
- set step(value) {
503
- if (this.type === "number")
504
- this.setAttribute("step", value);
505
- }
506
- get icon() {
507
- return this.getAttribute("icon");
508
- }
509
- set icon(value) {
510
- if (value) {
511
- this.setAttribute("icon", value);
512
- } else {
513
- this.removeAttribute("icon");
514
- }
515
- }
516
- get type() {
517
- return this.getAttribute("type");
518
- }
519
- set type(value) {
520
- if (value) {
521
- this.setAttribute("type", value);
522
- } else {
523
- this.removeAttribute("type");
524
- }
525
- }
526
- listenPlaceholder(name, value) {
527
- if (name === "placeholder" && this._input) {
528
- if (value != null) {
529
- this._input.setAttribute("placeholder", value);
530
- } else {
531
- this._input.removeAttribute("placeholder");
532
- }
533
- }
534
- }
535
- listenLabel(name, value) {
536
- if (name === "label" && this._input) {
537
- if (value != null) {
538
- if (this._label) {
539
- this._label.innerHTML = value;
540
- } else {
541
- this._label = document.createElement("label");
542
- this._label.innerHTML = value;
543
- this._label.setAttribute("class", "input-label");
544
- this._container.appendChild(this._label);
545
- }
546
- } else {
547
- this._container.removeAttribute("label");
548
- if (this._label) {
549
- this._container.removeChild(this._label);
550
- this._label = void 0;
551
- }
552
- }
553
- }
554
- }
555
- listenType(name, value) {
556
- if (name === "type" && this._input) {
557
- if (value) {
558
- this._input.setAttribute("type", value);
559
- } else {
560
- this._input.removeAttribute("type");
561
- this._input.removeAttribute("min");
562
- this._input.removeAttribute("max");
563
- this._input.removeAttribute("step");
564
- }
565
- }
566
- }
567
- listenStatus(name, value) {
568
- if (name === "status" && this._container) {
569
- if (value) {
570
- this._container.setAttribute("status", value);
571
- } else {
572
- this._container.removeAttribute("status");
573
- }
574
- }
575
- }
576
- listenDisabled(name, value) {
577
- if (name === "disabled" && this._container) {
578
- if (falseList.includes(value)) {
579
- this._container.removeAttribute("disabled");
580
- } else {
581
- this._container.setAttribute("disabled", "");
582
- this._input.setAttribute("disabled", "");
583
- }
584
- }
585
- }
586
- listenIcon(name, value, oldValue) {
587
- if (name === "icon") {
588
- if (value && value !== oldValue) {
589
- this.removeAttribute("label");
590
- this.setAttribute("icon", value);
591
- if (!this._icon) {
592
- this._icon = document.createElement("r-icon");
593
- const { width, height } = this._input.getBoundingClientRect();
594
- const size = Math.min(width, height);
595
- this._icon.setAttribute("size", `${size}`);
596
- this._input.insertAdjacentElement("beforebegin", this._icon);
597
- }
598
- this._icon.setAttribute("name", value);
599
- } else {
600
- this.removeAttribute("icon");
601
- this._icon && this._container.removeChild(this._icon);
602
- }
603
- }
604
- }
605
- connectedCallback() {
606
- if (this.value) {
607
- this._input.value = this.value;
608
- this._container.setAttribute("value", this.value);
609
- }
610
- if (this.status) {
611
- this._container.setAttribute("status", this.status);
612
- }
613
- if (isDisabled(this)) {
614
- this._container.setAttribute("disabled", "");
615
- this._input.setAttribute("disabled", "");
616
- }
617
- if (this.type) {
618
- this._input.setAttribute("type", this.type);
619
- }
620
- this._input.addEventListener("input", this.inputValue);
621
- this._input.addEventListener("focus", this.focus);
622
- }
623
- disconnectCallback() {
624
- this._input.removeEventListener("input", this.inputValue);
625
- }
626
- attributeChangedCallback(name, oldValue, newValue) {
627
- this.listenPlaceholder(name, newValue);
628
- this.listenLabel(name, newValue);
629
- this.listenStatus(name, newValue);
630
- this.listenDisabled(name, newValue);
631
- this.listenIcon(name, newValue, oldValue);
632
- }
633
- }
634
- customElements.define("r-input", CustomElement2);
635
- }
636
- }
637
- Custom$1();
638
- const f7170ee498e0dd32cbdcb63fba8f75cc$2 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}@keyframes MessageMoveUpIn{0%{transform:translateY(-100%);transform-origin:0 0;opacity:0}to{transform:translateY(0);transform-origin:0 0;opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}:host([type="toast"]){--ranui-message-background: rgba(0, 0, 0, .7);--ranui-message-color: #fff;--ranui-message-border-radius: 7px}.message-notice{padding:8px;text-align:center;max-width:90%;margin:0 auto;word-break:break-all}.message-notice-content{display:inline-block;padding:10px 16px;background:var(--ranui-message-background, #fff);border-radius:var(--ranui-message-border-radius, 2px);box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;pointer-events:all}.message-notice-content-info{align-items:center;display:flex}.message-notice-content-info span{margin:0;padding:0;color:var(--ranui-message-color, #000000d9);font-size:14px;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";z-index:1010;width:100%;pointer-events:none}.message-leave{animation-name:MessageMoveOut;animation-duration:.3s}.message-in{animation-name:MessageMoveUpIn;animation-duration:.2s;animation-fill-mode:both}\n';
639
- const AnimationTime = 300;
640
- const defaultDuration = 3e3;
641
- const typeMapIcon = /* @__PURE__ */ new Map([
642
- ["success", "check-circle-fill"],
643
- ["warning", "warning-circle-fill"],
644
- ["error", "close-circle-fill"],
645
- ["info", "info-circle-fill"],
646
- ["toast", null]
647
- ]);
648
- const typeMapColor = /* @__PURE__ */ new Map([
649
- ["success", "#52c41a"],
650
- ["warning", "#faad14"],
651
- ["error", "#ff4d4f"],
652
- ["info", "#1890ff"],
653
- ["toast", "rgba(0, 0, 0, 0.7)"]
654
- ]);
655
- function Custom() {
656
- if (typeof window !== "undefined" && !customElements.get("r-message")) {
657
- class CustomElement2 extends HTMLElement {
658
- constructor() {
659
- super();
660
- __publicField(this, "_info");
661
- __publicField(this, "_notice");
662
- __publicField(this, "_content");
663
- __publicField(this, "_icon");
664
- __publicField(this, "_span");
665
- __publicField(this, "timeId");
666
- __publicField(this, "close");
667
- __publicField(this, "setIcon", (value) => {
668
- var _a, _b, _c, _d;
669
- const icon = typeMapIcon.get(value);
670
- const color = typeMapColor.get(value);
671
- if (icon) {
672
- (_a = this._icon) == null ? void 0 : _a.setAttribute("name", icon);
673
- (_b = this._icon) == null ? void 0 : _b.style.setProperty("margin-right", "8px");
674
- (_c = this._icon) == null ? void 0 : _c.setAttribute("size", "18");
675
- color && ((_d = this._icon) == null ? void 0 : _d.setAttribute("color", color));
676
- }
677
- });
678
- this._notice = document.createElement("div");
679
- this._notice.setAttribute("class", "message-notice");
680
- this._content = document.createElement("div");
681
- this._content.setAttribute("class", "message-notice-content");
682
- this._info = document.createElement("div");
683
- this._info.setAttribute("class", "message-notice-content-info");
684
- this._icon = document.createElement("r-icon");
685
- this._span = document.createElement("span");
686
- this._info.appendChild(this._icon);
687
- this._info.appendChild(this._span);
688
- this._content.appendChild(this._info);
689
- this._notice.appendChild(this._content);
690
- const shadowRoot = this.attachShadow({ mode: "closed" });
691
- const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
692
- F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$2;
693
- shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
694
- shadowRoot.appendChild(this._notice);
695
- }
696
- static get observedAttributes() {
697
- return ["type", "content"];
698
- }
699
- get type() {
700
- return this.getAttribute("type");
701
- }
702
- set type(value) {
703
- if (value)
704
- this.setAttribute("type", value);
705
- }
706
- get content() {
707
- return this.getAttribute("content");
708
- }
709
- set content(value) {
710
- if (value)
711
- this.setAttribute("content", value);
712
- }
713
- attributeChangedCallback(name, oldValue, newValue) {
714
- if (name === "content" && oldValue !== newValue) {
715
- this._span.textContent = newValue;
716
- }
717
- if (name === "type" && oldValue !== newValue) {
718
- this.setIcon(newValue);
719
- }
720
- }
721
- }
722
- customElements.define("r-message", CustomElement2);
723
- const container = document.createElement("div");
724
- const div = document.createElement("div");
725
- div.setAttribute("class", "ranui-message");
726
- document.body.appendChild(container);
727
- container.appendChild(div);
728
- const commonPrompt = (type) => {
729
- return (options) => {
730
- const message2 = new CustomElement2();
731
- message2.setAttribute("class", "message");
732
- message2.timeId && clearTimeout(message2.timeId);
733
- message2.setAttribute("type", type);
734
- let duration = defaultDuration;
735
- let close;
736
- if (typeof options === "string") {
737
- message2.setAttribute("content", options);
738
- } else {
739
- message2.setAttribute("content", options.content);
740
- close = options.close;
741
- duration = options.duration || defaultDuration;
742
- }
743
- const time = setTimeout(() => {
744
- message2.classList.remove("message-in");
745
- message2.classList.add("message-leave");
746
- clearTimeout(time);
747
- }, duration - AnimationTime);
748
- message2.timeId = setTimeout(() => {
749
- div.removeChild(message2);
750
- if (close)
751
- close();
752
- }, duration);
753
- div.appendChild(message2);
754
- message2.classList.add("message-in");
755
- };
756
- };
757
- return {
758
- info: commonPrompt("info"),
759
- success: commonPrompt("success"),
760
- error: commonPrompt("error"),
761
- warning: commonPrompt("warning"),
762
- toast: commonPrompt("toast")
763
- };
764
- }
765
- }
766
- const message = Custom();
767
- if (typeof window !== "undefined" && message) {
768
- window.message = message;
769
- }
770
- const f7170ee498e0dd32cbdcb63fba8f75cc$1 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}\n';
771
- function CustomElement$1() {
772
- if (typeof window !== "undefined" && !customElements.get("r-tab")) {
773
- class TabPane extends HTMLElement {
774
- constructor() {
775
- super();
776
- __publicField(this, "_div");
777
- __publicField(this, "parent");
778
- __publicField(this, "initAttribute", () => {
779
- var _a, _b;
780
- this.parent = this.parentNode;
781
- this.key && ((_a = this.parent) == null ? void 0 : _a.updateAttribute(this.key, "icon", this.icon));
782
- this.key && ((_b = this.parent) == null ? void 0 : _b.updateAttribute(this.key, "effect", this.effect));
783
- });
784
- this._div = document.createElement("slot");
785
- const shadowRoot = this.attachShadow({ mode: "closed" });
786
- const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
787
- F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$1;
788
- shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
789
- shadowRoot.appendChild(this._div);
790
- }
791
- static get observedAttributes() {
792
- return ["label", "key", "disabled", "icon", "effect"];
793
- }
794
- get label() {
795
- return this.getAttribute("label") || "";
796
- }
797
- set label(value) {
798
- this.setAttribute("label", value);
799
- }
800
- get icon() {
801
- return this.getAttribute("icon");
802
- }
803
- set icon(value) {
804
- if (value) {
805
- this.setAttribute("icon", value);
806
- }
807
- }
808
- get key() {
809
- return this.getAttribute("ranKey") || this.getAttribute("rankey") || this.getAttribute("ran-key") || this.getAttribute("key");
810
- }
811
- set key(value) {
812
- if (value) {
813
- this.setAttribute("key", value);
814
- } else {
815
- this.removeAttribute("key");
816
- }
817
- }
818
- get disabled() {
819
- return this.getAttribute("disabled");
820
- }
821
- set disabled(value) {
822
- if (!value || value === "false") {
823
- this.removeAttribute("disabled");
824
- } else {
825
- this.setAttribute("disabled", value);
826
- }
827
- }
828
- get effect() {
829
- return this.getAttribute("effect");
830
- }
831
- set effect(value) {
832
- if (!value || value === "false") {
833
- this.removeAttribute("effect");
834
- } else {
835
- this.setAttribute("effect", value);
836
- }
837
- }
838
- onClick(e) {
839
- console.log("e", e);
840
- }
841
- connectedCallback() {
842
- this._div.addEventListener("click", this.onClick);
843
- document.addEventListener("DOMContentLoaded", this.initAttribute);
844
- }
845
- disconnectCallback() {
846
- document.removeEventListener("DOMContentLoaded", this.initAttribute);
847
- }
848
- attributeChangedCallback(name, oldValue, newValue) {
849
- var _a, _b, _c, _d;
850
- if (oldValue !== newValue && this.key && ((_a = this.parent) == null ? void 0 : _a.updateAttribute)) {
851
- if (name === "icon")
852
- (_b = this.parent) == null ? void 0 : _b.updateAttribute(this.key, "icon", newValue);
853
- if (name === "effect")
854
- (_c = this.parent) == null ? void 0 : _c.updateAttribute(this.key, "effect", newValue);
855
- if (name === "disabled")
856
- (_d = this.parent) == null ? void 0 : _d.updateAttribute(this.key, "disabled", newValue);
857
- }
858
- }
859
- }
860
- customElements.define("r-tab", TabPane);
861
- return TabPane;
862
- }
863
- }
864
- CustomElement$1();
865
- const f7170ee498e0dd32cbdcb63fba8f75cc = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.tab-header_nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.tab-header_nav::-webkit-scrollbar{display:none}.tab-header_nav__item{flex-shrink:0}.tab-header_nav .active{color:var(--active-color, #1890ff)}.tab-header_line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--line-color, #1890ff);transition:.2s}.tab-content{overflow:hidden}.tab-content_wrap{display:flex;width:100%;height:100%;transition:.2s}:host([type="line"]) .tab-header_nav__item{border:solid 1px transparent}:host([type="line"]) .tab-header_nav .active{color:var(--line-color, #1890ff);border:solid 1px transparent;border-color:var(--border-color, rgba(0, 0, 0, .2)) var(--border-color, rgba(0, 0, 0, .2)) transparent;border-radius:var(--border-radius, .25em) var(--border-radius, .25em) 0 0}:host([type="line"]) .tab-header_line{transition:none;visibility:hidden}:host([type="line"]) .tab-header_line:after,:host([type="line"]) .tab-header_line:before{content:"";position:absolute;visibility:visible;width:9999px;height:1px;bottom:0;background:var(--border-color, rgba(0, 0, 0, .2))}:host([type="line"]) .tab-header_line:after{left:100%}:host([type="line"]) .tab-header_line:before{right:100%}:host([align="center"]) .tab-header_nav{justify-content:center}:host([align="center"]) .tab-header_line{left:50%}:host([align="end"]) .tab-header_nav{justify-content:flex-end}\n';
866
- function CustomElement() {
867
- if (typeof window !== "undefined" && !customElements.get("r-tabs")) {
868
- class Tabs extends HTMLElement {
869
- constructor() {
870
- super();
871
- __publicField(this, "_container");
872
- __publicField(this, "_header");
873
- __publicField(this, "_nav");
874
- __publicField(this, "_line");
875
- __publicField(this, "_content");
876
- __publicField(this, "_wrap");
877
- __publicField(this, "_slot");
878
- __publicField(this, "tabHeaderKeyMapIndex");
879
- __publicField(this, "initTabHeaderKeyMapIndex", (key, index) => {
880
- const value = this.tabHeaderKeyMapIndex[key];
881
- if (value) {
882
- throw new Error(
883
- "tab \u7EC4\u4EF6\u7684 key \u503C\u5B58\u5728\u91CD\u590D, \u6216\u8005\u67D0\u4E2A tab \u7EC4\u4EF6\u7F3A\u5C11 key \u5C5E\u6027"
884
- );
885
- } else {
886
- this.tabHeaderKeyMapIndex[key] = index;
887
- }
888
- });
889
- __publicField(this, "initTabLineAlignCenter", () => {
890
- const { length } = this._nav.children;
891
- let left = 0;
892
- for (let i = 0; i < length; i++) {
893
- const { width = 0 } = this._nav.children[i].getBoundingClientRect();
894
- left += width;
895
- }
896
- this._line.style.setProperty("left", `calc(50% - ${left / 2}px)`);
897
- });
898
- __publicField(this, "initTabLineAlignEnd", () => {
899
- const { length } = this._nav.children;
900
- let left = 0;
901
- for (let i = 0; i < length; i++) {
902
- const { width = 0 } = this._nav.children[i].getBoundingClientRect();
903
- left += width;
904
- }
905
- this._line.style.setProperty("left", `calc(100% - ${left}px)`);
906
- });
907
- __publicField(this, "setTabLine", (key) => {
908
- if (key) {
909
- const index = this.tabHeaderKeyMapIndex[key];
910
- const TabHeader = this._nav.children[index];
911
- const { width = 0 } = TabHeader.getBoundingClientRect();
912
- this._line.style.setProperty("width", `${width}px`);
913
- let distance = 0;
914
- for (let i = 0; i < index; i++) {
915
- const item = this._nav.children[i];
916
- const { width: width2 = 0 } = item.getBoundingClientRect();
917
- distance += width2;
918
- }
919
- this._line.style.setProperty("transform", `translateX(${distance}px)`);
920
- }
921
- });
922
- __publicField(this, "setTabContent", (key) => {
923
- if (key) {
924
- const index = this.tabHeaderKeyMapIndex[key];
925
- this._wrap.style.setProperty(
926
- "transform",
927
- `translateX(${index * -100}%)`
928
- );
929
- }
930
- });
931
- __publicField(this, "clickTabHead", (e) => {
932
- const tabHeader = e.target;
933
- const key = tabHeader.getAttribute("ran-key");
934
- const disabled = isDisabled(tabHeader);
935
- if (!disabled && key) {
936
- this.setAttribute("active", key);
937
- this.setTabLine(key);
938
- this.setTabContent(key);
939
- deleteElementChildClass(this._nav, "active");
940
- setElementClass(tabHeader, "active");
941
- }
942
- });
943
- __publicField(this, "updateAttribute", (key, attribute, value = "") => {
944
- var _a, _b;
945
- const index = this.tabHeaderKeyMapIndex[key];
946
- if (key && value && this._nav.children[index]) {
947
- (_a = this._nav.children[index]) == null ? void 0 : _a.setAttribute(attribute, value);
948
- } else {
949
- (_b = this._nav.children[index]) == null ? void 0 : _b.removeAttribute(attribute);
950
- }
951
- });
952
- __publicField(this, "initActive", () => {
953
- const tabHeaderList = [...this._nav.children];
954
- const initTabList = tabHeaderList.filter((item) => !isDisabled(item));
955
- let initTabHeader;
956
- if (this.active != null) {
957
- initTabHeader = initTabList.find(
958
- (item, index2) => (item.getAttribute("ran-key") || `${index2}`) === this.active
959
- );
960
- }
961
- if (!initTabHeader) {
962
- initTabHeader = initTabList.shift();
963
- }
964
- if (!initTabHeader)
965
- return;
966
- const index = tabHeaderList.findIndex((item) => item === initTabHeader);
967
- const key = (initTabHeader == null ? void 0 : initTabHeader.getAttribute("ran-key")) || `${index}`;
968
- if (key != null) {
969
- this.setAttribute("active", `${key}`);
970
- setElementClass(initTabHeader, "active");
971
- const { width = 0 } = initTabHeader.getBoundingClientRect();
972
- this._line.style.setProperty("width", `${width}px`);
973
- this.setTabLine(key);
974
- this.setTabContent(key);
975
- }
976
- });
977
- __publicField(this, "listenSlotChange", () => {
978
- const slots = this._slot.assignedElements();
979
- slots.forEach((item, index) => {
980
- const tabPane = this.createTabHeader(item, index);
981
- this._nav.appendChild(tabPane);
982
- tabPane.addEventListener("click", this.clickTabHead);
983
- });
984
- this.initActive();
985
- if (this.align) {
986
- if (this.align === "center")
987
- this.initTabLineAlignCenter();
988
- if (this.align === "end")
989
- this.initTabLineAlignEnd();
990
- }
991
- });
992
- __publicField(this, "initTab", () => {
993
- this._slot.addEventListener("slotchange", this.listenSlotChange);
994
- });
995
- __publicField(this, "unloadTab", () => {
996
- this._slot.removeEventListener("slotchange", this.listenSlotChange);
997
- });
998
- this._container = document.createElement("div");
999
- this._container.setAttribute("class", "tab");
1000
- this._header = document.createElement("div");
1001
- this._header.setAttribute("class", "tab-header");
1002
- this._nav = document.createElement("div");
1003
- this._nav.setAttribute("class", "tab-header_nav");
1004
- this._line = document.createElement("div");
1005
- this._line.setAttribute("class", "tab-header_line");
1006
- this._content = document.createElement("div");
1007
- this._content.setAttribute("class", "tab-content");
1008
- this._wrap = document.createElement("div");
1009
- this._wrap.setAttribute("class", "tab-content_wrap");
1010
- this._slot = document.createElement("slot");
1011
- this._wrap.appendChild(this._slot);
1012
- this._content.appendChild(this._wrap);
1013
- this._header.appendChild(this._nav);
1014
- this._header.appendChild(this._line);
1015
- this._container.appendChild(this._header);
1016
- this._container.appendChild(this._content);
1017
- this.tabHeaderKeyMapIndex = {};
1018
- const shadowRoot = this.attachShadow({ mode: "closed" });
1019
- const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
1020
- F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
1021
- shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
1022
- shadowRoot.appendChild(this._container);
1023
- }
1024
- static get observedAttributes() {
1025
- return ["active", "forceRender", "type", "align", "effect"];
1026
- }
1027
- get align() {
1028
- return this.getAttribute("align") || "start";
1029
- }
1030
- set align(value) {
1031
- this.setAttribute("align", value);
1032
- }
1033
- set type(value) {
1034
- this.setAttribute("type", value);
1035
- }
1036
- get type() {
1037
- return this.getAttribute("type") || "flat";
1038
- }
1039
- get active() {
1040
- return this.getAttribute("active");
1041
- }
1042
- set active(value) {
1043
- if (value) {
1044
- this.setAttribute("active", value);
1045
- this.setTabLine(value);
1046
- this.setTabContent(value);
1047
- } else {
1048
- this.removeAttribute("active");
1049
- }
1050
- }
1051
- get effect() {
1052
- return this.getAttribute("effect");
1053
- }
1054
- set effect(value) {
1055
- if (!value || value === "false") {
1056
- this.removeAttribute("effect");
1057
- } else {
1058
- this.setAttribute("effect", value);
1059
- }
1060
- }
1061
- createTabHeader(tabPane, index) {
1062
- const label = tabPane.getAttribute("label") || "";
1063
- const key = tabPane.getAttribute("ranKey") || tabPane.getAttribute("rankey") || tabPane.getAttribute("ran-key") || tabPane.getAttribute("key") || `${index}`;
1064
- const type = tabPane.getAttribute("type") || "text";
1065
- this.initTabHeaderKeyMapIndex(key, index);
1066
- const tabHeader = document.createElement("r-button");
1067
- tabHeader.setAttribute("class", "tab-header_nav__item");
1068
- tabHeader.setAttribute("type", type);
1069
- isDisabled(tabPane) && tabHeader.setAttribute("disabled", "");
1070
- tabHeader.setAttribute("ran-key", key);
1071
- if (this.effect) {
1072
- tabPane.setAttribute("effect", this.effect);
1073
- this._line.style.setProperty("display", "none");
1074
- }
1075
- tabPane.setAttribute("ran-key", key);
1076
- tabHeader.innerHTML = label;
1077
- return tabHeader;
1078
- }
1079
- connectedCallback() {
1080
- this.initTab();
1081
- }
1082
- disconnectCallback() {
1083
- this.unloadTab();
1084
- }
1085
- attributeChangedCallback(name, oldValue, newValue) {
1086
- if (oldValue !== newValue) {
1087
- this.dispatchEvent(
1088
- new CustomEvent("change", {
1089
- detail: {
1090
- active: this.active
1091
- }
1092
- })
1093
- );
1094
- if (name === "align") {
1095
- if (newValue === "center")
1096
- this.initTabLineAlignCenter();
1097
- if (newValue === "end")
1098
- this.initTabLineAlignEnd();
1099
- }
1100
- if (name === "effect") {
1101
- const tabHeaderList = [...this._nav.children];
1102
- tabHeaderList.forEach((item) => {
1103
- if (!this.effect || this.effect === "false") {
1104
- item.removeAttribute("effect");
1105
- } else {
1106
- item.setAttribute("effect", newValue);
1107
- }
1108
- });
1109
- }
1110
- }
1111
- }
1112
- }
1113
- customElements.define("r-tabs", Tabs);
1114
- return Tabs;
1115
- }
1116
- }
1117
- CustomElement();
1118
- const styles = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}\n';
1119
- if (typeof document !== "undefined") {
1120
- const style = document.createElement("style");
1121
- style.textContent = styles;
1122
- document.body.appendChild(style);
1123
- }
1
+ import "./index.965c8d86.js";
1124
2
  //# sourceMappingURL=index.js.map