@topvisor/ui 0.0.17 → 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.
- package/.chunks/core-96a4bfb4.amd.js +2 -0
- package/.chunks/core-96a4bfb4.amd.js.map +1 -0
- package/.chunks/core-fd9de702.es.js +121 -0
- package/.chunks/core-fd9de702.es.js.map +1 -0
- package/.chunks/forms-1dc7c6f3.amd.js +3 -0
- package/.chunks/forms-1dc7c6f3.amd.js.map +1 -0
- package/.chunks/forms-3575c189.es.js +461 -0
- package/.chunks/forms-3575c189.es.js.map +1 -0
- package/.chunks/popup-b891abb1.amd.js +342 -0
- package/.chunks/popup-b891abb1.amd.js.map +1 -0
- package/.chunks/popup-dd9546aa.es.js +702 -0
- package/.chunks/popup-dd9546aa.es.js.map +1 -0
- package/README.md +62 -62
- package/common/common.amd.js +1 -21
- package/common/common.amd.js.map +1 -1
- package/common/common.js +1 -20
- package/common/common.js.map +1 -1
- package/core/core.amd.js +1 -4
- package/core/core.amd.js.map +1 -1
- package/core/core.js +2 -2
- package/core.css +1 -648
- package/dark.css +1 -136
- package/editArea/editArea.amd.js +2 -125
- package/editArea/editArea.amd.js.map +1 -1
- package/editArea/editArea.js +77 -89
- package/editArea/editArea.js.map +1 -1
- package/editArea.css +1 -61
- package/forms/forms.amd.js +1 -12
- package/forms/forms.amd.js.map +1 -1
- package/forms/forms.js +9 -9
- package/forms/helpers.amd.js +1 -5
- package/forms/helpers.amd.js.map +1 -1
- package/forms/helpers.js +6 -3
- package/forms/helpers.js.map +1 -1
- package/forms.css +1 -505
- package/icomoon/demo-files/demo.css +161 -161
- package/icomoon/demo-files/demo.js +30 -30
- package/icomoon/demo.html +2945 -2945
- package/icomoon/fonts/Topvisor-2.svg +232 -232
- package/icomoon/style.css +647 -647
- package/light.css +1 -136
- package/package.json +19 -19
- package/popup/popup.amd.js +2 -197
- package/popup/popup.amd.js.map +1 -1
- package/popup/popup.js +104 -157
- package/popup/popup.js.map +1 -1
- package/popup/worker.amd.js +1 -233
- package/popup/worker.amd.js.map +1 -1
- package/popup/worker.js +60 -142
- package/popup/worker.js.map +1 -1
- package/popup.css +1 -19
- package/tabs/tabs.amd.js +2 -122
- package/tabs/tabs.amd.js.map +1 -1
- package/tabs/tabs.js +63 -86
- package/tabs/tabs.js.map +1 -1
- package/tabs.css +1 -60
- package/utils/device.amd.js +1 -41
- package/utils/device.amd.js.map +1 -1
- package/utils/device.js +6 -13
- package/utils/device.js.map +1 -1
- package/utils/dom.amd.js +1 -94
- package/utils/dom.amd.js.map +1 -1
- package/utils/dom.js +47 -77
- package/utils/dom.js.map +1 -1
- package/.chunks/core-0b2c7817.es.js +0 -152
- package/.chunks/core-0b2c7817.es.js.map +0 -1
- package/.chunks/core-51f7b679.amd.js +0 -151
- package/.chunks/core-51f7b679.amd.js.map +0 -1
- package/.chunks/forms-245e3bc0.es.js +0 -565
- package/.chunks/forms-245e3bc0.es.js.map +0 -1
- package/.chunks/forms-f7b7b259.amd.js +0 -568
- package/.chunks/forms-f7b7b259.amd.js.map +0 -1
- package/.chunks/popup-8f650530.amd.js +0 -728
- package/.chunks/popup-8f650530.amd.js.map +0 -1
- package/.chunks/popup-d240ed19.es.js +0 -731
- package/.chunks/popup-d240ed19.es.js.map +0 -1
package/dark.css
CHANGED
|
@@ -1,136 +1 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
/* Main */
|
|
3
|
-
--color-primary: var(--color-blue-450);
|
|
4
|
-
--color-primary-light: var(--color-blue-800);
|
|
5
|
-
--color-primary-light-opacity: rgba(1, 40, 100, 0.75);
|
|
6
|
-
--color-primary-2: var(--color-blue-500);
|
|
7
|
-
--color-primary-2-light: var(--color-blue-750);
|
|
8
|
-
--color-primary-2-light-opacity: rgba(0, 59, 146, 0.64);
|
|
9
|
-
|
|
10
|
-
--color-secondary-opacity: rgba(193, 203, 215, 0.16);
|
|
11
|
-
--color-secondary-2-opacity: rgba(193, 203, 215, 0.32);
|
|
12
|
-
--color-secondary-3-opacity: rgba(193, 203, 215, 0.38);
|
|
13
|
-
|
|
14
|
-
--color-positive: var(--color-green-450);
|
|
15
|
-
--color-positive-opacity: rgba(0, 102, 44, 0.75);
|
|
16
|
-
--color-positive-light: var(--color-green-800);
|
|
17
|
-
--color-positive-light-opacity: rgba(0, 89, 38, 0.47);
|
|
18
|
-
--color-positive-2: var(--color-green-500);
|
|
19
|
-
--color-positive-2-light: var(--color-green-750);
|
|
20
|
-
--color-positive-2-light-opacity: rgba(0, 102, 44, 0.75);
|
|
21
|
-
|
|
22
|
-
--color-warning: var(--color-orange-450);
|
|
23
|
-
--color-warning-opacity: rgba(255, 170, 51, 0.3);
|
|
24
|
-
--color-warning-light: var(--color-orange-800);
|
|
25
|
-
--color-warning-light-opacity: rgba(109, 64, 1, 0.61);
|
|
26
|
-
--color-warning-2: var(--color-orange-500);
|
|
27
|
-
--color-warning-2-light: var(--color-orange-750);
|
|
28
|
-
--color-warning-2-light-opacity: rgba(161, 97, 0, 0.58);
|
|
29
|
-
|
|
30
|
-
--color-negative: var(--color-red-450);
|
|
31
|
-
--color-negative-opacity: rgba(234, 65, 50, 0.3);
|
|
32
|
-
--color-negative-light: var(--color-red-800);
|
|
33
|
-
--color-negative-light-opacity: rgba(117, 10, 0, 0.50);
|
|
34
|
-
--color-negative-2: var(--color-red-500);
|
|
35
|
-
--color-negative-2-light: var(--color-red-750);
|
|
36
|
-
--color-negative-2-light-opacity: rgba(136, 23, 0, 0.66);
|
|
37
|
-
|
|
38
|
-
/* Text */
|
|
39
|
-
--color-text-1: var(--color-theme-975);
|
|
40
|
-
--color-text-2: var(--color-theme-750);
|
|
41
|
-
--color-text-3: var(--color-theme-550);
|
|
42
|
-
--color-text-4: var(--color-theme-450);
|
|
43
|
-
--color-text: var(--color-text-1);
|
|
44
|
-
|
|
45
|
-
--color-text-secondary: var(--color-gray-750);
|
|
46
|
-
--color-text-secondary-2: var(--color-gray-650);
|
|
47
|
-
|
|
48
|
-
--color-text-link: var(--color-blue-500);
|
|
49
|
-
--color-text-link-hover: var(--color-blue-450);
|
|
50
|
-
|
|
51
|
-
--color-overlay: rgba(0, 0, 0, 0.3);
|
|
52
|
-
|
|
53
|
-
--color-placeholder: var(--color-gray-350);
|
|
54
|
-
--color-placeholder-active: var(--color-gray-450);
|
|
55
|
-
|
|
56
|
-
/* Background colors */
|
|
57
|
-
--color-bg-1: rgba(21, 23, 25, 1);
|
|
58
|
-
--color-bg-2: rgba(26, 28, 31, 1);
|
|
59
|
-
--color-bg-3: rgba(38, 41, 46, 1);
|
|
60
|
-
|
|
61
|
-
/* Line colors */
|
|
62
|
-
--color-line-1-opacity: rgba(193, 203, 215, 0.1);
|
|
63
|
-
--color-line-2-opacity: rgba(68, 74, 87, 0.67);
|
|
64
|
-
--color-line-3-opacity: rgba(104, 110, 126, 0.67);
|
|
65
|
-
|
|
66
|
-
/* Scroll */
|
|
67
|
-
--scroll-thumb-color: var(--color-gray-750);
|
|
68
|
-
--scroll-thumb-color-hover: var(--color-gray-700);
|
|
69
|
-
--scroll-thumb-color-active: var(--color-gray-650);
|
|
70
|
-
|
|
71
|
-
/* Page */
|
|
72
|
-
--body-background-color: var(--content-background-color);
|
|
73
|
-
--content-background-color: var(--color-bg-3);
|
|
74
|
-
|
|
75
|
-
/* Theme */
|
|
76
|
-
--color-theme-0: var(--color-bg-3);
|
|
77
|
-
--color-theme-25: rgba(40, 43, 48, 1);
|
|
78
|
-
--color-theme-50: rgba(41, 45, 51, 1);
|
|
79
|
-
--color-theme-75: rgba(44, 49, 56, 1);
|
|
80
|
-
--color-theme-100: rgba(48, 52, 59, 1);
|
|
81
|
-
--color-theme-125: rgba(52, 56, 64, 1);
|
|
82
|
-
--color-theme-150: rgba(54, 59, 69, 1);
|
|
83
|
-
--color-theme-200: rgba(58, 63, 74, 1);
|
|
84
|
-
--color-theme-250: rgba(61, 66, 77, 1);
|
|
85
|
-
--color-theme-300: rgba(64, 70, 82, 1);
|
|
86
|
-
--color-theme-350: rgba(68, 74, 87, 1);
|
|
87
|
-
--color-theme-400: rgba(75, 81, 94, 1);
|
|
88
|
-
--color-theme-450: rgba(82, 87, 99, 1);
|
|
89
|
-
--color-theme-500: rgba(90, 95, 107, 1);
|
|
90
|
-
--color-theme-525: rgba(98, 103, 115, 1);
|
|
91
|
-
--color-theme-550: rgba(108, 112, 122, 1);
|
|
92
|
-
--color-theme-600: rgba(116, 120, 130, 1);
|
|
93
|
-
--color-theme-650: rgba(128, 131, 140, 1);
|
|
94
|
-
--color-theme-700: rgba(142, 145, 153, 1);
|
|
95
|
-
--color-theme-750: rgba(157, 160, 166, 1);
|
|
96
|
-
--color-theme-800: rgba(174, 177, 184, 1);
|
|
97
|
-
--color-theme-850: rgba(193, 196, 201, 1);
|
|
98
|
-
--color-theme-875: rgba(211, 214, 219, 1);
|
|
99
|
-
--color-theme-900: rgba(235, 237, 240, 1);
|
|
100
|
-
--color-theme-925: rgba(240, 242, 245, 1);
|
|
101
|
-
--color-theme-950: rgba(245, 246, 247, 1);
|
|
102
|
-
--color-theme-975: rgba(250, 251, 252, 1);
|
|
103
|
-
--color-theme-1000: rgba(255, 255, 255, 1);
|
|
104
|
-
|
|
105
|
-
/* top-shadow */
|
|
106
|
-
--top-shadow-s:
|
|
107
|
-
0px 0px 3px rgba(0, 0, 0, 0.11),
|
|
108
|
-
0px 5px 25px rgba(0, 0, 0, 0.17);
|
|
109
|
-
--top-shadow:
|
|
110
|
-
0px 0px 4px rgba(0, 0, 0, 0.14),
|
|
111
|
-
0px 4px 32px rgba(0, 0, 0, 0.2);
|
|
112
|
-
--top-shadow-b:
|
|
113
|
-
0px 0px 4px rgba(0, 0, 0, 0.15),
|
|
114
|
-
0px 18px 32px rgba(0, 0, 0, 0.34);
|
|
115
|
-
|
|
116
|
-
--top-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
|
|
117
|
-
--top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.07);
|
|
118
|
-
--top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.14);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
/* forms */
|
|
122
|
-
:root {
|
|
123
|
-
/* for text */
|
|
124
|
-
--top-forms-color: var(--color-text-1);
|
|
125
|
-
--top-forms-color-disabled: var(--color-text-3);
|
|
126
|
-
/* for border */
|
|
127
|
-
--top-forms-border-color: var(--color-line-2-opacity);
|
|
128
|
-
--top-forms-border-color-hover: var(--color-primary);
|
|
129
|
-
--top-forms-border-color-disabled: var(--color-line-1-opacity);
|
|
130
|
-
/* for placeholder */
|
|
131
|
-
--top-forms-placeholder-color: var(--color-text-3);
|
|
132
|
-
--top-forms-placeholder-color-disabled: var(--color-text-4);
|
|
133
|
-
/* for background */
|
|
134
|
-
--top-forms-background-color: var(--color-bg-3);
|
|
135
|
-
--top-forms-background-color-hover: var(--color-bg-3);
|
|
136
|
-
}
|
|
1
|
+
:root{--color-primary: var(--color-blue-450);--color-primary-light: var(--color-blue-800);--color-primary-light-opacity: rgba(1, 40, 100, .75);--color-primary-2: var(--color-blue-500);--color-primary-2-light: var(--color-blue-750);--color-primary-2-light-opacity: rgba(0, 59, 146, .64);--color-secondary-opacity: rgba(193, 203, 215, .16);--color-secondary-2-opacity: rgba(193, 203, 215, .32);--color-secondary-3-opacity: rgba(193, 203, 215, .38);--color-positive: var(--color-green-450);--color-positive-opacity: rgba(0, 102, 44, .75);--color-positive-light: var(--color-green-800);--color-positive-light-opacity: rgba(0, 89, 38, .47);--color-positive-2: var(--color-green-500);--color-positive-2-light: var(--color-green-750);--color-positive-2-light-opacity: rgba(0, 102, 44, .75);--color-warning: var(--color-orange-450);--color-warning-opacity: rgba(255, 170, 51, .3);--color-warning-light: var(--color-orange-800);--color-warning-light-opacity: rgba(109, 64, 1, .61);--color-warning-2: var(--color-orange-500);--color-warning-2-light: var(--color-orange-750);--color-warning-2-light-opacity: rgba(161, 97, 0, .58);--color-negative: var(--color-red-450);--color-negative-opacity: rgba(234, 65, 50, .3);--color-negative-light: var(--color-red-800);--color-negative-light-opacity: rgba(117, 10, 0, .5);--color-negative-2: var(--color-red-500);--color-negative-2-light: var(--color-red-750);--color-negative-2-light-opacity: rgba(136, 23, 0, .66);--color-text-1: var(--color-theme-975);--color-text-2: var(--color-theme-750);--color-text-3: var(--color-theme-550);--color-text-4: var(--color-theme-450);--color-text: var(--color-text-1);--color-text-secondary: var(--color-gray-750);--color-text-secondary-2: var(--color-gray-650);--color-text-link: var(--color-blue-500);--color-text-link-hover: var(--color-blue-450);--color-overlay: rgba(0, 0, 0, .3);--color-placeholder: var(--color-gray-350);--color-placeholder-active: var(--color-gray-450);--color-bg-1: rgba(21, 23, 25, 1);--color-bg-2: rgba(26, 28, 31, 1);--color-bg-3: rgba(38, 41, 46, 1);--color-line-1-opacity: rgba(193, 203, 215, .1);--color-line-2-opacity: rgba(68, 74, 87, .67);--color-line-3-opacity: rgba(104, 110, 126, .67);--scroll-thumb-color: var(--color-gray-750);--scroll-thumb-color-hover: var(--color-gray-700);--scroll-thumb-color-active: var(--color-gray-650);--body-background-color: var(--content-background-color);--content-background-color: var(--color-bg-3);--color-theme-0: var(--color-bg-3);--color-theme-25: rgba(40, 43, 48, 1);--color-theme-50: rgba(41, 45, 51, 1);--color-theme-75: rgba(44, 49, 56, 1);--color-theme-100: rgba(48, 52, 59, 1);--color-theme-125: rgba(52, 56, 64, 1);--color-theme-150: rgba(54, 59, 69, 1);--color-theme-200: rgba(58, 63, 74, 1);--color-theme-250: rgba(61, 66, 77, 1);--color-theme-300: rgba(64, 70, 82, 1);--color-theme-350: rgba(68, 74, 87, 1);--color-theme-400: rgba(75, 81, 94, 1);--color-theme-450: rgba(82, 87, 99, 1);--color-theme-500: rgba(90, 95, 107, 1);--color-theme-525: rgba(98, 103, 115, 1);--color-theme-550: rgba(108, 112, 122, 1);--color-theme-600: rgba(116, 120, 130, 1);--color-theme-650: rgba(128, 131, 140, 1);--color-theme-700: rgba(142, 145, 153, 1);--color-theme-750: rgba(157, 160, 166, 1);--color-theme-800: rgba(174, 177, 184, 1);--color-theme-850: rgba(193, 196, 201, 1);--color-theme-875: rgba(211, 214, 219, 1);--color-theme-900: rgba(235, 237, 240, 1);--color-theme-925: rgba(240, 242, 245, 1);--color-theme-950: rgba(245, 246, 247, 1);--color-theme-975: rgba(250, 251, 252, 1);--color-theme-1000: rgba(255, 255, 255, 1);--top-shadow-s: 0px 0px 3px rgba(0, 0, 0, .11), 0px 5px 25px rgba(0, 0, 0, .17);--top-shadow: 0px 0px 4px rgba(0, 0, 0, .14), 0px 4px 32px rgba(0, 0, 0, .2);--top-shadow-b: 0px 0px 4px rgba(0, 0, 0, .15), 0px 18px 32px rgba(0, 0, 0, .34);--top-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, .03);--top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, .07);--top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, .14)}:root{--top-forms-color: var(--color-text-1);--top-forms-color-disabled: var(--color-text-3);--top-forms-border-color: var(--color-line-2-opacity);--top-forms-border-color-hover: var(--color-primary);--top-forms-border-color-disabled: var(--color-line-1-opacity);--top-forms-placeholder-color: var(--color-text-3);--top-forms-placeholder-color-disabled: var(--color-text-4);--top-forms-background-color: var(--color-bg-3);--top-forms-background-color-hover: var(--color-bg-3)}
|
package/editArea/editArea.amd.js
CHANGED
|
@@ -1,126 +1,3 @@
|
|
|
1
|
-
define(["exports",
|
|
2
|
-
|
|
3
|
-
var __vite_style__ = document.createElement("style");
|
|
4
|
-
__vite_style__.textContent = "\n.top-editArea {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.top-editArea_title {\n font-size: 12px;\n}\n.top-editArea_form {\n background: var(--top-forms-background-color);\n outline-color: var(--color-theme-75);\n outline-offset: 0;\n display: flex;\n flex-direction: column;\n}\n.top-editArea_form:hover {\n background: var(--top-forms-background-color-hover);\n}\n\n/* textarea в EditArea */\n.top-editArea_element.top-textarea {\n width: 100%;\n}\n.top-editArea_element.top-textarea_textarea {\n border: none;\n outline: none;\n animation: none;\n}\n\n/* footer */\n.top-editArea_footer {\n padding: var(--top-forms-padding);\n display: flex;\n justify-content: flex-end;\n gap: var(--top-forms-padding);\n}\n\n/* attachedToKeyboard */\n.top-editArea-attachedToKeyboard {\n background: var(--top-forms-background-color);\n margin-bottom: env(keyboard-inset-height, 0);\n position: fixed;\n bottom: 0;\n right: 0;\n left: 0;\n z-index: 2;\n gap: 0;\n}\n.top-editArea-attachedToKeyboard .top-editArea_form {\n border-radius: 0;\n border: none;\n border-top: 1px solid var(--top-forms-border-color);\n}\n.top-editArea-attachedToKeyboard .top-editArea_title {\n border-top: 1px solid var(--color-line-2-opacity);\n padding: var(--top-forms-padding);\n}\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\n border-radius: 100%;\n}\n";
|
|
5
|
-
document.head.appendChild(__vite_style__);
|
|
6
|
-
const _hoisted_1 = {
|
|
7
|
-
key: 0,
|
|
8
|
-
class: "top-editArea_title"
|
|
9
|
-
};
|
|
10
|
-
const _hoisted_2 = { class: "top-editArea_footer" };
|
|
11
|
-
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
12
|
-
__name: "editArea",
|
|
13
|
-
props: {
|
|
14
|
-
modelValue: {},
|
|
15
|
-
title: {},
|
|
16
|
-
cancelText: { default: "Отмена" },
|
|
17
|
-
submitText: { default: "Отправить" },
|
|
18
|
-
attachToKeyboard: { type: Boolean },
|
|
19
|
-
name: {},
|
|
20
|
-
placeholder: {},
|
|
21
|
-
rows: {},
|
|
22
|
-
minHeight: {},
|
|
23
|
-
expandable: { type: Boolean, default: true },
|
|
24
|
-
disabled: { type: Boolean },
|
|
25
|
-
readonly: { type: Boolean },
|
|
26
|
-
isError: { type: Boolean },
|
|
27
|
-
hint: {}
|
|
28
|
-
},
|
|
29
|
-
emits: ["update:modelValue", "cancel"],
|
|
30
|
-
setup(__props, { emit }) {
|
|
31
|
-
const props = __props;
|
|
32
|
-
const state = vue.ref("");
|
|
33
|
-
const localValue = vue.ref(props.modelValue);
|
|
34
|
-
vue.watch(vue.toRef(props, "modelValue"), () => {
|
|
35
|
-
localValue.value = props.modelValue;
|
|
36
|
-
});
|
|
37
|
-
const isChanged = vue.computed(() => localValue.value !== props.modelValue);
|
|
38
|
-
const submit = (value) => {
|
|
39
|
-
emit("update:modelValue", value);
|
|
40
|
-
};
|
|
41
|
-
const cancel = () => {
|
|
42
|
-
emit("cancel");
|
|
43
|
-
localValue.value = props.modelValue;
|
|
44
|
-
};
|
|
45
|
-
return (_ctx, _cache) => {
|
|
46
|
-
return vue.openBlock(), vue.createElementBlock("div", {
|
|
47
|
-
class: vue.normalizeClass({
|
|
48
|
-
"top-editArea": true,
|
|
49
|
-
"top-editArea-attachedToKeyboard": _ctx.attachToKeyboard
|
|
50
|
-
})
|
|
51
|
-
}, [
|
|
52
|
-
_ctx.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true),
|
|
53
|
-
vue.createElementVNode("div", {
|
|
54
|
-
class: vue.normalizeClass({
|
|
55
|
-
"top-editArea_form": true,
|
|
56
|
-
"top-error": _ctx.isError,
|
|
57
|
-
"top-focus": state.value == "focus"
|
|
58
|
-
})
|
|
59
|
-
}, [
|
|
60
|
-
vue.createVNode(forms.Textarea, {
|
|
61
|
-
modelValue: localValue.value,
|
|
62
|
-
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localValue.value = $event),
|
|
63
|
-
name: _ctx.name,
|
|
64
|
-
placeholder: _ctx.placeholder,
|
|
65
|
-
rows: _ctx.rows,
|
|
66
|
-
minHeight: _ctx.minHeight,
|
|
67
|
-
expandable: _ctx.expandable,
|
|
68
|
-
disabled: _ctx.disabled,
|
|
69
|
-
readonly: _ctx.readonly,
|
|
70
|
-
isError: _ctx.isError,
|
|
71
|
-
hint: _ctx.hint,
|
|
72
|
-
class: "top-editArea_element",
|
|
73
|
-
onFocus: _cache[1] || (_cache[1] = ($event) => state.value = "focus"),
|
|
74
|
-
onBlur: _cache[2] || (_cache[2] = ($event) => state.value = ""),
|
|
75
|
-
onKeyup: [
|
|
76
|
-
vue.withKeys(cancel, ["esc"]),
|
|
77
|
-
_cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers(($event) => submit(localValue.value), ["ctrl"]), ["enter"]))
|
|
78
|
-
]
|
|
79
|
-
}, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint", "onKeyup"]),
|
|
80
|
-
vue.createElementVNode("div", _hoisted_2, [
|
|
81
|
-
isChanged.value && (!_ctx.attachToKeyboard || _ctx.modelValue) ? (vue.openBlock(), vue.createBlock(forms.Button, {
|
|
82
|
-
key: 0,
|
|
83
|
-
class: "top-editArea_button",
|
|
84
|
-
color: vue.unref(forms.COLOR).Theme,
|
|
85
|
-
icon: _ctx.attachToKeyboard ? "" : "",
|
|
86
|
-
onClick: cancel
|
|
87
|
-
}, {
|
|
88
|
-
default: vue.withCtx(() => [
|
|
89
|
-
vue.createTextVNode(vue.toDisplayString(_ctx.attachToKeyboard ? "" : _ctx.cancelText), 1)
|
|
90
|
-
]),
|
|
91
|
-
_: 1
|
|
92
|
-
}, 8, ["color", "icon"])) : vue.createCommentVNode("", true),
|
|
93
|
-
vue.createVNode(forms.Button, {
|
|
94
|
-
class: "top-editArea_button",
|
|
95
|
-
icon: _ctx.attachToKeyboard ? "" : "",
|
|
96
|
-
onClick: _cache[4] || (_cache[4] = ($event) => submit(localValue.value))
|
|
97
|
-
}, {
|
|
98
|
-
default: vue.withCtx(() => [
|
|
99
|
-
vue.createTextVNode(vue.toDisplayString(_ctx.attachToKeyboard ? "" : _ctx.submitText), 1)
|
|
100
|
-
]),
|
|
101
|
-
_: 1
|
|
102
|
-
}, 8, ["icon"])
|
|
103
|
-
])
|
|
104
|
-
], 2)
|
|
105
|
-
], 2);
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
});
|
|
109
|
-
const style0 = {
|
|
110
|
-
"top-editArea": "top-editArea",
|
|
111
|
-
"top-editArea_title": "top-editArea_title",
|
|
112
|
-
"top-editArea_form": "top-editArea_form",
|
|
113
|
-
"top-editArea_element": "top-editArea_element",
|
|
114
|
-
"top-textarea": "top-textarea",
|
|
115
|
-
"top-textarea_textarea": "top-textarea_textarea",
|
|
116
|
-
"top-editArea_footer": "top-editArea_footer",
|
|
117
|
-
"top-editArea-attachedToKeyboard": "top-editArea-attachedToKeyboard"
|
|
118
|
-
};
|
|
119
|
-
const cssModules = {
|
|
120
|
-
"$style": style0
|
|
121
|
-
};
|
|
122
|
-
const editArea = /* @__PURE__ */ forms._export_sfc(_sfc_main, [["__cssModules", cssModules]]);
|
|
123
|
-
exports.EditArea = editArea;
|
|
124
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
125
|
-
});
|
|
1
|
+
define(["exports","vue","../.chunks/forms-1dc7c6f3.amd"],function(i,e,l){"use strict"; if(typeof vue === "undefined") var vue = window.Vue;var p=document.createElement("style");p.textContent=`.top-editArea{display:flex;flex-direction:column;gap:6px}.top-editArea_title{font-size:12px}.top-editArea_form{background:var(--top-forms-background-color);outline-color:var(--color-theme-75);outline-offset:0;display:flex;flex-direction:column}.top-editArea_form:hover{background:var(--top-forms-background-color-hover)}.top-textarea{width:100%}.top-editArea_element.top-textarea_textarea{border:none;outline:none;animation:none}.top-editArea_footer{padding:var(--top-forms-padding);display:flex;justify-content:flex-end;gap:var(--top-forms-padding)}.top-editArea-attachedToKeyboard{background:var(--top-forms-background-color);margin-bottom:env(keyboard-inset-height,0);position:fixed;bottom:0;right:0;left:0;z-index:2;gap:0}.top-editArea-attachedToKeyboard .top-editArea_form{border-radius:0;border:none;border-top:1px solid var(--top-forms-border-color)}.top-editArea-attachedToKeyboard .top-editArea_title{border-top:1px solid var(--color-line-2-opacity);padding:var(--top-forms-padding)}.top-editArea-attachedToKeyboard .top-editArea_footer>[data-top-icon]{border-radius:100%}
|
|
2
|
+
`,document.head.appendChild(p);const u={key:0,class:"top-editArea_title"},f={class:"top-editArea_footer"},b=e.defineComponent({__name:"editArea",props:{modelValue:{},title:{},cancelText:{default:"Отмена"},submitText:{default:"Отправить"},attachToKeyboard:{type:Boolean},name:{},placeholder:{},rows:{},minHeight:{},expandable:{type:Boolean,default:!0},disabled:{type:Boolean},readonly:{type:Boolean},isError:{type:Boolean},hint:{}},emits:["update:modelValue","cancel"],setup(A,{emit:s}){const r=A,n=e.ref(""),a=e.ref(r.modelValue);e.watch(e.toRef(r,"modelValue"),()=>{a.value=r.modelValue});const g=e.computed(()=>a.value!==r.modelValue),c=t=>{s("update:modelValue",t)},m=()=>{s("cancel"),a.value=r.modelValue};return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-editArea":!0,"top-editArea-attachedToKeyboard":t.attachToKeyboard})},[t.title?(e.openBlock(),e.createElementBlock("div",u,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass({"top-editArea_form":!0,"top-error":t.isError,"top-focus":n.value=="focus"})},[e.createVNode(l.Textarea,{modelValue:a.value,"onUpdate:modelValue":o[0]||(o[0]=d=>a.value=d),name:t.name,placeholder:t.placeholder,rows:t.rows,minHeight:t.minHeight,expandable:t.expandable,disabled:t.disabled,readonly:t.readonly,isError:t.isError,hint:t.hint,class:"top-editArea_element",onFocus:o[1]||(o[1]=d=>n.value="focus"),onBlur:o[2]||(o[2]=d=>n.value=""),onKeyup:[e.withKeys(m,["esc"]),o[3]||(o[3]=e.withKeys(e.withModifiers(d=>c(a.value),["ctrl"]),["enter"]))]},null,8,["modelValue","name","placeholder","rows","minHeight","expandable","disabled","readonly","isError","hint","onKeyup"]),e.createElementVNode("div",f,[g.value&&(!t.attachToKeyboard||t.modelValue)?(e.openBlock(),e.createBlock(l.Button,{key:0,class:"top-editArea_button",color:"theme",icon:t.attachToKeyboard?"":"",onClick:m},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.attachToKeyboard?"":t.cancelText),1)]),_:1},8,["icon"])):e.createCommentVNode("",!0),e.createVNode(l.Button,{class:"top-editArea_button",icon:t.attachToKeyboard?"":"",onClick:o[4]||(o[4]=d=>c(a.value))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.attachToKeyboard?"":t.submitText),1)]),_:1},8,["icon"])])],2)],2))}}),y={$style:{"top-editArea":"top-editArea","top-editArea_title":"top-editArea_title","top-editArea_form":"top-editArea_form","top-textarea":"top-textarea","top-editArea_element":"top-editArea_element","top-textarea_textarea":"top-textarea_textarea","top-editArea_footer":"top-editArea_footer","top-editArea-attachedToKeyboard":"top-editArea-attachedToKeyboard"}},h=l._export_sfc(b,[["__cssModules",y]]);i.EditArea=h,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
|
126
3
|
//# sourceMappingURL=editArea.amd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editArea.amd.js","sources":["../../src/components/editArea/editArea/editArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, toRef, watch, computed } from 'vue';\nimport
|
|
1
|
+
{"version":3,"file":"editArea.amd.js","sources":["../../src/components/editArea/editArea/editArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, computed } from 'vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\nimport type { Props, Emits } from './editArea';\r\nimport Textarea from '@/components/forms/textarea/textarea.vue';\r\n\r\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcancelText: 'Отмена',\r\n\tsubmitText: 'Отправить',\r\n\texpandable: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst state = ref('');\r\n\r\n/**\r\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\r\n */\r\nconst localValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props, 'modelValue'), () => {\r\n\tlocalValue.value = props.modelValue;\r\n});\r\n\r\nconst isChanged = computed(() => localValue.value !== props.modelValue);\r\n\r\nconst submit = (value: string) => {\r\n\temit('update:modelValue', value);\r\n};\r\n\r\nconst cancel = () => {\r\n\temit('cancel');\r\n\r\n\t// сброс введенного значения\r\n\tlocalValue.value = props.modelValue;\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t'top-editArea': true,\r\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\r\n\t\t}\"\r\n\t>\r\n\t\t<div\r\n\t\t\tv-if=\"title\"\r\n\t\t\tclass=\"top-editArea_title\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\r\n\t\t<div\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-editArea_form': true,\r\n\t\t\t\t'top-error': isError,\r\n\t\t\t\t'top-focus': state == 'focus',\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<Textarea\r\n\t\t\t\tv-model=\"localValue\"\r\n\t\t\t\t:name=\"name\"\r\n\t\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t\t:rows=\"rows\"\r\n\t\t\t\t:minHeight=\"minHeight\"\r\n\t\t\t\t:expandable=\"expandable\"\r\n\t\t\t\t:disabled=\"disabled\"\r\n\t\t\t\t:readonly=\"readonly\"\r\n\t\t\t\t:isError=\"isError\"\r\n\t\t\t\t:hint=\"hint\"\r\n\t\t\t\tclass=\"top-editArea_element\"\r\n\t\t\t\t@focus=\"state = 'focus'\"\r\n\t\t\t\t@blur=\"state = ''\"\r\n\t\t\t\t@keyup.esc=\"cancel\"\r\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\r\n\t\t\t/>\r\n\r\n\t\t\t<div class=\"top-editArea_footer\">\r\n\t\t\t\t<Button\r\n\t\t\t\t\tv-if=\"isChanged && (!attachToKeyboard || modelValue)\"\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\tcolor=\"theme\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"cancel\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\r\n\t\t\t\t</Button>\r\n\r\n\t\t\t\t<Button\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"submit(localValue)\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\r\n\t\t\t\t</Button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editArea {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 6px;\r\n}\r\n\r\n.top-editArea_title {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.top-editArea_form {\r\n\tbackground: var(--top-forms-background-color);\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n\r\n.top-editArea_form:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n/* textarea в EditArea */\r\n.top-textarea {\r\n\twidth: 100%;\r\n}\r\n\r\n.top-editArea_element.top-textarea_textarea {\r\n\tborder: none;\r\n\toutline: none;\r\n\tanimation: none;\r\n}\r\n\r\n/* footer */\r\n.top-editArea_footer {\r\n\tpadding: var(--top-forms-padding);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tgap: var(--top-forms-padding);\r\n}\r\n\r\n/* attachedToKeyboard */\r\n.top-editArea-attachedToKeyboard {\r\n\tbackground: var(--top-forms-background-color);\r\n\tmargin-bottom: env(keyboard-inset-height, 0);\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tleft: 0;\r\n\tz-index: 2;\r\n\tgap: 0;\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_form {\r\n\tborder-radius: 0;\r\n\tborder: none;\r\n\tborder-top: 1px solid var(--top-forms-border-color);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_title {\r\n\tborder-top: 1px solid var(--color-line-2-opacity);\r\n\tpadding: var(--top-forms-padding);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\r\n\tborder-radius: 100%;\r\n}\r\n</style>"],"names":["state","ref","localValue","props","watch","toRef","isChanged","computed","submit","value","emit","cancel"],"mappings":";gfAgBMA,EAAQC,MAAI,EAAE,EAKdC,EAAaD,EAAAA,IAAIE,EAAM,UAAU,EAEvCC,EAAAA,MAAMC,EAAM,MAAAF,EAAO,YAAY,EAAG,IAAM,CACvCD,EAAW,MAAQC,EAAM,UAAA,CACzB,EAED,MAAMG,EAAYC,EAAAA,SAAS,IAAML,EAAW,QAAUC,EAAM,UAAU,EAEhEK,EAAUC,GAAkB,CACjCC,EAAK,oBAAqBD,CAAK,CAAA,EAG1BE,EAAS,IAAM,CACpBD,EAAK,QAAQ,EAGbR,EAAW,MAAQC,EAAM,UAAA"}
|
package/editArea/editArea.js
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
import { defineComponent, ref, watch, toRef, computed, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, createVNode, withKeys, withModifiers, createBlock
|
|
2
|
-
import { T as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as B, ref as u, watch as w, toRef as E, computed as k, openBlock as d, createElementBlock as m, normalizeClass as c, toDisplayString as n, createCommentVNode as y, createElementVNode as b, createVNode as A, withKeys as f, withModifiers as C, createBlock as g, withCtx as h, createTextVNode as v } from "vue";
|
|
2
|
+
import { T as $, B as T, _ as H } from "../.chunks/forms-3575c189.es.js";
|
|
3
|
+
const N = {
|
|
4
4
|
key: 0,
|
|
5
5
|
class: "top-editArea_title"
|
|
6
|
-
}
|
|
7
|
-
const _hoisted_2 = { class: "top-editArea_footer" };
|
|
8
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
6
|
+
}, M = { class: "top-editArea_footer" }, _ = /* @__PURE__ */ B({
|
|
9
7
|
__name: "editArea",
|
|
10
8
|
props: {
|
|
11
9
|
modelValue: {},
|
|
@@ -17,107 +15,97 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
17
15
|
placeholder: {},
|
|
18
16
|
rows: {},
|
|
19
17
|
minHeight: {},
|
|
20
|
-
expandable: { type: Boolean, default:
|
|
18
|
+
expandable: { type: Boolean, default: !0 },
|
|
21
19
|
disabled: { type: Boolean },
|
|
22
20
|
readonly: { type: Boolean },
|
|
23
21
|
isError: { type: Boolean },
|
|
24
22
|
hint: {}
|
|
25
23
|
},
|
|
26
24
|
emits: ["update:modelValue", "cancel"],
|
|
27
|
-
setup(
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
watch(toRef(props, "modelValue"), () => {
|
|
32
|
-
localValue.value = props.modelValue;
|
|
25
|
+
setup(V, { emit: i }) {
|
|
26
|
+
const a = V, r = u(""), o = u(a.modelValue);
|
|
27
|
+
w(E(a, "modelValue"), () => {
|
|
28
|
+
o.value = a.modelValue;
|
|
33
29
|
});
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const cancel = () => {
|
|
39
|
-
emit("cancel");
|
|
40
|
-
localValue.value = props.modelValue;
|
|
30
|
+
const K = k(() => o.value !== a.modelValue), s = (e) => {
|
|
31
|
+
i("update:modelValue", e);
|
|
32
|
+
}, p = () => {
|
|
33
|
+
i("cancel"), o.value = a.modelValue;
|
|
41
34
|
};
|
|
42
|
-
return (
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
35
|
+
return (e, t) => (d(), m("div", {
|
|
36
|
+
class: c({
|
|
37
|
+
"top-editArea": !0,
|
|
38
|
+
"top-editArea-attachedToKeyboard": e.attachToKeyboard
|
|
39
|
+
})
|
|
40
|
+
}, [
|
|
41
|
+
e.title ? (d(), m("div", N, n(e.title), 1)) : y("", !0),
|
|
42
|
+
b("div", {
|
|
43
|
+
class: c({
|
|
44
|
+
"top-editArea_form": !0,
|
|
45
|
+
"top-error": e.isError,
|
|
46
|
+
"top-focus": r.value == "focus"
|
|
47
47
|
})
|
|
48
48
|
}, [
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
},
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
default: withCtx(() => [
|
|
96
|
-
createTextVNode(toDisplayString(_ctx.attachToKeyboard ? "" : _ctx.submitText), 1)
|
|
97
|
-
]),
|
|
98
|
-
_: 1
|
|
99
|
-
}, 8, ["icon"])
|
|
100
|
-
])
|
|
101
|
-
], 2)
|
|
102
|
-
], 2);
|
|
103
|
-
};
|
|
49
|
+
A($, {
|
|
50
|
+
modelValue: o.value,
|
|
51
|
+
"onUpdate:modelValue": t[0] || (t[0] = (l) => o.value = l),
|
|
52
|
+
name: e.name,
|
|
53
|
+
placeholder: e.placeholder,
|
|
54
|
+
rows: e.rows,
|
|
55
|
+
minHeight: e.minHeight,
|
|
56
|
+
expandable: e.expandable,
|
|
57
|
+
disabled: e.disabled,
|
|
58
|
+
readonly: e.readonly,
|
|
59
|
+
isError: e.isError,
|
|
60
|
+
hint: e.hint,
|
|
61
|
+
class: "top-editArea_element",
|
|
62
|
+
onFocus: t[1] || (t[1] = (l) => r.value = "focus"),
|
|
63
|
+
onBlur: t[2] || (t[2] = (l) => r.value = ""),
|
|
64
|
+
onKeyup: [
|
|
65
|
+
f(p, ["esc"]),
|
|
66
|
+
t[3] || (t[3] = f(C((l) => s(o.value), ["ctrl"]), ["enter"]))
|
|
67
|
+
]
|
|
68
|
+
}, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint", "onKeyup"]),
|
|
69
|
+
b("div", M, [
|
|
70
|
+
K.value && (!e.attachToKeyboard || e.modelValue) ? (d(), g(T, {
|
|
71
|
+
key: 0,
|
|
72
|
+
class: "top-editArea_button",
|
|
73
|
+
color: "theme",
|
|
74
|
+
icon: e.attachToKeyboard ? "" : "",
|
|
75
|
+
onClick: p
|
|
76
|
+
}, {
|
|
77
|
+
default: h(() => [
|
|
78
|
+
v(n(e.attachToKeyboard ? "" : e.cancelText), 1)
|
|
79
|
+
]),
|
|
80
|
+
_: 1
|
|
81
|
+
}, 8, ["icon"])) : y("", !0),
|
|
82
|
+
A(T, {
|
|
83
|
+
class: "top-editArea_button",
|
|
84
|
+
icon: e.attachToKeyboard ? "" : "",
|
|
85
|
+
onClick: t[4] || (t[4] = (l) => s(o.value))
|
|
86
|
+
}, {
|
|
87
|
+
default: h(() => [
|
|
88
|
+
v(n(e.attachToKeyboard ? "" : e.submitText), 1)
|
|
89
|
+
]),
|
|
90
|
+
_: 1
|
|
91
|
+
}, 8, ["icon"])
|
|
92
|
+
])
|
|
93
|
+
], 2)
|
|
94
|
+
], 2));
|
|
104
95
|
}
|
|
105
|
-
})
|
|
106
|
-
const style0 = {
|
|
96
|
+
}), z = {
|
|
107
97
|
"top-editArea": "top-editArea",
|
|
108
98
|
"top-editArea_title": "top-editArea_title",
|
|
109
99
|
"top-editArea_form": "top-editArea_form",
|
|
110
|
-
"top-editArea_element": "top-editArea_element",
|
|
111
100
|
"top-textarea": "top-textarea",
|
|
101
|
+
"top-editArea_element": "top-editArea_element",
|
|
112
102
|
"top-textarea_textarea": "top-textarea_textarea",
|
|
113
103
|
"top-editArea_footer": "top-editArea_footer",
|
|
114
104
|
"top-editArea-attachedToKeyboard": "top-editArea-attachedToKeyboard"
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
};
|
|
119
|
-
const editArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
|
|
105
|
+
}, D = {
|
|
106
|
+
$style: z
|
|
107
|
+
}, S = /* @__PURE__ */ H(_, [["__cssModules", D]]);
|
|
120
108
|
export {
|
|
121
|
-
|
|
109
|
+
S as EditArea
|
|
122
110
|
};
|
|
123
111
|
//# sourceMappingURL=editArea.js.map
|
package/editArea/editArea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editArea.js","sources":["../../src/components/editArea/editArea/editArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, toRef, watch, computed } from 'vue';\nimport
|
|
1
|
+
{"version":3,"file":"editArea.js","sources":["../../src/components/editArea/editArea/editArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, computed } from 'vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\nimport type { Props, Emits } from './editArea';\r\nimport Textarea from '@/components/forms/textarea/textarea.vue';\r\n\r\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcancelText: 'Отмена',\r\n\tsubmitText: 'Отправить',\r\n\texpandable: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst state = ref('');\r\n\r\n/**\r\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\r\n */\r\nconst localValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props, 'modelValue'), () => {\r\n\tlocalValue.value = props.modelValue;\r\n});\r\n\r\nconst isChanged = computed(() => localValue.value !== props.modelValue);\r\n\r\nconst submit = (value: string) => {\r\n\temit('update:modelValue', value);\r\n};\r\n\r\nconst cancel = () => {\r\n\temit('cancel');\r\n\r\n\t// сброс введенного значения\r\n\tlocalValue.value = props.modelValue;\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t'top-editArea': true,\r\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\r\n\t\t}\"\r\n\t>\r\n\t\t<div\r\n\t\t\tv-if=\"title\"\r\n\t\t\tclass=\"top-editArea_title\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\r\n\t\t<div\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-editArea_form': true,\r\n\t\t\t\t'top-error': isError,\r\n\t\t\t\t'top-focus': state == 'focus',\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<Textarea\r\n\t\t\t\tv-model=\"localValue\"\r\n\t\t\t\t:name=\"name\"\r\n\t\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t\t:rows=\"rows\"\r\n\t\t\t\t:minHeight=\"minHeight\"\r\n\t\t\t\t:expandable=\"expandable\"\r\n\t\t\t\t:disabled=\"disabled\"\r\n\t\t\t\t:readonly=\"readonly\"\r\n\t\t\t\t:isError=\"isError\"\r\n\t\t\t\t:hint=\"hint\"\r\n\t\t\t\tclass=\"top-editArea_element\"\r\n\t\t\t\t@focus=\"state = 'focus'\"\r\n\t\t\t\t@blur=\"state = ''\"\r\n\t\t\t\t@keyup.esc=\"cancel\"\r\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\r\n\t\t\t/>\r\n\r\n\t\t\t<div class=\"top-editArea_footer\">\r\n\t\t\t\t<Button\r\n\t\t\t\t\tv-if=\"isChanged && (!attachToKeyboard || modelValue)\"\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\tcolor=\"theme\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"cancel\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\r\n\t\t\t\t</Button>\r\n\r\n\t\t\t\t<Button\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"submit(localValue)\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\r\n\t\t\t\t</Button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editArea {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 6px;\r\n}\r\n\r\n.top-editArea_title {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.top-editArea_form {\r\n\tbackground: var(--top-forms-background-color);\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n\r\n.top-editArea_form:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n/* textarea в EditArea */\r\n.top-textarea {\r\n\twidth: 100%;\r\n}\r\n\r\n.top-editArea_element.top-textarea_textarea {\r\n\tborder: none;\r\n\toutline: none;\r\n\tanimation: none;\r\n}\r\n\r\n/* footer */\r\n.top-editArea_footer {\r\n\tpadding: var(--top-forms-padding);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tgap: var(--top-forms-padding);\r\n}\r\n\r\n/* attachedToKeyboard */\r\n.top-editArea-attachedToKeyboard {\r\n\tbackground: var(--top-forms-background-color);\r\n\tmargin-bottom: env(keyboard-inset-height, 0);\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tleft: 0;\r\n\tz-index: 2;\r\n\tgap: 0;\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_form {\r\n\tborder-radius: 0;\r\n\tborder: none;\r\n\tborder-top: 1px solid var(--top-forms-border-color);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_title {\r\n\tborder-top: 1px solid var(--color-line-2-opacity);\r\n\tpadding: var(--top-forms-padding);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\r\n\tborder-radius: 100%;\r\n}\r\n</style>"],"names":["state","ref","localValue","props","watch","toRef","isChanged","computed","submit","value","emit","cancel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;iBAgBMA,IAAQC,EAAI,EAAE,GAKdC,IAAaD,EAAIE,EAAM,UAAU;AAEvC,IAAAC,EAAMC,EAAMF,GAAO,YAAY,GAAG,MAAM;AACvC,MAAAD,EAAW,QAAQC,EAAM;AAAA,IAAA,CACzB;AAED,UAAMG,IAAYC,EAAS,MAAML,EAAW,UAAUC,EAAM,UAAU,GAEhEK,IAAS,CAACC,MAAkB;AACjC,MAAAC,EAAK,qBAAqBD,CAAK;AAAA,IAAA,GAG1BE,IAAS,MAAM;AACpB,MAAAD,EAAK,QAAQ,GAGbR,EAAW,QAAQC,EAAM;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/editArea.css
CHANGED
|
@@ -1,61 +1 @@
|
|
|
1
|
-
|
|
2
|
-
.top-editArea {
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: column;
|
|
5
|
-
gap: 6px;
|
|
6
|
-
}
|
|
7
|
-
.top-editArea_title {
|
|
8
|
-
font-size: 12px;
|
|
9
|
-
}
|
|
10
|
-
.top-editArea_form {
|
|
11
|
-
background: var(--top-forms-background-color);
|
|
12
|
-
outline-color: var(--color-theme-75);
|
|
13
|
-
outline-offset: 0;
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-direction: column;
|
|
16
|
-
}
|
|
17
|
-
.top-editArea_form:hover {
|
|
18
|
-
background: var(--top-forms-background-color-hover);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/* textarea в EditArea */
|
|
22
|
-
.top-editArea_element.top-textarea {
|
|
23
|
-
width: 100%;
|
|
24
|
-
}
|
|
25
|
-
.top-editArea_element.top-textarea_textarea {
|
|
26
|
-
border: none;
|
|
27
|
-
outline: none;
|
|
28
|
-
animation: none;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/* footer */
|
|
32
|
-
.top-editArea_footer {
|
|
33
|
-
padding: var(--top-forms-padding);
|
|
34
|
-
display: flex;
|
|
35
|
-
justify-content: flex-end;
|
|
36
|
-
gap: var(--top-forms-padding);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/* attachedToKeyboard */
|
|
40
|
-
.top-editArea-attachedToKeyboard {
|
|
41
|
-
background: var(--top-forms-background-color);
|
|
42
|
-
margin-bottom: env(keyboard-inset-height, 0);
|
|
43
|
-
position: fixed;
|
|
44
|
-
bottom: 0;
|
|
45
|
-
right: 0;
|
|
46
|
-
left: 0;
|
|
47
|
-
z-index: 2;
|
|
48
|
-
gap: 0;
|
|
49
|
-
}
|
|
50
|
-
.top-editArea-attachedToKeyboard .top-editArea_form {
|
|
51
|
-
border-radius: 0;
|
|
52
|
-
border: none;
|
|
53
|
-
border-top: 1px solid var(--top-forms-border-color);
|
|
54
|
-
}
|
|
55
|
-
.top-editArea-attachedToKeyboard .top-editArea_title {
|
|
56
|
-
border-top: 1px solid var(--color-line-2-opacity);
|
|
57
|
-
padding: var(--top-forms-padding);
|
|
58
|
-
}
|
|
59
|
-
.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {
|
|
60
|
-
border-radius: 100%;
|
|
61
|
-
}
|
|
1
|
+
.top-editArea{display:flex;flex-direction:column;gap:6px}.top-editArea_title{font-size:12px}.top-editArea_form{background:var(--top-forms-background-color);outline-color:var(--color-theme-75);outline-offset:0;display:flex;flex-direction:column}.top-editArea_form:hover{background:var(--top-forms-background-color-hover)}.top-textarea{width:100%}.top-editArea_element.top-textarea_textarea{border:none;outline:none;animation:none}.top-editArea_footer{padding:var(--top-forms-padding);display:flex;justify-content:flex-end;gap:var(--top-forms-padding)}.top-editArea-attachedToKeyboard{background:var(--top-forms-background-color);margin-bottom:env(keyboard-inset-height,0);position:fixed;bottom:0;right:0;left:0;z-index:2;gap:0}.top-editArea-attachedToKeyboard .top-editArea_form{border-radius:0;border:none;border-top:1px solid var(--top-forms-border-color)}.top-editArea-attachedToKeyboard .top-editArea_title{border-top:1px solid var(--color-line-2-opacity);padding:var(--top-forms-padding)}.top-editArea-attachedToKeyboard .top-editArea_footer>[data-top-icon]{border-radius:100%}
|
package/forms/forms.amd.js
CHANGED
|
@@ -1,13 +1,2 @@
|
|
|
1
|
-
define(["exports",
|
|
2
|
-
"use strict"; if(typeof vue === "undefined") var vue = window.Vue;
|
|
3
|
-
exports.Button = forms.Button;
|
|
4
|
-
exports.Checkbox = forms.checkbox;
|
|
5
|
-
exports.ControlLabel = forms.ControlLabel;
|
|
6
|
-
exports.Hint = forms.Hint;
|
|
7
|
-
exports.Input = forms.input;
|
|
8
|
-
exports.Radio = forms.radio;
|
|
9
|
-
exports.Switcher = forms.switcher;
|
|
10
|
-
exports.Textarea = forms.Textarea;
|
|
11
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
12
|
-
});
|
|
1
|
+
define(["exports","../.chunks/forms-1dc7c6f3.amd","vue"],function(e,n,t){"use strict"; if(typeof vue === "undefined") var vue = window.Vue;e.Button=n.Button,e.Checkbox=n.checkbox,e.ControlLabel=n.ControlLabel,e.Hint=n.Hint,e.Input=n.input,e.Radio=n.radio,e.Switcher=n.switcher,e.Textarea=n.Textarea,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
|
|
13
2
|
//# sourceMappingURL=forms.amd.js.map
|
package/forms/forms.amd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"forms.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"forms.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|