@topvisor/ui 0.0.16 → 0.0.18

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 (69) hide show
  1. package/.chunks/core-96a4bfb4.amd.js +2 -0
  2. package/.chunks/core-96a4bfb4.amd.js.map +1 -0
  3. package/.chunks/{core-c3afa109.es.js → core-fd9de702.es.js} +44 -44
  4. package/.chunks/core-fd9de702.es.js.map +1 -0
  5. package/.chunks/forms-1dc7c6f3.amd.js +3 -0
  6. package/.chunks/forms-1dc7c6f3.amd.js.map +1 -0
  7. package/.chunks/forms-3575c189.es.js +461 -0
  8. package/.chunks/forms-3575c189.es.js.map +1 -0
  9. package/.chunks/popup-b891abb1.amd.js +342 -0
  10. package/.chunks/popup-b891abb1.amd.js.map +1 -0
  11. package/.chunks/popup-dd9546aa.es.js +702 -0
  12. package/.chunks/popup-dd9546aa.es.js.map +1 -0
  13. package/README.md +62 -62
  14. package/common/common.amd.js +1 -1
  15. package/common/common.js +1 -17
  16. package/common/common.js.map +1 -1
  17. package/core/core.amd.js +1 -1
  18. package/core/core.js +1 -1
  19. package/core.css +1 -1
  20. package/editArea/editArea.amd.js +2 -2
  21. package/editArea/editArea.amd.js.map +1 -1
  22. package/editArea/editArea.js +16 -16
  23. package/editArea/editArea.js.map +1 -1
  24. package/editArea.css +1 -1
  25. package/forms/forms.amd.js +1 -1
  26. package/forms/forms.js +1 -1
  27. package/forms/helpers.amd.js +1 -1
  28. package/forms/helpers.amd.js.map +1 -1
  29. package/forms/helpers.js +6 -3
  30. package/forms/helpers.js.map +1 -1
  31. package/forms.css +1 -1
  32. package/icomoon/demo-files/demo.css +161 -161
  33. package/icomoon/demo-files/demo.js +30 -30
  34. package/icomoon/demo.html +2945 -2931
  35. package/icomoon/fonts/Topvisor-2.svg +232 -231
  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 +647 -644
  40. package/package.json +19 -19
  41. package/popup/popup.amd.js +2 -2
  42. package/popup/popup.amd.js.map +1 -1
  43. package/popup/popup.js +67 -68
  44. package/popup/popup.js.map +1 -1
  45. package/popup/worker.amd.js +1 -1
  46. package/popup/worker.amd.js.map +1 -1
  47. package/popup/worker.js +18 -21
  48. package/popup/worker.js.map +1 -1
  49. package/tabs/tabs.amd.js +3 -0
  50. package/tabs/tabs.amd.js.map +1 -0
  51. package/tabs/tabs.js +97 -0
  52. package/tabs/tabs.js.map +1 -0
  53. package/tabs.css +1 -0
  54. package/utils/device.amd.js.map +1 -1
  55. package/utils/device.js.map +1 -1
  56. package/utils/dom.amd.js.map +1 -1
  57. package/utils/dom.js.map +1 -1
  58. package/.chunks/core-97b070be.amd.js +0 -2
  59. package/.chunks/core-97b070be.amd.js.map +0 -1
  60. package/.chunks/core-c3afa109.es.js.map +0 -1
  61. package/.chunks/forms-6a6b0b80.es.js +0 -436
  62. package/.chunks/forms-6a6b0b80.es.js.map +0 -1
  63. package/.chunks/forms-7119886a.amd.js +0 -3
  64. package/.chunks/forms-7119886a.amd.js.map +0 -1
  65. package/.chunks/popup-6d1d8097.amd.js +0 -342
  66. package/.chunks/popup-6d1d8097.amd.js.map +0 -1
  67. package/.chunks/popup-95d27020.es.js +0 -720
  68. package/.chunks/popup-95d27020.es.js.map +0 -1
  69. package/icomoon/demo-files/Read Me.txt +0 -7
