@fastkit/vui 0.7.43 → 0.7.47

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/components/index.ts

@@ -1,7 +1,11 @@
 export * from './loading';
 export * from './kits';
+export * from './VSkeltonLoader';
+export * from './VBusyImage';
 export * from './VGrid';
 export * from './VPaper';
+export * from './VAvatar';
+export * from './VChip';
 export * from './VCard';
 export * from './VIcon';
 export * from './VButton';

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>
             ),

package/src/styles/variables.scss

@@ -30,6 +30,9 @@
   --typo-base-height: 1.5;
   --typo-base-spacing: 0em;
 
+  // medium
+  --typo-medium-weight: 500;
+
   // h1
   --typo-h1-size: 2.5rem;
   --typo-h1-weight: 500;
@@ -123,6 +126,22 @@
   // --typo-overline-height: 2.66;
   // --typo-overline-spacing: 0.08333em;
 
+  // =============================================
+  // chips
+  // =============================================
+  --chip-padding: 0.875em;
+  --chip-font-weight: var(--typo-base-weight);
+  --chip-height-xs: 16px;
+  --chip-font-size-xs: 10px;
+  --chip-height-sm: 24px;
+  --chip-font-size-sm: 12px;
+  --chip-height-md: 32px;
+  --chip-font-size-md: 14px;
+  --chip-height-lg: 54px;
+  --chip-font-size-lg: 16px;
+  --chip-height-xl: 66px;
+  --chip-font-size-xl: 18px;
+
   // =============================================
   // controls
   // =============================================