@fastkit/vui 0.7.42 → 0.7.46

package/dist/vui.cjs.js

@@ -355,6 +355,9 @@ function defineFormSelectorComponent(opts) {
     },
 
     render() {
+      const {
+        selectorControl
+      } = this;
       return vue.createVNode(VFormControl, {
         "nodeControl": this.nodeControl,
         "focused": this.nodeControl.focused,
@@ -369,14 +372,20 @@ function defineFormSelectorComponent(opts) {
       }, { ...this.$slots,
         default: () => vue.createVNode("div", {
           "class": "v-form-selector__body"
-        }, [this.propItems.map(attrs => itemRenderer({
-          attrs: { ...attrs,
-            key: attrs.value
-          },
-          slots: {
-            default: () => attrs.label(this.selectorControl)
-          }
-        })), vueKit.renderSlotOrEmpty(this.$slots, 'default')])
+        }, [this.propItems.map(attrs => {
+          const selected = selectorControl.isSelected(attrs.value);
+          return itemRenderer({
+            selected,
+            control: selectorControl,
+            attrs: { ...attrs,
+              modelValue: selected,
+              key: attrs.value
+            },
+            slots: {
+              default: () => attrs.label(this.selectorControl)
+            }
+          });
+        }), vueKit.renderSlotOrEmpty(this.$slots, 'default')])
       });
     }
 
@@ -2753,8 +2762,8 @@ const VForm = vue.defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...vueKit.defineSlotsProps(),
-    disableAutoScroll: Boolean
+    ...vueKit.defineSlotsProps() // disableAutoScroll: Boolean,
+
   },
   emits,
 
@@ -2762,13 +2771,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 +2911,8 @@ const VTabs = vue.defineComponent({
      */
     withQuery: Boolean,
     ...vueUtils.defineSlotsProps(),
-    color: String
+    color: String,
+    onBeforeChange: Function
   },
   emits: {
     'update:modelValue': newValue => true,
@@ -3003,7 +3009,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

@@ -355,6 +355,9 @@ function defineFormSelectorComponent(opts) {
     },
 
     render() {
+      const {
+        selectorControl
+      } = this;
       return vue.createVNode(VFormControl, {
         "nodeControl": this.nodeControl,
         "focused": this.nodeControl.focused,
@@ -369,14 +372,20 @@ function defineFormSelectorComponent(opts) {
       }, { ...this.$slots,
         default: () => vue.createVNode("div", {
           "class": "v-form-selector__body"
-        }, [this.propItems.map(attrs => itemRenderer({
-          attrs: { ...attrs,
-            key: attrs.value
-          },
-          slots: {
-            default: () => attrs.label(this.selectorControl)
-          }
-        })), vueKit.renderSlotOrEmpty(this.$slots, 'default')])
+        }, [this.propItems.map(attrs => {
+          const selected = selectorControl.isSelected(attrs.value);
+          return itemRenderer({
+            selected,
+            control: selectorControl,
+            attrs: { ...attrs,
+              modelValue: selected,
+              key: attrs.value
+            },
+            slots: {
+              default: () => attrs.label(this.selectorControl)
+            }
+          });
+        }), vueKit.renderSlotOrEmpty(this.$slots, 'default')])
       });
     }
 
@@ -2753,8 +2762,8 @@ const VForm = vue.defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...vueKit.defineSlotsProps(),
-    disableAutoScroll: Boolean
+    ...vueKit.defineSlotsProps() // disableAutoScroll: Boolean,
+
   },
   emits,
 
