@fastkit/vui 0.8.9 → 0.8.12

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]
@@ -5593,15 +5694,7 @@ function mergeVuiPluginOptions(base, override) {
   return merged;
 }
 class VuiPlugin {
-  static installedApps = new Set();
-
   static install(app, opts) {
-    const {
-      installedApps
-    } = this;
-    if (installedApps.has(app)) return;
-    const unmountApp = app.unmount;
-    installedApps.add(app);
     const {
       colorScheme,
       stack,
@@ -5636,12 +5729,9 @@ class VuiPlugin {
     const $vui = new VuiService(opts, app.config.globalProperties.$vstack);
     app.provide(VuiInjectionKey, $vui);
     app.config.globalProperties.$vui = $vui;
-
-    app.unmount = function () {
-      installedApps.delete(app);
+    vueKit.onAppUnmount(app, () => {
       delete app.config.globalProperties.$vui;
-      unmountApp();
-    };
+    });
   }
 
 }
@@ -5654,11 +5744,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]
@@ -5593,15 +5694,7 @@ function mergeVuiPluginOptions(base, override) {
   return merged;
 }
 class VuiPlugin {
-  static installedApps = new Set();
-
   static install(app, opts) {
-    const {
-      installedApps
-    } = this;
-    if (installedApps.has(app)) return;
-    const unmountApp = app.unmount;
-    installedApps.add(app);
     const {
       colorScheme,
       stack,
@@ -5636,12 +5729,9 @@ class VuiPlugin {
     const $vui = new VuiService(opts, app.config.globalProperties.$vstack);
     app.provide(VuiInjectionKey, $vui);
     app.config.globalProperties.$vui = $vui;
-
-    app.unmount = function () {
-      installedApps.delete(app);
+    vueKit.onAppUnmount(app, () => {
       delete app.config.globalProperties.$vui;
-      unmountApp();
-    };
+    });
   }
 
 }
@@ -5654,11 +5744,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 {