@sfxcode/nuxt-ui-formkit 1.1.1 → 1.2.1
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/README.md +11 -1
- package/dist/module.json +1 -1
- package/dist/runtime/components/FUDataEdit.d.vue.ts +8 -4
- package/dist/runtime/components/FUDataEdit.vue +1 -1
- package/dist/runtime/components/FUDataEdit.vue.d.ts +8 -4
- package/dist/runtime/components/FUDataView.d.vue.ts +8 -4
- package/dist/runtime/components/FUDataView.vue +1 -1
- package/dist/runtime/components/FUDataView.vue.d.ts +8 -4
- package/dist/runtime/components/inputs/FUCalendar.d.vue.ts +48 -0
- package/dist/runtime/components/inputs/FUCalendar.vue +61 -0
- package/dist/runtime/components/inputs/FUCalendar.vue.d.ts +48 -0
- package/dist/runtime/components/inputs/FUEditor.d.vue.ts +60 -0
- package/dist/runtime/components/inputs/FUEditor.vue +121 -0
- package/dist/runtime/components/inputs/FUEditor.vue.d.ts +60 -0
- package/dist/runtime/components/inputs/FUFileUpload.d.vue.ts +39 -0
- package/dist/runtime/components/inputs/FUFileUpload.vue +56 -0
- package/dist/runtime/components/inputs/FUFileUpload.vue.d.ts +39 -0
- package/dist/runtime/components/inputs/FUInputDate.d.vue.ts +18 -5
- package/dist/runtime/components/inputs/FUInputDate.vue +24 -6
- package/dist/runtime/components/inputs/FUInputDate.vue.d.ts +18 -5
- package/dist/runtime/components/inputs/FUListbox.d.vue.ts +2 -0
- package/dist/runtime/components/inputs/FUListbox.vue +226 -6
- package/dist/runtime/components/inputs/FUListbox.vue.d.ts +2 -0
- package/dist/runtime/formkit/definitions/index.d.ts +27 -24
- package/dist/runtime/formkit/definitions/index.js +4 -1
- package/dist/runtime/formkit/definitions/index.mjs +4 -1
- package/dist/runtime/formkit/definitions/input.d.ts +3 -0
- package/dist/runtime/formkit/definitions/input.js +17 -2
- package/dist/runtime/formkit/definitions/input.mjs +17 -2
- package/dist/runtime/formkit/definitions/repeater.js +8 -1
- package/dist/runtime/formkit/definitions/repeater.mjs +8 -1
- package/dist/runtime/formkit/index.d.ts +13 -1
- package/dist/runtime/utils/dateValueConversion.d.ts +35 -0
- package/dist/runtime/utils/dateValueConversion.js +80 -0
- package/dist/runtime/utils/useFormKitInput.d.ts +1 -1
- package/package.json +9 -9
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import type { FormKitTypeDefinition } from '@formkit/core';
|
|
2
|
+
export declare const nuxtUICalendarDefinition: FormKitTypeDefinition;
|
|
2
3
|
export declare const nuxtUICheckboxDefinition: FormKitTypeDefinition;
|
|
3
4
|
export declare const nuxtUICheckboxGroupDefinition: FormKitTypeDefinition;
|
|
4
5
|
export declare const nuxtUIColorPickerDefinition: FormKitTypeDefinition;
|
|
6
|
+
export declare const nuxtUIEditorDefinition: FormKitTypeDefinition;
|
|
7
|
+
export declare const nuxtUIFileUploadDefinition: FormKitTypeDefinition;
|
|
5
8
|
export declare const nuxtUIInputDefinition: FormKitTypeDefinition;
|
|
6
9
|
export declare const nuxtUIInputDateDefinition: FormKitTypeDefinition;
|
|
7
10
|
export declare const nuxtUIInputMenuDefinition: FormKitTypeDefinition;
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { createInput } from "@formkit/vue";
|
|
2
|
+
import FUCalendar from "../../../runtime/components/inputs/FUCalendar.vue";
|
|
2
3
|
import FUCheckbox from "../../../runtime/components/inputs/FUCheckbox.vue";
|
|
3
4
|
import FUCheckboxGroup from "../../../runtime/components/inputs/FUCheckboxGroup.vue";
|
|
4
5
|
import FUColorPicker from "../../../runtime/components/inputs/FUColorPicker.vue";
|
|
6
|
+
import FUEditor from "../../../runtime/components/inputs/FUEditor.vue";
|
|
7
|
+
import FUFileUpload from "../../../runtime/components/inputs/FUFileUpload.vue";
|
|
5
8
|
import FUInput from "../../../runtime/components/inputs/FUInput.vue";
|
|
6
9
|
import FUInputDate from "../../../runtime/components/inputs/FUInputDate.vue";
|
|
7
10
|
import FUInputMenu from "../../../runtime/components/inputs/FUInputMenu.vue";
|
|
@@ -16,6 +19,10 @@ import FUSelectMenu from "../../../runtime/components/inputs/FUSelectMenu.vue";
|
|
|
16
19
|
import FUSlider from "../../../runtime/components/inputs/FUSlider.vue";
|
|
17
20
|
import FUSwitch from "../../../runtime/components/inputs/FUSwitch.vue";
|
|
18
21
|
import FUTextarea from "../../../runtime/components/inputs/FUTextarea.vue";
|
|
22
|
+
export const nuxtUICalendarDefinition = createInput(FUCalendar, {
|
|
23
|
+
props: ["type", "range", "multiple", "color", "variant", "size", "weekNumbers", "monthControls", "yearControls", "viewControl", "defaultValue", "minValue", "maxValue", "isDateDisabled", "isDateUnavailable", "ui", "valueType", "timeZone"],
|
|
24
|
+
family: "NuxtUIInput"
|
|
25
|
+
});
|
|
19
26
|
export const nuxtUICheckboxDefinition = createInput(FUCheckbox, {
|
|
20
27
|
props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "trueValue", "falseValue", "autofocus", "ui"],
|
|
21
28
|
family: "NuxtUIInput"
|
|
@@ -28,12 +35,20 @@ export const nuxtUIColorPickerDefinition = createInput(FUColorPicker, {
|
|
|
28
35
|
props: ["size", "inputClass", "format", "throttle", "ui"],
|
|
29
36
|
family: "NuxtUIInput"
|
|
30
37
|
});
|
|
38
|
+
export const nuxtUIEditorDefinition = createInput(FUEditor, {
|
|
39
|
+
props: ["contentType", "starterKit", "placeholder", "markdown", "image", "mention", "editorHandlers", "extensions", "autofocus", "toolbar", "toolbarItems", "bubbleToolbar", "bubbleToolbarItems", "dragHandle", "suggestionMenu", "suggestionMenuItems", "mentionItems", "ui"],
|
|
40
|
+
family: "NuxtUIInput"
|
|
41
|
+
});
|
|
42
|
+
export const nuxtUIFileUploadDefinition = createInput(FUFileUpload, {
|
|
43
|
+
props: ["multiple", "accept", "icon", "label", "description", "color", "variant", "size", "layout", "position", "dropzone", "interactive", "required", "reset", "fileIcon", "fileImage", "fileDelete", "fileDeleteIcon", "preview", "name", "ui"],
|
|
44
|
+
family: "NuxtUIInput"
|
|
45
|
+
});
|
|
31
46
|
export const nuxtUIInputDefinition = createInput(FUInput, {
|
|
32
47
|
props: ["inputType", "size", "autocomplete", "autofocus", "autofocusDelay", "highlight", "fixed", "color", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "list", "max", "maxLength", "min", "minLength", "pattern", "step", "variant", "ui"],
|
|
33
48
|
family: "NuxtUIInput"
|
|
34
49
|
});
|
|
35
50
|
export const nuxtUIInputDateDefinition = createInput(FUInputDate, {
|
|
36
|
-
props: ["defaultValue", "color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "range", "separatorIcon", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "defaultPlaceholder", "hourCycle", "step", "granularity", "hideTimeZone", "maxValue", "minValue", "isDateUnavailable", "ui"],
|
|
51
|
+
props: ["defaultValue", "color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "range", "separatorIcon", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "defaultPlaceholder", "hourCycle", "step", "granularity", "hideTimeZone", "maxValue", "minValue", "isDateUnavailable", "ui", "valueType", "timeZone"],
|
|
37
52
|
family: "NuxtUIInput"
|
|
38
53
|
});
|
|
39
54
|
export const nuxtUIInputMenuDefinition = createInput(FUInputMenu, {
|
|
@@ -53,7 +68,7 @@ export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
|
|
|
53
68
|
family: "NuxtUIInput"
|
|
54
69
|
});
|
|
55
70
|
export const nuxtUIListboxDefinition = createInput(FUListbox, {
|
|
56
|
-
props: ["options", "as", "color", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass"],
|
|
71
|
+
props: ["options", "as", "color", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass", "transferSortIcons", "transferItemDraggable"],
|
|
57
72
|
family: "NuxtUIInput"
|
|
58
73
|
});
|
|
59
74
|
export const nuxtUIPinInputDefinition = createInput(FUPinInput, {
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { createInput } from "@formkit/vue";
|
|
2
|
+
import FUCalendar from "../../../runtime/components/inputs/FUCalendar.vue";
|
|
2
3
|
import FUCheckbox from "../../../runtime/components/inputs/FUCheckbox.vue";
|
|
3
4
|
import FUCheckboxGroup from "../../../runtime/components/inputs/FUCheckboxGroup.vue";
|
|
4
5
|
import FUColorPicker from "../../../runtime/components/inputs/FUColorPicker.vue";
|
|
6
|
+
import FUEditor from "../../../runtime/components/inputs/FUEditor.vue";
|
|
7
|
+
import FUFileUpload from "../../../runtime/components/inputs/FUFileUpload.vue";
|
|
5
8
|
import FUInput from "../../../runtime/components/inputs/FUInput.vue";
|
|
6
9
|
import FUInputDate from "../../../runtime/components/inputs/FUInputDate.vue";
|
|
7
10
|
import FUInputMenu from "../../../runtime/components/inputs/FUInputMenu.vue";
|
|
@@ -16,6 +19,10 @@ import FUSelectMenu from "../../../runtime/components/inputs/FUSelectMenu.vue";
|
|
|
16
19
|
import FUSlider from "../../../runtime/components/inputs/FUSlider.vue";
|
|
17
20
|
import FUSwitch from "../../../runtime/components/inputs/FUSwitch.vue";
|
|
18
21
|
import FUTextarea from "../../../runtime/components/inputs/FUTextarea.vue";
|
|
22
|
+
export const nuxtUICalendarDefinition = createInput(FUCalendar, {
|
|
23
|
+
props: ["type", "range", "multiple", "color", "variant", "size", "weekNumbers", "monthControls", "yearControls", "viewControl", "defaultValue", "minValue", "maxValue", "isDateDisabled", "isDateUnavailable", "ui", "valueType", "timeZone"],
|
|
24
|
+
family: "NuxtUIInput"
|
|
25
|
+
});
|
|
19
26
|
export const nuxtUICheckboxDefinition = createInput(FUCheckbox, {
|
|
20
27
|
props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "trueValue", "falseValue", "autofocus", "ui"],
|
|
21
28
|
family: "NuxtUIInput"
|
|
@@ -28,12 +35,20 @@ export const nuxtUIColorPickerDefinition = createInput(FUColorPicker, {
|
|
|
28
35
|
props: ["size", "inputClass", "format", "throttle", "ui"],
|
|
29
36
|
family: "NuxtUIInput"
|
|
30
37
|
});
|
|
38
|
+
export const nuxtUIEditorDefinition = createInput(FUEditor, {
|
|
39
|
+
props: ["contentType", "starterKit", "placeholder", "markdown", "image", "mention", "editorHandlers", "extensions", "autofocus", "toolbar", "toolbarItems", "bubbleToolbar", "bubbleToolbarItems", "dragHandle", "suggestionMenu", "suggestionMenuItems", "mentionItems", "ui"],
|
|
40
|
+
family: "NuxtUIInput"
|
|
41
|
+
});
|
|
42
|
+
export const nuxtUIFileUploadDefinition = createInput(FUFileUpload, {
|
|
43
|
+
props: ["multiple", "accept", "icon", "label", "description", "color", "variant", "size", "layout", "position", "dropzone", "interactive", "required", "reset", "fileIcon", "fileImage", "fileDelete", "fileDeleteIcon", "preview", "name", "ui"],
|
|
44
|
+
family: "NuxtUIInput"
|
|
45
|
+
});
|
|
31
46
|
export const nuxtUIInputDefinition = createInput(FUInput, {
|
|
32
47
|
props: ["inputType", "size", "autocomplete", "autofocus", "autofocusDelay", "highlight", "fixed", "color", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "list", "max", "maxLength", "min", "minLength", "pattern", "step", "variant", "ui"],
|
|
33
48
|
family: "NuxtUIInput"
|
|
34
49
|
});
|
|
35
50
|
export const nuxtUIInputDateDefinition = createInput(FUInputDate, {
|
|
36
|
-
props: ["defaultValue", "color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "range", "separatorIcon", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "defaultPlaceholder", "hourCycle", "step", "granularity", "hideTimeZone", "maxValue", "minValue", "isDateUnavailable", "ui"],
|
|
51
|
+
props: ["defaultValue", "color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "range", "separatorIcon", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "placeholder", "defaultPlaceholder", "hourCycle", "step", "granularity", "hideTimeZone", "maxValue", "minValue", "isDateUnavailable", "ui", "valueType", "timeZone"],
|
|
37
52
|
family: "NuxtUIInput"
|
|
38
53
|
});
|
|
39
54
|
export const nuxtUIInputMenuDefinition = createInput(FUInputMenu, {
|
|
@@ -53,7 +68,7 @@ export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
|
|
|
53
68
|
family: "NuxtUIInput"
|
|
54
69
|
});
|
|
55
70
|
export const nuxtUIListboxDefinition = createInput(FUListbox, {
|
|
56
|
-
props: ["options", "as", "color", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass"],
|
|
71
|
+
props: ["options", "as", "color", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass", "transferSortIcons", "transferItemDraggable"],
|
|
57
72
|
family: "NuxtUIInput"
|
|
58
73
|
});
|
|
59
74
|
export const nuxtUIPinInputDefinition = createInput(FUPinInput, {
|
|
@@ -28,6 +28,13 @@ function addDragHandle(handleClass = "", iconName = "", render = "true") {
|
|
|
28
28
|
}
|
|
29
29
|
export const nuxtUIRepeaterDefinition = createInput(
|
|
30
30
|
addElement("div", [
|
|
31
|
+
// The nested `list` node below shares its name with this outer `input`-type
|
|
32
|
+
// node but is otherwise a distinct FormKitNode. Without an explicit
|
|
33
|
+
// `value: '$value'` binding it never inherits the outer node's value, so
|
|
34
|
+
// its own `_value` stays non-array — which breaks not just rendering
|
|
35
|
+
// pre-populated items but also every button here (insert/remove/move all
|
|
36
|
+
// guard on `Array.isArray(parentNode._value)` and silently no-op
|
|
37
|
+
// otherwise), making the whole repeater look inert until this is set.
|
|
31
38
|
addList("$listName", [
|
|
32
39
|
addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
|
|
33
40
|
addListGroup([
|
|
@@ -46,7 +53,7 @@ export const nuxtUIRepeaterDefinition = createInput(
|
|
|
46
53
|
onDragend: "$dragNodeEnd"
|
|
47
54
|
})
|
|
48
55
|
], true, {})
|
|
49
|
-
], true, "true")
|
|
56
|
+
], true, "true", { value: "$value" })
|
|
50
57
|
], { class: "$internalListClass", id: "$internalListId" }, true),
|
|
51
58
|
{
|
|
52
59
|
props: [
|
|
@@ -28,6 +28,13 @@ function addDragHandle(handleClass = "", iconName = "", render = "true") {
|
|
|
28
28
|
}
|
|
29
29
|
export const nuxtUIRepeaterDefinition = createInput(
|
|
30
30
|
addElement("div", [
|
|
31
|
+
// The nested `list` node below shares its name with this outer `input`-type
|
|
32
|
+
// node but is otherwise a distinct FormKitNode. Without an explicit
|
|
33
|
+
// `value: '$value'` binding it never inherits the outer node's value, so
|
|
34
|
+
// its own `_value` stays non-array — which breaks not just rendering
|
|
35
|
+
// pre-populated items but also every button here (insert/remove/move all
|
|
36
|
+
// guard on `Array.isArray(parentNode._value)` and silently no-op
|
|
37
|
+
// otherwise), making the whole repeater look inert until this is set.
|
|
31
38
|
addList("$listName", [
|
|
32
39
|
addInsertButton("$insertButtonLabel", "i-lucide-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
|
|
33
40
|
addListGroup([
|
|
@@ -46,7 +53,7 @@ export const nuxtUIRepeaterDefinition = createInput(
|
|
|
46
53
|
onDragend: "$dragNodeEnd"
|
|
47
54
|
})
|
|
48
55
|
], true, {})
|
|
49
|
-
], true, "true")
|
|
56
|
+
], true, "true", { value: "$value" })
|
|
50
57
|
], { class: "$internalListClass", id: "$internalListId" }, true),
|
|
51
58
|
{
|
|
52
59
|
props: [
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { FormKitBaseSlots, FormKitInputs } from '@formkit/inputs';
|
|
2
|
-
import type { CheckboxSlots, CheckboxGroupSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, ListboxSlots, SwitchSlots } from '@nuxt/ui';
|
|
2
|
+
import type { CalendarSlots, CheckboxSlots, CheckboxGroupSlots, EditorSlots, FileUploadSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, ListboxSlots, SwitchSlots } from '@nuxt/ui';
|
|
3
3
|
export * from './definitions/index.js';
|
|
4
4
|
export * from './plugins/index.js';
|
|
5
5
|
/**
|
|
@@ -8,6 +8,9 @@ export * from './plugins/index.js';
|
|
|
8
8
|
type MergeSlots<A, B> = A & Omit<B, keyof A>;
|
|
9
9
|
declare module '@formkit/inputs' {
|
|
10
10
|
interface FormKitInputProps<Props extends FormKitInputs<Props>> {
|
|
11
|
+
nuxtUICalendar: {
|
|
12
|
+
type: 'nuxtUICalendar';
|
|
13
|
+
};
|
|
11
14
|
nuxtUICheckbox: {
|
|
12
15
|
type: 'nuxtUICheckbox';
|
|
13
16
|
};
|
|
@@ -17,6 +20,12 @@ declare module '@formkit/inputs' {
|
|
|
17
20
|
nuxtUIColorPicker: {
|
|
18
21
|
type: 'nuxtUIColorPicker';
|
|
19
22
|
};
|
|
23
|
+
nuxtUIEditor: {
|
|
24
|
+
type: 'nuxtUIEditor';
|
|
25
|
+
};
|
|
26
|
+
nuxtUIFileUpload: {
|
|
27
|
+
type: 'nuxtUIFileUpload';
|
|
28
|
+
};
|
|
20
29
|
nuxtUIInput: {
|
|
21
30
|
type: 'nuxtUIInput';
|
|
22
31
|
};
|
|
@@ -79,8 +88,11 @@ declare module '@formkit/inputs' {
|
|
|
79
88
|
};
|
|
80
89
|
}
|
|
81
90
|
interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
|
|
91
|
+
nuxtUICalendar: MergeSlots<FormKitBaseSlots<Props>, CalendarSlots>;
|
|
82
92
|
nuxtUICheckbox: MergeSlots<FormKitBaseSlots<Props>, CheckboxSlots>;
|
|
83
93
|
nuxtUICheckboxGroup: MergeSlots<FormKitBaseSlots<Props>, CheckboxGroupSlots>;
|
|
94
|
+
nuxtUIEditor: MergeSlots<FormKitBaseSlots<Props>, EditorSlots>;
|
|
95
|
+
nuxtUIFileUpload: MergeSlots<FormKitBaseSlots<Props>, FileUploadSlots>;
|
|
84
96
|
nuxtUIInput: MergeSlots<FormKitBaseSlots<Props>, InputSlots>;
|
|
85
97
|
nuxtUIInputDate: MergeSlots<FormKitBaseSlots<Props>, InputDateSlots>;
|
|
86
98
|
nuxtUIInputMenu: MergeSlots<FormKitBaseSlots<Props>, InputMenuSlots>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { DateValue } from '@internationalized/date';
|
|
2
|
+
import { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';
|
|
3
|
+
export type DateValueType = 'calendar' | 'date' | 'iso';
|
|
4
|
+
export interface DateConversionOptions {
|
|
5
|
+
granularity?: 'day' | 'hour' | 'minute' | 'second';
|
|
6
|
+
hideTimeZone?: boolean;
|
|
7
|
+
timeZone?: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Converts an external value (JS `Date`, ISO 8601 string, or an already-native
|
|
11
|
+
* `DateValue`) into the `DateValue` that `UInputDate`/`UCalendar` require.
|
|
12
|
+
*/
|
|
13
|
+
export declare function toDateValue(value: unknown, options?: DateConversionOptions): DateValue | undefined;
|
|
14
|
+
/** Same as {@link toDateValue}, but also handles the `{ start, end }` range shape. */
|
|
15
|
+
export declare function toDateValueOrRange(value: unknown, options?: DateConversionOptions): CalendarDate | CalendarDateTime | ZonedDateTime | {
|
|
16
|
+
start: DateValue | undefined;
|
|
17
|
+
end: DateValue | undefined;
|
|
18
|
+
} | undefined;
|
|
19
|
+
/** Same as {@link toDateValueOrRange}, but also handles arrays (multiple-selection mode). */
|
|
20
|
+
export declare function toDateValueOrRangeOrArray(value: unknown, options?: DateConversionOptions): CalendarDate | CalendarDateTime | ZonedDateTime | {
|
|
21
|
+
start: DateValue | undefined;
|
|
22
|
+
end: DateValue | undefined;
|
|
23
|
+
} | DateValue[] | undefined;
|
|
24
|
+
/** Converts a `DateValue` emitted by `UInputDate`/`UCalendar` back into the shape the form value should take. */
|
|
25
|
+
export declare function fromDateValue(value: DateValue | undefined, valueType: DateValueType, timeZone?: string): DateValue | Date | string | undefined;
|
|
26
|
+
/** Same as {@link fromDateValue}, but also handles the `{ start, end }` range shape. */
|
|
27
|
+
export declare function fromDateValueOrRange(value: unknown, valueType: DateValueType, timeZone?: string): string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | {
|
|
28
|
+
start: string | Date | DateValue | undefined;
|
|
29
|
+
end: string | Date | DateValue | undefined;
|
|
30
|
+
} | undefined;
|
|
31
|
+
/** Same as {@link fromDateValueOrRange}, but also handles arrays (multiple-selection mode). */
|
|
32
|
+
export declare function fromDateValueOrRangeOrArray(value: unknown, valueType: DateValueType, timeZone?: string): string | Date | CalendarDate | CalendarDateTime | ZonedDateTime | {
|
|
33
|
+
start: string | Date | DateValue | undefined;
|
|
34
|
+
end: string | Date | DateValue | undefined;
|
|
35
|
+
} | (string | Date | DateValue | undefined)[] | undefined;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { CalendarDate, CalendarDateTime, ZonedDateTime, fromDate, getLocalTimeZone, parseAbsolute, parseDate, parseDateTime, toCalendarDate, toCalendarDateTime } from "@internationalized/date";
|
|
2
|
+
const ISO_DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
|
|
3
|
+
const ISO_HAS_ZONE = /(?:Z|[+-]\d{2}:\d{2})(?:\[[^\]]+\])?$/;
|
|
4
|
+
function isDateValue(value) {
|
|
5
|
+
return value instanceof CalendarDate || value instanceof CalendarDateTime || value instanceof ZonedDateTime;
|
|
6
|
+
}
|
|
7
|
+
function isRangeLike(value) {
|
|
8
|
+
return typeof value === "object" && value !== null && "start" in value && "end" in value;
|
|
9
|
+
}
|
|
10
|
+
export function toDateValue(value, options = {}) {
|
|
11
|
+
if (value === void 0 || value === null || value === "") {
|
|
12
|
+
return void 0;
|
|
13
|
+
}
|
|
14
|
+
if (isDateValue(value)) {
|
|
15
|
+
return value;
|
|
16
|
+
}
|
|
17
|
+
const timeZone = options.timeZone ?? getLocalTimeZone();
|
|
18
|
+
const withTime = options.granularity != null && options.granularity !== "day";
|
|
19
|
+
if (value instanceof Date) {
|
|
20
|
+
const zoned = fromDate(value, timeZone);
|
|
21
|
+
if (!withTime) {
|
|
22
|
+
return toCalendarDate(zoned);
|
|
23
|
+
}
|
|
24
|
+
return options.hideTimeZone ? toCalendarDateTime(zoned) : zoned;
|
|
25
|
+
}
|
|
26
|
+
if (typeof value === "string") {
|
|
27
|
+
if (!withTime && ISO_DATE_ONLY.test(value)) {
|
|
28
|
+
return parseDate(value);
|
|
29
|
+
}
|
|
30
|
+
if (withTime && !ISO_HAS_ZONE.test(value)) {
|
|
31
|
+
return parseDateTime(value);
|
|
32
|
+
}
|
|
33
|
+
const zoned = parseAbsolute(value, timeZone);
|
|
34
|
+
return withTime ? options.hideTimeZone ? toCalendarDateTime(zoned) : zoned : toCalendarDate(zoned);
|
|
35
|
+
}
|
|
36
|
+
return void 0;
|
|
37
|
+
}
|
|
38
|
+
export function toDateValueOrRange(value, options = {}) {
|
|
39
|
+
if (isRangeLike(value)) {
|
|
40
|
+
return {
|
|
41
|
+
start: toDateValue(value.start, options),
|
|
42
|
+
end: toDateValue(value.end, options)
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
return toDateValue(value, options);
|
|
46
|
+
}
|
|
47
|
+
export function toDateValueOrRangeOrArray(value, options = {}) {
|
|
48
|
+
if (Array.isArray(value)) {
|
|
49
|
+
return value.map((item) => toDateValue(item, options)).filter((item) => item !== void 0);
|
|
50
|
+
}
|
|
51
|
+
return toDateValueOrRange(value, options);
|
|
52
|
+
}
|
|
53
|
+
export function fromDateValue(value, valueType, timeZone) {
|
|
54
|
+
if (value === void 0 || value === null) {
|
|
55
|
+
return void 0;
|
|
56
|
+
}
|
|
57
|
+
if (valueType === "calendar") {
|
|
58
|
+
return value;
|
|
59
|
+
}
|
|
60
|
+
const jsDate = value instanceof ZonedDateTime ? value.toDate() : value.toDate(timeZone ?? getLocalTimeZone());
|
|
61
|
+
if (valueType === "date") {
|
|
62
|
+
return jsDate;
|
|
63
|
+
}
|
|
64
|
+
return value.toString();
|
|
65
|
+
}
|
|
66
|
+
export function fromDateValueOrRange(value, valueType, timeZone) {
|
|
67
|
+
if (isRangeLike(value)) {
|
|
68
|
+
return {
|
|
69
|
+
start: fromDateValue(value.start, valueType, timeZone),
|
|
70
|
+
end: fromDateValue(value.end, valueType, timeZone)
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
return fromDateValue(value, valueType, timeZone);
|
|
74
|
+
}
|
|
75
|
+
export function fromDateValueOrRangeOrArray(value, valueType, timeZone) {
|
|
76
|
+
if (Array.isArray(value)) {
|
|
77
|
+
return value.map((item) => fromDateValue(item, valueType, timeZone));
|
|
78
|
+
}
|
|
79
|
+
return fromDateValueOrRange(value, valueType, timeZone);
|
|
80
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { FormKitFrameworkContext } from '@formkit/core';
|
|
2
2
|
export declare function useFormKitInput(context: FormKitFrameworkContext): {
|
|
3
|
-
isInvalid: import("vue").ComputedRef<
|
|
3
|
+
isInvalid: import("vue").ComputedRef<boolean>;
|
|
4
4
|
validSlotNames: import("vue").ComputedRef<string[]>;
|
|
5
5
|
styleClass: import("vue").ComputedRef<string>;
|
|
6
6
|
color: import("vue").ComputedRef<"neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "error">;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sfxcode/nuxt-ui-formkit",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Tom",
|
|
@@ -92,16 +92,16 @@
|
|
|
92
92
|
"@formkit/nuxt": "^2.1.0",
|
|
93
93
|
"@nuxt/kit": "4.4.8",
|
|
94
94
|
"@nuxt/ui": "^4.9.0",
|
|
95
|
-
"@vue/compiler-dom": "^3.5.
|
|
95
|
+
"@vue/compiler-dom": "^3.5.39"
|
|
96
96
|
},
|
|
97
97
|
"devDependencies": {
|
|
98
98
|
"@codemirror/lang-json": "^6.0.2",
|
|
99
|
-
"@codemirror/state": "^6.
|
|
99
|
+
"@codemirror/state": "^6.7.0",
|
|
100
100
|
"@codemirror/theme-one-dark": "^6.1.3",
|
|
101
|
-
"@codemirror/view": "^6.43.
|
|
101
|
+
"@codemirror/view": "^6.43.4",
|
|
102
102
|
"@iconify-json/heroicons": "^1.2.3",
|
|
103
|
-
"@iconify-json/lucide": "^1.2.
|
|
104
|
-
"@iconify-json/simple-icons": "^1.2.
|
|
103
|
+
"@iconify-json/lucide": "^1.2.116",
|
|
104
|
+
"@iconify-json/simple-icons": "^1.2.88",
|
|
105
105
|
"@nuxt/devtools": "4.0.0-alpha.7",
|
|
106
106
|
"@nuxt/eslint-config": "^1.16.0",
|
|
107
107
|
"@nuxt/module-builder": "^1.0.2",
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"@vitejs/plugin-vue": "^6.0.7",
|
|
112
112
|
"changelogen": "^0.6.2",
|
|
113
113
|
"codemirror": "^6.0.2",
|
|
114
|
-
"eslint": "^10.
|
|
114
|
+
"eslint": "^10.6.0",
|
|
115
115
|
"jsdom": "^29.1.1",
|
|
116
116
|
"mkdist": "^2.4.1",
|
|
117
117
|
"nuxt": "4.4.8",
|
|
@@ -120,9 +120,9 @@
|
|
|
120
120
|
"unbuild": "^3.6.1",
|
|
121
121
|
"vitepress": "2.0.0-alpha.17",
|
|
122
122
|
"vitest": "^4.1.9",
|
|
123
|
-
"vue": "^3.5.
|
|
123
|
+
"vue": "^3.5.39",
|
|
124
124
|
"vue-i18n": "^11.4.6",
|
|
125
|
-
"vue-tsc": "^3.3.
|
|
125
|
+
"vue-tsc": "^3.3.6"
|
|
126
126
|
},
|
|
127
127
|
"packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499"
|
|
128
128
|
}
|