@fastkit/vui 0.19.54 → 0.19.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.19.54",
+  "version": "0.19.55",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,31 +44,31 @@
     "src"
   ],
   "dependencies": {
-    "@fastkit/helpers": "^0.14.5",
-    "@fastkit/dom": "^0.2.6",
     "@fastkit/color-scheme": "^2.0.10",
+    "@fastkit/dom": "^0.2.6",
+    "@fastkit/helpers": "^0.14.5",
     "@fastkit/color-scheme-gen": "^0.14.13",
     "@fastkit/media-match": "^2.0.7",
-    "@fastkit/media-match-gen": "^0.14.13",
+    "@fastkit/vue-body-scroll-lock": "^0.2.12",
     "@fastkit/tiny-logger": "^0.14.5",
+    "@fastkit/vue-form-control": "^0.20.27",
+    "@fastkit/vue-click-outside": "^0.2.11",
+    "@fastkit/media-match-gen": "^0.14.13",
+    "@fastkit/vue-keyboard": "^0.2.5",
     "@fastkit/icon-font": "^2.0.7",
-    "@fastkit/vue-body-scroll-lock": "^0.2.11",
-    "@fastkit/rules": "^0.14.7",
+    "@fastkit/vue-location": "^0.4.1",
+    "@fastkit/vue-color-scheme": "^0.15.14",
+    "@fastkit/vue-app-layout": "^0.16.1",
+    "@fastkit/vue-resize": "^0.2.11",
+    "@fastkit/vue-stack": "^0.16.18",
+    "@fastkit/vue-transitions": "^0.2.12",
+    "@fastkit/vue-utils": "^0.15.11",
+    "@fastkit/vue-scroller": "^0.15.11",
     "@fastkit/stylebase": "^0.13.1",
-    "@fastkit/vue-click-outside": "^0.2.10",
-    "@fastkit/vue-app-layout": "^0.16.0",
-    "@fastkit/vue-keyboard": "^0.2.5",
-    "@fastkit/vue-color-scheme": "^0.15.13",
-    "@fastkit/vue-action": "^0.3.17",
-    "@fastkit/vue-form-control": "^0.20.26",
-    "@fastkit/vue-resize": "^0.2.10",
-    "@fastkit/vue-transitions": "^0.2.11",
-    "@fastkit/vue-stack": "^0.16.17",
-    "@fastkit/vue-loading": "^0.15.13",
-    "@fastkit/vue-utils": "^0.15.10",
-    "@fastkit/vue-location": "^0.4.0",
     "@fastkit/vue-media-match": "^0.14.10",
-    "@fastkit/vue-scroller": "^0.15.10"
+    "@fastkit/vue-action": "^0.3.18",
+    "@fastkit/rules": "^0.14.7",
+    "@fastkit/vue-loading": "^0.15.14"
   },
   "peerDependencies": {
     "vue": "^3.4.0",

package/src/components/VBusyImage/VBusyImage.tsx

@@ -177,8 +177,10 @@ export const VBusyImage = defineComponent({
     watch(
       () =>
         [ctx.attrs.src as string | null | undefined, mounted.value] as const,
-      ([src, _mounted]) => {
+      ([src, _mounted], before) => {
         if (!_mounted) return;
+        if (src === before?.[0] && !props.cover && !isPendingRef.value) return;
+
         coverImageRef.value = undefined;
         if (isAvailableSrc(src)) {
           loadStateRef.value = 'loading';

package/src/components/VButton/VButton.tsx

@@ -7,7 +7,11 @@ import {
   VNodeChild,
 } from 'vue';
 import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
-import { ExtractPropInput, createPropsOptions } from '@fastkit/vue-utils';
+import {
+  ExtractPropInput,
+  createPropsOptions,
+  withCtx,
+} from '@fastkit/vue-utils';
 import { VAction, actionableInheritProps } from '@fastkit/vue-action';
 import { useVui } from '../../injections';
 import { createControlProps, useControl } from '../../composables';
@@ -136,7 +140,7 @@ export const VButton = defineComponent({
         class={['v-button', classes.value]}
         guardInProgressClass="v-button--guard-in-progress"
         v-slots={{
-          default: () => (
+          default: withCtx(() => (
             <>
               <span class="v-button__content">
                 {startIcon.value}
@@ -152,7 +156,7 @@ export const VButton = defineComponent({
                 />
               )}
             </>
-          ),
+          )),
         }}
       />
     );

package/src/components/VCheckbox/VCheckbox.tsx

@@ -4,6 +4,7 @@ import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
 } from '@fastkit/vue-form-control';
+import { withCtxForSlots } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import {
   VUI_CHECKBOX_GROUP_SYMBOL,
@@ -61,7 +62,7 @@ export const VCheckbox = defineComponent({
         invalid={nodeControl.invalid}
         disabled={nodeControl.isDisabled}
         readonly={nodeControl.isReadonly}
-        v-slots={slots}
+        v-slots={withCtxForSlots(slots)}
       />
     );
   },

package/src/components/VFormControl/VFormControl.tsx

@@ -7,7 +7,7 @@ import {
   FormNodeWrapper,
   RequiredChipSource,
 } from '@fastkit/vue-form-control';
-import { defineSlots } from '@fastkit/vue-utils';
+import { defineSlots, typedSlotsWithCtx } from '@fastkit/vue-utils';
 import { useVuiColorProvider, useVui } from '../../injections';
 import type { VuiService } from '../../service';
 import { VIcon } from '../VIcon';
@@ -142,7 +142,7 @@ export const VFormControl = defineComponent({
                       ? _hinttipDelay
                       : undefined
                   }
-                  v-slots={{
+                  v-slots={typedSlotsWithCtx(VTooltip, {
                     activator: (tooltip) => (
                       <a
                         class="v-form-control__label__hinttip"
@@ -152,7 +152,7 @@ export const VFormControl = defineComponent({
                         {hinttip.tip}
                       </a>
                     ),
-                  }}>
+                  })}>
                   <div class="v-form-control__label__hinttip__hint">
                     {hinttip.hint}
                   </div>

package/src/components/VRadio/VRadio.tsx

@@ -4,6 +4,7 @@ import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
 } from '@fastkit/vue-form-control';
+import { withCtxForSlots } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import { VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL } from '../../injections';
 import { VCheckable } from '../VCheckable';
@@ -44,7 +45,7 @@ export const VRadio = defineComponent({
         invalid={nodeControl.invalid}
         disabled={nodeControl.isDisabled}
         readonly={nodeControl.isReadonly}
-        v-slots={slots}
+        v-slots={withCtxForSlots(slots)}
       />
     );
   },

package/src/components/VSelect/VSelect.tsx

@@ -20,6 +20,8 @@ import {
   createPropsOptions,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
+  withCtxForSlots,
+  withCtx,
 } from '@fastkit/vue-utils';
 import { useKeyboard } from '@fastkit/vue-keyboard';
 import { VStackActivatorPayload, MenuAPI } from '@fastkit/vue-stack';
@@ -403,8 +405,8 @@ export const VSelect = defineComponent({
           }}
           v-slots={{
             ...ctx.slots,
-            default: controlDefaultSlot,
-            endAdornment: endAdornmentSlot,
+            default: withCtx(controlDefaultSlot),
+            endAdornment: withCtx(endAdornmentSlot),
           }}
         />
       );
@@ -429,7 +431,7 @@ export const VSelect = defineComponent({
           v-model={menuOpened.value}
           ref={menuRef}
           onClose={clearKeyFocused}
-          v-slots={menuSlots}
+          v-slots={withCtxForSlots(menuSlots)}
         />
       );
 
@@ -445,7 +447,7 @@ export const VSelect = defineComponent({
           onClickLabel={handleClickLabel}
           v-slots={{
             ...ctx.slots,
-            default: defaultSlot,
+            default: withCtx(defaultSlot),
           }}
         />
       );

package/src/components/VSwitch/VSwitch.tsx

@@ -4,6 +4,7 @@ import {
   createFormSelectorItemSettings,
   useFormSelectorItemControl,
 } from '@fastkit/vue-form-control';
+import { withCtxForSlots } from '@fastkit/vue-utils';
 import { createControlProps, useControl } from '../../composables';
 import { VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL } from '../../injections';
 import { VCheckable } from '../VCheckable';
@@ -59,7 +60,7 @@ export const VSwitch = defineComponent({
         invalid={nodeControl.invalid}
         disabled={nodeControl.isDisabled}
         readonly={nodeControl.isReadonly}
-        v-slots={slots}
+        v-slots={withCtxForSlots(slots)}
       />
     );
   },

package/src/components/VTextField/VTextField.tsx

@@ -7,7 +7,7 @@ import {
   FormNodeWrapperSlots,
   TextInputNodeEmits,
 } from '@fastkit/vue-form-control';
-import { defineSlots, ExtractPropInput } from '@fastkit/vue-utils';
+import { defineSlots, ExtractPropInput, withCtx } from '@fastkit/vue-utils';
 import { VFormControl } from '../VFormControl';
 import {
   VControlField,
@@ -73,12 +73,12 @@ export const VTextField = defineComponent({
         size={control.size.value}
         v-slots={{
           ...ctx.slots,
-          default: () => [
+          default: withCtx(() => [
             inputControl.createInputElement({
               class: 'v-text-field__input__element',
             }),
             inputControl.createDatalist(),
-          ],
+          ]),
         }}
       />
     );
@@ -106,8 +106,8 @@ export const VTextField = defineComponent({
         onClickLabel={handleClickLabel}
         v-slots={{
           ...ctx.slots,
-          default: defaultSlot,
-          infoAppends: infoAppendsSlot,
+          default: withCtx(defaultSlot),
+          infoAppends: withCtx(infoAppendsSlot),
         }}
       />
     );

package/src/components/VTextarea/VTextarea.tsx

@@ -6,7 +6,7 @@ import {
   createFormNodeWrapperProps,
   FormNodeWrapperSlots,
 } from '@fastkit/vue-form-control';
-import { defineSlots } from '@fastkit/vue-utils';
+import { defineSlots, withCtx } from '@fastkit/vue-utils';
 import { VFormControl } from '../VFormControl';
 import {
   VControlField,
@@ -60,10 +60,11 @@ export const VTextarea = defineComponent({
         endAdornment={props.endAdornment}
         v-slots={{
           ...ctx.slots,
-          default: () =>
+          default: withCtx(() =>
             inputControl.createInputElement({
               class: 'v-textarea__input__element',
             }),
+          ),
         }}
       />
     );
@@ -88,8 +89,8 @@ export const VTextarea = defineComponent({
         }}
         v-slots={{
           ...ctx.slots,
-          default: defaultSlot,
-          infoAppends: infoAppendsSlot,
+          default: withCtx(defaultSlot),
+          infoAppends: withCtx(infoAppendsSlot),
         }}
       />
     );

package/src/components/VTooltip/VTooltip.tsx

@@ -1,6 +1,7 @@
 import './VTooltip.scss';
 
 import { defineComponent } from 'vue';
+import { typedSlotWithCtx } from '@fastkit/vue-utils';
 import { VMenu } from '../VMenu';
 
 export const VTooltip = defineComponent({
@@ -30,9 +31,9 @@ export const VTooltip = defineComponent({
           class="v-tooltip"
           v-slots={{
             ...ctx.slots,
-            default: (payload) => [
+            default: typedSlotWithCtx(VMenu, 'default', (payload) => [
               <span class="v-tooltip__inner">{defaultSlot?.(payload)}</span>,
-            ],
+            ]),
           }}
         />
       );

package/src/composables/form-selector.tsx

@@ -10,6 +10,7 @@ import {
   FormNodeControl,
 } from '@fastkit/vue-form-control';
 import {
+  withCtx,
   defineSlots,
   TypedSlot,
   VNodeChildOrSlot,
@@ -166,7 +167,7 @@ export function defineFormSelectorComponent(
           error={selectorControl.itemsLoadFailed}
           v-slots={{
             ...ctx.slots,
-            default: defaultSlot,
+            default: withCtx(defaultSlot),
           }}
         />
       );

package/src/service.tsx

@@ -14,7 +14,7 @@ import {
   VStackBuiltinActions,
   BUILTIN_ACTION_HANDLERS,
 } from '@fastkit/vue-stack';
-import { type VNodeChildOrSlot } from '@fastkit/vue-utils';
+import { type VNodeChildOrSlot, withCtx } from '@fastkit/vue-utils';
 import { type VueColorSchemePluginSettings } from '@fastkit/vue-color-scheme';
 import type { Router } from 'vue-router';
 import { RouterLink, useLink, UseLinkOptions } from 'vue-router';
@@ -385,10 +385,10 @@ export class VuiService {
           stack.resolve(_state);
         }}
         v-slots={{
-          default: (_form) => {
+          default: withCtx((_form: VueForm) => {
             form = _form;
             return slot(_state, { form, stack });
-          },
+          }),
         }}
       />
     ));