@sfxcode/formkit-primevue 3.3.1 → 3.3.4
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/components/FormKitDataDebug.vue +19 -0
- package/dist/components/FormKitDataEdit.vue +133 -0
- package/dist/components/FormKitDataView.vue +51 -0
- package/dist/components/FormKitIcon.vue +18 -0
- package/dist/components/FormKitPrefix.vue +11 -0
- package/dist/components/FormKitSuffix.vue +11 -0
- package/dist/components/PrimeAutoComplete.vue +95 -0
- package/dist/components/PrimeCascadeSelect.vue +43 -0
- package/dist/components/PrimeCheckbox.vue +51 -0
- package/dist/components/PrimeColorPicker.vue +33 -0
- package/dist/components/PrimeDatePicker.vue +97 -0
- package/dist/components/PrimeInputMask.vue +69 -0
- package/dist/components/PrimeInputNumber.vue +75 -0
- package/dist/components/PrimeInputOtp.vue +42 -0
- package/dist/components/PrimeInputText.vue +65 -0
- package/dist/components/PrimeKnob.vue +50 -0
- package/dist/components/PrimeListbox.vue +54 -0
- package/dist/components/PrimeMultiSelect.vue +70 -0
- package/dist/components/PrimeOutputBoolean.vue +42 -0
- package/dist/components/PrimeOutputDate.vue +51 -0
- package/dist/components/PrimeOutputDuration.vue +36 -0
- package/dist/components/PrimeOutputLink.vue +52 -0
- package/dist/components/PrimeOutputList.vue +106 -0
- package/dist/components/PrimeOutputNumber.vue +56 -0
- package/dist/components/PrimeOutputReference.vue +64 -0
- package/dist/components/PrimeOutputText.vue +72 -0
- package/dist/components/PrimePassword.vue +52 -0
- package/dist/components/PrimeRadioButton.vue +48 -0
- package/dist/components/PrimeRating.vue +40 -0
- package/dist/components/PrimeSelect.vue +71 -0
- package/dist/components/PrimeSelectButton.vue +44 -0
- package/dist/components/PrimeSlider.vue +42 -0
- package/dist/components/PrimeTextarea.vue +37 -0
- package/dist/components/PrimeToggleButton.vue +42 -0
- package/dist/components/PrimeToggleSwitch.vue +42 -0
- package/dist/components/PrimeTreeSelect.vue +48 -0
- package/dist/components/index.d.ts +24 -2
- package/dist/components/index.js +167 -4
- package/dist/components/index.mjs +48 -0
- package/dist/composables/index.d.ts +9 -2
- package/dist/composables/index.js +61 -2
- package/dist/composables/index.mjs +18 -0
- package/dist/composables/useFormKitInput.d.ts +11 -0
- package/dist/composables/useFormKitInput.js +62 -0
- package/dist/composables/useFormKitInput.mjs +57 -0
- package/dist/composables/useFormKitRepeater.d.ts +15 -0
- package/dist/composables/useFormKitRepeater.js +74 -0
- package/dist/composables/useFormKitRepeater.mjs +82 -0
- package/dist/composables/useFormKitSchema.d.ts +36 -0
- package/dist/composables/useFormKitSchema.js +83 -0
- package/dist/composables/useFormKitSchema.mjs +66 -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 +171 -0
- package/dist/composables/useInputEditorSchema.d.ts +163 -0
- package/dist/composables/useInputEditorSchema.js +313 -0
- package/dist/composables/useInputEditorSchema.mjs +323 -0
- package/dist/composables/useOutputDuration.d.ts +4 -0
- package/dist/composables/useOutputDuration.js +40 -0
- package/dist/composables/useOutputDuration.mjs +32 -0
- package/dist/composables/usePrimeInputs.d.ts +3 -0
- package/dist/composables/usePrimeInputs.js +62 -0
- package/dist/composables/usePrimeInputs.mjs +53 -0
- package/dist/definitions/index.d.ts +32 -37
- package/dist/definitions/index.js +42 -4
- package/dist/definitions/index.mjs +68 -0
- package/dist/definitions/input.d.ts +47 -0
- package/dist/definitions/input.js +142 -0
- package/dist/definitions/input.mjs +421 -0
- package/dist/definitions/output.d.ts +9 -0
- package/dist/definitions/output.js +46 -0
- package/dist/definitions/output.mjs +120 -0
- package/dist/index.d.ts +142 -145
- package/dist/index.js +62 -5
- package/dist/index.mjs +20 -0
- package/dist/plugins/index.d.ts +3 -7
- package/dist/plugins/index.js +57 -45
- package/dist/plugins/index.mjs +59 -0
- package/dist/vue.d.ts +5 -0
- package/package.json +88 -40
- package/dist/PrimeTreeSelect-Dksx7tL-.js +0 -1881
- package/dist/components-HJnJ39cU.js +0 -255
- package/dist/composables-CZ6f1QYe.js +0 -820
- package/dist/definitions-BHwWaom7.js +0 -1196
- package/dist/index-Ch3MtT1C.d.ts +0 -266
- package/dist/index-EJ8M51RO.d.ts +0 -917
|
@@ -1,820 +0,0 @@
|
|
|
1
|
-
import { computed } from "vue";
|
|
2
|
-
import { usePrimeVue } from "primevue/config";
|
|
3
|
-
import consola from "consola";
|
|
4
|
-
import AutoComplete from "primevue/autocomplete";
|
|
5
|
-
import Button from "primevue/button";
|
|
6
|
-
import CascadeSelect from "primevue/cascadeselect";
|
|
7
|
-
import Checkbox from "primevue/checkbox";
|
|
8
|
-
import Chip from "primevue/chip";
|
|
9
|
-
import ColorPicker from "primevue/colorpicker";
|
|
10
|
-
import DatePicker from "primevue/datepicker";
|
|
11
|
-
import InputMask from "primevue/inputmask";
|
|
12
|
-
import InputNumber from "primevue/inputnumber";
|
|
13
|
-
import InputOtp from "primevue/inputotp";
|
|
14
|
-
import InputText from "primevue/inputtext";
|
|
15
|
-
import Knob from "primevue/knob";
|
|
16
|
-
import Listbox from "primevue/listbox";
|
|
17
|
-
import MultiSelect from "primevue/multiselect";
|
|
18
|
-
import Password from "primevue/password";
|
|
19
|
-
import RadioButton from "primevue/radiobutton";
|
|
20
|
-
import Rating from "primevue/rating";
|
|
21
|
-
import Select from "primevue/select";
|
|
22
|
-
import SelectButton from "primevue/selectbutton";
|
|
23
|
-
import Slider from "primevue/slider";
|
|
24
|
-
import Textarea from "primevue/textarea";
|
|
25
|
-
import ToggleButton from "primevue/togglebutton";
|
|
26
|
-
import ToggleSwitch from "primevue/toggleswitch";
|
|
27
|
-
import TreeSelect from "primevue/treeselect";
|
|
28
|
-
//#region src/composables/useFormKitInput.ts
|
|
29
|
-
function useFormKitInput(context) {
|
|
30
|
-
const isInvalid = computed(() => {
|
|
31
|
-
return context?.state?.validationVisible && !context?.state?.valid;
|
|
32
|
-
});
|
|
33
|
-
const styleClass = computed(() => {
|
|
34
|
-
return context?.state?.validationVisible && !context?.state?.valid ? `${context?.attrs?.class || ""} p-invalid` : context?.attrs?.class || "";
|
|
35
|
-
});
|
|
36
|
-
function isGlobalUnstyledMode() {
|
|
37
|
-
let result = false;
|
|
38
|
-
try {
|
|
39
|
-
result = usePrimeVue()?.config?.unstyled || false;
|
|
40
|
-
} catch (e) {
|
|
41
|
-
consola.log(e);
|
|
42
|
-
}
|
|
43
|
-
return result;
|
|
44
|
-
}
|
|
45
|
-
const unstyled = computed(() => {
|
|
46
|
-
return context?.unstyled ?? isGlobalUnstyledMode();
|
|
47
|
-
});
|
|
48
|
-
const formKitCreateInputSlots = new Set([
|
|
49
|
-
"label",
|
|
50
|
-
"help",
|
|
51
|
-
"messages",
|
|
52
|
-
"message",
|
|
53
|
-
"input"
|
|
54
|
-
]);
|
|
55
|
-
const validSlotNames = computed(() => Object.keys(context?.slots || {}).filter((slotName) => !formKitCreateInputSlots.has(slotName)));
|
|
56
|
-
function handleBlur(event) {
|
|
57
|
-
context?.handlers?.blur?.(event);
|
|
58
|
-
}
|
|
59
|
-
function handleChange(_) {
|
|
60
|
-
context?.node?.input?.(context?._value);
|
|
61
|
-
}
|
|
62
|
-
function handleInput(_) {
|
|
63
|
-
context?.node?.input?.(context?._value);
|
|
64
|
-
}
|
|
65
|
-
function handleSelect(e) {
|
|
66
|
-
context?.node?.input?.(e);
|
|
67
|
-
}
|
|
68
|
-
return {
|
|
69
|
-
isInvalid,
|
|
70
|
-
validSlotNames,
|
|
71
|
-
styleClass,
|
|
72
|
-
unstyled,
|
|
73
|
-
handleBlur,
|
|
74
|
-
handleChange,
|
|
75
|
-
handleInput,
|
|
76
|
-
handleSelect,
|
|
77
|
-
modelValue: computed({
|
|
78
|
-
get: () => context._value,
|
|
79
|
-
set: (value) => {
|
|
80
|
-
context.node.input(value);
|
|
81
|
-
}
|
|
82
|
-
})
|
|
83
|
-
};
|
|
84
|
-
}
|
|
85
|
-
//#endregion
|
|
86
|
-
//#region src/composables/useFormKitSchema.ts
|
|
87
|
-
function useFormKitSchema() {
|
|
88
|
-
const addComponent = (component = "Button", props = {}, render = true, formKitAttrs = {}) => {
|
|
89
|
-
return {
|
|
90
|
-
$cmp: component,
|
|
91
|
-
if: render.toString(),
|
|
92
|
-
props,
|
|
93
|
-
...formKitAttrs
|
|
94
|
-
};
|
|
95
|
-
};
|
|
96
|
-
const addElement = (element = "div", children = [], attrs = {}, render = true, formKitAttrs = {}) => {
|
|
97
|
-
return {
|
|
98
|
-
$el: element,
|
|
99
|
-
if: render.toString(),
|
|
100
|
-
attrs,
|
|
101
|
-
children,
|
|
102
|
-
...formKitAttrs
|
|
103
|
-
};
|
|
104
|
-
};
|
|
105
|
-
const addGroup = (name, children = [], render = true, formKitAttrs = {}) => {
|
|
106
|
-
return {
|
|
107
|
-
$formkit: "group",
|
|
108
|
-
if: render.toString(),
|
|
109
|
-
name,
|
|
110
|
-
children,
|
|
111
|
-
...formKitAttrs
|
|
112
|
-
};
|
|
113
|
-
};
|
|
114
|
-
const addList = (name, children = [], dynamic = true, render = true, formKitAttrs = {}) => {
|
|
115
|
-
return {
|
|
116
|
-
$formkit: "list",
|
|
117
|
-
if: render.toString(),
|
|
118
|
-
name,
|
|
119
|
-
dynamic,
|
|
120
|
-
children,
|
|
121
|
-
...formKitAttrs
|
|
122
|
-
};
|
|
123
|
-
};
|
|
124
|
-
const addListGroup = (children = [], render = true, formKitAttrs = {}) => {
|
|
125
|
-
return {
|
|
126
|
-
$formkit: "group",
|
|
127
|
-
if: render.toString(),
|
|
128
|
-
for: [
|
|
129
|
-
"item",
|
|
130
|
-
"index",
|
|
131
|
-
"$items"
|
|
132
|
-
],
|
|
133
|
-
key: "$item",
|
|
134
|
-
index: "$index",
|
|
135
|
-
children,
|
|
136
|
-
...formKitAttrs
|
|
137
|
-
};
|
|
138
|
-
};
|
|
139
|
-
const addElementsInOuterDiv = (children = [], innerClass = "", outerClass = "", label = "", help = "", render = true) => {
|
|
140
|
-
const inner = addElement("div", children, {
|
|
141
|
-
class: `formkit-inner ${innerClass}`,
|
|
142
|
-
style: "position: relative;"
|
|
143
|
-
});
|
|
144
|
-
return addElement("div", [addElement("div", [addElement("label", [label], { class: "formkit-label" }), inner], { class: "formkit-wrapper" }), addElement("div", [help], { class: "formkit-help" })], {
|
|
145
|
-
class: `formkit-outer ${outerClass}`,
|
|
146
|
-
style: "position: relative;"
|
|
147
|
-
}, render);
|
|
148
|
-
};
|
|
149
|
-
return {
|
|
150
|
-
addComponent,
|
|
151
|
-
addElement,
|
|
152
|
-
addGroup,
|
|
153
|
-
addList,
|
|
154
|
-
addListGroup,
|
|
155
|
-
addElementsInOuterDiv
|
|
156
|
-
};
|
|
157
|
-
}
|
|
158
|
-
//#endregion
|
|
159
|
-
//#region src/composables/useFormKitRepeater.ts
|
|
160
|
-
function useFormKitRepeater() {
|
|
161
|
-
const { addElement, addComponent, addElementsInOuterDiv } = useFormKitSchema();
|
|
162
|
-
function addInsertButton(label = "Add", innerClass = "", outerClass = "", buttonClass = "p-button-sm", iconClass = "pi pi-plus") {
|
|
163
|
-
return addElementsInOuterDiv([addComponent("Button", {
|
|
164
|
-
onClick: "$addNode($node)",
|
|
165
|
-
label,
|
|
166
|
-
class: buttonClass,
|
|
167
|
-
icon: iconClass
|
|
168
|
-
}, "$node.children.length == 0")], innerClass, outerClass);
|
|
169
|
-
}
|
|
170
|
-
function addListGroupFunctions(data, addNodeDefaultObject = {}) {
|
|
171
|
-
const swapElements = (array, index1, index2) => {
|
|
172
|
-
const newArray = [...array];
|
|
173
|
-
const temp = newArray[index1];
|
|
174
|
-
newArray[index1] = newArray[index2];
|
|
175
|
-
newArray[index2] = temp;
|
|
176
|
-
return newArray;
|
|
177
|
-
};
|
|
178
|
-
data.addNode = (parentNode) => () => {
|
|
179
|
-
const newArray = [...parentNode.value, addNodeDefaultObject];
|
|
180
|
-
parentNode.input(newArray, false);
|
|
181
|
-
};
|
|
182
|
-
data.removeNode = (parentNode, index) => () => {
|
|
183
|
-
parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
|
|
184
|
-
};
|
|
185
|
-
data.moveNodeUp = (parentNode, index) => () => {
|
|
186
|
-
const array = [...parentNode.value];
|
|
187
|
-
if (index > 0) parentNode.input(swapElements(array, index - 1, index), false);
|
|
188
|
-
};
|
|
189
|
-
data.moveNodeDown = (parentNode, index) => () => {
|
|
190
|
-
const array = [...parentNode.value];
|
|
191
|
-
if (index < array.length - 1) parentNode.input(swapElements(array, index, index + 1), false);
|
|
192
|
-
};
|
|
193
|
-
data.copyNode = (parentNode, index) => () => {
|
|
194
|
-
const obj = parentNode.value[index];
|
|
195
|
-
const newArray = [...parentNode.value, { ...obj }];
|
|
196
|
-
parentNode.input(newArray, false);
|
|
197
|
-
};
|
|
198
|
-
}
|
|
199
|
-
function addGroupButtons(innerClass = "", outerClass = "col-4", label = "Actions", help = "", render = "true") {
|
|
200
|
-
const addButtonComponent = (onClick = "", label = "", icon = "", severity = "", render = "true", styleClass = "p-button-sm") => {
|
|
201
|
-
return addComponent("Button", {
|
|
202
|
-
onClick,
|
|
203
|
-
label,
|
|
204
|
-
icon,
|
|
205
|
-
class: styleClass,
|
|
206
|
-
severity
|
|
207
|
-
}, render);
|
|
208
|
-
};
|
|
209
|
-
return addElementsInOuterDiv([
|
|
210
|
-
addButtonComponent("$removeNode($node.parent, $index)", "", "pi pi-times", "danger"),
|
|
211
|
-
addButtonComponent("$copyNode($node.parent, $index)", "", "pi pi-plus"),
|
|
212
|
-
addButtonComponent("$moveNodeUp($node.parent, $index)", "", "pi pi-arrow-up", "secondary", "$index != 0"),
|
|
213
|
-
addElement("span", [], { class: "p-space" }, "$index == 0"),
|
|
214
|
-
addButtonComponent("$moveNodeDown($node.parent, $index)", "", "pi pi-arrow-down", "secondary", "$index < $node.parent.value.length -1"),
|
|
215
|
-
addElement("span", [], { class: "p-space" }, "$index == $node.parent.value.length -1")
|
|
216
|
-
], `p-action-buttons ${innerClass}`, outerClass, label, help, render);
|
|
217
|
-
}
|
|
218
|
-
return {
|
|
219
|
-
addInsertButton,
|
|
220
|
-
addGroupButtons,
|
|
221
|
-
addListGroupFunctions
|
|
222
|
-
};
|
|
223
|
-
}
|
|
224
|
-
//#endregion
|
|
225
|
-
//#region src/composables/useFormKitSection.ts
|
|
226
|
-
function useFormKitSection(context) {
|
|
227
|
-
const hasPrefix = computed(() => {
|
|
228
|
-
return Boolean(context?.prefix?.length > 0);
|
|
229
|
-
});
|
|
230
|
-
const hasPrefixIcon = computed(() => {
|
|
231
|
-
return Boolean(context?.iconPrefix?.length > 0);
|
|
232
|
-
});
|
|
233
|
-
const hasSuffixIcon = computed(() => {
|
|
234
|
-
return Boolean(context?.iconSuffix?.length > 0);
|
|
235
|
-
});
|
|
236
|
-
const hasSuffix = computed(() => {
|
|
237
|
-
return Boolean(context?.suffix?.length > 0);
|
|
238
|
-
});
|
|
239
|
-
function generateId() {
|
|
240
|
-
return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
|
|
241
|
-
}
|
|
242
|
-
return {
|
|
243
|
-
generateId,
|
|
244
|
-
hasPrefix,
|
|
245
|
-
hasPrefixIcon,
|
|
246
|
-
hasSuffix,
|
|
247
|
-
hasSuffixIcon
|
|
248
|
-
};
|
|
249
|
-
}
|
|
250
|
-
//#endregion
|
|
251
|
-
//#region src/composables/useInputEditor.ts
|
|
252
|
-
function useInputEditor() {
|
|
253
|
-
const primeInputWithOptionNames = [
|
|
254
|
-
"CascadeSelect",
|
|
255
|
-
"Listbox",
|
|
256
|
-
"MultiSelect",
|
|
257
|
-
"RadioButton",
|
|
258
|
-
"Select",
|
|
259
|
-
"SelectButton",
|
|
260
|
-
"TreeSelect"
|
|
261
|
-
];
|
|
262
|
-
const primeInputNames = [
|
|
263
|
-
...primeInputWithOptionNames,
|
|
264
|
-
"AutoComplete",
|
|
265
|
-
"Checkbox",
|
|
266
|
-
"ColorPicker",
|
|
267
|
-
"DatePicker",
|
|
268
|
-
"Editor",
|
|
269
|
-
"InputMask",
|
|
270
|
-
"InputNumber",
|
|
271
|
-
"InputOtp",
|
|
272
|
-
"InputText",
|
|
273
|
-
"Knob",
|
|
274
|
-
"Password",
|
|
275
|
-
"Rating",
|
|
276
|
-
"Slider",
|
|
277
|
-
"Textarea",
|
|
278
|
-
"ToggleButton",
|
|
279
|
-
"ToggleSwitch"
|
|
280
|
-
].sort();
|
|
281
|
-
const primeOutputNames = [
|
|
282
|
-
"OutputBoolean",
|
|
283
|
-
"OutputDate",
|
|
284
|
-
"OutputDuration",
|
|
285
|
-
"OutputLink",
|
|
286
|
-
"OutputList",
|
|
287
|
-
"OutputNumber",
|
|
288
|
-
"OutputReference",
|
|
289
|
-
"OutputText"
|
|
290
|
-
];
|
|
291
|
-
function editorDataToSchema(data) {
|
|
292
|
-
if (!data) return {};
|
|
293
|
-
const formkitInput = data?._dollar_formkit;
|
|
294
|
-
let tempData = {};
|
|
295
|
-
if (data.prime && Array.isArray(data.prime) && data.prime.length > 0) {
|
|
296
|
-
const mapped = data.prime.filter((entry) => entry && typeof entry === "object" && "prime_key" in entry && "prime_value" in entry).map((entry) => {
|
|
297
|
-
const key = entry.prime_key || "";
|
|
298
|
-
let value = entry.prime_value;
|
|
299
|
-
if (formkitInput === "primeInputOtp" && key === "length" && value !== void 0) value = Number(value);
|
|
300
|
-
return [key, value];
|
|
301
|
-
});
|
|
302
|
-
tempData = Object.assign({}, ...mapped.map(([key, val]) => ({ [key]: val })));
|
|
303
|
-
}
|
|
304
|
-
const defaultObject = {
|
|
305
|
-
readonly: data.readonly === true ? true : void 0,
|
|
306
|
-
disabled: data.disabled === true ? true : void 0,
|
|
307
|
-
preserve: data.preserve === true ? true : void 0
|
|
308
|
-
};
|
|
309
|
-
let outerClass = "";
|
|
310
|
-
if (data.outerClass) outerClass = `${outerClass} ${data.outerClass}`.trim();
|
|
311
|
-
let wrapperClass = "";
|
|
312
|
-
if (data.wrapperClass) wrapperClass = `${wrapperClass} ${data.wrapperClass}`.trim();
|
|
313
|
-
let innerClass = "";
|
|
314
|
-
if (data.innerClass) innerClass = `${innerClass} ${data.innerClass}`.trim();
|
|
315
|
-
const undefinedObject = {
|
|
316
|
-
prime: void 0,
|
|
317
|
-
schemaResultFormKey: void 0,
|
|
318
|
-
_dollar_formkit: void 0,
|
|
319
|
-
slots: void 0,
|
|
320
|
-
selectButton: void 0
|
|
321
|
-
};
|
|
322
|
-
const useOptions = formkitInput ? primeInputWithOptionNames.map((s) => `prime${s}`).includes(formkitInput) : false;
|
|
323
|
-
let result = {};
|
|
324
|
-
if (useOptions) result = {
|
|
325
|
-
...data,
|
|
326
|
-
$formkit: formkitInput,
|
|
327
|
-
...tempData,
|
|
328
|
-
...undefinedObject,
|
|
329
|
-
...defaultObject,
|
|
330
|
-
outerClass,
|
|
331
|
-
wrapperClass,
|
|
332
|
-
innerClass,
|
|
333
|
-
optionLabel: "label",
|
|
334
|
-
optionValue: "value"
|
|
335
|
-
};
|
|
336
|
-
else result = {
|
|
337
|
-
...data,
|
|
338
|
-
$formkit: formkitInput,
|
|
339
|
-
...tempData,
|
|
340
|
-
...undefinedObject,
|
|
341
|
-
...defaultObject,
|
|
342
|
-
outerClass,
|
|
343
|
-
wrapperClass,
|
|
344
|
-
innerClass,
|
|
345
|
-
options: void 0
|
|
346
|
-
};
|
|
347
|
-
for (const key in result) {
|
|
348
|
-
const value = result[key];
|
|
349
|
-
if (value !== null && value !== void 0 && typeof value === "string") {
|
|
350
|
-
if (value.trim().length === 0) result[key] = void 0;
|
|
351
|
-
}
|
|
352
|
-
}
|
|
353
|
-
return result;
|
|
354
|
-
}
|
|
355
|
-
function dataToSchema(data) {
|
|
356
|
-
if (!data) return {};
|
|
357
|
-
const schema = editorDataToSchema(data);
|
|
358
|
-
if (schema?.options && Array.isArray(schema.options)) {
|
|
359
|
-
const options = schema.options.map((o) => o ? JSON.parse(JSON.stringify(o)) : {});
|
|
360
|
-
return {
|
|
361
|
-
...schema,
|
|
362
|
-
options
|
|
363
|
-
};
|
|
364
|
-
} else return schema;
|
|
365
|
-
}
|
|
366
|
-
function editorDataToJson(data) {
|
|
367
|
-
if (!data) return "{}";
|
|
368
|
-
return JSON.stringify(dataToSchema(data));
|
|
369
|
-
}
|
|
370
|
-
function objectToString(data) {
|
|
371
|
-
if (!data) return "{}";
|
|
372
|
-
return `{${Object.entries(data).map(([key, value]) => {
|
|
373
|
-
if (key === "options" && Array.isArray(value) && value.length > 0) {
|
|
374
|
-
let result = "[";
|
|
375
|
-
value.forEach((o) => {
|
|
376
|
-
if (o && typeof o === "object") result = `${result + objectToString(o)}, `;
|
|
377
|
-
});
|
|
378
|
-
return `${key}: ${result.substring(0, result.length - 2)}]`;
|
|
379
|
-
} else if (key === "primeInputOtp") return `${key}: ${value}`;
|
|
380
|
-
else return `${key}: '${value}'`;
|
|
381
|
-
}).join()}}`;
|
|
382
|
-
}
|
|
383
|
-
function editorDataToObject(data) {
|
|
384
|
-
if (!data) return "{}";
|
|
385
|
-
try {
|
|
386
|
-
const jsonData = editorDataToJson(data);
|
|
387
|
-
return objectToString(JSON.parse(jsonData));
|
|
388
|
-
} catch (error) {
|
|
389
|
-
console.error("Error in editorDataToObject:", error);
|
|
390
|
-
return "{}";
|
|
391
|
-
}
|
|
392
|
-
}
|
|
393
|
-
function schemaToEditorData(schema) {
|
|
394
|
-
if (!schema) return {};
|
|
395
|
-
const formkitInput = schema?.$formkit;
|
|
396
|
-
return {
|
|
397
|
-
...schema,
|
|
398
|
-
_dollar_formkit: formkitInput
|
|
399
|
-
};
|
|
400
|
-
}
|
|
401
|
-
return {
|
|
402
|
-
primeInputNames,
|
|
403
|
-
primeOutputNames,
|
|
404
|
-
editorDataToSchema,
|
|
405
|
-
editorDataToJson,
|
|
406
|
-
editorDataToCode: editorDataToObject,
|
|
407
|
-
schemaToEditorData
|
|
408
|
-
};
|
|
409
|
-
}
|
|
410
|
-
//#endregion
|
|
411
|
-
//#region src/composables/useInputEditorSchema.ts
|
|
412
|
-
function useInputEditorSchema() {
|
|
413
|
-
const { addList, addListGroup } = useFormKitSchema();
|
|
414
|
-
const { addInsertButton, addGroupButtons } = useFormKitRepeater();
|
|
415
|
-
const { primeInputNames, primeOutputNames } = useInputEditor();
|
|
416
|
-
function primeInputOptions(list) {
|
|
417
|
-
return list.map((name) => {
|
|
418
|
-
return {
|
|
419
|
-
label: name,
|
|
420
|
-
value: `prime${name}`
|
|
421
|
-
};
|
|
422
|
-
});
|
|
423
|
-
}
|
|
424
|
-
const selectOptions = [
|
|
425
|
-
{
|
|
426
|
-
label: "Base",
|
|
427
|
-
value: "showBasic"
|
|
428
|
-
},
|
|
429
|
-
{
|
|
430
|
-
label: "Display",
|
|
431
|
-
value: "showDisplay"
|
|
432
|
-
},
|
|
433
|
-
{
|
|
434
|
-
label: "Style",
|
|
435
|
-
value: "showStyle"
|
|
436
|
-
},
|
|
437
|
-
{
|
|
438
|
-
label: "Validation",
|
|
439
|
-
value: "showValidation"
|
|
440
|
-
},
|
|
441
|
-
{
|
|
442
|
-
label: "Options",
|
|
443
|
-
value: "showOptions"
|
|
444
|
-
},
|
|
445
|
-
{
|
|
446
|
-
label: "Prime",
|
|
447
|
-
value: "showPrime"
|
|
448
|
-
}
|
|
449
|
-
];
|
|
450
|
-
const validationOptions = [
|
|
451
|
-
{
|
|
452
|
-
label: "Blur",
|
|
453
|
-
value: "blur"
|
|
454
|
-
},
|
|
455
|
-
{
|
|
456
|
-
label: "Live",
|
|
457
|
-
value: "live"
|
|
458
|
-
},
|
|
459
|
-
{
|
|
460
|
-
label: "Dirty",
|
|
461
|
-
value: "dirty"
|
|
462
|
-
},
|
|
463
|
-
{
|
|
464
|
-
label: "Submit",
|
|
465
|
-
value: "submit"
|
|
466
|
-
}
|
|
467
|
-
];
|
|
468
|
-
function editorSchema(inputOptions = primeInputOptions([...primeInputNames, ...primeOutputNames])) {
|
|
469
|
-
return [
|
|
470
|
-
{
|
|
471
|
-
$formkit: "primeSelect",
|
|
472
|
-
id: "inputSelection",
|
|
473
|
-
name: "_dollar_formkit",
|
|
474
|
-
label: "Prime Input",
|
|
475
|
-
value: "primeInputText",
|
|
476
|
-
optionLabel: "label",
|
|
477
|
-
optionValue: "value",
|
|
478
|
-
options: inputOptions,
|
|
479
|
-
filter: true,
|
|
480
|
-
key: "schema_inputSelection",
|
|
481
|
-
outerClass: "col-6",
|
|
482
|
-
preserve: true
|
|
483
|
-
},
|
|
484
|
-
{
|
|
485
|
-
$formkit: "primeInputText",
|
|
486
|
-
name: "name",
|
|
487
|
-
label: "Field Name",
|
|
488
|
-
validation: "required",
|
|
489
|
-
validationVisibility: "live",
|
|
490
|
-
key: "schema_name",
|
|
491
|
-
outerClass: "col-6",
|
|
492
|
-
preserve: true
|
|
493
|
-
},
|
|
494
|
-
{
|
|
495
|
-
$formkit: "primeSelectButton",
|
|
496
|
-
id: "selectButton",
|
|
497
|
-
name: "selectButton",
|
|
498
|
-
options: selectOptions,
|
|
499
|
-
optionLabel: "label",
|
|
500
|
-
optionValue: "value",
|
|
501
|
-
value: "showBasic",
|
|
502
|
-
allowEmpty: false,
|
|
503
|
-
key: "schema_selectButton",
|
|
504
|
-
preserve: true
|
|
505
|
-
},
|
|
506
|
-
{
|
|
507
|
-
$formkit: "primeInputText",
|
|
508
|
-
if: "$get(selectButton).value === 'showBasic'",
|
|
509
|
-
name: "label",
|
|
510
|
-
label: "Input Label",
|
|
511
|
-
key: "schema_label",
|
|
512
|
-
preserve: true
|
|
513
|
-
},
|
|
514
|
-
{
|
|
515
|
-
$formkit: "primeInputText",
|
|
516
|
-
if: "$get(selectButton).value === 'showBasic'",
|
|
517
|
-
name: "help",
|
|
518
|
-
label: "Input Help",
|
|
519
|
-
key: "schema_help",
|
|
520
|
-
preserve: true
|
|
521
|
-
},
|
|
522
|
-
{
|
|
523
|
-
$formkit: "primeInputText",
|
|
524
|
-
if: "$get(selectButton).value === 'showBasic'",
|
|
525
|
-
name: "value",
|
|
526
|
-
label: "Input Value",
|
|
527
|
-
key: "schema_value",
|
|
528
|
-
outerClass: "col-6",
|
|
529
|
-
preserve: true
|
|
530
|
-
},
|
|
531
|
-
{
|
|
532
|
-
$formkit: "primeInputText",
|
|
533
|
-
if: "$get(selectButton).value === 'showBasic'",
|
|
534
|
-
name: "format",
|
|
535
|
-
label: "Value Format",
|
|
536
|
-
key: "schema_format",
|
|
537
|
-
outerClass: "col-6",
|
|
538
|
-
preserve: true
|
|
539
|
-
},
|
|
540
|
-
{
|
|
541
|
-
$formkit: "primeInputText",
|
|
542
|
-
if: "$get(selectButton).value === 'showBasic'",
|
|
543
|
-
name: "id",
|
|
544
|
-
label: "Input ID",
|
|
545
|
-
key: "schema_id",
|
|
546
|
-
outerClass: "col-6",
|
|
547
|
-
preserve: true
|
|
548
|
-
},
|
|
549
|
-
{
|
|
550
|
-
$formkit: "primeInputText",
|
|
551
|
-
if: "$get(selectButton).value === 'showBasic'",
|
|
552
|
-
name: "key",
|
|
553
|
-
label: "Input Key",
|
|
554
|
-
key: "schema_key",
|
|
555
|
-
outerClass: "col-6",
|
|
556
|
-
preserve: true
|
|
557
|
-
},
|
|
558
|
-
{
|
|
559
|
-
$formkit: "primeInputText",
|
|
560
|
-
if: "$get(selectButton).value === 'showBasic'",
|
|
561
|
-
name: "tabindex",
|
|
562
|
-
label: "Tab Index",
|
|
563
|
-
key: "schema_tabindex",
|
|
564
|
-
outerClass: "col-6",
|
|
565
|
-
preserve: true
|
|
566
|
-
},
|
|
567
|
-
{
|
|
568
|
-
$formkit: "primeCheckbox",
|
|
569
|
-
if: "$get(selectButton).value === 'showBasic'",
|
|
570
|
-
name: "preserve",
|
|
571
|
-
label: "Preserve",
|
|
572
|
-
key: "schema_preserve",
|
|
573
|
-
value: false,
|
|
574
|
-
suffix: "Input Preserve",
|
|
575
|
-
outerClass: "col-3",
|
|
576
|
-
preserve: true
|
|
577
|
-
},
|
|
578
|
-
{
|
|
579
|
-
$formkit: "primeInputText",
|
|
580
|
-
if: "$get(selectButton).value === 'showDisplay'",
|
|
581
|
-
name: "class",
|
|
582
|
-
label: "Input StyleClass",
|
|
583
|
-
key: "schema_class",
|
|
584
|
-
outerClass: "col-6",
|
|
585
|
-
preserve: true
|
|
586
|
-
},
|
|
587
|
-
{
|
|
588
|
-
$formkit: "primeInputText",
|
|
589
|
-
if: "$get(selectButton).value === 'showDisplay'",
|
|
590
|
-
name: "style",
|
|
591
|
-
label: "Input Style",
|
|
592
|
-
key: "schema_style",
|
|
593
|
-
outerClass: "col-6",
|
|
594
|
-
preserve: true
|
|
595
|
-
},
|
|
596
|
-
{
|
|
597
|
-
$formkit: "primeInputText",
|
|
598
|
-
if: "$get(selectButton).value === 'showDisplay'",
|
|
599
|
-
name: "if",
|
|
600
|
-
label: "Should Render (if-Expression)",
|
|
601
|
-
key: "schema_if",
|
|
602
|
-
preserve: true
|
|
603
|
-
},
|
|
604
|
-
{
|
|
605
|
-
$formkit: "primeInputText",
|
|
606
|
-
if: "$get(selectButton).value === 'showDisplay'",
|
|
607
|
-
name: "iconPrefix",
|
|
608
|
-
label: "Prefix Icon",
|
|
609
|
-
key: "schema_prefix_icon",
|
|
610
|
-
outerClass: "col-6",
|
|
611
|
-
preserve: true
|
|
612
|
-
},
|
|
613
|
-
{
|
|
614
|
-
$formkit: "primeInputText",
|
|
615
|
-
if: "$get(selectButton).value === 'showDisplay'",
|
|
616
|
-
name: "prefix",
|
|
617
|
-
label: "Prefix",
|
|
618
|
-
key: "schema_prefix",
|
|
619
|
-
outerClass: "col-6",
|
|
620
|
-
preserve: true
|
|
621
|
-
},
|
|
622
|
-
{
|
|
623
|
-
$formkit: "primeInputText",
|
|
624
|
-
if: "$get(selectButton).value === 'showDisplay'",
|
|
625
|
-
name: "suffix",
|
|
626
|
-
label: "Suffix",
|
|
627
|
-
key: "schema_suffix",
|
|
628
|
-
outerClass: "col-6",
|
|
629
|
-
preserve: true
|
|
630
|
-
},
|
|
631
|
-
{
|
|
632
|
-
$formkit: "primeInputText",
|
|
633
|
-
if: "$get(selectButton).value === 'showDisplay'",
|
|
634
|
-
name: "iconSuffix",
|
|
635
|
-
label: "Suffix Icon",
|
|
636
|
-
key: "schema_suffix_icon",
|
|
637
|
-
outerClass: "col-6",
|
|
638
|
-
preserve: true
|
|
639
|
-
},
|
|
640
|
-
{
|
|
641
|
-
$formkit: "primeCheckbox",
|
|
642
|
-
if: "$get(selectButton).value === 'showDisplay'",
|
|
643
|
-
name: "disabled",
|
|
644
|
-
label: "Input Disabled",
|
|
645
|
-
key: "schema_disabled",
|
|
646
|
-
value: false,
|
|
647
|
-
outerClass: "col-3",
|
|
648
|
-
preserve: true
|
|
649
|
-
},
|
|
650
|
-
{
|
|
651
|
-
$formkit: "primeCheckbox",
|
|
652
|
-
if: "$get(selectButton).value === 'showDisplay'",
|
|
653
|
-
name: "readonly",
|
|
654
|
-
label: "Input Read Only",
|
|
655
|
-
key: "schema_readonly",
|
|
656
|
-
value: false,
|
|
657
|
-
outerClass: "col-3",
|
|
658
|
-
preserve: true
|
|
659
|
-
},
|
|
660
|
-
{
|
|
661
|
-
$formkit: "primeInputText",
|
|
662
|
-
if: "$get(selectButton).value === 'showStyle'",
|
|
663
|
-
name: "outerClass",
|
|
664
|
-
label: "Outer Class",
|
|
665
|
-
key: "schema_outerClass",
|
|
666
|
-
preserve: true
|
|
667
|
-
},
|
|
668
|
-
{
|
|
669
|
-
$formkit: "primeInputText",
|
|
670
|
-
if: "$get(selectButton).value === 'showStyle'",
|
|
671
|
-
name: "wrapperClass",
|
|
672
|
-
label: "Wrapper Class",
|
|
673
|
-
key: "schema_wrapperClass",
|
|
674
|
-
preserve: true
|
|
675
|
-
},
|
|
676
|
-
{
|
|
677
|
-
$formkit: "primeInputText",
|
|
678
|
-
if: "$get(selectButton).value === 'showStyle'",
|
|
679
|
-
name: "innerClass",
|
|
680
|
-
label: "Inner Class",
|
|
681
|
-
key: "schema_innerClass",
|
|
682
|
-
preserve: true
|
|
683
|
-
},
|
|
684
|
-
{
|
|
685
|
-
$formkit: "primeInputText",
|
|
686
|
-
if: "$get(selectButton).value === 'showValidation'",
|
|
687
|
-
name: "validation",
|
|
688
|
-
label: "Field Validation",
|
|
689
|
-
key: "schema_validation",
|
|
690
|
-
outerClass: "col-6",
|
|
691
|
-
preserve: true
|
|
692
|
-
},
|
|
693
|
-
{
|
|
694
|
-
$formkit: "primeSelect",
|
|
695
|
-
if: "$get(selectButton).value === 'showValidation'",
|
|
696
|
-
name: "validation-visibility",
|
|
697
|
-
label: "Field Validation Visibility",
|
|
698
|
-
optionLabel: "label",
|
|
699
|
-
optionValue: "value",
|
|
700
|
-
options: validationOptions,
|
|
701
|
-
key: "schema_validation-visibility",
|
|
702
|
-
outerClass: "col-6",
|
|
703
|
-
preserve: true
|
|
704
|
-
},
|
|
705
|
-
{
|
|
706
|
-
$formkit: "primeInputText",
|
|
707
|
-
if: "$get(selectButton).value === 'showValidation'",
|
|
708
|
-
name: "validation-label",
|
|
709
|
-
label: "Field Validation Label",
|
|
710
|
-
key: "schema_validation-label",
|
|
711
|
-
preserve: true
|
|
712
|
-
},
|
|
713
|
-
addList("options", [addInsertButton("Add Option"), addListGroup([
|
|
714
|
-
{
|
|
715
|
-
$formkit: "primeInputText",
|
|
716
|
-
label: "Label",
|
|
717
|
-
name: "label",
|
|
718
|
-
outerClass: "col-4"
|
|
719
|
-
},
|
|
720
|
-
{
|
|
721
|
-
$formkit: "primeInputText",
|
|
722
|
-
label: "Value",
|
|
723
|
-
name: "value",
|
|
724
|
-
outerClass: "col-4"
|
|
725
|
-
},
|
|
726
|
-
addGroupButtons()
|
|
727
|
-
])], true, "$get(selectButton).value === 'showOptions'", {
|
|
728
|
-
key: "schema_options",
|
|
729
|
-
preserve: true
|
|
730
|
-
}),
|
|
731
|
-
addList("prime", [addInsertButton("Add PrimeVue Attribute"), addListGroup([
|
|
732
|
-
{
|
|
733
|
-
$formkit: "primeInputText",
|
|
734
|
-
label: "PrimeVue Key",
|
|
735
|
-
name: "prime_key",
|
|
736
|
-
outerClass: "col-3"
|
|
737
|
-
},
|
|
738
|
-
{
|
|
739
|
-
$formkit: "primeInputText",
|
|
740
|
-
label: "Value",
|
|
741
|
-
name: "prime_value",
|
|
742
|
-
outerClass: "col-3"
|
|
743
|
-
},
|
|
744
|
-
addGroupButtons()
|
|
745
|
-
])], true, "$get(selectButton).value === 'showPrime'", {
|
|
746
|
-
key: "schema_prime",
|
|
747
|
-
preserve: true
|
|
748
|
-
})
|
|
749
|
-
];
|
|
750
|
-
}
|
|
751
|
-
return {
|
|
752
|
-
editorSchema,
|
|
753
|
-
primeInputOptions
|
|
754
|
-
};
|
|
755
|
-
}
|
|
756
|
-
//#endregion
|
|
757
|
-
//#region src/composables/useOutputDuration.ts
|
|
758
|
-
function useOutputDuration() {
|
|
759
|
-
function durationToMinutes(duration) {
|
|
760
|
-
let hours = 0;
|
|
761
|
-
let minutes = 0;
|
|
762
|
-
const lowerDuration = duration.toLowerCase();
|
|
763
|
-
if (lowerDuration.includes(":")) {
|
|
764
|
-
const [h, m] = lowerDuration.split(":").map((part) => +(part?.trim() || "0"));
|
|
765
|
-
hours = h ?? 0;
|
|
766
|
-
minutes = m ?? 0;
|
|
767
|
-
} else if (lowerDuration.includes("h")) {
|
|
768
|
-
hours = +(lowerDuration.split("h")[0]?.trim() || "0");
|
|
769
|
-
const remainder = lowerDuration.split("h")[1] || "";
|
|
770
|
-
if (remainder.includes("m")) minutes = +(remainder.split("m")[0]?.trim() || "0");
|
|
771
|
-
else if (/^\d+$/.test(remainder)) minutes = +remainder;
|
|
772
|
-
} else if (lowerDuration.includes("m")) minutes = +(lowerDuration.split("m")[0]?.trim() || "0");
|
|
773
|
-
else if (/^\d+$/.test(lowerDuration)) minutes = +lowerDuration;
|
|
774
|
-
return hours * 60 + minutes;
|
|
775
|
-
}
|
|
776
|
-
function formattedDuration(duration) {
|
|
777
|
-
const minutes = durationToMinutes(duration);
|
|
778
|
-
const hours = Math.trunc(minutes / 60);
|
|
779
|
-
const remainingMinutes = minutes % 60;
|
|
780
|
-
if (minutes === 0) return "0";
|
|
781
|
-
return `${hours > 0 ? `${hours}h` : ""}${hours > 0 && remainingMinutes > 0 ? " " : ""}${remainingMinutes > 0 ? `${remainingMinutes}m` : ""}`;
|
|
782
|
-
}
|
|
783
|
-
return {
|
|
784
|
-
durationToMinutes,
|
|
785
|
-
formattedDuration
|
|
786
|
-
};
|
|
787
|
-
}
|
|
788
|
-
//#endregion
|
|
789
|
-
//#region src/composables/usePrimeInputs.ts
|
|
790
|
-
function usePrimeInputs() {
|
|
791
|
-
function registerInputs(app) {
|
|
792
|
-
app.component("AutoComplete", AutoComplete);
|
|
793
|
-
app.component("Button", Button);
|
|
794
|
-
app.component("CascadeSelect", CascadeSelect);
|
|
795
|
-
app.component("Checkbox", Checkbox);
|
|
796
|
-
app.component("Chip", Chip);
|
|
797
|
-
app.component("ColorPicker", ColorPicker);
|
|
798
|
-
app.component("DatePicker", DatePicker);
|
|
799
|
-
app.component("InputMask", InputMask);
|
|
800
|
-
app.component("InputNumber", InputNumber);
|
|
801
|
-
app.component("InputOtp", InputOtp);
|
|
802
|
-
app.component("InputText", InputText);
|
|
803
|
-
app.component("Knob", Knob);
|
|
804
|
-
app.component("Listbox", Listbox);
|
|
805
|
-
app.component("MultiSelect", MultiSelect);
|
|
806
|
-
app.component("Password", Password);
|
|
807
|
-
app.component("RadioButton", RadioButton);
|
|
808
|
-
app.component("Rating", Rating);
|
|
809
|
-
app.component("Select", Select);
|
|
810
|
-
app.component("SelectButton", SelectButton);
|
|
811
|
-
app.component("Slider", Slider);
|
|
812
|
-
app.component("Textarea", Textarea);
|
|
813
|
-
app.component("ToggleButton", ToggleButton);
|
|
814
|
-
app.component("ToggleSwitch", ToggleSwitch);
|
|
815
|
-
app.component("TreeSelect", TreeSelect);
|
|
816
|
-
}
|
|
817
|
-
return { registerInputs };
|
|
818
|
-
}
|
|
819
|
-
//#endregion
|
|
820
|
-
export { useFormKitSection as a, useFormKitInput as c, useInputEditor as i, useOutputDuration as n, useFormKitRepeater as o, useInputEditorSchema as r, useFormKitSchema as s, usePrimeInputs as t };
|