@fastkit/vui 0.8.8 → 0.8.11

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 {
@@ -26,8 +35,19 @@ import {
 import { VUI_SELECT_SYMBOL, useVui } from '../../injections';
 import { VIcon } from '../VIcon';
 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();
 
@@ -48,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;
@@ -111,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,
@@ -124,18 +264,31 @@ export const VSelect = defineComponent({
       showMenu,
       closeMenu,
       renderSelections,
+      menuRef: () => menuRef,
+      clearKeyFocused,
     };
   },
   render() {
     const { nodeControl, selectorControl, selectorItems, selectedItems } = this;
     const children = (this.$slots.default && this.$slots.default()) || [];
-    const propOptions = this.propItems.map((item) => {
+    const propGroups = this.propGroups.map((group) => {
       return (
-        <VOption disabled={item.disabled} value={item.value} key={item.value}>
-          {{
-            default: () => item.label(selectorControl),
-          }}
-        </VOption>
+        <VOptionGroup
+          key={group.id}
+          groupId={group.id}
+          label={group.label(selectorControl)}
+          disabled={group.disabled}>
+          {group.items.map((item) => (
+            <VOption
+              disabled={item.disabled}
+              value={item.value}
+              key={item.value}>
+              {{
+                default: () => item.label(selectorControl),
+              }}
+            </VOption>
+          ))}
+        </VOptionGroup>
       );
     });
 
@@ -143,7 +296,13 @@ export const VSelect = defineComponent({
       <VFormControl
         nodeControl={nodeControl}
         // focused={this.nodeControl.focused}
-        class={['v-select', this.classes]}
+        class={[
+          'v-select',
+          this.classes,
+          {
+            'v-select--multiple': this.multiple,
+          },
+        ]}
         label={this.label}
         hint={this.hint}
         hinttip={this.hinttip}
@@ -161,6 +320,8 @@ export const VSelect = defineComponent({
               distance={0}
               alwaysRender
               v-model={this.menuOpened}
+              ref={this.menuRef()}
+              onClose={this.clearKeyFocused}
               v-slots={{
                 activator: ({ attrs, control }) => [
                   <VControlField
@@ -173,6 +334,7 @@ export const VSelect = defineComponent({
                     // tabindex={this.computedTabindex}
                     size={this.size}
                     focused={this.menuOpened}
+                    autoHeight={this.multiple}
                     onClick={(ev) => {
                       if (this.canOperation && !control.isActive) {
                         let t = ev.target as HTMLElement;
@@ -261,7 +423,7 @@ export const VSelect = defineComponent({
               }}>
               <div class={['v-select__body', this.classes]}>
                 {children}
-                {propOptions}
+                {propGroups}
               </div>
             </VMenu>
           ),

package/src/composables/form-selector.tsx

@@ -8,7 +8,7 @@ import {
   FormControlSlots,
   useFormSelectorControl,
   FormSelectorControl,
-  ResolvedFormSelectorItemData,
+  ResolvedFormSelectorItem,
   FormNodeControl,
   renderSlotOrEmpty,
   VNodeChildOrSlot,
@@ -28,7 +28,7 @@ export interface DefineFormSelectorComponentOptions {
   itemRenderer: (ctx: {
     control: FormSelectorControl;
     selected: boolean;
-    attrs: ResolvedFormSelectorItemData & {
+    attrs: ResolvedFormSelectorItem & {
       modelValue: boolean;
       key: string | number;
     };
@@ -70,7 +70,7 @@ export function defineFormSelectorComponent(
       });
       const control = useControl(props);
       const vui = useVui();
-      const loadingMessageRef = computed(() => {
+      const loadingMessageRef = computed<VNodeChild | undefined>(() => {
         const slot = resolveVNodeChildOrSlots(
           props.loadingMessage,
           vui.setting('loadingMessage'),
@@ -135,20 +135,29 @@ export function defineFormSelectorComponent(
                     {this.loadingMessageRef}
                   </div>
                 )}
-                {this.propItems.map((attrs) => {
-                  const selected = selectorControl.isSelected(attrs.value);
-                  return itemRenderer({
-                    selected,
-                    control: selectorControl,
-                    attrs: {
-                      ...attrs,
-                      modelValue: selected,
-                      key: attrs.value,
-                    },
-                    slots: {
-                      default: () => attrs.label(this.selectorControl),
-                    },
-                  });
+                {this.propGroups.map((group) => {
+                  const { items } = group;
+                  return (
+                    <>
+                      {items.map((attrs) => {
+                        const selected = selectorControl.isSelected(
+                          attrs.value,
+                        );
+                        return itemRenderer({
+                          selected,
+                          control: selectorControl,
+                          attrs: {
+                            ...attrs,
+                            modelValue: selected,
+                            key: attrs.value,
+                          },
+                          slots: {
+                            default: () => attrs.label(this.selectorControl),
+                          },
+                        });
+                      })}
+                    </>
+                  );
                 })}
                 {renderSlotOrEmpty(this.$slots, 'default')}
               </div>

package/src/plugin.tsx

@@ -10,6 +10,7 @@ import {
   installVueStackPlugin,
   VueStackServiceOptions,
   VueColorSchemePlugin,
+  onAppUnmount,
 } from '@fastkit/vue-kit';
 import { VButton } from './components/VButton';
 
@@ -46,14 +47,7 @@ declare module '@vue/runtime-core' {
 }
 
 export class VuiPlugin {
-  static readonly installedApps = new Set<App>();
-
   static install(app: App, opts: VuiPluginOptions) {
-    const { installedApps } = this;
-    if (installedApps.has(app)) return;
-    const unmountApp = app.unmount;
-    installedApps.add(app);
-
     const { colorScheme, stack, uiSettings } = opts;
 
     // ColorScheme
@@ -88,11 +82,9 @@ export class VuiPlugin {
     app.provide(VuiInjectionKey, $vui);
     app.config.globalProperties.$vui = $vui;
 
-    app.unmount = function () {
-      installedApps.delete(app);
+    onAppUnmount(app, () => {
       delete app.config.globalProperties.$vui;
-      unmountApp();
-    };
+    });
   }
 }