@fastkit/vui 0.8.9 → 0.8.10

package/dist/vui.cjs.js

@@ -2321,7 +2321,8 @@ const VOption = vue.defineComponent({
     return vue.createVNode("label", vue.mergeProps({
       "class": classes,
       "onClick": selectorItemControl.handleClickElement,
-      "tabindex": selectorItemControl.tabindex
+      "tabindex": selectorItemControl.tabindex,
+      "data-value": selectorItemControl.propValue
     }, {
       'aria-disabled': selectorItemControl.isDisabled
     }), [vue.createVNode("span", {
@@ -2482,6 +2483,9 @@ function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
+const ARROW_KEY_TYPES = vueKit.useKeybord.Key(['ArrowUp', 'ArrowDown']);
+const CHOICE_KEY_TYPES = vueKit.useKeybord.Key(['Enter', ' ']);
+const KEYBORD_EVENT_TYPES = vueKit.useKeybord.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
 const {
   props: props$3,
   emits: emits$3
@@ -2503,6 +2507,7 @@ const VSelect = vue.defineComponent({
   emits: emits$3,
 
   setup(props, ctx) {
+    const menuRef = vue.ref(null);
     const menuOpened = vue.ref(false);
 
     const showMenu = () => {
@@ -2565,6 +2570,107 @@ const VSelect = vue.defineComponent({
       return children;
     };
 
+    const clearKeyFocused = () => {
+      const menu = menuRef.value;
+      if (!menu) return;
+      const bodyEl = menu.stackMenuControl.bodyRef.value;
+      if (!bodyEl) return;
+      const els = Array.from(bodyEl.querySelectorAll('.v-option'));
+      els.forEach(el => el.classList.remove('v-option--key-focused'));
+    };
+
+    const getItemElements = () => {
+      const menu = menuRef.value;
+      if (!menu) return;
+      const bodyEl = menu.stackMenuControl.bodyRef.value;
+      if (!bodyEl) return;
+      const els = Array.from(bodyEl.querySelectorAll('.v-option')).filter(el => {
+        if (el.tabIndex === -1) return false;
+        const disabled = el.getAttribute('disabled');
+        const ariaDisabled = el.getAttribute('aria-disabled');
+        if (ariaDisabled === 'true') return false;
+        return disabled == null || disabled === '';
+      });
+      if (!els.length) return;
+      return els;
+    };
+
+    const arrowKeyHandler = ev => {
+      const {
+        key
+      } = ev;
+      if (!menuOpened.value || !ARROW_KEY_TYPES.includes(key)) return;
+      const els = getItemElements();
+      if (!els) return;
+      const currentEl = els.find(el => el.classList.contains('v-option--key-focused'));
+      const currentIndex = currentEl && els.indexOf(currentEl);
+      let nextIndex;
+      const {
+        length
+      } = els;
+      const isUp = key === 'ArrowUp';
+
+      if (currentIndex == null) {
+        nextIndex = isUp ? length - 1 : 0;
+      } else {
+        const shiftAmount = key === 'ArrowUp' ? -1 : 1;
+        nextIndex = currentIndex + shiftAmount;
+
+        if (nextIndex < 0) {
+          nextIndex = length - 1;
+        } else if (nextIndex >= length) {
+          nextIndex = 0;
+        }
+      }
+
+      const nextEl = els[nextIndex];
+
+      if (nextEl) {
+        clearKeyFocused();
+        nextEl.classList.add('v-option--key-focused');
+        nextEl.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+          behavior: 'smooth'
+        });
+        ev.preventDefault();
+      }
+    };
+
+    const choiceKeyHandler = ev => {
+      const {
+        key
+      } = ev;
+      if (!menuOpened.value || !CHOICE_KEY_TYPES.includes(key)) return;
+      const els = getItemElements();
+      if (!els) return;
+      const currentEl = els.find(el => el.classList.contains('v-option--key-focused'));
+
+      if (currentEl) {
+        const ev = new MouseEvent('click', {
+          view: window,
+          bubbles: true,
+          cancelable: true
+        });
+        currentEl.dispatchEvent(ev);
+        ev.preventDefault();
+        vue.nextTick(() => {
+          currentEl.classList.add('v-option--key-focused');
+        });
+      }
+    };
+
+    const keybordEventHandler = ev => {
+      if (ARROW_KEY_TYPES.includes(ev.key)) return arrowKeyHandler(ev);
+      if (CHOICE_KEY_TYPES.includes(ev.key)) return choiceKeyHandler(ev);
+    };
+
+    vueKit.useKeybord([{
+      key: KEYBORD_EVENT_TYPES,
+      handler: keybordEventHandler
+    }], {
+      autorun: true
+    });
     return { ...inputControl.expose(),
       ...control,
       iconName,
@@ -2573,7 +2679,9 @@ const VSelect = vue.defineComponent({
       focus,
       showMenu,
       closeMenu,
-      renderSelections
+      renderSelections,
+      menuRef: () => menuRef,
+      clearKeyFocused
     };
   },
 
@@ -2624,15 +2732,8 @@ const VSelect = vue.defineComponent({
         "alwaysRender": true,
         "modelValue": this.menuOpened,
         "onUpdate:modelValue": $event => this.menuOpened = $event,
-        "itemElements": body => body.querySelectorAll('.v-option'),
-        "onChoiceItemElement": item => {
-          const ev = new MouseEvent('click', {
-            view: window,
-            bubbles: true,
-            cancelable: true
-          });
-          item.dispatchEvent(ev);
-        }
+        "ref": this.menuRef(),
+        "onClose": this.clearKeyFocused
       }, {
         default: () => [vue.createVNode("div", {
           "class": ['v-select__body', this.classes]
@@ -5654,11 +5755,14 @@ exports.VMenu = vueKit.VMenu;
 exports.VSnackbar = vueKit.VSnackbar;
 exports.VTooltip = vueKit.VTooltip;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
+exports.ARROW_KEY_TYPES = ARROW_KEY_TYPES;
 exports.AVATAR_SIZES = AVATAR_SIZES;
 exports.CHIP_SIZES = CHIP_SIZES;
+exports.CHOICE_KEY_TYPES = CHOICE_KEY_TYPES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
 exports.CONTROL_LOADING_SPINNER_SIZES = CONTROL_LOADING_SPINNER_SIZES;
 exports.CONTROL_SIZES = CONTROL_SIZES;
+exports.KEYBORD_EVENT_TYPES = KEYBORD_EVENT_TYPES;
 exports.PAGINATION_ALIGNS = PAGINATION_ALIGNS;
 exports.VApp = VApp;
 exports.VAvatar = VAvatar;

package/dist/vui.cjs.prod.js

@@ -2321,7 +2321,8 @@ const VOption = vue.defineComponent({
     return vue.createVNode("label", vue.mergeProps({
       "class": classes,
       "onClick": selectorItemControl.handleClickElement,
-      "tabindex": selectorItemControl.tabindex
+      "tabindex": selectorItemControl.tabindex,
+      "data-value": selectorItemControl.propValue
     }, {
       'aria-disabled': selectorItemControl.isDisabled
     }), [vue.createVNode("span", {
@@ -2482,6 +2483,9 @@ function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
+const ARROW_KEY_TYPES = vueKit.useKeybord.Key(['ArrowUp', 'ArrowDown']);
+const CHOICE_KEY_TYPES = vueKit.useKeybord.Key(['Enter', ' ']);
+const KEYBORD_EVENT_TYPES = vueKit.useKeybord.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
 const {
   props: props$3,
   emits: emits$3
@@ -2503,6 +2507,7 @@ const VSelect = vue.defineComponent({
   emits: emits$3,
 
   setup(props, ctx) {
+    const menuRef = vue.ref(null);
     const menuOpened = vue.ref(false);
 
     const showMenu = () => {
@@ -2565,6 +2570,107 @@ const VSelect = vue.defineComponent({
       return children;
     };
 
+    const clearKeyFocused = () => {
+      const menu = menuRef.value;
+      if (!menu) return;
+      const bodyEl = menu.stackMenuControl.bodyRef.value;
+      if (!bodyEl) return;
+      const els = Array.from(bodyEl.querySelectorAll('.v-option'));
+      els.forEach(el => el.classList.remove('v-option--key-focused'));
+    };
+
+    const getItemElements = () => {
+      const menu = menuRef.value;
+      if (!menu) return;
+      const bodyEl = menu.stackMenuControl.bodyRef.value;
+      if (!bodyEl) return;
+      const els = Array.from(bodyEl.querySelectorAll('.v-option')).filter(el => {
+        if (el.tabIndex === -1) return false;
+        const disabled = el.getAttribute('disabled');
+        const ariaDisabled = el.getAttribute('aria-disabled');
+        if (ariaDisabled === 'true') return false;
+        return disabled == null || disabled === '';
+      });
+      if (!els.length) return;
+      return els;
+    };
+
+    const arrowKeyHandler = ev => {
+      const {
+        key
+      } = ev;
+      if (!menuOpened.value || !ARROW_KEY_TYPES.includes(key)) return;
+      const els = getItemElements();
+      if (!els) return;
+      const currentEl = els.find(el => el.classList.contains('v-option--key-focused'));
+      const currentIndex = currentEl && els.indexOf(currentEl);
+      let nextIndex;
+      const {
+        length
+      } = els;
+      const isUp = key === 'ArrowUp';
+
+      if (currentIndex == null) {
+        nextIndex = isUp ? length - 1 : 0;
+      } else {
+        const shiftAmount = key === 'ArrowUp' ? -1 : 1;
+        nextIndex = currentIndex + shiftAmount;
+
+        if (nextIndex < 0) {
+          nextIndex = length - 1;
+        } else if (nextIndex >= length) {
+          nextIndex = 0;
+        }
+      }
+
+      const nextEl = els[nextIndex];
+
+      if (nextEl) {
+        clearKeyFocused();
+        nextEl.classList.add('v-option--key-focused');
+        nextEl.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+          behavior: 'smooth'
+        });
+        ev.preventDefault();
+      }
+    };
+
+    const choiceKeyHandler = ev => {
+      const {
+        key
+      } = ev;
+      if (!menuOpened.value || !CHOICE_KEY_TYPES.includes(key)) return;
+      const els = getItemElements();
+      if (!els) return;
+      const currentEl = els.find(el => el.classList.contains('v-option--key-focused'));
+
+      if (currentEl) {
+        const ev = new MouseEvent('click', {
+          view: window,
+          bubbles: true,
+          cancelable: true
+        });
+        currentEl.dispatchEvent(ev);
+        ev.preventDefault();
+        vue.nextTick(() => {
+          currentEl.classList.add('v-option--key-focused');
+        });
+      }
+    };
+
+    const keybordEventHandler = ev => {
+      if (ARROW_KEY_TYPES.includes(ev.key)) return arrowKeyHandler(ev);
+      if (CHOICE_KEY_TYPES.includes(ev.key)) return choiceKeyHandler(ev);
+    };
+
+    vueKit.useKeybord([{
+      key: KEYBORD_EVENT_TYPES,
+      handler: keybordEventHandler
+    }], {
+      autorun: true
+    });
     return { ...inputControl.expose(),
       ...control,
       iconName,
@@ -2573,7 +2679,9 @@ const VSelect = vue.defineComponent({
       focus,
       showMenu,
       closeMenu,
-      renderSelections
+      renderSelections,
+      menuRef: () => menuRef,
+      clearKeyFocused
     };
   },
 
@@ -2624,15 +2732,8 @@ const VSelect = vue.defineComponent({
         "alwaysRender": true,
         "modelValue": this.menuOpened,
         "onUpdate:modelValue": $event => this.menuOpened = $event,
-        "itemElements": body => body.querySelectorAll('.v-option'),
-        "onChoiceItemElement": item => {
-          const ev = new MouseEvent('click', {
-            view: window,
-            bubbles: true,
-            cancelable: true
-          });
-          item.dispatchEvent(ev);
-        }
+        "ref": this.menuRef(),
+        "onClose": this.clearKeyFocused
       }, {
         default: () => [vue.createVNode("div", {
           "class": ['v-select__body', this.classes]
@@ -5654,11 +5755,14 @@ exports.VMenu = vueKit.VMenu;
 exports.VSnackbar = vueKit.VSnackbar;
 exports.VTooltip = vueKit.VTooltip;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
+exports.ARROW_KEY_TYPES = ARROW_KEY_TYPES;
 exports.AVATAR_SIZES = AVATAR_SIZES;
 exports.CHIP_SIZES = CHIP_SIZES;
+exports.CHOICE_KEY_TYPES = CHOICE_KEY_TYPES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
 exports.CONTROL_LOADING_SPINNER_SIZES = CONTROL_LOADING_SPINNER_SIZES;
 exports.CONTROL_SIZES = CONTROL_SIZES;
+exports.KEYBORD_EVENT_TYPES = KEYBORD_EVENT_TYPES;
 exports.PAGINATION_ALIGNS = PAGINATION_ALIGNS;
 exports.VApp = VApp;
 exports.VAvatar = VAvatar;

package/dist/vui.css

@@ -1880,7 +1880,7 @@ thead th {
 .v-option::after {
   background: var(--palette-primary);
 }
-.v-option:hover::before, .v-option:focus-within::before {
+.v-option:hover::before, .v-option:focus-within::before, .v-option--key-focused::before {
   opacity: 0.12;
 }
 .v-option__label {

package/dist/vui.d.ts

@@ -92,6 +92,7 @@ import { ValidationResult } from '@fastkit/vue-kit';
 import { VDialog } from '@fastkit/vue-kit';
 import { VDialogProps } from '@fastkit/vue-kit';
 import { VMenu } from '@fastkit/vue-kit';
+import { VMenuControl } from '@fastkit/vue-stack';
 import { VNode } from 'vue';
 import { VNodeChild } from 'vue';
 import { VNodeChildOrSlot } from '@fastkit/vue-kit';
@@ -109,6 +110,8 @@ import { WritableComputedRef } from 'vue';
 
 declare type ARGS = Record<string, unknown> & VNodeProps;
 
+export declare const ARROW_KEY_TYPES: ("ArrowDown" | "ArrowUp")[];
+
 export declare const AVATAR_SIZES: readonly ["sm", "md", "lg"];
 
 export declare type AvatarSize = typeof AVATAR_SIZES[number];
@@ -139,6 +142,8 @@ export declare const CHIP_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
 
 export declare type ChipSize = typeof CHIP_SIZES[number];
 
+export declare const CHOICE_KEY_TYPES: ("Enter" | " ")[];
+
 export declare function configureDataTableDefaults(defaults: Partial<DataTableDefaults>): void;
 
 export declare interface ContentSwitcherSeeTopOptions {
@@ -1638,6 +1643,8 @@ declare interface InputBoxSlots {
 
 export declare function installVuiPlugin(app: App, opts: VuiPluginOptions): App<any>;
 
+export declare const KEYBORD_EVENT_TYPES: ("Enter" | " " | "ArrowDown" | "ArrowUp")[];
+
 export declare const listTileEmits: {
     changeActive: (isActive: boolean) => boolean;
 };
@@ -12931,6 +12938,10 @@ export declare const VSelect: DefineComponent<{
     showMenu: () => void;
     closeMenu: () => void;
     renderSelections: (selectedItems: FormSelectorItemControl[]) => VNodeChild[];
+    menuRef: () => Ref<{
+        stackMenuControl: VMenuControl;
+    } | null>;
+    clearKeyFocused: () => void;
     parentControl: ControlProvider | null;
     size: ComputedRef<"sm" | "md" | "lg">;
     classes: ComputedRef<any>;
@@ -13153,6 +13164,10 @@ export declare const VSelect: DefineComponent<{
         showMenu: () => void;
         closeMenu: () => void;
         renderSelections: (selectedItems: FormSelectorItemControl[]) => VNodeChild[];
+        menuRef: () => Ref<{
+            stackMenuControl: VMenuControl;
+        } | null>;
+        clearKeyFocused: () => void;
         parentControl: ControlProvider | null;
         size: ComputedRef<"sm" | "md" | "lg">;
         classes: ComputedRef<any>;