@fastkit/vui 0.18.33 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.18.33",
+  "version": "0.19.0",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -30,48 +30,39 @@
     },
     "./*": "./dist/*"
   },
-  "main": "./dist/vui.mjs",
-  "types": "./dist/vui.d.ts",
-  "typesVersions": {
-    "*": {
-      ".": [
-        "./dist/vui.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@fastkit/color-scheme": "1.0.15",
-    "@fastkit/dom": "0.1.8",
-    "@fastkit/color-scheme-gen": "0.13.15",
-    "@fastkit/helpers": "0.13.8",
-    "@fastkit/icon-font": "1.0.10",
-    "@fastkit/media-match": "1.0.10",
-    "@fastkit/rules": "0.13.10",
-    "@fastkit/stylebase": "0.13.1",
-    "@fastkit/tiny-logger": "0.13.8",
-    "@fastkit/vue-action": "0.2.21",
-    "@fastkit/media-match-gen": "0.13.15",
-    "@fastkit/vue-body-scroll-lock": "0.1.19",
-    "@fastkit/vue-click-outside": "0.1.20",
-    "@fastkit/vue-app-layout": "0.14.22",
-    "@fastkit/vue-color-scheme": "0.14.19",
-    "@fastkit/vue-form-control": "0.19.19",
-    "@fastkit/vue-location": "0.1.26",
-    "@fastkit/vue-loading": "0.14.20",
-    "@fastkit/vue-scroller": "0.14.21",
-    "@fastkit/vue-keyboard": "0.1.8",
-    "@fastkit/vue-media-match": "0.13.15",
-    "@fastkit/vue-resize": "0.1.19",
-    "@fastkit/vue-utils": "0.14.17",
-    "@fastkit/vue-stack": "0.15.53",
-    "@fastkit/vue-transitions": "0.1.23"
+    "@fastkit/dom": "0.2.0",
+    "@fastkit/color-scheme-gen": "0.14.0",
+    "@fastkit/color-scheme": "2.0.0",
+    "@fastkit/helpers": "0.14.0",
+    "@fastkit/media-match": "2.0.0",
+    "@fastkit/icon-font": "2.0.0",
+    "@fastkit/tiny-logger": "0.14.0",
+    "@fastkit/rules": "0.14.0",
+    "@fastkit/vue-action": "0.3.0",
+    "@fastkit/media-match-gen": "0.14.0",
+    "@fastkit/vue-body-scroll-lock": "0.2.0",
+    "@fastkit/vue-app-layout": "0.15.0",
+    "@fastkit/vue-click-outside": "0.2.0",
+    "@fastkit/vue-keyboard": "0.2.0",
+    "@fastkit/vue-form-control": "0.20.0",
+    "@fastkit/vue-loading": "0.15.0",
+    "@fastkit/vue-location": "0.2.0",
+    "@fastkit/vue-color-scheme": "0.15.0",
+    "@fastkit/vue-media-match": "0.14.0",
+    "@fastkit/vue-resize": "0.2.0",
+    "@fastkit/vue-scroller": "0.15.0",
+    "@fastkit/vue-stack": "0.16.0",
+    "@fastkit/vue-transitions": "0.2.0",
+    "@fastkit/vue-utils": "0.15.0",
+    "@fastkit/stylebase": "0.13.1"
   },
   "peerDependencies": {
-    "vue": "^3.3.0",
+    "vue": "^3.4.0",
     "vue-router": "^4.2.0"
   },
   "buildOptions": {

package/src/components/VBusyImage/VBusyImage.tsx

@@ -172,21 +172,26 @@ export const VBusyImage = defineComponent({
     });
 
     let booted = false;
+    const mounted = ref(false);
 
     watch(
-      () => ctx.attrs.src as string | null | undefined,
-      (value) => {
+      () =>
+        [ctx.attrs.src as string | null | undefined, mounted.value] as const,
+      ([src, _mounted]) => {
+        if (!_mounted) return;
         coverImageRef.value = undefined;
-        if (isAvailableSrc(value)) {
+        if (isAvailableSrc(src)) {
           loadStateRef.value = 'loading';
           if (props.cover) {
-            loadImage(value)
+            loadImage(src)
               .then((image) => {
                 coverImageRef.value = image;
                 setManualState('load');
               })
-              .catch((err) => {
+              .catch((_err) => {
                 setManualState('error');
+                // eslint-disable-next-line no-console
+                console.error(_err);
               });
           }
         } else {
@@ -209,6 +214,7 @@ export const VBusyImage = defineComponent({
     };
 
     onMounted(() => {
+      mounted.value = true;
       if (booted || props.cover) return;
 
       const image = nodeRef.value;

package/src/components/VButton/VButton.tsx

@@ -122,7 +122,6 @@ export const VButton = defineComponent({
       spacer.value ? `v-button--spacer-${spacer.value}` : undefined,
       `v-button--${control.size.value}`,
       `v-button--align-${props.align}`,
-      'clickable',
       {
         'v-button--loading': isLoading.value,
         'v-button--icon': !!icon.value,

package/src/components/VCard/VCard.tsx

@@ -27,11 +27,7 @@ export const VCard = defineComponent({
       const attrs = {
         ..._props.value,
         ...ctx.attrs,
-        class: [
-          'v-card',
-          ctx.attrs.class,
-          typeof ctx.attrs.onClick === 'function' && 'clickable',
-        ],
+        class: ['v-card', ctx.attrs.class],
         tag: hasLink ? VAction : 'div',
       };
       if (props.disabled) {

package/src/components/VListTile/VListTile.tsx

@@ -77,7 +77,6 @@ export const VListTile = defineComponent({
 
       return [
         color.value.className,
-        'clickable',
         {
           'v-list-tile--plain': !hasColor,
           'v-list-tile--has-color': hasColor,

package/src/plugin.tsx

@@ -14,6 +14,7 @@ import { VueColorSchemePlugin } from '@fastkit/vue-color-scheme';
 import { installVueAppLayout } from '@fastkit/vue-app-layout';
 import { onAppUnmount } from '@fastkit/vue-utils';
 import { getDocumentScroller } from '@fastkit/vue-scroller';
+import { setDefaultActionableClassName } from '@fastkit/vue-action';
 import {
   VuiService,
   VuiServiceOptions,
@@ -22,6 +23,7 @@ import {
   VuiInjectionKey,
 } from './service';
 
+setDefaultActionableClassName('clickable');
 const scroller = getDocumentScroller();
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface