@sfxcode/formkit-primevue 2.3.8 → 2.3.10
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/PrimeCheckbox.vue +9 -6
- package/dist/components/PrimeOutputBoolean.vue +9 -4
- package/dist/components/PrimeOutputDate.vue +6 -2
- package/dist/components/PrimeOutputDuration.vue +6 -2
- package/dist/components/PrimeOutputLink.vue +7 -2
- package/dist/components/PrimeOutputList.vue +7 -1
- package/dist/components/PrimeOutputNumber.vue +6 -2
- package/dist/components/PrimeOutputText.vue +7 -1
- package/dist/components/PrimeRadioButton.vue +4 -5
- package/dist/components/PrimeToggleSwitch.vue +9 -6
- package/dist/composables/index.d.ts +2 -2
- package/dist/composables/index.js +5 -5
- package/dist/composables/index.mjs +2 -2
- package/dist/composables/useFormKitRepeater.d.ts +15 -0
- package/dist/composables/useFormKitRepeater.js +71 -0
- package/dist/composables/useFormKitRepeater.mjs +51 -0
- package/dist/composables/useFormKitSchema.d.ts +6 -1
- package/dist/composables/useFormKitSchema.js +20 -29
- package/dist/composables/useFormKitSchema.mjs +8 -29
- package/dist/composables/useFormKitSection.js +2 -2
- package/dist/composables/useFormKitSection.mjs +2 -2
- package/dist/composables/useInputEditor.js +8 -1
- package/dist/composables/useInputEditor.mjs +10 -3
- package/dist/composables/useInputEditorSchema.d.ts +107 -7
- package/dist/composables/useInputEditorSchema.js +130 -85
- package/dist/composables/useInputEditorSchema.mjs +232 -207
- package/dist/definitions/input.js +23 -23
- package/dist/definitions/input.mjs +26 -49
- package/dist/definitions/output.js +7 -7
- package/dist/definitions/output.mjs +7 -7
- package/dist/index.d.ts +2 -2
- package/dist/index.js +6 -0
- package/dist/index.mjs +2 -1
- package/dist/sass/formkit-primevue.scss +151 -107
- package/dist/style.css +1 -1
- package/package.json +16 -16
- package/dist/composables/useFormKitIcon.d.ts +0 -5
- package/dist/composables/useFormKitIcon.js +0 -23
- package/dist/composables/useFormKitIcon.mjs +0 -13
|
@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
|
|
|
3
3
|
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
4
4
|
|
|
5
5
|
import type { CheckboxProps } from 'primevue/checkbox'
|
|
6
|
-
import { useFormKitInput } from '../composables'
|
|
6
|
+
import { useFormKitInput, useFormKitSection } from '../composables'
|
|
7
7
|
|
|
8
8
|
export interface FormKitPrimeCheckboxProps {
|
|
9
9
|
binary?: CheckboxProps['binary']
|
|
@@ -14,9 +14,6 @@ export interface FormKitPrimeCheckboxProps {
|
|
|
14
14
|
unstyled?: CheckboxProps['unstyled']
|
|
15
15
|
indeterminate?: CheckboxProps['indeterminate']
|
|
16
16
|
variant?: CheckboxProps['variant']
|
|
17
|
-
labelLeft?: string
|
|
18
|
-
labelRight?: string
|
|
19
|
-
|
|
20
17
|
}
|
|
21
18
|
|
|
22
19
|
const props = defineProps({
|
|
@@ -26,12 +23,16 @@ const props = defineProps({
|
|
|
26
23
|
},
|
|
27
24
|
})
|
|
28
25
|
|
|
26
|
+
const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
|
|
27
|
+
|
|
29
28
|
const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
|
|
30
29
|
</script>
|
|
31
30
|
|
|
32
31
|
<template>
|
|
33
32
|
<div class="p-formkit">
|
|
34
|
-
<span v-if="
|
|
33
|
+
<span v-if="hasPrefix" class="formkit-prefix">
|
|
34
|
+
{{ context?.prefix }}
|
|
35
|
+
</span>
|
|
35
36
|
<Checkbox
|
|
36
37
|
v-model="context._value"
|
|
37
38
|
v-bind="context?.attrs"
|
|
@@ -54,6 +55,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
|
|
|
54
55
|
@change="handleInput"
|
|
55
56
|
@blur="handleBlur"
|
|
56
57
|
/>
|
|
57
|
-
<span v-if="
|
|
58
|
+
<span v-if="hasSuffix" class="formkit-suffix">
|
|
59
|
+
{{ context?.suffix }}
|
|
60
|
+
</span>
|
|
58
61
|
</div>
|
|
59
62
|
</template>
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
<script setup lang='ts'>
|
|
2
2
|
import { useI18n } from 'vue-i18n'
|
|
3
|
-
import { computed } from 'vue'
|
|
3
|
+
import { type PropType, computed } from 'vue'
|
|
4
|
+
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
4
5
|
import { useFormKitSection } from '../composables'
|
|
5
6
|
|
|
6
7
|
const props = defineProps({
|
|
7
|
-
context:
|
|
8
|
+
context: {
|
|
9
|
+
type: Object as PropType<FormKitFrameworkContext>,
|
|
10
|
+
required: true,
|
|
11
|
+
},
|
|
8
12
|
})
|
|
13
|
+
|
|
9
14
|
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
|
|
10
15
|
|
|
11
16
|
const { t } = useI18n()
|
|
@@ -22,13 +27,13 @@ const translated = computed(() => {
|
|
|
22
27
|
<div class="p-formkit p-output-boolean">
|
|
23
28
|
<i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.prefixIcon" />
|
|
24
29
|
<span v-if="hasPrefix" class="formkit-prefix">
|
|
25
|
-
{{ context?.
|
|
30
|
+
{{ context?.prefix }}
|
|
26
31
|
</span>
|
|
27
32
|
<span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
|
|
28
33
|
{{ translated }}
|
|
29
34
|
</span>
|
|
30
35
|
<span v-if="hasSuffix" class="formkit-suffix">
|
|
31
|
-
{{ context?.
|
|
36
|
+
{{ context?.suffix }}
|
|
32
37
|
</span>
|
|
33
38
|
<i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.suffixIcon" />
|
|
34
39
|
</div>
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
<script setup lang='ts'>
|
|
2
2
|
import { useI18n } from 'vue-i18n'
|
|
3
|
-
import { computed } from 'vue'
|
|
3
|
+
import { type PropType, computed } from 'vue'
|
|
4
|
+
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
4
5
|
import { useFormKitSection } from '../composables'
|
|
5
6
|
|
|
6
7
|
const props = defineProps({
|
|
7
|
-
context:
|
|
8
|
+
context: {
|
|
9
|
+
type: Object as PropType<FormKitFrameworkContext>,
|
|
10
|
+
required: true,
|
|
11
|
+
},
|
|
8
12
|
})
|
|
9
13
|
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
|
|
10
14
|
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
<script setup lang='ts'>
|
|
2
|
+
import type { PropType } from 'vue'
|
|
3
|
+
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
2
4
|
import { useFormKitSection, useOutputDuration } from '../composables'
|
|
3
5
|
|
|
4
6
|
const props = defineProps({
|
|
5
|
-
context:
|
|
7
|
+
context: {
|
|
8
|
+
type: Object as PropType<FormKitFrameworkContext>,
|
|
9
|
+
required: true,
|
|
10
|
+
},
|
|
6
11
|
})
|
|
7
|
-
|
|
8
12
|
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
|
|
9
13
|
|
|
10
14
|
const { formattedDuration } = useOutputDuration()
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
<script setup lang='ts'>
|
|
2
|
-
import { computed } from 'vue'
|
|
2
|
+
import { type PropType, computed } from 'vue'
|
|
3
|
+
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
3
4
|
import { useFormKitSection } from '../composables'
|
|
4
5
|
|
|
5
6
|
const props = defineProps({
|
|
6
|
-
context:
|
|
7
|
+
context: {
|
|
8
|
+
type: Object as PropType<FormKitFrameworkContext>,
|
|
9
|
+
required: true,
|
|
10
|
+
},
|
|
7
11
|
})
|
|
12
|
+
|
|
8
13
|
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
|
|
9
14
|
|
|
10
15
|
const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.context?._value : `https://${props.context?._value}`)
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
<script setup lang='ts'>
|
|
2
|
+
import type { PropType } from 'vue'
|
|
3
|
+
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
2
4
|
import { useFormKitSection } from '../composables'
|
|
3
5
|
|
|
4
6
|
const props = defineProps({
|
|
5
|
-
context:
|
|
7
|
+
context: {
|
|
8
|
+
type: Object as PropType<FormKitFrameworkContext>,
|
|
9
|
+
required: true,
|
|
10
|
+
},
|
|
6
11
|
})
|
|
12
|
+
|
|
7
13
|
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
|
|
8
14
|
|
|
9
15
|
function listValue(index: number, value: string): string {
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
<script setup lang='ts'>
|
|
2
2
|
import { useI18n } from 'vue-i18n'
|
|
3
|
-
import { computed } from 'vue'
|
|
3
|
+
import { type PropType, computed } from 'vue'
|
|
4
4
|
|
|
5
|
+
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
5
6
|
import { useFormKitSection } from '../composables'
|
|
6
7
|
|
|
7
8
|
const props = defineProps({
|
|
8
|
-
context:
|
|
9
|
+
context: {
|
|
10
|
+
type: Object as PropType<FormKitFrameworkContext>,
|
|
11
|
+
required: true,
|
|
12
|
+
},
|
|
9
13
|
})
|
|
10
14
|
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
|
|
11
15
|
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
<script setup lang='ts'>
|
|
2
|
+
import type { PropType } from 'vue'
|
|
3
|
+
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
2
4
|
import { useFormKitSection } from '../composables'
|
|
3
5
|
|
|
4
6
|
const props = defineProps({
|
|
5
|
-
context:
|
|
7
|
+
context: {
|
|
8
|
+
type: Object as PropType<FormKitFrameworkContext>,
|
|
9
|
+
required: true,
|
|
10
|
+
},
|
|
6
11
|
})
|
|
12
|
+
|
|
7
13
|
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
|
|
8
14
|
</script>
|
|
9
15
|
|
|
@@ -10,9 +10,8 @@ export interface FormKitPrimeRadioButtonProps {
|
|
|
10
10
|
ptOptions?: RadioButtonProps['ptOptions']
|
|
11
11
|
unstyled?: RadioButtonProps['unstyled']
|
|
12
12
|
options?: { label: string, value: any }[]
|
|
13
|
+
optionsClass?: string
|
|
13
14
|
optionClass?: string
|
|
14
|
-
labelClass?: string
|
|
15
|
-
|
|
16
15
|
}
|
|
17
16
|
|
|
18
17
|
const props = defineProps({
|
|
@@ -26,8 +25,8 @@ const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
|
|
|
26
25
|
</script>
|
|
27
26
|
|
|
28
27
|
<template>
|
|
29
|
-
<div class="p-formkit">
|
|
30
|
-
<div v-for="option in context.options" :key="option.value" :class="context.optionClass">
|
|
28
|
+
<div class="p-formkit p-formkit-options" :class="context.optionsClass">
|
|
29
|
+
<div v-for="option in context.options" :key="option.value" class="p-formkit-option" :class="context.optionClass">
|
|
31
30
|
<RadioButton
|
|
32
31
|
:id="context.id"
|
|
33
32
|
v-model="context._value"
|
|
@@ -45,7 +44,7 @@ const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
|
|
|
45
44
|
@change="handleChange"
|
|
46
45
|
@blur="handleBlur"
|
|
47
46
|
/>
|
|
48
|
-
<label :for="option.value" :class="context.labelClass"
|
|
47
|
+
<label :for="option.value" :class="context.labelClass">{{ option.label }}</label>
|
|
49
48
|
</div>
|
|
50
49
|
</div>
|
|
51
50
|
</template>
|
|
@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
|
|
|
3
3
|
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
4
4
|
|
|
5
5
|
import type { ToggleSwitchProps } from 'primevue/toggleswitch'
|
|
6
|
-
import { useFormKitInput } from '../composables'
|
|
6
|
+
import { useFormKitInput, useFormKitSection } from '../composables'
|
|
7
7
|
|
|
8
8
|
export interface FormKitPrimeToggleSwitchProps {
|
|
9
9
|
trueValue?: ToggleSwitchProps['trueValue']
|
|
@@ -11,9 +11,6 @@ export interface FormKitPrimeToggleSwitchProps {
|
|
|
11
11
|
pt?: ToggleSwitchProps['pt']
|
|
12
12
|
ptOptions?: ToggleSwitchProps['ptOptions']
|
|
13
13
|
unstyled?: ToggleSwitchProps['unstyled']
|
|
14
|
-
labelLeft?: string
|
|
15
|
-
labelRight?: string
|
|
16
|
-
|
|
17
14
|
}
|
|
18
15
|
|
|
19
16
|
const props = defineProps({
|
|
@@ -23,12 +20,16 @@ const props = defineProps({
|
|
|
23
20
|
},
|
|
24
21
|
})
|
|
25
22
|
|
|
23
|
+
const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
|
|
24
|
+
|
|
26
25
|
const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
|
|
27
26
|
</script>
|
|
28
27
|
|
|
29
28
|
<template>
|
|
30
29
|
<div class="p-formkit">
|
|
31
|
-
<span v-if="
|
|
30
|
+
<span v-if="hasPrefix" class="formkit-prefix">
|
|
31
|
+
{{ context?.prefix }}
|
|
32
|
+
</span>
|
|
32
33
|
<ToggleSwitch
|
|
33
34
|
v-model="context._value"
|
|
34
35
|
v-bind="context?.attrs"
|
|
@@ -48,6 +49,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
|
|
|
48
49
|
@change="handleInput"
|
|
49
50
|
@blur="handleBlur"
|
|
50
51
|
/>
|
|
51
|
-
<span v-if="
|
|
52
|
+
<span v-if="hasSuffix" class="formkit-suffix">
|
|
53
|
+
{{ context?.suffix }}
|
|
54
|
+
</span>
|
|
52
55
|
</div>
|
|
53
56
|
</template>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { useFormKitIcon } from './useFormKitIcon';
|
|
2
1
|
import { useFormKitInput } from './useFormKitInput';
|
|
3
2
|
import { useFormKitSchema } from './useFormKitSchema';
|
|
3
|
+
import { useFormKitRepeater } from './useFormKitRepeater';
|
|
4
4
|
import { useFormKitSection } from './useFormKitSection';
|
|
5
5
|
import { useInputEditor } from './useInputEditor';
|
|
6
6
|
import { useInputEditorSchema } from './useInputEditorSchema';
|
|
7
7
|
import { useOutputDuration } from './useOutputDuration';
|
|
8
|
-
export {
|
|
8
|
+
export { useFormKitInput, useFormKitRepeater, useFormKitSchema, useFormKitSection, useInputEditor, useInputEditorSchema, useOutputDuration, };
|
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "
|
|
6
|
+
Object.defineProperty(exports, "useFormKitInput", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function () {
|
|
9
|
-
return
|
|
9
|
+
return _useFormKitInput.useFormKitInput;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
Object.defineProperty(exports, "
|
|
12
|
+
Object.defineProperty(exports, "useFormKitRepeater", {
|
|
13
13
|
enumerable: true,
|
|
14
14
|
get: function () {
|
|
15
|
-
return
|
|
15
|
+
return _useFormKitRepeater.useFormKitRepeater;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
Object.defineProperty(exports, "useFormKitSchema", {
|
|
@@ -45,9 +45,9 @@ Object.defineProperty(exports, "useOutputDuration", {
|
|
|
45
45
|
return _useOutputDuration.useOutputDuration;
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
|
-
var _useFormKitIcon = require("./useFormKitIcon");
|
|
49
48
|
var _useFormKitInput = require("./useFormKitInput");
|
|
50
49
|
var _useFormKitSchema = require("./useFormKitSchema");
|
|
50
|
+
var _useFormKitRepeater = require("./useFormKitRepeater");
|
|
51
51
|
var _useFormKitSection = require("./useFormKitSection");
|
|
52
52
|
var _useInputEditor = require("./useInputEditor");
|
|
53
53
|
var _useInputEditorSchema = require("./useInputEditorSchema");
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { useFormKitIcon } from "./useFormKitIcon.mjs";
|
|
2
1
|
import { useFormKitInput } from "./useFormKitInput.mjs";
|
|
3
2
|
import { useFormKitSchema } from "./useFormKitSchema.mjs";
|
|
3
|
+
import { useFormKitRepeater } from "./useFormKitRepeater.mjs";
|
|
4
4
|
import { useFormKitSection } from "./useFormKitSection.mjs";
|
|
5
5
|
import { useInputEditor } from "./useInputEditor.mjs";
|
|
6
6
|
import { useInputEditorSchema } from "./useInputEditorSchema.mjs";
|
|
7
7
|
import { useOutputDuration } from "./useOutputDuration.mjs";
|
|
8
8
|
export {
|
|
9
|
-
useFormKitIcon,
|
|
10
9
|
useFormKitInput,
|
|
10
|
+
useFormKitRepeater,
|
|
11
11
|
useFormKitSchema,
|
|
12
12
|
useFormKitSection,
|
|
13
13
|
useInputEditor,
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare function useFormKitRepeater(): {
|
|
2
|
+
addInsertButton: (label?: string, innerClass?: string, outerClass?: string, buttonClass?: string, iconClass?: string) => {
|
|
3
|
+
$el: string;
|
|
4
|
+
if: string;
|
|
5
|
+
attrs: object;
|
|
6
|
+
children: string | any[];
|
|
7
|
+
};
|
|
8
|
+
addGroupButtons: (innerClass?: string, outerClass?: string, label?: string, help?: string, render?: string) => {
|
|
9
|
+
$el: string;
|
|
10
|
+
if: string;
|
|
11
|
+
attrs: object;
|
|
12
|
+
children: string | any[];
|
|
13
|
+
};
|
|
14
|
+
addListGroupFunctions: (data: any, addNodeDefaultObject?: object) => void;
|
|
15
|
+
};
|
|
@@ -0,0 +1,71 @@
|
|
|
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 = "pi pi-plus") {
|
|
15
|
+
return addElementsInOuterDiv([addComponent("Button", {
|
|
16
|
+
onClick: "$addNode($node)",
|
|
17
|
+
label,
|
|
18
|
+
class: buttonClass,
|
|
19
|
+
icon: iconClass
|
|
20
|
+
}, "$node.value.length == 0")], innerClass, outerClass);
|
|
21
|
+
}
|
|
22
|
+
function addListGroupFunctions(data, addNodeDefaultObject = {}) {
|
|
23
|
+
const swapElements = (array, index1, index2) => {
|
|
24
|
+
array[index1] = array.splice(index2, 1, array[index1])[0];
|
|
25
|
+
return array;
|
|
26
|
+
};
|
|
27
|
+
data.addNode = parentNode => () => {
|
|
28
|
+
const newArray = [...parentNode.value, addNodeDefaultObject];
|
|
29
|
+
parentNode.input(newArray, false);
|
|
30
|
+
};
|
|
31
|
+
data.removeNode = (parentNode, index) => () => {
|
|
32
|
+
parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
|
|
33
|
+
};
|
|
34
|
+
data.moveNodeUp = (parentNode, index) => () => {
|
|
35
|
+
const array = [...parentNode.value];
|
|
36
|
+
if (index > 0) parentNode.input(swapElements(array, index - 1, index), false);
|
|
37
|
+
};
|
|
38
|
+
data.moveNodeDown = (parentNode, index) => () => {
|
|
39
|
+
const array = [...parentNode.value];
|
|
40
|
+
if (index < array.length - 1) parentNode.input(swapElements(array, index, index + 1), false);
|
|
41
|
+
};
|
|
42
|
+
data.copyNode = (parentNode, index) => () => {
|
|
43
|
+
const obj = parentNode.value[index];
|
|
44
|
+
const newArray = [...parentNode.value, {
|
|
45
|
+
...obj
|
|
46
|
+
}];
|
|
47
|
+
parentNode.input(newArray, false);
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
function addGroupButtons(innerClass = "", outerClass = "col-4", label = "Actions", help = "", render = "true") {
|
|
51
|
+
const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", styleClass = "p-button-sm") => {
|
|
52
|
+
return addComponent("Button", {
|
|
53
|
+
onClick,
|
|
54
|
+
label: label2,
|
|
55
|
+
icon,
|
|
56
|
+
class: styleClass,
|
|
57
|
+
severity
|
|
58
|
+
}, render2);
|
|
59
|
+
};
|
|
60
|
+
return addElementsInOuterDiv([addButtonComponent("$removeNode($node, $index)", "", "pi pi-times", "danger"), addButtonComponent("$copyNode($node, $index)", "", "pi pi-plus"), addButtonComponent("$moveNodeUp($node, $index)", "", "pi pi-arrow-up", "secondary", "$index != 0"), addElement("span", [], {
|
|
61
|
+
class: "p-space"
|
|
62
|
+
}, "$index == 0"), addButtonComponent("$moveNodeDown($node, $index)", "", "pi pi-arrow-down", "secondary", "$index < $node.value.length -1"), addElement("span", [], {
|
|
63
|
+
class: "p-space"
|
|
64
|
+
}, "$index == $node.value.length -1")], `p-action-buttons ${innerClass}`, outerClass, label, help, render);
|
|
65
|
+
}
|
|
66
|
+
return {
|
|
67
|
+
addInsertButton,
|
|
68
|
+
addGroupButtons,
|
|
69
|
+
addListGroupFunctions
|
|
70
|
+
};
|
|
71
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
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 = "pi pi-plus") {
|
|
5
|
+
return addElementsInOuterDiv([
|
|
6
|
+
addComponent("Button", { onClick: "$addNode($node)", label, class: buttonClass, icon: iconClass }, "$node.value.length == 0")
|
|
7
|
+
], innerClass, outerClass);
|
|
8
|
+
}
|
|
9
|
+
function addListGroupFunctions(data, addNodeDefaultObject = {}) {
|
|
10
|
+
const swapElements = (array, index1, index2) => {
|
|
11
|
+
array[index1] = array.splice(index2, 1, array[index1])[0];
|
|
12
|
+
return array;
|
|
13
|
+
};
|
|
14
|
+
data.addNode = (parentNode) => () => {
|
|
15
|
+
const newArray = [...parentNode.value, addNodeDefaultObject];
|
|
16
|
+
parentNode.input(newArray, false);
|
|
17
|
+
};
|
|
18
|
+
data.removeNode = (parentNode, index) => () => {
|
|
19
|
+
parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
|
|
20
|
+
};
|
|
21
|
+
data.moveNodeUp = (parentNode, index) => () => {
|
|
22
|
+
const array = [...parentNode.value];
|
|
23
|
+
if (index > 0)
|
|
24
|
+
parentNode.input(swapElements(array, index - 1, index), false);
|
|
25
|
+
};
|
|
26
|
+
data.moveNodeDown = (parentNode, index) => () => {
|
|
27
|
+
const array = [...parentNode.value];
|
|
28
|
+
if (index < array.length - 1)
|
|
29
|
+
parentNode.input(swapElements(array, index, index + 1), false);
|
|
30
|
+
};
|
|
31
|
+
data.copyNode = (parentNode, index) => () => {
|
|
32
|
+
const obj = parentNode.value[index];
|
|
33
|
+
const newArray = [...parentNode.value, { ...obj }];
|
|
34
|
+
parentNode.input(newArray, false);
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
function addGroupButtons(innerClass = "", outerClass = "col-4", label = "Actions", help = "", render = "true") {
|
|
38
|
+
const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", styleClass = "p-button-sm") => {
|
|
39
|
+
return addComponent("Button", { onClick, label: label2, icon, class: styleClass, severity }, render2);
|
|
40
|
+
};
|
|
41
|
+
return addElementsInOuterDiv([
|
|
42
|
+
addButtonComponent("$removeNode($node, $index)", "", "pi pi-times", "danger"),
|
|
43
|
+
addButtonComponent("$copyNode($node, $index)", "", "pi pi-plus"),
|
|
44
|
+
addButtonComponent("$moveNodeUp($node, $index)", "", "pi pi-arrow-up", "secondary", "$index != 0"),
|
|
45
|
+
addElement("span", [], { class: "p-space" }, "$index == 0"),
|
|
46
|
+
addButtonComponent("$moveNodeDown($node, $index)", "", "pi pi-arrow-down", "secondary", "$index < $node.value.length -1"),
|
|
47
|
+
addElement("span", [], { class: "p-space" }, "$index == $node.value.length -1")
|
|
48
|
+
], `p-action-buttons ${innerClass}`, outerClass, label, help, render);
|
|
49
|
+
}
|
|
50
|
+
return { addInsertButton, addGroupButtons, addListGroupFunctions };
|
|
51
|
+
}
|
|
@@ -27,5 +27,10 @@ export declare function useFormKitSchema(): {
|
|
|
27
27
|
index: string;
|
|
28
28
|
children: object[];
|
|
29
29
|
};
|
|
30
|
-
|
|
30
|
+
addElementsInOuterDiv: (children?: object[], innerClass?: string, outerClass?: string, label?: string, help?: string, render?: string) => {
|
|
31
|
+
$el: string;
|
|
32
|
+
if: string;
|
|
33
|
+
attrs: object;
|
|
34
|
+
children: string | any[];
|
|
35
|
+
};
|
|
31
36
|
};
|
|
@@ -53,40 +53,31 @@ function useFormKitSchema() {
|
|
|
53
53
|
...formKitAttrs
|
|
54
54
|
};
|
|
55
55
|
};
|
|
56
|
-
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
};
|
|
76
|
-
data.copyNode = (parentNode, index) => () => {
|
|
77
|
-
const obj = parentNode.value[index];
|
|
78
|
-
const newArray = [...parentNode.value, {
|
|
79
|
-
...obj
|
|
80
|
-
}];
|
|
81
|
-
parentNode.input(newArray, false);
|
|
82
|
-
};
|
|
83
|
-
}
|
|
56
|
+
const addElementsInOuterDiv = (children = [], innerClass = "", outerClass = "", label = "", help = "", render = "true") => {
|
|
57
|
+
const inner = addElement("div", children, {
|
|
58
|
+
class: `formkit-inner ${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: `formkit-outer ${outerClass}`,
|
|
72
|
+
style: "position: relative;"
|
|
73
|
+
}, render);
|
|
74
|
+
};
|
|
84
75
|
return {
|
|
85
76
|
addComponent,
|
|
86
77
|
addElement,
|
|
87
78
|
addGroup,
|
|
88
79
|
addList,
|
|
89
80
|
addListGroup,
|
|
90
|
-
|
|
81
|
+
addElementsInOuterDiv
|
|
91
82
|
};
|
|
92
83
|
}
|
|
@@ -47,33 +47,12 @@ export function useFormKitSchema() {
|
|
|
47
47
|
...formKitAttrs
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
|
-
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
};
|
|
59
|
-
data.removeNode = (parentNode, index) => () => {
|
|
60
|
-
parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
|
|
61
|
-
};
|
|
62
|
-
data.moveNodeUp = (parentNode, index) => () => {
|
|
63
|
-
const array = [...parentNode.value];
|
|
64
|
-
if (index > 0)
|
|
65
|
-
parentNode.input(swapElements(array, index - 1, index), false);
|
|
66
|
-
};
|
|
67
|
-
data.moveNodeDown = (parentNode, index) => () => {
|
|
68
|
-
const array = [...parentNode.value];
|
|
69
|
-
if (index < array.length - 1)
|
|
70
|
-
parentNode.input(swapElements(array, index, index + 1), false);
|
|
71
|
-
};
|
|
72
|
-
data.copyNode = (parentNode, index) => () => {
|
|
73
|
-
const obj = parentNode.value[index];
|
|
74
|
-
const newArray = [...parentNode.value, { ...obj }];
|
|
75
|
-
parentNode.input(newArray, false);
|
|
76
|
-
};
|
|
77
|
-
}
|
|
78
|
-
return { addComponent, addElement, addGroup, addList, addListGroup, addListGroupFunctions };
|
|
50
|
+
const addElementsInOuterDiv = (children = [], innerClass = "", outerClass = "", label = "", help = "", render = "true") => {
|
|
51
|
+
const inner = addElement("div", children, { class: `formkit-inner ${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: `formkit-outer ${outerClass}`, style: "position: relative;" }, render);
|
|
56
|
+
};
|
|
57
|
+
return { addComponent, addElement, addGroup, addList, addListGroup, addElementsInOuterDiv };
|
|
79
58
|
}
|
|
@@ -7,7 +7,7 @@ exports.useFormKitSection = useFormKitSection;
|
|
|
7
7
|
var _vue = require("vue");
|
|
8
8
|
function useFormKitSection(context) {
|
|
9
9
|
const hasPrefix = (0, _vue.computed)(() => {
|
|
10
|
-
return context?.
|
|
10
|
+
return context?.prefix && context?.prefix.length > 0;
|
|
11
11
|
});
|
|
12
12
|
const hasPrefixIcon = (0, _vue.computed)(() => {
|
|
13
13
|
return context?.prefixIcon && context?.prefixIcon.length > 0;
|
|
@@ -16,7 +16,7 @@ function useFormKitSection(context) {
|
|
|
16
16
|
return context?.suffixIcon && context?.suffixIcon.length > 0;
|
|
17
17
|
});
|
|
18
18
|
const hasSuffix = (0, _vue.computed)(() => {
|
|
19
|
-
return context?.
|
|
19
|
+
return context?.suffix && context?.suffix.length > 0;
|
|
20
20
|
});
|
|
21
21
|
return {
|
|
22
22
|
hasPrefix,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { computed } from "vue";
|
|
2
2
|
export function useFormKitSection(context) {
|
|
3
3
|
const hasPrefix = computed(() => {
|
|
4
|
-
return context?.
|
|
4
|
+
return context?.prefix && context?.prefix.length > 0;
|
|
5
5
|
});
|
|
6
6
|
const hasPrefixIcon = computed(() => {
|
|
7
7
|
return context?.prefixIcon && context?.prefixIcon.length > 0;
|
|
@@ -10,7 +10,7 @@ export function useFormKitSection(context) {
|
|
|
10
10
|
return context?.suffixIcon && context?.suffixIcon.length > 0;
|
|
11
11
|
});
|
|
12
12
|
const hasSuffix = computed(() => {
|
|
13
|
-
return context?.
|
|
13
|
+
return context?.suffix && context?.suffix.length > 0;
|
|
14
14
|
});
|
|
15
15
|
return { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon };
|
|
16
16
|
}
|