@sfxcode/formkit-nuxt-ui 0.7.2

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.
Files changed (106) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +385 -0
  3. package/dist/module.d.mts +7 -0
  4. package/dist/module.json +12 -0
  5. package/dist/module.mjs +29 -0
  6. package/dist/runtime/components/FUDataDebug.d.vue.ts +43 -0
  7. package/dist/runtime/components/FUDataDebug.vue +30 -0
  8. package/dist/runtime/components/FUDataDebug.vue.d.ts +43 -0
  9. package/dist/runtime/components/FUDataEdit.d.vue.ts +180 -0
  10. package/dist/runtime/components/FUDataEdit.vue +141 -0
  11. package/dist/runtime/components/FUDataEdit.vue.d.ts +180 -0
  12. package/dist/runtime/components/FUDataView.d.vue.ts +73 -0
  13. package/dist/runtime/components/FUDataView.vue +49 -0
  14. package/dist/runtime/components/FUDataView.vue.d.ts +73 -0
  15. package/dist/runtime/components/inputs/FUCheckbox.d.vue.ts +27 -0
  16. package/dist/runtime/components/inputs/FUCheckbox.vue +33 -0
  17. package/dist/runtime/components/inputs/FUCheckbox.vue.d.ts +27 -0
  18. package/dist/runtime/components/inputs/FUCheckboxGroup.d.vue.ts +38 -0
  19. package/dist/runtime/components/inputs/FUCheckboxGroup.vue +34 -0
  20. package/dist/runtime/components/inputs/FUCheckboxGroup.vue.d.ts +38 -0
  21. package/dist/runtime/components/inputs/FUColorPicker.d.vue.ts +22 -0
  22. package/dist/runtime/components/inputs/FUColorPicker.vue +27 -0
  23. package/dist/runtime/components/inputs/FUColorPicker.vue.d.ts +22 -0
  24. package/dist/runtime/components/inputs/FUInput.d.vue.ts +44 -0
  25. package/dist/runtime/components/inputs/FUInput.vue +50 -0
  26. package/dist/runtime/components/inputs/FUInput.vue.d.ts +44 -0
  27. package/dist/runtime/components/inputs/FUInputDate.d.vue.ts +51 -0
  28. package/dist/runtime/components/inputs/FUInputDate.vue +52 -0
  29. package/dist/runtime/components/inputs/FUInputDate.vue.d.ts +51 -0
  30. package/dist/runtime/components/inputs/FUInputMenu.d.vue.ts +73 -0
  31. package/dist/runtime/components/inputs/FUInputMenu.vue +65 -0
  32. package/dist/runtime/components/inputs/FUInputMenu.vue.d.ts +73 -0
  33. package/dist/runtime/components/inputs/FUInputNumber.d.vue.ts +43 -0
  34. package/dist/runtime/components/inputs/FUInputNumber.vue +49 -0
  35. package/dist/runtime/components/inputs/FUInputNumber.vue.d.ts +43 -0
  36. package/dist/runtime/components/inputs/FUInputTags.d.vue.ts +47 -0
  37. package/dist/runtime/components/inputs/FUInputTags.vue +53 -0
  38. package/dist/runtime/components/inputs/FUInputTags.vue.d.ts +47 -0
  39. package/dist/runtime/components/inputs/FUInputTime.d.vue.ts +50 -0
  40. package/dist/runtime/components/inputs/FUInputTime.vue +50 -0
  41. package/dist/runtime/components/inputs/FUInputTime.vue.d.ts +50 -0
  42. package/dist/runtime/components/inputs/FUPinInput.d.vue.ts +30 -0
  43. package/dist/runtime/components/inputs/FUPinInput.vue +37 -0
  44. package/dist/runtime/components/inputs/FUPinInput.vue.d.ts +30 -0
  45. package/dist/runtime/components/inputs/FURadioGroup.d.vue.ts +37 -0
  46. package/dist/runtime/components/inputs/FURadioGroup.vue +35 -0
  47. package/dist/runtime/components/inputs/FURadioGroup.vue.d.ts +37 -0
  48. package/dist/runtime/components/inputs/FUSelect.d.vue.ts +48 -0
  49. package/dist/runtime/components/inputs/FUSelect.vue +51 -0
  50. package/dist/runtime/components/inputs/FUSelect.vue.d.ts +48 -0
  51. package/dist/runtime/components/inputs/FUSelectMenu.d.vue.ts +73 -0
  52. package/dist/runtime/components/inputs/FUSelectMenu.vue +62 -0
  53. package/dist/runtime/components/inputs/FUSelectMenu.vue.d.ts +73 -0
  54. package/dist/runtime/components/inputs/FUSlider.d.vue.ts +29 -0
  55. package/dist/runtime/components/inputs/FUSlider.vue +36 -0
  56. package/dist/runtime/components/inputs/FUSlider.vue.d.ts +29 -0
  57. package/dist/runtime/components/inputs/FUSwitch.d.vue.ts +28 -0
  58. package/dist/runtime/components/inputs/FUSwitch.vue +34 -0
  59. package/dist/runtime/components/inputs/FUSwitch.vue.d.ts +28 -0
  60. package/dist/runtime/components/inputs/FUTextarea.d.vue.ts +44 -0
  61. package/dist/runtime/components/inputs/FUTextarea.vue +50 -0
  62. package/dist/runtime/components/inputs/FUTextarea.vue.d.ts +44 -0
  63. package/dist/runtime/components/output/FUIcon.d.vue.ts +38 -0
  64. package/dist/runtime/components/output/FUIcon.vue +21 -0
  65. package/dist/runtime/components/output/FUIcon.vue.d.ts +38 -0
  66. package/dist/runtime/components/output/FUOutputBoolean.d.vue.ts +30 -0
  67. package/dist/runtime/components/output/FUOutputBoolean.vue +56 -0
  68. package/dist/runtime/components/output/FUOutputBoolean.vue.d.ts +30 -0
  69. package/dist/runtime/components/output/FUOutputDate.d.vue.ts +30 -0
  70. package/dist/runtime/components/output/FUOutputDate.vue +52 -0
  71. package/dist/runtime/components/output/FUOutputDate.vue.d.ts +30 -0
  72. package/dist/runtime/components/output/FUOutputLink.d.vue.ts +28 -0
  73. package/dist/runtime/components/output/FUOutputLink.vue +78 -0
  74. package/dist/runtime/components/output/FUOutputLink.vue.d.ts +28 -0
  75. package/dist/runtime/components/output/FUOutputList.d.vue.ts +29 -0
  76. package/dist/runtime/components/output/FUOutputList.vue +143 -0
  77. package/dist/runtime/components/output/FUOutputList.vue.d.ts +29 -0
  78. package/dist/runtime/components/output/FUOutputNumber.d.vue.ts +28 -0
  79. package/dist/runtime/components/output/FUOutputNumber.vue +52 -0
  80. package/dist/runtime/components/output/FUOutputNumber.vue.d.ts +28 -0
  81. package/dist/runtime/components/output/FUOutputText.d.vue.ts +26 -0
  82. package/dist/runtime/components/output/FUOutputText.vue +35 -0
  83. package/dist/runtime/components/output/FUOutputText.vue.d.ts +26 -0
  84. package/dist/runtime/composables/useFormKitRepeater.d.ts +5 -0
  85. package/dist/runtime/composables/useFormKitRepeater.js +54 -0
  86. package/dist/runtime/composables/useFormKitSchema.d.ts +26 -0
  87. package/dist/runtime/composables/useFormKitSchema.js +58 -0
  88. package/dist/runtime/definitions/index.d.ts +26 -0
  89. package/dist/runtime/definitions/index.js +28 -0
  90. package/dist/runtime/definitions/input.d.ts +17 -0
  91. package/dist/runtime/definitions/input.js +81 -0
  92. package/dist/runtime/definitions/output.d.ts +7 -0
  93. package/dist/runtime/definitions/output.js +31 -0
  94. package/dist/runtime/formkit.config.d.ts +3 -0
  95. package/dist/runtime/formkit.config.js +33 -0
  96. package/dist/runtime/plugin.d.ts +2 -0
  97. package/dist/runtime/plugin.js +5 -0
  98. package/dist/runtime/plugins/index.d.ts +3 -0
  99. package/dist/runtime/plugins/index.js +55 -0
  100. package/dist/runtime/server/tsconfig.json +3 -0
  101. package/dist/runtime/utils/useFormKitInput.d.ts +13 -0
  102. package/dist/runtime/utils/useFormKitInput.js +42 -0
  103. package/dist/runtime/utils/useFormKitOutput.d.ts +10 -0
  104. package/dist/runtime/utils/useFormKitOutput.js +73 -0
  105. package/dist/types.d.mts +3 -0
  106. package/package.json +91 -0
