@sfxcode/formkit-openvue 0.0.0-stage → 0.9.0
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/LICENSE +21 -0
- package/README.md +227 -2
- package/components.d.ts +1 -0
- package/dist/components/FormAutoComplete.vue +100 -0
- package/dist/components/FormCascadeSelect.vue +41 -0
- package/dist/components/FormCheckbox.vue +49 -0
- package/dist/components/FormColorPicker.vue +31 -0
- package/dist/components/FormDatePicker.vue +93 -0
- package/dist/components/FormInputMask.vue +67 -0
- package/dist/components/FormInputNumber.vue +72 -0
- package/dist/components/FormInputOtp.vue +40 -0
- package/dist/components/FormInputText.vue +63 -0
- package/dist/components/FormKitDataDebug.vue +25 -0
- package/dist/components/FormKitDataEdit.vue +123 -0
- package/dist/components/FormKitDataView.vue +56 -0
- package/dist/components/FormKitIcon.vue +23 -0
- package/dist/components/FormKitPrefix.vue +9 -0
- package/dist/components/FormKitSuffix.vue +9 -0
- package/dist/components/FormKnob.vue +48 -0
- package/dist/components/FormListbox.vue +482 -0
- package/dist/components/FormMultiSelect.vue +68 -0
- package/dist/components/FormOutputBoolean.vue +30 -0
- package/dist/components/FormOutputDate.vue +40 -0
- package/dist/components/FormOutputDuration.vue +24 -0
- package/dist/components/FormOutputLink.vue +39 -0
- package/dist/components/FormOutputList.vue +105 -0
- package/dist/components/FormOutputNumber.vue +47 -0
- package/dist/components/FormOutputReference.vue +52 -0
- package/dist/components/FormOutputText.vue +52 -0
- package/dist/components/FormPassword.vue +47 -0
- package/dist/components/FormRadioButton.vue +39 -0
- package/dist/components/FormRating.vue +38 -0
- package/dist/components/FormSelect.vue +69 -0
- package/dist/components/FormSelectButton.vue +42 -0
- package/dist/components/FormSlider.vue +40 -0
- package/dist/components/FormTextarea.vue +35 -0
- package/dist/components/FormToggleButton.vue +40 -0
- package/dist/components/FormToggleSwitch.vue +40 -0
- package/dist/components/FormTreeSelect.vue +46 -0
- package/dist/components/index.d.ts +24 -0
- package/dist/components/index.js +167 -0
- package/dist/components/index.mjs +48 -0
- package/dist/composables/index.d.ts +9 -0
- package/dist/composables/index.js +61 -0
- package/dist/composables/index.mjs +18 -0
- package/dist/composables/useFormInputs.d.ts +3 -0
- package/dist/composables/useFormInputs.js +62 -0
- package/dist/composables/useFormInputs.mjs +53 -0
- package/dist/composables/useFormKitInput.d.ts +11 -0
- package/dist/composables/useFormKitInput.js +58 -0
- package/dist/composables/useFormKitInput.mjs +45 -0
- package/dist/composables/useFormKitRepeater.d.ts +18 -0
- package/dist/composables/useFormKitRepeater.js +74 -0
- package/dist/composables/useFormKitRepeater.mjs +54 -0
- package/dist/composables/useFormKitSchema.d.ts +36 -0
- package/dist/composables/useFormKitSchema.js +83 -0
- package/dist/composables/useFormKitSchema.mjs +58 -0
- package/dist/composables/useFormKitSection.d.ts +7 -0
- package/dist/composables/useFormKitSection.js +31 -0
- package/dist/composables/useFormKitSection.mjs +19 -0
- package/dist/composables/useInputEditor.d.ts +8 -0
- package/dist/composables/useInputEditor.js +148 -0
- package/dist/composables/useInputEditor.mjs +143 -0
- package/dist/composables/useInputEditorSchema.d.ts +163 -0
- package/dist/composables/useInputEditorSchema.js +313 -0
- package/dist/composables/useInputEditorSchema.mjs +315 -0
- package/dist/composables/useOutputDuration.d.ts +4 -0
- package/dist/composables/useOutputDuration.js +40 -0
- package/dist/composables/useOutputDuration.mjs +35 -0
- package/dist/definitions/index.d.ts +35 -0
- package/dist/definitions/index.js +44 -0
- package/dist/definitions/index.mjs +70 -0
- package/dist/definitions/input.d.ts +23 -0
- package/dist/definitions/input.js +118 -0
- package/dist/definitions/input.mjs +111 -0
- package/dist/definitions/output.d.ts +9 -0
- package/dist/definitions/output.js +46 -0
- package/dist/definitions/output.mjs +136 -0
- package/dist/definitions/repeater.d.ts +2 -0
- package/dist/definitions/repeater.js +234 -0
- package/dist/definitions/repeater.mjs +215 -0
- package/dist/index.d.ts +148 -0
- package/dist/index.js +62 -0
- package/dist/index.mjs +14 -0
- package/dist/plugins/autoAnimate.d.ts +9 -0
- package/dist/plugins/autoAnimate.js +93 -0
- package/dist/plugins/autoAnimate.mjs +87 -0
- package/dist/plugins/index.d.ts +5 -0
- package/dist/plugins/index.js +67 -0
- package/dist/plugins/index.mjs +56 -0
- package/dist/sass/formkit-openvue.scss +491 -0
- package/dist/style.css +1 -0
- package/dist/utils/clonePlain.d.ts +10 -0
- package/dist/utils/clonePlain.js +25 -0
- package/dist/utils/clonePlain.mjs +24 -0
- package/package.json +136 -4
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useFormKitRepeater = useFormKitRepeater;
|
|
7
|
+
var _useFormKitSchema = require("./useFormKitSchema");
|
|
8
|
+
function useFormKitRepeater() {
|
|
9
|
+
const {
|
|
10
|
+
addElement,
|
|
11
|
+
addComponent,
|
|
12
|
+
addElementsInOuterDiv
|
|
13
|
+
} = (0, _useFormKitSchema.useFormKitSchema)();
|
|
14
|
+
function addInsertButton(label = "Add", innerClass = "", outerClass = "", buttonClass = "p-button-sm", iconClass = "oi oi-plus") {
|
|
15
|
+
return addElementsInOuterDiv([addComponent("Button", {
|
|
16
|
+
onClick: "$addNode($node)",
|
|
17
|
+
label,
|
|
18
|
+
class: buttonClass,
|
|
19
|
+
icon: iconClass
|
|
20
|
+
}, "$node.children.length == 0")], innerClass, outerClass);
|
|
21
|
+
}
|
|
22
|
+
function addListGroupFunctions(data, addNodeDefaultObject = {}) {
|
|
23
|
+
const swapElements = (array, index1, index2) => {
|
|
24
|
+
const newArray = [...array];
|
|
25
|
+
const temp = newArray[index1];
|
|
26
|
+
newArray[index1] = newArray[index2];
|
|
27
|
+
newArray[index2] = temp;
|
|
28
|
+
return newArray;
|
|
29
|
+
};
|
|
30
|
+
data.addNode = parentNode => () => {
|
|
31
|
+
const newArray = [...parentNode.value, addNodeDefaultObject];
|
|
32
|
+
parentNode.input(newArray, false);
|
|
33
|
+
};
|
|
34
|
+
data.removeNode = (parentNode, index) => () => {
|
|
35
|
+
parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
|
|
36
|
+
};
|
|
37
|
+
data.moveNodeUp = (parentNode, index) => () => {
|
|
38
|
+
const array = [...parentNode.value];
|
|
39
|
+
if (index > 0) parentNode.input(swapElements(array, index - 1, index), false);
|
|
40
|
+
};
|
|
41
|
+
data.moveNodeDown = (parentNode, index) => () => {
|
|
42
|
+
const array = [...parentNode.value];
|
|
43
|
+
if (index < array.length - 1) parentNode.input(swapElements(array, index, index + 1), false);
|
|
44
|
+
};
|
|
45
|
+
data.copyNode = (parentNode, index) => () => {
|
|
46
|
+
const obj = parentNode.value[index];
|
|
47
|
+
const newArray = [...parentNode.value, {
|
|
48
|
+
...obj
|
|
49
|
+
}];
|
|
50
|
+
parentNode.input(newArray, false);
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
function addGroupButtons(innerClass = "", outerClass = "col-4", label = "Actions", help = "", render = "true") {
|
|
54
|
+
const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", styleClass = "p-button-sm") => {
|
|
55
|
+
return addComponent("Button", {
|
|
56
|
+
onClick,
|
|
57
|
+
label: label2,
|
|
58
|
+
icon,
|
|
59
|
+
class: styleClass,
|
|
60
|
+
severity
|
|
61
|
+
}, render2);
|
|
62
|
+
};
|
|
63
|
+
return addElementsInOuterDiv([addButtonComponent("$removeNode($node.parent, $index)", "", "oi oi-times", "danger"), addButtonComponent("$copyNode($node.parent, $index)", "", "oi oi-plus"), addButtonComponent("$moveNodeUp($node.parent, $index)", "", "oi oi-arrow-up", "secondary", "$index != 0"), addElement("span", [], {
|
|
64
|
+
class: "p-space"
|
|
65
|
+
}, "$index == 0"), addButtonComponent("$moveNodeDown($node.parent, $index)", "", "oi oi-arrow-down", "secondary", "$index < $node.parent.value.length -1"), addElement("span", [], {
|
|
66
|
+
class: "p-space"
|
|
67
|
+
}, "$index == $node.parent.value.length -1")], `p-action-buttons ${innerClass}`, outerClass, label, help, render);
|
|
68
|
+
}
|
|
69
|
+
return {
|
|
70
|
+
addInsertButton,
|
|
71
|
+
addGroupButtons,
|
|
72
|
+
addListGroupFunctions
|
|
73
|
+
};
|
|
74
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { useFormKitSchema } from "./useFormKitSchema.mjs";
|
|
2
|
+
export function useFormKitRepeater() {
|
|
3
|
+
const { addElement, addComponent, addElementsInOuterDiv } = useFormKitSchema();
|
|
4
|
+
function addInsertButton(label = "Add", innerClass = "", outerClass = "", buttonClass = "p-button-sm", iconClass = "oi oi-plus") {
|
|
5
|
+
return addElementsInOuterDiv([
|
|
6
|
+
addComponent("Button", { onClick: "$addNode($node)", label, class: buttonClass, icon: iconClass }, "$node.children.length == 0")
|
|
7
|
+
], innerClass, outerClass);
|
|
8
|
+
}
|
|
9
|
+
function addListGroupFunctions(data, addNodeDefaultObject = {}) {
|
|
10
|
+
const swapElements = (array, index1, index2) => {
|
|
11
|
+
const newArray = [...array];
|
|
12
|
+
const temp = newArray[index1];
|
|
13
|
+
newArray[index1] = newArray[index2];
|
|
14
|
+
newArray[index2] = temp;
|
|
15
|
+
return newArray;
|
|
16
|
+
};
|
|
17
|
+
data.addNode = (parentNode) => () => {
|
|
18
|
+
const newArray = [...parentNode.value, addNodeDefaultObject];
|
|
19
|
+
parentNode.input(newArray, false);
|
|
20
|
+
};
|
|
21
|
+
data.removeNode = (parentNode, index) => () => {
|
|
22
|
+
parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
|
|
23
|
+
};
|
|
24
|
+
data.moveNodeUp = (parentNode, index) => () => {
|
|
25
|
+
const array = [...parentNode.value];
|
|
26
|
+
if (index > 0)
|
|
27
|
+
parentNode.input(swapElements(array, index - 1, index), false);
|
|
28
|
+
};
|
|
29
|
+
data.moveNodeDown = (parentNode, index) => () => {
|
|
30
|
+
const array = [...parentNode.value];
|
|
31
|
+
if (index < array.length - 1)
|
|
32
|
+
parentNode.input(swapElements(array, index, index + 1), false);
|
|
33
|
+
};
|
|
34
|
+
data.copyNode = (parentNode, index) => () => {
|
|
35
|
+
const obj = parentNode.value[index];
|
|
36
|
+
const newArray = [...parentNode.value, { ...obj }];
|
|
37
|
+
parentNode.input(newArray, false);
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
function addGroupButtons(innerClass = "", outerClass = "col-4", label = "Actions", help = "", render = "true") {
|
|
41
|
+
const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", styleClass = "p-button-sm") => {
|
|
42
|
+
return addComponent("Button", { onClick, label: label2, icon, class: styleClass, severity }, render2);
|
|
43
|
+
};
|
|
44
|
+
return addElementsInOuterDiv([
|
|
45
|
+
addButtonComponent("$removeNode($node.parent, $index)", "", "oi oi-times", "danger"),
|
|
46
|
+
addButtonComponent("$copyNode($node.parent, $index)", "", "oi oi-plus"),
|
|
47
|
+
addButtonComponent("$moveNodeUp($node.parent, $index)", "", "oi oi-arrow-up", "secondary", "$index != 0"),
|
|
48
|
+
addElement("span", [], { class: "p-space" }, "$index == 0"),
|
|
49
|
+
addButtonComponent("$moveNodeDown($node.parent, $index)", "", "oi oi-arrow-down", "secondary", "$index < $node.parent.value.length -1"),
|
|
50
|
+
addElement("span", [], { class: "p-space" }, "$index == $node.parent.value.length -1")
|
|
51
|
+
], `p-action-buttons ${innerClass}`, outerClass, label, help, render);
|
|
52
|
+
}
|
|
53
|
+
return { addInsertButton, addGroupButtons, addListGroupFunctions };
|
|
54
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
export declare function useFormKitSchema(): {
|
|
2
|
+
addComponent: (component?: string, props?: object, render?: string | boolean, formKitAttrs?: object) => object;
|
|
3
|
+
addElement: (element?: string, children?: any[] | string, attrs?: object, render?: string | boolean, formKitAttrs?: object) => {
|
|
4
|
+
$el: string;
|
|
5
|
+
if: string;
|
|
6
|
+
attrs: object;
|
|
7
|
+
children: string | any[];
|
|
8
|
+
};
|
|
9
|
+
addGroup: (name: string, children?: object[], render?: string | boolean, formKitAttrs?: object) => {
|
|
10
|
+
$formkit: string;
|
|
11
|
+
if: string;
|
|
12
|
+
name: string;
|
|
13
|
+
children: object[];
|
|
14
|
+
};
|
|
15
|
+
addList: (name: string, children?: object[], dynamic?: boolean, render?: string | boolean, formKitAttrs?: object) => {
|
|
16
|
+
$formkit: string;
|
|
17
|
+
if: string;
|
|
18
|
+
name: string;
|
|
19
|
+
dynamic: boolean;
|
|
20
|
+
children: object[];
|
|
21
|
+
};
|
|
22
|
+
addListGroup: (children?: object[], render?: string | boolean, formKitAttrs?: object) => {
|
|
23
|
+
$formkit: string;
|
|
24
|
+
if: string;
|
|
25
|
+
for: string[];
|
|
26
|
+
key: string;
|
|
27
|
+
index: string;
|
|
28
|
+
children: object[];
|
|
29
|
+
};
|
|
30
|
+
addElementsInOuterDiv: (children?: object[], innerClass?: string, outerClass?: string, label?: string, help?: string, render?: string | boolean) => {
|
|
31
|
+
$el: string;
|
|
32
|
+
if: string;
|
|
33
|
+
attrs: object;
|
|
34
|
+
children: string | any[];
|
|
35
|
+
};
|
|
36
|
+
};
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useFormKitSchema = useFormKitSchema;
|
|
7
|
+
function useFormKitSchema() {
|
|
8
|
+
const addComponent = (component = "Button", props = {}, render = true, formKitAttrs = {}) => {
|
|
9
|
+
return {
|
|
10
|
+
$cmp: component,
|
|
11
|
+
if: render.toString(),
|
|
12
|
+
props,
|
|
13
|
+
...formKitAttrs
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
const addElement = (element = "div", children = [], attrs = {}, render = true, formKitAttrs = {}) => {
|
|
17
|
+
return {
|
|
18
|
+
$el: element,
|
|
19
|
+
if: render.toString(),
|
|
20
|
+
attrs,
|
|
21
|
+
children,
|
|
22
|
+
...formKitAttrs
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
const addGroup = (name, children = [], render = true, formKitAttrs = {}) => {
|
|
26
|
+
return {
|
|
27
|
+
$formkit: "group",
|
|
28
|
+
if: render.toString(),
|
|
29
|
+
name,
|
|
30
|
+
children,
|
|
31
|
+
...formKitAttrs
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
const addList = (name, children = [], dynamic = true, render = true, formKitAttrs = {}) => {
|
|
35
|
+
return {
|
|
36
|
+
$formkit: "list",
|
|
37
|
+
if: render.toString(),
|
|
38
|
+
name,
|
|
39
|
+
dynamic,
|
|
40
|
+
children,
|
|
41
|
+
...formKitAttrs
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
const addListGroup = (children = [], render = true, formKitAttrs = {}) => {
|
|
45
|
+
return {
|
|
46
|
+
$formkit: "group",
|
|
47
|
+
if: render.toString(),
|
|
48
|
+
for: ["item", "index", "$items"],
|
|
49
|
+
// 👈 $items is in the slot’s scope
|
|
50
|
+
key: "$item",
|
|
51
|
+
index: "$index",
|
|
52
|
+
children,
|
|
53
|
+
...formKitAttrs
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
const addElementsInOuterDiv = (children = [], innerClass = "", outerClass = "", label = "", help = "", render = true) => {
|
|
57
|
+
const inner = addElement("div", children, {
|
|
58
|
+
class: innerClass,
|
|
59
|
+
style: "position: relative;"
|
|
60
|
+
});
|
|
61
|
+
const labelDiv = addElement("label", [label], {
|
|
62
|
+
class: "formkit-label"
|
|
63
|
+
});
|
|
64
|
+
const wrapperDiv = addElement("div", [labelDiv, inner], {
|
|
65
|
+
class: "formkit-wrapper"
|
|
66
|
+
});
|
|
67
|
+
const helpDiv = addElement("div", [help], {
|
|
68
|
+
class: "formkit-help"
|
|
69
|
+
});
|
|
70
|
+
return addElement("div", [wrapperDiv, helpDiv], {
|
|
71
|
+
class: outerClass,
|
|
72
|
+
style: "position: relative;"
|
|
73
|
+
}, render);
|
|
74
|
+
};
|
|
75
|
+
return {
|
|
76
|
+
addComponent,
|
|
77
|
+
addElement,
|
|
78
|
+
addGroup,
|
|
79
|
+
addList,
|
|
80
|
+
addListGroup,
|
|
81
|
+
addElementsInOuterDiv
|
|
82
|
+
};
|
|
83
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
export function useFormKitSchema() {
|
|
2
|
+
const addComponent = (component = "Button", props = {}, render = true, formKitAttrs = {}) => {
|
|
3
|
+
return {
|
|
4
|
+
$cmp: component,
|
|
5
|
+
if: render.toString(),
|
|
6
|
+
props,
|
|
7
|
+
...formKitAttrs
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
const addElement = (element = "div", children = [], attrs = {}, render = true, formKitAttrs = {}) => {
|
|
11
|
+
return {
|
|
12
|
+
$el: element,
|
|
13
|
+
if: render.toString(),
|
|
14
|
+
attrs,
|
|
15
|
+
children,
|
|
16
|
+
...formKitAttrs
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
const addGroup = (name, children = [], render = true, formKitAttrs = {}) => {
|
|
20
|
+
return {
|
|
21
|
+
$formkit: "group",
|
|
22
|
+
if: render.toString(),
|
|
23
|
+
name,
|
|
24
|
+
children,
|
|
25
|
+
...formKitAttrs
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
const addList = (name, children = [], dynamic = true, render = true, formKitAttrs = {}) => {
|
|
29
|
+
return {
|
|
30
|
+
$formkit: "list",
|
|
31
|
+
if: render.toString(),
|
|
32
|
+
name,
|
|
33
|
+
dynamic,
|
|
34
|
+
children,
|
|
35
|
+
...formKitAttrs
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
const addListGroup = (children = [], render = true, formKitAttrs = {}) => {
|
|
39
|
+
return {
|
|
40
|
+
$formkit: "group",
|
|
41
|
+
if: render.toString(),
|
|
42
|
+
for: ["item", "index", "$items"],
|
|
43
|
+
// 👈 $items is in the slot’s scope
|
|
44
|
+
key: "$item",
|
|
45
|
+
index: "$index",
|
|
46
|
+
children,
|
|
47
|
+
...formKitAttrs
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
const addElementsInOuterDiv = (children = [], innerClass = "", outerClass = "", label = "", help = "", render = true) => {
|
|
51
|
+
const inner = addElement("div", children, { class: innerClass, style: "position: relative;" });
|
|
52
|
+
const labelDiv = addElement("label", [label], { class: "formkit-label" });
|
|
53
|
+
const wrapperDiv = addElement("div", [labelDiv, inner], { class: "formkit-wrapper" });
|
|
54
|
+
const helpDiv = addElement("div", [help], { class: "formkit-help" });
|
|
55
|
+
return addElement("div", [wrapperDiv, helpDiv], { class: outerClass, style: "position: relative;" }, render);
|
|
56
|
+
};
|
|
57
|
+
return { addComponent, addElement, addGroup, addList, addListGroup, addElementsInOuterDiv };
|
|
58
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare function useFormKitSection(context: any): {
|
|
2
|
+
generateId: () => string;
|
|
3
|
+
hasPrefix: import("vue").ComputedRef<boolean>;
|
|
4
|
+
hasPrefixIcon: import("vue").ComputedRef<boolean>;
|
|
5
|
+
hasSuffix: import("vue").ComputedRef<boolean>;
|
|
6
|
+
hasSuffixIcon: import("vue").ComputedRef<boolean>;
|
|
7
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useFormKitSection = useFormKitSection;
|
|
7
|
+
var _vue = require("vue");
|
|
8
|
+
function useFormKitSection(context) {
|
|
9
|
+
const hasPrefix = (0, _vue.computed)(() => {
|
|
10
|
+
return Boolean(context?.prefix?.length > 0);
|
|
11
|
+
});
|
|
12
|
+
const hasPrefixIcon = (0, _vue.computed)(() => {
|
|
13
|
+
return Boolean(context?.iconPrefix?.length > 0);
|
|
14
|
+
});
|
|
15
|
+
const hasSuffixIcon = (0, _vue.computed)(() => {
|
|
16
|
+
return Boolean(context?.iconSuffix?.length > 0);
|
|
17
|
+
});
|
|
18
|
+
const hasSuffix = (0, _vue.computed)(() => {
|
|
19
|
+
return Boolean(context?.suffix?.length > 0);
|
|
20
|
+
});
|
|
21
|
+
function generateId() {
|
|
22
|
+
return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
|
|
23
|
+
}
|
|
24
|
+
return {
|
|
25
|
+
generateId,
|
|
26
|
+
hasPrefix,
|
|
27
|
+
hasPrefixIcon,
|
|
28
|
+
hasSuffix,
|
|
29
|
+
hasSuffixIcon
|
|
30
|
+
};
|
|
31
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { computed } from "vue";
|
|
2
|
+
export function useFormKitSection(context) {
|
|
3
|
+
const hasPrefix = computed(() => {
|
|
4
|
+
return Boolean(context?.prefix?.length > 0);
|
|
5
|
+
});
|
|
6
|
+
const hasPrefixIcon = computed(() => {
|
|
7
|
+
return Boolean(context?.iconPrefix?.length > 0);
|
|
8
|
+
});
|
|
9
|
+
const hasSuffixIcon = computed(() => {
|
|
10
|
+
return Boolean(context?.iconSuffix?.length > 0);
|
|
11
|
+
});
|
|
12
|
+
const hasSuffix = computed(() => {
|
|
13
|
+
return Boolean(context?.suffix?.length > 0);
|
|
14
|
+
});
|
|
15
|
+
function generateId() {
|
|
16
|
+
return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
|
|
17
|
+
}
|
|
18
|
+
return { generateId, hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon };
|
|
19
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare function useInputEditor(): {
|
|
2
|
+
formInputNames: string[];
|
|
3
|
+
formOutputNames: string[];
|
|
4
|
+
editorDataToSchema: (data: any) => any;
|
|
5
|
+
editorDataToJson: (data: any) => string;
|
|
6
|
+
editorDataToCode: (data: any) => string;
|
|
7
|
+
schemaToEditorData: (schema: any) => any;
|
|
8
|
+
};
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useInputEditor = useInputEditor;
|
|
7
|
+
function useInputEditor() {
|
|
8
|
+
const formInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
|
|
9
|
+
const formInputNames = [...formInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
|
|
10
|
+
const formOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputReference", "OutputText"];
|
|
11
|
+
function editorDataToSchema(data) {
|
|
12
|
+
if (!data) return {};
|
|
13
|
+
const formkitInput = data?._dollar_formkit;
|
|
14
|
+
let tempData = {};
|
|
15
|
+
if (data.form && Array.isArray(data.form) && data.form.length > 0) {
|
|
16
|
+
const mapped = data.form.filter(entry => entry && typeof entry === "object" && "form_key" in entry && "form_value" in entry).map(entry => {
|
|
17
|
+
const key = entry.form_key || "";
|
|
18
|
+
let value = entry.form_value;
|
|
19
|
+
if (formkitInput === "formInputOtp" && key === "length" && value !== void 0) {
|
|
20
|
+
value = Number(value);
|
|
21
|
+
}
|
|
22
|
+
return [key, value];
|
|
23
|
+
});
|
|
24
|
+
tempData = {
|
|
25
|
+
...Object.fromEntries(mapped)
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
const readonlyValue = data.readonly === true ? true : void 0;
|
|
29
|
+
const disabledValue = data.disabled === true ? true : void 0;
|
|
30
|
+
const preserveValue = data.preserve === true ? true : void 0;
|
|
31
|
+
const defaultObject = {
|
|
32
|
+
readonly: readonlyValue,
|
|
33
|
+
disabled: disabledValue,
|
|
34
|
+
preserve: preserveValue
|
|
35
|
+
};
|
|
36
|
+
let outerClass = "";
|
|
37
|
+
if (data.outerClass) outerClass = `${outerClass} ${data.outerClass}`.trim();
|
|
38
|
+
let wrapperClass = "";
|
|
39
|
+
if (data.wrapperClass) wrapperClass = `${wrapperClass} ${data.wrapperClass}`.trim();
|
|
40
|
+
let innerClass = "";
|
|
41
|
+
if (data.innerClass) innerClass = `${innerClass} ${data.innerClass}`.trim();
|
|
42
|
+
const undefinedObject = {
|
|
43
|
+
form: void 0,
|
|
44
|
+
schemaResultFormKey: void 0,
|
|
45
|
+
_dollar_formkit: void 0,
|
|
46
|
+
slots: void 0,
|
|
47
|
+
selectButton: void 0
|
|
48
|
+
};
|
|
49
|
+
const useOptions = formkitInput ? formInputWithOptionNames.map(s => `form${s}`).includes(formkitInput) : false;
|
|
50
|
+
let result;
|
|
51
|
+
if (useOptions) {
|
|
52
|
+
result = {
|
|
53
|
+
...data,
|
|
54
|
+
$formkit: formkitInput,
|
|
55
|
+
...tempData,
|
|
56
|
+
...undefinedObject,
|
|
57
|
+
...defaultObject,
|
|
58
|
+
outerClass,
|
|
59
|
+
wrapperClass,
|
|
60
|
+
innerClass,
|
|
61
|
+
optionLabel: "label",
|
|
62
|
+
optionValue: "value"
|
|
63
|
+
};
|
|
64
|
+
} else {
|
|
65
|
+
result = {
|
|
66
|
+
...data,
|
|
67
|
+
$formkit: formkitInput,
|
|
68
|
+
...tempData,
|
|
69
|
+
...undefinedObject,
|
|
70
|
+
...defaultObject,
|
|
71
|
+
outerClass,
|
|
72
|
+
wrapperClass,
|
|
73
|
+
innerClass,
|
|
74
|
+
options: void 0
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
for (const key in result) {
|
|
78
|
+
const value = result[key];
|
|
79
|
+
if (value !== null && value !== void 0 && typeof value === "string") {
|
|
80
|
+
if (value.trim().length === 0) {
|
|
81
|
+
result[key] = void 0;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
return result;
|
|
86
|
+
}
|
|
87
|
+
function dataToSchema(data) {
|
|
88
|
+
if (!data) return {};
|
|
89
|
+
const schema = editorDataToSchema(data);
|
|
90
|
+
if (schema?.options && Array.isArray(schema.options)) {
|
|
91
|
+
const options = schema.options.map(o => o ? JSON.parse(JSON.stringify(o)) : {});
|
|
92
|
+
return {
|
|
93
|
+
...schema,
|
|
94
|
+
options
|
|
95
|
+
};
|
|
96
|
+
} else {
|
|
97
|
+
return schema;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
function editorDataToJson(data) {
|
|
101
|
+
if (!data) return "{}";
|
|
102
|
+
return JSON.stringify(dataToSchema(data));
|
|
103
|
+
}
|
|
104
|
+
function objectToString(data) {
|
|
105
|
+
if (!data) return "{}";
|
|
106
|
+
return `{${Object.entries(data).map(([key, value]) => {
|
|
107
|
+
if (key === "options" && Array.isArray(value) && value.length > 0) {
|
|
108
|
+
let result = "[";
|
|
109
|
+
value.forEach(o => {
|
|
110
|
+
if (o && typeof o === "object") {
|
|
111
|
+
result = `${result + objectToString(o)}, `;
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
return `${key}: ${result.substring(0, result.length - 2)}]`;
|
|
115
|
+
} else if (key === "formInputOtp") {
|
|
116
|
+
return `${key}: ${value}`;
|
|
117
|
+
} else {
|
|
118
|
+
return `${key}: '${value}'`;
|
|
119
|
+
}
|
|
120
|
+
}).join()}}`;
|
|
121
|
+
}
|
|
122
|
+
function editorDataToObject(data) {
|
|
123
|
+
if (!data) return "{}";
|
|
124
|
+
try {
|
|
125
|
+
const jsonData = editorDataToJson(data);
|
|
126
|
+
return objectToString(JSON.parse(jsonData));
|
|
127
|
+
} catch (error) {
|
|
128
|
+
console.error("Error in editorDataToObject:", error);
|
|
129
|
+
return "{}";
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
function schemaToEditorData(schema) {
|
|
133
|
+
if (!schema) return {};
|
|
134
|
+
const formkitInput = schema?.$formkit;
|
|
135
|
+
return {
|
|
136
|
+
...schema,
|
|
137
|
+
_dollar_formkit: formkitInput
|
|
138
|
+
};
|
|
139
|
+
}
|
|
140
|
+
return {
|
|
141
|
+
formInputNames,
|
|
142
|
+
formOutputNames,
|
|
143
|
+
editorDataToSchema,
|
|
144
|
+
editorDataToJson,
|
|
145
|
+
editorDataToCode: editorDataToObject,
|
|
146
|
+
schemaToEditorData
|
|
147
|
+
};
|
|
148
|
+
}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
export function useInputEditor() {
|
|
2
|
+
const formInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
|
|
3
|
+
const formInputNames = [...formInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
|
|
4
|
+
const formOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputReference", "OutputText"];
|
|
5
|
+
function editorDataToSchema(data) {
|
|
6
|
+
if (!data)
|
|
7
|
+
return {};
|
|
8
|
+
const formkitInput = data?._dollar_formkit;
|
|
9
|
+
let tempData = {};
|
|
10
|
+
if (data.form && Array.isArray(data.form) && data.form.length > 0) {
|
|
11
|
+
const mapped = data.form.filter((entry) => entry && typeof entry === "object" && "form_key" in entry && "form_value" in entry).map((entry) => {
|
|
12
|
+
const key = entry.form_key || "";
|
|
13
|
+
let value = entry.form_value;
|
|
14
|
+
if (formkitInput === "formInputOtp" && key === "length" && value !== void 0) {
|
|
15
|
+
value = Number(value);
|
|
16
|
+
}
|
|
17
|
+
return [key, value];
|
|
18
|
+
});
|
|
19
|
+
tempData = { ...Object.fromEntries(mapped) };
|
|
20
|
+
}
|
|
21
|
+
const readonlyValue = data.readonly === true ? true : void 0;
|
|
22
|
+
const disabledValue = data.disabled === true ? true : void 0;
|
|
23
|
+
const preserveValue = data.preserve === true ? true : void 0;
|
|
24
|
+
const defaultObject = {
|
|
25
|
+
readonly: readonlyValue,
|
|
26
|
+
disabled: disabledValue,
|
|
27
|
+
preserve: preserveValue
|
|
28
|
+
};
|
|
29
|
+
let outerClass = "";
|
|
30
|
+
if (data.outerClass)
|
|
31
|
+
outerClass = `${outerClass} ${data.outerClass}`.trim();
|
|
32
|
+
let wrapperClass = "";
|
|
33
|
+
if (data.wrapperClass)
|
|
34
|
+
wrapperClass = `${wrapperClass} ${data.wrapperClass}`.trim();
|
|
35
|
+
let innerClass = "";
|
|
36
|
+
if (data.innerClass)
|
|
37
|
+
innerClass = `${innerClass} ${data.innerClass}`.trim();
|
|
38
|
+
const undefinedObject = {
|
|
39
|
+
form: void 0,
|
|
40
|
+
schemaResultFormKey: void 0,
|
|
41
|
+
_dollar_formkit: void 0,
|
|
42
|
+
slots: void 0,
|
|
43
|
+
selectButton: void 0
|
|
44
|
+
};
|
|
45
|
+
const useOptions = formkitInput ? formInputWithOptionNames.map((s) => `form${s}`).includes(formkitInput) : false;
|
|
46
|
+
let result;
|
|
47
|
+
if (useOptions) {
|
|
48
|
+
result = {
|
|
49
|
+
...data,
|
|
50
|
+
$formkit: formkitInput,
|
|
51
|
+
...tempData,
|
|
52
|
+
...undefinedObject,
|
|
53
|
+
...defaultObject,
|
|
54
|
+
outerClass,
|
|
55
|
+
wrapperClass,
|
|
56
|
+
innerClass,
|
|
57
|
+
optionLabel: "label",
|
|
58
|
+
optionValue: "value"
|
|
59
|
+
};
|
|
60
|
+
} else {
|
|
61
|
+
result = {
|
|
62
|
+
...data,
|
|
63
|
+
$formkit: formkitInput,
|
|
64
|
+
...tempData,
|
|
65
|
+
...undefinedObject,
|
|
66
|
+
...defaultObject,
|
|
67
|
+
outerClass,
|
|
68
|
+
wrapperClass,
|
|
69
|
+
innerClass,
|
|
70
|
+
options: void 0
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
for (const key in result) {
|
|
74
|
+
const value = result[key];
|
|
75
|
+
if (value !== null && value !== void 0 && typeof value === "string") {
|
|
76
|
+
if (value.trim().length === 0) {
|
|
77
|
+
result[key] = void 0;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return result;
|
|
82
|
+
}
|
|
83
|
+
function dataToSchema(data) {
|
|
84
|
+
if (!data)
|
|
85
|
+
return {};
|
|
86
|
+
const schema = editorDataToSchema(data);
|
|
87
|
+
if (schema?.options && Array.isArray(schema.options)) {
|
|
88
|
+
const options = schema.options.map((o) => o ? JSON.parse(JSON.stringify(o)) : {});
|
|
89
|
+
return { ...schema, options };
|
|
90
|
+
} else {
|
|
91
|
+
return schema;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
function editorDataToJson(data) {
|
|
95
|
+
if (!data)
|
|
96
|
+
return "{}";
|
|
97
|
+
return JSON.stringify(dataToSchema(data));
|
|
98
|
+
}
|
|
99
|
+
function objectToString(data) {
|
|
100
|
+
if (!data)
|
|
101
|
+
return "{}";
|
|
102
|
+
return `{${Object.entries(data).map(([key, value]) => {
|
|
103
|
+
if (key === "options" && Array.isArray(value) && value.length > 0) {
|
|
104
|
+
let result = "[";
|
|
105
|
+
value.forEach((o) => {
|
|
106
|
+
if (o && typeof o === "object") {
|
|
107
|
+
result = `${result + objectToString(o)}, `;
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
return `${key}: ${result.substring(0, result.length - 2)}]`;
|
|
111
|
+
} else if (key === "formInputOtp") {
|
|
112
|
+
return `${key}: ${value}`;
|
|
113
|
+
} else {
|
|
114
|
+
return `${key}: '${value}'`;
|
|
115
|
+
}
|
|
116
|
+
}).join()}}`;
|
|
117
|
+
}
|
|
118
|
+
function editorDataToObject(data) {
|
|
119
|
+
if (!data)
|
|
120
|
+
return "{}";
|
|
121
|
+
try {
|
|
122
|
+
const jsonData = editorDataToJson(data);
|
|
123
|
+
return objectToString(JSON.parse(jsonData));
|
|
124
|
+
} catch (error) {
|
|
125
|
+
console.error("Error in editorDataToObject:", error);
|
|
126
|
+
return "{}";
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
function schemaToEditorData(schema) {
|
|
130
|
+
if (!schema)
|
|
131
|
+
return {};
|
|
132
|
+
const formkitInput = schema?.$formkit;
|
|
133
|
+
return { ...schema, _dollar_formkit: formkitInput };
|
|
134
|
+
}
|
|
135
|
+
return {
|
|
136
|
+
formInputNames,
|
|
137
|
+
formOutputNames,
|
|
138
|
+
editorDataToSchema,
|
|
139
|
+
editorDataToJson,
|
|
140
|
+
editorDataToCode: editorDataToObject,
|
|
141
|
+
schemaToEditorData
|
|
142
|
+
};
|
|
143
|
+
}
|