@sfxcode/formkit-primevue 3.2.7 → 3.2.9
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.d.vue.ts +24 -0
- package/dist/components/FormKitDataDebug.vue +23 -0
- package/dist/components/FormKitDataDebug.vue.d.ts +24 -0
- package/dist/components/FormKitDataEdit.d.vue.ts +180 -0
- package/dist/components/FormKitDataEdit.vue +45 -40
- package/dist/components/FormKitDataEdit.vue.d.ts +180 -0
- package/dist/components/FormKitDataView.d.vue.ts +73 -0
- package/dist/components/FormKitDataView.vue +28 -24
- package/dist/components/FormKitDataView.vue.d.ts +73 -0
- package/dist/components/FormKitIcon.d.vue.ts +39 -0
- package/dist/components/FormKitIcon.vue +13 -6
- package/dist/components/FormKitIcon.vue.d.ts +39 -0
- package/dist/components/FormKitPrefix.d.vue.ts +7 -0
- package/dist/components/FormKitPrefix.vue +3 -3
- package/dist/components/FormKitPrefix.vue.d.ts +7 -0
- package/dist/components/FormKitSuffix.d.vue.ts +7 -0
- package/dist/components/FormKitSuffix.vue +3 -3
- package/dist/components/FormKitSuffix.vue.d.ts +7 -0
- package/dist/components/PrimeAutoComplete.d.vue.ts +31 -0
- package/dist/components/PrimeAutoComplete.vue +98 -47
- package/dist/components/PrimeAutoComplete.vue.d.ts +31 -0
- package/dist/components/PrimeCascadeSelect.d.vue.ts +28 -0
- package/dist/components/PrimeCascadeSelect.vue +26 -7
- package/dist/components/PrimeCascadeSelect.vue.d.ts +28 -0
- package/dist/components/PrimeCheckbox.d.vue.ts +27 -0
- package/dist/components/PrimeCheckbox.vue +29 -9
- package/dist/components/PrimeCheckbox.vue.d.ts +27 -0
- package/dist/components/PrimeColorPicker.d.vue.ts +24 -0
- package/dist/components/PrimeColorPicker.vue +22 -7
- package/dist/components/PrimeColorPicker.vue.d.ts +24 -0
- package/dist/components/PrimeDatePicker.d.vue.ts +63 -0
- package/dist/components/PrimeDatePicker.vue +73 -15
- package/dist/components/PrimeDatePicker.vue.d.ts +63 -0
- package/dist/components/PrimeInputMask.d.vue.ts +28 -0
- package/dist/components/PrimeInputMask.vue +29 -10
- package/dist/components/PrimeInputMask.vue.d.ts +28 -0
- package/dist/components/PrimeInputNumber.d.vue.ts +36 -0
- package/dist/components/PrimeInputNumber.vue +56 -22
- package/dist/components/PrimeInputNumber.vue.d.ts +36 -0
- package/dist/components/PrimeInputOtp.d.vue.ts +26 -0
- package/dist/components/PrimeInputOtp.vue +24 -7
- package/dist/components/PrimeInputOtp.vue.d.ts +26 -0
- package/dist/components/PrimeInputText.d.vue.ts +24 -0
- package/dist/components/PrimeInputText.vue +25 -10
- package/dist/components/PrimeInputText.vue.d.ts +24 -0
- package/dist/components/PrimeKnob.d.vue.ts +31 -0
- package/dist/components/PrimeKnob.vue +37 -12
- package/dist/components/PrimeKnob.vue.d.ts +31 -0
- package/dist/components/PrimeListbox.d.vue.ts +42 -0
- package/dist/components/PrimeListbox.vue +39 -7
- package/dist/components/PrimeListbox.vue.d.ts +42 -0
- package/dist/components/PrimeMultiSelect.d.vue.ts +53 -0
- package/dist/components/PrimeMultiSelect.vue +52 -7
- package/dist/components/PrimeMultiSelect.vue.d.ts +53 -0
- package/dist/components/PrimeOutputBoolean.d.vue.ts +16 -0
- package/dist/components/PrimeOutputBoolean.vue +23 -16
- package/dist/components/PrimeOutputBoolean.vue.d.ts +16 -0
- package/dist/components/PrimeOutputDate.d.vue.ts +16 -0
- package/dist/components/PrimeOutputDate.vue +31 -21
- package/dist/components/PrimeOutputDate.vue.d.ts +16 -0
- package/dist/components/PrimeOutputDuration.d.vue.ts +16 -0
- package/dist/components/PrimeOutputDuration.vue +17 -11
- package/dist/components/PrimeOutputDuration.vue.d.ts +16 -0
- package/dist/components/PrimeOutputLink.d.vue.ts +16 -0
- package/dist/components/PrimeOutputLink.vue +24 -17
- package/dist/components/PrimeOutputLink.vue.d.ts +16 -0
- package/dist/components/PrimeOutputList.d.vue.ts +19 -0
- package/dist/components/PrimeOutputList.vue +29 -18
- package/dist/components/PrimeOutputList.vue.d.ts +19 -0
- package/dist/components/PrimeOutputNumber.d.vue.ts +16 -0
- package/dist/components/PrimeOutputNumber.vue +37 -24
- package/dist/components/PrimeOutputNumber.vue.d.ts +16 -0
- package/dist/components/PrimeOutputReference.d.vue.ts +16 -0
- package/dist/components/PrimeOutputReference.vue +28 -21
- package/dist/components/PrimeOutputReference.vue.d.ts +16 -0
- package/dist/components/PrimeOutputText.d.vue.ts +21 -0
- package/dist/components/PrimeOutputText.vue +37 -22
- package/dist/components/PrimeOutputText.vue.d.ts +21 -0
- package/dist/components/PrimePassword.d.vue.ts +33 -0
- package/dist/components/PrimePassword.vue +31 -7
- package/dist/components/PrimePassword.vue.d.ts +33 -0
- package/dist/components/PrimeRadioButton.d.vue.ts +28 -0
- package/dist/components/PrimeRadioButton.vue +23 -7
- package/dist/components/PrimeRadioButton.vue.d.ts +28 -0
- package/dist/components/PrimeRating.d.vue.ts +24 -0
- package/dist/components/PrimeRating.vue +22 -7
- package/dist/components/PrimeRating.vue.d.ts +24 -0
- package/dist/components/PrimeSelect.d.vue.ts +50 -0
- package/dist/components/PrimeSelect.vue +49 -7
- package/dist/components/PrimeSelect.vue.d.ts +50 -0
- package/dist/components/PrimeSelectButton.d.vue.ts +28 -0
- package/dist/components/PrimeSelectButton.vue +27 -7
- package/dist/components/PrimeSelectButton.vue.d.ts +28 -0
- package/dist/components/PrimeSlider.d.vue.ts +26 -0
- package/dist/components/PrimeSlider.vue +28 -10
- package/dist/components/PrimeSlider.vue.d.ts +26 -0
- package/dist/components/PrimeTextarea.d.vue.ts +25 -0
- package/dist/components/PrimeTextarea.vue +23 -7
- package/dist/components/PrimeTextarea.vue.d.ts +25 -0
- package/dist/components/PrimeToggleButton.d.vue.ts +26 -0
- package/dist/components/PrimeToggleButton.vue +25 -7
- package/dist/components/PrimeToggleButton.vue.d.ts +26 -0
- package/dist/components/PrimeToggleSwitch.d.vue.ts +23 -0
- package/dist/components/PrimeToggleSwitch.vue +23 -8
- package/dist/components/PrimeToggleSwitch.vue.d.ts +23 -0
- package/dist/components/PrimeTreeSelect.d.vue.ts +32 -0
- package/dist/components/PrimeTreeSelect.vue +30 -7
- package/dist/components/PrimeTreeSelect.vue.d.ts +32 -0
- package/package.json +1 -1
|
@@ -1,32 +1,40 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
<script setup lang='ts'>
|
|
2
|
+
import type { FormKitSchemaDefinition } from '@formkit/core'
|
|
3
|
+
import type { PropType } from 'vue'
|
|
4
|
+
|
|
5
|
+
import { FormKit, FormKitSchema } from '@formkit/vue'
|
|
6
|
+
import { ref } from 'vue'
|
|
7
|
+
import FormKitDataDebug from './FormKitDataDebug.vue'
|
|
8
|
+
|
|
4
9
|
const props = defineProps({
|
|
5
10
|
data: {
|
|
6
11
|
type: Object,
|
|
7
|
-
default: null
|
|
12
|
+
default: null,
|
|
8
13
|
},
|
|
9
14
|
schema: {
|
|
10
|
-
type: Object
|
|
11
|
-
default: null
|
|
15
|
+
type: Object as PropType<FormKitSchemaDefinition>,
|
|
16
|
+
default: null,
|
|
12
17
|
},
|
|
13
18
|
formClass: {
|
|
14
19
|
type: String,
|
|
15
|
-
default:
|
|
20
|
+
default: '',
|
|
16
21
|
},
|
|
17
22
|
debugData: {
|
|
18
23
|
type: Boolean,
|
|
19
|
-
default: false
|
|
24
|
+
default: false,
|
|
20
25
|
},
|
|
21
26
|
debugSchema: {
|
|
22
27
|
type: Boolean,
|
|
23
|
-
default: false
|
|
24
|
-
}
|
|
25
|
-
})
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
+
default: false,
|
|
29
|
+
},
|
|
30
|
+
})
|
|
31
|
+
|
|
32
|
+
const formSchema = ref(props.schema)
|
|
33
|
+
|
|
34
|
+
const formData = defineModel<any>()
|
|
35
|
+
|
|
28
36
|
if (props.data) {
|
|
29
|
-
formData.value = props.data
|
|
37
|
+
formData.value = props.data
|
|
30
38
|
}
|
|
31
39
|
</script>
|
|
32
40
|
|
|
@@ -40,15 +48,11 @@ if (props.data) {
|
|
|
40
48
|
>
|
|
41
49
|
<FormKitSchema v-if="schema" :schema="formSchema" :data="formData" />
|
|
42
50
|
<slot />
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
<pre v-if="data">{{ data }}</pre>
|
|
46
|
-
<span v-else>No Data available</span>
|
|
47
|
-
</Fieldset>
|
|
48
|
-
<Fieldset class="p-formkit-data-debug" legend="Debug Mode - Schema" :toggleable="true" :collapsed="true">
|
|
49
|
-
<slot />
|
|
50
|
-
<pre v-if="formSchema">{{ formSchema }}</pre>
|
|
51
|
-
<span v-else>No Data available</span>
|
|
52
|
-
</Fieldset>
|
|
51
|
+
<FormKitDataDebug v-if="debugData" :data="formData" header="Debug Mode - Data" />
|
|
52
|
+
<FormKitDataDebug v-if="debugSchema" :data="formSchema as object" header="Debug Mode - Schema" />
|
|
53
53
|
</FormKit>
|
|
54
54
|
</template>
|
|
55
|
+
|
|
56
|
+
<style scoped>
|
|
57
|
+
|
|
58
|
+
</style>
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import type { FormKitSchemaDefinition } from '@formkit/core';
|
|
2
|
+
import type { PropType } from 'vue';
|
|
3
|
+
declare var __VLS_13: {};
|
|
4
|
+
type __VLS_Slots = {} & {
|
|
5
|
+
default?: (props: typeof __VLS_13) => any;
|
|
6
|
+
};
|
|
7
|
+
declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
8
|
+
data: {
|
|
9
|
+
type: ObjectConstructor;
|
|
10
|
+
default: null;
|
|
11
|
+
};
|
|
12
|
+
schema: {
|
|
13
|
+
type: PropType<FormKitSchemaDefinition>;
|
|
14
|
+
default: null;
|
|
15
|
+
};
|
|
16
|
+
formClass: {
|
|
17
|
+
type: StringConstructor;
|
|
18
|
+
default: string;
|
|
19
|
+
};
|
|
20
|
+
debugData: {
|
|
21
|
+
type: BooleanConstructor;
|
|
22
|
+
default: boolean;
|
|
23
|
+
};
|
|
24
|
+
debugSchema: {
|
|
25
|
+
type: BooleanConstructor;
|
|
26
|
+
default: boolean;
|
|
27
|
+
};
|
|
28
|
+
modelValue: {
|
|
29
|
+
type: PropType<any>;
|
|
30
|
+
};
|
|
31
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
32
|
+
"update:modelValue": (value: any) => any;
|
|
33
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
34
|
+
data: {
|
|
35
|
+
type: ObjectConstructor;
|
|
36
|
+
default: null;
|
|
37
|
+
};
|
|
38
|
+
schema: {
|
|
39
|
+
type: PropType<FormKitSchemaDefinition>;
|
|
40
|
+
default: null;
|
|
41
|
+
};
|
|
42
|
+
formClass: {
|
|
43
|
+
type: StringConstructor;
|
|
44
|
+
default: string;
|
|
45
|
+
};
|
|
46
|
+
debugData: {
|
|
47
|
+
type: BooleanConstructor;
|
|
48
|
+
default: boolean;
|
|
49
|
+
};
|
|
50
|
+
debugSchema: {
|
|
51
|
+
type: BooleanConstructor;
|
|
52
|
+
default: boolean;
|
|
53
|
+
};
|
|
54
|
+
modelValue: {
|
|
55
|
+
type: PropType<any>;
|
|
56
|
+
};
|
|
57
|
+
}>> & Readonly<{
|
|
58
|
+
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
|
|
59
|
+
}>, {
|
|
60
|
+
data: Record<string, any>;
|
|
61
|
+
schema: FormKitSchemaDefinition;
|
|
62
|
+
formClass: string;
|
|
63
|
+
debugData: boolean;
|
|
64
|
+
debugSchema: boolean;
|
|
65
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
66
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
67
|
+
declare const _default: typeof __VLS_export;
|
|
68
|
+
export default _default;
|
|
69
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
70
|
+
new (): {
|
|
71
|
+
$slots: S;
|
|
72
|
+
};
|
|
73
|
+
};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { PropType } from 'vue';
|
|
2
|
+
export interface FormKitIconProps {
|
|
3
|
+
onIconPrefixClicked?: () => void;
|
|
4
|
+
onIconSuffixClicked?: () => void;
|
|
5
|
+
}
|
|
6
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
7
|
+
iconClass: {
|
|
8
|
+
type: StringConstructor;
|
|
9
|
+
default: string;
|
|
10
|
+
};
|
|
11
|
+
onClick: {
|
|
12
|
+
type: PropType<() => void>;
|
|
13
|
+
default: undefined;
|
|
14
|
+
};
|
|
15
|
+
position: {
|
|
16
|
+
type: StringConstructor;
|
|
17
|
+
required: true;
|
|
18
|
+
validator: (val: string) => boolean;
|
|
19
|
+
};
|
|
20
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
21
|
+
iconClass: {
|
|
22
|
+
type: StringConstructor;
|
|
23
|
+
default: string;
|
|
24
|
+
};
|
|
25
|
+
onClick: {
|
|
26
|
+
type: PropType<() => void>;
|
|
27
|
+
default: undefined;
|
|
28
|
+
};
|
|
29
|
+
position: {
|
|
30
|
+
type: StringConstructor;
|
|
31
|
+
required: true;
|
|
32
|
+
validator: (val: string) => boolean;
|
|
33
|
+
};
|
|
34
|
+
}>> & Readonly<{}>, {
|
|
35
|
+
onClick: () => void;
|
|
36
|
+
iconClass: string;
|
|
37
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
38
|
+
declare const _default: typeof __VLS_export;
|
|
39
|
+
export default _default;
|
|
@@ -1,16 +1,23 @@
|
|
|
1
|
-
<script setup>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import type { PropType } from 'vue'
|
|
3
|
+
|
|
4
|
+
export interface FormKitIconProps {
|
|
5
|
+
onIconPrefixClicked?: () => void
|
|
6
|
+
onIconSuffixClicked?: () => void
|
|
7
|
+
}
|
|
8
|
+
|
|
2
9
|
defineProps({
|
|
3
10
|
iconClass: {
|
|
4
11
|
type: String,
|
|
5
|
-
default:
|
|
12
|
+
default: '',
|
|
6
13
|
},
|
|
7
|
-
onClick: { type: Function
|
|
14
|
+
onClick: { type: Function as PropType<() => void>, default: undefined },
|
|
8
15
|
position: {
|
|
9
16
|
type: String,
|
|
10
17
|
required: true,
|
|
11
|
-
validator: (val) => [
|
|
12
|
-
}
|
|
13
|
-
})
|
|
18
|
+
validator: (val: string) => ['prefix', 'suffix'].includes(val),
|
|
19
|
+
},
|
|
20
|
+
})
|
|
14
21
|
</script>
|
|
15
22
|
|
|
16
23
|
<template>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { PropType } from 'vue';
|
|
2
|
+
export interface FormKitIconProps {
|
|
3
|
+
onIconPrefixClicked?: () => void;
|
|
4
|
+
onIconSuffixClicked?: () => void;
|
|
5
|
+
}
|
|
6
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
7
|
+
iconClass: {
|
|
8
|
+
type: StringConstructor;
|
|
9
|
+
default: string;
|
|
10
|
+
};
|
|
11
|
+
onClick: {
|
|
12
|
+
type: PropType<() => void>;
|
|
13
|
+
default: undefined;
|
|
14
|
+
};
|
|
15
|
+
position: {
|
|
16
|
+
type: StringConstructor;
|
|
17
|
+
required: true;
|
|
18
|
+
validator: (val: string) => boolean;
|
|
19
|
+
};
|
|
20
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
21
|
+
iconClass: {
|
|
22
|
+
type: StringConstructor;
|
|
23
|
+
default: string;
|
|
24
|
+
};
|
|
25
|
+
onClick: {
|
|
26
|
+
type: PropType<() => void>;
|
|
27
|
+
default: undefined;
|
|
28
|
+
};
|
|
29
|
+
position: {
|
|
30
|
+
type: StringConstructor;
|
|
31
|
+
required: true;
|
|
32
|
+
validator: (val: string) => boolean;
|
|
33
|
+
};
|
|
34
|
+
}>> & Readonly<{}>, {
|
|
35
|
+
onClick: () => void;
|
|
36
|
+
iconClass: string;
|
|
37
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
38
|
+
declare const _default: typeof __VLS_export;
|
|
39
|
+
export default _default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
prefix: StringConstructor;
|
|
3
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
4
|
+
prefix: StringConstructor;
|
|
5
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
declare const _default: typeof __VLS_export;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
prefix: StringConstructor;
|
|
3
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
4
|
+
prefix: StringConstructor;
|
|
5
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
declare const _default: typeof __VLS_export;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
suffix: StringConstructor;
|
|
3
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
4
|
+
suffix: StringConstructor;
|
|
5
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
declare const _default: typeof __VLS_export;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
suffix: StringConstructor;
|
|
3
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
4
|
+
suffix: StringConstructor;
|
|
5
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
declare const _default: typeof __VLS_export;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { FormKitFrameworkContext } from '@formkit/core';
|
|
2
|
+
import type { AutoCompleteProps } from 'primevue/autocomplete';
|
|
3
|
+
import type { PropType } from 'vue';
|
|
4
|
+
export interface FormKitPrimeAutoCompleteProps {
|
|
5
|
+
pt?: AutoCompleteProps['pt'];
|
|
6
|
+
ptOptions?: AutoCompleteProps['ptOptions'];
|
|
7
|
+
unstyled?: AutoCompleteProps['unstyled'];
|
|
8
|
+
dropdown?: AutoCompleteProps['dropdown'];
|
|
9
|
+
multiple?: AutoCompleteProps['multiple'];
|
|
10
|
+
typeahead?: AutoCompleteProps['typeahead'];
|
|
11
|
+
optionLabel?: AutoCompleteProps['optionLabel'];
|
|
12
|
+
options?: any[] | undefined;
|
|
13
|
+
size?: AutoCompleteProps['size'];
|
|
14
|
+
minLength?: AutoCompleteProps['minLength'];
|
|
15
|
+
placeholder?: AutoCompleteProps['placeholder'];
|
|
16
|
+
fluid?: AutoCompleteProps['fluid'];
|
|
17
|
+
separators?: string[] | [];
|
|
18
|
+
}
|
|
19
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
20
|
+
context: {
|
|
21
|
+
type: PropType<FormKitFrameworkContext & FormKitPrimeAutoCompleteProps>;
|
|
22
|
+
required: true;
|
|
23
|
+
};
|
|
24
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
25
|
+
context: {
|
|
26
|
+
type: PropType<FormKitFrameworkContext & FormKitPrimeAutoCompleteProps>;
|
|
27
|
+
required: true;
|
|
28
|
+
};
|
|
29
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
30
|
+
declare const _default: typeof __VLS_export;
|
|
31
|
+
export default _default;
|
|
@@ -1,72 +1,123 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
<script setup lang='ts'>
|
|
2
|
+
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
3
|
+
import type { AutoCompleteCompleteEvent, AutoCompleteProps } from 'primevue/autocomplete'
|
|
4
|
+
import type { PropType } from 'vue'
|
|
5
|
+
import { ref, watch } from 'vue'
|
|
6
|
+
import { useFormKitInput } from '../composables'
|
|
7
|
+
|
|
8
|
+
export interface FormKitPrimeAutoCompleteProps {
|
|
9
|
+
pt?: AutoCompleteProps['pt']
|
|
10
|
+
ptOptions?: AutoCompleteProps['ptOptions']
|
|
11
|
+
unstyled?: AutoCompleteProps['unstyled']
|
|
12
|
+
dropdown?: AutoCompleteProps['dropdown']
|
|
13
|
+
multiple?: AutoCompleteProps['multiple']
|
|
14
|
+
typeahead?: AutoCompleteProps['typeahead']
|
|
15
|
+
optionLabel?: AutoCompleteProps['optionLabel']
|
|
16
|
+
options?: any[] | undefined
|
|
17
|
+
size?: AutoCompleteProps['size']
|
|
18
|
+
minLength?: AutoCompleteProps['minLength']
|
|
19
|
+
placeholder?: AutoCompleteProps['placeholder']
|
|
20
|
+
fluid?: AutoCompleteProps['fluid']
|
|
21
|
+
separators?: string[] | []
|
|
22
|
+
}
|
|
23
|
+
|
|
4
24
|
const props = defineProps({
|
|
5
25
|
context: {
|
|
6
|
-
type: Object
|
|
7
|
-
required: true
|
|
8
|
-
}
|
|
9
|
-
})
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
const
|
|
14
|
-
|
|
26
|
+
type: Object as PropType<FormKitFrameworkContext & FormKitPrimeAutoCompleteProps>,
|
|
27
|
+
required: true,
|
|
28
|
+
},
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
|
|
32
|
+
|
|
33
|
+
const suggestions = ref(['', {}])
|
|
34
|
+
suggestions.value = []
|
|
35
|
+
const loading = ref(false)
|
|
36
|
+
|
|
37
|
+
// Local value for v-model
|
|
38
|
+
const localValue = ref(props.context._value)
|
|
39
|
+
|
|
40
|
+
// Sync localValue with context._value
|
|
15
41
|
watch(
|
|
16
42
|
() => props.context._value,
|
|
17
43
|
(newVal) => {
|
|
18
|
-
localValue.value = newVal
|
|
19
|
-
}
|
|
20
|
-
)
|
|
44
|
+
localValue.value = newVal
|
|
45
|
+
},
|
|
46
|
+
)
|
|
47
|
+
|
|
48
|
+
// Emit changes from localValue to context
|
|
21
49
|
watch(
|
|
22
50
|
localValue,
|
|
23
51
|
(newVal) => {
|
|
24
52
|
if (newVal !== props.context._value) {
|
|
25
|
-
props.context._value = newVal
|
|
26
|
-
props.context?.node?.input?.(newVal)
|
|
53
|
+
props.context._value = newVal
|
|
54
|
+
props.context?.node?.input?.(newVal)
|
|
27
55
|
}
|
|
28
|
-
}
|
|
29
|
-
)
|
|
30
|
-
|
|
56
|
+
},
|
|
57
|
+
)
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Searches for suggestions based on the input query.
|
|
61
|
+
*/
|
|
62
|
+
async function search(event: AutoCompleteCompleteEvent) {
|
|
31
63
|
if (props.context?.options && props.context?.optionLabel) {
|
|
32
64
|
suggestions.value = props.context.options.filter((option) => {
|
|
33
|
-
return option[`${props.context.optionLabel}`].toString().toLowerCase().includes(event.query.toLowerCase())
|
|
34
|
-
})
|
|
35
|
-
}
|
|
36
|
-
|
|
65
|
+
return option[`${props.context.optionLabel}`].toString().toLowerCase().includes(event.query.toLowerCase())
|
|
66
|
+
})
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
loading.value = true
|
|
37
70
|
try {
|
|
38
|
-
suggestions.value = await props.context?.attrs.complete(event.query)
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
71
|
+
suggestions.value = await props.context?.attrs.complete(event.query)
|
|
72
|
+
}
|
|
73
|
+
catch (error) {
|
|
74
|
+
console.error('Error fetching suggestions:', error)
|
|
75
|
+
suggestions.value = []
|
|
76
|
+
}
|
|
77
|
+
finally {
|
|
78
|
+
loading.value = false
|
|
44
79
|
}
|
|
45
80
|
}
|
|
46
81
|
}
|
|
47
|
-
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Handles paste event to transform a string separated by any of the provided separators into multiple items.
|
|
85
|
+
*/
|
|
86
|
+
function handlePaste(event: ClipboardEvent) {
|
|
48
87
|
if (!props.context?.multiple)
|
|
49
|
-
return
|
|
50
|
-
const clipboardData = event.clipboardData
|
|
88
|
+
return
|
|
89
|
+
const clipboardData = event.clipboardData
|
|
51
90
|
if (!clipboardData)
|
|
52
|
-
return
|
|
53
|
-
const pastedText = clipboardData.getData(
|
|
54
|
-
const separators = Array.isArray(props.context?.separators) && props.context.separators.length > 0
|
|
55
|
-
|
|
91
|
+
return
|
|
92
|
+
const pastedText = clipboardData.getData('text')
|
|
93
|
+
const separators = Array.isArray(props.context?.separators) && props.context.separators.length > 0
|
|
94
|
+
? props.context.separators
|
|
95
|
+
: [',']
|
|
96
|
+
const regex = new RegExp(`[${separators.map(s => s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')).join('')}]`)
|
|
97
|
+
// If separators are provided, split the pasted text by them
|
|
56
98
|
if (pastedText && regex.test(pastedText)) {
|
|
57
|
-
event.preventDefault()
|
|
58
|
-
const items = pastedText
|
|
99
|
+
event.preventDefault()
|
|
100
|
+
const items = pastedText
|
|
101
|
+
.split(regex)
|
|
102
|
+
.map(item => item.trim())
|
|
103
|
+
.filter(item => item.length > 0)
|
|
104
|
+
// Use a local ref, never mutate context._value directly
|
|
59
105
|
if (Array.isArray(localValue.value)) {
|
|
60
|
-
localValue.value = [...localValue.value, ...items]
|
|
61
|
-
}
|
|
62
|
-
|
|
106
|
+
localValue.value = [...localValue.value, ...items]
|
|
107
|
+
}
|
|
108
|
+
else {
|
|
109
|
+
localValue.value = items
|
|
63
110
|
}
|
|
64
|
-
}
|
|
65
|
-
|
|
111
|
+
}
|
|
112
|
+
// If no separators, just set the value directly
|
|
113
|
+
else if (pastedText) {
|
|
114
|
+
event.preventDefault()
|
|
115
|
+
// If no separators, just set the value directly
|
|
66
116
|
if (Array.isArray(localValue.value)) {
|
|
67
|
-
localValue.value = [...localValue.value, pastedText.trim()]
|
|
68
|
-
}
|
|
69
|
-
|
|
117
|
+
localValue.value = [...localValue.value, pastedText.trim()]
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
localValue.value = [pastedText.trim()]
|
|
70
121
|
}
|
|
71
122
|
}
|
|
72
123
|
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { FormKitFrameworkContext } from '@formkit/core';
|
|
2
|
+
import type { AutoCompleteProps } from 'primevue/autocomplete';
|
|
3
|
+
import type { PropType } from 'vue';
|
|
4
|
+
export interface FormKitPrimeAutoCompleteProps {
|
|
5
|
+
pt?: AutoCompleteProps['pt'];
|
|
6
|
+
ptOptions?: AutoCompleteProps['ptOptions'];
|
|
7
|
+
unstyled?: AutoCompleteProps['unstyled'];
|
|
8
|
+
dropdown?: AutoCompleteProps['dropdown'];
|
|
9
|
+
multiple?: AutoCompleteProps['multiple'];
|
|
10
|
+
typeahead?: AutoCompleteProps['typeahead'];
|
|
11
|
+
optionLabel?: AutoCompleteProps['optionLabel'];
|
|
12
|
+
options?: any[] | undefined;
|
|
13
|
+
size?: AutoCompleteProps['size'];
|
|
14
|
+
minLength?: AutoCompleteProps['minLength'];
|
|
15
|
+
placeholder?: AutoCompleteProps['placeholder'];
|
|
16
|
+
fluid?: AutoCompleteProps['fluid'];
|
|
17
|
+
separators?: string[] | [];
|
|
18
|
+
}
|
|
19
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
20
|
+
context: {
|
|
21
|
+
type: PropType<FormKitFrameworkContext & FormKitPrimeAutoCompleteProps>;
|
|
22
|
+
required: true;
|
|
23
|
+
};
|
|
24
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
25
|
+
context: {
|
|
26
|
+
type: PropType<FormKitFrameworkContext & FormKitPrimeAutoCompleteProps>;
|
|
27
|
+
required: true;
|
|
28
|
+
};
|
|
29
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
30
|
+
declare const _default: typeof __VLS_export;
|
|
31
|
+
export default _default;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { FormKitFrameworkContext } from '@formkit/core';
|
|
2
|
+
import type { CascadeSelectProps } from 'primevue/cascadeselect';
|
|
3
|
+
import type { PropType } from 'vue';
|
|
4
|
+
export interface FormKitPrimeCascadeSelectProps {
|
|
5
|
+
options?: CascadeSelectProps['options'];
|
|
6
|
+
optionLabel?: CascadeSelectProps['optionLabel'];
|
|
7
|
+
optionValue?: CascadeSelectProps['optionValue'];
|
|
8
|
+
optionGroupLabel?: CascadeSelectProps['optionGroupLabel'];
|
|
9
|
+
optionGroupChildren?: CascadeSelectProps['optionGroupChildren'];
|
|
10
|
+
placeholder?: CascadeSelectProps['placeholder'];
|
|
11
|
+
pt?: CascadeSelectProps['pt'];
|
|
12
|
+
ptOptions?: CascadeSelectProps['ptOptions'];
|
|
13
|
+
unstyled?: CascadeSelectProps['unstyled'];
|
|
14
|
+
size?: CascadeSelectProps['size'];
|
|
15
|
+
}
|
|
16
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
17
|
+
context: {
|
|
18
|
+
type: PropType<FormKitFrameworkContext & FormKitPrimeCascadeSelectProps>;
|
|
19
|
+
required: true;
|
|
20
|
+
};
|
|
21
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
22
|
+
context: {
|
|
23
|
+
type: PropType<FormKitFrameworkContext & FormKitPrimeCascadeSelectProps>;
|
|
24
|
+
required: true;
|
|
25
|
+
};
|
|
26
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
export default _default;
|
|
@@ -1,12 +1,31 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import {
|
|
1
|
+
<script setup lang='ts'>
|
|
2
|
+
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
3
|
+
import type { CascadeSelectProps } from 'primevue/cascadeselect'
|
|
4
|
+
|
|
5
|
+
import type { PropType } from 'vue'
|
|
6
|
+
import { useFormKitInput } from '../composables'
|
|
7
|
+
|
|
8
|
+
export interface FormKitPrimeCascadeSelectProps {
|
|
9
|
+
options?: CascadeSelectProps['options']
|
|
10
|
+
optionLabel?: CascadeSelectProps['optionLabel']
|
|
11
|
+
optionValue?: CascadeSelectProps['optionValue']
|
|
12
|
+
optionGroupLabel?: CascadeSelectProps['optionGroupLabel']
|
|
13
|
+
optionGroupChildren?: CascadeSelectProps['optionGroupChildren']
|
|
14
|
+
placeholder?: CascadeSelectProps['placeholder']
|
|
15
|
+
pt?: CascadeSelectProps['pt']
|
|
16
|
+
ptOptions?: CascadeSelectProps['ptOptions']
|
|
17
|
+
unstyled?: CascadeSelectProps['unstyled']
|
|
18
|
+
size?: CascadeSelectProps['size']
|
|
19
|
+
}
|
|
20
|
+
|
|
3
21
|
const props = defineProps({
|
|
4
22
|
context: {
|
|
5
|
-
type: Object
|
|
6
|
-
required: true
|
|
7
|
-
}
|
|
8
|
-
})
|
|
9
|
-
|
|
23
|
+
type: Object as PropType<FormKitFrameworkContext & FormKitPrimeCascadeSelectProps>,
|
|
24
|
+
required: true,
|
|
25
|
+
},
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
|
|
10
29
|
</script>
|
|
11
30
|
|
|
12
31
|
<template>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { FormKitFrameworkContext } from '@formkit/core';
|
|
2
|
+
import type { CascadeSelectProps } from 'primevue/cascadeselect';
|
|
3
|
+
import type { PropType } from 'vue';
|
|
4
|
+
export interface FormKitPrimeCascadeSelectProps {
|
|
5
|
+
options?: CascadeSelectProps['options'];
|
|
6
|
+
optionLabel?: CascadeSelectProps['optionLabel'];
|
|
7
|
+
optionValue?: CascadeSelectProps['optionValue'];
|
|
8
|
+
optionGroupLabel?: CascadeSelectProps['optionGroupLabel'];
|
|
9
|
+
optionGroupChildren?: CascadeSelectProps['optionGroupChildren'];
|
|
10
|
+
placeholder?: CascadeSelectProps['placeholder'];
|
|
11
|
+
pt?: CascadeSelectProps['pt'];
|
|
12
|
+
ptOptions?: CascadeSelectProps['ptOptions'];
|
|
13
|
+
unstyled?: CascadeSelectProps['unstyled'];
|
|
14
|
+
size?: CascadeSelectProps['size'];
|
|
15
|
+
}
|
|
16
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
17
|
+
context: {
|
|
18
|
+
type: PropType<FormKitFrameworkContext & FormKitPrimeCascadeSelectProps>;
|
|
19
|
+
required: true;
|
|
20
|
+
};
|
|
21
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
22
|
+
context: {
|
|
23
|
+
type: PropType<FormKitFrameworkContext & FormKitPrimeCascadeSelectProps>;
|
|
24
|
+
required: true;
|
|
25
|
+
};
|
|
26
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
export default _default;
|