@fastkit/vui 0.8.9 → 0.8.10

package/dist/vui.mjs

@@ -1,7 +1,7 @@
-import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, resolveVNodeChildOrSlots, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
+import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, resolveVNodeChildOrSlots, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, useParentFormNode, useKeybord, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';
-import { inject, computed, provide, createVNode, mergeProps, defineComponent, Fragment, isVNode, ref, watch, onMounted, onBeforeUnmount, cloneVNode, withDirectives, createTextVNode, vShow, onBeforeUpdate, vModelSelect, Transition, reactive } from 'vue';
+import { inject, computed, provide, createVNode, mergeProps, defineComponent, Fragment, isVNode, ref, watch, onMounted, onBeforeUnmount, cloneVNode, withDirectives, createTextVNode, vShow, onBeforeUpdate, vModelSelect, nextTick, Transition, reactive } from 'vue';
 import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
 import { createPropsOptions as createPropsOptions$1, renderSlotOrEmpty as renderSlotOrEmpty$1, defineSlotsProps as defineSlotsProps$1, htmlAttributesPropOptions, navigationableInheritProps, useNavigationable, VLink, isFragment, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
@@ -2315,7 +2315,8 @@ const VOption = defineComponent({
     return createVNode("label", mergeProps({
       "class": classes,
       "onClick": selectorItemControl.handleClickElement,
-      "tabindex": selectorItemControl.tabindex
+      "tabindex": selectorItemControl.tabindex,
+      "data-value": selectorItemControl.propValue
     }, {
       'aria-disabled': selectorItemControl.isDisabled
     }), [createVNode("span", {
@@ -2476,6 +2477,9 @@ function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
+const ARROW_KEY_TYPES = useKeybord.Key(['ArrowUp', 'ArrowDown']);
+const CHOICE_KEY_TYPES = useKeybord.Key(['Enter', ' ']);
+const KEYBORD_EVENT_TYPES = useKeybord.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
 const {
   props: props$3,
   emits: emits$3
@@ -2497,6 +2501,7 @@ const VSelect = defineComponent({
   emits: emits$3,
 
   setup(props, ctx) {
+    const menuRef = ref(null);
     const menuOpened = ref(false);
 
     const showMenu = () => {
@@ -2559,6 +2564,107 @@ const VSelect = 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();
+        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);
+    };
+
+    useKeybord([{
+      key: KEYBORD_EVENT_TYPES,
+      handler: keybordEventHandler
+    }], {
+      autorun: true
+    });
     return { ...inputControl.expose(),
       ...control,
       iconName,
@@ -2567,7 +2673,9 @@ const VSelect = defineComponent({
       focus,
       showMenu,
       closeMenu,
-      renderSelections
+      renderSelections,
+      menuRef: () => menuRef,
+      clearKeyFocused
     };
   },
 
@@ -2618,15 +2726,8 @@ const VSelect = 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: () => [createVNode("div", {
           "class": ['v-select__body', this.classes]
@@ -5643,4 +5744,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { AVATAR_SIZES, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygColorExtension, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygLinter, WysiwygLinterBadWords, WysiwygLinterHeadingLevel, WysiwygLinterPlugin, WysiwygLinterPunctuation, WysiwygOrderedListTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, createWysiwygColorTool, createWysiwygExtension, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { ARROW_KEY_TYPES, AVATAR_SIZES, CHIP_SIZES, CHOICE_KEY_TYPES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, KEYBORD_EVENT_TYPES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygColorExtension, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygLinter, WysiwygLinterBadWords, WysiwygLinterHeadingLevel, WysiwygLinterPlugin, WysiwygLinterPunctuation, WysiwygOrderedListTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, createWysiwygColorTool, createWysiwygExtension, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.8.9",
-    "@fastkit/icon-font": "0.8.9",
-    "@fastkit/tiny-logger": "0.8.9",
-    "@fastkit/vite-kit": "0.8.9",
-    "@fastkit/vue-kit": "0.8.9",
+    "@fastkit/color-scheme": "0.8.10",
+    "@fastkit/icon-font": "0.8.10",
+    "@fastkit/tiny-logger": "0.8.10",
+    "@fastkit/vite-kit": "0.8.10",
+    "@fastkit/vue-kit": "0.8.10",
     "@tiptap/extension-link": "^2.0.0-beta.36",
     "@tiptap/extension-underline": "^2.0.0-beta.23",
     "@tiptap/extension-text-style": "^2.0.0-beta.23",

package/src/components/VOption/VOption.scss

@@ -36,7 +36,8 @@
   }
 
   &:hover,
-  &:focus-within {
+  &:focus-within,
+  &--key-focused {
     &::before {
       opacity: 0.12;
     }

package/src/components/VOption/VOption.tsx

@@ -46,6 +46,7 @@ export const VOption = defineComponent({
         class={classes}
         onClick={selectorItemControl.handleClickElement}
         tabindex={selectorItemControl.tabindex}
+        data-value={selectorItemControl.propValue}
         {...({
           'aria-disabled': selectorItemControl.isDisabled,
         } as any)}>

package/src/components/VSelect/VSelect.tsx

@@ -1,5 +1,13 @@
 import './VSelect.scss';
-import { ref, VNodeChild, defineComponent, PropType, computed } from 'vue';
+import {
+  ref,
+  Ref,
+  VNodeChild,
+  defineComponent,
+  PropType,
+  computed,
+  nextTick,
+} from 'vue';
 import {
   createFormSelectorSettings,
   useFormSelectorControl,
@@ -10,6 +18,7 @@ import {
   createPropsOptions,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
+  useKeybord,
 } from '@fastkit/vue-kit';
 import { VFormControl } from '../VFormControl';
 import {
@@ -29,6 +38,16 @@ import { VMenu } from '../kits';
 import { VOptionGroup } from '../VOptionGroup';
 import { VOption } from '../VOption';
 import { VButton } from '..';
+import { VMenuControl } from '@fastkit/vue-stack';
+
+export const ARROW_KEY_TYPES = useKeybord.Key(['ArrowUp', 'ArrowDown']);
+
+export const CHOICE_KEY_TYPES = useKeybord.Key(['Enter', ' ']);
+
+export const KEYBORD_EVENT_TYPES = useKeybord.Key([
+  ...ARROW_KEY_TYPES,
+  ...CHOICE_KEY_TYPES,
+]);
 
 const { props, emits } = createFormSelectorSettings();
 
@@ -49,6 +68,7 @@ export const VSelect = defineComponent({
   },
   emits,
   setup(props, ctx) {
+    const menuRef: Ref<{ stackMenuControl: VMenuControl } | null> = ref(null);
     const menuOpened = ref(false);
     const showMenu = () => {
       menuOpened.value = true;
@@ -112,9 +132,128 @@ export const VSelect = defineComponent({
           <span class="v-select__placeholder">{props.placeholder}</span>,
         );
       }
+
       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'),
+      ) as HTMLElement[];
+
+      els.forEach((el) => el.classList.remove('v-option--key-focused'));
+    };
+
+    const getItemElements = (): HTMLElement[] | void => {
+      const menu = menuRef.value;
+      if (!menu) return;
+
+      const bodyEl = menu.stackMenuControl.bodyRef.value;
+
+      if (!bodyEl) return;
+
+      const els = (
+        Array.from(bodyEl.querySelectorAll('.v-option')) as HTMLElement[]
+      ).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: KeyboardEvent) => {
+      const { key } = ev;
+      if (!menuOpened.value || !ARROW_KEY_TYPES.includes(key as any)) 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: number;
+      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: KeyboardEvent) => {
+      const { key } = ev;
+      if (!menuOpened.value || !CHOICE_KEY_TYPES.includes(key as any)) 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();
+        nextTick(() => {
+          currentEl.classList.add('v-option--key-focused');
+        });
+      }
+    };
+
+    const keybordEventHandler = (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(
+      [
+        {
+          key: KEYBORD_EVENT_TYPES,
+          handler: keybordEventHandler,
+        },
+      ],
+      { autorun: true },
+    );
+
     return {
       ...inputControl.expose(),
       ...control,
@@ -125,6 +264,8 @@ export const VSelect = defineComponent({
       showMenu,
       closeMenu,
       renderSelections,
+      menuRef: () => menuRef,
+      clearKeyFocused,
     };
   },
   render() {
@@ -179,15 +320,8 @@ export const VSelect = defineComponent({
               distance={0}
               alwaysRender
               v-model={this.menuOpened}
-              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}
               v-slots={{
                 activator: ({ attrs, control }) => [
                   <VControlField