@fastkit/vui 0.8.18 → 0.9.0

package/src/components/VSelect/VSelect.tsx

@@ -18,7 +18,7 @@ import {
   createPropsOptions,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
-  useKeybord,
+  useKeyboard,
 } from '@fastkit/vue-kit';
 import { VFormControl } from '../VFormControl';
 import {
@@ -40,11 +40,11 @@ import { VOption } from '../VOption';
 import { VButton } from '..';
 import { VMenuControl } from '@fastkit/vue-stack';
 
-export const ARROW_KEY_TYPES = useKeybord.Key(['ArrowUp', 'ArrowDown']);
+export const ARROW_KEY_TYPES = useKeyboard.Key(['ArrowUp', 'ArrowDown']);
 
-export const CHOICE_KEY_TYPES = useKeybord.Key(['Enter', ' ']);
+export const CHOICE_KEY_TYPES = useKeyboard.Key(['Enter', ' ']);
 
-export const KEYBORD_EVENT_TYPES = useKeybord.Key([
+export const KEYBORD_EVENT_TYPES = useKeyboard.Key([
   ...ARROW_KEY_TYPES,
   ...CHOICE_KEY_TYPES,
 ]);
@@ -59,12 +59,18 @@ export const VSelect = defineComponent({
     ...createControlFieldProps(),
     ...createControlFieldProviderProps(),
     ...createControlProps(),
-    ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+    ...defineSlotsProps<
+      FormControlSlots &
+        InputBoxSlots & {
+          selection: { item: FormSelectorItemControl; index: number };
+        }
+    >(),
     ...createPropsOptions({
       placeholder: String,
       loadingMessage: {} as PropType<VNodeChildOrSlot>,
       failedToLoadItemsMessage: {} as PropType<VNodeChildOrSlot>,
     }),
+    closeOnNavigation: Boolean,
   },
   emits,
   setup(props, ctx) {
@@ -109,6 +115,7 @@ export const VSelect = defineComponent({
     };
 
     const renderSelections = (selectedItems: FormSelectorItemControl[]) => {
+      const selectionSlot = ctx.slots.selection;
       const children: VNodeChild[] = [];
       if (inputControl.itemsLoadFailed) {
         children.push(
@@ -125,7 +132,10 @@ export const VSelect = defineComponent({
           if (index > 0) {
             children.push(vui.selectionSeparator());
           }
-          children.push(item.renderDefaultSlot());
+          const child = selectionSlot
+            ? selectionSlot({ item, index })
+            : item.renderDefaultSlot();
+          children.push(child);
         });
       } else if (props.placeholder != null) {
         children.push(
@@ -239,16 +249,16 @@ export const VSelect = defineComponent({
       }
     };
 
-    const keybordEventHandler = (ev: KeyboardEvent) => {
+    const keyboardEventHandler = (ev: KeyboardEvent) => {
       if (ARROW_KEY_TYPES.includes(ev.key as any)) return arrowKeyHandler(ev);
       if (CHOICE_KEY_TYPES.includes(ev.key as any)) return choiceKeyHandler(ev);
     };
 
-    useKeybord(
+    useKeyboard(
       [
         {
           key: KEYBORD_EVENT_TYPES,
-          handler: keybordEventHandler,
+          handler: keyboardEventHandler,
         },
       ],
       { autorun: true },
@@ -317,6 +327,7 @@ export const VSelect = defineComponent({
             <VMenu
               width="fit"
               maxWidth="fit"
+              closeOnNavigation={this.closeOnNavigation}
               distance={0}
               alwaysRender
               v-model={this.menuOpened}

package/src/service.tsx

@@ -12,7 +12,7 @@ import {
   resolveVStackDynamicInput,
 } from '@fastkit/vue-kit';
 import type { Router } from 'vue-router';
-import { RouterLink } from 'vue-router';
+import { RouterLink, useLink, UseLinkOptions } from 'vue-router';
 import { LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { VForm } from './components/VForm';
 import { VTextField, TextFieldInput } from './components/VTextField';
@@ -20,6 +20,8 @@ import { VueForm, FormControlHinttipDelay } from '@fastkit/vue-form-control';
 import { getDocumentScroller } from '@fastkit/vue-scroller';
 import { ControlSize } from './schemes';
 
+export type UseLinkResult = ReturnType<typeof useLink>;
+
 export interface VuiFormPromptSettings<
   T extends { [key: string]: any } = { [key: string]: any },
 > extends Partial<VDialogProps> {
@@ -133,7 +135,8 @@ export type VuiVNodeResolver = () => VNodeChild;
 
 export interface VuiServiceOptions {
   router: Router;
-  RouterLink?: typeof RouterLink;
+  RouterLink?: any;
+  useLink?: (props: UseLinkOptions) => UseLinkResult;
   colorScheme: VueColorSchemePluginSettings;
   uiSettings: VuiServiceUISettings;
   icons: VuiServiceIconSettings;
@@ -183,6 +186,7 @@ export class VuiService {
   readonly router: Router;
   readonly location: LocationService;
   readonly stack: VueStackService;
+  readonly useLink: typeof useLink;
 
   get scroller() {
     return getDocumentScroller();
@@ -207,6 +211,7 @@ export class VuiService {
       router: this.router,
     });
     this.stack = stackService;
+    this.useLink = options.useLink || useLink;
   }
 
   configure(options?: Partial<VuiServiceOptions>) {