@fastkit/vui 0.8.8 → 0.8.9

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';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';
-import { inject, computed, provide, createVNode, mergeProps, defineComponent, isVNode, ref, watch, onMounted, onBeforeUnmount, cloneVNode, withDirectives, createTextVNode, Fragment, 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, 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';
@@ -404,19 +404,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 createVNode(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)
+              }
+            });
+          })]);
         }), renderSlotOrEmpty(this.$slots, 'default')])
       });
     }
@@ -441,7 +446,7 @@ function useElevation(props, opts = {}) {
     };
 }
 
-function _isSlot$e(s) {
+function _isSlot$f(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -462,7 +467,7 @@ const VSkeltonLoaderBone = defineComponent({
       const TagName = props.tag;
       return createVNode(TagName, mergeProps(ctx.attrs, {
         "class": "v-skelton-loader-bone"
-      }), _isSlot$e(_slot = renderSlotOrEmpty$1(ctx.slots)) ? _slot : {
+      }), _isSlot$f(_slot = renderSlotOrEmpty$1(ctx.slots)) ? _slot : {
         default: () => [_slot]
       });
     };
@@ -1285,7 +1290,7 @@ const VButtonGroup = defineComponent({
 
 });
 
-function _isSlot$d(s) {
+function _isSlot$e(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1534,7 +1539,7 @@ const VPagination = defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$d(children) ? children : {
+        }, _isSlot$e(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -1690,7 +1695,7 @@ const VDrawerLayout = defineComponent({
 
 });
 
-function _isSlot$c(s) {
+function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1727,7 +1732,7 @@ const VHero = defineComponent({
         }, {
           default: () => [createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$c(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$d(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           }), adornment && createVNode("div", {
             "class": "v-hero__adornment"
@@ -1739,7 +1744,7 @@ const VHero = defineComponent({
 
 });
 
-function _isSlot$b(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1780,7 +1785,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$b(label) ? label : {
+  }, _isSlot$c(label) ? label : {
     default: () => [label]
   });
 }
@@ -1935,7 +1940,7 @@ const VNavigationItem = defineComponent({
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$b(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$c(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && createVNode(VExpandTransition, null, {
         default: () => [withDirectives(createVNode("div", {
@@ -2119,7 +2124,7 @@ const VCheckbox = defineComponent({
 
 });
 
-function _isSlot$a(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -2131,7 +2136,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VCheckbox, attrs, _isSlot$a(slots) ? slots : {
+  }) => createVNode(VCheckbox, attrs, _isSlot$b(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2183,7 +2188,7 @@ const VRadio = defineComponent({
 
 });
 
-function _isSlot$9(s) {
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -2194,7 +2199,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VRadio, attrs, _isSlot$9(slots) ? slots : {
+  }) => createVNode(VRadio, attrs, _isSlot$a(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2256,7 +2261,7 @@ const VSwitch = defineComponent({
 
 });
 
-function _isSlot$8(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -2268,7 +2273,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VSwitch, attrs, _isSlot$8(slots) ? slots : {
+  }) => createVNode(VSwitch, attrs, _isSlot$9(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2307,10 +2312,13 @@ const VOption = defineComponent({
       selectorItemControl,
       classes
     } = this;
-    return createVNode("label", {
+    return createVNode("label", mergeProps({
       "class": classes,
-      "onClick": selectorItemControl.handleClickElement
-    }, [createVNode("span", {
+      "onClick": selectorItemControl.handleClickElement,
+      "tabindex": selectorItemControl.tabindex
+    }, {
+      'aria-disabled': selectorItemControl.isDisabled
+    }), [createVNode("span", {
       "class": "v-option__label"
     }, [renderSlotOrEmpty(this.$slots, 'default')])]);
   }
@@ -2464,6 +2472,10 @@ const VControlField = defineComponent({
 
 });
 
+function _isSlot$8(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
 const {
   props: props$3,
   emits: emits$3
@@ -2567,18 +2579,29 @@ const VSelect = defineComponent({
       selectedItems
     } = this;
     const children = this.$slots.default && this.$slots.default() || [];
-    const propOptions = this.propItems.map(item => {
-      return createVNode(VOption, {
+    const propGroups = this.propGroups.map(group => {
+      let _slot;
+
+      return createVNode(VOptionGroup, {
+        "key": group.id,
+        "groupId": group.id,
+        "label": group.label(selectorControl),
+        "disabled": group.disabled
+      }, _isSlot$8(_slot = group.items.map(item => createVNode(VOption, {
         "disabled": item.disabled,
         "value": item.value,
         "key": item.value
       }, {
         default: () => item.label(selectorControl)
+      }))) ? _slot : {
+        default: () => [_slot]
       });
     });
     return 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,
@@ -2594,11 +2617,20 @@ const VSelect = 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: () => [createVNode("div", {
           "class": ['v-select__body', this.classes]
-        }, [children, propOptions])],
+        }, [children, propGroups])],
         activator: ({
           attrs,
           control
@@ -2611,6 +2643,7 @@ const VSelect = 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.8.8",
-    "@fastkit/icon-font": "0.8.8",
-    "@fastkit/tiny-logger": "0.8.8",
-    "@fastkit/vite-kit": "0.8.8",
-    "@fastkit/vue-kit": "0.8.8",
+    "@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",
     "@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

@@ -1,12 +1,13 @@
 @use '../../styles/core.scss';
 
 .v-option {
+  @include core.button-reset();
+
   position: relative;
   display: flex;
   width: 100%;
-  padding: 0.375em 1em;
-  cursor: pointer;
-  user-select: none;
+  padding: 0.75em 1em;
+  // font-size: 0.875em;
 
   input {
     @include core.hidden-input-element;
@@ -58,4 +59,15 @@
   &--has-not-value &__label {
     font-style: italic;
   }
+
+  &[disabled],
+  &[tabindex='-1'] {
+    color: var(--palette-muted);
+    pointer-events: none;
+    opacity: 0.4;
+
+    &::before {
+      opacity: 0 !important;
+    }
+  }
 }

package/src/components/VOption/VOption.tsx

@@ -42,7 +42,13 @@ export const VOption = defineComponent({
   render() {
     const { selectorItemControl, classes } = this;
     return (
-      <label class={classes} onClick={selectorItemControl.handleClickElement}>
+      <label
+        class={classes}
+        onClick={selectorItemControl.handleClickElement}
+        tabindex={selectorItemControl.tabindex}
+        {...({
+          'aria-disabled': selectorItemControl.isDisabled,
+        } as any)}>
         <span class="v-option__label">
           {renderSlotOrEmpty(this.$slots, 'default')}
         </span>

package/src/components/VOptionGroup/VOptionGroup.scss

@@ -1,3 +1,16 @@
 .v-option-group {
   display: block;
+
+  &__label {
+    padding: 1em;
+    // padding: 0.875em 1em;
+    font-size: 0.875em;
+    color: var(--palette-caption);
+    opacity: 0.6;
+  }
+
+  &--disabled &__label {
+    color: var(--palette-muted);
+    opacity: 0.4;
+  }
 }

package/src/components/VSelect/VSelect.scss

@@ -58,6 +58,20 @@
       white-space: nowrap;
       vertical-align: middle;
     }
+
+    .v-select--multiple & {
+      display: block;
+    }
+
+    .v-select--multiple &__inner {
+      display: block;
+      overflow: auto;
+      white-space: unset;
+    }
+  }
+
+  &--multiple .v-control-field__body {
+    padding: 0.2em 0;
   }
 
   &__placeholder {

package/src/components/VSelect/VSelect.tsx

@@ -26,6 +26,7 @@ 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 '..';
 
@@ -129,13 +130,24 @@ export const VSelect = defineComponent({
   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 +155,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 +179,15 @@ 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);
+              }}
               v-slots={{
                 activator: ({ attrs, control }) => [
                   <VControlField
@@ -173,6 +200,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 +289,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>