@topvisor/ui 0.0.16 → 0.0.17

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 (72) hide show
  1. package/.chunks/core-0b2c7817.es.js +152 -0
  2. package/.chunks/{core-c3afa109.es.js.map → core-0b2c7817.es.js.map} +1 -1
  3. package/.chunks/core-51f7b679.amd.js +151 -0
  4. package/.chunks/{core-97b070be.amd.js.map → core-51f7b679.amd.js.map} +1 -1
  5. package/.chunks/forms-245e3bc0.es.js +565 -0
  6. package/.chunks/forms-245e3bc0.es.js.map +1 -0
  7. package/.chunks/forms-f7b7b259.amd.js +568 -0
  8. package/.chunks/forms-f7b7b259.amd.js.map +1 -0
  9. package/.chunks/popup-8f650530.amd.js +728 -0
  10. package/.chunks/{popup-6d1d8097.amd.js.map → popup-8f650530.amd.js.map} +1 -1
  11. package/.chunks/popup-d240ed19.es.js +731 -0
  12. package/.chunks/{popup-95d27020.es.js.map → popup-d240ed19.es.js.map} +1 -1
  13. package/common/common.amd.js +21 -1
  14. package/common/common.amd.js.map +1 -1
  15. package/common/common.js +11 -8
  16. package/common/common.js.map +1 -1
  17. package/core/core.amd.js +4 -1
  18. package/core/core.amd.js.map +1 -1
  19. package/core/core.js +2 -2
  20. package/core.css +648 -1
  21. package/dark.css +136 -1
  22. package/editArea/editArea.amd.js +125 -2
  23. package/editArea/editArea.amd.js.map +1 -1
  24. package/editArea/editArea.js +88 -76
  25. package/editArea/editArea.js.map +1 -1
  26. package/editArea.css +61 -1
  27. package/forms/forms.amd.js +12 -1
  28. package/forms/forms.amd.js.map +1 -1
  29. package/forms/forms.js +9 -9
  30. package/forms/helpers.amd.js +5 -1
  31. package/forms/helpers.amd.js.map +1 -1
  32. package/forms/helpers.js +2 -2
  33. package/forms.css +505 -1
  34. package/icomoon/demo.html +15 -1
  35. package/icomoon/fonts/Topvisor-2.svg +1 -0
  36. package/icomoon/fonts/Topvisor-2.ttf +0 -0
  37. package/icomoon/fonts/Topvisor-2.woff +0 -0
  38. package/icomoon/selection.json +1 -1
  39. package/icomoon/style.css +6 -3
  40. package/light.css +136 -1
  41. package/package.json +1 -1
  42. package/popup/popup.amd.js +197 -2
  43. package/popup/popup.amd.js.map +1 -1
  44. package/popup/popup.js +157 -105
  45. package/popup/popup.js.map +1 -1
  46. package/popup/worker.amd.js +233 -1
  47. package/popup/worker.amd.js.map +1 -1
  48. package/popup/worker.js +146 -67
  49. package/popup/worker.js.map +1 -1
  50. package/popup.css +19 -1
  51. package/tabs/tabs.amd.js +123 -0
  52. package/tabs/tabs.amd.js.map +1 -0
  53. package/tabs/tabs.js +120 -0
  54. package/tabs/tabs.js.map +1 -0
  55. package/tabs.css +60 -0
  56. package/utils/device.amd.js +41 -1
  57. package/utils/device.amd.js.map +1 -1
  58. package/utils/device.js +13 -6
  59. package/utils/device.js.map +1 -1
  60. package/utils/dom.amd.js +94 -1
  61. package/utils/dom.amd.js.map +1 -1
  62. package/utils/dom.js +77 -47
  63. package/utils/dom.js.map +1 -1
  64. package/.chunks/core-97b070be.amd.js +0 -2
  65. package/.chunks/core-c3afa109.es.js +0 -121
  66. package/.chunks/forms-6a6b0b80.es.js +0 -436
  67. package/.chunks/forms-6a6b0b80.es.js.map +0 -1
  68. package/.chunks/forms-7119886a.amd.js +0 -3
  69. package/.chunks/forms-7119886a.amd.js.map +0 -1
  70. package/.chunks/popup-6d1d8097.amd.js +0 -342
  71. package/.chunks/popup-95d27020.es.js +0 -720
  72. package/icomoon/demo-files/Read Me.txt +0 -7