@@ -2762,13 +2771,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 +2911,8 @@ const VTabs = vue.defineComponent({
      */
     withQuery: Boolean,
     ...vueUtils.defineSlotsProps(),
-    color: String
+    color: String,
+    onBeforeChange: Function
   },
   emits: {
     'update:modelValue': newValue => true,
@@ -3003,7 +3009,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

@@ -1164,7 +1164,10 @@ export declare interface DefineFormSelectorComponentOptions {
     nodeType: string;
     className: string;
     itemRenderer: (ctx: {
+        control: FormSelectorControl;
+        selected: boolean;
         attrs: ResolvedFormSelectorItemData & {
+            modelValue: boolean;
             key: string | number;
         };
         slots: {
@@ -4000,7 +4003,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 +4014,7 @@ export declare const VForm: DefineComponent<{
         default: boolean;
     };
     submiting: BooleanConstructor;
+    disableAutoScroll: BooleanConstructor;
     name: StringConstructor;
     modelValue: Prop<unknown, unknown>;
     tabindex: {
@@ -4047,6 +4050,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 +4091,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 +4102,7 @@ export declare const VForm: DefineComponent<{
         default: boolean;
     };
     submiting: BooleanConstructor;
+    disableAutoScroll: BooleanConstructor;
     name: StringConstructor;
     modelValue: Prop<unknown, unknown>;
     tabindex: {
@@ -4143,8 +4147,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 +7125,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 +7155,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 +7188,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

@@ -350,6 +350,9 @@ function defineFormSelectorComponent(opts) {
     },
 
     render() {
+      const {
+        selectorControl
+      } = this;
       return createVNode(VFormControl, {
         "nodeControl": this.nodeControl,
         "focused": this.nodeControl.focused,
@@ -364,14 +367,20 @@ function defineFormSelectorComponent(opts) {
       }, { ...this.$slots,
         default: () => createVNode("div", {
           "class": "v-form-selector__body"
-        }, [this.propItems.map(attrs => itemRenderer({
-          attrs: { ...attrs,
-            key: attrs.value
-          },
-          slots: {
-            default: () => attrs.label(this.selectorControl)
-          }
-        })), renderSlotOrEmpty(this.$slots, 'default')])
+        }, [this.propItems.map(attrs => {
+          const selected = selectorControl.isSelected(attrs.value);
+          return itemRenderer({
+            selected,
+            control: selectorControl,
+            attrs: { ...attrs,
+              modelValue: selected,
+              key: attrs.value
+            },
+            slots: {
+              default: () => attrs.label(this.selectorControl)
+            }
+          });
+        }), renderSlotOrEmpty(this.$slots, 'default')])
       });
     }
 
@@ -2748,8 +2757,8 @@ const VForm = defineComponent({
   name: 'VForm',
   props: { ...props,
     ...createControlProps(),
-    ...defineSlotsProps(),
-    disableAutoScroll: Boolean
+    ...defineSlotsProps() // disableAutoScroll: Boolean,
+
   },
   emits,
 
@@ -2757,13 +2766,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 +2906,8 @@ const VTabs = defineComponent({
      */
     withQuery: Boolean,
     ...defineSlotsProps$1(),
-    color: String
+    color: String,
+    onBeforeChange: Function
   },
   emits: {
     'update:modelValue': newValue => true,
@@ -2998,7 +3004,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.42",
+  "version": "0.7.46",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.42",
-    "@fastkit/icon-font": "0.7.42",
-    "@fastkit/tiny-logger": "0.7.42",
-    "@fastkit/vite-kit": "0.7.42",
-    "@fastkit/vue-kit": "0.7.42",
+    "@fastkit/color-scheme": "0.7.46",
+    "@fastkit/icon-font": "0.7.46",
+    "@fastkit/tiny-logger": "0.7.46",
+    "@fastkit/vite-kit": "0.7.46",
+    "@fastkit/vue-kit": "0.7.46",
     "@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;
     }
 

package/src/composables/form-selector.tsx

@@ -7,6 +7,7 @@ import {
   createFormSelectorSettings,
   FormControlSlots,
   useFormSelectorControl,
+  FormSelectorControl,
   ResolvedFormSelectorItemData,
   FormNodeControl,
   renderSlotOrEmpty,
@@ -20,7 +21,12 @@ export interface DefineFormSelectorComponentOptions {
   nodeType: string;
   className: string;
   itemRenderer: (ctx: {
-    attrs: ResolvedFormSelectorItemData & { key: string | number };
+    control: FormSelectorControl;
+    selected: boolean;
+    attrs: ResolvedFormSelectorItemData & {
+      modelValue: boolean;
+      key: string | number;
+    };
     slots: {
       default: TypedSlot<FormNodeControl>;
     };
@@ -60,6 +66,7 @@ export function defineFormSelectorComponent(
       };
     },
     render() {
+      const { selectorControl } = this;
       return (
         <VFormControl
           nodeControl={this.nodeControl}
@@ -81,17 +88,21 @@ export function defineFormSelectorComponent(
             ...this.$slots,
             default: () => (
               <div class="v-form-selector__body">
-                {this.propItems.map((attrs) =>
-                  itemRenderer({
+                {this.propItems.map((attrs) => {
+                  const selected = selectorControl.isSelected(attrs.value);
+                  return itemRenderer({
+                    selected,
+                    control: selectorControl,
                     attrs: {
                       ...attrs,
+                      modelValue: selected,
                       key: attrs.value,
                     },
                     slots: {
                       default: () => attrs.label(this.selectorControl),
                     },
-                  }),
-                )}
+                  });
+                })}
                 {renderSlotOrEmpty(this.$slots, 'default')}
               </div>
             ),