eco-vue-js 0.11.12 → 0.11.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/icons/IconList.svg.js +24 -0
- package/dist/assets/icons/IconListDecrease.svg.js +24 -0
- package/dist/assets/icons/IconListIncrease.svg.js +24 -0
- package/dist/assets/icons/{IconTableSettings.svg.js → IconListSettings.svg.js} +2 -2
- package/dist/assets/icons/IconRedo.svg.js +32 -0
- package/dist/assets/icons/IconTable.svg.js +10 -1
- package/dist/assets/icons/IconTableCollapsed.svg.js +37 -0
- package/dist/assets/icons/IconUndo.svg.js +32 -0
- package/dist/components/FieldWrapper/WFieldWrapper.vue.d.ts +1 -0
- package/dist/components/FieldWrapper/WFieldWrapper.vue.d.ts.map +1 -1
- package/dist/components/FieldWrapper/WFieldWrapper.vue.js +36 -6
- package/dist/components/FieldWrapper/use/useFieldSaved.d.ts +4 -5
- package/dist/components/FieldWrapper/use/useFieldSaved.d.ts.map +1 -1
- package/dist/components/FieldWrapper/use/useFieldSaved.js +10 -25
- package/dist/components/FormAsync/use/useFormAsync.js +3 -3
- package/dist/components/Input/WInput.vue.d.ts +5 -5
- package/dist/components/Input/WInput.vue.d.ts.map +1 -1
- package/dist/components/Input/WInput.vue.js +102 -48
- package/dist/components/Input/WInputDate.vue.d.ts +2 -8
- package/dist/components/Input/WInputDate.vue.d.ts.map +1 -1
- package/dist/components/Input/WInputSuggest.vue.d.ts +1 -4
- package/dist/components/Input/WInputSuggest.vue.d.ts.map +1 -1
- package/dist/components/Input/WInputSuggest.vue.js +2 -2
- package/dist/components/Input/WInputToolbarButton.vue.d.ts +5 -8
- package/dist/components/Input/WInputToolbarButton.vue.d.ts.map +1 -1
- package/dist/components/Input/WInputToolbarButton.vue.js +40 -38
- package/dist/components/Input/components/ContentEditable.vue.d.ts +1 -4
- package/dist/components/Input/components/ContentEditable.vue.d.ts.map +1 -1
- package/dist/components/Input/components/ContentEditable.vue2.js +54 -30
- package/dist/components/Input/components/InputToolbar.vue.d.ts +6 -0
- package/dist/components/Input/components/InputToolbar.vue.d.ts.map +1 -1
- package/dist/components/Input/components/InputToolbar.vue2.js +36 -13
- package/dist/components/Input/components/InputToolbarButton.vue.d.ts +5 -2
- package/dist/components/Input/components/InputToolbarButton.vue.d.ts.map +1 -1
- package/dist/components/Input/components/InputToolbarButton.vue.js +19 -11
- package/dist/components/Input/models/toolbarActions.d.ts +2 -0
- package/dist/components/Input/models/toolbarActions.d.ts.map +1 -1
- package/dist/components/Input/models/toolbarActions.js +67 -7
- package/dist/components/Input/models/utils.d.ts +6 -0
- package/dist/components/Input/models/utils.d.ts.map +1 -0
- package/dist/components/Input/models/utils.js +14 -0
- package/dist/components/Input/types.d.ts +12 -3
- package/dist/components/Input/types.d.ts.map +1 -1
- package/dist/components/List/components/HeaderSettings.vue.js +2 -2
- package/dist/components/List/use/useListConfig.js +2 -2
- package/dist/main.d.ts +7 -1
- package/dist/main.d.ts.map +1 -1
- package/dist/main.js +8 -2
- package/dist/utils/useCopy.d.ts +1 -0
- package/dist/utils/useCopy.d.ts.map +1 -1
- package/dist/utils/useCopy.js +20 -18
- package/package.json +1 -1
@@ -0,0 +1,24 @@
|
|
1
|
+
import { createElementBlock, openBlock, createElementVNode } from 'vue';
|
2
|
+
|
3
|
+
const _hoisted_1 = {
|
4
|
+
width: "20",
|
5
|
+
height: "20",
|
6
|
+
viewBox: "0 0 24 24",
|
7
|
+
fill: "none",
|
8
|
+
xmlns: "http://www.w3.org/2000/svg"
|
9
|
+
};
|
10
|
+
|
11
|
+
function render(_ctx, _cache) {
|
12
|
+
return (openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
|
13
|
+
createElementVNode("path", {
|
14
|
+
d: "M19.9 9.88H4.1c-1.5 0-2.1.31-2.1 1.11v2.02c0 .8.6 1.12 2.1 1.12h15.8c1.5 0 2.1-.33 2.1-1.12v-2.02c0-.8-.6-1.12-2.1-1.12m0 7.88H4.1c-1.5 0-2.1.32-2.1 1.11v2.03c0 .79.6 1.11 2.1 1.11h15.8c1.5 0 2.1-.32 2.1-1.11v-2.03c0-.79-.6-1.11-2.1-1.11M19.9 2H4.1C2.6 2 2 2.32 2 3.12v2.01c0 .8.6 1.12 2.1 1.12h15.8c1.5 0 2.1-.32 2.1-1.12v-2c0-.8-.6-1.12-2.1-1.12",
|
15
|
+
stroke: "currentcolor",
|
16
|
+
"stroke-linecap": "round",
|
17
|
+
"stroke-linejoin": "round",
|
18
|
+
"stroke-width": "1.5"
|
19
|
+
}, null, -1)
|
20
|
+
])))
|
21
|
+
}
|
22
|
+
const IconList = { render: render };
|
23
|
+
|
24
|
+
export { IconList as default, render };
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import { createElementBlock, openBlock, createElementVNode } from 'vue';
|
2
|
+
|
3
|
+
const _hoisted_1 = {
|
4
|
+
width: "20",
|
5
|
+
height: "20",
|
6
|
+
viewBox: "0 0 24 24",
|
7
|
+
fill: "none",
|
8
|
+
xmlns: "http://www.w3.org/2000/svg"
|
9
|
+
};
|
10
|
+
|
11
|
+
function render(_ctx, _cache) {
|
12
|
+
return (openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
|
13
|
+
createElementVNode("path", {
|
14
|
+
d: "M11 19.5h10m-10-7h10m-10-7h10M2 16h8",
|
15
|
+
stroke: "currentcolor",
|
16
|
+
"stroke-linecap": "round",
|
17
|
+
"stroke-linejoin": "round",
|
18
|
+
"stroke-width": "1.5"
|
19
|
+
}, null, -1)
|
20
|
+
])))
|
21
|
+
}
|
22
|
+
const IconListDecrease = { render: render };
|
23
|
+
|
24
|
+
export { IconListDecrease as default, render };
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import { createElementBlock, openBlock, createElementVNode } from 'vue';
|
2
|
+
|
3
|
+
const _hoisted_1 = {
|
4
|
+
width: "20",
|
5
|
+
height: "20",
|
6
|
+
viewBox: "0 0 24 24",
|
7
|
+
fill: "none",
|
8
|
+
xmlns: "http://www.w3.org/2000/svg"
|
9
|
+
};
|
10
|
+
|
11
|
+
function render(_ctx, _cache) {
|
12
|
+
return (openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
|
13
|
+
createElementVNode("path", {
|
14
|
+
d: "M11 19.5h10m-10-7h10m-10-7h10M2 16h8m-4 4v-8",
|
15
|
+
stroke: "currentcolor",
|
16
|
+
"stroke-linecap": "round",
|
17
|
+
"stroke-linejoin": "round",
|
18
|
+
"stroke-width": "1.5"
|
19
|
+
}, null, -1)
|
20
|
+
])))
|
21
|
+
}
|
22
|
+
const IconListIncrease = { render: render };
|
23
|
+
|
24
|
+
export { IconListIncrease as default, render };
|
@@ -35,6 +35,6 @@ function render(_ctx, _cache) {
|
|
35
35
|
}, null, -1)
|
36
36
|
])))
|
37
37
|
}
|
38
|
-
const
|
38
|
+
const IconListSettings = { render: render };
|
39
39
|
|
40
|
-
export {
|
40
|
+
export { IconListSettings as default, render };
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import { createElementBlock, openBlock, createElementVNode } from 'vue';
|
2
|
+
|
3
|
+
const _hoisted_1 = {
|
4
|
+
width: "20",
|
5
|
+
height: "20",
|
6
|
+
viewBox: "0 0 24 24",
|
7
|
+
fill: "none",
|
8
|
+
xmlns: "http://www.w3.org/2000/svg"
|
9
|
+
};
|
10
|
+
|
11
|
+
function render(_ctx, _cache) {
|
12
|
+
return (openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
|
13
|
+
createElementVNode("path", {
|
14
|
+
d: "M16.87 18.31h-8a5 5 0 0 1 0-10h11",
|
15
|
+
stroke: "currentcolor",
|
16
|
+
"stroke-linecap": "round",
|
17
|
+
"stroke-linejoin": "round",
|
18
|
+
"stroke-miterlimit": "10",
|
19
|
+
"stroke-width": "1.5"
|
20
|
+
}, null, -1),
|
21
|
+
createElementVNode("path", {
|
22
|
+
d: "m17.57 10.81 2.56-2.56-2.56-2.56",
|
23
|
+
stroke: "currentcolor",
|
24
|
+
"stroke-linecap": "round",
|
25
|
+
"stroke-linejoin": "round",
|
26
|
+
"stroke-width": "1.5"
|
27
|
+
}, null, -1)
|
28
|
+
])))
|
29
|
+
}
|
30
|
+
const IconRedo = { render: render };
|
31
|
+
|
32
|
+
export { IconRedo as default, render };
|
@@ -11,11 +11,20 @@ const _hoisted_1 = {
|
|
11
11
|
function render(_ctx, _cache) {
|
12
12
|
return (openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
|
13
13
|
createElementVNode("path", {
|
14
|
-
d: "
|
14
|
+
d: "M2 6.5h20m-20 5h20m-20 5h20M8.5 22V7m7 15V7",
|
15
15
|
stroke: "currentcolor",
|
16
16
|
"stroke-linecap": "round",
|
17
17
|
"stroke-linejoin": "round",
|
18
18
|
"stroke-width": "1.5"
|
19
|
+
}, null, -1),
|
20
|
+
createElementVNode("rect", {
|
21
|
+
width: "20",
|
22
|
+
height: "20",
|
23
|
+
rx: "3",
|
24
|
+
stroke: "currentcolor",
|
25
|
+
"stroke-width": "1.5",
|
26
|
+
x: "2",
|
27
|
+
y: "2"
|
19
28
|
}, null, -1)
|
20
29
|
])))
|
21
30
|
}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import { createElementBlock, openBlock, createElementVNode } from 'vue';
|
2
|
+
|
3
|
+
const _hoisted_1 = {
|
4
|
+
width: "20",
|
5
|
+
height: "20",
|
6
|
+
viewBox: "0 0 24 24",
|
7
|
+
fill: "none",
|
8
|
+
xmlns: "http://www.w3.org/2000/svg"
|
9
|
+
};
|
10
|
+
|
11
|
+
function render(_ctx, _cache) {
|
12
|
+
return (openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
|
13
|
+
createElementVNode("path", {
|
14
|
+
d: "M2 6.5h20m-20 5h10m-10 5h10M8.5 22V7",
|
15
|
+
stroke: "currentcolor",
|
16
|
+
"stroke-linecap": "round",
|
17
|
+
"stroke-linejoin": "round",
|
18
|
+
"stroke-width": "1.5"
|
19
|
+
}, null, -1),
|
20
|
+
createElementVNode("path", {
|
21
|
+
d: "M22 6.5V5a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h7",
|
22
|
+
stroke: "currentcolor",
|
23
|
+
"stroke-linecap": "round",
|
24
|
+
"stroke-width": "1.5"
|
25
|
+
}, null, -1),
|
26
|
+
createElementVNode("path", {
|
27
|
+
d: "M22 14h-6m2-3-3 3 3 3",
|
28
|
+
stroke: "currentcolor",
|
29
|
+
"stroke-linecap": "round",
|
30
|
+
"stroke-linejoin": "round",
|
31
|
+
"stroke-width": "1.5"
|
32
|
+
}, null, -1)
|
33
|
+
])))
|
34
|
+
}
|
35
|
+
const IconTableCollapsed = { render: render };
|
36
|
+
|
37
|
+
export { IconTableCollapsed as default, render };
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import { createElementBlock, openBlock, createElementVNode } from 'vue';
|
2
|
+
|
3
|
+
const _hoisted_1 = {
|
4
|
+
width: "20",
|
5
|
+
height: "20",
|
6
|
+
viewBox: "0 0 24 24",
|
7
|
+
fill: "none",
|
8
|
+
xmlns: "http://www.w3.org/2000/svg"
|
9
|
+
};
|
10
|
+
|
11
|
+
function render(_ctx, _cache) {
|
12
|
+
return (openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
|
13
|
+
createElementVNode("path", {
|
14
|
+
d: "M7.13 18.31h8a5 5 0 0 0 0-10h-11",
|
15
|
+
stroke: "currentcolor",
|
16
|
+
"stroke-linecap": "round",
|
17
|
+
"stroke-linejoin": "round",
|
18
|
+
"stroke-miterlimit": "10",
|
19
|
+
"stroke-width": "1.5"
|
20
|
+
}, null, -1),
|
21
|
+
createElementVNode("path", {
|
22
|
+
d: "M6.43 10.81 3.87 8.25l2.56-2.56",
|
23
|
+
stroke: "currentcolor",
|
24
|
+
"stroke-linecap": "round",
|
25
|
+
"stroke-linejoin": "round",
|
26
|
+
"stroke-width": "1.5"
|
27
|
+
}, null, -1)
|
28
|
+
])))
|
29
|
+
}
|
30
|
+
const IconUndo = { render: render };
|
31
|
+
|
32
|
+
export { IconUndo as default, render };
|
@@ -26,6 +26,7 @@ declare function __VLS_template(): {
|
|
26
26
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
27
27
|
declare const __VLS_component: import('vue').DefineComponent<FieldWrapperProps, {
|
28
28
|
fieldRef: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
|
29
|
+
showMessage: (value: string, durationMs?: number) => void;
|
29
30
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
30
31
|
click: (value: MouseEvent) => any;
|
31
32
|
}, string, import('vue').PublicProps, Readonly<FieldWrapperProps> & Readonly<{
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"WFieldWrapper.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/FieldWrapper/WFieldWrapper.vue"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"WFieldWrapper.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/FieldWrapper/WFieldWrapper.vue"],"names":[],"mappings":"AA6LA;AA6RA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAyG9C,iBAAS,cAAc;WAuST,OAAO,IAA6B;;uBAjBvB,GAAG;0BACC,GAAG;;;gCA/UP,OAAO,KAAG,IAAI;;YAgVb,GAAG;;;gCAhVJ,OAAO,KAAG,IAAI;;YAiVX,GAAG;uBACL,GAAG;wBACF,GAAG;;;;;;;EAiB/B;AAwBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;yBA7WO,MAAM,eAAc,MAAM;;;;;;;;;;;;OAuXpD,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { defineComponent, useId, useTemplateRef, ref, inject,
|
1
|
+
import { defineComponent, useId, useTemplateRef, ref, computed, inject, onBeforeUnmount, createElementBlock, openBlock, mergeProps, createCommentVNode, renderSlot, createElementVNode, createBlock, normalizeClass, unref, Fragment, createVNode, createTextVNode, resolveDynamicComponent, toDisplayString, Transition, withCtx, normalizeProps, guardReactiveProps, withDirectives, vShow } from 'vue';
|
2
2
|
import _sfc_main$2 from '../Button/WButtonCopy.vue.js';
|
3
3
|
import WSkeleton from '../Skeleton/WSkeleton.vue.js';
|
4
4
|
import _sfc_main$3 from '../Tooltip/WTooltip.vue.js';
|
@@ -6,7 +6,7 @@ import { encodeQueryParam } from '../../utils/api.js';
|
|
6
6
|
import { useComponentStates } from '../../utils/useComponentStates.js';
|
7
7
|
import { numberFormatter } from '../../utils/utils.js';
|
8
8
|
import _sfc_main$1 from './components/FilterButton.vue.js';
|
9
|
-
import {
|
9
|
+
import { wFieldSetShowMessage } from './use/useFieldSaved.js';
|
10
10
|
|
11
11
|
const _hoisted_1 = ["for"];
|
12
12
|
const _hoisted_2 = {
|
@@ -58,7 +58,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
58
58
|
const id = useId();
|
59
59
|
const fieldRef = useTemplateRef("field");
|
60
60
|
const focused = ref(false);
|
61
|
-
const
|
61
|
+
const message = ref(null);
|
62
|
+
const isMessageShown = ref(true);
|
62
63
|
const encodedQueryParam = computed(() => {
|
63
64
|
if (props.filterField === void 0) return void 0;
|
64
65
|
return encodeQueryParam(props.filterValue === void 0 ? props.modelValue : props.filterValue);
|
@@ -66,8 +67,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
66
67
|
const setFocused = (value) => {
|
67
68
|
focused.value = value;
|
68
69
|
};
|
70
|
+
let timeout = null;
|
71
|
+
const resetMessage = () => {
|
72
|
+
message.value = null;
|
73
|
+
isMessageShown.value = true;
|
74
|
+
if (timeout) {
|
75
|
+
clearTimeout(timeout);
|
76
|
+
timeout = null;
|
77
|
+
}
|
78
|
+
};
|
79
|
+
const showMessage = (value, durationMs = 2e3) => {
|
80
|
+
if (timeout) clearTimeout(timeout);
|
81
|
+
if (message.value && isMessageShown.value) {
|
82
|
+
isMessageShown.value = false;
|
83
|
+
timeout = setTimeout(() => showMessage(value, durationMs), 100);
|
84
|
+
} else {
|
85
|
+
message.value = value;
|
86
|
+
isMessageShown.value = true;
|
87
|
+
timeout = setTimeout(resetMessage, durationMs);
|
88
|
+
}
|
89
|
+
};
|
90
|
+
const setShowMessageInjected = inject(wFieldSetShowMessage, null);
|
91
|
+
setShowMessageInjected?.(showMessage);
|
92
|
+
onBeforeUnmount(() => {
|
93
|
+
setShowMessageInjected?.(null);
|
94
|
+
resetMessage();
|
95
|
+
});
|
69
96
|
__expose({
|
70
|
-
fieldRef
|
97
|
+
fieldRef,
|
98
|
+
showMessage
|
71
99
|
});
|
72
100
|
return (_ctx, _cache) => {
|
73
101
|
return openBlock(), createElementBlock("div", mergeProps({ class: "relative" }, { style: _ctx.$attrs.style }, {
|
@@ -164,10 +192,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
164
192
|
"leave-to-class": "opacity-0"
|
165
193
|
}, {
|
166
194
|
default: withCtx(() => [
|
167
|
-
|
195
|
+
message.value ? withDirectives((openBlock(), createElementBlock("div", {
|
168
196
|
key: 0,
|
169
197
|
class: normalizeClass(["text-description absolute right-0 whitespace-nowrap py-0.5 text-xs font-normal", _ctx.topText ? "bottom-full" : "top-full"])
|
170
|
-
}, toDisplayString(
|
198
|
+
}, toDisplayString(message.value), 3)), [
|
199
|
+
[vShow, isMessageShown.value]
|
200
|
+
]) : _ctx.errorMessage ? (openBlock(), createElementBlock("div", {
|
171
201
|
key: 1,
|
172
202
|
class: normalizeClass(["text-negative dark:text-negative-dark absolute pt-0.5 text-xs font-normal", [
|
173
203
|
!_ctx.leftError || _ctx.topText ? "right-0 text-end" : "left-0 text-start",
|
@@ -1,6 +1,5 @@
|
|
1
|
-
import { InjectionKey
|
2
|
-
export
|
3
|
-
export declare const
|
4
|
-
|
5
|
-
};
|
1
|
+
import { InjectionKey } from 'vue';
|
2
|
+
export type ShowMessage = (value: string, durationMs?: number) => void;
|
3
|
+
export declare const wFieldSetShowMessage: InjectionKey<(showMessage: ShowMessage | null) => void>;
|
4
|
+
export declare const useFieldMessage: () => ShowMessage;
|
6
5
|
//# sourceMappingURL=useFieldSaved.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useFieldSaved.d.ts","sourceRoot":"","sources":["../../../../../src/components/FieldWrapper/use/useFieldSaved.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,YAAY,
|
1
|
+
{"version":3,"file":"useFieldSaved.d.ts","sourceRoot":"","sources":["../../../../../src/components/FieldWrapper/use/useFieldSaved.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,YAAY,EAAU,MAAM,KAAK,CAAA;AAE9C,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;AAEtE,eAAO,MAAM,oBAAoB,EAA4B,YAAY,CAAC,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC,CAAA;AAEpH,eAAO,MAAM,eAAe,mBAY3B,CAAA"}
|
@@ -1,29 +1,14 @@
|
|
1
|
-
import {
|
1
|
+
import { provide } from 'vue';
|
2
2
|
|
3
|
-
const
|
4
|
-
const
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
const resetSaved = () => {
|
9
|
-
saved.value = false;
|
10
|
-
if (timeout) {
|
11
|
-
clearTimeout(timeout);
|
12
|
-
timeout = null;
|
13
|
-
}
|
3
|
+
const wFieldSetShowMessage = Symbol("wFieldSaved");
|
4
|
+
const useFieldMessage = () => {
|
5
|
+
let showMessageFn = null;
|
6
|
+
const setShowMessage = (value) => {
|
7
|
+
showMessageFn = value;
|
14
8
|
};
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
saved.value = false;
|
19
|
-
timeout = setTimeout(showSaved, 100);
|
20
|
-
} else {
|
21
|
-
saved.value = true;
|
22
|
-
timeout = setTimeout(resetSaved, 2e3);
|
23
|
-
}
|
24
|
-
};
|
25
|
-
onBeforeUnmount(resetSaved);
|
26
|
-
return { showSaved };
|
9
|
+
provide(wFieldSetShowMessage, setShowMessage);
|
10
|
+
const showMessage = (value, durationMs) => showMessageFn?.(value, durationMs);
|
11
|
+
return showMessage;
|
27
12
|
};
|
28
13
|
|
29
|
-
export {
|
14
|
+
export { useFieldMessage, wFieldSetShowMessage };
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import { toRef, ref, computed, onBeforeUnmount } from 'vue';
|
2
|
-
import {
|
2
|
+
import { useFieldMessage } from '../../FieldWrapper/use/useFieldSaved.js';
|
3
3
|
import { Modal } from '../../../utils/Modal.js';
|
4
4
|
import { handleApiError } from '../../../utils/api.js';
|
5
5
|
import { get, set } from '../../../utils/utils.js';
|
6
6
|
|
7
7
|
const useFormAsync = (props, onSuccess) => {
|
8
8
|
const enabled = toRef(props, "queryEnabled");
|
9
|
-
const
|
9
|
+
const showMessage = useFieldMessage();
|
10
10
|
const { data, setData, isLoadingError } = props.noParams === true ? props.useQueryFn({ enabled }) : props.useQueryFn(toRef(props, "queryParams"), { enabled });
|
11
11
|
const submitting = ref(false);
|
12
12
|
const modelValue = computed(() => get(data.value ?? {}, props.field));
|
@@ -15,7 +15,7 @@ const useFormAsync = (props, onSuccess) => {
|
|
15
15
|
submitting.value = true;
|
16
16
|
return props.apiMethod(set({}, props.field, value)).then((response) => {
|
17
17
|
setData(response.data);
|
18
|
-
|
18
|
+
showMessage("Saved");
|
19
19
|
onSuccess(response.data);
|
20
20
|
}).catch((error) => handleApiError(error, void 0, props.field)).finally(() => {
|
21
21
|
submitting.value = false;
|
@@ -1,17 +1,17 @@
|
|
1
1
|
import { InputProps, WrapSelection } from './types';
|
2
|
+
import { CaretOffset } from './models/utils';
|
2
3
|
declare const _default: <Type extends InputType = "text">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
3
4
|
props: __VLS_PrettifyLocal<any & InputProps<Type> & Partial<{}>> & import('vue').PublicProps;
|
4
5
|
expose(exposed: import('vue').ShallowUnwrapRef<{
|
5
6
|
focus: () => void;
|
6
7
|
blur: () => void;
|
7
8
|
wrapSelection: (value: WrapSelection) => void;
|
8
|
-
setCaret: (
|
9
|
-
|
10
|
-
start: number;
|
11
|
-
end: number;
|
12
|
-
} | undefined;
|
9
|
+
setCaret: (start: number, end?: number) => void;
|
10
|
+
getCaret: () => CaretOffset;
|
13
11
|
fieldRef: import('vue').ComputedRef<HTMLDivElement | null | undefined>;
|
14
12
|
scrollToInput: () => void;
|
13
|
+
undo: () => void;
|
14
|
+
redo: () => void;
|
15
15
|
}>): void;
|
16
16
|
attrs: any;
|
17
17
|
slots: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"WInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/WInput.vue"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"WInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/WInput.vue"],"names":[],"mappings":"AAiPA;AAgiBA,OAAO,KAAK,EAAC,UAAU,EAAE,aAAa,EAAC,MAAM,SAAS,CAAA;AAatD,OAAO,EAAC,KAAK,WAAW,EAAiB,MAAM,gBAAgB,CAAA;yBAE9C,IAAI,SAAS,SAAS,GAAG,MAAM,EAC/C,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WA8xBO,mBAAmB,CAAC,oCAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;qBApmB7B,IAAI;oBAOL,IAAI;+BAiCS,aAAa;0BAvKlB,MAAM,QAAQ,MAAM,KAAG,IAAI;wBAN/B,WAAW;;;oBAyBf,IAAI;oBAeJ,IAAI;MAisBgD,GAAG,IAAI;WACpE,GAAG;;uBAhEgB,GAAG;0BACA,GAAG;wBACJ,GAAG;;;YAEH,GAAG;;mCAjgBF,aAAa;YAggBb,GAAG;;;YAEJ,GAAG;uBACJ,GAAG;wBACF,GAAG;uBACJ,GAAG;uBACH,GAAG;wBACF,GAAG;;;YA/sB1B,oBAAoB,SAAS,4CAAa,SAAS,GAAG,IAAI;YAC1D,gBAAgB,SAAS,aAAa,GAAG,IAAI;YAC7C,aAAa,SAAS,aAAa,GAAG,IAAI;YAC1C,eAAe,SAAS,aAAa,GAAG,IAAI;YAC5C,iBAAiB,SAAS,aAAa,GAAG,IAAI;YAC9C,oBAAoB,SAAS,aAAa,GAAG,IAAI;YACjD,aAAa,GAAG,IAAI;YACpB,OAAO,SAAS,UAAU,GAAG,SAAS,GAAG,IAAI;YAC7C,MAAM,SAAS,UAAU,GAAG,IAAI;YAChC,OAAO,SAAS,UAAU,GAAG,IAAI;YACjC,WAAW,SAAS,UAAU,GAAG,IAAI;YACrC,cAAc,SAAS,UAAU,GAAG,IAAI;YACxC,cAAc,SAAS,KAAK,GAAG,IAAI;YACnC,OAAO,GAAG,IAAI;;EA4vBhB,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAzyBzE,wBAyyB4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
|
@@ -3,7 +3,10 @@ import _sfc_main$1 from '../FieldWrapper/WFieldWrapper.vue.js';
|
|
3
3
|
import { useTabActiveListener } from '../Tabs/use/useTabActiveListener.js';
|
4
4
|
import { Notify } from '../../utils/Notify.js';
|
5
5
|
import { useComponentStates } from '../../utils/useComponentStates.js';
|
6
|
+
import { checkPermissionPaste } from '../../utils/useCopy.js';
|
7
|
+
import { debounce } from '../../utils/utils.js';
|
6
8
|
import _sfc_main$2 from './components/InputActions.vue.js';
|
9
|
+
import { getCaretOffset } from './models/utils.js';
|
7
10
|
|
8
11
|
const _hoisted_1 = { class: "relative flex min-h-full flex-1" };
|
9
12
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
@@ -73,13 +76,69 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
73
76
|
const contentRef = useTemplateRef("content");
|
74
77
|
const inputRef = useTemplateRef("input");
|
75
78
|
const isSecureVisible = ref(false);
|
79
|
+
const history = ref([]);
|
80
|
+
const historyPosition = ref(-1);
|
81
|
+
const getCaret = () => {
|
82
|
+
if (!inputRef.value) return { start: 0, end: 0 };
|
83
|
+
if ("getCaret" in inputRef.value) return inputRef.value.getCaret();
|
84
|
+
return getCaretOffset(inputRef.value);
|
85
|
+
};
|
86
|
+
const setCaret = (start, end) => {
|
87
|
+
if (!inputRef.value) return;
|
88
|
+
if ("setCaret" in inputRef.value) inputRef.value.setCaret(start, end);
|
89
|
+
else inputRef.value.setSelectionRange(start, end ?? null);
|
90
|
+
};
|
91
|
+
const addToHistory = debounce((value) => {
|
92
|
+
const entry = { value, caret: getCaret() };
|
93
|
+
if (historyPosition.value < history.value.length - 1) history.value = history.value.slice(0, historyPosition.value + 1);
|
94
|
+
history.value.push(entry);
|
95
|
+
historyPosition.value = history.value.length - 1;
|
96
|
+
if (history.value.length > 50) {
|
97
|
+
history.value.shift();
|
98
|
+
historyPosition.value--;
|
99
|
+
}
|
100
|
+
}, 500);
|
101
|
+
const undo = () => {
|
102
|
+
if (props.loading || isDisabled.value || isReadonly.value || props.unclickable || props.textSecure) return;
|
103
|
+
if (historyPosition.value === 0) {
|
104
|
+
fieldWrapperRef.value?.showMessage("No Undo");
|
105
|
+
return;
|
106
|
+
}
|
107
|
+
fieldWrapperRef.value?.showMessage("Undo");
|
108
|
+
const index = historyPosition.value - 1;
|
109
|
+
const item = history.value[index];
|
110
|
+
emit("update:model-value", item.value);
|
111
|
+
nextTick(() => setCaret(item.caret.start, item.caret.end));
|
112
|
+
historyPosition.value = index;
|
113
|
+
};
|
114
|
+
const redo = () => {
|
115
|
+
if (props.loading || isDisabled.value || isReadonly.value || props.unclickable || props.textSecure) return;
|
116
|
+
if (historyPosition.value === history.value.length - 1) {
|
117
|
+
fieldWrapperRef.value?.showMessage("No Redo");
|
118
|
+
return;
|
119
|
+
}
|
120
|
+
fieldWrapperRef.value?.showMessage("Redo");
|
121
|
+
const index = historyPosition.value + 1;
|
122
|
+
const item = history.value[index];
|
123
|
+
emit("update:model-value", item.value);
|
124
|
+
nextTick(() => setCaret(item.caret.start, item.caret.end));
|
125
|
+
historyPosition.value = index;
|
126
|
+
};
|
127
|
+
const handleHistoryKeydown = (event) => {
|
128
|
+
if (!event.ctrlKey && !event.metaKey) return;
|
129
|
+
if (event.key !== "z" && event.key !== "Z") return;
|
130
|
+
event.preventDefault();
|
131
|
+
event.stopPropagation();
|
132
|
+
if (event.shiftKey) redo();
|
133
|
+
else undo();
|
134
|
+
};
|
76
135
|
const updateModelValue = (value) => {
|
77
136
|
if (props.loading || isDisabled.value || isReadonly.value || props.unclickable) return;
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
137
|
+
let newValue;
|
138
|
+
if (props.type === "number") newValue = typeof value === "string" && value.length ? Number.parseFloat(value) : void 0;
|
139
|
+
else newValue = value;
|
140
|
+
if (!props.textSecure) addToHistory(newValue);
|
141
|
+
emit("update:model-value", newValue);
|
83
142
|
};
|
84
143
|
const handleBackspace = (event) => {
|
85
144
|
if (!props.customBackspaceHandle) return;
|
@@ -126,53 +185,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
126
185
|
if (props.unclickable) emit("focus", void 0);
|
127
186
|
else inputRef.value?.focus();
|
128
187
|
};
|
129
|
-
const blur = () =>
|
130
|
-
inputRef.value?.blur();
|
131
|
-
};
|
132
|
-
const checkPermission = async () => {
|
133
|
-
const result = await navigator.permissions.query({ name: "clipboard-read" });
|
134
|
-
return result.state === "granted" || result.state === "prompt";
|
135
|
-
};
|
188
|
+
const blur = () => inputRef.value?.blur();
|
136
189
|
const paste = async () => {
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
Notify.
|
147
|
-
title: "Nothing to paste"
|
148
|
-
});
|
149
|
-
return;
|
150
|
-
}
|
151
|
-
if (!props.maxLength || props.maxLength <= value.length) {
|
152
|
-
updateModelValue(value);
|
153
|
-
Notify.success({
|
154
|
-
title: "Pasted"
|
155
|
-
});
|
156
|
-
nextTick().then(() => emit("paste"));
|
157
|
-
} else {
|
158
|
-
Notify.error({
|
190
|
+
try {
|
191
|
+
await checkPermissionPaste();
|
192
|
+
await navigator.clipboard.readText().then((value) => {
|
193
|
+
if (!value) {
|
194
|
+
Notify.warn({ title: "Nothing to paste" });
|
195
|
+
} else if (!props.maxLength || props.maxLength <= value.length) {
|
196
|
+
updateModelValue(value);
|
197
|
+
Notify.success({ title: "Pasted" });
|
198
|
+
nextTick().then(() => emit("paste"));
|
199
|
+
} else Notify.error({
|
159
200
|
title: "Unable to paste",
|
160
201
|
caption: "The length of the pasted value exceeds the allowed limit"
|
161
202
|
});
|
162
|
-
}
|
163
|
-
}
|
203
|
+
});
|
204
|
+
} catch {
|
164
205
|
Notify.error({
|
165
|
-
title: "Paste failed"
|
206
|
+
title: "Paste failed",
|
207
|
+
caption: `Please allow the clipboard actions in browser settings for current domain: ${location.host}`
|
166
208
|
});
|
167
|
-
}
|
209
|
+
}
|
168
210
|
};
|
169
211
|
const scrollToInput = () => {
|
170
212
|
if (!contentRef.value || !inputRef.value) return;
|
171
213
|
contentRef.value.scrollTo({ left: contentRef.value.scrollWidth - inputRef.value.offsetWidth - 40 });
|
172
214
|
};
|
173
215
|
const wrapSelection = (value) => inputRef.value && "wrapSelection" in inputRef.value ? inputRef.value.wrapSelection(value) : void 0;
|
174
|
-
const setCaret = (indexStart, indexEnd) => inputRef.value && "setCaret" in inputRef.value ? inputRef.value.setCaret(indexStart, indexEnd) : void 0;
|
175
|
-
const getSelectionOffsets = () => inputRef.value && "getSelectionOffsets" in inputRef.value ? inputRef.value.getSelectionOffsets() : void 0;
|
176
216
|
let timeout;
|
177
217
|
const autofocusDebounced = () => {
|
178
218
|
if (timeout) clearTimeout(timeout);
|
@@ -185,15 +225,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
185
225
|
timeout = void 0;
|
186
226
|
}, typeof props.autofocus === "number" ? props.autofocus : 250);
|
187
227
|
};
|
188
|
-
if (props.autofocus !== false && props.autofocus !== void 0)
|
189
|
-
useTabActiveListener(autofocusDebounced);
|
190
|
-
}
|
228
|
+
if (props.autofocus !== false && props.autofocus !== void 0) useTabActiveListener(autofocusDebounced);
|
191
229
|
watch(() => props.autofocus, (value) => {
|
192
230
|
if (value === false || value === void 0) return;
|
193
231
|
nextTick(autofocusDebounced);
|
194
232
|
});
|
233
|
+
const handle = watch(() => props.modelValue, (value) => {
|
234
|
+
if (history.value.length === 0) {
|
235
|
+
if (value) {
|
236
|
+
addToHistory(value);
|
237
|
+
handle.stop();
|
238
|
+
}
|
239
|
+
} else handle.stop();
|
240
|
+
});
|
195
241
|
onMounted(() => {
|
196
242
|
if (props.autofocus !== false && props.autofocus !== void 0) autofocusDebounced();
|
243
|
+
if (props.modelValue) addToHistory(props.modelValue);
|
197
244
|
});
|
198
245
|
onBeforeUnmount(() => {
|
199
246
|
if (timeout) {
|
@@ -206,9 +253,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
206
253
|
blur,
|
207
254
|
wrapSelection,
|
208
255
|
setCaret,
|
209
|
-
|
256
|
+
getCaret,
|
210
257
|
fieldRef: computed(() => fieldWrapperRef.value?.fieldRef),
|
211
|
-
scrollToInput
|
258
|
+
scrollToInput,
|
259
|
+
undo,
|
260
|
+
redo
|
212
261
|
});
|
213
262
|
return (_ctx, _cache) => {
|
214
263
|
return openBlock(), createBlock(_sfc_main$1, mergeProps({ ref: "fieldWrapper" }, props, {
|
@@ -273,13 +322,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
273
322
|
key: 0,
|
274
323
|
list: _ctx.toolbarActions,
|
275
324
|
rich: _ctx.rich === true,
|
276
|
-
|
325
|
+
"is-undo": historyPosition.value !== 0,
|
326
|
+
"is-redo": historyPosition.value !== history.value.length - 1,
|
327
|
+
onWrapSelection: wrapSelection,
|
328
|
+
onUndo: undo,
|
329
|
+
onRedo: redo
|
277
330
|
}, {
|
278
331
|
default: withCtx(() => [
|
279
332
|
renderSlot(_ctx.$slots, "toolbar", normalizeProps(guardReactiveProps({ wrapSelection })))
|
280
333
|
]),
|
281
334
|
_: 3
|
282
|
-
}, 8, ["list", "rich"])) : createCommentVNode("", true),
|
335
|
+
}, 8, ["list", "rich", "is-undo", "is-redo"])) : createCommentVNode("", true),
|
283
336
|
_ctx.icon ? (openBlock(), createElementBlock("div", {
|
284
337
|
key: 1,
|
285
338
|
class: normalizeClass(["flex h-full w-[--w-input-height,2.75rem] select-none items-center justify-center", {
|
@@ -351,7 +404,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
351
404
|
_cache[3] || (_cache[3] = withKeys(withModifiers(($event) => {
|
352
405
|
!unref(isDisabled) && !unref(isReadonly) && _ctx.$emit("keypress:delete", $event);
|
353
406
|
handleBackspace($event);
|
354
|
-
}, ["exact", "stop"]), ["delete"]))
|
407
|
+
}, ["exact", "stop"]), ["delete"])),
|
408
|
+
handleHistoryKeydown
|
355
409
|
],
|
356
410
|
onFocus: ($event) => {
|
357
411
|
_ctx.$emit("focus", $event);
|