@@ -0,0 +1,27 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { PropType } from 'vue';
3
+ export interface FormKitCheckboxProps {
4
+ label?: string;
5
+ description?: string;
6
+ color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
7
+ variant?: 'card' | 'list';
8
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
9
+ indicator?: 'start' | 'end' | 'hidden';
10
+ icon?: string;
11
+ indeterminateIcon?: string;
12
+ autofocus?: false | true | 'true' | 'false';
13
+ ui?: Record<string, unknown>;
14
+ }
15
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
16
+ context: {
17
+ type: PropType<FormKitFrameworkContext & FormKitCheckboxProps>;
18
+ required: true;
19
+ };
20
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
21
+ context: {
22
+ type: PropType<FormKitFrameworkContext & FormKitCheckboxProps>;
23
+ required: true;
24
+ };
25
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
26
+ declare const _default: typeof __VLS_export;
27
+ export default _default;
@@ -0,0 +1,33 @@
1
+ <script setup>
2
+ import { useFormKitInput } from "../../utils/useFormKitInput";
3
+ const props = defineProps({
4
+ context: {
5
+ type: Object,
6
+ required: true
7
+ }
8
+ });
9
+ const { handleInput, handleChange, styleClass, modelValue, color } = useFormKitInput(props.context);
10
+ </script>
11
+
12
+ <template>
13
+ <UCheckbox
14
+ :id="context.id"
15
+ v-model="modelValue"
16
+ v-bind="{ ...context?.attrs }"
17
+ :class="styleClass"
18
+ :disabled="!!context?.disabled"
19
+ :style="context?.attrs.style"
20
+ :color="color"
21
+ :size="context.size ?? 'md'"
22
+ :variant="context.variant"
23
+ :label="context.label"
24
+ :description="context.description"
25
+ :indicator="context.indicator"
26
+ :icon="context.icon"
27
+ :indeterminate-icon="context.indeterminateIcon"
28
+ :autofocus="context.autofocus"
29
+ :ui="context.ui"
30
+ @change="handleChange"
31
+ @update:model-value="handleInput"
32
+ />
33
+ </template>
@@ -0,0 +1,27 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { PropType } from 'vue';
3
+ export interface FormKitCheckboxProps {
4
+ label?: string;
5
+ description?: string;
6
+ color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
7
+ variant?: 'card' | 'list';
8
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
9
+ indicator?: 'start' | 'end' | 'hidden';
10
+ icon?: string;
11
+ indeterminateIcon?: string;
12
+ autofocus?: false | true | 'true' | 'false';
13
+ ui?: Record<string, unknown>;
14
+ }
15
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
16
+ context: {
17
+ type: PropType<FormKitFrameworkContext & FormKitCheckboxProps>;
18
+ required: true;
19
+ };
20
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
21
+ context: {
22
+ type: PropType<FormKitFrameworkContext & FormKitCheckboxProps>;
23
+ required: true;
24
+ };
25
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
26
+ declare const _default: typeof __VLS_export;
27
+ export default _default;
@@ -0,0 +1,38 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { PropType } from 'vue';
3
+ export interface CheckboxOption {
4
+ value: string | number | boolean;
5
+ label?: string;
6
+ description?: string;
7
+ disabled?: boolean;
8
+ [key: string]: unknown;
9
+ }
10
+ export interface FormKitCheckboxGroupProps {
11
+ options?: string[] | CheckboxOption[];
12
+ legend?: string;
13
+ valueKey?: string;
14
+ labelKey?: string;
15
+ descriptionKey?: string;
16
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
17
+ variant?: 'table' | 'list' | 'card';
18
+ orientation?: 'horizontal' | 'vertical';
19
+ loop?: boolean;
20
+ name?: string;
21
+ color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
22
+ indicator?: 'start' | 'end' | 'hidden';
23
+ icon?: string;
24
+ ui?: Record<string, unknown>;
25
+ }
26
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
27
+ context: {
28
+ type: PropType<FormKitFrameworkContext & FormKitCheckboxGroupProps>;
29
+ required: true;
30
+ };
31
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
32
+ context: {
33
+ type: PropType<FormKitFrameworkContext & FormKitCheckboxGroupProps>;
34
+ required: true;
35
+ };
36
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
37
+ declare const _default: typeof __VLS_export;
38
+ export default _default;
@@ -0,0 +1,34 @@
1
+ <script setup>
2
+ import { useFormKitInput } from "../../utils/useFormKitInput";
3
+ const props = defineProps({
4
+ context: {
5
+ type: Object,
6
+ required: true
7
+ }
8
+ });
9
+ const { handleInput, handleChange, styleClass, color, modelValue, items } = useFormKitInput(props.context);
10
+ </script>
11
+
12
+ <template>
13
+ <UCheckboxGroup
14
+ :id="context.id"
15
+ v-model="modelValue"
16
+ v-bind="{ ...context?.attrs }"
17
+ :class="styleClass"
18
+ :disabled="!!context?.disabled"
19
+ :style="context?.attrs.style"
20
+ :color="color"
21
+ :size="context.size ?? 'md'"
22
+ :variant="context.variant ?? 'list'"
23
+ :orientation="context.orientation ?? 'vertical'"
24
+ :items="items"
25
+ :legend="context.legend"
26
+ :value-key="context.valueKey"
27
+ :label-key="context.labelKey"
28
+ :description-key="context.descriptionKey"
29
+ :loop="context.loop ?? false"
30
+ :name="context.name"
31
+ @change="handleChange"
32
+ @update:model-value="handleInput"
33
+ />
34
+ </template>
@@ -0,0 +1,38 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { PropType } from 'vue';
3
+ export interface CheckboxOption {
4
+ value: string | number | boolean;
5
+ label?: string;
6
+ description?: string;
7
+ disabled?: boolean;
8
+ [key: string]: unknown;
9
+ }
10
+ export interface FormKitCheckboxGroupProps {
11
+ options?: string[] | CheckboxOption[];
12
+ legend?: string;
13
+ valueKey?: string;
14
+ labelKey?: string;
15
+ descriptionKey?: string;
16
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
17
+ variant?: 'table' | 'list' | 'card';
18
+ orientation?: 'horizontal' | 'vertical';
19
+ loop?: boolean;
20
+ name?: string;
21
+ color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
22
+ indicator?: 'start' | 'end' | 'hidden';
23
+ icon?: string;
24
+ ui?: Record<string, unknown>;
25
+ }
26
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
27
+ context: {
28
+ type: PropType<FormKitFrameworkContext & FormKitCheckboxGroupProps>;
29
+ required: true;
30
+ };
31
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
32
+ context: {
33
+ type: PropType<FormKitFrameworkContext & FormKitCheckboxGroupProps>;
34
+ required: true;
35
+ };
36
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
37
+ declare const _default: typeof __VLS_export;
38
+ export default _default;
@@ -0,0 +1,22 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { PropType } from 'vue';
3
+ export interface FormKitColorPickerProps {
4
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
5
+ inputClass?: string;
6
+ format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab';
7
+ throttle: number;
8
+ ui?: Record<string, unknown>;
9
+ }
10
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
11
+ context: {
12
+ type: PropType<FormKitFrameworkContext & FormKitColorPickerProps>;
13
+ required: true;
14
+ };
15
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
16
+ context: {
17
+ type: PropType<FormKitFrameworkContext & FormKitColorPickerProps>;
18
+ required: true;
19
+ };
20
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
21
+ declare const _default: typeof __VLS_export;
22
+ export default _default;
@@ -0,0 +1,27 @@
1
+ <script setup>
2
+ import { useFormKitInput } from "../../utils/useFormKitInput";
3
+ const props = defineProps({
4
+ context: {
5
+ type: Object,
6
+ required: true
7
+ }
8
+ });
9
+ const { handleInput, handleChange, styleClass, modelValue } = useFormKitInput(props.context);
10
+ </script>
11
+
12
+ <template>
13
+ <UColorPicker
14
+ :id="context.id"
15
+ v-model="modelValue"
16
+ v-bind="{ ...context?.attrs }"
17
+ :class="styleClass"
18
+ :disabled="!!context?.disabled"
19
+ :style="context?.attrs.style"
20
+ :size="context.size ?? 'md'"
21
+ :format="context.format || 'hex'"
22
+ :throttle="context.throttle"
23
+ :ui="context.ui"
24
+ @change="handleChange"
25
+ @update:model-value="handleInput"
26
+ />
27
+ </template>
@@ -0,0 +1,22 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { PropType } from 'vue';
3
+ export interface FormKitColorPickerProps {
4
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
5
+ inputClass?: string;
6
+ format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab';
7
+ throttle: number;
8
+ ui?: Record<string, unknown>;
9
+ }
10
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
11
+ context: {
12
+ type: PropType<FormKitFrameworkContext & FormKitColorPickerProps>;
13
+ required: true;
14
+ };
15
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
16
+ context: {
17
+ type: PropType<FormKitFrameworkContext & FormKitColorPickerProps>;
18
+ required: true;
19
+ };
20
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
21
+ declare const _default: typeof __VLS_export;
22
+ export default _default;
@@ -0,0 +1,44 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { PropType } from 'vue';
3
+ import type { AvatarProps } from '#ui/components/Avatar.vue';
4
+ export interface FormKitInputProps {
5
+ inputType?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
6
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
7
+ autocomplete?: string & {} | 'on' | 'off';
8
+ autofocus?: boolean;
9
+ autofocusDelay?: number;
10
+ highlight?: boolean;
11
+ fixed?: boolean;
12
+ color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
13
+ icon?: string;
14
+ avatar?: AvatarProps;
15
+ leading?: boolean;
16
+ leadingIcon?: string;
17
+ trailing?: boolean;
18
+ trailingIcon?: string;
19
+ loading?: boolean;
20
+ loadingIcon?: boolean;
21
+ placeholder?: string;
22
+ list?: string;
23
+ max?: number | string;
24
+ maxLength?: number | string;
25
+ min?: number | string;
26
+ minLength?: number | string;
27
+ pattern?: string;
28
+ step?: number | string;
29
+ variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
30
+ ui?: Record<string, unknown>;
31
+ }
32
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
33
+ context: {
34
+ type: PropType<FormKitFrameworkContext & FormKitInputProps>;
35
+ required: true;
36
+ };
37
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
38
+ context: {
39
+ type: PropType<FormKitFrameworkContext & FormKitInputProps>;
40
+ required: true;
41
+ };
42
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
43
+ declare const _default: typeof __VLS_export;
44
+ export default _default;
@@ -0,0 +1,50 @@
1
+ <script setup>
2
+ import { useFormKitInput } from "../../utils/useFormKitInput";
3
+ const props = defineProps({
4
+ context: {
5
+ type: Object,
6
+ required: true
7
+ }
8
+ });
9
+ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
10
+ </script>
11
+
12
+ <template>
13
+ <UInput
14
+ :id="context.id"
15
+ v-model="modelValue"
16
+ v-bind="{ ...context?.attrs }"
17
+ :class="styleClass"
18
+ :disabled="!!context?.disabled"
19
+ :readonly="context?.attrs.readonly ?? false"
20
+ :style="context?.attrs.style"
21
+ :color="color"
22
+ :highlight="isInvalid || context.highlight"
23
+ :size="context.size ?? 'md'"
24
+ :variant="context.variant ?? 'outline'"
25
+ :type="context?.inputType || 'text'"
26
+ :placeholder="context.placeholder"
27
+ :autocomplete="context.autocomplete || 'off'"
28
+ :autofocus="context.autofocus"
29
+ :autofocus-delay="context.autofocusDelay"
30
+ :fixed="context.fixed"
31
+ :icon="context.icon"
32
+ :avatar="context.avatar"
33
+ :leading="context.leading"
34
+ :leading-icon="context.leadingIcon"
35
+ :trailing="context.trailing"
36
+ :trailing-icon="context.trailingIcon"
37
+ :loading="context.loading"
38
+ :loading-icon="context.loadingIcon"
39
+ :list="context.list"
40
+ :max="context.max"
41
+ :max-length="context.maxLength"
42
+ :min="context.min"
43
+ :min-length="context.minLength"
44
+ :pattern="context.pattern"
45
+ :step="context.step"
46
+ :ui="context.ui"
47
+ @change="handleChange"
48
+ @update:model-value="handleInput"
49
+ />
50
+ </template>
@@ -0,0 +1,44 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { PropType } from 'vue';
3
+ import type { AvatarProps } from '#ui/components/Avatar.vue';
4
+ export interface FormKitInputProps {
5
+ inputType?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
6
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
7
+ autocomplete?: string & {} | 'on' | 'off';
8
+ autofocus?: boolean;
9
+ autofocusDelay?: number;
10
+ highlight?: boolean;
11
+ fixed?: boolean;
12
+ color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
13
+ icon?: string;
14
+ avatar?: AvatarProps;
15
+ leading?: boolean;
16
+ leadingIcon?: string;
17
+ trailing?: boolean;
18
+ trailingIcon?: string;
19
+ loading?: boolean;
20
+ loadingIcon?: boolean;
21
+ placeholder?: string;
22
+ list?: string;
23
+ max?: number | string;
24
+ maxLength?: number | string;
25
+ min?: number | string;
26
+ minLength?: number | string;
27
+ pattern?: string;
28
+ step?: number | string;
29
+ variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
30
+ ui?: Record<string, unknown>;
31
+ }
32
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
33
+ context: {
34
+ type: PropType<FormKitFrameworkContext & FormKitInputProps>;
35
+ required: true;
36
+ };
37
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
38
+ context: {
39
+ type: PropType<FormKitFrameworkContext & FormKitInputProps>;
40
+ required: true;
41
+ };
42
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
43
+ declare const _default: typeof __VLS_export;
44
+ export default _default;
@@ -0,0 +1,51 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
3
+ import type { PropType } from 'vue';
4
+ import type { AvatarProps } from '#ui/components/Avatar.vue';
5
+ export interface DateRange {
6
+ start: CalendarDate | CalendarDateTime | ZonedDateTime;
7
+ end: CalendarDate | CalendarDateTime | ZonedDateTime;
8
+ }
9
+ export interface FormKitInputDateProps {
10
+ color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
11
+ variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
12
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
13
+ highlight?: boolean;
14
+ fixed?: boolean;
15
+ autofocus?: boolean;
16
+ autofocusDelay?: number;
17
+ range?: boolean;
18
+ separatorIcon?: string;
19
+ icon?: string;
20
+ avatar?: AvatarProps;
21
+ leading?: boolean;
22
+ leadingIcon?: string;
23
+ trailing?: boolean;
24
+ trailingIcon?: string;
25
+ loading?: boolean;
26
+ loadingIcon?: string;
27
+ defaultValue: CalendarDate | CalendarDateTime | ZonedDateTime | DateRange;
28
+ placeholder?: CalendarDate | CalendarDateTime | ZonedDateTime;
29
+ defaultPlaceholder?: CalendarDate | CalendarDateTime | ZonedDateTime;
30
+ hourCycle?: 12 | 24;
31
+ step?: Record<string, number>;
32
+ granularity?: 'day' | 'hour' | 'minute' | 'second';
33
+ hideTimeZone?: boolean;
34
+ maxValue?: CalendarDate | CalendarDateTime | ZonedDateTime;
35
+ minValue?: CalendarDate | CalendarDateTime | ZonedDateTime;
36
+ isDateUnavailable?: (date: DateValue) => boolean;
37
+ ui?: Record<string, unknown>;
38
+ }
39
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
40
+ context: {
41
+ type: PropType<FormKitFrameworkContext & FormKitInputDateProps>;
42
+ required: true;
43
+ };
44
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
45
+ context: {
46
+ type: PropType<FormKitFrameworkContext & FormKitInputDateProps>;
47
+ required: true;
48
+ };
49
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
50
+ declare const _default: typeof __VLS_export;
51
+ export default _default;
@@ -0,0 +1,52 @@
1
+ <script setup>
2
+ import { useFormKitInput } from "../../utils/useFormKitInput";
3
+ const props = defineProps({
4
+ context: {
5
+ type: Object,
6
+ required: true
7
+ }
8
+ });
9
+ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
10
+ </script>
11
+
12
+ <template>
13
+ <UInputDate
14
+ :id="context.id"
15
+ v-model="modelValue"
16
+ v-bind="{ ...context?.attrs }"
17
+ :default-value="context.defaultValue"
18
+ :class="styleClass"
19
+ :disabled="!!context?.disabled"
20
+ :readonly="context?.attrs.readonly ?? false"
21
+ :style="context?.attrs.style"
22
+ :color="color"
23
+ :highlight="isInvalid || context.highlight"
24
+ :size="context.size ?? 'md'"
25
+ :variant="context.variant ?? 'outline'"
26
+ :placeholder="context.placeholder"
27
+ :default-placeholder="context.defaultPlaceholder"
28
+ :autofocus="context.autofocus"
29
+ :autofocus-delay="context.autofocusDelay"
30
+ :fixed="context.fixed"
31
+ :separator-icon="context.separatorIcon"
32
+ :range="context.range"
33
+ :icon="context.icon"
34
+ :avatar="context.avatar"
35
+ :leading="context.leading"
36
+ :leading-icon="context.leadingIcon"
37
+ :trailing="context.trailing"
38
+ :trailing-icon="context.trailingIcon"
39
+ :loading="context.loading"
40
+ :loading-icon="context.loadingIcon"
41
+ :hour-cycle="context.hourCycle"
42
+ :step="context.step"
43
+ :granularity="context.granularity"
44
+ :hide-time-zone="context.hideTimeZone"
45
+ :max-value="context.maxValue"
46
+ :min-value="context.minValue"
47
+ :is-date-unavailable="context.isDateUnavailable"
48
+ :ui="context.ui"
49
+ @change="handleChange"
50
+ @update:model-value="handleInput"
51
+ />
52
+ </template>
@@ -0,0 +1,51 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
3
+ import type { PropType } from 'vue';
4
+ import type { AvatarProps } from '#ui/components/Avatar.vue';
5
+ export interface DateRange {
6
+ start: CalendarDate | CalendarDateTime | ZonedDateTime;
7
+ end: CalendarDate | CalendarDateTime | ZonedDateTime;
8
+ }
9
+ export interface FormKitInputDateProps {
10
+ color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
11
+ variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
12
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
13
+ highlight?: boolean;
14
+ fixed?: boolean;
15
+ autofocus?: boolean;
16
+ autofocusDelay?: number;
17
+ range?: boolean;
18
+ separatorIcon?: string;
19
+ icon?: string;
20
+ avatar?: AvatarProps;
21
+ leading?: boolean;
22
+ leadingIcon?: string;
23
+ trailing?: boolean;
24
+ trailingIcon?: string;
25
+ loading?: boolean;
26
+ loadingIcon?: string;
27
+ defaultValue: CalendarDate | CalendarDateTime | ZonedDateTime | DateRange;
28
+ placeholder?: CalendarDate | CalendarDateTime | ZonedDateTime;
29
+ defaultPlaceholder?: CalendarDate | CalendarDateTime | ZonedDateTime;
30
+ hourCycle?: 12 | 24;
31
+ step?: Record<string, number>;
32
+ granularity?: 'day' | 'hour' | 'minute' | 'second';
33
+ hideTimeZone?: boolean;
34
+ maxValue?: CalendarDate | CalendarDateTime | ZonedDateTime;
35
+ minValue?: CalendarDate | CalendarDateTime | ZonedDateTime;
36
+ isDateUnavailable?: (date: DateValue) => boolean;
37
+ ui?: Record<string, unknown>;
38
+ }
39
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
40
+ context: {
41
+ type: PropType<FormKitFrameworkContext & FormKitInputDateProps>;
42
+ required: true;
43
+ };
44
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
45
+ context: {
46
+ type: PropType<FormKitFrameworkContext & FormKitInputDateProps>;
47
+ required: true;
48
+ };
49
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
50
+ declare const _default: typeof __VLS_export;
51
+ export default _default;
@@ -0,0 +1,73 @@
1
+ import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { PropType } from 'vue';
3
+ export interface InputMenuItem {
4
+ label?: string;
5
+ icon?: string;
6
+ avatar?: {
7
+ src?: string;
8
+ alt?: string;
9
+ };
10
+ chip?: string | number;
11
+ disabled?: boolean;
12
+ [key: string]: unknown;
13
+ }
14
+ export interface FormKitInputMenuProps {
15
+ options?: string[] | InputMenuItem[];
16
+ inputType?: 'number' | 'search' | 'image' | 'text' | 'button' | 'time' | 'color' | 'checkbox' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'month' | 'password' | 'radio' | 'range' | 'reset' | 'submit' | 'tel' | 'url' | 'week' | string & {};
17
+ placeholder?: string;
18
+ color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
19
+ variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
20
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
21
+ autofocus?: boolean;
22
+ autofocusDelay?: number;
23
+ trailingIcon?: string;
24
+ selectedIcon?: string;
25
+ deleteIcon?: string;
26
+ clear?: boolean;
27
+ clearIcon?: string;
28
+ arrow?: boolean;
29
+ portal?: boolean;
30
+ virtualize?: boolean;
31
+ valueKey?: string;
32
+ labelKey?: string;
33
+ descriptionKey?: string;
34
+ multiple?: boolean;
35
+ highlight?: boolean;
36
+ fixed?: boolean;
37
+ createItem?: boolean | 'always' | {
38
+ position?: 'top' | 'bottom';
39
+ when?: 'always' | 'empty' | undefined;
40
+ } | undefined;
41
+ filterFields?: string[];
42
+ ignoreFilter?: false;
43
+ defaultOpen?: false;
44
+ resetSearchTermOnBlur?: boolean;
45
+ resetSearchTermOnSelect?: boolean;
46
+ resetModelValueOnClear?: boolean;
47
+ highlightOnHover?: boolean;
48
+ openOnClick?: boolean;
49
+ openOnFocus?: boolean;
50
+ icon?: string;
51
+ leading?: boolean;
52
+ leadingIcon?: string;
53
+ trailing?: boolean;
54
+ loading?: boolean;
55
+ loadingIcon?: string;
56
+ list?: string;
57
+ autocomplete?: string & {} | 'on' | 'off';
58
+ searchTerm?: string;
59
+ ui?: Record<string, unknown>;
60
+ }
61
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
62
+ context: {
63
+ type: PropType<FormKitFrameworkContext & FormKitInputMenuProps>;
64
+ required: true;
65
+ };
66
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
67
+ context: {
68
+ type: PropType<FormKitFrameworkContext & FormKitInputMenuProps>;
69
+ required: true;
70
+ };
71
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
72
+ declare const _default: typeof __VLS_export;
73
+ export default _default;