@auronui/vue 1.2.2 → 1.3.0
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/ai-rules.md +26 -0
- package/dist/cjs/index.cjs +12347 -8681
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/components/autocomplete/Autocomplete.js.map +1 -1
- package/dist/components/autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/components/autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/context-menu/ContextMenu.js +7 -0
- package/dist/components/context-menu/ContextMenu.js.map +1 -0
- package/dist/components/context-menu/ContextMenu.vue_vue_type_script_setup_true_lang.js +38 -0
- package/dist/components/context-menu/ContextMenu.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/context-menu/ContextMenuCheckboxItem.js +7 -0
- package/dist/components/context-menu/ContextMenuCheckboxItem.js.map +1 -0
- package/dist/components/context-menu/ContextMenuCheckboxItem.vue_vue_type_script_setup_true_lang.js +89 -0
- package/dist/components/context-menu/ContextMenuCheckboxItem.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/context-menu/ContextMenuContent.js +7 -0
- package/dist/components/context-menu/ContextMenuContent.js.map +1 -0
- package/dist/components/context-menu/ContextMenuContent.vue_vue_type_script_setup_true_lang.js +135 -0
- package/dist/components/context-menu/ContextMenuContent.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/context-menu/ContextMenuItem.js +7 -0
- package/dist/components/context-menu/ContextMenuItem.js.map +1 -0
- package/dist/components/context-menu/ContextMenuItem.vue_vue_type_script_setup_true_lang.js +72 -0
- package/dist/components/context-menu/ContextMenuItem.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/context-menu/ContextMenuRadioGroup.js +7 -0
- package/dist/components/context-menu/ContextMenuRadioGroup.js.map +1 -0
- package/dist/components/context-menu/ContextMenuRadioGroup.vue_vue_type_script_setup_true_lang.js +40 -0
- package/dist/components/context-menu/ContextMenuRadioGroup.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/context-menu/ContextMenuRadioItem.js +7 -0
- package/dist/components/context-menu/ContextMenuRadioItem.js.map +1 -0
- package/dist/components/context-menu/ContextMenuRadioItem.vue_vue_type_script_setup_true_lang.js +75 -0
- package/dist/components/context-menu/ContextMenuRadioItem.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/context-menu/ContextMenuSection.js +7 -0
- package/dist/components/context-menu/ContextMenuSection.js.map +1 -0
- package/dist/components/context-menu/ContextMenuSection.vue_vue_type_script_setup_true_lang.js +55 -0
- package/dist/components/context-menu/ContextMenuSection.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/context-menu/ContextMenuSub.js +7 -0
- package/dist/components/context-menu/ContextMenuSub.js.map +1 -0
- package/dist/components/context-menu/ContextMenuSub.vue_vue_type_script_setup_true_lang.js +35 -0
- package/dist/components/context-menu/ContextMenuSub.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/context-menu/ContextMenuSubContent.js +7 -0
- package/dist/components/context-menu/ContextMenuSubContent.js.map +1 -0
- package/dist/components/context-menu/ContextMenuSubContent.vue_vue_type_script_setup_true_lang.js +155 -0
- package/dist/components/context-menu/ContextMenuSubContent.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/context-menu/ContextMenuSubTrigger.js +7 -0
- package/dist/components/context-menu/ContextMenuSubTrigger.js.map +1 -0
- package/dist/components/context-menu/ContextMenuSubTrigger.vue_vue_type_script_setup_true_lang.js +64 -0
- package/dist/components/context-menu/ContextMenuSubTrigger.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/context-menu/ContextMenuTrigger.js +7 -0
- package/dist/components/context-menu/ContextMenuTrigger.js.map +1 -0
- package/dist/components/context-menu/ContextMenuTrigger.vue_vue_type_script_setup_true_lang.js +38 -0
- package/dist/components/context-menu/ContextMenuTrigger.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/editable/Editable.js +7 -0
- package/dist/components/editable/Editable.js.map +1 -0
- package/dist/components/editable/Editable.vue_vue_type_script_setup_true_lang.js +106 -0
- package/dist/components/editable/Editable.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/editable/EditableArea.js +7 -0
- package/dist/components/editable/EditableArea.js.map +1 -0
- package/dist/components/editable/EditableArea.vue_vue_type_script_setup_true_lang.js +41 -0
- package/dist/components/editable/EditableArea.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/editable/EditableCancelTrigger.js +7 -0
- package/dist/components/editable/EditableCancelTrigger.js.map +1 -0
- package/dist/components/editable/EditableCancelTrigger.vue_vue_type_script_setup_true_lang.js +63 -0
- package/dist/components/editable/EditableCancelTrigger.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/editable/EditableEditTrigger.js +7 -0
- package/dist/components/editable/EditableEditTrigger.js.map +1 -0
- package/dist/components/editable/EditableEditTrigger.vue_vue_type_script_setup_true_lang.js +53 -0
- package/dist/components/editable/EditableEditTrigger.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/editable/EditableInput.js +7 -0
- package/dist/components/editable/EditableInput.js.map +1 -0
- package/dist/components/editable/EditableInput.vue_vue_type_script_setup_true_lang.js +38 -0
- package/dist/components/editable/EditableInput.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/editable/EditablePreview.js +7 -0
- package/dist/components/editable/EditablePreview.js.map +1 -0
- package/dist/components/editable/EditablePreview.vue_vue_type_script_setup_true_lang.js +38 -0
- package/dist/components/editable/EditablePreview.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/editable/EditableSubmitTrigger.js +7 -0
- package/dist/components/editable/EditableSubmitTrigger.js.map +1 -0
- package/dist/components/editable/EditableSubmitTrigger.vue_vue_type_script_setup_true_lang.js +53 -0
- package/dist/components/editable/EditableSubmitTrigger.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/form/Form.js.map +1 -1
- package/dist/components/form/Form.vue_vue_type_script_setup_true_lang.js +32 -156
- package/dist/components/form/Form.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form/FormField.js.map +1 -1
- package/dist/components/form/FormField.vue_vue_type_script_setup_true_lang.js +44 -23
- package/dist/components/form/FormField.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form/form.context.js.map +1 -1
- package/dist/components/form/form.state.js +166 -0
- package/dist/components/form/form.state.js.map +1 -0
- package/dist/components/form/useField.js +112 -0
- package/dist/components/form/useField.js.map +1 -0
- package/dist/components/form/useForm.js +17 -0
- package/dist/components/form/useForm.js.map +1 -0
- package/dist/components/hover-card/HoverCard.js +7 -0
- package/dist/components/hover-card/HoverCard.js.map +1 -0
- package/dist/components/hover-card/HoverCard.vue_vue_type_script_lang.js +52 -0
- package/dist/components/hover-card/HoverCard.vue_vue_type_script_lang.js.map +1 -0
- package/dist/components/hover-card/HoverCardArrow.js +7 -0
- package/dist/components/hover-card/HoverCardArrow.js.map +1 -0
- package/dist/components/hover-card/HoverCardArrow.vue_vue_type_script_setup_true_lang.js +35 -0
- package/dist/components/hover-card/HoverCardArrow.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/hover-card/HoverCardContent.js +7 -0
- package/dist/components/hover-card/HoverCardContent.js.map +1 -0
- package/dist/components/hover-card/HoverCardContent.vue_vue_type_script_setup_true_lang.js +104 -0
- package/dist/components/hover-card/HoverCardContent.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/hover-card/HoverCardTrigger.js +7 -0
- package/dist/components/hover-card/HoverCardTrigger.js.map +1 -0
- package/dist/components/hover-card/HoverCardTrigger.vue_vue_type_script_setup_true_lang.js +26 -0
- package/dist/components/hover-card/HoverCardTrigger.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/Menubar.js +7 -0
- package/dist/components/menubar/Menubar.js.map +1 -0
- package/dist/components/menubar/Menubar.vue_vue_type_script_setup_true_lang.js +58 -0
- package/dist/components/menubar/Menubar.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarCheckboxItem.js +7 -0
- package/dist/components/menubar/MenubarCheckboxItem.js.map +1 -0
- package/dist/components/menubar/MenubarCheckboxItem.vue_vue_type_script_setup_true_lang.js +89 -0
- package/dist/components/menubar/MenubarCheckboxItem.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarContent.js +7 -0
- package/dist/components/menubar/MenubarContent.js.map +1 -0
- package/dist/components/menubar/MenubarContent.vue_vue_type_script_setup_true_lang.js +162 -0
- package/dist/components/menubar/MenubarContent.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarItem.js +7 -0
- package/dist/components/menubar/MenubarItem.js.map +1 -0
- package/dist/components/menubar/MenubarItem.vue_vue_type_script_setup_true_lang.js +72 -0
- package/dist/components/menubar/MenubarItem.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarMenu.js +7 -0
- package/dist/components/menubar/MenubarMenu.js.map +1 -0
- package/dist/components/menubar/MenubarMenu.vue_vue_type_script_setup_true_lang.js +20 -0
- package/dist/components/menubar/MenubarMenu.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarRadioGroup.js +7 -0
- package/dist/components/menubar/MenubarRadioGroup.js.map +1 -0
- package/dist/components/menubar/MenubarRadioGroup.vue_vue_type_script_setup_true_lang.js +40 -0
- package/dist/components/menubar/MenubarRadioGroup.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarRadioItem.js +7 -0
- package/dist/components/menubar/MenubarRadioItem.js.map +1 -0
- package/dist/components/menubar/MenubarRadioItem.vue_vue_type_script_setup_true_lang.js +75 -0
- package/dist/components/menubar/MenubarRadioItem.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarSection.js +7 -0
- package/dist/components/menubar/MenubarSection.js.map +1 -0
- package/dist/components/menubar/MenubarSection.vue_vue_type_script_setup_true_lang.js +55 -0
- package/dist/components/menubar/MenubarSection.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarSub.js +7 -0
- package/dist/components/menubar/MenubarSub.js.map +1 -0
- package/dist/components/menubar/MenubarSub.vue_vue_type_script_setup_true_lang.js +35 -0
- package/dist/components/menubar/MenubarSub.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarSubContent.js +7 -0
- package/dist/components/menubar/MenubarSubContent.js.map +1 -0
- package/dist/components/menubar/MenubarSubContent.vue_vue_type_script_setup_true_lang.js +155 -0
- package/dist/components/menubar/MenubarSubContent.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarSubTrigger.js +7 -0
- package/dist/components/menubar/MenubarSubTrigger.js.map +1 -0
- package/dist/components/menubar/MenubarSubTrigger.vue_vue_type_script_setup_true_lang.js +64 -0
- package/dist/components/menubar/MenubarSubTrigger.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/menubar/MenubarTrigger.js +7 -0
- package/dist/components/menubar/MenubarTrigger.js.map +1 -0
- package/dist/components/menubar/MenubarTrigger.vue_vue_type_script_setup_true_lang.js +53 -0
- package/dist/components/menubar/MenubarTrigger.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/month-picker/MonthPicker.js +7 -0
- package/dist/components/month-picker/MonthPicker.js.map +1 -0
- package/dist/components/month-picker/MonthPicker.vue_vue_type_script_setup_true_lang.js +185 -0
- package/dist/components/month-picker/MonthPicker.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/month-range-picker/MonthRangePicker.js +7 -0
- package/dist/components/month-range-picker/MonthRangePicker.js.map +1 -0
- package/dist/components/month-range-picker/MonthRangePicker.vue_vue_type_script_setup_true_lang.js +196 -0
- package/dist/components/month-range-picker/MonthRangePicker.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenu.js +7 -0
- package/dist/components/navigation-menu/NavigationMenu.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenu.vue_vue_type_script_setup_true_lang.js +85 -0
- package/dist/components/navigation-menu/NavigationMenu.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuContent.js +7 -0
- package/dist/components/navigation-menu/NavigationMenuContent.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuContent.vue_vue_type_script_setup_true_lang.js +70 -0
- package/dist/components/navigation-menu/NavigationMenuContent.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuIndicator.js +7 -0
- package/dist/components/navigation-menu/NavigationMenuIndicator.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuIndicator.vue_vue_type_script_setup_true_lang.js +53 -0
- package/dist/components/navigation-menu/NavigationMenuIndicator.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuItem.js +7 -0
- package/dist/components/navigation-menu/NavigationMenuItem.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuItem.vue_vue_type_script_setup_true_lang.js +20 -0
- package/dist/components/navigation-menu/NavigationMenuItem.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuLink.js +7 -0
- package/dist/components/navigation-menu/NavigationMenuLink.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuLink.vue_vue_type_script_setup_true_lang.js +70 -0
- package/dist/components/navigation-menu/NavigationMenuLink.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuList.js +7 -0
- package/dist/components/navigation-menu/NavigationMenuList.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuList.vue_vue_type_script_setup_true_lang.js +47 -0
- package/dist/components/navigation-menu/NavigationMenuList.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuSub.js +7 -0
- package/dist/components/navigation-menu/NavigationMenuSub.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuSub.vue_vue_type_script_setup_true_lang.js +37 -0
- package/dist/components/navigation-menu/NavigationMenuSub.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuTrigger.js +7 -0
- package/dist/components/navigation-menu/NavigationMenuTrigger.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuTrigger.vue_vue_type_script_setup_true_lang.js +66 -0
- package/dist/components/navigation-menu/NavigationMenuTrigger.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuViewport.js +7 -0
- package/dist/components/navigation-menu/NavigationMenuViewport.js.map +1 -0
- package/dist/components/navigation-menu/NavigationMenuViewport.vue_vue_type_script_setup_true_lang.js +53 -0
- package/dist/components/navigation-menu/NavigationMenuViewport.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/time-range-field/TimeRangeField.js +7 -0
- package/dist/components/time-range-field/TimeRangeField.js.map +1 -0
- package/dist/components/time-range-field/TimeRangeField.vue_vue_type_script_setup_true_lang.js +364 -0
- package/dist/components/time-range-field/TimeRangeField.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/components/year-range-picker/YearRangePicker.js +7 -0
- package/dist/components/year-range-picker/YearRangePicker.js.map +1 -0
- package/dist/components/year-range-picker/YearRangePicker.vue_vue_type_script_setup_true_lang.js +199 -0
- package/dist/components/year-range-picker/YearRangePicker.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/dist/index.d.ts +5393 -2896
- package/dist/index.js +50 -1
- package/dist/packages/styles/dist/components/hover-card/hover-card.styles.js +10 -0
- package/dist/packages/styles/dist/components/hover-card/hover-card.styles.js.map +1 -0
- package/package.json +4 -4
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { composeClassName } from "../../utils/composeClassName.js";
|
|
2
|
+
import { computed, createBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
|
|
3
|
+
import { editableVariants } from "@auronui/styles";
|
|
4
|
+
import { EditableSubmitTrigger } from "reka-ui";
|
|
5
|
+
//#region src/components/editable/EditableSubmitTrigger.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var EditableSubmitTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
7
|
+
__name: "EditableSubmitTrigger",
|
|
8
|
+
props: {
|
|
9
|
+
as: {},
|
|
10
|
+
asChild: { type: Boolean },
|
|
11
|
+
class: { type: [
|
|
12
|
+
String,
|
|
13
|
+
Boolean,
|
|
14
|
+
null,
|
|
15
|
+
Object,
|
|
16
|
+
Array
|
|
17
|
+
] }
|
|
18
|
+
},
|
|
19
|
+
setup(__props) {
|
|
20
|
+
const props = __props;
|
|
21
|
+
const slotFns = computed(() => editableVariants());
|
|
22
|
+
return (_ctx, _cache) => {
|
|
23
|
+
return openBlock(), createBlock(unref(EditableSubmitTrigger), {
|
|
24
|
+
as: props.as,
|
|
25
|
+
"as-child": props.asChild,
|
|
26
|
+
class: normalizeClass(unref(composeClassName)(slotFns.value.submitTrigger(), props.class)),
|
|
27
|
+
"aria-label": "Save"
|
|
28
|
+
}, {
|
|
29
|
+
default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
|
|
30
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
31
|
+
width: "14",
|
|
32
|
+
height: "14",
|
|
33
|
+
viewBox: "0 0 24 24",
|
|
34
|
+
fill: "none",
|
|
35
|
+
stroke: "currentColor",
|
|
36
|
+
"stroke-width": "2",
|
|
37
|
+
"stroke-linecap": "round",
|
|
38
|
+
"stroke-linejoin": "round",
|
|
39
|
+
"aria-hidden": "true"
|
|
40
|
+
}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
|
|
41
|
+
_: 3
|
|
42
|
+
}, 8, [
|
|
43
|
+
"as",
|
|
44
|
+
"as-child",
|
|
45
|
+
"class"
|
|
46
|
+
]);
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
//#endregion
|
|
51
|
+
export { EditableSubmitTrigger_vue_vue_type_script_setup_true_lang_default as default };
|
|
52
|
+
|
|
53
|
+
//# sourceMappingURL=EditableSubmitTrigger.vue_vue_type_script_setup_true_lang.js.map
|
package/dist/components/editable/EditableSubmitTrigger.vue_vue_type_script_setup_true_lang.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditableSubmitTrigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/editable/EditableSubmitTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { EditableSubmitTrigger } from 'reka-ui'\nimport { editableVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = defineProps<{\n as?: string\n asChild?: boolean\n class?: ClassValue\n}>()\n\nconst slotFns = computed(() => editableVariants())\n</script>\n\n<template>\n <EditableSubmitTrigger\n :as=\"props.as\"\n :as-child=\"props.asChild\"\n :class=\"composeClassName(slotFns.submitTrigger(), props.class)\"\n aria-label=\"Save\"\n >\n <slot>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </slot>\n </EditableSubmitTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAMd,MAAM,UAAU,eAAe,kBAAkB,CAAA;;uBAI/C,YAsBwB,MAAA,sBAAA,EAAA;IArBrB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,eAAa,EAAI,MAAM,MAAK,CAAA;IAC7D,cAAW;;2BAiBJ,CAfP,WAeO,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAdL,mBAaM,OAAA;KAZJ,OAAM;KACN,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,eAAY;QAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {
|
|
1
|
+
{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRef, provide } from 'vue'\nimport { formContextKey, type FormContext, type ValidationMode } from './form.context'\nimport { createFormState } from './form.state'\n\nconst props = withDefaults(\n defineProps<{\n /** External form handle from useForm(). When provided, Form uses it instead of creating its own state. */\n form?: FormContext\n /** Centralized default values. Field-level defaultValue prop wins if both set. */\n defaultValues?: Record<string, unknown>\n validationMode?: ValidationMode\n isDisabled?: boolean\n class?: string\n }>(),\n {\n form: undefined,\n defaultValues: undefined,\n validationMode: 'on-submit',\n isDisabled: false,\n class: undefined,\n },\n)\n\nconst emit = defineEmits<{\n submit: [payload: { values: Record<string, unknown>; setErrors: (e: Record<string, string>) => void }]\n invalid: [errors: Record<string, string>]\n reset: []\n}>()\n\nconst ctx: FormContext = props.form ?? createFormState({\n defaultValues: props.defaultValues,\n validationMode: toRef(props, 'validationMode'),\n isDisabled: toRef(props, 'isDisabled'),\n})\n\nprovide(formContextKey, ctx)\n\n// Destructure into top-level <script setup> bindings so that:\n// 1. Vue's template compiler auto-unwraps refs/computeds in slot prop bindings\n// 2. wrapper.findComponent(Form).vm.* access works in tests (reads setup state directly)\nconst {\n errors,\n isSubmitting,\n isSubmitted,\n submitCount,\n isValid,\n isDirty,\n isTouched,\n values,\n getValues,\n setValue,\n setErrors,\n setError,\n clearErrors,\n trigger,\n} = ctx\n\nasync function onFormSubmit(): Promise<void> {\n await ctx.handleSubmit(\n (vals) => emit('submit', { values: vals, setErrors }),\n (errs) => emit('invalid', errs),\n )\n}\n\n// Named 'reset' (not onFormReset) so vm.reset is accessible via findComponent().vm\nfunction reset(): void {\n ctx.reset()\n emit('reset')\n}\n\ndefineExpose({\n errors,\n isSubmitting,\n isSubmitted,\n submitCount,\n isValid,\n isDirty,\n isTouched,\n values,\n getValues,\n setValue,\n setErrors,\n setError,\n clearErrors,\n trigger,\n reset,\n})\n</script>\n\n<template>\n <form\n :class=\"props.class\"\n novalidate\n @submit.prevent=\"onFormSubmit\"\n >\n <slot\n :values=\"values\"\n :is-submitting=\"isSubmitting\"\n :is-submitted=\"isSubmitted\"\n :submit-count=\"submitCount\"\n :is-disabled=\"props.isDisabled\"\n :is-valid=\"isValid\"\n :is-dirty=\"isDirty\"\n :is-touched=\"isTouched\"\n :errors=\"errors\"\n :get-values=\"getValues\"\n :set-value=\"setValue\"\n :set-errors=\"setErrors\"\n :set-error=\"setError\"\n :clear-errors=\"clearErrors\"\n :trigger=\"trigger\"\n :reset=\"reset\"\n />\n </form>\n</template>\n"],"mappings":""}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { formContextKey } from "./form.context.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { createFormState } from "./form.state.js";
|
|
3
|
+
import { createElementBlock, defineComponent, normalizeClass, openBlock, provide, renderSlot, toRef, unref, withModifiers } from "vue";
|
|
4
4
|
//#region src/components/form/Form.vue?vue&type=script&setup=true&lang.ts
|
|
5
5
|
var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
6
6
|
__name: "Form",
|
|
7
7
|
props: {
|
|
8
|
+
form: { default: void 0 },
|
|
9
|
+
defaultValues: { default: void 0 },
|
|
8
10
|
validationMode: { default: "on-submit" },
|
|
9
11
|
isDisabled: {
|
|
10
12
|
type: Boolean,
|
|
@@ -20,151 +22,23 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
|
|
|
20
22
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
21
23
|
const props = __props;
|
|
22
24
|
const emit = __emit;
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const fields = /* @__PURE__ */ new Map();
|
|
28
|
-
const fieldCount = ref(0);
|
|
29
|
-
function registerField(reg) {
|
|
30
|
-
fields.set(reg.name, reg);
|
|
31
|
-
fieldCount.value++;
|
|
32
|
-
}
|
|
33
|
-
function unregisterField(name) {
|
|
34
|
-
fields.delete(name);
|
|
35
|
-
fieldCount.value--;
|
|
36
|
-
const next = { ...errors.value };
|
|
37
|
-
delete next[name];
|
|
38
|
-
errors.value = next;
|
|
39
|
-
}
|
|
40
|
-
const isValid = computed(() => {
|
|
41
|
-
fieldCount.value;
|
|
42
|
-
return Object.keys(errors.value).length === 0;
|
|
43
|
-
});
|
|
44
|
-
const isDirty = computed(() => {
|
|
45
|
-
fieldCount.value;
|
|
46
|
-
for (const field of fields.values()) if (field.dirty.value) return true;
|
|
47
|
-
return false;
|
|
48
|
-
});
|
|
49
|
-
const isTouched = computed(() => {
|
|
50
|
-
fieldCount.value;
|
|
51
|
-
for (const field of fields.values()) if (field.touched.value) return true;
|
|
52
|
-
return false;
|
|
25
|
+
const ctx = props.form ?? createFormState({
|
|
26
|
+
defaultValues: props.defaultValues,
|
|
27
|
+
validationMode: toRef(props, "validationMode"),
|
|
28
|
+
isDisabled: toRef(props, "isDisabled")
|
|
53
29
|
});
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
if (!field) return;
|
|
62
|
-
const error = await runValidation(field.getValue(), field.rules, field.validate, { values: getAllValues() });
|
|
63
|
-
const next = { ...errors.value };
|
|
64
|
-
if (error) next[name] = error;
|
|
65
|
-
else delete next[name];
|
|
66
|
-
errors.value = next;
|
|
67
|
-
}
|
|
68
|
-
async function trigger(name) {
|
|
69
|
-
if (name) {
|
|
70
|
-
await triggerFieldValidation(name);
|
|
71
|
-
return !errors.value[name];
|
|
72
|
-
}
|
|
73
|
-
const results = await Promise.all([...fields.entries()].map(async ([fieldName, field]) => {
|
|
74
|
-
return {
|
|
75
|
-
name: fieldName,
|
|
76
|
-
error: await runValidation(field.getValue(), field.rules, field.validate, { values: getAllValues() })
|
|
77
|
-
};
|
|
78
|
-
}));
|
|
79
|
-
const next = {};
|
|
80
|
-
for (const { name: fieldName, error } of results) if (error) next[fieldName] = error;
|
|
81
|
-
errors.value = next;
|
|
82
|
-
return Object.keys(next).length === 0;
|
|
83
|
-
}
|
|
84
|
-
function setErrors(newErrors) {
|
|
85
|
-
errors.value = {
|
|
86
|
-
...errors.value,
|
|
87
|
-
...newErrors
|
|
88
|
-
};
|
|
89
|
-
isSubmitting.value = false;
|
|
90
|
-
}
|
|
91
|
-
function setError(name, message) {
|
|
92
|
-
errors.value = {
|
|
93
|
-
...errors.value,
|
|
94
|
-
[name]: message
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
function clearErrors(name) {
|
|
98
|
-
if (name) {
|
|
99
|
-
const next = { ...errors.value };
|
|
100
|
-
delete next[name];
|
|
101
|
-
errors.value = next;
|
|
102
|
-
} else errors.value = {};
|
|
103
|
-
}
|
|
104
|
-
function getValues() {
|
|
105
|
-
return getAllValues();
|
|
106
|
-
}
|
|
107
|
-
function setValue(name, value) {
|
|
108
|
-
const field = fields.get(name);
|
|
109
|
-
if (field) field.setValue(value);
|
|
30
|
+
provide(formContextKey, ctx);
|
|
31
|
+
const { errors, isSubmitting, isSubmitted, submitCount, isValid, isDirty, isTouched, values, getValues, setValue, setErrors, setError, clearErrors, trigger } = ctx;
|
|
32
|
+
async function onFormSubmit() {
|
|
33
|
+
await ctx.handleSubmit((vals) => emit("submit", {
|
|
34
|
+
values: vals,
|
|
35
|
+
setErrors
|
|
36
|
+
}), (errs) => emit("invalid", errs));
|
|
110
37
|
}
|
|
111
38
|
function reset() {
|
|
112
|
-
|
|
113
|
-
errors.value = {};
|
|
114
|
-
isSubmitting.value = false;
|
|
115
|
-
isSubmitted.value = false;
|
|
116
|
-
submitCount.value = 0;
|
|
39
|
+
ctx.reset();
|
|
117
40
|
emit("reset");
|
|
118
41
|
}
|
|
119
|
-
async function handleSubmit() {
|
|
120
|
-
isSubmitting.value = true;
|
|
121
|
-
submitCount.value++;
|
|
122
|
-
const values = getAllValues();
|
|
123
|
-
const context = { values };
|
|
124
|
-
const results = await Promise.all([...fields.entries()].map(async ([name, field]) => {
|
|
125
|
-
return {
|
|
126
|
-
name,
|
|
127
|
-
error: await runValidation(field.getValue(), field.rules, field.validate, context)
|
|
128
|
-
};
|
|
129
|
-
}));
|
|
130
|
-
const nextErrors = {};
|
|
131
|
-
for (const { name, error } of results) if (error) nextErrors[name] = error;
|
|
132
|
-
if (Object.keys(nextErrors).length > 0) {
|
|
133
|
-
errors.value = nextErrors;
|
|
134
|
-
isSubmitting.value = false;
|
|
135
|
-
isSubmitted.value = true;
|
|
136
|
-
emit("invalid", nextErrors);
|
|
137
|
-
return;
|
|
138
|
-
}
|
|
139
|
-
errors.value = {};
|
|
140
|
-
isSubmitted.value = true;
|
|
141
|
-
isSubmitting.value = false;
|
|
142
|
-
emit("submit", {
|
|
143
|
-
values,
|
|
144
|
-
setErrors
|
|
145
|
-
});
|
|
146
|
-
}
|
|
147
|
-
provide(formContextKey, {
|
|
148
|
-
errors,
|
|
149
|
-
isSubmitting,
|
|
150
|
-
isSubmitted,
|
|
151
|
-
submitCount,
|
|
152
|
-
isDisabled: computed(() => props.isDisabled),
|
|
153
|
-
isValid,
|
|
154
|
-
isDirty,
|
|
155
|
-
isTouched,
|
|
156
|
-
validationMode: computed(() => props.validationMode),
|
|
157
|
-
registerField,
|
|
158
|
-
unregisterField,
|
|
159
|
-
triggerFieldValidation,
|
|
160
|
-
setErrors,
|
|
161
|
-
setError,
|
|
162
|
-
clearErrors,
|
|
163
|
-
getValues,
|
|
164
|
-
setValue,
|
|
165
|
-
trigger,
|
|
166
|
-
reset
|
|
167
|
-
});
|
|
168
42
|
__expose({
|
|
169
43
|
errors,
|
|
170
44
|
isSubmitting,
|
|
@@ -173,6 +47,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
|
|
|
173
47
|
isValid,
|
|
174
48
|
isDirty,
|
|
175
49
|
isTouched,
|
|
50
|
+
values,
|
|
176
51
|
getValues,
|
|
177
52
|
setValue,
|
|
178
53
|
setErrors,
|
|
@@ -185,22 +60,23 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
|
|
|
185
60
|
return openBlock(), createElementBlock("form", {
|
|
186
61
|
class: normalizeClass(props.class),
|
|
187
62
|
novalidate: "",
|
|
188
|
-
onSubmit: withModifiers(
|
|
63
|
+
onSubmit: withModifiers(onFormSubmit, ["prevent"])
|
|
189
64
|
}, [renderSlot(_ctx.$slots, "default", {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
65
|
+
values: unref(values),
|
|
66
|
+
isSubmitting: unref(isSubmitting),
|
|
67
|
+
isSubmitted: unref(isSubmitted),
|
|
68
|
+
submitCount: unref(submitCount),
|
|
193
69
|
isDisabled: props.isDisabled,
|
|
194
|
-
isValid: isValid
|
|
195
|
-
isDirty: isDirty
|
|
196
|
-
isTouched: isTouched
|
|
197
|
-
errors: errors
|
|
198
|
-
getValues,
|
|
199
|
-
setValue,
|
|
200
|
-
setErrors,
|
|
201
|
-
setError,
|
|
202
|
-
clearErrors,
|
|
203
|
-
trigger,
|
|
70
|
+
isValid: unref(isValid),
|
|
71
|
+
isDirty: unref(isDirty),
|
|
72
|
+
isTouched: unref(isTouched),
|
|
73
|
+
errors: unref(errors),
|
|
74
|
+
getValues: unref(getValues),
|
|
75
|
+
setValue: unref(setValue),
|
|
76
|
+
setErrors: unref(setErrors),
|
|
77
|
+
setError: unref(setError),
|
|
78
|
+
clearErrors: unref(clearErrors),
|
|
79
|
+
trigger: unref(trigger),
|
|
204
80
|
reset
|
|
205
81
|
})], 34);
|
|
206
82
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, provide } from 'vue'\nimport { formContextKey } from './form.context'\nimport { runValidation } from './validation'\nimport type { ValidationMode, FieldRegistration, FormContext } from './form.context'\n\nconst props = withDefaults(\n defineProps<{\n validationMode?: ValidationMode\n isDisabled?: boolean\n class?: string\n }>(),\n {\n validationMode: 'on-submit',\n isDisabled: false,\n class: undefined,\n },\n)\n\nconst emit = defineEmits<{\n submit: [payload: { values: Record<string, unknown>; setErrors: (e: Record<string, string>) => void }]\n invalid: [errors: Record<string, string>]\n reset: []\n}>()\n\nconst errors = ref<Record<string, string>>({})\nconst isSubmitting = ref(false)\nconst isSubmitted = ref(false)\nconst submitCount = ref(0)\nconst fields = new Map<string, FieldRegistration>()\n\n// Reactive field count so computed properties re-evaluate when fields register/unregister\nconst fieldCount = ref(0)\n\nfunction registerField(reg: FieldRegistration): void {\n fields.set(reg.name, reg)\n fieldCount.value++\n}\n\nfunction unregisterField(name: string): void {\n fields.delete(name)\n fieldCount.value--\n const next = { ...errors.value }\n delete next[name]\n errors.value = next\n}\n\n// ── Computed state ──────────────────────────────────────────────────────────\n\nconst isValid = computed(() => {\n void fieldCount.value // track reactivity\n return Object.keys(errors.value).length === 0\n})\n\nconst isDirty = computed(() => {\n void fieldCount.value\n for (const field of fields.values()) {\n if (field.dirty.value) return true\n }\n return false\n})\n\nconst isTouched = computed(() => {\n void fieldCount.value\n for (const field of fields.values()) {\n if (field.touched.value) return true\n }\n return false\n})\n\n// ── Helpers ─────────────────────────────────────────────────────────────────\n\nfunction getAllValues(): Record<string, unknown> {\n const values: Record<string, unknown> = {}\n for (const [name, field] of fields.entries()) {\n values[name] = field.getValue()\n }\n return values\n}\n\n// ── Validation ───────────────────────────────────────────────────────────────\n\nasync function triggerFieldValidation(name: string): Promise<void> {\n const field = fields.get(name)\n if (!field) return\n const error = await runValidation(\n field.getValue(),\n field.rules,\n field.validate,\n { values: getAllValues() },\n )\n const next = { ...errors.value }\n if (error) {\n next[name] = error\n } else {\n delete next[name]\n }\n errors.value = next\n}\n\nasync function trigger(name?: string): Promise<boolean> {\n if (name) {\n await triggerFieldValidation(name)\n return !errors.value[name]\n }\n\n const results = await Promise.all(\n [...fields.entries()].map(async ([fieldName, field]) => {\n const error = await runValidation(\n field.getValue(),\n field.rules,\n field.validate,\n { values: getAllValues() },\n )\n return { name: fieldName, error }\n }),\n )\n\n const next: Record<string, string> = {}\n for (const { name: fieldName, error } of results) {\n if (error) next[fieldName] = error\n }\n errors.value = next\n return Object.keys(next).length === 0\n}\n\n// ── Error management ─────────────────────────────────────────────────────────\n\nfunction setErrors(newErrors: Record<string, string>): void {\n errors.value = { ...errors.value, ...newErrors }\n isSubmitting.value = false\n}\n\nfunction setError(name: string, message: string): void {\n errors.value = { ...errors.value, [name]: message }\n}\n\nfunction clearErrors(name?: string): void {\n if (name) {\n const next = { ...errors.value }\n delete next[name]\n errors.value = next\n } else {\n errors.value = {}\n }\n}\n\n// ── Values ───────────────────────────────────────────────────────────────────\n\nfunction getValues(): Record<string, unknown> {\n return getAllValues()\n}\n\nfunction setValue(name: string, value: unknown): void {\n const field = fields.get(name)\n if (field) field.setValue(value)\n}\n\n// ── Reset ────────────────────────────────────────────────────────────────────\n\nfunction reset(): void {\n for (const field of fields.values()) {\n field.reset()\n }\n errors.value = {}\n isSubmitting.value = false\n isSubmitted.value = false\n submitCount.value = 0\n emit('reset')\n}\n\n// ── Submit ───────────────────────────────────────────────────────────────────\n\nasync function handleSubmit(): Promise<void> {\n isSubmitting.value = true\n submitCount.value++\n\n const values = getAllValues()\n const context = { values }\n\n const results = await Promise.all(\n [...fields.entries()].map(async ([name, field]) => {\n const error = await runValidation(field.getValue(), field.rules, field.validate, context)\n return { name, error }\n }),\n )\n\n const nextErrors: Record<string, string> = {}\n for (const { name, error } of results) {\n if (error) nextErrors[name] = error\n }\n\n if (Object.keys(nextErrors).length > 0) {\n errors.value = nextErrors\n isSubmitting.value = false\n isSubmitted.value = true\n emit('invalid', nextErrors)\n return\n }\n\n errors.value = {}\n isSubmitted.value = true\n isSubmitting.value = false\n emit('submit', { values, setErrors })\n}\n\n// ── Context ──────────────────────────────────────────────────────────────────\n\nconst ctx: FormContext = {\n errors,\n isSubmitting,\n isSubmitted,\n submitCount,\n isDisabled: computed(() => props.isDisabled),\n isValid,\n isDirty,\n isTouched,\n validationMode: computed(() => props.validationMode),\n registerField,\n unregisterField,\n triggerFieldValidation,\n setErrors,\n setError,\n clearErrors,\n getValues,\n setValue,\n trigger,\n reset,\n}\n\nprovide(formContextKey, ctx)\n\ndefineExpose({\n errors,\n isSubmitting,\n isSubmitted,\n submitCount,\n isValid,\n isDirty,\n isTouched,\n getValues,\n setValue,\n setErrors,\n setError,\n clearErrors,\n trigger,\n reset,\n})\n</script>\n\n<template>\n <form\n :class=\"props.class\"\n novalidate\n @submit.prevent=\"handleSubmit\"\n >\n <slot\n :is-submitting=\"isSubmitting\"\n :is-submitted=\"isSubmitted\"\n :submit-count=\"submitCount\"\n :is-disabled=\"props.isDisabled\"\n :is-valid=\"isValid\"\n :is-dirty=\"isDirty\"\n :is-touched=\"isTouched\"\n :errors=\"errors\"\n :get-values=\"getValues\"\n :set-value=\"setValue\"\n :set-errors=\"setErrors\"\n :set-error=\"setError\"\n :clear-errors=\"clearErrors\"\n :trigger=\"trigger\"\n :reset=\"reset\"\n />\n </form>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Form.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRef, provide } from 'vue'\nimport { formContextKey, type FormContext, type ValidationMode } from './form.context'\nimport { createFormState } from './form.state'\n\nconst props = withDefaults(\n defineProps<{\n /** External form handle from useForm(). When provided, Form uses it instead of creating its own state. */\n form?: FormContext\n /** Centralized default values. Field-level defaultValue prop wins if both set. */\n defaultValues?: Record<string, unknown>\n validationMode?: ValidationMode\n isDisabled?: boolean\n class?: string\n }>(),\n {\n form: undefined,\n defaultValues: undefined,\n validationMode: 'on-submit',\n isDisabled: false,\n class: undefined,\n },\n)\n\nconst emit = defineEmits<{\n submit: [payload: { values: Record<string, unknown>; setErrors: (e: Record<string, string>) => void }]\n invalid: [errors: Record<string, string>]\n reset: []\n}>()\n\nconst ctx: FormContext = props.form ?? createFormState({\n defaultValues: props.defaultValues,\n validationMode: toRef(props, 'validationMode'),\n isDisabled: toRef(props, 'isDisabled'),\n})\n\nprovide(formContextKey, ctx)\n\n// Destructure into top-level <script setup> bindings so that:\n// 1. Vue's template compiler auto-unwraps refs/computeds in slot prop bindings\n// 2. wrapper.findComponent(Form).vm.* access works in tests (reads setup state directly)\nconst {\n errors,\n isSubmitting,\n isSubmitted,\n submitCount,\n isValid,\n isDirty,\n isTouched,\n values,\n getValues,\n setValue,\n setErrors,\n setError,\n clearErrors,\n trigger,\n} = ctx\n\nasync function onFormSubmit(): Promise<void> {\n await ctx.handleSubmit(\n (vals) => emit('submit', { values: vals, setErrors }),\n (errs) => emit('invalid', errs),\n )\n}\n\n// Named 'reset' (not onFormReset) so vm.reset is accessible via findComponent().vm\nfunction reset(): void {\n ctx.reset()\n emit('reset')\n}\n\ndefineExpose({\n errors,\n isSubmitting,\n isSubmitted,\n submitCount,\n isValid,\n isDirty,\n isTouched,\n values,\n getValues,\n setValue,\n setErrors,\n setError,\n clearErrors,\n trigger,\n reset,\n})\n</script>\n\n<template>\n <form\n :class=\"props.class\"\n novalidate\n @submit.prevent=\"onFormSubmit\"\n >\n <slot\n :values=\"values\"\n :is-submitting=\"isSubmitting\"\n :is-submitted=\"isSubmitted\"\n :submit-count=\"submitCount\"\n :is-disabled=\"props.isDisabled\"\n :is-valid=\"isValid\"\n :is-dirty=\"isDirty\"\n :is-touched=\"isTouched\"\n :errors=\"errors\"\n :get-values=\"getValues\"\n :set-value=\"setValue\"\n :set-errors=\"setErrors\"\n :set-error=\"setError\"\n :clear-errors=\"clearErrors\"\n :trigger=\"trigger\"\n :reset=\"reset\"\n />\n </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAmBd,MAAM,OAAO;EAMb,MAAM,MAAmB,MAAM,QAAQ,gBAAgB;GACrD,eAAe,MAAM;GACrB,gBAAgB,MAAM,OAAO,iBAAiB;GAC9C,YAAY,MAAM,OAAO,aAAa;GACvC,CAAA;AAED,UAAQ,gBAAgB,IAAG;EAK3B,MAAM,EACJ,QACA,cACA,aACA,aACA,SACA,SACA,WACA,QACA,WACA,UACA,WACA,UACA,aACA,YACE;EAEJ,eAAe,eAA8B;AAC3C,SAAM,IAAI,cACP,SAAS,KAAK,UAAU;IAAE,QAAQ;IAAM;IAAW,CAAC,GACpD,SAAS,KAAK,WAAW,KAAK,CACjC;;EAIF,SAAS,QAAc;AACrB,OAAI,OAAM;AACV,QAAK,QAAO;;AAGd,WAAa;GACX;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAA;;uBAIC,mBAuBO,QAAA;IAtBJ,OAAK,eAAE,MAAM,MAAK;IACnB,YAAA;IACC,UAAM,cAAU,cAAY,CAAA,UAAA,CAAA;OAE7B,WAiBE,KAAA,QAAA,WAAA;IAhBC,QAAQ,MAAA,OAAM;IACd,cAAe,MAAA,aAAY;IAC3B,aAAc,MAAA,YAAW;IACzB,aAAc,MAAA,YAAW;IACzB,YAAa,MAAM;IACnB,SAAU,MAAA,QAAO;IACjB,SAAU,MAAA,QAAO;IACjB,WAAY,MAAA,UAAS;IACrB,QAAQ,MAAA,OAAM;IACd,WAAY,MAAA,UAAS;IACrB,UAAW,MAAA,SAAQ;IACnB,WAAY,MAAA,UAAS;IACrB,UAAW,MAAA,SAAQ;IACnB,aAAc,MAAA,YAAW;IACzB,SAAS,MAAA,QAAO;IACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","names":[],"sources":["../../../src/components/form/FormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useFormInject } from './form.context'\nimport { runValidation } from './validation'\nimport type { FieldRules, CustomValidator } from './validation'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<{\n name: string\n defaultValue?: unknown\n rules?: FieldRules\n validate?: CustomValidator\n /** Override validation mode for this field. */\n validationMode?: 'on-submit' | 'on-blur' | 'on-change'\n}>()\n\nconst modelValue = defineModel<unknown>({ default: undefined })\n\nconst ctx = useFormInject()\n\n// ── Field state ──────────────────────────────────────────────────────────────\n\nconst localError = ref<string | undefined>(undefined)\nconst touched = ref(false)\nconst dirty = ref(
|
|
1
|
+
{"version":3,"file":"FormField.js","names":[],"sources":["../../../src/components/form/FormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useFormInject } from './form.context'\nimport { runValidation } from './validation'\nimport type { FieldRules, CustomValidator } from './validation'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<{\n name: string\n defaultValue?: unknown\n rules?: FieldRules\n validate?: CustomValidator\n /** Override validation mode for this field. */\n validationMode?: 'on-submit' | 'on-blur' | 'on-change'\n /** Field names whose changes trigger re-validation of this field. */\n deps?: string[]\n}>()\n\nconst modelValue = defineModel<unknown>({ default: undefined })\n\nconst ctx = useFormInject()\n\n// ── Default value resolution ─────────────────────────────────────────────────\n// Priority: field-level defaultValue prop > form-level defaultValues[name] > undefined\n\nconst resolvedDefault = computed(() => {\n if (props.defaultValue !== undefined) return props.defaultValue\n return ctx?.defaultValues[props.name]\n})\n\n// ── Field state ──────────────────────────────────────────────────────────────\n\nconst localError = ref<string | undefined>(undefined)\nconst touched = ref(false)\nconst dirty = ref(\n resolvedDefault.value !== undefined && modelValue.value !== resolvedDefault.value,\n)\n\nconst fieldError = computed<string | undefined>(() =>\n ctx ? ctx.errors.value[props.name] : localError.value,\n)\n\nconst hasBeenInvalid = ref(false)\nwatch(fieldError, (error) => { if (error) hasBeenInvalid.value = true })\n\nconst isInvalid = computed(() => !!fieldError.value)\nconst isDisabled = computed(() => ctx?.isDisabled.value ?? false)\nconst validationMode = computed(() => props.validationMode ?? ctx?.validationMode.value ?? 'on-submit')\n\n// ── Dirty tracking ───────────────────────────────────────────────────────────\n\nwatch(modelValue, (val) => {\n dirty.value = val !== resolvedDefault.value\n})\n\n// ── Validation ───────────────────────────────────────────────────────────────\n\nasync function triggerValidation(val: unknown): Promise<void> {\n const context = ctx ? { values: ctx.getValues() } : undefined\n const error = await runValidation(val, props.rules, props.validate, context)\n\n if (ctx) {\n const next = { ...ctx.errors.value }\n if (error) {\n next[props.name] = error\n } else {\n delete next[props.name]\n }\n ctx.errors.value = next\n } else {\n localError.value = error\n }\n}\n\nasync function handleUpdate(val: unknown): Promise<void> {\n modelValue.value = val\n if (validationMode.value === 'on-change' || hasBeenInvalid.value) {\n await triggerValidation(val)\n }\n}\n\nasync function handleBlur(): Promise<void> {\n touched.value = true\n if (validationMode.value === 'on-blur') {\n await triggerValidation(modelValue.value)\n }\n}\n\n// ── Deps watching ─────────────────────────────────────────────────────────────\n\nconst depStoppers: (() => void)[] = []\n\nfunction setupDepWatchers(deps: string[] | undefined): void {\n for (const stop of depStoppers) stop()\n depStoppers.length = 0\n if (!ctx || !deps?.length) return\n for (const dep of deps) {\n const depRef = ctx.getFieldRef(dep)\n if (!depRef) continue\n depStoppers.push(watch(depRef, () => void triggerValidation(modelValue.value)))\n }\n}\n\n// ── Registration ─────────────────────────────────────────────────────────────\n\nfunction resetField(): void {\n modelValue.value = resolvedDefault.value\n localError.value = undefined\n touched.value = false\n dirty.value = false\n hasBeenInvalid.value = false\n}\n\nonMounted(() => {\n // Initialize to resolved default when no value was passed by the parent\n if (modelValue.value === undefined && resolvedDefault.value !== undefined) {\n modelValue.value = resolvedDefault.value\n }\n\n ctx?.registerField({\n name: props.name,\n valueRef: modelValue,\n getValue: () => modelValue.value,\n getDefaultValue: () => resolvedDefault.value,\n setValue: (val: unknown) => { modelValue.value = val },\n reset: resetField,\n touched,\n dirty,\n rules: props.rules,\n validate: props.validate,\n })\n\n setupDepWatchers(props.deps)\n})\n\n// Watch a stable string key so the watcher only tears down/rebuilds when the\n// dep list contents actually change — not on every re-render where the parent\n// passes a new array literal with the same elements (Object.is differs by ref).\nwatch(\n () => props.deps?.join('\\0') ?? '',\n () => setupDepWatchers(props.deps),\n)\n\nonUnmounted(() => {\n for (const stop of depStoppers) stop()\n ctx?.unregisterField(props.name)\n})\n\n// ── Slot bindings ─────────────────────────────────────────────────────────────\n\nconst fieldProps = computed(() => ({\n name: props.name,\n modelValue: modelValue.value,\n 'onUpdate:modelValue': handleUpdate,\n isInvalid: isInvalid.value,\n errorMessage: fieldError.value,\n isDisabled: isDisabled.value,\n onBlur: handleBlur,\n}))\n</script>\n\n<template>\n <slot\n :field-props=\"fieldProps\"\n :touched=\"touched\"\n :dirty=\"dirty\"\n :error=\"fieldError\"\n :is-invalid=\"isInvalid\"\n />\n</template>\n"],"mappings":""}
|
|
@@ -10,7 +10,8 @@ var FormField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
10
10
|
defaultValue: {},
|
|
11
11
|
rules: {},
|
|
12
12
|
validate: { type: Function },
|
|
13
|
-
validationMode: {}
|
|
13
|
+
validationMode: {},
|
|
14
|
+
deps: {}
|
|
14
15
|
}, {
|
|
15
16
|
"modelValue": { default: void 0 },
|
|
16
17
|
"modelModifiers": {}
|
|
@@ -20,9 +21,13 @@ var FormField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
20
21
|
const props = __props;
|
|
21
22
|
const modelValue = useModel(__props, "modelValue");
|
|
22
23
|
const ctx = useFormInject();
|
|
24
|
+
const resolvedDefault = computed(() => {
|
|
25
|
+
if (props.defaultValue !== void 0) return props.defaultValue;
|
|
26
|
+
return ctx?.defaultValues[props.name];
|
|
27
|
+
});
|
|
23
28
|
const localError = ref(void 0);
|
|
24
29
|
const touched = ref(false);
|
|
25
|
-
const dirty = ref(
|
|
30
|
+
const dirty = ref(resolvedDefault.value !== void 0 && modelValue.value !== resolvedDefault.value);
|
|
26
31
|
const fieldError = computed(() => ctx ? ctx.errors.value[props.name] : localError.value);
|
|
27
32
|
const hasBeenInvalid = ref(false);
|
|
28
33
|
watch(fieldError, (error) => {
|
|
@@ -32,20 +37,51 @@ var FormField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
32
37
|
const isDisabled = computed(() => ctx?.isDisabled.value ?? false);
|
|
33
38
|
const validationMode = computed(() => props.validationMode ?? ctx?.validationMode.value ?? "on-submit");
|
|
34
39
|
watch(modelValue, (val) => {
|
|
35
|
-
dirty.value = val !==
|
|
40
|
+
dirty.value = val !== resolvedDefault.value;
|
|
36
41
|
});
|
|
42
|
+
async function triggerValidation(val) {
|
|
43
|
+
const context = ctx ? { values: ctx.getValues() } : void 0;
|
|
44
|
+
const error = await runValidation(val, props.rules, props.validate, context);
|
|
45
|
+
if (ctx) {
|
|
46
|
+
const next = { ...ctx.errors.value };
|
|
47
|
+
if (error) next[props.name] = error;
|
|
48
|
+
else delete next[props.name];
|
|
49
|
+
ctx.errors.value = next;
|
|
50
|
+
} else localError.value = error;
|
|
51
|
+
}
|
|
52
|
+
async function handleUpdate(val) {
|
|
53
|
+
modelValue.value = val;
|
|
54
|
+
if (validationMode.value === "on-change" || hasBeenInvalid.value) await triggerValidation(val);
|
|
55
|
+
}
|
|
56
|
+
async function handleBlur() {
|
|
57
|
+
touched.value = true;
|
|
58
|
+
if (validationMode.value === "on-blur") await triggerValidation(modelValue.value);
|
|
59
|
+
}
|
|
60
|
+
const depStoppers = [];
|
|
61
|
+
function setupDepWatchers(deps) {
|
|
62
|
+
for (const stop of depStoppers) stop();
|
|
63
|
+
depStoppers.length = 0;
|
|
64
|
+
if (!ctx || !deps?.length) return;
|
|
65
|
+
for (const dep of deps) {
|
|
66
|
+
const depRef = ctx.getFieldRef(dep);
|
|
67
|
+
if (!depRef) continue;
|
|
68
|
+
depStoppers.push(watch(depRef, () => void triggerValidation(modelValue.value)));
|
|
69
|
+
}
|
|
70
|
+
}
|
|
37
71
|
function resetField() {
|
|
38
|
-
modelValue.value =
|
|
72
|
+
modelValue.value = resolvedDefault.value;
|
|
39
73
|
localError.value = void 0;
|
|
40
74
|
touched.value = false;
|
|
41
75
|
dirty.value = false;
|
|
42
76
|
hasBeenInvalid.value = false;
|
|
43
77
|
}
|
|
44
78
|
onMounted(() => {
|
|
79
|
+
if (modelValue.value === void 0 && resolvedDefault.value !== void 0) modelValue.value = resolvedDefault.value;
|
|
45
80
|
ctx?.registerField({
|
|
46
81
|
name: props.name,
|
|
82
|
+
valueRef: modelValue,
|
|
47
83
|
getValue: () => modelValue.value,
|
|
48
|
-
getDefaultValue: () =>
|
|
84
|
+
getDefaultValue: () => resolvedDefault.value,
|
|
49
85
|
setValue: (val) => {
|
|
50
86
|
modelValue.value = val;
|
|
51
87
|
},
|
|
@@ -55,28 +91,13 @@ var FormField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
55
91
|
rules: props.rules,
|
|
56
92
|
validate: props.validate
|
|
57
93
|
});
|
|
94
|
+
setupDepWatchers(props.deps);
|
|
58
95
|
});
|
|
96
|
+
watch(() => props.deps?.join("\0") ?? "", () => setupDepWatchers(props.deps));
|
|
59
97
|
onUnmounted(() => {
|
|
98
|
+
for (const stop of depStoppers) stop();
|
|
60
99
|
ctx?.unregisterField(props.name);
|
|
61
100
|
});
|
|
62
|
-
async function triggerValidation(val) {
|
|
63
|
-
const context = ctx ? { values: ctx.getValues() } : void 0;
|
|
64
|
-
const error = await runValidation(val, props.rules, props.validate, context);
|
|
65
|
-
if (ctx) {
|
|
66
|
-
const next = { ...ctx.errors.value };
|
|
67
|
-
if (error) next[props.name] = error;
|
|
68
|
-
else delete next[props.name];
|
|
69
|
-
ctx.errors.value = next;
|
|
70
|
-
} else localError.value = error;
|
|
71
|
-
}
|
|
72
|
-
async function handleUpdate(val) {
|
|
73
|
-
modelValue.value = val;
|
|
74
|
-
if (validationMode.value === "on-change" || hasBeenInvalid.value) await triggerValidation(val);
|
|
75
|
-
}
|
|
76
|
-
async function handleBlur() {
|
|
77
|
-
touched.value = true;
|
|
78
|
-
if (validationMode.value === "on-blur") await triggerValidation(modelValue.value);
|
|
79
|
-
}
|
|
80
101
|
const fieldProps = computed(() => ({
|
|
81
102
|
name: props.name,
|
|
82
103
|
modelValue: modelValue.value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/FormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useFormInject } from './form.context'\nimport { runValidation } from './validation'\nimport type { FieldRules, CustomValidator } from './validation'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<{\n name: string\n defaultValue?: unknown\n rules?: FieldRules\n validate?: CustomValidator\n /** Override validation mode for this field. */\n validationMode?: 'on-submit' | 'on-blur' | 'on-change'\n}>()\n\nconst modelValue = defineModel<unknown>({ default: undefined })\n\nconst ctx = useFormInject()\n\n// ── Field state ──────────────────────────────────────────────────────────────\n\nconst localError = ref<string | undefined>(undefined)\nconst touched = ref(false)\nconst dirty = ref(
|
|
1
|
+
{"version":3,"file":"FormField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/FormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useFormInject } from './form.context'\nimport { runValidation } from './validation'\nimport type { FieldRules, CustomValidator } from './validation'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<{\n name: string\n defaultValue?: unknown\n rules?: FieldRules\n validate?: CustomValidator\n /** Override validation mode for this field. */\n validationMode?: 'on-submit' | 'on-blur' | 'on-change'\n /** Field names whose changes trigger re-validation of this field. */\n deps?: string[]\n}>()\n\nconst modelValue = defineModel<unknown>({ default: undefined })\n\nconst ctx = useFormInject()\n\n// ── Default value resolution ─────────────────────────────────────────────────\n// Priority: field-level defaultValue prop > form-level defaultValues[name] > undefined\n\nconst resolvedDefault = computed(() => {\n if (props.defaultValue !== undefined) return props.defaultValue\n return ctx?.defaultValues[props.name]\n})\n\n// ── Field state ──────────────────────────────────────────────────────────────\n\nconst localError = ref<string | undefined>(undefined)\nconst touched = ref(false)\nconst dirty = ref(\n resolvedDefault.value !== undefined && modelValue.value !== resolvedDefault.value,\n)\n\nconst fieldError = computed<string | undefined>(() =>\n ctx ? ctx.errors.value[props.name] : localError.value,\n)\n\nconst hasBeenInvalid = ref(false)\nwatch(fieldError, (error) => { if (error) hasBeenInvalid.value = true })\n\nconst isInvalid = computed(() => !!fieldError.value)\nconst isDisabled = computed(() => ctx?.isDisabled.value ?? false)\nconst validationMode = computed(() => props.validationMode ?? ctx?.validationMode.value ?? 'on-submit')\n\n// ── Dirty tracking ───────────────────────────────────────────────────────────\n\nwatch(modelValue, (val) => {\n dirty.value = val !== resolvedDefault.value\n})\n\n// ── Validation ───────────────────────────────────────────────────────────────\n\nasync function triggerValidation(val: unknown): Promise<void> {\n const context = ctx ? { values: ctx.getValues() } : undefined\n const error = await runValidation(val, props.rules, props.validate, context)\n\n if (ctx) {\n const next = { ...ctx.errors.value }\n if (error) {\n next[props.name] = error\n } else {\n delete next[props.name]\n }\n ctx.errors.value = next\n } else {\n localError.value = error\n }\n}\n\nasync function handleUpdate(val: unknown): Promise<void> {\n modelValue.value = val\n if (validationMode.value === 'on-change' || hasBeenInvalid.value) {\n await triggerValidation(val)\n }\n}\n\nasync function handleBlur(): Promise<void> {\n touched.value = true\n if (validationMode.value === 'on-blur') {\n await triggerValidation(modelValue.value)\n }\n}\n\n// ── Deps watching ─────────────────────────────────────────────────────────────\n\nconst depStoppers: (() => void)[] = []\n\nfunction setupDepWatchers(deps: string[] | undefined): void {\n for (const stop of depStoppers) stop()\n depStoppers.length = 0\n if (!ctx || !deps?.length) return\n for (const dep of deps) {\n const depRef = ctx.getFieldRef(dep)\n if (!depRef) continue\n depStoppers.push(watch(depRef, () => void triggerValidation(modelValue.value)))\n }\n}\n\n// ── Registration ─────────────────────────────────────────────────────────────\n\nfunction resetField(): void {\n modelValue.value = resolvedDefault.value\n localError.value = undefined\n touched.value = false\n dirty.value = false\n hasBeenInvalid.value = false\n}\n\nonMounted(() => {\n // Initialize to resolved default when no value was passed by the parent\n if (modelValue.value === undefined && resolvedDefault.value !== undefined) {\n modelValue.value = resolvedDefault.value\n }\n\n ctx?.registerField({\n name: props.name,\n valueRef: modelValue,\n getValue: () => modelValue.value,\n getDefaultValue: () => resolvedDefault.value,\n setValue: (val: unknown) => { modelValue.value = val },\n reset: resetField,\n touched,\n dirty,\n rules: props.rules,\n validate: props.validate,\n })\n\n setupDepWatchers(props.deps)\n})\n\n// Watch a stable string key so the watcher only tears down/rebuilds when the\n// dep list contents actually change — not on every re-render where the parent\n// passes a new array literal with the same elements (Object.is differs by ref).\nwatch(\n () => props.deps?.join('\\0') ?? '',\n () => setupDepWatchers(props.deps),\n)\n\nonUnmounted(() => {\n for (const stop of depStoppers) stop()\n ctx?.unregisterField(props.name)\n})\n\n// ── Slot bindings ─────────────────────────────────────────────────────────────\n\nconst fieldProps = computed(() => ({\n name: props.name,\n modelValue: modelValue.value,\n 'onUpdate:modelValue': handleUpdate,\n isInvalid: isInvalid.value,\n errorMessage: fieldError.value,\n isDisabled: isDisabled.value,\n onBlur: handleBlur,\n}))\n</script>\n\n<template>\n <slot\n :field-props=\"fieldProps\"\n :touched=\"touched\"\n :dirty=\"dirty\"\n :error=\"fieldError\"\n :is-invalid=\"isInvalid\"\n />\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.context.js","names":[],"sources":["../../../src/components/form/form.context.ts"],"sourcesContent":["import { inject, type Ref, type ComputedRef } from 'vue'\nimport { createContext } from '../../utils/context'\nimport type { FieldRules, CustomValidator } from './validation'\n\nexport type { FieldRules, CustomValidator }\n\nexport type ValidationMode = 'on-submit' | 'on-blur' | 'on-change'\n\nexport interface FieldRegistration {\n name: string\n getValue: () => unknown\n getDefaultValue: () => unknown\n setValue: (value: unknown) => void\n reset: () => void\n touched: Ref<boolean>\n dirty: Ref<boolean>\n rules?: FieldRules\n validate?: CustomValidator\n}\n\nexport interface FormContext {\n errors: Ref<Record<string, string>>\n isSubmitting: Ref<boolean>\n isSubmitted: Ref<boolean>\n submitCount: Ref<number>\n isDisabled: ComputedRef<boolean>\n isValid: ComputedRef<boolean>\n isDirty: ComputedRef<boolean>\n isTouched: ComputedRef<boolean>\n validationMode: ComputedRef<ValidationMode>\n registerField(reg: FieldRegistration): void\n unregisterField(name: string): void\n triggerFieldValidation(name: string): Promise<void>\n setErrors(newErrors: Record<string, string>): void\n setError(name: string, message: string): void\n clearErrors(name?: string): void\n getValues(): Record<string, unknown>\n setValue(name: string, value: unknown): void\n trigger(name?: string): Promise<boolean>\n reset(): void\n}\n\nexport const {\n useProvide: useFormProvide,\n useInject: _useFormInjectStrict,\n key: formContextKey,\n} = createContext<FormContext>('Form')\n\n/**\n * Inject Form context. Returns null when called outside a <Form> — callers\n * handle standalone mode themselves.\n */\nexport function useFormInject(): FormContext | null {\n return inject(formContextKey, null)\n}\n"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"form.context.js","names":[],"sources":["../../../src/components/form/form.context.ts"],"sourcesContent":["import { inject, type Ref, type ComputedRef } from 'vue'\nimport { createContext } from '../../utils/context'\nimport type { FieldRules, CustomValidator } from './validation'\n\nexport type { FieldRules, CustomValidator }\n\nexport type ValidationMode = 'on-submit' | 'on-blur' | 'on-change'\n\nexport interface FieldRegistration {\n name: string\n valueRef: Ref<unknown> // reactive ref — powers values computed and deps watching\n getValue: () => unknown\n getDefaultValue: () => unknown\n setValue: (value: unknown) => void\n reset: () => void\n touched: Ref<boolean>\n dirty: Ref<boolean>\n rules?: FieldRules\n validate?: CustomValidator\n}\n\nexport interface FormOptions {\n defaultValues?: Record<string, unknown>\n validationMode?: ValidationMode\n isDisabled?: boolean\n}\n\nexport interface FormContext {\n errors: Ref<Record<string, string>>\n isSubmitting: Ref<boolean>\n isSubmitted: Ref<boolean>\n submitCount: Ref<number>\n isDisabled: ComputedRef<boolean>\n isValid: ComputedRef<boolean>\n isDirty: ComputedRef<boolean>\n isTouched: ComputedRef<boolean>\n validationMode: ComputedRef<ValidationMode>\n values: ComputedRef<Record<string, unknown>>\n defaultValues: Record<string, unknown>\n registerField(reg: FieldRegistration): void\n unregisterField(name: string): void\n triggerFieldValidation(name: string): Promise<void>\n getFieldRef(name: string): Ref<unknown> | undefined\n setErrors(newErrors: Record<string, string>): void\n setError(name: string, message: string): void\n clearErrors(name?: string): void\n getValues(): Record<string, unknown>\n setValue(name: string, value: unknown): void\n trigger(name?: string): Promise<boolean>\n reset(): void\n handleSubmit(\n onValid: (\n values: Record<string, unknown>,\n helpers: { setErrors(errors: Record<string, string>): void },\n ) => void | Promise<void>,\n onInvalid?: (errors: Record<string, string>) => void,\n ): Promise<void>\n}\n\nexport const {\n useProvide: useFormProvide,\n useInject: _useFormInjectStrict,\n key: formContextKey,\n} = createContext<FormContext>('Form')\n\n/**\n * Inject Form context. Returns null when called outside a <Form> — callers\n * handle standalone mode themselves.\n */\nexport function useFormInject(): FormContext | null {\n return inject(formContextKey, null)\n}\n"],"mappings":";;;AA2DA,IAAa,EACX,YAAY,gBACZ,WAAW,sBACX,KAAK,mBACH,cAA2B,OAAO;;;;;AAMtC,SAAgB,gBAAoC;AAClD,QAAO,OAAO,gBAAgB,KAAK"}
|