@fastkit/vui 0.7.43 → 0.7.44

package/dist/vui.cjs.js

@@ -2753,8 +2753,8 @@ const VForm = vue.defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...vueKit.defineSlotsProps(),
-    disableAutoScroll: Boolean
+    ...vueKit.defineSlotsProps() // disableAutoScroll: Boolean,
+
   },
   emits,
 
@@ -2762,13 +2762,9 @@ const VForm = vue.defineComponent({
     const vui = useVui();
     const nodeControl = vueKit.useForm(props, ctx, {
       nodeType: VUI_FORM_SYMBOL,
-      onAutoValidateError: () => {
-        if (props.disableAutoScroll) return;
+      scrollToElement: el => {
         const scroller = vueKit.getDocumentScroller();
-        const {
-          firstInvalidEl
-        } = nodeControl;
-        firstInvalidEl && scroller.toElement(firstInvalidEl, {
+        return scroller.toElement(el, {
           offset: vui.getAutoScrollToElementOffsetTop()
         });
       }
@@ -2906,7 +2902,8 @@ const VTabs = vue.defineComponent({
      */
     withQuery: Boolean,
     ...vueUtils.defineSlotsProps(),
-    color: String
+    color: String,
+    onBeforeChange: Function
   },
   emits: {
     'update:modelValue': newValue => true,
@@ -3003,7 +3000,33 @@ const VTabs = vue.defineComponent({
       }
     }
 
-    function to(value) {
+    async function to(value) {
+      const {
+        value: currentValue
+      } = currentRef;
+
+      if (currentValue === value) {
+        return;
+      }
+
+      const {
+        onBeforeChange
+      } = props;
+
+      if (onBeforeChange) {
+        let result = onBeforeChange(value, currentRef.value);
+
+        if (helpers.isPromise(result)) {
+          result = await result;
+        }
+
+        console.log(result);
+
+        if (result === false) {
+          return;
+        }
+      }
+
       currentRef.value = value;
     }
 

package/dist/vui.cjs.prod.js

@@ -2753,8 +2753,8 @@ const VForm = vue.defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...vueKit.defineSlotsProps(),
-    disableAutoScroll: Boolean
+    ...vueKit.defineSlotsProps() // disableAutoScroll: Boolean,
+
   },
   emits,
 
@@ -2762,13 +2762,9 @@ const VForm = vue.defineComponent({
     const vui = useVui();
     const nodeControl = vueKit.useForm(props, ctx, {
       nodeType: VUI_FORM_SYMBOL,
-      onAutoValidateError: () => {
-        if (props.disableAutoScroll) return;
+      scrollToElement: el => {
         const scroller = vueKit.getDocumentScroller();
-        const {
-          firstInvalidEl
-        } = nodeControl;
-        firstInvalidEl && scroller.toElement(firstInvalidEl, {
+        return scroller.toElement(el, {
           offset: vui.getAutoScrollToElementOffsetTop()
         });
       }
@@ -2906,7 +2902,8 @@ const VTabs = vue.defineComponent({
      */
     withQuery: Boolean,
     ...vueUtils.defineSlotsProps(),
-    color: String
+    color: String,
+    onBeforeChange: Function
   },
   emits: {
     'update:modelValue': newValue => true,
@@ -3003,7 +3000,33 @@ const VTabs = vue.defineComponent({
       }
     }
 
-    function to(value) {
+    async function to(value) {
+      const {
+        value: currentValue
+      } = currentRef;
+
+      if (currentValue === value) {
+        return;
+      }
+
+      const {
+        onBeforeChange
+      } = props;
+
+      if (onBeforeChange) {
+        let result = onBeforeChange(value, currentRef.value);
+
+        if (helpers.isPromise(result)) {
+          result = await result;
+        }
+
+        console.log(result);
+
+        if (result === false) {
+          return;
+        }
+      }
+
       currentRef.value = value;
     }
 

package/dist/vui.d.ts

@@ -4000,7 +4000,6 @@ export declare const VDrawerLayout: DefineComponent<{
 }>;
 
 export declare const VForm: DefineComponent<{
-    disableAutoScroll: BooleanConstructor;
     'v-slots': PropType<ResolveRawSlots<VFormSlots>>;
     size: {
         type: PropType<"sm" | "md" | "lg">;
@@ -4012,6 +4011,7 @@ export declare const VForm: DefineComponent<{
         default: boolean;
     };
     submiting: BooleanConstructor;
+    disableAutoScroll: BooleanConstructor;
     name: StringConstructor;
     modelValue: Prop<unknown, unknown>;
     tabindex: {
@@ -4047,6 +4047,7 @@ export declare const VForm: DefineComponent<{
     form: VueForm_2;
     formRef: () => Ref<HTMLFormElement | null>;
     nativeAction: ComputedRef<string | undefined>;
+    disableAutoScroll: ComputedRef<boolean>;
     nodeControl: FormNodeControl<any, any>;
     currentValue: WritableComputedRef<any>;
     computedTabindex: ComputedRef<number>;
@@ -4087,7 +4088,6 @@ export declare const VForm: DefineComponent<{
     focus: (ev: FocusEvent) => boolean;
     blur: (ev: FocusEvent) => boolean;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
-    disableAutoScroll: BooleanConstructor;
     'v-slots': PropType<ResolveRawSlots<VFormSlots>>;
     size: {
         type: PropType<"sm" | "md" | "lg">;
@@ -4099,6 +4099,7 @@ export declare const VForm: DefineComponent<{
         default: boolean;
     };
     submiting: BooleanConstructor;
+    disableAutoScroll: BooleanConstructor;
     name: StringConstructor;
     modelValue: Prop<unknown, unknown>;
     tabindex: {
@@ -4143,8 +4144,8 @@ export declare const VForm: DefineComponent<{
     validateTiming: ValidateTiming;
     rules: RecursiveArray<Rule<any>>;
     submiting: boolean;
-    autoValidate: boolean;
     disableAutoScroll: boolean;
+    autoValidate: boolean;
 }>;
 
 export declare const VFormControl: DefineComponent<{
@@ -7121,6 +7122,7 @@ export declare const VSwitchGroup: DefineComponent<{
 
 export declare const VTabs: DefineComponent<{
     color: PropType<ScopeName>;
+    onBeforeChange: PropType<VTabsGuard>;
     'v-slots': PropType<ResolveRawSlots_2<{
         item: VTabsItemLabelSlotCtx;
     }>>;
@@ -7150,6 +7152,7 @@ export declare const VTabs: DefineComponent<{
     change: (newValue: string) => true;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     color: PropType<ScopeName>;
+    onBeforeChange: PropType<VTabsGuard>;
     'v-slots': PropType<ResolveRawSlots_2<{
         item: VTabsItemLabelSlotCtx;
     }>>;
@@ -7182,6 +7185,8 @@ export declare const VTabs: DefineComponent<{
     withQuery: boolean;
 }>;
 
+export declare type VTabsGuard = (nextValue: string, oldValue: string) => boolean | void | undefined | Promise<boolean | void | undefined>;
+
 export declare interface VTabsItem {
     value: string;
     icon?: RawIconProp;

package/dist/vui.mjs

@@ -2748,8 +2748,8 @@ const VForm = defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...defineSlotsProps(),
-    disableAutoScroll: Boolean
+    ...defineSlotsProps() // disableAutoScroll: Boolean,
+
   },
   emits,
 
@@ -2757,13 +2757,9 @@ const VForm = defineComponent({
     const vui = useVui();
     const nodeControl = useForm(props, ctx, {
       nodeType: VUI_FORM_SYMBOL,
-      onAutoValidateError: () => {
-        if (props.disableAutoScroll) return;
+      scrollToElement: el => {
         const scroller = getDocumentScroller();
-        const {
-          firstInvalidEl
-        } = nodeControl;
-        firstInvalidEl && scroller.toElement(firstInvalidEl, {
+        return scroller.toElement(el, {
           offset: vui.getAutoScrollToElementOffsetTop()
         });
       }
@@ -2901,7 +2897,8 @@ const VTabs = defineComponent({
      */
     withQuery: Boolean,
     ...defineSlotsProps$1(),
-    color: String
+    color: String,
+    onBeforeChange: Function
   },
   emits: {
     'update:modelValue': newValue => true,
@@ -2998,7 +2995,33 @@ const VTabs = defineComponent({
       }
     }
 
-    function to(value) {
+    async function to(value) {
+      const {
+        value: currentValue
+      } = currentRef;
+
+      if (currentValue === value) {
+        return;
+      }
+
+      const {
+        onBeforeChange
+      } = props;
+
+      if (onBeforeChange) {
+        let result = onBeforeChange(value, currentRef.value);
+
+        if (isPromise(result)) {
+          result = await result;
+        }
+
+        console.log(result);
+
+        if (result === false) {
+          return;
+        }
+      }
+
       currentRef.value = value;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.43",
+  "version": "0.7.44",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.43",
-    "@fastkit/icon-font": "0.7.43",
-    "@fastkit/tiny-logger": "0.7.43",
-    "@fastkit/vite-kit": "0.7.43",
-    "@fastkit/vue-kit": "0.7.43",
+    "@fastkit/color-scheme": "0.7.44",
+    "@fastkit/icon-font": "0.7.44",
+    "@fastkit/tiny-logger": "0.7.44",
+    "@fastkit/vite-kit": "0.7.44",
+    "@fastkit/vue-kit": "0.7.44",
     "@tiptap/extension-link": "^2.0.0-beta.36",
     "@tiptap/extension-underline": "^2.0.0-beta.23",
     "@tiptap/starter-kit": "^2.0.0-beta.183",

package/src/components/VForm/VForm.tsx

@@ -24,21 +24,18 @@ export const VForm = defineComponent({
     ...props,
     ...createControlProps(),
     ...defineSlotsProps<VFormSlots>(),
-    disableAutoScroll: Boolean,
+    // disableAutoScroll: Boolean,
   },
   emits,
   setup(props, ctx) {
     const vui = useVui();
     const nodeControl = useForm(props, ctx as any, {
       nodeType: VUI_FORM_SYMBOL,
-      onAutoValidateError: () => {
-        if (props.disableAutoScroll) return;
+      scrollToElement: (el) => {
         const scroller = getDocumentScroller();
-        const { firstInvalidEl } = nodeControl;
-        firstInvalidEl &&
-          scroller.toElement(firstInvalidEl, {
-            offset: vui.getAutoScrollToElementOffsetTop(),
-          });
+        return scroller.toElement(el, {
+          offset: vui.getAutoScrollToElementOffsetTop(),
+        });
       },
     });
     const classes = computed(() => {

package/src/components/VTabs/VTabs.tsx

@@ -19,6 +19,7 @@ import { VTab, VTabRef } from './VTab';
 import { VScroller, useVScrollerRef } from '@fastkit/vue-kit';
 import { ScrollResult } from '@fastkit/scroller';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+import { isPromise } from '@fastkit/helpers';
 
 export interface VTabsItemLabelSlotCtx {
   value: string;
@@ -30,6 +31,11 @@ export type VTabsItemLabelSlot = (ctx: VTabsItemLabelSlotCtx) => VNodeChild;
 
 export type VTabsRouterHandler = (value: string) => RouteLocationRaw;
 
+export type VTabsGuard = (
+  nextValue: string,
+  oldValue: string,
+) => boolean | void | undefined | Promise<boolean | void | undefined>;
+
 export interface VTabsItem {
   value: string;
   icon?: RawIconProp;
@@ -72,6 +78,7 @@ export const VTabs = defineComponent({
     }>(),
 
     color: String as PropType<ScopeName>,
+    onBeforeChange: Function as PropType<VTabsGuard>,
   },
   emits: {
     'update:modelValue': (newValue: string) => true,
@@ -167,7 +174,22 @@ export const VTabs = defineComponent({
       }
     }
 
-    function to(value: string) {
+    async function to(value: string) {
+      const { value: currentValue } = currentRef;
+      if (currentValue === value) {
+        return;
+      }
+      const { onBeforeChange } = props;
+      if (onBeforeChange) {
+        let result = onBeforeChange(value, currentRef.value);
+        if (isPromise(result)) {
+          result = await result;
+        }
+        console.log(result);
+        if (result === false) {
+          return;
+        }
+      }
       currentRef.value = value;
     }