@fastkit/vui 0.16.38 → 0.16.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.16.38",
+  "version": "0.16.39",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -46,29 +46,29 @@
   "dependencies": {
     "@fastkit/color-scheme": "1.0.10",
     "@fastkit/color-scheme-gen": "0.13.10",
-    "@fastkit/dom": "0.1.3",
     "@fastkit/helpers": "0.13.3",
-    "@fastkit/icon-font": "1.0.9",
+    "@fastkit/dom": "0.1.3",
     "@fastkit/media-match": "1.0.9",
     "@fastkit/media-match-gen": "0.13.10",
     "@fastkit/rules": "0.13.4",
-    "@fastkit/stylebase": "0.13.1",
-    "@fastkit/tiny-logger": "0.13.3",
     "@fastkit/vue-action": "0.2.8",
-    "@fastkit/vue-app-layout": "0.14.7",
-    "@fastkit/vue-body-scroll-lock": "0.1.8",
+    "@fastkit/icon-font": "1.0.9",
+    "@fastkit/vue-app-layout": "0.14.8",
+    "@fastkit/tiny-logger": "0.13.3",
+    "@fastkit/stylebase": "0.13.1",
     "@fastkit/vue-click-outside": "0.1.9",
-    "@fastkit/vue-form-control": "0.15.26",
     "@fastkit/vue-color-scheme": "0.14.8",
-    "@fastkit/vue-loading": "0.14.9",
-    "@fastkit/vue-keyboard": "0.1.3",
-    "@fastkit/vue-media-match": "0.13.10",
+    "@fastkit/vue-form-control": "0.15.26",
+    "@fastkit/vue-body-scroll-lock": "0.1.8",
     "@fastkit/vue-location": "0.1.8",
-    "@fastkit/vue-resize": "0.1.8",
-    "@fastkit/vue-scroller": "0.14.7",
+    "@fastkit/vue-media-match": "0.13.10",
+    "@fastkit/vue-keyboard": "0.1.3",
+    "@fastkit/vue-scroller": "0.14.8",
     "@fastkit/vue-stack": "0.15.20",
+    "@fastkit/vue-resize": "0.1.8",
     "@fastkit/vue-transitions": "0.1.9",
-    "@fastkit/vue-utils": "0.14.6"
+    "@fastkit/vue-utils": "0.14.6",
+    "@fastkit/vue-loading": "0.14.9"
   },
   "peerDependencies": {
     "vue": "^3.3.0",

package/src/components/VPagination/VPagination.tsx

@@ -222,8 +222,8 @@ export const VPagination = defineComponent({
       } else {
         number = false;
         const isPrev = source === 'prev';
-        const ammount = isPrev ? -1 : 1;
-        page = currentPage + ammount;
+        const amount = isPrev ? -1 : 1;
+        page = currentPage + amount;
         active = false;
         disabled = page < 1 || page > length;
       }

package/src/components/VTabs/VTabs.tsx

@@ -16,11 +16,7 @@ import { useVui } from '../../injections';
 import { defineSlots } from '@fastkit/vue-utils';
 import { RouteLocationRaw, RouteLocation } from 'vue-router';
 import { VTab, VTabRef } from './VTab';
-import {
-  VScroller,
-  useVScrollerRef,
-  ScrollResult,
-} from '@fastkit/vue-scroller';
+import { VScroller, ScrollResult } from '@fastkit/vue-scroller';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 import { isPromise } from '@fastkit/helpers';
 
@@ -93,7 +89,7 @@ export const VTabs = defineComponent({
     const vui = useVui();
 
     const internalValueRef = ref<string>(null as any);
-    const scrollerRef = useVScrollerRef();
+    const ScrollerRef = VScroller.$ref();
     const elRef = ref<HTMLElement>(null as any);
     let scrollResult: ScrollResult | undefined;
     const tabRefs = ref<VTabRef[]>([]);
@@ -214,7 +210,7 @@ export const VTabs = defineComponent({
       const $tab = tab.$el as HTMLElement;
       if (!$tab) return;
 
-      const scroller = scrollerRef.value;
+      const scroller = ScrollerRef.instance;
       if (!scroller) return;
       const container = scroller.scroller.element();
       if (!container) return;
@@ -233,17 +229,17 @@ export const VTabs = defineComponent({
       if (hiddenLeft > 0) hiddenLeft += autoScrollOffset;
       if (hiddenRight > 0) hiddenRight += autoScrollOffset;
 
-      let scrollAmmount = 0;
+      let scrollAmount = 0;
       if (hiddenRight > 0) {
-        scrollAmmount = hiddenRight;
+        scrollAmount = hiddenRight;
       }
       if (hiddenLeft > 0) {
-        scrollAmmount = -hiddenLeft;
+        scrollAmount = -hiddenLeft;
       }
 
-      if (Math.abs(scrollAmmount) > 0) {
+      if (Math.abs(scrollAmount) > 0) {
         cancelScroll();
-        scrollResult = scroller.scroller.by(scrollAmmount, 0, {
+        scrollResult = scroller.scroller.by(scrollAmount, 0, {
           duration: 150,
         });
       }
@@ -327,13 +323,12 @@ export const VTabs = defineComponent({
 
       return (
         <div class={['v-tabs', classes.value]} ref={elRef}>
-          <VScroller
+          <ScrollerRef
             class="v-tabs__scroller"
             containerClass="v-tabs__scroller__container"
-            guide
-            ref={scrollerRef}>
+            guide>
             <div class="v-tabs__content">{children}</div>
-          </VScroller>
+          </ScrollerRef>
         </div>
       );
     };