@veltra/desktop 1.2.1 → 1.2.2

package/dist/components/action/action-group.vue.d.ts

@@ -6,9 +6,9 @@ type __VLS_Slots = {
   default?: () => VNode[];
 };
 declare const __VLS_base: import("vue").DefineComponent<ActionGroupProps, _ActionGroupExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionGroupProps> & Readonly<{}>, {
+  size: "small" | "default" | "large";
   type: import("@veltra/utils").ColorType;
   text: boolean;
-  size: "small" | "default" | "large";
   max: number;
   circle: boolean;
   loading: boolean;

package/dist/components/action/action.vue.d.ts

@@ -12,9 +12,9 @@ declare const __VLS_base: import("vue").DefineComponent<ActionProps, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<ActionProps> & Readonly<{
   onRun?: (() => any) | undefined;
 }>, {
+  size: import("@veltra/utils").ComponentSize;
   type: ButtonType;
   text: boolean;
-  size: import("@veltra/utils").ComponentSize;
   circle: boolean;
   loading: boolean;
   inDropdown: boolean;

package/dist/components/auto-complete/auto-complete.vue.d.ts

@@ -22,10 +22,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onSelect?: ((value: string) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   placeholder: string;
   clearable: boolean;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/cascade/cascade.vue.d.ts

@@ -9,6 +9,8 @@ declare const __VLS_export: import("vue").DefineComponent<CascadeProps, {}, {},
   onClear?: (() => any) | undefined;
   onChange?: ((...args: [value?: string | undefined, label?: string | undefined, item?: Record<string, any> | undefined] | [value: string[], label: string[], data: Record<string, any>[]]) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   labelKey: string;
   valueKey: string;
   childrenKey: string;
@@ -16,10 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<CascadeProps, {}, {},
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
-  disabled: boolean;
-  readonly: boolean;
-  separator: string;
   visibilityLimit: number;
+  separator: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/checkbox/checkbox-button.vue.d.ts

@@ -17,9 +17,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:modelValue"?: ((checked: boolean) => any) | undefined;
   onChange?: ((checked: boolean) => any) | undefined;
 }>, {
-  type: import("@veltra/utils").ColorType;
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
+  type: import("@veltra/utils").ColorType;
   round: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/checkbox/checkbox.vue.d.ts

@@ -18,8 +18,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:modelValue"?: ((checked: boolean) => any) | undefined;
   onChange?: ((checked: boolean, e: MouseEvent) => any) | undefined;
 }>, {
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/checkbox-group/checkbox-group.vue.d.ts

@@ -12,10 +12,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   labelKey: string;
   valueKey: string;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/code-editor/code-editor.vue.d.ts

@@ -10,8 +10,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
   dark: boolean;
   defaultLines: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/date-panel/date-panel.vue.d.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<DatePanelProps, {}, {}
   "onSelect:range-date"?: ((rangeDate?: [import("@cat-kit/core").Dater, import("@cat-kit/core").Dater] | undefined) => any) | undefined;
   "onSelect:date"?: ((date: import("@cat-kit/core").Dater) => any) | undefined;
 }>, {
-  type: "date" | "month" | "year";
   size: import("@veltra/utils").ComponentSize;
+  type: "date" | "month" | "year";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/date-picker/date-picker.vue.d.ts

@@ -5,11 +5,11 @@ declare const __VLS_export: import("vue").DefineComponent<DatePickerProps, {}, {
 }, string, import("vue").PublicProps, Readonly<DatePickerProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: string | number | Date | undefined) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   type: "date" | "month" | "year";
   placeholder: string;
   clearable: boolean;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/date-range-picker/date-range-picker.vue.d.ts

@@ -5,11 +5,11 @@ declare const __VLS_export: import("vue").DefineComponent<DateRangePickerProps,
 }, string, import("vue").PublicProps, Readonly<DateRangePickerProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: [string, string] | undefined) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   type: "date" | "month" | "year";
   placeholder: [string, string];
   clearable: boolean;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/empty/empty.vue.d.ts

@@ -1,8 +1,8 @@
 import { EmptyProps } from "../../types/empty.js";
 //#region src/components/empty/empty.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {
-  text: string;
   size: number;
+  text: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../../src/components/form/form.vue"],"sourcesContent":["<template>\n  <u-grid\n    tag=\"form\"\n    ref=\"gridRef\"\n    @submit.prevent\n    :cols=\"cols || breakpointCols\"\n    :class=\"[cls.b, bem.is('readonly', readonly)]\"\n  >\n    <template\n      v-for=\"{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()\"\n      :key=\"node.key\"\n    >\n      <u-form-item v-if=\"!isFormItem && field\" v-bind=\"formItemProps\">\n        <component\n          :is=\"node\"\n          :model-value=\"modelValue ?? o(model ?? {}).get(field)\"\n          @update:model-value=\"handleUpdateValue(field, $event)\"\n        />\n      </u-form-item>\n\n      <component v-else :is=\"node\" />\n    </template>\n  </u-grid>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { bem } from '@veltra/utils'\nimport { provideFormContext } from '@veltra/utils'\nimport { shallowRef, toRef } from 'vue'\n\nimport type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'\nimport { UFormItem } from '../form-item'\nimport { UGrid } from '../grid'\nimport { useFormFields } from './use-form-fields'\nimport { useNodeInterceptor } from './use-node-interceptor'\n\ndefineOptions({ name: 'Form' })\n\nconst props = defineProps<FormProps>()\n\ndefineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()\n\nconst cls = bem('form')\n\nconst breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }\n\nconst { validate, clearValidate, reset, registerField, unregisterField, shouldValidate } =\n  useFormFields({ props })\n\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate\n})\n\nconst { getSlotsNodes } = useNodeInterceptor()\n\nfunction handleUpdateValue(field: string, value: any) {\n  if (!props.model) return\n  o(props.model).set(field, value)\n}\n\nconst gridRef = shallowRef<GridExposed>()\n\ndefineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })\n</script>\n"],"mappings":""}
+{"version":3,"file":"form.js","names":[],"sources":["../../../src/components/form/form.vue"],"sourcesContent":["<template>\n  <u-grid\n    tag=\"form\"\n    ref=\"grid\"\n    @submit.prevent\n    :cols=\"cols || breakpointCols\"\n    :class=\"[cls.b, bem.is('readonly', readonly)]\"\n  >\n    <template\n      v-for=\"{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()\"\n      :key=\"node.key\"\n    >\n      <u-form-item v-if=\"!isFormItem && field\" v-bind=\"formItemProps\">\n        <component\n          :is=\"node\"\n          :model-value=\"modelValue ?? o(model ?? {}).get(field)\"\n          @update:model-value=\"handleUpdateValue(field, $event)\"\n        />\n      </u-form-item>\n\n      <component v-else :is=\"node\" />\n    </template>\n  </u-grid>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { bem } from '@veltra/utils'\nimport { provideFormContext } from '@veltra/utils'\nimport { nextTick, shallowRef, toRef, useTemplateRef } from 'vue'\n\nimport type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'\nimport { UFormItem } from '../form-item'\nimport { UGrid } from '../grid'\nimport { useFormFields } from './use-form-fields'\nimport { useNodeInterceptor } from './use-node-interceptor'\n\ndefineOptions({ name: 'Form' })\n\nconst props = defineProps<FormProps>()\n\ndefineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()\n\nconst cls = bem('form')\nconst formItemCls = bem('form-item')\nconst gridRef = useTemplateRef('grid')\n\nconst breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }\n\nconst {\n  validate: runValidate,\n  clearValidate,\n  reset,\n  registerField,\n  unregisterField,\n  shouldValidate\n} = useFormFields({ props })\n\nasync function validate(keys?: string[]) {\n  const valid = await runValidate(keys)\n  if (!valid) {\n    await nextTick()\n\n    gridRef.value?.el\n      ?.querySelector(`.${formItemCls.e('error-text')}`)\n      ?.scrollIntoView({ block: 'center' })\n  }\n  return valid\n}\n\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate\n})\n\nconst { getSlotsNodes } = useNodeInterceptor()\n\nfunction handleUpdateValue(field: string, value: any) {\n  if (!props.model) return\n  o(props.model).set(field, value)\n}\n\ndefineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })\n</script>\n"],"mappings":""}

