@fastkit/vui 0.8.6 → 0.8.9

package/dist/vui.cjs.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,13 @@ 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
+    }, {
+      'aria-disabled': selectorItemControl.isDisabled
+    }), [vue.createVNode("span", {
       "class": "v-option__label"
     }, [vueKit.renderSlotOrEmpty(this.$slots, 'default')])]);
   }
@@ -2470,6 +2478,10 @@ const VControlField = vue.defineComponent({
 
 });
 
+function _isSlot$8(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
 const {
   props: props$3,
   emits: emits$3
@@ -2573,18 +2585,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 +2623,20 @@ const VSelect = vue.defineComponent({
         "distance": 0,
         "alwaysRender": true,
         "modelValue": this.menuOpened,
-        "onUpdate:modelValue": $event => this.menuOpened = $event
+        "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);
+        }
       }, {
         default: () => [vue.createVNode("div", {
           "class": ['v-select__body', this.classes]
-        }, [children, propOptions])],
+        }, [children, propGroups])],
         activator: ({
           attrs,
           control
@@ -2617,6 +2649,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;

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,13 @@ 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
+    }, {
+      'aria-disabled': selectorItemControl.isDisabled
+    }), [vue.createVNode("span", {
       "class": "v-option__label"
     }, [vueKit.renderSlotOrEmpty(this.$slots, 'default')])]);
   }
@@ -2470,6 +2478,10 @@ const VControlField = vue.defineComponent({
 
 });
 
+function _isSlot$8(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
 const {
   props: props$3,
   emits: emits$3
@@ -2573,18 +2585,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 +2623,20 @@ const VSelect = vue.defineComponent({
         "distance": 0,
         "alwaysRender": true,
         "modelValue": this.menuOpened,
-        "onUpdate:modelValue": $event => this.menuOpened = $event
+        "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);
+        }
       }, {
         default: () => [vue.createVNode("div", {
           "class": ['v-select__body', this.classes]
-        }, [children, propOptions])],
+        }, [children, propGroups])],
         activator: ({
           attrs,
           control
@@ -2617,6 +2649,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;

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;
@@ -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);