@@ -0,0 +1,2 @@
1
+ define(["exports","vue","../utils/device.amd"],function(h,m,o){"use strict";let l;const a=new Map,n={width:window.innerWidth,height:window.innerHeight};function r(t){a.set(t,t)}function M(t){a.delete(t)}function f(t){clearTimeout(l),l=setTimeout(function(){t.topEvent={widthDiff:n.width-window.innerWidth,hightDiff:n.height-window.innerHeight},n.width=window.innerWidth,n.height=window.innerHeight,a.forEach(e=>e(t))},100)}window.addEventListener("resize",f);const p={addOnReize:r,removeOnResize:M},b={widthForMobile:900},z={isMobile:!1,isMobileUA:!1,isRetina:!1,isApp:!1,isLandscape:!0,isPortrait:!1,size:0},d=window;class i{static page=(d==null?void 0:d.page)||{};static options=b;static state=m.reactive({...z});static matchMediaIsMobile;static appendStyle(e,s){let w="all";s==="m"&&(w="(max-width: "+this.options.widthForMobile+"px)"),s==="pc"&&(w="(min-width: "+this.options.widthForMobile+"px)");const c=document.createElement("style");c.innerHTML=e,c.media=w,document.head.append(c)}static install(e,s){i.defineOptions(s),e.provide("top-core",i)}static defineOptions(e){e.widthForMobile&&(this.options.widthForMobile=e.widthForMobile),i.setState()}static setState(){i.matchMediaIsMobile=window.matchMedia(`(max-width: ${i.options.widthForMobile}px)`),i.state.isMobileUA=o.isMobile(),i.state.isRetina=o.isRetina(),i.state.isApp=o.isApp(),i.setStateByWindowSize(),p.addOnReize(i.onResize),i.onResize(),i.saveToCookie()}static onResize(){i.setStateByWindowSize(),document.documentElement.style.setProperty("--100vh",window.innerHeight+"px")}static setStateByWindowSize(){var e;i.state.isMobile=!!((e=i.matchMediaIsMobile)!=null&&e.matches),i.state.isLandscape=window.innerWidth>window.innerHeight,i.state.isPortrait=!i.state.isLandscape,i.state.size=window.innerWidth>window.innerHeight?window.innerWidth:window.innerHeight,i.saveToCookie()}static saveToCookie(){const e=[1,window.innerWidth,window.innerHeight,window.devicePixelRatio,Number(i.state.isMobile),Number(i.state.isRetina)];document.cookie="device="+e.join(",")+"; path=/;"}}h.Core=i,h.Events=p});
2
+ //# sourceMappingURL=core-96a4bfb4.amd.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"core-96a4bfb4.amd.js","sources":["../../src/core/core/events.ts","../../src/core/core/options.ts","../../src/core/core/state.ts","../../src/core/core/core.ts"],"sourcesContent":["const onResizeDelay = 100;\r\n\r\nlet onResizeTimer: NodeJS.Timeout;\r\n\r\ntype TopEvent = Event & { topEvent: { widthDiff: number, hightDiff: number } }\r\n\r\n/**\r\n * Установленные обрабочики на событие изменения размеров окна\r\n */\r\nconst onResizeListeners: Map<(ev: TopEvent) => any, (ev: TopEvent) => any> = new Map();\r\n\r\n// зафиксированное состояние размеров окна\r\nconst windowSize = {\r\n\twidth: window.innerWidth,\r\n\theight: window.innerHeight,\r\n};\r\n\r\n/**\r\n * Добавить обработчик на событие изменения размеров экрана\r\n * вызов таких обработчиков будет опмизирован и объединен в одно событие\r\n */\r\nfunction addOnReize (listener: (this: Element, ev: TopEvent) => any) {\r\n\tonResizeListeners.set(listener, listener);\r\n}\r\n\r\n/**\r\n * Удаление обработчика на событие изменений размеров экрана\r\n */\r\nfunction removeOnResize (listener: (this: Element, ev: TopEvent) => any) {\r\n\tonResizeListeners.delete(listener);\r\n}\r\n\r\nfunction onResize (e: any) {\r\n\tclearTimeout(onResizeTimer);\r\n\r\n\tonResizeTimer = setTimeout(function () {\r\n\t\te.topEvent = {\r\n\t\t\twidthDiff: windowSize.width - window.innerWidth,\r\n\t\t\thightDiff: windowSize.height - window.innerHeight,\r\n\t\t};\r\n\r\n\t\twindowSize.width = window.innerWidth;\r\n\t\twindowSize.height = window.innerHeight;\r\n\r\n\t\tonResizeListeners.forEach((callback) => callback(e));\r\n\t}, onResizeDelay);\r\n}\r\n\r\nwindow.addEventListener('resize', onResize);\r\n\r\nexport default {\r\n\taddOnReize,\r\n\tremoveOnResize,\r\n};\r\n","/**\r\n * Конфигурация UI\r\n * Можно переопределить при подклчюении UI во Vue приложение через app.use(Core, options)\r\n */\r\nconst options = {\r\n\twidthForMobile: 900,\r\n};\r\n\r\nexport default options;","/**\r\n * State UI для взаимодейсвтиями с приложениями Vue\r\n */\r\nconst state = {\r\n\t/**\r\n\t * Device by size\r\n\t * @see widthForMobile\r\n\t */\r\n\tisMobile: false,\r\n\r\n\t/**\r\n\t * Device by user agent\r\n\t */\r\n\tisMobileUA: false,\r\n\r\n\t/**\r\n\t * true, если плотность пикселей экрана больше 1\r\n\t */\r\n\tisRetina: false,\r\n\r\n\t/**\r\n\t * true, елси это приложение\r\n\t */\r\n\tisApp: false,\r\n\r\n\t/**\r\n\t * true при горизонтальном расположении устройства\r\n\t */\r\n\tisLandscape: true,\r\n\r\n\t/**\r\n\t * true при вертикальном расположении устройства\r\n\t */\r\n\tisPortrait: false,\r\n\tsize: 0,\r\n};\r\n\r\nexport default state;","import { reactive } from 'vue';\r\nimport Device from '@/core/utils/device';\r\nimport DOM from '@/core/utils/dom';\r\nimport Events from '@/core/core/events';\r\nimport options from '@/core/core/options';\r\nimport state from '@/core/core/state';\r\n\r\nconst _window: any = window;\r\n\r\nclass Core {\r\n\r\n\tstatic page = _window?.page || {};\r\n\r\n\tstatic options = options;\r\n\r\n\tstatic state = reactive({ ...state });\r\n\r\n\tstatic matchMediaIsMobile?: MediaQueryList;\r\n\r\n\t/**\r\n\t * Добавить на страницу стили, используется для загрузки стилей из js\r\n\t *\r\n\t * Условная загрузка стилей m и pc отключена в пользу производительсности, стили грузятся всегда, но применяются по условию\r\n\t * @param style - css стили в строке\r\n\t * @param type - если указать 'm' или 'pc', то стили будут применяться по условию в зависимости от настройки this.options.widthForMobile\r\n\t */\r\n\tstatic appendStyle (style: string, type: '' | 'm' | 'pc'): void {\r\n\t\tlet media = 'all';\r\n\r\n\t\tif (type === 'm') {\r\n\t\t\tmedia = '(max-width: ' + this.options.widthForMobile + 'px)';\r\n\t\t}\r\n\r\n\t\tif (type === 'pc') {\r\n\t\t\tmedia = '(min-width: ' + this.options.widthForMobile + 'px)';\r\n\t\t}\r\n\r\n\t\tconst elStyle = document.createElement('style');\r\n\t\telStyle.innerHTML = style;\r\n\t\telStyle.media = media;\r\n\r\n\t\tdocument.head.append(elStyle);\r\n\t}\r\n\r\n\t/**\r\n\t * Установить как плагин в прилоежнии Vue\r\n\t * Core.state является общим для всех приложений Vue на странице\r\n\t * Core.options является общим для всех приложений Vue на странице\r\n\t * @param app - Vue App\r\n\t * @param {typeof options} options - параметры UI\r\n\t */\r\n\tstatic install (app: any, options: typeof this.options) {\r\n\t\tCore.defineOptions(options);\r\n\r\n\t\tapp.provide('top-core', Core);\r\n\t}\r\n\r\n\t/**\r\n\t * Установить конфигурацию UI\r\n\t * @param {typeof options} options\r\n\t */\r\n\tstatic defineOptions (options: typeof this.options) {\r\n\t\tif (options.widthForMobile) {\r\n\t\t\tthis.options.widthForMobile = options.widthForMobile;\r\n\t\t}\r\n\r\n\t\tCore.setState();\r\n\t}\r\n\r\n\tstatic setState () {\r\n\t\tCore.matchMediaIsMobile = window.matchMedia(`(max-width: ${Core.options.widthForMobile}px)`);\r\n\r\n\t\tCore.state.isMobileUA = Device.isMobile();\r\n\t\tCore.state.isRetina = Device.isRetina();\r\n\t\tCore.state.isApp = Device.isApp();\r\n\r\n\t\tCore.setStateByWindowSize();\r\n\r\n\t\t// пересчет значений, зависящих от рамзеров окна\r\n\t\tEvents.addOnReize(Core.onResize);\r\n\r\n\t\tCore.onResize();\r\n\r\n\t\tCore.saveToCookie();\r\n\t}\r\n\r\n\tstatic onResize () {\r\n\t\tCore.setStateByWindowSize();\r\n\r\n\t\t// честный vh\r\n\t\tdocument.documentElement.style.setProperty('--100vh', window.innerHeight + 'px');\r\n\t}\r\n\r\n\tstatic setStateByWindowSize () {\r\n\t\tCore.state.isMobile = !!Core.matchMediaIsMobile?.matches;\r\n\t\tCore.state.isLandscape = (window.innerWidth > window.innerHeight);\r\n\t\tCore.state.isPortrait = !Core.state.isLandscape;\r\n\t\tCore.state.size = (window.innerWidth > window.innerHeight) ? window.innerWidth : window.innerHeight;\r\n\r\n\t\tCore.saveToCookie();\r\n\t}\r\n\r\n\t/**\r\n\t * Сохранить информацию об устройстве в cookie\r\n\t */\r\n\tstatic saveToCookie () {\r\n\t\tconst device = [\r\n\t\t\t1,\r\n\t\t\twindow.innerWidth,\r\n\t\t\twindow.innerHeight,\r\n\t\t\twindow.devicePixelRatio,\r\n\t\t\tNumber(Core.state.isMobile),\r\n\t\t\tNumber(Core.state.isRetina),\r\n\t\t];\r\n\r\n\t\tdocument.cookie = 'device=' + device.join(',') + '; path=/;';\r\n\t}\r\n\r\n}\r\n\r\nexport default Core;"],"names":["onResizeTimer","onResizeListeners","windowSize","addOnReize","listener","removeOnResize","onResize","e","callback","Events","options","state","_window","Core","reactive","style","type","media","elStyle","app","Device","_a","device"],"mappings":"4EAEA,IAAIA,EAOJ,MAAMC,MAA2E,IAG3EC,EAAa,CAClB,MAAO,OAAO,WACd,OAAQ,OAAO,WAChB,EAMA,SAASC,EAAYC,EAAgD,CAClDH,EAAA,IAAIG,EAAUA,CAAQ,CACzC,CAKA,SAASC,EAAgBD,EAAgD,CACxEH,EAAkB,OAAOG,CAAQ,CAClC,CAEA,SAASE,EAAUC,EAAQ,CAC1B,aAAaP,CAAa,EAE1BA,EAAgB,WAAW,UAAY,CACtCO,EAAE,SAAW,CACZ,UAAWL,EAAW,MAAQ,OAAO,WACrC,UAAWA,EAAW,OAAS,OAAO,WAAA,EAGvCA,EAAW,MAAQ,OAAO,WAC1BA,EAAW,OAAS,OAAO,YAE3BD,EAAkB,QAASO,GAAaA,EAASD,CAAC,CAAC,GACjD,GAAa,CACjB,CAEA,OAAO,iBAAiB,SAAUD,CAAQ,EAE3B,MAAAG,EAAA,CACd,WAAAN,EACA,eAAAE,CACD,ECjDMK,EAAU,CACf,eAAgB,GACjB,ECHMC,EAAQ,CAKb,SAAU,GAKV,WAAY,GAKZ,SAAU,GAKV,MAAO,GAKP,YAAa,GAKb,WAAY,GACZ,KAAM,CACP,EC5BMC,EAAe,OAErB,MAAMC,CAAK,CAEV,OAAO,MAAOD,GAAA,YAAAA,EAAS,OAAQ,GAE/B,OAAO,QAAUF,EAEjB,OAAO,MAAQI,EAAA,SAAS,CAAE,GAAGH,CAAO,CAAA,EAEpC,OAAO,mBASP,OAAO,YAAaI,EAAeC,EAA6B,CAC/D,IAAIC,EAAQ,MAERD,IAAS,MACJC,EAAA,eAAiB,KAAK,QAAQ,eAAiB,OAGpDD,IAAS,OACJC,EAAA,eAAiB,KAAK,QAAQ,eAAiB,OAGlD,MAAAC,EAAU,SAAS,cAAc,OAAO,EAC9CA,EAAQ,UAAYH,EACpBG,EAAQ,MAAQD,EAEP,SAAA,KAAK,OAAOC,CAAO,CAC7B,CASA,OAAO,QAASC,EAAUT,EAA8B,CACvDG,EAAK,cAAcH,CAAO,EAEtBS,EAAA,QAAQ,WAAYN,CAAI,CAC7B,CAMA,OAAO,cAAeH,EAA8B,CAC/CA,EAAQ,iBACN,KAAA,QAAQ,eAAiBA,EAAQ,gBAGvCG,EAAK,SAAS,CACf,CAEA,OAAO,UAAY,CAClBA,EAAK,mBAAqB,OAAO,WAAW,eAAeA,EAAK,QAAQ,cAAc,KAAK,EAEtFA,EAAA,MAAM,WAAaO,EAAO,SAAS,EACnCP,EAAA,MAAM,SAAWO,EAAO,SAAS,EACjCP,EAAA,MAAM,MAAQO,EAAO,MAAM,EAEhCP,EAAK,qBAAqB,EAGnBJ,EAAA,WAAWI,EAAK,QAAQ,EAE/BA,EAAK,SAAS,EAEdA,EAAK,aAAa,CACnB,CAEA,OAAO,UAAY,CAClBA,EAAK,qBAAqB,EAG1B,SAAS,gBAAgB,MAAM,YAAY,UAAW,OAAO,YAAc,IAAI,CAChF,CAEA,OAAO,sBAAwB,OAC9BA,EAAK,MAAM,SAAW,CAAC,GAACQ,EAAAR,EAAK,qBAAL,MAAAQ,EAAyB,SACjDR,EAAK,MAAM,YAAe,OAAO,WAAa,OAAO,YACrDA,EAAK,MAAM,WAAa,CAACA,EAAK,MAAM,YAC/BA,EAAA,MAAM,KAAQ,OAAO,WAAa,OAAO,YAAe,OAAO,WAAa,OAAO,YAExFA,EAAK,aAAa,CACnB,CAKA,OAAO,cAAgB,CACtB,MAAMS,EAAS,CACd,EACA,OAAO,WACP,OAAO,YACP,OAAO,iBACP,OAAOT,EAAK,MAAM,QAAQ,EAC1B,OAAOA,EAAK,MAAM,QAAQ,CAAA,EAG3B,SAAS,OAAS,UAAYS,EAAO,KAAK,GAAG,EAAI,WAClD,CAED"}
@@ -1,35 +1,32 @@
1
- var p = Object.defineProperty;
2
- var m = (t, e, n) => e in t ? p(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
3
- var o = (t, e, n) => (m(t, typeof e != "symbol" ? e + "" : e, n), n);
4
- import { reactive as M } from "vue";
5
- import w from "../utils/device.js";
6
- const f = 100;
7
- let r;
8
- const h = /* @__PURE__ */ new Map(), s = {
1
+ import { reactive as l } from "vue";
2
+ import d from "../utils/device.js";
3
+ const p = 100;
4
+ let h;
5
+ const c = /* @__PURE__ */ new Map(), s = {
9
6
  width: window.innerWidth,
10
7
  height: window.innerHeight
11
8
  };
12
- function b(t) {
13
- h.set(t, t);
9
+ function m(e) {
10
+ c.set(e, e);
14
11
  }
15
- function z(t) {
16
- h.delete(t);
12
+ function r(e) {
13
+ c.delete(e);
17
14
  }
18
- function R(t) {
19
- clearTimeout(r), r = setTimeout(function() {
20
- t.topEvent = {
15
+ function M(e) {
16
+ clearTimeout(h), h = setTimeout(function() {
17
+ e.topEvent = {
21
18
  widthDiff: s.width - window.innerWidth,
22
19
  hightDiff: s.height - window.innerHeight
23
- }, s.width = window.innerWidth, s.height = window.innerHeight, h.forEach((e) => e(t));
24
- }, f);
20
+ }, s.width = window.innerWidth, s.height = window.innerHeight, c.forEach((t) => t(e));
21
+ }, p);
25
22
  }
26
- window.addEventListener("resize", R);
27
- const g = {
28
- addOnReize: b,
29
- removeOnResize: z
30
- }, u = {
23
+ window.addEventListener("resize", M);
24
+ const f = {
25
+ addOnReize: m,
26
+ removeOnResize: r
27
+ }, b = {
31
28
  widthForMobile: 900
32
- }, v = {
29
+ }, z = {
33
30
  /**
34
31
  * Device by size
35
32
  * @see widthForMobile
@@ -56,7 +53,12 @@ const g = {
56
53
  */
57
54
  isPortrait: !1,
58
55
  size: 0
59
- }, c = window, i = class i {
56
+ }, w = window;
57
+ class i {
58
+ static page = (w == null ? void 0 : w.page) || {};
59
+ static options = b;
60
+ static state = l({ ...z });
61
+ static matchMediaIsMobile;
60
62
  /**
61
63
  * Добавить на страницу стили, используется для загрузки стилей из js
62
64
  *
@@ -64,11 +66,11 @@ const g = {
64
66
  * @param style - css стили в строке
65
67
  * @param type - если указать 'm' или 'pc', то стили будут применяться по условию в зависимости от настройки this.options.widthForMobile
66
68
  */
67
- static appendStyle(e, n) {
68
- let a = "all";
69
- n === "m" && (a = "(max-width: " + this.options.widthForMobile + "px)"), n === "pc" && (a = "(min-width: " + this.options.widthForMobile + "px)");
70
- const d = document.createElement("style");
71
- d.innerHTML = e, d.media = a, document.head.append(d);
69
+ static appendStyle(t, n) {
70
+ let o = "all";
71
+ n === "m" && (o = "(max-width: " + this.options.widthForMobile + "px)"), n === "pc" && (o = "(min-width: " + this.options.widthForMobile + "px)");
72
+ const a = document.createElement("style");
73
+ a.innerHTML = t, a.media = o, document.head.append(a);
72
74
  }
73
75
  /**
74
76
  * Установить как плагин в прилоежнии Vue
@@ -77,31 +79,31 @@ const g = {
77
79
  * @param app - Vue App
78
80
  * @param {typeof options} options - параметры UI
79
81
  */
80
- static install(e, n) {
81
- i.defineOptions(n), e.provide("top-core", i);
82
+ static install(t, n) {
83
+ i.defineOptions(n), t.provide("top-core", i);
82
84
  }
83
85
  /**
84
86
  * Установить конфигурацию UI
85
87
  * @param {typeof options} options
86
88
  */
87
- static defineOptions(e) {
88
- e.widthForMobile && (this.options.widthForMobile = e.widthForMobile), i.setState();
89
+ static defineOptions(t) {
90
+ t.widthForMobile && (this.options.widthForMobile = t.widthForMobile), i.setState();
89
91
  }
90
92
  static setState() {
91
- i.matchMediaIsMobile = window.matchMedia(`(max-width: ${i.options.widthForMobile}px)`), i.state.isMobileUA = w.isMobile(), i.state.isRetina = w.isRetina(), i.state.isApp = w.isApp(), i.setStateByWindowSize(), g.addOnReize(i.onResize), i.onResize(), i.saveToCookie();
93
+ i.matchMediaIsMobile = window.matchMedia(`(max-width: ${i.options.widthForMobile}px)`), i.state.isMobileUA = d.isMobile(), i.state.isRetina = d.isRetina(), i.state.isApp = d.isApp(), i.setStateByWindowSize(), f.addOnReize(i.onResize), i.onResize(), i.saveToCookie();
92
94
  }
93
95
  static onResize() {
94
96
  i.setStateByWindowSize(), document.documentElement.style.setProperty("--100vh", window.innerHeight + "px");
95
97
  }
96
98
  static setStateByWindowSize() {
97
- var e;
98
- i.state.isMobile = !!((e = i.matchMediaIsMobile) != null && e.matches), i.state.isLandscape = window.innerWidth > window.innerHeight, i.state.isPortrait = !i.state.isLandscape, i.state.size = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight, i.saveToCookie();
99
+ var t;
100
+ i.state.isMobile = !!((t = i.matchMediaIsMobile) != null && t.matches), i.state.isLandscape = window.innerWidth > window.innerHeight, i.state.isPortrait = !i.state.isLandscape, i.state.size = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight, i.saveToCookie();
99
101
  }
100
102
  /**
101
103
  * Сохранить информацию об устройстве в cookie
102
104
  */
103
105
  static saveToCookie() {
104
- const e = [
106
+ const t = [
105
107
  1,
106
108
  window.innerWidth,
107
109
  window.innerHeight,
@@ -109,13 +111,11 @@ const g = {
109
111
  Number(i.state.isMobile),
110
112
  Number(i.state.isRetina)
111
113
  ];
112
- document.cookie = "device=" + e.join(",") + "; path=/;";
114
+ document.cookie = "device=" + t.join(",") + "; path=/;";
113
115
  }
114
- };
115
- o(i, "page", (c == null ? void 0 : c.page) || {}), o(i, "options", u), o(i, "state", M({ ...v })), o(i, "matchMediaIsMobile");
116
- let l = i;
116
+ }
117
117
  export {
118
- l as C,
119
- g as E
118
+ i as C,
119
+ f as E
120
120
  };
121
- //# sourceMappingURL=core-c3afa109.es.js.map
121
+ //# sourceMappingURL=core-fd9de702.es.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"core-fd9de702.es.js","sources":["../../src/core/core/events.ts","../../src/core/core/options.ts","../../src/core/core/state.ts","../../src/core/core/core.ts"],"sourcesContent":["const onResizeDelay = 100;\r\n\r\nlet onResizeTimer: NodeJS.Timeout;\r\n\r\ntype TopEvent = Event & { topEvent: { widthDiff: number, hightDiff: number } }\r\n\r\n/**\r\n * Установленные обрабочики на событие изменения размеров окна\r\n */\r\nconst onResizeListeners: Map<(ev: TopEvent) => any, (ev: TopEvent) => any> = new Map();\r\n\r\n// зафиксированное состояние размеров окна\r\nconst windowSize = {\r\n\twidth: window.innerWidth,\r\n\theight: window.innerHeight,\r\n};\r\n\r\n/**\r\n * Добавить обработчик на событие изменения размеров экрана\r\n * вызов таких обработчиков будет опмизирован и объединен в одно событие\r\n */\r\nfunction addOnReize (listener: (this: Element, ev: TopEvent) => any) {\r\n\tonResizeListeners.set(listener, listener);\r\n}\r\n\r\n/**\r\n * Удаление обработчика на событие изменений размеров экрана\r\n */\r\nfunction removeOnResize (listener: (this: Element, ev: TopEvent) => any) {\r\n\tonResizeListeners.delete(listener);\r\n}\r\n\r\nfunction onResize (e: any) {\r\n\tclearTimeout(onResizeTimer);\r\n\r\n\tonResizeTimer = setTimeout(function () {\r\n\t\te.topEvent = {\r\n\t\t\twidthDiff: windowSize.width - window.innerWidth,\r\n\t\t\thightDiff: windowSize.height - window.innerHeight,\r\n\t\t};\r\n\r\n\t\twindowSize.width = window.innerWidth;\r\n\t\twindowSize.height = window.innerHeight;\r\n\r\n\t\tonResizeListeners.forEach((callback) => callback(e));\r\n\t}, onResizeDelay);\r\n}\r\n\r\nwindow.addEventListener('resize', onResize);\r\n\r\nexport default {\r\n\taddOnReize,\r\n\tremoveOnResize,\r\n};\r\n","/**\r\n * Конфигурация UI\r\n * Можно переопределить при подклчюении UI во Vue приложение через app.use(Core, options)\r\n */\r\nconst options = {\r\n\twidthForMobile: 900,\r\n};\r\n\r\nexport default options;","/**\r\n * State UI для взаимодейсвтиями с приложениями Vue\r\n */\r\nconst state = {\r\n\t/**\r\n\t * Device by size\r\n\t * @see widthForMobile\r\n\t */\r\n\tisMobile: false,\r\n\r\n\t/**\r\n\t * Device by user agent\r\n\t */\r\n\tisMobileUA: false,\r\n\r\n\t/**\r\n\t * true, если плотность пикселей экрана больше 1\r\n\t */\r\n\tisRetina: false,\r\n\r\n\t/**\r\n\t * true, елси это приложение\r\n\t */\r\n\tisApp: false,\r\n\r\n\t/**\r\n\t * true при горизонтальном расположении устройства\r\n\t */\r\n\tisLandscape: true,\r\n\r\n\t/**\r\n\t * true при вертикальном расположении устройства\r\n\t */\r\n\tisPortrait: false,\r\n\tsize: 0,\r\n};\r\n\r\nexport default state;","import { reactive } from 'vue';\r\nimport Device from '@/core/utils/device';\r\nimport DOM from '@/core/utils/dom';\r\nimport Events from '@/core/core/events';\r\nimport options from '@/core/core/options';\r\nimport state from '@/core/core/state';\r\n\r\nconst _window: any = window;\r\n\r\nclass Core {\r\n\r\n\tstatic page = _window?.page || {};\r\n\r\n\tstatic options = options;\r\n\r\n\tstatic state = reactive({ ...state });\r\n\r\n\tstatic matchMediaIsMobile?: MediaQueryList;\r\n\r\n\t/**\r\n\t * Добавить на страницу стили, используется для загрузки стилей из js\r\n\t *\r\n\t * Условная загрузка стилей m и pc отключена в пользу производительсности, стили грузятся всегда, но применяются по условию\r\n\t * @param style - css стили в строке\r\n\t * @param type - если указать 'm' или 'pc', то стили будут применяться по условию в зависимости от настройки this.options.widthForMobile\r\n\t */\r\n\tstatic appendStyle (style: string, type: '' | 'm' | 'pc'): void {\r\n\t\tlet media = 'all';\r\n\r\n\t\tif (type === 'm') {\r\n\t\t\tmedia = '(max-width: ' + this.options.widthForMobile + 'px)';\r\n\t\t}\r\n\r\n\t\tif (type === 'pc') {\r\n\t\t\tmedia = '(min-width: ' + this.options.widthForMobile + 'px)';\r\n\t\t}\r\n\r\n\t\tconst elStyle = document.createElement('style');\r\n\t\telStyle.innerHTML = style;\r\n\t\telStyle.media = media;\r\n\r\n\t\tdocument.head.append(elStyle);\r\n\t}\r\n\r\n\t/**\r\n\t * Установить как плагин в прилоежнии Vue\r\n\t * Core.state является общим для всех приложений Vue на странице\r\n\t * Core.options является общим для всех приложений Vue на странице\r\n\t * @param app - Vue App\r\n\t * @param {typeof options} options - параметры UI\r\n\t */\r\n\tstatic install (app: any, options: typeof this.options) {\r\n\t\tCore.defineOptions(options);\r\n\r\n\t\tapp.provide('top-core', Core);\r\n\t}\r\n\r\n\t/**\r\n\t * Установить конфигурацию UI\r\n\t * @param {typeof options} options\r\n\t */\r\n\tstatic defineOptions (options: typeof this.options) {\r\n\t\tif (options.widthForMobile) {\r\n\t\t\tthis.options.widthForMobile = options.widthForMobile;\r\n\t\t}\r\n\r\n\t\tCore.setState();\r\n\t}\r\n\r\n\tstatic setState () {\r\n\t\tCore.matchMediaIsMobile = window.matchMedia(`(max-width: ${Core.options.widthForMobile}px)`);\r\n\r\n\t\tCore.state.isMobileUA = Device.isMobile();\r\n\t\tCore.state.isRetina = Device.isRetina();\r\n\t\tCore.state.isApp = Device.isApp();\r\n\r\n\t\tCore.setStateByWindowSize();\r\n\r\n\t\t// пересчет значений, зависящих от рамзеров окна\r\n\t\tEvents.addOnReize(Core.onResize);\r\n\r\n\t\tCore.onResize();\r\n\r\n\t\tCore.saveToCookie();\r\n\t}\r\n\r\n\tstatic onResize () {\r\n\t\tCore.setStateByWindowSize();\r\n\r\n\t\t// честный vh\r\n\t\tdocument.documentElement.style.setProperty('--100vh', window.innerHeight + 'px');\r\n\t}\r\n\r\n\tstatic setStateByWindowSize () {\r\n\t\tCore.state.isMobile = !!Core.matchMediaIsMobile?.matches;\r\n\t\tCore.state.isLandscape = (window.innerWidth > window.innerHeight);\r\n\t\tCore.state.isPortrait = !Core.state.isLandscape;\r\n\t\tCore.state.size = (window.innerWidth > window.innerHeight) ? window.innerWidth : window.innerHeight;\r\n\r\n\t\tCore.saveToCookie();\r\n\t}\r\n\r\n\t/**\r\n\t * Сохранить информацию об устройстве в cookie\r\n\t */\r\n\tstatic saveToCookie () {\r\n\t\tconst device = [\r\n\t\t\t1,\r\n\t\t\twindow.innerWidth,\r\n\t\t\twindow.innerHeight,\r\n\t\t\twindow.devicePixelRatio,\r\n\t\t\tNumber(Core.state.isMobile),\r\n\t\t\tNumber(Core.state.isRetina),\r\n\t\t];\r\n\r\n\t\tdocument.cookie = 'device=' + device.join(',') + '; path=/;';\r\n\t}\r\n\r\n}\r\n\r\nexport default Core;"],"names":["onResizeDelay","onResizeTimer","onResizeListeners","windowSize","addOnReize","listener","removeOnResize","onResize","callback","Events","options","state","_window","Core","reactive","style","type","media","elStyle","app","Device","_a","device"],"mappings":";;AAAA,MAAMA,IAAgB;AAEtB,IAAIC;AAOJ,MAAMC,wBAA2E,OAG3EC,IAAa;AAAA,EAClB,OAAO,OAAO;AAAA,EACd,QAAQ,OAAO;AAChB;AAMA,SAASC,EAAYC,GAAgD;AAClD,EAAAH,EAAA,IAAIG,GAAUA,CAAQ;AACzC;AAKA,SAASC,EAAgBD,GAAgD;AACxE,EAAAH,EAAkB,OAAOG,CAAQ;AAClC;AAEA,SAASE,EAAU,GAAQ;AAC1B,eAAaN,CAAa,GAE1BA,IAAgB,WAAW,WAAY;AACtC,MAAE,WAAW;AAAA,MACZ,WAAWE,EAAW,QAAQ,OAAO;AAAA,MACrC,WAAWA,EAAW,SAAS,OAAO;AAAA,IAAA,GAGvCA,EAAW,QAAQ,OAAO,YAC1BA,EAAW,SAAS,OAAO,aAE3BD,EAAkB,QAAQ,CAACM,MAAaA,EAAS,CAAC,CAAC;AAAA,KACjDR,CAAa;AACjB;AAEA,OAAO,iBAAiB,UAAUO,CAAQ;AAE1C,MAAeE,IAAA;AAAA,EACd,YAAAL;AAAA,EACA,gBAAAE;AACD,GCjDMI,IAAU;AAAA,EACf,gBAAgB;AACjB,GCHMC,IAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKb,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV,YAAY;AAAA;AAAA;AAAA;AAAA,EAKZ,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV,OAAO;AAAA;AAAA;AAAA;AAAA,EAKP,aAAa;AAAA;AAAA;AAAA;AAAA,EAKb,YAAY;AAAA,EACZ,MAAM;AACP,GC5BMC,IAAe;AAErB,MAAMC,EAAK;AAAA,EAEV,OAAO,QAAOD,KAAA,gBAAAA,EAAS,SAAQ;EAE/B,OAAO,UAAUF;AAAA,EAEjB,OAAO,QAAQI,EAAS,EAAE,GAAGH,EAAO,CAAA;AAAA,EAEpC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASP,OAAO,YAAaI,GAAeC,GAA6B;AAC/D,QAAIC,IAAQ;AAEZ,IAAID,MAAS,QACJC,IAAA,iBAAiB,KAAK,QAAQ,iBAAiB,QAGpDD,MAAS,SACJC,IAAA,iBAAiB,KAAK,QAAQ,iBAAiB;AAGlD,UAAAC,IAAU,SAAS,cAAc,OAAO;AAC9C,IAAAA,EAAQ,YAAYH,GACpBG,EAAQ,QAAQD,GAEP,SAAA,KAAK,OAAOC,CAAO;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,OAAO,QAASC,GAAUT,GAA8B;AACvD,IAAAG,EAAK,cAAcH,CAAO,GAEtBS,EAAA,QAAQ,YAAYN,CAAI;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,cAAeH,GAA8B;AACnD,IAAIA,EAAQ,mBACN,KAAA,QAAQ,iBAAiBA,EAAQ,iBAGvCG,EAAK,SAAS;AAAA,EACf;AAAA,EAEA,OAAO,WAAY;AAClB,IAAAA,EAAK,qBAAqB,OAAO,WAAW,eAAeA,EAAK,QAAQ,cAAc,KAAK,GAEtFA,EAAA,MAAM,aAAaO,EAAO,SAAS,GACnCP,EAAA,MAAM,WAAWO,EAAO,SAAS,GACjCP,EAAA,MAAM,QAAQO,EAAO,MAAM,GAEhCP,EAAK,qBAAqB,GAGnBJ,EAAA,WAAWI,EAAK,QAAQ,GAE/BA,EAAK,SAAS,GAEdA,EAAK,aAAa;AAAA,EACnB;AAAA,EAEA,OAAO,WAAY;AAClB,IAAAA,EAAK,qBAAqB,GAG1B,SAAS,gBAAgB,MAAM,YAAY,WAAW,OAAO,cAAc,IAAI;AAAA,EAChF;AAAA,EAEA,OAAO,uBAAwB;;AAC9B,IAAAA,EAAK,MAAM,WAAW,CAAC,GAACQ,IAAAR,EAAK,uBAAL,QAAAQ,EAAyB,UACjDR,EAAK,MAAM,cAAe,OAAO,aAAa,OAAO,aACrDA,EAAK,MAAM,aAAa,CAACA,EAAK,MAAM,aAC/BA,EAAA,MAAM,OAAQ,OAAO,aAAa,OAAO,cAAe,OAAO,aAAa,OAAO,aAExFA,EAAK,aAAa;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,eAAgB;AACtB,UAAMS,IAAS;AAAA,MACd;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAOT,EAAK,MAAM,QAAQ;AAAA,MAC1B,OAAOA,EAAK,MAAM,QAAQ;AAAA,IAAA;AAG3B,aAAS,SAAS,YAAYS,EAAO,KAAK,GAAG,IAAI;AAAA,EAClD;AAED;"}
@@ -0,0 +1,3 @@
1
+ define(["exports","vue"],function(i,o){"use strict";var b=document.createElement("style");b.textContent=`.top-button{cursor:pointer;box-sizing:border-box;box-shadow:var(--top-button-box-shadow);border-radius:var(--top-forms-radius);border:var(--top-forms-border-width) solid var(--top-forms-border-color);background-color:var(--top-button-background-color);height:var(--top-forms-base-height);padding:0 var(--top-forms-padding);color:var(--top-button-color);line-height:1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s,border-color .15s,box-shadow .15s}.top-button:hover{box-shadow:var(--top-button-box-shadow-hover);background-color:var(--top-button-background-color-hover)}.top-button:active{box-shadow:var(--top-button-box-shadow-active);background-color:var(--top-button-background-color-active)}.top-button.top-active{box-shadow:var(--top-button-box-shadow-selected);background-color:var(--top-button-background-color-selected)}.top-button.top-button-progress{cursor:help;box-shadow:inset #00000080 0 0 64px;background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:32px 32px;animation:_progress_1f1nw_1 1s linear infinite}@keyframes _progress_1f1nw_1{0%{background-position-x:0px}to{background-position-x:32px}}a.top-button,button.top-button{min-width:100px;text-decoration:none}a.top-button,a.top-button:hover{min-width:var(--top-forms-base-height);text-decoration:none}.top-button[data-top-icon]:not(:empty),.top-button[data-top-icon2]:not(:empty){justify-content:flex-start;text-align:left}.top-button[data-top-icon]{padding-left:0}.top-button[data-top-icon2]{padding-right:var(--top-select_arrow-width)}.top-button[data-top-icon2]:after{margin-left:auto}.top-button:empty{min-width:var(--top-forms-base-height)}.top-button[data-top-icon]:empty,.top-button[data-top-icon2]:empty{padding:0}.top-button.top-color_blue{--top-button-background-color: var(--color-blue-500)}.top-button.top-color_green{--top-button-background-color: var(--color-green-500)}.top-button.top-color_orange{--top-button-background-color: var(--color-orange-500)}.top-button.top-color_red{--top-button-background-color: var(--color-red-500)}.top-button.top-color_pink{--top-button-background-color: var(--color-pink-500)}.top-button.top-color_theme{--top-button-box-shadow-hover: none;--top-button-box-shadow-active: none;--top-button-box-shadow-selected: none;--top-icon-color: var(--color-text-2);--top-icon2-color: var(--color-text-2);--top-button-color: var(--color-text-1);--top-button-background-color: transparent;--top-button-background-color-hover: var(--color-secondary-opacity);--top-button-background-color-active: var(--color-secondary-2-opacity);--top-button-background-color-selected: var(--color-secondary-2-opacity)}.top-button.top-color_theme.top-active{--top-icon-color: var(--color-text-2)}.top-button.top-style_outline{--top-button-box-shadow: none;--top-button-box-shadow-hover: none;--top-button-box-shadow-active: none;--top-button-box-shadow-selected: none;--top-forms-border-color: var(--top-style_outline-color);--top-style_outline-color: var(--color-steel-400);--top-button-color: var(--top-style_outline-color);--top-button-background-color: var(--content-background-color);--top-button-background-color-hover: var(--color-theme-100);--top-button-background-color-active: var(--color-theme-150);--top-button-background-color-selected: var(--color-theme-125);--top-forms-border-width: 1px}.top-button.top-style_outline.top-color_theme{--top-button-color: var(--color-text)}.top-button.top-style_outline.top-color_blue{--top-style_outline-color: var(--color-blue-500)}.top-button.top-style_outline.top-color_green{--top-style_outline-color: var(--color-green-500)}.top-button.top-style_outline.top-color_orange{--top-style_outline-color: var(--color-orange-500)}.top-button.top-style_outline.top-color_red{--top-style_outline-color: var(--color-red-500)}.top-button.top-style_outline.top-color_pink{--top-style_outline-color: var(--color-pink-500)}.top-button.top-style_soft{--top-shadow-darken: none;--top-shadow-darken-2: none;--top-shadow-darken-3: none;--top-button-color: var(--color-text);--top-button-background-color: var(--color-secondary-opacity);--top-button-background-color-hover: var(--color-secondary-2-opacity);--top-button-background-color-active: var(--color-secondary-3-opacity);--top-button-background-color-selected: var(--color-secondary-3-opacity)}.top-button.top-style_soft.top-color_blue{--top-button-color: var(--color-blue-500)}.top-button.top-style_soft.top-color_orange{--top-button-color: var(--color-orange-500)}.top-button.top-style_soft.top-color_green{--top-button-color: var(--color-green-500)}.top-button.top-style_soft.top-color_red{--top-button-color: var(--color-red-500)}.top-button.top-style_soft.top-color_pink{--top-button-color: var(--color-pink-500)}.top-button.top-style_transparent{--top-shadow-darken: none;--top-shadow-darken-2: none;--top-shadow-darken-3: none;--top-button-color: var(--color-text);--top-button-background-color: transparent;--top-button-background-color-hover: transparent;--top-button-background-color-active: transparent;--top-button-background-color-selected: var(--color-steel-200)}.top-button.top-style_transparent:hover{opacity:.8}.top-button.top-style_transparent.top-color_blue{--top-button-color: var(--color-blue-450)}.top-button.top-style_transparent.top-color_green{--top-button-color: var(--color-green-450)}.top-button.top-style_transparent.top-color_orange{--top-button-color: var(--color-orange-450)}.top-button.top-style_transparent.top-color_red{--top-button-color: var(--color-red-450)}.top-button.top-style_transparent.top-color_pink{--top-button-color: var(--color-pink-450)}.top-button{--top-button-color: var(--color-white);--top-button-background-color: transparent;--top-button-background-color-hover: var(--top-button-background-color);--top-button-background-color-active: var(--top-button-background-color-hover);--top-button-background-color-selected: var(--top-button-background-color-hover);--top-button-box-shadow: none;--top-button-box-shadow-hover: var(--top-shadow-darken-2);--top-button-box-shadow-active: var(--top-shadow-darken-3);--top-button-box-shadow-selected: var(--top-shadow-darken-3);--top-forms-border-width: 0px;--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding))}.top-button.top-size_l{--top-forms-padding: var(--top-forms-padding_l);--top-forms-base-height: var(--top-forms-base-height_l)}.top-button.top-size_xl{--top-forms-padding: var(--top-forms-padding_xl);--top-forms-base-height: var(--top-forms-base-height_xl)}.top-hint{--top-icon-size: 16px;--top-icon-width: var(--top-icon-size);border-radius:50%;background:var(--content-background-color);padding:1px;color:var(--color-text-4);line-height:1;z-index:1;pointer-events:all}.top-hint:hover{color:var(--color-text-3)}.top-textarea{width:180px;display:inline-flex;align-items:center;position:relative}.top-textarea_textarea{background:var(--top-forms-background-color);width:100%;padding:var(--top-forms-padding);resize:none}.top-textarea_textarea:hover{background:var(--top-forms-background-color-hover)}.top-textarea_textarea:focus{outline-color:var(--color-theme-75);outline-offset:0px}.top-textarea_textarea.top-textarea_textarea-expandable{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}.top-textarea_pseudoContent{box-sizing:border-box;min-height:var(--17d63e56);padding:var(--top-forms-padding);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;opacity:0;z-index:-1}.top-textarea_hint{position:absolute;top:2px;right:2px}.top-forms-optionLabel{flex-grow:1}.top-forms-optionLabel_title{min-height:var(--top-forms-option-height);display:flex;align-items:center}.top-forms-optionLabel_title-disabled{color:var(--color-text-3)}.top-forms-optionLabel_description{color:var(--color-text-3);font-size:.85em;line-height:var(--top-forms-option-height)}.top-checkbox{cursor:pointer;display:inline-flex}.top-checkbox_input{cursor:inherit;border-radius:4px;background:var(--content-background-color);border:1px solid var(--top-forms-border-color);width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-checkbox_input:before{content:" ";color:#fff;font-family:Topvisor-2;font-size:16px}.top-checkbox_input:hover{border-color:var(--top-forms-option-color);background:var(--color-theme-50)}.top-checkbox_input:checked,.top-checkbox_input:indeterminate{border-color:var(--top-forms-option-color);background:var(--top-forms-option-color)}.top-checkbox_input:checked:before{content:""}.top-checkbox_input:indeterminate:before{content:""}.top-checkbox_input:checked:hover,.top-checkbox_input:indeterminate:hover{border-color:var(--top-forms-option-color-hover);background:var(--top-forms-option-color-hover)}.top-checkbox_input:disabled{border-color:var(--color-line-1-opacity);background:var(--color-theme-50)}.top-checkbox_input:checked:disabled,.top-checkbox_input:indeterminate:disabled{border-color:transparent;background:var(--color-theme-400)}.top-checkbox_input.top-error{border-color:var(--color-negative)}.top-checkbox_input.top-error:hover{border-color:var(--color-negative-2)}.top-checkbox_input:checked.top-error,.top-checkbox_input:indeterminate.top-error{background:var(--color-negative)}.top-checkbox_input:checked.top-error:hover,.top-checkbox_input:indeterminate.top-error:hover{background:var(--color-negative-2)}.top-input{width:180px;display:inline-flex;align-items:center;gap:var(--top-gap-1)}.top-input_input{background:var(--top-forms-background-color)}.top-input_input:hover{background:var(--top-forms-background-color-hover)}.top-input_input:focus{outline-color:var(--color-theme-75);outline-offset:0px}.top-input-withCleaner .top-input_input:not(:placeholder-shown){--top-forms_clear-width: 24px}.top-input_input{width:50%;flex-grow:1}.top-input[data-top-icon]:before{--top-icon-color: var(--color-text-secondary)}:root{--top-radio-background-color: var(--content-background-color);--top-radio-background-color-hover: var(--top-radio-background-color);--top-radio-background-color-active: var(--top-radio-background-color)}.top-radio{cursor:pointer}.top-radio_input{border-radius:50%;background:var(--content-background-color);border:1px solid var(--top-forms-border-color);width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-radio_input:hover{border-color:var(--top-forms-option-color);background:var(--color-theme-50)}.top-radio_input:checked{border-color:var(--top-forms-option-color);border-width:5px}.top-radio_input:checked:hover{border-color:var(--top-forms-option-color-hover)}.top-radio_input:disabled{border-color:var(--color-line-1-opacity);background:var(--color-theme-50)}.top-radio_input:checked:disabled{border-color:var(--color-theme-400)}.top-radio_input.top-error{border-color:var(--color-negative)}.top-radio_input.top-error:hover{border-color:var(--color-negative-2)}.top-checkboxSwitcher{cursor:pointer;display:inline-flex;gap:4px}.top-checkboxSwitcher_input{border-radius:9px;border:none;background:var(--color-theme-100);width:36px;height:18px;position:relative}.top-checkboxSwitcher_input:before{content:"";border-radius:50%;background:var(--color-white);width:12px;height:12px;margin:3px;position:absolute;top:0;left:0;transition:left .1s}.top-checkboxSwitcher_input:hover{background:var(--color-theme-150)}.top-checkboxSwitcher_input:checked{background:var(--top-forms-option-color)}.top-checkboxSwitcher_input:checked:hover{background:var(--top-forms-option-color-hover)}.top-checkboxSwitcher_input:checked:before{left:50%}.top-checkboxSwitcher_input:disabled{background:var(--color-theme-400)}.top-checkboxSwitcher_input.top-error{background:var(--color-negative)}.top-checkboxSwitcher_input.top-error:hover{background:var(--color-negative-2)}
2
+ `,document.head.appendChild(b);const h=o.defineComponent({__name:"button",props:{color:{default:"blue"},styling:{default:""},size:{default:"s"},name:{},title:{},icon:{},icon2:{},href:{},disabled:{type:Boolean},isSubmit:{type:Boolean},isActive:{type:Boolean},isProgress:{type:Boolean}},setup(p){const r=p,a=o.computed(()=>r.href?"a":"button"),n=o.computed(()=>r.isSubmit?"submit":void 0);return(t,l)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(a.value),{class:o.normalizeClass({"top-active":t.isActive,"top-disabled":t.disabled,"top-forms-focusable":!t.disabled,"top-button":!0,"top-button-progress":t.isProgress,[`top-size_${t.size}`]:!!t.size,[`top-color_${t.color}`]:!0,[`top-style_${t.styling}`]:!!t.styling}),name:t.name,title:t.title,href:t.href,type:n.value,"data-top-icon":t.icon||void 0,"data-top-icon2":t.icon2||void 0,disabled:t.disabled||void 0,inProgress:t.isProgress},{default:o.withCtx(()=>[o.renderSlot(t.$slots,"default",{},()=>[o.createTextVNode(o.toDisplayString(t.icon?"":"Button"),1)])]),_:3},8,["class","name","title","href","type","data-top-icon","data-top-icon2","disabled","inProgress"]))}}),m={"top-button":"top-button","top-active":"top-active","top-button-progress":"top-button-progress",progress:"_progress_1f1nw_1","top-color_blue":"top-color_blue","top-color_green":"top-color_green","top-color_orange":"top-color_orange","top-color_red":"top-color_red","top-color_pink":"top-color_pink","top-color_theme":"top-color_theme","top-style_outline":"top-style_outline","top-style_soft":"top-style_soft","top-style_transparent":"top-style_transparent","top-size_l":"top-size_l","top-size_xl":"top-size_xl"},s=(p,r)=>{const a=p.__vccOpts||p;for(const[n,t]of r)a[n]=t;return a},k=s(h,[["__cssModules",{$style:m}]]),g=["title"],u=s(o.defineComponent({__name:"hint",props:{hint:{}},setup(p){return(r,a)=>(o.openBlock(),o.createElementBlock("span",{class:"top-hint","data-top-icon":"",title:r.hint},null,8,g))}}),[["__cssModules",{$style:{"top-hint":"top-hint"}}]]),f=["name","placeholder","disabled","readonly","rows"],_={key:0,class:"top-textarea_pseudoContent"},v=s(o.defineComponent({inheritAttrs:!1,__name:"textarea",props:{modelValue:{},name:{},placeholder:{},rows:{default:5},minHeight:{default:120},expandable:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean},isError:{type:Boolean},hint:{}},emits:["update:modelValue"],setup(p,{emit:r}){const a=p;o.useCssVars(t=>({"17d63e56":t.minHeight+"px"}));const n=o.computed({get(){return a.modelValue},set(t){r("update:modelValue",t)}});return(t,l)=>{const e=o.resolveDirective("tv-tooltip");return o.openBlock(),o.createElementBlock("label",{class:o.normalizeClass({"top-textarea":!0,["top-textarea-"+t.name]:t.name,"top-disabled":t.disabled})},[o.withDirectives(o.createElementVNode("textarea",o.mergeProps({type:"text",class:{"top-forms-focusable":!t.disabled,"top-textarea_textarea":!0,"top-textarea_textarea-expandable":t.expandable,"top-error":t.isError},autocomplete:"off_always",name:t.name,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,rows:t.expandable?void 0:t.rows},t.$attrs,{"onUpdate:modelValue":l[0]||(l[0]=c=>n.value=c)}),null,16,f),[[o.vModelText,n.value]]),t.expandable?(o.openBlock(),o.createElementBlock("div",_,o.toDisplayString(n.value+" "),1)):o.createCommentVNode("",!0),t.hint?o.withDirectives((o.openBlock(),o.createBlock(u,{key:1,class:"top-textarea_hint",hint:t.hint},null,8,["hint"])),[[e]]):o.createCommentVNode("",!0)],2)}}}),[["__cssModules",{$style:{"top-textarea":"top-textarea","top-textarea_textarea":"top-textarea_textarea","top-textarea_textarea-expandable":"top-textarea_textarea-expandable","top-textarea_pseudoContent":"top-textarea_pseudoContent","top-textarea_hint":"top-textarea_hint"}}]]),y={class:"top-forms-optionLabel"},w={key:0,class:"top-forms-optionLabel_description"},d=s(o.defineComponent({__name:"controlLabel",props:{title:{},description:{},disabled:{type:Boolean}},setup(p){return(r,a)=>(o.openBlock(),o.createElementBlock("div",y,[o.createElementVNode("div",{class:o.normalizeClass({"top-forms-optionLabel_title":!0,"top-forms-optionLabel_title-disabled":r.disabled})},o.toDisplayString(r.title),3),r.description?(o.openBlock(),o.createElementBlock("div",w,o.toDisplayString(r.description),1)):o.createCommentVNode("",!0)]))}}),[["__cssModules",{$style:{"top-forms-optionLabel":"top-forms-optionLabel","top-forms-optionLabel_title":"top-forms-optionLabel_title","top-forms-optionLabel_title-disabled":"top-forms-optionLabel_title-disabled","top-forms-optionLabel_description":"top-forms-optionLabel_description"}}]]),x=["name","value","indeterminate","disabled"],$=s(o.defineComponent({__name:"checkbox",props:{modelValue:{type:[Boolean,Array,Set]},name:{},value:{},title:{},description:{},disabled:{type:Boolean},indeterminate:{type:Boolean},isError:{type:Boolean}},emits:["update:modelValue"],setup(p,{emit:r}){const a=p,n=o.computed({get(){return a.modelValue},set(t){r("update:modelValue",t)}});return(t,l)=>(o.openBlock(),o.createElementBlock("label",{class:o.normalizeClass({"top-forms-optionWrapper":!0,"top-checkbox":!0,["top-checkbox_"+t.name]:t.name!=="","top-disabled":t.disabled,"top-error":t.isError&&!t.disabled})},[o.withDirectives(o.createElementVNode("input",{type:"checkbox",class:o.normalizeClass({"top-forms-focusable":!t.disabled,"top-forms-option":!0,"top-checkbox_input":!0,"top-error":t.isError&&!t.disabled}),name:t.name,"onUpdate:modelValue":l[0]||(l[0]=e=>n.value=e),value:t.value,indeterminate:t.indeterminate,disabled:t.disabled},null,10,x),[[o.vModelCheckbox,n.value]]),t.title?(o.openBlock(),o.createBlock(d,{key:0,title:t.title,description:t.description,disabled:t.disabled},null,8,["title","description","disabled"])):o.createCommentVNode("",!0)],2))}}),[["__cssModules",{$style:{"top-checkbox":"top-checkbox","top-checkbox_input":"top-checkbox_input","top-error":"top-error"}}]]),B=["data-top-icon"],C=["name","title","placeholder","disabled","readonly"],V={key:2,class:"top-formsCaption"},z=s(o.defineComponent({__name:"input",props:{modelValue:{},name:{},disabled:{type:Boolean},readonly:{type:Boolean},title:{},captionType:{default:""},size:{default:"s"},icon:{},addCleaner:{type:Boolean},isError:{type:Boolean}},emits:["update:modelValue"],setup(p,{emit:r}){const a=p,n=o.computed({get(){return a.modelValue},set(e){r("update:modelValue",e)}}),t=o.computed(()=>a.addCleaner&&!a.title||a.captionType!==""?"":a.title),l=()=>{r("update:modelValue","")};return(e,c)=>(o.openBlock(),o.createElementBlock("label",{class:o.normalizeClass({"top-input":!0,["top-input-"+e.name]:e.name,["top-size_"+e.size]:!0,"top-disabled":e.disabled,"top-input-withCleaner":e.addCleaner,"top-formsCaptionWrapper":e.captionType!=="","top-formsCaptionWrapper-always":e.captionType==="top","top-input-withButton":!!e.$slots.btn}),"data-top-icon":e.icon},[o.withDirectives(o.createElementVNode("input",{type:"text",class:o.normalizeClass({"top-forms-focusable":!e.disabled,"top-input_input":!0,"top-error":e.isError}),autocomplete:"off_always",name:e.name,"onUpdate:modelValue":c[0]||(c[0]=N=>n.value=N),title:e.title,placeholder:t.value,disabled:e.disabled,readonly:e.readonly,onKeydown:c[1]||(c[1]=o.withKeys(()=>(e.addCleaner||!!e.$slots.btn)&&l(),["esc"]))},null,42,C),[[o.vModelText,n.value]]),e.addCleaner&&n.value?(o.openBlock(),o.createElementBlock("span",{key:0,class:"top-input_cleaner top-cleaner","data-top-icon":"",onClick:l})):o.createCommentVNode("",!0),n.value?o.renderSlot(e.$slots,"btn",{key:1}):o.createCommentVNode("",!0),o.renderSlot(e.$slots,"default"),e.captionType!==""?(o.openBlock(),o.createElementBlock("span",V,o.toDisplayString(e.title),1)):o.createCommentVNode("",!0)],10,B))}}),[["__cssModules",{$style:{"top-input":"top-input","top-input_input":"top-input_input","top-input-withCleaner":"top-input-withCleaner"}}]]),E=["name","value","disabled"],M=s(o.defineComponent({__name:"radio",props:{modelValue:{},value:{},name:{},title:{},description:{},disabled:{type:Boolean},isError:{type:Boolean}},emits:["update:modelValue"],setup(p,{emit:r}){const a=p,n=o.computed({get(){return a.modelValue},set(t){r("update:modelValue",t)}});return(t,l)=>(o.openBlock(),o.createElementBlock("label",{class:o.normalizeClass({"top-forms-optionWrapper":!0,"top-radio":!0,["top-radio_"+t.name]:t.name!=="","top-disabled":t.disabled,"top-error":t.isError&&!t.disabled})},[o.withDirectives(o.createElementVNode("input",{type:"radio",class:o.normalizeClass({"top-forms-focusable":!t.disabled,"top-forms-option":!0,"top-radio_input":!0,"top-error":t.isError&&!t.disabled}),"onUpdate:modelValue":l[0]||(l[0]=e=>n.value=e),name:t.name,value:t.value,disabled:t.disabled},null,10,E),[[o.vModelRadio,n.value]]),t.title?(o.openBlock(),o.createBlock(d,{key:0,title:t.title,description:t.description,disabled:t.disabled},null,8,["title","description","disabled"])):o.createCommentVNode("",!0)],2))}}),[["__cssModules",{$style:{"top-radio":"top-radio","top-radio_input":"top-radio_input","top-error":"top-error"}}]]),S=["name","value","disabled"],L=s(o.defineComponent({__name:"switcher",props:{modelValue:{type:[Boolean,Array,Set]},name:{},value:{},title:{},description:{},disabled:{type:Boolean},isError:{type:Boolean}},emits:["update:modelValue"],setup(p,{emit:r}){const a=p,n=o.computed({get(){return a.modelValue},set(t){r("update:modelValue",t)}});return(t,l)=>(o.openBlock(),o.createElementBlock("label",{class:o.normalizeClass({"top-forms-optionWrapper":!0,"top-checkboxSwitcher":!0,"top-disabled":t.disabled,"top-error":t.isError&&!t.disabled})},[o.withDirectives(o.createElementVNode("input",{type:"checkbox",class:o.normalizeClass({"top-forms-focusable":!t.disabled,"top-forms-option":!0,"top-checkboxSwitcher_input":!0,"top-error":t.isError&&!t.disabled}),"onUpdate:modelValue":l[0]||(l[0]=e=>n.value=e),name:t.name,value:t.value,disabled:t.disabled},null,10,S),[[o.vModelCheckbox,n.value]]),t.title?(o.openBlock(),o.createBlock(d,{key:0,title:t.title,description:t.description,disabled:t.disabled},null,8,["title","description","disabled"])):o.createCommentVNode("",!0)],2))}}),[["__cssModules",{$style:{"top-checkboxSwitcher":"top-checkboxSwitcher","top-checkboxSwitcher_input":"top-checkboxSwitcher_input","top-error":"top-error"}}]]);i.Button=k,i.ControlLabel=d,i.Hint=u,i.Textarea=v,i._export_sfc=s,i.checkbox=$,i.input=z,i.radio=M,i.switcher=L});
3
+ //# sourceMappingURL=forms-1dc7c6f3.amd.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"forms-1dc7c6f3.amd.js","sources":["../../src/components/forms/button/button.vue","../../src/components/forms/textarea/textarea.vue","../../src/components/forms/checkbox/checkbox.vue","../../src/components/forms/input/input.vue","../../src/components/forms/radio/radio.vue","../../src/components/forms/switcher/switcher.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props } from './button';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcolor: 'blue',\r\n\tstyling: '',\r\n\tsize: 's',\r\n});\r\n\r\nconst tagName = computed(() => props.href ? 'a' : 'button');\r\n\r\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\t:class=\"{\r\n\t\t\t['top-active']: isActive,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t['top-button']: true,\r\n\t\t\t['top-button-progress']: isProgress,\r\n\t\t\t[`top-size_${size}`]: !!size,\r\n\t\t\t[`top-color_${color}`]: true,\r\n\t\t\t[`top-style_${styling}`]: !!styling,\r\n\t\t}\"\r\n\t\t:name=\"name\"\r\n\t\t:title=\"title\"\r\n\t\t:href=\"href\"\r\n\t\t:type=\"type\"\r\n\t\t:data-top-icon=\"icon || undefined\"\r\n\t\t:data-top-icon2=\"icon2 || undefined\"\r\n\t\t:disabled=\"disabled || undefined\"\r\n\t\t:inProgress=\"isProgress\"\r\n\t>\r\n\t\t<!-- @slot Текст или HTML в кнопке -->\r\n\t\t<slot>\r\n\t\t\t{{ !icon ? 'Button' : '' }}\r\n\t\t</slot>\r\n\t</component>\r\n</template>\r\n\r\n<style module>\r\n@import \"./style/button.css\";\r\n@import \"./style/style-outline.css\";\r\n@import \"./style/style-soft.css\";\r\n@import \"./style/style-transparent.css\";\r\n\r\n.top-button {\r\n\t--top-button-color: var(--color-white);\r\n\t--top-button-background-color: transparent;\r\n\t--top-button-background-color-hover: var(--top-button-background-color);\r\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\r\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\r\n\t--top-button-box-shadow: none;\r\n\t--top-button-box-shadow-hover: var(--top-shadow-darken-2);\r\n\t--top-button-box-shadow-active: var(--top-shadow-darken-3);\r\n\t--top-button-box-shadow-selected: var(--top-shadow-darken-3);\r\n\t--top-forms-border-width: 0px;\r\n\t--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\r\n\t--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\r\n}\r\n\r\n.top-button.top-size_l {\r\n\t--top-forms-padding: var(--top-forms-padding_l);\r\n\t--top-forms-base-height: var(--top-forms-base-height_l);\r\n}\r\n\r\n.top-button.top-size_xl {\r\n\t--top-forms-padding: var(--top-forms-padding_xl);\r\n\t--top-forms-base-height: var(--top-forms-base-height_xl);\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport Hint from '@/components/forms/hint/hint.vue';\r\nimport type { Props, Emits } from './textarea';\r\n\r\ndefineOptions({\r\n\tinheritAttrs: false,\r\n});\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\trows: 5,\r\n\tminHeight: 120,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst value = computed({\r\n\tget () {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset (value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t\t['top-textarea']: true,\r\n\t\t\t['top-textarea-' + name]: name,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t}\"\r\n\t>\r\n\t\t<textarea\r\n\t\t\ttype=\"text\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-textarea_textarea']: true,\r\n\t\t\t\t['top-textarea_textarea-expandable']: expandable,\r\n\t\t\t\t['top-error']: isError,\r\n\t\t\t}\"\r\n\t\t\tautocomplete=\"off_always\"\r\n\t\t\t:name=\"name\"\r\n\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t\t:readonly=\"readonly\"\r\n\t\t\t:rows=\"!expandable ? rows : undefined\"\r\n\t\t\t:=\"$attrs\"\r\n\t\t\tv-model=\"value\"\r\n\t\t/>\r\n\r\n\t\t<div\r\n\t\t\tv-if=\"expandable\"\r\n\t\t\tclass=\"top-textarea_pseudoContent\"\r\n\t\t>\r\n\t\t\t{{ value + ' ' }}\r\n\t\t</div>\r\n\r\n\t\t<Hint\r\n\t\t\tv-if=\"hint\"\r\n\t\t\tclass=\"top-textarea_hint\"\r\n\t\t\t:hint=\"hint\"\r\n\t\t\tv-tv-tooltip\r\n\t\t/>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-textarea {\r\n\twidth: 180px;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tposition: relative;\r\n}\r\n\r\n.top-textarea_textarea {\r\n\tbackground: var(--top-forms-background-color);\r\n\twidth: 100%;\r\n\tpadding: var(--top-forms-padding);\r\n\tresize: none;\r\n}\r\n\r\n.top-textarea_textarea:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n.top-textarea_textarea:focus {\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0px;\r\n}\r\n\r\n.top-textarea_textarea.top-textarea_textarea-expandable {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\toverflow: hidden;\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n\r\n.top-textarea_pseudoContent {\r\n\tbox-sizing: border-box;\r\n\tmin-height: v-bind(minHeight + 'px');\r\n\tpadding: var(--top-forms-padding);\r\n\tfont-size: 14px;\r\n\twhite-space: pre-wrap;\r\n\toverflow-wrap: anywhere;\r\n\tpointer-events: none;\r\n\topacity: 0;\r\n\tz-index: -1;\r\n}\r\n\r\n.top-textarea_hint {\r\n\tposition: absolute;\r\n\ttop: 2px;\r\n\tright: 2px;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './checkbox';\r\nimport ControlLabel from '../controlLabel/controlLabel.vue';\r\n\r\nconst props = defineProps<Props>();\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst localValue = computed({\r\n\tget () {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset (value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n\t<label :class=\"{\r\n\t\t['top-forms-optionWrapper']: true,\r\n\t\t['top-checkbox']: true,\r\n\t\t['top-checkbox_' + name]: name !== '',\r\n\t\t['top-disabled']: disabled,\r\n\t\t['top-error']: isError && !disabled,\r\n\t}\">\r\n\t\t<input\r\n\t\t\ttype=\"checkbox\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-forms-option']: true,\r\n\t\t\t\t['top-checkbox_input']: true,\r\n\t\t\t\t['top-error']: isError && !disabled,\r\n\t\t\t}\"\r\n\t\t\t:name=\"name\"\r\n\t\t\tv-model=\"localValue\"\r\n\t\t\t:value=\"value\"\r\n\t\t\t:indeterminate=\"indeterminate\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t>\r\n\r\n\t\t<ControlLabel\r\n\t\t\tv-if=\"title\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:description=\"description\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t/>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-checkbox {\r\n\tcursor: pointer;\r\n\tdisplay: inline-flex;\r\n}\r\n\r\n.top-checkbox_input {\r\n\tcursor: inherit;\r\n\tborder-radius: 4px;\r\n\tbackground: var(--content-background-color);\r\n\tborder: 1px solid var(--top-forms-border-color);\r\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\r\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\r\n}\r\n\r\n.top-checkbox_input:before {\r\n\tcontent: ' ';\r\n\tcolor: #FFF;\r\n\tfont-family: 'Topvisor-2';\r\n\tfont-size: 16px;\r\n}\r\n\r\n.top-checkbox_input:hover {\r\n\tborder-color: var(--top-forms-option-color);\r\n\tbackground: var(--color-theme-50)\r\n}\r\n\r\n/* checked / indeterminate */\r\n.top-checkbox_input:checked,\r\n.top-checkbox_input:indeterminate {\r\n\tborder-color: var(--top-forms-option-color);\r\n\tbackground: var(--top-forms-option-color);\r\n}\r\n\r\n.top-checkbox_input:checked:before {\r\n\tcontent: '';\r\n}\r\n\r\n.top-checkbox_input:indeterminate:before {\r\n\tcontent: '';\r\n}\r\n\r\n.top-checkbox_input:checked:hover,\r\n.top-checkbox_input:indeterminate:hover {\r\n\tborder-color: var(--top-forms-option-color-hover);\r\n\tbackground: var(--top-forms-option-color-hover);\r\n}\r\n\r\n/* disabled selected */\r\n.top-checkbox_input:disabled {\r\n\tborder-color: var(--color-line-1-opacity);\r\n\tbackground: var(--color-theme-50);\r\n}\r\n\r\n.top-checkbox_input:checked:disabled,\r\n.top-checkbox_input:indeterminate:disabled {\r\n\tborder-color: transparent;\r\n\tbackground: var(--color-theme-400);\r\n}\r\n\r\n/* isError */\r\n.top-checkbox_input.top-error {\r\n\tborder-color: var(--color-negative);\r\n}\r\n\r\n.top-checkbox_input.top-error:hover {\r\n\tborder-color: var(--color-negative-2);\r\n}\r\n\r\n/* isError selected */\r\n.top-checkbox_input:checked.top-error,\r\n.top-checkbox_input:indeterminate.top-error {\r\n\tbackground: var(--color-negative);\r\n}\r\n\r\n.top-checkbox_input:checked.top-error:hover,\r\n.top-checkbox_input:indeterminate.top-error:hover {\r\n\tbackground: var(--color-negative-2);\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './input';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tsize: 's',\r\n\tcaptionType: '',\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst modelValue = computed({\r\n\tget() {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset(modelValue) {\r\n\t\temit('update:modelValue', modelValue);\r\n\t},\r\n});\r\n\r\nconst placeholder = computed(() => {\r\n\tif (props.addCleaner && !props.title) {\r\n\t\treturn '';\r\n\t}\r\n\tif (props.captionType !== '') {\r\n\t\treturn '';\r\n\t}\r\n\r\n\treturn props.title;\r\n});\r\n\r\nconst clean = () => {\r\n\temit('update:modelValue', '');\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t\t['top-input']: true,\r\n\t\t\t['top-input-' + name]: name,\r\n\t\t\t['top-size_' + size]: true,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-input-withCleaner']: addCleaner,\r\n\t\t\t['top-formsCaptionWrapper']: captionType !== '',\r\n\t\t\t['top-formsCaptionWrapper-always']: captionType === 'top',\r\n\t\t\t['top-input-withButton']: !!$slots.btn,\r\n\t\t}\"\r\n\t\t:data-top-icon=\"icon\"\r\n\t>\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-input_input']: true,\r\n\t\t\t\t['top-error']: isError,\r\n\t\t\t}\"\r\n\t\t\tautocomplete=\"off_always\"\r\n\t\t\t:name=\"name\"\r\n\t\t\tv-model=\"modelValue\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t\t:readonly=\"readonly\"\r\n\t\t\t@keydown.esc=\"() => (addCleaner || !!$slots.btn) && clean()\"\r\n\t\t>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"addCleaner && modelValue\"\r\n\t\t\tclass=\"top-input_cleaner top-cleaner\"\r\n\t\t\tdata-top-icon=\"\"\r\n\t\t\t@click=\"clean\"\r\n\t\t></span>\r\n\r\n\t\t<!-- TODO: кнопка должна отоборажаться только при изменении value -->\r\n\t\t<!-- TODO: до нажатия на кнопку, изменеине не должно применяться -->\r\n\t\t<!-- TODO: при отмене состояние должно возвращаться к первоначальному -->\r\n\t\t<slot\r\n\t\t\tv-if=\"modelValue\"\r\n\t\t\tname=\"btn\"\r\n\t\t/>\r\n\r\n\t\t<slot></slot>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"captionType !== ''\"\r\n\t\t\tclass=\"top-formsCaption\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</span>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-input {\r\n\twidth: 180px;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tgap: var(--top-gap-1);\r\n}\r\n\r\n.top-input_input {\r\n\tbackground: var(--top-forms-background-color);\r\n}\r\n\r\n.top-input_input:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n.top-input_input:focus {\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0px;\r\n}\r\n\r\n.top-input-withCleaner .top-input_input:not(:placeholder-shown) {\r\n\t--top-forms_clear-width: 24px;\r\n}\r\n\r\n/* TODO: перенести в inputsRange */\r\n.top-input_input {\r\n\twidth: 50%;\r\n\tflex-grow: 1;\r\n}\r\n\r\n.top-input[data-top-icon]:before {\r\n\t--top-icon-color: var(--color-text-secondary);\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './radio';\r\nimport ControlLabel from '../controlLabel/controlLabel.vue';\r\n\r\nconst props = defineProps<Props>();\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst localValue = computed({\r\n\tget () {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset (value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t['top-forms-optionWrapper']: true,\r\n\t\t['top-radio']: true,\r\n\t\t['top-radio_' + name]: name !== '',\r\n\t\t['top-disabled']: disabled,\r\n\t\t['top-error']: isError && !disabled,\r\n\t}\"\r\n\t>\r\n\t\t<input\r\n\t\t\ttype=\"radio\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-forms-option']: true,\r\n\t\t\t\t['top-radio_input']: true,\r\n\t\t\t\t['top-error']: isError && !disabled,\r\n\t\t\t}\"\r\n\t\t\tv-model=\"localValue\"\r\n\t\t\t:name=\"name\"\r\n\t\t\t:value=\"value\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t>\r\n\r\n\t\t<ControlLabel\r\n\t\t\tv-if=\"title\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:description=\"description\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t/>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n:root {\r\n\t--top-radio-background-color: var(--content-background-color);\r\n\t--top-radio-background-color-hover: var(--top-radio-background-color);\r\n\t--top-radio-background-color-active: var(--top-radio-background-color);\r\n}\r\n\r\n.top-radio {\r\n\tcursor: pointer;\r\n}\r\n\r\n.top-radio_input {\r\n\tborder-radius: 50%;\r\n\tbackground: var(--content-background-color);\r\n\tborder: 1px solid var(--top-forms-border-color);\r\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\r\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\r\n}\r\n\r\n.top-radio_input:hover {\r\n\tborder-color: var(--top-forms-option-color);\r\n\tbackground: var(--color-theme-50)\r\n}\r\n\r\n.top-radio_input:checked {\r\n\tborder-color: var(--top-forms-option-color);\r\n\tborder-width: 5px;\r\n}\r\n\r\n.top-radio_input:checked:hover {\r\n\tborder-color: var(--top-forms-option-color-hover);\r\n}\r\n\r\n/* disabled */\r\n.top-radio_input:disabled {\r\n\tborder-color: var(--color-line-1-opacity);\r\n\tbackground: var(--color-theme-50);\r\n}\r\n\r\n/* disabled selected */\r\n.top-radio_input:checked:disabled {\r\n\tborder-color: var(--color-theme-400);\r\n}\r\n\r\n/* isError */\r\n.top-radio_input.top-error {\r\n\tborder-color: var(--color-negative);\r\n}\r\n\r\n.top-radio_input.top-error:hover {\r\n\tborder-color: var(--color-negative-2);\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './switcher';\r\nimport ControlLabel from '../controlLabel/controlLabel.vue';\r\n\r\nconst props = defineProps<Props>();\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst localValue = computed({\r\n\tget () {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset (value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t['top-forms-optionWrapper']: true,\r\n\t\t['top-checkboxSwitcher']: true,\r\n\t\t['top-disabled']: disabled,\r\n\t\t['top-error']: isError && !disabled,\r\n\t}\"\r\n\t>\r\n\t\t<input\r\n\t\t\ttype=\"checkbox\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-forms-option']: true,\r\n\t\t\t\t['top-checkboxSwitcher_input']: true,\r\n\t\t\t\t['top-error']: isError && !disabled,\r\n\t\t\t}\"\r\n\t\t\tv-model=\"localValue\"\r\n\t\t\t:name=\"name\"\r\n\t\t\t:value=\"value\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t>\r\n\r\n\t\t<ControlLabel\r\n\t\t\tv-if=\"title\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:description=\"description\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t/>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-checkboxSwitcher {\r\n\tcursor: pointer;\r\n\tdisplay: inline-flex;\r\n\tgap: 4px;\r\n}\r\n\r\n.top-checkboxSwitcher_input {\r\n\tborder-radius: 9px;\r\n\tborder: none;\r\n\tbackground: var(--color-theme-100);\r\n\twidth: 36px;\r\n\theight: 18px;\r\n\tposition: relative;\r\n}\r\n\r\n.top-checkboxSwitcher_input:before {\r\n\tcontent: '';\r\n\tborder-radius: 50%;\r\n\tbackground: var(--color-white);\r\n\twidth: 12px;\r\n\theight: 12px;\r\n\tmargin: 3px;\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\r\n\ttransition: left 0.1s;\r\n}\r\n\r\n.top-checkboxSwitcher_input:hover {\r\n\tbackground: var(--color-theme-150);\r\n}\r\n\r\n/* checked */\r\n.top-checkboxSwitcher_input:checked {\r\n\tbackground: var(--top-forms-option-color);\r\n}\r\n\r\n.top-checkboxSwitcher_input:checked:hover {\r\n\tbackground: var(--top-forms-option-color-hover);\r\n}\r\n\r\n.top-checkboxSwitcher_input:checked:before {\r\n\tleft: 50%;\r\n}\r\n\r\n/* disabled */\r\n.top-checkboxSwitcher_input:disabled {\r\n\tbackground: var(--color-theme-400);\r\n}\r\n\r\n/* isError */\r\n.top-checkboxSwitcher_input.top-error {\r\n\tbackground: var(--color-negative);\r\n}\r\n\r\n.top-checkboxSwitcher_input.top-error:hover {\r\n\tbackground: var(--color-negative-2);\r\n}\r\n</style>"],"names":["tagName","computed","props","type","value","emit","localValue","modelValue","placeholder","clean"],"mappings":";gTAUMA,EAAUC,EAAAA,SAAS,IAAMC,EAAM,KAAO,IAAM,QAAQ,EAEpDC,EAAOF,EAAAA,SAAS,IAAMC,EAAM,SAAW,SAAW,MAAS,ihECIjE,MAAME,EAAQH,EAAAA,SAAS,CACtB,KAAO,CACN,OAAOC,EAAM,UACd,EACA,IAAKE,EAAO,CACXC,EAAK,oBAAqBD,CAAK,CAChC,CAAA,CACA,6zECfKE,EAAaL,EAAAA,SAAS,CAC3B,KAAO,CACN,OAAOC,EAAM,UACd,EACA,IAAKE,EAAO,CACXC,EAAK,oBAAqBD,CAAK,CAChC,CAAA,CACA,6xCCJKG,EAAaN,EAAAA,SAAS,CAC3B,KAAM,CACL,OAAOC,EAAM,UACd,EACA,IAAIK,EAAY,CACfF,EAAK,oBAAqBE,CAAU,CACrC,CAAA,CACA,EAEKC,EAAcP,EAAAA,SAAS,IACxBC,EAAM,YAAc,CAACA,EAAM,OAG3BA,EAAM,cAAgB,GAClB,GAGDA,EAAM,KACb,EAEKO,EAAQ,IAAM,CACnBJ,EAAK,oBAAqB,EAAE,CAAA,ukDCxBvBC,EAAaL,EAAAA,SAAS,CAC3B,KAAO,CACN,OAAOC,EAAM,UACd,EACA,IAAKE,EAAO,CACXC,EAAK,oBAAqBD,CAAK,CAChC,CAAA,CACA,imCCPKE,EAAaL,EAAAA,SAAS,CAC3B,KAAO,CACN,OAAOC,EAAM,UACd,EACA,IAAKE,EAAO,CACXC,EAAK,oBAAqBD,CAAK,CAChC,CAAA,CACA"}