package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import _sfc_main from "../grid/grid.js";
 import form_item_default from "../form-item/form-item.js";
 import { useFormFields } from "./use-form-fields.js";
 import { useNodeInterceptor } from "./use-node-interceptor.js";
-import { Fragment, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, openBlock, renderList, resolveDynamicComponent, shallowRef, toRef, unref, withCtx, withModifiers } from "vue";
+import { Fragment, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, renderList, resolveDynamicComponent, toRef, unref, useTemplateRef, withCtx, withModifiers } from "vue";
 import { bem, provideFormContext } from "@veltra/utils";
 import { o } from "@cat-kit/core";
 //#region src/components/form/form.vue?vue&type=script&setup=true&lang.tsx
@@ -21,6 +21,8 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 	setup(__props, { expose: __expose }) {
 		const props = __props;
 		const cls = bem("form");
+		const formItemCls = bem("form-item");
+		const gridRef = useTemplateRef("grid");
 		const breakpointCols = {
 			xs: 1,
 			md: 2,
@@ -28,7 +30,15 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			xl: 4,
 			default: 4
 		};
-		const { validate, clearValidate, reset, registerField, unregisterField, shouldValidate } = useFormFields({ props });
+		const { validate: runValidate, clearValidate, reset, registerField, unregisterField, shouldValidate } = useFormFields({ props });
+		async function validate(keys) {
+			const valid = await runValidate(keys);
+			if (!valid) {
+				await nextTick();
+				gridRef.value?.el?.querySelector(`.${formItemCls.e("error-text")}`)?.scrollIntoView({ block: "center" });
+			}
+			return valid;
+		}
 		provideFormContext({
 			formProps: props,
 			registerField,
@@ -41,7 +51,6 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			if (!props.model) return;
 			o(props.model).set(field, value);
 		}
-		const gridRef = shallowRef();
 		__expose({
 			el: toRef(() => gridRef.value?.el),
 			validate,
@@ -51,8 +60,7 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(_sfc_main), {
 				tag: "form",
-				ref_key: "gridRef",
-				ref: gridRef,
+				ref: "grid",
 				onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
 				cols: __props.cols || breakpointCols,
 				class: normalizeClass([unref(cls).b, unref(bem).is("readonly", __props.readonly)])

package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/form.vue"],"sourcesContent":["<template>\n  <u-grid\n    tag=\"form\"\n    ref=\"gridRef\"\n    @submit.prevent\n    :cols=\"cols || breakpointCols\"\n    :class=\"[cls.b, bem.is('readonly', readonly)]\"\n  >\n    <template\n      v-for=\"{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()\"\n      :key=\"node.key\"\n    >\n      <u-form-item v-if=\"!isFormItem && field\" v-bind=\"formItemProps\">\n        <component\n          :is=\"node\"\n          :model-value=\"modelValue ?? o(model ?? {}).get(field)\"\n          @update:model-value=\"handleUpdateValue(field, $event)\"\n        />\n      </u-form-item>\n\n      <component v-else :is=\"node\" />\n    </template>\n  </u-grid>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { bem } from '@veltra/utils'\nimport { provideFormContext } from '@veltra/utils'\nimport { shallowRef, toRef } from 'vue'\n\nimport type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'\nimport { UFormItem } from '../form-item'\nimport { UGrid } from '../grid'\nimport { useFormFields } from './use-form-fields'\nimport { useNodeInterceptor } from './use-node-interceptor'\n\ndefineOptions({ name: 'Form' })\n\nconst props = defineProps<FormProps>()\n\ndefineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()\n\nconst cls = bem('form')\n\nconst breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }\n\nconst { validate, clearValidate, reset, registerField, unregisterField, shouldValidate } =\n  useFormFields({ props })\n\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate\n})\n\nconst { getSlotsNodes } = useNodeInterceptor()\n\nfunction handleUpdateValue(field: string, value: any) {\n  if (!props.model) return\n  o(props.model).set(field, value)\n}\n\nconst gridRef = shallowRef<GridExposed>()\n\ndefineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAuCA,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,MAAM;EAEtB,MAAM,iBAA4B;GAAE,IAAI;GAAG,IAAI;GAAG,IAAI;GAAG,IAAI;GAAG,SAAS;EAAE;EAE3E,MAAM,EAAE,UAAU,eAAe,OAAO,eAAe,iBAAiB,mBACtE,cAAc,EAAE,MAAM,CAAC;EAEzB,mBAAmB;GACjB,WAAW;GACX;GACA;GACA,gBAAgB;GAChB;EACF,CAAC;EAED,MAAM,EAAE,kBAAkB,mBAAmB;EAE7C,SAAS,kBAAkB,OAAe,OAAY;GACpD,IAAI,CAAC,MAAM,OAAO;GAClB,EAAE,MAAM,KAAK,EAAE,IAAI,OAAO,KAAK;EACjC;EAEA,MAAM,UAAU,WAAwB;EAExC,SAA2B;GAAE,IAAI,YAAY,QAAQ,OAAO,EAAE;GAAG;GAAU;GAAe;EAAM,CAAC;;uBAlE/F,YAqBS,MAAA,SAAA,GAAA;IApBP,KAAI;aACA;IAAJ,KAAI;IACH,UAAM,OAAA,OAAA,OAAA,KAAA,oBAAP,CAAA,GAAe,CAAA,SAAA,CAAA;IACd,MAAM,QAAA,QAAQ;IACd,OAAK,eAAA,CAAG,MAAA,GAAA,EAAI,GAAG,MAAA,GAAA,EAAI,GAAE,YAAa,QAAA,QAAQ,CAAA,CAAA;;2BAGwC,EAAA,UAAA,IAAA,GADnF,mBAaW,UAAA,MAAA,WAZwD,MAAA,aAAA,EAAa,IAAA,EAArE,MAAM,YAAY,eAAe,OAAO,iBAAU;6DACrD,KAAK,IAAA,GAAA,CAAA,CAES,cAAc,SAAA,UAAA,GAAlC,YAMc,MAAA,iBAAA,GANd,WAMc;;;QANmC,aAAa,GAAA;6BAK1D,EAAA,UAAA,GAJF,YAIE,wBAHK,IAAI,GAAA;OACR,eAAa,cAAc,MAAA,CAAA,EAAE,QAAA,SAAK,CAAA,CAAA,EAAQ,IAAI,KAAK;OACnD,wBAAkB,WAAE,kBAAkB,OAAO,MAAM;;;+BAIxD,YAA+B,wBAAR,IAAI,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,GAAA,EAAA"}
+{"version":3,"file":"form.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/form.vue"],"sourcesContent":["<template>\n  <u-grid\n    tag=\"form\"\n    ref=\"grid\"\n    @submit.prevent\n    :cols=\"cols || breakpointCols\"\n    :class=\"[cls.b, bem.is('readonly', readonly)]\"\n  >\n    <template\n      v-for=\"{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()\"\n      :key=\"node.key\"\n    >\n      <u-form-item v-if=\"!isFormItem && field\" v-bind=\"formItemProps\">\n        <component\n          :is=\"node\"\n          :model-value=\"modelValue ?? o(model ?? {}).get(field)\"\n          @update:model-value=\"handleUpdateValue(field, $event)\"\n        />\n      </u-form-item>\n\n      <component v-else :is=\"node\" />\n    </template>\n  </u-grid>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { bem } from '@veltra/utils'\nimport { provideFormContext } from '@veltra/utils'\nimport { nextTick, shallowRef, toRef, useTemplateRef } from 'vue'\n\nimport type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'\nimport { UFormItem } from '../form-item'\nimport { UGrid } from '../grid'\nimport { useFormFields } from './use-form-fields'\nimport { useNodeInterceptor } from './use-node-interceptor'\n\ndefineOptions({ name: 'Form' })\n\nconst props = defineProps<FormProps>()\n\ndefineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()\n\nconst cls = bem('form')\nconst formItemCls = bem('form-item')\nconst gridRef = useTemplateRef('grid')\n\nconst breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }\n\nconst {\n  validate: runValidate,\n  clearValidate,\n  reset,\n  registerField,\n  unregisterField,\n  shouldValidate\n} = useFormFields({ props })\n\nasync function validate(keys?: string[]) {\n  const valid = await runValidate(keys)\n  if (!valid) {\n    await nextTick()\n\n    gridRef.value?.el\n      ?.querySelector(`.${formItemCls.e('error-text')}`)\n      ?.scrollIntoView({ block: 'center' })\n  }\n  return valid\n}\n\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate\n})\n\nconst { getSlotsNodes } = useNodeInterceptor()\n\nfunction handleUpdateValue(field: string, value: any) {\n  if (!props.model) return\n  o(props.model).set(field, value)\n}\n\ndefineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAuCA,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,MAAM;EACtB,MAAM,cAAc,IAAI,WAAW;EACnC,MAAM,UAAU,eAAe,MAAM;EAErC,MAAM,iBAA4B;GAAE,IAAI;GAAG,IAAI;GAAG,IAAI;GAAG,IAAI;GAAG,SAAS;EAAE;EAE3E,MAAM,EACJ,UAAU,aACV,eACA,OACA,eACA,iBACA,mBACE,cAAc,EAAE,MAAM,CAAC;EAE3B,eAAe,SAAS,MAAiB;GACvC,MAAM,QAAQ,MAAM,YAAY,IAAI;GACpC,IAAI,CAAC,OAAO;IACV,MAAM,SAAS;IAEf,QAAQ,OAAO,IACX,cAAc,IAAI,YAAY,EAAE,YAAY,GAAG,GAC/C,eAAe,EAAE,OAAO,SAAS,CAAC;GACxC;GACA,OAAO;EACT;EAEA,mBAAmB;GACjB,WAAW;GACX;GACA;GACA,gBAAgB;GAChB;EACF,CAAC;EAED,MAAM,EAAE,kBAAkB,mBAAmB;EAE7C,SAAS,kBAAkB,OAAe,OAAY;GACpD,IAAI,CAAC,MAAM,OAAO;GAClB,EAAE,MAAM,KAAK,EAAE,IAAI,OAAO,KAAK;EACjC;EAEA,SAA2B;GAAE,IAAI,YAAY,QAAQ,OAAO,EAAE;GAAG;GAAU;GAAe;EAAM,CAAC;;uBApF/F,YAqBS,MAAA,SAAA,GAAA;IApBP,KAAI;IACJ,KAAI;IACH,UAAM,OAAA,OAAA,OAAA,KAAA,oBAAP,CAAA,GAAe,CAAA,SAAA,CAAA;IACd,MAAM,QAAA,QAAQ;IACd,OAAK,eAAA,CAAG,MAAA,GAAA,EAAI,GAAG,MAAA,GAAA,EAAI,GAAE,YAAa,QAAA,QAAQ,CAAA,CAAA;;2BAGwC,EAAA,UAAA,IAAA,GADnF,mBAaW,UAAA,MAAA,WAZwD,MAAA,aAAA,EAAa,IAAA,EAArE,MAAM,YAAY,eAAe,OAAO,iBAAU;6DACrD,KAAK,IAAA,GAAA,CAAA,CAES,cAAc,SAAA,UAAA,GAAlC,YAMc,MAAA,iBAAA,GANd,WAMc;;;QANmC,aAAa,GAAA;6BAK1D,EAAA,UAAA,GAJF,YAIE,wBAHK,IAAI,GAAA;OACR,eAAa,cAAc,MAAA,CAAA,EAAE,QAAA,SAAK,CAAA,CAAA,EAAQ,IAAI,KAAK;OACnD,wBAAkB,WAAE,kBAAkB,OAAO,MAAM;;;+BAIxD,YAA+B,wBAAR,IAAI,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,GAAA,EAAA"}

package/dist/components/input/input.vue.d.ts

@@ -32,10 +32,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, _Inpu
   onBlur?: ((value?: string | undefined) => any) | undefined;
   "onNative:input"?: ((ev: Event) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   placeholder: string;
   clearable: boolean;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/multi-select/multi-select.vue.d.ts

@@ -26,13 +26,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
   onChange?: ((options: Record<string, any>[]) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
+  minWidth: string;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
-  minWidth: string;
-  disabled: boolean;
-  readonly: boolean;
   visibilityLimit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts

@@ -21,15 +21,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   onClear?: (() => any) | undefined;
   onChange?: ((checked: Record<string, any>[]) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
+  minWidth: string;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
-  minWidth: string;
-  disabled: boolean;
-  readonly: boolean;
   visibilityLimit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/number/number.vue.d.ts

@@ -1,8 +1,8 @@
 import { NumberProps } from "../../types/number.js";
 //#region src/components/number/number.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<NumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NumberProps> & Readonly<{}>, {
-  format: "currency" | "percent" | "decimal";
   duration: number;
+  format: "currency" | "percent" | "decimal";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/number-input/number-input.vue.d.ts

@@ -20,10 +20,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   onClear?: (() => any) | undefined;
   onChange?: ((value?: number | undefined) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   placeholder: string;
   clearable: boolean;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/number-range-input/number-range-input.vue.d.ts

@@ -22,9 +22,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
   "onUpdate:start"?: ((value: number | undefined) => any) | undefined;
   "onUpdate:end"?: ((value: number | undefined) => any) | undefined;
 }>, {
-  clearable: boolean;
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
+  clearable: boolean;
   startPlaceholder: string;
   endPlaceholder: string;
   separator: string;

package/dist/components/palette/palette.vue.d.ts

@@ -10,8 +10,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/password-input/password-input.vue.d.ts

@@ -13,9 +13,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-  clearable: boolean;
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
+  clearable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/radio-group/radio-group.vue.d.ts

@@ -14,10 +14,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
   "onUpdate:modelValue"?: ((value: any) => any) | undefined;
   onChange?: ((item: Record<string, any>) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   labelKey: string;
   valueKey: string;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts

@@ -10,9 +10,9 @@ declare const __VLS_export: import("vue").DefineComponent<RichTextEditorProps &
 }> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-  placeholder: string;
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
+  placeholder: string;
   format: RichTextFormat;
   toolbar: ToolbarItem[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/select/select.vue.d.ts

@@ -24,12 +24,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:text"?: ((value: any) => any) | undefined;
   "onUpdate:label"?: ((label?: string | undefined) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/steps/steps.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_base: import("vue").DefineComponent<StepsProps, {}, {}, {},
   "onUpdate:current"?: ((value?: string | number | undefined) => any) | undefined;
   "onItem-click"?: ((item: Record<string, any>, index: number) => any) | undefined;
 }>, {
-  labelKey: string;
   direction: "horizontal" | "vertical";
+  labelKey: string;
   finishedStepType: import("@veltra/utils").ColorType;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/switch/switch.vue.d.ts

@@ -14,8 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
   "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
   onChange?: ((value: boolean) => any) | undefined;
 }>, {
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/textarea/textarea.vue.d.ts

@@ -20,10 +20,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
   onFocus?: (() => any) | undefined;
   onBlur?: (() => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   placeholder: string;
   clearable: boolean;
-  disabled: boolean;
-  readonly: boolean;
   resize: boolean;
   autosize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/tip/tip.vue.d.ts

@@ -13,8 +13,8 @@ declare const __VLS_base: import("vue").DefineComponent<TipProps, {}, {}, {}, {}
   contentTag: string;
   visible: boolean;
   direction: TipDirection;
-  content: string;
   alignment: TipAlign;
+  content: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -23,15 +23,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
+  minWidth: string;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
-  minWidth: string;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "files": [
     "dist",
     "src"
@@ -68,11 +68,11 @@
     "@cat-kit/core": ">=1.1.6",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.6",
-    "@veltra/compositions": "1.2.1",
-    "@veltra/directives": "1.2.1",
-    "@veltra/icons": "1.2.1",
-    "@veltra/styles": "1.2.1",
-    "@veltra/utils": "1.2.1",
+    "@veltra/compositions": "1.2.2",
+    "@veltra/directives": "1.2.2",
+    "@veltra/icons": "1.2.2",
+    "@veltra/styles": "1.2.2",
+    "@veltra/utils": "1.2.2",
     "vue": ">=3.5.0"
   }
 }

package/src/components/form/form.vue

@@ -1,7 +1,7 @@
 <template>
   <u-grid
     tag="form"
-    ref="gridRef"
+    ref="grid"
     @submit.prevent
     :cols="cols || breakpointCols"
     :class="[cls.b, bem.is('readonly', readonly)]"
@@ -27,7 +27,7 @@
 import { o } from '@cat-kit/core'
 import { bem } from '@veltra/utils'
 import { provideFormContext } from '@veltra/utils'
-import { shallowRef, toRef } from 'vue'
+import { nextTick, shallowRef, toRef, useTemplateRef } from 'vue'
 
 import type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'
 import { UFormItem } from '../form-item'
@@ -42,11 +42,31 @@ const props = defineProps<FormProps>()
 defineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()
 
 const cls = bem('form')
+const formItemCls = bem('form-item')
+const gridRef = useTemplateRef('grid')
 
 const breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }
 
-const { validate, clearValidate, reset, registerField, unregisterField, shouldValidate } =
-  useFormFields({ props })
+const {
+  validate: runValidate,
+  clearValidate,
+  reset,
+  registerField,
+  unregisterField,
+  shouldValidate
+} = useFormFields({ props })
+
+async function validate(keys?: string[]) {
+  const valid = await runValidate(keys)
+  if (!valid) {
+    await nextTick()
+
+    gridRef.value?.el
+      ?.querySelector(`.${formItemCls.e('error-text')}`)
+      ?.scrollIntoView({ block: 'center' })
+  }
+  return valid
+}
 
 provideFormContext({
   formProps: props,
@@ -63,7 +83,5 @@ function handleUpdateValue(field: string, value: any) {
   o(props.model).set(field, value)
 }
 
-const gridRef = shallowRef<GridExposed>()
-
 defineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })
 </script>