@fastkit/vui 0.8.8 → 0.8.11

package/dist/vui.cjs.prod.js

@@ -410,19 +410,24 @@ function defineFormSelectorComponent(opts) {
           "indeterminate": true,
           "class": "mr-1",
           "size": CONTROL_LOADING_SPINNER_SIZES[this.size || 'md']
-        }, null), this.loadingMessageRef]), 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)
-            }
-          });
+        }, null), this.loadingMessageRef]), this.propGroups.map(group => {
+          const {
+            items
+          } = group;
+          return vue.createVNode(vue.Fragment, null, [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)
+              }
+            });
+          })]);
         }), vueKit.renderSlotOrEmpty(this.$slots, 'default')])
       });
     }
@@ -447,7 +452,7 @@ function useElevation(props, opts = {}) {
     };
 }
 
-function _isSlot$e(s) {
+function _isSlot$f(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -468,7 +473,7 @@ const VSkeltonLoaderBone = vue.defineComponent({
       const TagName = props.tag;
       return vue.createVNode(TagName, vue.mergeProps(ctx.attrs, {
         "class": "v-skelton-loader-bone"
-      }), _isSlot$e(_slot = vueUtils.renderSlotOrEmpty(ctx.slots)) ? _slot : {
+      }), _isSlot$f(_slot = vueUtils.renderSlotOrEmpty(ctx.slots)) ? _slot : {
         default: () => [_slot]
       });
     };
@@ -1291,7 +1296,7 @@ const VButtonGroup = vue.defineComponent({
 
 });
 
-function _isSlot$d(s) {
+function _isSlot$e(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1540,7 +1545,7 @@ const VPagination = vue.defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$d(children) ? children : {
+        }, _isSlot$e(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -1696,7 +1701,7 @@ const VDrawerLayout = vue.defineComponent({
 
 });
 
-function _isSlot$c(s) {
+function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1733,7 +1738,7 @@ const VHero = vue.defineComponent({
         }, {
           default: () => [vue.createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$c(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$d(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           }), adornment && vue.createVNode("div", {
             "class": "v-hero__adornment"
@@ -1745,7 +1750,7 @@ const VHero = vue.defineComponent({
 
 });
 
-function _isSlot$b(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1786,7 +1791,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return vue.createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$b(label) ? label : {
+  }, _isSlot$c(label) ? label : {
     default: () => [label]
   });
 }
@@ -1941,7 +1946,7 @@ const VNavigationItem = vue.defineComponent({
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$b(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$c(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && vue.createVNode(vueUtils.VExpandTransition, null, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
@@ -2125,7 +2130,7 @@ const VCheckbox = vue.defineComponent({
 
 });
 
-function _isSlot$a(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -2137,7 +2142,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VCheckbox, attrs, _isSlot$a(slots) ? slots : {
+  }) => vue.createVNode(VCheckbox, attrs, _isSlot$b(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2189,7 +2194,7 @@ const VRadio = vue.defineComponent({
 
 });
 
-function _isSlot$9(s) {
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -2200,7 +2205,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VRadio, attrs, _isSlot$9(slots) ? slots : {
+  }) => vue.createVNode(VRadio, attrs, _isSlot$a(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2262,7 +2267,7 @@ const VSwitch = vue.defineComponent({
 
 });
 
-function _isSlot$8(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -2274,7 +2279,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VSwitch, attrs, _isSlot$8(slots) ? slots : {
+  }) => vue.createVNode(VSwitch, attrs, _isSlot$9(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2313,10 +2318,14 @@ const VOption = vue.defineComponent({
       selectorItemControl,
       classes
     } = this;
-    return vue.createVNode("label", {
+    return vue.createVNode("label", vue.mergeProps({
       "class": classes,
-      "onClick": selectorItemControl.handleClickElement
-    }, [vue.createVNode("span", {
+      "onClick": selectorItemControl.handleClickElement,
+      "tabindex": selectorItemControl.tabindex,
+      "data-value": selectorItemControl.propValue
+    }, {
+      'aria-disabled': selectorItemControl.isDisabled
+    }), [vue.createVNode("span", {
       "class": "v-option__label"
     }, [vueKit.renderSlotOrEmpty(this.$slots, 'default')])]);
   }
@@ -2470,6 +2479,13 @@ const VControlField = vue.defineComponent({
 
 });
 
+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
@@ -2491,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 = () => {
@@ -2553,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,
@@ -2561,7 +2679,9 @@ const VSelect = vue.defineComponent({
       focus,
       showMenu,
       closeMenu,
-      renderSelections
+      renderSelections,
+      menuRef: () => menuRef,
+      clearKeyFocused
     };
   },
 
@@ -2573,18 +2693,29 @@ const VSelect = vue.defineComponent({
       selectedItems
     } = this;
     const children = this.$slots.default && this.$slots.default() || [];
-    const propOptions = this.propItems.map(item => {
-      return vue.createVNode(VOption, {
+    const propGroups = this.propGroups.map(group => {
+      let _slot;
+
+      return vue.createVNode(VOptionGroup, {
+        "key": group.id,
+        "groupId": group.id,
+        "label": group.label(selectorControl),
+        "disabled": group.disabled
+      }, _isSlot$8(_slot = group.items.map(item => vue.createVNode(VOption, {
         "disabled": item.disabled,
         "value": item.value,
         "key": item.value
       }, {
         default: () => item.label(selectorControl)
+      }))) ? _slot : {
+        default: () => [_slot]
       });
     });
     return vue.createVNode(VFormControl, {
       "nodeControl": nodeControl,
-      "class": ['v-select', this.classes],
+      "class": ['v-select', this.classes, {
+        'v-select--multiple': this.multiple
+      }],
       "label": this.label,
       "hint": this.hint,
       "hinttip": this.hinttip,
@@ -2600,11 +2731,13 @@ const VSelect = vue.defineComponent({
         "distance": 0,
         "alwaysRender": true,
         "modelValue": this.menuOpened,
-        "onUpdate:modelValue": $event => this.menuOpened = $event
+        "onUpdate:modelValue": $event => this.menuOpened = $event,
+        "ref": this.menuRef(),
+        "onClose": this.clearKeyFocused
       }, {
         default: () => [vue.createVNode("div", {
           "class": ['v-select__body', this.classes]
-        }, [children, propOptions])],
+        }, [children, propGroups])],
         activator: ({
           attrs,
           control
@@ -2617,6 +2750,7 @@ const VSelect = vue.defineComponent({
           "endAdornment": this.endAdornment,
           "size": this.size,
           "focused": this.menuOpened,
+          "autoHeight": this.multiple,
           "onClick": ev => {
             if (this.canOperation && !control.isActive) {
               let t = ev.target;
@@ -5560,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,
@@ -5603,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();
-    };
+    });
   }
 
 }
@@ -5621,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

@@ -1833,12 +1833,25 @@ thead th {
   opacity: 0.1;
 }
 .v-option {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
   position: relative;
   display: flex;
   width: 100%;
-  padding: 0.375em 1em;
-  cursor: pointer;
-  user-select: none;
+  padding: 0.75em 1em;
+}
+.v-option::-moz-focus-inner {
+  border: 0;
+}
+.v-option, .v-option:hover, .v-option:focus {
+  text-decoration: none;
 }
 .v-option input {
   position: absolute;
@@ -1867,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 {
@@ -1884,9 +1897,27 @@ thead th {
 .v-option--has-not-value .v-option__label {
   font-style: italic;
 }
+.v-option[disabled], .v-option[tabindex="-1"] {
+  color: var(--palette-muted);
+  pointer-events: none;
+  opacity: 0.4;
+}
+.v-option[disabled]::before, .v-option[tabindex="-1"]::before {
+  opacity: 0 !important;
+}
 .v-option-group {
   display: block;
 }
+.v-option-group__label {
+  padding: 1em;
+  font-size: 0.875em;
+  color: var(--palette-caption);
+  opacity: 0.6;
+}
+.v-option-group--disabled .v-option-group__label {
+  color: var(--palette-muted);
+  opacity: 0.4;
+}
 .v-select__input {
   cursor: pointer;
 }
@@ -1914,6 +1945,17 @@ thead th {
   white-space: nowrap;
   vertical-align: middle;
 }
+.v-select--multiple .v-select__selections {
+  display: block;
+}
+.v-select--multiple .v-select__selections__inner {
+  display: block;
+  overflow: auto;
+  white-space: unset;
+}
+.v-select--multiple .v-control-field__body {
+  padding: 0.2em 0;
+}
 .v-select__placeholder {
   font-style: italic;
   color: var(--control-disabled-color);