@@ -0,0 +1,565 @@
1
+ import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot, createTextVNode, toDisplayString, createElementBlock, useCssVars, resolveDirective, withDirectives, createElementVNode, mergeProps, vModelText, createCommentVNode, vModelCheckbox, unref, withKeys, vModelRadio } from "vue";
2
+ var SIZE = /* @__PURE__ */ ((SIZE2) => {
3
+ SIZE2["S"] = "s";
4
+ SIZE2["L"] = "l";
5
+ SIZE2["XL"] = "xl";
6
+ return SIZE2;
7
+ })(SIZE || {});
8
+ var COLOR = /* @__PURE__ */ ((COLOR2) => {
9
+ COLOR2["Theme"] = "theme";
10
+ COLOR2["Blue"] = "blue";
11
+ COLOR2["Green"] = "green";
12
+ COLOR2["Orange"] = "orange";
13
+ COLOR2["Red"] = "red";
14
+ COLOR2["Pink"] = "pink";
15
+ return COLOR2;
16
+ })(COLOR || {});
17
+ var STYLING = /* @__PURE__ */ ((STYLING2) => {
18
+ STYLING2["Regular"] = "";
19
+ STYLING2["Outline"] = "outline";
20
+ STYLING2["Soft"] = "soft";
21
+ STYLING2["Transparent"] = "transparent";
22
+ return STYLING2;
23
+ })(STYLING || {});
24
+ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
25
+ __name: "button",
26
+ props: {
27
+ color: { default: COLOR.Blue },
28
+ styling: { default: STYLING.Regular },
29
+ size: { default: SIZE.S },
30
+ name: {},
31
+ title: {},
32
+ icon: {},
33
+ icon2: {},
34
+ href: {},
35
+ disabled: { type: Boolean },
36
+ isSubmit: { type: Boolean },
37
+ isActive: { type: Boolean },
38
+ isProgress: { type: Boolean }
39
+ },
40
+ setup(__props) {
41
+ const props = __props;
42
+ const tagName = computed(() => props.href ? "a" : "button");
43
+ const type = computed(() => props.isSubmit ? "submit" : void 0);
44
+ return (_ctx, _cache) => {
45
+ return openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
46
+ class: normalizeClass({
47
+ ["top-active"]: _ctx.isActive,
48
+ ["top-disabled"]: _ctx.disabled,
49
+ ["top-forms-focusable"]: !_ctx.disabled,
50
+ ["top-button"]: true,
51
+ ["top-button-progress"]: _ctx.isProgress,
52
+ [`top-size_${_ctx.size}`]: !!_ctx.size,
53
+ [`top-color_${_ctx.color}`]: true,
54
+ [`top-style_${_ctx.styling}`]: !!_ctx.styling
55
+ }),
56
+ name: _ctx.name,
57
+ title: _ctx.title,
58
+ href: _ctx.href,
59
+ type: type.value,
60
+ "data-top-icon": _ctx.icon || void 0,
61
+ "data-top-icon2": _ctx.icon2 || void 0,
62
+ disabled: _ctx.disabled || void 0,
63
+ inProgress: _ctx.isProgress
64
+ }, {
65
+ default: withCtx(() => [
66
+ renderSlot(_ctx.$slots, "default", {}, () => [
67
+ createTextVNode(toDisplayString(!_ctx.icon ? "Button" : ""), 1)
68
+ ])
69
+ ]),
70
+ _: 3
71
+ }, 8, ["class", "name", "title", "href", "type", "data-top-icon", "data-top-icon2", "disabled", "inProgress"]);
72
+ };
73
+ }
74
+ });
75
+ const progress = "_progress_1hqxk_1";
76
+ const style0$7 = {
77
+ "top-button": "top-button",
78
+ "top-active": "top-active",
79
+ "top-button-progress": "top-button-progress",
80
+ progress,
81
+ "top-color_blue": "top-color_blue",
82
+ "top-color_green": "top-color_green",
83
+ "top-color_orange": "top-color_orange",
84
+ "top-color_red": "top-color_red",
85
+ "top-color_pink": "top-color_pink",
86
+ "top-color_theme": "top-color_theme",
87
+ "top-style_outline": "top-style_outline",
88
+ "top-style_soft": "top-style_soft",
89
+ "top-style_transparent": "top-style_transparent",
90
+ "top-size_l": "top-size_l",
91
+ "top-size_xl": "top-size_xl"
92
+ };
93
+ const _export_sfc = (sfc, props) => {
94
+ const target = sfc.__vccOpts || sfc;
95
+ for (const [key, val] of props) {
96
+ target[key] = val;
97
+ }
98
+ return target;
99
+ };
100
+ const cssModules$7 = {
101
+ "$style": style0$7
102
+ };
103
+ const Button = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$7]]);
104
+ const _hoisted_1$6 = ["title"];
105
+ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
106
+ __name: "hint",
107
+ props: {
108
+ hint: {}
109
+ },
110
+ setup(__props) {
111
+ return (_ctx, _cache) => {
112
+ return openBlock(), createElementBlock("span", {
113
+ class: "top-hint",
114
+ "data-top-icon": "",
115
+ title: _ctx.hint
116
+ }, null, 8, _hoisted_1$6);
117
+ };
118
+ }
119
+ });
120
+ const style0$6 = {
121
+ "top-hint": "top-hint"
122
+ };
123
+ const cssModules$6 = {
124
+ "$style": style0$6
125
+ };
126
+ const Hint = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$6]]);
127
+ const _hoisted_1$5 = ["name", "placeholder", "disabled", "readonly", "rows"];
128
+ const _hoisted_2$2 = {
129
+ key: 0,
130
+ class: "top-textarea_pseudoContent"
131
+ };
132
+ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
133
+ __name: "textarea",
134
+ props: {
135
+ modelValue: {},
136
+ name: {},
137
+ placeholder: {},
138
+ rows: { default: 5 },
139
+ minHeight: { default: 120 },
140
+ expandable: { type: Boolean },
141
+ disabled: { type: Boolean },
142
+ readonly: { type: Boolean },
143
+ isError: { type: Boolean },
144
+ hint: {}
145
+ },
146
+ emits: ["update:modelValue"],
147
+ setup(__props, { emit }) {
148
+ const props = __props;
149
+ useCssVars((_ctx) => ({
150
+ "bcf6b9ae": _ctx.minHeight + "px"
151
+ }));
152
+ const value = computed({
153
+ get() {
154
+ return props.modelValue;
155
+ },
156
+ set(value2) {
157
+ emit("update:modelValue", value2);
158
+ }
159
+ });
160
+ return (_ctx, _cache) => {
161
+ const _directive_tv_tooltip = resolveDirective("tv-tooltip");
162
+ return openBlock(), createElementBlock("label", {
163
+ class: normalizeClass({
164
+ ["top-textarea"]: true,
165
+ ["top-textarea-" + _ctx.name]: _ctx.name,
166
+ ["top-disabled"]: _ctx.disabled
167
+ })
168
+ }, [
169
+ withDirectives(createElementVNode("textarea", mergeProps({
170
+ type: "text",
171
+ class: {
172
+ ["top-forms-focusable"]: !_ctx.disabled,
173
+ ["top-textarea_textarea"]: true,
174
+ ["top-textarea_textarea-expandable"]: _ctx.expandable,
175
+ ["top-error"]: _ctx.isError
176
+ },
177
+ autocomplete: "off_always",
178
+ name: _ctx.name,
179
+ placeholder: _ctx.placeholder,
180
+ disabled: _ctx.disabled,
181
+ readonly: _ctx.readonly,
182
+ rows: !_ctx.expandable ? _ctx.rows : void 0
183
+ }, _ctx.$attrs, {
184
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event)
185
+ }), null, 16, _hoisted_1$5), [
186
+ [vModelText, value.value]
187
+ ]),
188
+ _ctx.expandable ? (openBlock(), createElementBlock("div", _hoisted_2$2, toDisplayString(value.value + " "), 1)) : createCommentVNode("", true),
189
+ _ctx.hint ? withDirectives((openBlock(), createBlock(Hint, {
190
+ key: 1,
191
+ class: "top-textarea_hint",
192
+ hint: _ctx.hint
193
+ }, null, 8, ["hint"])), [
194
+ [_directive_tv_tooltip]
195
+ ]) : createCommentVNode("", true)
196
+ ], 2);
197
+ };
198
+ }
199
+ });
200
+ const style0$5 = {
201
+ "top-textarea": "top-textarea",
202
+ "top-textarea_textarea": "top-textarea_textarea",
203
+ "top-textarea_textarea-expandable": "top-textarea_textarea-expandable",
204
+ "top-textarea_pseudoContent": "top-textarea_pseudoContent",
205
+ "top-textarea_hint": "top-textarea_hint"
206
+ };
207
+ const cssModules$5 = {
208
+ "$style": style0$5
209
+ };
210
+ const Textarea = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$5]]);
211
+ const _hoisted_1$4 = { class: "top-forms-optionLabel" };
212
+ const _hoisted_2$1 = {
213
+ key: 0,
214
+ class: "top-forms-optionLabel_description"
215
+ };
216
+ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
217
+ __name: "controlLabel",
218
+ props: {
219
+ title: {},
220
+ description: {},
221
+ disabled: { type: Boolean }
222
+ },
223
+ setup(__props) {
224
+ return (_ctx, _cache) => {
225
+ return openBlock(), createElementBlock("div", _hoisted_1$4, [
226
+ createElementVNode("div", {
227
+ class: normalizeClass({
228
+ "top-forms-optionLabel_title": true,
229
+ "top-forms-optionLabel_title-disabled": _ctx.disabled
230
+ })
231
+ }, toDisplayString(_ctx.title), 3),
232
+ _ctx.description ? (openBlock(), createElementBlock("div", _hoisted_2$1, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
233
+ ]);
234
+ };
235
+ }
236
+ });
237
+ const style0$4 = {
238
+ "top-forms-optionLabel": "top-forms-optionLabel",
239
+ "top-forms-optionLabel_title": "top-forms-optionLabel_title",
240
+ "top-forms-optionLabel_title-disabled": "top-forms-optionLabel_title-disabled",
241
+ "top-forms-optionLabel_description": "top-forms-optionLabel_description"
242
+ };
243
+ const cssModules$4 = {
244
+ "$style": style0$4
245
+ };
246
+ const ControlLabel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$4]]);
247
+ const _hoisted_1$3 = ["name", "value", "indeterminate", "disabled"];
248
+ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
249
+ __name: "checkbox",
250
+ props: {
251
+ modelValue: { type: [Boolean, Array, Set] },
252
+ name: {},
253
+ value: {},
254
+ title: {},
255
+ description: {},
256
+ disabled: { type: Boolean },
257
+ indeterminate: { type: Boolean },
258
+ isError: { type: Boolean }
259
+ },
260
+ emits: ["update:modelValue"],
261
+ setup(__props, { emit }) {
262
+ const props = __props;
263
+ const localValue = computed({
264
+ get() {
265
+ return props.modelValue;
266
+ },
267
+ set(value) {
268
+ emit("update:modelValue", value);
269
+ }
270
+ });
271
+ return (_ctx, _cache) => {
272
+ return openBlock(), createElementBlock("label", {
273
+ class: normalizeClass({
274
+ ["top-forms-optionWrapper"]: true,
275
+ ["top-checkbox"]: true,
276
+ ["top-checkbox_" + _ctx.name]: _ctx.name !== "",
277
+ ["top-disabled"]: _ctx.disabled,
278
+ ["top-error"]: _ctx.isError && !_ctx.disabled
279
+ })
280
+ }, [
281
+ withDirectives(createElementVNode("input", {
282
+ type: "checkbox",
283
+ class: normalizeClass({
284
+ ["top-forms-focusable"]: !_ctx.disabled,
285
+ ["top-forms-option"]: true,
286
+ ["top-checkbox_input"]: true,
287
+ ["top-error"]: _ctx.isError && !_ctx.disabled
288
+ }),
289
+ name: _ctx.name,
290
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localValue.value = $event),
291
+ value: _ctx.value,
292
+ indeterminate: _ctx.indeterminate,
293
+ disabled: _ctx.disabled
294
+ }, null, 10, _hoisted_1$3), [
295
+ [vModelCheckbox, localValue.value]
296
+ ]),
297
+ _ctx.title ? (openBlock(), createBlock(ControlLabel, {
298
+ key: 0,
299
+ title: _ctx.title,
300
+ description: _ctx.description,
301
+ disabled: _ctx.disabled
302
+ }, null, 8, ["title", "description", "disabled"])) : createCommentVNode("", true)
303
+ ], 2);
304
+ };
305
+ }
306
+ });
307
+ const style0$3 = {
308
+ "top-checkbox": "top-checkbox",
309
+ "top-checkbox_input": "top-checkbox_input",
310
+ "top-error": "top-error"
311
+ };
312
+ const cssModules$3 = {
313
+ "$style": style0$3
314
+ };
315
+ const checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$3]]);
316
+ var CAPTION_TYPE = /* @__PURE__ */ ((CAPTION_TYPE2) => {
317
+ CAPTION_TYPE2["NONE"] = "";
318
+ CAPTION_TYPE2["SLIDE"] = "slide";
319
+ CAPTION_TYPE2["TOP"] = "top";
320
+ return CAPTION_TYPE2;
321
+ })(CAPTION_TYPE || {});
322
+ const _hoisted_1$2 = ["data-top-icon"];
323
+ const _hoisted_2 = ["name", "title", "placeholder", "disabled", "readonly"];
324
+ const _hoisted_3 = {
325
+ key: 2,
326
+ class: "top-formsCaption"
327
+ };
328
+ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
329
+ __name: "input",
330
+ props: {
331
+ modelValue: {},
332
+ name: {},
333
+ disabled: { type: Boolean },
334
+ readonly: { type: Boolean },
335
+ title: {},
336
+ captionType: { default: CAPTION_TYPE.NONE },
337
+ size: { default: SIZE.S },
338
+ icon: {},
339
+ addCleaner: { type: Boolean },
340
+ isError: { type: Boolean }
341
+ },
342
+ emits: ["update:modelValue"],
343
+ setup(__props, { emit }) {
344
+ const props = __props;
345
+ const value = computed({
346
+ get() {
347
+ return props.modelValue;
348
+ },
349
+ set(value2) {
350
+ emit("update:modelValue", value2);
351
+ }
352
+ });
353
+ const placeholder = computed(() => {
354
+ if (props.addCleaner && !props.title) {
355
+ return "";
356
+ }
357
+ if (props.captionType !== CAPTION_TYPE.NONE) {
358
+ return "";
359
+ }
360
+ return props.title;
361
+ });
362
+ const clean = () => {
363
+ emit("update:modelValue", "");
364
+ };
365
+ return (_ctx, _cache) => {
366
+ return openBlock(), createElementBlock("label", {
367
+ class: normalizeClass({
368
+ ["top-input"]: true,
369
+ ["top-input-" + _ctx.name]: _ctx.name,
370
+ ["top-size_" + _ctx.size]: true,
371
+ ["top-disabled"]: _ctx.disabled,
372
+ ["top-input-withCleaner"]: _ctx.addCleaner,
373
+ ["top-formsCaptionWrapper"]: _ctx.captionType !== unref(CAPTION_TYPE).NONE,
374
+ ["top-formsCaptionWrapper-always"]: _ctx.captionType === unref(CAPTION_TYPE).TOP,
375
+ ["top-input-withButton"]: !!_ctx.$slots.btn
376
+ }),
377
+ "data-top-icon": _ctx.icon
378
+ }, [
379
+ withDirectives(createElementVNode("input", {
380
+ type: "text",
381
+ class: normalizeClass({
382
+ ["top-forms-focusable"]: !_ctx.disabled,
383
+ ["top-input_input"]: true,
384
+ ["top-error"]: _ctx.isError
385
+ }),
386
+ autocomplete: "off_always",
387
+ name: _ctx.name,
388
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
389
+ title: _ctx.title,
390
+ placeholder: placeholder.value,
391
+ disabled: _ctx.disabled,
392
+ readonly: _ctx.readonly,
393
+ onKeydown: _cache[1] || (_cache[1] = withKeys(() => (_ctx.addCleaner || !!_ctx.$slots.btn) && clean(), ["esc"]))
394
+ }, null, 42, _hoisted_2), [
395
+ [vModelText, value.value]
396
+ ]),
397
+ _ctx.addCleaner && value.value ? (openBlock(), createElementBlock("span", {
398
+ key: 0,
399
+ class: "top-input_cleaner top-cleaner",
400
+ "data-top-icon": "",
401
+ onClick: clean
402
+ })) : createCommentVNode("", true),
403
+ value.value ? renderSlot(_ctx.$slots, "btn", { key: 1 }) : createCommentVNode("", true),
404
+ renderSlot(_ctx.$slots, "default"),
405
+ _ctx.captionType !== unref(CAPTION_TYPE).NONE ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)
406
+ ], 10, _hoisted_1$2);
407
+ };
408
+ }
409
+ });
410
+ const style0$2 = {
411
+ "top-input": "top-input",
412
+ "top-input_input": "top-input_input",
413
+ "top-input-withCleaner": "top-input-withCleaner"
414
+ };
415
+ const cssModules$2 = {
416
+ "$style": style0$2
417
+ };
418
+ const input = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
419
+ const _hoisted_1$1 = ["name", "value", "disabled"];
420
+ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
421
+ __name: "radio",
422
+ props: {
423
+ modelValue: {},
424
+ value: {},
425
+ name: {},
426
+ title: {},
427
+ description: {},
428
+ disabled: { type: Boolean },
429
+ isError: { type: Boolean }
430
+ },
431
+ emits: ["update:modelValue"],
432
+ setup(__props, { emit }) {
433
+ const props = __props;
434
+ const localValue = computed({
435
+ get() {
436
+ return props.modelValue;
437
+ },
438
+ set(value) {
439
+ emit("update:modelValue", value);
440
+ }
441
+ });
442
+ return (_ctx, _cache) => {
443
+ return openBlock(), createElementBlock("label", {
444
+ class: normalizeClass({
445
+ ["top-forms-optionWrapper"]: true,
446
+ ["top-radio"]: true,
447
+ ["top-radio_" + _ctx.name]: _ctx.name !== "",
448
+ ["top-disabled"]: _ctx.disabled,
449
+ ["top-error"]: _ctx.isError && !_ctx.disabled
450
+ })
451
+ }, [
452
+ withDirectives(createElementVNode("input", {
453
+ type: "radio",
454
+ class: normalizeClass({
455
+ ["top-forms-focusable"]: !_ctx.disabled,
456
+ ["top-forms-option"]: true,
457
+ ["top-radio_input"]: true,
458
+ ["top-error"]: _ctx.isError && !_ctx.disabled
459
+ }),
460
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localValue.value = $event),
461
+ name: _ctx.name,
462
+ value: _ctx.value,
463
+ disabled: _ctx.disabled
464
+ }, null, 10, _hoisted_1$1), [
465
+ [vModelRadio, localValue.value]
466
+ ]),
467
+ _ctx.title ? (openBlock(), createBlock(ControlLabel, {
468
+ key: 0,
469
+ title: _ctx.title,
470
+ description: _ctx.description,
471
+ disabled: _ctx.disabled
472
+ }, null, 8, ["title", "description", "disabled"])) : createCommentVNode("", true)
473
+ ], 2);
474
+ };
475
+ }
476
+ });
477
+ const style0$1 = {
478
+ "top-radio": "top-radio",
479
+ "top-radio_input": "top-radio_input",
480
+ "top-error": "top-error"
481
+ };
482
+ const cssModules$1 = {
483
+ "$style": style0$1
484
+ };
485
+ const radio = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
486
+ const _hoisted_1 = ["name", "value", "disabled"];
487
+ const _sfc_main = /* @__PURE__ */ defineComponent({
488
+ __name: "switcher",
489
+ props: {
490
+ modelValue: { type: [Boolean, Array, Set] },
491
+ name: {},
492
+ value: {},
493
+ title: {},
494
+ description: {},
495
+ disabled: { type: Boolean },
496
+ isError: { type: Boolean }
497
+ },
498
+ emits: ["update:modelValue"],
499
+ setup(__props, { emit }) {
500
+ const props = __props;
501
+ const localValue = computed({
502
+ get() {
503
+ return props.modelValue;
504
+ },
505
+ set(value) {
506
+ emit("update:modelValue", value);
507
+ }
508
+ });
509
+ return (_ctx, _cache) => {
510
+ return openBlock(), createElementBlock("label", {
511
+ class: normalizeClass({
512
+ ["top-forms-optionWrapper"]: true,
513
+ ["top-checkboxSwitcher"]: true,
514
+ ["top-disabled"]: _ctx.disabled,
515
+ ["top-error"]: _ctx.isError && !_ctx.disabled
516
+ })
517
+ }, [
518
+ withDirectives(createElementVNode("input", {
519
+ type: "checkbox",
520
+ class: normalizeClass({
521
+ ["top-forms-focusable"]: !_ctx.disabled,
522
+ ["top-forms-option"]: true,
523
+ ["top-checkboxSwitcher_input"]: true,
524
+ ["top-error"]: _ctx.isError && !_ctx.disabled
525
+ }),
526
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localValue.value = $event),
527
+ name: _ctx.name,
528
+ value: _ctx.value,
529
+ disabled: _ctx.disabled
530
+ }, null, 10, _hoisted_1), [
531
+ [vModelCheckbox, localValue.value]
532
+ ]),
533
+ _ctx.title ? (openBlock(), createBlock(ControlLabel, {
534
+ key: 0,
535
+ title: _ctx.title,
536
+ description: _ctx.description,
537
+ disabled: _ctx.disabled
538
+ }, null, 8, ["title", "description", "disabled"])) : createCommentVNode("", true)
539
+ ], 2);
540
+ };
541
+ }
542
+ });
543
+ const style0 = {
544
+ "top-checkboxSwitcher": "top-checkboxSwitcher",
545
+ "top-checkboxSwitcher_input": "top-checkboxSwitcher_input",
546
+ "top-error": "top-error"
547
+ };
548
+ const cssModules = {
549
+ "$style": style0
550
+ };
551
+ const switcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
552
+ export {
553
+ Button as B,
554
+ COLOR as C,
555
+ Hint as H,
556
+ SIZE as S,
557
+ Textarea as T,
558
+ _export_sfc as _,
559
+ ControlLabel as a,
560
+ checkbox as c,
561
+ input as i,
562
+ radio as r,
563
+ switcher as s
564
+ };
565
+ //# sourceMappingURL=forms-245e3bc0.es.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"forms-245e3bc0.es.js","sources":["../../src/components/forms/helpers.ts","../../src/components/forms/button/button.ts","../../src/components/forms/button/button.vue","../../src/components/forms/textarea/textarea.vue","../../src/components/forms/checkbox/checkbox.vue","../../src/components/forms/input/input.ts","../../src/components/forms/input/input.vue","../../src/components/forms/radio/radio.vue","../../src/components/forms/switcher/switcher.vue"],"sourcesContent":["/**\n * Размеры\n */\nexport enum SIZE {\n\tS = 's',\n\tL = 'l',\n\tXL = 'xl',\n}","import type { VNode } from 'vue';\nimport { SIZE } from '@/components/forms/helpers';\n\n/**\n * Определение параметров\n */\nexport interface Props {\n\tcolor?: COLOR\n\tstyling?: STYLING // bug: name = style init with object type\n\tsize?: SIZE\n\n\tname?: string\n\ttitle?: string\n\ticon?: string\n\ticon2?: string\n\n\thref?: string // если установлена ссылка, isSubmit не может быть true\n\t// value?: string\n\n\tdisabled?: boolean\n\tisSubmit?: boolean\n\tisActive?: boolean\n\tisProgress?: boolean\n}\n\n// /**\n// * Определение слотов\n// */\n// export interface Slots {\n// \t/**\n// \t * Слот с проивзольным содержимым\n// \t */\n// \tdefault(): VNode[];\n// }\n\n/**\n * Определение событий\n */\nexport interface Emits { }\n\n/**\n * Цвета\n */\nexport enum COLOR {\n\tTheme = 'theme',\n\tBlue = 'blue',\n\tGreen = 'green',\n\tOrange = 'orange',\n\tRed = 'red',\n\tPink = 'pink',\n}\n\n/**\n * Стили\n */\nexport enum STYLING {\n\tRegular = '',\n\tOutline = 'outline',\n\tSoft = 'soft',\n\tTransparent = 'transparent',\n}\n\nexport { SIZE };","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { Props } from './button';\nimport { COLOR, STYLING, SIZE } from './button';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcolor: COLOR.Blue,\n\tstyling: STYLING.Regular,\n\tsize: SIZE.S,\n});\n\nconst tagName = computed(() => props.href ? 'a' : 'button');\n\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\n</script>\n\n<template>\n\t<component\n\t\t:is=\"tagName\"\n\t\t:class=\"{\n\t\t\t['top-active']: isActive,\n\t\t\t['top-disabled']: disabled,\n\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t['top-button']: true,\n\t\t\t['top-button-progress']: isProgress,\n\t\t\t[`top-size_${size}`]: !!size,\n\t\t\t[`top-color_${color}`]: true,\n\t\t\t[`top-style_${styling}`]: !!styling,\n\t\t}\"\n\t\t:name=\"name\"\n\t\t:title=\"title\"\n\t\t:href=\"href\"\n\t\t:type=\"type\"\n\t\t:data-top-icon=\"icon || undefined\"\n\t\t:data-top-icon2=\"icon2 || undefined\"\n\t\t:disabled=\"disabled || undefined\"\n\t\t:inProgress=\"isProgress\"\n\t>\n\t\t<!-- @slot Текст или HTML в кнопке -->\n\t\t<slot>\n\t\t\t{{ !icon ? 'Button' : '' }}\n\t\t</slot>\n\t</component>\n</template>\n\n<style module>\n@import \"./style/button.css\";\n@import \"./style/style-outline.css\";\n@import \"./style/style-soft.css\";\n@import \"./style/style-transparent.css\";\n\n.top-button {\n\t--top-button-color: var(--color-white);\n\t--top-button-background-color: transparent;\n\t--top-button-background-color-hover: var(--top-button-background-color);\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\n\t--top-button-box-shadow: none;\n\t--top-button-box-shadow-hover: var(--top-shadow-darken-2);\n\t--top-button-box-shadow-active: var(--top-shadow-darken-3);\n\t--top-button-box-shadow-selected: var(--top-shadow-darken-3);\n\t--top-forms-border-width: 0px;\n\t--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\n\t--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\n}\n\n.top-button.top-size_l {\n\t--top-forms-padding: var(--top-forms-padding_l);\n\t--top-forms-base-height: var(--top-forms-base-height_l);\n}\n\n.top-button.top-size_xl {\n\t--top-forms-padding: var(--top-forms-padding_xl);\n\t--top-forms-base-height: var(--top-forms-base-height_xl);\n}\n</style>","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport Hint from '@/components/forms/hint/hint.vue';\nimport type { Props, Emits } from './textarea';\n\nconst props = withDefaults(defineProps<Props>(), {\n\trows: 5,\n\tminHeight: 120,\n});\n\nconst emit = defineEmits<Emits>();\n\nconst value = computed({\n\tget () {\n\t\treturn props.modelValue;\n\t},\n\tset (value) {\n\t\temit('update:modelValue', value);\n\t},\n});\n</script>\n\n<template>\n\t<label\n\t\t:class=\"{\n\t\t\t['top-textarea']: true,\n\t\t\t['top-textarea-' + name]: name,\n\t\t\t['top-disabled']: disabled,\n\t\t}\"\n\t>\n\t\t<textarea\n\t\t\ttype=\"text\"\n\t\t\t:class=\"{\n\t\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t\t['top-textarea_textarea']: true,\n\t\t\t\t['top-textarea_textarea-expandable']: expandable,\n\t\t\t\t['top-error']: isError,\n\t\t\t}\"\n\t\t\tautocomplete=\"off_always\"\n\t\t\t:name=\"name\"\n\t\t\t:placeholder=\"placeholder\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:rows=\"!expandable ? rows : undefined\"\n\t\t\t:=\"$attrs\"\n\t\t\tv-model=\"value\"\n\t\t/>\n\n\t\t<div\n\t\t\tv-if=\"expandable\"\n\t\t\tclass=\"top-textarea_pseudoContent\"\n\t\t>\n\t\t\t{{ value + ' ' }}\n\t\t</div>\n\n\t\t<Hint\n\t\t\tv-if=\"hint\"\n\t\t\tclass=\"top-textarea_hint\"\n\t\t\t:hint=\"hint\"\n\t\t\tv-tv-tooltip\n\t\t/>\n\t</label>\n</template>\n\n<style module>\n.top-textarea {\n\twidth: 180px;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tposition: relative;\n}\n\n.top-textarea_textarea {\n\tbackground: var(--top-forms-background-color);\n\twidth: 100%;\n\tpadding: var(--top-forms-padding);\n\tresize: none;\n}\n\n.top-textarea_textarea:hover {\n\tbackground: var(--top-forms-background-color-hover);\n}\n\n.top-textarea_textarea:focus {\n\toutline-color: var(--color-theme-75);\n\toutline-offset: 0px;\n}\n\n.top-textarea_textarea.top-textarea_textarea-expandable {\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n}\n\n.top-textarea_pseudoContent {\n\tbox-sizing: border-box;\n\tmin-height: v-bind(minHeight + 'px');\n\tpadding: var(--top-forms-padding);\n\tfont-size: 14px;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n\tpointer-events: none;\n\topacity: 0;\n\tz-index: -1;\n}\n\n.top-textarea_hint {\n\tposition: absolute;\n\ttop: 2px;\n\tright: 2px;\n}\n</style>","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { Props, Emits } from './checkbox';\nimport ControlLabel from '../controlLabel/controlLabel.vue';\n\nconst props = defineProps<Props>();\nconst emit = defineEmits<Emits>();\n\nconst localValue = computed({\n\tget () {\n\t\treturn props.modelValue;\n\t},\n\tset (value) {\n\t\temit('update:modelValue', value);\n\t},\n});\n\n</script>\n\n<template>\n\t<label :class=\"{\n\t\t['top-forms-optionWrapper']: true,\n\t\t['top-checkbox']: true,\n\t\t['top-checkbox_' + name]: name !== '',\n\t\t['top-disabled']: disabled,\n\t\t['top-error']: isError && !disabled,\n\t}\">\n\t\t<input\n\t\t\ttype=\"checkbox\"\n\t\t\t:class=\"{\n\t\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t\t['top-forms-option']: true,\n\t\t\t\t['top-checkbox_input']: true,\n\t\t\t\t['top-error']: isError && !disabled,\n\t\t\t}\"\n\t\t\t:name=\"name\"\n\t\t\tv-model=\"localValue\"\n\t\t\t:value=\"value\"\n\t\t\t:indeterminate=\"indeterminate\"\n\t\t\t:disabled=\"disabled\"\n\t\t>\n\n\t\t<ControlLabel\n\t\t\tv-if=\"title\"\n\t\t\t:title=\"title\"\n\t\t\t:description=\"description\"\n\t\t\t:disabled=\"disabled\"\n\t\t/>\n\t</label>\n</template>\n\n<style module>\n.top-checkbox {\n\tcursor: pointer;\n\tdisplay: inline-flex;\n}\n\n.top-checkbox_input {\n\tcursor: inherit;\n\tborder-radius: 4px;\n\tbackground: var(--content-background-color);\n\tborder: 1px solid var(--top-forms-border-color);\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\n}\n\n.top-checkbox_input:before {\n\tcontent: ' ';\n\tcolor: #FFF;\n\tfont-family: 'Topvisor-2';\n\tfont-size: 16px;\n}\n\n.top-checkbox_input:hover {\n\tborder-color: var(--top-forms-option-color);\n\tbackground: var(--color-theme-50)\n}\n\n/* checked / indeterminate */\n.top-checkbox_input:checked,\n.top-checkbox_input:indeterminate {\n\tborder-color: var(--top-forms-option-color);\n\tbackground: var(--top-forms-option-color);\n}\n\n.top-checkbox_input:checked:before {\n\tcontent: '';\n}\n\n.top-checkbox_input:indeterminate:before {\n\tcontent: '';\n}\n\n.top-checkbox_input:checked:hover,\n.top-checkbox_input:indeterminate:hover {\n\tborder-color: var(--top-forms-option-color-hover);\n\tbackground: var(--top-forms-option-color-hover);\n}\n\n/* disabled selected */\n.top-checkbox_input:disabled {\n\tborder-color: var(--color-line-1-opacity);\n\tbackground: var(--color-theme-50);\n}\n\n.top-checkbox_input:checked:disabled,\n.top-checkbox_input:indeterminate:disabled {\n\tborder-color: transparent;\n\tbackground: var(--color-theme-400);\n}\n\n/* isError */\n.top-checkbox_input.top-error {\n\tborder-color: var(--color-negative);\n}\n\n.top-checkbox_input.top-error:hover {\n\tborder-color: var(--color-negative-2);\n}\n\n/* isError selected */\n.top-checkbox_input:checked.top-error,\n.top-checkbox_input:indeterminate.top-error {\n\tbackground: var(--color-negative);\n}\n\n.top-checkbox_input:checked.top-error:hover,\n.top-checkbox_input:indeterminate.top-error:hover {\n\tbackground: var(--color-negative-2);\n}\n</style>","import type { VNode } from 'vue';\nimport { SIZE } from '@/components/forms/helpers';\n\n/**\n * Определение параметров\n */\nexport interface Props {\n\tmodelValue?: string\n\n\tname?: string\n\tdisabled?: boolean\n\treadonly?: boolean\n\n\ttitle?: string\n\tcaptionType?: CAPTION_TYPE\n\n\tsize?: SIZE\n\ticon?: string\n\taddCleaner?: boolean\n\tisError?: boolean\n}\n\n/**\n * Определение слотов\n */\nexport interface Slots {\n\t/**\n\t * Cлот с проивзольным содержимым\n\t */\n\tdefault(): VNode[];\n\tbtn(): VNode[];\n}\n\n/**\n * Определение событий\n */\nexport interface Emits {\n\t(e: 'update:modelValue', value?: string): void\n}\n\n/**\n * Типы заголовка\n */\nexport enum CAPTION_TYPE {\n\tNONE = '',\n\tSLIDE = 'slide',\n\tTOP = 'top',\n}\n\nexport { SIZE };","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { Props, Emits } from './input';\nimport { SIZE, CAPTION_TYPE } from './input';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tsize: SIZE.S,\n\tcaptionType: CAPTION_TYPE.NONE,\n});\n\nconst emit = defineEmits<Emits>();\n\nconst value = computed({\n\tget () {\n\t\treturn props.modelValue;\n\t},\n\tset (value) {\n\t\temit('update:modelValue', value);\n\t},\n});\n\nconst placeholder = computed(() => {\n\tif (props.addCleaner && !props.title) {\n\t\treturn '';\n\t}\n\tif (props.captionType !== CAPTION_TYPE.NONE) {\n\t\treturn '';\n\t}\n\n\treturn props.title;\n});\n\nconst clean = () => {\n\temit('update:modelValue', '');\n};\n</script>\n\n<template>\n\t<label\n\t\t:class=\"{\n\t\t\t['top-input']: true,\n\t\t\t['top-input-' + name]: name,\n\t\t\t['top-size_' + size]: true,\n\t\t\t['top-disabled']: disabled,\n\t\t\t['top-input-withCleaner']: addCleaner,\n\t\t\t['top-formsCaptionWrapper']: captionType !== CAPTION_TYPE.NONE,\n\t\t\t['top-formsCaptionWrapper-always']: captionType === CAPTION_TYPE.TOP,\n\t\t\t['top-input-withButton']: !!$slots.btn,\n\t\t}\"\n\t\t:data-top-icon=\"icon\"\n\t>\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\t:class=\"{\n\t\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t\t['top-input_input']: true,\n\t\t\t\t['top-error']: isError,\n\t\t\t}\"\n\t\t\tautocomplete=\"off_always\"\n\t\t\t:name=\"name\"\n\t\t\tv-model=\"value\"\n\t\t\t:title=\"title\"\n\t\t\t:placeholder=\"placeholder\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t@keydown.esc=\"() => (addCleaner || !!$slots.btn) && clean()\"\n\t\t>\n\n\t\t<span\n\t\t\tv-if=\"addCleaner && value\"\n\t\t\tclass=\"top-input_cleaner top-cleaner\"\n\t\t\tdata-top-icon=\"\"\n\t\t\t@click=\"clean\"\n\t\t></span>\n\n\t\t<!-- TODO: кнопка должна отоборажаться только при изменении value -->\n\t\t<!-- TODO: до нажатия на кнопку, изменеине не должно применяться -->\n\t\t<!-- TODO: при отмене состояние должно возвращаться к первоначальному -->\n\t\t<slot\n\t\t\tv-if=\"value\"\n\t\t\tname=\"btn\"\n\t\t/>\n\n\t\t<slot></slot>\n\n\t\t<span\n\t\t\tv-if=\"captionType !== CAPTION_TYPE.NONE\"\n\t\t\tclass=\"top-formsCaption\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</span>\n\t</label>\n</template>\n\n<style module>\n.top-input {\n\twidth: 180px;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--top-gap-1);\n}\n\n.top-input_input {\n\tbackground: var(--top-forms-background-color);\n}\n\n.top-input_input:hover {\n\tbackground: var(--top-forms-background-color-hover);\n}\n\n.top-input_input:focus {\n\toutline-color: var(--color-theme-75);\n\toutline-offset: 0px;\n}\n\n.top-input-withCleaner .top-input_input:not(:placeholder-shown) {\n\t--top-forms_clear-width: 24px;\n}\n\n/* TODO: перенести в inputsRange */\n.top-input_input {\n\twidth: 50%;\n\tflex-grow: 1;\n}\n\n.top-input[data-top-icon]:before {\n\t--top-icon-color: var(--color-text-secondary);\n}\n</style>","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { Props, Emits } from './radio';\nimport ControlLabel from '../controlLabel/controlLabel.vue';\n\nconst props = defineProps<Props>();\nconst emit = defineEmits<Emits>();\n\nconst localValue = computed({\n\tget () {\n\t\treturn props.modelValue;\n\t},\n\tset (value) {\n\t\temit('update:modelValue', value);\n\t},\n});\n\n</script>\n\n<template>\n\t<label\n\t\t:class=\"{\n\t\t['top-forms-optionWrapper']: true,\n\t\t['top-radio']: true,\n\t\t['top-radio_' + name]: name !== '',\n\t\t['top-disabled']: disabled,\n\t\t['top-error']: isError && !disabled,\n\t}\"\n\t>\n\t\t<input\n\t\t\ttype=\"radio\"\n\t\t\t:class=\"{\n\t\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t\t['top-forms-option']: true,\n\t\t\t\t['top-radio_input']: true,\n\t\t\t\t['top-error']: isError && !disabled,\n\t\t\t}\"\n\t\t\tv-model=\"localValue\"\n\t\t\t:name=\"name\"\n\t\t\t:value=\"value\"\n\t\t\t:disabled=\"disabled\"\n\t\t>\n\n\t\t<ControlLabel\n\t\t\tv-if=\"title\"\n\t\t\t:title=\"title\"\n\t\t\t:description=\"description\"\n\t\t\t:disabled=\"disabled\"\n\t\t/>\n\t</label>\n</template>\n\n<style module>\n:root {\n\t--top-radio-background-color: var(--content-background-color);\n\t--top-radio-background-color-hover: var(--top-radio-background-color);\n\t--top-radio-background-color-active: var(--top-radio-background-color);\n}\n\n.top-radio {\n\tcursor: pointer;\n}\n\n.top-radio_input {\n\tborder-radius: 50%;\n\tbackground: var(--content-background-color);\n\tborder: 1px solid var(--top-forms-border-color);\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\n}\n\n.top-radio_input:hover {\n\tborder-color: var(--top-forms-option-color);\n\tbackground: var(--color-theme-50)\n}\n\n.top-radio_input:checked {\n\tborder-color: var(--top-forms-option-color);\n\tborder-width: 5px;\n}\n\n.top-radio_input:checked:hover {\n\tborder-color: var(--top-forms-option-color-hover);\n}\n\n/* disabled */\n.top-radio_input:disabled {\n\tborder-color: var(--color-line-1-opacity);\n\tbackground: var(--color-theme-50);\n}\n\n/* disabled selected */\n.top-radio_input:checked:disabled {\n\tborder-color: var(--color-theme-400);\n}\n\n/* isError */\n.top-radio_input.top-error {\n\tborder-color: var(--color-negative);\n}\n\n.top-radio_input.top-error:hover {\n\tborder-color: var(--color-negative-2);\n}\n</style>","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { Props, Emits } from './switcher';\nimport ControlLabel from '../controlLabel/controlLabel.vue';\n\nconst props = defineProps<Props>();\nconst emit = defineEmits<Emits>();\n\nconst localValue = computed({\n\tget () {\n\t\treturn props.modelValue;\n\t},\n\tset (value) {\n\t\temit('update:modelValue', value);\n\t},\n});\n</script>\n\n<template>\n\t<label\n\t\t:class=\"{\n\t\t['top-forms-optionWrapper']: true,\n\t\t['top-checkboxSwitcher']: true,\n\t\t['top-disabled']: disabled,\n\t\t['top-error']: isError && !disabled,\n\t}\"\n\t>\n\t\t<input\n\t\t\ttype=\"checkbox\"\n\t\t\t:class=\"{\n\t\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t\t['top-forms-option']: true,\n\t\t\t\t['top-checkboxSwitcher_input']: true,\n\t\t\t\t['top-error']: isError && !disabled,\n\t\t\t}\"\n\t\t\tv-model=\"localValue\"\n\t\t\t:name=\"name\"\n\t\t\t:value=\"value\"\n\t\t\t:disabled=\"disabled\"\n\t\t>\n\n\t\t<ControlLabel\n\t\t\tv-if=\"title\"\n\t\t\t:title=\"title\"\n\t\t\t:description=\"description\"\n\t\t\t:disabled=\"disabled\"\n\t\t/>\n\t</label>\n</template>\n\n<style module>\n.top-checkboxSwitcher {\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tgap: 4px;\n}\n\n.top-checkboxSwitcher_input {\n\tborder-radius: 9px;\n\tborder: none;\n\tbackground: var(--color-theme-100);\n\twidth: 36px;\n\theight: 18px;\n\tposition: relative;\n}\n\n.top-checkboxSwitcher_input:before {\n\tcontent: '';\n\tborder-radius: 50%;\n\tbackground: var(--color-white);\n\twidth: 12px;\n\theight: 12px;\n\tmargin: 3px;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\n\ttransition: left 0.1s;\n}\n\n.top-checkboxSwitcher_input:hover {\n\tbackground: var(--color-theme-150);\n}\n\n/* checked */\n.top-checkboxSwitcher_input:checked {\n\tbackground: var(--top-forms-option-color);\n}\n\n.top-checkboxSwitcher_input:checked:hover {\n\tbackground: var(--top-forms-option-color-hover);\n}\n\n.top-checkboxSwitcher_input:checked:before {\n\tleft: 50%;\n}\n\n/* disabled */\n.top-checkboxSwitcher_input:disabled {\n\tbackground: var(--color-theme-400);\n}\n\n/* isError */\n.top-checkboxSwitcher_input.top-error {\n\tbackground: var(--color-negative);\n}\n\n.top-checkboxSwitcher_input.top-error:hover {\n\tbackground: var(--color-negative-2);\n}\n</style>"],"names":["SIZE","COLOR","STYLING","value","CAPTION_TYPE"],"mappings":"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"}